play both videos

ui/src/components/BDay.vue

@@ -1,9 +1,9 @@
 <template>
   <div id="bday">
     <h1>Alles Gute zu Deinem Geburtstag!</h1>
-    <img id="play" v-if="playVisible" src="../assets/play.png" usemap="#play" />
+    <img id="play" src="../assets/play.png" usemap="#play" v-if="playVisible" />
     <map name="#play">
-      <area shape="circle" coords="50, 50, 50" />
+      <area shape="circle" coords="50, 50, 50" @click="playClicked" />
     </map>
     <vue-plyr
       ref="plyr"
@@ -22,10 +22,12 @@ export default {
   name: "BDay",
 
   data: () => ({
-    playVisible: false,
+    sourceNames: ["part1", "part2"],
+    playing: null,
+
+    playVisible: true,
 
     plyrOptions: {
-      autoplay: true,
       clickToPlay: false,
       keyboard: { focused: false, global: false },
       controls: ["mute", "volume", "settings", "airplay", "fullscreen"],
@@ -40,7 +42,7 @@ export default {
   },
 
   methods: {
-    getVideoSource: function (name) {
+    getVideoSource: function (index) {
       let source = {
         type: "video",
         poster: "../assets/poster.png",
@@ -49,7 +51,7 @@ export default {
 
       for (const height of [240, 360, 480]) {
         source.sources.push({
-          src: "/fake_api/" + name + "_" + height + ".mp4",
+          src: "/fake_api/" + this.sourceNames[index] + "_" + height + ".mp4",
           type: "video/mp4",
           size: height,
         });
@@ -59,17 +61,40 @@ export default {
     },
 
     videoTimeUpdated: function (event) {
-      // show play button after 3 seconds, then disable event
+      // show play button after 3 seconds, then disable this event
       if (event.timeStamp > 3000) {
         this.playVisible = true;
         this.videoTimeUpdated = () => true;
       }
     },
+
+    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;
+      }
+    },
   },
 
   mounted() {
     document.title = "Herzlichen Glückwunsch!";
-    this.player.source = this.getVideoSource("part1");
+    this.player.source = this.getVideoSource(0);
   },
 };
 </script>