From a5b20bccd62021d1495925de5720cb43d4d8ab01 Mon Sep 17 00:00:00 2001
From: Mickael Kerjean <mickael@kerjean.me>
Date: Sun, 16 Apr 2023 11:29:10 +1000
Subject: [PATCH] fix (players): revamp audio player

---
 client/assets/img/play.svg               |  2 +-
 client/assets/img/volume.svg             |  2 +-
 client/index.js                          |  9 +-----
 client/pages/viewerpage/audioplayer.js   | 40 +++++++++++++-----------
 client/pages/viewerpage/audioplayer.scss | 10 +++---
 5 files changed, 30 insertions(+), 33 deletions(-)

diff --git a/client/assets/img/play.svg b/client/assets/img/play.svg
index 51771555..ae3bea0e 100644
--- a/client/assets/img/play.svg
+++ b/client/assets/img/play.svg
@@ -1,3 +1,3 @@
-<svg viewBox="0 0 24 24" fill="none" stroke="#6f6f6f" stroke-width="2.5" xmlns="http://www.w3.org/2000/svg">
+<svg viewBox="0 0 24 24" fill="none" stroke="#6f6f6f" stroke-width="2" xmlns="http://www.w3.org/2000/svg">
   <path d="M 8.9281724,2.5998029 C 8.2216149,2.1532873 7.0721143,2.3920918 7.0718277,3.4001971 l -0.00489,17.2050459 c -2.889e-4,1.015715 1.2121979,1.160372 1.8661307,0.789513 C 23.97574,8.7289856 23.930152,14.104463 8.9281584,2.5998029 Z" />
 </svg>
diff --git a/client/assets/img/volume.svg b/client/assets/img/volume.svg
index 15ddb20c..39360626 100644
--- a/client/assets/img/volume.svg
+++ b/client/assets/img/volume.svg
@@ -1,4 +1,4 @@
-<svg viewBox="0 0 24 24" fill="none" stroke="#6f6f6f" stroke-width="2.5" xmlns="http://www.w3.org/2000/svg">
+<svg viewBox="0 0 24 24" fill="none" stroke="#6f6f6f" stroke-width="2" xmlns="http://www.w3.org/2000/svg">
   <path d="m 16.350225,8.193787 c 1.449626,1.933559 1.449626,5.678884 0,7.612446" />
   <path d="m 19.612703,4.3875644 c 4.336919,4.1411704 4.363014,11.1109086 0,15.2248876" />
   <path d="M 1.1253356,15.217897 V 8.7810328 c 0,-0.6242205 0.4871967,-1.1309917 1.0874923,-1.1309917 H 6.1125748 A 1.0657422,1.0657422 0 0 0 6.8814318,7.3183562 L 10.143909,3.6339328 c 0.68512,-0.713395 1.856345,-0.2077111 1.856345,0.8003942 v 15.131368 c 0,1.015715 -1.185362,1.517045 -1.866131,0.789513 L 6.882519,16.69145 A 1.0657422,1.0657422 0 0 0 6.1038748,16.349975 H 2.2128279 c -0.6002956,0 -1.0874923,-0.506768 -1.0874923,-1.132078 z" />
diff --git a/client/index.js b/client/index.js
index cea0775f..ae2240e9 100644
--- a/client/index.js
+++ b/client/index.js
@@ -143,12 +143,5 @@ function setup_translation() {
 }
 
 function setup_chromecast() {
-    if (!CONFIG.enable_chromecast) {
-        return Promise.resolve();
-    } else if (typeof window.chrome === undefined) {
-        return Promise.resolve();
-	} else if (location.hostname === "localhost" || location.hostname === "127.0.0.1") {
-        return Promise.resolve();
-    }
-    return Chromecast.init();
+    return Promise.resolve();
 }
diff --git a/client/pages/viewerpage/audioplayer.js b/client/pages/viewerpage/audioplayer.js
index afd8a8bd..3242e9d9 100644
--- a/client/pages/viewerpage/audioplayer.js
+++ b/client/pages/viewerpage/audioplayer.js
@@ -60,9 +60,16 @@ export function AudioPlayer({ filename, data }) {
     }, []);
 
     useEffect(() => {
+        const onKeyPressHandler = (e) => {
+            if(e.code !== "Space") {
+                return
+            }
+            isPlaying ? onPause(e) : onPlay(e);
+        };
+
         window.addEventListener("keypress", onKeyPressHandler);
         return () => window.removeEventListener("keypress", onKeyPressHandler);
-    }, [isPlaying])
+    }, [isPlaying, isChromecast])
 
     const chromecastSetup = (event) => {
         switch (event.sessionState) {
@@ -71,15 +78,17 @@ export function AudioPlayer({ filename, data }) {
             setIsLoading(true);
             break;
         case cast.framework.SessionState.SESSION_START_FAILED:
-            notify.send(t("Cannot establish a connection"), "error");
             setIsChromecast(false);
             setIsLoading(false);
             break;
         case cast.framework.SessionState.SESSION_STARTED:
             chromecastHandler()
+            const session = Chromecast.session();
+            if (session) setVolume(session.getVolume() * 100);
             break;
         case cast.framework.SessionState.SESSION_ENDING:
             wavesurfer.current.setMute(false);
+            setVolume(wavesurfer.current.getVolume() * 100);
             setIsChromecast(false);
             break;
         }
@@ -138,7 +147,7 @@ export function AudioPlayer({ filename, data }) {
         const context = Chromecast.context();
         if (!context) return;
         chromecastAlive(false);
-        document.getElementById("chromecast-target").append(document.createElement("google-cast-launcher"));        
+        document.getElementById("chromecast-target").append(document.createElement("google-cast-launcher"));
         context.addEventListener(
             cast.framework.CastContextEventType.SESSION_STATE_CHANGED,
             chromecastSetup,
@@ -155,13 +164,6 @@ export function AudioPlayer({ filename, data }) {
         };
     }, []);
 
-    const onKeyPressHandler = (e) => {
-        if(e.code !== "Space") {
-            return
-        }
-        isPlaying ? onPause(e) : onPlay(e);
-    };
-
     const onPlay = (e) => {
         e.preventDefault();
         e.stopPropagation();
@@ -184,8 +186,7 @@ export function AudioPlayer({ filename, data }) {
         }
     };
 
-    const onVolumeChange = (e) => {
-        const v = Number(e.target.value);
+    const onVolumeChange = (v) => {
         settings_put("volume", v);
         setVolume(v);
         if (isChromecast) {
@@ -194,10 +195,14 @@ export function AudioPlayer({ filename, data }) {
         } else wavesurfer.current.setVolume(v / 100);
     };
     const onVolumeClick = () => {
-        onVolumeChange({ target: { value: 0 }});
+        onVolumeChange(0);
     };
 
-    const formatTimecode = (seconds) => (new Date(seconds * 1000).toISOString().substr(11, 8));
+    const formatTimecode = (seconds) => {
+        return String(parseInt(seconds / 60)).padStart(2, "0") +
+            ":"+
+            String(parseInt(seconds % 60)).padStart(2, "0");
+    };
 
     return (
         <div className="component_audioplayer">
@@ -238,13 +243,12 @@ export function AudioPlayer({ filename, data }) {
                                     )
                                 }
                                 <span><Icon onClick={onVolumeClick} name={volume === 0 ? "volume_mute" : volume < 50 ? "volume_low" : "volume"}/></span>
-                                <input onChange={onVolumeChange} type="range" min="0" max="100" value={volume}/>
+                                <input onChange={(e) => onVolumeChange(Number(e.target.value) || 0)} type="range" min="0" max="100" value={volume}/>
                             </div>
-
                             <div className="timecode">
-                                <span id="currentTime">00:00:00</span>
+                                <span id="currentTime">{ formatTimecode(0) }</span>
                                 <span id="separator" className="no-select">/</span>
-                                <span id="totalDuration">00:00:00</span>
+                                <span id="totalDuration">{ formatTimecode(0) }</span>
                             </div>
                         </div>
                     </div>
diff --git a/client/pages/viewerpage/audioplayer.scss b/client/pages/viewerpage/audioplayer.scss
index 9dd34531..ec8f8148 100644
--- a/client/pages/viewerpage/audioplayer.scss
+++ b/client/pages/viewerpage/audioplayer.scss
@@ -45,24 +45,24 @@
                     }
                     input[type="range"] {
                         margin-left: -5px;
+                        width: 60px;
                         cursor: pointer;
-                        width: 100%;
                         outline: none;
                         -webkit-appearance: none;
                         background: transparent;
 
                         &::-webkit-slider-thumb {
                             -webkit-appearance: none;
-                            height: 15px;
-                            width: 15px;
+                            height: 12px;
+                            width: 12px;
                             border: none;
                             border-radius: 50%;
                             background: #6f6f6f;
-                            margin-top: -6px;
+                            margin-top: -5px;
                         }
                         &::-webkit-slider-runnable-track {
                             width: 100%;
-                            height: 3px;
+                            height: 2px;
                             background-color: #6f6f6f;
                             border-radius: 2px;
                         }