Various improvements

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()) {

src/components/modals/EditSearchFilterGroupModal.vue

@@ -42,6 +42,11 @@
           />
         </form>
 
+        <div v-if="groupToEdit?.id" class="mt2">
+          $t('main.created_by'):
+          <people-name :person="personMap.get(groupToEdit.person_id)" />
+        </div>
+
         <modal-footer
           :error-text="$t('main.filter_group_error')"
           :is-error="isError"
@@ -66,6 +71,7 @@ import BooleanField from '@/components/widgets/BooleanField.vue'
 import ColorField from '@/components/widgets/ColorField.vue'
 import ComboboxDepartment from '@/components/widgets/ComboboxDepartment.vue'
 import ModalFooter from '@/components/modals/ModalFooter.vue'
+import PeopleName from '@/components/widgets/PeopleName.vue'
 import TextField from '@/components/widgets/TextField.vue'
 
 export default {
@@ -78,6 +84,7 @@ export default {
     ColorField,
     ComboboxDepartment,
     ModalFooter,
+    PeopleName,
     TextField
   },
 
@@ -113,7 +120,7 @@ export default {
   },
 
   computed: {
-    ...mapGetters(['currentProduction', 'isCurrentUserManager'])
+    ...mapGetters(['currentProduction', 'isCurrentUserManager', 'personMap'])
   },
 
   methods: {

src/components/modals/EditSearchFilterModal.vue

@@ -52,6 +52,11 @@
           />
         </form>
 
+        <div v-if="searchQueryToEdit?.id" class="mt2">
+          $t('main.created_by'):
+          <people-name :person="personMap.get(searchQueryToEdit.person_id)" />
+        </div>
+
         <modal-footer
           :error-text="$t('main.search_query_edit_error')"
           :is-error="isError"
@@ -77,6 +82,7 @@ import BooleanField from '@/components/widgets/BooleanField.vue'
 import Combobox from '@/components/widgets/Combobox.vue'
 import ComboboxDepartment from '@/components/widgets/ComboboxDepartment.vue'
 import ModalFooter from '@/components/modals/ModalFooter.vue'
+import PeopleName from '@/components/widgets/PeopleName.vue'
 import TextField from '@/components/widgets/TextField.vue'
 
 export default {
@@ -89,6 +95,7 @@ export default {
     Combobox,
     ComboboxDepartment,
     ModalFooter,
+    PeopleName,
     TextField
   },
 
@@ -134,7 +141,7 @@ export default {
   },
 
   computed: {
-    ...mapGetters(['currentProduction', 'isCurrentUserManager']),
+    ...mapGetters(['currentProduction', 'isCurrentUserManager', 'personMap']),
 
     allowedGroups() {
       return this.groupOptions.filter(