[FEATURE] Player stop on endTime timecode of an active segment (kitodo#1740)

Author: fschoelzel

Resources/Private/JavaScript/DlfMediaPlayer/DlfMediaPlayer.js

@@ -721,6 +721,9 @@ export default class DlfMediaPlayer extends HTMLElement {
       });
       this.dispatchEvent(event);
     }
+
+    // Pauses playback when the video reaches the active segment’s end.
+    this.stopActiveSegment();
   }
 
   onTrackChange() {
@@ -758,6 +761,9 @@ export default class DlfMediaPlayer extends HTMLElement {
 
   onPlay() {
     this.videoPausedOn = null;
+
+    // Deactivates the segment if playback passes its end time.
+    this.deactivateActiveSegment();
   }
 
   /**
@@ -1065,6 +1071,67 @@ export default class DlfMediaPlayer extends HTMLElement {
       console.error('Error from Shaka player', error.code, error);
     }
   }
+  
+  /**
+   * Returns the active segment if it exists and has a valid endTime.
+   * 
+   * @private
+   * @typedef {import('./Markers.js').Segment & { endTime: number }} SegmentWithEnd
+   * @returns {SegmentWithEnd | null}
+   */
+  getValidActiveSegment() {
+    const activeSegment = this.markers_.activeSegment;
+    if (activeSegment === null || typeof activeSegment.endTime !== 'number') {
+      return null;
+    }
+    return /** @type {SegmentWithEnd} */ (activeSegment);
+  }
+
+  /**
+   * Checks whether the active segment has reached or passed its end time and deactivates it.
+   * 
+   * @private
+   * @returns {boolean}
+   */
+  deactivateActiveSegment() {
+    const activeSegment = this.getValidActiveSegment();
+    if (!activeSegment) return false;
+
+    const eps = 0.05;
+
+    if (Math.abs(this.video.currentTime - activeSegment.endTime) <= eps || this.video.currentTime >= activeSegment.endTime) {
+      try {
+        this.markers_.deactivateSegment();
+      } catch (e) {
+        console.debug('Could not deactivate segment after seek', e);
+      }
+    }
+
+    return true;
+  }
+
+  /**
+   * Checks whether playback has reached the active segment’s end time and pauses the video.
+   * 
+   * @private
+   * @returns {boolean}
+   */
+  stopActiveSegment() {
+    const activeSegment = this.getValidActiveSegment();
+    if (!activeSegment) return false;
+
+    if (!this.video.paused && this.video.currentTime >= activeSegment.endTime) {
+      this.video.pause();
+      try {
+        this.video.currentTime = activeSegment.endTime;
+      } catch (e) {
+        console.debug('Could not set video.currentTime to segment end:', e);
+      }
+      return true;
+    }
+
+    return false;
+  }
 }
 
 customElements.define('dlf-media', DlfMediaPlayer);

Resources/Private/JavaScript/DlfMediaPlayer/Markers.js

@@ -182,6 +182,13 @@ export default class Markers extends EventTarget {
     }
   }
 
+  /**
+   * Deactivates the currently active segment
+   */
+  deactivateSegment() {
+    this.activateSegment(null);
+  }
+
   /**
    *
    * @param {string} id

Resources/Private/Less/DlfMediaPlayer.less

@@ -38,6 +38,7 @@
 // Colors
 @base-color: rgb(28, 28, 28);
 @light-color: lighten(@base-color, 50%);
+@accent-color: #167;
 
 // Labels
 @label-padding: 2pt;

Resources/Private/Less/DlfMediaPlayer/ShakaFrontend.less

@@ -108,7 +108,7 @@
         height: 3.5em;
         width: 100%;
 
-        background-color: rgba(79, 179, 199, 0.6);
+        background-color: fade(@accent-color, 12%);
 
         video {
             display: none;

Resources/Private/Less/SlubMediaPlayer/components/MarkerTable.less

@@ -9,6 +9,12 @@
             line-height: normal;
         }
 
+        table tr::before {
+            content: "";
+            display: table-cell;
+            width: 4px;
+        }
+
         th {
             border-bottom: 1px solid black;
         }
@@ -17,12 +23,23 @@
             padding: 0.1em 2em 0.1em 0;
         }
 
-        tbody tr:hover {
-            background-color: #eee;
+        tbody tr {
+            transition: background-color 0.3s ease, color 0.3s ease;
+            
+            &:hover {
+                background-color: #eee;
+            }
         }
 
         tr.active-segment {
-            color: darkcyan;
+            @active-bg: fade(@accent-color, 12%);
+            color: @accent-color;
+
+            .hover-darken-bg(@active-bg, 5%);
+
+            &::before {
+                background-color: @accent-color;
+            }
         }
 
         .marker-id-col {
@@ -46,6 +63,9 @@
         .marker-start-col,
         .marker-end-col {
             cursor: pointer;
+            &:hover {
+                color: lighten(@accent-color, 8%);
+            }
         }
 
         .marker-buttons-col {

Resources/Private/Less/SlubMediaPlayer/index.less

@@ -1 +1,2 @@
+@import "util.less";
 @import "SlubMediaPlayer.less";

Resources/Private/Less/SlubMediaPlayer/util.less

@@ -0,0 +1,39 @@
+// Mixin: automatically darken/lighten background/text on hover
+//
+// Usage Example:
+// .button {
+//   .hover-darken-bg(#ddd, 10%);
+//   .hover-lighten-color(#eee, 10%);
+// }
+
+.hover-lighten-bg(@bg-color, @bg-amount) {
+    background-color: @bg-color;
+
+    &:hover {
+        background-color: lighten(@bg-color, @bg-amount);
+    }
+}
+
+.hover-darken-bg(@bg-color, @bg-amount) {
+    background-color: @bg-color;
+
+    &:hover {
+        background-color: darken(@bg-color, @bg-amount);
+    }
+}
+
+.hover-lighten-color(@text-color, @text-amount) {
+    color: @text-color;
+
+    &:hover {
+        color: lighten(@text-color, @text-amount);
+    }
+}
+
+.hover-darken-color(@text-color, @text-amount) {
+    color: @text-color;
+
+    &:hover {
+        color: darken(@text-color, @text-amount);
+    }
+}