[previews] Improve preview picture loading indicator

* Handle more properly events
* Use the picture viewer in the playlist player

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()

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;
 }

src/components/pages/playlists/RawVideoPlayer.vue

@@ -106,15 +106,13 @@ 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)
     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()
     })
   },

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)
+          }
+        })
       }
     }
   }