From 9076470fbcc7cb0d6d360f98f8e91083482d4738 Mon Sep 17 00:00:00 2001
From: Frank Rousseau <frank.rousseau@free.fr>
Date: Wed, 20 Sep 2023 18:14:48 +0200
Subject: [PATCH] [qa] Code scrub in the playlist player

---
 .../pages/playlists/AnnotationBar.vue         | 89 ------------------
 .../pages/playlists/RawVideoPlayer.vue        | 90 ++++++++++---------
 2 files changed, 48 insertions(+), 131 deletions(-)
 delete mode 100644 src/components/pages/playlists/AnnotationBar.vue

diff --git a/src/components/pages/playlists/AnnotationBar.vue b/src/components/pages/playlists/AnnotationBar.vue
deleted file mode 100644
index ff5ed899b2..0000000000
--- a/src/components/pages/playlists/AnnotationBar.vue
+++ /dev/null
@@ -1,89 +0,0 @@
-<template>
-  <div class="annotation-bar" ref="playlist-annotation">
-    <span
-      :key="`annotation-${index}`"
-      class="annotation-mark"
-      :style="{
-        left: getAnnotationPosition(annotation) + 'px'
-      }"
-      @click="$emit('select-annotation', annotation)"
-      v-for="(annotation, index) in annotations"
-    >
-    </span>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'annotation-bar',
-  props: {
-    annotations: {
-      default: () => [],
-      type: Array
-    },
-    maxDurationRaw: {
-      default: 0,
-      type: Number
-    },
-    nbFrames: {
-      default: 0,
-      type: Number
-    },
-    width: {
-      default: 0,
-      type: Number
-    }
-  },
-
-  methods: {
-    getAnnotationPosition(annotation) {
-      const factor = annotation.time / this.maxDurationRaw
-      let width = this.width
-      const progressBar = this.$parent.progress
-      if (width === 0 && progressBar) {
-        const progressCoordinates = progressBar.getBoundingClientRect()
-        width = progressCoordinates.width
-      }
-      const dotWidth = 6
-      const frameSize = this.width / this.nbFrames
-      let left = width * factor - frameSize / 2 - 3
-      if (left >= width) {
-        left -= this.isFullScreen() ? 1.5 * dotWidth : dotWidth
-      }
-      return Math.round(left)
-    },
-
-    isFullScreen() {
-      return !!(
-        document.fullscreen ||
-        document.webkitIsFullScreen ||
-        document.mozFullScreen ||
-        document.msFullscreenElement ||
-        document.fullscreenElement
-      )
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-.annotation-bar {
-  width: 100%;
-  height: 10px;
-  position: relative;
-  background: $dark-grey;
-  overflow: hidden;
-  flex-shrink: 0;
-}
-
-.annotation-mark {
-  background: #ff3860;
-  width: 8px;
-  height: 8px;
-  display: inline-block;
-  top: 1px;
-  position: absolute;
-  border-radius: 50%;
-  cursor: pointer;
-}
-</style>
diff --git a/src/components/pages/playlists/RawVideoPlayer.vue b/src/components/pages/playlists/RawVideoPlayer.vue
index d45adc6a7e..190b755940 100644
--- a/src/components/pages/playlists/RawVideoPlayer.vue
+++ b/src/components/pages/playlists/RawVideoPlayer.vue
@@ -44,27 +44,23 @@ export default {
   },
 
   props: {
+    currentPreviewIndex: {
+      type: Number,
+      default: 0
+    },
     entities: {
       type: Array,
       default: () => []
     },
-    muted: {
-      type: Boolean,
-      default: false
-    },
-    isHd: {
-      type: Boolean,
-      default: false
-    },
-    isRepeating: {
-      type: Boolean,
-      default: false
-    },
     fullScreen: {
       type: Boolean,
       default: false
     },
-    currentPreviewIndex: {
+    handleIn: {
+      type: Number,
+      default: 0
+    },
+    handleOut: {
       type: Number,
       default: 0
     },
@@ -73,13 +69,17 @@ export default {
       type: String,
       default: 'main'
     },
-    handleIn: {
-      type: Number,
-      default: 0
+    muted: {
+      type: Boolean,
+      default: false
     },
-    handleOut: {
-      type: Number,
-      default: 0
+    isHd: {
+      type: Boolean,
+      default: false
+    },
+    isRepeating: {
+      type: Boolean,
+      default: false
     }
   },
 
@@ -105,21 +105,28 @@ export default {
     this.player1.addEventListener('stalled', this.showLoading)
     this.player1.addEventListener('waiting', this.showLoading)
     this.player1.addEventListener('loadstart', this.showLoading)
-    this.player1.addEventListener('error', err => {
-      this.hideLoading()
-    })
+    this.player1.addEventListener('error', this.hideLoading)
     this.player2.addEventListener('canplay', this.hideLoading)
     this.player2.addEventListener('stalled', this.showLoading)
     this.player2.addEventListener('waiting', this.showLoading)
     this.player2.addEventListener('loadstart', this.showLoading)
-    this.player2.addEventListener('error', err => {
-      this.hideLoading()
-    })
+    this.player2.addEventListener('error', this.hideLoading)
   },
 
   beforeDestroy() {
     window.removeEventListener('resize', this.resetHeight)
     this.player1.removeEventListener('loadedmetadata', this.emitLoadedEvent)
+
+    this.player1.removeEventListener('canplay', this.hideLoading)
+    this.player1.removeEventListener('stalled', this.showLoading)
+    this.player1.removeEventListener('waiting', this.showLoading)
+    this.player1.removeEventListener('loadstart', this.showLoading)
+    this.player1.removeEventListener('error', this.hideLoading)
+    this.player2.removeEventListener('canplay', this.hideLoading)
+    this.player2.removeEventListener('stalled', this.showLoading)
+    this.player2.removeEventListener('waiting', this.showLoading)
+    this.player2.removeEventListener('loadstart', this.showLoading)
+    this.player2.removeEventListener('error', this.hideLoading)
   },
 
   computed: {
@@ -133,16 +140,16 @@ export default {
       return parseFloat(this.currentProduction.fps || '24')
     },
 
+    frameDuration() {
+      return Math.round((1 / this.fps) * 10000) / 10000
+    },
+
     player1() {
       return this.$refs.player1
     },
 
     player2() {
       return this.$refs.player2
-    },
-
-    frameDuration() {
-      return Math.round((1 / this.fps) * 10000) / 10000
     }
   },
 
@@ -153,11 +160,10 @@ export default {
 
     showLoading() {
       setTimeout(() => {
-        console.log(this.currentPlayer.readyState)
         if (this.currentPlayer.readyState !== 4) {
           this.isLoading = true
         }
-      }, 150)
+      }, 150) // Hack to avoid blinking effect
     },
 
     // Helpers
@@ -387,7 +393,7 @@ export default {
         if (this.nextPlayer) {
           this.nextPlayer.currentTime = handleIn
             ? handleIn * this.frameDuration
-            : this.frameDuration
+            : 0
           this.nextPlayer.style.display = 'block'
           this.nextPlayer.play()
         }
@@ -525,10 +531,11 @@ export default {
   },
 
   watch: {
-    isHd() {
-      if (this.currentPlayer) {
-        this.reloadCurrentEntity()
-        if (this.isPlaying) this.play()
+    currentPreviewIndex() {
+      if (!this.isPlaying) {
+        const silent = true
+        this.setCurrentTimeRaw(0)
+        this.reloadCurrentEntity(silent)
       }
     },
 
@@ -546,11 +553,10 @@ export default {
       }, 300)
     },
 
-    currentPreviewIndex() {
-      if (!this.isPlaying) {
-        const silent = true
-        this.setCurrentTimeRaw(0)
-        this.reloadCurrentEntity(silent)
+    isHd() {
+      if (this.currentPlayer) {
+        this.reloadCurrentEntity()
+        if (this.isPlaying) this.play()
       }
     }
   }
@@ -572,10 +578,10 @@ export default {
 }
 
 .video-loader {
+  align-items: center;
   background: #00000088;
   color: white;
   display: flex;
-  align-items: center;
   justify-content: center;
   position: absolute;
   top: 0;