optimizations mainly for mobile

ui/src/components/BDay.vue

@@ -8,11 +8,12 @@
     <vue-plyr
       ref="plyr"
       :options="plyrOptions"
-      :emit="['timeupdate']"
+      :emit="['timeupdate', 'ready']"
       @timeupdate="videoTimeUpdated"
+      @ready="videoLoaded"
     >
       <!-- inserted dynamically -->
-      <video />
+      <video poster="../assets/poster.png" />
     </vue-plyr>
   </div>
 </template>
@@ -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);
   },
 };
 </script>