[previews] Improve video loading indicators

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

@@ -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"
@@ -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"
@@ -149,7 +158,7 @@
           ref="raw-player"
           class="raw-player"
           :style="{
-            position: isComparisonOverlay ? 'absolute' : 'static',
+            position: isComparisonOverlay ? 'absolute' : 'relative',
             opacity: overlayOpacity
           }"
           :entities="entityList"
@@ -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

@@ -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,21 @@ 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 => {
+      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()
+    })
   },
 
   beforeDestroy() {
@@ -128,6 +147,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 +560,7 @@ export default {
 <style lang="scss" scoped>
 .video-wrapper {
   height: 100%;
+  position: relative;
 
   video {
     margin: auto;
@@ -537,4 +570,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>

src/components/previews/ObjectViewer.vue

@@ -29,7 +29,7 @@ export default {
 
   props: {
     previewUrl: {
-      default: '',
+      default: null,
       type: String
     },
     light: {