fcad-core-dragon 2.0.0-beta.0

package/src/components/AppCompPlayBar.vue

@@ -0,0 +1,1540 @@
+<!-- Add Bref Description of what component does and need
+-->
+<template>
+  <div
+    id="playbar-wrapper"
+    :class="{ minimized: barMinimized }"
+    @mouseover="playbarOver"
+  >
+    <div id="playbar-btns">
+      <div id="playbar-flex-wrap">
+        <div id="playbar-current-time">
+          <span aria-hidden="true">
+            {{ timecode }}
+          </span>
+          <span class="sr-only">{{ mediaA11Y.timeCode }}</span>
+        </div>
+        <div
+          id="playbar-volume"
+          ref="volumeButton"
+          class="playbar-btn btn"
+          role="button"
+          tabindex="0"
+          :aria-label="volumeLabel"
+          @mouseover="volumeOver"
+          @mouseleave="volumeLeave"
+          @click="volumeClick"
+          @keyup.space="volumeClick"
+          @keyup.enter="volumeClick"
+          @focus="playbarFocus"
+        >
+          <div v-show="volumeSliderOpen" id="playbar-volume-slider-zone">
+            <div id="playbar-volume-slider">
+              <div class="range-slider" :style="volumeStyle" tabindex="0">
+                <input
+                  ref="volume-range"
+                  type="range"
+                  min="0"
+                  max="1"
+                  step="0.05"
+                  aria-label="Volume"
+                  :aria-valuenow="displayVol"
+                  aria-valuemin="0"
+                  aria-valuemax="100"
+                  :aria-valuetext="`${displayVol}% volume`"
+                  tabindex="0"
+                  :value="volDefault"
+                  :name="$t('button.volume')"
+                  @input="volumeInputChange"
+                />
+                <output>{{ displayVol }} %</output>
+
+                <div class="range-slider__progress"></div>
+              </div>
+            </div>
+          </div>
+          <svg
+            v-if="volDefault > 0"
+            id="volume_up_black_24dp"
+            xmlns="http://www.w3.org/2000/svg"
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+          >
+            <path
+              id="Path_3896"
+              data-name="Path 3896"
+              d="M0,0H24V24H0Z"
+              fill="none"
+            />
+            <path
+              id="Path_3897"
+              data-name="Path 3897"
+              d="M3,9v6H7l5,5V4L7,9Zm13.5,3A4.5,4.5,0,0,0,14,7.97v8.05A4.474,4.474,0,0,0,16.5,12ZM14,3.23V5.29a7,7,0,0,1,0,13.42v2.06A8.994,8.994,0,0,0,14,3.23Z"
+            />
+          </svg>
+          <svg
+            v-if="volDefault <= 0"
+            xmlns="http://www.w3.org/2000/svg"
+            width="18"
+            height="18"
+            viewBox="0 0 18 18"
+          >
+            <path
+              id="Path_3893"
+              data-name="Path 3893"
+              d="M16.5,12A4.5,4.5,0,0,0,14,7.97v2.21l2.45,2.45A4.232,4.232,0,0,0,16.5,12ZM19,12a6.843,6.843,0,0,1-.54,2.64l1.51,1.51A8.8,8.8,0,0,0,21,12a9,9,0,0,0-7-8.77V5.29A7.005,7.005,0,0,1,19,12ZM4.27,3,3,4.27,7.73,9H3v6H7l5,5V13.27l4.25,4.25A6.924,6.924,0,0,1,14,18.7v2.06a8.99,8.99,0,0,0,3.69-1.81L19.73,21,21,19.73l-9-9ZM12,4,9.91,6.09,12,8.18Z"
+              transform="translate(-3 -3)"
+            />
+          </svg>
+        </div>
+        <app-base-button
+          id="playbar-play"
+          ref="playButton"
+          class="playbar-btn"
+          :aria-label="label"
+          :title="label"
+          @click="playClick"
+          @focus="playbarFocus"
+        >
+          <!--------------------------------Pause SVG------------------------------------>
+          <svg
+            v-if="isPlaying"
+            id="pause-icon"
+            xmlns="http://www.w3.org/2000/svg"
+            width="12"
+            height="14"
+            viewBox="0 0 12 14"
+          >
+            <path
+              id="Path_3887"
+              data-name="Path 3887"
+              d="M6,19h4V5H6ZM14,5V19h4V5Z"
+              transform="translate(-6 -5)"
+            />
+          </svg>
+          <!--------------------------------Replay SVG------------------------------------>
+          <svg
+            v-if="canReplay && !isPlaying"
+            id="replay-icon"
+            xmlns="http://www.w3.org/2000/svg"
+            xmlns:xlink="http://www.w3.org/1999/xlink"
+            width="24"
+            height="24"
+            viewBox="0 0 16 20"
+            xml:space="preserve"
+          >
+            <path
+              class="st0"
+              d="M8,4V0L3,5l5,5V6c3.3,0,6,2.7,6,6s-2.7,6-6,6s-6-2.7-6-6H0c0,4.4,3.6,8,8,8s8-3.6,8-8 S12.4,4,8,4z"
+            />
+          </svg>
+          <!--------------------------------- Play SVG ----------------------------------->
+          <svg
+            v-if="!isPlaying && !canReplay"
+            id="play-icon"
+            xmlns="http://www.w3.org/2000/svg"
+            width="15.278"
+            height="19.444"
+            viewBox="0 0 15.278 19.444"
+          >
+            <path
+              id="Path_3858"
+              data-name="Path 3858"
+              d="M8,5V24.444l15.278-9.722Z"
+              transform="translate(-8 -5)"
+            />
+          </svg>
+        </app-base-button>
+        <app-base-button
+          id="acessMenu"
+          ref="subButton"
+          class="playbar-btn"
+          :aria-label="$t('button.accessibility')"
+          :title="$t('button.accessibility')"
+          @click="toggleSubtitleMenu"
+          @focus="playbarFocus"
+        >
+          <svg
+            v-if="!subtitleMenuOpen"
+            id="Component_86_3"
+            data-name="Component 86 – 3"
+            xmlns="http://www.w3.org/2000/svg"
+            width="21.642"
+            height="16"
+            viewBox="0 0 21.642 16"
+          >
+            <path
+              id="Path_3989"
+              data-name="Path 3989"
+              d="M690,385a4.991,4.991,0,0,1-4.578-7H673a2.006,2.006,0,0,0-2,2v12a2.006,2.006,0,0,0,2,2h16a2.006,2.006,0,0,0,2-2v-7.1A4.987,4.987,0,0,1,690,385Zm-17,1h4v2h-4Zm10,6H673v-2h10Zm6,0h-4v-2h4Zm0-4H679v-2h10Z"
+              transform="translate(-671 -378)"
+            />
+            <path
+              id="Path_3902"
+              data-name="Path 3902"
+              d="M688.061,379l-.609.61,2.595,2.6,2.6-2.6-.61-.61-1.985,1.981Z"
+              transform="translate(-671 -378)"
+            />
+          </svg>
+
+          <svg
+            v-if="subtitleMenuOpen"
+            id="Component_86_5"
+            data-name="Component 86 – 5"
+            xmlns="http://www.w3.org/2000/svg"
+            width="21.642"
+            height="16"
+            viewBox="0 0 21.642 16"
+          >
+            <path
+              id="Path_3989"
+              data-name="Path 3989"
+              d="M690,385a4.991,4.991,0,0,1-4.578-7H673a2.006,2.006,0,0,0-2,2v12a2.006,2.006,0,0,0,2,2h16a2.006,2.006,0,0,0,2-2v-7.1A4.987,4.987,0,0,1,690,385Zm-17,1h4v2h-4Zm10,6H673v-2h10Zm6,0h-4v-2h4Zm0-4H679v-2h10Z"
+              transform="translate(-671 -378)"
+            />
+            <path
+              id="Path_3902"
+              data-name="Path 3902"
+              d="M688.061,379l-.609.61,2.595,2.6,2.6-2.6-.61-.61-1.985,1.981Z"
+              transform="translate(709.094 383.205) rotate(180)"
+            />
+          </svg>
+        </app-base-button>
+        <div id="playbar-cc" :class="{ submenu_active: subtitleMenuOpen }">
+          <div v-show="subtitleMenuOpen" id="subtitleMenuWrapper">
+            <app-base-button
+              id="btn-transcript"
+              class="subtitleBtns"
+              :aria-label="$t('button.download_transcript')"
+              :title="$t('button.download_transcript')"
+              :disabled="!hasTranscript"
+              :class="{ md_disabled: !hasTranscript }"
+              @click="downloadTranscript"
+              @focus="playbarFocus"
+            >
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="18"
+                height="18"
+                viewBox="0 0 18 18"
+              >
+                <path
+                  id="Path_3846"
+                  data-name="Path 3846"
+                  d="M19,12v7H5V12H3v7a2.006,2.006,0,0,0,2,2H19a2.006,2.006,0,0,0,2-2V12Zm-6,.67,2.59-2.58L17,11.5l-5,5-5-5,1.41-1.41L11,12.67V3h2Z"
+                  transform="translate(-3 -3)"
+                />
+              </svg>
+              <span>{{ $t('button.download_transcript') }}</span>
+            </app-base-button>
+            <app-base-button
+              v-if="!subtitlesEnabled"
+              id="btn-subtitles"
+              class="btn subtitleBtns"
+              :aria-label="$t('button.show_subtitle')"
+              :title="$t('button.show_subtitle')"
+              :disabled="!hasSubtitle"
+              :class="{ md_disabled: !hasSubtitle }"
+              @click="showSubtitles"
+              @focus="playbarFocus"
+            >
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="20"
+                height="16"
+                viewBox="0 0 20 16"
+              >
+                <path
+                  id="Path_3854"
+                  data-name="Path 3854"
+                  d="M20,4H4A2.006,2.006,0,0,0,2,6V18a2.006,2.006,0,0,0,2,2H20a2.006,2.006,0,0,0,2-2V6A2.006,2.006,0,0,0,20,4ZM4,12H8v2H4Zm10,6H4V16H14Zm6,0H16V16h4Zm0-4H10V12H20Z"
+                  transform="translate(-2 -4)"
+                />
+              </svg>
+              <span>{{ $t('button.show_subtitle') }}</span>
+            </app-base-button>
+            <app-base-button
+              v-if="subtitlesEnabled"
+              id="btn-hide-subtitles"
+              class="subtitleBtns"
+              :aria-label="$t('button.hide_subtitle')"
+              :title="$t('button.hide_subtitle')"
+              @click="hideSubtitles"
+            >
+              <svg
+                id="sub-off-icon"
+                xmlns="http://www.w3.org/2000/svg"
+                width="20.96"
+                height="20.51"
+                viewBox="0 0 20.96 20.51"
+              >
+                <g
+                  id="Group_6950"
+                  data-name="Group 6950"
+                  transform="translate(-1.04 -2.45)"
+                >
+                  <g id="Group_6949" data-name="Group 6949">
+                    <path
+                      id="Path_3855"
+                      data-name="Path 3855"
+                      d="M20,4H6.83l8,8H20v2H16.83l4.93,4.93A1.949,1.949,0,0,0,22,18V6A2.006,2.006,0,0,0,20,4Z"
+                    />
+                    <path
+                      id="Path_3856"
+                      data-name="Path 3856"
+                      d="M1.04,3.87l1.2,1.2A1.949,1.949,0,0,0,2,6V18a2.006,2.006,0,0,0,2,2H17.17l2.96,2.96,1.41-1.41L2.45,2.45ZM8,12v2H4V12Zm6,4.83V18H4V16h9.17Z"
+                    />
+                  </g>
+                </g>
+              </svg>
+              <span>{{ $t('button.hide_subtitle') }}</span>
+            </app-base-button>
+          </div>
+        </div>
+        <div id="playbar-total-time">
+          <!-- <time datetime="PT2H30M"> -->
+          <span aria-hidden="true">
+            {{ duration }}
+          </span>
+          <span class="sr-only">{{ mediaA11Y.duration }}</span>
+        </div>
+      </div>
+    </div>
+    <div
+      id="playbar-progress"
+      ref="playbar-progress"
+      role="progressbar"
+      aria-valuemin="0"
+      :aria-label="mediaA11Y.label"
+      :aria-valuenow="mediaA11Y.valNow"
+      :aria-valuemax="mediaA11Y.valMax"
+      :aria-valuetext="mediaA11Y.valueText"
+      @mouseover="progressOver"
+      @mouseleave="progressLeave"
+      @mousemove="progressMove"
+      @click="progressClick"
+    >
+      <div id="playbar-buffer" ref="playbar-buffer"></div>
+      <div id="playbar-playback" ref="playbar-playback">
+        <div
+          id="playbar-cursor"
+          tabindex="0"
+          @mousedown="cursorDown"
+          @focus="playbarFocus"
+        ></div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+
+export default {
+  props: {
+    appStatus: { type: Boolean, required: true },
+    mediaToShow: { type: [Object, Boolean], default: false }
+  },
+
+  data() {
+    return {
+      previousBtn: null,
+      menuBtn: null,
+      nextBtn: null,
+      mediaIs: null,
+      playBtn: null,
+      stopBtn: null,
+      muteBtn: null,
+      progressBar: null,
+      progressShaddow: null,
+      progress: null,
+      progressTime: null,
+      mediaDuration: '--:--',
+      navigation: {},
+      currentPath: null,
+      isBranching: false,
+      //bCounter: null,
+      index: 0,
+      navigationRoutes: null,
+      hasMedia: false,
+      hasSound: false,
+      media: null,
+      nextActivity: null,
+      previousActivity: null,
+      cursorDragged: false,
+      bufferDomElem: '',
+      playbackDomElem: '',
+      isPlaying: false,
+      mediaHandlersSet: false,
+      duration: '',
+      timecode: '',
+      subtitlesEnabled: false,
+      volumeSliderOpen: false,
+      volumeBtn: null,
+      volDefault: 1,
+      hover: false,
+      lastVolume: '',
+      muted: false,
+      isAnimation: false,
+      subtitleMenuOpen: false,
+      hasTranscript: false,
+      hasSubtitle: false,
+      canReplay: false,
+      focusTimeout: null,
+      delayUntilHide: 3000,
+      playbarLrs: [],
+      mediaA11Y: {
+        label: 'progress',
+        valMax: null,
+        valNow: null,
+        valueText: null,
+        timeCode: 0,
+        duration: 0
+      }
+    }
+  },
+  computed: {
+    ...mapGetters([
+      'getCurrentPage',
+      'getModuleChildren',
+      'hasMediaElOrTimeline',
+      'getCurrentMediaDuration',
+      'getIntroStatus',
+      'getCurrentBrowser',
+      'getAutoplayEnabled',
+      'getMediaVolume',
+      'getModuleInfo',
+      'getMediaSubtitles',
+      'getUserInteraction'
+    ]),
+    isViewed() {
+      let userData = this.getUserInteraction
+      let activityId = this.getCurrentPage.activityRef
+      let pageId = this.getCurrentPage.id
+      let viewed = false
+      if (
+        userData &&
+        userData[activityId] &&
+        userData[activityId][pageId] &&
+        userData[activityId][pageId].userInteraction &&
+        userData[activityId][pageId].userInteraction.mediaIsViewed
+      ) {
+        viewed = true
+      }
+
+      return viewed
+    },
+    barMinimized() {
+      //si la vidéo est en pause: ne pas minimiser la playbar
+      if (!this.isPlaying) {
+        return false
+      } else {
+        //si la vidéo joue, minimiser seulement si la souris ne la survole pas.
+        return !this.hover
+      }
+    },
+    volumeStyle() {
+      return (
+        '--min:0; --max:1; --step:0.05; --value:' +
+        this.volDefault +
+        '; --text-value:"' +
+        this.volDefault +
+        '";'
+      )
+    },
+    label() {
+      let label = null
+      if (this.isPlaying) {
+        label = `${this.$t('button.pause')}`
+      } else {
+        label = `${this.$t('button.play')}`
+      }
+      return label
+    },
+    volumeLabel() {
+      let label = null
+      if (this.muted) {
+        label = `${this.$t('button.unmute')}`
+      } else {
+        label = `${this.$t('button.mute')}`
+      }
+      return label
+    },
+    displayVol() {
+      let test = Math.floor(this.volDefault * 100)
+      return test
+    }
+  },
+
+  watch: {
+    /* animation duration is 0:00 on load, we watch the media object for a change and update duration display accordingly
+     */
+    media() {
+      this.updateDurationDisplay()
+    },
+    /*
+     * Why this watcher:
+     * When the component is created : the HMTLMediaElement (mElement in the mediaToshow)doesn't exist
+     * This compenent need to ensure that the data is available in the store before it will try o access and attach the event listeners (click, seek, stop etc.)
+     */
+    mediaToShow: {
+      handler() {
+        if (this.mediaToShow) {
+          const { type, mElement } = this.mediaToShow
+
+          switch (type) {
+            case 'pg_animation':
+              this.isAnimation = true
+              this.setMedia()
+              if (this.mediaHandlersSet === false && this.hasMedia) {
+                if (this.getAutoplayEnabled) {
+                  this.playClick()
+                }
+                //animation was viewed previously
+                if (this.isViewed) {
+                  //set animation timeline at the end
+                  this.setMediaTime(this.mediaToShow.timeline.totalDuration())
+                  this.canReplay = true
+                }
+                this.setMediaHandlers()
+              }
+
+              this.updateTimecodeDisplay()
+
+              break
+
+            case 'pg_media':
+              if (mElement) {
+                this.setMedia()
+                this.updateDurationDisplay()
+                this.setMediaA11Y()
+                if (this.mediaHandlersSet === false && this.hasMedia) {
+                  this.setVolume()
+                  if (this.subtitlesEnabled) {
+                    this.showSubtitles()
+                  }
+
+                  this.updateTimecodeDisplay()
+
+                  if (this.getAutoplayEnabled) {
+                    this.playClick()
+                  }
+                  //video was viewed previously
+                  if (this.isViewed) {
+                    //set video timecode at the end
+                    this.setMediaTime(this.media.mElement.duration)
+                    this.canReplay = true
+                  }
+                  this.setMediaHandlers()
+                }
+              }
+              break
+          }
+        }
+      },
+      immediate: true
+    },
+
+    $route() {
+      setTimeout(() => {
+        this.$scorm.getDataValues()
+      }, 200)
+    },
+    /*
+     * In some cases (when the page has media ) the media metadata is not ready and total duration is not available.
+     * Watching getCurrentMediaDuration allow to track changes in the value of the duration and call updateDurationDisplay()
+     */
+    getCurrentMediaDuration() {
+      this.updateDurationDisplay()
+    }
+  },
+  beforeDestroy() {
+    this.saveToLrs()
+    if (this.isPlaying) {
+      this.playClick()
+    }
+    this.cancelTimeout()
+    if (this.mediaHandlersSet) {
+      this.removeMediaHandlers()
+    }
+  },
+
+  mounted() {
+    this.volumeBtn = this.$refs['volume-range']
+    this.bufferDomElem = this.$refs['playbar-buffer']
+    this.playbackDomElem = this.$refs['playbar-playback']
+    //get volume from the store
+    this.volDefault = this.getMediaVolume
+    this.subtitlesEnabled = this.getMediaSubtitles
+
+    //TODO: Trying to get the focus on the volume slider to them be able to inscrease/descrease volume with key up/key down
+
+    // if (!this.$refs || !this.$refs.volumeButton) return
+
+    // this.$refs.volumeButton.addEventListener('focus', () => {
+    //   this.volumeSliderOpen = true
+    //   // this.$refs.volume-range
+    //   this.volumeBtn.addEventListener('keydown', (e) => {
+    //     var key = e.key || e.keyCode
+    //     if (key === 'ArrowUp' || key === 38) {
+    //       // console.log('VolumeUP')
+    //     }
+
+    //     if (key === 'ArrowDown' || key === 40) {
+    //       //console.log('VolumeDOWN')
+    //     }
+    //   })
+    // })
+  },
+  methods: {
+    setIsViewed() {
+      let userData = this.getUserInteraction
+      let activityId = this.getCurrentPage.activityRef
+      let pageId = this.getCurrentPage.id
+
+      this.$set(
+        userData[activityId][pageId].userInteraction,
+        'mediaIsViewed',
+        true
+      )
+    },
+    saveToLrs() {
+      let text
+      //Defining the text to display for stmt description and definition
+      switch (this.$i18n.locale) {
+        case 'fr':
+          if (this.getModuleInfo.courseID)
+            text = `Le ${this.getModuleInfo.id} de ${this.getModuleInfo.courseID}`
+          else text = `Le ${this.getModuleInfo.id}`
+          break
+        case 'en':
+          if (this.getModuleInfo.courseID)
+            text = `The ${this.getModuleInfo.id} of ${this.getModuleInfo.courseID}`
+          else text = `The ${this.getModuleInfo.id}`
+          break
+      }
+      //Creating custom statement
+      const stmt = {
+        id: (() => {
+          if (this.getModuleInfo.courseID) return this.getModuleInfo.courseID
+          else return null
+        })(),
+        verb: 'played',
+        definition: text,
+        description: text,
+        extension: [
+          {
+            id: 'playbar-values',
+            content: {
+              volume: this.volDefault,
+              subtitlesEnabled: this.subtitlesEnabled
+            }
+          }
+        ]
+      }
+      setTimeout(() => {
+        this.$bus.$emit('send-xapi-statement', stmt) //send xapi statement
+      }, 1000)
+    },
+
+    /*TODO: Need to refactor the control key mecanique to take in account Arrow Keys UP/DOWN
+     * ISSUE: Not possible to controle volume with Arrow keys UP/DOWN
+     */
+    windowKeydown(e) {
+      var key = e.key || e.keyCode
+      // Listen to keyEvent only on media Elements are on focus
+      if (
+        !this.media.mElement ||
+        this.media.mElement !== document.activeElement
+      )
+        return
+
+      //when focus is on the video element, spacebar = play/pause
+      if (key === ' ' || key === 'Esc' || key === 32) this.playClick()
+
+      //left and right arrows to seek video
+      if (key === 'ArrowLeft' || key === 37) {
+        this.cursorLeft()
+      }
+      if (key === 'ArrowRight' || key === 39) {
+        this.cursorRight()
+      }
+
+      // if (key === 'ArrowUp' || key === 38) {
+      //   // this.cursorRight()
+      //   console.log('VolumeUP')
+      // }
+
+      // if (key === 'ArrowDown' || key === 40) {
+      //   console.log('VolumeDOWN')
+      //   //this.cursorRight()
+      // }
+    },
+    getCurrentTime() {
+      return this.isAnimation
+        ? this.media.timeline.time()
+        : this.media.mElement.currentTime
+    },
+    cursorLeft() {
+      this.playbarFocus()
+      this.setMediaTime(this.getCurrentTime() - 10)
+    },
+    cursorRight() {
+      this.playbarFocus()
+      this.setMediaTime(this.getCurrentTime() + 10)
+    },
+    playbarFocus() {
+      this.playbarOver()
+    },
+    startTimeout() {
+      this.focusTimeout = setTimeout(this.playbarLeave, this.delayUntilHide)
+    },
+    cancelTimeout() {
+      if (this.focusTimeout) {
+        clearTimeout(this.focusTimeout)
+      }
+    },
+    playbarOver() {
+      this.hover = true
+      this.cancelTimeout()
+      this.startTimeout()
+    },
+    playbarLeave() {
+      this.hover = this.cursorDragged ? true : false
+      this.volumeLeave()
+      if (this.subtitleMenuOpen) {
+        this.toggleSubtitleMenu()
+      }
+    },
+    volumeOver() {
+      this.volumeSliderOpen = true
+    },
+    volumeLeave() {
+      this.volumeSliderOpen = false
+    },
+    volumeClick(ev) {
+      if (ev.target.id !== 'playbar-volume') {
+        return false
+      }
+
+      if (this.muted) {
+        this.volumeBtn.value = this.lastVolume
+        if (this.media.mElement) this.media.mElement.muted = false
+        this.muted = false
+      } else {
+        this.lastVolume = this.volumeBtn.value
+        this.volumeBtn.value = 0
+        this.muted = true
+      }
+      this.playbarFocus()
+      this.setVolume()
+    },
+    volumeInputChange() {
+      if (this.muted) {
+        this.muted = false
+      }
+      this.setVolume()
+    },
+    updateDurationDisplay() {
+      if (this.isAnimation) {
+        this.duration = this.$helper.formatTime(
+          this.mediaToShow.timeline.totalDuration()
+        )
+      } else {
+        this.duration = Number.isNaN(this.media.mElement.duration)
+          ? '--:--'
+          : this.$helper.formatTime(this.media.mElement.duration)
+      }
+    },
+    updateTimecodeDisplay() {
+      this.timecode = this.isAnimation
+        ? this.$helper.formatTime(this.media.timeline.time())
+        : this.$helper.formatTime(this.media.mElement.currentTime)
+    },
+
+    updateCursorPosition() {
+      const currentTime = this.isAnimation
+        ? this.media.timeline.time()
+        : this.media.mElement.currentTime
+      const duration = this.isAnimation
+        ? this.mediaToShow.timeline.totalDuration()
+        : this.media.mElement.duration
+      const cursorPos = this.getCursorPosFromTime(currentTime, duration)
+      this.setCursorPosition(cursorPos)
+    },
+    setMediaHandlers() {
+      if (this.media && (this.media.mElement || this.media.timeline)) {
+        //window handlers for playbar progress
+        window.addEventListener('mousemove', this.windowMove)
+        window.addEventListener('mouseup', this.windowUp)
+        window.addEventListener('resize', this.updateCursorPosition)
+        window.addEventListener('keydown', this.windowKeydown)
+        if (this.isAnimation) {
+          this.media.timeline.eventCallback('onUpdate', this.mediaTimeupdate)
+          this.media.timeline.eventCallback('onComplete', this.mediaEnded)
+        } else {
+          this.media.mElement.addEventListener(
+            'timeupdate',
+            this.mediaTimeupdate
+          )
+          this.media.mElement.addEventListener('ended', this.mediaEnded)
+          /// hide the this.playbar()
+
+          this.media.mElement.addEventListener('click', () => {
+            if (this.focusTimeout) {
+              this.playbarLeave()
+              this.cancelTimeout()
+            }
+          })
+          this.media.mElement.focus()
+          //There is a timeline animation link to media  set the callback event for timeline
+          if (this.media.timeline) {
+            this.media.timeline.eventCallback('onUpdate', this.mediaTimeupdate)
+            this.media.timeline.eventCallback('onComplete', this.mediaEnded)
+          }
+        }
+      }
+      this.mediaHandlersSet = true
+    },
+    removeMediaHandlers() {
+      if (this.isAnimation || this.media.timeline) {
+        this.media.timeline.eventCallback('onUpdate', null)
+        this.media.timeline.eventCallback('onComplete', null)
+        this.media.timeline.kill()
+      }
+      if (this.media.mElement) {
+        this.media.mElement.removeEventListener(
+          'timeupdate',
+          this.mediaTimeupdate
+        )
+        this.media.mElement.removeEventListener('ended', this.mediaEnded)
+      }
+      //window handlers for playbar progress
+      window.removeEventListener('mousemove', this.windowMove)
+      window.removeEventListener('mouseup', this.windowUp)
+      window.removeEventListener('resize', this.updateCursorPosition)
+      window.removeEventListener('keydown', this.windowKeydown)
+
+      this.mediaHandlersSet = false
+    },
+    playClick() {
+      if (this.canReplay) {
+        this.setMediaTime(0)
+      }
+      if (this.isAnimation) {
+        this.playAnimation()
+      } else {
+        this.playVideo()
+        // play also the animation if there is one link to the media
+        if (this.media.timeline) this.playAnimation()
+      }
+      this.isPlaying = !this.isPlaying
+      this.canReplay = false
+      this.playbarFocus()
+    },
+
+    playVideo() {
+      if (this.isPlaying) {
+        this.media.mElement.pause()
+      } else {
+        this.media.mElement.play()
+      }
+    },
+
+    playAnimation() {
+      if (this.isPlaying) {
+        this.media.timeline.pause()
+        this.media.timeline.paused(true)
+      } else {
+        this.media.timeline.paused(false)
+        this.media.timeline.play()
+      }
+    },
+    setCursorPosition(xPos) {
+      this.playbackDomElem.style.width = xPos + 'px'
+    },
+    setMediaTime(time) {
+      if (this.isAnimation) {
+        this.media.timeline.time(time)
+      } else {
+        this.media.mElement.currentTime = time
+        if (this.media.timeline) this.media.timeline.time(time)
+      }
+    },
+    mediaTimeupdate() {
+      if (!this.cursorDragged) {
+        this.updateCursorPosition()
+      }
+      this.updateTimecodeDisplay()
+      this.setMediaA11Y()
+    },
+
+    /**
+     * @fires mediaPlaybackEnded to AppCompNavigationFull.vue
+     */
+    mediaEnded() {
+      if ((this.media.timeline || this.isAnimation) && this.isPlaying) {
+        this.media.timeline.pause()
+        this.media.timeline.paused(true)
+      }
+
+      this.isPlaying = false
+      this.canReplay = true
+      this.$bus.$emit('mediaPlaybackEnded')
+      //save the viewed status in userInteraction
+      if (this.isViewed === false) {
+        this.setIsViewed()
+      }
+    },
+    windowMove(ev) {
+      if (this.cursorDragged) {
+        this.setCursorPosition(ev.clientX)
+      }
+    },
+    windowUp(ev) {
+      if (this.cursorDragged) {
+        this.setCursorDragging(false)
+        const timeToSet = this.getTimeFromClickPos(ev)
+        this.setMediaTime(timeToSet)
+      }
+    },
+    setCursorDragging(bool) {
+      this.cursorDragged = bool
+    },
+    cursorDown() {
+      this.setCursorDragging(true)
+    },
+    progressOver() {
+      this.bufferDomElem.style.opacity = '1'
+    },
+    progressLeave() {
+      this.bufferDomElem.style.opacity = '0'
+    },
+    progressMove(ev) {
+      this.bufferDomElem.style.width = ev.clientX + 'px'
+    },
+    progressClick(ev) {
+      if (!this.cursorDragged) {
+        this.bufferDomElem.style.width = ev.clientX + 'px'
+        const timeToSet = this.getTimeFromClickPos(ev)
+        this.setMediaTime(timeToSet)
+      }
+    },
+    getCursorPosFromTime(currentTime, totalTime) {
+      let cursorPosition = 0
+      const domElem = this.$refs['playbar-progress']
+      const width = domElem.offsetWidth
+      const percentageTime = currentTime / totalTime
+      cursorPosition = width * percentageTime
+      return cursorPosition
+    },
+    getTimeFromClickPos(ev) {
+      let timeToSet = 0
+      const domElem = this.$refs['playbar-progress']
+      const clickPos = ev.clientX
+      const width = domElem.offsetWidth
+      const percentage = (clickPos / width) * 100
+      if (this.media && (this.media.timeline || this.media.mElement))
+        timeToSet = this.isAnimation
+          ? (this.media.timeline.totalDuration() / 100) * percentage
+          : (this.media.mElement.duration / 100) * percentage
+      else console.warn('media undefined')
+      return Math.floor(timeToSet)
+    },
+
+    /* Controle the Volume of the Media */
+    setVolume() {
+      if (this.media.mElement && this.volumeBtn) {
+        this.media.mElement.volume = this.volDefault = this.volumeBtn.value
+        this.$store.dispatch('setMediaVolume', this.volumeBtn.value)
+      }
+    },
+
+    toggleSubtitleMenu() {
+      this.subtitleMenuOpen = !this.subtitleMenuOpen
+    },
+    /**
+     * @description method to download transcription.
+     * @summary Create a tag with downloadable link and download the element to user PC. remove a element after download
+     */
+    async downloadTranscript() {
+      try {
+        const tFile = this.media.mTranscript
+        const fileUrl = `./${tFile}`
+        let atype = tFile.split('.')[1]
+
+        const res = await this.axios.get(fileUrl, { responseType: 'blob' })
+        const blob = new Blob([res.data], {
+          type: this.$helper.mimeTypeFor(atype)
+        })
+        const alink = document.createElement('a') //create a element
+
+        alink.href = URL.createObjectURL(blob) //create url reference for the object
+        alink.download = `${tFile}` // set download name
+        alink.click() //symulate click event to download the object
+        URL.revokeObjectURL(alink.href) //release the url referrence of the object
+      } catch (err) {
+        console.warn(this.$t('err_download_transcript'))
+      }
+    },
+    showSubtitles() {
+      this.media.mElement.textTracks[0].mode = 'showing'
+      this.subtitlesEnabled = true
+      this.$store.dispatch('setMediaSubtitles', true)
+      if (this.getCurrentBrowser == 'Firefox') {
+        let video = document.getElementsByTagName('video')[0]
+        let tracks = video.textTracks
+        let track = tracks[0]
+
+        track.addEventListener('cuechange', function fireFoxMoveCC() {
+          if (track.activeCues[0]) {
+            track.activeCues[0].line = 12
+          }
+        })
+      }
+    },
+    hideSubtitles() {
+      this.media.mElement.textTracks[0].mode = 'hidden' // value can be 'disabled' also.
+      this.subtitlesEnabled = false
+      this.$store.dispatch('setMediaSubtitles', false)
+    },
+
+    /** ******************* Rendering Methods****************************** */
+
+    // TODO: Integrate customization of the subtitle (size, position ect...)
+    setSubtitle() {},
+    setMedia() {
+      this.media = this.mediaToShow
+
+      // Setting Video / audio listeners
+      if (this.media && this.media.type === 'pg_media') {
+        this.hasMedia = true
+        this.hasSound = true
+
+        if (this.media.mSubtitle) this.hasSubtitle = true
+
+        if (this.media.mTranscript) this.hasTranscript = true
+      } else if (this.media && this.media.type === 'pg_animation') {
+        this.hasMedia = true
+        this.hasSound = false
+      }
+      if (this.media && Object.keys(this.media).length < 1) {
+        this.hasMedia = false
+        this.hasSound = false
+        this.hasTranscript = false
+        this.hasSubtitle = false
+      }
+    }, // END setMedia
+
+    /** @description - methode to set A11Y support for screen reader on media element (video/audio/animation) */
+    setMediaA11Y() {
+      if (!this.hasMedia) return
+
+      const w = this.$i18n.locale === 'en' ? 'at' : 'à'
+      const dm =
+        this.$i18n.locale === 'en'
+          ? `${this.media.mType} duration`
+          : `durée ${this.media.mType}`
+
+      this.mediaA11Y.valMax = this.isAnimation
+        ? Math.round(this.media.timeline.totalDuration())
+        : Math.round(this.media.mElement.duration) // media duration in floating-point
+
+      //get media Current time
+      this.mediaA11Y.valNow = this.isAnimation
+        ? Math.round(this.media.timeline.time())
+        : Math.round(this.media.mElement.currentTime)
+
+      //format text output for screen reader
+      let currentTime = this.timecode.split(':')
+      let fullTime = this.duration.split(':')
+      let hrsTxt, mnTxt, ssTxt, HRSTxt, MNTxt, SSTxt, fTimeTxt, cTimeTxt
+
+      const mediaTitle = this.media.mTitle || this.media.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 (fullTime.length) {
+        case 3:
+          if (!currentTime.length) return
+
+          //format current hours text text with plurialization apply
+          hrsTxt =
+            currentTime.length == 3 && parseInt(currentTime[0]) > 0
+              ? `${formatNum(currentTime[0])} ${this.$tc(
+                  'a11y_sr.time.hours',
+                  formatNum(currentTime[0])
+                )}`
+              : ''
+
+          //format minutes text text with plurialization apply
+          mnTxt =
+            parseInt(currentTime[1]) > 0
+              ? `${formatNum(currentTime[1])} ${this.$tc(
+                  'a11y_sr.time.minute',
+                  formatNum(currentTime[1])
+                )}`
+              : ''
+
+          //format seconds text with plurialization apply
+          ssTxt =
+            parseInt(currentTime[2]) > 0
+              ? `${formatNum(currentTime[2])} ${this.$tc(
+                  'a11y_sr.time.second',
+                  formatNum(currentTime[2])
+                )}`
+              : `0 ${this.$tc('a11y_sr.time.second')}`
+
+          HRSTxt =
+            parseInt(fullTime[0]) > 0
+              ? `${formatNum(fullTime[0])} ${this.$tc(
+                  'a11y_sr.time.hours',
+                  formatNum(fullTime[0])
+                )}`
+              : ''
+
+          MNTxt =
+            parseInt(fullTime[1]) > 0
+              ? `${formatNum(fullTime[1])} ${this.$tc(
+                  'a11y_sr.time.minute',
+                  formatNum(fullTime[1])
+                )}`
+              : ''
+
+          SSTxt =
+            parseInt(fullTime[2]) > 0
+              ? `${formatNum(fullTime[2])} ${this.$tc(
+                  'a11y_sr.time.second',
+                  formatNum(fullTime[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.media.mType} ${w} ${cTimeTxt}`
+          this.mediaA11Y.duration = `${dm} ${fTimeTxt}`
+          this.mediaA11Y.valueText = `${mediaTitle} ${formatMsg(
+            cTimeTxt,
+            fTimeTxt
+          )}`
+
+          break
+        case 2:
+          if (!currentTime.length) return
+
+          //format current time text
+          mnTxt =
+            parseInt(currentTime[0]) > 0
+              ? `${formatNum(currentTime[0])} ${this.$tc(
+                  'a11y_sr.time.minute',
+                  formatNum(currentTime[0])
+                )}`
+              : ''
+          ssTxt =
+            parseInt(currentTime[1]) > 0
+              ? `${formatNum(currentTime[1])} ${this.$tc(
+                  'a11y_sr.time.second',
+                  formatNum(currentTime[1])
+                )}`
+              : `0 ${this.$tc('a11y_sr.time.second')}`
+
+          // format full time text
+          MNTxt =
+            parseInt(fullTime[0]) > 0
+              ? `${formatNum(fullTime[0])} ${this.$tc(
+                  'a11y_sr.time.minute',
+                  formatNum(fullTime[0])
+                )}`
+              : ''
+          SSTxt =
+            parseInt(fullTime[1]) > 0
+              ? `${formatNum(fullTime[1])} ${this.$tc(
+                  'a11y_sr.time.second',
+                  formatNum(fullTime[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.media.mType} ${w} ${cTimeTxt}`
+          this.mediaA11Y.duration = `${dm} ${fTimeTxt}`
+
+          this.mediaA11Y.valueText = `${mediaTitle} ${formatMsg(
+            cTimeTxt,
+            fTimeTxt
+          )}`
+
+          break
+      }
+    }
+  }
+}
+</script>
+<style lang="scss">
+/*
+Playbar hover/leave transition
+*/
+#playbar-wrapper {
+  width: 100%;
+  position: absolute;
+  left: 0;
+  position: fixed;
+  //z-index: 99999;
+  z-index: 10;
+  bottom: 0;
+
+  * {
+    -webkit-user-select: none; /* Safari */
+    -ms-user-select: none; /* IE 10 and IE 11 */
+    user-select: none; /* Standard syntax */
+  }
+  &.minimized {
+    bottom: -7px;
+    #playbar-btns {
+      #playbar-flex-wrap {
+        .playbar-btn {
+          background-color: transparent;
+          border: none;
+          padding: 0px;
+        }
+      }
+    }
+  }
+
+  #playbar-btns {
+    width: 55%;
+    max-width: 485px;
+    min-width: 290px;
+    height: 70px;
+    margin: 0 auto;
+
+    #playbar-flex-wrap {
+      display: flex;
+      flex-direction: row;
+      justify-content: space-around;
+      align-items: center;
+      height: 100%;
+      position: relative;
+      #playbar-current-time {
+        flex: 0 0 45px;
+      }
+
+      .playbar-btn {
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        padding: 0px;
+
+        svg {
+          pointer-events: none;
+          margin: 0 auto;
+          display: block;
+        }
+
+        &#playbar-volume {
+          position: relative;
+          #playbar-volume-slider-zone {
+            background-color: transparent;
+            width: 90px;
+            height: 120px;
+            position: absolute;
+            top: -120px;
+            left: -27px;
+
+            #playbar-volume-slider {
+              width: 30px;
+              height: 100px;
+              margin: 6px auto;
+              padding-bottom: 100px;
+              position: relative;
+
+              .range-slider {
+                --progress-radius: 20px;
+                --track-height: calc(var(--thumb-size) / 2);
+                --thumb-size: 20px;
+
+                --value-a: Clamp(
+                  var(--min),
+                  var(--value, 0),
+                  var(--max)
+                ); // default value ("--value" is used in single-range markup)
+                --value-b: var(--value, 0); // default value
+
+                --completed-a: calc(
+                  (var(--value-a) - var(--min)) / (var(--max) - var(--min)) *
+                    100
+                );
+                --completed-b: calc(
+                  (var(--value-b) - var(--min)) / (var(--max) - var(--min)) *
+                    100
+                );
+                --ca: Min(var(--completed-a), var(--completed-b));
+                --cb: Max(var(--completed-a), var(--completed-b));
+
+                // breakdown of the below super-complex brain-breaking CSS math:
+                // "clamp" is used to ensure either "-1" or "1"
+                // "calc" is used to inflat the outcome into a huge number, to get rid of any value between -1 & 1
+                // if absolute diff of both completed % is above "5" (%)
+                // ".001" bumps the value just a bit, to avoid a scenario where calc resulted in "0" (then clamp will also be "0")
+                --thumbs-too-close: Clamp(
+                  -1,
+                  1000 * (Min(1, Max(var(--cb) - var(--ca) - 5, -1)) + 0.001),
+                  1
+                );
+                --thumb-close-to-min: Min(
+                  1,
+                  Max(var(--ca) - 2, 0)
+                ); // 2% threshold
+                --thumb-close-to-max: Min(
+                  1,
+                  Max(98 - var(--cb), 0)
+                ); // 2% threshold
+
+                @mixin thumb {
+                  appearance: none;
+                  height: var(--thumb-size);
+                  width: var(--thumb-size);
+                  pointer-events: auto;
+                }
+
+                display: inline-block;
+                height: Max(var(--track-height), var(--thumb-size));
+                position: absolute;
+                z-index: 1;
+                top: 40px;
+                left: -32px;
+                z-index: 1;
+                width: 95px;
+                transform: rotate(270deg);
+
+                &__progress {
+                  --start-end: calc(var(--thumb-size) / 2);
+                  --clip-end: calc(100% - (var(--cb)) * 1%);
+                  --clip-start: calc(var(--ca) * 1%);
+                  --clip: inset(-20px var(--clip-end) -20px var(--clip-start));
+                  position: absolute;
+                  left: var(--start-end);
+                  right: var(--start-end);
+                  top: calc(var(--thumb-size) / 2 - var(--track-height) / 2);
+                  height: calc(var(--track-height));
+                  background: var(--progress-background, #eee);
+                  border: 2px solid;
+                  pointer-events: none;
+                  z-index: -1;
+                  border-radius: var(--progress-radius);
+
+                  // fill area
+                  &::before {
+                    content: '';
+                    position: absolute;
+                    left: 0;
+                    right: 0;
+                    clip-path: var(--clip);
+                    top: 0;
+                    bottom: 0;
+                    z-index: 1;
+                    border-radius: inherit;
+                  }
+
+                  // shadow-effect
+                  &::after {
+                    content: '';
+                    position: absolute;
+                    top: 0;
+                    right: 0;
+                    bottom: 0;
+                    left: 0;
+                    pointer-events: none;
+                    border-radius: inherit;
+                  }
+                }
+
+                & > input {
+                  -webkit-appearance: none;
+                  width: 100%;
+                  height: var(--thumb-size);
+                  margin: 0;
+                  position: absolute;
+                  left: 0;
+                  cursor: -webkit-grab;
+                  cursor: grab;
+                  outline: none;
+                  background: none;
+
+                  &:not(:only-of-type) {
+                    pointer-events: none;
+                  }
+
+                  &::-webkit-slider-thumb {
+                    @include thumb;
+                  }
+                  &::-moz-range-thumb {
+                    @include thumb;
+                  }
+                  &::-ms-thumb {
+                    @include thumb;
+                  }
+
+                  &:active {
+                    cursor: grabbing;
+                    z-index: 2; // when sliding left thumb over the right or vice-versa, make sure the moved thumb is on top
+                  }
+
+                  &:nth-of-type(1) {
+                    --is-left-most: Clamp(
+                      0,
+                      (var(--value-a) - var(--value-b)) * 99999,
+                      1
+                    );
+                    & + output {
+                      &:not(:only-of-type) {
+                        --flip: calc(var(--thumbs-too-close) * -1);
+                      }
+                    }
+                  }
+
+                  &:nth-of-type(2) {
+                    --is-left-most: Clamp(
+                      0,
+                      (var(--value-b) - var(--value-a)) * 99999,
+                      1
+                    );
+                    & + output {
+                      --value: var(--value-b);
+                    }
+                  }
+
+                  // non-multiple range should not clip start of progress bar
+                  &:only-of-type {
+                    ~ .range-slider__progress {
+                      --clip-start: 0;
+                    }
+                  }
+
+                  & + output {
+                    --flip: -1;
+                    --x-offset: calc(var(--completed-b) * -1%);
+                    --pos: calc(
+                      ((var(--value) - var(--min)) / (var(--max) - var(--min))) *
+                        68%
+                    );
+
+                    opacity: 0;
+                    pointer-events: none;
+                    position: absolute;
+                    z-index: 5;
+                    left: var(--pos);
+                    transform: translate(
+                      var(--x-offset),
+                      calc(
+                        150% * var(--flip) -
+                          (var(--y-offset, 0px) + var(--value-offset-y)) *
+                          var(--flip)
+                      )
+                    );
+                    margin-left: -5px;
+                    margin-top: 45px;
+                    line-height: 0;
+                    transform: rotate(90deg);
+                    transition: all 0.12s ease-out, left 0s;
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+
+      #playbar-cc {
+        position: absolute;
+        top: -83px;
+        right: 170px;
+
+        &.submenu_active {
+          box-sizing: border-box;
+          padding: 4px;
+        }
+        #subtitleMenuWrapper {
+          position: absolute;
+          width: 294px;
+
+          .subtitleBtns {
+            width: 100%;
+            height: 40px;
+            padding: 0 24px;
+            line-height: 40px;
+            border: none;
+            text-align: left;
+
+            svg {
+              display: inline-block;
+              margin-right: 20px;
+              transform: translateY(-3px);
+            }
+          }
+        }
+      }
+    }
+  }
+
+  #playbar-progress {
+    -webkit-user-select: none; /* Safari */
+    -ms-user-select: none; /* IE 10 and IE 11 */
+    user-select: none; /* Standard syntax */
+    width: 100%;
+    height: 12px;
+    position: relative;
+    cursor: pointer;
+    & > div {
+      height: 100%;
+      position: absolute;
+    }
+    #playbar-playback {
+      min-width: 8px;
+      #playbar-cursor {
+        width: 16px;
+        height: 16px;
+        position: absolute;
+        right: -8px;
+        top: -2px;
+        &:focus {
+          transform: scale(1.1);
+        }
+      }
+    }
+  }
+}
+
+#acessMenu {
+  &:hover {
+    svg {
+      width: 21.642px !important;
+      height: 16px !important;
+    }
+  }
+}
+</style>