[previews] Show better loading indicators for videos

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"

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>

src/components/previews/ObjectViewer.vue

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

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

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;