Merge pull request #2029 from frankrousseau/main

[players] Frame and annotation fixes, profile 2FA card, doc cleanup

Author: frankrousseau

CONTRIBUTING.md

@@ -47,9 +47,10 @@ If you find any issue with Kitsu
 
 ## Translations
 
-If you want to contribute to translations, we have an account on the POEditor platform that you can use to participate.
-
-[Contribute to the translation](https://poeditor.com/join/project?hash=fpUejpWDVo)
+The source strings live in `src/locales/en.js`. The other locale files in
+`src/locales/` are kept in sync with it. If you spot a missing or incorrect
+translation, open an issue or a pull request editing the relevant file in
+`src/locales/`.
 
 
 ## Improve the documentation

docs/translation.md

@@ -3,11 +3,11 @@
 
 ## Add a language file
 
-1. Get the json file from POEditor.
-2. Store it in `src/locales`.
-3. Add corresponding entry in the `src/locales/index.js`  file.
-4. Add an entry in the profile file at the option level. 
-   Be careful, you must use a locale name available in Python Babel or it will 
+1. Create a `<lang>.json` file in `src/locales`, mirroring the structure of
+   `en.js` (the source of truth) or an existing locale.
+2. Add the corresponding entry in the `src/locales/index.js` file.
+3. Add an entry in the profile file at the option level.
+   Be careful, you must use a locale name available in Python Babel or it will
    break the person entry.
 
 

src/components/mixins/task.js

@@ -8,6 +8,13 @@ export const taskMixin = {
     currentFps() {
       const task = this.getTask()
       if (!task) return 25
+      // An entity can override the production fps via data.fps; use it so
+      // the player builds its frame model on the rate the video was
+      // actually rendered at (otherwise frames get duplicated/dropped).
+      // The entity may be a Shot, Edit, Sequence, Episode or Asset, each
+      // in its own store map — task.entity is only { id } here.
+      const entityFps = parseFloat(this.getTaskEntity(task)?.data?.fps)
+      if (entityFps) return entityFps
       return parseInt(this.productionMap.get(task.project_id)?.fps) || 25
     },
 
@@ -26,6 +33,19 @@ export const taskMixin = {
       return this.currentTask || this.task
     },
 
+    getTaskEntity(task) {
+      const getterByType = {
+        Shot: 'shotMap',
+        Episode: 'episodeMap',
+        Sequence: 'sequenceMap',
+        Edit: 'editMap',
+        Asset: 'assetMap'
+      }
+      const getterName = getterByType[task?.entity_type_name]
+      if (!getterName || !task?.entity?.id) return null
+      return this.$store.getters[getterName]?.get(task.entity.id) || null
+    },
+
     getComments() {
       return this.currentTaskComments || this.taskComments
     },

src/components/modals/ShortcutModal.vue

@@ -112,6 +112,8 @@ const shortcutGroups = computed(() => [
     icon: markRaw(Pencil),
     shortcuts: [
       { keys: ['d'], text: t('keyboard.draw') },
+      { keys: ['Shift', 'Mouse Drag'], text: t('keyboard.straight_line') },
+      { keys: ['Ctrl', 'Mouse Drag'], text: t('keyboard.constant_width') },
       { keys: ['Ctrl', 'z'], text: t('keyboard.undo') },
       { keys: ['Alt', 'r'], text: t('keyboard.redo') },
       { keys: ['Ctrl', 'c'], text: t('keyboard.copy_annotation') },

src/components/pages/Profile.vue

@@ -156,13 +156,10 @@
           type="password"
           v-model="passwordForm.password2"
         />
+      </card>
 
-        <div class="two-factor">
-          <h3 class="card-subtitle">
-            {{ $t('profile.two_factor_authentication.title') }}
-          </h3>
-          <two-factor-authentication-setup />
-        </div>
+      <card :title="$t('profile.two_factor_authentication.title')">
+        <two-factor-authentication-setup />
       </card>
     </div>
 
@@ -435,13 +432,6 @@ useHead({ title: computed(() => `${t('profile.title')} - Kitsu`) })
   }
 }
 
-.card-subtitle {
-  color: var(--text);
-  font-size: 1rem;
-  font-weight: 600;
-  margin: 1.5rem 0 0.75rem;
-}
-
 .grid-two {
   display: grid;
   gap: 0 1rem;
@@ -458,12 +448,6 @@ useHead({ title: computed(() => `${t('profile.title')} - Kitsu`) })
   margin-top: 0.5rem;
 }
 
-.two-factor {
-  border-top: 1px solid var(--border);
-  margin-top: 1.5rem;
-  padding-top: 0.5rem;
-}
-
 @media screen and (max-width: 768px) {
   .profile-content {
     margin: 1.5rem auto;

src/components/pages/Task.vue

@@ -173,6 +173,7 @@
                   ref="preview-player"
                   :entity-preview-files="taskEntityPreviews"
                   :extra-wide="true"
+                  :fps="currentFps"
                   :last-preview-files="taskPreviews || []"
                   :link="currentPreviewComment?.links?.[0]"
                   :previews="currentPreview.previews"

src/components/players/players/PreviewPlayer.vue

@@ -41,6 +41,7 @@
               class="preview-viewer"
               :current-frame="currentFrame"
               :default-height="defaultHeight"
+              :fps="fps"
               :is-big="big"
               :is-comparing="isComparing && isComparisonEnabled"
               :is-comparison-overlay="isComparisonOverlay"
@@ -76,6 +77,7 @@
               name="comparison-preview-viewer"
               :current-frame="currentFrame"
               :default-height="defaultHeight"
+              :fps="fps"
               :is-big="big"
               :is-comparing="isComparing && isComparisonEnabled"
               :is-full-screen="fullScreen"
@@ -475,6 +477,10 @@ const props = defineProps({
     type: Boolean,
     default: false
   },
+  fps: {
+    type: Number,
+    default: null
+  },
   isAssigned: {
     type: Boolean,
     default: false
@@ -752,7 +758,9 @@ const defaultHeight = computed(() => {
   return screen.width > 1300 && (!props.light || props.big) ? bigHeight : 200
 })
 
-const fps = computed(() => parseFloat(currentProduction.value?.fps) || 25)
+const fps = computed(
+  () => props.fps || parseFloat(currentProduction.value?.fps) || 25
+)
 
 const frameDuration = computed(
   () => Math.round((1 / fps.value) * 10000) / 10000
@@ -1013,20 +1021,23 @@ const goNextFrame = () => {
 }
 
 const goPreviousDrawing = () => {
-  const time = getPreviousAnnotationTime(currentTimeRaw.value)
-  jumpToAnnotationFrame(time)
+  jumpToAnnotationFrame(getPreviousAnnotationTime(currentTimeRaw.value))
 }
 
 const goNextDrawing = () => {
-  const time = getNextAnnotationTime(currentTimeRaw.value)
-  jumpToAnnotationFrame(time)
+  jumpToAnnotationFrame(getNextAnnotationTime(currentTimeRaw.value))
 }
 
-const jumpToAnnotationFrame = time => {
-  if (time) {
-    const annotationTime = time.frame - 1
+const jumpToAnnotationFrame = annotation => {
+  if (annotation) {
+    // Jump by the annotation's time, not its stored frame. The find and
+    // the on-screen display both key off time, whereas annotation.frame
+    // can be stale or off by a frame (sometimes even a zero-padded
+    // string), which landed 1-2 frames past the drawing and lost the
+    // next step.
+    const frame = Math.round(annotation.time / frameDuration.value)
     clearCanvas()
-    setCurrentFrame(annotationTime)
+    setCurrentFrame(frame)
     syncComparisonViewer()
   }
 }

src/components/players/viewers/PreviewViewer.vue

@@ -26,6 +26,7 @@
     <video-viewer
       ref="videoViewer"
       class="video-viewer"
+      :fps="fps"
       :name="name"
       :big="isBig"
       :default-height="defaultHeight"
@@ -153,6 +154,10 @@ const props = defineProps({
     type: Number,
     default: 0
   },
+  fps: {
+    type: Number,
+    default: null
+  },
   isBig: {
     type: Boolean,
     default: false

src/components/players/viewers/VideoViewer.vue

@@ -53,6 +53,10 @@ const props = defineProps({
     type: Number,
     default: 0
   },
+  fps: {
+    type: Number,
+    default: null
+  },
   fullScreen: {
     type: Boolean,
     default: false
@@ -143,7 +147,9 @@ const video = computed(() => movie.value)
 
 const extension = computed(() => (props.preview ? props.preview.extension : ''))
 
-const fps = computed(() => parseFloat(currentProduction.value?.fps) || 25)
+const fps = computed(
+  () => props.fps || parseFloat(currentProduction.value?.fps) || 25
+)
 
 const frameDuration = computed(
   () => Math.round((1 / fps.value) * 10000) / 10000
@@ -203,8 +209,17 @@ const getLastPushedCurrentTime = () => {
   }
 }
 
+// Seek to the middle of the target frame rather than its boundary.
+// frame / fps lands right on the edge between two frames, and the rounding
+// in frameDuration (0.0833 instead of 0.083333… at 12fps) drifts ~1ms per
+// frame, so past ~frame 30 the seek tips into the previous frame and the
+// player renders a duplicate. Half a frame of slack dwarfs any rounding
+// error, so the correct frame is always decoded — and fps (unrounded) is
+// used so there is no drift to begin with.
+const frameToTime = frame => (frame + 0.5) / fps.value
+
 const setCurrentFrame = frame => {
-  setCurrentTime(frame * frameDuration.value)
+  setCurrentTime(frameToTime(frame))
 }
 
 const setCurrentTimeRaw = currentTime => {
@@ -218,7 +233,7 @@ const runSetCurrentTime = () => {
   } else {
     const currentTime = currentTimeCalls.shift()
     if (video.value.currentTime !== currentTime) {
-      video.value.currentTime = Number(currentTime.toPrecision(4)) + 0.001
+      video.value.currentTime = currentTime
     }
     setTimeout(() => {
       runSetCurrentTime()
@@ -313,7 +328,7 @@ const play = () => {
 const pause = () => {
   video.value.pause()
   clearInterval(playLoop)
-  video.value.currentTime = props.currentFrame * frameDuration.value
+  video.value.currentTime = frameToTime(props.currentFrame)
   emit('frame-update', props.currentFrame)
 }
 
@@ -324,15 +339,15 @@ const toggleMute = () => {
 const goPreviousFrame = () => {
   const nextFrame = props.currentFrame - 1
   if (nextFrame < 0) return
-  video.value.currentTime = nextFrame * frameDuration.value + 0.001
+  video.value.currentTime = frameToTime(nextFrame)
   emit('frame-update', nextFrame)
   return nextFrame
 }
 
 const goNextFrame = () => {
   const nextFrame = props.currentFrame + 1
   if (nextFrame >= props.nbFrames) return
-  video.value.currentTime = nextFrame * frameDuration.value + 0.001
+  video.value.currentTime = frameToTime(nextFrame)
   emit('frame-update', nextFrame)
   return nextFrame
 }

src/locales/en.js

@@ -622,6 +622,8 @@ export default {
     copy_annotation: 'Copy selected annotation',
     paste_annotation: 'Paste annotation',
     pan_image: 'Pan the image',
+    straight_line: 'Draw a straight line',
+    constant_width: 'Draw at a constant width (no pressure)',
     move_entity_left: 'Move selected entity to the left',
     move_entity_right: 'Move selected entity to the right'
   },