Streamline live view (#9772)

* Break out live page * Improving layouts and add chip component * Improve default camera player sizing * Improve live updating * Cleanup and fit figma * Use fixed height * Masonry layout * Fix stuff * Don't force heights * Adjust scaling * Cleanup * remove sidebar (#9731) * remove sidebar * keep sidebar on mobile for now and add icons * Fix revalidation * Cleanup * Cleanup width * Add chips for activity on cameras * Remove dashboard from header * Use Inter font (#9735) * Show still image when no activity is occurring * remove unused search params * add playing check for webrtc * Don't use grid at all for single column * Fix height on mobile * a few style updates to better match figma (#9745) * Remove active objects when they become stationary * Move to sidebar only and make settings separate component * Fix layout * Animate visibility of chips * Sidebar is full screen * Fix tall aspect ratio cameras * Fix complicated aspect logic * remove * Adjust thumbnail aspect and add text * margin on single column layout * Smaller event thumb text * Simplify basic image view * Only show the red dot when camera is recording * Improve typing for camera toggles * animate chips with react-transition-group (#9763) * don't flash when going to still image * revalidate * tooltips and active tracking outline (#9766) * tooltips * fix tooltip provider and add active tracking outline * remove unused icon * remove figma comment * Get live mode working for jsmpeg * add small gradient below timeago on event thumbnails (#9767) * Create live mode hook and make sure jsmpeg can be used * Enforce env var * Use print * Remove unstable * Add tooltips to thumbnails * Put back vite * Format * Update web/src/components/player/JSMpegPlayer.tsx --------- Co-authored-by: Josh Hawkins <[email protected]> Co-authored-by: Blake Blackshear <[email protected]>
blakeblackshear · Feb 10, 2024 · 64988c9 · 64988c9
1 parent f6a4c2a
commit 64988c9
Show file tree

Hide file tree

Showing 33 changed files with 1,106 additions and 967 deletions.
diff --git a/frigate/app.py b/frigate/app.py
@@ -647,6 +647,13 @@ def start(self) -> None:
 
  self.init_logger()
  logger.info(f"Starting Frigate ({VERSION})")
+
+ if not os.environ.get("I_PROMISE_I_WONT_MAKE_AN_ISSUE_ON_GITHUB"):
+ print(
+ "Frigate 0.14 UNSTABLE - not for public use at this time. Please use Frigate stable"
+ )
+ sys.exit(1)
+
  try:
  self.ensure_dirs()
  try:

diff --git a/web/package-lock.json b/web/package-lock.json
diff --git a/web/package.json b/web/package.json
@@ -47,6 +47,7 @@
  "react-hook-form": "^7.48.2",
  "react-icons": "^4.12.0",
  "react-router-dom": "^6.20.1",
+ "react-transition-group": "^4.4.5",
  "react-use-websocket": "^4.5.0",
  "recoil": "^0.7.7",
  "sonner": "^1.4.0",
@@ -69,6 +70,7 @@
  "@types/react": "^18.2.37",
  "@types/react-dom": "^18.2.15",
  "@types/react-icons": "^3.0.0",
+ "@types/react-transition-group": "^4.4.10",
  "@types/strftime": "^0.9.8",
  "@typescript-eslint/eslint-plugin": "^6.10.0",
  "@typescript-eslint/parser": "^6.10.0",

diff --git a/web/public/fonts/Inter-VariableFont_slnt,wght.ttf b/web/public/fonts/Inter-VariableFont_slnt,wght.ttf
diff --git a/web/src/App.tsx b/web/src/App.tsx
@@ -4,7 +4,6 @@ import { useState } from "react";
 import Wrapper from "@/components/Wrapper";
 import Sidebar from "@/components/Sidebar";
 import Header from "@/components/Header";
-import Dashboard from "@/pages/Dashboard";
 import Live from "@/pages/Live";
 import History from "@/pages/History";
 import Export from "@/pages/Export";
@@ -35,8 +34,7 @@ function App() {
  className="overflow-x-hidden px-4 py-2 w-screen md:w-full"
  >
  <Routes>
- <Route path="/" element={<Dashboard />} />
- <Route path="/live/:camera?" element={<Live />} />
+ <Route path="/" element={<Live />} />
  <Route path="/history" element={<History />} />
  <Route path="/export" element={<Export />} />
  <Route path="/storage" element={<Storage />} />

diff --git a/web/src/api/ws.tsx b/web/src/api/ws.tsx
@@ -10,7 +10,7 @@ import {
 import { produce, Draft } from "immer";
 import useWebSocket, { ReadyState } from "react-use-websocket";
 import { FrigateConfig } from "@/types/frigateConfig";
-import { FrigateEvent } from "@/types/ws";
+import { FrigateEvent, ToggleableSetting } from "@/types/ws";
 
 type ReducerState = {
  [topic: string]: {
@@ -149,8 +149,8 @@ export function useWs(watchTopic: string, publishTopic: string) {
 }
 
 export function useDetectState(camera: string): {
- payload: string;
- send: (payload: string, retain?: boolean) => void;
+ payload: ToggleableSetting;
+ send: (payload: ToggleableSetting, retain?: boolean) => void;
 } {
  const {
  value: { payload },
@@ -160,8 +160,8 @@ export function useDetectState(camera: string): {
 }
 
 export function useRecordingsState(camera: string): {
- payload: string;
- send: (payload: string, retain?: boolean) => void;
+ payload: ToggleableSetting;
+ send: (payload: ToggleableSetting, retain?: boolean) => void;
 } {
  const {
  value: { payload },
@@ -171,8 +171,8 @@ export function useRecordingsState(camera: string): {
 }
 
 export function useSnapshotsState(camera: string): {
- payload: string;
- send: (payload: string, retain?: boolean) => void;
+ payload: ToggleableSetting;
+ send: (payload: ToggleableSetting, retain?: boolean) => void;
 } {
  const {
  value: { payload },
@@ -182,8 +182,8 @@ export function useSnapshotsState(camera: string): {
 }
 
 export function useAudioState(camera: string): {
- payload: string;
- send: (payload: string, retain?: boolean) => void;
+ payload: ToggleableSetting;
+ send: (payload: ToggleableSetting, retain?: boolean) => void;
 } {
  const {
  value: { payload },
@@ -228,7 +228,7 @@ export function useMotionActivity(camera: string): { payload: string } {
  return { payload };
 }
 
-export function useAudioActivity(camera: string): { payload: string } {
+export function useAudioActivity(camera: string): { payload: number } {
  const {
  value: { payload },
  } = useWs(`${camera}/audio/rms`, "");

diff --git a/web/src/components/Chip.tsx b/web/src/components/Chip.tsx
@@ -0,0 +1,38 @@
+import { ReactNode, useRef } from "react";
+import { CSSTransition } from "react-transition-group";
+
+type ChipProps = {
+ className?: string;
+ children?: ReactNode[];
+ in?: boolean;
+};
+
+export default function Chip({
+ className,
+ children,
+ in: inProp = true,
+}: ChipProps) {
+ const nodeRef = useRef(null);
+
+ return (
+ <CSSTransition
+ in={inProp}
+ nodeRef={nodeRef}
+ timeout={500}
+ classNames={{
+ enter: "opacity-0",
+ enterActive: "opacity-100 transition-opacity duration-500 ease-in-out",
+ exit: "opacity-100",
+ exitActive: "opacity-0 transition-opacity duration-500 ease-in-out",
+ }}
+ unmountOnExit
+ >
+ <div
+ ref={nodeRef}
+ className={`flex px-2 py-1.5 rounded-2xl items-center z-10 ${className}`}
+ >
+ {children}
+ </div>
+ </CSSTransition>
+ );
+}