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

package/src/components/AppCompPlayBarProgress.vue

@@ -1,82 +1,82 @@
-<!--@ 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 via buttons.
- v-media class is used to identified which html elements trigger the playBar to be appear (with focus/click)-->
-<template>
-  <!--------------------------------- PLAY-BAR Progress  -------------------------------------->
-  <div 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="v-media pb-progress-bar"
-        role="slider"
-        aria-valuemin="0"
-        :aria-label="mediaA11Y.label"
-        :aria-valuenow="mediaA11Y.valNow"
-        :aria-valuemax="mediaA11Y.valMax"
-        :aria-valuetext="mediaA11Y.valueText"
-        @focus="changeFocusState('progressBar', true)"
-        @blur="changeFocusState('progressBar', false)"
-      >
-        <!--Class progress-animation is apply when we are not using the thumb to change the progression-->
-        <div
-          id="progress-indicator"
-          ref="$progress-indicator"
-          draggable="false"
-          class="progress-indicator"
-          :class="{ 'progress-animation': !progressThumbDown }"
-          :style="{ width: progressBarPercentage + '%' }"
-        >
-          <!--Mousedown validate if the thumb is cliqued (if yes, the mouse is follow to modify the progress)
-             MouseOver/MouseOut deactivate click event on progressBar if the mouse hovered the thumb-->
-          <!-- <div
-            ref="$progress-thumb"
-            draggable="false"
-            class="progress-thumb"
-            style="z-index: 9"
-            @mousedown="
-              savedIsPlaying = isPlaying
-              progressThumbDown = true
-            "
-            @mouseover="progressThumbHover = true"
-            @mouseleave="progressThumbHover = false"
-          ></div> -->
-
-          <div
-            ref="$progress-thumb"
-            draggable="false"
-            class="progress-thumb"
-            style="z-index: 9"
-            @mouseover="progressThumbHover = true"
-            @mouseleave="progressThumbHover = false"
-          ></div>
-        </div>
-      </div>
-      <div
-        v-if="tooTipTimeCode"
-        id="seek-tooltip"
-        ref="$seek-tooltip"
-        aria-hidden="true"
-        class="seek-tooltip"
-      >
-        {{ tooTipTimeCode }}
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import $extendsMedia from '../mixins/$mediaMixins'
-
-export default {
-  mixins: [$extendsMedia],
-  data() {
-    return {
-      tooTipTimeCode: null
-    }
-  },
-  mounted() {}
-}
-</script>
+<!--@ 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 via buttons.
+ v-media class is used to identified which html elements trigger the playBar to be appear (with focus/click)-->
+<template>
+  <!--------------------------------- PLAY-BAR Progress  -------------------------------------->
+  <div 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="v-media pb-progress-bar"
+        role="slider"
+        aria-valuemin="0"
+        :aria-label="mediaA11Y.label"
+        :aria-valuenow="mediaA11Y.valNow"
+        :aria-valuemax="mediaA11Y.valMax"
+        :aria-valuetext="mediaA11Y.valueText"
+        @focus="changeFocusState('progressBar', true)"
+        @blur="changeFocusState('progressBar', false)"
+      >
+        <!--Class progress-animation is apply when we are not using the thumb to change the progression-->
+        <div
+          id="progress-indicator"
+          ref="$progress-indicator"
+          draggable="false"
+          class="progress-indicator"
+          :class="{ 'progress-animation': !progressThumbDown }"
+          :style="{ width: progressBarPercentage + '%' }"
+        >
+          <!--Mousedown validate if the thumb is cliqued (if yes, the mouse is follow to modify the progress)
+             MouseOver/MouseOut deactivate click event on progressBar if the mouse hovered the thumb-->
+          <!-- <div
+            ref="$progress-thumb"
+            draggable="false"
+            class="progress-thumb"
+            style="z-index: 9"
+            @mousedown="
+              savedIsPlaying = isPlaying
+              progressThumbDown = true
+            "
+            @mouseover="progressThumbHover = true"
+            @mouseleave="progressThumbHover = false"
+          ></div> -->
+
+          <div
+            ref="$progress-thumb"
+            draggable="false"
+            class="progress-thumb"
+            style="z-index: 9"
+            @mouseover="progressThumbHover = true"
+            @mouseleave="progressThumbHover = false"
+          ></div>
+        </div>
+      </div>
+      <div
+        v-if="tooTipTimeCode"
+        id="seek-tooltip"
+        ref="$seek-tooltip"
+        aria-hidden="true"
+        class="seek-tooltip"
+      >
+        {{ tooTipTimeCode }}
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import $extendsMedia from '../mixins/$mediaMixins'
+
+export default {
+  mixins: [$extendsMedia],
+  data() {
+    return {
+      tooTipTimeCode: null
+    }
+  },
+  mounted() {}
+}
+</script>