added player audio animation

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;
+    }
   }