VueJs Vimeo Player Component

VimeoPlayer.vue

<template lang="pug">
  #vimeoPlayer-wrapper
    #vimeo-wrapper
      #vimeo-panel
    #video-bg
      #logo(v-on:click="playVideo")
    #progress-bar
      #progress
    #control-bar.flex.flex-center-center
      transition(name="fade")
        #reload.flex.flex-justify-center(v-if="playing == 'ended'")
          button#reload-btn.control-btn(v-on:click="playVideo")
            ReplayIcon#replay-icon
        #play-pause.flex.flex-row.flex-justify-center(v-if="playing != 'ended'")
          button#play-btn.control-btn.playing(v-on:click="playVideo")
            PlayIcon#play-icon(v-if="!playing")
            PauseIcon#pause-icon(v-if="playing")
          button#sound-btn.control-btn(v-on:click="muteVideo")
            VolumeOff#volume-off(v-if="!muted")
            VolumeUp#volume-up(v-if="muted") 
</template>

<script>
/* eslint-disable func-names */
/* eslint-disable object-shorthand */
/* eslint-disable no-console */
/* eslint-disable no-unused-vars */
/* eslint-disable prefer-template */
import $ from 'jquery';
import Player from '@vimeo/player';
import PlayIcon from './../../assets/ic_play_arrow_48px.svg';
import PauseIcon from './../../assets/ic_pause_48px.svg';
import ReplayIcon from './../../assets/ic_replay_48px.svg';
import VolumeUp from './../../assets/ic_volume_up_48px.svg';
import VolumeOff from './../../assets/ic_volume_off_48px.svg';

export default {
  name: 'vimeo-player',
  components: {
    PlayIcon,
    PauseIcon,
    ReplayIcon,
    VolumeUp,
    VolumeOff,
  },
  props: [
    'videoId',
  ],
  data() {
    return {
      playing: true,
      muted: false,
    };
  },
  mounted() {
    let player;
    let vidLength;
    let vidCounter;
    let currentTime;
    const videoWrapper = document.getElementById('vimeo-wrapper');
    const videoBg = document.getElementById('video-bg');

    this.player = new Player('vimeo-panel', {
      id: this.videoId,
    });

    this.player.ready().then(() => {
      this.player.play();
    });

    this.player.getDuration().then((duration) => {
      this.vidLength = duration;
    }).catch((error) => {});

    this.player.on('play', () => {
      this.playing = true;
      this.getTime(this.vidLength);
      $(videoWrapper).css('display', 'block');
      $(videoWrapper).animate({
        opacity: 1,
      }, 500, () => {
        $(videoBg).animate({
          opacity: 0,
        }, 500);
      });
    });

    this.player.on('ended', () => {
      this.playing = 'ended';
      clearInterval(this.vidCounter);
      $(videoWrapper).animate({
        opacity: 0,
      }, 25, () => {
        $(videoWrapper).css('display', 'none');
        $(videoBg).animate({
          opacity: 1,
        }, 500);
      });
    });
  },
  methods: {
    getTime(length) {
      const dur = length;
      const intervalTime = (100 * dur) / 10;
      this.vidCounter = setInterval(() => {
        this.player.getCurrentTime().then((seconds) => {
          this.currentTime = Math.round(((seconds / dur) * 100) * 100) / 100;
          $('#progress').width(this.currentTime + '%');
          console.log(this.currentTime);
        }).catch((error) => {});
      }, 50);
    },
    playVideo() {
      if (this.playing === 'ended' || this.playing === false) {
        this.player.play();
        this.playing = true;
      } else {
        this.player.pause();
        this.playing = false;
      }
    },
    pauseVideo() {
      this.player.pause();
      this.playing = 'paused';
    },
    muteVideo() {
      const vid = this.player;
      vid.getVolume().then((volume) => {
        if (volume !== 0) {
          vid.setVolume(0);
          this.muted = true;
        } else {
          vid.setVolume(1);
          this.muted = false;
        }
      }).catch((error) => {
        console.log(error);
      });
    },
  },
};
</script>

<style lang="sass">
  @import "../../_sass/_utilities.sass"

  // CONTROLS
  button.control-btn
    +controls-btn
    position: relative

  #progress-bar
    height: .25rem
    width: 100%
    display: block
    position: fixed
    bottom: $nav-width 
    left: 0
    background: $med-grey
    z-index: 100
    #progress
      transition: all 50ms linear
      height: 100%
      position: absolute
      left: 0
      top: 0
      display: block
      background: $blue
      width: 0

  #control-bar
    +control-bar('bottom')

  #reload,
  #play-pause
    +square(100%)
    position: absolute
    top: 0
    left: 0

  // VIMEO WRAPPER
  #vimeo-wrapper
    opacity: 0
    z-index: 20
    position: relative

  #vimeo-panel
    +clip-block-ratio(70vw)
    iframe
      +center('fixed')
      pointer-events: none
      padding: 0px
      border: 0px
      width: inherit
      height: 100vh
      min:
        width: 0px
        height: 0px
      max:
        width: none
        height: none
      border-image:
        source: initial
        slice: initial
        width: initial
        outset: initial
        repeat: initial

  // VIDEO BACKGROUND
  #video-bg
    +center('fixed')
    +square(20vmin)
    display: block
    z-index: 10
    #logo
      +svg-gradient
      +square(100%)
      mask:
        image: url('/static/imgs/nw-logo-circle.svg')
        repeat: no-repeat
        size: cover
        position: center

</style>