195 lines
8.7 KiB
Markdown
195 lines
8.7 KiB
Markdown
# `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 >= `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 >= `75` and <= `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
|
|
```
|