diff options
Diffstat (limited to 'apps')
| -rw-r--r-- | apps/Player/components/Video.js | 44 | ||||
| -rw-r--r-- | apps/Player/styles/_player.scss | 80 |
2 files changed, 107 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 /> diff --git a/apps/Player/styles/_player.scss b/apps/Player/styles/_player.scss index 7c74775..39c79e8 100644 --- a/apps/Player/styles/_player.scss +++ b/apps/Player/styles/_player.scss @@ -3,6 +3,27 @@ position: relative; background-color: #000; + @keyframes phono { + 0% { + transform: translate(25%, -65%) rotate(-15deg); + } + .5% { + transform: translate(25%, -65%) rotate(0deg); + } + 100% { + transform: translate(25%, -65%) rotate(18deg); + } + } + + @keyframes playing { + from { + transform: translate(-50%, -50%) rotate(0deg); + } + to { + transform: translate(-50%, -50%) rotate(360deg); + } + } + & > div:nth-of-type(1) { height: 100%; width: 100%; @@ -13,6 +34,65 @@ width: 100%; object-fit: contain; } + + > span { + position: absolute; + top: 45%; + left: 50%; + height: 9em; + width: 9em; + border-radius: 50%; + animation: playing 15s linear infinite; + background-size: cover; + background-position: center; + border: 3px solid #555; + + &:before { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + content: ''; + height: 2em; + width: 2em; + border-radius: 50%; + background-color: #eee; + border: 2px solid #333; + } + + &:after { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + content: ''; + height: .25em; + width: .25em; + border-radius: 50%; + background-color: #000; + } + } + + & > div:nth-child(2) { + position: absolute; + top: 45%; + left: 50%; + background-color: #333; + border: 2px solid #222; + height: 10em; + width: 13em; + transform: translate(-44%, -62%); + border-radius: .5em; + } + + & > div:nth-child(4) { + transform-origin: 70% 22%; + position: absolute!important; + top: 45%; + left: 50%; + transform: translate(25%, -65%); + animation: phono 360s forwards; + } } |