UI improvements (#11429)

* Respect classname when no preview is found * Don't check for go2rtc info if camera is not restramed * Show error banner when playback fails * Add keyboard shortcut for fullscreen
blakeblackshear · May 19, 2024 · c156030 · c156030
1 parent 171a142
commit c156030
Show file tree

Hide file tree

Showing 5 changed files with 38 additions and 7 deletions.
diff --git a/web/src/components/player/HlsVideoPlayer.tsx b/web/src/components/player/HlsVideoPlayer.tsx
@@ -285,6 +285,14 @@ export default function HlsVideoPlayer({
  ) {
  setLoadedMetadata(false);
  setUseHlsCompat(true);
+ } else {
+ toast.error(
+ // @ts-expect-error code does exist
+ `Failed to play recordings (error ${e.target.error.code}): ${e.target.error.message}`,
+ {
+ position: "top-center",
+ },
+ );
  }
  }}
  />

diff --git a/web/src/components/player/PreviewPlayer.tsx b/web/src/components/player/PreviewPlayer.tsx
@@ -82,7 +82,12 @@ export default function PreviewPlayer({
  }
 
  return (
- <div className="flex size-full items-center justify-center rounded-lg text-white md:rounded-2xl">
+ <div
+ className={cn(
+ "flex size-full items-center justify-center rounded-lg text-white md:rounded-2xl",
+ className,
+ )}
+ >
  No Preview Found
  </div>
  );

diff --git a/web/src/components/player/VideoControls.tsx b/web/src/components/player/VideoControls.tsx
@@ -143,6 +143,11 @@ export default function VideoControls({
  onSeek(10);
  }
  break;
+ case "f":
+ if (setFullscreen && down && !repeat) {
+ setFullscreen(!fullscreen);
+ }
+ break;
  case "m":
  if (setMuted && down && !repeat && video) {
  setMuted(!muted);
@@ -157,10 +162,10 @@ export default function VideoControls({
  },
  // only update when preview only changes
  // eslint-disable-next-line react-hooks/exhaustive-deps
- [video, isPlaying, onSeek],
+ [video, isPlaying, fullscreen, setFullscreen, onSeek],
  );
  useKeyboardListener(
- hotKeys ? ["ArrowLeft", "ArrowRight", "m", " "] : [],
+ hotKeys ? ["ArrowLeft", "ArrowRight", "f", "m", " "] : [],
  onKeyboardShortcut,
  );
 

diff --git a/web/src/pages/Live.tsx b/web/src/pages/Live.tsx
@@ -83,7 +83,7 @@ function Live() {
  }
 
  if (selectedCamera) {
- return <LiveCameraView camera={selectedCamera} />;
+ return <LiveCameraView config={config} camera={selectedCamera} />;
  }
 
  return (

diff --git a/web/src/views/live/LiveCameraView.tsx b/web/src/views/live/LiveCameraView.tsx
@@ -20,7 +20,7 @@ import {
 import { TooltipProvider } from "@/components/ui/tooltip";
 import { useResizeObserver } from "@/hooks/resize-observer";
 import useKeyboardListener from "@/hooks/use-keyboard-listener";
-import { CameraConfig } from "@/types/frigateConfig";
+import { CameraConfig, FrigateConfig } from "@/types/frigateConfig";
 import { LiveStreamMetadata, VideoResolutionType } from "@/types/live";
 import { CameraPtzInfo } from "@/types/ptz";
 import { RecordingStartingPoint } from "@/types/record";
@@ -75,9 +75,13 @@ import { TransformWrapper, TransformComponent } from "react-zoom-pan-pinch";
 import useSWR from "swr";
 
 type LiveCameraViewProps = {
+ config?: FrigateConfig;
  camera: CameraConfig;
 };
-export default function LiveCameraView({ camera }: LiveCameraViewProps) {
+export default function LiveCameraView({
+ config,
+ camera,
+}: LiveCameraViewProps) {
  const navigate = useNavigate();
  const { isPortrait } = useMobileOrientation();
  const mainRef = useRef<HTMLDivElement | null>(null);
@@ -86,8 +90,17 @@ export default function LiveCameraView({ camera }: LiveCameraViewProps) {
 
  // supported features
 
+ const isRestreamed = useMemo(
+ () =>
+ config &&
+ Object.keys(config.go2rtc.streams || {}).includes(
+ camera.live.stream_name,
+ ),
+ [camera, config],
+ );
+
  const { data: cameraMetadata } = useSWR<LiveStreamMetadata>(
- `go2rtc/streams/${camera.live.stream_name}`,
+ isRestreamed ? `go2rtc/streams/${camera.live.stream_name}` : null,
  {
  revalidateOnFocus: false,
  },