Various improvements

src/components/mixins/annotation.js

@@ -9,6 +9,7 @@ import { markRaw } from 'vue'
 
 import clipboard from '@/lib/clipboard'
 import { formatFullDate } from '@/lib/time'
+import localPreferences from '@/lib/preferences'
 
 /* Monkey patch needed to have text background including the padding. */
 if (fabric) {
@@ -41,7 +42,10 @@ export const annotationMixin = {
       updates: [],
       isShowingPalette: false,
       isShowingPencilPalette: false,
-      notSave: false
+      notSave: false,
+      pencilColor: '#ff3860',
+      pencilWidth: 'big',
+      textColor: '#ff3860'
     }
   },
 
@@ -612,57 +616,87 @@ export const annotationMixin = {
     /*
      * Enable / disabl showing pencil palette flag.
      */
-    onPickPencil() {
+    onPickPencilWidth() {
       this.isShowingPencilPalette = !this.isShowingPencilPalette
     },
 
     /*
-     * Enable / disabl showing color palette flag.
+     * Enable / disable showing color palette flag.
      */
-    onPickColor() {
+    onPickPencilColor() {
       this.isShowingPalette = !this.isShowingPalette
     },
 
     /*
-     * When a drawing color is changed, store it in local state.
+     * Enable / disable showing color palette flag.
      */
-    onChangeColor(color) {
-      this.color = color
+    onPickTextColor() {
+      this.isShowingPalette = !this.isShowingPalette
+    },
+
+    /*
+     * When a drawing color is changed, change fabric configuration and save
+     * the new color in the local preferences.
+     */
+    onChangePencilColor(color) {
+      this.pencilColor = color
       this._resetColor()
       this.isShowingPalette = false
+      localPreferences.setPreference('player:pencil-color', this.pencilColor)
     },
 
     /*
-     * When a text color is changed, store it in local state.
+     * When a pencil width is changed, change fabric configuration and save
+     * the new width in the local preferences.
      */
-    onChangeTextColor(color) {
-      this.textColor = color
+    onChangePencilWidth(pencil) {
+      this.pencilWidth = pencil
+      this._resetPencil()
       this.isShowingPalette = false
+      localPreferences.setPreference('player:pencil-width', this.pencilWidth)
     },
 
     /*
-     * When a pencil is changed, store it in local state.
+     * When a text color is changed, change fabric configuration and save
+     * the new color in the local preferences.
      */
-    onChangePencil(pencil) {
-      this.pencil = pencil
-      this._resetPencil()
+    onChangeTextColor(newValue) {
+      this.textColor = newValue
       this.isShowingPalette = false
+      localPreferences.setPreference('player:text-color', this.textColor)
     },
 
     _resetColor() {
-      this.fabricCanvas.freeDrawingBrush.color = this.color
+      if (!this.fabricCanvas) return
+      this.fabricCanvas.freeDrawingBrush.color = this.pencilColor
     },
 
     _resetPencil() {
+      if (!this.fabricCanvas) return
       const converter = {
         big: 4,
         medium: 2,
         small: 1
       }
-      const strokeWidth = converter[this.pencil]
+      const strokeWidth = converter[this.pencilWidth]
       this.fabricCanvas.freeDrawingBrush.width = strokeWidth
     },
 
+    /*
+     * Reset pencil configuration to the last saved preferences.
+     */
+    resetPencilConfiguration() {
+      this.pencilColor =
+        localPreferences.getPreference('player:pencil-color') || '#ff3860'
+      this.textColor =
+        localPreferences.getPreference('player:text-color') || '#ff3860'
+      this.pencilWidth =
+        localPreferences.getPreference('player:pencil-width') || 'big'
+
+      this._resetColor()
+      this._resetPencil()
+    },
+
     /*
      * Enable / disable the drawing mode. Differentiate text from path drawing.
      */
@@ -987,7 +1021,7 @@ export const annotationMixin = {
       this.fabricCanvas.on('mouse:move', this.onCanvasMouseMoved)
       this.fabricCanvas.on('mouse:down', this.onCanvasClicked)
       this.fabricCanvas.on('mouse:up', this.onCanvasReleased)
-      this.fabricCanvas.freeDrawingBrush.color = this.color
+      this.fabricCanvas.freeDrawingBrush.color = this.pencilColor
       this.fabricCanvas.freeDrawingBrush.width = 4
 
       fabric.Group.prototype._controlsVisibility = {

src/components/mixins/player.js

@@ -20,7 +20,7 @@ export const playerMixin = {
       entityList: [],
       entityListToCompare: [],
       framesPerImage: [],
-      framesSeenOfPicture: 0,
+      framesSeenOfPicture: 1,
       fullScreen: false,
       isCommentsHidden: true,
       isComparing: false,
@@ -59,12 +59,49 @@ export const playerMixin = {
       'user'
     ]),
 
+    // Elements
+
+    container() {
+      return this.$refs.container
+    },
+
+    rawPlayer() {
+      return this.$refs['raw-player']
+    },
+
+    rawPlayerComparison() {
+      return this.$refs['raw-player-comparison']
+    },
+
+    picturePlayer() {
+      return this.$refs['picture-player']
+    },
+
+    soundPlayer() {
+      return this.$refs['sound-player']
+    },
+
+    modelPlayer() {
+      return this.$refs['object-player']
+    },
+
+    canvas() {
+      return this.$refs['canvas-wrapper']
+    },
+
+    progress() {
+      return this.$refs['video-progress']
+    },
+
+    video() {
+      return this.$refs.movie
+    },
+
+    // File type
+
     extension() {
-      if (!this.currentPreview) return ''
-      if (this.currentPreview.extension) {
-        return this.currentPreview.extension
-      }
-      return ''
+      if (!this.currentPreview || !this.currentPreview.extension) return ''
+      return this.currentPreview.extension
     },
 
     isCurrentPreviewMovie() {
@@ -202,7 +239,20 @@ export const playerMixin = {
       )
     },
 
+    // Frames
+
+    frameDuration() {
+      return Math.round((1 / this.fps) * 10000) / 10000
+    },
+
+    fps() {
+      return parseFloat(this.currentProduction?.fps) || 25
+    },
+
     frameNumber() {
+      if (this.isCurrentPreviewPicture) {
+        return this.framesSeenOfPicture - 1
+      }
       let frameNumber = this.currentTimeRaw / this.frameDuration
       if (frameNumber >= this.nbFrames) {
         frameNumber = this.nbFrames
@@ -223,48 +273,6 @@ export const playerMixin = {
       return 0
     },
 
-    frameDuration() {
-      return Math.round((1 / this.fps) * 10000) / 10000
-    },
-
-    fps() {
-      return parseFloat(this.currentProduction?.fps) || 25
-    },
-
-    // Elements
-
-    container() {
-      return this.$refs.container
-    },
-
-    rawPlayer() {
-      return this.$refs['raw-player']
-    },
-
-    rawPlayerComparison() {
-      return this.$refs['raw-player-comparison']
-    },
-
-    picturePlayer() {
-      return this.$refs['picture-player']
-    },
-
-    soundPlayer() {
-      return this.$refs['sound-player']
-    },
-
-    canvas() {
-      return this.$refs['canvas-wrapper']
-    },
-
-    progress() {
-      return this.$refs['video-progress']
-    },
-
-    video() {
-      return this.$refs.movie
-    },
-
     nbFrames() {
       const isChromium = !!window.chrome
       const change = isChromium ? this.frameDuration : 0
@@ -383,12 +391,6 @@ export const playerMixin = {
       this.$refs['video-progress'].$el.style.opacity = 0
     },
 
-    updateProgressBar() {
-      if (this.progress) {
-        this.progress.updateProgressBar(this.frameNumber)
-      }
-    },
-
     updateTaskPanel() {
       if (this.entityList.length > 0) {
         const entity = this.entityList[this.playingEntityIndex]
@@ -399,6 +401,12 @@ export const playerMixin = {
       }
     },
 
+    updateProgressBar() {
+      if (this.progress) {
+        this.progress.updateProgressBar(this.frameNumber)
+      }
+    },
+
     playClicked() {
       this.play()
       this.updateRoomStatus()
@@ -410,6 +418,7 @@ export const playerMixin = {
     },
 
     play() {
+      if (this.playingPictureTimeout) clearTimeout(this.playingPictureTimeout)
       if (this.isFullMode) {
         if (
           this.fullPlayer.currentTime >=
@@ -425,6 +434,8 @@ export const playerMixin = {
         this.playPicture()
       } else if (this.isCurrentPreviewSound) {
         this.playSound()
+      } else if (this.isCurrentPreviewModel) {
+        this.playModel()
       } else {
         this._setCurrentTimeOnHandleIn()
         this.rawPlayer.play()
@@ -490,6 +501,8 @@ export const playerMixin = {
         }
       } else if (this.isCurrentPreviewSound) {
         this.soundPlayer?.pause()
+      } else if (this.isCurrentPreviewModel) {
+        this.modelPlayer?.pause()
       }
       this.isPlaying = false
     },
@@ -498,7 +511,7 @@ export const playerMixin = {
       const entity = this.entityList[entityIndex]
       const wasDrawing = this.isDrawing === true
       this.clearCanvas()
-      this.framesSeenOfPicture = 0
+      this.framesSeenOfPicture = 1
       this.playingEntityIndex = entityIndex
       if (entity && this.isMovie(entity.preview_file_extension)) {
         this.$nextTick(() => {
@@ -676,21 +689,25 @@ export const playerMixin = {
 
     onProgressChanged(frameNumber, updatePlaylistProgress = true) {
       this.clearCanvas()
-      this.rawPlayer.setCurrentFrame(frameNumber)
-      this.syncComparisonPlayer()
+
+      if (this.isCurrentPreviewPicture) {
+        this.framesSeenOfPicture = frameNumber + 1
+      } else {
+        this.rawPlayer.setCurrentFrame(frameNumber)
+        this.syncComparisonPlayer()
+      }
+
       const annotation = this.getAnnotation(frameNumber * this.frameDuration)
       if (annotation) this.loadAnnotation(annotation)
+
       this.sendUpdatePlayingStatus()
       this.onFrameUpdate(frameNumber)
+
       if (this.isFullMode && updatePlaylistProgress) {
         const start = this.currentEntity.start_duration
         const time = (frameNumber - 1) / this.fps + start
         this.fullPlayer.currentTime = time
         this.playlistProgress = time
-      } else {
-        setTimeout(() => {
-          this.updateProgressBar()
-        }, 200)
       }
     },
 
@@ -1052,7 +1069,8 @@ export const playerMixin = {
     },
 
     playPicture() {
-      if (this.isPlaying) clearTimeout(this.playingPictureTimeout)
+      if (this.playingPictureTimeout) clearTimeout(this.playingPictureTimeout)
+      this.framesSeenOfPicture = 1
       this.isPlaying = true
       this.playingPictureTimeout = setTimeout(() => {
         this.continuePlayingPlaylist(
@@ -1063,12 +1081,19 @@ export const playerMixin = {
     },
 
     playSound() {
+      if (this.playingPictureTimeout) clearTimeout(this.playingPictureTimeout)
       this.isPlaying = true
       if (this.isCurrentPreviewSound) {
         this.soundPlayer?.play()
       }
     },
 
+    playModel() {
+      if (this.playingPictureTimeout) clearTimeout(this.playingPictureTimeout)
+      this.isPlaying = true
+      this.modelPlayer?.play(this.objectModel.currentAnimation)
+    },
+
     resetCanvasSize() {
       return this.$nextTick().then(() => {
         if (this.isCurrentPreviewMovie && this.isAnnotationCanvas()) {