Feat: auto-hide banners, don't show hours when zero, add version

src/index.php

@@ -4,6 +4,7 @@ define('L_EXEC', true);
 require_once './theme.php';
 require_once './strings.php';
 require_once './storageHelper.php';
+require_once './version.php';
 
 class SyncedTimer
 {

src/static/js/synced-timer.js

@@ -41,20 +41,29 @@ document.addEventListener('alpine:init' , () => {
                 playTimerSound(remaningSeconds);
             }, 100)
 
-            setInterval(() => {
+            this.scheduleNextRequest()
-                this.requestStartedAt = Date.now();
+        },
-                fetch(`/api/${username}`)
+
+        scheduleNextRequest() {
+            setTimeout(() => {
+                let requestUrl;
+                const requestId = Date.now();
+                fetch(`/api/${username}#${requestId}`)
                 .then((response) => {
-                    this.requestEndedAt = Date.now()
+                    requestUrl = response.url
                     return response.json()
                 })
                 .then((data) => {
                     if(data && data.status === 200) {
-                        const requestDuration = this.requestEndedAt - this.requestStartedAt;
+                        const performanceEntry = performance.getEntriesByName(`${requestUrl}#${requestId}`)[0];
-                        this.timeOffsetToServer = this.requestEndedAt - data.data.currentServerTime + (requestDuration / 2);
+                        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)
         }
@@ -124,6 +133,15 @@ document.addEventListener('alpine:init' , () => {
             }
         }
     })
+
+    Alpine.store("banners", {
+        hide: false,
+        init() {
+            setTimeout(() => {
+                this.hide = true
+            }, 10000)
+        }
+    })
 })
 
 document.addEventListener('alpine:initialized', () => {
@@ -141,6 +159,10 @@ function getTimerText(remaningSeconds) {
     var remaningMinutes = zeroPad(parseInt(remaningSeconds / 60) % 60, 2)
     var remaningSeconds = zeroPad(remaningSeconds % 60, 2)
 
+    if(parseInt(remaningHours) === 0) {
+        return " " + remaningMinutes + ":" + remaningSeconds + " "
+    }
+
     return remaningHours + ":" + remaningMinutes + ":" + remaningSeconds
 }
 

src/theme.php

@@ -190,8 +190,16 @@ class LandingpageTheme
                 </nav>
 
                 <div class="container mt-3">
+                <svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
+            <symbol id="info-fill" fill="currentColor" viewBox="0 0 16 16">
+                <path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm.93-9.412-1 4.705c-.07.34.029.533.304.533.194 0 .487-.07.686-.246l-.088.416c-.287.346-.92.598-1.465.598-.703 0-1.002-.422-.808-1.319l.738-3.468c.064-.293.006-.399-.287-.47l-.451-.081.082-.381 2.29-.287zM8 5.5a1 1 0 1 1 0-2 1 1 0 0 1 0 2z"/>
+            </symbol>
+            <symbol id="exclamation-triangle-fill" fill="currentColor" viewBox="0 0 16 16">
+                <path d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/>
+            </symbol>
+        </svg>
 
-                <template x-if="(!$store.audioPlayback.isAvailable || $store.audioPlayback.isDisabledByUser) && !$store.audioPlayback.isDisabledByServer">
+                <template x-if="(!$store.audioPlayback.isAvailable || $store.audioPlayback.isDisabledByUser) && !$store.audioPlayback.isDisabledByServer && !$store.banners.hide">
                     <div class="alert alert-danger alert-dismissible d-flex align-items-center" role="alert" style="position: relative;">
                         <svg class="bi flex-shrink-0 me-2" width="24" height="24" role="img" aria-label="Danger:"><use xlink:href="#exclamation-triangle-fill"/></svg>
                         <div>
@@ -206,7 +214,7 @@ class LandingpageTheme
                         <div class="card-header w-100"><?= $this->_trId("currentTimer") ?></div>
                         <div class="card-body">
                             <h3 id="header" x-text="$store.siteData.header"></h3>
-                            <h1 class="card-title" id="timer" x-text="$store.siteData.time">00:00:00</h1>
+                            <h1 class="card-title" id="timer" x-html="$store.siteData.time"></h1>
                         </div>
                     </div>
 
@@ -235,6 +243,10 @@ class LandingpageTheme
                             </form>
                         </div>
                     </div>
+                    <footer class="pt-3 mt-4 text-muted border-top">
+                        Version: <?= $GLOBALS["VERSION"] ?>
+                    </footer>
+
                 </div>
             </main>
         </body>
@@ -321,7 +333,7 @@ class LandingpageTheme
 
             <div class="d-flex w-100 h-100 p-3 mx-auto flex-column">
                 
-                <template x-if="(!$store.audioPlayback.isAvailable || $store.audioPlayback.isDisabledByUser) && !$store.audioPlayback.isDisabledByServer">
+                <template x-if="(!$store.audioPlayback.isAvailable || $store.audioPlayback.isDisabledByUser) && !$store.audioPlayback.isDisabledByServer && !$store.banners.hide">
                     <div class="alert alert-danger alert-dismissible d-flex align-items-center" role="alert" style="position: relative;">
                         <svg class="bi flex-shrink-0 me-2" width="24" height="24" role="img" aria-label="Danger:"><use xlink:href="#exclamation-triangle-fill"/></svg>
                         <div>
@@ -332,7 +344,7 @@ class LandingpageTheme
                     </div>
                 </template>
 
-                <template x-if="!$store.fullscreen.enabled">
+                <template x-if="!$store.fullscreen.enabled && !$store.banners.hide">
                     <div class="alert alert-info alert-dismissible d-flex align-items-center" role="alert" style="position: relative;">
                         <svg class="bi flex-shrink-0 me-2" width="24" height="24" role="img" aria-label="Danger:"><use xlink:href="#info-fill"/></svg>
                         <div>
@@ -345,7 +357,7 @@ class LandingpageTheme
                 <main class="px-3 h-100 mt-auto w-100" @click.prevent @dblclick="$store.fullscreen.toggle()">
                     <h4 id="header" class="unselectable" x-text="$store.siteData.header"></h4>
                     <div class="h-80 unselectable" style="justify-content:center; align-items:center; display:flex;">
-                        <h4 id="timer" x-text="$store.siteData.time"></h4>
+                        <h4 id="timer" x-html="$store.siteData.time"></h4>
                     </div>
                 </main>
 

src/version.php

@@ -0,0 +1,4 @@
+<?php
+ // This file is overwritten on image build
+ defined('L_EXEC') or die();
+ $VERSION = "dev - live";