diff --git a/src/components/players/players/PreviewPlayer.vue b/src/components/players/players/PreviewPlayer.vue index ab6a82e814..7c18939fef 100644 --- a/src/components/players/players/PreviewPlayer.vue +++ b/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 diff --git a/src/components/players/viewers/PreviewViewer.vue b/src/components/players/viewers/PreviewViewer.vue index 5e9d1791eb..e843228d70 100644 --- a/src/components/players/viewers/PreviewViewer.vue +++ b/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', diff --git a/src/components/players/viewers/VideoViewer.vue b/src/components/players/viewers/VideoViewer.vue index f463bc05f4..d92e8fefaf 100644 --- a/src/components/players/viewers/VideoViewer.vue +++ b/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 = () => {