Improving playhead behavior over a clip segment

src/components/Preview.vue

@@ -41,7 +41,7 @@
 
     <!-- Timeline w/ Clip Trimming -->
     <div class="col-sm-10 d-flex flex-column p-1">
-      <div class="timeline" ref="timeline" @mousedown="seekToCursor($event)" @mousemove="drag($event)" @touchmove="drag($event)" @mouseup="endDrag" @touchend="endDrag">
+      <div class="timeline" ref="timeline" @mousedown="seekToCursor($event)" @mousemove="drag($event)" @touchmove="drag($event)" @mouseup="endDrag($event)" @touchend="endDrag($event)">
         <div title="Drag Playback Position" ref="playhead" class="playhead" @mousedown="startDrag($event, 'playhead')" @touchstart="startDrag($event, 'playhead')" :style="{left: preview.position * 100.0 + '%'}"></div>
         <div title="Drag to Trim Start" ref="start" class="marker marker_left" @click="seekToMarker('start')" @mousedown="startDrag($event, 'start')" @touchstart="startDrag($event, 'start')" :style="{left: preview.start * 100.0 + '%'}">
           <svg xmlns="http://www.w3.org/2000/svg" width="16" height="48" fill="currentColor" class="bi bi-grip-vertical" viewBox="0 0 16 16">
@@ -101,6 +101,8 @@ export default {
       clipDragOffset: 0,
       windowDragHandler: null,
       windowEndHandler: null,
+      dragHasMoved: false,
+      dragStartPercent: 0.0,
       is_paused: true,
       marker_width: 12,
       marker_width_percent: 0.0,
@@ -209,6 +211,10 @@ export default {
         e.preventDefault()
         e.stopPropagation()
       }
+      this.dragHasMoved = false
+      if (this.$refs.timeline) {
+        this.dragStartPercent = this.getCursorPosition(e)
+      }
       if (this.$refs.video) {
         this.$refs.video.pause()
       }
@@ -225,17 +231,28 @@ export default {
       this.dragging_marker = marker
       this.attachGlobalDragListeners()
     },
-    endDrag() {
+    endDrag(e) {
+      if (!this.dragging_marker) {
+        return
+      }
+      const marker = this.dragging_marker
+      const didMove = this.dragHasMoved
       this.dragging_marker = null
       this.clipDragOffset = 0
+      this.dragHasMoved = false
+      if (marker == 'clip' && !didMove) {
+        let percent_x = this.dragStartPercent
+        if (e) {
+          percent_x = this.getCursorPosition(e)
+        }
+        this.jumpPlayheadToPercent(percent_x)
+      }
       this.detachGlobalDragListeners()
     },
     seekToCursor(e) {
       if (!this.dragging_marker) {
         let percent_x = this.getCursorPosition(e)
-        if (this.$refs.video) {
-          this.$refs.video.currentTime = percent_x * this.$refs.video.duration
-        }
+        this.jumpPlayheadToPercent(percent_x)
         return false
       }
     },
@@ -249,6 +266,10 @@ export default {
       }
     },
     drag(e) {
+      if (!this.dragging_marker) {
+        return
+      }
+      this.dragHasMoved = true
       this.checkClipSize()
       if (this.dragging_marker == 'start') {
         this.setPreview({start: Math.min(this.getCursorPosition(e), this.preview.end),
@@ -278,6 +299,7 @@ export default {
         new_start = Math.max(0, Math.min(1 - clip_length, new_start))
         let new_end = new_start + clip_length
         this.setPreview({start: new_start, end: new_end})
+        this.setPreviewPosition(new_start)
         if (this.$refs.video && isFinite(new_start * this.$refs.video.duration)) {
           this.$refs.video.currentTime = new_start * this.$refs.video.duration
         }
@@ -319,7 +341,7 @@ export default {
         this.windowDragHandler = (event) => this.drag(event)
       }
       if (!this.windowEndHandler) {
-        this.windowEndHandler = () => this.endDrag()
+        this.windowEndHandler = (event) => this.endDrag(event)
       }
       window.addEventListener('mousemove', this.windowDragHandler)
       window.addEventListener('touchmove', this.windowDragHandler)
@@ -338,6 +360,13 @@ export default {
         window.removeEventListener('touchcancel', this.windowEndHandler)
       }
     },
+    jumpPlayheadToPercent(percent) {
+      const clamped = Math.max(0, Math.min(1, percent))
+      this.setPreviewPosition(clamped)
+      if (this.$refs.video && isFinite(clamped * this.$refs.video.duration)) {
+        this.$refs.video.currentTime = clamped * this.$refs.video.duration
+      }
+    },
     ...mapActions(['createClip', 'editClip', 'moveClip']),
     ...mapMutations(['setPreview', 'setPreviewPosition', 'setPreviewFile'])
   },