diff options
Diffstat (limited to 'apps/Player/components/Video.js')
| -rw-r--r-- | apps/Player/components/Video.js | 44 |
1 files changed, 27 insertions, 17 deletions
diff --git a/apps/Player/components/Video.js b/apps/Player/components/Video.js index 521bf86..de00761 100644 --- a/apps/Player/components/Video.js +++ b/apps/Player/components/Video.js @@ -1,4 +1,5 @@ import { useState, useEffect, useRef } from 'react' +import Image from 'next/image' import Splash from 'components/Splash' import fetchJson from 'helpers/fetchJson' @@ -28,6 +29,7 @@ const Video = ({ playlist, current, setCurrent, audioOnly = false, setDetails }) .then(v => { setData({ id: v.videoDetails.videoId, + thumbnail: v.videoDetails.thumbnails[0].url, formats: v.formats .filter(v => !v.isHLS && v.hasAudio && (audioOnly ? !v.hasVideo : v.hasVideo)) .sort((a, b) => audioOnly ? a.audioBitrate < b.audioBitrate : a.bitrate < b.bitrate) @@ -48,23 +50,31 @@ const Video = ({ playlist, current, setCurrent, audioOnly = false, setDetails }) return ( data && !loading ? ( - <video - onEnded={handleEnd} - ref={videoEl} - key={data.id} - controls - playsInline - webkit-playsInline - autoPlay - style={audioOnly ? { backgroundImage: 'url(' + playlist[current].thumbnail + ')' } : {}} - > - { - data.formats.map(s => ( - <source src={s.url} type={s.mimeType} key={s.url} /> - )) - } - Your browser does not support the video tag. - </video> + <> + <video + onEnded={handleEnd} + ref={videoEl} + key={data.id} + controls + playsInline + webkit-playsInline + autoPlay + > + { + data.formats.map(s => ( + <source src={s.url} type={s.mimeType} key={s.url} /> + )) + } + Your browser does not support the video tag. + </video> + {audioOnly && ( + <> + <div /> + <span style={{ backgroundImage: `url(${data.thumbnail})` }} /> + <Image src='/phono.png' height='160' width='90' /> + </> + )} + </> ) : ( <Splash /> |