<template>
  <div id="bday">
    <h1>Alles Gute zu Deinem Geburtstag!</h1>
    <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']"
      @timeupdate="videoTimeUpdated"
      @ready="videoLoaded"
    >
      <!-- inserted dynamically -->
      <video poster="../assets/poster.png" />
    </vue-plyr>
  </div>
</template>

<script>
export default {
  name: "BDay",

  data: () => ({
    videoQueue: ["part1", "part2"],
    currentVideo: -1,

    playVisible: true,

    plyrOptions: {
      clickToPlay: false,
      keyboard: { focused: false, global: false },
      controls: ["mute", "volume", "settings", "airplay", "fullscreen"],
      settings: ["quality"],
    },
  }),

  computed: {
    player() {
      return this.$refs.plyr.player;
    },
  },

  methods: {
    getVideoSource: function (index) {
      let source = {
        type: "video",
        sources: [],
      };

      for (const height of [240, 360, 480]) {
        source.sources.push({
          src: "/fake_api/" + this.videoQueue[index] + "_" + height + ".mp4",
          type: "video/mp4",
          size: height,
        });
      }

      return source;
    },

    videoTimeUpdated: function () {
      // show play button after 3 seconds, then disable this event
      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;

      this.currentVideo += 1;
      this.player.source = this.getVideoSource(this.currentVideo);
    },
  },

  mounted() {
    document.title = "Herzlichen Glückwunsch!";
  },
};
</script>

<style scoped>
div#bday {
  margin: auto;
  width: 854px;
  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>
