Merge pull request #2035 from frankrousseau/main

[players] Tighten panzoom and add scrub/focus shortcuts

Author: frankrousseau

src/components/players/players/PreviewPlayer.vue

@@ -104,6 +104,7 @@
               :style="{
                 opacity: overlayOpacity
               }"
+              @panzoom-ready="onComparisonPanzoomReady"
               @video-loaded="onComparisonVideoLoaded"
               v-show="isComparing && previewToCompare"
             />
@@ -1121,6 +1122,17 @@ const realignComparisonCanvas = () => {
   loadComparisonAnnotationAtCurrentFrame()
 }
 
+// Push the main viewer's current transform onto the comparison
+// viewer once its panzoom instance is (re)bound. The comparison
+// binds lazily — on the media's load event after a revision swap —
+// so the panzoomTransform watcher (which only fires on changes) had
+// no chance to sync the fresh instance back to the main viewer.
+const onComparisonPanzoomReady = () => {
+  if (!isComparing.value) return
+  const { x, y, scale } = panzoomTransform.value
+  comparisonViewer.value?.setPanZoom(x, y, scale)
+}
+
 const onComparisonVideoLoaded = () => {
   syncComparisonViewer()
   // The comparison canvas position and size are derived from the

src/components/players/viewers/PreviewViewer.vue

@@ -44,6 +44,7 @@
       @duration-changed="duration => $emit('duration-changed', duration)"
       @frame-update="frameNumber => $emit('frame-update', frameNumber)"
       @panzoom-changed="onVideoPanzoomChanged"
+      @panzoom-ready="$emit('panzoom-ready')"
       @play-ended="$emit('play-ended')"
       @size-changed="onVideoSizeChanged"
       @video-end="$emit('video-end')"
@@ -63,6 +64,7 @@
       :preview="preview"
       @loaded="$emit('picture-loaded')"
       @panzoom-changed="onPicturePanzoomChanged"
+      @panzoom-ready="$emit('panzoom-ready')"
       @size-changed="onPictureSizeChanged"
       v-show="isPicture"
     />
@@ -229,6 +231,7 @@ const emit = defineEmits([
   'frame-update',
   'model-loaded',
   'panzoom-changed',
+  'panzoom-ready',
   'picture-loaded',
   'play-ended',
   'size-changed',

src/components/players/viewers/VideoViewer.vue

@@ -120,6 +120,7 @@ const emit = defineEmits([
   'duration-changed',
   'frame-update',
   'panzoom-changed',
+  'panzoom-ready',
   'play-ended',
   'size-changed',
   'video-end',
@@ -440,6 +441,11 @@ const setupPanZoom = () => {
   panzoomInstance.on('zoom', emitPanZoom)
   panzoomInstance.on('pan', emitPanZoom)
   if (!panzoomActive) panzoomInstance.pause()
+  // Tell the parent that a fresh instance exists so the comparison
+  // sync can re-push the main viewer's transform — without this the
+  // comparison stays at identity after a revision swap and drifts
+  // out of sync with the main viewer.
+  emit('panzoom-ready')
 }
 
 const pausePanZoom = () => {