Various improvements

src/components/lists/ShotList.vue

@@ -249,6 +249,8 @@
           <tbody
             class="datatable-body"
             :key="getGroupKey(group, k, 'sequence_id')"
+            @mousedown="startBrowsing"
+            @touchstart="startBrowsing"
             v-for="(group, k) in displayedShots"
           >
             <tr class="datatable-type-header">
@@ -805,10 +807,30 @@ export default {
         timeSpent: true
       },
       offsets: {},
-      stickedColumns: {}
+      stickedColumns: {},
+      domEvents: [
+        ['mousemove', this.onMouseMove],
+        ['touchmove', this.onMouseMove],
+        ['mouseup', this.stopBrowsing],
+        ['mouseleave', this.stopBrowsing],
+        ['touchend', this.stopBrowsing],
+        ['touchcancel', this.stopBrowsing],
+        ['keyup', this.stopBrowsing]
+      ]
     }
   },
 
+  mounted() {
+    this.stickedColumns =
+      JSON.parse(localStorage.getItem(this.localStorageStickKey)) || {}
+    this.addEvents(this.domEvents)
+  },
+
+  beforeUnmount() {
+    this.removeEvents(this.domEvents)
+    document.body.style.cursor = 'default'
+  },
+
   computed: {
     ...mapGetters([
       'currentProduction',
@@ -1144,11 +1166,6 @@ export default {
     isBigThumbnails() {
       this.updateOffsets()
     }
-  },
-
-  mounted() {
-    this.stickedColumns =
-      JSON.parse(localStorage.getItem(this.localStorageStickKey)) || {}
   }
 }
 </script>

src/components/mixins/entity_list.js

@@ -545,6 +545,59 @@ export const entityListMixin = {
           })
         }
       }
+    },
+
+    startBrowsing(event) {
+      document.body.style.cursor = 'grabbing'
+      this.isBrowsingX = true
+      this.isBrowsingY = true
+      this.initialClientX = this.getClientX(event)
+      this.initialClientY = this.getClientY(event)
+    },
+
+    startBrowsingX(event) {
+      document.body.style.cursor = 'grabbing'
+      this.isBrowsingX = true
+      this.initialClientX = this.getClientX(event)
+    },
+
+    startBrowsingY(event) {
+      document.body.style.cursor = 'grabbing'
+      this.isBrowsingY = true
+      this.initialClientY = this.getClientY(event)
+    },
+
+    stopBrowsing(event) {
+      document.body.style.cursor = 'default'
+      this.isBrowsingX = false
+      this.isBrowsingY = false
+      this.initialClientX = null
+      this.initialClientY = null
+    },
+
+    onMouseMove(event) {
+      if (this.isBrowsingX) this.scrollTableLeft(event)
+      if (this.isBrowsingY) this.scrollTableTop(event)
+    },
+
+    scrollTableLeft(event) {
+      const tableWrapper = this.$refs.body
+      const previousLeft = tableWrapper.scrollLeft
+      const movementX =
+        event.movementX || this.getClientX(event) - this.initialClientX
+      const newLeft = previousLeft - movementX
+      this.initialClientX = this.getClientX(event)
+      tableWrapper.scrollLeft = newLeft
+    },
+
+    scrollTableTop(event) {
+      const tableWrapper = this.$refs.body
+      const previousTop = tableWrapper.scrollTop
+      const movementY =
+        event.movementY || this.getClientY(event) - this.initialClientY
+      const newTop = previousTop - movementY
+      this.initialClientY = this.getClientY(event)
+      tableWrapper.scrollTop = newTop
     }
   },
 

src/components/pages/playlists/PlaylistPlayer.vue

@@ -256,16 +256,20 @@
           }"
           v-show="isCurrentPreviewPicture && !isLoading"
         >
-          <picture-viewer
+          <multi-picture-viewer
             ref="picture-player"
             :big="true"
             :default-height="pictureDefaultHeight"
             :full-screen="fullScreen"
             :light="false"
             :margin-bottom="0"
             :panzoom="false"
-            :preview="currentPreview"
-            high-quality
+            :current-preview="{
+              ...currentPreview,
+              position: currentPreviewIndex + 1
+            }"
+            :previews="picturePreviews"
+            high-qualiy
           />
         </div>
 
@@ -959,10 +963,11 @@ import ColorPicker from '@/components/widgets/ColorPicker.vue'
 import Combobox from '@/components/widgets/Combobox.vue'
 import ComboboxStyled from '@/components/widgets/ComboboxStyled.vue'
 import DeleteModal from '@/components/modals/DeleteModal.vue'
+import MultiPictureViewer from '@/components/previews/MultiPictureViewer.vue'
 import ObjectViewer from '@/components/previews/ObjectViewer.vue'
 import PencilPicker from '@/components/widgets/PencilPicker.vue'
-import PictureViewer from '@/components/previews/PictureViewer.vue'
 import PlaylistedEntity from '@/components/pages/playlists/PlaylistedEntity.vue'
+import PictureViewer from '@/components/previews/PictureViewer.vue'
 import RawVideoPlayer from '@/components/pages/playlists/RawVideoPlayer.vue'
 import PreviewRoom from '@/components/widgets/PreviewRoom.vue'
 import SelectTaskTypeModal from '@/components/modals/SelectTaskTypeModal.vue'
@@ -988,6 +993,7 @@ export default {
     ObjectViewer,
     PencilPicker,
     PictureViewer,
+    MultiPictureViewer,
     PlayIcon,
     PlaylistedEntity,
     PreviewRoom,
@@ -1146,6 +1152,31 @@ export default {
       return this.$refs['full-playlist-player']
     },
 
+    picturePreviews() {
+      const picturePreviews = []
+      this.entityList.forEach(e => {
+        picturePreviews.push({
+          id: e.preview_file_id,
+          height: e.preview_file_height,
+          width: e.preview_file_width,
+          extension: e.preview_file_extension,
+          revision: e.preview_file_revision,
+          position: 1
+        })
+        e.preview_file_previews.forEach((p, index) => {
+          picturePreviews.push({
+            id: p.id,
+            height: p.height,
+            width: p.width,
+            extension: p.extension,
+            revision: p.revision,
+            position: index + 2
+          })
+        })
+      })
+      return picturePreviews
+    },
+
     isMovieComparison() {
       if (!this.currentPreviewToCompare) return false
       return this.currentPreviewToCompare.extension === 'mp4'

src/components/pages/playlists/RawVideoPlayer.vue

@@ -337,8 +337,16 @@ export default {
         )
         const rate = this.$options.rate || 1
 
-        this.currentPlayer.src = this.getMoviePath(entity)
-        this.nextPlayer.src = this.getMoviePath(nextEntity)
+        if (entity.preview_file_extension === 'mp4' && this.currentPlayer) {
+          this.currentPlayer.src = this.getMoviePath(entity)
+        } else if (this.currentPlayer) {
+          this.currentPlayer.src = ''
+        }
+        if (nextEntity.preview_file_extension === 'mp4' && this.nextPlayer) {
+          this.nextPlayer.src = this.getMoviePath(nextEntity)
+        } else if (this.nextPlayer) {
+          this.nextPlayer.src = ''
+        }
         this.currentPlayer.style.display = 'block'
         this.nextPlayer.style.display = 'none'
         this.resetHeight()