diff --git a/ui/src/components/BDay.vue b/ui/src/components/BDay.vue index 92ce16a..e4eeb75 100644 --- a/ui/src/components/BDay.vue +++ b/ui/src/components/BDay.vue @@ -8,11 +8,12 @@ - @@ -22,8 +23,8 @@ export default { name: "BDay", data: () => ({ - sourceNames: ["part1", "part2"], - playing: null, + videoQueue: ["part1", "part2"], + currentVideo: -1, playVisible: true, @@ -45,13 +46,12 @@ export default { getVideoSource: function (index) { let source = { type: "video", - poster: "../assets/poster.png", sources: [], }; for (const height of [240, 360, 480]) { source.sources.push({ - src: "/fake_api/" + this.sourceNames[index] + "_" + height + ".mp4", + src: "/fake_api/" + this.videoQueue[index] + "_" + height + ".mp4", type: "video/mp4", size: height, }); @@ -60,41 +60,30 @@ export default { return source; }, - videoTimeUpdated: function (event) { + videoTimeUpdated: function () { // show play button after 3 seconds, then disable this event - if (event.timeStamp > 3000) { + if (this.player.currentTime > 3) { this.playVisible = true; this.videoTimeUpdated = () => true; } }, + videoLoaded: function () { + if (this.currentVideo >= 0) { + this.player.play(); + } + }, + playClicked: function () { this.playVisible = false; - switch (this.playing) { - case null: - // nothing playing: play first source - this.playing = 0; - this.player.play(); - break; - - case 0: - // first source playing: play second source - this.playing = 1; - this.player.source = this.getVideoSource(1); - this.player.play(); - break; - - default: - console.log("ERROR: Stranger things are starting to begin!"); - break; - } + this.currentVideo += 1; + this.player.source = this.getVideoSource(this.currentVideo); }, }, mounted() { document.title = "Herzlichen Glückwunsch!"; - this.player.source = this.getVideoSource(0); }, };