Fix: Timer not working on Apple devices, Sound not preloaded, Sound

played multiple times

src/index.php

@@ -98,7 +98,7 @@ class SyncedTimer
         if (($this->_basepath !== '' && strpos($_SERVER['REQUEST_URI'], $this->_basepath) === false) || $_SERVER['REQUEST_URI'] === $this->_basepath)
             $this->_path = "/";
         else
-            $this->_path = str_replace($this->_basepath, "", $_SERVER['REQUEST_URI']);
+            $this->_path = str_replace($this->_basepath, "", parse_url($_SERVER["REQUEST_URI"], PHP_URL_PATH));
     }
 
     private function _redirect($path)

src/static/js/synced-timer.js

@@ -47,26 +47,38 @@ document.addEventListener('alpine:init' , () => {
         scheduleNextRequest() {
             setTimeout(() => {
                 let requestUrl;
-                const requestId = Date.now();
+                // Add a request Id to be able to identify this request later on
-                fetch(`/api/${username}#${requestId}`)
+                fetch(`/api/${username}?id=${parseInt(performance.now())}`)
                     .then((response) => {
                         requestUrl = response.url
                         return response.json()
                     })
                     .then((data) => {
-                    if(data && data.status === 200) {
+                        this.handleRequestFinished(data, requestUrl)
-                        const performanceEntry = performance.getEntriesByName(`${requestUrl}#${requestId}`)[0];
-                        console.log(performanceEntry)
-                        const requestDuration = performanceEntry.responseEnd - performanceEntry.requestStart;
-                        this.timeOffsetToServer = performanceEntry.responseEnd - data.data.currentServerTime + (requestDuration / 2);
-                        console.log(requestDuration, "offset: ", this.timeOffsetToServer)
-                    }
 
                         this.lastResponse = data
                         this.scheduleNextRequest()
                     });
             }, 1000)
+        },
+
+        handleRequestFinished(data, requestName) {
+            if (!data || data.status !== 200) return;
+
+            // identify request using its id
+            const performanceEntry = performance.getEntriesByName(requestName)[0];
+            if (!performanceEntry) {
+                // retry
+                console.warn("Could not find performance entry, discarding...")
+                return
             }
+
+            console.log(performanceEntry)
+            const requestDuration = performanceEntry.responseEnd - performanceEntry.requestStart;
+            this.timeOffsetToServer = performanceEntry.responseEnd - data.data.currentServerTime + (requestDuration / 2);
+            console.log(requestDuration, "offset: ", this.timeOffsetToServer)
+
+        },
     })
 
     Alpine.store("audioPlayback", {
@@ -75,6 +87,12 @@ document.addEventListener('alpine:init' , () => {
         isDisabledByUser: false,
         isDisabledByServer: true,
         audioPlayer: null,
+        replayLocked: false,
+        sounds: {
+            silence: '/static/sound/silence.mp3',
+            countdown: '/static/sound/countdown.mp3',
+            beep: '/static/sound/beep.mp3'
+        },
 
         init() {
             this.audioPlayer = new Audio('/static/sound/silence.mp3');
@@ -104,6 +122,10 @@ document.addEventListener('alpine:init' , () => {
             this.audioPlayer.play().then(() => {
                 this.isAvailable = true
                 this.hasBeenTested = true
+
+                this.preloadSound(this.sounds.beep)
+                this.preloadSound(this.sounds.countdown)
+
             }).catch((error) => {
                 console.warn("Audio permission not granted!")
                 this.isAvailable = false
@@ -112,11 +134,41 @@ document.addEventListener('alpine:init' , () => {
         },
 
         playSound(soundFile) {
-            if(!this.audioPlayer.paused || !this.isAvailable || this.isDisabledByUser || this.isDisabledByServer) {
+            if (!this.audioPlayer.paused || !this.isAvailable || this.isDisabledByUser || this.isDisabledByServer || this.replayLocked) {
                 return;
             }
+            if (this.audioPlayer.src !== soundFile) {
                 this.audioPlayer.src = soundFile;
+            }
+            this.replayLocked = true;
             this.audioPlayer.play();
+        },
+
+        preloadSound(soundFile) {
+            if (this.audioPlayer.src === soundFile) {
+                return;
+            }
+            console.log(`Preloading sound ${soundFile}`)
+            this.audioPlayer.src = soundFile;
+            this.audioPlayer.load();
+        },
+
+        playCountdown() {
+            this.playSound(this.sounds.countdown)
+        },
+        preloadCountdown() {
+            this.preloadSound(this.sounds.countdown)
+        },
+
+        playBeep() {
+            this.playSound(this.sounds.beep);
+        },
+        preloadBeep() {
+            this.preloadSound(this.sounds.beep);
+        },
+
+        unlockReplay() {
+            this.replayLocked = false;
         }
     })
 
@@ -167,10 +219,25 @@ function getTimerText(remaningSeconds) {
 }
 
 function playTimerSound(remaningSeconds) {
-    if(parseInt(remaningSeconds) === 5) {
+    switch (parseInt(remaningSeconds)) {
-        Alpine.store("audioPlayback").playSound('/static/sound/countdown.mp3')
+        case 65:
-    }
+            Alpine.store("audioPlayback").preloadBeep()
-    else if(parseInt(remaningSeconds) === 60){
+            break;
-        Alpine.store("audioPlayback").playSound('/static/sound/beep.mp3')
+        case 60:
+            Alpine.store("audioPlayback").playBeep()
+            break;
+        case 59:
+            Alpine.store("audioPlayback").unlockReplay()
+            break;
+
+        case 10:
+            Alpine.store("audioPlayback").preloadCountdown()
+            break;
+        case 5:
+            Alpine.store("audioPlayback").playCountdown()
+            break;
+        case 4:
+            Alpine.store("audioPlayback").unlockReplay()
+            break;
     }
 }

src/theme.php

@@ -424,9 +424,7 @@ class LandingpageTheme
             <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
 
             <!-- JavaScript -->
-            <script src="/static/js/lib/apline.min.js" defer></script>
+            <script src="/static/js/lib/alpine.min.js" defer></script>
-            <script src="/static/js/lib/purify.min.js" defer></script>
-            <script src="/static/js/synced-timer.js" defer></script>
 
             <style>
                 :root {
@@ -510,10 +508,10 @@ class LandingpageTheme
                 })
             }
         }
-    </script>
 
-<script src="/static/js/lib/alpine.min.js" defer></script>
+
         <script src="/static/js/synced-timer.js"></script>
+    </script> 
 
         </html>
 <?php