Merge remote-tracking branch 'origin/master' into dev

web/src/components/menu/GeneralSettings.tsx

@@ -346,7 +346,9 @@ export default function GeneralSettings({ className }: GeneralSettingsProps) {
               <Portal>
                 <SubItemContent
                   className={
-                    isDesktop ? "" : "w-[92%] rounded-lg md:rounded-2xl"
+                    isDesktop
+                      ? ""
+                      : "scrollbar-container max-h-[75dvh] w-[92%] overflow-y-scroll rounded-lg md:rounded-2xl"
                   }
                 >
                   <span tabIndex={0} className="sr-only" />

web/src/components/overlay/ExportDialog.tsx

@@ -433,137 +433,139 @@ function CustomTimeSelector({
       className={`mt-3 flex items-center rounded-lg bg-secondary text-secondary-foreground ${isDesktop ? "mx-8 gap-2 px-2" : "pl-2"}`}
     >
       <FaCalendarAlt />
-      <Popover
-        open={startOpen}
-        onOpenChange={(open) => {
-          if (!open) {
-            setStartOpen(false);
-          }
-        }}
-      >
-        <PopoverTrigger asChild>
-          <Button
-            className={`text-primary ${isDesktop ? "" : "text-xs"}`}
-            aria-label={t("export.time.start.title")}
-            variant={startOpen ? "select" : "default"}
-            size="sm"
-            onClick={() => {
-              setStartOpen(true);
-              setEndOpen(false);
-            }}
-          >
-            {formattedStart}
-          </Button>
-        </PopoverTrigger>
-        <PopoverContent className="flex flex-col items-center">
-          <TimezoneAwareCalendar
-            timezone={config?.ui.timezone}
-            selectedDay={new Date(startTime * 1000)}
-            onSelect={(day) => {
-              if (!day) {
-                return;
-              }
-
-              setRange({
-                before: endTime,
-                after: day.getTime() / 1000 + 1,
-              });
-            }}
-          />
-          <SelectSeparator className="bg-secondary" />
-          <input
-            className="text-md mx-4 w-full border border-input bg-background p-1 text-secondary-foreground hover:bg-accent hover:text-accent-foreground dark:[color-scheme:dark]"
-            id="startTime"
-            type="time"
-            value={startClock}
-            step={isIOS ? "60" : "1"}
-            onChange={(e) => {
-              const clock = e.target.value;
-              const [hour, minute, second] = isIOS
-                ? [...clock.split(":"), "00"]
-                : clock.split(":");
-
-              const start = new Date(startTime * 1000);
-              start.setHours(
-                parseInt(hour),
-                parseInt(minute),
-                parseInt(second ?? 0),
-                0,
-              );
-              setRange({
-                before: endTime,
-                after: start.getTime() / 1000,
-              });
-            }}
-          />
-        </PopoverContent>
-      </Popover>
-      <FaArrowRight className="size-4 text-primary" />
-      <Popover
-        open={endOpen}
-        onOpenChange={(open) => {
-          if (!open) {
-            setEndOpen(false);
-          }
-        }}
-      >
-        <PopoverTrigger asChild>
-          <Button
-            className={`text-primary ${isDesktop ? "" : "text-xs"}`}
-            aria-label={t("export.time.end.title")}
-            variant={endOpen ? "select" : "default"}
-            size="sm"
-            onClick={() => {
-              setEndOpen(true);
+      <div className="flex flex-wrap items-center">
+        <Popover
+          open={startOpen}
+          onOpenChange={(open) => {
+            if (!open) {
               setStartOpen(false);
-            }}
-          >
-            {formattedEnd}
-          </Button>
-        </PopoverTrigger>
-        <PopoverContent className="flex flex-col items-center">
-          <TimezoneAwareCalendar
-            timezone={config?.ui.timezone}
-            selectedDay={new Date(endTime * 1000)}
-            onSelect={(day) => {
-              if (!day) {
-                return;
-              }
+            }
+          }}
+        >
+          <PopoverTrigger asChild>
+            <Button
+              className={`text-primary ${isDesktop ? "" : "text-xs"}`}
+              aria-label={t("export.time.start.title")}
+              variant={startOpen ? "select" : "default"}
+              size="sm"
+              onClick={() => {
+                setStartOpen(true);
+                setEndOpen(false);
+              }}
+            >
+              {formattedStart}
+            </Button>
+          </PopoverTrigger>
+          <PopoverContent className="flex flex-col items-center">
+            <TimezoneAwareCalendar
+              timezone={config?.ui.timezone}
+              selectedDay={new Date(startTime * 1000)}
+              onSelect={(day) => {
+                if (!day) {
+                  return;
+                }
 
-              setRange({
-                after: startTime,
-                before: day.getTime() / 1000,
-              });
-            }}
-          />
-          <SelectSeparator className="bg-secondary" />
-          <input
-            className="text-md mx-4 w-full border border-input bg-background p-1 text-secondary-foreground hover:bg-accent hover:text-accent-foreground dark:[color-scheme:dark]"
-            id="startTime"
-            type="time"
-            value={endClock}
-            step={isIOS ? "60" : "1"}
-            onChange={(e) => {
-              const clock = e.target.value;
-              const [hour, minute, second] = isIOS
-                ? [...clock.split(":"), "00"]
-                : clock.split(":");
+                setRange({
+                  before: endTime,
+                  after: day.getTime() / 1000 + 1,
+                });
+              }}
+            />
+            <SelectSeparator className="bg-secondary" />
+            <input
+              className="text-md mx-4 w-full border border-input bg-background p-1 text-secondary-foreground hover:bg-accent hover:text-accent-foreground dark:[color-scheme:dark]"
+              id="startTime"
+              type="time"
+              value={startClock}
+              step={isIOS ? "60" : "1"}
+              onChange={(e) => {
+                const clock = e.target.value;
+                const [hour, minute, second] = isIOS
+                  ? [...clock.split(":"), "00"]
+                  : clock.split(":");
 
-              const end = new Date(endTime * 1000);
-              end.setHours(
-                parseInt(hour),
-                parseInt(minute),
-                parseInt(second ?? 0),
-                0,
-              );
-              setRange({
-                before: end.getTime() / 1000,
-                after: startTime,
-              });
-            }}
-          />
-        </PopoverContent>
-      </Popover>
+                const start = new Date(startTime * 1000);
+                start.setHours(
+                  parseInt(hour),
+                  parseInt(minute),
+                  parseInt(second ?? 0),
+                  0,
+                );
+                setRange({
+                  before: endTime,
+                  after: start.getTime() / 1000,
+                });
+              }}
+            />
+          </PopoverContent>
+        </Popover>
+        <FaArrowRight className="size-4 text-primary" />
+        <Popover
+          open={endOpen}
+          onOpenChange={(open) => {
+            if (!open) {
+              setEndOpen(false);
+            }
+          }}
+        >
+          <PopoverTrigger asChild>
+            <Button
+              className={`text-primary ${isDesktop ? "" : "text-xs"}`}
+              aria-label={t("export.time.end.title")}
+              variant={endOpen ? "select" : "default"}
+              size="sm"
+              onClick={() => {
+                setEndOpen(true);
+                setStartOpen(false);
+              }}
+            >
+              {formattedEnd}
+            </Button>
+          </PopoverTrigger>
+          <PopoverContent className="flex flex-col items-center">
+            <TimezoneAwareCalendar
+              timezone={config?.ui.timezone}
+              selectedDay={new Date(endTime * 1000)}
+              onSelect={(day) => {
+                if (!day) {
+                  return;
+                }
+
+                setRange({
+                  after: startTime,
+                  before: day.getTime() / 1000,
+                });
+              }}
+            />
+            <SelectSeparator className="bg-secondary" />
+            <input
+              className="text-md mx-4 w-full border border-input bg-background p-1 text-secondary-foreground hover:bg-accent hover:text-accent-foreground dark:[color-scheme:dark]"
+              id="startTime"
+              type="time"
+              value={endClock}
+              step={isIOS ? "60" : "1"}
+              onChange={(e) => {
+                const clock = e.target.value;
+                const [hour, minute, second] = isIOS
+                  ? [...clock.split(":"), "00"]
+                  : clock.split(":");
+
+                const end = new Date(endTime * 1000);
+                end.setHours(
+                  parseInt(hour),
+                  parseInt(minute),
+                  parseInt(second ?? 0),
+                  0,
+                );
+                setRange({
+                  before: end.getTime() / 1000,
+                  after: startTime,
+                });
+              }}
+            />
+          </PopoverContent>
+        </Popover>
+      </div>
     </div>
   );
 }

web/src/components/player/GenericVideoPlayer.tsx

@@ -1,4 +1,10 @@
-import React, { useState, useRef, useEffect, useCallback } from "react";
+import React, {
+  useState,
+  useRef,
+  useEffect,
+  useCallback,
+  useMemo,
+} from "react";
 import { useVideoDimensions } from "@/hooks/use-video-dimensions";
 import HlsVideoPlayer from "./HlsVideoPlayer";
 import ActivityIndicator from "../indicators/activity-indicator";
@@ -89,6 +95,12 @@ export function GenericVideoPlayer({
     },
   );
 
+  const hlsSource = useMemo(() => {
+    return {
+      playlist: source,
+    };
+  }, [source]);
+
   return (
     <div ref={containerRef} className="relative flex h-full w-full flex-col">
       <div className="relative flex flex-grow items-center justify-center">
@@ -107,9 +119,7 @@ export function GenericVideoPlayer({
             >
               <HlsVideoPlayer
                 videoRef={videoRef}
-                currentSource={{
-                  playlist: source,
-                }}
+                currentSource={hlsSource}
                 hotKeys
                 visible
                 frigateControls={false}

web/src/components/player/HlsVideoPlayer.tsx

@@ -123,13 +123,6 @@ export default function HlsVideoPlayer({
       return;
     }
 
-    // we must destroy the hlsRef every time the source changes
-    // so that we can create a new HLS instance with startPosition
-    // set at the optimal point in time
-    if (hlsRef.current) {
-      hlsRef.current.destroy();
-    }
-
     hlsRef.current = new Hls({
       maxBufferLength: 10,
       maxBufferSize: 20 * 1000 * 1000,
@@ -138,6 +131,15 @@ export default function HlsVideoPlayer({
     hlsRef.current.attachMedia(videoRef.current);
     hlsRef.current.loadSource(currentSource.playlist);
     videoRef.current.playbackRate = currentPlaybackRate;
+
+    return () => {
+      // we must destroy the hlsRef every time the source changes
+      // so that we can create a new HLS instance with startPosition
+      // set at the optimal point in time
+      if (hlsRef.current) {
+        hlsRef.current.destroy();
+      }
+    }
   }, [videoRef, hlsRef, useHlsCompat, currentSource]);
 
   // state handling

web/src/components/player/JSMpegPlayer.tsx

@@ -164,7 +164,7 @@ export default function JSMpegPlayer({
         statsIntervalRef.current = setInterval(() => {
           const currentTimestamp = Date.now();
           const timeDiff = (currentTimestamp - lastTimestampRef.current) / 1000; // in seconds
-          const bitrate = (bytesReceivedRef.current * 8) / timeDiff / 1000; // in kbps
+          const bitrate = bytesReceivedRef.current / timeDiff / 1000; // in kBps
 
           setStats?.({
             streamType: "jsmpeg",

web/src/components/player/LivePlayer.tsx

@@ -82,7 +82,7 @@ export default function LivePlayer({
 
   const [stats, setStats] = useState<PlayerStatsType>({
     streamType: "-",
-    bandwidth: 0, // in kbps
+    bandwidth: 0, // in kBps
     latency: undefined, // in seconds
     totalFrames: 0,
     droppedFrames: undefined,

web/src/components/player/MsePlayer.tsx

@@ -338,7 +338,7 @@ function MSEPlayer({
           // console.debug("VideoRTC.buffer", b.byteLength, bufLen);
         } else {
           try {
-            sb?.appendBuffer(data);
+            sb?.appendBuffer(data as ArrayBuffer);
           } catch (e) {
             // no-op
           }
@@ -592,7 +592,7 @@ function MSEPlayer({
         const now = Date.now();
         const bytesLoaded = totalBytesLoaded.current;
         const timeElapsed = (now - lastTimestamp) / 1000; // seconds
-        const bandwidth = (bytesLoaded - lastLoadedBytes) / timeElapsed / 1024; // kbps
+        const bandwidth = (bytesLoaded - lastLoadedBytes) / timeElapsed / 1000; // kBps
 
         lastLoadedBytes = bytesLoaded;
         lastTimestamp = now;

web/src/components/player/PlayerStats.tsx

@@ -17,7 +17,7 @@ export function PlayerStats({ stats, minimal }: PlayerStatsProps) {
       </p>
       <p>
         <span className="text-white/70">{t("stats.bandwidth.title")}</span>{" "}
-        <span className="text-white">{stats.bandwidth.toFixed(2)} kbps</span>
+        <span className="text-white">{stats.bandwidth.toFixed(2)} kBps</span>
       </p>
       {stats.latency != undefined && (
         <p>
@@ -66,7 +66,7 @@ export function PlayerStats({ stats, minimal }: PlayerStatsProps) {
       </div>
       <div className="flex flex-col items-center gap-1">
         <span className="text-white/70">{t("stats.bandwidth.short")}</span>{" "}
-        <span className="text-white">{stats.bandwidth.toFixed(2)} kbps</span>
+        <span className="text-white">{stats.bandwidth.toFixed(2)} kBps</span>
       </div>
       {stats.latency != undefined && (
         <div className="hidden flex-col items-center gap-1 md:flex">

web/src/components/player/WebRTCPlayer.tsx

@@ -266,7 +266,7 @@ export default function WebRtcPlayer({
         const bitrate =
           timeDiff > 0
             ? (bytesReceived - lastBytesReceived) / timeDiff / 1000
-            : 0; // in kbps
+            : 0; // in kBps
 
         setStats?.({
           streamType: "WebRTC",

web/src/hooks/use-camera-live-mode.ts

@@ -1,5 +1,5 @@
 import { CameraConfig, FrigateConfig } from "@/types/frigateConfig";
-import { useCallback, useEffect, useState } from "react";
+import { useCallback, useEffect, useState, useMemo } from "react";
 import useSWR from "swr";
 import { LivePlayerMode, LiveStreamMetadata } from "@/types/live";
 
@@ -8,9 +8,54 @@ export default function useCameraLiveMode(
   windowVisible: boolean,
 ) {
   const { data: config } = useSWR<FrigateConfig>("config");
-  const { data: allStreamMetadata } = useSWR<{
+
+  // Get comma-separated list of restreamed stream names for SWR key
+  const restreamedStreamsKey = useMemo(() => {
+    if (!cameras || !config) return null;
+
+    const streamNames = new Set<string>();
+    cameras.forEach((camera) => {
+      const isRestreamed = Object.keys(config.go2rtc.streams || {}).includes(
+        Object.values(camera.live.streams)[0],
+      );
+
+      if (isRestreamed) {
+        Object.values(camera.live.streams).forEach((streamName) => {
+          streamNames.add(streamName);
+        });
+      }
+    });
+
+    return streamNames.size > 0
+      ? Array.from(streamNames).sort().join(",")
+      : null;
+  }, [cameras, config]);
+
+  const streamsFetcher = useCallback(async (key: string) => {
+    const streamNames = key.split(",");
+    const metadata: { [key: string]: LiveStreamMetadata } = {};
+
+    await Promise.all(
+      streamNames.map(async (streamName) => {
+        try {
+          const response = await fetch(`/api/go2rtc/streams/${streamName}`);
+          if (response.ok) {
+            const data = await response.json();
+            metadata[streamName] = data;
+          }
+        } catch (error) {
+          // eslint-disable-next-line no-console
+          console.error(`Failed to fetch metadata for ${streamName}:`, error);
+        }
+      }),
+    );
+
+    return metadata;
+  }, []);
+
+  const { data: allStreamMetadata = {} } = useSWR<{
     [key: string]: LiveStreamMetadata;
-  }>(config ? "go2rtc/streams" : null, { revalidateOnFocus: false });
+  }>(restreamedStreamsKey, streamsFetcher, { revalidateOnFocus: false });
 
   const [preferredLiveModes, setPreferredLiveModes] = useState<{
     [key: string]: LivePlayerMode;

web/src/hooks/use-video-dimensions.ts

@@ -17,7 +17,7 @@ export function useVideoDimensions(
   });
 
   const videoAspectRatio = useMemo(() => {
-    return videoResolution.width / videoResolution.height;
+    return videoResolution.width / videoResolution.height || 16 / 9;
   }, [videoResolution]);
 
   const containerAspectRatio = useMemo(() => {
@@ -25,8 +25,8 @@ export function useVideoDimensions(
   }, [containerWidth, containerHeight]);
 
   const videoDimensions = useMemo(() => {
-    if (!containerWidth || !containerHeight || !videoAspectRatio)
-      return { width: "100%", height: "100%" };
+    if (!containerWidth || !containerHeight)
+      return { aspectRatio: "16 / 9", width: "100%" };
     if (containerAspectRatio > videoAspectRatio) {
       const height = containerHeight;
       const width = height * videoAspectRatio;

web/src/pages/Settings.tsx

@@ -76,7 +76,11 @@ export default function Settings() {
 
   const isAdmin = useIsAdmin();
 
-  const allowedViewsForViewer: SettingsType[] = ["ui", "debug"];
+  const allowedViewsForViewer: SettingsType[] = [
+    "ui",
+    "debug",
+    "notifications",
+  ];
   const visibleSettingsViews = !isAdmin
     ? allowedViewsForViewer
     : allSettingsViews;
@@ -167,7 +171,7 @@ export default function Settings() {
   useSearchEffect("page", (page: string) => {
     if (allSettingsViews.includes(page as SettingsType)) {
       // Restrict viewer to UI settings
-      if (!isAdmin && !["ui", "debug"].includes(page)) {
+      if (!isAdmin && !allowedViewsForViewer.includes(page as SettingsType)) {
         setPage("ui");
       } else {
         setPage(page as SettingsType);
@@ -203,7 +207,7 @@ export default function Settings() {
               onValueChange={(value: SettingsType) => {
                 if (value) {
                   // Restrict viewer navigation
-                  if (!isAdmin && !["ui", "debug"].includes(value)) {
+                  if (!isAdmin && !allowedViewsForViewer.includes(value)) {
                     setPageToggle("ui");
                   } else {
                     setPageToggle(value);

web/src/views/settings/NotificationsSettingsView.tsx

@@ -46,6 +46,8 @@ import { Trans, useTranslation } from "react-i18next";
 import { useDateLocale } from "@/hooks/use-date-locale";
 import { useDocDomain } from "@/hooks/use-doc-domain";
 import { CameraNameLabel } from "@/components/camera/CameraNameLabel";
+import { useIsAdmin } from "@/hooks/use-is-admin";
+import { cn } from "@/lib/utils";
 
 const NOTIFICATION_SERVICE_WORKER = "notifications-worker.js";
 
@@ -64,6 +66,10 @@ export default function NotificationView({
   const { t } = useTranslation(["views/settings"]);
   const { getLocaleDocUrl } = useDocDomain();
 
+  // roles
+
+  const isAdmin = useIsAdmin();
+
   const { data: config, mutate: updateConfig } = useSWR<FrigateConfig>(
     "config",
     {
@@ -380,7 +386,11 @@ export default function NotificationView({
       <div className="flex size-full flex-col md:flex-row">
         <Toaster position="top-center" closeButton={true} />
         <div className="scrollbar-container order-last mb-10 mt-2 flex h-full w-full flex-col overflow-y-auto rounded-lg border-[1px] border-secondary-foreground bg-background_alt p-2 md:order-none md:mb-0 md:mr-2 md:mt-0">
-          <div className="grid w-full grid-cols-1 gap-4 md:grid-cols-2">
+          <div
+            className={cn(
+              isAdmin && "grid w-full grid-cols-1 gap-4 md:grid-cols-2",
+            )}
+          >
             <div className="col-span-1">
               <Heading as="h3" className="my-2">
                 {t("notification.notificationSettings.title")}
@@ -403,139 +413,152 @@ export default function NotificationView({
                 </div>
               </div>
 
-              <Form {...form}>
-                <form
-                  onSubmit={form.handleSubmit(onSubmit)}
-                  className="mt-2 space-y-6"
-                >
-                  <FormField
-                    control={form.control}
-                    name="email"
-                    render={({ field }) => (
-                      <FormItem>
-                        <FormLabel>{t("notification.email.title")}</FormLabel>
-                        <FormControl>
-                          <Input
-                            className="text-md w-full border border-input bg-background p-2 hover:bg-accent hover:text-accent-foreground dark:[color-scheme:dark] md:w-72"
-                            placeholder={t("notification.email.placeholder")}
-                            {...field}
-                          />
-                        </FormControl>
-                        <FormDescription>
-                          {t("notification.email.desc")}
-                        </FormDescription>
-                        <FormMessage />
-                      </FormItem>
-                    )}
-                  />
+              {isAdmin && (
+                <Form {...form}>
+                  <form
+                    onSubmit={form.handleSubmit(onSubmit)}
+                    className="mt-2 space-y-6"
+                  >
+                    <FormField
+                      control={form.control}
+                      name="email"
+                      render={({ field }) => (
+                        <FormItem>
+                          <FormLabel>{t("notification.email.title")}</FormLabel>
+                          <FormControl>
+                            <Input
+                              className="text-md w-full border border-input bg-background p-2 hover:bg-accent hover:text-accent-foreground dark:[color-scheme:dark] md:w-72"
+                              placeholder={t("notification.email.placeholder")}
+                              {...field}
+                            />
+                          </FormControl>
+                          <FormDescription>
+                            {t("notification.email.desc")}
+                          </FormDescription>
+                          <FormMessage />
+                        </FormItem>
+                      )}
+                    />
 
-                  <FormField
-                    control={form.control}
-                    name="cameras"
-                    render={({ field }) => (
-                      <FormItem>
-                        {allCameras && allCameras?.length > 0 ? (
-                          <>
-                            <div className="mb-2">
-                              <FormLabel className="flex flex-row items-center text-base">
-                                {t("notification.cameras.title")}
-                              </FormLabel>
-                            </div>
-                            <div className="max-w-md space-y-2 rounded-lg bg-secondary p-4">
-                              <FormField
-                                control={form.control}
-                                name="allEnabled"
-                                render={({ field }) => (
+                    <FormField
+                      control={form.control}
+                      name="cameras"
+                      render={({ field }) => (
+                        <FormItem>
+                          {allCameras && allCameras?.length > 0 ? (
+                            <>
+                              <div className="mb-2">
+                                <FormLabel className="flex flex-row items-center text-base">
+                                  {t("notification.cameras.title")}
+                                </FormLabel>
+                              </div>
+                              <div className="max-w-md space-y-2 rounded-lg bg-secondary p-4">
+                                <FormField
+                                  control={form.control}
+                                  name="allEnabled"
+                                  render={({ field }) => (
+                                    <FilterSwitch
+                                      label={t("cameras.all.title", {
+                                        ns: "components/filter",
+                                      })}
+                                      isChecked={field.value}
+                                      onCheckedChange={(checked) => {
+                                        setChangedValue(true);
+                                        if (checked) {
+                                          form.setValue("cameras", []);
+                                        }
+                                        field.onChange(checked);
+                                      }}
+                                    />
+                                  )}
+                                />
+                                {allCameras?.map((camera) => (
                                   <FilterSwitch
-                                    label={t("cameras.all.title", {
-                                      ns: "components/filter",
-                                    })}
-                                    isChecked={field.value}
+                                    key={camera.name}
+                                    label={camera.name}
+                                    isCameraName={true}
+                                    isChecked={field.value?.includes(
+                                      camera.name,
+                                    )}
                                     onCheckedChange={(checked) => {
                                       setChangedValue(true);
+                                      let newCameras;
                                       if (checked) {
-                                        form.setValue("cameras", []);
+                                        newCameras = [
+                                          ...field.value,
+                                          camera.name,
+                                        ];
+                                      } else {
+                                        newCameras = field.value?.filter(
+                                          (value) => value !== camera.name,
+                                        );
                                       }
-                                      field.onChange(checked);
+                                      field.onChange(newCameras);
+                                      form.setValue("allEnabled", false);
                                     }}
                                   />
-                                )}
-                              />
-                              {allCameras?.map((camera) => (
-                                <FilterSwitch
-                                  key={camera.name}
-                                  label={camera.name}
-                                  isCameraName={true}
-                                  isChecked={field.value?.includes(camera.name)}
-                                  onCheckedChange={(checked) => {
-                                    setChangedValue(true);
-                                    let newCameras;
-                                    if (checked) {
-                                      newCameras = [
-                                        ...field.value,
-                                        camera.name,
-                                      ];
-                                    } else {
-                                      newCameras = field.value?.filter(
-                                        (value) => value !== camera.name,
-                                      );
-                                    }
-                                    field.onChange(newCameras);
-                                    form.setValue("allEnabled", false);
-                                  }}
-                                />
-                              ))}
+                                ))}
+                              </div>
+                            </>
+                          ) : (
+                            <div className="font-normal text-destructive">
+                              {t("notification.cameras.noCameras")}
                             </div>
-                          </>
-                        ) : (
-                          <div className="font-normal text-destructive">
-                            {t("notification.cameras.noCameras")}
-                          </div>
-                        )}
+                          )}
 
-                        <FormMessage />
-                        <FormDescription>
-                          {t("notification.cameras.desc")}
-                        </FormDescription>
-                      </FormItem>
-                    )}
-                  />
-
-                  <div className="flex w-full flex-row items-center gap-2 pt-2 md:w-[50%]">
-                    <Button
-                      className="flex flex-1"
-                      aria-label={t("button.cancel", { ns: "common" })}
-                      onClick={onCancel}
-                      type="button"
-                    >
-                      {t("button.cancel", { ns: "common" })}
-                    </Button>
-                    <Button
-                      variant="select"
-                      disabled={isLoading}
-                      className="flex flex-1"
-                      aria-label={t("button.save", { ns: "common" })}
-                      type="submit"
-                    >
-                      {isLoading ? (
-                        <div className="flex flex-row items-center gap-2">
-                          <ActivityIndicator />
-                          <span>{t("button.saving", { ns: "common" })}</span>
-                        </div>
-                      ) : (
-                        t("button.save", { ns: "common" })
+                          <FormMessage />
+                          <FormDescription>
+                            {t("notification.cameras.desc")}
+                          </FormDescription>
+                        </FormItem>
                       )}
-                    </Button>
-                  </div>
-                </form>
-              </Form>
+                    />
+
+                    <div className="flex w-full flex-row items-center gap-2 pt-2 md:w-[50%]">
+                      <Button
+                        className="flex flex-1"
+                        aria-label={t("button.cancel", { ns: "common" })}
+                        onClick={onCancel}
+                        type="button"
+                      >
+                        {t("button.cancel", { ns: "common" })}
+                      </Button>
+                      <Button
+                        variant="select"
+                        disabled={isLoading}
+                        className="flex flex-1"
+                        aria-label={t("button.save", { ns: "common" })}
+                        type="submit"
+                      >
+                        {isLoading ? (
+                          <div className="flex flex-row items-center gap-2">
+                            <ActivityIndicator />
+                            <span>{t("button.saving", { ns: "common" })}</span>
+                          </div>
+                        ) : (
+                          t("button.save", { ns: "common" })
+                        )}
+                      </Button>
+                    </div>
+                  </form>
+                </Form>
+              )}
             </div>
 
             <div className="col-span-1">
               <div className="mt-4 gap-2 space-y-6">
-                <div className="flex flex-col gap-2 md:max-w-[50%]">
-                  <Separator className="my-2 flex bg-secondary md:hidden" />
-                  <Heading as="h4" className="my-2">
+                <div
+                  className={cn(
+                    isAdmin && "flex flex-col gap-2 md:max-w-[50%]",
+                  )}
+                >
+                  <Separator
+                    className={cn(
+                      "my-2 flex bg-secondary",
+                      isAdmin && "md:hidden",
+                    )}
+                  />
+                  <Heading as="h4" className={cn(isAdmin ? "my-2" : "my-4")}>
                     {t("notification.deviceSpecific")}
                   </Heading>
                   <Button
@@ -581,7 +604,7 @@ export default function NotificationView({
                       ? t("notification.unregisterDevice")
                       : t("notification.registerDevice")}
                   </Button>
-                  {registration != null && registration.active && (
+                  {isAdmin && registration != null && registration.active && (
                     <Button
                       aria-label={t("notification.sendTestNotification")}
                       onClick={() => sendTestNotification("notification_test")}
@@ -591,7 +614,7 @@ export default function NotificationView({
                   )}
                 </div>
               </div>
-              {notificationCameras.length > 0 && (
+              {isAdmin && notificationCameras.length > 0 && (
                 <div className="mt-4 gap-2 space-y-6">
                   <div className="space-y-3">
                     <Separator className="my-2 flex bg-secondary" />