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

package/src/components/AppCompPlayBarNext.vue

@@ -1,2052 +1,2052 @@
-<!--@ 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="transcriptBtnDisabled"
-            :class="{
-              md_disabled: transcriptBtnDisabled,
-              displayLabel: btnsLabelDisplay['btn-transcript'] === true
-            }"
-            @click="toggleViewTranscript($event)"
-            @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="fullscreenBtnDisabled"
-            :class="{
-              md_disabled: fullscreenBtnDisabled,
-              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 { mapState, mapActions } from 'pinia'
-import { useAppStore } from '../module/stores/appStore'
-import axios from 'axios'
-
-export default {
-  props: {
-    mediaToPlay: { type: [Object, Boolean], default: false }
-  },
-
-  emits: ['resize-video'],
-  setup() {
-    const store = useAppStore()
-    const { activityRef, id } = store.getCurrentPage
-    const { userInteraction } = store.getPageInteraction(activityRef, id)
-    return { store, userInteraction }
-  },
-  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,
-      //==========================================================
-      //Container Playbar
-      pbContainer: null,
-      //ShowControls (show the playbar or not, default is true)
-      showControlsValue: true,
-      //Player
-      isPlaying: false,
-      canReplay: false,
-      savedIsPlaying: false, //To get the playing status on mousemove on the progressBar
-      //ProgressBar
-      currentTime: 0,
-      progressArea: null,
-      progressBar: null,
-      progressIndicator: null,
-      progressThumb: null,
-      progressThumbDown: false,
-      progressThumbHover: false,
-      //Volume
-      volumeBtn: null,
-      volumeSlider: null,
-      volumeIndicator: null,
-      currentVolume: null,
-      savedVolume: 0.5, //Saved volume when muted
-      //muted
-      muted: false,
-
-      //Labels
-      //Strings for screenreaders (duration et time)
-      mediaA11Y: {
-        label: 'progress',
-        valMax: null,
-        valNow: null,
-        valueText: null,
-        timeCode: 0,
-        duration: 0
-      },
-      //buttons label (all the buttons that need labels management in the playbar)
-      btnsLabelDisplay: {
-        'btn-subtitles': false,
-        'btn-transcript': false,
-        'btn-fullscreen': false,
-        'playbar-play': false,
-        'playbar-volume': false,
-        'volume-slider': false
-      },
-      //FocusState to manage arrows keydown on the 2 sliders (progress and volume)
-      focusState: {
-        progressBar: false,
-        volumeSlider: false
-      },
-      otherVideoTranscriptShown: false
-      //==========================================================
-    }
-  },
-  computed: {
-    ...mapState(useAppStore, [
-      'getCurrentBrowser',
-      'getMediaSubtitles',
-      //=====================================================
-      'getCurrentPage',
-      'getModuleChildren',
-      'hasMediaElOrTimeline',
-      'getCurrentMediaDuration',
-      'getDataFromServer',
-      'getAutoplayEnabled',
-      'getMediaVolume',
-      'getModuleInfo',
-      'getMediaPlaybarValues',
-      'getPageInteraction',
-      'getMediaMuted'
-      //=====================================================
-    ]),
-    //==========================================================
-    //MediaElement
-    mediaElement() {
-      if (!this.mediaToPlay) return null
-      const { mElement } = this.mediaToPlay
-      return mElement ? mElement : null
-    },
-    //Media Progress
-    //Time display : duration
-    mediaDurationTime() {
-      if (this.mediaDuration > 0)
-        return this.$helper.formatTime(this.mediaDuration)
-      else return '00:00'
-    },
-    //Time display : timecode
-    timecode() {
-      if (this.currentTime && typeof (this.currentTime === Number)) {
-        return this.$helper.formatTime(this.currentTime)
-      } else return '00:00'
-    },
-    //ProgressPercentage for progressBarIndicator width
-    progressBarPercentage() {
-      if (this.currentTime && this.mediaDuration)
-        return (this.currentTime / this.mediaDuration) * 100
-      else return 0
-    },
-    progressBarEnded() {
-      return this.currentTime >= Math.floor(this.mediaDuration)
-    },
-    //Volume
-    volumeState() {
-      let state = null
-      switch (true) {
-        case this.muted || this.currentVolume <= 0:
-          state = 'muted'
-          break
-
-        case !this.muted && this.currentVolume <= 0.5:
-          state = 'low'
-          break
-        case !this.muted && this.currentVolume > 0.5:
-          state = 'high'
-      }
-
-      return state
-    },
-    //Volume progress for slider background
-    volumeSliderBackground() {
-      return (this.currentVolume * 100).toFixed(0).toString() + '%'
-    },
-    //Volume from store
-    mediaVolume() {
-      // return this.getMediaVolume
-      return this.getMediaPlaybarValues('volume')
-    },
-    //media from store
-    mediaMuted() {
-      return this.getMediaMuted
-    },
-    //Labels
-    playLabel() {
-      let label = null
-      switch (true) {
-        case this.isPlaying:
-          label = this.$t('button.pause')
-          break
-
-        case this.canReplay:
-          label = this.$t('button.replay')
-          break
-
-        default:
-          label = this.$t('button.play')
-      }
-      return label
-    },
-    volumeLabel() {
-      let label = null
-      switch (true) {
-        case this.muted:
-          label = `${this.$t('button.unmute')}`
-          break
-        case !this.muted:
-          label = `${this.$t('button.mute')}`
-          break
-      }
-      return label
-    },
-    volumeLevelA11Y() {
-      const w = this.$i18n.locale === 'en' ? 'at' : 'à'
-      const level = Math.round(this.currentVolume * 100)
-      let txtA11Y = `Volume ${w} ${level}%`
-
-      return txtA11Y
-    },
-    //==========================================================
-    //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
-    },
-    transcriptBtnDisabled() {
-      return (
-        !this.hasTranscript ||
-        this.fullscreenOn ||
-        this.otherVideoTranscriptShown
-      )
-    },
-    fullscreenBtnDisabled() {
-      return this.transcriptEnabled || this.otherVideoTranscriptShown
-    }
-  },
-  watch: {
-    userInteraction: {
-      immediate: true,
-      deep: true,
-      handler() {
-        if (!this.userInteraction || !Object.keys(this.userInteraction).length)
-          return
-        this.getViewedSatus()
-        this.setMediaVolume()
-      }
-    }
-  },
-
-  mounted() {
-    //initialize media $refs
-    this.initializeMediaElm()
-    //initialize video $refs && set eventlistener for video
-    if (this.mediaToPlay.mType === 'video') {
-      this.initializeVideoElm()
-      this.setVideoHandlers()
-    }
-    //Set eventlistener for media
-    this.setMediaHandlers()
-
-    //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',
-      'setMediaMuted',
-      'setMediaPlaybarValues'
-    ]),
-
-    //======================================================================
-    /**
-     * @description - Set all the DOM elements for medias
-     */
-    initializeMediaElm() {
-      this.pbContainer = this.$refs['$pb-container']
-      //ProgressBar
-      this.progressArea = this.$refs['$progress-area']
-      this.progressBar = this.$refs['$progress-bar']
-      this.progressIndicator = this.$refs['$progress-indicator']
-      this.progressThumb = this.$refs['$progress-thumb']
-      //SeekTooltip
-      this.seekTooltip = this.$refs['$seek-tooltip']
-      //Volume//
-      this.volumeBtn = this.$refs['$btn-volume']
-      this.volumeSlider = this.$refs['$volume-slider']
-      this.volumeIndicator = this.$refs['$volume-progress']
-    },
-    /**
-     * @description - handle all the listeners for medias
-     */
-    setMediaHandlers() {
-      if (this.mediaElement) {
-        //Prevent default on keys used for navigation in the player (prevent scrollbar to be trigger when changing volume)
-        this.pbContainer.addEventListener('keydown', this.keysPreventDefault)
-        //progressBar events
-        this.progressArea.addEventListener('click', this.seekingProgress)
-        //window handlers for playbar progress
-        window.addEventListener('mousemove', this.progressWindowMove)
-        window.addEventListener('mouseup', this.progressWindowUp)
-        //EndprogressBar
-        //Update data when media as a timeupdate/ended
-        this.mediaElement.addEventListener(
-          'timeupdate',
-          this.updateProgressBarTime
-        )
-        this.mediaElement.addEventListener('ended', this.mediaEnded)
-        //Volume
-        this.volumeSlider.addEventListener('input', this.updateVolumeLevel)
-        //Hotkeys
-        this.pbContainer.addEventListener('keydown', this.handleMediaControls)
-
-        //Bus
-        //this.$bus.$on('play-media', this.handleMediaControls)
-      }
-    },
-
-    /**
-     * @description - Unset all the listeners (medias)
-     */
-    removeMediaHandlers() {
-      if (this.mediaElement) {
-        //progressBar events
-        this.progressArea.removeEventListener('click', this.seekingProgress)
-        //window handlers for playbar progress
-        window.removeEventListener('mousemove', this.progressWindowMove)
-        window.removeEventListener('mouseup', this.progressWindowUp)
-
-        this.mediaElement.removeEventListener(
-          'timeupdate',
-          this.updateProgressBarTime
-        )
-        this.mediaElement.removeEventListener('ended', this.mediaEnded)
-
-        //Volume
-        this.volumeSlider.removeEventListener('input', this.updateVolumeLevel)
-        //Keys
-        this.pbContainer.removeEventListener('keydown', this.keysPreventDefault)
-        this.pbContainer.removeEventListener(
-          'keydown',
-          this.handleMediaControls
-        )
-      }
-    },
-    /**
-     * @description - play or pause the media
-     * @fires manage-media-players - to the PAge the media in play
-     */
-    togglePlay() {
-      //If the progressBar is at the end, restart the media
-      if (this.progressBarEnded) {
-        this.mediaElement.currentTime = 0
-        this.currentTime = 0
-      }
-      //MediaElement
-      this.isPlaying ? this.mediaElement.pause() : this.mediaElement.play()
-      //Data
-      if (!this.isPlaying) {
-        //Signal to set this mediaElement as the last playing
-        this.$bus.$emit('manage-media-players', this.mediaToPlay)
-      }
-
-      this.isPlaying = !this.isPlaying
-      this.canReplay = false
-    },
-    /**
-     * @description - Set the media to a new time (if its a time between 0 and max)
-     */
-    setMediaTime(time) {
-      if (time <= 0) this.mediaElement.currentTime = 0
-      else if (time > this.mediaDuration)
-        this.mediaElement.currentTime = this.mediaDuration
-      else this.mediaElement.currentTime = time
-      //Handle finish Media if its set to max duration
-      if (this.progressBarEnded) {
-        this.mediaEnded()
-      }
-    },
-    /**
-     * @description - Set the media Ended if it is set to the end of the progressBar by the user or if it plays until the end
-     */
-
-    mediaEnded() {
-      //Don't make the media play when release progressBar thumb and the media is Ended
-      this.savedIsPlaying = false
-      //Pausing mediaElement is isPlaying
-      if (this.mediaElement && this.isPlaying) {
-        this.mediaElement.pause()
-        this.isPlaying = false
-      }
-      this.$bus.$emit('media-viewed', this.mediaToPlay.id)
-      this.canReplay = true
-      if (this.mediaToPlay.mType === 'video') this.showControls()
-    },
-
-    /**
-     * @description get the view Status of the current media from UserInteraction
-     */
-    getViewedSatus() {
-      //Should get the viewed Status from UserInteraction
-      // let { activityRef, id } = this.getCurrentPage
-      // const { userInteraction = null } = this.getPageInteraction(
-      //   activityRef,
-      //   id
-      // )
-      if (
-        !this.userInteraction ||
-        !this.userInteraction.mediasViewed ||
-        !this.userInteraction.mediasViewed.length
-      )
-        return
-
-      const { mediasViewed } = this.userInteraction
-
-      //Should update the can replay state of media
-      this.canReplay = mediasViewed.includes(this.mediaElement.id)
-    },
-    /**
-     * @description controls the level Of the media volume
-     * @param d string, optional volUp or volDown to Add or Remove 0.05 from volume value
-     */
-    updateVolumeLevel(d = null) {
-      if (!this.mediaElement) return
-      if (this.mediaElement.muted) {
-        this.mediaElement.muted = this.muted = false
-        //Send muted state to the store
-        this.setMutedState(this.muted)
-      }
-      switch (true) {
-        case d == 'volUP':
-          //Set volume Up
-          if (this.mediaElement.volume >= 1) return
-          if (this.mediaElement.volume >= 0.95) {
-            this.mediaElement.volume = 1
-          } else {
-            this.mediaElement.volume = (
-              this.mediaElement.volume + 0.05
-            ).toFixed(2)
-          }
-          this.volumeSlider.value = this.currentVolume =
-            this.mediaElement.volume
-          break
-
-        case d == 'volDOWN':
-          //Set volume Down
-          if (this.mediaElement.volume <= 0) return
-          if (this.mediaElement.volume <= 0.05) {
-            this.mediaElement.volume = 0
-          } else {
-            this.mediaElement.volume = (
-              this.mediaElement.volume - 0.05
-            ).toFixed(2)
-          }
-
-          this.volumeSlider.value = this.currentVolume =
-            this.mediaElement.volume
-          break
-
-        default: {
-          //set volume
-          this.currentVolume = this.mediaElement.volume =
-            this.volumeSlider.value
-          this.currentVolume = parseFloat(this.currentVolume).toFixed(2)
-        }
-      }
-      if (!this.muted) this.savedVolume = this.currentVolume
-
-      this.setMediaPlaybarValues({
-        volume: this.savedVolume
-      }) // Save the volume in the Store
-    },
-    /**
-     * @description - Toggle the state fo the sound
-     */
-    toggleMute() {
-      //Check first the volume of the media
-      if (this.mediaElement.volume == 0) this.muted = true
-
-      this.muted = !this.muted
-      this.mediaElement.muted = this.muted // set the muted state of the media
-
-      //Send mutedstate to the store
-      this.setMutedState(this.muted)
-
-      if (this.muted) {
-        this.mediaElement.volume = 0
-        this.savedVolume = this.currentVolume
-        this.volumeSlider.value = 0
-        this.currentVolume = 0
-      }
-      if (!this.muted) {
-        this.volumeSlider.value = this.savedVolume
-        this.currentVolume = this.mediaElement.volume = this.volumeSlider.value
-      }
-    },
-
-    /** @description Save the muted in the Store */
-    setMutedState() {
-      this.setMediaMuted(this.muted)
-    },
-    //Keyboard event methods
-    /**
-     * @description Method to prevent default on keys used for navigation in the player (prevent scrollbar to be trigger when changing volume)
-     * */
-    keysPreventDefault(evt) {
-      if (
-        ['Space', 'ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].indexOf(
-          evt.key
-        ) > -1
-      ) {
-        evt.preventDefault()
-      }
-    },
-
-    /**
-     * @description Method to handle the keyboard input to controle the media player
-     *@summary Keyboard actions:
-     * *** Left-Arrow/ Right-Arrow : move foward/Backward media by 5s
-     * *** Up-Arrow/ Down-Arrow: Increase/Decrease media volume by 5%
-     * *** c : show/ hide subtitle
-     * *** f : enter/ exit fullscreen
-     * *** k : play/ pause media
-     * *** m : Mute/ Unmute volume
-     * *** t : show transcript
-     */
-
-    handleMediaControls(e) {
-      e = e.code
-      this.showControls()
-      switch (e) {
-        case 'ArrowLeft':
-          //If focus is on Volume, VolDown
-          if (this.focusState.volumeSlider) {
-            //VolDown
-            this.updateVolumeLevel('volDOWN')
-            break
-          } else {
-            //Go back 5s in media timeline
-            this.cursorLeft()
-            break
-          }
-
-        case 'ArrowRight':
-          //If focus is on Volume, VolUp
-          if (this.focusState.volumeSlider) {
-            //VolUp
-            this.updateVolumeLevel('volUP')
-            break
-          } else {
-            //Move forward 5s in media timeline
-            this.cursorRight()
-            break
-          }
-
-        case 'ArrowUp':
-          //If focus is on progressBar, cursorRight
-          if (this.focusState.progressBar) {
-            //Move forward 5s in media timeline
-            this.cursorRight()
-            break
-          } else {
-            //VolUp
-            this.updateVolumeLevel('volUP')
-            break
-          }
-
-        case 'ArrowDown':
-          //If focus is on progressBar, cursorRight
-          if (this.focusState.progressBar) {
-            //Go back 5s in media timeline
-            this.cursorLeft()
-            break
-          } else {
-            //Voldown
-            this.updateVolumeLevel('volDOWN')
-            break
-          }
-
-        case 'KeyM':
-          this.toggleMute()
-          break
-
-        case 'KeyF':
-          if (this.mediaToPlay.mType == 'audio') break
-          //Toggle fullScreen
-          this.toggleFullScreen()
-          break
-
-        case 'KeyT':
-          if (this.mediaToPlay.mType == 'audio') break
-          //Toggle transcript view
-          this.toggleViewTranscript(e)
-          break
-
-        case 'KeyC':
-          if (this.mediaToPlay.mType == 'audio') break
-          //Toggle subtitle view
-          this.toggleViewSubtitle()
-          break
-
-        case 'KeyK':
-          //Play Pause on k bar pressed
-          if (this.mediaToPlay.mType == 'audio') this.togglePlay()
-          //Play/pause video with the playBackAnim if it is triggerd with KeyK
-          else this.handlePlayVideo('playBackAnim')
-          break
-      }
-    },
-    /**
-     * @description - Activate the label of a button include in btnsLabelDisplay on Hover/Focus on the button. Deactivate the label in all the others btns
-     */
-    activateLabel(elm) {
-      const id = elm.id
-      this.btnsLabelDisplay[id] = true
-      for (const property in this.btnsLabelDisplay) {
-        if (property !== id) {
-          this.btnsLabelDisplay[property] = false
-        }
-      }
-    },
-    /**
-     * @description - Get currenttime from media
-     */
-
-    getCurrentTime() {
-      this.currentTime = this.mediaElement.currentTime
-      return this.mediaElement.currentTime
-    },
-    /**
-     * @description - controls to move the media timeline backward
-     */
-    cursorLeft() {
-      this.setMediaTime(this.getCurrentTime() - 5)
-    },
-    /**
-     * @description - control to move the media timeline forwrad
-     */
-    cursorRight() {
-      this.setMediaTime(this.getCurrentTime() + 5)
-    },
-    //ProgressBar Methods
-
-    /**
-     * @description - Update currentTime and timing strings when media is playing
-     */
-    updateProgressBarTime(e) {
-      //Get currentTime from the event
-      this.currentTime = e.target.currentTime
-      //Update strings
-      this.setProgressBarA11Y()
-      //If replay is true and the progressIndicator is not at the end, set canReplay to false
-      if (this.canReplay) this.canReplay = false
-      //If replay is false and progressIndicator is at the end, set canReplay to true
-      if (
-        !this.canReplay &&
-        this.currentTime >= Math.floor(this.mediaDuration)
-      ) {
-        this.canReplay = true
-      }
-    },
-
-    /**
-     * @description - Set mediatime depending on progressBar click
-     */
-    seekingProgress(e) {
-      if (!this.progressThumbDown && !this.progressThumbHover) {
-        const updatedTime =
-          (e.offsetX / this.progressBar.offsetWidth) * this.mediaDuration
-        this.setMediaTime(updatedTime)
-      }
-    },
-
-    /**
-     * @description - Set mediatime depending on mousemove on the screen (when progress thumb is mousedown)
-     */
-    progressWindowMove(ev) {
-      if (this.progressThumbDown) {
-        if (this.isPlaying) this.togglePlay()
-        this.getTimeFromClickPos(ev)
-        let timeToSet = Math.floor(this.getTimeFromClickPos(ev))
-        if (timeToSet < 0) timeToSet = 0
-        else if (timeToSet > this.duration) timeToSet = this.duration
-        this.currentTime = timeToSet
-      }
-    },
-
-    /**
-     * @description - Update thumb state (mouseup) when the mouse is up on the screen
-     */
-    progressWindowUp(ev) {
-      if (this.progressThumbDown) {
-        this.setMediaTime(this.currentTime)
-        this.progressThumbDown = false
-        //savedIsPlaying is the playing status saved on mousedown event on the thumb (the video is paused when moving on the progressBar)
-        if (this.isPlaying !== this.savedIsPlaying) this.togglePlay()
-      }
-    },
-    /**
-     * @description - Get the time corresponding of the position of the click on the progressBar
-     */
-    getTimeFromClickPos(ev) {
-      let timeToSet = 0
-      //La progress Bar
-      const progressBar = this.progressBar
-      //La position de la progressBar dans la page
-      const left = progressBar.getBoundingClientRect().left
-      //Position du click par rapport à la progressBar
-      let clickPos = ev.clientX - left
-      //Si la position est à gauche de la progressBar, retourner 0s
-      if (clickPos < 0) return 0
-      //Obtenir le width de la progressBar
-      const width = progressBar.offsetWidth
-      //Obtenir le ratio de la position du click vs width de la progressBar
-      let percentage = clickPos / width
-      //Si > que 1, veux dire que le clique est à droite de la progressBar (mettre le curseur à la fin)
-      percentage = percentage > 1 ? 1 : percentage
-      //Ratio * temps total du media donne la progressiob
-      timeToSet = percentage * this.mediaDuration
-      return timeToSet
-    },
-
-    /** @description - methode to set A11Y support for screen reader on progress bar element (video/audio/) */
-    setProgressBarA11Y() {
-      const w = this.$i18n.locale === 'en' ? 'at' : 'à'
-      const dm =
-        this.$i18n.locale === 'en'
-          ? `${this.mediaToPlay.mType} duration`
-          : `durée ${this.mediaToPlay.mType}`
-
-      this.mediaA11Y.valMax = Math.round(this.mediaElement.duration)
-      this.mediaA11Y.valNow = Math.round(this.currentTime)
-
-      //format text output for screen reader
-      let currentTimeArray = this.timecode.split(':')
-      let fullTimeArray = this.mediaDurationTime.split(':')
-      let hrsTxt, mnTxt, ssTxt, HRSTxt, MNTxt, SSTxt, fTimeTxt, cTimeTxt
-      const mediaTitle = this.mediaToPlay.mTitle || this.mediaToPlay.mType
-      this.mediaA11Y.label = this.$t('a11y_sr.seek_slider')
-
-      //format string to remove leading 0 digit for time
-      const formatNum = (n) => {
-        return n[0] == '0' ? n.substring(1).trim() : n.trim()
-      }
-
-      const formatMsg = (x, y) => {
-        const reg = /%x|%y/g
-        let formatStr = this.$t('a11y_sr.range_expression').replace(
-          reg,
-          (e) => {
-            if (e == '%x') return x
-            if (e == '%y') return y
-          }
-        )
-
-        return formatStr
-      }
-
-      switch (fullTimeArray.length) {
-        case 3:
-          if (!currentTimeArray.length) return
-          //format current hours text text with plurialization apply
-          hrsTxt =
-            currentTimeArray.length == 3 && parseInt(currentTimeArray[0]) > 0
-              ? `${formatNum(currentTimeArray[0])} ${this.$tc(
-                  'a11y_sr.time.hours',
-                  parseInt(formatNum(currentTimeArray[0]))
-                )}`
-              : ''
-
-          //format minutes text text with plurialization apply
-          mnTxt =
-            parseInt(currentTimeArray[1]) > 0
-              ? `${formatNum(currentTimeArray[1])} ${this.$tc(
-                  'a11y_sr.time.minute',
-                  parseInt(formatNum(currentTimeArray[1]))
-                )}`
-              : ''
-
-          //format seconds text with plurialization apply
-          ssTxt =
-            parseInt(currentTimeArray[2]) > 0
-              ? `${formatNum(currentTimeArray[2])} ${this.$tc(
-                  'a11y_sr.time.second',
-                  parseInt(formatNum(currentTimeArray[2]))
-                )}`
-              : `0 ${this.$tc('a11y_sr.time.second')}`
-
-          HRSTxt =
-            parseInt(fullTimeArray[0]) > 0
-              ? `${formatNum(fullTimeArray[0])} ${this.$tc(
-                  'a11y_sr.time.hours',
-                  parseInt(formatNum(fullTimeArray[0]))
-                )}`
-              : ''
-
-          MNTxt =
-            parseInt(fullTimeArray[1]) > 0
-              ? `${formatNum(fullTimeArray[1])} ${this.$tc(
-                  'a11y_sr.time.minute',
-                  parseInt(formatNum(fullTimeArray[1]))
-                )}`
-              : ''
-
-          SSTxt =
-            parseInt(fullTimeArray[2]) > 0
-              ? `${formatNum(fullTimeArray[2])} ${this.$tc(
-                  'a11y_sr.time.second',
-                  parseInt(formatNum(fullTimeArray[2]))
-                )}`
-              : ''
-
-          cTimeTxt = `${hrsTxt} ${mnTxt} ${ssTxt}`
-          fTimeTxt = `${HRSTxt} ${MNTxt} ${SSTxt}`
-
-          //Format to show 0 when no value is present
-          cTimeTxt = cTimeTxt.trim().length ? cTimeTxt.trim() : 0
-          // Set  sr text for timeCode && duration
-          this.mediaA11Y.timeCode = `${this.mediaToPlay.mType} ${w} ${cTimeTxt}`
-          this.mediaA11Y.duration = `${dm} ${fTimeTxt}`
-          this.mediaA11Y.valueText = `${mediaTitle} ${formatMsg(cTimeTxt, fTimeTxt)}`
-
-          break
-        case 2:
-          if (!currentTimeArray.length) return
-
-          //format current time text
-          mnTxt =
-            parseInt(currentTimeArray[0]) > 0
-              ? `${formatNum(currentTimeArray[0])} ${this.$tc(
-                  'a11y_sr.time.minute',
-                  parseInt(formatNum(currentTimeArray[0]))
-                )}`
-              : ''
-
-          ssTxt =
-            parseInt(currentTimeArray[1]) > 0
-              ? `${formatNum(currentTimeArray[1])} ${this.$tc(
-                  'a11y_sr.time.second',
-                  parseInt(formatNum(currentTimeArray[1]))
-                )}`
-              : `0 ${this.$tc('a11y_sr.time.second')}`
-
-          // format full time text
-          MNTxt =
-            parseInt(fullTimeArray[0]) > 0
-              ? `${formatNum(fullTimeArray[0])} ${this.$tc(
-                  'a11y_sr.time.minute',
-                  parseInt(formatNum(fullTimeArray[0]))
-                )}`
-              : ''
-          SSTxt =
-            parseInt(fullTimeArray[1]) > 0
-              ? `${formatNum(fullTimeArray[1])} ${this.$tc(
-                  'a11y_sr.time.second',
-                  parseInt(formatNum(fullTimeArray[1]))
-                )}`
-              : ''
-
-          cTimeTxt = `${mnTxt} ${ssTxt}`
-          fTimeTxt = `${MNTxt} ${SSTxt}`
-
-          //Format to show 0 when no value is present
-          cTimeTxt = cTimeTxt.trim().length ? cTimeTxt.trim() : 0
-          // Set  sr text for timeCode && duration
-          this.mediaA11Y.timeCode = `${this.mediaToPlay.mType} ${w} ${cTimeTxt}`
-          this.mediaA11Y.duration = `${dm} ${fTimeTxt}`
-
-          this.mediaA11Y.valueText = `${mediaTitle} ${formatMsg(cTimeTxt, fTimeTxt)}`
-
-          break
-      }
-    },
-    /**
-     * @description - Deactivate the label of a button include in btnsLabelDisplay on mouseout/blur of this button
-     */
-    deactivateLabel(elm) {
-      const id = elm.id
-      this.btnsLabelDisplay[id] = false
-    },
-    /**
-     * @description - Update the state of the elm describe by the string (focus or not) for keydown arrow management in handleMediaControls method (volume | progress bar can use arrow up-down and left-right only on focus)
-     */
-    changeFocusState(string, bool) {
-      this.focusState[string] = bool
-    },
-    /**
-     * @description - handle initial volume level
-     */
-    setMediaVolume() {
-      //Set media muted or with the savedVolume
-      this.muted = this.mediaMuted
-      if (!this.muted)
-        return (this.currentVolume = this.savedVolume = this.mediaVolume)
-      this.savedVolume = this.mediaVolume
-      this.currentVolume = 0
-    },
-    //======================================================================
-    /**
-     * @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(event) {
-      this.transcriptEnabled = !this.transcriptEnabled
-      //When the function is called after a user interaction (mouse or keyboard), emit event
-      if (event) {
-        //emit transcript toggle event, listener in AppBasePage
-        this.$bus.$emit(
-          'video-transcript-toggle',
-          this.mediaToPlay,
-          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.includes('/') ? `./${tFile}` : tFile //allow passing file in Public folder
-        // const fileUrl = new URL(tFile, import.meta.url))
-        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
-      this.otherVideoTranscriptShown = 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;
-            border-radius: 50%;
-          }
-          &: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>
+<!--@ 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="transcriptBtnDisabled"
+            :class="{
+              md_disabled: transcriptBtnDisabled,
+              displayLabel: btnsLabelDisplay['btn-transcript'] === true
+            }"
+            @click="toggleViewTranscript($event)"
+            @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="fullscreenBtnDisabled"
+            :class="{
+              md_disabled: fullscreenBtnDisabled,
+              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 { mapState, mapActions } from 'pinia'
+import { useAppStore } from '../module/stores/appStore'
+import axios from 'axios'
+
+export default {
+  props: {
+    mediaToPlay: { type: [Object, Boolean], default: false }
+  },
+
+  emits: ['resize-video'],
+  setup() {
+    const store = useAppStore()
+    const { activityRef, id } = store.getCurrentPage
+    const { userInteraction } = store.getPageInteraction(activityRef, id)
+    return { store, userInteraction }
+  },
+  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,
+      //==========================================================
+      //Container Playbar
+      pbContainer: null,
+      //ShowControls (show the playbar or not, default is true)
+      showControlsValue: true,
+      //Player
+      isPlaying: false,
+      canReplay: false,
+      savedIsPlaying: false, //To get the playing status on mousemove on the progressBar
+      //ProgressBar
+      currentTime: 0,
+      progressArea: null,
+      progressBar: null,
+      progressIndicator: null,
+      progressThumb: null,
+      progressThumbDown: false,
+      progressThumbHover: false,
+      //Volume
+      volumeBtn: null,
+      volumeSlider: null,
+      volumeIndicator: null,
+      currentVolume: null,
+      savedVolume: 0.5, //Saved volume when muted
+      //muted
+      muted: false,
+
+      //Labels
+      //Strings for screenreaders (duration et time)
+      mediaA11Y: {
+        label: 'progress',
+        valMax: null,
+        valNow: null,
+        valueText: null,
+        timeCode: 0,
+        duration: 0
+      },
+      //buttons label (all the buttons that need labels management in the playbar)
+      btnsLabelDisplay: {
+        'btn-subtitles': false,
+        'btn-transcript': false,
+        'btn-fullscreen': false,
+        'playbar-play': false,
+        'playbar-volume': false,
+        'volume-slider': false
+      },
+      //FocusState to manage arrows keydown on the 2 sliders (progress and volume)
+      focusState: {
+        progressBar: false,
+        volumeSlider: false
+      },
+      otherVideoTranscriptShown: false
+      //==========================================================
+    }
+  },
+  computed: {
+    ...mapState(useAppStore, [
+      'getCurrentBrowser',
+      'getMediaSubtitles',
+      //=====================================================
+      'getCurrentPage',
+      'getModuleChildren',
+      'hasMediaElOrTimeline',
+      'getCurrentMediaDuration',
+      'getDataFromServer',
+      'getAutoplayEnabled',
+      'getMediaVolume',
+      'getModuleInfo',
+      'getMediaPlaybarValues',
+      'getPageInteraction',
+      'getMediaMuted'
+      //=====================================================
+    ]),
+    //==========================================================
+    //MediaElement
+    mediaElement() {
+      if (!this.mediaToPlay) return null
+      const { mElement } = this.mediaToPlay
+      return mElement ? mElement : null
+    },
+    //Media Progress
+    //Time display : duration
+    mediaDurationTime() {
+      if (this.mediaDuration > 0)
+        return this.$helper.formatTime(this.mediaDuration)
+      else return '00:00'
+    },
+    //Time display : timecode
+    timecode() {
+      if (this.currentTime && typeof (this.currentTime === Number)) {
+        return this.$helper.formatTime(this.currentTime)
+      } else return '00:00'
+    },
+    //ProgressPercentage for progressBarIndicator width
+    progressBarPercentage() {
+      if (this.currentTime && this.mediaDuration)
+        return (this.currentTime / this.mediaDuration) * 100
+      else return 0
+    },
+    progressBarEnded() {
+      return this.currentTime >= Math.floor(this.mediaDuration)
+    },
+    //Volume
+    volumeState() {
+      let state = null
+      switch (true) {
+        case this.muted || this.currentVolume <= 0:
+          state = 'muted'
+          break
+
+        case !this.muted && this.currentVolume <= 0.5:
+          state = 'low'
+          break
+        case !this.muted && this.currentVolume > 0.5:
+          state = 'high'
+      }
+
+      return state
+    },
+    //Volume progress for slider background
+    volumeSliderBackground() {
+      return (this.currentVolume * 100).toFixed(0).toString() + '%'
+    },
+    //Volume from store
+    mediaVolume() {
+      // return this.getMediaVolume
+      return this.getMediaPlaybarValues('volume')
+    },
+    //media from store
+    mediaMuted() {
+      return this.getMediaMuted
+    },
+    //Labels
+    playLabel() {
+      let label = null
+      switch (true) {
+        case this.isPlaying:
+          label = this.$t('button.pause')
+          break
+
+        case this.canReplay:
+          label = this.$t('button.replay')
+          break
+
+        default:
+          label = this.$t('button.play')
+      }
+      return label
+    },
+    volumeLabel() {
+      let label = null
+      switch (true) {
+        case this.muted:
+          label = `${this.$t('button.unmute')}`
+          break
+        case !this.muted:
+          label = `${this.$t('button.mute')}`
+          break
+      }
+      return label
+    },
+    volumeLevelA11Y() {
+      const w = this.$i18n.locale === 'en' ? 'at' : 'à'
+      const level = Math.round(this.currentVolume * 100)
+      let txtA11Y = `Volume ${w} ${level}%`
+
+      return txtA11Y
+    },
+    //==========================================================
+    //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
+    },
+    transcriptBtnDisabled() {
+      return (
+        !this.hasTranscript ||
+        this.fullscreenOn ||
+        this.otherVideoTranscriptShown
+      )
+    },
+    fullscreenBtnDisabled() {
+      return this.transcriptEnabled || this.otherVideoTranscriptShown
+    }
+  },
+  watch: {
+    userInteraction: {
+      immediate: true,
+      deep: true,
+      handler() {
+        if (!this.userInteraction || !Object.keys(this.userInteraction).length)
+          return
+        this.getViewedSatus()
+        this.setMediaVolume()
+      }
+    }
+  },
+
+  mounted() {
+    //initialize media $refs
+    this.initializeMediaElm()
+    //initialize video $refs && set eventlistener for video
+    if (this.mediaToPlay.mType === 'video') {
+      this.initializeVideoElm()
+      this.setVideoHandlers()
+    }
+    //Set eventlistener for media
+    this.setMediaHandlers()
+
+    //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',
+      'setMediaMuted',
+      'setMediaPlaybarValues'
+    ]),
+
+    //======================================================================
+    /**
+     * @description - Set all the DOM elements for medias
+     */
+    initializeMediaElm() {
+      this.pbContainer = this.$refs['$pb-container']
+      //ProgressBar
+      this.progressArea = this.$refs['$progress-area']
+      this.progressBar = this.$refs['$progress-bar']
+      this.progressIndicator = this.$refs['$progress-indicator']
+      this.progressThumb = this.$refs['$progress-thumb']
+      //SeekTooltip
+      this.seekTooltip = this.$refs['$seek-tooltip']
+      //Volume//
+      this.volumeBtn = this.$refs['$btn-volume']
+      this.volumeSlider = this.$refs['$volume-slider']
+      this.volumeIndicator = this.$refs['$volume-progress']
+    },
+    /**
+     * @description - handle all the listeners for medias
+     */
+    setMediaHandlers() {
+      if (this.mediaElement) {
+        //Prevent default on keys used for navigation in the player (prevent scrollbar to be trigger when changing volume)
+        this.pbContainer.addEventListener('keydown', this.keysPreventDefault)
+        //progressBar events
+        this.progressArea.addEventListener('click', this.seekingProgress)
+        //window handlers for playbar progress
+        window.addEventListener('mousemove', this.progressWindowMove)
+        window.addEventListener('mouseup', this.progressWindowUp)
+        //EndprogressBar
+        //Update data when media as a timeupdate/ended
+        this.mediaElement.addEventListener(
+          'timeupdate',
+          this.updateProgressBarTime
+        )
+        this.mediaElement.addEventListener('ended', this.mediaEnded)
+        //Volume
+        this.volumeSlider.addEventListener('input', this.updateVolumeLevel)
+        //Hotkeys
+        this.pbContainer.addEventListener('keydown', this.handleMediaControls)
+
+        //Bus
+        //this.$bus.$on('play-media', this.handleMediaControls)
+      }
+    },
+
+    /**
+     * @description - Unset all the listeners (medias)
+     */
+    removeMediaHandlers() {
+      if (this.mediaElement) {
+        //progressBar events
+        this.progressArea.removeEventListener('click', this.seekingProgress)
+        //window handlers for playbar progress
+        window.removeEventListener('mousemove', this.progressWindowMove)
+        window.removeEventListener('mouseup', this.progressWindowUp)
+
+        this.mediaElement.removeEventListener(
+          'timeupdate',
+          this.updateProgressBarTime
+        )
+        this.mediaElement.removeEventListener('ended', this.mediaEnded)
+
+        //Volume
+        this.volumeSlider.removeEventListener('input', this.updateVolumeLevel)
+        //Keys
+        this.pbContainer.removeEventListener('keydown', this.keysPreventDefault)
+        this.pbContainer.removeEventListener(
+          'keydown',
+          this.handleMediaControls
+        )
+      }
+    },
+    /**
+     * @description - play or pause the media
+     * @fires manage-media-players - to the PAge the media in play
+     */
+    togglePlay() {
+      //If the progressBar is at the end, restart the media
+      if (this.progressBarEnded) {
+        this.mediaElement.currentTime = 0
+        this.currentTime = 0
+      }
+      //MediaElement
+      this.isPlaying ? this.mediaElement.pause() : this.mediaElement.play()
+      //Data
+      if (!this.isPlaying) {
+        //Signal to set this mediaElement as the last playing
+        this.$bus.$emit('manage-media-players', this.mediaToPlay)
+      }
+
+      this.isPlaying = !this.isPlaying
+      this.canReplay = false
+    },
+    /**
+     * @description - Set the media to a new time (if its a time between 0 and max)
+     */
+    setMediaTime(time) {
+      if (time <= 0) this.mediaElement.currentTime = 0
+      else if (time > this.mediaDuration)
+        this.mediaElement.currentTime = this.mediaDuration
+      else this.mediaElement.currentTime = time
+      //Handle finish Media if its set to max duration
+      if (this.progressBarEnded) {
+        this.mediaEnded()
+      }
+    },
+    /**
+     * @description - Set the media Ended if it is set to the end of the progressBar by the user or if it plays until the end
+     */
+
+    mediaEnded() {
+      //Don't make the media play when release progressBar thumb and the media is Ended
+      this.savedIsPlaying = false
+      //Pausing mediaElement is isPlaying
+      if (this.mediaElement && this.isPlaying) {
+        this.mediaElement.pause()
+        this.isPlaying = false
+      }
+      this.$bus.$emit('media-viewed', this.mediaToPlay.id)
+      this.canReplay = true
+      if (this.mediaToPlay.mType === 'video') this.showControls()
+    },
+
+    /**
+     * @description get the view Status of the current media from UserInteraction
+     */
+    getViewedSatus() {
+      //Should get the viewed Status from UserInteraction
+      // let { activityRef, id } = this.getCurrentPage
+      // const { userInteraction = null } = this.getPageInteraction(
+      //   activityRef,
+      //   id
+      // )
+      if (
+        !this.userInteraction ||
+        !this.userInteraction.mediasViewed ||
+        !this.userInteraction.mediasViewed.length
+      )
+        return
+
+      const { mediasViewed } = this.userInteraction
+
+      //Should update the can replay state of media
+      this.canReplay = mediasViewed.includes(this.mediaElement.id)
+    },
+    /**
+     * @description controls the level Of the media volume
+     * @param d string, optional volUp or volDown to Add or Remove 0.05 from volume value
+     */
+    updateVolumeLevel(d = null) {
+      if (!this.mediaElement) return
+      if (this.mediaElement.muted) {
+        this.mediaElement.muted = this.muted = false
+        //Send muted state to the store
+        this.setMutedState(this.muted)
+      }
+      switch (true) {
+        case d == 'volUP':
+          //Set volume Up
+          if (this.mediaElement.volume >= 1) return
+          if (this.mediaElement.volume >= 0.95) {
+            this.mediaElement.volume = 1
+          } else {
+            this.mediaElement.volume = (
+              this.mediaElement.volume + 0.05
+            ).toFixed(2)
+          }
+          this.volumeSlider.value = this.currentVolume =
+            this.mediaElement.volume
+          break
+
+        case d == 'volDOWN':
+          //Set volume Down
+          if (this.mediaElement.volume <= 0) return
+          if (this.mediaElement.volume <= 0.05) {
+            this.mediaElement.volume = 0
+          } else {
+            this.mediaElement.volume = (
+              this.mediaElement.volume - 0.05
+            ).toFixed(2)
+          }
+
+          this.volumeSlider.value = this.currentVolume =
+            this.mediaElement.volume
+          break
+
+        default: {
+          //set volume
+          this.currentVolume = this.mediaElement.volume =
+            this.volumeSlider.value
+          this.currentVolume = parseFloat(this.currentVolume).toFixed(2)
+        }
+      }
+      if (!this.muted) this.savedVolume = this.currentVolume
+
+      this.setMediaPlaybarValues({
+        volume: this.savedVolume
+      }) // Save the volume in the Store
+    },
+    /**
+     * @description - Toggle the state fo the sound
+     */
+    toggleMute() {
+      //Check first the volume of the media
+      if (this.mediaElement.volume == 0) this.muted = true
+
+      this.muted = !this.muted
+      this.mediaElement.muted = this.muted // set the muted state of the media
+
+      //Send mutedstate to the store
+      this.setMutedState(this.muted)
+
+      if (this.muted) {
+        this.mediaElement.volume = 0
+        this.savedVolume = this.currentVolume
+        this.volumeSlider.value = 0
+        this.currentVolume = 0
+      }
+      if (!this.muted) {
+        this.volumeSlider.value = this.savedVolume
+        this.currentVolume = this.mediaElement.volume = this.volumeSlider.value
+      }
+    },
+
+    /** @description Save the muted in the Store */
+    setMutedState() {
+      this.setMediaMuted(this.muted)
+    },
+    //Keyboard event methods
+    /**
+     * @description Method to prevent default on keys used for navigation in the player (prevent scrollbar to be trigger when changing volume)
+     * */
+    keysPreventDefault(evt) {
+      if (
+        ['Space', 'ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].indexOf(
+          evt.key
+        ) > -1
+      ) {
+        evt.preventDefault()
+      }
+    },
+
+    /**
+     * @description Method to handle the keyboard input to controle the media player
+     *@summary Keyboard actions:
+     * *** Left-Arrow/ Right-Arrow : move foward/Backward media by 5s
+     * *** Up-Arrow/ Down-Arrow: Increase/Decrease media volume by 5%
+     * *** c : show/ hide subtitle
+     * *** f : enter/ exit fullscreen
+     * *** k : play/ pause media
+     * *** m : Mute/ Unmute volume
+     * *** t : show transcript
+     */
+
+    handleMediaControls(e) {
+      e = e.code
+      this.showControls()
+      switch (e) {
+        case 'ArrowLeft':
+          //If focus is on Volume, VolDown
+          if (this.focusState.volumeSlider) {
+            //VolDown
+            this.updateVolumeLevel('volDOWN')
+            break
+          } else {
+            //Go back 5s in media timeline
+            this.cursorLeft()
+            break
+          }
+
+        case 'ArrowRight':
+          //If focus is on Volume, VolUp
+          if (this.focusState.volumeSlider) {
+            //VolUp
+            this.updateVolumeLevel('volUP')
+            break
+          } else {
+            //Move forward 5s in media timeline
+            this.cursorRight()
+            break
+          }
+
+        case 'ArrowUp':
+          //If focus is on progressBar, cursorRight
+          if (this.focusState.progressBar) {
+            //Move forward 5s in media timeline
+            this.cursorRight()
+            break
+          } else {
+            //VolUp
+            this.updateVolumeLevel('volUP')
+            break
+          }
+
+        case 'ArrowDown':
+          //If focus is on progressBar, cursorRight
+          if (this.focusState.progressBar) {
+            //Go back 5s in media timeline
+            this.cursorLeft()
+            break
+          } else {
+            //Voldown
+            this.updateVolumeLevel('volDOWN')
+            break
+          }
+
+        case 'KeyM':
+          this.toggleMute()
+          break
+
+        case 'KeyF':
+          if (this.mediaToPlay.mType == 'audio') break
+          //Toggle fullScreen
+          this.toggleFullScreen()
+          break
+
+        case 'KeyT':
+          if (this.mediaToPlay.mType == 'audio') break
+          //Toggle transcript view
+          this.toggleViewTranscript(e)
+          break
+
+        case 'KeyC':
+          if (this.mediaToPlay.mType == 'audio') break
+          //Toggle subtitle view
+          this.toggleViewSubtitle()
+          break
+
+        case 'KeyK':
+          //Play Pause on k bar pressed
+          if (this.mediaToPlay.mType == 'audio') this.togglePlay()
+          //Play/pause video with the playBackAnim if it is triggerd with KeyK
+          else this.handlePlayVideo('playBackAnim')
+          break
+      }
+    },
+    /**
+     * @description - Activate the label of a button include in btnsLabelDisplay on Hover/Focus on the button. Deactivate the label in all the others btns
+     */
+    activateLabel(elm) {
+      const id = elm.id
+      this.btnsLabelDisplay[id] = true
+      for (const property in this.btnsLabelDisplay) {
+        if (property !== id) {
+          this.btnsLabelDisplay[property] = false
+        }
+      }
+    },
+    /**
+     * @description - Get currenttime from media
+     */
+
+    getCurrentTime() {
+      this.currentTime = this.mediaElement.currentTime
+      return this.mediaElement.currentTime
+    },
+    /**
+     * @description - controls to move the media timeline backward
+     */
+    cursorLeft() {
+      this.setMediaTime(this.getCurrentTime() - 5)
+    },
+    /**
+     * @description - control to move the media timeline forwrad
+     */
+    cursorRight() {
+      this.setMediaTime(this.getCurrentTime() + 5)
+    },
+    //ProgressBar Methods
+
+    /**
+     * @description - Update currentTime and timing strings when media is playing
+     */
+    updateProgressBarTime(e) {
+      //Get currentTime from the event
+      this.currentTime = e.target.currentTime
+      //Update strings
+      this.setProgressBarA11Y()
+      //If replay is true and the progressIndicator is not at the end, set canReplay to false
+      if (this.canReplay) this.canReplay = false
+      //If replay is false and progressIndicator is at the end, set canReplay to true
+      if (
+        !this.canReplay &&
+        this.currentTime >= Math.floor(this.mediaDuration)
+      ) {
+        this.canReplay = true
+      }
+    },
+
+    /**
+     * @description - Set mediatime depending on progressBar click
+     */
+    seekingProgress(e) {
+      if (!this.progressThumbDown && !this.progressThumbHover) {
+        const updatedTime =
+          (e.offsetX / this.progressBar.offsetWidth) * this.mediaDuration
+        this.setMediaTime(updatedTime)
+      }
+    },
+
+    /**
+     * @description - Set mediatime depending on mousemove on the screen (when progress thumb is mousedown)
+     */
+    progressWindowMove(ev) {
+      if (this.progressThumbDown) {
+        if (this.isPlaying) this.togglePlay()
+        this.getTimeFromClickPos(ev)
+        let timeToSet = Math.floor(this.getTimeFromClickPos(ev))
+        if (timeToSet < 0) timeToSet = 0
+        else if (timeToSet > this.duration) timeToSet = this.duration
+        this.currentTime = timeToSet
+      }
+    },
+
+    /**
+     * @description - Update thumb state (mouseup) when the mouse is up on the screen
+     */
+    progressWindowUp(ev) {
+      if (this.progressThumbDown) {
+        this.setMediaTime(this.currentTime)
+        this.progressThumbDown = false
+        //savedIsPlaying is the playing status saved on mousedown event on the thumb (the video is paused when moving on the progressBar)
+        if (this.isPlaying !== this.savedIsPlaying) this.togglePlay()
+      }
+    },
+    /**
+     * @description - Get the time corresponding of the position of the click on the progressBar
+     */
+    getTimeFromClickPos(ev) {
+      let timeToSet = 0
+      //La progress Bar
+      const progressBar = this.progressBar
+      //La position de la progressBar dans la page
+      const left = progressBar.getBoundingClientRect().left
+      //Position du click par rapport à la progressBar
+      let clickPos = ev.clientX - left
+      //Si la position est à gauche de la progressBar, retourner 0s
+      if (clickPos < 0) return 0
+      //Obtenir le width de la progressBar
+      const width = progressBar.offsetWidth
+      //Obtenir le ratio de la position du click vs width de la progressBar
+      let percentage = clickPos / width
+      //Si > que 1, veux dire que le clique est à droite de la progressBar (mettre le curseur à la fin)
+      percentage = percentage > 1 ? 1 : percentage
+      //Ratio * temps total du media donne la progressiob
+      timeToSet = percentage * this.mediaDuration
+      return timeToSet
+    },
+
+    /** @description - methode to set A11Y support for screen reader on progress bar element (video/audio/) */
+    setProgressBarA11Y() {
+      const w = this.$i18n.locale === 'en' ? 'at' : 'à'
+      const dm =
+        this.$i18n.locale === 'en'
+          ? `${this.mediaToPlay.mType} duration`
+          : `durée ${this.mediaToPlay.mType}`
+
+      this.mediaA11Y.valMax = Math.round(this.mediaElement.duration)
+      this.mediaA11Y.valNow = Math.round(this.currentTime)
+
+      //format text output for screen reader
+      let currentTimeArray = this.timecode.split(':')
+      let fullTimeArray = this.mediaDurationTime.split(':')
+      let hrsTxt, mnTxt, ssTxt, HRSTxt, MNTxt, SSTxt, fTimeTxt, cTimeTxt
+      const mediaTitle = this.mediaToPlay.mTitle || this.mediaToPlay.mType
+      this.mediaA11Y.label = this.$t('a11y_sr.seek_slider')
+
+      //format string to remove leading 0 digit for time
+      const formatNum = (n) => {
+        return n[0] == '0' ? n.substring(1).trim() : n.trim()
+      }
+
+      const formatMsg = (x, y) => {
+        const reg = /%x|%y/g
+        let formatStr = this.$t('a11y_sr.range_expression').replace(
+          reg,
+          (e) => {
+            if (e == '%x') return x
+            if (e == '%y') return y
+          }
+        )
+
+        return formatStr
+      }
+
+      switch (fullTimeArray.length) {
+        case 3:
+          if (!currentTimeArray.length) return
+          //format current hours text text with plurialization apply
+          hrsTxt =
+            currentTimeArray.length == 3 && parseInt(currentTimeArray[0]) > 0
+              ? `${formatNum(currentTimeArray[0])} ${this.$tc(
+                  'a11y_sr.time.hours',
+                  parseInt(formatNum(currentTimeArray[0]))
+                )}`
+              : ''
+
+          //format minutes text text with plurialization apply
+          mnTxt =
+            parseInt(currentTimeArray[1]) > 0
+              ? `${formatNum(currentTimeArray[1])} ${this.$tc(
+                  'a11y_sr.time.minute',
+                  parseInt(formatNum(currentTimeArray[1]))
+                )}`
+              : ''
+
+          //format seconds text with plurialization apply
+          ssTxt =
+            parseInt(currentTimeArray[2]) > 0
+              ? `${formatNum(currentTimeArray[2])} ${this.$tc(
+                  'a11y_sr.time.second',
+                  parseInt(formatNum(currentTimeArray[2]))
+                )}`
+              : `0 ${this.$tc('a11y_sr.time.second')}`
+
+          HRSTxt =
+            parseInt(fullTimeArray[0]) > 0
+              ? `${formatNum(fullTimeArray[0])} ${this.$tc(
+                  'a11y_sr.time.hours',
+                  parseInt(formatNum(fullTimeArray[0]))
+                )}`
+              : ''
+
+          MNTxt =
+            parseInt(fullTimeArray[1]) > 0
+              ? `${formatNum(fullTimeArray[1])} ${this.$tc(
+                  'a11y_sr.time.minute',
+                  parseInt(formatNum(fullTimeArray[1]))
+                )}`
+              : ''
+
+          SSTxt =
+            parseInt(fullTimeArray[2]) > 0
+              ? `${formatNum(fullTimeArray[2])} ${this.$tc(
+                  'a11y_sr.time.second',
+                  parseInt(formatNum(fullTimeArray[2]))
+                )}`
+              : ''
+
+          cTimeTxt = `${hrsTxt} ${mnTxt} ${ssTxt}`
+          fTimeTxt = `${HRSTxt} ${MNTxt} ${SSTxt}`
+
+          //Format to show 0 when no value is present
+          cTimeTxt = cTimeTxt.trim().length ? cTimeTxt.trim() : 0
+          // Set  sr text for timeCode && duration
+          this.mediaA11Y.timeCode = `${this.mediaToPlay.mType} ${w} ${cTimeTxt}`
+          this.mediaA11Y.duration = `${dm} ${fTimeTxt}`
+          this.mediaA11Y.valueText = `${mediaTitle} ${formatMsg(cTimeTxt, fTimeTxt)}`
+
+          break
+        case 2:
+          if (!currentTimeArray.length) return
+
+          //format current time text
+          mnTxt =
+            parseInt(currentTimeArray[0]) > 0
+              ? `${formatNum(currentTimeArray[0])} ${this.$tc(
+                  'a11y_sr.time.minute',
+                  parseInt(formatNum(currentTimeArray[0]))
+                )}`
+              : ''
+
+          ssTxt =
+            parseInt(currentTimeArray[1]) > 0
+              ? `${formatNum(currentTimeArray[1])} ${this.$tc(
+                  'a11y_sr.time.second',
+                  parseInt(formatNum(currentTimeArray[1]))
+                )}`
+              : `0 ${this.$tc('a11y_sr.time.second')}`
+
+          // format full time text
+          MNTxt =
+            parseInt(fullTimeArray[0]) > 0
+              ? `${formatNum(fullTimeArray[0])} ${this.$tc(
+                  'a11y_sr.time.minute',
+                  parseInt(formatNum(fullTimeArray[0]))
+                )}`
+              : ''
+          SSTxt =
+            parseInt(fullTimeArray[1]) > 0
+              ? `${formatNum(fullTimeArray[1])} ${this.$tc(
+                  'a11y_sr.time.second',
+                  parseInt(formatNum(fullTimeArray[1]))
+                )}`
+              : ''
+
+          cTimeTxt = `${mnTxt} ${ssTxt}`
+          fTimeTxt = `${MNTxt} ${SSTxt}`
+
+          //Format to show 0 when no value is present
+          cTimeTxt = cTimeTxt.trim().length ? cTimeTxt.trim() : 0
+          // Set  sr text for timeCode && duration
+          this.mediaA11Y.timeCode = `${this.mediaToPlay.mType} ${w} ${cTimeTxt}`
+          this.mediaA11Y.duration = `${dm} ${fTimeTxt}`
+
+          this.mediaA11Y.valueText = `${mediaTitle} ${formatMsg(cTimeTxt, fTimeTxt)}`
+
+          break
+      }
+    },
+    /**
+     * @description - Deactivate the label of a button include in btnsLabelDisplay on mouseout/blur of this button
+     */
+    deactivateLabel(elm) {
+      const id = elm.id
+      this.btnsLabelDisplay[id] = false
+    },
+    /**
+     * @description - Update the state of the elm describe by the string (focus or not) for keydown arrow management in handleMediaControls method (volume | progress bar can use arrow up-down and left-right only on focus)
+     */
+    changeFocusState(string, bool) {
+      this.focusState[string] = bool
+    },
+    /**
+     * @description - handle initial volume level
+     */
+    setMediaVolume() {
+      //Set media muted or with the savedVolume
+      this.muted = this.mediaMuted
+      if (!this.muted)
+        return (this.currentVolume = this.savedVolume = this.mediaVolume)
+      this.savedVolume = this.mediaVolume
+      this.currentVolume = 0
+    },
+    //======================================================================
+    /**
+     * @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(event) {
+      this.transcriptEnabled = !this.transcriptEnabled
+      //When the function is called after a user interaction (mouse or keyboard), emit event
+      if (event) {
+        //emit transcript toggle event, listener in AppBasePage
+        this.$bus.$emit(
+          'video-transcript-toggle',
+          this.mediaToPlay,
+          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.includes('/') ? `./${tFile}` : tFile //allow passing file in Public folder
+        // const fileUrl = new URL(tFile, import.meta.url))
+        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
+      this.otherVideoTranscriptShown = 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;
+            border-radius: 50%;
+          }
+          &: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>