UI tweaks (#11795)

* Prevent "undefined" from being displayed in searchParams string

* Show message for no motion data

* Use theme colors for no preview found divs

web/src/components/camera/AutoUpdatingCameraImage.tsx

@@ -69,7 +69,7 @@ export default function AutoUpdatingCameraImage({
  <CameraImage
  camera={camera}
  onload={handleLoad}
- searchParams={`cache=${key}${searchParams && `&${searchParams}`}`}
+ searchParams={`cache=${key}${searchParams ? `&${searchParams}` : ""}`}
  className={cameraClasses}
  />
  {showFps ? <span className="text-xs">Displaying at {fps}fps</span> : null}

web/src/components/player/PreviewPlayer.tsx

@@ -84,7 +84,7 @@ export default function PreviewPlayer({
  return (
  <div
  className={cn(
- "flex size-full items-center justify-center rounded-lg text-white md:rounded-2xl",
+ "flex size-full items-center justify-center rounded-lg bg-background_alt text-primary md:rounded-2xl",
  className,
  )}
  >
@@ -322,7 +322,7 @@ function PreviewVideoPlayer({
  )}
  </video>
  {cameraPreviews && !currentPreview && (
- <div className="absolute inset-0 flex items-center justify-center rounded-lg text-white md:rounded-2xl">
+ <div className="absolute inset-0 flex items-center justify-center rounded-lg bg-background_alt text-primary md:rounded-2xl">
  No Preview Found
  </div>
  )}
@@ -535,7 +535,7 @@ function PreviewFramesPlayer({
  onLoad={onImageLoaded}
  />
  {previewFrames?.length === 0 && (
- <div className="-y-translate-1/2 align-center absolute inset-x-0 top-1/2 rounded-lg bg-black text-center text-white md:rounded-2xl">
+ <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
  </div>
  )}

web/src/views/events/EventView.tsx

@@ -30,7 +30,7 @@ import {
  useState,
 } from "react";
 import { isDesktop, isMobile } from "react-device-detect";
-import { LuFolderCheck } from "react-icons/lu";
+import { LuFolderCheck, LuFolderX } from "react-icons/lu";
 import { MdCircle } from "react-icons/md";
 import useSWR from "swr";
 import MotionReviewTimeline from "@/components/timeline/MotionReviewTimeline";
@@ -858,6 +858,15 @@ function MotionReview({
  ],
  );
 
+ if (motionData?.length === 0) {
+ return (
+ <div className="absolute left-1/2 top-1/2 flex -translate-x-1/2 -translate-y-1/2 flex-col items-center justify-center text-center">
+ <LuFolderX className="size-16" />
+ No motion data found
+ </div>
+ );
+ }
+
  if (!relevantPreviews) {
  return <ActivityIndicator />;
  }