Miscellaneous Fixes (0.17 beta) (#21396)

* use fallback timeout for opening media source

covers the case where there is no active connection to the go2rtc stream and the camera takes a long time to start

* Add review thumbnail URL to integration docs

* fix weekday starting point on explore when set to monday in UI settings

* only show allowed cameras and groups in camera filter button

* Reset the wizard state after closing with model

* remove footnote about 0.17

* 0.17

* add triggers to note

* add slovak

* Ensure genai client exists

* Correctly catch JSONDecodeError

* clarify docs for none class

* version bump on updating page

* fix ExportRecordingsBody to allow optional name field

fixes https://github.com/blakeblackshear/frigate/discussions/21413 because of https://github.com/blakeblackshear/frigate-hass-integration/pull/1021

* Catch remote protocol error from ollama

---------

Co-authored-by: Nicolas Mowen <nickmowen213@gmail.com>

web/src/components/classification/ClassificationModelWizardDialog.tsx

@@ -137,6 +137,11 @@ export default function ClassificationModelWizardDialog({
     onClose();
   };
 
+  const handleSuccessClose = () => {
+    dispatch({ type: "RESET" });
+    onClose();
+  };
+
   return (
     <Dialog
       open={open}
@@ -207,7 +212,7 @@ export default function ClassificationModelWizardDialog({
                 step1Data={wizardState.step1Data}
                 step2Data={wizardState.step2Data}
                 initialData={wizardState.step3Data}
-                onClose={onClose}
+                onClose={handleSuccessClose}
                 onBack={handleBack}
               />
             )}

web/src/components/filter/CalendarFilterButton.tsx

@@ -18,6 +18,7 @@ import PlatformAwareDialog from "../overlay/dialog/PlatformAwareDialog";
 import { useTranslation } from "react-i18next";
 import useSWR from "swr";
 import { FrigateConfig } from "@/types/frigateConfig";
+import { useUserPersistence } from "@/hooks/use-user-persistence";
 
 type CalendarFilterButtonProps = {
   reviewSummary?: ReviewSummary;
@@ -105,6 +106,7 @@ export function CalendarRangeFilterButton({
   const { t } = useTranslation(["components/filter"]);
   const { data: config } = useSWR<FrigateConfig>("config");
   const timezone = useTimezone(config);
+  const [weekStartsOn] = useUserPersistence("weekStartsOn", 0);
   const [open, setOpen] = useState(false);
 
   const selectedDate = useFormattedRange(
@@ -138,6 +140,7 @@ export function CalendarRangeFilterButton({
         initialDateTo={range?.to}
         timezone={timezone}
         showCompare={false}
+        weekStartsOn={weekStartsOn}
         onUpdate={(range) => {
           updateSelectedRange(range.range);
           setOpen(false);

web/src/components/filter/CamerasFilterButton.tsx

@@ -13,6 +13,7 @@ import { Drawer, DrawerContent, DrawerTrigger } from "../ui/drawer";
 import FilterSwitch from "./FilterSwitch";
 import { FaVideo } from "react-icons/fa";
 import { useTranslation } from "react-i18next";
+import { useAllowedCameras } from "@/hooks/use-allowed-cameras";
 
 type CameraFilterButtonProps = {
   allCameras: string[];
@@ -35,6 +36,30 @@ export function CamerasFilterButton({
   const [currentCameras, setCurrentCameras] = useState<string[] | undefined>(
     selectedCameras,
   );
+  const allowedCameras = useAllowedCameras();
+
+  // Filter cameras to only include those the user has access to
+  const filteredCameras = useMemo(
+    () => allCameras.filter((camera) => allowedCameras.includes(camera)),
+    [allCameras, allowedCameras],
+  );
+
+  // Filter groups to only include those with at least one allowed camera
+  const filteredGroups = useMemo(
+    () =>
+      groups
+        .map(([name, config]) => {
+          const allowedGroupCameras = config.cameras.filter((camera) =>
+            allowedCameras.includes(camera),
+          );
+          return [name, { ...config, cameras: allowedGroupCameras }] as [
+            string,
+            CameraGroupConfig,
+          ];
+        })
+        .filter(([, config]) => config.cameras.length > 0),
+    [groups, allowedCameras],
+  );
 
   const buttonText = useMemo(() => {
     if (isMobile) {
@@ -79,8 +104,8 @@ export function CamerasFilterButton({
   );
   const content = (
     <CamerasFilterContent
-      allCameras={allCameras}
-      groups={groups}
+      allCameras={filteredCameras}
+      groups={filteredGroups}
       currentCameras={currentCameras}
       mainCamera={mainCamera}
       setCurrentCameras={setCurrentCameras}

web/src/components/player/MsePlayer.tsx

@@ -260,7 +260,7 @@ function MSEPlayer({
               // @ts-expect-error for typing
               value: codecs(MediaSource.isTypeSupported),
             },
-            3000,
+            (fallbackTimeout ?? 3) * 1000,
           ).catch(() => {
             if (wsRef.current) {
               onDisconnect();
@@ -290,7 +290,7 @@ function MSEPlayer({
               type: "mse",
               value: codecs(MediaSource.isTypeSupported),
             },
-            3000,
+            (fallbackTimeout ?? 3) * 1000,
           ).catch(() => {
             if (wsRef.current) {
               onDisconnect();

web/src/components/ui/calendar-range.tsx

@@ -35,6 +35,8 @@ export interface DateRangePickerProps {
   showCompare?: boolean;
   /** timezone */
   timezone?: string;
+  /** First day of the week: 0 = Sunday, 1 = Monday */
+  weekStartsOn?: number;
 }
 
 const getDateAdjustedForTimezone = (
@@ -91,6 +93,7 @@ export function DateRangePicker({
   onUpdate,
   onReset,
   showCompare = true,
+  weekStartsOn = 0,
 }: DateRangePickerProps) {
   const [isOpen, setIsOpen] = useState(false);
 
@@ -150,7 +153,9 @@ export function DateRangePicker({
     if (!preset) throw new Error(`Unknown date range preset: ${presetName}`);
     const from = new TZDate(new Date(), timezone);
     const to = new TZDate(new Date(), timezone);
-    const first = from.getDate() - from.getDay();
+    const dayOfWeek = from.getDay();
+    const daysFromWeekStart = (dayOfWeek - weekStartsOn + 7) % 7;
+    const first = from.getDate() - daysFromWeekStart;
 
     switch (preset.name) {
       case "today":
@@ -184,8 +189,8 @@ export function DateRangePicker({
         to.setHours(23, 59, 59, 999);
         break;
       case "lastWeek":
-        from.setDate(from.getDate() - 7 - from.getDay());
-        to.setDate(to.getDate() - to.getDay() - 1);
+        from.setDate(first - 7);
+        to.setDate(first - 1);
         from.setHours(0, 0, 0, 0);
         to.setHours(23, 59, 59, 999);
         break;

web/src/lib/const.ts

@@ -23,5 +23,6 @@ export const supportedLanguageKeys = [
   "lt",
   "uk",
   "cs",
+  "sk",
   "hu",
 ];