fcad-core-dragon 2.0.0-beta.0 → 2.0.0-beta.2

package/src/components/AppCompPlayBar.vue

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