added player audio animation

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 />