ui/public/fake_api/resize

@@ -1,32 +0,0 @@
-#!/bin/bash
-
-# complain if no input file given
-if [ $# -lt 1 ]; then
-    >&2 echo "usage: $0 <input_file>"
-    exit 1
-fi
-
-# get input video name
-input="${1}"
-shift 1
-
-# without file extension
-output_base="${input%.*}"
-
-# common video resolutions
-heights=(240 360 480)
-widths=(426 640 854)
-
-# just a quick-and-dirty loop
-for index in $(seq 0 2); do
-    height="${heights[$index]}"
-    width="${widths[$index]}"
-
-    # actual conversion
-    ffmpeg -i "${input}" \
-        -acodec aac -vcodec h264 \
-        -vf "scale=w=${width}:h=${height}:force_original_aspect_ratio=decrease,pad=${width}:${height}:(ow-iw)/2:(oh-ih)/2" \
-        "${output_base}_${height}.mp4"
-done
-
-exit 0

ui/src/App.vue

@@ -35,7 +35,7 @@ html {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   text-align: center;
-  color: #34214f;
+  color: #2c3e50;
   margin-top: 60px;
 }
 </style>

ui/src/components/BDay.vue

@@ -1,18 +1,12 @@
 <template>
-  <div id="bday">
+  <div class="bday">
     <h1>Alles Gute zu Deinem Geburtstag!</h1>
-    <img id="play" src="../assets/play.png" usemap="#play" v-if="playVisible" />
+    <vue-plyr :options="plyr_options">
-    <map name="#play">
+      <video poster="../assets/poster.png" autoplay="true">
-      <area shape="circle" coords="50, 50, 50" @click="playClicked" />
+        <source src="/fake_api/part1_240.mp4" type="video/mp4" size="240" />
-    </map>
+        <source src="/fake_api/part1_360.mp4" type="video/mp4" size="360" />
-    <vue-plyr
+        <source src="/fake_api/part1_480.mp4" type="video/mp4" size="480" />
-      ref="plyr"
+      </video>
-      :options="plyrOptions"
-      :emit="['timeupdate']"
-      @timeupdate="videoTimeUpdated"
-    >
-      <!-- inserted dynamically -->
-      <video />
     </vue-plyr>
   </div>
 </template>
@@ -22,12 +16,7 @@ export default {
   name: "BDay",
 
   data: () => ({
-    sourceNames: ["part1", "part2"],
+    plyr_options: {
-    playing: null,
-
-    playVisible: true,
-
-    plyrOptions: {
       clickToPlay: false,
       keyboard: { focused: false, global: false },
       controls: ["mute", "volume", "settings", "airplay", "fullscreen"],
@@ -35,93 +24,15 @@ export default {
     },
   }),
 
-  computed: {
+  mounted: () => {
-    player() {
-      return this.$refs.plyr.player;
-    },
-  },
-
-  methods: {
-    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",
-          type: "video/mp4",
-          size: height,
-        });
-      }
-
-      return source;
-    },
-
-    videoTimeUpdated: function (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(0);
   },
 };
 </script>
 
 <style scoped>
-div#bday {
+div.bday {
   margin: auto;
-  width: 854px;
+  max-width: 850px;
-  position: relative;
-}
-
-img#play {
-  outline: none;
-
-  -webkit-user-select: none; /* Safari */
-  -moz-user-select: none; /* Firefox */
-  -ms-user-select: none; /* IE10+/Edge */
-  user-select: none; /* Standard */
-
-  position: absolute;
-  bottom: 190px;
-  left: 377px;
-  z-index: 1001;
-}
-
-map area {
-  outline: none;
-  cursor: pointer;
 }
 </style>