Merge branch 'dev' into web-deps

web/package.json

@@ -32,6 +32,7 @@
  "@radix-ui/react-toggle": "^1.0.3",
  "@radix-ui/react-toggle-group": "^1.0.4",
  "@radix-ui/react-tooltip": "^1.0.7",
+ "@types/react-lazy-load-image-component": "^1.6.3",
  "apexcharts": "^3.45.1",
  "axios": "^1.6.2",
  "class-variance-authority": "^0.7.0",
@@ -50,6 +51,7 @@
  "react-dom": "^18.2.0",
  "react-hook-form": "^7.48.2",
  "react-icons": "^4.12.0",
+ "react-lazy-load-image-component": "^1.6.0",
  "react-router-dom": "^6.20.1",
  "react-transition-group": "^4.4.5",
  "react-use-websocket": "^4.5.0",

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;
+ }
 }