Klemek
93 lines
2.2 KiB
JavaScript
93 lines
2.2 KiB
JavaScript
/* exported app */
|
|
let app = {
|
|
data() {
|
|
return {
|
|
rid: 0,
|
|
file: null,
|
|
ready: false,
|
|
playing: false,
|
|
ended: false,
|
|
audio: null,
|
|
startedDate: null,
|
|
color: null,
|
|
remaining: null,
|
|
};
|
|
},
|
|
watch: {
|
|
},
|
|
computed: {
|
|
canPlay() {
|
|
return this.ready && !this.playing;
|
|
},
|
|
canStop() {
|
|
return this.ready && this.playing;
|
|
},
|
|
},
|
|
methods: {
|
|
showApp() {
|
|
document.getElementById("app").setAttribute("style", "");
|
|
},
|
|
changeFile(event) {
|
|
this.ready = false;
|
|
this.file = URL.createObjectURL(event.target.files[0]);
|
|
this.audio = new Audio(this.file);
|
|
this.audio.addEventListener('ended', () => {
|
|
this.ended = true;
|
|
this.onStop();
|
|
});
|
|
this.audio.addEventListener('loadeddata', () => {
|
|
this.ready = true;
|
|
});
|
|
},
|
|
onPlay() {
|
|
this.ended = false;
|
|
this.playing = true;
|
|
this.startedDate = new Date();
|
|
setTimeout(() => this.audio.play(), 5000);
|
|
},
|
|
onStop() {
|
|
this.audio.pause();
|
|
this.audio.currentTime = 0;
|
|
this.playing = false;
|
|
},
|
|
getColor() {
|
|
if ((this.playing && ((new Date() - this.startedDate) / 1000) <= 5)) {
|
|
return '#f00';
|
|
} else if (this.playing) {
|
|
return '#0f0';
|
|
} else if (this.ended) {
|
|
return '#f50'
|
|
}
|
|
},
|
|
getRemaining() {
|
|
if (this.ended) {
|
|
return '00:00';
|
|
}
|
|
if (!this.ready || !this.playing) {
|
|
return '00:05';
|
|
}
|
|
const d1 = Math.floor((new Date() - this.startedDate) / 1000);
|
|
if (d1 < 5) {
|
|
return `00:${String(Math.floor(5 - d1)).padStart(2, "0")}`;
|
|
}
|
|
const d2 = this.audio.duration - d1 + 5;
|
|
return `${String(Math.floor(d2 / 60)).padStart(2, "0")}:${String(Math.floor(d2) % 60).padStart(2, "0")}`;
|
|
},
|
|
},
|
|
mounted: function () {
|
|
console.log("app mounted");
|
|
setTimeout(this.showApp);
|
|
setInterval(() => {
|
|
this.rid = Math.random();
|
|
this.color = this.getColor();
|
|
this.remaining = this.getRemaining();
|
|
document.body.setAttribute("style", this.color ? "background: " + this.color : '');
|
|
}, 200);
|
|
},
|
|
};
|
|
|
|
window.onload = () => {
|
|
app = Vue.createApp(app);
|
|
app.mount("#app");
|
|
};
|