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

package/src/mixins/$mediaMixins.js

@@ -1,819 +1,819 @@
-//import { mapState } from 'pinia'
-/*
-@ Description: Mixins to extends general fonctionnalities in a media component (audio, video)
-@ Note: Must be used  along component AppCompVideoPlayer, AppCompAudio and AppCompPlaybar or the components will not work
-*/
-import { mapState, mapActions } from 'pinia'
-import { useAppStore } from '../module/stores/appStore'
-const $extendsMedia = {
-  data: () => {
-    return {
-      //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
-      }
-    }
-  },
-  computed: {
-    ...mapState(useAppStore, [
-      'getCurrentPage',
-      'getModuleChildren',
-      'hasMediaElOrTimeline',
-      'getCurrentMediaDuration',
-      'getCurrentBrowser',
-      'getDataFromServer',
-      'getAutoplayEnabled',
-      'getMediaVolume',
-      'getModuleInfo',
-      'getMediaSubtitles',
-      'getMediaPlaybarValues',
-      'getUserInteraction',
-      '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')
-    },
-
-    // mediaVolume() {
-    //   let vol = 0.5
-    //   if (!this.getDataFromServer) return vol
-
-    //   const {pbValues} =   this.getDataFromServer
-    //   if(pbValues && pbValues.volume) vol = parseFloat(pbValues.volume)
-    //     console.log("My Vol...", vol)
-    //   return vol
-    // },
-    //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
-    }
-  },
-  watch: {
-    getUserInteraction: {
-      immediate: true,
-      deep: true,
-      handler() {
-        if (!this.getUserInteraction) return
-        this.getViewedSatus()
-        this.setMediaVolume()
-      }
-    }
-  },
-
-  methods: {
-    ...mapActions(useAppStore, ['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
-      if (
-        !this.getUserInteraction[activityRef] ||
-        !this.getUserInteraction[activityRef][id]
-      )
-        return
-      const { userInteraction } = this.getUserInteraction[activityRef][id]
-      if (!userInteraction.mediasViewed || !userInteraction.mediasViewed.length)
-        return
-      const { mediasViewed } = 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()
-          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
-    },
-
-    //End progressBar methods
-
-    //Labels
-
-    /** @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) => {
-        let formatStr = this.$t('a11y_sr.range_expression')
-          .replace('{x}', x)
-          .replace('{y}', 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',
-                  formatNum(currentTimeArray[0])
-                )}`
-              : ''
-
-          //format minutes text text with plurialization apply
-          mnTxt =
-            parseInt(currentTimeArray[1]) > 0
-              ? `${formatNum(currentTimeArray[1])} ${this.$tc(
-                  'a11y_sr.time.minute',
-                  formatNum(currentTimeArray[1])
-                )}`
-              : ''
-
-          //format seconds text with plurialization apply
-          ssTxt =
-            parseInt(currentTimeArray[2]) > 0
-              ? `${formatNum(currentTimeArray[2])} ${this.$tc(
-                  'a11y_sr.time.second',
-                  formatNum(currentTimeArray[2])
-                )}`
-              : `0 ${this.$tc('a11y_sr.time.second')}`
-
-          HRSTxt =
-            parseInt(fullTimeArray[0]) > 0
-              ? `${formatNum(fullTimeArray[0])} ${this.$tc(
-                  'a11y_sr.time.hours',
-                  formatNum(fullTimeArray[0])
-                )}`
-              : ''
-
-          MNTxt =
-            parseInt(fullTimeArray[1]) > 0
-              ? `${formatNum(fullTimeArray[1])} ${this.$tc(
-                  'a11y_sr.time.minute',
-                  formatNum(fullTimeArray[1])
-                )}`
-              : ''
-
-          SSTxt =
-            parseInt(fullTimeArray[2]) > 0
-              ? `${formatNum(fullTimeArray[2])} ${this.$tc(
-                  'a11y_sr.time.second',
-                  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',
-                  formatNum(currentTimeArray[0])
-                )}`
-              : ''
-          ssTxt =
-            parseInt(currentTimeArray[1]) > 0
-              ? `${formatNum(currentTimeArray[1])} ${this.$tc(
-                  'a11y_sr.time.second',
-                  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',
-                  formatNum(fullTimeArray[0])
-                )}`
-              : ''
-          SSTxt =
-            parseInt(fullTimeArray[1]) > 0
-              ? `${formatNum(fullTimeArray[1])} ${this.$tc(
-                  'a11y_sr.time.second',
-                  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
-    }
-  }
-}
-export default $extendsMedia
+//import { mapState } from 'pinia'
+/*
+@ Description: Mixins to extends general fonctionnalities in a media component (audio, video)
+@ Note: Must be used  along component AppCompVideoPlayer, AppCompAudio and AppCompPlaybar or the components will not work
+*/
+import { mapState, mapActions } from 'pinia'
+import { useAppStore } from '../module/stores/appStore'
+const $extendsMedia = {
+  data: () => {
+    return {
+      //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
+      }
+    }
+  },
+  computed: {
+    ...mapState(useAppStore, [
+      'getCurrentPage',
+      'getModuleChildren',
+      'hasMediaElOrTimeline',
+      'getCurrentMediaDuration',
+      'getCurrentBrowser',
+      'getDataFromServer',
+      'getAutoplayEnabled',
+      'getMediaVolume',
+      'getModuleInfo',
+      'getMediaSubtitles',
+      'getMediaPlaybarValues',
+      'getUserInteraction',
+      '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')
+    },
+
+    // mediaVolume() {
+    //   let vol = 0.5
+    //   if (!this.getDataFromServer) return vol
+
+    //   const {pbValues} =   this.getDataFromServer
+    //   if(pbValues && pbValues.volume) vol = parseFloat(pbValues.volume)
+    //     console.log("My Vol...", vol)
+    //   return vol
+    // },
+    //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
+    }
+  },
+  watch: {
+    getUserInteraction: {
+      immediate: true,
+      deep: true,
+      handler() {
+        if (!this.getUserInteraction) return
+        this.getViewedSatus()
+        this.setMediaVolume()
+      }
+    }
+  },
+
+  methods: {
+    ...mapActions(useAppStore, ['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
+      if (
+        !this.getUserInteraction[activityRef] ||
+        !this.getUserInteraction[activityRef][id]
+      )
+        return
+      const { userInteraction } = this.getUserInteraction[activityRef][id]
+      if (!userInteraction.mediasViewed || !userInteraction.mediasViewed.length)
+        return
+      const { mediasViewed } = 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()
+          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
+    },
+
+    //End progressBar methods
+
+    //Labels
+
+    /** @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) => {
+        let formatStr = this.$t('a11y_sr.range_expression')
+          .replace('{x}', x)
+          .replace('{y}', 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',
+                  formatNum(currentTimeArray[0])
+                )}`
+              : ''
+
+          //format minutes text text with plurialization apply
+          mnTxt =
+            parseInt(currentTimeArray[1]) > 0
+              ? `${formatNum(currentTimeArray[1])} ${this.$tc(
+                  'a11y_sr.time.minute',
+                  formatNum(currentTimeArray[1])
+                )}`
+              : ''
+
+          //format seconds text with plurialization apply
+          ssTxt =
+            parseInt(currentTimeArray[2]) > 0
+              ? `${formatNum(currentTimeArray[2])} ${this.$tc(
+                  'a11y_sr.time.second',
+                  formatNum(currentTimeArray[2])
+                )}`
+              : `0 ${this.$tc('a11y_sr.time.second')}`
+
+          HRSTxt =
+            parseInt(fullTimeArray[0]) > 0
+              ? `${formatNum(fullTimeArray[0])} ${this.$tc(
+                  'a11y_sr.time.hours',
+                  formatNum(fullTimeArray[0])
+                )}`
+              : ''
+
+          MNTxt =
+            parseInt(fullTimeArray[1]) > 0
+              ? `${formatNum(fullTimeArray[1])} ${this.$tc(
+                  'a11y_sr.time.minute',
+                  formatNum(fullTimeArray[1])
+                )}`
+              : ''
+
+          SSTxt =
+            parseInt(fullTimeArray[2]) > 0
+              ? `${formatNum(fullTimeArray[2])} ${this.$tc(
+                  'a11y_sr.time.second',
+                  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',
+                  formatNum(currentTimeArray[0])
+                )}`
+              : ''
+          ssTxt =
+            parseInt(currentTimeArray[1]) > 0
+              ? `${formatNum(currentTimeArray[1])} ${this.$tc(
+                  'a11y_sr.time.second',
+                  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',
+                  formatNum(fullTimeArray[0])
+                )}`
+              : ''
+          SSTxt =
+            parseInt(fullTimeArray[1]) > 0
+              ? `${formatNum(fullTimeArray[1])} ${this.$tc(
+                  'a11y_sr.time.second',
+                  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
+    }
+  }
+}
+export default $extendsMedia