From 2fa928467edb2637315d2e076cb73e53b6250e99 Mon Sep 17 00:00:00 2001 From: Dermot Duffy Date: Sun, 5 Sep 2021 22:41:12 -0700 Subject: [PATCH 1/2] Add option to disable next/prev controls. --- README.md | 1 + src/editor.ts | 12 ++++++++++++ src/frigate-hass-card.ts | 8 ++++++-- src/localize/languages/en.json | 6 +++++- src/types.ts | 3 +++ 5 files changed, 27 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index 82fbcd82..8dc5250f 100644 --- a/README.md +++ b/README.md @@ -72,6 +72,7 @@ lovelace: | ------------- | --------------------------------------------- | - | | `menu_mode` | `hidden-top` | The menu mode to show by default. See [menu modes](#menu-modes) below.| | `menu_buttons.{frigate, live, clips, snapshots, frigate_ui}` | `true` | Whether or not to show these builtin actions in the card menu. | +| `controls.nextprev` | `true` | Whether or not to show the next and previous controls when viewing media. | ### Advanced diff --git a/src/editor.ts b/src/editor.ts index c1dad8a0..c67cfab4 100644 --- a/src/editor.ts +++ b/src/editor.ts @@ -300,6 +300,18 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor @change=${this._valueChanged} > +
+ + +
` : ''}
diff --git a/src/frigate-hass-card.ts b/src/frigate-hass-card.ts index 6bb6adc9..10f90c28 100644 --- a/src/frigate-hass-card.ts +++ b/src/frigate-hass-card.ts @@ -767,7 +767,9 @@ export class FrigateCard extends LitElement { const neighbors = this._getMediaNeighbors(parent, childIndex); return html` - ${neighbors?.previous && neighbors.previous.thumbnail + ${(this.config.controls?.nextprev ?? true) && + neighbors?.previous && + neighbors.previous.thumbnail ? html``} - ${neighbors?.next && neighbors.next.thumbnail + ${(this.config.controls?.nextprev ?? true) && + neighbors?.next && + neighbors.next.thumbnail ? html` Date: Mon, 6 Sep 2021 16:03:51 -0700 Subject: [PATCH 2/2] Allow chevrons, thumbnails or no media controls. --- README.md | 2 +- src/editor.ts | 46 ++++++--- src/frigate-hass-card.ts | 99 ++++++++++++------- src/localize/languages/en.json | 8 +- .../card.scss} | 29 +++--- src/scss/common.scss | 16 +++ .../editor.scss} | 0 .../menu.scss} | 20 +--- src/types.ts | 2 +- 9 files changed, 137 insertions(+), 85 deletions(-) rename src/{frigate-hass-card.scss => scss/card.scss} (89%) create mode 100644 src/scss/common.scss rename src/{frigate-hass-card-editor.scss => scss/editor.scss} (100%) rename src/{frigate-hass-card-menu.scss => scss/menu.scss} (71%) diff --git a/README.md b/README.md index 8dc5250f..d73bff9e 100644 --- a/README.md +++ b/README.md @@ -72,7 +72,7 @@ lovelace: | ------------- | --------------------------------------------- | - | | `menu_mode` | `hidden-top` | The menu mode to show by default. See [menu modes](#menu-modes) below.| | `menu_buttons.{frigate, live, clips, snapshots, frigate_ui}` | `true` | Whether or not to show these builtin actions in the card menu. | -| `controls.nextprev` | `true` | Whether or not to show the next and previous controls when viewing media. | +| `controls.nextprev` | `thumbnails` | When viewing media, what kind of controls to show to move to the previous/next media item. Acceptable values: `thumbnails`, `chevrons`, `none` . | ### Advanced diff --git a/src/editor.ts b/src/editor.ts index c67cfab4..59f28d4b 100644 --- a/src/editor.ts +++ b/src/editor.ts @@ -6,7 +6,7 @@ import { HomeAssistant, LovelaceCardEditor, fireEvent } from 'custom-card-helper import { localize } from './localize/localize'; import type { FrigateCardConfig } from './types'; -import frigate_card_editor_style from './frigate-hass-card-editor.scss'; +import frigate_card_editor_style from './scss/editor.scss'; const options = { required: { @@ -124,6 +124,14 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor frigate: localize('live_provider.frigate'), webrtc: localize('live_provider.webrtc'), }; + + const controlsNextPrev = { + '': '', + thumbnails: localize('control.thumbnails'), + chevrons: localize('control.chevrons'), + none: localize('control.none'), + }; + return html`
@@ -243,8 +251,28 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor ${menuModes[key]} `; })} -
+ + +
+ + + ${Object.keys(controlsNextPrev).map((key) => { + return html` + ${controlsNextPrev[key]} + `; + })} + + +
-
- - -
` : ''}
diff --git a/src/frigate-hass-card.ts b/src/frigate-hass-card.ts index 10f90c28..2208d9e4 100644 --- a/src/frigate-hass-card.ts +++ b/src/frigate-hass-card.ts @@ -21,8 +21,8 @@ import { import './editor'; -import frigate_card_style from './frigate-hass-card.scss'; -import frigate_card_menu_style from './frigate-hass-card-menu.scss'; +import frigate_card_style from './scss/card.scss'; +import frigate_card_menu_style from './scss/menu.scss'; import { MenuButton, @@ -722,6 +722,55 @@ export class FrigateCard extends LitElement { }; } + // Render the next/previous controls. + protected _renderNextPreviousControls( + previous: boolean, + parent?: BrowseMediaSource, + targetChildIndex?: number, + neighbor?: BrowseMediaSource, + ): TemplateResult { + if (!neighbor || this.config.controls?.nextprev === 'none') { + return html``; + } + + const classes = { + 'frigate-media-controls': true, + previous: previous, + next: !previous, + thumbnails: this.config.controls?.nextprev === "thumbnails", + chevrons: this.config.controls?.nextprev === "chevrons", + button: this.config.controls?.nextprev === "chevrons", + } + + const clickChangeView = () => { + this._view = new View({ + view: this._view.view, + target: parent, + childIndex: targetChildIndex, + previous: this._view, + }); + } + + if (this.config.controls?.nextprev == 'chevrons') { + return html` `; + } + + if (!neighbor.thumbnail) { + return html``; + } + return html``; + } + // Render the view for media. protected async _renderViewer(): Promise { let autoplay = true; @@ -767,23 +816,12 @@ export class FrigateCard extends LitElement { const neighbors = this._getMediaNeighbors(parent, childIndex); return html` - ${(this.config.controls?.nextprev ?? true) && - neighbors?.previous && - neighbors.previous.thumbnail - ? html` { - this._view = new View({ - view: this._view.view, - target: parent || undefined, - childIndex: neighbors.previousIndex ?? undefined, - previous: this._view, - }); - }} - />` - : ``} + ${this._renderNextPreviousControls( + true, + parent, + neighbors?.previousIndex ?? undefined, + neighbors?.previous ?? undefined, + )} ${this._view.is('clip') ? resolvedMedia?.mime_type.toLowerCase() == 'application/x-mpegurl' ? html``} - ${(this.config.controls?.nextprev ?? true) && - neighbors?.next && - neighbors.next.thumbnail - ? html` { - this._view = new View({ - view: this._view.view, - target: parent || undefined, - childIndex: neighbors.nextIndex ?? undefined, - previous: this._view, - }); - }} - />` - : ``} + ${this._renderNextPreviousControls( + false, + parent, + neighbors?.nextIndex ?? undefined, + neighbors?.next ?? undefined, + )} `; } diff --git a/src/localize/languages/en.json b/src/localize/languages/en.json index 9050b356..fba699c3 100644 --- a/src/localize/languages/en.json +++ b/src/localize/languages/en.json @@ -32,8 +32,7 @@ "show_button": "Show button", "zone": "Zone", "label": "Frigate label/object filter (Optional)", - "live_provider": "Live view provider (Optional)", - "show_control": "Show control" + "live_provider": "Live view provider (Optional)" }, "menu": { "frigate": "Frigate Menu / Default View", @@ -45,7 +44,10 @@ "frigate_ui": "Frigate User Interface" }, "control": { - "nextprev": "Media Next & Previous" + "nextprev": "Media Next & Previous Controls", + "thumbnails": "Thumbnails", + "chevrons": "Chevrons", + "none": "None" }, "menu_mode": { "none": "No menu", diff --git a/src/frigate-hass-card.scss b/src/scss/card.scss similarity index 89% rename from src/frigate-hass-card.scss rename to src/scss/card.scss index 859c9908..c7704772 100644 --- a/src/frigate-hass-card.scss +++ b/src/scss/card.scss @@ -1,5 +1,6 @@ @use "@material/image-list/mdc-image-list"; @use "@material/image-list"; +@use './common.scss'; .frigate-card-contents { width: 100%; @@ -87,30 +88,36 @@ webrtc-camera ha-card { position: absolute; z-index: 1; overflow: hidden; - opacity: 0.8; +} +.frigate-media-controls.previous { + left: 45px; +} +.frigate-media-controls.next { + right: 45px; +} + +.frigate-media-controls.chevrons { + top: calc(50% - (40px / 2)); +} + +.frigate-media-controls.thumbnails { border-radius: 50%; height: 48px; top: calc(50% - (48px / 2)); box-shadow: 0px 0px 30px 1px black; transition: all .2s ease; + opacity: 0.8; } - -.frigate-media-controls:hover { +.frigate-media-controls.thumbnails:hover { opacity: 1 !important; height: 72px; top: calc(50% - (72px / 2)); } -.frigate-media-controls.previous { - left: 45px; -} -.frigate-media-controls.previous:hover { +.frigate-media-controls.previous.thumbnails:hover { left: 33px; } -.frigate-media-controls.next { - right: 45px; -} -.frigate-media-controls.next:hover { +.frigate-media-controls.next.thumbnails:hover { right: 33px; } \ No newline at end of file diff --git a/src/scss/common.scss b/src/scss/common.scss new file mode 100644 index 00000000..a8dac10b --- /dev/null +++ b/src/scss/common.scss @@ -0,0 +1,16 @@ +ha-icon-button.button { + z-index: 10; + color: var(--secondary-color, white); + opacity: 0.8; + background-color: rgba(0, 0, 0, 0.6); + border-radius: 50%; + padding: 0px; + margin: 3px; + --mdc-icon-button-size: 40px; + /* Buttons can always be clicked */ + pointer-events: auto; +} + +ha-icon-button.button.emphasize { + color: var(--primary-color, white); +} \ No newline at end of file diff --git a/src/frigate-hass-card-editor.scss b/src/scss/editor.scss similarity index 100% rename from src/frigate-hass-card-editor.scss rename to src/scss/editor.scss diff --git a/src/frigate-hass-card-menu.scss b/src/scss/menu.scss similarity index 71% rename from src/frigate-hass-card-menu.scss rename to src/scss/menu.scss index 0bc64c49..a5daf90d 100644 --- a/src/frigate-hass-card-menu.scss +++ b/src/scss/menu.scss @@ -1,3 +1,5 @@ +@use './common.scss'; + .frigate-card-menu { z-index: 1; height: 46px; @@ -35,22 +37,4 @@ .frigate-card-menu.full { width: 100%; background: var(--secondary-background-color); -} - -ha-icon-button.button { - position: relative; - z-index: 10; - color: var(--secondary-color, white); - opacity: 0.8; - background-color: rgba(0, 0, 0, 0.6); - border-radius: 50%; - padding: 0px; - margin: 3px; - --mdc-icon-button-size: 40px; - /* Buttons can always be clicked */ - pointer-events: auto; -} - -ha-icon-button.button.emphasize { - color: var(--primary-color, white); } \ No newline at end of file diff --git a/src/types.ts b/src/types.ts index 7002cdd9..ea1a792e 100644 --- a/src/types.ts +++ b/src/types.ts @@ -75,7 +75,7 @@ export const frigateCardConfigSchema = z.object({ icon: z.string().optional(), }).array().optional(), controls: z.object({ - nextprev: z.boolean().default(true), + nextprev: z.enum(['thumbnails', 'chevrons', 'none']).default('thumbnails'), }).optional(), // Stock lovelace card config.