Misc fixes (#18289)

* Fix key not moved

* Account for HLS start offset when seeking and calculating update time

web/src/components/player/dynamic/DynamicVideoController.ts

@@ -17,6 +17,7 @@ export class DynamicVideoController {
   // playback
   private recordings: Recording[] = [];
   private timeRange: TimeRange = { after: 0, before: 0 };
+  private inpointOffset: number = 0;
   private annotationOffset: number;
   private timeToStart: number | undefined = undefined;
 
@@ -41,6 +42,7 @@ export class DynamicVideoController {
   newPlayback(newPlayback: DynamicPlayback) {
     this.recordings = newPlayback.recordings;
     this.timeRange = newPlayback.timeRange;
+    this.inpointOffset = this.timeRange.after - this.recordings[0].start_time;
 
     if (this.timeToStart) {
       this.seekToTimestamp(this.timeToStart);
@@ -92,6 +94,9 @@ export class DynamicVideoController {
       return true;
     });
 
+    // adjust for HLS inpoint offset
+    seekSeconds -= this.inpointOffset;
+
     if (seekSeconds != 0) {
       this.playerController.currentTime = seekSeconds;
 

web/src/components/player/dynamic/DynamicVideoPlayer.tsx

@@ -197,6 +197,19 @@ export default function DynamicVideoPlayer({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [controller, recordings]);
 
+  /** the HLS endpoint returns the vod segments with the first
+   * segment of the hour trimmed, meaning it will start at
+   * the beginning of the hour, cutting off any difference
+   * that the segment has.
+   */
+  const inpointOffset = useMemo(() => {
+    if (!recordingParams || !recordings) {
+      return 0;
+    }
+
+    return recordingParams.after - recordings[0].start_time;
+  }, [recordingParams, recordings]);
+
   return (
     <>
       <HlsVideoPlayer
@@ -207,6 +220,7 @@ export default function DynamicVideoPlayer({
         hotKeys={hotKeys}
         supportsFullscreen={supportsFullscreen}
         fullscreen={fullscreen}
+        inpointOffset={inpointOffset}
         onTimeUpdate={onTimeUpdate}
         onPlayerLoaded={onPlayerLoaded}
         onClipEnded={onClipEnded}