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

Merge pull request #59 from dermotduffy/controls

Browse Source 
Allow next/prev controls to be thumbnails, chevrons or off entirely
This commit is contained in:
Dermot Duffy
2021-09-06 16:07:14 -07:00
committed by GitHub
parent fb906a6aaf 7bd7731811
commit aecbbc27bd
9 changed files with 140 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files
README.md
+1
View File
@@ -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` | `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 -3
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') +
': ' +
src/frigate-hass-card.ts
+63 -32
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,21 +816,12 @@ export class FrigateCard extends LitElement {
const neighbors = this._getMediaNeighbors(parent, childIndex);
return html`
${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
@@ -831,21 +871,12 @@ export class FrigateCard extends LitElement {
});
}}
/>`}
${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
+6
View File
@@ -43,6 +43,12 @@
"snapshot": "Latest Snapshot",
"frigate_ui": "Frigate User Interface"
},
"control": {
"nextprev": "Media Next & Previous Controls",
"thumbnails": "Thumbnails",
"chevrons": "Chevrons",
"none": "None"
},
"menu_mode": {
"none": "No menu",
"hidden-top": "Hidden Top",
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;
@@ -36,21 +38,3 @@
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
+3
View File
@@ -74,6 +74,9 @@ export const frigateCardConfigSchema = z.object({
show: z.boolean().default(true),
icon: z.string().optional(),
}).array().optional(),
controls: z.object({
nextprev: z.enum(['thumbnails', 'chevrons', 'none']).default('thumbnails'),
}).optional(),
// Stock lovelace card config.
type: z.string(),