154 lines
5 KiB
JavaScript
154 lines
5 KiB
JavaScript
document.addEventListener('alpine:init' , () => {
|
|
console.log("Synced-timer is starting")
|
|
|
|
Alpine.store("siteData", {
|
|
lastResponse: null,
|
|
currentData: null,
|
|
time: '00:00:00',
|
|
header: '...',
|
|
|
|
requestStartedAt: null,
|
|
requestEndedAt: null,
|
|
timeOffsetToServer: null,
|
|
|
|
init() {
|
|
Alpine.effect(() => {
|
|
const response = this.lastResponse
|
|
if(!response) return;
|
|
|
|
if(response.status !== 200) {
|
|
this.header = `Error: ${response.status}`
|
|
return;
|
|
}
|
|
|
|
this.currentData = response.data
|
|
Alpine.store("audioPlayback").isDisabledByServer = !this.currentData.soundEnabled
|
|
this.header = this.currentData.header
|
|
})
|
|
|
|
setInterval(() => {
|
|
if(!this.currentData) return;
|
|
|
|
const passedSeconds = parseInt(((Date.now()-this.timeOffsetToServer) / 1000) - this.currentData.startedAt);
|
|
let remaningSeconds;
|
|
if(this.currentData.repeatEnabled) {
|
|
remaningSeconds = parseInt(this.currentData.time * 60 - (passedSeconds % (this.currentData.time * 60)));
|
|
}
|
|
else {
|
|
remaningSeconds = parseInt(this.currentData.time * 60 - passedSeconds);
|
|
}
|
|
this.time = getTimerText(remaningSeconds);
|
|
playTimerSound(remaningSeconds);
|
|
}, 100)
|
|
|
|
setInterval(() => {
|
|
this.requestStartedAt = Date.now();
|
|
fetch(`/api/${username}`)
|
|
.then((response) => {
|
|
this.requestEndedAt = Date.now()
|
|
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);
|
|
}
|
|
|
|
this.lastResponse = data
|
|
});
|
|
}, 1000)
|
|
}
|
|
})
|
|
|
|
Alpine.store("audioPlayback", {
|
|
hasBeenTested: false,
|
|
isAvailable: null,
|
|
isDisabledByUser: false,
|
|
isDisabledByServer: true,
|
|
audioPlayer: null,
|
|
|
|
init() {
|
|
this.audioPlayer = new Audio('/static/sound/silence.mp3');
|
|
|
|
this.testPermission()
|
|
const audioPlaybackStore = this
|
|
|
|
Alpine.bind('audioPlaybackEnableButton', () => ({
|
|
'@click'() {
|
|
audioPlaybackStore.testPermission()
|
|
}
|
|
}))
|
|
|
|
Alpine.bind('audioPlaybackDisableButton', () => ({
|
|
'@click'() {
|
|
audioPlaybackStore.isDisabledByUser = true
|
|
}
|
|
}))
|
|
|
|
Alpine.effect(() => {
|
|
if(Alpine.store("audioPlayback").isDisabledByUser) this.isAvailable = false;
|
|
})
|
|
},
|
|
|
|
testPermission() {
|
|
this.audioPlayer.src = '/static/sound/silence.mp3';
|
|
this.audioPlayer.play().then(() => {
|
|
this.isAvailable = true
|
|
this.hasBeenTested = true
|
|
}).catch((error) => {
|
|
console.warn("Audio permission not granted!")
|
|
this.isAvailable = false
|
|
this.hasBeenTested = true
|
|
})
|
|
},
|
|
|
|
playSound(soundFile) {
|
|
if(!this.audioPlayer.paused || !this.isAvailable || this.isDisabledByUser || this.isDisabledByServer) {
|
|
return;
|
|
}
|
|
this.audioPlayer.src = soundFile;
|
|
this.audioPlayer.play();
|
|
}
|
|
})
|
|
|
|
Alpine.store("fullscreen", {
|
|
enabled: document.fullscreenElement,
|
|
toggle() {
|
|
if (!document.fullscreenElement) {
|
|
document.documentElement.requestFullscreen();
|
|
this.enabled = true
|
|
} else {
|
|
if (document.exitFullscreen) {
|
|
document.exitFullscreen();
|
|
}
|
|
}
|
|
}
|
|
})
|
|
})
|
|
|
|
document.addEventListener('alpine:initialized', () => {
|
|
|
|
})
|
|
|
|
const zeroPad = (num, places) => String(num).padStart(places, '0');
|
|
|
|
function getTimerText(remaningSeconds) {
|
|
if (remaningSeconds < 0) {
|
|
remaningSeconds = 0
|
|
}
|
|
|
|
var remaningHours = zeroPad(parseInt(remaningSeconds / 60 / 60) % (60 * 60), 2)
|
|
var remaningMinutes = zeroPad(parseInt(remaningSeconds / 60) % 60, 2)
|
|
var remaningSeconds = zeroPad(remaningSeconds % 60, 2)
|
|
|
|
return remaningHours + ":" + remaningMinutes + ":" + remaningSeconds
|
|
}
|
|
|
|
function playTimerSound(remaningSeconds) {
|
|
if(parseInt(remaningSeconds) === 5) {
|
|
Alpine.store("audioPlayback").playSound('/static/sound/countdown.mp3')
|
|
}
|
|
else if(parseInt(remaningSeconds) === 60){
|
|
Alpine.store("audioPlayback").playSound('/static/sound/beep.mp3')
|
|
}
|
|
} |