Merge pull request #2022 from cgwire/player

[players] Annotation snapshot polish and player bug fixes

Author: frankrousseau

src/components/modals/AddAttachmentModal.vue

@@ -27,31 +27,41 @@
           {{ $t('tasks.comment_image') }}
         </h1>
 
-        <div class="flexrow buttons attachment-modal-buttons">
+        <div class="attachment-upload-zone">
           <file-upload
             ref="fileField"
-            class="flexrow-item"
             :label="$t('main.select_file')"
             :accept="extensions"
             :multiple="true"
             :is-primary="false"
             @fileselected="onFileSelected"
             hide-file-names
           />
-          <p class="flexrow-item mt1" v-if="isMovie">
-            {{ $t('main.or') }}
-          </p>
-          <p class="flexrow-item" v-if="isMovie">
-            <button
-              :class="{
-                button: true,
-                'is-loading': isAnnotationLoading
-              }"
-              @click="$emit('add-snapshots')"
-            >
-              {{ $t('main.attach_snapshots') }}
-            </button>
-          </p>
+        </div>
+
+        <div class="snapshot-actions" v-if="isMovie || isPicture">
+          <button
+            :class="{
+              button: true,
+              'snapshot-button': true,
+              'is-loading': snapshotLoading === 'standard'
+            }"
+            :disabled="snapshotLoading && snapshotLoading !== 'standard'"
+            @click="$emit('add-snapshots')"
+          >
+            {{ $t('main.attach_snapshots') }}
+          </button>
+          <button
+            :class="{
+              button: true,
+              'snapshot-button': true,
+              'is-loading': snapshotLoading === 'label'
+            }"
+            :disabled="snapshotLoading && snapshotLoading !== 'label'"
+            @click="$emit('add-snapshots-with-label')"
+          >
+            {{ $t('main.attach_snapshots_with_label') }}
+          </button>
         </div>
 
         <h3 class="subtitle has-text-centered" v-if="forms.length > 0">
@@ -118,16 +128,24 @@ const props = defineProps({
   isError: { type: Boolean, default: false },
   isLoading: { type: Boolean, default: false },
   isMovie: { type: Boolean, default: false },
+  isPicture: { type: Boolean, default: false },
   title: { type: String, default: '' }
 })
 
-const emit = defineEmits(['add-snapshots', 'cancel', 'confirm'])
+const emit = defineEmits([
+  'add-snapshots',
+  'add-snapshots-with-label',
+  'cancel',
+  'confirm'
+])
 
 useModal(toRef(props, 'active'), emit)
 
 const fileField = ref(null)
 const forms = ref([])
-const isAnnotationLoading = ref(false)
+// Tracks which snapshot button is currently extracting:
+// 'standard', 'label', or null when idle.
+const snapshotLoading = ref(null)
 const isDraggingFile = ref(false)
 
 const onFileSelected = newForms => {
@@ -195,11 +213,11 @@ onBeforeUnmount(() => {
 
 defineExpose({
   addFiles,
-  showAnnotationLoading: () => {
-    isAnnotationLoading.value = true
+  showAnnotationLoading: (kind = 'standard') => {
+    snapshotLoading.value = kind
   },
   hideAnnotationLoading: () => {
-    isAnnotationLoading.value = false
+    snapshotLoading.value = null
   }
 })
 </script>
@@ -264,6 +282,57 @@ h3.subtitle {
   flex-wrap: wrap;
 }
 
+.attachment-upload-zone {
+  border: 2px dashed var(--border);
+  border-radius: 10px;
+  margin: 1em 0;
+  padding: 1.5em;
+  text-align: center;
+  transition:
+    border-color 0.2s ease,
+    background 0.2s ease;
+
+  &:hover {
+    background: var(--background-hover, rgba(255, 255, 255, 0.03));
+    border-color: var(--background-selectable, $purple-strong);
+  }
+
+  // Strip Bulma's button background off the file-upload label so the
+  // dropzone's outline is the single visual container — the text sits
+  // directly on the dashed area, no inner button chip.
+  :deep(.dropbox) {
+    background: transparent;
+    border: 0;
+    justify-content: center;
+    padding: 0;
+  }
+
+  :deep(.dropbox label.button) {
+    background: transparent;
+    border: 0;
+    color: var(--text);
+    cursor: pointer;
+    font-weight: 500;
+
+    &:hover {
+      background: transparent;
+      color: var(--background-selectable, $purple-strong);
+    }
+  }
+}
+
+.snapshot-actions {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5em;
+  margin-bottom: 1em;
+}
+
+.snapshot-button {
+  width: 100%;
+  margin-left: 0;
+}
+
 .drop-mask {
   align-items: center;
   background: rgba(0.1, 0, 0, 0.5);

src/components/pages/Task.vue

@@ -257,6 +257,7 @@
                 :is-max-retakes-error="errors.addCommentMaxRetakes"
                 :is-loading="loading.addComment"
                 :is-movie="isMovie"
+                :is-picture="isPicture"
                 :team="currentTeam"
                 :task-types="currentTaskTypes"
                 :task="task"
@@ -269,6 +270,9 @@
                 @file-drop="selectFile"
                 @clear-files="clearPreviewFiles"
                 @annotation-snapshots-requested="extractAnnotationSnapshots"
+                @annotation-snapshots-with-label-requested="
+                  extractAnnotationSnapshots(true)
+                "
                 @remove-preview="onPreviewFormRemoved"
                 v-if="isCommentingAllowed"
               />
@@ -630,6 +634,10 @@ export default {
       return this.extension === 'mp4'
     },
 
+    isPicture() {
+      return ['png', 'gif'].includes(this.extension)
+    },
+
     isPreviewPlayerReadOnly() {
       if (this.task) {
         if (this.isCurrentUserManager || this.isCurrentUserClient) {
@@ -1543,10 +1551,13 @@ export default {
       this.taskPreviews = this.getCurrentTaskPreviews()
     },
 
-    async extractAnnotationSnapshots() {
-      this.$refs['add-comment'].showAnnotationLoading()
-      const files =
-        await this.$refs['preview-player'].extractAnnotationSnapshots()
+    async extractAnnotationSnapshots(withLabel = false) {
+      this.$refs['add-comment'].showAnnotationLoading(
+        withLabel ? 'label' : 'standard'
+      )
+      const files = await this.$refs[
+        'preview-player'
+      ].extractAnnotationSnapshots({ withLabel })
       this.$refs['add-comment'].setAnnotationSnapshots(files)
       this.$refs['add-comment'].hideAnnotationLoading()
       return files

src/components/players/annotations/AnnotationCanvas.vue

@@ -90,6 +90,11 @@ const updateBounds = () => {
     canvas.setDimensions({ width: mediaRect.width, height: mediaRect.height })
     emit('resized', { width: mediaRect.width, height: mediaRect.height })
   }
+  // Refresh fabric's cached canvas offset. setDimensions doesn't
+  // always trigger it on its own, and a stale offset shifts pointer
+  // coordinates (so freshly drawn strokes land at the wrong y) until
+  // any window resize forces a recalculation.
+  canvas?.calcOffset()
 }
 
 const observe = el => el && resizeObserver?.observe(el)
@@ -202,12 +207,11 @@ defineExpose({
 .annotation-clip {
   position: absolute;
   z-index: 500;
-  // Clip on all sides so a zoomed / panned overlay stays within the
-  // media bounds — otherwise strokes spill onto the header above and
-  // the playback / progress bars below.
-  clip-path: inset(0);
-  // The wrapper exists only to clip — never to capture events. The
-  // inner overlay decides for itself whether to be interactive.
+  // Clipping is delegated to the player's outer container
+  // (PreviewPlayer's .preview-container, PlaylistPlayer's
+  // .video-container — both with overflow: hidden) so the overlay
+  // can extend with the panzoom transform without being cropped to
+  // the media's un-zoomed bounds.
   pointer-events: none;
 }
 

src/components/players/bars/PlayerPlaybackBar.vue

@@ -30,7 +30,7 @@
 
   <div class="left flexrow" v-if="isMovie && !compact">
     <span
-      class="flexrow-item time-indicator"
+      class="flexrow-item time-indicator current-time"
       :title="$t('playlists.actions.current_time')"
     >
       {{ currentTime }}
@@ -194,7 +194,15 @@ const volume = defineModel('volume', { default: 50 })
 <style lang="scss" scoped>
 .time-indicator {
   color: $light-grey;
-  padding-left: 0.8em;
+  padding-left: 0.2em;
   margin-right: 0;
 }
+
+// Hide the timecode when PreviewPlayer is narrow — the frame counter
+// next to it carries enough position info on its own.
+@container preview-player (max-width: 600px) {
+  .current-time {
+    display: none;
+  }
+}
 </style>