Automatically skip to next preview / clip when watching full recordings

web/src/components/player/DynamicVideoPlayer.tsx

@@ -199,8 +199,6 @@ export default function DynamicVideoPlayer({
  return <ActivityIndicator />;
  }
 
- //console.log(`${config.detect.width / config.detect.height < 1.7 ? "16:9" : undefined}`)
-
  return (
  <div className={className}>
  <div
@@ -228,7 +226,7 @@ export default function DynamicVideoPlayer({
  player.on("timeupdate", () => {
  controller.updateProgress(player.currentTime() || 0);
  });
- player.on("ended", () => controller.fireClipEndEvent());
+ player.on("ended", () => controller.fireClipChangeEvent("forward"));
 
  if (onControllerReady) {
  onControllerReady(controller);
@@ -264,6 +262,7 @@ export default function DynamicVideoPlayer({
  previewRef.current = player;
  player.pause();
  player.on("seeked", () => controller.finishedSeeking());
+ player.on("loadeddata", () => controller.previewReady());
  }}
  onDispose={() => {
  previewRef.current = undefined;
@@ -285,14 +284,16 @@ export class DynamicVideoController {
  // playback
  private recordings: Recording[] = [];
  private onPlaybackTimestamp: ((time: number) => void) | undefined = undefined;
- private onClipEnded: (() => void) | undefined = undefined;
+ private onClipChange: ((dir: "forward" | "backward") => void) | undefined =
+ undefined;
  private annotationOffset: number;
  private timeToStart: number | undefined = undefined;
 
  // preview
  private preview: Preview | undefined = undefined;
  private timeToSeek: number | undefined = undefined;
  private seeking = false;
+ private readyToScrub = true;
 
  constructor(
  playerRef: MutableRefObject<Player | undefined>,
@@ -395,30 +396,50 @@ export class DynamicVideoController {
  this.onPlaybackTimestamp = listener;
  }
 
- onClipEndedEvent(listener: () => void) {
- this.onClipEnded = listener;
+ onClipChangedEvent(listener: (dir: "forward" | "backward") => void) {
+ this.onClipChange = listener;
  }
 
- fireClipEndEvent() {
- if (this.onClipEnded) {
- this.onClipEnded();
+ fireClipChangeEvent(dir: "forward" | "backward") {
+ if (this.onClipChange) {
+ this.onClipChange(dir);
  }
  }
 
  scrubToTimestamp(time: number) {
+ if (!this.preview) {
+ return;
+ }
+
+ if (!this.readyToScrub) {
+ return;
+ }
+
+ if (time > this.preview.end) {
+ if (this.playerMode == "scrubbing") {
+ this.playerMode = "playback";
+ this.setScrubbing(false);
+ this.timeToSeek = undefined;
+ this.seeking = false;
+ this.readyToScrub = false;
+ this.fireClipChangeEvent("forward");
+ }
+ return;
+ }
+
  if (this.playerMode != "scrubbing") {
  this.playerMode = "scrubbing";
  this.playerRef.current?.pause();
  this.setScrubbing(true);
  }
 
- if (this.preview) {
- if (this.seeking) {
-  this.timeToSeek = time;
- } else {
- this.previewRef.current?.currentTime(time - this.preview.start);
-  this.seeking = true;
- }
+ if (this.seeking) {
+ this.timeToSeek = time;
+ } else {
+ this.previewRef.current?.currentTime(
+ Math.max(0, time - this.preview.start)
+ );
+ this.seeking = true;
  }
  }
 
@@ -438,4 +459,9 @@ export class DynamicVideoController {
  this.seeking = false;
  }
  }
+
+ previewReady() {
+ this.previewRef.current?.pause();
+ this.readyToScrub = true;
+ }
 }

web/src/views/events/DesktopRecordingView.tsx

@@ -20,9 +20,13 @@ export default function DesktopRecordingView({
  relevantPreviews,
 }: DesktopRecordingViewProps) {
  const navigate = useNavigate();
- const controllerRef = useRef<DynamicVideoController | undefined>(undefined);
  const contentRef = useRef<HTMLDivElement | null>(null);
 
+ // controller state
+
+ const [playerReady, setPlayerReady] = useState(false);
+ const controllerRef = useRef<DynamicVideoController | undefined>(undefined);
+
  // timeline time
 
  const timeRange = useMemo(
@@ -44,12 +48,14 @@ export default function DesktopRecordingView({
  return;
  }
 
- if (selectedRangeIdx < timeRange.ranges.length - 1) {
- controllerRef.current.onClipEndedEvent(() => {
+ controllerRef.current.onClipChangedEvent((dir) => {
+ if (dir == "forward" && selectedRangeIdx < timeRange.ranges.length - 1) {
  setSelectedRangeIdx(selectedRangeIdx + 1);
- });
- }
- }, [controllerRef, selectedRangeIdx]);
+ } else if (selectedRangeIdx > 0) {
+ setSelectedRangeIdx(selectedRangeIdx - 1);
+ }
+ });
+ }, [playerReady, selectedRangeIdx]);
 
  // scrubbing and timeline state
 
@@ -62,13 +68,13 @@ export default function DesktopRecordingView({
  if (scrubbing) {
  controllerRef.current?.scrubToTimestamp(currentTime);
  }
- }, [controllerRef, currentTime, scrubbing]);
+ }, [currentTime, scrubbing]);
 
  useEffect(() => {
  if (!scrubbing) {
  controllerRef.current?.seekToTimestamp(currentTime, true);
  }
- }, [controllerRef, scrubbing]);
+ }, [scrubbing]);
 
  return (
  <div ref={contentRef} className="relative w-full h-full">
@@ -87,6 +93,7 @@ export default function DesktopRecordingView({
  cameraPreviews={relevantPreviews || []}
  onControllerReady={(controller) => {
  controllerRef.current = controller;
+ setPlayerReady(true);
  controllerRef.current.onPlayerTimeUpdate((timestamp: number) => {
  setCurrentTime(timestamp);
  });