Manually set current time when selecting event (#11948)

* Manually set current time when selecting event * Make it clear which camera has no preview * Make it clear which camera has no preview * Format camera name
blakeblackshear · Jun 14, 2024 · a7da468 · a7da468
1 parent 1a0d9e1
commit a7da468
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 5 deletions.
diff --git a/web/src/components/player/PreviewPlayer.tsx b/web/src/components/player/PreviewPlayer.tsx
@@ -323,7 +323,7 @@ function PreviewVideoPlayer({
  </video>
  {cameraPreviews && !currentPreview && (
  <div className="absolute inset-0 flex items-center justify-center rounded-lg bg-background_alt text-primary md:rounded-2xl">
- No Preview Found
+ No Preview Found for {camera.replaceAll("_", " ")}
  </div>
  )}
  {firstLoad && <Skeleton className="absolute aspect-video size-full" />}
@@ -536,7 +536,7 @@ function PreviewFramesPlayer({
  />
  {previewFrames?.length === 0 && (
  <div className="-y-translate-1/2 align-center absolute inset-x-0 top-1/2 rounded-lg bg-background_alt text-center text-primary md:rounded-2xl">
- No Preview Found
+ No Preview Found for {camera.replaceAll("_", " ")}
  </div>
  )}
  {firstLoad && <Skeleton className="absolute aspect-video size-full" />}

diff --git a/web/src/views/events/RecordingView.tsx b/web/src/views/events/RecordingView.tsx
@@ -196,6 +196,19 @@ export function RecordingView({
  updateSelectedSegment,
  ]);
 
+ const manuallySetCurrentTime = useCallback(
+ (time: number) => {
+ setCurrentTime(time);
+
+ if (currentTimeRange.after <= time && currentTimeRange.before >= time) {
+ mainControllerRef.current?.seekToTimestamp(time, true);
+ } else {
+ updateSelectedSegment(time, true);
+ }
+ },
+ [currentTimeRange, updateSelectedSegment],
+ );
+
  useEffect(() => {
  if (!scrubbing) {
  if (Math.abs(currentTime - playerTime) > 10) {
@@ -580,6 +593,7 @@ export function RecordingView({
  currentTime={currentTime}
  exportRange={exportMode == "timeline" ? exportRange : undefined}
  setCurrentTime={setCurrentTime}
+ manuallySetCurrentTime={manuallySetCurrentTime}
  setScrubbing={setScrubbing}
  setExportRange={setExportRange}
  />
@@ -597,6 +611,7 @@ type TimelineProps = {
  currentTime: number;
  exportRange?: TimeRange;
  setCurrentTime: React.Dispatch<React.SetStateAction<number>>;
+ manuallySetCurrentTime: (time: number, force: boolean) => void;
  setScrubbing: React.Dispatch<React.SetStateAction<boolean>>;
  setExportRange: (range: TimeRange) => void;
 };
@@ -609,6 +624,7 @@ function Timeline({
  currentTime,
  exportRange,
  setCurrentTime,
+ manuallySetCurrentTime,
  setScrubbing,
  setExportRange,
 }: TimelineProps) {
@@ -693,9 +709,10 @@ function Timeline({
  event={review}
  currentTime={currentTime}
  onClick={() => {
- setScrubbing(true);
- setCurrentTime(review.start_time - REVIEW_PADDING);
- setScrubbing(false);
+ manuallySetCurrentTime(
+ review.start_time - REVIEW_PADDING,
+ true,
+ );
  }}
  />
  );