fcad-core-dragon 2.0.0-beta.4 → 2.0.0-beta.6

package/src/components/AppCompPlayBar.vue

@@ -1,1218 +0,0 @@
-<!--@ Description: This component is used to display the playbar associate with the videoPlayer
- @ What it does: The component is used to interacted with the videoPlayer or audioPlayer via buttons.
-mediaMixins is used for all the methods/data shared between audio and video. In the appCompPlayBar component, there is also all the methods/data specific to video-->
-<template>
-  <div
-    ref="$pb-container"
-    class="pb-container"
-    :class="{ video: mediaToPlay.mType === 'video' }"
-  >
-    <!--------------------------------- Btn Play Principal (video only)  -------------------------------------->
-    <app-base-button
-      v-if="mediaToPlay.mType === 'video'"
-      ref="$btn-play-playback"
-      class="playback-button"
-      :class="{
-        initial: !playClicked,
-        'playback-animation': playBackAnim && playClicked
-      }"
-      :aria-label="playLabel + ' principal'"
-      :data-title="`${playLabel}`"
-      @click="
-        () => {
-          mediaToPlay.mType === 'video'
-            ? handlePlayVideo('playBackAnim')
-            : togglePlay()
-        }
-      "
-    >
-      <div
-        v-show="(!playClicked && !canReplay) || (!canReplay && isPlaying)"
-        class="playback-wrapper"
-      >
-        <svg class="app-icons-svg play-icon">
-          <use href="#play-icon" />
-        </svg>
-      </div>
-      <div
-        v-show="playClicked && !isPlaying && !canReplay"
-        class="playback-wrapper"
-      >
-        <svg class="app-icons-svg pause-icon">
-          <use href="#pause-icon" />
-        </svg>
-      </div>
-      <div v-show="!playClicked && canReplay" class="playback-wrapper">
-        <svg class="app-icons-svg replay-icon">
-          <use href="#replay-icon" />
-        </svg>
-      </div>
-    </app-base-button>
-
-    <div
-      v-if="mediaToPlay"
-      class="pb-wrapper"
-      :class="{
-        'show-controls': showControlsValue || mediaToPlay.mType === 'audio',
-        audio: mediaToPlay.mType === 'audio',
-        video: mediaToPlay.mType === 'video'
-      }"
-    >
-      <!--------------------------------- PLAY-BAR Progress (video only)  -------------------------------------->
-      <div
-        v-if="mediaToPlay.mType === 'video'"
-        ref="$playbar-timeline"
-        class="pb-timeline"
-      >
-        <div ref="$progress-area" class="progress-area">
-          <div
-            ref="$progress-bar"
-            draggable="false"
-            tabindex="0"
-            class="pb-progress-bar"
-            role="slider"
-            aria-valuemin="0"
-            :aria-label="mediaA11Y.label"
-            :aria-valuenow="mediaA11Y.valNow"
-            :aria-valuemax="mediaA11Y.valMax"
-            :aria-valuetext="mediaA11Y.valueText"
-            @focus="changeFocusState('progressBar', true)"
-            @blur="changeFocusState('progressBar', false)"
-          >
-            <!--Class progress-animation is apply when we are not using the thumb to change the progression-->
-            <div
-              ref="$progress-indicator"
-              draggable="false"
-              class="progress-indicator"
-              :class="{ 'progress-animation': !progressThumbDown }"
-              :style="{ width: progressBarPercentage + '%' }"
-            >
-              <!--Mousedown validate if the thumb is cliqued (if yes, the mouse is follow to modify the progress)
-              MouseOver/MouseOut deactivate click event on progressBar if the mouse hovered the thumb-->
-              <div
-                ref="$progress-thumb"
-                draggable="false"
-                class="progress-thumb"
-                style="z-index: 9"
-                @mousedown="
-                  function () {
-                    savedIsPlaying = isPlaying
-                    progressThumbDown = true
-                  }
-                "
-                @mouseover="progressThumbHover = true"
-                @mouseleave="progressThumbHover = false"
-              ></div>
-            </div>
-          </div>
-          <!--------------------------------- PLAY-BAR ToolTip (video only)  ----------------------------------->
-          <div
-            v-if="mediaToPlay.mType === 'video'"
-            ref="$seek-tooltip"
-            aria-hidden="true"
-            class="seek-tooltip"
-          >
-            {{ tooTipTimeCode }}
-          </div>
-        </div>
-      </div>
-      <div class="pb-controls">
-        <div class="pb-areas left">
-          <!--------------------------------- PLAY-BAR Play ------------------------------------>
-          <app-base-button
-            ref="$btn-play"
-            class="playbar-btn playbar-play"
-            :class="{ displayLabel: btnsLabelDisplay['playbar-play'] === true }"
-            :aria-label="
-              playLabel + (mediaToPlay.mType === 'video' ? ' secondaire' : '')
-            "
-            :data-title="`${playLabel} (k)`"
-            @click="
-              () => {
-                mediaToPlay.mType === 'video' ? handlePlayVideo() : togglePlay()
-              }
-            "
-            @mouseenter="activateLabel($event)"
-            @mouseleave="deactivateLabel($event)"
-            @focus="activateLabel($event)"
-            @blur="deactivateLabel($event)"
-          >
-            <svg
-              v-show="!canReplay && !isPlaying"
-              class="app-icons-svg play-icon"
-            >
-              <use href="#play-icon" />
-            </svg>
-            <svg
-              v-show="isPlaying && !canReplay"
-              class="app-icons-svg pause-icon"
-            >
-              <use href="#pause-icon" />
-            </svg>
-            <svg v-show="canReplay" class="app-icons-svg replay-icon">
-              <use href="#replay-icon" />
-            </svg>
-          </app-base-button>
-          <!--------------------------------- PLAY-BAR Timer ------------------------------------>
-          <div class="pb-timer">
-            <span
-              aria-hidden="true"
-              style="-webkit-user-select: none"
-              draggable="false"
-            >
-              {{ timecode }} / {{ mediaDurationTime }}
-            </span>
-          </div>
-          <!--------------------------------- PLAY-BAR Progress (audio only) -------------------------------------->
-          <div
-            v-if="mediaToPlay.mType === 'audio'"
-            ref="$playbar-timeline"
-            class="pb-timeline"
-          >
-            <div ref="$progress-area" class="progress-area">
-              <div
-                id="progress-bar"
-                ref="$progress-bar"
-                draggable="false"
-                tabindex="0"
-                class="pb-progress-bar"
-                role="slider"
-                aria-valuemin="0"
-                :aria-label="mediaA11Y.label"
-                :aria-valuenow="mediaA11Y.valNow"
-                :aria-valuemax="mediaA11Y.valMax"
-                :aria-valuetext="mediaA11Y.valueText"
-                @focus="changeFocusState('progressBar', true)"
-                @blur="changeFocusState('progressBar', false)"
-              >
-                <!--Class progress-animation is apply when we are not using the thumb to change the progression-->
-                <div
-                  id="progress-indicator"
-                  ref="$progress-indicator"
-                  draggable="false"
-                  class="progress-indicator"
-                  :class="{ 'progress-animation': !progressThumbDown }"
-                  :style="{ width: progressBarPercentage + '%' }"
-                >
-                  <!--Mousedown validate if the thumb is cliqued (if yes, the mouse is follow to modify the progress)
-              MouseOver/MouseOut deactivate click event on progressBar if the mouse hovered the thumb-->
-                  <div
-                    ref="$progress-thumb"
-                    draggable="false"
-                    class="progress-thumb"
-                    style="z-index: 9"
-                    @mousedown="
-                      function () {
-                        savedIsPlaying = isPlaying
-                        progressThumbDown = true
-                      }
-                    "
-                    @mouseover="progressThumbHover = true"
-                    @mouseleave="progressThumbHover = false"
-                  ></div>
-                </div>
-              </div>
-            </div>
-          </div>
-          <!--------------------------------- PLAY-BAR Volume -------------------------------------->
-          <app-base-button
-            id="playbar-volume"
-            ref="$btn-volume"
-            class="volume-btn"
-            :class="{
-              displayLabel: btnsLabelDisplay['playbar-volume'] === true
-            }"
-            tabindex="0"
-            :aria-label="volumeLabel"
-            :data-title="`${volumeLabel} (m)`"
-            @click="toggleMute"
-            @mouseenter="activateLabel($event)"
-            @mouseleave="deactivateLabel($event)"
-            @focus="activateLabel($event)"
-            @blur="deactivateLabel($event)"
-          >
-            <svg v-show="volumeState == 'muted'" class="app-icons-svg">
-              <use href="#volume-mute-icon" />
-            </svg>
-            <svg v-show="volumeState == 'high'" class="app-icons-svg">
-              <use href="#volume-high-icon" />
-            </svg>
-            <svg
-              v-show="volumeState == 'low'"
-              class="app-icons-svg volume-low-icon"
-            >
-              <use href="#volume-low-icon" />
-            </svg>
-          </app-base-button>
-          <div ref="zone-volume" class="volume-controls">
-            <input
-              ref="$volume-slider"
-              class="volume-slider"
-              :class="{
-                displayLabel: btnsLabelDisplay['volume-slider'] === true
-              }"
-              :value="currentVolume"
-              :aria-valuetext="volumeLevelA11Y"
-              type="range"
-              max="1"
-              min="0"
-              step="0.01"
-              tabindex="0"
-              :aria-label="`${$t('button.volume')}`"
-              @click="updateVolumeLevel"
-              @mouseenter="activateLabel($event.currentTarget)"
-              @mouseleave="deactivateLabel($event.currentTarget)"
-              @focus="
-                activateLabel($event.currentTarget),
-                  changeFocusState('volumeSlider', true)
-              "
-              @blur="
-                deactivateLabel($event.currentTarget),
-                  changeFocusState('volumeSlider', false)
-              "
-            />
-            <span class="volume-label" aria-hidden="true">
-              {{ $t('button.volume') }}
-            </span>
-            <!--using span because ::before on input is not supported by firefox-->
-            <span
-              ref="$volume-progress"
-              class="volume-progress"
-              :style="{
-                '--background-size-vs': `calc(${volumeSliderBackground} - 2px)`
-              }"
-            ></span>
-          </div>
-        </div>
-        <!--------------------------------- PLAY-BAR CC (video only) ------------------------------------------>
-        <div v-if="mediaToPlay.mType === 'video'" class="pb-areas right">
-          <app-base-button
-            id="btn-subtitles"
-            ref="$btn-subtitle"
-            class="btn subtitleBtns"
-            :aria-label="ccLabel"
-            :data-title="`${ccLabel} (c)`"
-            :disabled="!hasSubtitle"
-            :class="{
-              md_disabled: !hasSubtitle,
-              displayLabel: btnsLabelDisplay['btn-subtitles'] === true
-            }"
-            @click="toggleViewSubtitle()"
-            @mouseenter="activateLabel($event)"
-            @mouseleave="deactivateLabel($event)"
-            @focus="activateLabel($event)"
-            @blur="deactivateLabel($event)"
-          >
-            <svg
-              v-show="(hasSubtitle && !subtitlesEnabled) || !hasSubtitle"
-              class="app-icons-svg"
-            >
-              <use href="#subtitle-off-icon" />
-            </svg>
-            <svg v-show="hasSubtitle && subtitlesEnabled" class="app-icons-svg">
-              <use href="#subtitle-on-icon" />
-            </svg>
-          </app-base-button>
-          <!--------------------------------- PLAY-BAR Transcript ----------------------------------->
-          <app-base-button
-            id="btn-transcript"
-            ref="$btn-transcript"
-            class="btn-transcript"
-            :aria-label="transcriptLabel"
-            :data-title="`${transcriptLabel} (t)`"
-            :disabled="!hasTranscript || fullscreenOn"
-            :class="{
-              md_disabled: !hasTranscript || fullscreenOn,
-              displayLabel: btnsLabelDisplay['btn-transcript'] === true
-            }"
-            @click="toggleViewTranscript()"
-            @mouseenter="activateLabel($event)"
-            @mouseleave="deactivateLabel($event)"
-            @focus="activateLabel($event)"
-            @blur="deactivateLabel($event)"
-          >
-            <svg
-              v-show="(hasTranscript && !transcriptEnabled) || !hasTranscript"
-              class="app-icons-svg"
-            >
-              <use href="#transcript-off-icon" />
-            </svg>
-            <svg
-              v-show="hasTranscript && transcriptEnabled"
-              class="app-icons-svg"
-            >
-              <use href="#transcript-on-icon" />
-            </svg>
-          </app-base-button>
-          <!--------------------------------- PLAY-BAR FullScreen ----------------------------------->
-          <app-base-button
-            id="btn-fullscreen"
-            ref="$btn-fullscreen"
-            class="fullscreenBtns"
-            :aria-label="fullscreenLabel"
-            :disabled="transcriptEnabled"
-            :class="{
-              md_disabled: transcriptEnabled,
-              displayLabel: btnsLabelDisplay['btn-fullscreen'] === true
-            }"
-            :data-title="`${fullscreenLabel} (f)`"
-            @click="toggleFullScreen()"
-            @mouseenter="activateLabel($event)"
-            @mouseleave="deactivateLabel($event)"
-            @focus="activateLabel($event)"
-            @blur="deactivateLabel($event)"
-          >
-            <svg v-show="!fullscreenOn" class="app-icons-svg">
-              <use href="#fullscreen-icon" />
-            </svg>
-            <svg v-show="fullscreenOn" class="app-icons-svg">
-              <use href="#fullscreen-exit-icon" />
-            </svg>
-          </app-base-button>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import $extendsMedia from '../mixins/$mediaMixins'
-import { mapState, mapActions } from 'pinia'
-import { useAppStore } from '../module/stores/appStore'
-import axios from 'axios'
-
-export default {
-  mixins: [$extendsMedia],
-  props: {
-    mediaToPlay: { type: [Object, Boolean], default: false }
-  },
-  emits: ['resize-video'],
-
-  data() {
-    return {
-      id: `plyr_${this.mediaToPlay.id}`,
-      //Playback animation
-      playClicked: false,
-      playBackAnim: true,
-      //ProgressSeek
-      progressSeek: null,
-      //Tooltip
-      seekTooltip: null,
-      tooTipTimeCode: '00:00',
-      //Hiding playbar animation
-      focusTimeout: null,
-      delayUntilHide: 5000,
-      hideTimer: null,
-      //Transcript
-      transcriptEnabled: false,
-      transcriptToShow: null,
-      //Fullscreen
-      fullscreenOn: false
-    }
-  },
-  computed: {
-    ...mapState(useAppStore, ['getCurrentBrowser', 'getMediaSubtitles']),
-    //Transcript
-    hasTranscript() {
-      if (!this.mediaToPlay) return
-      return this.mediaToPlay.mTranscript || false
-    },
-    //Subtitle
-    hasSubtitle() {
-      if (!this.mediaToPlay) return
-      return this.mediaToPlay.mSubtitles || false
-    },
-    subtitlesEnabled() {
-      if (!this.hasSubtitle) return false
-      else return this.getMediaSubtitles
-    },
-    //mediaContainer (only used for video)
-    mediaContainer() {
-      if (!this.mediaToPlay) return
-      return this.mediaToPlay.mMediaContainer
-    },
-
-    //MediaDuration :Number (used for tooltip)
-    mediaDuration() {
-      return this.mediaToPlay.mElement.duration
-        ? this.mediaToPlay.mElement.duration
-        : 0
-    },
-    //Labels
-    fullscreenLabel() {
-      let label = null
-      if (this.fullscreenOn) label = `${this.$t('button.full_screen_off')}`
-      else label = `${this.$t('button.full_screen_on')}`
-      return label
-    },
-    transcriptLabel() {
-      let label = null
-      if (this.transcriptEnabled) label = `${this.$t('button.transcript_off')}`
-      else label = `${this.$t('button.transcript_on')}`
-      return label
-    },
-    ccLabel() {
-      let label = null
-      if (this.subtitlesEnabled) label = `${this.$t('button.subtitle_off')}`
-      else label = `${this.$t('button.subtitle_on')}`
-      return label
-    }
-  },
-  mounted() {
-    //initialize media $refs
-    this.initializeMediaElm()
-    //initialize video $refs
-    if (this.mediaToPlay.mType === 'video') this.initializeVideoElm()
-
-    //Set eventlistener for media
-    this.setMediaHandlers()
-    //Set eventlistener for video
-    if (this.mediaToPlay.mType === 'video') this.setVideoHandlers()
-
-    //Set label for ProgressBar
-    this.setProgressBarA11Y()
-    //Set initial volume and duration
-    this.updateVolumeLevel()
-
-    //update the the information of the media element linked to this play bar. playbar instance will be added to the media info
-    this.updateCurrentMediaElements({
-      id: this.mediaToPlay.id,
-      ...this.$parent.$refs
-    })
-  },
-  beforeUnmount() {
-    if (this.isPlaying) {
-      this.togglePlay()
-    }
-    this.removeMediaHandlers()
-
-    if (this.mediaToPlay.mType === 'video') this.removeVideoHandlers()
-
-    if (this.firefoxTrack) {
-      this.firefoxTrack.removeEventListener('cuechange', this.fireFoxMoveCC)
-    }
-    //this.$bus.$off('play-media', this.handleMediaControls)
-    this.$bus.$off('transcript-hidden', this.resetTranscript)
-    return this.$bus.$off('close-sidebar', 'ctxTranscript')
-  },
-  methods: {
-    ...mapActions(useAppStore, [
-      'setMediaSubtitles',
-      'updateCurrentMediaElements'
-    ]),
-    /**
-     * @description - Set the DOM elements specific for video
-     */
-    initializeVideoElm() {
-      //SeekTooltip
-      this.seekTooltip = this.$refs['$seek-tooltip']
-      //Transcript
-      this.$bus.$on('transcript-hidden', this.resetTranscript)
-      this.setTranscript()
-    },
-
-    /** "@description  -update the information of the seek tooltip*/
-    updateSeekTooltip(evt) {
-      //Elm progress Bar
-      const progressBar = this.progressBar
-      //progressBar position on the page
-      const left = progressBar.getBoundingClientRect().left
-      //Mouse position versus progressBar
-      const hoverPos = evt.clientX - left
-      //Get progressBar offsetWidth
-      const width = progressBar.offsetWidth
-
-      //Define the value of the skip tooltip position
-      let offsetX = null
-
-      switch (true) {
-        case hoverPos < 15:
-          offsetX = 20
-          break
-        case hoverPos > width - 55:
-          offsetX = width - 55
-          break
-        default:
-          offsetX = hoverPos
-      }
-
-      this.seekTooltip.style.left = `${offsetX}px` // update visual position of tooltip
-
-      //Get % of the cursor hover position/progressBar width
-      let percentage = 0
-      if (hoverPos > width) percentage = 100
-      if (hoverPos < 0) percentage = 0
-      else {
-        percentage = hoverPos / width
-      }
-      let skipTo = percentage * this.mediaDuration
-      //Update the Tooltip time
-      this.tooTipTimeCode = this.$helper.formatTime(skipTo)
-    },
-    /**
-     * @description - handle all the listeners for videos
-     */
-    setVideoHandlers() {
-      //Tooltip
-      this.progressArea.addEventListener('mousemove', this.updateSeekTooltip)
-      //Fullscreen
-      this.mediaContainer.addEventListener(
-        'fullscreenchange',
-        this.updateFullScreenState
-      )
-      //Show controls
-      this.mediaContainer.addEventListener('mousemove', this.showControls)
-    },
-    /**
-     * @description - Unset all the listeners (video)
-     */
-    removeVideoHandlers() {
-      //Tooltip
-      this.progressArea.removeEventListener('mousemove', this.updateSeekTooltip)
-      //Fullscreen
-      this.mediaContainer.removeEventListener(
-        'fullscreenchange',
-        this.updateFullScreenState
-      )
-      //Show controls
-      this.mediaContainer.removeEventListener('mousemove', this.showControls)
-    },
-    /**
-     /* @description - handle the play /pause of the media and the playback video animation
-     */
-    handlePlayVideo(type = null) {
-      //Play/pause
-      this.togglePlay()
-      //Playbar animation (show/hide)
-      this.isPlaying ? this.hideControls() : this.showControls()
-
-      //Playback animation (only the first play click)
-      if (this.playClicked && !type) {
-        this.playBackAnim = false
-        return
-      }
-      //this.runPlaybackAnimation()
-      this.playBackAnim = true
-      this.playClicked = true
-      // Should indicate with media is playing and set it in the store
-    },
-    /**
-     * @description - Toggle the state of the screen
-     * Set or unset the media in full screen
-     */
-    toggleFullScreen() {
-      const fullscreenElement = this.mediaContainer
-      if (document.fullscreenElement) {
-        // exitFullscreen is only available on the Document object.
-        document.exitFullscreen()
-      } else {
-        //fullscreen is available on Element.
-        fullscreenElement.requestFullscreen()
-      }
-    },
-    /**
-     * @description update the value of fulls screen state
-     */
-    updateFullScreenState() {
-      this.fullscreenOn = !this.fullscreenOn
-    },
-
-    fireFoxMoveCC() {
-      if (this.firefoxTrack.activeCues[0]) {
-        this.firefoxTrack.activeCues[0].line = 12
-      }
-    },
-    /**
-     * @description show the subtitle
-     */
-    showSubtitles() {
-      this.mediaElement.textTracks[0].mode = 'showing'
-      this.setMediaSubtitles(true)
-      if (this.getCurrentBrowser == 'Firefox') {
-        let video = document.getElementsByTagName('video')[0]
-        let tracks = video.textTracks
-        this.firefoxTrack = tracks[0]
-
-        this.firefoxTrack.addEventListener('cuechange', this.fireFoxMoveCC)
-      }
-    },
-
-    hideSubtitles() {
-      this.mediaElement.textTracks[0].mode = 'hidden' // value can be 'disabled' also.
-      this.setMediaSubtitles(false)
-    },
-    toggleViewSubtitle() {
-      if (this.subtitlesEnabled) return this.hideSubtitles()
-      if (!this.subtitlesEnabled) return this.showSubtitles()
-    },
-    /**
-     * @description method to show or hide the transcipt.
-     * @summary get toggle the value of transcriptEnabled and get content from the transcript file
-     * and transfer it to Module for display.
-     * @fires 'open-sidebar' to AppBaseModule
-     * @fires 'close-sidebar' to AppBaseModule
-     */
-    toggleViewTranscript() {
-      this.transcriptEnabled = !this.transcriptEnabled
-
-      if (this.transcriptEnabled && this.transcriptToShow) {
-        //this.$bus.$emit('resize-media', 'sm')
-        //Resize video container
-        this.$emit('resize-video', 'sm')
-        //Open sidebar with the transcript
-        return this.$bus.$emit('open-sidebar', {
-          ctx: 'ctxTranscript',
-          e: this.transcriptToShow,
-          w: this.pbContainer
-        })
-      }
-
-      // Send close signal for the side bar when transcipt state is not enabled
-      if (!this.transcriptEnabled) {
-        //this.$bus.$emit('resize-media', 'lg')
-        //Resize video container
-        this.$emit('resize-video', 'lg')
-        //Open sidebar with the transcript
-        return this.$bus.$emit('close-sidebar', 'ctxTranscript')
-      }
-    },
-    /**
-     * @description Fetching method for transcript
-     * @summary Fetch a transcript from HTML file to display. File URL is defined in the media data
-     *  and return its content for display
-     * @return {String} HTML string
-     */
-    async fetchTranscript() {
-      try {
-        // const tFile = 'exemple_transcript2.html'
-        const { mTranscript } = this.mediaToPlay
-        const tFile = mTranscript
-
-        if (!tFile) throw new Error('Missing transcript File!')
-
-        // validate file types. Only .html are allowed
-        if (!tFile.endsWith('.html'))
-          throw new Error(
-            'Invalid valid transcript file. \n Expecting .html file'
-          )
-
-        const fileUrl = `./${tFile}`
-        const res = await axios.get(fileUrl, { responseType: 'blob' })
-        const content = await res.data.text()
-
-        return content
-      } catch (err) {
-        console.warn("YOU'VE GOT AN ERROR!\n", err)
-      }
-    },
-    /** ******************* Rendering Methods****************************** */
-
-    /**
-     * @Description Method to set the transcription that need to be displayed
-     */
-    async setTranscript() {
-      if (!this.hasTranscript) return (this.transcriptToShow = null)
-
-      this.transcriptToShow = await this.fetchTranscript()
-    },
-
-    /**
-     * @description Method to reset the transcript state
-     */
-    resetTranscript(content) {
-      this.transcriptEnabled = false
-    },
-
-    /**
-     * @description Show the media controler     */
-    showControls() {
-      this.showControlsValue = true
-      if (this.hideTimer) clearTimeout(this.hideTimer) //cancel existing timer
-
-      this.hideControls()
-    },
-    /**
-     * @description Hide the media after the video start playing
-     */
-
-    hideControls() {
-      if (this.mediaElement.paused) return
-
-      this.hideTimer = setTimeout(() => {
-        this.showControlsValue = false
-      }, this.delayUntilHide)
-    }
-  }
-}
-</script>
-<style lang="scss" scoped>
-.pb-container.video {
-  position: absolute;
-  height: 100%;
-  width: 100%;
-  justify-content: center;
-  display: flex;
-}
-
-.playback-button {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  display: flex;
-  flex-flow: column wrap;
-  justify-content: center;
-  align-items: center;
-  background-color: transparent;
-  .playback-wrapper {
-    height: 64px;
-    width: 64px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    border-radius: 50%;
-
-    svg {
-      height: 32px;
-      width: 26.29px;
-      &.play-icon {
-        margin-left: 11%;
-      }
-    }
-  }
-}
-//Wrapper
-.pb-wrapper {
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  position: absolute;
-  bottom: 0;
-  opacity: 0;
-  z-index: 2;
-  &.show-controls {
-    opacity: 1;
-    transition: opacity 0.35s ease-in-out;
-  }
-
-  //Wrapper timeline
-  .pb-timeline {
-    --progress-bar-height: 6px;
-    position: relative;
-    width: 100%;
-    height: var(--progress-bar-height);
-    .progress-area {
-      width: 100%;
-      height: 400%; //Add contact surface of click on progressBar
-      position: relative;
-      top: -150%;
-      display: flex;
-      cursor: pointer;
-      align-items: center;
-      z-index: 8; //z-index on top of the video elm
-      &:hover {
-        .seek-tooltip {
-          opacity: 1;
-        }
-      }
-
-      //Progress bar
-      .pb-progress-bar {
-        --progress-bar-border-height: 1px;
-        cursor: pointer;
-        width: 100%;
-        height: var(--progress-bar-height);
-        //background-color: transparent;
-        overflow: visible;
-        &:focus {
-          .progress-thumb {
-          }
-        }
-      }
-
-      .progress-indicator {
-        width: 0;
-        height: 100%;
-        position: relative;
-        user-select: none;
-
-        &.progress-animation {
-          transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-          transition-duration: 0.01s;
-          transition-property: all;
-          transition: width 0.1s linear;
-        }
-      }
-      //Custom thumb
-      .progress-thumb {
-        //Cliquable thumb
-        --progress-thumb-size: 30px;
-        width: var(--progress-thumb-size);
-        height: var(--progress-thumb-size);
-        position: absolute;
-
-        right: calc(var(--progress-thumb-size) / -2);
-        top: calc(
-          -1 * (
-              var(--progress-thumb-size) / 2 - var(--progress-bar-height) / 2
-            ) - var(--progress-bar-border-height) / 2
-        );
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        &::after {
-          content: '';
-          //Visible thumb
-          height: 16px;
-          width: 16px;
-          //Colors and styling
-          border-radius: 50%;
-          //background-color: var(--primary700);
-        }
-      }
-
-      &:hover {
-        .seek-tooltip {
-          //tooltip visible only when hovering progress-area
-          opacity: 1;
-        }
-      }
-
-      .seek-tooltip {
-        position: absolute;
-        top: -30px;
-        opacity: 0;
-        user-select: none;
-        border-radius: 1px;
-        padding: 2px;
-      }
-    }
-  }
-
-  //Controls
-  .pb-controls {
-    padding: 12px 32px;
-    @media screen and (max-width: 800px) {
-      padding: 12px 12px;
-    }
-    width: 100%;
-    //height: 76px;
-    height: auto;
-    display: flex;
-    flex-flow: row wrap;
-    justify-content: space-between;
-    -webkit-justify-content: space-between;
-    align-items: center;
-
-    .pb-areas {
-      display: flex;
-      flex-flow: row nowrap;
-      justify-content: center;
-      align-items: center;
-
-      &.right {
-        .btn {
-          margin-right: 24px;
-
-          &:last-child {
-            margin-right: 0;
-          }
-        }
-      }
-
-      .btn {
-        position: relative;
-
-        &::before {
-          content: attr(data-title);
-          position: absolute;
-          top: -50px;
-          right: 0;
-          margin-left: -35px;
-          word-break: keep-all;
-          white-space: pre;
-          display: none;
-          opacity: 0;
-          width: fit-content;
-          border-radius: 1px;
-          padding: 2px;
-        }
-        //Icons btn specific
-        &.playbar-btn {
-          &::before {
-            left: 0 !important;
-            margin-left: 0 !important;
-          }
-          margin-right: 16px;
-          //Style
-          border-radius: 50%;
-          //Style
-          &:hover {
-            &::before {
-              display: block;
-              opacity: 1;
-            }
-          }
-          @media screen and (max-width: 800px) {
-            height: 32px;
-            width: 32px;
-          }
-          svg.play-icon {
-            margin-left: 11.875%; // 11.8% off center on the design
-          }
-        }
-        &.volume-btn {
-          margin: 0 20px;
-          svg.volume-low-icon {
-            height: 17.75px;
-          }
-        }
-      }
-      //Manage displayLabel (dynamic class)
-      button.displayLabel {
-        &:hover,
-        &:focus {
-          &::before {
-            display: block;
-            opacity: 1;
-          }
-        }
-      }
-
-      .pb-timer {
-        width: max-content;
-      }
-      //Volume
-      .volume-controls {
-        --volumecontrols-height: 22px;
-        --volume-thumb-size: 16px;
-        display: flex;
-        flex-flow: row wrap;
-        justify-content: center;
-        position: relative;
-        height: var(--volumecontrols-height);
-        &:hover {
-          //button title   //DisplayLabel is a dynamic class
-          .volume-slider.displayLabel + span {
-            display: block;
-            opacity: 1;
-          }
-        }
-        .volume-slider {
-          -webkit-appearance: none;
-          width: 100px;
-          //Responsive
-          @media screen and (max-width: 800px) {
-            width: 80px;
-          }
-          border-radius: 24px;
-          cursor: pointer;
-          position: relative;
-          z-index: 2;
-          &::-webkit-slider-runnable-track {
-            background: transparent;
-          }
-          //Input slider thumb
-          @mixin volume-thumb {
-            -webkit-appearance: none;
-            width: var(--volume-thumb-size);
-            height: var(--volume-thumb-size);
-            margin-top: 12px;
-            border-radius: 50%;
-            position: relative;
-            cursor: pointer;
-          }
-          &::-webkit-slider-thumb {
-            @include volume-thumb;
-          }
-          //button title
-          & + span {
-            position: absolute;
-            top: -62px;
-            right: 0;
-            margin-left: -35px;
-            word-break: keep-all;
-            white-space: pre;
-            display: none;
-            opacity: 0;
-            user-select: none;
-            //Colors
-            //background-color: var(--primary100);
-            //color: var(--primary700);
-            border-radius: 1px;
-            padding: 2px;
-          }
-          //DisplayLabel is a dynamic class
-          &.displayLabel:focus {
-            & + span {
-              display: block;
-              opacity: 1;
-            }
-          }
-        }
-
-        .volume-progress {
-          --volumeIndicator-height: 9px;
-          height: var(--volumeIndicator-height);
-          top: calc(
-            var(--volumecontrols-height) / 2 - var(--volumeIndicator-height) / 2
-          ); //centrer en hauteur
-          width: calc(
-            100% - var(--volume-thumb-size) / 2
-          ); //Width smaller than the range width to be sure the progress width don't exceed the range width
-          position: absolute;
-          border-radius: 20px;
-          background-repeat: no-repeat;
-          background-size: var(--background-size-vs, 0%) 100%; //Js dynamic variable
-          //colors
-        }
-      }
-    }
-  }
-
-  svg {
-    //width: 19px;
-    //height: 19px;
-    //colors
-    //stroke: var(--primary700);
-  }
-
-  button {
-    height: 48px;
-    width: 48px;
-    background-color: transparent;
-    padding: 0;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    svg {
-      height: 24px;
-      @media screen and (max-width: 800px) {
-        height: 18px;
-      }
-    }
-  }
-}
-
-//CSS for audio only
-.audio.pb-wrapper {
-  border-radius: 4px;
-  position: initial;
-  .pb-controls {
-    padding: 8px 16px;
-    .volume-controls {
-      margin-left: 8px;
-      width: 100%;
-      --volume-thumb-size: 12px;
-      .volume-slider {
-        width: 50px;
-      }
-      .volume-progress {
-        --volumeIndicator-height: 6px;
-      }
-    }
-  }
-  .pb-timer {
-    margin-right: 20px;
-  }
-  .pb-timeline {
-    .progress-area {
-      justify-content: center;
-    }
-    .pb-progress-bar {
-      border-radius: 4px;
-      //max-width: 90%;
-    }
-  }
-  .volume-btn {
-    margin-left: 16px;
-  }
-  .pb-areas {
-    width: 100%;
-    display: grid;
-    grid-template-columns:
-      min-content
-      min-content
-      1fr
-      min-content
-      min-content;
-    align-items: center;
-    justify-content: center;
-    button {
-      height: 24px;
-      width: 24px;
-      &.playbar-btn {
-        margin-right: 8px;
-      }
-      svg {
-        height: 12.25px;
-        @media screen and (max-width: 800px) {
-          height: 18px;
-        }
-      }
-      &.volume-btn {
-        svg {
-          height: 16px;
-        }
-        svg.volume-low-icon {
-          height: 14px;
-        }
-      }
-    }
-  }
-}
-//Playback button video (to finish)
-.playback-button {
-  .playback-wrapper {
-    opacity: 0;
-  }
-  &.initial {
-    .playback-wrapper {
-      animation-name: initial;
-      opacity: 1;
-    }
-  }
-  &.playback-animation {
-    .playback-wrapper {
-      opacity: 0;
-      animation-name: handlePlayBack;
-      animation-duration: 0.8s;
-      animation-timing-function: ease-in-out;
-    }
-  }
-}
-
-.audio-media-player {
-  .pb-areas {
-    .btn {
-      &::before {
-        top: inherit !important;
-        bottom: -50px;
-      }
-    }
-  }
-}
-
-@keyframes handlePlayBack {
-  0% {
-    opacity: 0;
-  }
-  50% {
-    opacity: 1;
-    transform: scale(0.95);
-  }
-  100% {
-    opacity: 0;
-  }
-}
-
-@keyframes disappear {
-  0% {
-    opacity: 1;
-  }
-  100% {
-    opacity: 0;
-  }
-}
-</style>