|
|`overlay`| Overlay the menu over the card contents. The Frigate button shows the default view. | 
|
-|`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. | |
+|`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. | |
+|`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. | |
|`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. | 
|
|`none`| No menu is shown. | 
|
@@ -1122,6 +1424,38 @@ Pan around a large camera view to only show part of the video feed in the card a
+### Video Scrubbing
+
+
+
+### Media filtering
+
+
+
+### Seamless integration of different camera sources/engines
+
+
+
+### Expanded mode
+
+
+
+### Substream Support
+
+
+
+### Timeline Date Picking
+
+
+
+### Low performance mode
+
+
+
+### Ribbon timeline
+
+
+
## Examples
### Illustrative Expanded Configuration Reference
@@ -1139,12 +1473,16 @@ Reference: [Camera Options](#camera-options).
cameras:
- camera_entity: camera.front_Door
live_provider: ha
+ engine: auto
+ hide: false
frigate:
url: http://my.frigate.local
client_id: frigate
camera_name: front_door
- label: person
- zone: steps
+ labels:
+ - person
+ zones:
+ - steps
# Show events for camera-2 when this camera is viewed.
dependencies:
all_cameras: false
@@ -1157,16 +1495,21 @@ cameras:
- binary_sensor.front_door_sensor
- camera_entity: camera.entrance
live_provider: webrtc-card
+ engine: auto
frigate:
url: http://my-other.frigate.local
client_id: frigate-other
camera_name: entrance
- label: car
- zone: driveway
+ labels:
+ - car
+ zones:
+ - driveway
icon: 'mdi:car'
title: 'Front entrance'
# Custom identifier for the camera to refer to it above.
id: 'camera-2'
+ # Don't show this camera on the UI (will only be available as a dependent substream).
+ hide: true
webrtc_card:
entity: camera.entrance_rtsp
url: 'rtsp://username:password@camera:554/av_stream/ch0'
@@ -1177,6 +1520,106 @@ cameras:
- 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
+ - 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'
+```
+
+
+
+
@@ -1245,6 +1688,10 @@ menu:
enabled: true
alignment: matching
icon: mdi:video-switch
+ substreams:
+ priority: 50
+ enabled: true
+ icon: mdi:video-input-component
live:
priority: 50
enabled: true
@@ -1275,7 +1722,7 @@ menu:
enabled: true
alignment: matching
icon: mdi:download
- frigate_ui:
+ camera_ui:
priority: 50
enabled: true
alignment: matching
@@ -1285,6 +1732,11 @@ menu:
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
@@ -1312,23 +1764,6 @@ live:
lazy_unload: never
draggable: true
transition_effect: slide
- webrtc_card:
- # Arbitrary WebRTC Card options, see https://github.com/AlexxIT/WebRTC#configuration .
- ui: true
- 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
controls:
next_previous:
style: chevrons
@@ -1337,9 +1772,17 @@ live:
media: clips
size: 100
show_details: false
+ show_download_control: true
show_favorite_control: true
show_timeline_control: true
mode: none
+ timeline:
+ style: ribbon
+ mode: none
+ clustering_threshold: 3
+ media: all
+ show_recordings: true
+ window_seconds: 3600
title:
mode: popup-bottom-right
duration_seconds: 2
@@ -1379,6 +1822,7 @@ media_viewer:
auto_unmute: never
lazy_load: true
draggable: true
+ snapshot_click_plays_clip: true
transition_effect: slide
controls:
next_previous:
@@ -1388,8 +1832,16 @@ media_viewer:
size: 100
mode: none
show_details: false
+ show_download_control: true
show_favorite_control: true
show_timeline_control: true
+ timeline:
+ style: ribbon
+ mode: none
+ clustering_threshold: 3
+ media: all
+ show_recordings: true
+ window_seconds: 3600
title:
mode: popup-bottom-right
duration_seconds: 2
@@ -1413,19 +1865,22 @@ media_viewer:
```
-
+
Expand: Cameras Global section
+ +Reference: [Cameras Global Options](#camera-global-options). + +```yaml +cameras_global: + live_provider: ha + engine: auto + hide: false + frigate: + url: http://my.frigate.local + client_id: frigate + camera_name: front_door + labels: + - person + zones: + - steps + dependencies: + all_cameras: false + cameras: + - camera-2 + triggers: + motion: false + occupancy: true + entities: + - binary_sensor.front_door_sensor + go2rtc: + modes: + - webrtc + - mse + - mp4 + - mjpeg + stream: sitting_room + webrtc_card: + # Arbitrary WebRTC Card options, see https://github.com/AlexxIT/WebRTC#configuration . + entity: camera.sitting_room_rtsp + ui: true + 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 + image: + refresh_seconds: 1 ```
-
@@ -1841,6 +2298,7 @@ Reference: [Timeline Options](#timeline-options).
```yaml
timeline:
+ style: stack
clustering_threshold: 3
media: all
show_recordings: true
@@ -1850,6 +2308,7 @@ timeline:
mode: left
size: 100
show_details: true
+ show_download_control: true
show_favorite_control: true
show_timeline_control: true
```
@@ -1881,6 +2340,60 @@ overrides:
state: on
state_not: off
overrides:
+ cameras:
+ # As this is an array, we need to carefully ensure we are
+ # overridding the correct index. We do this by specifying
+ # earlier indicies as being overridden with an empty object
+ # (in YAML this is `{}`). In this example, overriddes will
+ # only apply to the 2nd camera:
+ - {} # No overrides for camera index 0.
+ - live_provider: 'ha' # Overrides for camera index 1.
+ engine: auto
+ hide: false
+ frigate:
+ url: http://my.frigate.local
+ client_id: frigate
+ camera_name: front_door
+ labels:
+ - person
+ zones:
+ - steps
+ dependencies:
+ all_cameras: false
+ cameras:
+ - camera-2
+ triggers:
+ motion: false
+ occupancy: true
+ entities:
+ - binary_sensor.front_door_sensor
+ go2rtc:
+ modes:
+ - webrtc
+ - mse
+ - mp4
+ - mjpeg
+ stream: sitting_room
+ webrtc_card:
+ # Arbitrary WebRTC Card options, see https://github.com/AlexxIT/WebRTC#configuration .
+ entity: camera.sitting_room_rtsp
+ ui: true
+ 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
+ image:
+ refresh_seconds: 1
live:
webrtc_card:
ui: true
@@ -1906,6 +2419,7 @@ overrides:
media: clips
size: 100
show_details: false
+ show_download_control: true
show_favorite_control: true
show_timeline_control: true
mode: none
@@ -1956,6 +2470,11 @@ overrides:
enabled: true
alignment: matching
icon: mdi:camera
+ recordings:
+ priority: 50
+ enabled: false
+ alignment: matching
+ icon: mdi:album
image:
priority: 50
# Disable the image button.
@@ -1973,7 +2492,7 @@ overrides:
enabled: true
alignment: matching
icon: mdi:download
- frigate_ui:
+ camera_ui:
priority: 50
enabled: true
alignment: matching
@@ -2031,6 +2550,34 @@ overrides:
```
+
+Expand: Event Gallery section
+Expand: Media Gallery section
-Reference: [Event Gallery Options](#event-gallery-options). +Reference: [Media Gallery Options](#media-gallery-options). ```yaml -event_gallery: +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: @@ -1690,7 +2145,7 @@ elements: - entity: light.office_main_lights state: on state_not: off - mediaLoaded: true + media_loaded: true # Full form PTZ actions (only left button shown). - type: custom:frigate-card-ptz orientation: vertical @@ -1779,7 +2234,7 @@ elements: title: Open Frigate UI tap_action: action: custom:frigate-card-action - frigate_card_action: frigate_ui + frigate_card_action: camera_ui - type: custom:frigate-card-menu-icon icon: mdi:alpha-j-circle title: Change to fullscreen @@ -1829,6 +2284,8 @@ Reference: [Dimension Options](#dimensions-options). dimensions: aspect_ratio_mode: dynamic aspect_ratio: 16:9 + max_height: 100vh + min_height: 100px ```
+
+
+Expand: Performance section
+ +Reference: [Performance Options](#performance-options). + +```yaml +performance: + profile: high + features: + animated_progress_indicator: true + media_chunk_size: 50 + style: + border_radius: true + box_shadow: true +``` +
+
+
### Basic cameras configuration
Expand: Other options
+ +Reference: [Other Options](#other-options). + +```yaml +card_id: main +``` +
@@ -2056,7 +2603,7 @@ to provide a separate unambiguous way of referring to that camera, since the
type: custom:frigate-card
cameras:
- camera_entity: camera.front_door
- live_provider: frigate-jsmpeg
+ live_provider: jsmpeg
title: Front Door (JSMPEG)
- camera_entity: camera.front_door
live_provider: webrtc-card
@@ -2455,8 +3002,6 @@ overrides:
-
-
Expand: Change the menu position based on HA state
@@ -2472,9 +3017,6 @@ overrides: ```Expand: Change the default view based on HA state
@@ -2505,6 +3047,25 @@ overrides: ```
+
+
### Refreshing a static image
Expand: Change the menu style in expanded mode
+ +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 +menu: + style: hidden +overrides: + - conditions: + expand: true + overrides: + menu: + style: overlay +``` +
@@ -2559,7 +3120,7 @@ This example shows the native PTZ element when the `live` or `image` view is dis
elements:
- type: custom:frigate-card-conditional
conditions:
- mediaLoaded: true
+ media_loaded: true
view:
- live
- image
@@ -2586,6 +3147,66 @@ elements:
```
+### Using live substreams
+
+The card supports configuring 'substreams' to show up for a given live camera through the use of [camera dependencies](#camera-dependencies-configuration).
+
+
+
+
+Expand: Having an SD and HD substream
+ +This example shows two substreams for a single live camera, and uses the 'HD' icon. + +```yaml +[...] +cameras: + - camera_entity: camera.sitting_room + live_provider: image + dependencies: + cameras: + - sitting_room_hd + - camera_entity: camera.sitting_room + title: Sitting Room HD + live_provider: go2rtc + id: sitting_room_hd + # Do not show the HD camera independently on the UI. + hide: true +menu: + buttons: + substreams: + icon: mdi:high-definition +``` +
+
+
### Using `card-mod` to style the card
@@ -2639,7 +3260,7 @@ menu:
### Using a dependent camera
-`dependencies.cameras` allows events 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).
+`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).
Expand: Having a substream menu with different live providers
+ +This example shows a substream menu for three different live providers for a given camera. + +```yaml +[...] +cameras: + - camera_entity: camera.sitting_room + live_provider: image + dependencies: + cameras: + - sitting_room_go2rtc + - sitting_room_ha + icon: mdi:image + - camera_entity: camera.sitting_room + live_provider: go2rtc + id: sitting_room_go2rtc + hide: true + title: Sitting Room go2rtc + icon: mdi:alpha-g + - camera_entity: camera.sitting_room + live_provider: ha + id: sitting_room_ha + hide: true + title: Sitting Room HA + icon: mdi:home +``` +Expand: Using dependent cameras with birdseye
@@ -2789,8 +3410,146 @@ overrides: ```
+
+
+Expand: Hide menu & controls when viewport width <= 300 (e.g. PIP mode)
+ +```yaml +type: custom:frigate-card +cameras: + - camera_entity: camera.back_yard + - camera_entity: camera.sitting_room +overrides: + - conditions: + media_query: '(max-width: 300px)' + overrides: + menu: + style: none + live: + controls: + next_previous: + style: none + thumbnails: + mode: none +``` +
+
+
+### Automatically trigger "fullscreen" mode
+
+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.
+
+There is a potential workaround:
+
+Expand: Change menu position when orientation changes
+ +```yaml +type: custom:frigate-card +cameras: + - camera_entity: camera.back_yard + - camera_entity: camera.sitting_room +menu: + style: overlay +overrides: + - conditions: + media_query: '(orientation: landscape)' + overrides: + menu: + position: left +``` +
+
+
+
+
+### Passing the card actions from the URL
+
+The card can respond to actions in the query string (see [below](#query-string-actions)).
+
+Expand: Use "browser_mod" to show a popup with a Frigate Card
+ +This workaround 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 +``` +
+
+
+Expand: Selecting the kitchen camera and opening the expanded view
+ +This example assumes the dashboard URL is `https://ha.mydomain.org/lovelace-test/0`. + +``` +https://ha.mydomain.org/lovelace-test/0?frigate-card-action:camera_select=kitchen&frigate-card-action:expand +``` +
+
+
+
## Card Refreshes
@@ -2850,6 +3609,58 @@ view:
timeout_seconds: 30
```
+
+
+### Passing the card actions from the URL
+
+It is possible to pass the Frigate card one or more actions from the URL (e.g. select a particular camera, open the live view in expanded mode, etc).
+
+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 named Frigate card on the dashboard:
+
+```
+[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` parameter will act. |
+| `VALUE` | An optional value to use with the `camera_select` and `live_substream_select` actions. |
+
+#### Actions
+
+| Action | Supported in query string | 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: | |
+| `recording` | :white_check_mark: | |
+| `recordings` | :white_check_mark: | |
+| `snapshot` | :white_check_mark: | |
+| `snapshots` | :white_check_mark: | |
+
+See [custom actions](#custom-actions) for a description of what the actions do.
+
+#### Examples
+
+See [query string examples](#query-string-examples) for examples of usage.
+
### 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/).
@@ -2877,7 +3688,7 @@ Using a `panel` dashboard with the following base configuration will result in t
type: custom:frigate-card
cameras:
- camera_entity: camera.front_door
- live_provider: frigate-jsmpeg
+ live_provider: jsmpeg
dimensions:
aspect_ratio: 1024:600
aspect_ratio_mode: static
@@ -2893,6 +3704,22 @@ See [screenshot above](#screenshots-card-casting).
You must be using a version of the [Frigate integration](https://github.com/blakeblackshear/frigate-hass-integration) >= 3.0.0-rc.2 to see recordings. Using an older version of the integration may also show blank thumbnails in the events viewer. Please upgrade your integration accordingly.
+### `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 [camera configuration](#camera-frigate-configuration").
+* 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
+```
+
+### 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.
+
### Chrome autoplays when a tab becomes visible again
Even if `live.auto_play` or `media_viewer.auto_play` is set to `never`, 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.
@@ -2903,13 +3730,6 @@ For some slowly loading cameras, for which [Home Assistant stream preloading](ht
-### JSMPEG Live Camera Only Shows A 'spinner'
-
-You must be using a version of the [Frigate integration](https://github.com/blakeblackshear/frigate-hass-integration) >= 2.1.0
-to use JSMPEG proxying. The `frigate-jsmpeg` live provider will not work with earlier
-integration versions.
-
-
### Timeline shows error message
If the timeline shows a message such as `Failed to receive response from Home
@@ -2951,7 +3771,7 @@ 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 `frigate-jsmpeg` provider.
+Dragging works as expected for snapshots, or for the `jsmpeg` provider.
### Progress bar cannot be dragged in Safari
@@ -2997,12 +3817,20 @@ This could be for any number of reasons. Chromecast devices can be quite picky o
### Javascript console shows `[Violation] Added non-passive event listener to a scroll-blocking [...] event`
-This card heavily uses [Embla Carousel](https://www.embla-carousel.com/) -- a light-weight performant carousel library -- to show media. This carousel library uses non-passive event-listeners in a considered and performant way, but one that still causes occasional and unhelpful Chrome warnings. These warnings can be safely ignored in this instance, and cannot easily be fixed in the underlying library as it heavily relies on non-passive event listeners ([see this bug comment for explanation](https://github.com/davidjerleke/embla-carousel/issues/62#issuecomment-628569509)).
+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.
+
+### 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.
## Development
### 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`](./package.json) for a reference on which version of Node and Yarn should be used.
+
```sh
$ git clone https://github.com/dermotduffy/frigate-hass-card
$ cd frigate-hass-card
@@ -3014,9 +3842,9 @@ Resultant build will be at `dist/frigate-hass-card.js`. This could be installed
### Dev Container
-[](https://vscode.dev/redirect?url=vscode://ms-vscode-remote.remote-containers/cloneInVolume?url=https://github.com/dermotduffy/frigate-hass-card)
+[](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 Remote - Containers](https://code.visualstudio.com/docs/remote/containers) extension to speed up the development environment creation. Simply:
+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
1. Open VS Code on it
@@ -3025,9 +3853,9 @@ You can use the [VS Code Remote - Containers](https://code.visualstudio.com/docs
Everything should just work without any additional configuration. Under the hood, the dev container setup takes care of bringing up:
-* Home Assistant (port `48123:8123`)
-* Frigate (ports `45000:5000`, `41935:1935`)
-* MQTT (port `41883:1883`)
+* 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.
diff --git a/docker-compose.yml b/docker-compose.yml
index 3940d253..bc9e5cc1 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -1,10 +1,10 @@
---
-version: '3'
services:
dev:
- user: node
init: true
build: .devcontainer
+ entrypoint: /usr/local/share/docker-init.sh
+ command: sleep infinity
env_file:
- .env
volumes:
diff --git a/images/date-picker.gif b/images/date-picker.gif
new file mode 100644
index 00000000..984a2dd0
Binary files /dev/null and b/images/date-picker.gif differ
diff --git a/images/expanded.gif b/images/expanded.gif
new file mode 100644
index 00000000..13a8dce7
Binary files /dev/null and b/images/expanded.gif differ
diff --git a/images/media-filtering.gif b/images/media-filtering.gif
new file mode 100644
index 00000000..fc1c8908
Binary files /dev/null and b/images/media-filtering.gif differ
diff --git a/images/motioneye.gif b/images/motioneye.gif
new file mode 100644
index 00000000..6d7785c1
Binary files /dev/null and b/images/motioneye.gif differ
diff --git a/images/performance.png b/images/performance.png
new file mode 100644
index 00000000..c59f21bc
Binary files /dev/null and b/images/performance.png differ
diff --git a/images/ribbon-timeline.png b/images/ribbon-timeline.png
new file mode 100644
index 00000000..22097748
Binary files /dev/null and b/images/ribbon-timeline.png differ
diff --git a/images/substream.gif b/images/substream.gif
new file mode 100644
index 00000000..0651e658
Binary files /dev/null and b/images/substream.gif differ
diff --git a/images/video-scrubbing.gif b/images/video-scrubbing.gif
new file mode 100644
index 00000000..5caa9c56
Binary files /dev/null and b/images/video-scrubbing.gif differ
diff --git a/package.json b/package.json
index 0cbdd131..11cec416 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "frigate-hass-card",
- "version": "4.0.0",
+ "version": "5.0.0",
"description": "Frigate Lovelace Card for Home Assistant",
"keywords": [
"frigate",
@@ -17,30 +17,34 @@
"dependencies": {
"@cycjimmy/jsmpeg-player": "^6.0.4",
"@egjs/hammerjs": "^2.0.17",
+ "@graphiteds/core": "^1.9.6",
+ "@lit-labs/scoped-registry-mixin": "^1.0.1",
"@lit-labs/task": "^1.1.3",
"@types/bluebird": "^3.5.36",
"component-emitter": "^1.3.0",
"crypto": "^1.0.1",
"custom-card-helpers": "^1.9.0",
"date-fns": "^2.29.2",
- "embla-carousel": "^7.0.2",
+ "date-fns-tz": "^1.3.7",
+ "embla-carousel": "^7.0.9",
"embla-carousel-wheel-gestures": "^3.0.0",
"home-assistant-js-websocket": "^8.0.0",
"keycharm": "^0.4.0",
"lit": "^2.3.1",
+ "lit-flatpickr": "^0.4.0",
"lodash-es": "^4.17.21",
"moment": "^2.29.4",
"propagating-hammerjs": "^2.0.1",
"quick-lru": "^6.1.0",
"screenfull": "^6.0.2",
"side-drawer": "^3.1.0",
- "ts-toolbelt": "^9.6.0",
"uuid": "^8.3.2",
- "vis-data": "^7.1.3",
+ "vis-data": "^7.1.4",
"vis-timeline": "^7.7.0",
"vis-util": "^5.0.2",
+ "web-dialog": "^0.0.11",
"xss": "^1.0.14",
- "zod": "^3.19.0"
+ "zod": "^3.21.4"
},
"devDependencies": {
"@babel/core": "^7.19.0",
@@ -48,18 +52,20 @@
"@babel/plugin-proposal-decorators": "^7.19.0",
"@rollup/plugin-babel": "^5.3.1",
"@rollup/plugin-commonjs": "^22.0.2",
- "@rollup/plugin-image": "^2.1.1",
+ "@rollup/plugin-image": "^3.0.2",
"@rollup/plugin-json": "^4.1.0",
"@rollup/plugin-node-resolve": "^13.3.0",
"@rollup/plugin-replace": "^4.0.0",
"@types/lodash-es": "^4.17.5",
"@typescript-eslint/eslint-plugin": "^5.36.2",
"@typescript-eslint/parser": "^5.36.2",
+ "@vitest/coverage-c8": "^0.29.8",
"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",
"prettier": "^2.6.0",
"rollup": "^2.79.0",
"rollup-plugin-git-info": "^1.0.0",
@@ -67,13 +73,24 @@
"rollup-plugin-styles": "^4.0.0",
"rollup-plugin-terser": "^7.0.2",
"rollup-plugin-typescript2": "^0.33.0",
+ "rollup-plugin-visualizer": "^5.8.2",
"sass": "^1.54.9",
- "typescript": "^4.8.3"
+ "ts-prune": "^0.10.3",
+ "typescript": "^4.9.5",
+ "vitest": "^0.29.8",
+ "vitest-mock-extended": "^1.1.3"
},
"scripts": {
"start": "rollup -c --watch",
"build": "yarn run lint && yarn run rollup",
"lint": "eslint 'src/**/*.ts'",
- "rollup": "rollup -c"
+ "rollup": "rollup -c",
+ "prune": "ts-prune",
+ "test": "vitest run",
+ "coverage": "vitest run --coverage"
+ },
+ "volta": {
+ "node": "18.14.0",
+ "yarn": "3.4.1"
}
}
diff --git a/rollup.config.js b/rollup.config.js
index 98cf2331..821de314 100644
--- a/rollup.config.js
+++ b/rollup.config.js
@@ -1,7 +1,6 @@
import typescript from 'rollup-plugin-typescript2';
import commonjs from '@rollup/plugin-commonjs';
import nodeResolve from '@rollup/plugin-node-resolve';
-import babel from '@rollup/plugin-babel';
import { terser } from 'rollup-plugin-terser';
import serve from 'rollup-plugin-serve';
import json from '@rollup/plugin-json';
@@ -9,6 +8,7 @@ import styles from 'rollup-plugin-styles';
import image from '@rollup/plugin-image';
import replace from '@rollup/plugin-replace';
import gitInfo from 'rollup-plugin-git-info';
+import { visualizer } from 'rollup-plugin-visualizer';
const watch = process.env.ROLLUP_WATCH === 'true' || process.env.ROLLUP_WATCH === '1';
const dev = watch || process.env.DEV === 'true' || process.env.DEV === '1';
@@ -46,13 +46,10 @@ const plugins = [
}),
commonjs({
include: 'node_modules/**',
+ sourceMap: false,
}),
typescript(),
json({ exclude: 'package.json' }),
- babel({
- babelHelpers: 'bundled',
- exclude: 'node_modules/**',
- }),
replace({
preventAssignment: true,
values: {
@@ -61,6 +58,7 @@ const plugins = [
}),
watch && serve(serveopts),
!dev && terser(),
+ visualizer(),
];
/**
@@ -68,19 +66,37 @@ const plugins = [
*/
const config = {
input: 'src/card.ts',
+ // Specifically want a facade created as HACS will attach a hacstag
+ // queryparameter to the resource. Without a facade when chunks re-import the
+ // card chunk, they'll refer to a 'different' copy of the card chunk without
+ // the hacstag, causing a re-download of the same content and functionality
+ // problems.
+ preserveEntrySignatures: 'strict',
output: {
- file: 'dist/frigate-hass-card.js',
+ entryFileNames: 'frigate-hass-card.js',
+ dir: 'dist',
+ chunkFileNames: (chunk) => {
+ // Add "lang-" to the front of the language chunk names for readability.
+ if (
+ chunk.facadeModuleId &&
+ chunk.facadeModuleId.match(/localize\/languages\/.*\.json/)
+ ) {
+ return 'lang-[name]-[hash].js';
+ }
+ return '[name]-[hash].js';
+ },
format: 'es',
...(dev && {
sourcemap: true,
}),
},
plugins: plugins,
- // These two files use this at the toplevel, which causes rollup warning
- // spam on build: `this` has been rewritten to `undefined`
+ // These files use this at the toplevel, which causes rollup warning
+ // spam on build: `this` has been rewritten to `undefined`.
moduleContext: {
'./node_modules/@formatjs/intl-utils/lib/src/diff.js': 'window',
'./node_modules/@formatjs/intl-utils/lib/src/resolve-locale.js': 'window',
+ './node_modules/flatpickr/dist/esm/index.js': 'window',
},
};
diff --git a/src/action-handler-directive.ts b/src/action-handler-directive.ts
index b1e52948..d62eb71e 100644
--- a/src/action-handler-directive.ts
+++ b/src/action-handler-directive.ts
@@ -165,7 +165,7 @@ const getActionHandler = (): ActionHandler => {
return actionhandler as ActionHandler;
};
-export const actionHandlerBind = (
+const actionHandlerBind = (
element: ActionHandlerElement,
options?: FrigateCardActionHandlerOptions,
): void => {
diff --git a/src/camera-manager/browse-media/engine-browse-media.ts b/src/camera-manager/browse-media/engine-browse-media.ts
new file mode 100644
index 00000000..751c00b8
--- /dev/null
+++ b/src/camera-manager/browse-media/engine-browse-media.ts
@@ -0,0 +1,215 @@
+import { HomeAssistant } from 'custom-card-helpers';
+import { CameraConfig, ExtendedHomeAssistant } from '../../types';
+import { ViewMedia } from '../../view/media';
+import {
+ CameraManagerMediaCapabilities,
+ DataQuery,
+ EventQuery,
+ PartialEventQuery,
+ CameraConfigs,
+ CameraManagerCameraCapabilities,
+ QueryType,
+ CameraEndpoint,
+} from '../types';
+import { EntityRegistryManager } from '../../utils/ha/entity-registry';
+import { CameraManagerEngine } from '../engine';
+import { GenericCameraManagerEngine } from '../generic/engine-generic';
+import { CameraInitializationError } from '../error';
+import { localize } from '../../localize/localize';
+import { Entity } from '../../utils/ha/entity-registry/types';
+import { BrowseMediaManager } from '../../utils/ha/browse-media/browse-media-manager';
+import {
+ BROWSE_MEDIA_CACHE_SECONDS,
+ MEDIA_CLASS_IMAGE,
+ MEDIA_CLASS_VIDEO,
+ RichBrowseMedia,
+} from '../../utils/ha/browse-media/types';
+import { BrowseMediaMetadata } from './types';
+import { rangesOverlap } from '../range';
+import { ResolvedMediaCache, resolveMedia } from '../../utils/ha/resolved-media';
+import { canonicalizeHAURL } from '../../utils/ha';
+import { RequestCache } from '../cache';
+import { BrowseMediaViewMediaFactory } from './media';
+
+/**
+ * A utility method to determine if a browse media object matches against a
+ * start and end date.
+ * @param media The browse media object (with rich metadata).
+ * @param start The optional start date.
+ * @param end The optional end date.
+ * @returns `true` if the media falls within the provided dates.
+ */
+export const isMediaWithinDates = (
+ media: RichBrowseMediaExpand: Choosing the clips view on a named card
+ +This example assumes the dashboard URL is `https://ha.mydomain.org/lovelace-test/0`. + +It assumes that one card (of potentially multiple Frigate Cards on the dashboard) is configured with a `card_id` parameter: + +```yaml +type: custom:frigate-card +card_id: main +cameras: +[...] +``` + +``` +https://ha.mydomain.org/lovelace-test/0?frigate-card-action:main:clips +``` +
- ${this._cameras === undefined && !this._message
- ? until(
- (async () => {
- await this._loadCameras();
- // Don't reset messages as errors may have been generated
- // during the camera load.
- this._changeView({ resetMessage: false });
- return this._render();
- })(),
- renderProgressIndicator(),
- )
+ ${!this._cameraManager?.isInitialized() && !this._message
+ ? renderProgressIndicator({ cardWideConfig: this._cardWideConfig })
: // Always want to call render even if there's a message, to
// ensure live preload is always present (even if not displayed).
- this._render()}
+ html`
@@ -1868,90 +2048,12 @@ export class FrigateCard extends LitElement {
>
`
: ``}
-
${showPrevious ? html` = createRef();
+
+ public open(): void {
+ this._refInput.value?.open();
+ }
+
+ protected render(): TemplateResult {
+ return html` {
+ if (dates.length) {
+ // This is a single date picker, there should be only a single date.
+ dispatchFrigateCardEvent(this, 'date-picker:change', {
+ date: dates[0],
+ });
+ }
+ }}
+ > `;
+ }
+
+ static get styles(): CSSResultGroup {
+ return unsafeCSS(datePickerStyle);
+ }
+}
+
+declare global {
+ interface HTMLElementTagNameMap {
+ 'frigate-card-date-picker': FrigateCardDatePicker;
+ }
+}
diff --git a/src/components/drawer.ts b/src/components/drawer.ts
index dfff296a..0639c707 100644
--- a/src/components/drawer.ts
+++ b/src/components/drawer.ts
@@ -15,6 +15,11 @@ import drawerStyle from '../scss/drawer.scss';
import { stopEventFromActivatingCardWideActions } from '../utils/action';
import { isHoverableDevice } from '../utils/basic';
+export interface DrawerIcons {
+ open?: string;
+ closed?: string;
+}
+
@customElement('frigate-card-drawer')
export class FrigateCardDrawer extends LitElement {
@property({ attribute: true, reflect: true })
@@ -26,6 +31,9 @@ export class FrigateCardDrawer extends LitElement {
@property({ type: Boolean, reflect: true, attribute: true })
public open = false;
+ @property({ attribute: false })
+ public icons?: DrawerIcons;
+
// The 'empty' attribute is used in the styling to change the drawer
// visibility and that of all descendants if there is no content. Styling is
// used rather than display or hidden in order to ensure the contents continue
@@ -111,7 +119,9 @@ export class FrigateCardDrawer extends LitElement {
>
{
// Only open the drawer on mousenter when the device
// supports hover (otherwise iOS may end up passing on
@@ -126,7 +136,7 @@ export class FrigateCardDrawer extends LitElement {
`
: ''}
-
+ ${this._showLoaderTop
+ ? html`${renderProgressIndicator({
+ cardWideConfig: this.cardWideConfig,
+ classes: {
+ top: true,
+ },
+ size: 'small',
+ })}`
+ : ''}
+ ${this._media.map(
+ (media, index) =>
+ html`