flan/advanced-camera-card
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Allow chevrons, thumbnails or no media controls.

Browse Source
This commit is contained in:
Dermot Duffy
2021-09-06 16:03:51 -07:00
parent 2fa928467e
commit 7bd7731811
9 changed files with 137 additions and 85 deletions
Download Patch File Download Diff File Expand all files Collapse all files
README.md
+1 -1
View File
@@ -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
src/editor.ts
+31 -15
View File
@@ -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`
<div class="card-config">
<div class="option" @click=${this._toggleOption} .option=${'required'}>
@@ -243,8 +251,28 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor
<paper-item .label="${key}"> ${menuModes[key]} </paper-item>
`;
})}
</paper-listbox> </paper-dropdown-menu
><br />
</paper-listbox>
</paper-dropdown-menu>
<br />
<paper-dropdown-menu
.label=${localize('control.nextprev')}
@value-changed=${this._valueChanged}
.configValue=${'controls.nextprev'}
>
<paper-listbox
slot="dropdown-content"
.selected=${Object.keys(controlsNextPrev).indexOf(
this._config?.controls?.nextprev || '',
)}
>
${Object.keys(controlsNextPrev).map((key) => {
return html`
<paper-item .label="${key}"> ${controlsNextPrev[key]} </paper-item>
`;
})}
</paper-listbox>
</paper-dropdown-menu>
<br />
<ha-formfield
.label=${localize('editor.show_button') +
': ' +
@@ -300,18 +328,6 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor
@change=${this._valueChanged}
></ha-switch>
</ha-formfield>
<br />
<ha-formfield
.label=${localize('editor.show_control') +
': ' +
localize('control.nextprev')}
>
<ha-switch
.checked=${this._config?.controls?.nextprev ?? true}
.configValue=${'controls.nextprev'}
@change=${this._valueChanged}
></ha-switch>
</ha-formfield>
<br />`
: ''}
<div class="option" @click=${this._toggleOption} .option=${'advanced'}>
src/frigate-hass-card.ts
+63 -36
View File
@@ -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` <ha-icon-button
icon=${previous ? 'mdi:chevron-left' : 'mdi:chevron-right'}
class="${classMap(classes)}"
title=${neighbor.title}
@click=${clickChangeView}
></ha-icon-button>`;
}
if (!neighbor.thumbnail) {
return html``;
}
return html`<img
src="${neighbor.thumbnail}"
class="${classMap(classes)}"
title="${neighbor.title}"
@click=${clickChangeView}
/>`;
}
// Render the view for media.
protected async _renderViewer(): Promise<TemplateResult> {
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`<img
src="${neighbors.previous.thumbnail}"
class="frigate-media-controls previous"
title="${neighbors.previous.title}"
@click=${() => {
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`<ha-hls-player
@@ -833,23 +871,12 @@ export class FrigateCard extends LitElement {
});
}}
/>`}
${(this.config.controls?.nextprev ?? true) &&
neighbors?.next &&
neighbors.next.thumbnail
? html`<img
src="${neighbors.next.thumbnail}"
class="frigate-media-controls next"
title="${neighbors.next.title}"
@click=${() => {
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,
)}
`;
}
src/localize/languages/en.json
+5 -3
View File
@@ -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",
src/frigate-hass-card.scss → src/scss/card.scss
+18 -11
View File
@@ -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;
}
src/scss/common.scss
+16
View File
@@ -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);
}
src/frigate-hass-card-editor.scss → src/scss/editor.scss
View File
src/frigate-hass-card-menu.scss → src/scss/menu.scss
+2 -18
View File
@@ -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);
}
src/types.ts
+1 -1
View File
@@ -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.