[previews] Allow to preview a movie from the progress bar

src/components/mixins/player.js

@@ -171,6 +171,8 @@ export const playerMixin = {
           extension: this.currentEntity.preview_file_extension,
           task_id: this.currentEntity.preview_file_task_id,
           revision: this.currentEntity.preview_file_revision,
+          width: this.currentEntity.preview_file_width,
+          height: this.currentEntity.preview_file_height,
           annotations: this.currentEntity.preview_file_annotations || []
         }
       } else {

src/components/pages/Playlist.vue

@@ -849,6 +849,12 @@ export default {
           preview_file_id: entityInfo.preview_file_id || entity.preview_file_id,
           preview_file_extension:
             entityInfo.preview_file_extension || entity.preview_file_extension,
+          preview_file_revision:
+            entityInfo.preview_file_revision || entity.preview_file_revision,
+          preview_file_width:
+            entityInfo.preview_file_width || entity.preview_file_width,
+          preview_file_height:
+            entityInfo.preview_file_height || entity.preview_file_height,
           preview_file_task_id:
             entityInfo.task_id ||
             entityInfo.preview_file_task_id ||

src/components/pages/Task.vue

@@ -1043,6 +1043,7 @@ export default {
       if (
         this.task &&
         comment &&
+        comment.previews &&
         (comment.previews.length === 0 ||
           comment.previews[0].id !== previewId) &&
         taskId === this.task.id
@@ -1511,7 +1512,6 @@ video {
 }
 
 .preview-column-content {
-  overflow-x: hidden;
 }
 
 .preview-list {

src/components/pages/playlists/PlaylistPlayer.vue

@@ -164,6 +164,7 @@
           @metadata-loaded="onMetadataLoaded"
           @play-next="onPlayNext"
           @repeat="onVideoRepeated"
+          @video-loaded="onVideoLoaded"
           v-show="isCurrentPreviewMovie && !isLoading"
         />
 
@@ -271,9 +272,12 @@
       class="video-progress pull-bottom"
       :annotations="annotations"
       :frame-duration="frameDuration"
+      :is-full-screen="fullScreen"
+      :movie-dimensions="movieDimensions"
       :nb-frames="nbFrames"
       :handle-in="playlist.for_entity === 'shot' ? handleIn : -1"
       :handle-out="playlist.for_entity === 'shot' ? handleOut : -1"
+      :preview-id="currentPreview ? currentPreview.id : ''"
       @start-scrub="onScrubStart"
       @end-scrub="onScrubEnd"
       @progress-changed="onProgressChanged"
@@ -909,6 +913,7 @@ export default {
       isShowingPencilPalette: false,
       isShowAnnotationsWhilePlaying: false,
       isWaveformDisplayed: false,
+      movieDimensions: { width: 0, height: 0 },
       playlistToEdit: {},
       previewRoomRef: 'playlist-player-preview-room',
       revisionOptions: [],
@@ -1261,6 +1266,10 @@ export default {
             this.rawPlayerComparison.playNext()
           }
         }
+        this.movieDimensions = {
+          width: this.currentPreview.width,
+          height: this.currentPreview.height
+        }
       }
       if (!this.$options.silent) this.scrollToEntity(this.playingEntityIndex)
     },
@@ -1298,13 +1307,22 @@ export default {
       }
     },
 
+    onVideoLoaded() {
+      this.movieDimensions = {
+        width: this.currentPreview.width,
+        height: this.currentPreview.height
+      }
+    },
+
     onPreviewChanged(entity, previewFile) {
       this.pause()
       const localEntity = this.entityList.find(s => s.id === entity.id)
       localEntity.preview_file_id = previewFile.id
       localEntity.preview_file_task_id = previewFile.task_id
       localEntity.preview_file_extension = previewFile.extension
       localEntity.preview_file_annotations = previewFile.annotations
+      localEntity.preview_file_width = previewFile.width
+      localEntity.preview_file_height = previewFile.height
       localEntity.preview_file_previews = previewFile.previews
       localEntity.preview_file_revision = previewFile.revision
       if (this.rawPlayer) {
@@ -1694,6 +1712,10 @@ export default {
           this.resetCanvas()
         }
       })
+      this.movieDimensions = {
+        width: this.currentPreview.width,
+        height: this.currentPreview.height
+      }
     },
 
     playingEntityIndex() {
@@ -1710,6 +1732,10 @@ export default {
       }
       if (this.currentEntity) {
         this.annotations = this.currentEntity.preview_file_annotations || []
+        this.movieDimensions = {
+          width: this.currentPreview.width,
+          height: this.currentPreview.height
+        }
       }
       this.$nextTick(() => {
         if (this.isComparing) {
@@ -1765,6 +1791,10 @@ export default {
       this.rebuildComparisonOptions()
       this.clearCanvas()
       this.annotations = []
+      this.movieDimensions = {
+        width: 0,
+        height: 0
+      }
       this.isComparing = false
       if (this.entityList.length === 0) {
         this.clearPlayer()
@@ -1773,6 +1803,10 @@ export default {
       this.resetCanvas().then(() => {
         if (this.isCurrentPreview) {
           this.resetHandles()
+          this.movieDimensions = {
+            width: this.currentPreview.width,
+            height: this.currentPreview.height
+          }
           this.annotations = this.currentEntity.preview_file_annotations
           this.loadAnnotation(this.getAnnotation(0))
         }
@@ -1785,6 +1819,14 @@ export default {
       this.$nextTick(() => {
         this.updateProgressBar()
         this.clearCanvas()
+        this.$nextTick(() => {
+          if (this.currentPreview) {
+            this.movieDimensions = {
+              width: this.currentPreview.width,
+              height: this.currentPreview.height
+            }
+          }
+        })
       })
     },
 

src/components/pages/playlists/RawVideoPlayer.vue

@@ -470,6 +470,7 @@ export default {
     updateMaxDuration() {
       if (this.currentPlayer) {
         this.$emit('max-duration-update', this.currentPlayer.duration)
+        this.$emit('video-loaded')
       }
     },
 

src/components/previews/PreviewPlayer.vue

@@ -63,6 +63,7 @@
               @size-changed="fixCanvasSize"
               @frame-update="updateFrame"
               @video-end="onVideoEnd"
+              @video-loaded="onVideoLoaded"
             />
 
             <preview-viewer
@@ -111,10 +112,13 @@
         :annotations="annotations"
         :comparison-annotations="comparisonAnnotations"
         :frame-duration="frameDuration"
+        :is-full-screen="fullScreen"
+        :movie-dimensions="movieDimensions"
         :nb-frames="nbFrames"
         :width="width"
         :handle-in="-1"
         :handle-out="-1"
+        :preview-id="currentPreview ? currentPreview.id : ''"
         @start-scrub="$refs['button-bar'].classList.add('unselectable')"
         @end-scrub="$refs['button-bar'].classList.remove('unselectable')"
         @progress-changed="onProgressChanged"
@@ -606,6 +610,10 @@ export default {
       isRepeating: false,
       isTyping: false,
       maxDuration: '00:00.000',
+      movieDimensions: {
+        width: 1920,
+        height: 1080
+      },
       pencil: 'big',
       pencilPalette: ['big', 'medium', 'small'],
       previewToCompare: null,
@@ -1601,6 +1609,15 @@ export default {
       })
     },
 
+    onVideoLoaded() {
+      if (this.isMovie) {
+        this.movieDimensions = {
+          width: this.currentPreview.width,
+          height: this.currentPreview.height
+        }
+      }
+    },
+
     configureEvents() {
       window.addEventListener('keydown', this.onKeyDown, false)
       window.addEventListener('beforeunload', this.onWindowsClosed)
@@ -1792,6 +1809,9 @@ export default {
         this.maxDuration = '00:00.000'
         this.isDrawing = false
         if (this.isComparing) this.isComparing = false
+        setTimeout(() => {
+          this.movieDimensions = this.previewViewer.getNaturalDimensions()
+        }, 10)
       } else if (this.isPicture) {
         this.pause()
         this.isDrawing = false

src/components/previews/PreviewViewer.vue

@@ -38,12 +38,12 @@
       :light="isLight"
       :panzoom="true"
       :preview="preview"
-      @size-changed="dimensions => $emit('size-changed', dimensions)"
-      @video-loaded="$emit('video-loaded')"
       @duration-changed="duration => $emit('duration-changed', duration)"
       @frame-update="frameNumber => $emit('frame-update', frameNumber)"
       @play-ended="$emit('play-ended')"
+      @size-changed="dimensions => $emit('size-changed', dimensions)"
       @video-end="$emit('video-end')"
+      @video-loaded="$emit('video-loaded')"
       v-show="isMovie"
     />
 
@@ -370,6 +370,14 @@ export default {
 
     // Sizing
 
+    getNaturalDimensions() {
+      if (this.isMovie) {
+        return this.videoViewer.getNaturalDimensions()
+      } else {
+        return this.pictureViewer.getNaturalDimensions()
+      }
+    },
+
     getDimensions() {
       const dimensions = { width: 0, height: 0 }
       if (this.container) {

src/components/previews/VideoProgress.vue

@@ -80,12 +80,13 @@
       </span>
       <span
         class="frame-number"
-        :style="{
-          left: frameNumberLeftPosition + 'px'
-        }"
+        :style="getFrameNumberStyle(hoverFrame)"
         v-show="isFrameNumberVisible && hoverFrame > 0"
       >
-        {{ hoverFrame }}
+        <span>
+          {{ hoverFrame }}
+        </span>
+        <span :style="getFrameBackgroundStyle(hoverFrame)"> </span>
       </span>
     </div>
   </div>
@@ -111,6 +112,14 @@ export default {
       default: 0,
       type: Number
     },
+    isFullScreen: {
+      default: false,
+      type: Boolean
+    },
+    movieDimensions: {
+      default: () => ({}),
+      type: Object
+    },
     nbFrames: {
       default: 0,
       type: Number
@@ -122,12 +131,17 @@ export default {
     handleOut: {
       default: 3,
       type: Number
+    },
+    previewId: {
+      default: '',
+      type: String
     }
   },
 
   data() {
     return {
       currentMouseFrame: {},
+      frameNumberHeight: 0,
       frameNumberLeftPosition: 0,
       isFrameNumberVisible: false,
       hoverFrame: 0,
@@ -276,7 +290,7 @@ export default {
 
     _getMouseFrame(event, annotation) {
       let left = this.progress.getBoundingClientRect().left
-      if (left === 0 && !this.fullScreen) {
+      if (left === 0 && !this.isFullScreen) {
         left = this.progress.parentElement.offsetParent.offsetLeft
       }
       let position = this.getClientX(event) - left
@@ -300,6 +314,52 @@ export default {
     _emitProgressEvent(event, annotation) {
       const { frameNumber } = this._getMouseFrame(event, annotation)
       this.$emit('progress-changed', frameNumber)
+    },
+
+    /**
+     * Returns the background style for a given frame, calculating the
+     * background position depending on the frame number. The tile background is
+     * 5 frames wide.
+     * @param {number} frame
+     */
+    getFrameBackgroundStyle(frame) {
+      if (!frame) return {}
+      const frameX = frame % 8
+      const frameY = Math.floor(frame / 8)
+      const ratio = this.movieDimensions.width / this.movieDimensions.height
+      const frameHeight = 100
+      const frameWidth = Math.ceil(frameHeight * ratio)
+      const style = {
+        background: `url(/api/movies/tiles/preview-files/${this.previewId}.png)`,
+        'background-repeat': 'no-repeat',
+        'background-size': `${8 * frameWidth}px auto`,
+        'background-position': `-${frameX * frameWidth}px -${
+          frameY * frameHeight
+        }px`,
+        height: `${frameHeight}px`,
+        width: `${frameWidth}px`,
+        display: 'inline-block'
+      }
+      return style
+    },
+
+    getFrameNumberStyle(frame) {
+      const frameHeight = 100
+      const height = frameHeight + 30
+      const ratio = this.movieDimensions.width / this.movieDimensions.height
+      const frameWidth = Math.ceil(frameHeight * ratio)
+      const width = frameWidth + 10
+      const left = Math.min(
+        Math.max(this.frameNumberLeftPosition - frameWidth / 2, 0),
+        this.width - frameWidth - 10
+      )
+
+      return {
+        height: height + 'px',
+        width: width + 'px',
+        top: this.isFullScreen ? `-${height}px` : '30px',
+        left: left + 'px'
+      }
     }
   },
 
@@ -369,16 +429,18 @@ progress {
 
 .frame-number {
   background: $black;
-  border: 1px solid $white;
   border-radius: 5px;
   color: $white;
-  height: 28px;
   position: absolute;
   padding: 0.3em;
   text-align: center;
   top: 30px;
-  width: 40px;
+  width: 110px;
   z-index: 800;
+
+  img {
+    width: 100px;
+  }
 }
 
 .handle-in {