Merge pull request #1487 from frankrousseau/master

Various fixes

src/components/mixins/annotation.js

@@ -263,12 +263,14 @@ export const annotationMixin = {
     addToAdditions(obj) {
       this.markLastAnnotationTime()
       const currentTime = this.getCurrentTime()
+      const currentFrame = this.getCurrentFrame()
       const additions = this.findAnnotation(this.additions, currentTime)
       if (additions) {
         additions.drawing.objects.push(obj.serialize())
       } else {
         this.additions.push({
           time: currentTime,
+          frame: currentFrame,
           drawing: { objects: [obj.serialize()] }
         })
       }
@@ -301,12 +303,14 @@ export const annotationMixin = {
     addToDeletions(obj) {
       this.markLastAnnotationTime()
       const currentTime = this.getCurrentTime()
+      const currentFrame = this.getCurrentFrame()
       const deletion = this.findAnnotation(this.deletions, currentTime)
       if (deletion) {
         deletion.objects.push(obj.id)
       } else {
         this.deletions.push({
           time: currentTime,
+          frame: currentFrame,
           objects: [obj.id]
         })
       }
@@ -348,6 +352,7 @@ export const annotationMixin = {
     addToUpdatesSerializedObject(obj) {
       this.markLastAnnotationTime()
       const currentTime = this.getCurrentTime()
+      const currentFrame = this.getCurrentFrame()
       const updates = this.findAnnotation(this.updates, currentTime)
       if (updates) {
         updates.drawing.objects = updates.drawing.objects.filter(
@@ -357,6 +362,7 @@ export const annotationMixin = {
       } else {
         this.updates.push({
           time: currentTime,
+          frame: currentFrame,
           drawing: { objects: [obj] }
         })
       }
@@ -408,7 +414,7 @@ export const annotationMixin = {
      *
      * Later it will be interesting to represent time in as a frame number.
      */
-    getNewAnnotations(currentTime, annotation) {
+    getNewAnnotations(currentTime, currentFrame, annotation) {
       this.fabricCanvas.getObjects().forEach(obj => {
         this.setObjectData(obj)
         if (obj.type === 'path') {
@@ -454,6 +460,7 @@ export const annotationMixin = {
         if (!this.annotations || !this.annotations.push) this.annotations = []
         this.annotations.push({
           time: Math.max(currentTime, 0),
+          frame: Math.max(currentFrame, 0),
           drawing: {
             objects: this.fabricCanvas._objects.map(obj => obj.serialize())
           }

src/components/mixins/player.js

@@ -908,6 +908,15 @@ export const playerMixin = {
       return Number(time.toPrecision(4))
     },
 
+    getCurrentFrame() {
+      if (this.currentFrame) {
+        return this.currentFrame
+      } else {
+        const time = roundToFrame(this.currentTimeRaw, this.fps) || 0
+        return Math.round(time / this.frameDuration)
+      }
+    },
+
     setCurrentTimeRaw(time) {
       const roundedTime = roundToFrame(time, this.fps) || 0
       const frameNumber = roundedTime / this.frameDuration
@@ -1185,10 +1194,16 @@ export const playerMixin = {
       if (this.isCurrentPreviewPicture) currentTime = 0
       if (!this.annotations) return
 
+      const currentFrame = currentTime / this.frameDuration
+
       // Get annotations currently stored
       const annotation = this.getAnnotation(currentTime)
       // Get annotation set on the canvas
-      const annotations = this.getNewAnnotations(currentTime, annotation)
+      const annotations = this.getNewAnnotations(
+        currentTime,
+        currentFrame,
+        annotation
+      )
       // Retrieved current entity.
       const entity = this.entityList[this.playingEntityIndex]
       if (!entity) return

src/components/pages/Assets.vue

@@ -435,8 +435,10 @@ export default {
       'assetValidationColumns',
       'currentEpisode',
       'currentProduction',
+      'currentSection',
       'departmentMap',
       'departments',
+      'displayedAssets',
       'displayedAssetsByType',
       'episodeMap',
       'isAssetEstimation',
@@ -1004,6 +1006,21 @@ export default {
       this.searchField.setValue('')
       this.$store.commit('SET_ASSET_LIST_SCROLL_POSITION', 0)
       if (this.isTVShow && this.currentEpisode) this.reset()
+    },
+
+    currentSection() {
+      if (
+        this.isTVShow &&
+        this.currentEpisode.id &&
+        !this.displayedAssets.find(
+          asset => asset.episode_id === this.currentEpisode.id
+        )
+      ) {
+        this.searchField.setValue('')
+        this.$store.commit('SET_ASSET_LIST_SCROLL_POSITION', 0)
+        this.initialLoading = true
+        this.reset()
+      }
     }
   },
 

src/components/pages/Edits.vue

@@ -973,6 +973,17 @@ export default {
       if (this.isTVShow && this.currentEpisode) this.reset()
     },
 
+    currentSection() {
+      if (
+        (this.isTVSHow && this.edits.length === 0) ||
+        this.edits[0].episode_id !== this.currentEpisode.id
+      ) {
+        this.$refs['edit-search-field'].setValue('')
+        this.$store.commit('SET_EDIT_LIST_SCROLL_POSITION', 0)
+        this.reset()
+      }
+    },
+
     isEditsLoading() {
       if (!this.isEditsLoading) {
         let searchQuery = ''

src/components/pages/Sequence.vue

@@ -329,6 +329,7 @@ export default {
     ...mapGetters([
       'currentEpisode',
       'currentProduction',
+      'currentSection',
       'getTaskTypePriority',
       'isCurrentUserManager',
       'isTVShow',

src/components/pages/Sequences.vue

@@ -358,6 +358,7 @@ export default {
     ...mapGetters([
       'currentEpisode',
       'currentProduction',
+      'currentSection',
       'displayedSequences',
       'departmentMap',
       'departments',
@@ -647,6 +648,18 @@ export default {
       this.reset()
     },
 
+    currentSection() {
+      if (
+        (this.isTVSHow && this.displayedSequences.length === 0) ||
+        this.displayedSequences[0].episode_id !== this.currentEpisode.id
+      ) {
+        this.$refs['sequence-search-field'].setValue('')
+        this.$store.commit('SET_SEQUENCE_LIST_SCROLL_POSITION', 0)
+        this.initialLoading = false
+        this.reset()
+      }
+    },
+
     isSequencesLoading() {
       if (!this.isSequencesLoading) {
         let searchQuery = ''

src/components/pages/Shots.vue

@@ -442,10 +442,6 @@ export default {
     this.clearSelectedShots()
   },
 
-  created() {
-    this.setLastProductionScreen('shots')
-  },
-
   mounted() {
     let searchQuery = ''
     if (this.$route.query.search && this.$route.query.search.length > 0) {
@@ -486,7 +482,9 @@ export default {
     ...mapGetters([
       'currentEpisode',
       'currentProduction',
+      'currentSection',
       'departmentMap',
+      'displayedSequences',
       'displayedShotsBySequence',
       'episodeMap',
       'episodes',
@@ -1149,6 +1147,23 @@ export default {
       }
     },
 
+    currentSection() {
+      if (
+        (this.isTVSHow && this.displayedSequences.length === 0) ||
+        this.displayedSequences[0].episode_id !== this.currentEpisode.id
+      ) {
+        this.$refs['shot-search-field'].setValue('')
+        this.$store.commit('SET_SHOT_LIST_SCROLL_POSITION', 0)
+
+        this.initialLoading = true
+        this.loadShots(() => {
+          this.initialLoading = false
+          this.setSearchFromUrl()
+          this.onSearchChange()
+        })
+      }
+    },
+
     currentProduction() {
       this.$refs['shot-search-field'].setValue('')
       this.$store.commit('SET_SHOT_LIST_SCROLL_POSITION', 0)

src/components/previews/PreviewPlayer.vue

@@ -1118,6 +1118,15 @@ export default {
       return Number(time.toPrecision(4))
     },
 
+    getCurrentFrame() {
+      if (this.currentFrame) {
+        return this.currentFrame
+      } else {
+        const time = roundToFrame(this.currentTimeRaw, this.fps) || 0
+        return Math.round(time / this.frameDuration)
+      }
+    },
+
     play() {
       this.isPlaying = true
       this.isDrawing = false
@@ -1511,7 +1520,11 @@ export default {
         currentTime = Number(currentTime.toPrecision(4))
       }
       const annotation = this.getAnnotation(currentTime)
-      const annotations = this.getNewAnnotations(currentTime, annotation)
+      const annotations = this.getNewAnnotations(
+        currentTime,
+        this.currentFrame,
+        annotation
+      )
 
       if (!this.readOnly) {
         const preview = this.currentPreview
@@ -1538,6 +1551,7 @@ export default {
           return
         }
       }
+      console.log('annotation to load', annotation)
 
       if (!this.fabricCanvas) this.setupFabricCanvas()
       if (this.isMovie && this.previewViewer && this.isPlaying) {

src/components/sides/TaskInfo.vue

@@ -28,7 +28,10 @@
           ((nbSelectedTasks || 0) > 1 || nbSelectedValidations > 0)
         "
       >
-        <h1 class="title">{{ $tc('tasks.selected_tasks') }}</h1>
+        <h1 class="title">
+          {{ $tc('tasks.selected_tasks') }}
+          ({{ nbSelectedTasks }})
+        </h1>
         <div class="task-list mt1">
           <div
             class="selected-task-line flexrow"
@@ -322,9 +325,9 @@ import Comment from '@/components/widgets/Comment.vue'
 import ComboboxStyled from '@/components/widgets/ComboboxStyled.vue'
 import DeleteModal from '@/components/modals/DeleteModal.vue'
 import EditCommentModal from '@/components/modals/EditCommentModal.vue'
+import PreviewPlayer from '@/components/previews/PreviewPlayer.vue'
 import Spinner from '@/components/widgets/Spinner.vue'
 import TaskTypeName from '@/components/widgets/TaskTypeName.vue'
-import PreviewPlayer from '@/components/previews/PreviewPlayer.vue'
 
 const DEFAULT_PANEL_WIDTH = 400
 

src/components/tops/Topbar.vue

@@ -563,6 +563,7 @@ export default {
       'incrementNotificationCounter',
       'logout',
       'setProduction',
+      'setCurrentSection',
       'setCurrentEpisode',
       'setSupportChat',
       'toggleDarkTheme',
@@ -825,6 +826,8 @@ export default {
   },
 
   watch: {
+    // Most changes occur through the route modification. We need to update
+    // the context when the route changes.
     $route() {
       const productionId = this.$route.params.production_id
       if (productionId) {

src/components/tops/TopbarSectionList.vue

@@ -15,10 +15,10 @@
       </div>
       <div class="select-input" ref="select" v-if="showSectionList">
         <div
+          :key="section.value + '-' + index"
           class="section-line"
-          v-for="(section, index) in sectionList"
           @click="selectSection(section)"
-          :key="section.value + '-' + index"
+          v-for="(section, index) in sectionList"
         >
           <router-link
             class="flexrow"
@@ -39,7 +39,7 @@
 </template>
 
 <script>
-import { mapGetters } from 'vuex'
+import { mapActions, mapGetters } from 'vuex'
 import { ChevronDownIcon } from 'vue-feather-icons'
 
 import { getProductionPath } from '@/lib/path'
@@ -101,6 +101,8 @@ export default {
   },
 
   methods: {
+    ...mapActions(['setCurrentSection', 'setLastProductionScreen']),
+
     selectSection(section) {
       if (section.value !== 'separator') {
         this.$emit('input', section.value)
@@ -125,7 +127,20 @@ export default {
 
   watch: {
     section() {
-      if (this.localSection !== this.section) this.localSection = this.section
+      if (this.localSection !== this.section) {
+        this.localSection = this.section
+      }
+    },
+
+    localSection() {
+      this.setCurrentSection(this.localSection)
+      if (
+        ['assets', 'episodes', 'sequences', 'shots', 'edits'].includes(
+          this.localSection
+        )
+      ) {
+        this.setLastProductionScreen(this.localSection)
+      }
     }
   }
 }