Implement frame-to-frame video navigation

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

@@ -15,13 +15,15 @@ export default {
                 'showLabelTooltip',
                 'showMousePosition',
                 'showProgressIndicator',
+                'jumpStep',
             ],
             annotationOpacity: 1,
             showMinimap: true,
             autoplayDraw: 0,
             showLabelTooltip: false,
             showMousePosition: false,
             playbackRate: 1.0,
+            jumpStep: 5.0,
             showProgressIndicator: true,
         };
     },
@@ -82,6 +84,11 @@ export default {
                 this.$emit('update', 'playbackRate', value);
             }
         },
+        jumpStep(value) {
+            value = parseFloat(value);
+            this.$emit('update', 'jumpStep', value);
+            Settings.set('jumpStep', value);
+        },
         showProgressIndicator(show) {
             this.$emit('update', 'showProgressIndicator', show);
             Settings.set('showProgressIndicator', show);

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

@@ -11,12 +11,24 @@
             :position="mousePosition"
             ></label-tooltip>
         <div class="controls">
+            <div class="btn-group"
+                v-if="showPrevNext">
+                 <control-button
+                    icon="fa-chevron-left"
+                    title="Previous video"
+                    @click="emitPrevious"
+                    ></control-button>
+            </div>     
             <div class="btn-group">
                  <control-button
-                    v-if="showPrevNext"
+                    icon="fa-backward"
+                    title="Rewind video by jump step"
+                    @click="jumpBackward"
+                    ></control-button>
+                <control-button
                     icon="fa-step-backward"
-                    title="Previous video 𝗟𝗲𝗳𝘁 𝗮𝗿𝗿𝗼𝘄"
-                    @click="emitPrevious"
+                    title="Previous frame 𝗟𝗲𝗳𝘁 𝗮𝗿𝗿𝗼𝘄"
+                    @click="showPreviousFrame"
                     ></control-button>
                 <control-button
                     v-if="playing"
@@ -33,9 +45,21 @@
                     @click="play"
                     ></control-button>
                 <control-button
-                    v-if="showPrevNext"
                     icon="fa-step-forward"
-                    title="Next video 𝗥𝗶𝗴𝗵𝘁 𝗮𝗿𝗿𝗼𝘄"
+                    title="Next frame 𝗥𝗶𝗴𝗵𝘁 𝗮𝗿𝗿𝗼𝘄"
+                    @click="showNextFrame"
+                    ></control-button>
+                <control-button
+                    icon="fa-forward"
+                    title="Advance video by jump step"
+                    @click="jumpForward"
+                    ></control-button>
+            </div>
+            <div class="btn-group"
+                v-if="showPrevNext">
+                 <control-button
+                    icon="fa-chevron-right"
+                    title="Next video"
                     @click="emitNext"
                     ></control-button>
             </div>
@@ -286,6 +310,10 @@ export default {
             type: Number,
             default: 0,
         },
+        jumpStep: {
+            type: Number,
+            default: 5.0,
+        },
         canAdd: {
             type: Boolean,
             default: false,
@@ -550,8 +578,8 @@ export default {
         this.map.on('moveend', this.emitMoveend);
 
         Keyboard.on('Escape', this.resetInteractionMode, 0, this.listenerSet);
-        Keyboard.on('ArrowRight', this.emitNext, 0, this.listenerSet);
-        Keyboard.on('ArrowLeft', this.emitPrevious, 0, this.listenerSet);
+        Keyboard.on('ArrowRight', this.showNextFrame, 0, this.listenerSet);
+        Keyboard.on('ArrowLeft', this.showPreviousFrame, 0, this.listenerSet);
     },
     mounted() {
         this.map.setTarget(this.$el);

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

@@ -153,6 +153,63 @@ 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
+        frameInfoCallback() {
+            let promise = new Vue.Promise((resolve, reject) => {
+                if ("requestVideoFrameCallback" in HTMLVideoElement.prototype) {
+                    this.video.requestVideoFrameCallback((now, metadata) => {
+                        resolve(metadata);
+                    })
+                }
+                else {
+                    reject("Your browser does not support requestVideoFrameCallback().");
+                }
+            })
+            return promise;
+        },
+        async showPreviousFrame() {
+            // force rerender
+            this.video.currentTime += 1;
+            this.video.currentTime -= 1;
+
+            // 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;
+            }
+        },
+        async showNextFrame() {
+            // force rerender
+            this.video.currentTime += 1;
+            this.video.currentTime -= 1;
+
+            // 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;
+            }
+        },
+        // Methods to jump back and forward in video. Step is given by parameter jumpStep.
+        async jumpBackward() {
+            if (this.video.currentTime > 0 && this.jumpStep > 0) {
+                this.video.currentTime -= this.jumpStep;
+                await this.frameInfoCallback();
+            }
+        },
+        async jumpForward() {
+            if (!this.video.ended && this.jumpStep > 0) {
+                this.video.currentTime += this.jumpStep;
+                await this.frameInfoCallback();
+            }
+        },
     },
     watch: {
         seeking(seeking) {

resources/assets/js/videos/stores/settings.js

@@ -7,6 +7,7 @@ let defaults = {
     showLabelTooltip: false,
     showMousePosition: false,
     showProgressIndicator: true,
+    jumpStep: 5.0,
 };
 
 export default new Settings({

resources/assets/js/videos/videoContainer.vue

@@ -67,6 +67,7 @@ export default {
                 showLabelTooltip: false,
                 showMousePosition: false,
                 playbackRate: 1.0,
+                jumpStep: 5.0,
                 showProgressIndicator: true,
             },
             openTab: '',

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

@@ -28,6 +28,7 @@
       :annotations="filteredAnnotations"
       :annotation-opacity="settings.annotationOpacity"
       :autoplay-draw="settings.autoplayDraw"
+      :jump-step="settings.jumpStep"
       :can-add="canEdit"
       :can-modify="canEdit"
       :can-delete="canEdit"

resources/views/videos/show/sidebar-settings.blade.php

@@ -19,6 +19,10 @@
                     <input type="number" min="0.25" max="4.0" step="0.25" v-model="playbackRate" class="form-control form-control--small" title="Video playback rate"> Playback rate
                 </div>
 
+                <div class="sidebar-tab__section">
+                    <input type="number" min="0.1" max="60.0" step="0.1" v-model="jumpStep" class="form-control form-control--small" title="Time in seconds that the video will jump (back or forward) with command buttons"> Jump step (s)
+                </div>
+
                 <div class="sidebar-tab__section">
                     <power-toggle :active="showProgressIndicator" title-off="Show progress indicator" title-on="Hide progress indicator" v-on:on="handleShowProgressIndicator" v-on:off="handleHideProgressIndicator">Progress Indicator</power-toggle>
                 </div>