From 753cf02d907172dbace9aeafe23becb2df55ccf5 Mon Sep 17 00:00:00 2001 From: Dermot Duffy Date: Mon, 23 Feb 2026 18:59:41 -0800 Subject: [PATCH] docs: Add special case warning for fullscreen condition (#2373) --- docs/configuration/conditions.md | 12 ++++++- docs/examples.md | 55 ++++++++++++++++++++++++++++++ package.json | 1 - src/camera-manager/frigate/util.ts | 7 ++-- yarn.lock | 10 ------ 5 files changed, 68 insertions(+), 17 deletions(-) diff --git a/docs/configuration/conditions.md b/docs/configuration/conditions.md index 1ef95799..3f365b17 100644 --- a/docs/configuration/conditions.md +++ b/docs/configuration/conditions.md @@ -92,7 +92,17 @@ conditions: ## `fullscreen` -Matches based on whether the card is in fullscreen. +Matches based on whether the card (or media within it) is in fullscreen mode. + +> [!WARNING] +> When fullscreen is entered via a video player's built-in controls (rather than +> the card's own fullscreen [action](actions/custom/README.md) or menu button), +> the browser fullscreens the video element itself rather than the card. Any +> automation action that replaces that video element (e.g. switching substreams) +> will immediately exit fullscreen. A partial workaround may be to use the +> card's fullscreen action instead. See [Fullscreen with HD substream +> switching](../examples.md?id=fullscreen-with-hd-substream-switching) for an +> approach that combines substream switching with the card's fullscreen. ```yaml conditions: diff --git a/docs/examples.md b/docs/examples.md index 47ea73ae..b661b685 100644 --- a/docs/examples.md +++ b/docs/examples.md @@ -43,6 +43,12 @@ This example will automatically turn on the first configured substream when the card is put in fullscreen mode, and turn off the substream when exiting fullscreen mode. +> [!WARNING] +> When fullscreen is entered via a video player's built-in controls (rather than +> the card's fullscreen menu button), automation actions that replace _that_ video +> element (e.g. switching substreams from one video to another) will immediately exit fullscreen (as the browser sees the video the user clicked on be destroyed). See the +> [fullscreen condition](configuration/conditions.md?id=fullscreen) for details. + ```yaml type: custom:advanced-camera-card cameras: @@ -77,6 +83,55 @@ automations: advanced_camera_card_action: live_substream_off ``` +### Fullscreen with display mode and substream switching + +This example adds a custom menu button that switches to single display mode, +activates the HD substream, and enters card fullscreen — all in a single tap. +An automation restores the grid layout and substream when fullscreen is exited. +This is useful in [grid](configuration/live.md) layouts where the card's +standard fullscreen button would show all cameras rather than a single HD +stream. + +```yaml +type: custom:advanced-camera-card +cameras: + - camera_entity: camera.office + dependencies: + cameras: + - office_hd + - camera_entity: camera.office_hd + title: Office HD + id: office_hd + capabilities: + disable_except: + - substream +live: + display: + mode: grid +elements: + - type: custom:advanced-camera-card-menu-icon + icon: mdi:fullscreen + title: Fullscreen HD + tap_action: + - action: custom:advanced-camera-card-action + advanced_camera_card_action: display_mode_select + display_mode: single + - action: custom:advanced-camera-card-action + advanced_camera_card_action: live_substream_on + - action: custom:advanced-camera-card-action + advanced_camera_card_action: fullscreen +automations: + - conditions: + - condition: fullscreen + fullscreen: false + actions: + - action: custom:advanced-camera-card-action + advanced_camera_card_action: live_substream_off + - action: custom:advanced-camera-card-action + advanced_camera_card_action: display_mode_select + display_mode: grid +``` + ### Responding to key input In addition to a handful of reconfigurable [built-in keyboard shortcuts](./usage/keyboard-shortcuts.md), `automations` can be used to take any action based on any keyboard input. These examples use [`key` conditions](./configuration/conditions.md?id=key) to assess keyboard state before taking action. diff --git a/package.json b/package.json index 34efe135..574300dc 100644 --- a/package.json +++ b/package.json @@ -28,7 +28,6 @@ "component-emitter": "^1.3.1", "compute-scroll-into-view": "^3.1.1", "date-fns": "^3.6.0", - "date-fns-tz": "^3.1.3", "embla-carousel": "^8.6.0", "embla-carousel-wheel-gestures": "^8.0.1", "ha-nunjucks": "^1.3.0", diff --git a/src/camera-manager/frigate/util.ts b/src/camera-manager/frigate/util.ts index 89547f40..de58f61a 100644 --- a/src/camera-manager/frigate/util.ts +++ b/src/camera-manager/frigate/util.ts @@ -1,4 +1,3 @@ -import { toZonedTime } from 'date-fns-tz'; import { CameraConfig } from '../../config/schema/cameras'; import { Severity } from '../../severity'; import { formatDateAndTime, prettifyTitle } from '../../utils/basic'; @@ -14,7 +13,6 @@ import { * @param event */ export const getEventTitle = (event: FrigateEvent): string => { - const localTimezone = Intl.DateTimeFormat().resolvedOptions().timeZone; const durationSeconds = Math.round( event.end_time ? event.end_time - event.start_time @@ -23,7 +21,7 @@ export const getEventTitle = (event: FrigateEvent): string => { const score = event.top_score !== null ? ` ${Math.round(event.top_score * 100)}%` : ''; return `${formatDateAndTime( - toZonedTime(event.start_time * 1000, localTimezone), + new Date(event.start_time * 1000), )} [${durationSeconds}s, ${prettifyTitle(event.label)}${score}]`; }; @@ -115,7 +113,6 @@ export const getReviewTitle = (review: FrigateReview): string => { return objects; } - const localTimezone = Intl.DateTimeFormat().resolvedOptions().timeZone; const durationSeconds = Math.round( review.end_time ? review.end_time - review.start_time @@ -123,7 +120,7 @@ export const getReviewTitle = (review: FrigateReview): string => { ); return `${formatDateAndTime( - toZonedTime(review.start_time * 1000, localTimezone), + new Date(review.start_time * 1000), )} [${durationSeconds}s${objects}]`; }; diff --git a/yarn.lock b/yarn.lock index 4c9e8218..51e5c877 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2497,7 +2497,6 @@ __metadata: compute-scroll-into-view: "npm:^3.1.1" conventional-changelog-conventionalcommits: "npm:^8.0.0" date-fns: "npm:^3.6.0" - date-fns-tz: "npm:^3.1.3" docsify-cli: "npm:^4.4.4" embla-carousel: "npm:^8.6.0" embla-carousel-wheel-gestures: "npm:^8.0.1" @@ -4014,15 +4013,6 @@ __metadata: languageName: node linkType: hard -"date-fns-tz@npm:^3.1.3": - version: 3.1.3 - resolution: "date-fns-tz@npm:3.1.3" - peerDependencies: - date-fns: ^3.0.0 - checksum: 10c0/dcedf178a96632a798966cf5a881441aefc451cc308336a98919e49c2df8eff7a302d19b9d3903c50838dd0912533f862f0bfb9429e8c28c1c3ce5da19ccb64e - languageName: node - linkType: hard - "date-fns@npm:^3.6.0": version: 3.6.0 resolution: "date-fns@npm:3.6.0"