fix: Honor the view configured display mode (#1815)

- Closes #1812

src/card-controller/view/factory.ts

@@ -121,11 +121,15 @@ export class ViewFactory {
         });
       }
     }
-
+    const configuredDisplayMode = this._getDefaultDisplayModeForView(viewName, config);
     const displayMode =
+      // Prioritize the configured display mode (if present).
+      // See: https://github.com/dermotduffy/frigate-hass-card/issues/1812
+      (viewName !== options?.baseView?.view ? configuredDisplayMode : null) ??
       options?.params?.displayMode ??
       options?.baseView?.displayMode ??
-      this._getDefaultDisplayModeForView(viewName, config);
+      configuredDisplayMode ??
+      'single';
 
     const viewParameters: ViewParameters = {
       ...options?.params,
@@ -150,7 +154,7 @@ export class ViewFactory {
   protected _getDefaultDisplayModeForView(
     viewName: FrigateCardView,
     config: FrigateCardConfig,
-  ): ViewDisplayMode {
+  ): ViewDisplayMode | null {
     let mode: ViewDisplayMode | null = null;
     switch (viewName) {
       case 'media':
@@ -163,6 +167,6 @@ export class ViewFactory {
         mode = config.live.display?.mode ?? null;
         break;
     }
-    return mode ?? 'single';
+    return mode;
   }
 }

src/config/types.ts

@@ -115,7 +115,7 @@ export type ViewDisplayMode = z.infer<typeof viewDisplayModeSchema>;
 
 const viewDisplaySchema = z
   .object({
-    mode: viewDisplayModeSchema,
+    mode: viewDisplayModeSchema.optional(),
     grid_selected_width_factor: z.number().min(0).optional(),
     grid_max_columns: z.number().min(0).optional(),
     grid_columns: z.number().min(0).optional(),

tests/card-controller/view/factory.test.ts

@@ -320,6 +320,48 @@ describe('getViewByParameters', () => {
     expect(modifyCallback).toHaveBeenCalledWith(modifiedView);
   });
 
+  describe('should get correct display mode', () => {
+    it('should use config display mode when changing views', () => {
+      const api = createPopulatedAPI({
+        media_viewer: {
+          display: { mode: 'single' },
+        },
+      });
+
+      const factory = new ViewFactory(api);
+      expect(
+        factory.getViewByParameters({
+          params: {
+            view: 'clip',
+            displayMode: 'grid',
+          },
+        })?.displayMode,
+      ).toBe('single');
+    });
+
+    it('should ignore config display mode with a view', () => {
+      const api = createPopulatedAPI({
+        media_viewer: {
+          display: { mode: 'single' },
+        },
+      });
+
+      const baseView = createView({
+        view: 'live',
+      });
+
+      const factory = new ViewFactory(api);
+      expect(
+        factory.getViewByParameters({
+          baseView: baseView,
+          params: {
+            view: 'live',
+            displayMode: 'grid',
+          },
+        })?.displayMode,
+      ).toBe('grid');
+    });
+
     describe('should get correct default display mode', () => {
       describe.each([
         ['single' as const, { mode: 'single' as const }],
@@ -354,3 +396,4 @@ describe('getViewByParameters', () => {
       });
     });
   });
+});