Merge pull request #1491 from frankrousseau/master

Various improvements

src/components/mixins/annotation.js

@@ -1036,6 +1036,7 @@ export const annotationMixin = {
      * Store selected annotations into the clipboard.
      */
     copyAnnotations() {
+      if (!this.fabricCanvas) return
       const activeObject = this.fabricCanvas.getActiveObject()
       if (activeObject) {
         activeObject.clone().then(cloned => {
@@ -1049,10 +1050,15 @@ export const annotationMixin = {
      * Paste annotations stored in the clipboard.
      */
     pasteAnnotations() {
+      if (!this.fabricCanvas) return
       this.fabricCanvas.discardActiveObject()
       const clonedObj = clipboard.pasteAnnotations()
       if (clonedObj._objects) {
-        clonedObj._objects.forEach(obj => this.addObject(obj))
+        clonedObj._objects.forEach(obj => {
+          obj = this.applyGroupChanges(clonedObj, obj)
+          obj.group = null
+          this.addObject(obj)
+        })
         this.fabricCanvas.requestRenderAll()
       } else if (clonedObj._set) {
         this.addObject(clonedObj)
@@ -1061,6 +1067,22 @@ export const annotationMixin = {
       }
     },
 
+    applyGroupChanges(group, obj) {
+      if (obj.group) {
+        const point = new fabric.Point(obj.left, obj.top)
+        const transformedPoint = fabric.util.transformPoint(
+          point,
+          group.calcTransformMatrix()
+        )
+        obj.left = transformedPoint.x
+        obj.top = transformedPoint.y
+        obj.angle += group.angle
+        obj.scaleX *= group.scaleX
+        obj.scaleY *= group.scaleY
+      }
+      return obj
+    },
+
     /*
      * Slowly remove an object. It's used for the laser mode.
      */

src/components/mixins/task.js

@@ -4,6 +4,27 @@ import drafts from '@/lib/drafts'
  * Helpers to display task information
  */
 export const taskMixin = {
+  created() {},
+
+  mounted() {},
+
+  computed: {
+    currentFps() {
+      const task = this.getTask()
+      if (!task) return 25
+      return parseInt(this.productionMap.get(task.project_id).fps || '25')
+    },
+
+    entityFrames() {
+      const task = this.getTask()
+      if (!task || !task.entity) return 0
+      const shot = this.shotMap.get(task.entity.id)
+      if (!shot || !shot.nb_frames) return 0
+
+      return shot.nb_frames
+    }
+  },
+
   methods: {
     getTask() {
       return this.currentTask || this.task

src/components/modals/AddPreviewModal.vue

@@ -64,32 +64,33 @@
         </h3>
         <p class="upload-previews" v-if="forms.length > 0">
           <template v-for="(form, i) in forms">
-            <p class="preview-name" :key="'name-' + i">
+            <p class="preview-name" :key="`name-${i}`">
               {{ form.get('file').name }}
               <span @click="removePreview(form)">x</span>
             </p>
             <img
               alt="uploaded file"
               :src="getURL(form)"
-              :key="i"
+              :key="`preview-file-${i}`"
               v-if="isImage(form)"
             />
             <video
+              :ref="`video-${i}`"
+              :key="`preview-video-${i}`"
+              :src="getURL(form)"
               preload="auto"
               class="is-fullwidth"
               autoplay
               controls
               loop
               muted
-              :src="getURL(form)"
-              :key="i"
               v-else-if="isVideo(form)"
             />
             <iframe
               class="is-fullwidth"
               frameborder="0"
               :src="getURL(form)"
-              :key="i"
+              :key="`preview-pdf-${i}`"
               v-else-if="isPdf(form)"
             />
             <hr :key="'separator-' + i" />
@@ -102,6 +103,11 @@
           </div>
         </div>
 
+        <p class="mb2 mt2 warning-text" v-if="isWrongDuration">
+          <alert-triangle-icon class="icon mr05 warning" />
+          {{ $t('shots.wrong_file_duration') }}
+        </p>
+
         <p class="has-text-right">
           <a
             :class="{
@@ -132,6 +138,8 @@
 <script>
 import { modalMixin } from '@/components/modals/base_modal'
 
+import { AlertTriangleIcon } from 'lucide-vue'
+
 import files from '@/lib/files'
 
 import FileUpload from '@/components/widgets/FileUpload.vue'
@@ -142,6 +150,7 @@ export default {
   mixins: [modalMixin],
 
   components: {
+    AlertTriangleIcon,
     FileUpload
   },
 
@@ -185,12 +194,21 @@ export default {
     title: {
       type: String,
       default: ''
+    },
+    fps: {
+      type: Number,
+      default: 0
+    },
+    expectedFrames: {
+      type: Number,
+      default: 0
     }
   },
 
   data() {
     return {
       forms: [],
+      isWrongDuration: false,
       isDraggingFile: false
     }
   },
@@ -214,6 +232,7 @@ export default {
     reset() {
       this.previewField.reset()
       this.forms = []
+      this.isWrongDuration = false
     },
 
     onPaste(event) {
@@ -268,6 +287,23 @@ export default {
   watch: {
     active() {
       this.reset()
+    },
+
+    forms() {
+      this.$nextTick(() => {
+        this.isWrongDuration = false
+        Object.keys(this.$refs).forEach(key => {
+          const ref = this.$refs[key]
+          if (key.startsWith('video-') && ref[0]) {
+            ref[0].onloadedmetadata = () => {
+              const frames = Math.round(ref[0].duration * this.fps) - 1
+              if (frames !== this.expectedFrames) {
+                this.isWrongDuration = true
+              }
+            }
+          }
+        })
+      })
     }
   },
 

src/components/pages/Shots.vue

@@ -47,7 +47,7 @@
               />
               <button-simple
                 class="flexrow-item"
-                icon="film"
+                icon="file-digit"
                 :title="$t('shots.get_frames_from_previews')"
                 @click="() => (modals.isSetFramesDisplayed = true)"
                 v-if="isCurrentUserManager"
@@ -1152,7 +1152,7 @@ export default {
     currentSection() {
       if (
         (this.isTVSHow && this.displayedSequences.length === 0) ||
-        this.displayedSequences[0].episode_id !== this.currentEpisode.id
+        this.displayedSequences[0]?.episode_id !== this.currentEpisode?.id
       ) {
         this.$refs['shot-search-field'].setValue('')
         this.$store.commit('SET_SHOT_LIST_SCROLL_POSITION', 0)

src/components/pages/Task.vue

@@ -184,7 +184,7 @@
                 :task="task"
                 :task-status="taskStatusForCurrentUser"
                 :preview-forms="previewForms"
-                :fps="parseInt(currentFps)"
+                :fps="currentFps"
                 :revision="currentRevision"
                 @add-comment="addComment"
                 @add-preview="onAddPreviewClicked"
@@ -205,7 +205,7 @@
                   <comment
                     :key="comment.id"
                     :comment="comment"
-                    :fps="parseInt(currentFps)"
+                    :fps="currentFps"
                     :frame="currentFrame"
                     :is-checkable="
                       user.id === comment.person?.id ||
@@ -256,6 +256,8 @@
         :is-loading="loading.addPreview"
         :is-error="errors.addPreview"
         :form-data="addPreviewFormData"
+        :fps="currentFps"
+        :expected-frames="entityFrames"
         :title="
           task
             ? `${task.entity_name} / ${taskTypeMap.get(task.task_type_id).name}`
@@ -288,7 +290,7 @@
         :is-error="errors.editComment"
         :comment-to-edit="commentToEdit"
         :team="currentTeam"
-        :fps="parseInt(currentFps)"
+        :fps="currentFps"
         :revision="currentRevision"
         @confirm="confirmEditTaskComment"
         @cancel="onCancelEditComment"
@@ -447,6 +449,7 @@ export default {
       'personMap',
       'productionMap',
       'route',
+      'shotMap',
       'taskEntityPreviews',
       'taskStatus',
       'taskStatusForCurrentUser',
@@ -528,10 +531,6 @@ export default {
       )
     },
 
-    currentFps() {
-      return this.productionMap.get(this.task?.project_id)?.fps || '25'
-    },
-
     currentRevision() {
       return this.currentPreview?.revision || 0
     },

src/components/sides/Sidebar.vue

@@ -171,7 +171,7 @@
             </p>
             <p @click="toggleSidebar()">
               <router-link :to="{ name: 'bots' }">
-                <kitsu-icon class="nav-icon" name="bot" />
+                <bot-icon class="nav-icon" />
                 {{ $t('bots.title') }}
               </router-link>
             </p>
@@ -201,13 +201,14 @@
 
 <script>
 import { mapGetters, mapActions } from 'vuex'
-import { BuildingIcon, GlobeIcon } from 'lucide-vue'
+import { BotIcon, BuildingIcon, GlobeIcon } from 'lucide-vue'
 
 import KitsuIcon from '@/components/widgets/KitsuIcon.vue'
 
 export default {
   name: 'sidebar',
   components: {
+    BotIcon,
     BuildingIcon,
     GlobeIcon,
     KitsuIcon

src/components/sides/TaskInfo.vue

@@ -145,7 +145,7 @@
                   :preview-forms="previewForms"
                   :is-error="errors.addComment"
                   :is-max-retakes-error="errors.addCommentMaxRetakes"
-                  :fps="parseInt(currentFps)"
+                  :fps="currentFps"
                   :frame="currentFrame || currentFrameRaw"
                   :revision="currentRevision"
                   :is-movie="isMoviePreview"
@@ -171,7 +171,7 @@
                     <comment
                       :key="`comment-${comment.id}`"
                       :comment="comment"
-                      :fps="parseInt(currentFps)"
+                      :fps="currentFps"
                       :frame="currentFrame || currentFrameRaw"
                       :is-change="isStatusChange(index)"
                       :is-checkable="
@@ -221,6 +221,8 @@
           :active="modals.addPreview"
           :is-loading="loading.addPreview"
           :is-error="errors.addPreview"
+          :expected-frames="entityFrames"
+          :fps="currentFps"
           @cancel="closeAddPreviewModal"
           @confirm="confirmAddPreviewModal"
         />
@@ -239,7 +241,7 @@
         <edit-comment-modal
           :active="modals.editComment"
           :comment-to-edit="commentToEdit"
-          :fps="parseInt(currentFps)"
+          :fps="currentFps"
           :frame="currentFrame || currentFrameRaw"
           :is-loading="loading.editComment"
           :is-error="errors.editComment"
@@ -480,6 +482,7 @@ export default {
       'selectedEdits',
       'selectedShots',
       'selectedTasks',
+      'shotMap',
       'nbSelectedValidations',
       'taskEntityPreviews',
       'taskTypeMap',
@@ -609,7 +612,7 @@ export default {
     },
 
     currentFps() {
-      return this.productionMap.get(this.task.project_id).fps || '25'
+      return parseInt(this.productionMap.get(this.task.project_id).fps || '25')
     },
 
     currentRevision() {

src/components/widgets/ButtonSimple.vue

@@ -45,6 +45,12 @@
     <codepen-icon class="icon" v-else-if="icon == 'codepen'" />
     <link-icon class="icon" v-else-if="icon == 'link'" />
     <clock-icon class="icon" v-else-if="icon == 'clock'" />
+    <file-digit
+      stroke-width="1.2"
+      size="20"
+      class="icon"
+      v-else-if="icon == 'file-digit'"
+    />
     <kitsu-icon
       class="icon"
       :name="icon"
@@ -73,6 +79,7 @@ import {
   CornerLeftDownIcon,
   CornerRightDownIcon,
   DownloadIcon,
+  FileDigit,
   EditIcon,
   Edit2Icon,
   GlobeIcon,
@@ -116,6 +123,7 @@ export default {
     DownloadIcon,
     EditIcon,
     Edit2Icon,
+    FileDigit,
     FilmIcon,
     GlobeIcon,
     GridIcon,

src/locales/en.js

@@ -1387,6 +1387,7 @@ export default {
     sequences: 'Sequences',
     tasks: 'Shot Tasks',
     title: 'Shots',
+    wrong_file_duration: 'One of the upldoaded video file duration doesn\'t match the expected duration of the current shot.',
     fields: {
       description: 'Description',
       nb_frames: 'Frames',