Implements 'Jump frame by frame' in video

resources/assets/js/videos/components/videoScreen.vue

@@ -24,20 +24,20 @@
                     ></control-button>
             </div>
             <div class="btn-group">
-                <control-button
-                    v-if="enableJumpByFrame"
-                    :disabled="seeking"
-                    icon="fa-caret-square-left"
-                    title="Previous frame 𝗟𝗲𝗳𝘁 𝗮𝗿𝗿𝗼𝘄"
-                    v-on:click="emitPreviousFrame"
-                    ></control-button>
                 <control-button
                     v-if="jumpStep!=0"
                     :disabled="seeking"
                     icon="fa-backward"
                     :title="jumpBackwardMessage"
                     @click="jumpBackward"
                     ></control-button>
+                <control-button
+                    v-if="enableJumpByFrame"
+                    :disabled="seeking"
+                    icon="fa-caret-square-left"
+                    title="Previous frame 𝗟𝗲𝗳𝘁 𝗮𝗿𝗿𝗼𝘄"
+                    v-on:click="emitPreviousFrame"
+                    ></control-button>
                 <control-button
                     v-if="playing"
                     icon="fa-pause"
@@ -555,16 +555,6 @@ export default {
             this.setPaused(true);
             this.resetInteractionMode();
         },
-        emitPreviousFrame() {
-            this.$emit('seek', this.video.currentTime, true);
-            if(!this.seeking)
-                this.showPreviousFrame();
-         },
-        emitNextFrame() {
-            this.$emit('seek', this.video.currentTime, true);
-            if(!this.seeking)
-                this.showNextFrame();
-        },
         adaptKeyboardShortcuts() {
             if(this.enableJumpByFrame) {
                 Keyboard.off('ArrowRight', this.emitNext, 0, this.listenerSet);

resources/assets/js/videos/components/videoScreen/videoPlayback.vue

@@ -24,6 +24,8 @@ export default {
             // Allow a maximum of 100x magnification. More cannot be represented in the
             // URL parameters.
             minResolution: 0.01,
+            // parameter tracking seeking state specific for frame jump, needed because looking for seeking directly leads to error
+            seekingFrame: this.seeking,
         };
     },
     methods: {
@@ -153,7 +155,23 @@ export default {
         handleSeeked() {
             this.renderVideo(true);
         },
-        // 3 next methods are a workaround to get previous and next frames, adapted from here: https://github.com/angrycoding/requestVideoFrameCallback-prev-next/tree/main
+        // 5 next methods are a workaround to get previous and next frames, adapted from here: https://github.com/angrycoding/requestVideoFrameCallback-prev-next/tree/main
+        async emitPreviousFrame() {
+            if(this.video.currentTime == 0 || this.seekingFrame) return;
+            this.$emit('start-seeking');
+            this.seekingFrame = true;
+            await this.showPreviousFrame();
+            this.$emit('stop-seeking');
+            this.seekingFrame = false;
+        },
+        async emitNextFrame() {
+            if(this.video.duration - this.video.currentTime == 0 || this.seekingFrame) return;
+            this.$emit('start-seeking');
+            this.seekingFrame = true;
+            await this.showNextFrame();
+            this.$emit('stop-seeking');
+            this.seekingFrame = false;
+        },
         frameInfoCallback() {
             let promise = new Vue.Promise((resolve) => {
                 this.video.requestVideoFrameCallback((now, metadata) => {
@@ -163,34 +181,46 @@ export default {
             return promise;
         },
         async showPreviousFrame() {
-            // force rerender
-            this.video.currentTime += 1;
-            this.video.currentTime -= 1;
+            try {
+                // force rerender adapting step on begining or end of video
+                let step = 1;
+                if(this.video.currentTime < 1) {step = this.video.currentTime;}
+                if(this.video.duration - this.video.currentTime < 1) {step = this.video.duration - this.video.currentTime;}
+                await (this.video.currentTime += step);
+                await (this.video.currentTime -= step);
 
-            // get current frame time
-            const firstMetadata = await this.frameInfoCallback();
-
-            for (;;) {
-                // now adjust video's current time until actual frame time changes
-                this.video.currentTime -= 0.01;
-                let metadata = await this.frameInfoCallback();
-                if (metadata.mediaTime !== firstMetadata.mediaTime) break;
-            }
+                // get current frame time
+                const firstMetadata = await this.frameInfoCallback();
+                for (;;) {
+                    // now adjust video's current time until actual frame time changes
+                    this.video.currentTime -= 0.01;
+                    // check that we are not at first frame, otherwise we'll end up in infinte loop
+                    if (this.video.currentTime == 0) break;
+                    const metadata = await this.frameInfoCallback();
+                    if (metadata.mediaTime !== firstMetadata.mediaTime) break;
+                }
+            } catch(e) {console.error(e)}
         },
         async showNextFrame() {
-            // force rerender
-            this.video.currentTime += 1;
-            this.video.currentTime -= 1;
-
-            // get current frame time
-            const firstMetadata = await this.frameInfoCallback();
+            try {
+                // force rerender adapting step on begining or end of video
+                let step = 1;
+                if(this.video.currentTime < 1) {step = this.video.currentTime;}
+                if(this.video.duration - this.video.currentTime < 1) {step = this.video.duration - this.video.currentTime;}
+                await (this.video.currentTime += step);
+                await (this.video.currentTime -= step);
 
-            for (;;) {
-                // now adjust video's current time until actual frame time changes
-                this.video.currentTime += 0.01;
-                let metadata = await this.frameInfoCallback();
-                if (metadata.mediaTime !== firstMetadata.mediaTime) break;
-            }
+                // get current frame time
+                const firstMetadata = await this.frameInfoCallback();
+                for (;;) {
+                    // now adjust video's current time until actual frame time changes
+                    this.video.currentTime += 0.01;
+                    // check that we are not at last frame, otherwise we'll end up in infinte loop
+                    if (this.video.duration - this.video.currentTime == 0) break;
+                    const metadata = await this.frameInfoCallback();
+                    if (metadata.mediaTime !== firstMetadata.mediaTime) break;
+                }
+            } catch(e) {console.error(e)}
         },
         // Methods to jump back and forward in video. Step is given by parameter jumpStep.
         jumpBackward() {

resources/assets/js/videos/videoContainer.vue

@@ -204,6 +204,28 @@ export default {
 
             return promise;
         },
+        startSeeking() {
+            if (this.seeking) {
+                return Vue.Promise.resolve();
+            }
+            let promise = new Vue.Promise((resolve, reject) => {
+                this.video.addEventListener('seeking', resolve);
+                this.video.addEventListener('error', reject);
+            });
+            this.seeking = true;
+            return promise;
+        },
+        stopSeeking() {
+            if (!this.seeking) {
+                return Vue.Promise.resolve();
+            }
+            let promise = new Vue.Promise((resolve, reject) => {
+                this.video.addEventListener('seeked', resolve);
+                this.video.addEventListener('error', reject);
+            });
+            this.seeking = false;
+            return promise;
+        },
         selectAnnotation(annotation, time, shift) {
             if (this.attachingLabel) {
                 this.attachAnnotationLabel(annotation);

resources/views/manual/tutorials/videos/shortcuts.blade.php

@@ -17,7 +17,7 @@
             </tbody>
             <tbody>
                 <tr>
-                    <td style="text-align:center">If <a href="{{route('manual-tutorials', ['videos', 'sidebar'])}}#jump-by-frame">Jump by frame</a> is disabled</td>
+                    <td colspan="2">If <a href="{{route('manual-tutorials', ['videos', 'sidebar'])}}#jump-by-frame">Jump by frame</a> is disabled</td>
                 </tr>
             </tbody>
             <tbody>
@@ -32,7 +32,7 @@
             </tbody>
             <tbody>
                 <tr>
-                    <td style="text-align:center">If <a href="{{route('manual-tutorials', ['videos', 'sidebar'])}}#jump-by-frame">Jump by frame</a> is enabled</td>
+                    <td colspan="2">If <a href="{{route('manual-tutorials', ['videos', 'sidebar'])}}#jump-by-frame">Jump by frame</a> is enabled</td>
                 </tr>
             </tbody>
             <tbody>

resources/views/manual/tutorials/videos/sidebar.blade.php

@@ -78,7 +78,7 @@
 
         <p>
             <a name="jump-by-frame"></a> The jump by frame switch allows you to navigate frame by frame (forward and backward) in the video. Note that this is an experimental feature as it is only available in Chrome and may not always give the right frame, so please use it with caution.
-            <br>When the feature is enabled, new buttons will appear in the navigation bar and keyboard shortcuts are modified: use <button class="btn btn-default btn-xs"><i class="fa fa-arrow-left"></i></i></button> / <button class="btn btn-default btn-xs"><i class="fa fa-arrow-right"></i></i></button> to switch frames and 𝗦𝗵𝗶𝗳𝘁 + <button class="btn btn-default btn-xs"><i class="fa fa-arrow-left"></i></i></button> / <button class="btn btn-default btn-xs"><i class="fa fa-arrow-right"></i></i></button> to switch videos. When the feature is disabled, use old shortcuts to switch videos.
+            <br>When the feature is enabled, new buttons will appear in the navigation bar and keyboard shortcuts are modified: use <kbd>Arrow left</kbd> / <kbd>Arrow right</kbd> to switch frames and <kbd>Shift</kbd> + <kbd>Arrow left</kbd> / <kbd>Arrow right</kbd> to switch videos. When the feature is disabled, use old shortcuts to switch videos.
         </p>
 
     </div>

resources/views/videos/show/content.blade.php

@@ -63,6 +63,8 @@
       v-on:attaching-active="handleAttachingLabelActive"
       v-on:swapping-active="handleSwappingLabelActive"
       v-on:seek="seek"
+      v-on:start-seeking="startSeeking"
+      v-on:stop-seeking="stopSeeking"
       v-on:is-invalid-shape="handleInvalidShape"
       ></video-screen>
 <video-timeline