From f24beaebdef294939e6b6096137174c58d5b2523 Mon Sep 17 00:00:00 2001
From: Frank Rousseau <frank.rousseau@free.fr>
Date: Wed, 20 Sep 2023 10:54:03 +0200
Subject: [PATCH 1/3] [previews] Improve frame number behavior when the tile
 can't be found

---
 src/components/previews/VideoProgress.vue | 18 +++++++++++-------
 1 file changed, 11 insertions(+), 7 deletions(-)

diff --git a/src/components/previews/VideoProgress.vue b/src/components/previews/VideoProgress.vue
index 942b16d024..b9b1d1f233 100644
--- a/src/components/previews/VideoProgress.vue
+++ b/src/components/previews/VideoProgress.vue
@@ -357,7 +357,9 @@ export default {
     getFrameNumberStyle(frame) {
       const frameHeight = 100
       const height = frameHeight + 30
-      const ratio = this.movieDimensions.width / this.movieDimensions.height
+      const ratio = this.movieDimensions.width
+        ? this.movieDimensions.width / this.movieDimensions.height
+        : 1
       const frameWidth = Math.ceil(frameHeight * ratio)
       const width = frameWidth + 10
       const left = Math.min(
@@ -383,12 +385,14 @@ export default {
     },
 
     previewId() {
-      const path = `/api/movies/tiles/preview-files/${this.previewId}.png`
-      const img = new Image()
-      this.isTileLoading = true
-      img.src = path
-      img.onload = () => {
-        this.isTileLoading = false
+      if (this.movieDimensions.width) {
+        const path = `/api/movies/tiles/preview-files/${this.previewId}.png`
+        const img = new Image()
+        this.isTileLoading = true
+        img.src = path
+        img.onload = () => {
+          this.isTileLoading = false
+        }
       }
     }
   }

From 862224435abeb66a87e74a5ef53f5319b73672c9 Mon Sep 17 00:00:00 2001
From: Frank Rousseau <frank.rousseau@free.fr>
Date: Wed, 20 Sep 2023 10:57:24 +0200
Subject: [PATCH 2/3] [previews] Show better loading indicators for videos

---
 .../pages/playlists/PlaylistPlayer.vue        |  4 +-
 .../pages/playlists/RawVideoPlayer.vue        | 59 +++++++++++++++++--
 src/components/previews/ObjectViewer.vue      |  2 +-
 src/components/previews/PreviewPlayer.vue     |  1 +
 src/components/previews/VideoViewer.vue       | 30 +++++++---
 5 files changed, 81 insertions(+), 15 deletions(-)

diff --git a/src/components/pages/playlists/PlaylistPlayer.vue b/src/components/pages/playlists/PlaylistPlayer.vue
index 5c901da1a4..369bc396a0 100644
--- a/src/components/pages/playlists/PlaylistPlayer.vue
+++ b/src/components/pages/playlists/PlaylistPlayer.vue
@@ -89,7 +89,7 @@
           ref="raw-player-comparison"
           class="raw-player"
           :style="{
-            position: isComparisonOverlay ? 'absolute' : 'static'
+            position: isComparisonOverlay ? 'absolute' : 'relative'
           }"
           :entities="entityListToCompare"
           :full-screen="fullScreen"
@@ -149,7 +149,7 @@
           ref="raw-player"
           class="raw-player"
           :style="{
-            position: isComparisonOverlay ? 'absolute' : 'static',
+            position: isComparisonOverlay ? 'absolute' : 'relative',
             opacity: overlayOpacity
           }"
           :entities="entityList"
diff --git a/src/components/pages/playlists/RawVideoPlayer.vue b/src/components/pages/playlists/RawVideoPlayer.vue
index 8b4961b926..8f6a9d10c1 100644
--- a/src/components/pages/playlists/RawVideoPlayer.vue
+++ b/src/components/pages/playlists/RawVideoPlayer.vue
@@ -1,5 +1,8 @@
 <template>
   <div ref="container" class="video-wrapper filler flexrow-item">
+    <div class="video-loader" v-show="isLoading">
+      <Spinner class="mt2" style="color: white" />
+    </div>
     <video
       ref="player1"
       preload="auto"
@@ -31,10 +34,14 @@
 import { mapGetters } from 'vuex'
 import { floorToFrame, roundToFrame } from '@/lib/video'
 
+import Spinner from '@/components/widgets/Spinner'
+
 export default {
   name: 'raw-video-player',
 
-  components: {},
+  components: {
+    Spinner
+  },
 
   props: {
     entities: {
@@ -79,6 +86,7 @@ export default {
   data() {
     return {
       currentPlayer: undefined,
+      isLoading: true,
       isPlaying: false,
       nextPlayer: undefined,
       playingIndex: 0
@@ -92,10 +100,23 @@ export default {
     this.player1.addEventListener('loadedmetadata', this.emitLoadedEvent)
     window.addEventListener('resize', this.resetHeight)
     this.$options.currentTimeCalls = []
-    if (this.video && this.video.readyState === 4) {
-      this.$emit('metadata-loaded', event)
-      this.resetHeight()
-    }
+
+    this.player1.addEventListener('canplay', this.hideLoading)
+    this.player1.addEventListener('stalled', this.showLoading)
+    this.player1.addEventListener('waiting', this.showLoading)
+    this.player1.addEventListener('loadstart', this.showLoading)
+    this.player1.addEventListener('error', err => {
+      console.error(err)
+      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 => {
+      console.error(err)
+      this.hideLoading()
+    })
   },
 
   beforeDestroy() {
@@ -128,6 +149,19 @@ export default {
   },
 
   methods: {
+    hideLoading() {
+      this.isLoading = false
+    },
+
+    showLoading() {
+      setTimeout(() => {
+        console.log(this.currentPlayer.readyState)
+        if (this.currentPlayer.readyState !== 4) {
+          this.isLoading = true
+        }
+      }, 150)
+    },
+
     // Helpers
 
     emitLoadedEvent(event) {
@@ -528,6 +562,7 @@ export default {
 <style lang="scss" scoped>
 .video-wrapper {
   height: 100%;
+  position: relative;
 
   video {
     margin: auto;
@@ -537,4 +572,18 @@ export default {
 .container {
   max-height: 100%;
 }
+
+.video-loader {
+  background: #00000088;
+  color: white;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 300;
+}
 </style>
diff --git a/src/components/previews/ObjectViewer.vue b/src/components/previews/ObjectViewer.vue
index a7d06eec3b..4b66495683 100644
--- a/src/components/previews/ObjectViewer.vue
+++ b/src/components/previews/ObjectViewer.vue
@@ -29,7 +29,7 @@ export default {
 
   props: {
     previewUrl: {
-      default: '',
+      default: null,
       type: String
     },
     light: {
diff --git a/src/components/previews/PreviewPlayer.vue b/src/components/previews/PreviewPlayer.vue
index 5e50e6deae..55fbacd102 100644
--- a/src/components/previews/PreviewPlayer.vue
+++ b/src/components/previews/PreviewPlayer.vue
@@ -1880,6 +1880,7 @@ export default {
       this.$nextTick(() => {
         // Hack needed to reset positioning.
         window.dispatchEvent(new Event('resize'))
+        this.previewViewer.resetZoom()
       })
     },
 
diff --git a/src/components/previews/VideoViewer.vue b/src/components/previews/VideoViewer.vue
index 545fe9f21a..c74a097c60 100644
--- a/src/components/previews/VideoViewer.vue
+++ b/src/components/previews/VideoViewer.vue
@@ -21,13 +21,11 @@
       <video
         ref="movie"
         class="annotation-movie"
-        :style="{
-          display: isLoading ? 'none' : 'block'
-        }"
         :src="moviePath"
         :poster="posterPath"
         preload="auto"
         type="video/mp4"
+        v-show="!isLoading"
       ></video>
     </div>
   </div>
@@ -154,12 +152,15 @@ export default {
         this.video.addEventListener('loadedmetadata', () => {
           this.configureVideo()
           this.onWindowResize()
-          this.isLoading = false
           this.setCurrentTime(0)
           this.setCurrentTimeRaw(0)
           this.$emit('video-loaded')
         })
 
+        this.video.addEventListener('canplay', () => {
+          this.isLoading = false
+        })
+
         this.video.addEventListener('ended', () => {
           this.isLoading = false
         })
@@ -170,6 +171,18 @@ export default {
           this.isLoading = false
         })
 
+        this.video.addEventListener('loadstart', () => {
+          this.isLoading = true
+        })
+
+        this.video.addEventListener('stalled', () => {
+          this.isLoading = true
+        })
+
+        this.video.addEventListener('waiting', () => {
+          this.isLoading = true
+        })
+
         window.addEventListener('resize', this.onWindowResize)
       }
     }, 0)
@@ -505,10 +518,13 @@ export default {
 
 <style lang="scss" scoped>
 .loading-background {
-  width: 100%;
-  height: 100%;
-  background: black;
+  background: #00000088;
+  position: absolute;
   display: flex;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
   align-items: center;
   justify-content: center;
   text-align: center;

From baf1363fa394ca829f198bc4591ac43ed7b6cde2 Mon Sep 17 00:00:00 2001
From: Frank Rousseau <frank.rousseau@free.fr>
Date: Wed, 20 Sep 2023 17:32:37 +0200
Subject: [PATCH 3/3] [previews] Improve preview picture loading indicator

* Handle more properly events
* Use the picture viewer in the playlist player
---
 src/components/mixins/player.js               | 13 +++-
 .../pages/playlists/PlaylistPlayer.vue        | 75 ++++++++++++++-----
 .../pages/playlists/RawVideoPlayer.vue        |  2 -
 src/components/previews/PictureViewer.vue     | 56 +++++++++-----
 4 files changed, 105 insertions(+), 41 deletions(-)

diff --git a/src/components/mixins/player.js b/src/components/mixins/player.js
index 03b774aab7..74f3958455 100644
--- a/src/components/mixins/player.js
+++ b/src/components/mixins/player.js
@@ -755,6 +755,7 @@ export const playerMixin = {
 
     onFilmClicked() {
       this.isEntitiesHidden = !this.isEntitiesHidden
+      window.dispatchEvent(new Event('resize'))
       this.$nextTick(() => {
         this.resetHeight()
         this.reloadAnnotations()
@@ -791,6 +792,7 @@ export const playerMixin = {
       if (!this.isCommentsHidden) {
         this.$refs['task-info'].$el.style.height = `${height}px`
       }
+      window.dispatchEvent(new Event('resize'))
       this.$nextTick(() => {
         this.$refs['task-info'].focusCommentTextarea()
         this.resetHeight()
@@ -933,8 +935,15 @@ export const playerMixin = {
         } else if (this.isCurrentPreviewPicture && this.isAnnotationCanvas()) {
           if (this.canvas) {
             // Picture ratio
-            const naturalWidth = this.picturePlayer.naturalWidth
-            const naturalHeight = this.picturePlayer.naturalHeight
+
+            const naturalDimensions = this.currentPreview.width
+              ? {
+                  width: this.currentPreview.width,
+                  height: this.currentPreview.height
+                }
+              : this.picturePlayer.getNaturalDimensions()
+            const naturalWidth = naturalDimensions.width
+            const naturalHeight = naturalDimensions.height
             const ratio = naturalWidth / naturalHeight
 
             if (!this.$refs['video-container']) return Promise.resolve()
diff --git a/src/components/pages/playlists/PlaylistPlayer.vue b/src/components/pages/playlists/PlaylistPlayer.vue
index 369bc396a0..bc3c5e0a7f 100644
--- a/src/components/pages/playlists/PlaylistPlayer.vue
+++ b/src/components/pages/playlists/PlaylistPlayer.vue
@@ -122,12 +122,21 @@
               !isCurrentPreviewMovie)
           "
         >
-          <img
+          <picture-viewer
             ref="picture-player-comparison"
             class="picture-preview"
-            :src="currentComparisonPreviewPath"
+            :big="true"
+            :default-height="pictureDefaultHeight"
+            :full-screen="fullScreen"
+            :light="false"
+            :margin-bottom="0"
+            :panzoom="false"
+            :preview="currentPreviewToCompare"
+            :isComparing="isComparing"
+            @loaded="onPictureLoaded"
             v-show="isComparing && isPictureComparison"
           />
+
           <video
             ref="picture-video-player-comparison"
             class="picture-preview"
@@ -214,16 +223,20 @@
             position: isComparisonOverlay ? 'absolute' : 'static',
             opacity: overlayOpacity,
             left: 0,
-            right: 0
+            right: 0,
+            'z-index': 1
           }"
           v-show="isCurrentPreviewPicture && !isLoading"
         >
-          <img
+          <picture-viewer
             ref="picture-player"
-            id="picture-player"
-            class="picture-preview"
-            :src="isCurrentPreviewPicture ? currentPreviewPath : null"
-            v-show="isCurrentPreviewPicture"
+            :big="true"
+            :default-height="pictureDefaultHeight"
+            :full-screen="fullScreen"
+            :light="false"
+            :margin-bottom="0"
+            :panzoom="false"
+            :preview="currentPreview"
           />
         </div>
 
@@ -832,6 +845,7 @@ import Combobox from '@/components/widgets/Combobox'
 import DeleteModal from '@/components/modals/DeleteModal'
 import ObjectViewer from '@/components/previews/ObjectViewer'
 import PencilPicker from '@/components/widgets/PencilPicker'
+import PictureViewer from '@/components/previews/PictureViewer'
 import PlaylistedEntity from '@/components/pages/playlists/PlaylistedEntity'
 import RawVideoPlayer from '@/components/pages/playlists/RawVideoPlayer'
 import PreviewRoom from '@/components/widgets/PreviewRoom'
@@ -863,6 +877,7 @@ export default {
     PlaylistedEntity,
     RawVideoPlayer,
     PreviewRoom,
+    PictureViewer,
     SelectTaskTypeModal,
     SoundViewer,
     Spinner,
@@ -914,6 +929,7 @@ export default {
       isShowAnnotationsWhilePlaying: false,
       isWaveformDisplayed: false,
       movieDimensions: { width: 0, height: 0 },
+      pictureDefaultHeight: 0,
       playlistToEdit: {},
       previewRoomRef: 'playlist-player-preview-room',
       revisionOptions: [],
@@ -950,13 +966,6 @@ export default {
     } else {
       this.entityList = []
     }
-    if (this.picturePlayer) {
-      this.picturePlayer.addEventListener('load', async () => {
-        const wasPlaying = this.isPlaying
-        await this.resetPictureCanvas()
-        this.isPlaying = wasPlaying
-      })
-    }
     this.$nextTick(() => {
       this.configureEvents()
       this.setupFabricCanvas()
@@ -1419,12 +1428,15 @@ export default {
         if (!this.isCommentsHidden) {
           this.$refs['task-info'].$el.style.height = `${height}px`
         }
+        if (this.$refs['picture-preview-wrapper']) {
+          this.$refs['picture-preview-wrapper'].style.height = `${height}px`
+          this.pictureDefaultHeight = height
+        }
+        this.pictureDefaultHeight = height
+
         if (this.rawPlayer) this.rawPlayer.resetHeight(height)
         if (this.isComparing && this.$refs['raw-player-comparison']) {
           this.$refs['raw-player-comparison'].resetHeight(height)
-          if (this.$refs['picture-preview-wrapper']) {
-            this.$refs['picture-preview-wrapper'].style.height = `${height}px`
-          }
         }
         this.$nextTick(() => {
           this.resetCanvas()
@@ -1559,6 +1571,15 @@ export default {
       this.isDlButtonsHidden = !this.isDlButtonsHidden
     },
 
+    onPictureLoaded() {
+      this.$nextTick(async () => {
+        this.resetCanvasSize()
+        const wasPlaying = this.isPlaying
+        await this.resetPictureCanvas()
+        this.isPlaying = wasPlaying
+      })
+    },
+
     onBuildClicked() {
       this.runBuild(false)
     },
@@ -1702,9 +1723,16 @@ export default {
   },
 
   watch: {
+    isLoading() {
+      if (!this.isLoading) {
+        this.resetHeight()
+      }
+    },
+
     currentPreviewIndex() {
       this.endAnnotationSaving()
       this.resetUndoStacks()
+      this.resetHeight()
       this.$nextTick(() => {
         if (this.isCurrentPreviewPicture) {
           this.resetPictureCanvas()
@@ -1759,6 +1787,7 @@ export default {
         this.rebuildEntityListToCompare()
       }
       this.$nextTick().then(() => {
+        window.dispatchEvent(new Event('resize'))
         this.resetPictureCanvas()
         this.resetCanvas()
         this.syncComparisonPlayer()
@@ -2187,12 +2216,17 @@ progress {
   margin-right: 0;
 }
 
+.canvas-wrapper {
+  z-index: 5;
+}
+
 .picture-preview-wrapper {
   display: flex;
   height: inherit;
   justify-content: center;
   align-items: center;
   flex: 1;
+  z-index: 3;
 }
 
 .picture-preview-comparison-wrapper {
@@ -2201,6 +2235,7 @@ progress {
   justify-content: center;
   align-items: center;
   flex: 1;
+  z-index: 1;
 }
 
 .picture-preview {
@@ -2254,9 +2289,11 @@ input[type='number'] {
 
 .frame-per-image-input {
   padding: 2px;
-  margin-left: 3px;
+  margin-left: 4px;
+  padding-left: 5px;
   background-color: $dark-grey-2;
   border: 1px solid $dark-grey-stronger;
+  border-radius: 5px;
   color: white;
   width: 3rem;
 }
diff --git a/src/components/pages/playlists/RawVideoPlayer.vue b/src/components/pages/playlists/RawVideoPlayer.vue
index 8f6a9d10c1..d45adc6a7e 100644
--- a/src/components/pages/playlists/RawVideoPlayer.vue
+++ b/src/components/pages/playlists/RawVideoPlayer.vue
@@ -106,7 +106,6 @@ export default {
     this.player1.addEventListener('waiting', this.showLoading)
     this.player1.addEventListener('loadstart', this.showLoading)
     this.player1.addEventListener('error', err => {
-      console.error(err)
       this.hideLoading()
     })
     this.player2.addEventListener('canplay', this.hideLoading)
@@ -114,7 +113,6 @@ export default {
     this.player2.addEventListener('waiting', this.showLoading)
     this.player2.addEventListener('loadstart', this.showLoading)
     this.player2.addEventListener('error', err => {
-      console.error(err)
       this.hideLoading()
     })
   },
diff --git a/src/components/previews/PictureViewer.vue b/src/components/previews/PictureViewer.vue
index 9589a521f7..440261cae6 100644
--- a/src/components/previews/PictureViewer.vue
+++ b/src/components/previews/PictureViewer.vue
@@ -93,8 +93,8 @@ export default {
   mounted() {
     this.container.style.height = this.defaultHeight + 'px'
     this.isLoading = true
+    this.setPictureEmptyPath()
     if (this.picture.complete) {
-      this.isLoading = false
       this.onWindowResize()
     }
     this.picture.addEventListener('load', this.endLoading)
@@ -236,7 +236,15 @@ export default {
     // Configuration
 
     endLoading() {
-      this.isLoading = false
+      if (
+        this.fullScreen &&
+        (this.pictureBig.complete || this.pictureGif.complete)
+      ) {
+        this.isLoading = false
+      } else if (!this.fullScreen && this.picture.complete) {
+        this.isLoading = false
+      }
+      this.$emit('loaded')
       this.$nextTick(this.resetPicture)
     },
 
@@ -285,6 +293,15 @@ export default {
       }
     },
 
+    setPictureEmptyPath() {
+      if (this.isGif && this.isPicture) {
+        this.pictureGifPath = null
+      } else if (this.preview && this.isPicture) {
+        this.picturePath = null
+        this.pictureDlPath = null
+      }
+    },
+
     setPicturePath() {
       if (this.isGif && this.isAvailable && this.isPicture) {
         const previewId = this.preview.id
@@ -377,23 +394,26 @@ export default {
     },
 
     preview() {
-      this.resetPanZoom()
-      this.isLoading = true
-      this.setPicturePath()
-      this.setPictureDlPath()
-      if (this.currentIndex > 1) {
-        this.currentIndex = 1
-      }
-      if (this.fullScreen) {
-        if (this.pictureBig.complete) {
+      if (this.preview && this.preview.id !== this.lastPreviewId) {
+        this.lastPreviewId = this.preview.id
+        this.resetPanZoom()
+        this.isLoading = true
+        this.setPictureEmptyPath()
+        this.$nextTick(() => {
           this.resetPicture()
-          this.isLoading = false
-        }
-      } else {
-        if (this.picture.complete) {
-          this.isLoading = false
-        }
-        this.$nextTick(this.resetPicture)
+          this.setPicturePath()
+          this.setPictureDlPath()
+          if (this.currentIndex > 1) {
+            this.currentIndex = 1
+          }
+          if (this.fullScreen) {
+            if (this.pictureBig.complete) {
+              this.resetPicture()
+            }
+          } else {
+            this.$nextTick(this.resetPicture)
+          }
+        })
       }
     }
   }