Complete documentation overhaul.

2024-04-01 21:09:20 -07:00
parent 9d62a5ceee
commit 955bcb3a9a
87 changed files with 6360 additions and 4540 deletions
@@ -0,0 +1,58 @@
 # Getting Started
 ## Installation
 - [HACS](https://hacs.xyz/) is **highly** recommended to install the card -- it works for all Home Assistant variants. If you don't have [HACS](https://hacs.xyz/) installed, start there -- then come back to these instructions.
 - Find the card in HACS:
 ```
 Home Assistant > HACS > Frontend > "Explore & Add Integrations" > Frigate Card
 ```
 - Click `Download this repository with HACS`.
 See [Advanced Installation](advanced-installation.md) for other installation resources.
 ## Adding your card
 - On a Home Assistant dashboard, choose:
 ```
 [Three dots menu] > Edit dashboard
 ```
 - Click `+ Add Card` shown on the bottom of the screen
 - Choose `Custom: Frigate card` from the list
 ## Initial configuration
 ### Minimal configuration
 ```yaml
 type: custom:frigate-card
 cameras:
  - camera_entity: camera.office
 ```
 ### Video scrubbing configuration
 ```yaml
 type: custom:frigate-card
 cameras:
  - camera_entity: camera.office
 profiles:
  - scrubbing
 ```
 ### Multi-camera grid configuration
 ```yaml
 type: custom:frigate-card
 cameras:
  - camera_entity: camera.office
  - camera_entity: camera.kitchen
 live:
  display:
    mode: grid
 ```
 See [Configuration](configuration/README.md) for full details on supported configuration options.
@@ -0,0 +1,8 @@
 ![logo](images/frigate-logo.svg)
 # Frigate Card <small>6.0.0</small>
 > A comprehensive camera card for Home Assistant.
 [GitHub](https://github.com/dermotduffy/frigate-hass-card/)
 [Documentation](README.md)
@@ -0,0 +1,10 @@
 * [Getting Started](README.md)
 * [Configuration](configuration/README.md)
 * [Examples](examples.md)
 * [Screenshots](screenshots.md)
 * [Troubleshooting](troubleshooting.md)
 * [Usage](usage/README.md)
 ---
 * [Developing](developing.md)
@@ -0,0 +1,51 @@
 # Advanced Installation
 For most users, the installation instructions in the [Getting Started](README.md) section will install the card successfully. In some rarer situations, additional steps may need to be taken.
 ### Manual resource management
 For most users, HACS should automatically add the necessary resources. Should this auto-registration not work you will need to complete one additional step.
 #### Lovelace in "Storage Mode" (default)
 - Navigate:
 ```
 Three dots menu -> "Edit Dashboard" -> Three dots menu -> "Manage resources" -> "Add Resource"
 ```
 - URL: `/hacsfiles/frigate-hass-card/frigate-hass-card.js`
 - Resource type: `JavaScript Module`
 #### Lovelace in "YAML mode" (rare)
 You would see`mode: yaml` under `lovelace:` in your `configuration.yaml` if this applies to you.
 - Add the following to `configuration.yaml`:
 ```yaml
 lovelace:
  resources:
    - url: /hacsfiles/frigate-hass-card/frigate-hass-card.js
      type: module
 ```
 - Restart Home Assistant.
 ### Manual installation
 - Download the `frigate-hass-card.zip` attachment of the desired [release](https://github.com/dermotduffy/frigate-hass-card/releases) to a location accessible by Home Assistant. Note that the release will have a series of `.js` files (for HACS users) **and** a `frigate-hass-card.zip` for the convenience of manual installers.
 - Unzip the file and move the contents of the `dist/` folder to any subfolder name you'd like, e.g. `frigate-card` is used in the below example.
 - Add the location as a Lovelace resource via the UI, or via [YAML configuration](https://www.home-assistant.io/lovelace/dashboards/#resources) such as:
 ```yaml
 lovelace:
  mode: yaml
  resources:
    - url: /local/frigate-card/frigate-hass-card.js
      type: module
 ```
 ### Unreleased versions
 You can install any unreleased version of the card by leveraging the GitHub Actions artifacts that are generated on every revision. See a [video walkthrough](https://user-images.githubusercontent.com/29582865/228320074-6a2607f5-c637-48d5-b833-a553f8df8f4f.mp4) installing the latest revision of the `release-4.1.0` branch.
@@ -0,0 +1,43 @@
 # Configuration
 The card supports a myriad of configuration options for simple or complex setups.
 ### Minimal configuration
 ```yaml
 type: custom:frigate-card
 cameras:
  - camera_entity: camera.office
 ```
 ### Configuration blocks
 #### Top-level configuration blocks
 Only the `cameras` option is required, all other parameters are optional.
 | Option | Description |
 | - | - |
 | [`automations`](automations.md) | Take action when conditions are met. |
 | [`cameras`](cameras/README.md) | Configures the cameras to be used in the card. At least one camera must be specified. |
 | [`cameras_global`](cameras/README.md) | Global defaults that apply to all cameras from the `cameras` section. |
 | `card_id` | An optional ID to uniquely identify this card. For use when actions are being sent to card(s) via [URL actions](../usage/url-actions.md). Must exclusively consist of these characters: `[a-zA-Z0-9_]`.|
 | [`dimensions`](dimensions.md) | Configures the overall card dimensions. |
 | [`elements`](elements.md) | Add custom elements to the card. |
 | [`image`](image.md) | Configures the `image` view. |
 | [`live`](live.md) | Configures the `live` view. |
 | [`media_gallery`](media-gallery.md) | Configures the media gallery. |
 | [`media_viewer`](media-viewer.md) | Configures the media viewer. |
 | [`menu`](menu.md) | Configures the card menu. |
 | [`overrides`](overrides.md) | Override card configuration when conditions are met. |
 | [`performance`](performance.md) | Configures the card performance. |
 | [`profiles`](profiles.md) | Apply pre-configured sets of defaults to ease card configuration. |
 | [`timeline`](timeline.md) | Configures the `timeline` view. |
 | [`view`](view.md) | Configures the default view and behavior of the card. |
 #### Common configuration blocks
 | Option | Description |
 | - | - |
 | [`actions`](actions.md) | Configure actions. |
 | [`conditions`](conditions.md) | Configure conditions. |
@@ -0,0 +1,26 @@
 * [Getting Started](../README.md)
 * [Configuration](README.md)
   * [`actions`](actions.md)
   * [`automations`](automations.md)
   * [`cameras`](cameras/README.md)
   * [`conditions`](conditions.md)
   * [`dimensions`](dimensions.md)
   * [`elements`](elements.md)
   * [`image`](image.md)
   * [`live`](live.md)
   * [`media_gallery`](media-gallery.md)
   * [`media_viewer`](media-viewer.md)
   * [`menu`](menu.md)
   * [`overrides`](overrides.md)
   * [`performance`](performance.md)
   * [`profiles`](profiles.md)
   * [`timeline`](timeline.md)
   * [`view`](view.md)
 * [Examples](../examples.md)
 * [Screenshots](../screenshots.md)
 * [Troubleshooting](../troubleshooting.md)
 * [Usage](../usage/README.md)
 ---
 * [Developing](../developing.md)
@@ -0,0 +1,521 @@
 # `actions`
 ## Introduction to actions
 `actions` is not a top-level configuration block, but can be used as part of
 multiple other blocks.
 Actions are pre-configured activities that can be triggered in response to a
 variety of circumstances (e.g. tapping on a menu icon, double tapping on an
 [element](./elements.md) or holding the mouse/tap down on a particular
 [view](./view.md?id=supported-views)).
 ### Differences in actions between Frigate Card and Home Assistant
 Both the Home Assistant frontend and the Frigate card cooperate to provide
 action functionality. In general, the Frigate Card functionality is a superset
 of that offered by stock Home Assistant.
 Stock action functionality is used for Stock [Home Assistant picture
 elements](https://www.home-assistant.io/lovelace/picture-elements/). Extended
 Frigate card behavior covers all other interactions on the Frigate card (e.g.
 menu icon elements, submenus and actions on the card or views).
 #### Custom action types: `start_tap` and `end_tap`
 The card has partial support for two special action types `start_tap` and
 `end_tap` which occur when a tap is started (e.g. mouse is pressed down /
 touch begins), and ended (e.g. mouse released / touch ends) respectively. This
 might be useful for PTZ cameras cameras to start/stop movement on touch. Network
 latency may introduce unavoidable imprecision between `end_tap` and action
 actually occurring.
 #### Multiple actions
 Extended Frigate card behavior supports a list of actions instead of a single
 action, all of which will be handled. See [an example of multiple
 actions](../examples.md?id=multiple-actions).
 ## Card and view actions
 Actions may be attached to the card itself, to trigger action when the card
 experiences a `tap`, `double_tap`, `hold`, `start_tap` or `end_tap` event.
 Alternatively they can be configured on a per group-of-views basis, e.g. only
 when `live` view is tapped.
 | Configuration path | Views to which it refers |
 | - | - |
 | `image.actions` | `image` |
 | `live.actions` | `live` |
 | `media_gallery.actions` | `clips`, `snapshots`, `recordings` |
 | `media_viewer.actions` | `clip`, `snapshot`, `recording` |
 | `view.actions` | All |
 If an action is configured for both the whole card (`view.actions`) and a more
 specific view (e.g. `live.actions`) then the actions are merged, with the more
 specific overriding the less specific.
 !> The card itself relies on user interactions to function (e.g. `tap` on
 the menu should activate that button). Card or View actions are prevented from
 being activated through standard interaction with menu buttons, next/previous
 controls, thumbnails, etc, but in some cases this prevention is not possible
 (e.g. embedded WebRTC card controls) -- in these cases duplicate actions may
 occur with certain configurations (e.g. `tap`).
 !> Card-wide actions are not supported on timelines nor when a info/error message
 is being displayed.
 ## `call-service`
 Call a service. See [Home Assistant actions documentation](https://www.home-assistant.io/dashboards/actions/).
 ```yaml
 action: call-service
 [...]
 ```
 ## `custom:frigate-card-action`
 Execute a Frigate Card action.
 ```yaml
 action: custom:frigate-card-action
 [...]
 ```
 | Parameter | Description |
 | - | - |
 | `action` | Must be `custom:frigate-card-action`. |
 | `frigate_card_action` | A supported Frigate Card action. See below. |
 ### `camera_select`
 Select a given camera.
 ```yaml
 action: custom:frigate-card-action
 frigate_card_action: camera_select
 [...]
 ```
 | Parameter | Description |
 | - | - |
 | `action` | Must be `custom:frigate-card-action`. |
 | `frigate_card_action` | Must be `camera_select`. |
 | `camera` | The [camera ID](cameras/README.md?id=cameras) of the camera to select. |
 | `triggered` | If `true` instead of `camera` being specified then a triggered camera (if any) is selected instead. |
 This action will respect the value of the `view.camera_select` to choose the appropriate view on the new camera. See [`view` configuration](view.md).
 ### `camera_ui`
 Download the displayed media.
 ```yaml
 action: custom:frigate-card-action
 frigate_card_action: camera_ui
 ```
 Open the UI for the selected camera engine (e.g. the Frigate UI).
 ### `default`
 Change to the default view.
 ```yaml
 action: custom:frigate-card-action
 frigate_card_action: default
 ```
 ### `clip`, `clips`, `image`, `live`, `recording`, `recordings`, `snapshot`, `snapshots`
 Change to the specified view.
 ```yaml
 action: custom:frigate-card-action
 frigate_card_action: [view]
 ```
 ### `download`
 Download the displayed media.
 ```yaml
 action: custom:frigate-card-action
 frigate_card_action: download
 ```
 ### `expand`
 Expand the card into a dialog/popup.
 ```yaml
 action: custom:frigate-card-action
 frigate_card_action: expand
 ```
 ### `fullscreen`
 Toggle fullscreen.
 ```yaml
 action: custom:frigate-card-action
 frigate_card_action: fullscreen
 ```
 ### `live_substream_select`
 Select a substream.
 ```yaml
 action: custom:frigate-card-action
 frigate_card_action: live_substream_select
 [...]
 ```
 | Parameter | Description |
 | - | - |
 | `action` | Must be `custom:frigate-card-action`. |
 | `frigate_card_action` | Must be `live_substream_select`. |
 | `camera` | The [camera ID](cameras/README.md?id=cameras) of the substream to select. |
 ### `media_player`
 Perform a media player action. 
 ```yaml
 action: custom:frigate-card-action
 frigate_card_action: media_player
 [...]
 ```
 | Parameter | Description |
 | - | - |
 | `action` | Must be `custom:frigate-card-action`. |
 | `frigate_card_action` | Must be `media_player`. |
 | `media_player` | The entity ID of the media_player on which to perform the action. |
 | `media_player_action` | Either `play` or `stop` to play or stop the media in question. |
 ### `menu_toggle`
 Show/hide the menu (for the `hidden` mode style).
 ```yaml
 action: custom:frigate-card-action
 frigate_card_action: menu_toggle
 ```
 ### `microphone_mute`, `microphone_unmute`
 Mute/Unmute the microphone during [2-way audio](../usage/2-way-audio.md).
 ```yaml
 action: custom:frigate-card-action
 frigate_card_action: microphone_mute
 ```
 ```yaml
 action: custom:frigate-card-action
 frigate_card_action: microphone_unmute
 ```
 ### `mute`, `unmute`
 Mute/Unmute the selected media.
 ```yaml
 action: custom:frigate-card-action
 frigate_card_action: mute
 ```
 ```yaml
 action: custom:frigate-card-action
 frigate_card_action: unmute
 ```
 ### `play`, `pause`
 Play/Pause the selected media.
 ```yaml
 action: custom:frigate-card-action
 frigate_card_action: play
 ```
 ```yaml
 action: custom:frigate-card-action
 frigate_card_action: pause
 ```
 ### `ptz`
 Execute a native PTZ action (only for native out-of-the-box PTZ camera engines, e.g. Frigate).
 Takes a required `ptz_action` parameter that is one of . 
 ```yaml
 action: custom:frigate-card-action
 frigate_card_action: ptz
 [...]
 ```
 | Parameter | Description |
 | - | - |
 | `action` | Must be `custom:frigate-card-action`. |
 | `frigate_card_action` | Must be `ptz`. |
 | `ptz_action` | One of `left`, `right`, `up`, `down`, `zoom_in`, `zoom_out` or `preset`. |
 | `ptz_phase` | Optional parameter that is one of `start` or `stop` to start or stop the movement separately. |
 | `ptz_preset` | Optional preset to execute when the `ptz_action` is `preset`. |
 ### `screenshot`
 Take a screenshot of the selected media (e.g. a still from a video).
 ```yaml
 action: custom:frigate-card-action
 frigate_card_action: screenshot
 ```
 ### `show_ptz`
 Show or hide the PTZ controls.
 ```yaml
 action: custom:frigate-card-action
 frigate_card_action: show_ptz
 [...]
 ```
 | Parameter | Description |
 | - | - |
 | `action` | Must be `custom:frigate-card-action`. |
 | `frigate_card_action` | Must be `show_ptz`. |
 | `show_ptz` | If `true` shows the PTZ controls, if `false` hides them. |
 ## `more-info`
 Open the "more-info" dialog for an entity. See [Home Assistant actions documentation](https://www.home-assistant.io/dashboards/actions/).
 ```yaml
 action: more-info
 [...]
 ```
 ## `navigate`
 Navigate to a particular dashboard path. See [Home Assistant actions documentation](https://www.home-assistant.io/dashboards/actions/).
 ```yaml
 action: navigate
 [...]
 ```
 ## `toggle`
 Toggle an entity. See [Home Assistant actions documentation](https://www.home-assistant.io/dashboards/actions/).
 ```yaml
 action: toggle
 [...]
 ```
 ## `url`
 Navigate to an arbitrary URL. See [Home Assistant actions documentation](https://www.home-assistant.io/dashboards/actions/).
 ```yaml
 action: url
 [...]
 ```
 ## Fully expanded reference
 [](common/expanded-warning.md ':include')
 ### Stock Home Assistant actions
 Reference: [Home Assistant Actions](https://www.home-assistant.io/dashboards/actions/).
 ```yaml
 elements:
  - type: icon
    icon: mdi:numeric-1-box
    title: More info action
    style:
      left: 200px
      top: 50px
    entity: light.office_main_lights
    tap_action:
      action: more-info
  - type: icon
    icon: mdi:numeric-2-box
    title: Toggle action
    style:
      left: 200px
      top: 100px
    entity: light.office_main_lights
    tap_action:
      action: toggle
  - type: icon
    icon: mdi:numeric-3-box
    title: Call Service action
    style:
      left: 200px
      top: 150px
    tap_action:
      action: call-service
      service: homeassistant.toggle
      service_data:
        entity_id: light.office_main_lights
  - type: icon
    icon: mdi:numeric-4-box
    title: Navigate action
    style:
      left: 200px
      top: 200px
    tap_action:
      action: navigate
      navigation_path: /lovelace/2
  - type: icon
    icon: mdi:numeric-5-box
    title: URL action
    style:
      left: 200px
      top: 250px
    tap_action:
      action: url
      url_path: https://www.home-assistant.io/
  - type: icon
    icon: mdi:numeric-6-box
    title: None action
    style:
      left: 200px
      top: 300px
    tap_action:
      action: none
  - type: icon
    icon: mdi:numeric-7-box
    title: Custom action
    style:
      left: 200px
      top: 350px
    tap_action:
      action: fire-dom-event
      key: value
 ```
 ### Frigate Card actions
 ```yaml
 elements:
  - type: custom:frigate-card-menu-icon
    icon: mdi:alpha-a-circle
    title: Show default view
    tap_action:
      action: custom:frigate-card-action
      frigate_card_action: default
  - type: custom:frigate-card-menu-icon
    icon: mdi:alpha-b-circle
    title: Show most recent clip
    tap_action:
      action: custom:frigate-card-action
      frigate_card_action: clip
  - type: custom:frigate-card-menu-icon
    icon: mdi:alpha-c-circle
    title: Show clips
    tap_action:
      action: custom:frigate-card-action
      frigate_card_action: clips
  - type: custom:frigate-card-menu-icon
    icon: mdi:alpha-d-circle
    title: Show image view
    tap_action:
      action: custom:frigate-card-action
      frigate_card_action: image
  - type: custom:frigate-card-menu-icon
    icon: mdi:alpha-e-circle
    title: Show live view
    tap_action:
      action: custom:frigate-card-action
      frigate_card_action: live
  - type: custom:frigate-card-menu-icon
    icon: mdi:alpha-f-circle
    title: Show most recent snapshot
    tap_action:
      action: custom:frigate-card-action
      frigate_card_action: snapshot
  - type: custom:frigate-card-menu-icon
    icon: mdi:alpha-g-circle
    title: Show snapshots
    tap_action:
      action: custom:frigate-card-action
      frigate_card_action: snapshots
  - type: custom:frigate-card-menu-icon
    icon: mdi:alpha-h-circle
    title: Download media
    tap_action:
      action: custom:frigate-card-action
      frigate_card_action: download
  - type: custom:frigate-card-menu-icon
    icon: mdi:alpha-i-circle
    title: Open Frigate UI
    tap_action:
      action: custom:frigate-card-action
      frigate_card_action: camera_ui
  - type: custom:frigate-card-menu-icon
    icon: mdi:alpha-j-circle
    title: Change to fullscreen
    tap_action:
      action: custom:frigate-card-action
      frigate_card_action: fullscreen
  - type: custom:frigate-card-menu-icon
    icon: mdi:alpha-k-circle
    title: Toggle hidden menu
    tap_action:
      action: custom:frigate-card-action
      frigate_card_action: menu_toggle
  - type: custom:frigate-card-menu-icon
    icon: mdi:alpha-l-circle
    title: Select Front Door
    tap_action:
      action: custom:frigate-card-action
      frigate_card_action: camera_select
      camera: camera.front_door
  - type: custom:frigate-card-menu-icon
    icon: mdi:alpha-m-circle
    title: Media player play
    tap_action:
      action: custom:frigate-card-action
      frigate_card_action: media_player
      media_player: media_player.nesthub50be
      media_player_action: play
  - type: custom:frigate-card-menu-icon
    icon: mdi:alpha-n-circle
    title: Media player stop
    tap_action:
      action: custom:frigate-card-action
      frigate_card_action: media_player
      media_player: media_player.nesthub
      media_player_action: stop
  - type: custom:frigate-card-menu-icon
    icon: mdi:alpha-o-circle
    title: Screenshot
    tap_action:
      action: custom:frigate-card-action
      frigate_card_action: screenshot
  - type: custom:frigate-card-menu-icon
    icon: mdi:alpha-p-circle
    title: Show PTZ
    tap_action:
      action: custom:frigate-card-action
      frigate_card_action: show_ptz
      show_ptz: true
  - type: custom:frigate-card-menu-icon
    icon: mdi:alpha-q-circle
    title: Native PTZ Preset
    tap_action:
      action: custom:frigate-card-action
      frigate_card_action: ptz
      ptz_action: preset
      ptz_preset: doorway
 ```
@@ -0,0 +1,38 @@
 # `automations`
 Automatically take [actions](actions.md) based on [conditions](conditions.md) being met.
 ?> To change configuration conditionally use [overrides](overrides.md).
 ```yaml
 automations:
  - conditions:
      - [condition]
    actions:
      - [action]
    actions_not:
      - [action]
 ```
 | Option | Default | Description |
 | - | - | - |
 | `conditions` | | A list of [conditions](conditions.md) that must evaluate to `true` in order to trigger the automation. |
 | `actions` | | An optional list of [actions](actions.md) that will be run when the [conditions](conditions.md) evaluate `true`. |
 | `actions_not` | | An optional list of [actions](actions.md) that will be run when the [conditions](conditions.md) evaluate `false`. |
 # Fully expanded reference
 [](common/expanded-warning.md ':include')
 ```yaml
 automations:
  - conditions:
      - condition: fullscreen
        fullscreen: true
    actions:
      - action: custom:frigate-card-action
        frigate_card_action: live_substream_on
    actions_not:
      - action: custom:frigate-card-action
        frigate_card_action: live_substream_off
 ```
@@ -0,0 +1,284 @@
 # Cameras
 The `cameras` block configures a list of cameras the card should support. The first listed camera is the default.
 ```yaml
 cameras:
  - [...camera 0 (default camera)...]
  - [...camera 1...]
  - [...camera 2...]
 ```
 The `cameras_global` block can be used to set defaults across multiple cameras.
 ```yaml
 cameras_global:
   [...]
 ```
 | Option | Default | Description |
 | - | - | - |
 | `camera_entity` | | The Home Assistant camera entity to use with the `frigate` live provider view. Also used to automatically detect the name of the underlying Frigate camera, and the title/icon of the camera. |
 | `capabilities` | | Allows selective disabling of camera capabilities. See below. |
 | `cast` | | Configuration that controls how this camera is "casted" / sent to media players. See below. |
 | `dependencies` | | Other cameras that this camera should depend upon. See below. |
 | `dimensions` | | Controls the dimensions and layout for media from this camera. See below. |
 | `engine` | `auto` | The camera engine to use. If `auto` the card will attempt to choose the correct engine from the specified options. See [Engine](engine.md). |
 | `frigate` | | Options for Frigate cameras. See [Frigate camera engine configuration](engine.md?id=frigate). |
 | `icon` | Autodetected from `camera_entity` if that is specified. | The icon to use for this camera in the camera menu and in the next & previous controls when using the `icon` style. |
 | `id` | `camera_entity`, `webrtc_card.entity` or `frigate.camera_name` if set (in that preference order). | An optional identifier to use throughout the card configuration to refer unambiguously to this camera. This `id` may be used in [conditions](../conditions.md), dependencies or custom [actions](../actions.md) to refer to a given camera unambiguously. |
 | `live_provider` | `auto` | The choice of live stream provider. See [Live Provider](live-provider.md).|
 | `title` | Autodetected from `camera_entity` if that is specified. | A friendly name for this camera to use in the card. |
 | `triggers` | | Define what should cause this camera to update/trigger. See below. |
 | `webrtc_card` | | The WebRTC entity/URL to use for this camera with the `webrtc-card` live provider. See below. |
 ## `capabilities`
 The `capabilities` block allows selected disabling of auto-detected camera capabilities. This is rarely used, with substreams being a notable exception.
 ```yaml
 cameras:
 - camera_entity: camera.office
   capabilities:
      [...]
 ```
 | Option | Default | Description |
 | - | - | - |
 | `disable` | | A list of camera capabilities to disable. By default all capabilities supported by the camera are enabled. |
 | `disable_except` | | A list of camera capabilities to leave enabled if supported. Everything else will be disabled. |
 ### Capabilities
 | Capability | Purpose |
 | - | - |
 | `clips` | Clips can be fetched from the camera. |
 | `favorite-events` | Events can be favorited. |
 | `favorite-recordings` | Recordings can be favorited. |
 | `live` | Live video can be received from the camera. |
 | `menu` | The camera should show up in the card camera menu. |
 | `ptz` | The camera can be PTZ controlled. |
 | `recordings` | Recordings can be fetched from the camera. |
 | `seek` | Clips can be seeked / scrubbed by the timeline. |
 | `snapshots` | Snapshots can be fetched from the camera. |
 | `substream` | The camera can be used as a substream on another camera. |
 ## `cast`
 The `cast` block configures how a camera is cast / sent to media players.
 ```yaml
 cameras:
 - camera_entity: camera.office
   cast:
     [...]
 ```
 | Option | Default | Description |
 | - | - | - |
 | `dashboard` | | Configuration for the dashboard to cast. See below. |
 | `method` | `standard` | Whether to use `standard` media casting to send the live view to your media player, or to instead cast a `dashboard` you have manually setup. Casting a dashboard supports a much wider variety of video media, including low latency video providers (e.g. `go2rtc`). This setting has no effect on casting non-live media. |
 See the [dashboard method cast example](../../examples.md?id=cast-a-dashboard).
 ### Dashboard Configuration
 ```yaml
 cameras:
 - camera_entity: camera.office
   cast:
      dashboard:
         [...]
 ```
 | Option | Default | Description |
 | - | - | - |
 | `dashboard_path` | | A required field that specifies the name of the dashboard to cast. You can see this name in your HA URL when you visit the dashboard. |
 | `view_path` | | A required field that specifies view/"tab" on that dashboard to cast. This is the value you have specified in the `url` field of the view configuration on the dashboard. |
 ## `dependencies`
 The `dependencies` block configures other cameras as dependents of this camera. Dependent cameras have their media fetched and merged with this camera by default, and offer their respective live views as 'substreams' of the main (depended upon) camera. Configuration is under:
 ```yaml
 cameras:
 - camera_entity: camera.office
   dependencies:
     [...]
 ```
 | Option | Default | Description |
 | - | - | - |
 | `all_cameras` | `false` | Shortcut to specify all other cameras as dependent cameras. |
 | `cameras` | | An optional list of other camera identifiers (see `id` parameter). If specified the card will fetch media for this camera and *also* recursively for the named cameras by default. Live views for the involved cameras will be available as 'substreams' of the main (depended upon) camera. All dependent cameras must themselves be a configured camera in the card. This can be useful to group events for cameras that are close together, to show multiple related live  views, to always have clips/snapshots show fully merged events across all cameras or to show events for the `birdseye` camera that otherwise would not have events itself. |
 ## `dimensions`
 The `dimensions` block configures the dimensions and layout of media of a given camera. 
 ```yaml
 cameras:
 - camera_entity: camera.office
   dimensions:
      [...]
 ```
 | Option | Default | Description |
 | - | - | - |
 | `aspect_ratio` | | An optional aspect ratio for media from this camera which will be used in `live` or media viewer related views (e.g. `clip`, `snapshot` and `recording`). Format is the same as the parameter of the same name under the [dimensions block](../dimensions.md) (which controls dimensions for the whole card), e.g. `16 / 9`. |
 | `layout` | | How the media should be laid out *within* the camera dimensions. See below. |
 ### Layout Configuration
 The `layout` block configures the fit and position of the media _within_ the camera dimensions (in order to control the dimensions for the whole card see [the card dimensions configuration](../dimensions.md) ). As the default behavior is to always expand to fit the media precisely, these options only make sense if the camera `dimensions.aspect_ratio` is set to a static value that forces a particular aspect ratio that does not match the camera media.
 ```yaml
 cameras:
 - camera_entity: camera.office
   dimensions:
      layout:
         [...]
 ```
 | Option | Default | Description |
 | - | - | - |
 | `fit` | `contain` | If `contain`, the media is contained within the card and letterboxed if necessary. If `cover`, the media is expanded proportionally (i.e. maintaining the media aspect ratio) until the card is fully covered. If `fill`, the media is stretched to fill the card (i.e. ignoring the media aspect ratio). See [CSS object-fit](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit) for technical details and a visualization. |
 | `position` | | A dictionary that contains an `x` and `y` percentage (`0` - `100`) to control the position of the media when the fit is `cover`. This can be effectively used to "pan" the media around. At any given time, only one of `x` and `y` will have an effect, depending on whether media width is larger than the card width (in which case `x` controls the position) or the media height is larger than the card height (in which case `y` controls the position). A value of `0` means maximally to the left or top of the media, a value of `100` means maximally to the right or bottom of the media. See [CSS object-position](https://developer.mozilla.org/en-US/docs/Web/CSS/object-position) for technical details and a visualization. |
 See [media layout examples](../../examples.md?id=media-layout).
 ## `triggers`
 The `triggers` block configures what triggers a camera. Triggering can be used
 to activate an action (e.g. view a camera in live, reset the card to the default
 view). See [`view.triggers`](../view.md?id=triggers) to control what happens when a
 camera is triggered.
 ```yaml
 cameras:
 - camera_entity: camera.office
   triggers:
     [...]
 ```
 | Option | Default | Description |
 | - | - | - |
 | `entities` | | Whether to not to trigger the camera when the state of any Home Assistant entity becomes active (i.e. state becomes `on` or `open`). This works for Frigate or non-Frigate cameras.|
 | `events` | `[events, clips, snapshots]` | Whether to trigger the camera when `events` occur (whether or not media is available) or whenever updated `clips` or `snapshots` are detected. Detection support varies by camera [engine](engine.md). |
 | `motion` | `false` | Whether to not to trigger the camera by automatically detecting and using the motion `binary_sensor` for this camera. This autodetection only works for Frigate cameras, and only when the motion `binary_sensor` entity has been enabled in Home Assistant.|
 | `occupancy` | `false` | Whether to not to trigger the camera by automatically detecting and using the occupancy `binary_sensor` for this camera and its configured zones and labels. This autodetection only works for Frigate cameras, and only when the occupancy `binary_sensor` entity has been enabled in Home Assistant. If this camera has configured zones, only occupancy sensors for those zones are used -- if the overall _camera_ occupancy sensor is also required, it can be manually added to `entities`. If this camera has configured labels, only occupancy sensors for those labels are used. |
 ## Fully expanded reference
 [](../common/expanded-warning.md ':include')
 ```yaml
 cameras:
  - camera_entity: camera.front_Door
    live_provider: ha
    engine: auto
    frigate:
      url: http://my.frigate.local
      client_id: frigate
      camera_name: front_door
      labels:
       - person
      zones:
       - steps
    # Show events for camera-2 when this camera is viewed.
    dependencies:
      all_cameras: false
      cameras:
        - camera-2
    triggers:
      motion: false
      occupancy: true
      entities:
        - binary_sensor.front_door_sensor
    cast:
      method: standard
    dimensions:
      aspect_ratio: 16:9
      layout:
        fit: contain
        position:
          x: 50
          y: 50
  - camera_entity: camera.entrance
    live_provider: webrtc-card
    engine: auto
    frigate:
      url: http://my-other.frigate.local
      client_id: frigate-other
      camera_name: entrance
      labels:
       - car
      zones:
       - driveway
    icon: 'mdi:car'
    title: 'Front entrance'
    # Custom identifier for the camera to refer to it above.
    id: 'camera-2'
    webrtc_card:
      entity: camera.entrance_rtsp
      url: 'rtsp://username:password@camera:554/av_stream/ch0'
    triggers:
      motion: false
      occupancy: true
      entities:
        - binary_sensor.entrance_sensor
    dependencies:
      all_cameras: false
  - camera_entity: camera.sitting_room
    live_provider: go2rtc
    go2rtc:
      modes:
        - webrtc
        - mse
        - mp4
        - mjpeg
      stream: sitting_room
      url: 'https://my.custom.go2rtc.backend'
      cast:
        method: dashboard
        dashboard:
          dashboard_path: cast
          view_path: front-door
  - camera_entity: camera.sitting_room_webrtc_card
    live_provider: webrtc_card
    webrtc_card:
      # Arbitrary WebRTC Card options, see https://github.com/AlexxIT/WebRTC#configuration .
      entity: camera.sitting_room_rtsp
      ui: true
  - camera_entity: camera.kitchen
    live_provider: jsmpeg
    jsmpeg:
      options:
        audio: false
        video: true
        pauseWhenHidden: false
        disableGl: false
        disableWebAssembly: false
        preserveDrawingBuffer: false
        progressive: true
        throttled: true
        chunkSize: 1048576
        maxAudioLag: 10
        videoBufferSize: 524288
        audioBufferSize: 131072
  - camera_entity: camera.back_yard
    live_provider: image
    image:
      refresh_seconds: 1
  - camera_entity: camera.office_motioneye
    motioneye:
      images:
        directory_pattern: '%Y-%m-%d'
        file_pattern: '%H-%M-%S'
      movies:
        directory_pattern: '%Y-%m-%d'
        file_pattern: '%H-%M-%S'
 cameras_global:
  live_provider: ha
 ```
@@ -0,0 +1,27 @@
 * [Getting Started](../../README.md)
 * [Configuration](../README.md)
   * [`actions`](../actions.md)
   * [`automations`](../automations.md)
   * [`cameras`](README.md)
      * [`live_provider`](live-provider.md)
      * [`engine`](engine.md)
   * [`conditions`](../conditions.md)
   * [`dimensions`](../dimensions.md)
   * [`elements`](../elements.md)
   * [`image`](../image.md)
   * [`live`](../live.md)
   * [`media_gallery`](../media-gallery.md)
   * [`media_viewer`](../media-viewer.md)
   * [`menu`](../menu.md)
   * [`overrides`](../overrides.md)
   * [`performance`](../performance.md)
   * [`profiles`](../profiles.md)
   * [`timeline`](../timeline.md)
   * [`view`](../view.md)
 * [Screenshots](../../screenshots.md)
 * [Troubleshooting](../../troubleshooting.md)
 * [Usage](../../usage/README.md)
 ---
 * [Developing](../../developing.md)
@@ -0,0 +1,82 @@
 # `engine`
 ## Overview
 A "Camera Engine" defines what "type" of camera is being configured (e.g. `frigate`), each engine offers different capabilities:
 |Engine|Live|Supports clips|Supports Snapshots|Supports Recordings|Supports Timeline|Supports PTZ out of the box|Supports manually configured PTZ|Favorite events|Favorite recordings|Detect new events|Detect new snapshots|Detect new clips|
 | - | - | - | - | - | - | - | - | - | - | - | - | - |
 |`frigate`| :white_check_mark: | :white_check_mark: | :white_check_mark: | :white_check_mark: | :white_check_mark: | :white_check_mark: | :white_check_mark: | :white_check_mark: | :heavy_multiplication_x: | :white_check_mark: | :white_check_mark: | :white_check_mark: |
 |`generic`| :white_check_mark: | :heavy_multiplication_x: | :heavy_multiplication_x: | :heavy_multiplication_x: | :heavy_multiplication_x: | :heavy_multiplication_x: | :white_check_mark: | :heavy_multiplication_x: | :heavy_multiplication_x: | :heavy_multiplication_x: | :heavy_multiplication_x: | :heavy_multiplication_x: |
 |`motioneye`| :white_check_mark: | :white_check_mark: | :white_check_mark: | :heavy_multiplication_x: | :white_check_mark: | :heavy_multiplication_x: | :white_check_mark: | :heavy_multiplication_x: | :heavy_multiplication_x: | :heavy_multiplication_x: | :heavy_multiplication_x: | :heavy_multiplication_x: |
 #### Live providers supported per Engine
 |Engine / Live Provider|`ha`|`image`|`jsmpeg`|`go2rtc`|`webrtc-card`|
 | - | - | - | - | - | - |
 |`frigate`| :white_check_mark: | :white_check_mark: | :white_check_mark: | :white_check_mark: | :white_check_mark: |
 |`generic`| :white_check_mark: | :white_check_mark: | :heavy_multiplication_x: | :white_check_mark: | :white_check_mark: |
 |`motioneye`| :white_check_mark: | :white_check_mark: | :heavy_multiplication_x: | :white_check_mark: | :heavy_multiplication_x: |
 See [Live Provider Configuration](live-provider.md) for more details on live providers.
 ## `frigate`
 The `frigate` block configures options for a Frigate camera.
 ```yaml
 cameras:
 - camera_entity: camera.office
   frigate:
     [...]
 ```
 | Option | Default | Description |
 | - | - | - |
 | `camera_name` | Autodetected from `camera_entity` if that is specified. | The Frigate camera name to use when communicating with the Frigate server, e.g. for viewing clips/snapshots or the JSMPEG live view.|
 | `client_id` | `frigate` | The Frigate client id to use. If this Home Assistant server has multiple Frigate server backends configured, this selects which server should be used. It should be set to the MQTT client id configured for this server, see [Frigate Integration Multiple Instance Support](https://docs.frigate.video/integrations/home-assistant/#multiple-instance-support).|
 | `labels` | | A list of Frigate labels used to filter events (clips & snapshots), e.g. [`person`, `car`].|
 | `url` | | The URL of the frigate server. If set, this value will be (exclusively) used for a `Camera UI` menu button. All other communication with Frigate goes via Home Assistant. |
 | `zones` | | A list of Frigates zones used to filter events (clips & snapshots), e.g. [`front_door`, `front_steps`].|
 ## `motioneye`
 The `motioneye` block configures options for a MotionEye camera.
 ```yaml
 cameras:
 - camera_entity: camera.office
   motioneye:
     [...]
 ```
 | Option | Default | Description |
 | - | - | - |
 | `images` | | Configure how MotionEye images are consumed. See below. |
 | `movies` | | Configure how MotionEye movies are consumed. See below. |
 | `url` | | The URL of the MotionEye server. If set, this value will be (exclusively) used for a `Camera UI` menu button. |
 ### `images` / `movies`
 The `images` and `movies` block configures how images and movies respectively are fetched from motionEye. The options for both blocks are the same.
 ```yaml
 cameras:
 - camera_entity: camera.office
   motioneye:
     images:
        [...]
 ```
 ```yaml
 cameras:
 - camera_entity: camera.office
   motioneye:
     movies:
        [...]
 ```
 | Option | Default | Description |
 | - | - | - |
 | `directory_pattern` | `%Y-%m-%d` | The directory that motionEye is configured to store media into. May contain multiple sub-directories separated by `/`. Path must encode the date of the media using MotionEye patterns such as `%Y`, `%m`, `%d`, `%H`, `%M`, `%S` (at least one pattern is required). Consult MotionEye help text for information on these substitutions. |
 | `file_pattern` | `%H-%M-%S` | Within a directory (as matched by `directory_pattern`) the media items must exist and match this pattern. `file_pattern` must encode the time of the media using MotionEye patterns such as `%Y`, `%m`, `%d`, `%H`, `%M`, `%S` (at least one pattern is required). Consult MotionEye help text for information on these substitutions. |
@@ -0,0 +1,86 @@
 # `live_provider`
 ## Overview
 The `live_provider` parameter determines what provides the live stream for a camera. Each provider offers different capabilities:
 |Live Provider|Latency|Frame Rate|Loading Time|Installation|Description|
 | -- | -- | -- | -- | -- | -- |
 |`go2rtc`|Best|High|Better|Builtin|Uses [go2rtc](https://github.com/AlexxIT/go2rtc) to stream live feeds. This is supported by Frigate &gt;= `0.12`. |
 |`ha` (default HA configuration)|Poor|High|Better|Builtin|Use the built-in Home Assistant camera stream. The camera doesn't even need to be a Frigate camera! |
 |`ha` (Native WebRTC)|Best|High|Better|Builtin|Use the built-in Home Assistant camera streams -- can be configured to use [native WebRTC](https://www.home-assistant.io/integrations/rtsp_to_webrtc/) offering a very low-latency feed direct to your browser. |
 |`ha` (when configured with LL-HLS)|Better|High|Better|Builtin|Use the built-in Home Assistant camera streams -- can be configured to use an [LL-HLS](https://www.home-assistant.io/integrations/stream/#ll-hls) feed for lower latency. |
 |`image`|Poor|Poor|Best|Builtin|Use refreshing snapshots of the built-in Home Assistant camera streams.|
 |`jsmpeg`|Better|Low|Poor|Builtin|Use a the JSMPEG stream. |
 |`webrtc-card`|Best|High|Better|Separate installation required|Embed's [AlexxIT's WebRTC Card](https://github.com/AlexxIT/WebRTC) to stream live feed, requires manual extra setup. See below. Not to be confused with native Home Assistant WebRTC (use the `ha` provider). |
 ## `go2rtc`
 The `go2rtc` block configures use of the `go2rtc` live provider. This configuration is included as part of a camera entry in the `cameras` list.
 ```yaml
 cameras:
 - camera_entity: camera.office
   live_provider: go2rtc
   go2rtc:
     [...]
 ```
 | Option | Default | Description |
 | - | - | - |
 | `modes` | `[webrtc, mse, mp4, mjpeg]` | An ordered list of `go2rtc` modes to use. Valid values are `webrtc`, `mse`, `mp4` or `mjpeg` values. |
 | `stream` | Determined by camera engine (e.g. `frigate` camera name). | A valid `go2rtc` stream name. |
 | `url` | Determined by camera engine (e.g. the `frigate` engine will automatically generate a URL for the go2rtc backend that runs in the Frigate container). | The root `go2rtc` URL the card should stream the video from. This is only needed for non-Frigate usecases, or advanced Frigate usecases. Example: `http://my-custom-go2rtc:1984` |
 ## `image`
 All configuration is under:
 ```yaml
 cameras:
 - camera_entity: camera.office
   live_provider: image
   image:
     [...]
 ```
 | Option | Default | Description |
 | - | - | - |
 | `refresh_seconds` | 1 | The image will be refreshed at least every `refresh_seconds`. `0` implies no refreshing. |
 | `url` | | **Advanced**: A static image URL to be fetched in lieu of the Home Assistant image for the given camera. This may be useful for advanced configurations where the camera image is being provided by some non-Home Assistant system. This will also set the temporary loading image used when `show_image_during_load` is set to true under the `live` configuration. |
 ## `jsmpeg`
 All configuration is under:
 ```yaml
 cameras:
 - camera_entity: camera.office
   live_provider: jsmpeg
   jsmpeg:
     [...]
 ```
 | Option | Default | Description |
 | - | - | - |
 | `options` | | **Advanced users only**: Control the underlying [JSMPEG library options](https://github.com/phoboslab/jsmpeg#usage). Supports setting these JSMPEG options `{audio, video, pauseWhenHidden, disableGl, disableWebAssembly, preserveDrawingBuffer, progressive, throttled, chunkSize, maxAudioLag, videoBufferSize, audioBufferSize}`. This is not necessary for the vast majority of users: only set these flags if you know what you're doing, as you may entirely break video rendering in the card.|
 ## `webrtc_card`
 WebRTC Card support blends the use of the ultra-realtime [WebRTC card live
 view](https://github.com/AlexxIT/WebRTC) with convenient access to Frigate
 events/snapshots/UI. AlexxIT's WebRTC Integration/Card must be installed and configured separately (see [details](https://github.com/AlexxIT/WebRTC)) before it can be used with this card.
 ```yaml
 cameras:
 - camera_entity: camera.office
   live_provider: webrtc-card
   webrtc_card:
     [...]
 ```
 | Option | Default | Description |
 | - | - | - |
 | `entity` | | The RTSP camera entity to pass to the WebRTC Card for this camera. |
 | `url` | Depends on the camera engine (e.g. Frigate cameras will automatically use the camera name since this is the [recommended setup](https://deploy-preview-4055--frigate-docs.netlify.app/guides/configuring_go2rtc/)). | The RTSP url to pass to the WebRTC Card, e.g. `rtsp://USERNAME:PASSWORD@CAMERA:554/RTSP_PATH` |
 | `*`| | Any options specified in the `webrtc_card:` YAML dictionary are silently passed through to the AlexxIT's WebRTC Card. See [WebRTC Configuration](https://github.com/AlexxIT/WebRTC#configuration) for full details this external card provides, e.g. `ui: true` will enable the WebRTC Card UI. |
@@ -0,0 +1 @@
 !> Just copying this full reference into your configuration will cause you a significant maintenance burden. Don't do it! Only specify what you need, everything shown here are either default or illustrative values.
@@ -0,0 +1,4 @@
 ?> For optimal UX, keep the settings for the mini-timeline in the `live` and
 `media_viewer` identical. Dragging the timeline may cause the card to change
 between the `live` view and `media_viewer` based views as the user pans between
 the past and present -- if the settings are different the timeline must "reset".
@@ -0,0 +1,206 @@
 # `conditions`
 `conditions` is not a top-level configuration block, but can be used as part of
 multiple other blocks.
 Conditions are used to conditionally take action (in `automations`), to apply
 certain configurations (in `overrides`) or to display "picture elements" (in
 `elements`) depending on runtime evaluation.
 ```yaml
 [used as part of other configuration]
  conditions:
    - [condition_1]
    - [condition_2]
 ```
 ## `camera`
 ```yaml
 conditions:
  - condition: camera
    [...]
 ```
 | Parameter | Description |
 | - | - |
 | `condition` | Must be `camera`. |
 | `cameras` | A list of camera IDs in which this condition is satisfied. See the camera [id](cameras/README.md) parameter. |
 ## `expand`
 ```yaml
 conditions:
  - condition: expand
    [...]
 ```
 | Parameter | Description |
 | - | - |
 | `condition` | Must be `expand`. |
 | `expand` | If `true` the condition is satisfied if the card is in expanded mode (in a dialog/popup). If `false` the condition is satisfied if the card is **NOT** in expanded mode (in a dialog/popup). |
 ## `fullscreen`
 ```yaml
 conditions:
  - condition: fullscreen
    [...]
 ```
 | Parameter | Description |
 | - | - |
 | `condition` | Must be `fullscreen`. |
 | `fullscreen` | If `true` the condition is satisfied if the card is in fullscreen mode. If `false` the condition is satisfied if the card is **NOT** in fullscreen mode. |
 ## `interaction`
 ```yaml
 conditions:
  - condition: interaction
    [...]
 ```
 | Parameter | Description |
 | - | - |
 | `condition` | Must be `interaction`. |
 | `interaction` | If `true` the condition is satisfied if the card has had human interaction within `view.interaction_seconds` elapsed seconds. If `false` the condition is satisfied if the card has **NOT** had human interaction in that time. |
 ## `media_loaded`
 ```yaml
 conditions:
  - condition: media_loaded
    [...]
 ```
 | Parameter | Description |
 | - | - |
 | `condition` | Must be `media_loaded`. |
 | `media_loaded` | If `true` the condition is satisfied if there is media load**ED** (not load**ING**) in the card (e.g. a clip, snapshot or live view). This may be used to hide controls during media loading or when a message (not media) is being displayed. Note that if `true` this  
 ## `microphone`
 ```yaml
 conditions:
  - condition: microphone
    [...]
 ```
 | Parameter | Description |
 | - | - |
 | `condition` | Must be `microphone`. |
 | `connected` | Optional: If `true` or `false` the condition is satisfied if the microphone is connected or disconnected respectively. |
 | `muted` | Optional: If `true` or `false` the condition is satisfied if the microphone is muted or unmuted respectively. |
 ## `numeric_state`
 ```yaml
 conditions:
  - condition: numeric_state
    [...]
 ```
 This stock Home Assistant condition works out of the box. See [Home Assistant conditions documentation](https://www.home-assistant.io/dashboards/conditional/#numeric-state).
 ## `screen`
 ```yaml
 conditions:
  - condition: screen
    [...]
 ```
 | Parameter | Description |
 | - | - |
 | `condition` | Must be `screen`. |
 | `media_query` | Any valid [media query](https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries) string. Media queries must start and end with parentheses. This may be used to alter card configuration based on device/media properties (e.g. viewport width, orientation). Please note that `width` and `height` refer to the entire viewport not just the card. |
 See the [screen conditions examples](../examples.md?id=screen-conditions).
 ## `state`
 ```yaml
 conditions:
  - condition: state
    [...]
 ```
 This stock Home Assistant condition works out of the box. See [Home Assistant conditions documentation](https://www.home-assistant.io/dashboards/conditional/#state).
 ## `triggered`
 ```yaml
 conditions:
  - condition: triggered
    [...]
 ```
 | Parameter | Description |
 | - | - |
 | `condition` | Must be `triggered`. |
 | `triggered` | A list of camera IDs which, if [triggered](cameras/README.md?id=triggers), satisfy the condition. |
 ## `user`
 ```yaml
 conditions:
  - condition: user
    [...]
 ```
 This stock Home Assistant condition works out of the box. See [Home Assistant conditions documentation](https://www.home-assistant.io/dashboards/conditional/#user).
 ## `view`
 ```yaml
 conditions:
  - condition: view
    [...]
 ```
 | Parameter | Description |
 | - | - |
 | `condition` | Must be `view`. |
 | `views` | A list of [views](view.md?id=supported-views) in which this condition is satified (e.g. `clips`). |
 # Fully expanded reference
 [](common/expanded-warning.md ':include')
 ```yaml
 conditions:
 - condition: camera
   cameras:
     - camera.office
  - condition: expand
    expand: true
  - condition: fullscreen
    fullscreen: true
  - condition: interaction
    interaction: true
  - condition: media_loaded
    media_loaded: true
  - condition: microphone
    connected: true
    muted: true
  - condition: numeric_state
    entity: sensor.office_temperature
    above: 10
    below: 20
  - condition: screen
    media_query: '(orientation: landscape)'
  - condition: state
    entity: climate.office
    state: heat
    state_not: off
  - condition: triggered
    triggered:
      - camera.office
  - condition: user
    users:
      - 581fca7fdc014b8b894519cc531f9a04
  - condition: view
    views:
      - live
 ```
@@ -0,0 +1,45 @@
 # `dimensions`
 These options control the dimensions and aspect-ratio of the card. These options
 configuration applies once to the entire card (including the menu, thumbnails,
 etc), not just to displayed media. This only applies to the card in normal
 render mode -- when in fullscreen, or when in expanded (popup/dialog mode) the
 aspect ratio is chosen dynamically to maximize the amount of content shown.
 ```yaml
 dimensions:
   [...]
 ```
 | Option | Default | Description |
 | - | - | - |
 | `aspect_ratio_mode` | `dynamic` | The aspect ratio mode to use. Acceptable values: `dynamic`, `static`, `unconstrained`. See below. |
 | `aspect_ratio` | `16:9` | The aspect ratio  to use. Acceptable values: `[W]:[H]` or `[W]/[H]`. See below. |
 | `max_height` | `100vh` | The maximum allowable height for the card. Specified in [CSS units](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units). Generally users should not need to change this setting unless they have set an `unconstrained` aspect ratio. |
 | `min_height` | `100px` | The minimum allowable height for the card. Specified in [CSS units](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units). Generally users should not need to change this setting. |
 ### `aspect_ratio_mode`
 | Option | Description |
 | - | - |
 | `dynamic` | The aspect-ratio of the entire card will match the aspect-ratio of the last selected media item. |
 | `static` | A fixed aspect-ratio (as defined by `aspect_ratio`) will be applied to the card. |
 | `unconstrained` | No aspect ratio is enforced in any view, the card will expand with the content. This may be especially useful for a panel-mode dashboard, or in views that have no intrinsic aspect-ratio (e.g. the media gallery). |
 ### `aspect_ratio`
 * `16 / 9` or `16:9`: Default widescreen ratio.
 * `4 / 3` or `4:3`: Default fullscreen ratio.
 * `[W]/[H]` or `[W]:[H]`: Any arbitrary aspect-ratio.
 ## Fully expanded reference
 [](common/expanded-warning.md ':include')
 ```yaml
 dimensions:
  aspect_ratio_mode: dynamic
  aspect_ratio: 16:9
  max_height: 100vh
  min_height: 100px
 ```
@@ -0,0 +1,356 @@
 # `elements`
 This card supports the [Picture Elements configuration
 syntax](https://www.home-assistant.io/lovelace/picture-elements/) to seamlessly
 allow the user to add custom elements to the card.
 ```yaml
 elements:
   - [element_1]
   - [element_2]
 ```
 ?> The Frigate Card allows either a single [action](actions.md) (as in stock Home
 Assistant) or list of [actions](actions.md) to be defined for each class of user interaction
 (e.g. `tap`, `double_tap`, `hold`, etc). See [an example of multiple actions](../examples.md?id=multiple-actions).
 ## `conditional`
 This element will let you show its sub-elements based on entity states. See [Home Assistant elements documentation](https://www.home-assistant.io/dashboards/picture-elements/#conditional-element).
 ```yaml
 elements:
   - type: conditional
     [...]
 ```
 ## `custom`
 Custom elements provided by a card. See [Home Assistant elements documentation](https://www.home-assistant.io/dashboards/picture-elements/#custom-elements).
 ```yaml
 elements:
   - type: custom
     [...]
 ```
 ## `custom:frigate-card-menu-icon`
 Add an arbitrary icon to the Frigate Card menu. Configuration is ~identical to that of the [Picture Elements Icon](https://www.home-assistant.io/lovelace/picture-elements/#icon-element) except with a type name of `custom:frigate-card-menu-icon`.
 ```yaml
 elements:
   - type: custom:frigate-card-menu-icon
     [...]
 ```
 ## `custom:frigate-card-menu-state-icon`
 Add a state icon to the Frigate Card menu that represents the state of a Home Assistant entity. Configuration is ~identical to that of the [Picture Elements State Icon](https://www.home-assistant.io/lovelace/picture-elements/#state-icon) except with a type name of `custom:frigate-card-menu-state-icon`.
 ```yaml
 elements:
   - type: custom:frigate-card-menu-icon
     [...]
 ```
 ## `custom:frigate-card-menu-submenu`
 Add a configurable submenu dropdown.
 ```yaml
 elements:
   - type: custom:frigate-card-menu-submenu
     [...]
 ```
 Parameters for this element are identical to the parameters of the [stock Home Assistant Icon Element](https://www.home-assistant.io/lovelace/picture-elements/#icon-element) with the exception of these parameters which differ:
 | Parameter | Description |
 | - | - |
 | `type` | Must be `custom:frigate-card-menu-submenu`. |
 | `items` | A list of menu items, as described below. |
 ### Submenu items
 | Parameter | Default | Description |
 | - | - | - |
 | `enabled` | `true` | Whether or not to show this item as enabled / selectable. |
 | `entity` | | An optional Home Assistant entity from which title, icon and style can be automatically computed. |
 | `icon` | | An optional item icon to display, e.g. `mdi:car` |
 | `selected` | `false` | Whether or not to show this item as selected. |
 | `state_color` | `true` | Whether or not the title and icon should be stylized based on state. |
 | `style` | | Position and style the element using CSS. |
 | `tap_action`, `double_tap_action`, `hold_action`, `start_tap`, `end_tap` | | The [actions](actions.md) to take when this item is interacted with. |
 | `title` | | An optional title to display. |
 ## `custom:frigate-card-menu-submenu-select`
 Add a submenu based on a `select` or `input_select`. This element allows you to convert a [Home Assistant Select Entity](https://www.home-assistant.io/integrations/select/) or [Home Assistant Input Select Entity](https://www.home-assistant.io/integrations/input_select/) (an entity either starting with `select` or `input_select`) into an overridable submenu. This *could* be done by hand using a regular submenu (above) -- this element is a convenience.
 ```yaml
 elements:
   - type: custom:frigate-card-menu-submenu-select
     [...]
 ```
 Parameters for the `custom:frigate-card-menu-submenu-select` element are identical to the parameters of the [stock Home Assistant State Icon Element](https://www.home-assistant.io/dashboards/picture-elements/#state-icon) with the exception of these parameters which differ:
 | Parameter | Description |
 | - | - |
 | `type` | Must be `custom:frigate-card-menu-submenu-select`. |
 | `options` | An optional dictionary of overrides keyed by the option name that the given select entity supports. These options can be used to set or override submenu item parameters on a per-option basis. The format is as described in [Submenu Items](elements.md?id=submenu-items) above. |
 See the `select` [submenu example](../examples.md?id=select-submenu).
 ## `custom:frigate-card-conditional`
 Restrict a set of elements to only render when the card is matches a set of [conditions](conditions.md). This is analogous to [`conditional`](elements.md?id=conditional) element above, except supporting a rich set of Frigate Card [conditions](conditions.md).
 ```yaml
 elements:
   - type: custom:frigate-card-conditional
     [...]
 ```
 Parameters for the `custom:frigate-card-conditional` element:
 | Parameter | Description |
 | - | - |
 | `type` | Must be `custom:frigate-card-conditional`. |
 | `conditions` | A list of [conditions](conditions.md) that must evaluate to true in order for the elements to be rendered. |
 | `elements` | The elements to render. Can be any supported element. |
 See the [conditional elements example](../examples.md?id=conditional-elements).
 ## `icon`
 This element creates a static icon that is not linked to the state of an entity. See [Home Assistant elements documentation](https://www.home-assistant.io/dashboards/picture-elements/#icon-element).
 ```yaml
 elements:
   - type: icon
     [...]
 ```
 ## `image`
 This creates an image element that overlays the background image. See [Home Assistant elements documentation](https://www.home-assistant.io/dashboards/picture-elements/#image-element).
 ```yaml
 elements:
   - type: image
     [...]
 ```
 ## `service-button`
 This entity creates a button (with arbitrary text) that can be used to call a service. See [Home Assistant elements documentation](https://www.home-assistant.io/dashboards/picture-elements/#service-call-button).
 ```yaml
 elements:
   - type: service-button
     [...]
 ```
 ## `state-badge`
 This element creates a badge representing the state of an entity. See [Home Assistant elements documentation](https://www.home-assistant.io/dashboards/picture-elements/#state-badge).
 ```yaml
 elements:
   - type: state-badge
     [...]
 ```
 ## `state-icon`
 This element represents an entity state using an icon. See [Home Assistant elements documentation](https://www.home-assistant.io/dashboards/picture-elements/#state-icon).
 ```yaml
 elements:
   - type: state-icon
     [...]
 ```
 ## `state-label`
 This element represents an entity’s state via text. See [Home Assistant elements documentation](https://www.home-assistant.io/dashboards/picture-elements/#state-label).
 ```yaml
 elements:
   - type: state-label
     [...]
 ```
 ## Fully expanded reference
 > [Actions](actions.md) are omitted for simplicity.
 [](common/expanded-warning.md ':include')
 ### Stock Home Assistant elements
 Reference: [Home Assistant Picture Elements](https://www.home-assistant.io/dashboards/picture-elements/)
 ```yaml
 elements:
  - type: state-badge
    entity: sensor.kitchen_dining_multisensor_air_temperature
    style:
      left: 100px
      top: 50px
    title: "Temperature"
  - type: state-icon
    entity: light.office_main_lights
    icon: mdi:lamp
    state_color: true
    style:
      left: 100px
      top: 100px
  - type: state-label
    entity: sensor.kitchen_motion_sensor_battery
    attribute: battery_voltage
    prefix: Volts
    title: Battery Voltage
    style:
      left: 100px
      top: 150px
  - type: state-label
    entity: sensor.kitchen_motion_sensor_battery
    attribute: battery_voltage
    prefix: 'Volts: '
    title: Battery Voltage
    style:
      background-color: black
      left: 100px
      top: 200px
  - type: service-button
    title: Light on
    service: homeassistant.turn_on
    service_data:
      entity: light.office_main_lights
    style:
      left: 100px
      top: 250px
  - type: icon
    icon: mdi:cow
    title: Moo
    style:
      left: 100px
      top: 300px
  - type: image
    entity: light.office_main_lights
    title: Image
    state_image:
      on: "https://picsum.photos/id/1003/1181/1772"
      off: "https://picsum.photos/id/102/4320/3240"
    state_filter:
      "on": brightness(110%) saturate(1.2)
      "off": brightness(50%) hue-rotate(45deg)
    style:
      left: 100px
      top: 350px
      height: 50px
      width: 100px
  - type: conditional
    conditions:
      - condition: state
        entity: light.office_main_lights
        state: on
        state_not: off
      - condition: numeric_state
        entity: sensor.light_level
        above: 20
        below: 100
      - condition: user
        users:
          - 581fca7fdc014b8b894519cc531f9a04
    elements:
    - type: icon
      icon: mdi:dog
      title: Woof
      style:
        left: 100px
        top: 400px
 ```
 ### Frigate Card elements
 ```yaml
 elements:
  - type: custom:frigate-card-menu-icon
    icon: mdi:car
    title: Vroom
  - type: custom:frigate-card-menu-state-icon
    entity: light.office_main_lights
    title: Office lights
    icon: mdi:chair-rolling
    state_color: true
  - type: custom:frigate-card-menu-submenu
    icon: mdi:menu
    items:
      - title: Lights
        icon: mdi:lightbulb
        entity: light.office_main_lights
        tap_action:
          action: toggle
      - title: Google
        icon: mdi:google
        enabled: false
        tap_action:
          action: url
          url_path: https://www.google.com
  - type: custom:frigate-card-menu-submenu-select
    icon: mdi:lamps
    entity: input_select.kitchen_scene
    options:
      scene.kitchen_cooking_scene:
        icon: mdi:chef-hat
        title: Cooking time!
      scene.kitchen_tv_scene:
        icon: mdi:television
        title: TV!
    # Show a pig icon if a variety of conditions are met.
  - type: custom:frigate-card-conditional
    elements:
      - type: icon
        icon: mdi:pig
        title: Oink
        style:
          left: 300px
          top: 100px
    conditions:
      - condition: view
        views:
          - live
      - condition: fullscreen
        fullscreen: true
      - condition: expand
        expand: true
      - condition: camera
        cameras: camera.front_door
      - condition: media_loaded
        media_loaded: true
      - condition: display_mode
        display_mode: single
      - condition: triggered
        triggered:
          - camera.front_door
      - condition: interaction
        interaction: true
      - condition: microphone
        muted: true
        connected: true
      - condition: state
        entity: light.office_main_lights
        state: on
        state_not: off
      - condition: numeric_state
        entity: sensor.light_level
        above: 20
        below: 100
      - condition: user
        users:
          - 581fca7fdc014b8b894519cc531f9a04
 ```
@@ -0,0 +1,10 @@
 # Grid Layout Algorithm
 When display mode (in `live` or `media_viewer` views) is set to `grid`, it will lay out cameras roughly in the order they are specified in the config (items may be moved to optimize grid 'density').
 The following algorithm is used to calculate the number of columns. This attempts to offers a balance between configurability, reasonable display in a typical Lovelace card width and reasonable display in a typical fullscreen display.
 - Use `grid_columns` if specified.
 - Otherwise, use the largest number of columns in the range `[2 - grid_max_columns]` that will fit at least a `600px` column width.
 - Otherwise, use the largest number of columns in the range `[2 - grid_max_columns]` that will fit at least a `190px` column width.
 - Otherwise, there will be `1` column only.
@@ -0,0 +1,41 @@
 # `image`
 Configure the `image` view.
 ```yaml
 image:
   [...]
 ```
 | Option | Default | Description |
 | - | - | - |
 | `actions` | | [Actions](actions.md) to use for the `image` view.|
 | `mode` | `url` | Mode of the the `image` view. Value must be one of `url` (to fetch an arbitrary image URL), `camera` (to show a still of the currently selected camera using either `camera_entity` or `webrtc_card.entity` in that order of precedence), or `screensaver` (to show an [embedded stock Frigate card logo](https://github.com/dermotduffy/frigate-hass-card/blob/main/src/images/frigate-bird-in-sky.jpg)). In either `url` or `camera` mode, the `screensaver` content is used as a fallback if a URL is not specified or cannot be derived. |
 | `refresh_seconds` | 0 | The image will be refreshed at least every `refresh_seconds` (it may refresh more frequently, e.g. whenever Home Assistant updates its camera security token). `0` implies no refreshing. |
 | `url` | |  A static image URL to be used when the `mode` is set to `url` or when a temporary image is required (e.g. may appear momentarily prior to load of a camera snapshot in the `camera` mode). Note that a `_t=[timestsamp]` query parameter will be automatically added to all URLs such that the image will not be cached by the browser. |
 | `zoomable` | `true` | Whether or not the image can be zoomed and panned, via touch/pinch and mouse scroll wheel with `ctrl` held. |
 ?> When `mode` is set to `camera` this is effectively providing the same image as the `image` [live provider](cameras/live-provider.md) would show in the live camera carousel.
 # Fully expanded reference
 [](common/expanded-warning.md ':include')
 ```yaml
 image:
  mode: url
  refresh_seconds: 0
  zoomable: true
  actions:
    entity: light.office_main_lights
    tap_action:
      action: none
    hold_action:
      action: none
    double_tap_action:
      action: none
    start_tap_action:
      action: none
    end_tap_action:
      action: none
 ```
@@ -0,0 +1,269 @@
 # `live`
 Configures the behavior of the `live` view.
 ```yaml
 live:
   [...]
 ```
 | Option | Default | Description |
 | - | - | - |
 | `actions` | | [Actions](actions.md) to use for the `live` view. |
 | `auto_mute` | `[unselected, hidden, microphone]` | A list of conditions in which live camera feeds are muted. `unselected` will automatically mute when a camera is unselected in the carousel, `hidden` will automatically mute when the browser/tab becomes hidden or `microphone` will automatically mute after the microphone is muted as long as the camera stays selected (see the `live.microphone.mute_after_microphone_mute_seconds` to control how long after). Use an empty list (`[]`) to never automatically mute. Note that if `auto_play` is enabled, the stream may mute itself automatically in order to honor the `auto_play` setting, as some browsers will not auto play media that is unmuted -- that is to say, where necessary, the `auto_play` parameter will take priority over the `auto_mute` parameter.|
 | `auto_pause` | `[]` | A list of conditions in which live camera feeds are automatically paused. `unselected` will automatically pause when a camera is unselected in the carousel and `hidden` will automatically pause when the browser/tab becomes hidden. Use an empty list (`[]`) to never automatically pause. **Caution**: Some live providers (e.g. `jsmpeg`) may not offer human-accessible means to resume play if it is paused, unless the `auto_play` option is used.|
 | `auto_play` | `[selected, visible]` | A list of conditions in which live camera feeds are automatically played.`selected` will automatically play when a camera is selected in the carousel and `visible` will automatically play when the browser/tab becomes visible. Use an empty list (`[]`) to never automatically play. Some live providers (e.g. `webrtc-card`, `jsmpeg`) do not support the prevention of automatic play on initial load, but should still respect the value of this flag on play-after-pause.|
 | `auto_unmute` | `[microphone]` | A list of conditions in which live camera feeds are unmuted. `selected` will automatically unmute when a camera is unselected in the carousel, `visible` will automatically unmute when the browser/tab becomes visible or `microphone` will automatically unmute after the microphone is unmuted. Use an empty list (`[]`) to never automatically unmute.|
 | `controls` | | Configuration for the `live` view controls. See below. |
 | `display` | | Controls whether to show a single or grid `live` view. See below. |
 | `draggable` | `true` | Whether or not the live carousel can be dragged left or right, via touch/swipe and mouse dragging. |
 | `lazy_load` | `true` | Whether or not to lazily load cameras in the camera carousel. Setting this will `false` will cause all cameras to load simultaneously when the `live` carousel is opened (or cause all cameras to load continually if both `lazy_load` and `preload` are `true`). This will result in a smoother carousel experience at a cost of (potentially) a substantial amount of continually streamed data. |
 | `lazy_unload` | `[]` | A list of conditions in which live camera feeds are unloaded. `unselected` will lazy-unload a camera when it is unselected in the carousel and `hidden` will lazy-unload all cameras when the browser/tab becomes hidden. Use an empty list (`[]`) to never automatically unload. This will cause a reloading delay on revisiting that camera in the carousel but will save the streaming network resources that are otherwise consumed. This option has no effect if `lazy_load` is false. Some live providers (e.g. `webrtc-card`) implement their own lazy unloading independently which may occur regardless of the value of this setting.|
 | `microphone` | | See below. |
 | `preload` | `false` | Whether or not to preload the live view. Preloading causes the live view to render in the background regardless of what view is actually shown, so it's instantly available when requested. This consumes additional network/CPU resources continually. |
 | `show_image_during_load` | `true` | If `true`, during the initial stream load, the `image` live provider will be shown instead of the loading video stream. This still image will auto-refresh and is replaced with the live stream once loaded. |
 | `transition_effect` | `slide` | Effect to apply as a transition between live cameras. Accepted values: `slide` or `none`. |
 | `zoomable` | `true` | Whether or not the live carousel can be zoomed and panned, via touch/pinch and mouse scroll wheel with `ctrl` held. |
 ## `controls`
 Configure the controls for the `live` view.
 ```yaml
 live:
  controls:
     [...]
 ```
 | Option | Default | Description |
 | - | - | - |
 | `builtin` | `true` | Whether to show the built in (browser) video controls on live video. |
 | `next_previous` | | Configures how the "Next & Previous" controls are shown on the `live` view. See below. |
 | `thumbnails` | | | Configures how thumbnails are shown on the `live` view. See below. |
 | `timeline` | | | Configures how the mini-timeline is shown on the `live` view. See below. |
 | `title` | | Configures how the camera title is shown on the `live` view. See below. |
 ### `next_previous`
 Configures how the "Next & Previous" controls are shown on the live view.
 ```yaml
 live:
  controls:
    next_previous:
      [...]
 ```
 | Option | Default | Description |
 | - | - | - |
 | `size` | `48` | The size of the next/previous controls in pixels. Must be &gt;= `20`. |
 | `style` | `chevrons` | When viewing live cameras, what kind of controls to show to move to the previous/next camera. Acceptable values: `chevrons`, `icons`, `none` . |
 ### `thumbnails`
 Configures how thumbnails are shown on the live view.
 ```yaml
 live:
  controls:
    thumbnails:
      [...]
 ```
 | Option | Default | Description |
 | - | - | - |
 | `events_media_type` | `all` | Whether to show `clips`, `snapshots` or `all` in the thumbnail carousel in the `live` view. This setting is only relevant when the `media_type` parameter is set to `events`.|
 | `media_type` | `events` | Whether to load `events` or `recordings` media.|
 | `mode` | `none` | Whether to show the thumbnail carousel `below` the media, `above` the media, in a drawer to the `left` or `right` of the media or to hide it entirely (`none`).|
 | `show_details` | `false` | Whether to show event details (e.g. duration, start time, object detected, etc) alongside the thumbnail.|
 | `show_download_control` | `true` | Whether to show the download control on each thumbnail.|
 | `show_favorite_control` | `true` | Whether to show the favorite ('star') control on each thumbnail.|
 | `show_timeline_control` | `true` | Whether to show the timeline ('target') control on each thumbnail.|
 | `size` | `100` | The size of the thumbnails in the thumbnail carousel in pixels. Must be &gt;= `75` and &lt;= `175`. |
 ### `timeline`
 Configures how the mini-timeline is shown on the live view.
 ```yaml
 live:
  controls:
    timeline:
      [...]
 ```
 | Option | Default | Description |
 | - | - | - |
 | `clustering_threshold` | `3` | The minimum number of overlapping events to allow prior to clustering/grouping them. Higher numbers cause clustering to happen less frequently. Depending on the timescale/zoom of the timeline, the underlying timeline library may still allow overlaps for low values of this parameter -- for a fully "flat" timeline use the `ribbon` style. `0` disables clustering entirely. Only used in the `stack` style of timeline. |
 | `events_media_type` | `all` | Whether to show only events with `clips`, events with `snapshots` or `all` events. When `all` is used, `clips` are favored for events that have both a clip and a snapshot.|
 | `mode` | `none` | Whether to show the thumbnail carousel `below` the media, `above` the media, in a drawer to the `left` or `right` of the media or to hide it entirely (`none`).|
 | `pan_mode` | `pan`| See [timeline pan mode](timeline-pan-mode.md). |
 | `show_recordings` | `true` | Whether to show recordings on the timeline (specifically: which hours have any recorded content).|
 | `style` | `ribbon` | Whether the timeline should show events as a single flat `ribbon` or a `stack` of events that are clustered using the `clustering_threshold`. |
 | `window_seconds` | `3600` | The length of the default timeline in seconds. By default, 1 hour (`3600` seconds) is shown in the timeline. |
 [](common/timeline-seek-info.md ':include')
 ### `title`
 Configures how the camera title is shown on the live view.
 ```yaml
 live:
  controls:
    title:
      [...]
 ```
 | Option | Default | Description |
 | - | - | - |
 | `duration_seconds` | `2` | The number of seconds to display the title popup. `0` implies forever.|
 | `mode` | `popup-bottom-right` | How to display the live camera title. Acceptable values: `none`, `popup-top-left`, `popup-top-right`, `popup-bottom-left`, `popup-bottom-right` . |
 ## `display`
 Controls whether to show a single or grid `live` view.
 ```yaml
 live:
  display:
     [...]
 ```
 | Option | Default | Description |
 | - | - | - |
 | `grid_columns` | | If specified the grid will always have exactly this number of columns.|
 | `grid_max_columns` | `4` | If specified, and `grid_columns` is not specified, the grid will not render more than this number of columns. The precise number will be calculated based on the [grid layout algorithm](grid-layout-algorithm.md). |
 | `grid_selected_width_factor` | `2` | How much to scale up the selected media item in a grid. A value of `1` will not scale the selected item at all, the default value of `2` will scale the media item width to twice what it would otherwise be, etc. |
 | `mode` | `single` | Whether to display a `single` live camera in a carousel, or all cameras in a `grid` configuration.|
 ## `microphone`
 Controls the behavior of the microphone in the `live` view.
 ```yaml
 live:
  microphone:
 ```
 | Option | Default | Description |
 | - | - | - |
 | `always_connected` | `false` | Whether or not to keep the microphone stream continually connected while the card is running, or only when microphone is used (default). In the latter case there'll be a connection reset when the microphone is first used -- using this option can avoid that reset.|
 | `disconnect_seconds` | `90` | The number of seconds after microphone usage to disconnect the microphone from the stream. `0` implies never. Not relevant if `always_connected` is `true`.|
 | `mute_after_microphone_mute_seconds` | `60` | The number of seconds after the microphone mutes to automatically mute the inbound audio when `live.auto_mute` includes `microphone`.|
 See [Using 2-way audio](../usage/2-way-audio.md) for more information about the very particular requirements that must be followed for 2-way audio to work.
 ## `ptz`
 Controls a PTZ (Pan Tilt Zoom) overlay on the `live` view.
 ```yaml
 live:
  ptz:
     [...]
 ```
 | Option | Default | Description |
 | - | - | - |
 | `actions_left`, `actions_right`, `actions_up`, `actions_down`, `actions_zoom_in`, `actions_zoom_out`, `actions_home` | Set by camera [engine](cameras/engine.md) of the selected camera | The [actions](actions.md) to call when this icon is interacted with. |
 | `data_left`, `data_right`, `data_up`, `data_down`, `data_zoom_in`, `data_zoom_out`, `data_home` | | Shorthand for a `tap_action` that calls the `service` with the data provided in this argument. Internally, this is just translated into the longer-form `actions_[button]`. If both `actions_X` and `data_X` are specified, `actions_X` takes priority. This is compatible with [AlexxIT's WebRTC Card PTZ configuration](https://github.com/AlexxIT/WebRTC/wiki/PTZ-Config-Examples). |
 | `hide_home` | `false` | When `true` the Home button of the control is hidden |
 | `hide_pan_tilt` | `false` | When `true` the Pan & Tilt buttons of the control is hidden |
 | `hide_zoom` | `false` | When `true` the Zoom button of the control is hidden |
 | `mode` | `on` | When `on` will show a PTZ control if so configured (manually, or by the camera engine), if `off` will not show any control. |
 | `orientation` | `horizontal` | Whether to show a `vertical` or `horizontal` PTZ control. |
 | `position` | `bottom-right` | Whether to position the control on the `top-left`, `top-right`, `bottom-left` or `bottom-right`. This may be overridden by using the `style` parameter to precisely control placement. |
 | `service` | | An optional Home Assistant service to call when the `data_` parameters are used. |
 | `style` | | Optionally position and style the element using CSS. Similar to [Picture Element styling](https://www.home-assistant.io/dashboards/picture-elements/#how-to-use-the-style-object), except without any default, e.g. `left: 42%` |
 ## Fully expanded reference
 [](common/expanded-warning.md ':include')
 ```yaml
 live:
  auto_play:
    - selected
    - visible
  auto_pause: []
  auto_mute:
    - unselected
    - hidden
  auto_unmute:
    - microphone
  preload: false
  lazy_load: true
  lazy_unload: []
  draggable: true
  zoomable: true
  transition_effect: slide
  controls:
    builtin: true
    next_previous:
      style: chevrons
      size: 48
    thumbnails:
      media_type: events
      events_media_type: all
      size: 100
      show_details: false
      show_download_control: true
      show_favorite_control: true
      show_timeline_control: true
      mode: none
    timeline:
      style: ribbon
      mode: none
      pan_mode: pan
      clustering_threshold: 3
      events_media_type: all
      show_recordings: true
      window_seconds: 3600
    title:
      mode: popup-bottom-right
      duration_seconds: 2
  microphone:
    always_connected: false
    disconnect_seconds: 90
    mute_after_microphone_mute_seconds: 60
  ptz:
    mode: on
    position: bottom-right
    orientation: horizontal
    hide_pan_tilt: false
    hide_zoom: false
    hide_home: false
    style:
      # Optionally override the default style.
      right: 5%
    # Manually specifying actions.
    actions_left:
      tap_action:
        action: call-service
        service: sonoff.send_command
        service_data:
          device: '048123'
          cmd: left 
    # Equivalent short form PTZ actions (only right button shown)
    service: sonoff.send_command
    data_right:
      device: '048123'
      cmd: right
  display:
    mode: single
    grid_selected_width_factor: 2
    grid_max_columns: 4
  actions:
    entity: light.office_main_lights
    tap_action:
      action: none
    hold_action:
      action: none
    double_tap_action:
      action: none
    start_tap_action:
      action: none
    end_tap_action:
      action: none
 ```
@@ -0,0 +1,78 @@
 # `media_gallery`
 The `media_gallery` is used for providing an overview of all `clips`, `snapshots` and `recordings` in a thumbnail gallery.
 ```yaml
 media_gallery:
   [...]
 ```
 | Option | Default | Description |
 | - | - | - |
 | `actions` | | [Actions](actions.md) to use for all views that use the `media_gallery` (e.g. `clips`, `snapshots`, `recordings`). |
 | `controls` | | Configuration for the Media viewer controls. See below. |
 ## `controls`
 ### `filter`
 Configure the media gallery filter.
 ```yaml
 media_gallery:
  controls:
    filter:
       [...]
 ```
 | Option | Default | Description |
 | - | - | - |
 | `mode` | `right` | Whether to show the gallery media filter to the `left`, to the `right` or `none` for no media filter. |
 ### `thumbnails`
 Configure the media gallery thumbnails.
 ```yaml
 media_gallery:
  controls:
    thumbnails:
       [...]
 ```
 | Option | Default | Description |
 | - | - | - |
 | `show_details` | `false` | Whether to show media details (e.g. duration, start time, object detected, etc) alongside the thumbnail.|
 | `show_download_control` | `true` | Whether to show the download control on each thumbnail.|
 | `show_favorite_control` | `true` | Whether to show the favorite ('star') control on each thumbnail.|
 | `show_timeline_control` | `true` | Whether to show the timeline ('target') control on each thumbnail.|
 | `size` | `100` | The size of the thumbnails in the gallery. Must be &gt;= `75` and &lt;= `175`.|
 ## Fully expanded reference
 [](common/expanded-warning.md ':include')
 ```yaml
 media_gallery:
  controls:
    filter:
      mode: 'right'
    thumbnails:
      size: 100
      show_details: false
      show_download_control: true
      show_favorite_control: true
      show_timeline_control: true
  actions:
    entity: light.office_main_lights
    tap_action:
      action: none
    hold_action:
      action: none
    double_tap_action:
      action: none
    start_tap_action:
      action: none
    end_tap_action:
      action: none
 ```
@@ -0,0 +1,194 @@
 # `media_viewer`
 The `media_player` section configures viewing all `clip`, `snapshot` or `recording` media, in either a media carousel or grid.
 ```yaml
 media_viewer:
   [...]
 ```
 | Option | Default | Description |
 | - | - | - |
 | `actions` | | [Actions](actions.md) to use for all views that use the `media_viewer` (e.g. `clip`, `snapshot`). |
 | `auto_mute` | `[unselected, hidden]` | A list of conditions in which media items are muted. `unselected` will automatically mute when a media item is unselected in the carousel and `hidden` will automatically mute when the browser/tab becomes hidden. Use an empty list (`[]`) to never automatically mute.|
 | `auto_pause` | `[unselected, hidden]` | A list of conditions in which media items are automatically paused. `unselected` will automatically pause when a media item is unselected in the carousel and `hidden` will automatically pause when the browser/tab becomes hidden. Use an empty list (`[]`) to never automatically pause.|
 | `auto_play` | `[selected, visible]` | A list of conditions in which media items are automatically played.`selected` will automatically play when a media item is selected in the carousel and `visible` will automatically play when the browser/tab becomes visible. Use an empty list (`[]`) to never automatically play.|
 | `auto_unmute` | `[]` | A list of conditions in which media items are unmuted. `selected` will automatically unmute when a media item is unselected in the carousel and `visible` will automatically unmute when the browser/tab becomes visible. Use an empty list (`[]`) to never automatically unmute. Note that some browsers will not allow automated unmute until the user has interacted with the page in some way -- if the user has not then the browser may pause the media instead.|
 | `controls` | | Configuration for the Media viewer controls. See below. |
 | `draggable` | `true` | Whether or not the Media viewer carousel can be dragged left or right, via touch/swipe and mouse dragging. |
 | `lazy_load` | `true` | Whether or not to lazily load media in the Media viewer carousel. Setting this will false will fetch all media immediately which may make the carousel experience smoother at a cost of (potentially) a substantial number of simultaneous media fetches on load. |
 | `snapshot_click_plays_clip` | `true` | Whether clicking on a snapshot in the media viewer should play a related clip. |
 | `transition_effect` | `slide` | Effect to apply as a transition between event media. Accepted values: `slide` or `none`. |
 | `zoomable` | `true` | Whether or not the Media Viewer can be zoomed and panned, via touch/pinch and mouse scroll wheel with `ctrl` held. |
 ## `controls`
 Configure the controls for the media player views.
 ```yaml
 media_viewer:
  controls:
     [...]
 ```
 | Option | Default | Description |
 | - | - | - |
 | `builtin` | `true` | Whether to show the built in (browser) video controls on media viewer videos. |
 | `next_previous` | | Configures how the "Next & Previous" controls are shown on the media viewer. See below. |
 | `thumbnails` | | Configures how thumbnails are shown on the media viewer. See below. |
 | `timeline` | | Configures how the mini-timeline is shown on the media viewer. See below. |
 | `title` | | Configures how the media title is shown on the media viewer. See below. |
 ### `next_previous`
 Configures how the "Next & Previous" controls are shown on the media viewer.
 ```yaml
 media_viewer:
  controls:
    next_previous:
       [...]
 ```
 | Option | Default | Description |
 | - | - | - |
 | `size` | `48` | The size of the next/previous controls in pixels. Must be &gt;= `20`.|
 | `style` | `thumbnails` | When viewing media, what kind of controls to show to move to the previous/next media item. Acceptable values: `thumbnails`, `chevrons`, `none` . |
 ### `thumbnails`
 Configures how thumbnails are shown on the media viewer.
 ```yaml
 media_viewer:
  controls:
    thumbnails:
       [...]
 ```
 | Option | Default | Description |
 | - | - | - |
 | `mode` | `none` | Whether to show the thumbnail carousel `below` the media, `above` the media, in a drawer to the `left` or `right` of the media or to hide it entirely (`none`).|
 | `show_details` | `false` | Whether to show event details (e.g. duration, start time, object detected, etc) alongside the thumbnail.|
 | `show_download_control` | `true` | Whether to show the download control on each thumbnail.|
 | `show_favorite_control` | `true` | Whether to show the favorite ('star') control on each thumbnail.|
 | `show_timeline_control` | `true` | Whether to show the timeline ('target') control on each thumbnail.|
 | `size` | `100` | The size of the thumbnails in the thumbnail carousel pixels. Must be &gt;= `75` and &lt;= `175`.|
 ### `timeline`
 Configures how the mini-timeline is shown on the media viewer.
 ```yaml
 media_viewer:
  controls:
    timeline:
       [...]
 ```
 | Option | Default | Description |
 | - | - | - |
 | `clustering_threshold` | `3` | The minimum number of overlapping events to allow prior to clustering/grouping them. Higher numbers cause clustering to happen less frequently. Depending on the timescale/zoom of the timeline, the underlying timeline library may still allow overlaps for low values of this parameter -- for a fully "flat" timeline use the `ribbon` style. `0` disables clustering entirely. Only used in the `stack` style of timeline. |
 | `events_media_type` | `all` | Whether to show only events with `clips`, events with `snapshots` or `all` events. When `all` is used, `clips` are favored for events that have both a clip and a snapshot. |
 | `mode` | `none` | Whether to show the thumbnail carousel `below` the media, `above` the media, in a drawer to the `left` or `right` of the media or to hide it entirely (`none`).|
 | `pan_mode` | `pan`| See [timeline pan mode](timeline-pan-mode.md). |
 | `show_recordings` | `true` | Whether to show recordings on the timeline (specifically: which hours have any recorded content).|
 | `style` | `ribbon` | Whether the timeline should show events as a single flat `ribbon` or a `stack` of events that are clustered using the `clustering_threshold`. |
 | `window_seconds` | `3600` | The length of the default timeline in seconds. By default, 1 hour (`3600` seconds) is shown in the timeline. |
 [](common/timeline-seek-info.md ':include')
 ### `title`
 Configures how the media title is shown on the media viewer.
 ```yaml
 media_viewer:
  controls:
    title:
       [...]
 ```
 | Option | Default | Description |
 | - | - | - |
 | `duration_seconds` | `2` | The number of seconds to display the title popup. `0` implies forever.|
 | `mode` | `popup-bottom-right` | How to display the Media viewer media title. Acceptable values: `none`, `popup-top-left`, `popup-top-right`, `popup-bottom-left`, `popup-bottom-right` . |
 ## `display`
 Controls whether to show a single media item or grid in the media viewer.
 ```yaml
 media_viewer:
  display:
    [...]
 ```
 | Option | Default | Description |
 | - | - | - |
 | `grid_columns` | | If specified the grid will always have exactly this number of columns.|
 | `grid_max_columns` | `4` | If specified, and `grid_columns` is not specified, the grid will not render more than this number of columns. The precise number will be calculated based on the [grid layout algorithm](grid-layout-algorithm.md). |
 | `grid_selected_width_factor` | `2` | How much to scale up the selected media item in a grid. A value of `1` will not scale the selected item at all, the default value of `2` will scale the media item width to twice what it would otherwise be, etc. |
 | `mode` | `single` | Whether to display a `single` media item at a time, or a media item for all cameras in a `grid` configuration.|
 ## Fully expanded reference
 [](common/expanded-warning.md ':include')
 ```yaml
 media_viewer:
  auto_play:
    - selected
    - visible
  auto_pause:
    - unselected
    - hidden
  auto_mute:
    - unselected
    - hidden
  auto_unmute: []
  lazy_load: true
  draggable: true
  zoomable: true
  snapshot_click_plays_clip: true
  transition_effect: slide
  controls:
    builtin: true
    next_previous:
      size: 48
      style: thumbnails
    thumbnails:
      size: 100
      mode: none
      show_details: false
      show_download_control: true
      show_favorite_control: true
      show_timeline_control: true
    timeline:
      style: ribbon
      mode: none
      pan_mode: pan
      clustering_threshold: 3
      events_media_type: all
      show_recordings: true
      window_seconds: 3600
    title:
      mode: popup-bottom-right
      duration_seconds: 2
  display:
    mode: single
    grid_selected_width_factor: 2
    grid_max_columns: 4
  actions:
    entity: light.office_main_lights
    tap_action:
      action: none
    hold_action:
      action: none
    double_tap_action:
      action: none
    start_tap_action:
      action: none
    end_tap_action:
      action: none
 ```
@@ -0,0 +1,171 @@
 # `menu`
 Configures how the card menu behaves.
 ```yaml
 menu:
   [...]
 ```
 | Option | Default | Description |
 | - | - | - |
 | `alignment` | `left` | Whether to align the menu buttons to the `left`, `right`, `top` or `bottom` of the menu. Some selections may have no effect depending on the value of `position` (e.g. it doesn't make sense to `left` align icons on a menu with `position` to the `left`).|
 | `button_size` | `40` | The size of the menu buttons in pixels. Must be &gt;= `20`.|
 | `buttons` | | Whether to show or hide built-in buttons. See below. |
 | `position` | `top` | Whether to show the menu on the `left`, `right`, `top` or `bottom` side of the card. Note that for the `outside` style only the `top` and `bottom` positions have an effect.|
 | `style` | `hidden` | The menu style to show by default, one of `none`, `hidden`, `hover`, `hover-card`, `overlay`, or `outside`. See below. |
 ## `buttons`
 All configuration is under:
 ```yaml
 menu:
  buttons:
    [button]:
       [...]
 ```
 ### Available Buttons
 | Button name | Description |
 | - | - |
 | `camera_ui` | The `camera_ui` menu button: brings the user to a context-appropriate page on the UI of their camera engine (e.g. the Frigate camera homepage). Will only appear if the camera engine supports a camera UI (e.g. if `frigate.url` option is set for `frigate` engine users).|
 | `cameras` | The camera selection submenu. Will only appear if multiple cameras are configured. |
 | `clips` | The `clips` view menu button: brings the user to the `clips` view on tap and the most-recent `clip` view on hold. |
 | `display_mode` | The `display_mode` button allows changing between single and grid views. |
 | `download` | The `download` menu button: allow direct download of the media being displayed.|
 | `expand` | The `expand` menu button: expand the card into a popup/dialog. |
 | `frigate` | The `Frigate` menu button: brings the user to the default configured view (`view.default`), or collapses/expands the menu if the `menu.style` is `hidden` . |
 | `fullscreen` | The `fullscreen` menu button: expand the card to consume the fullscreen. |
 | `image` | The `image` view menu button: brings the user to the static `image` view. |
 | `live` | The `live` view menu button: brings the user to the `live` view. |
 | `media_player` | The `media_player` menu button: sends the visible media to a remote media player. Supports Frigate clips, snapshots and live camera (only for cameras that specify a `camera_entity` and only using the default HA stream (equivalent to the `ha` live provider). `jsmpeg` or `webrtc-card` are not supported, although live can still be played as long as `camera_entity` is specified. In the player list, a `tap` will send the media to the player, a `hold` will stop the media on the player. |
 | `microphone` | The `microphone` button allows usage of 2-way audio in certain configurations. See [Using 2-way audio](../usage/2-way-audio.md). |
 | `ptz` | The `show_ptz` button shows or hide the PTZ controls. |
 | `recordings` | The `recordings` view menu button: brings the user to the `recordings` view on tap and the most-recent `recording` view on hold. |
 | `screenshot` | The `screenshot` menu button: take a screenshot of the loaded media (e.g. a still from a video). |
 | `snapshots` | The `snapshots` view menu button: brings the user to the `clips` view on tap and the most-recent `snapshot` view on hold. |
 | `timeline` | The `timeline` menu button: show the event timeline. |
 ### Options for each button
 | Option | Default | Description |
 | - | - | - |
 | `alignment` | `matching` | Whether this button should have an alignment that is `matching` the menu alignment or `opposing` the menu. Can be used to create two separate groups of buttons on the menu. `priority` orders buttons within a given `alignment`. |
 | `enabled` | `true` for `frigate`, `cameras`, `substreams`, `live`, `clips`, `snapshots`, `timeline`, `download`, `camera_ui`, `fullscreen`, `media_player`, `display_mode`. `false` for `image`, `expand`, `microphone`, `mute`, `play`, `recordings`, `screenshot`, `ptz` | Whether or not to show the button. |
 | `icon` | | An icon to overriding the default for that button, e.g. `mdi:camera-front`. |
 | `priority` | `50` | The button priority. Higher priority buttons are ordered closer to the start of the menu alignment (i.e. a button with priority `70` will order further to the left than a button with priority `60`, when the menu alignment is `left`). Minimum `0`, maximum `100`.|
 ## `style`
 This card supports several menu styles.
 | Key | Description | Screenshot |
 | - | - | - |
 |`hidden`| Hide the menu by default, expandable upon clicking the Frigate button. | ![](../images/menu-mode-hidden.png "Menu hidden :size=400") |
 |`hover-card`| Overlay the menu over the card contents when the mouse is over the **card**, otherwise it is not shown. The Frigate button shows the default view. | ![](../images/menu-mode-overlay.png "Menu hover-card :size=400") |
 |`hover`| Overlay the menu over the card contents when the mouse is over the **menu**, otherwise it is not shown. The Frigate button shows the default view. | ![](../images/menu-mode-overlay.png "Menu hover :size=400") |
 |`none`| No menu is shown. | ![](../images/menu-mode-none.png "No menu :size=400") |
 |`outside`| Render the menu outside the card (i.e. above it if `position` is `top`, or below it if `position` is `bottom`). The Frigate button shows the default view. | ![](../images/menu-mode-above.png "Menu outside :size=400") |
 |`overlay`| Overlay the menu over the card contents. The Frigate button shows the default view. | ![](../images/menu-mode-overlay.png "Menu hidden :size=400") |
 ## Fully expanded reference
 [](common/expanded-warning.md ':include')
 ```yaml
 menu:
  alignment: left
  buttons:
    frigate:
      priority: 50
      enabled: true
      alignment: matching
      # Default icon is an internal coded Frigate icon. Note
      # absence of 'mdi' here (mdi has no Frigate icon).
      icon: frigate
    cameras:
      priority: 50
      enabled: true
      alignment: matching
      icon: mdi:video-switch
    substreams:
      priority: 50
      enabled: true
      icon: mdi:video-input-component
    live:
      priority: 50
      enabled: true
      alignment: matching
      icon: mdi:cctv
    clips:
      priority: 50
      enabled: true
      alignment: matching
      icon: mdi:filmstrip
    snapshots:
      priority: 50
      enabled: true
      alignment: matching
      icon: mdi:camera
    image:
      priority: 50
      enabled: false
      alignment: matching
      icon: mdi:image
    timeline:
      priority: 50
      enabled: true
      alignment: matching
      icon: mdi:chart-gantt
    download:
      priority: 50
      enabled: true
      alignment: matching
      icon: mdi:download
    camera_ui:
      priority: 50
      enabled: true
      alignment: matching
      icon: mdi:web
    fullscreen:
      priority: 50
      enabled: true
      alignment: matching
      icon: mdi:fullscreen
    expand:
      priority: 50
      enabled: true
      alignment: matching
      icon: mdi:arrow-expand-all
    media_player:
      priority: 50
      enabled: false
      alignment: matching
      icon: mdi:cast
    microphone:
      priority: 50
      enabled: false
      alignment: matching
      icon: mdi:microphone
      type: momentary
    mute:
      priority: 50
      enabled: false
      alignment: matching
      icon: mdi:volume-off
    play:
      priority: 50
      enabled: false
      alignment: matching
      icon: mdi:play
    show_ptz:
      priority: 50
      enabled: false
      alignment: matching
      icon: mdi:pan
  button_size: 40
  position: top
  style: hidden
 ```
@@ -0,0 +1,39 @@
 # `overrides`
 Various parts of card configuration may [conditionally](conditions.md) be
 overridden (e.g. to hide the menu in fullscreen mode).
 ```yaml
 overrides:
  - conditions:
       [condition]
    overrides:
       [override]
 ```
 Not all configuration parameters are overriddable, some because it doesn't make
 sense for that parameter to vary, and many because of the extra complexity of
 supporting overriding given the lack of compelling usecases ([please request new
 overridable parameters
 here!](https://github.com/dermotduffy/frigate-hass-card/issues/new/choose)).
 Each entry under the top-level `overrides` configuration block should be a list
 item, that has both of the following parameters set:
 | Option | Default | Description |
 | - | - | - |
 | `conditions` | | A list of [conditions](conditions.md) that must evaluate to `true` in order for the overrides to be applied. |
 | `overrides` | | Configuration overrides to be applied. Any configuration parameter matching [Overrideable parameters](overrides.md?id=overrideable-parameters) can be overridden. |
 ## Overrideable parameters
 | Configuration Key | Overrideable |
 | - | - |
 | [`cameras.*`](cameras/README.md) | :white_check_mark: |
 | [`cameras_global.*`](cameras/README.md) | :white_check_mark: |
 | [`dimensions.*`](dimensions.md) | :white_check_mark: |
 | [`image.*`](image.md) | :white_check_mark: |
 | [`live.controls.*`](live.md?id=controls), [`live.display.*`](live.md?id=display), [`live.microphone.*`](live.md?id=microphone), [`live.show_image_during_load`](live.md), [`live.zoomable`](live.md) | :white_check_mark: |
 | [`menu.*`](menu.md) | :white_check_mark: |
 | [`view.*`](view.md) | :white_check_mark: |
 | *(Everything else)* | :heavy_multiplication_x: |
@@ -0,0 +1,65 @@
 # `performance`
 Configure the card performance settings to enable the card to run (more) smoothly on lower end devices.
 ```yaml
 performance:
   [...]
 ```
 | Option | Default | Description |
 | - | - | - |
 | `features` | | Configure feature settings that impact performance. |
 | `style` | | Configure style settings that impact performance. |
 ### `features`
 Controls card-wide functionality that may impact performance.
 ```yaml
 performance:
  features:
     [...]
 ```
 | Option | Default | Description |
 | - | - | - |
 | `animated_progress_indicator` | `true` | Will show the animated progress indicator 'spinner' when `true` or a simple loading icon when `false`.|
 | `media_chunk_size` | `50` | How many media items to fetch and render at a time (e.g. thumbnails under a live view, or number of snapshots to load in the media viewer). This may only make partial sense in some contexts (e.g. the 'infinite gallery' is still infinite, it just loads thumbnails this many items at a time) or not at all (e.g. the timeline will show the number of events dictated by the time span the user navigates to).|
 ### `style`
 Style performance options request the card minimize certain expensive CSS
 stylings. This does not necessarily disable these stylings _entirely_ since that
 may break the basic expected visuals of the card (e.g. menu icons need curves),
 but rather avoids use of them in high item-count situations (e.g. avoiding
 shadows on timeline items, or curves in the media gallery items).
 ```yaml
 performance:
  style:
     [...]
 ```
 | Option | Default | Description |
 | - | - | - |
 | `border_radius` | `true` | If `false` minimizes the usage of rounded corners.|
 | `box_shadow` | `true` | If `false` minimizes the usage of shadows.|
 ### The `low-performance` profile
 For low end devices, the `low-performance` profile will adjust card defaults to attempt to improve performance. See the [profiles](profiles.md) configuration option for details on how to select profiles.
 ## Fully expanded reference
 [](common/expanded-warning.md ':include')
 ```yaml
 performance:
  features:
    animated_progress_indicator: true
    media_chunk_size: 50
  style:
    border_radius: true
    box_shadow: true
 ```
@@ -0,0 +1,47 @@
 # `profiles`
 Apply pre-configured sets of defaults to ease card configuration.
 ```yaml
 profiles:
  - [profile_1]
  - [profile_2]
 ```
 ?> Since the profiles change the _default_ value of options, setting a profile
 on a pre-existing card could have limited effect if there are options already set by
 the user.
 ?> Profiles are applied top to bottom. If multiple profiles change a configuration default, then the last one "wins"
 | Profile name | Purpose |
 | - | - |
 | `low-performance` | Increase card performance. |
 | `scrubbing` | Allow media "scrubbing". |
 ## `low-performance`
 For low end devices, the `low-performance` profile will adjust card defaults to attempt to increase performance.
 Principles used in the selection of options set by `low-profile` profile mode:
 * Get 'out of the box' performance similar to the basic "Home Assistant Picture Glance" card.
 * Do not break the visual aesthetic of the card.
 See the [source code](https://github.com/dermotduffy/frigate-hass-card/blob/dev/src/config/profiles/low-performance.ts) for an exhaustive list of options set by this profile.
 ## `scrubbing`
 Configures the `live` view and media viewer to allow media "scrubbing" as the timeline is dragged back and forth.
 See the [source code](https://github.com/dermotduffy/frigate-hass-card/blob/dev/src/config/profiles/scrubbing.ts) for an exhaustive list of options set by this profile.
 ## Fully expanded reference
 [](common/expanded-warning.md ':include')
 ```yaml
 profiles:
  - low-performance
  - scrubbing
 ```
@@ -0,0 +1,10 @@
 # Timeline Pan Mode
 The behavior of the timeline during seeking/dragging can be controlled by means of the icon on the bottom-right of the timeline, or by using the `pan_mode` configuration variable for the relevant timeline controls (e.g. `live.controls.timeline.pan_mode`).
 | Configuration name | UI Icon  | Behavior |
 | - | - | - |
 | `pan`| <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>pan-horizontal</title><path d="M7,8L2.5,12L7,16V8M17,8V16L21.5,12L17,8M12,10A2,2 0 0,0 10,12A2,2 0 0,0 12,14A2,2 0 0,0 14,12A2,2 0 0,0 12,10Z" /></svg> | Dragging the timeline will pan only without selected or seeking any media. |
 | `seek-in-camera` | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>camera-lock</title><path d="M4 4H7L9 2H15L17 4H20C21.11 4 22 4.89 22 6V12C21.16 11.37 20.13 11 19 11C18.21 11 17.46 11.18 16.79 11.5C16.18 9.22 14.27 7 12 7C9.24 7 7 9.24 7 12C7 14.76 9.24 17 12 17C12.42 17 12.84 16.95 13.23 16.85C13.08 17.2 13 17.59 13 18V20H4C2.9 20 2 19.11 2 18V6C2 4.89 2.9 4 4 4M12 9C13.66 9 15 10.34 15 12C15 13.66 13.66 15 12 15C10.34 15 9 13.66 9 12C9 10.34 10.34 9 12 9M23 18.3V21.8C23 22.4 22.4 23 21.7 23H16.2C15.6 23 15 22.4 15 21.7V18.2C15 17.6 15.6 17 16.2 17V15.5C16.2 14.1 17.6 13 19 13C20.4 13 21.8 14.1 21.8 15.5V17C22.4 17 23 17.6 23 18.3M20.5 15.5C20.5 14.7 19.8 14.2 19 14.2C18.2 14.2 17.5 14.7 17.5 15.5V17H20.5V15.5Z" /></svg> | Dragging the timeline will seek / select across all available media from the selected camera only, selecting the media item with the longest duration. |
 | `seek-in-media` | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>play-box-lock</title><path d="M23 17.3V20.8C23 21.4 22.4 22 21.7 22H16.2C15.6 22 15 21.4 15 20.7V17.2C15 16.6 15.6 16 16.2 16V14.5C16.2 13.1 17.6 12 19 12C20.4 12 21.8 13.1 21.8 14.5V16C22.4 16 23 16.6 23 17.3M13 19V21H4C2.89 21 2 20.1 2 19V5C2 3.89 2.89 3 4 3H18C19.1 3 20 3.89 20 5V10.1L19 10L18 10.1C15.79 10.55 14.12 12.45 14 14.76C13.39 15.31 13 16.11 13 17V19M20.5 14.5C20.5 13.7 19.8 13.2 19 13.2C18.2 13.2 17.5 13.7 17.5 14.5V16H20.5V14.5M9 8V16L14 12L9 8Z" /></svg> | Dragging the timeline will seek within the selected media item only. |
 | `seek` | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>filmstrip-box-multiple</title><path d="M4,6H2V20A2,2 0 0,0 4,22H18V20H4V6M20,2H8A2,2 0 0,0 6,4V16A2,2 0 0,0 8,18H20A2,2 0 0,0 22,16V4A2,2 0 0,0 20,2M10,15H8V13H10V15M10,11H8V9H10V11M10,7H8V5H10V7M20,15H18V13H20V15M20,11H18V9H20V11M20,7H18V5H20V7Z" /></svg> | Dragging the timeline will seek / select across all available media from all cameras, selecting the media item with the longest duration whilst favoring (but not limited to) the currently selected camera. |
@@ -0,0 +1,79 @@
 # `timeline`
 Configures a `timeline` view used to show the timing sequence of events and
 recordings across multiple cameras.
 ```yaml
 timeline:
   [...]
 ```
 You can interact with the timeline in a number of ways:
 * Clicking on an event will take you to the media viewer for that event.
 * Clicking on the "background", or a camera title, will take you to the recordings for that camera (seeking to the clicked time).
 * Clicking on the time axis will take you to recordings for all cameras (seeking to the clicked time).
 | Option | Default | Description |
 | - | - | - |
 | `clustering_threshold` | `3` | The minimum number of overlapping events to allow prior to clustering/grouping them. Higher numbers cause clustering to happen less frequently. Depending on the timescale/zoom of the timeline, the underlying timeline library may still allow overlaps for low values of this parameter -- for a fully "flat" timeline use the `ribbon` style. `0` disables clustering entirely. Only used in the `stack` style of timeline. |
 | `controls` | | Configuration for the timeline controls. See below. |
 | `events_media_type` | `all` | Whether to show only events with `clips`, events with `snapshots` or `all` events. When `all` is used, `clips` are favored for events that have both a clip and a snapshot.|
 | `show_recordings` | `true` | Whether to show recordings on the timeline (specifically: which hours have any recorded content).|
 | `style` | `stack` | Whether the timeline should show events as a single flat `ribbon` or a `stack` of events that are clustered using the `clustering_threshold`. |
 | `window_seconds` | `3600` | The length of the default timeline in seconds. By default, 1 hour (`3600` seconds) is shown in the timeline. |
 ## `controls`
 Configure the controls for the `timeline` view.
 ```yaml
 timeline:
  controls:
     [...]
 ```
 | Option | Default | Description |
 | - | - | - |
 | `thumbnails` | | Configures how thumbnails are shown on the `timeline` view. See below. |
 ### `thumbnails`
 Configures how thumbnails are shown on the timeline.
 ```yaml
 timeline:
  controls:
    thumbnails:
       [...]
 ```
 | Option | Default | Description |
 | - | - | - |
 | `mode` | `none` | Whether to show the thumbnail carousel `below` the media, `above` the media, in a drawer to the `left` or `right` of the media or to hide it entirely (`none`).|
 | `show_details` | `false` | Whether to show event details (e.g. duration, start time, object detected, etc) alongside the thumbnail.|
 | `show_download_control` | `true` | Whether to show the download control on each thumbnail.|
 | `show_favorite_control` | `true` | Whether to show the favorite ('star') control on each thumbnail.|
 | `show_timeline_control` | `true` | Whether to show the timeline ('target') control on each thumbnail.|
 | `size` | `100` | The size of the thumbnails in the thumbnail carousel in pixels. Must be &gt;= `75` and &lt;= `175`.|
 ## Fully expanded reference
 [](common/expanded-warning.md ':include')
 ```yaml
 timeline:
  style: stack
  clustering_threshold: 3
  events_media_type: all
  show_recordings: true
  window_seconds: 3600
  controls:
    thumbnails:
      mode: left
      size: 100
      show_details: true
      show_download_control: true
      show_favorite_control: true
      show_timeline_control: true
 ```
@@ -0,0 +1,117 @@
 # `view`
 The `view` configuration options control how the default view of the card behaves.
 ```yaml
 view:
   [...]
 ```
 | Option | Default | Description |
 | - | - | - |
 | `actions` | | [Actions](actions.md) to use for all views, individual actions may be overriden by view-specific actions. |
 | `camera_select` | `current` | The [view](view.md?id=supported-views) to show when a new camera is selected (e.g. in the camera menu). If `current` the view is unchanged when a new camera is selected. |
 | `dark_mode` | `off` | Whether or not to turn dark mode `on`, `off` or `auto` to automatically turn on if the card `interaction_seconds` has expired (i.e. card has been left unattended for that period of time) or if dark mode is enabled in the HA profile theme setting. Dark mode dims the brightness by `25%`.|
 | `default` | `live` | The view to show in the card by default. The default camera is the first one listed. See [Supported Views](view.md?id=supported-views) below. |
 | `interaction_seconds` | `300` | After a mouse/touch interaction with the card, it will be considered "interacted with" until this number of seconds elapses without further interaction. May be used as part of an [interaction condition](conditions.md?id=interaction) or with `reset_after_interaction` to reset the view after the interaction is complete. `0` means no interactions are reported / acted upon. |
 | `render_entities` | | **YAML only**: A list of entity ids that should cause the card to re-render 'in-place'. The view/camera is not changed. `update_*` flags do not pertain/relate to the behavior of this flag. This should **very** rarely be needed, but could be useful if the card is both setting and changing HA state of the same object as could be the case for some complex `card_mod` scenarios ([example](https://github.com/dermotduffy/frigate-hass-card/issues/343)). |
 | `reset_after_interaction` | `true` | If `true` the card will reset to the default configured view (i.e. 'screensaver' functionality) after `interaction_seconds` has elapsed after user interaction. |
 | `triggers` | | How to react when a camera is [triggered](cameras/README.md?id=triggers). |
 | `update_cycle_camera` | `false` | When set to `true` the selected camera is cycled on each default view change. |
 | `update_entities` | | **YAML only**: A card-wide list of entities that should cause the view to reset to the default (if the entity only pertains to a particular camera use [`triggers`](cameras/README.md?id=triggers) for the selected camera instead. |
 | `update_force` | `false` | Whether automated card updates should ignore user interaction. |
 | `update_seconds` | `0` | A number of seconds after which to automatically update/refresh the default view. If the default view occurs sooner (e.g. manually) the timer will start over. `0` disables this functionality.|
 ## `triggers`
 The `triggers` block controls how the card reacts when a camera is triggered (note that _what_ triggers the camera is controlled by the [`triggers`](cameras/README.md?id=triggers) block within the config for a given camera). This can be used for a variety of purposes, such as allowing the card to automatically change to `live` for a camera that triggers.
 All configuration is under:
 ```yaml
 view:
  triggers:
     [...]
 ```
 When a camera untriggers (e.g. an entity state returning to something other than
 `on` or `open`), an action can also be taken with an optional number of seconds
 to wait prior to the acting (see `untrigger_seconds`). By default, triggering is
 only allowed when there is no ongoing human interaction with the card. This
 behavior can be controlled by the `interaction_mode` parameter.
 Triggers based on Home Assistant entities require state *changes* -- when the
 card is first started, it takes an active change in state to trigger (i.e. an
 already occupied room will not trigger, but a newly occupied room will).
 | Option | Default | Description |
 | - | - | - |
 | `actions` | | The actions to take when a camera is triggered. See below. |
 | `filter_selected_camera` | `false` | If set to `true` will only trigger on the currently selected camera.|
 | `show_trigger_status` | `false` | Whether or not the `live` view should show a visual indication that it is triggered (a pulsing border around the camera edge). |
 | `untrigger_seconds` | `0` | The number of seconds to wait after a camera untriggers before considering the card untriggered and taking the `untrigger` action. |
 ### Trigger action configuration
 | Option | Default | Description |
 | - | - | - |
 | `interaction_mode` | `inactive` | Whether actions should be taken when the card is being interacted with. If `all`, actions will always left be taken regardless. If `inactive` actions will only be taken if the card has *not* had human interaction recently (as defined by `view.interaction_seconds`). If `active` actions will only be taken if the card *has* had human interaction recently. This does not stop triggering itself (i.e. border will still pulse if `show_trigger_status` is true) but rather just prevents the actions being performed. |
 | `trigger` | `default` | If set to `default` the default view of the card will be reloaded. If set to `live` the triggered camera will be selected in `live` view. If set to `media` the appropriate media view (e.g. `clip` or `snapshot`) will be chosen to match a newly available media item (please note that only some [camera engines](cameras/engine.md) support new media detection, e.g. `frigate`). If set to `none` no action is taken. |
 | `untrigger` | `none` | If set to `default` the the default view of the card will be reloaded. If set to `none` no action will be taken. |
 ## Supported views
 This card supports several different views.
 | Key | Description |
 | - | - |
 |`clip`|Shows a viewer for the most recent clip for this camera. Can also be accessed by holding down the `clips` menu icon.|
 |`clips`|Shows a gallery of clips for this camera.|
 |`image`|Shows a static image specified by the `image` parameter, can be used as a discrete default view or a screensaver (via `view.interaction_seconds`).|
 |`live`| Shows the live camera view with the configured [live provider]().|
 |`recording`|Shows a viewer for the most recent recording for this camera. Can also be accessed by holding down the `recordings` menu icon.|
 |`recordings`|Shows a gallery of recent (last day) recordings for this camera and its dependents.|
 |`snapshot`|Shows a viewer for the most recent snapshot for this camera. Can also be accessed by holding down the `snapshots` menu icon.|
 |`snapshots`|Shows a gallery of snapshots for this camera.|
 |`timeline`|Shows an event timeline.|
 The default view is `live`, but can be configured by the `view.default` parameter.
 ## Fully expanded reference
 [](common/expanded-warning.md ':include')
 ```yaml
 view:
  default: live
  camera_select: current
  interaction_seconds: 300
  update_seconds: 0
  update_force: false
  update_cycle_camera: false
  update_entities:
    - binary_sensor.my_motion_sensor
  render_entities:
    - switch.render_card
  dark_mode: 'off'
  triggers:
    show_trigger_status: false
    filter_selected_camera: true
    untrigger_seconds: 0
    actions:
      interaction_mode: inactive
      trigger: default
      untrigger: none
  actions:
    entity: light.office_main_lights
    tap_action:
      action: none
    hold_action:
      action: none
    double_tap_action:
      action: none
    start_tap_action:
      action: none
    end_tap_action:
      action: none
 ```
@@ -0,0 +1,73 @@
 # Developing
 ?> Want to contribute? Development help [**welcome**](https://github.com/dermotduffy/frigate-hass-card/issues/1248)!
 ## Building
 This project uses [Volta](https://github.com/volta-cli/volta) to ensure a
 consistent version of Node and Yarn are used during development. If you install
 Volta in your environment, you should not need to worry about which version of
 both to choose. **Note:** the dev container already comes with Volta installed.
 However, if you are not using Volta, you can check the `volta` key in the
 `package.json` to see which version of Node and Yarn should be used.
 ```sh
 $ git clone https://github.com/dermotduffy/frigate-hass-card
 $ cd frigate-hass-card
 $ yarn install
 $ yarn run build
 ```
 Resultant build entry file will be in `dist/frigate-hass-card.js`. This could be
 installed via the [manual installation
 instructions](advanced-installation.md?id=manual-installation).
 ## Releasing
 1. Merge a PR that contains only a `package.json` and `const.ts` version number bump (see [this example](https://github.com/dermotduffy/frigate-hass-card/commit/a854187d4a354f8841ad284d75b0afbed7b634c4)).
 1. Go to the [releases page](https://github.com/dermotduffy/frigate-hass-card/releases).
 1. A release draft will automatically have been created, click 'Edit'.
 1. Use the same version number for the release title and tag.
 1. Choose 'This is a pre-release' for a beta version.
 1. Hit 'Publish release'.
 ## Translations
 [![translation badge](https://badge.inlang.com/?url=github.com/dermotduffy/frigate-hass-card)](https://fink.inlang.com/github.com/dermotduffy/frigate-hass-card?ref=badge)
 To add translations, you can manually edit the JSON translation files in
 `src/localize/languages` or use the [inlang](https://inlang.com/) online editor.
 ## Using a dev container
 [![Open in Dev Containers](https://img.shields.io/static/v1?label=Dev%20Containers&message=Open&color=blue&logo=visualstudiocode)](https://vscode.dev/redirect?url=vscode://ms-vscode-remote.remote-containers/cloneInVolume?url=https://github.com/dermotduffy/frigate-hass-card)
 You can use the [VS Code Dev Containers](https://code.visualstudio.com/docs/remote/containers) extension to
 speed up the development environment creation. Simply:
 1. Clone the repository to your machine
 2. Open VS Code on it
 3. Reopen the folder in the Dev Container
 4. Once done, press `F5` to start debugging
 Everything should just work without any additional configuration. Under the
 hood, the dev container setup takes care of bringing up:
 * Home Assistant (port `8123` or the next available one)
 * Frigate (ports `5000` or the next available one)
 * MQTT (port `1883` or the next available one)
 As docker-compose containers.
 * The Frigate Home Assistant Integration is registered as a `git submodule` at `.devcontainer/frigate-hass-integration`, and VS Code will initialize/clone it for you before opening the dev container.
 Some environment variables are supported in a `.env` file:
 * `FRIGATE_VERSION`: The version of Frigate to use. Defaults to the latest stable version.
 * `HA_VERSION`: The version of Home Assistant to use. Defaults to the latest stable version.
 ?> When not specifying any version, it's recommended that you `docker-compose pull` the stack from time to time to ensure you have the latest versions of the images.
 The Home Assistant container will get preconfigured during first initialization,
 therefore, if you changed the Home Assistant configuration, you will need to
 remove the HA container and start another.
@@ -0,0 +1,981 @@
 # Examples
 ## Actions on `tap`
 You can add actions to the card to be trigger on `tap`, `double_tap`, `hold`, `start_tap` or `end_tap`.
 In this example double clicking the card in any view will cause the card to go
 into fullscreen mode, **except** when the view is `live` in which case the
 office lights are toggled.
 ```yaml
 type: custom:frigate-card
 cameras:
  - camera_entity: camera.office
 view:
  actions:
    double_tap_action:
      action: custom:frigate-card-action
      frigate_card_action: fullscreen
 live:
  actions:
    entity: light.office_main_lights
    double_tap_action:
      action: toggle
 ```
 ## Aspect ratios
 ```yaml
 type: custom:frigate-card
 cameras:
  - camera_entity: camera.office
 dimensions:
  aspect_ratio_mode: static
  aspect_ratio: '4:3'
 ```
 ## Automation
 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.
 ```yaml
 type: custom:frigate-card
 cameras:
  - camera_entity: camera.office
    live_provider: image
    dependencies:
      cameras:
        - office_hd
  - camera_entity: camera.office
    title: Office HD
    live_provider: go2rtc
    id: office_hd
    capabilities:
      disable_except:
        - substream
 automations:
  - conditions:
      - condition: fullscreen
        fullscreen: true
    actions:
      - action: custom:frigate-card-action
        frigate_card_action: live_substream_on
    actions_not:
      - action: custom:frigate-card-action
        frigate_card_action: live_substream_off
 ```
 ## `card-mod`
 This card allows the use of
 [card-mod](https://github.com/thomasloven/lovelace-card-mod) to style arbitrary
 card contents.
 !> `card-mod` relies on the underlying internal DOM structure to style elements
 -- as such, while its use is possible, it's not officially supported and zero
 attempt is made to preserve backwards compatability of the internal DOM between
 any versions. It may look good, but you're on your own!
 This example changes the color and removes the padding around a [Picture
 Elements state
 label](https://www.home-assistant.io/lovelace/picture-elements/#state-label).
 ```yaml
 type: custom:frigate-card
 cameras:
  - camera_entity: camera.office
 card_mod:
  style:
    frigate-card-elements $:
      hui-state-label-element $: |
        div {
          padding: 0px !important;
          color: blue;
        }
 ```
 ## Cast a `dashboard`
 This example will configure a Frigate card that can cast a dashboard view to a media player, which has a second Frigate card in panel mode with a low-latency live provider.
 ### Source card
 ```yaml
 type: custom:frigate-card
 cameras:
  - camera_entity: camera.office
    live_provider: image
    cast:
      method: dashboard
      dashboard:
        dashboard_path: cast
        view_path: office
 ```
 ### Dashboard configuration
 ?> This dashboard is configured at the path `/cast/` (path referred to in `dashboard_path` above).
 ```yaml
 title: Frigate Card Casting
 views:
  - title: Casting
    # This path is referred to in `view_path` above.
    path: office
    # Ensure the video is "maximized" / dashboard in "panel" mode.
    type: panel
    cards:
      - type: custom:frigate-card
        cameras:
          - camera_entity: camera.office
            live_provider: go2rtc
 ```
 ## Conditional elements
 You can restrict elements to only show for certain
 [views](configuration/view.md?id=supported-views) using a
 `custom:frigate-card-conditional` element. This example shows a car icon that
 calls a service but only in the `live` view.
 ```yaml
 type: custom:frigate-card
 cameras:
  - camera_entity: camera.office
 elements:
  - type: custom:frigate-card-conditional
    conditions:
      - condition: view
        views:
          - live
    elements:
      - type: icon
        icon: mdi:car
        style:
          background: rgba(255, 255, 255, 0.25)
          border-radius: 5px
          right: 25px
          bottom: 50px
        tap_action:
          action: call-service
          service: amcrest.ptz_control
          service_data:
            entity_id: camera.kitchen
            movement: up
 ```
 ## Conditional menu icons
 You can have icons conditionally added to the menu based on entity state.
 ### Show a menu icon based on state
 ```yaml
 type: custom:frigate-card
 cameras:
  - camera_entity: camera.office
 elements:
  - type: conditional
    conditions:
      - condition: state
        entity: light.office_main_lights
        state: on
    elements:
      - type: custom:frigate-card-menu-state-icon
        entity: light.office
        tap_action:
          action: toggle
 ```
 ### Show a menu icon based on camera triggering
 This example adds a menu button to optionally activate a siren when the camera is triggered.
 ```yaml
 type: custom:frigate-card
 cameras:
  - camera_entity: camera.office
 elements:
  - type: custom:frigate-card-conditional
    elements:
      - type: custom:frigate-card-menu-icon
        icon: mdi:alarm-bell
        title: Activate alarm
        style:
          color: red
        tap_action:
          action: call-service
          service: homeassistant.toggle
          data:
            entity_id: siren.siren
    conditions:
      - condition: triggered
        triggered:
          - camera.office
 ```
 ## Events from other cameras
 `dependencies.cameras` allows events/recordings for other cameras to be shown
 along with the currently selected camera. For example, this can be used to show
 events with the `birdseye` camera (since it will not have events of its own).
 ### Using dependent cameras with birdseye
 This example shows events for two other cameras when `birdseye` is selected.
 ```yaml
 type: custom:frigate-card
 cameras:
  - camera_entity: camera.office
  - camera_entity: camera.kitchen
  - frigate:
      camera_name: birdseye
    dependencies:
      cameras:
        - camera.office
        - camera.kitchen
 ```
 ### Using dependent cameras with birdseye for all cameras
 This example shows events for *all* other cameras when `birdseye` is selected.
 This is just a shortcut for naming all other cameras.
 ```yaml
 type: custom:frigate-card
 cameras:
  - camera_entity: camera.kitchen
  - camera_entity: camera.sitting_room
  - frigate:
      camera_name: birdseye
    dependencies:
      all_cameras: true
 ```
 ## Human interaction
 This example will automatically use a HD live substream when
 the mouse cursor interacts with the card.
 ```yaml
 type: custom:frigate-card
 cameras:
  - camera_entity: camera.office
    live_provider: image
    dependencies:
      cameras:
        - camera.office_hd
  - camera_entity: camera.office_hd
    live_provider: go2rtc
    capabilities:
      disable_except:
        - substream
 automations:
  - actions:
      - action: custom:frigate-card-action
        frigate_card_action: live_substream_on
    actions_not:
      - action: custom:frigate-card-action
        frigate_card_action: live_substream_off
    conditions:
      - condition: interaction
        interaction: true
 ```
 ## Media layout
 These examples change how the media fits and is positioned within the card dimensions.
 ### Stretch a camera into a 4:4 square
 ```yaml
 type: custom:frigate-card
 cameras:
  - camera_entity: camera.landing
    dimensions:
      aspect_ratio: '4:4'
      layout:
        fit: fill
 ```
 ### Convert a landscape camera to a portrait live view
 Take the left-hand side (position with x == `0`) and use that as the basis of a `9:16` (i.e. portrait) live view.
 ```yaml
 type: custom:frigate-card
 cameras:
  - camera_entity: camera.office
    dimensions:
      aspect_ratio: '9:16'
      layout:
        fit: cover
        position:
          x: 0
 ```
 ## Menu alignment
 This example moves the fullscreen button into its own group aligned to the
 `left`, enables the `image` button and orders it furthest to the `right`.
 ```yaml
 type: custom:frigate-card
 cameras:
  - camera_entity: camera.office
 menu:
  alignment: right
  buttons:
    image:
      enabled: true
      priority: 100
    fullscreen:
      alignment: opposing
 ```
 ## Menu icons
 You can add custom icons to the menu with arbitrary actions. This example adds
 an icon that navigates the browser to the releases page for this card:
 ```yaml
 type: custom:frigate-card
 cameras:
  - camera_entity: camera.office
 elements:
  - type: custom:frigate-card-menu-icon
    icon: mdi:book
    tap_action:
      action: url
      url_path: https://github.com/dermotduffy/frigate-hass-card/releases
 ```
 ## Menu state icons
 You can add custom state icons to the menu to show the state of an entity and
 complete arbitrary actions. This example adds an icon that represents the state
 of the `light.office_main_lights` entity, that toggles the light on double
 click.
 ```yaml
 type: custom:frigate-card
 cameras:
  - camera_entity: camera.office
 elements:
  - type: custom:frigate-card-menu-state-icon
    entity: light.office_main_lights
    tap_action:
      action: toggle
 ```
 ## Multiple actions
 This example shows how to configure multiple actions for a single Frigate card user interaction, in this case both selecting a different camera and changing the view on `tap`. Note that multiple actions are not supported on stock Picture Elements, see [actions](configuration/actions.md) for more information.
 ```yaml
 type: custom:frigate-card
 cameras:
  - camera_entity: camera.office
 elements:
  - type: custom:frigate-card-menu-icon
    icon: mdi:chair-rolling
    tap_action:
      - action: custom:frigate-card-action
        frigate_card_action: camera_select
        camera: camera.office
      - action: custom:frigate-card-action
        frigate_card_action: live
 ```
 ## Multiple providers
 Cameras can be repeated with different providers (note the required use of `id`
 to provide a separate unambiguous way of referring to that camera, since the
 `camera_entity` is shared between the two cameras).
 ```yaml
 type: custom:frigate-card
 cameras:
  - camera_entity: camera.office
    live_provider: jsmpeg
    title: Office (JSMPEG)
  - camera_entity: camera.office
    live_provider: webrtc-card
    title: Office (WebRTC)
    id: office-webrtc
 ```
 ## Overriding configuration
 You can override card configuration when certain [conditions](configuration/conditions.md) are met.
 ### Change menu position based on HA state
 ```yaml
 type: custom:frigate-card
 cameras:
  - camera_entity: camera.office
 overrides:
  - conditions:
      - condition: state
        entity: light.office_main_lights
        state: 'on'
    overrides:
      menu:
        position: bottom
 ```
 ### Change default view based on HA state
 This example changes the default card view from `live` to `image` depending on
 the value of the `binary_sensor.alarm_armed` sensor. The override alone will
 only change the _default_ when the card next is requested to change to the
 default view. By also including the `update_entities` parameter, we ask the card
 to trigger a card update based on that entity -- which causes it to use the new
 overriden default immediately.
 ```yaml
 type: custom:frigate-card
 cameras:
  - camera_entity: camera.office
 view:
  default: live
  update_entities:
    - binary_sensor.alarm_armed
 overrides:
  - conditions:
      - condition: state
        entity: binary_sensor.alarm_armed
        state: 'off'
    overrides:
      view:
        default: image
 ```
 ### Change grid behavior in full screen
 This example will always render 5 columns in fullscreen mode in both the live
 and media viewer views, and will not enlarge the selected item. The [normal auto-layout behavior](configuration/grid-layout-algorithm.md) will be used outside of fullscreen mode.
 ```yaml
 type: custom:frigate-card
 cameras:
  - camera_entity: camera.office
 overrides:
  - conditions:
      - condition: fullscreen
        fullscreen: true
      - condition: display_mode
        display_mode: grid
    overrides:
      live:
        display:
          grid_columns: 5
          grid_selected_width_factor: 1
      media_viewer:
        display:
          grid_columns: 5
          grid_selected_width_factor: 1
 ```
 ### Change menu style when expanded
 This example changes the menu style to `overlay` in expanded mode in order to
 take advantage of the extra horizontal space of the dialog/popup.
 ```yaml
 type: custom:frigate-card
 cameras:
  - camera_entity: camera.office
 menu:
  style: hidden
 overrides:
  - conditions:
      - condition: expand
        expand: true
    overrides:
      menu:
        style: overlay
 ```
 ### Hide menu in fullscreen
 This example disables the menu unless the card is in fullscreen mode, and uses a
 card-wide action to enable fullscreen mode on `double_tap`.
 ```yaml
 type: custom:frigate-card
 cameras:
  - camera_entity: camera.office
 view:
  actions:
    double_tap_action:
      action: custom:frigate-card-action
      frigate_card_action: fullscreen
 overrides:
  - conditions:
      - condition: fullscreen
        fullscreen: true
    overrides:
      menu:
        style: none
 ```
 ## PTZ control
 The card supports using PTZ controls to conveniently control pan, tilt and zoom for cameras. This example shows the PTZ controls on the `live` view. Note that if your camera engine supports it (e.g. `frigate`) this will just work out of the box with no configuration at all.
 ```yaml
 type: custom:frigate-card
 cameras:
  - camera_entity: camera.office
 live:
  ptz:
    orientation: horizontal
    service: sonoff.send_command
    data_left:
      device: '048123'
      cmd: left
    data_right:
      device: '048123'
      cmd: right
    data_up:
      device: '048123'
      cmd: up
    data_down:
      device: '048123'
      cmd: down
 ```
 ## `screen` conditions
 These examples show altering the card configuration based on device or viewport properties.
 ### Change menu position when orientation changes
 ```yaml
 type: custom:frigate-card
 cameras:
  - camera_entity: camera.office
  - camera_entity: camera.kitchen
 menu:
  style: overlay
 overrides:
  - conditions:
      - condition: screen
        media_query: '(orientation: landscape)'
    overrides:
      menu:
        position: left
 ```
 ### Hide menu & controls when viewport width &lt;= 300 (e.g. PIP mode)
 ```yaml
 type: custom:frigate-card
 cameras:
  - camera_entity: camera.office
  - camera_entity: camera.kitchen
 overrides:
  - conditions:
      - condition: screen
        media_query: '(max-width: 300px)'
    overrides:
      menu:
        style: none
      live:
        controls:
          next_previous:
            style: none
          thumbnails:
            mode: none
 ```
 ## State Badges
 You can add a state badge to the card showing arbitrary entity states. This
 example adds a state badge showing the temperature and hides the label text:
 ```yaml
 type: custom:frigate-card
 cameras:
  - camera_entity: camera.office
 elements:
  - type: state-badge
    entity: sensor.office_temperature
    style:
      right: '-20px'
      top: 100px
      color: rgba(0,0,0,0)
      opacity: 0.5
 ```
 ![](images/picture-elements-temperature.png 'Picture elements temperature example :size=400')
 ## Static images
 This example fetches a static image every 10 seconds (in this case the latest image saved on the Frigate server for a given camera).
 ```yaml
 type: custom:frigate-card
 cameras:
  - camera_entity: camera.office
 view:
  default: image
 image:
  src: https://my-friage-server/api/living_room/latest.jpg
  refresh_seconds: 10
 ```
 ## Submenus
 You can add submenus to the menu -- buttons that when pressed reveal a dropdown submenu of configurable options.
 ### Basic submenu
 ```yaml
 type: custom:frigate-card
 cameras:
  - camera_entity: camera.office
 elements:
  - type: custom:frigate-card-menu-submenu
    icon: mdi:menu
    items:
      - title: Lights
        icon: mdi:lightbulb
        entity: light.office_main_lights
        tap_action:
          action: toggle
      - title: Google
        icon: mdi:google
        tap_action:
          action: url
          url_path: https://www.google.com
      - title: Fullscreen
        icon: mdi:fullscreen
        tap_action:
          action: custom:frigate-card-action
          frigate_card_action: fullscreen
 ```
 ### Conditional submenu
 This example shows submenus conditional on the camera selected.
 ```yaml
 type: custom:frigate-card
 cameras:
  - camera_entity: camera.office
 elements:
  - type: custom:frigate-card-conditional
    conditions:
      - condition: camera
        cameras:
          - camera.office
    elements:
      - type: custom:frigate-card-menu-submenu
        icon: mdi:door
        items:
          - title: Office Lights
            icon: mdi:lightbulb
            entity: light.office_main_lights
            tap_action:
              action: toggle
  - type: custom:frigate-card-conditional
    conditions:
      - condition: camera
        cameras:
          - camera.kitchen
    elements:
      - type: custom:frigate-card-menu-submenu
        icon: mdi:sofa
        items:
          - title: Kitchen Lights
            icon: mdi:lightbulb
            entity: light.kitchen_lights
            tap_action:
              action: toggle
          - title: Kitchen Lamp
            icon: mdi:lightbulb
            entity: light.kitchen_lamp
            tap_action:
              action: toggle
 ```
 ### `select` submenu
 You can easily add a submenu to the menu based on a `select` or `input_select` entity. This example imagines the user has an `input_select` entity configured in their Home Assistant configuration like so:
 ```yaml
 input_select:
  office_scene:
    name: Office Scene Select
    options:
      - scene.office_quiet_scene
      - scene.office_party_scene
    icon: mdi:lightbulb
 ```
 The following will convert this entity into a submenu:
 ```yaml
 type: custom:frigate-card
 cameras:
  - camera_entity: camera.office
 elements:
  - type: custom:frigate-card-menu-submenu-select
    entity: input_select.office_scene
 ```
 To override 1 or more individual options (e.g. to set custom icons and titles)
 ```yaml
 type: custom:frigate-card
 cameras:
  - camera_entity: camera.office
 elements:
  - type: custom:frigate-card-menu-submenu-select
    icon: mdi:lamps
    entity: input_select.office_scene
    options:
      scene.office_quiet_scene:
        icon: mdi:volume-off
        title: Ssssssh
      scene.office_party_scene:
        icon: mdi:party-popper
        title: Party!
 ```
 ## Substreams
 The card supports configuring 'substreams' (alternative live views) a given
 camera through the use of [camera dependencies](configuration/cameras/README.md?id=dependencies).
 This example shows two substreams for a single live camera, and uses the 'HD' icon.
 ```yaml
 type: custom:frigate-card
 cameras:
  - camera_entity: camera.office
    live_provider: image
    dependencies:
      cameras:
        - office_hd
  - camera_entity: camera.office
    title: Office HD
    live_provider: go2rtc
    id: office_hd
    # This camera serves only as a substream.
    capabilities:
      disable_except:
        - substream
 menu:
  buttons:
    substreams:
      icon: mdi:high-definition
 ```
 ## Trigger actions
 You can control the card itself with the `custom:frigate-card-action` action.
 This example shows an icon that toggles the card fullscreen mode.
 ```yaml
 type: custom:frigate-card
 cameras:
  - camera_entity: camera.office
 elements:
  - type: icon
    icon: mdi:fullscreen
    style:
      left: 40px
      top: 40px
    tap_action:
      action: custom:frigate-card-action
      frigate_card_action: fullscreen
 ```
 ## Trigger fullscreen
 The card cannot automatically natively trigger fullscreen mode without the user
 clicking, since Javascript (understandbly) prevents random websites from
 triggering fullscreen mode without the user having activated it. 
 This example uses
 [hass-browser_mod](https://github.com/thomasloven/hass-browser_mod) with an
 automation to trigger a popup. Thanks to
 [conorlap@](https://github.com/conorlap) for the following example:
 ```yaml
 alias: >-
  Doorbell Pressed OR Human Detected - Firefox browser full screen video feed
  for 15 seconds
 description: ""
 trigger:
  - platform: state
    from: "off"
    to: "on"
    entity_id:
      - binary_sensor.frontdoor_person_occupancy
  - platform: state
    entity_id:
      - binary_sensor.front_door_dahua_button_pressed
    to: "on"
 condition: []
 action:
  - service: browser_mod.popup
    data:
      size: wide
      timeout: 15000
      content:
        type: custom:frigate-card
        aspect_ratio: 55%
        cameras:
          - camera_entity: camera.frontdoor
            live_provider: ha
        menu:
          style: none
        live:
          controls:
            title:
              mode: none
    target:
      device_id:
        - d0e93101edfg44y3yt35y5y45y54y
 mode: single
 ```
 ## Trigger `live`
 This example will change to `live` when a camera is triggered, using different
 trigger conditions per camera. It will change back to the `default` view when
 untriggered.
 ```yaml
 type: custom:frigate-card
 cameras:
  # This is a Frigate camera which will automatically
  # be triggered when events occur.
  - camera_entity: camera.office
  # This is a Frigate camera which will only be triggered
  # by motion entity changes or a door being opened.
  - camera_entity: camera.kitchen
    triggers:
      occupancy: false
      motion: true
      entities:
        - binary_sensor.kitchen_door_opened
      events: []
 view:
  triggers:
    show_trigger_status: true
    filter_selected_camera: false
    actions:
      trigger: live
      untrigger: default
 ```
 ## Video control from menu
 Disable the stock video controls and add menu button equivalents.
 ```yaml
 type: custom:frigate-card
 cameras:
  - camera_entity: camera.office
 live:
  controls:
    builtin: false
 media_viewer:
  controls:
    builtin: false
 menu:
  buttons:
    play:
      enabled: true
    mute:
      enabled: true
 ```
 ## URL actions
 The card can respond to actions in the query string. See [URL Actions](usage/url-actions.md).
 ?> These examples assume the dashboard URL is `https://ha.mydomain.org/lovelace-test/0` .
 ### Choosing `clips` view on a named card
 This example assumes that one card (of potentially multiple Frigate Cards on the dashboard) is configured with a `card_id` parameter:
 ```yaml
 type: custom:frigate-card
 cameras:
  - camera_entity: camera.office
 card_id: main
 ```
 ```
 https://ha.mydomain.org/lovelace-test/0?frigate-card-action.main.clips
 ```
 ### Choosing the camera from a separate picture elements card
 In this example, the card will select a given camera when the user navigates from a *separate* Picture Elements card:
 Frigate Card configuration:
 ```yaml
 type: custom:frigate-card
 cameras:
  - camera_entity: camera.office
  - camera_entity: camera.kitchen
 ```
 Picture Elements configuration:
 ```yaml
 type: picture-elements
 image: https://demo.home-assistant.io/stub_config/floorplan.png
 elements:
  - type: icon
    icon: mdi:cctv
    style:
      top: 22%
      left: 30%
    tap_action:
      action: navigate
      navigation_path: /lovelace-test/0?frigate-card-action.camera_select=camera.office
  - type: icon
    icon: mdi:cctv
    style:
      top: 71%
      left: 42%
    tap_action:
      action: navigate
      navigation_path: /lovelace-test/0?frigate-card-action.camera_select=camera.kitchen
 ```
 ![](images/navigate-picture-elements.gif "Taking card actions via the URL :size=400" )
 ### Selecting a camera in expanded mode via query string
 ```
 https://ha.mydomain.org/lovelace-test/0?frigate-card-action.camera_select=kitchen&frigate-card-action.expand
 ```
 ## WebRTC Card configuration
 ```yaml
 type: custom:frigate-card
 cameras:
  - camera_entity: camera.office
    live_provider: webrtc-card
    webrtc_card:
      ui: true
 ```
@@ -0,0 +1,80 @@
 <!DOCTYPE html>
 <html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Frigate Card</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="description" content="Frigate Card Documentation" />
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, shrink-to-fit=no, viewport-fit=cover">
    <!-- Themes (light + dark) -->
    <link
      rel="stylesheet"
      media="(prefers-color-scheme: dark)"
      href="https://cdn.jsdelivr.net/npm/docsify-themeable@0/dist/css/theme-simple-dark.css"
    />
    <link
      rel="stylesheet"
      media="(prefers-color-scheme: light)"
      href="https://cdn.jsdelivr.net/npm/docsify-themeable@0/dist/css/theme-simple.css"
    />
    <style>
      :root {
        --content-max-width: 95vw;
      }
    </style>
  </head>
  <body>
    <div id="app"></div>
    <script>
      window.$docsify = {
        // Full reference: https://docsify.js.org/#/configuration
        // The repo to link to.
        repo: 'dermotduffy/frigate-hass-card',
        // The overall documentation name.
        name: 'Frigate Card',
        logo: 'images/frigate-logo.svg',
        // Automatically go to the top of a page on route change.
        auto2top: true,
        // Use a sidebar.
        loadSidebar: true,
        // Automatically use headings up to H2 for sider.
        subMaxLevel: 2,
        // Show the Frigate Card cover page.
        coverpage: true,
        // Use relative links (this way both vscode and docsify work on clicking
        // a link).
        relativePath: true,
      };
    </script>
    <!-- Docsify v4 -->
    <script src="//cdn.jsdelivr.net/npm/docsify@4"></script>
    <!-- Themeable -->
    <script src="https://cdn.jsdelivr.net/npm/docsify-themeable@0/dist/js/docsify-themeable.min.js"></script>
    <!-- Prism Syntax Highlighting for YAML -->
    <script src="//cdn.jsdelivr.net/npm/prismjs@1/components/prism-yaml.min.js"></script>
    <!-- Search plugin -->
    <script src="https://cdn.jsdelivr.net/npm/docsify@4/lib/plugins/search.js"></script>
    <!-- Zoom in on images on click -->
    <script src="//cdn.jsdelivr.net/npm/docsify/lib/plugins/zoom-image.min.js"></script>
    <!-- Copy samples can copy to clipboard -->
    <script src="//cdn.jsdelivr.net/npm/docsify-copy-code/dist/docsify-copy-code.min.js"></script>
    <!-- Allow sidebar selections to collapse -->
    <script src="//cdn.jsdelivr.net/npm/docsify-sidebar-collapse/dist/docsify-sidebar-collapse.min.js"></script>
  </body>
 </html>
@@ -0,0 +1,142 @@
 # Screenshots
 ## 2-way audio
 ![](images/microphone.gif "2-way audio support :size=400")
 ## Cast media from card
 ![](images/cast-your-events.gif "Cast media from the card :size=400")
 ## Cast whole card
 A dashboard with the card can be cast onto a suitable device (such as the Nest Hub shown below).
 ![](images/card-on-nest-hub.jpg "Card casting :size=400")
 ## Dark mode
 ![](images/dark-mode.gif "Dark mode :size=400")
 ## Editing
 ![](images/editor.gif "Card editing :size=400")
 ## Events
 ![](images/gallery.png "Full Viewing Of Events :size=400")
 ## Expanded mode
 ![](images/expanded.gif "Expanded mode :size=400")
 ## Favoriting events
 ![](images/star.gif "Card casting :size=400")
 ## Filtering
 ![](images/media-filtering.gif "Media filtering :size=400")
 ## Grid
 ![](images/grid-small.gif "Interacting with a camera grid :size=400")
 ## Media layout
 Pan around a large camera view to only show part of the video feed in the card at a different aspect ratio:
 ### Before
 ![](images/media-layout-a.png "Before :size=400")
 ### After
 ![](images/media-layout-b.png "After :size=400")
 ## Menu hovering
 ![](images/viewer-with-thumbnail-next-prev.gif "Hover menu / Next & Previous controls :size=400")
 ## Menu media control
 ![](images/native-media-control.png "In-menu media / mute control :size=400")
 ## Mixed engines
 ![](images/motioneye.gif "Different camera sources/engines :size=400")
 ## Multiple cameras
 Scroll through your live cameras, or choose from a menu. Seamlessly supports
 cameras of different dimensions, and custom submenus per camera.
 ![](images/camera-carousel.gif "Live viewing of multiple cameras :size=400")
 ## PTZ
 ![](images/native-ptz.gif "PTZ control :size=400")
 ## Recordings
 ### Recordings single
 ![](images/recording-seek.gif "Single camera recordings :size=400")
 ### Recordings multiple
 ![](images/recording-seek-all-cameras.gif "Multiple camera recordings :size=400")
 ## Scrubbing
 ![](images/video-scrubbing.gif "Video scrubbing :size=400")
 ## Submenus
 ![](images/submenu.gif "Configurable submenus :size=400")
 ## Submenus with `select` entities
 ![](images/submenu-select.gif "select entity submenus :size=400")
 ## Substreams
 ![](images/substream.gif "Substreams :size=400")
 ## Thumbnail drawers
 ![](images/thumbnails-in-drawer.gif "Thumbnail drawers :size=400")
 ## Thumbnails in live
 ![](images/live-thumbnails.gif "Live viewing with thumbnail carousel :size=400")
 ## Thumbnails in media viewer
 ![](images/viewer-thumbnails.gif "Clip viewing with thumbnail carousel :size=400")
 ## Timeline
 ![](images/timeline.gif "Event timeline :size=400")
 ## Timeline date picking
 ![](images/date-picker.gif "Timeline date picking :size=400")
 ## Timeline `ribbon`
 ![](images/ribbon-timeline.png "Ribbon timeline :size=400")
 ## Triggering
 Automatically choose the camera with the action!
 ![](images/triggered.gif "Triggered! :size=400")
 ## URL actions
 ![](images/navigate-picture-elements.gif "Taking card actions via the URL :size=400")
 ## Zoom
 ![](images/zoom.gif "Zoom support :size=400")
@@ -0,0 +1,222 @@
 # Troubleshooting
 ### 2-way audio doesn't work
 There are many requirements for 2-way audio to work. See [Using 2-way
 audio](usage/2-way-audio.md) for more information about these. If your
 microphone still does not work and you believe you meet all the requirements try
 eliminating the card from the picture by going directly to the `go2rtc` UI,
 navigating to `links` for your given stream, then to `webrtc.html` with a
 microphone. If this does not work correctly with 2-way audio then your issue is
 with `go2rtc` not with the card. In this case, you could file an issue in [that
 repo](https://github.com/AlexxIT/go2rtc/issues) with debugging information as
 appropriate.
 ### Android will not render &gt;4 JSMPEG live views
 Android Webview (as used by Android Chrome / Android Home Assistant Companion)
 appears to severely limit the number of simultaneous OpenGL contexts that can be
 opened. The JSMPEG player (that this card uses), consumes 1 OpenGL context per
 rendering.
 This limitation may be worked around (at a performance penalty) by disabling
 OpenGL for JSMPEG live views:
 ```yaml
 live:
  jsmpeg:
    options:
      disableGl: true
 ```
 [This bug](https://github.com/dermotduffy/frigate-hass-card/issues/191) has some
 more discussion on this topic. New ideas to address this underlying limitation
 most welcome!
 ### Autoplay in Chrome when a tab becomes visible again
 Even if `live.auto_play` or `media_viewer.auto_play` is set to `[]`, Chrome
 itself will still auto play a video that was previously playing prior to the tab
 being hidden, once that tab is visible again. This behavior cannot be influenced
 by the card. Other browsers (e.g. Firefox, Safari) do not exhibit this behavior.
 ### Blank white image on `live` view
 For some slowly loading cameras, for which [Home Assistant stream
 preloading](https://www.home-assistant.io/integrations/camera/) is not enabled,
 Home Assistant may return a blank white image when asked for a still. These
 stills are used during initial Frigate card load of the `live` view if the
 `live.show_image_during_load` option is enabled. Disabling this option should
 show the default media loading controls (e.g. a spinner or empty video player)
 instead of the blank white image.
 ### Casting to Chromecast broken
 This could be for any number of reasons. Chromecast devices can be quite picky
 on network, DNS and certificate issues, as well as audio and video codecs. Check
 your Home Assistant log as there may be more information in there.
 !>: In particular, for Frigate to support casting of clips, the default ffmpeg
 settings for Frigate must be modified, i.e. Frigate does not encode clips in a
 Chromecast compatible format out of the box (specifically: audio must be enabled
 in the AAC codec, whether your camera supports audio or not). See the [Frigate
 Home Assistant
 documentation](https://docs.frigate.video/integrations/home-assistant) or [this
 issue](https://github.com/blakeblackshear/frigate/issues/3175) for more.
 ### Custom element does not exist
 This is usually a sign that the card is not correctly installed (i.e. the
 browser cannot find the Javascript). In cases where it works in some browsers /
 devices but not in others it may simply be an old browser / webview that does
 not support modern Javascript (this is occasionally seen on old Android
 hardware). In this latter case, you are out of luck.
 ### `double_tap` does not work in Android
 The Android video player swallows `double_tap` interactions in order to
 rewind or fast-forward. Workarounds:
 * Use `hold` instead of `double_tap` for your card-wide action.
 * Use a [Frigate Card Element](configuration/elements.md) or menu icon to trigger
  the action instead.
 ### Dragging in carousels broken in Firefox
 The Firefox video player swallows mouse interactions, so dragging is not
 possible in carousels that use the Firefox video player (e.g. `clips` carousel,
 or live views that use the `frigate` or `webrtc-card` provider). The next and
 previous buttons may be used to navigate in these instances.
 Dragging works as expected for snapshots, or for the `jsmpeg` provider.
 ### Dragging video control doesn't work in Safari
 Dragging the Safari video controls "progress bar" conflicts with carousel
 "dragging", meaning the video controls progress bar cannot be moved left or
 right. Turning off carousel dragging (and using next/previous controls) will
 return full video controls in Safari:
 ```yaml
 live:
  draggable: false
 media_viewer:
  draggable: false
 ```
 ### Downloads don't work
 Downloads are assembled by the Frigate backend out of ~10s segment files. You
 must have enough cache space in your Frigate instance to allow this assembly to
 happen -- if large downloads don't work, especially for recordings, check your
 Frigate backend logs to see if it's running out of space. You can increase your
 cache size with the `tmpfs` `size` argument, see [Frigate
 documentation](https://docs.frigate.video/frigate/installation#docker).
 Large downloads may take a few seconds to assemble, so there may be a delay
 between clicking the download button and the download starting.
 ### `Forbidden media source identifier`
 * If you are using a custom `client_id` setting in your `frigate.yml` file (the
  configuration file for the Frigate backend itself), you must tell the card
  about it. See [Frigate engine
  configuration](configuration/cameras/engine.md?id=frigate).
 * You must have the `Enable the media browser` option enabled for the Frigate
  integration, in order for media fetches to work for the card. Media fetches
  are used to fetch events / clips / snapshots, etc. If you just wish to use
  live streams without media fetches, you can use the following configuration:
 ```yaml
 live:
  controls:
    thumbnails:
      mode: none
 ```
 ### Fullscreen doesn't work on iPhone
 Unfortunately, [iOS does not support the Javascript fullscreen
 API](https://caniuse.com/fullscreen). As a result, card-level fullscreen support
 for the iPhone is not currently possible.
 ### iOS App not updating after card version change
 Try resetting the app frontend cache:
 * `Configuration -> Companion App -> Debugging -> Reset frontend cache`
 ### Javascript console errors
 #### `[Violation] Added non-passive event listener to a scroll-blocking [...] event`
 This card uses [visjs](https://github.com/visjs/vis-timeline) -- a timeline
 library -- to show camera timelines. This library currently uses non-passive
 event-listeners. These warnings can be safely ignored in this instance and
 cannot easily be fixed in the underlying library.
 ### Microphone menu button not shown
 The microphone menu button will only appear if both enabled (see [Menu Button
 configuration](configuration/menu.md?id=available-buttons)) and if the media
 that is currently loaded supports 2-way audio. See [Using 2-way
 audio](usage/2-way-audio.md) for more information about the requirements that
 must be followed.
 ### New version not working in Chrome
 When upgrading the card it's recommended to reset the frontend cache. Sometimes
 clearing site data in Chrome settings isn't enough.
 * Press F12 to display `Dev Console` in Chrome then right click on the refresh
  icon and select `Empty Cache and Hard Reload`
 ### Static image URL with credentials doesn't load
 Your browser will not allow a page/script (like this card) to pass credentials
 to a cross-origin (different host) image URL for security reasons. There is no
 way around this unless you could also control the webserver that is serving the
 image to specifically allow `crossorigin` requests (which is typically not the
 case for an image served from a camera, for example). The stock Home Assistant
 Picture Glance card has the same limitation, for the same reasons.
 ### Title "Popups" continually popping up
 Title popups can be disabled for live or media viewer views with this
 configuration:
 ```yaml
 live:
  controls:
    title:
      mode: none
 media_viewer:
  controls:
    title:
      mode: none
 ```
 ### Watermark shown on livestream
 If the `live.show_image_during_load` option is enabled (the default), a
 temporary image from Home Assistant is rendered and refreshed every `1s` while
 the full stream is loading. When this temporary image is being shown, a small
 circular icon is rendered on the top-right of the livestream to indicate to the
 user that this is not the true stream. If the icon persists, it means your
 underlying stream is not actually loading and may be misconfigured / broken.
 ### `webrtc_card` unloads in the background
 [AlexxIT's WebRTC Card](https://github.com/AlexxIT/WebRTC) which is embedded by
 the `webrtc_card` live provider internally disconnects the stream when the
 browser tab is changed (regardless of any Frigate card configuration settings,
 e.g. `lazy_unload`). To allow the stream to continue running in the background,
 pass the `background` argument to the `webrtc_card` live provider as shown
 below. This effectively allows the Frigate card to decide whether or not to
 unload the stream.
 ```yaml
 live:
  webrtc_card:
    background: true
 ```
@@ -0,0 +1,53 @@
 # 2-way Audio
 This card supports 2-way audio (e.g. transmitting audio from a microphone to a
 suitably equipped camera). In general, due to the myriad of different cameras,
 security requirements and browser limitations getting 2-way to work may be
 challenging.
 ## Requirements
 ### Environmental requirements
   * Must have a camera that supports audio out (otherwise what's the point!)
   * Camera must be supported by `go2rtc` for 2-way audio (see [supported cameras](https://github.com/AlexxIT/go2rtc#two-way-audio)).
   * Must be accessing your Home Assistant instance over `https`. The browser will enforce this.
 ### Card requirements
   * Only Frigate cameras are supported.
   * Only the `go2rtc` live provider is supported.
   * Only the `webrtc` mode supports 2-way audio:
   * Must have microphone menu button enabled:
 ## Example configuration
 ```yaml
 type: custom:frigate-card
 cameras:
  - camera_entity: camera.office
    live_provider: go2rtc
    go2rtc:
      modes:
        - webrtc
 menu:
  buttons:
    microphone:
      enabled: true
 ```
 ## Usage
  * The camera will always load *without* the microphone connected, unless the
    [`always_connected`](../configuration/live.md?id=microphone) microphone option is
    set to `true`. 
  * To speak, hold-down the microphone menu button.
    * On first press, this will reset the `webrtc` connection to include 2-way
      audio unless [`always_connected`](../configuration/live.md?id=microphone) has
      been used.
    * Thereafter hold the microphone button down to unmute/speak, let go to
      mute.
  * The video will automatically reset to remove the microphone after the number
    of seconds specified by
    [`disconnect_seconds`](../configuration/live.md?id=microphone) configuration have
    elapsed since the last mute/unmute press.
@@ -0,0 +1,16 @@
 # Usage
 The usage of the card is intended to be reasonably self-explanatory. Some more
 complex situations / requirements are discussed here.
 ### 2-way audio
 See [2-way audio](2-way-audio.md) for documentation on using 2-way audio.
 ### Casting
 See [Casting](casting.md) for documentation on casting the card.
 ### URL Actions
 See [URL Actions](url-actions.md) for documentation on acting based on URL contents.
@@ -0,0 +1,13 @@
 * [Getting Started](../README.md)
 * [Configuration](../configuration/README.md)
 * [Examples](../examples.md)
 * [Screenshots](../screenshots.md)
 * [Troubleshooting](../troubleshooting.md)
 * [Usage](README.md)
   * [2-way audio](2-way-audio.md)
   * [Casting](casting.md)
   * [URL Actions](url-actions.md)
 ---
 * [Developing](../developing.md)
@@ -0,0 +1,45 @@
 # Casting the Card
 This card can be (Chrome) casted to a device (such as a [Nest
 Hub](https://store.google.com/us/product/nest_hub_2nd_gen)) through the use of
 [Home Assistant Cast](https://cast.home-assistant.io/).
 ## Instructions
 * Visit [Home Assistant Cast](https://cast.home-assistant.io/) and click `Start Casting`
 * Enter your Home Assistant URL, and authorize your account.
 * Click `Start Casting` and choose the device to cast to from the browser menu.
 * Choose which view/dashboard to display.
 * If successful, the view will be cast to the device.
 ## Limitations
 Casting Home Assistant dashboards comes with a number of caveats:
 * Home Assistant Casting does not support the HA `streaming` component
  ([source](https://cast.home-assistant.io/faq.html)). This means clips playing
  and the `ha` live provider can not work. Other live providers such as `jsmpeg`
  and `webrtc-card` function correctly.
 * The Javascript fullscreen API does not work (so the fullscreen button does not
  work, but see below for an equivalent).
 ## Recommended configuration for Nest Hub
 Using a `panel` dashboard with the following base configuration will result in
 the card consuming the entire device screen:
 ### Configuration
 ```yaml
 type: custom:frigate-card
 cameras:
  - camera_entity: camera.office
    live_provider: go2rtc
 dimensions:
  aspect_ratio: 1024:600
  aspect_ratio_mode: static
 ```
 ### Result
 ![](../images/card-on-nest-hub.jpg "Casting on a Nest Hub :size=400")
@@ -0,0 +1,77 @@
 # URL Actions
 It is possible to pass the Frigate card one or more
 [actions](../configuration/actions.md) from the URL (e.g. select a particular
 camera, open the live view in expanded mode, etc).
 ### When actions are executed
 The Frigate card will execute these actions in the following circumstances:
 * On initial card load.
 * On 'tab' change in a dashboard.
 * When a `navigate` [action](https://www.home-assistant.io/dashboards/actions/)
  is called on the dashboard (e.g. a button click requests navigation).
 * When the user uses the `back` / `forward` browser buttons whilst viewing a
  dashboard.
 ## Instructions
 To send an action to *all* Frigate Cards on a dashboard:
 ```
 [PATH_TO_YOUR_HA_DASHBOARD]?frigate-card-action.[ACTION]=[VALUE]
 ```
 To send an action to a specific named Frigate Card:
 ```
 [PATH_TO_YOUR_HA_DASHBOARD]?frigate-card-action.[CARD_ID].[ACTION]=[VALUE]
 ```
 | Parameter | Description |
 | - | - |
 | `ACTION` | One of the supported Frigate Card custom actions. See below. |
 | `CARD_ID` | When specified only cards that have a [`card_id`](../configuration/README.md) parameter will act. |
 | `VALUE` | An optional value to use with the `camera_select` and `live_substream_select` actions. |
 ?> Both `.` and `:` may be used as the delimiter. If you use `:` some
 browsers may require it be escaped to `%3A`.
 !> If a dashboard has multiple Frigate cards on it, even if they are on
 different 'tabs' within that dashboard, they will all respond to the actions
 unless the action is targeted with a `CARD_ID` as shown above.
 ## Supported Actions
 Only a subset of all [actions](../configuration/actions.md) are supported in URL form.
 | Action | Supported in URL | Explanation |
 | - | - | - |
 | `camera_select` | :white_check_mark: | |
 | `camera_ui`| :white_check_mark:  | |
 | `clip` | :white_check_mark: | |
 | `clips` | :white_check_mark: | |
 | `default` | :white_check_mark:  | |
 | `download`| :heavy_multiplication_x: | Latest media information is not available on initial render. |
 | `expand` | :white_check_mark: | |
 | `fullscreen` | :heavy_multiplication_x: | Javascript does not support activating fullscreen without direct human interaction. Use `expand` as an alternative. |
 | `image` | :white_check_mark: | |
 | `live_substream_select` | :white_check_mark: | |
 | `live` | :white_check_mark: | |
 | `media_player`| :heavy_multiplication_x: | Please [request](https://github.com/dermotduffy/frigate-hass-card/issues) if you need this. |
 | `menu_toggle` | :white_check_mark: | |
 | `microphone_mute`, `microphone_unmute`| :heavy_multiplication_x: | |
 | `mute`, `unmute` | :heavy_multiplication_x: | |
 | `play`, `pause` | :heavy_multiplication_x: | |
 | `ptz` | :heavy_multiplication_x: | Please [request](https://github.com/dermotduffy/frigate-hass-card/issues) if you need this. |
 | `recording` | :white_check_mark: | |
 | `recordings` | :white_check_mark: | |
 | `screenshot`| :heavy_multiplication_x: | Latest media information is not available on initial render. |
 | `show_ptz` | :heavy_multiplication_x: | Please [request](https://github.com/dermotduffy/frigate-hass-card/issues) if you need this. |
 | `snapshot` | :white_check_mark: | |
 | `snapshots` | :white_check_mark: | |
 ## Examples
 See [URL actions examples](../examples.md?id=url-actions).
@@ -0,0 +1,7 @@
 {
  "ignorePatterns": [
    {
      "pattern": "vscode://"
    }
  ]
 }
@@ -62,12 +62,14 @@
    "@typescript-eslint/eslint-plugin": "^5.36.2",
    "@typescript-eslint/parser": "^5.36.2",
    "@vitest/coverage-istanbul": "^1.3.1",
    "docsify-cli": "^4.4.4",
    "eslint": "^8.23.0",
    "eslint-config-airbnb-base": "^15.0.0",
    "eslint-config-prettier": "^8.5.0",
    "eslint-plugin-import": "^2.25.4",
    "eslint-plugin-prettier": "^4.2.1",
    "jsdom": "^21.1.1",
    "markdown-link-check": "^3.12.1",
    "prettier": "^2.6.0",
    "rollup": "^2.79.0",
    "rollup-plugin-git-info": "^1.0.0",
@@ -85,6 +87,8 @@
  "scripts": {
    "start": "rollup -c --watch",
    "build": "yarn run lint && yarn run rollup",
    "docs": "docsify serve ./docs",
    "docs-check-links": "find ./docs -name '*.md' -print0 | xargs -0 -n1 markdown-link-check -c ./markdown-link-check.json",
    "lint": "eslint 'src/**/*.ts'",
    "rollup": "rollup -c",
    "prune": "ts-prune",
		`@@ -0,0 +1 @@`
							`!> Just copying this full reference into your configuration will cause you a significant maintenance burden. Don't do it! Only specify what you need, everything shown here are either default or illustrative values.`