Merge pull request #59 from dermotduffy/controls

Allow next/prev controls to be thumbnails, chevrons or off entirely

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` | `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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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-menu.scss → 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);
 }

src/types.ts

@@ -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(),