ui/src/components/BDay.vue

@@ -1,30 +1,20 @@
 <template>
-  <div class="bday">
+  <div id="bday">
     <h1>Alles Gute zu Deinem Geburtstag!</h1>
-    <div ref="plyrContainer" class="plyrContainer">
-      <img
-        ref="play"
-        class="play"
-        src="../assets/play.png"
-        usemap="#play"
-        v-show="playVisible"
-        @click="playClicked"
-      />
+    <img id="play" src="../assets/play.png" usemap="#play" v-if="playVisible" />
     <map name="#play">
       <area shape="circle" coords="50, 50, 50" @click="playClicked" />
     </map>
     <vue-plyr
       ref="plyr"
       :options="plyrOptions"
-        :emit="['timeupdate', 'ready']"
+      :emit="['timeupdate']"
       @timeupdate="videoTimeUpdated"
-        @ready="videoLoaded"
     >
       <!-- inserted dynamically -->
-        <video poster="../assets/poster.png" />
+      <video />
     </vue-plyr>
   </div>
-  </div>
 </template>
 
 <script>
@@ -32,8 +22,8 @@ export default {
   name: "BDay",
 
   data: () => ({
-    videoQueue: ["part1", "part2"],
-    currentVideo: -1,
+    sourceNames: ["part1", "part2"],
+    playing: null,
 
     playVisible: true,
 
@@ -55,12 +45,13 @@ 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.videoQueue[index] + "_" + height + ".mp4",
+          src: "/fake_api/" + this.sourceNames[index] + "_" + height + ".mp4",
           type: "video/mp4",
           size: height,
         });
@@ -69,57 +60,53 @@ export default {
       return source;
     },
 
-    videoTimeUpdated: function () {
+    videoTimeUpdated: function (event) {
       // show play button after 3 seconds, then disable this event
-      if (this.player.currentTime > 3) {
+      if (event.timeStamp > 3000) {
         this.playVisible = true;
         this.videoTimeUpdated = () => true;
       }
     },
 
-    videoLoaded: function () {
-      this.placePlay();
-      if (this.currentVideo >= 0) {
-        this.player.play();
-      }
-    },
-
     playClicked: function () {
       this.playVisible = false;
 
-      this.currentVideo += 1;
-      this.player.source = this.getVideoSource(this.currentVideo);
-    },
+      switch (this.playing) {
+        case null:
+          // nothing playing: play first source
+          this.playing = 0;
+          this.player.play();
+          break;
 
-    placePlay: function () {
-      let top = (this.$refs.plyrContainer.offsetHeight - 100) / 2;
-      let left = (this.$refs.plyrContainer.offsetWidth - 100) / 2;
+        case 0:
+          // first source playing: play second source
+          this.playing = 1;
+          this.player.source = this.getVideoSource(1);
+          this.player.play();
+          break;
       
-      console.log(left, top);
-
-      this.$refs.play.style.top = top + "px";
-      this.$refs.play.style.left = left + "px";
+        default:
+          console.log("ERROR: Stranger things are starting to begin!");
+          break;
+      }
     },
   },
 
   mounted() {
     document.title = "Herzlichen Glückwunsch!";
-    window.addEventListener("resize", this.placePlay);
+    this.player.source = this.getVideoSource(0);
   },
 };
 </script>
 
 <style scoped>
-div.bday {
+div#bday {
   margin: auto;
-  max-width: 854px;
-}
-
-div.plyrContainer {
+  width: 854px;
   position: relative;
 }
 
-img.play {
+img#play {
   outline: none;
 
   -webkit-user-select: none; /* Safari */
@@ -128,6 +115,8 @@ img.play {
   user-select: none; /* Standard */
 
   position: absolute;
+  bottom: 190px;
+  left: 377px;
   z-index: 1001;
 }