dorian/synced-timer
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

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

Browse source
This commit is contained in:
Dorian Zedler 2022-05-12 17:28:59 +02:00
parent 199e7c5066
commit 6cd1b574c2
Signed by: dorian
GPG key ID: 989DE36109AFA354
4 changed files with 51 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
src/index.php
View file

@ -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
{

36
src/static/js/synced-timer.js
View file

@ -41,20 +41,29 @@ document.addEventListener('alpine:init' , () => {
playTimerSound(remaningSeconds);
}, 100)
setInterval(() => {
this.requestStartedAt = Date.now();
fetch(`/api/${username}`)
this.scheduleNextRequest()
},
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;
this.timeOffsetToServer = this.requestEndedAt - data.data.currentServerTime + (requestDuration / 2);
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)
}
@ -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
}

22
src/theme.php
View file

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

4
src/version.php Normal file
View file

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