Merge pull request #316 from ZoneMinder/feat/313-live-activity

feat: Live Activity page, plus stream-teardown and event-poller fixes

Author: pliablepixels

app/.lint-baseline.json

@@ -7,7 +7,7 @@
   "react-hooks/globals": 1,
   "react-hooks/preserve-manual-memoization": 12,
   "react-hooks/refs": 22,
-  "react-hooks/set-state-in-effect": 14,
+  "react-hooks/set-state-in-effect": 15,
   "react-hooks/static-components": 9,
   "react-refresh/only-export-components": 8,
   "unused-eslint-disable-directive": 1

app/src/App.tsx

@@ -36,6 +36,7 @@ const Dashboard = lazy(() => import('./pages/Dashboard'));
 const Monitors = lazy(() => import('./pages/Monitors'));
 const MonitorDetail = lazy(() => import('./pages/MonitorDetail'));
 const Montage = lazy(() => import('./pages/Montage'));
+const LiveActivity = lazy(() => import('./pages/LiveActivity'));
 const Events = lazy(() => import('./pages/Events'));
 const EventDetail = lazy(() => import('./pages/EventDetail'));
 const Timeline = lazy(() => import('./pages/Timeline'));
@@ -255,6 +256,14 @@ function AppRoutes() {
               </RouteErrorBoundary>
             }
           />
+          <Route
+            path="/live-activity"
+            element={
+              <RouteErrorBoundary routePath="/live-activity">
+                <LiveActivity />
+              </RouteErrorBoundary>
+            }
+          />
           <Route
             path="/events"
             element={

app/src/components/layout/SidebarContent.tsx

@@ -35,6 +35,7 @@ import {
   HelpCircle,
   Megaphone,
   Command,
+  Activity,
 } from 'lucide-react';
 import { useCommandPaletteStore } from '../../stores/commandPalette';
 import { useDeveloperNotices } from '../../hooks/useDeveloperNotices';
@@ -106,6 +107,7 @@ export function SidebarContent({ onMobileClose, isCollapsed }: SidebarContentPro
     { path: '/dashboard', label: t('sidebar.dashboard'), icon: LayoutDashboard },
     { path: '/monitors', label: t('sidebar.monitors'), icon: Video },
     { path: '/montage', label: t('sidebar.montage'), icon: LayoutGrid },
+    { path: '/live-activity', label: t('sidebar.live_activity'), icon: Activity },
     { path: '/events', label: t('sidebar.events'), icon: Clock },
     { path: '/timeline', label: t('sidebar.timeline'), icon: ChartGantt },
     { path: '/notifications', label: t('sidebar.notifications'), icon: Bell },

app/src/components/live-activity/LiveActivityChrome.tsx

@@ -0,0 +1,102 @@
+/**
+ * The page furniture around the Live Activity grid, in both of its modes.
+ *
+ * Normally that is a heading and the controls; in fullscreen it is a thin
+ * translucent bar and nothing else, so a wall display shows tiles. Montage's
+ * own fullscreen bar is not reused: it carries the kiosk lock and the tile
+ * label toggle, and importing it would pull the kiosk store and the PIN pad
+ * onto a page that offers neither.
+ */
+
+import { useTranslation } from 'react-i18next';
+import { Maximize, Minimize, Settings } from 'lucide-react';
+import { EventMontageGridControls } from '../events/EventMontageGridControls';
+import { Button } from '../ui/button';
+
+interface LiveActivityHeaderProps {
+  gridCols: number;
+  customCols: string;
+  isCustomGridDialogOpen: boolean;
+  onApplyGridLayout: (cols: number) => void;
+  onCustomColsChange: (value: string) => void;
+  onCustomGridDialogOpenChange: (open: boolean) => void;
+  onCustomGridSubmit: () => void;
+  onEnterFullscreen: () => void;
+  onOpenSettings: () => void;
+}
+
+export function LiveActivityHeader({
+  gridCols,
+  customCols,
+  isCustomGridDialogOpen,
+  onApplyGridLayout,
+  onCustomColsChange,
+  onCustomGridDialogOpenChange,
+  onCustomGridSubmit,
+  onEnterFullscreen,
+  onOpenSettings,
+}: LiveActivityHeaderProps) {
+  const { t } = useTranslation();
+
+  return (
+    <div className="flex items-center justify-between gap-2 mb-3">
+      <h1 className="text-lg font-semibold min-w-0 truncate" title={t('live_activity.title')}>
+        {t('live_activity.title')}
+      </h1>
+      <div className="flex items-center gap-1">
+        <EventMontageGridControls
+          gridCols={gridCols}
+          customCols={customCols}
+          isCustomGridDialogOpen={isCustomGridDialogOpen}
+          onApplyGridLayout={onApplyGridLayout}
+          onCustomColsChange={onCustomColsChange}
+          onCustomGridDialogOpenChange={onCustomGridDialogOpenChange}
+          onCustomGridSubmit={onCustomGridSubmit}
+        />
+        <Button
+          variant="ghost"
+          size="icon"
+          onClick={onEnterFullscreen}
+          title={t('live_activity.fullscreen')}
+          aria-label={t('live_activity.fullscreen')}
+          data-testid="live-activity-fullscreen-btn"
+        >
+          <Maximize className="h-4 w-4" />
+        </Button>
+        <Button
+          variant="ghost"
+          size="icon"
+          onClick={onOpenSettings}
+          title={t('live_activity.settings_title')}
+          aria-label={t('live_activity.settings_title')}
+          data-testid="live-activity-settings-btn"
+        >
+          <Settings className="h-4 w-4" />
+        </Button>
+      </div>
+    </div>
+  );
+}
+
+export function LiveActivityFullscreenBar({ onExit }: { onExit: () => void }) {
+  const { t } = useTranslation();
+
+  return (
+    <div className="flex items-center justify-between gap-2 h-9 px-3 pt-[var(--sai-top,env(safe-area-inset-top))] bg-black/50 backdrop-blur-sm shrink-0">
+      <span className="text-white/70 font-medium text-xs min-w-0 truncate">
+        {t('live_activity.title')}
+      </span>
+      <Button
+        onClick={onExit}
+        variant="ghost"
+        size="icon"
+        className="text-white/70 hover:text-white hover:bg-white/10 h-7 w-7"
+        title={t('live_activity.exit_fullscreen')}
+        aria-label={t('live_activity.exit_fullscreen')}
+        data-testid="live-activity-exit-fullscreen-btn"
+      >
+        <Minimize className="h-4 w-4" />
+      </Button>
+    </div>
+  );
+}