Fix: added missing files from last commit
This commit is contained in:
parent
d7fcfa64dc
commit
957ce84d00
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
@ -0,0 +1,154 @@
|
|||
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')
|
||||
}
|
||||
}
|
Binary file not shown.
Loading…
Reference in New Issue