feat: Rename the card to advanced-camera-card (#1873)
Whilst the Frigate support in this card is the best among camera engines, the name incorrectly suggests that Frigate is a requirement. Instead, to broaden the appeal, change to more camera agnostic name. This does not suggest any change in priority, role or support for Frigate. This change is likely to be bug prone, due to the size of the rename -- the code contains 1500+ references to "Frigate" most of which make sense to rename, some which do not, all of which needed human assessment. - Closes #1298 BREAKING CHANGE: References to `frigate-card` in all kinds of configuration need to be updated to `advanced-camera-card`. An automated config upgrade should take care of the majority of usecases (click `Edit -> Upgrade -> Save`), though may not be perfect.
This commit is contained in:
@@ -22,8 +22,8 @@ export type EmblaCarouselPlugins = CreatePluginType<
|
||||
Record<string, unknown>
|
||||
>[];
|
||||
|
||||
@customElement('frigate-card-carousel')
|
||||
export class FrigateCardCarousel extends LitElement {
|
||||
@customElement('advanced-camera-card-carousel')
|
||||
export class AdvancedCameraCardCarousel extends LitElement {
|
||||
@property({ attribute: true, reflect: true })
|
||||
public direction: CarouselDirection = 'horizontal';
|
||||
|
||||
@@ -124,6 +124,6 @@ export class FrigateCardCarousel extends LitElement {
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
'frigate-card-carousel': FrigateCardCarousel;
|
||||
'advanced-camera-card-carousel': AdvancedCameraCardCarousel;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -4,15 +4,15 @@ import { createRef, ref, Ref } from 'lit/directives/ref.js';
|
||||
import { localize } from '../localize/localize';
|
||||
import datePickerStyle from '../scss/date-picker.scss';
|
||||
import { stopEventFromActivatingCardWideActions } from '../utils/action';
|
||||
import { dispatchFrigateCardEvent } from '../utils/basic';
|
||||
import { dispatchAdvancedCameraCardEvent } from '../utils/basic';
|
||||
import './icon';
|
||||
|
||||
export interface DatePickerEvent {
|
||||
date: Date | null;
|
||||
}
|
||||
|
||||
@customElement('frigate-card-date-picker')
|
||||
export class FrigateCardDatePicker extends LitElement {
|
||||
@customElement('advanced-camera-card-date-picker')
|
||||
export class AdvancedCameraCardDatePicker extends LitElement {
|
||||
@property({ attribute: false })
|
||||
public icon?: string;
|
||||
|
||||
@@ -32,7 +32,7 @@ export class FrigateCardDatePicker extends LitElement {
|
||||
const changed = () => {
|
||||
const value = this._refInput.value?.value;
|
||||
|
||||
dispatchFrigateCardEvent<DatePickerEvent>(this, 'date-picker:change', {
|
||||
dispatchAdvancedCameraCardEvent<DatePickerEvent>(this, 'date-picker:change', {
|
||||
date: value ? new Date(value) : null,
|
||||
});
|
||||
};
|
||||
@@ -45,7 +45,7 @@ export class FrigateCardDatePicker extends LitElement {
|
||||
@input=${() => changed()}
|
||||
@change=${() => changed()}
|
||||
/>
|
||||
<frigate-card-icon
|
||||
<advanced-camera-card-icon
|
||||
aria-label="${localize('timeline.select_date')}"
|
||||
title="${localize('timeline.select_date')}"
|
||||
.icon=${{ icon: this.icon ?? `mdi:calendar-search` }}
|
||||
@@ -54,7 +54,7 @@ export class FrigateCardDatePicker extends LitElement {
|
||||
this._refInput.value?.showPicker();
|
||||
}}
|
||||
>
|
||||
</frigate-card-icon>`;
|
||||
</advanced-camera-card-icon>`;
|
||||
}
|
||||
|
||||
static get styles(): CSSResultGroup {
|
||||
@@ -64,6 +64,6 @@ export class FrigateCardDatePicker extends LitElement {
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
'frigate-card-date-picker': FrigateCardDatePicker;
|
||||
'advanced-camera-card-date-picker': AdvancedCameraCardDatePicker;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -2,15 +2,15 @@ import { HomeAssistant } from '@dermotduffy/custom-card-helpers';
|
||||
import { CSSResultGroup, html, LitElement, TemplateResult, unsafeCSS } from 'lit';
|
||||
import { customElement, property } from 'lit/decorators.js';
|
||||
import { until } from 'lit/directives/until.js';
|
||||
import { RawFrigateCardConfig } from '../config/types';
|
||||
import { RawAdvancedCameraCardConfig } from '../config/types';
|
||||
import { localize } from '../localize/localize';
|
||||
import basicBlockStyle from '../scss/basic-block.scss';
|
||||
import { getDiagnostics } from '../utils/diagnostics';
|
||||
import { DeviceRegistryManager } from '../utils/ha/registry/device';
|
||||
import { renderMessage } from './message';
|
||||
|
||||
@customElement('frigate-card-diagnostics')
|
||||
export class FrigateCardDiagnostics extends LitElement {
|
||||
@customElement('advanced-camera-card-diagnostics')
|
||||
export class AdvancedCameraCardDiagnostics extends LitElement {
|
||||
// Not a reactive property to avoid multiple diagnostics fetches.
|
||||
public hass?: HomeAssistant;
|
||||
|
||||
@@ -18,7 +18,7 @@ export class FrigateCardDiagnostics extends LitElement {
|
||||
public deviceRegistryManager?: DeviceRegistryManager;
|
||||
|
||||
@property({ attribute: false })
|
||||
public rawConfig?: RawFrigateCardConfig;
|
||||
public rawConfig?: RawAdvancedCameraCardConfig;
|
||||
|
||||
protected async _renderDiagnostics(): Promise<TemplateResult> {
|
||||
const diagnostics = await getDiagnostics(
|
||||
@@ -52,6 +52,6 @@ export class FrigateCardDiagnostics extends LitElement {
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
'frigate-card-diagnostics': FrigateCardDiagnostics;
|
||||
'advanced-camera-card-diagnostics': AdvancedCameraCardDiagnostics;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -21,8 +21,8 @@ export interface DrawerIcons {
|
||||
closed?: string;
|
||||
}
|
||||
|
||||
@customElement('frigate-card-drawer')
|
||||
export class FrigateCardDrawer extends LitElement {
|
||||
@customElement('advanced-camera-card-drawer')
|
||||
export class AdvancedCameraCardDrawer extends LitElement {
|
||||
@property({ attribute: true, reflect: true })
|
||||
public location: 'left' | 'right' = 'left';
|
||||
|
||||
@@ -122,7 +122,7 @@ export class FrigateCardDrawer extends LitElement {
|
||||
this.open = !this.open;
|
||||
}}
|
||||
>
|
||||
<frigate-card-icon
|
||||
<advanced-camera-card-icon
|
||||
class="control"
|
||||
.icon="${{
|
||||
icon: this.open
|
||||
@@ -133,13 +133,13 @@ export class FrigateCardDrawer extends LitElement {
|
||||
// Only open the drawer on mousenter when the device
|
||||
// supports hover (otherwise iOS may end up passing on
|
||||
// subsequent click events to a different element, see:
|
||||
// https://github.com/dermotduffy/frigate-hass-card/issues/801
|
||||
// https://github.com/dermotduffy/advanced-camera-card/issues/801
|
||||
if (this._isHoverableDevice && !this.open) {
|
||||
this.open = true;
|
||||
}
|
||||
}}
|
||||
>
|
||||
</frigate-card-icon>
|
||||
</advanced-camera-card-icon>
|
||||
</div>
|
||||
`
|
||||
: ''}
|
||||
@@ -155,7 +155,7 @@ export class FrigateCardDrawer extends LitElement {
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
'frigate-card-drawer': FrigateCardDrawer;
|
||||
'advanced-camera-card-drawer': AdvancedCameraCardDrawer;
|
||||
'side-drawer': SideDrawer;
|
||||
}
|
||||
}
|
||||
|
||||
+80
-66
@@ -12,9 +12,9 @@ import {
|
||||
ConditionsManagerEpoch,
|
||||
evaluateConditionViaEvent,
|
||||
} from '../card-controller/conditions-manager.js';
|
||||
import { dispatchFrigateCardErrorEvent } from '../components-lib/message/dispatch.js';
|
||||
import { dispatchAdvancedCameraCardErrorEvent } from '../components-lib/message/dispatch.js';
|
||||
import {
|
||||
FrigateConditional,
|
||||
AdvancedCameraCardConditional,
|
||||
MenuIcon,
|
||||
MenuItem,
|
||||
MenuStateIcon,
|
||||
@@ -28,8 +28,8 @@ import {
|
||||
} from '../config/types.js';
|
||||
import { localize } from '../localize/localize.js';
|
||||
import elementsStyle from '../scss/elements.scss';
|
||||
import { FrigateCardError } from '../types.js';
|
||||
import { dispatchFrigateCardEvent, errorToConsole } from '../utils/basic.js';
|
||||
import { AdvancedCameraCardError } from '../types.js';
|
||||
import { dispatchAdvancedCameraCardEvent, errorToConsole } from '../utils/basic.js';
|
||||
|
||||
/* A note on picture element rendering:
|
||||
*
|
||||
@@ -52,7 +52,7 @@ import { dispatchFrigateCardEvent, errorToConsole } from '../utils/basic.js';
|
||||
* correctly. These custom elements 'render' by firing events that are caught by
|
||||
* the card to call for inclusion/exclusion of the menu icon in question.
|
||||
*
|
||||
* One major complexity here is that the top <frigate-card-elements> element
|
||||
* One major complexity here is that the top <advanced-camera-card-elements> element
|
||||
* will not necessarily know when a menu icon is no longer rendered because of a
|
||||
* conditional that no-longer evaluates to true. As such, it cannot know when to
|
||||
* signal for the menu icon removal. Furthermore, the menu icon element itself
|
||||
@@ -60,7 +60,7 @@ import { dispatchFrigateCardEvent, errorToConsole } from '../utils/basic.js';
|
||||
* so normal event propagation at that point will not work. Instead, we must
|
||||
* catch the menu icon _addition_ and register the eventhandler for the removal
|
||||
* directly on the child (which will have no parent at time of calling). That
|
||||
* then triggers <frigate-card-elements> to re-dispatch a removal event for
|
||||
* then triggers <advanced-camera-card-elements> to re-dispatch a removal event for
|
||||
* upper layers to handle correctly.
|
||||
*/
|
||||
|
||||
@@ -71,8 +71,8 @@ interface HuiConditionalElement extends HTMLElement {
|
||||
|
||||
// A small wrapper around a HA conditional element used to render a set of
|
||||
// picture elements.
|
||||
@customElement('frigate-card-elements-core')
|
||||
export class FrigateCardElementsCore extends LitElement {
|
||||
@customElement('advanced-camera-card-elements-core')
|
||||
export class AdvancedCameraCardElementsCore extends LitElement {
|
||||
@property({ attribute: false })
|
||||
public elements?: PictureElements;
|
||||
|
||||
@@ -116,7 +116,7 @@ export class FrigateCardElementsCore extends LitElement {
|
||||
element.setConfig(config);
|
||||
} catch (e) {
|
||||
errorToConsole(e as Error, console.error);
|
||||
throw new FrigateCardError(localize('error.invalid_elements_config'));
|
||||
throw new AdvancedCameraCardError(localize('error.invalid_elements_config'));
|
||||
}
|
||||
return element;
|
||||
}
|
||||
@@ -133,7 +133,7 @@ export class FrigateCardElementsCore extends LitElement {
|
||||
this._root = this._createRoot();
|
||||
}
|
||||
} catch (e) {
|
||||
return dispatchFrigateCardErrorEvent(this, e as FrigateCardError);
|
||||
return dispatchAdvancedCameraCardErrorEvent(this, e as AdvancedCameraCardError);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -148,17 +148,17 @@ export class FrigateCardElementsCore extends LitElement {
|
||||
protected updated(): void {
|
||||
if (this.hass && this._root) {
|
||||
// Always update hass. It is used as a trigger to re-evaluate conditions
|
||||
// down the chain, see the note on FrigateCardElementsConditional.
|
||||
// down the chain, see the note on AdvancedCameraCardElementsConditional.
|
||||
this._root.hass = this.hass;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* The master <frigate-card-elements> class, handles event listeners and styles.
|
||||
* The master <advanced-camera-card-elements> class, handles event listeners and styles.
|
||||
*/
|
||||
@customElement('frigate-card-elements')
|
||||
export class FrigateCardElements extends LitElement {
|
||||
@customElement('advanced-camera-card-elements')
|
||||
export class AdvancedCameraCardElements extends LitElement {
|
||||
@property({ attribute: false })
|
||||
public hass?: HomeAssistant;
|
||||
|
||||
@@ -181,13 +181,17 @@ export class FrigateCardElements extends LitElement {
|
||||
protected _menuRemoveHandler = (ev: Event): void => {
|
||||
// Re-dispatch event from this element (instead of the disconnected one, as
|
||||
// there is no parent of the disconnected element).
|
||||
dispatchFrigateCardEvent<MenuItem>(this, 'menu:remove', (ev as CustomEvent).detail);
|
||||
dispatchAdvancedCameraCardEvent<MenuItem>(
|
||||
this,
|
||||
'menu:remove',
|
||||
(ev as CustomEvent).detail,
|
||||
);
|
||||
};
|
||||
|
||||
protected _statusBarRemoveHandler = (ev: Event): void => {
|
||||
// Re-dispatch event from this element (instead of the disconnected one, as
|
||||
// there is no parent of the disconnected element).
|
||||
dispatchFrigateCardEvent<StatusBarItem>(
|
||||
dispatchAdvancedCameraCardEvent<StatusBarItem>(
|
||||
this,
|
||||
'status-bar:remove',
|
||||
(ev as CustomEvent).detail,
|
||||
@@ -200,7 +204,11 @@ export class FrigateCardElements extends LitElement {
|
||||
if (!path.length) {
|
||||
return;
|
||||
}
|
||||
this._addHandler(path[0], 'frigate-card:menu:remove', this._menuRemoveHandler);
|
||||
this._addHandler(
|
||||
path[0],
|
||||
'advanced-camera-card:menu:remove',
|
||||
this._menuRemoveHandler,
|
||||
);
|
||||
};
|
||||
|
||||
protected _statusBarAddHandler = (ev: Event): void => {
|
||||
@@ -211,7 +219,7 @@ export class FrigateCardElements extends LitElement {
|
||||
}
|
||||
this._addHandler(
|
||||
path[0],
|
||||
'frigate-card:status-bar:add',
|
||||
'advanced-camera-card:status-bar:add',
|
||||
this._statusBarRemoveHandler,
|
||||
);
|
||||
};
|
||||
@@ -221,23 +229,29 @@ export class FrigateCardElements extends LitElement {
|
||||
|
||||
// Catch icons being added to the menu or status-bar (so their removal can
|
||||
// be subsequently handled).
|
||||
this.addEventListener('frigate-card:menu:add', this._menuAddHandler);
|
||||
this.addEventListener('frigate-card:status-bar:add', this._statusBarAddHandler);
|
||||
this.addEventListener('advanced-camera-card:menu:add', this._menuAddHandler);
|
||||
this.addEventListener(
|
||||
'advanced-camera-card:status-bar:add',
|
||||
this._statusBarAddHandler,
|
||||
);
|
||||
}
|
||||
|
||||
disconnectedCallback(): void {
|
||||
this.removeEventListener('frigate-card:menu:add', this._menuAddHandler);
|
||||
this.addEventListener('frigate-card:status-bar:add', this._statusBarAddHandler);
|
||||
this.removeEventListener('advanced-camera-card:menu:add', this._menuAddHandler);
|
||||
this.addEventListener(
|
||||
'advanced-camera-card:status-bar:add',
|
||||
this._statusBarAddHandler,
|
||||
);
|
||||
super.disconnectedCallback();
|
||||
}
|
||||
|
||||
protected render(): TemplateResult {
|
||||
return html`<frigate-card-elements-core
|
||||
return html`<advanced-camera-card-elements-core
|
||||
.hass=${this.hass}
|
||||
.conditionsManagerEpoch=${this.conditionsManagerEpoch}
|
||||
.elements=${this.elements}
|
||||
>
|
||||
</frigate-card-elements-core>`;
|
||||
</advanced-camera-card-elements-core>`;
|
||||
}
|
||||
|
||||
static get styles(): CSSResultGroup {
|
||||
@@ -246,19 +260,19 @@ export class FrigateCardElements extends LitElement {
|
||||
}
|
||||
|
||||
/**
|
||||
* An element that can render others based on Frigate state (e.g. only show
|
||||
* overlays in particular views). This is the Frigate Card equivalent to the HA
|
||||
* conditional card.
|
||||
* An element that can render others based on card state (e.g. only show
|
||||
* overlays in particular views). This is the Advanced Camera Card equivalent to
|
||||
* the HA conditional card.
|
||||
*/
|
||||
@customElement('frigate-card-conditional')
|
||||
export class FrigateCardElementsConditional extends LitElement {
|
||||
protected _config?: FrigateConditional;
|
||||
@customElement('advanced-camera-card-conditional')
|
||||
export class AdvancedCameraCardElementsConditional extends LitElement {
|
||||
protected _config?: AdvancedCameraCardConditional;
|
||||
|
||||
// A note on hass as an update mechanism:
|
||||
//
|
||||
// Every set of hass is treated as a reason to re-evaluate. Given that this
|
||||
// node may be buried down the DOM (as a descendent of non-Frigate card
|
||||
// elements), the hass object is used as the (only) trigger for condition
|
||||
// node may be buried down the DOM (as a descendent of non-Advanced Camera
|
||||
// Card elements), the hass object is used as the (only) trigger for condition
|
||||
// re-fetch even if hass itself has not changed.
|
||||
@property({ attribute: false, hasChanged: () => true })
|
||||
public hass?: HomeAssistant;
|
||||
@@ -267,7 +281,7 @@ export class FrigateCardElementsConditional extends LitElement {
|
||||
* Set the card configuration.
|
||||
* @param config The card configuration.
|
||||
*/
|
||||
public setConfig(config: FrigateConditional): void {
|
||||
public setConfig(config: AdvancedCameraCardConditional): void {
|
||||
this._config = config;
|
||||
}
|
||||
|
||||
@@ -296,17 +310,17 @@ export class FrigateCardElementsConditional extends LitElement {
|
||||
*/
|
||||
protected render(): TemplateResult | void {
|
||||
if (evaluateConditionViaEvent(this, this._config?.conditions)) {
|
||||
return html` <frigate-card-elements-core
|
||||
return html` <advanced-camera-card-elements-core
|
||||
.hass=${this.hass}
|
||||
.elements=${this._config?.elements}
|
||||
>
|
||||
</frigate-card-elements-core>`;
|
||||
</advanced-camera-card-elements-core>`;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// A base class for rendering menu icons / menu state icons.
|
||||
export class FrigateCardElementsBaseItem<ConfigType> extends LitElement {
|
||||
export class AdvancedCameraCardElementsBaseItem<ConfigType> extends LitElement {
|
||||
protected _eventCategory: string;
|
||||
|
||||
constructor(eventCategory: string) {
|
||||
@@ -324,7 +338,7 @@ export class FrigateCardElementsBaseItem<ConfigType> extends LitElement {
|
||||
connectedCallback(): void {
|
||||
super.connectedCallback();
|
||||
if (this._config) {
|
||||
dispatchFrigateCardEvent<ConfigType>(
|
||||
dispatchAdvancedCameraCardEvent<ConfigType>(
|
||||
this,
|
||||
`${this._eventCategory}:add`,
|
||||
this._config,
|
||||
@@ -334,7 +348,7 @@ export class FrigateCardElementsBaseItem<ConfigType> extends LitElement {
|
||||
|
||||
disconnectedCallback(): void {
|
||||
if (this._config) {
|
||||
dispatchFrigateCardEvent<ConfigType>(
|
||||
dispatchAdvancedCameraCardEvent<ConfigType>(
|
||||
this,
|
||||
`${this._eventCategory}:remove`,
|
||||
this._config,
|
||||
@@ -344,56 +358,56 @@ export class FrigateCardElementsBaseItem<ConfigType> extends LitElement {
|
||||
}
|
||||
}
|
||||
|
||||
export class FrigateCardElementsBaseMenuItem<
|
||||
export class AdvancedCameraCardElementsBaseMenuItem<
|
||||
ConfigType,
|
||||
> extends FrigateCardElementsBaseItem<ConfigType> {
|
||||
> extends AdvancedCameraCardElementsBaseItem<ConfigType> {
|
||||
constructor() {
|
||||
super('menu');
|
||||
}
|
||||
}
|
||||
|
||||
@customElement('frigate-card-menu-icon')
|
||||
export class FrigateCardElementsMenuIcon extends FrigateCardElementsBaseMenuItem<MenuIcon> {}
|
||||
@customElement('advanced-camera-card-menu-icon')
|
||||
export class AdvancedCameraCardElementsMenuIcon extends AdvancedCameraCardElementsBaseMenuItem<MenuIcon> {}
|
||||
|
||||
@customElement('frigate-card-menu-state-icon')
|
||||
export class FrigateCardElementsMenuStateIcon extends FrigateCardElementsBaseMenuItem<MenuStateIcon> {}
|
||||
@customElement('advanced-camera-card-menu-state-icon')
|
||||
export class AdvancedCameraCardElementsMenuStateIcon extends AdvancedCameraCardElementsBaseMenuItem<MenuStateIcon> {}
|
||||
|
||||
@customElement('frigate-card-menu-submenu')
|
||||
export class FrigateCardElementsMenuSubmenu extends FrigateCardElementsBaseMenuItem<MenuSubmenu> {}
|
||||
@customElement('advanced-camera-card-menu-submenu')
|
||||
export class AdvancedCameraCardElementsMenuSubmenu extends AdvancedCameraCardElementsBaseMenuItem<MenuSubmenu> {}
|
||||
|
||||
@customElement('frigate-card-menu-submenu-select')
|
||||
export class FrigateCardElementsMenuSubmenuSelect extends FrigateCardElementsBaseMenuItem<MenuSubmenuSelect> {}
|
||||
@customElement('advanced-camera-card-menu-submenu-select')
|
||||
export class AdvancedCameraCardElementsMenuSubmenuSelect extends AdvancedCameraCardElementsBaseMenuItem<MenuSubmenuSelect> {}
|
||||
|
||||
export class FrigateCardElementsBaseStatusBarItem<
|
||||
export class AdvancedCameraCardElementsBaseStatusBarItem<
|
||||
ConfigType,
|
||||
> extends FrigateCardElementsBaseItem<ConfigType> {
|
||||
> extends AdvancedCameraCardElementsBaseItem<ConfigType> {
|
||||
constructor() {
|
||||
super('status-bar');
|
||||
}
|
||||
}
|
||||
|
||||
@customElement('frigate-card-status-bar-icon')
|
||||
export class FrigateCardElementsStatusBarIcon extends FrigateCardElementsBaseStatusBarItem<StatusBarIcon> {}
|
||||
@customElement('advanced-camera-card-status-bar-icon')
|
||||
export class AdvancedCameraCardElementsStatusBarIcon extends AdvancedCameraCardElementsBaseStatusBarItem<StatusBarIcon> {}
|
||||
|
||||
@customElement('frigate-card-status-bar-image')
|
||||
export class FrigateCardElementsStatusBarImage extends FrigateCardElementsBaseStatusBarItem<StatusBarImage> {}
|
||||
@customElement('advanced-camera-card-status-bar-image')
|
||||
export class AdvancedCameraCardElementsStatusBarImage extends AdvancedCameraCardElementsBaseStatusBarItem<StatusBarImage> {}
|
||||
|
||||
@customElement('frigate-card-status-bar-string')
|
||||
export class FrigateCardElementsStatusBarString extends FrigateCardElementsBaseStatusBarItem<StatusBarString> {}
|
||||
@customElement('advanced-camera-card-status-bar-string')
|
||||
export class AdvancedCameraCardElementsStatusBarString extends AdvancedCameraCardElementsBaseStatusBarItem<StatusBarString> {}
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
'frigate-card-conditional': FrigateCardElementsConditional;
|
||||
'frigate-card-elements': FrigateCardElements;
|
||||
'frigate-card-elements-core': FrigateCardElementsCore;
|
||||
'advanced-camera-card-conditional': AdvancedCameraCardElementsConditional;
|
||||
'advanced-camera-card-elements': AdvancedCameraCardElements;
|
||||
'advanced-camera-card-elements-core': AdvancedCameraCardElementsCore;
|
||||
|
||||
'frigate-card-menu-icon': FrigateCardElementsMenuIcon;
|
||||
'frigate-card-menu-state-icon': FrigateCardElementsMenuStateIcon;
|
||||
'frigate-card-menu-submenu': FrigateCardElementsMenuSubmenu;
|
||||
'frigate-card-menu-submenu-select': FrigateCardElementsMenuSubmenuSelect;
|
||||
'advanced-camera-card-menu-icon': AdvancedCameraCardElementsMenuIcon;
|
||||
'advanced-camera-card-menu-state-icon': AdvancedCameraCardElementsMenuStateIcon;
|
||||
'advanced-camera-card-menu-submenu': AdvancedCameraCardElementsMenuSubmenu;
|
||||
'advanced-camera-card-menu-submenu-select': AdvancedCameraCardElementsMenuSubmenuSelect;
|
||||
|
||||
'frigate-card-status-bar-icon': FrigateCardElementsStatusBarIcon;
|
||||
'frigate-card-status-bar-image': FrigateCardElementsStatusBarImage;
|
||||
'frigate-card-status-bar-string': FrigateCardElementsStatusBarString;
|
||||
'advanced-camera-card-status-bar-icon': AdvancedCameraCardElementsStatusBarIcon;
|
||||
'advanced-camera-card-status-bar-image': AdvancedCameraCardElementsStatusBarImage;
|
||||
'advanced-camera-card-status-bar-string': AdvancedCameraCardElementsStatusBarString;
|
||||
}
|
||||
}
|
||||
|
||||
+19
-23
@@ -13,11 +13,7 @@ import throttle from 'lodash-es/throttle';
|
||||
import { CameraManager, ExtendedMediaQueryResult } from '../camera-manager/manager.js';
|
||||
import { EventQuery, MediaQuery, RecordingQuery } from '../camera-manager/types';
|
||||
import { ViewManagerEpoch } from '../card-controller/view/types.js';
|
||||
import {
|
||||
CardWideConfig,
|
||||
frigateCardConfigDefaults,
|
||||
GalleryConfig,
|
||||
} from '../config/types';
|
||||
import { CardWideConfig, configDefaults, GalleryConfig } from '../config/types';
|
||||
import { localize } from '../localize/localize';
|
||||
import galleryCoreStyle from '../scss/gallery-core.scss';
|
||||
import galleryStyle from '../scss/gallery.scss';
|
||||
@@ -45,8 +41,8 @@ const GALLERY_MEDIA_FILTER_MENU_ICONS = {
|
||||
|
||||
const MIN_GALLERY_EXTENSION_SECONDS = 0.5;
|
||||
|
||||
@customElement('frigate-card-gallery')
|
||||
export class FrigateCardGallery extends LitElement {
|
||||
@customElement('advanced-camera-card-gallery')
|
||||
export class AdvancedCameraCardGallery extends LitElement {
|
||||
@property({ attribute: false })
|
||||
public hass?: ExtendedHomeAssistant;
|
||||
|
||||
@@ -78,7 +74,7 @@ export class FrigateCardGallery extends LitElement {
|
||||
}
|
||||
|
||||
return html`
|
||||
<frigate-card-surround-basic
|
||||
<advanced-camera-card-surround-basic
|
||||
.drawerIcons=${{
|
||||
...(this.galleryConfig &&
|
||||
this.galleryConfig.controls.filter.mode !== 'none' && {
|
||||
@@ -87,24 +83,24 @@ export class FrigateCardGallery extends LitElement {
|
||||
}}
|
||||
>
|
||||
${this.galleryConfig && this.galleryConfig.controls.filter.mode !== 'none'
|
||||
? html` <frigate-card-media-filter
|
||||
? html` <advanced-camera-card-media-filter
|
||||
.hass=${this.hass}
|
||||
.cameraManager=${this.cameraManager}
|
||||
.viewManagerEpoch=${this.viewManagerEpoch}
|
||||
.cardWideConfig=${this.cardWideConfig}
|
||||
slot=${this.galleryConfig.controls.filter.mode}
|
||||
>
|
||||
</frigate-card-media-filter>`
|
||||
</advanced-camera-card-media-filter>`
|
||||
: ''}
|
||||
<frigate-card-gallery-core
|
||||
<advanced-camera-card-gallery-core
|
||||
.hass=${this.hass}
|
||||
.viewManagerEpoch=${this.viewManagerEpoch}
|
||||
.galleryConfig=${this.galleryConfig}
|
||||
.cameraManager=${this.cameraManager}
|
||||
.cardWideConfig=${this.cardWideConfig}
|
||||
>
|
||||
</frigate-card-gallery-core>
|
||||
</frigate-card-surround-basic>
|
||||
</advanced-camera-card-gallery-core>
|
||||
</advanced-camera-card-surround-basic>
|
||||
`;
|
||||
}
|
||||
|
||||
@@ -113,8 +109,8 @@ export class FrigateCardGallery extends LitElement {
|
||||
}
|
||||
}
|
||||
|
||||
@customElement('frigate-card-gallery-core')
|
||||
export class FrigateCardGalleryCore extends LitElement {
|
||||
@customElement('advanced-camera-card-gallery-core')
|
||||
export class AdvancedCameraCardGalleryCore extends LitElement {
|
||||
@property({ attribute: false })
|
||||
public hass?: ExtendedHomeAssistant;
|
||||
|
||||
@@ -266,12 +262,12 @@ export class FrigateCardGalleryCore extends LitElement {
|
||||
protected _setColumnCount(): void {
|
||||
const thumbnailSize =
|
||||
this.galleryConfig?.controls.thumbnails.size ??
|
||||
frigateCardConfigDefaults.media_gallery.controls.thumbnails.size;
|
||||
configDefaults.media_gallery.controls.thumbnails.size;
|
||||
const columns = this.galleryConfig?.controls.thumbnails.show_details
|
||||
? Math.max(1, Math.floor(this.clientWidth / THUMBNAIL_DETAILS_WIDTH_MIN))
|
||||
: Math.max(1, Math.ceil(this.clientWidth / thumbnailSize));
|
||||
|
||||
this.style.setProperty('--frigate-card-gallery-columns', String(columns));
|
||||
this.style.setProperty('--advanced-camera-card-gallery-columns', String(columns));
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -361,7 +357,7 @@ export class FrigateCardGalleryCore extends LitElement {
|
||||
this._setColumnCount();
|
||||
if (this.galleryConfig?.controls.thumbnails.size) {
|
||||
this.style.setProperty(
|
||||
'--frigate-card-thumbnail-size',
|
||||
'--advanced-camera-card-thumbnail-size',
|
||||
`${this.galleryConfig.controls.thumbnails.size}px`,
|
||||
);
|
||||
}
|
||||
@@ -424,7 +420,7 @@ export class FrigateCardGalleryCore extends LitElement {
|
||||
: ''}
|
||||
${this._media.map(
|
||||
(media, index) =>
|
||||
html`<frigate-card-thumbnail
|
||||
html`<advanced-camera-card-thumbnail
|
||||
${media === selected ? ref(this._refSelected) : ''}
|
||||
class=${classMap({
|
||||
selected: media === selected,
|
||||
@@ -456,7 +452,7 @@ export class FrigateCardGalleryCore extends LitElement {
|
||||
stopEventFromActivatingCardWideActions(ev);
|
||||
}}
|
||||
>
|
||||
</frigate-card-thumbnail>`,
|
||||
</advanced-camera-card-thumbnail>`,
|
||||
)}
|
||||
${this._showLoaderBottom
|
||||
? html`${renderProgressIndicator({
|
||||
@@ -479,7 +475,7 @@ export class FrigateCardGalleryCore extends LitElement {
|
||||
// As a special case, if the view has changed and did not previously exist
|
||||
// (i.e. first setting of it), we intentionally scroll the gallery to the
|
||||
// selected element in that view (if any).
|
||||
// See: https://github.com/dermotduffy/frigate-hass-card/issues/885
|
||||
// See: https://github.com/dermotduffy/advanced-camera-card/issues/885
|
||||
if (
|
||||
// If this update cycle updated the view ...
|
||||
changedProps.has('viewManagerEpoch') &&
|
||||
@@ -503,7 +499,7 @@ export class FrigateCardGalleryCore extends LitElement {
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
'frigate-card-gallery-core': FrigateCardGalleryCore;
|
||||
'frigate-card-gallery': FrigateCardGallery;
|
||||
'advanced-camera-card-gallery-core': AdvancedCameraCardGalleryCore;
|
||||
'advanced-camera-card-gallery': AdvancedCameraCardGallery;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -12,8 +12,8 @@ import { IconController } from '../components-lib/icon-controller';
|
||||
import iconStyle from '../scss/icon.scss';
|
||||
import { Icon } from '../types';
|
||||
|
||||
@customElement('frigate-card-icon')
|
||||
export class FrigateCardIcon extends LitElement {
|
||||
@customElement('advanced-camera-card-icon')
|
||||
export class AdvancedCameraCardIcon extends LitElement {
|
||||
@property({ attribute: false })
|
||||
public hass?: HomeAssistant;
|
||||
|
||||
@@ -83,6 +83,6 @@ export class FrigateCardIcon extends LitElement {
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
'frigate-card-icon': FrigateCardIcon;
|
||||
'advanced-camera-card-icon': AdvancedCameraCardIcon;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -16,11 +16,11 @@ import { CameraManager } from '../camera-manager/manager.js';
|
||||
import { getCameraEntityFromConfig } from '../camera-manager/utils/camera-entity-from-config.js';
|
||||
import { CachedValueController } from '../components-lib/cached-value-controller.js';
|
||||
import { CameraConfig, ImageMode, ImageViewConfig } from '../config/types.js';
|
||||
import defaultImage from '../images/frigate-bird-in-sky.jpg';
|
||||
import defaultImage from '../images/iris-screensaver.jpg';
|
||||
import { localize } from '../localize/localize.js';
|
||||
import imageStyle from '../scss/image.scss';
|
||||
import {
|
||||
FrigateCardMediaPlayer,
|
||||
AdvancedCameraCardMediaPlayer,
|
||||
FullscreenElement,
|
||||
MediaLoadedInfo,
|
||||
Message,
|
||||
@@ -60,8 +60,11 @@ export const resolveImageMode = (options?: {
|
||||
return 'screensaver';
|
||||
};
|
||||
|
||||
@customElement('frigate-card-image-base')
|
||||
export class FrigateCardImageBase extends LitElement implements FrigateCardMediaPlayer {
|
||||
@customElement('advanced-camera-card-image-base')
|
||||
export class AdvancedCameraCardImageBase
|
||||
extends LitElement
|
||||
implements AdvancedCameraCardMediaPlayer
|
||||
{
|
||||
@property({ attribute: false })
|
||||
public hass?: HomeAssistant;
|
||||
|
||||
@@ -215,7 +218,7 @@ export class FrigateCardImageBase extends LitElement implements FrigateCardMedia
|
||||
* (detects old or disconnected states). Using an old state is problematic as
|
||||
* it runs the risk that the JS has an old access token for the camera, and
|
||||
* that results in a notification on the HA UI about a failed login. See:
|
||||
* https://github.com/dermotduffy/frigate-hass-card/issues/398 .
|
||||
* https://github.com/dermotduffy/advanced-camera-card/issues/398 .
|
||||
* @param entity The entity.
|
||||
* @returns The state or null if not acceptable.
|
||||
*/
|
||||
@@ -263,7 +266,7 @@ export class FrigateCardImageBase extends LitElement implements FrigateCardMedia
|
||||
// image may be using an old-expired token and re-use prior to
|
||||
// re-generation of a new URL would generate an unauthorized request
|
||||
// (401), see:
|
||||
// https://github.com/dermotduffy/frigate-hass-card/issues/398
|
||||
// https://github.com/dermotduffy/advanced-camera-card/issues/398
|
||||
this._cachedValueController?.stopTimer();
|
||||
this._cachedValueController?.clearValue();
|
||||
this._forceSafeImage();
|
||||
@@ -409,6 +412,6 @@ export class FrigateCardImageBase extends LitElement implements FrigateCardMedia
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
'frigate-card-image-base': FrigateCardImageBase;
|
||||
'advanced-camera-card-image-base': AdvancedCameraCardImageBase;
|
||||
}
|
||||
}
|
||||
|
||||
+13
-10
@@ -17,15 +17,18 @@ import { handleZoomSettingsObservedEvent } from '../components-lib/zoom/zoom-vie
|
||||
import { CameraConfig, ImageViewConfig } from '../config/types';
|
||||
import { IMAGE_VIEW_ZOOM_TARGET_SENTINEL } from '../const';
|
||||
import basicBlockStyle from '../scss/basic-block.scss';
|
||||
import { FrigateCardMediaPlayer, FullscreenElement } from '../types.js';
|
||||
import { AdvancedCameraCardMediaPlayer, FullscreenElement } from '../types.js';
|
||||
import { aspectRatioToString } from '../utils/basic';
|
||||
import { updateElementStyleFromMediaLayoutConfig } from '../utils/media-layout.js';
|
||||
import './image-base';
|
||||
import { resolveImageMode } from './image-base';
|
||||
import './zoomer.js';
|
||||
|
||||
@customElement('frigate-card-image')
|
||||
export class FrigateCardImage extends LitElement implements FrigateCardMediaPlayer {
|
||||
@customElement('advanced-camera-card-image')
|
||||
export class AdvancedCameraCardImage
|
||||
extends LitElement
|
||||
implements AdvancedCameraCardMediaPlayer
|
||||
{
|
||||
@property({ attribute: false })
|
||||
public hass?: HomeAssistant;
|
||||
|
||||
@@ -41,7 +44,7 @@ export class FrigateCardImage extends LitElement implements FrigateCardMediaPlay
|
||||
@property({ attribute: false })
|
||||
public imageConfig?: ImageViewConfig;
|
||||
|
||||
protected _refImage: Ref<Element & FrigateCardMediaPlayer> = createRef();
|
||||
protected _refImage: Ref<Element & AdvancedCameraCardMediaPlayer> = createRef();
|
||||
|
||||
public async play(): Promise<void> {
|
||||
await this._refImage.value?.play();
|
||||
@@ -114,7 +117,7 @@ export class FrigateCardImage extends LitElement implements FrigateCardMediaPlay
|
||||
});
|
||||
|
||||
return this.imageConfig?.zoomable
|
||||
? html` <frigate-card-zoomer
|
||||
? html` <advanced-camera-card-zoomer
|
||||
.defaultSettings=${guard(
|
||||
[this.imageConfig, this.cameraConfig?.dimensions?.layout],
|
||||
() =>
|
||||
@@ -126,7 +129,7 @@ export class FrigateCardImage extends LitElement implements FrigateCardMediaPlay
|
||||
: undefined,
|
||||
)}
|
||||
.settings=${view?.context?.zoom?.[zoomTarget]?.requested}
|
||||
@frigate-card:zoom:change=${(ev: CustomEvent<ZoomSettingsObserved>) =>
|
||||
@advanced-camera-card:zoom:change=${(ev: CustomEvent<ZoomSettingsObserved>) =>
|
||||
handleZoomSettingsObservedEvent(
|
||||
ev,
|
||||
this.viewManagerEpoch?.manager,
|
||||
@@ -134,7 +137,7 @@ export class FrigateCardImage extends LitElement implements FrigateCardMediaPlay
|
||||
)}
|
||||
>
|
||||
${template}
|
||||
</frigate-card-zoomer>`
|
||||
</advanced-camera-card-zoomer>`
|
||||
: template;
|
||||
}
|
||||
|
||||
@@ -144,14 +147,14 @@ export class FrigateCardImage extends LitElement implements FrigateCardMediaPlay
|
||||
}
|
||||
|
||||
return this._useZoomIfRequired(html`
|
||||
<frigate-card-image-base
|
||||
<advanced-camera-card-image-base
|
||||
${ref(this._refImage)}
|
||||
.hass=${this.hass}
|
||||
.view=${this.viewManagerEpoch?.manager.getView()}
|
||||
.imageConfig=${this.imageConfig}
|
||||
.cameraConfig=${this.cameraConfig}
|
||||
>
|
||||
</frigate-card-image-base>
|
||||
</advanced-camera-card-image-base>
|
||||
`);
|
||||
}
|
||||
|
||||
@@ -162,6 +165,6 @@ export class FrigateCardImage extends LitElement implements FrigateCardMediaPlay
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
'frigate-card-image': FrigateCardImage;
|
||||
'advanced-camera-card-image': AdvancedCameraCardImage;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -14,8 +14,8 @@ import keyAssignerStyle from '../scss/key-assigner.scss';
|
||||
import { localize } from '../localize/localize';
|
||||
import './icon';
|
||||
|
||||
@customElement('frigate-card-key-assigner')
|
||||
export class FrigateCardKeyAssigner extends LitElement {
|
||||
@customElement('advanced-camera-card-key-assigner')
|
||||
export class AdvancedCameraCardKeyAssigner extends LitElement {
|
||||
@property({ attribute: false })
|
||||
public label?: string;
|
||||
|
||||
@@ -49,7 +49,7 @@ export class FrigateCardKeyAssigner extends LitElement {
|
||||
this._controller.toggleAssigning();
|
||||
}}
|
||||
>
|
||||
<frigate-card-icon .icon=${{ icon: 'mdi:keyboard-settings' }}></frigate-card-icon>
|
||||
<advanced-camera-card-icon .icon=${{ icon: 'mdi:keyboard-settings' }}></advanced-camera-card-icon>
|
||||
<span class="${classMap({
|
||||
dotdotdot: this._controller.isAssigning(),
|
||||
})}">
|
||||
@@ -63,9 +63,9 @@ export class FrigateCardKeyAssigner extends LitElement {
|
||||
this._controller.setValue(null);
|
||||
}}
|
||||
>
|
||||
<frigate-card-icon
|
||||
<advanced-camera-card-icon
|
||||
.icon=${{ icon: 'mdi:keyboard-off' }}
|
||||
></frigate-card-icon>
|
||||
></advanced-camera-card-icon>
|
||||
<span> ${localize('key_assigner.unassign')} </span>
|
||||
</ha-button>`
|
||||
: ''
|
||||
@@ -87,6 +87,6 @@ export class FrigateCardKeyAssigner extends LitElement {
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
'frigate-card-key-assigner': FrigateCardKeyAssigner;
|
||||
'advanced-camera-card-key-assigner': AdvancedCameraCardKeyAssigner;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -18,13 +18,13 @@ import {
|
||||
import { MicrophoneState } from '../../card-controller/types.js';
|
||||
import { ViewManagerEpoch } from '../../card-controller/view/types.js';
|
||||
import { MediaActionsController } from '../../components-lib/media-actions-controller.js';
|
||||
import { dispatchFrigateCardErrorEvent } from '../../components-lib/message/dispatch.js';
|
||||
import { dispatchAdvancedCameraCardErrorEvent } from '../../components-lib/message/dispatch.js';
|
||||
import { ZoomSettingsObserved } from '../../components-lib/zoom/types.js';
|
||||
import { handleZoomSettingsObservedEvent } from '../../components-lib/zoom/zoom-view-context.js';
|
||||
import {
|
||||
CameraConfig,
|
||||
CardWideConfig,
|
||||
frigateCardConfigDefaults,
|
||||
configDefaults,
|
||||
LiveConfig,
|
||||
liveConfigAbsoluteRootSchema,
|
||||
Overrides,
|
||||
@@ -45,11 +45,11 @@ import '../carousel';
|
||||
import { EmblaCarouselPlugins } from '../carousel.js';
|
||||
import '../next-prev-control.js';
|
||||
import '../ptz.js';
|
||||
import { FrigateCardPTZ } from '../ptz.js';
|
||||
import { AdvancedCameraCardPTZ } from '../ptz.js';
|
||||
import './provider.js';
|
||||
import { FrigateCardLiveProvider } from './provider.js';
|
||||
import { AdvancedCameraCardLiveProvider } from './provider.js';
|
||||
|
||||
const FRIGATE_CARD_LIVE_PROVIDER = 'frigate-card-live-provider';
|
||||
const ADVANCED_CAMERA_CARD_LIVE_PROVIDER = 'advanced-camera-card-live-provider';
|
||||
|
||||
interface CameraNeighbor {
|
||||
id: string;
|
||||
@@ -61,8 +61,8 @@ interface CameraNeighbors {
|
||||
next?: CameraNeighbor;
|
||||
}
|
||||
|
||||
@customElement('frigate-card-live-carousel')
|
||||
export class FrigateCardLiveCarousel extends LitElement {
|
||||
@customElement('advanced-camera-card-live-carousel')
|
||||
export class AdvancedCameraCardLiveCarousel extends LitElement {
|
||||
@property({ attribute: false })
|
||||
public hass?: ExtendedHomeAssistant;
|
||||
|
||||
@@ -95,7 +95,7 @@ export class FrigateCardLiveCarousel extends LitElement {
|
||||
|
||||
// Index between camera name and slide number.
|
||||
protected _cameraToSlide: Record<string, number> = {};
|
||||
protected _refPTZControl: Ref<FrigateCardPTZ> = createRef();
|
||||
protected _refPTZControl: Ref<AdvancedCameraCardPTZ> = createRef();
|
||||
protected _refCarousel: Ref<HTMLElement> = createRef();
|
||||
|
||||
protected _mediaActionsController = new MediaActionsController();
|
||||
@@ -118,7 +118,7 @@ export class FrigateCardLiveCarousel extends LitElement {
|
||||
protected _getTransitionEffect(): TransitionEffect {
|
||||
return (
|
||||
this.overriddenLiveConfig?.transition_effect ??
|
||||
frigateCardConfigDefaults.live.transition_effect
|
||||
configDefaults.live.transition_effect
|
||||
);
|
||||
}
|
||||
|
||||
@@ -143,7 +143,7 @@ export class FrigateCardLiveCarousel extends LitElement {
|
||||
changedProps.has('overriddenLiveConfig')
|
||||
) {
|
||||
this._mediaActionsController.setOptions({
|
||||
playerSelector: FRIGATE_CARD_LIVE_PROVIDER,
|
||||
playerSelector: ADVANCED_CAMERA_CARD_LIVE_PROVIDER,
|
||||
...(this.overriddenLiveConfig?.auto_play && {
|
||||
autoPlayConditions: this.overriddenLiveConfig.auto_play,
|
||||
}),
|
||||
@@ -254,8 +254,8 @@ export class FrigateCardLiveCarousel extends LitElement {
|
||||
}
|
||||
|
||||
const liveProvider = slide?.querySelector(
|
||||
FRIGATE_CARD_LIVE_PROVIDER,
|
||||
) as FrigateCardLiveProvider | null;
|
||||
ADVANCED_CAMERA_CARD_LIVE_PROVIDER,
|
||||
) as AdvancedCameraCardLiveProvider | null;
|
||||
if (liveProvider) {
|
||||
liveProvider.load = action === 'load';
|
||||
}
|
||||
@@ -280,7 +280,7 @@ export class FrigateCardLiveCarousel extends LitElement {
|
||||
try {
|
||||
// The condition controller object contains the currently live camera, which
|
||||
// (in the carousel for example) is not necessarily the live camera *this*
|
||||
// <frigate-card-live-provider> is rendering right now, so we provide a
|
||||
// <advanced-camera-card-live-provider> is rendering right now, so we provide a
|
||||
// stateOverride to evaluate the condition in that context.
|
||||
liveConfig = getOverriddenConfig(
|
||||
this.conditionsManagerEpoch.manager,
|
||||
@@ -292,7 +292,7 @@ export class FrigateCardLiveCarousel extends LitElement {
|
||||
},
|
||||
).live;
|
||||
} catch (ev) {
|
||||
return dispatchFrigateCardErrorEvent(this, ev);
|
||||
return dispatchAdvancedCameraCardErrorEvent(this, ev);
|
||||
}
|
||||
|
||||
const cameraMetadata = this.cameraManager.getCameraMetadata(cameraID);
|
||||
@@ -300,7 +300,7 @@ export class FrigateCardLiveCarousel extends LitElement {
|
||||
|
||||
return html`
|
||||
<div class="embla__slide">
|
||||
<frigate-card-live-provider
|
||||
<advanced-camera-card-live-provider
|
||||
?load=${!liveConfig.lazy_load}
|
||||
.microphoneState=${view?.camera === cameraID
|
||||
? this.microphoneState
|
||||
@@ -315,14 +315,14 @@ export class FrigateCardLiveCarousel extends LitElement {
|
||||
.hass=${this.hass}
|
||||
.cardWideConfig=${this.cardWideConfig}
|
||||
.zoomSettings=${view?.context?.zoom?.[cameraID]?.requested}
|
||||
@frigate-card:zoom:change=${(ev: CustomEvent<ZoomSettingsObserved>) =>
|
||||
@advanced-camera-card:zoom:change=${(ev: CustomEvent<ZoomSettingsObserved>) =>
|
||||
handleZoomSettingsObservedEvent(
|
||||
ev,
|
||||
this.viewManagerEpoch?.manager,
|
||||
cameraID,
|
||||
)}
|
||||
>
|
||||
</frigate-card-live-provider>
|
||||
</advanced-camera-card-live-provider>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
@@ -381,7 +381,7 @@ export class FrigateCardLiveCarousel extends LitElement {
|
||||
? neighbors?.previous
|
||||
: neighbors?.next;
|
||||
|
||||
return html`<frigate-card-next-previous-control
|
||||
return html`<advanced-camera-card-next-previous-control
|
||||
slot=${side}
|
||||
.hass=${this.hass}
|
||||
.side=${side}
|
||||
@@ -394,7 +394,7 @@ export class FrigateCardLiveCarousel extends LitElement {
|
||||
stopEventFromActivatingCardWideActions(ev);
|
||||
}}
|
||||
>
|
||||
</frigate-card-next-previous-control>`;
|
||||
</advanced-camera-card-next-previous-control>`;
|
||||
}
|
||||
|
||||
protected render(): TemplateResult | void {
|
||||
@@ -424,7 +424,7 @@ export class FrigateCardLiveCarousel extends LitElement {
|
||||
// options/plugins actually change.
|
||||
|
||||
return html`
|
||||
<frigate-card-carousel
|
||||
<advanced-camera-card-carousel
|
||||
${ref(this._refCarousel)}
|
||||
.loop=${hasMultipleCameras}
|
||||
.dragEnabled=${hasMultipleCameras && this.overriddenLiveConfig?.draggable}
|
||||
@@ -434,11 +434,11 @@ export class FrigateCardLiveCarousel extends LitElement {
|
||||
)}
|
||||
.selected=${this._getSelectedCameraIndex()}
|
||||
transitionEffect=${this._getTransitionEffect()}
|
||||
@frigate-card:carousel:select=${this._setViewHandler.bind(this)}
|
||||
@frigate-card:media:loaded=${() => {
|
||||
@advanced-camera-card:carousel:select=${this._setViewHandler.bind(this)}
|
||||
@advanced-camera-card:media:loaded=${() => {
|
||||
this._mediaHasLoaded = true;
|
||||
}}
|
||||
@frigate-card:media:unloaded=${() => {
|
||||
@advanced-camera-card:media:unloaded=${() => {
|
||||
this._mediaHasLoaded = false;
|
||||
}}
|
||||
>
|
||||
@@ -447,14 +447,14 @@ export class FrigateCardLiveCarousel extends LitElement {
|
||||
${slides}
|
||||
<!-- -->
|
||||
${this._renderNextPrevious('right', neighbors)}
|
||||
</frigate-card-carousel>
|
||||
<frigate-card-ptz
|
||||
</advanced-camera-card-carousel>
|
||||
<advanced-camera-card-ptz
|
||||
.config=${this.overriddenLiveConfig.controls.ptz}
|
||||
.cameraManager=${this.cameraManager}
|
||||
.cameraID=${getStreamCameraID(view, this.viewFilterCameraID)}
|
||||
.forceVisibility=${forcePTZVisibility}
|
||||
>
|
||||
</frigate-card-ptz>
|
||||
</advanced-camera-card-ptz>
|
||||
`;
|
||||
}
|
||||
|
||||
@@ -486,7 +486,7 @@ export class FrigateCardLiveCarousel extends LitElement {
|
||||
|
||||
// If the view has changed, or if the media actions controller has just been
|
||||
// initialized, then call the necessary media action.
|
||||
// See: https://github.com/dermotduffy/frigate-hass-card/issues/1626
|
||||
// See: https://github.com/dermotduffy/advanced-camera-card/issues/1626
|
||||
if (initialized || changedProperties.has('viewManagerEpoch')) {
|
||||
this._setMediaTarget();
|
||||
}
|
||||
@@ -499,6 +499,6 @@ export class FrigateCardLiveCarousel extends LitElement {
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
'frigate-card-live-carousel': FrigateCardLiveCarousel;
|
||||
'advanced-camera-card-live-carousel': AdvancedCameraCardLiveCarousel;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -19,8 +19,8 @@ import { ExtendedHomeAssistant } from '../../types.js';
|
||||
import { contentsChanged } from '../../utils/basic.js';
|
||||
import './carousel.js';
|
||||
|
||||
@customElement('frigate-card-live-grid')
|
||||
export class FrigateCardLiveGrid extends LitElement {
|
||||
@customElement('advanced-camera-card-live-grid')
|
||||
export class AdvancedCameraCardLiveGrid extends LitElement {
|
||||
@property({ attribute: false })
|
||||
public hass?: ExtendedHomeAssistant;
|
||||
|
||||
@@ -56,7 +56,7 @@ export class FrigateCardLiveGrid extends LitElement {
|
||||
const triggeredCameraID = cameraID ?? view?.camera;
|
||||
|
||||
return html`
|
||||
<frigate-card-live-carousel
|
||||
<advanced-camera-card-live-carousel
|
||||
grid-id=${ifDefined(cameraID)}
|
||||
.hass=${this.hass}
|
||||
.viewManagerEpoch=${this.viewManagerEpoch}
|
||||
@@ -71,7 +71,7 @@ export class FrigateCardLiveGrid extends LitElement {
|
||||
?triggered=${triggeredCameraID &&
|
||||
!!this.triggeredCameraIDs?.has(triggeredCameraID)}
|
||||
>
|
||||
</frigate-card-live-carousel>
|
||||
</advanced-camera-card-live-carousel>
|
||||
`;
|
||||
}
|
||||
|
||||
@@ -110,14 +110,15 @@ export class FrigateCardLiveGrid extends LitElement {
|
||||
}
|
||||
|
||||
return html`
|
||||
<frigate-card-media-grid
|
||||
<advanced-camera-card-media-grid
|
||||
.selected=${this.viewManagerEpoch?.manager.getView()?.camera}
|
||||
.displayConfig=${this.overriddenLiveConfig?.display}
|
||||
@frigate-card:media-grid:selected=${(ev: CustomEvent<MediaGridSelected>) =>
|
||||
this._gridSelectCamera(ev.detail.selected)}
|
||||
@advanced-camera-card:media-grid:selected=${(
|
||||
ev: CustomEvent<MediaGridSelected>,
|
||||
) => this._gridSelectCamera(ev.detail.selected)}
|
||||
>
|
||||
${[...cameraIDs].map((cameraID) => this._renderCarousel(cameraID))}
|
||||
</frigate-card-media-grid>
|
||||
</advanced-camera-card-media-grid>
|
||||
`;
|
||||
}
|
||||
|
||||
@@ -128,6 +129,6 @@ export class FrigateCardLiveGrid extends LitElement {
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
'frigate-card-live-grid': FrigateCardLiveGrid;
|
||||
'advanced-camera-card-live-grid': AdvancedCameraCardLiveGrid;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -11,8 +11,8 @@ import { ExtendedHomeAssistant } from '../../types.js';
|
||||
import { contentsChanged } from '../../utils/basic.js';
|
||||
import './grid.js';
|
||||
|
||||
@customElement('frigate-card-live')
|
||||
export class FrigateCardLive extends LitElement {
|
||||
@customElement('advanced-camera-card-live')
|
||||
export class AdvancedCameraCardLive extends LitElement {
|
||||
@property({ attribute: false })
|
||||
public conditionsManagerEpoch?: ConditionsManagerEpoch;
|
||||
|
||||
@@ -57,7 +57,7 @@ export class FrigateCardLive extends LitElement {
|
||||
// - Various events are captured to prevent them propagating upwards if the
|
||||
// card is in the background.
|
||||
return html`
|
||||
<frigate-card-live-grid
|
||||
<advanced-camera-card-live-grid
|
||||
.hass=${this.hass}
|
||||
.viewManagerEpoch=${this.viewManagerEpoch}
|
||||
.nonOverriddenLiveConfig=${this.nonOverriddenLiveConfig}
|
||||
@@ -70,7 +70,7 @@ export class FrigateCardLive extends LitElement {
|
||||
.microphoneState=${this.microphoneState}
|
||||
.triggeredCameraIDs=${this.triggeredCameraIDs}
|
||||
>
|
||||
</frigate-card-live-grid>
|
||||
</advanced-camera-card-live-grid>
|
||||
`;
|
||||
}
|
||||
|
||||
@@ -81,6 +81,6 @@ export class FrigateCardLive extends LitElement {
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
'frigate-card-live': FrigateCardLive;
|
||||
'advanced-camera-card-live': AdvancedCameraCardLive;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -17,7 +17,7 @@ import { PartialZoomSettings } from '../../components-lib/zoom/types.js';
|
||||
import {
|
||||
CameraConfig,
|
||||
CardWideConfig,
|
||||
frigateCardConfigDefaults,
|
||||
configDefaults,
|
||||
LiveConfig,
|
||||
LiveProvider,
|
||||
} from '../../config/types.js';
|
||||
@@ -26,7 +26,7 @@ import { localize } from '../../localize/localize.js';
|
||||
import liveProviderStyle from '../../scss/live-provider.scss';
|
||||
import {
|
||||
ExtendedHomeAssistant,
|
||||
FrigateCardMediaPlayer,
|
||||
AdvancedCameraCardMediaPlayer,
|
||||
FullscreenElement,
|
||||
} from '../../types.js';
|
||||
import { aspectRatioToString } from '../../utils/basic.js';
|
||||
@@ -39,10 +39,10 @@ import '../next-prev-control.js';
|
||||
import '../ptz.js';
|
||||
import '../surround.js';
|
||||
|
||||
@customElement('frigate-card-live-provider')
|
||||
export class FrigateCardLiveProvider
|
||||
@customElement('advanced-camera-card-live-provider')
|
||||
export class AdvancedCameraCardLiveProvider
|
||||
extends LitElement
|
||||
implements FrigateCardMediaPlayer
|
||||
implements AdvancedCameraCardMediaPlayer
|
||||
{
|
||||
@property({ attribute: false })
|
||||
public hass?: ExtendedHomeAssistant;
|
||||
@@ -84,7 +84,7 @@ export class FrigateCardLiveProvider
|
||||
@state()
|
||||
protected _showStreamTroubleshooting = false;
|
||||
|
||||
protected _refProvider: Ref<LitElement & FrigateCardMediaPlayer> = createRef();
|
||||
protected _refProvider: Ref<LitElement & AdvancedCameraCardMediaPlayer> = createRef();
|
||||
|
||||
// A note on dynamic imports:
|
||||
//
|
||||
@@ -94,7 +94,7 @@ export class FrigateCardLiveProvider
|
||||
// underlying code is not yet loaded.
|
||||
//
|
||||
// Test case: A card with a non-live view, but live pre-loaded, attempts to
|
||||
// call mute() when the <frigate-card-live> element first renders in the
|
||||
// call mute() when the <advanced-camera-card-live> element first renders in the
|
||||
// background. These calls fail without waiting for loading here.
|
||||
protected _importPromises: Promise<unknown>[] = [];
|
||||
|
||||
@@ -168,7 +168,7 @@ export class FrigateCardLiveProvider
|
||||
} else if (this.cameraConfig?.frigate.camera_name) {
|
||||
return 'jsmpeg';
|
||||
}
|
||||
return frigateCardConfigDefaults.cameras.live_provider;
|
||||
return configDefaults.cameras.live_provider;
|
||||
}
|
||||
return this.cameraConfig?.live_provider || 'image';
|
||||
}
|
||||
@@ -254,7 +254,7 @@ export class FrigateCardLiveProvider
|
||||
|
||||
protected _useZoomIfRequired(template: TemplateResult): TemplateResult {
|
||||
return this.liveConfig?.zoomable
|
||||
? html` <frigate-card-zoomer
|
||||
? html` <advanced-camera-card-zoomer
|
||||
.defaultSettings=${guard([this.cameraConfig?.dimensions?.layout], () =>
|
||||
this.cameraConfig?.dimensions?.layout
|
||||
? {
|
||||
@@ -264,11 +264,11 @@ export class FrigateCardLiveProvider
|
||||
: undefined,
|
||||
)}
|
||||
.settings=${this.zoomSettings}
|
||||
@frigate-card:zoom:zoomed=${() => this.setControls(false)}
|
||||
@frigate-card:zoom:unzoomed=${() => this.setControls()}
|
||||
@advanced-camera-card:zoom:zoomed=${() => this.setControls(false)}
|
||||
@advanced-camera-card:zoom:unzoomed=${() => this.setControls()}
|
||||
>
|
||||
${template}
|
||||
</frigate-card-zoomer>`
|
||||
</advanced-camera-card-zoomer>`
|
||||
: template;
|
||||
}
|
||||
|
||||
@@ -331,12 +331,12 @@ export class FrigateCardLiveProvider
|
||||
|
||||
return html`${this._useZoomIfRequired(html`
|
||||
${showImageDuringLoading || provider === 'image'
|
||||
? html` <frigate-card-live-image
|
||||
? html` <advanced-camera-card-live-image
|
||||
${ref(this._refProvider)}
|
||||
.hass=${this.hass}
|
||||
.cameraConfig=${this.cameraConfig}
|
||||
@frigate-card:live:error=${() => this._providerErrorHandler()}
|
||||
@frigate-card:media:loaded=${(ev: Event) => {
|
||||
@advanced-camera-card:live:error=${() => this._providerErrorHandler()}
|
||||
@advanced-camera-card:media:loaded=${(ev: Event) => {
|
||||
if (provider === 'image') {
|
||||
// Only count the media has loaded if the required provider is
|
||||
// the image (not just the temporary image shown during
|
||||
@@ -347,21 +347,21 @@ export class FrigateCardLiveProvider
|
||||
}
|
||||
}}
|
||||
>
|
||||
</frigate-card-live-image>`
|
||||
</advanced-camera-card-live-image>`
|
||||
: html``}
|
||||
${provider === 'ha'
|
||||
? html` <frigate-card-live-ha
|
||||
? html` <advanced-camera-card-live-ha
|
||||
${ref(this._refProvider)}
|
||||
class=${classMap(providerClasses)}
|
||||
.hass=${this.hass}
|
||||
.cameraConfig=${this.cameraConfig}
|
||||
?controls=${this.liveConfig.controls.builtin}
|
||||
@frigate-card:live:error=${() => this._providerErrorHandler()}
|
||||
@frigate-card:media:loaded=${this._videoMediaShowHandler.bind(this)}
|
||||
@advanced-camera-card:live:error=${() => this._providerErrorHandler()}
|
||||
@advanced-camera-card:media:loaded=${this._videoMediaShowHandler.bind(this)}
|
||||
>
|
||||
</frigate-card-live-ha>`
|
||||
</advanced-camera-card-live-ha>`
|
||||
: provider === 'go2rtc'
|
||||
? html`<frigate-card-live-go2rtc
|
||||
? html`<advanced-camera-card-live-go2rtc
|
||||
${ref(this._refProvider)}
|
||||
class=${classMap(providerClasses)}
|
||||
.hass=${this.hass}
|
||||
@@ -370,12 +370,14 @@ export class FrigateCardLiveProvider
|
||||
.microphoneState=${this.microphoneState}
|
||||
.microphoneConfig=${this.liveConfig.microphone}
|
||||
?controls=${this.liveConfig.controls.builtin}
|
||||
@frigate-card:live:error=${() => this._providerErrorHandler()}
|
||||
@frigate-card:media:loaded=${this._videoMediaShowHandler.bind(this)}
|
||||
@advanced-camera-card:live:error=${() => this._providerErrorHandler()}
|
||||
@advanced-camera-card:media:loaded=${this._videoMediaShowHandler.bind(
|
||||
this,
|
||||
)}
|
||||
>
|
||||
</frigate-card-live-go2rtc>`
|
||||
</advanced-camera-card-live-go2rtc>`
|
||||
: provider === 'webrtc-card'
|
||||
? html`<frigate-card-live-webrtc-card
|
||||
? html`<advanced-camera-card-live-webrtc-card
|
||||
${ref(this._refProvider)}
|
||||
class=${classMap(providerClasses)}
|
||||
.hass=${this.hass}
|
||||
@@ -383,32 +385,36 @@ export class FrigateCardLiveProvider
|
||||
.cameraEndpoints=${this.cameraEndpoints}
|
||||
.cardWideConfig=${this.cardWideConfig}
|
||||
?controls=${this.liveConfig.controls.builtin}
|
||||
@frigate-card:live:error=${() => this._providerErrorHandler()}
|
||||
@frigate-card:media:loaded=${this._videoMediaShowHandler.bind(this)}
|
||||
@advanced-camera-card:live:error=${() => this._providerErrorHandler()}
|
||||
@advanced-camera-card:media:loaded=${this._videoMediaShowHandler.bind(
|
||||
this,
|
||||
)}
|
||||
>
|
||||
</frigate-card-live-webrtc-card>`
|
||||
</advanced-camera-card-live-webrtc-card>`
|
||||
: provider === 'jsmpeg'
|
||||
? html` <frigate-card-live-jsmpeg
|
||||
? html` <advanced-camera-card-live-jsmpeg
|
||||
${ref(this._refProvider)}
|
||||
class=${classMap(providerClasses)}
|
||||
.hass=${this.hass}
|
||||
.cameraConfig=${this.cameraConfig}
|
||||
.cameraEndpoints=${this.cameraEndpoints}
|
||||
.cardWideConfig=${this.cardWideConfig}
|
||||
@frigate-card:live:error=${() => this._providerErrorHandler()}
|
||||
@frigate-card:media:loaded=${this._videoMediaShowHandler.bind(this)}
|
||||
@advanced-camera-card:live:error=${() => this._providerErrorHandler()}
|
||||
@advanced-camera-card:media:loaded=${this._videoMediaShowHandler.bind(
|
||||
this,
|
||||
)}
|
||||
>
|
||||
</frigate-card-live-jsmpeg>`
|
||||
</advanced-camera-card-live-jsmpeg>`
|
||||
: html``}
|
||||
`)}
|
||||
${showLoadingIcon
|
||||
? html`<frigate-card-icon
|
||||
? html`<advanced-camera-card-icon
|
||||
title=${localize('error.awaiting_live')}
|
||||
.icon=${{ icon: 'mdi:progress-helper' }}
|
||||
@click=${() => {
|
||||
this._showStreamTroubleshooting = !this._showStreamTroubleshooting;
|
||||
}}
|
||||
></frigate-card-icon>`
|
||||
></advanced-camera-card-icon>`
|
||||
: ''}
|
||||
${this._showStreamTroubleshooting
|
||||
? renderMessage(
|
||||
@@ -430,6 +436,6 @@ export class FrigateCardLiveProvider
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
'frigate-card-live-provider': FrigateCardLiveProvider;
|
||||
'advanced-camera-card-live-provider': AdvancedCameraCardLiveProvider;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
# go2rtc Player
|
||||
|
||||
This is a modified version of the go2rtc example video player code, modified for
|
||||
use in the Frigate card. In order to make future maintenance easier,
|
||||
use in the Advanced Camera Card. In order to make future maintenance easier,
|
||||
modifications have been kept to a minimum.
|
||||
|
||||
## Original Example Code
|
||||
|
||||
@@ -15,7 +15,7 @@ import { localize } from '../../../../localize/localize.js';
|
||||
import liveGo2RTCStyle from '../../../../scss/live-go2rtc.scss';
|
||||
import {
|
||||
ExtendedHomeAssistant,
|
||||
FrigateCardMediaPlayer,
|
||||
AdvancedCameraCardMediaPlayer,
|
||||
FullscreenElement,
|
||||
Message,
|
||||
} from '../../../../types.js';
|
||||
@@ -25,7 +25,7 @@ import { screenshotMedia } from '../../../../utils/screenshot.js';
|
||||
import { renderMessage } from '../../../message.js';
|
||||
import { VideoRTC } from './video-rtc.js';
|
||||
|
||||
customElements.define('frigate-card-live-go2rtc-player', VideoRTC);
|
||||
customElements.define('advanced-camera-card-live-go2rtc-player', VideoRTC);
|
||||
|
||||
// Note (2023-02-18): Depending on the behavior of the player / browser is
|
||||
// possible this URL will need to be re-signed in order to avoid HA spamming
|
||||
@@ -34,8 +34,11 @@ customElements.define('frigate-card-live-go2rtc-player', VideoRTC);
|
||||
// provider).
|
||||
const GO2RTC_URL_SIGN_EXPIRY_SECONDS = 24 * 60 * 60;
|
||||
|
||||
@customElement('frigate-card-live-go2rtc')
|
||||
export class FrigateCardGo2RTC extends LitElement implements FrigateCardMediaPlayer {
|
||||
@customElement('advanced-camera-card-live-go2rtc')
|
||||
export class AdvancedCameraCardGo2RTC
|
||||
extends LitElement
|
||||
implements AdvancedCameraCardMediaPlayer
|
||||
{
|
||||
// Not an reactive property to avoid resetting the video.
|
||||
public hass?: ExtendedHomeAssistant;
|
||||
|
||||
@@ -116,7 +119,7 @@ export class FrigateCardGo2RTC extends LitElement implements FrigateCardMediaPla
|
||||
super.connectedCallback();
|
||||
|
||||
// Reset the player when reconnected to the DOM.
|
||||
// https://github.com/dermotduffy/frigate-hass-card/issues/996
|
||||
// https://github.com/dermotduffy/advanced-camera-card/issues/996
|
||||
this.requestUpdate();
|
||||
}
|
||||
|
||||
@@ -205,6 +208,6 @@ export class FrigateCardGo2RTC extends LitElement implements FrigateCardMediaPla
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
'frigate-card-live-go2rtc': FrigateCardGo2RTC;
|
||||
'advanced-camera-card-live-go2rtc': AdvancedCameraCardGo2RTC;
|
||||
}
|
||||
}
|
||||
|
||||
+1
-1
@@ -29,7 +29,7 @@ export class VideoRTC extends HTMLElement {
|
||||
onmessage: Record<string, (msg: { type: string; value: string }) => void>;
|
||||
|
||||
// Custom methods/members.
|
||||
containingPlayer: FrigateCardMediaPlayer | null;
|
||||
containingPlayer: AdvancedCameraCardMediaPlayer | null;
|
||||
microphoneStream: MediaStream | null;
|
||||
reconnect();
|
||||
|
||||
|
||||
@@ -162,8 +162,8 @@ export class VideoRTC extends HTMLElement {
|
||||
this.microphoneStream = null;
|
||||
|
||||
/**
|
||||
* A reference to a containing FrigateCardMediaPlayer object.
|
||||
* @type {FrigateCardMediaPlayer}}
|
||||
* A reference to a containing AdvancedCameraCardMediaPlayer object.
|
||||
* @type {AdvancedCameraCardMediaPlayer}}
|
||||
*/
|
||||
this.containingPlayer = null;
|
||||
|
||||
@@ -222,7 +222,7 @@ export class VideoRTC extends HTMLElement {
|
||||
* https://developer.chrome.com/blog/autoplay/
|
||||
*/
|
||||
play() {
|
||||
// Frigate card controls playing at a higher level.
|
||||
// Advanced Camera Card controls playing at a higher level.
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -303,7 +303,7 @@ export class VideoRTC extends HTMLElement {
|
||||
|
||||
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
||||
this.video.addEventListener('error', (_ev) => {
|
||||
// For Frigate Card, we avoid log spam here from errors, and also don't
|
||||
// For Advanced Camera Card, we avoid log spam here from errors, and also don't
|
||||
// attempt to close the websocket unless the connection is open (otherwise
|
||||
// on reconnect() an exception will be thrown here that we're attempting
|
||||
// to close a connection that's not open)
|
||||
@@ -405,7 +405,7 @@ export class VideoRTC extends HTMLElement {
|
||||
if (this.pc) {
|
||||
// Do not close the (microphone) track attached to the peer connection as
|
||||
// that is controlled by MicrophoneManager.
|
||||
// See: https://github.com/dermotduffy/frigate-hass-card/issues/1810
|
||||
// See: https://github.com/dermotduffy/advanced-camera-card/issues/1810
|
||||
|
||||
this.pc.close();
|
||||
this.pc = null;
|
||||
|
||||
@@ -7,10 +7,13 @@ import '../../../patches/ha-camera-stream';
|
||||
import '../../../patches/ha-hls-player.js';
|
||||
import '../../../patches/ha-web-rtc-player.js';
|
||||
import liveHAStyle from '../../../scss/live-ha.scss';
|
||||
import { FrigateCardMediaPlayer, FullscreenElement } from '../../../types.js';
|
||||
import { AdvancedCameraCardMediaPlayer, FullscreenElement } from '../../../types.js';
|
||||
|
||||
@customElement('frigate-card-live-ha')
|
||||
export class FrigateCardLiveHA extends LitElement implements FrigateCardMediaPlayer {
|
||||
@customElement('advanced-camera-card-live-ha')
|
||||
export class AdvancedCameraCardLiveHA
|
||||
extends LitElement
|
||||
implements AdvancedCameraCardMediaPlayer
|
||||
{
|
||||
@property({ attribute: false })
|
||||
public hass?: HomeAssistant;
|
||||
|
||||
@@ -20,7 +23,7 @@ export class FrigateCardLiveHA extends LitElement implements FrigateCardMediaPla
|
||||
@property({ attribute: true, type: Boolean })
|
||||
public controls = false;
|
||||
|
||||
protected _playerRef: Ref<Element & FrigateCardMediaPlayer> = createRef();
|
||||
protected _playerRef: Ref<Element & AdvancedCameraCardMediaPlayer> = createRef();
|
||||
|
||||
public async play(): Promise<void> {
|
||||
return this._playerRef.value?.play();
|
||||
@@ -67,7 +70,7 @@ export class FrigateCardLiveHA extends LitElement implements FrigateCardMediaPla
|
||||
return;
|
||||
}
|
||||
|
||||
return html` <frigate-card-ha-camera-stream
|
||||
return html` <advanced-camera-card-ha-camera-stream
|
||||
${ref(this._playerRef)}
|
||||
.hass=${this.hass}
|
||||
.stateObj=${this.cameraConfig?.camera_entity
|
||||
@@ -76,7 +79,7 @@ export class FrigateCardLiveHA extends LitElement implements FrigateCardMediaPla
|
||||
.controls=${this.controls}
|
||||
.muted=${true}
|
||||
>
|
||||
</frigate-card-ha-camera-stream>`;
|
||||
</advanced-camera-card-ha-camera-stream>`;
|
||||
}
|
||||
|
||||
static get styles(): CSSResultGroup {
|
||||
@@ -86,6 +89,6 @@ export class FrigateCardLiveHA extends LitElement implements FrigateCardMediaPla
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
'frigate-card-live-ha': FrigateCardLiveHA;
|
||||
'advanced-camera-card-live-ha': AdvancedCameraCardLiveHA;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -4,18 +4,21 @@ import { customElement, property } from 'lit/decorators.js';
|
||||
import { createRef, ref, Ref } from 'lit/directives/ref.js';
|
||||
import { CameraConfig } from '../../../config/types';
|
||||
import basicBlockStyle from '../../../scss/basic-block.scss';
|
||||
import { FrigateCardMediaPlayer, FullscreenElement } from '../../../types.js';
|
||||
import { AdvancedCameraCardMediaPlayer, FullscreenElement } from '../../../types.js';
|
||||
import '../../image-base.js';
|
||||
|
||||
@customElement('frigate-card-live-image')
|
||||
export class FrigateCardLiveImage extends LitElement implements FrigateCardMediaPlayer {
|
||||
@customElement('advanced-camera-card-live-image')
|
||||
export class AdvancedCameraCardLiveImage
|
||||
extends LitElement
|
||||
implements AdvancedCameraCardMediaPlayer
|
||||
{
|
||||
@property({ attribute: false })
|
||||
public hass?: HomeAssistant;
|
||||
|
||||
@property({ attribute: false })
|
||||
public cameraConfig?: CameraConfig;
|
||||
|
||||
protected _refImage: Ref<Element & FrigateCardMediaPlayer> = createRef();
|
||||
protected _refImage: Ref<Element & AdvancedCameraCardMediaPlayer> = createRef();
|
||||
|
||||
public async play(): Promise<void> {
|
||||
await this._refImage.value?.play();
|
||||
@@ -63,13 +66,13 @@ export class FrigateCardLiveImage extends LitElement implements FrigateCardMedia
|
||||
}
|
||||
|
||||
return html`
|
||||
<frigate-card-image-base
|
||||
<advanced-camera-card-image-base
|
||||
${ref(this._refImage)}
|
||||
.hass=${this.hass}
|
||||
.imageConfig=${this.cameraConfig.image}
|
||||
.cameraConfig=${this.cameraConfig}
|
||||
>
|
||||
</frigate-card-image-base>
|
||||
</advanced-camera-card-image-base>
|
||||
`;
|
||||
}
|
||||
|
||||
@@ -80,6 +83,6 @@ export class FrigateCardLiveImage extends LitElement implements FrigateCardMedia
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
'frigate-card-live-image': FrigateCardLiveImage;
|
||||
'advanced-camera-card-live-image': AdvancedCameraCardLiveImage;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -15,8 +15,8 @@ import { CameraConfig, CardWideConfig } from '../../../config/types.js';
|
||||
import { localize } from '../../../localize/localize.js';
|
||||
import liveJSMPEGStyle from '../../../scss/live-jsmpeg.scss';
|
||||
import {
|
||||
AdvancedCameraCardMediaPlayer,
|
||||
ExtendedHomeAssistant,
|
||||
FrigateCardMediaPlayer,
|
||||
FullscreenElement,
|
||||
Message,
|
||||
} from '../../../types.js';
|
||||
@@ -38,8 +38,11 @@ const JSMPEG_URL_SIGN_EXPIRY_SECONDS = 24 * 60 * 60;
|
||||
// Number of seconds before the expiry to trigger a refresh.
|
||||
const JSMPEG_URL_SIGN_REFRESH_THRESHOLD_SECONDS = 1 * 60 * 60;
|
||||
|
||||
@customElement('frigate-card-live-jsmpeg')
|
||||
export class FrigateCardLiveJSMPEG extends LitElement implements FrigateCardMediaPlayer {
|
||||
@customElement('advanced-camera-card-live-jsmpeg')
|
||||
export class AdvancedCameraCardLiveJSMPEG
|
||||
extends LitElement
|
||||
implements AdvancedCameraCardMediaPlayer
|
||||
{
|
||||
@property({ attribute: false })
|
||||
public cameraConfig?: CameraConfig;
|
||||
|
||||
@@ -303,6 +306,6 @@ export class FrigateCardLiveJSMPEG extends LitElement implements FrigateCardMedi
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
'frigate-card-live-jsmpeg': FrigateCardLiveJSMPEG;
|
||||
'advanced-camera-card-live-jsmpeg': AdvancedCameraCardLiveJSMPEG;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -16,8 +16,8 @@ import { CameraConfig, CardWideConfig } from '../../../config/types.js';
|
||||
import { localize } from '../../../localize/localize.js';
|
||||
import liveWebRTCCardStyle from '../../../scss/live-webrtc-card.scss';
|
||||
import {
|
||||
FrigateCardError,
|
||||
FrigateCardMediaPlayer,
|
||||
AdvancedCameraCardError,
|
||||
AdvancedCameraCardMediaPlayer,
|
||||
FullscreenElement,
|
||||
Message,
|
||||
} from '../../../types.js';
|
||||
@@ -43,10 +43,10 @@ import { VideoRTC } from './go2rtc/video-rtc.js';
|
||||
|
||||
// Create a wrapper for AlexxIT's WebRTC card
|
||||
// - https://github.com/AlexxIT/WebRTC
|
||||
@customElement('frigate-card-live-webrtc-card')
|
||||
export class FrigateCardLiveWebRTCCard
|
||||
@customElement('advanced-camera-card-live-webrtc-card')
|
||||
export class AdvancedCameraCardLiveWebRTCCard
|
||||
extends LitElement
|
||||
implements FrigateCardMediaPlayer
|
||||
implements AdvancedCameraCardMediaPlayer
|
||||
{
|
||||
@property({ attribute: false })
|
||||
public cameraConfig?: CameraConfig;
|
||||
@@ -125,7 +125,7 @@ export class FrigateCardLiveWebRTCCard
|
||||
super.connectedCallback();
|
||||
|
||||
// Reset the player when reconnected to the DOM.
|
||||
// https://github.com/dermotduffy/frigate-hass-card/issues/996
|
||||
// https://github.com/dermotduffy/advanced-camera-card/issues/996
|
||||
this.requestUpdate();
|
||||
}
|
||||
|
||||
@@ -177,11 +177,11 @@ export class FrigateCardLiveWebRTCCard
|
||||
// hidden. This is incompatible with the card zoom support, since the
|
||||
// video will easily stop if the user zooms in too much. Disable this
|
||||
// feature by default.
|
||||
// See: https://github.com/dermotduffy/frigate-hass-card/issues/1614
|
||||
// See: https://github.com/dermotduffy/advanced-camera-card/issues/1614
|
||||
intersection: 0,
|
||||
|
||||
// Frigate card always starts muted (unlike webrtc-card).
|
||||
// See: https://github.com/dermotduffy/frigate-hass-card/issues/1654
|
||||
// Advanced Camera Card always starts muted (unlike webrtc-card).
|
||||
// See: https://github.com/dermotduffy/advanced-camera-card/issues/1654
|
||||
muted: true,
|
||||
|
||||
...this.cameraConfig.webrtc_card,
|
||||
@@ -209,12 +209,12 @@ export class FrigateCardLiveWebRTCCard
|
||||
this._message = {
|
||||
type: 'error',
|
||||
message:
|
||||
e instanceof FrigateCardError
|
||||
e instanceof AdvancedCameraCardError
|
||||
? e.message
|
||||
: localize('error.webrtc_card_reported_error') +
|
||||
': ' +
|
||||
(e as Error).message,
|
||||
context: (e as FrigateCardError).context,
|
||||
context: (e as AdvancedCameraCardError).context,
|
||||
};
|
||||
dispatchLiveErrorEvent(this);
|
||||
return;
|
||||
@@ -275,6 +275,6 @@ export class FrigateCardLiveWebRTCCard
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
'frigate-card-live-webrtc-card': FrigateCardLiveWebRTCCard;
|
||||
'advanced-camera-card-live-webrtc-card': AdvancedCameraCardLiveWebRTCCard;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -4,10 +4,12 @@ import loadingStyle from '../scss/loading.scss';
|
||||
import { getReleaseVersion } from '../utils/diagnostics';
|
||||
import './icon';
|
||||
|
||||
@customElement('frigate-card-loading')
|
||||
export class FrigateCardLoading extends LitElement {
|
||||
@customElement('advanced-camera-card-loading')
|
||||
export class AdvancedCameraCardLoading extends LitElement {
|
||||
protected render(): TemplateResult {
|
||||
return html`<frigate-card-icon .icon=${{ icon: 'iris' }}></frigate-card-icon
|
||||
return html`<advanced-camera-card-icon
|
||||
.icon=${{ icon: 'iris' }}
|
||||
></advanced-camera-card-icon
|
||||
><span>${getReleaseVersion()}</span>`;
|
||||
}
|
||||
|
||||
@@ -18,6 +20,6 @@ export class FrigateCardLoading extends LitElement {
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
'frigate-card-loading': FrigateCardLoading;
|
||||
'advanced-camera-card-loading': AdvancedCameraCardLoading;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -21,14 +21,14 @@ import {
|
||||
import { CardWideConfig } from '../config/types';
|
||||
import { localize } from '../localize/localize';
|
||||
import mediaFilterStyle from '../scss/media-filter.scss';
|
||||
import { FrigateCardDatePicker } from './date-picker';
|
||||
import { AdvancedCameraCardDatePicker } from './date-picker';
|
||||
import './date-picker.js';
|
||||
import { FrigateCardSelect } from './select';
|
||||
import { AdvancedCameraCardSelect } from './select';
|
||||
import './select.js';
|
||||
import { ViewManagerEpoch } from '../card-controller/view/types';
|
||||
|
||||
@customElement('frigate-card-media-filter')
|
||||
class FrigateCardMediaFilter extends ScopedRegistryHost(LitElement) {
|
||||
@customElement('advanced-camera-card-media-filter')
|
||||
class AdvancedCameraCardMediaFilter extends ScopedRegistryHost(LitElement) {
|
||||
@property({ attribute: false })
|
||||
public hass?: HomeAssistant;
|
||||
|
||||
@@ -42,21 +42,21 @@ class FrigateCardMediaFilter extends ScopedRegistryHost(LitElement) {
|
||||
public cardWideConfig?: CardWideConfig;
|
||||
|
||||
static elementDefinitions = {
|
||||
'frigate-card-select': FrigateCardSelect,
|
||||
'frigate-card-date-picker': FrigateCardDatePicker,
|
||||
'advanced-camera-card-select': AdvancedCameraCardSelect,
|
||||
'advanced-camera-card-date-picker': AdvancedCameraCardDatePicker,
|
||||
};
|
||||
|
||||
protected _mediaFilterController = new MediaFilterController(this);
|
||||
|
||||
protected _refMediaType: Ref<FrigateCardSelect> = createRef();
|
||||
protected _refCamera: Ref<FrigateCardSelect> = createRef();
|
||||
protected _refWhen: Ref<FrigateCardSelect> = createRef();
|
||||
protected _refWhenFrom: Ref<FrigateCardDatePicker> = createRef();
|
||||
protected _refWhenTo: Ref<FrigateCardDatePicker> = createRef();
|
||||
protected _refWhat: Ref<FrigateCardSelect> = createRef();
|
||||
protected _refWhere: Ref<FrigateCardSelect> = createRef();
|
||||
protected _refFavorite: Ref<FrigateCardSelect> = createRef();
|
||||
protected _refTags: Ref<FrigateCardSelect> = createRef();
|
||||
protected _refMediaType: Ref<AdvancedCameraCardSelect> = createRef();
|
||||
protected _refCamera: Ref<AdvancedCameraCardSelect> = createRef();
|
||||
protected _refWhen: Ref<AdvancedCameraCardSelect> = createRef();
|
||||
protected _refWhenFrom: Ref<AdvancedCameraCardDatePicker> = createRef();
|
||||
protected _refWhenTo: Ref<AdvancedCameraCardDatePicker> = createRef();
|
||||
protected _refWhat: Ref<AdvancedCameraCardSelect> = createRef();
|
||||
protected _refWhere: Ref<AdvancedCameraCardSelect> = createRef();
|
||||
protected _refFavorite: Ref<AdvancedCameraCardSelect> = createRef();
|
||||
protected _refTags: Ref<AdvancedCameraCardSelect> = createRef();
|
||||
|
||||
protected willUpdate(changedProps: PropertyValues): void {
|
||||
if (changedProps.has('viewManagerEpoch')) {
|
||||
@@ -132,48 +132,48 @@ class FrigateCardMediaFilter extends ScopedRegistryHost(LitElement) {
|
||||
const tagsOptions = this._mediaFilterController.getTagsOptions();
|
||||
const whereOptions = this._mediaFilterController.getWhereOptions();
|
||||
|
||||
return html` <frigate-card-select
|
||||
return html` <advanced-camera-card-select
|
||||
${ref(this._refMediaType)}
|
||||
label=${localize('media_filter.media_type')}
|
||||
placeholder=${localize('media_filter.select_media_type')}
|
||||
.options=${this._mediaFilterController.getMediaTypeOptions()}
|
||||
.initialValue=${defaults?.mediaType}
|
||||
@frigate-card:select:change=${() => valueChange()}
|
||||
@advanced-camera-card:select:change=${() => valueChange()}
|
||||
>
|
||||
</frigate-card-select>
|
||||
</advanced-camera-card-select>
|
||||
<div class="when">
|
||||
<frigate-card-select
|
||||
<advanced-camera-card-select
|
||||
${ref(this._refWhen)}
|
||||
.label=${localize('media_filter.when')}
|
||||
placeholder=${localize('media_filter.select_when')}
|
||||
.options=${this._mediaFilterController.getWhenOptions()}
|
||||
.initialValue=${defaults?.when}
|
||||
clearable
|
||||
@frigate-card:select:change=${() => whenChange('selected')}
|
||||
@advanced-camera-card:select:change=${() => whenChange('selected')}
|
||||
>
|
||||
</frigate-card-select>
|
||||
<frigate-card-date-picker
|
||||
</advanced-camera-card-select>
|
||||
<advanced-camera-card-date-picker
|
||||
class="${classMap({
|
||||
selected: !!this._refWhenFrom.value?.value,
|
||||
hidden: this._refWhen.value?.value !== MediaFilterCoreWhen.Custom,
|
||||
})}"
|
||||
${ref(this._refWhenFrom)}
|
||||
.icon=${'mdi:calendar-arrow-right'}
|
||||
@frigate-card:date-picker:change=${() => whenChange('custom')}
|
||||
@advanced-camera-card:date-picker:change=${() => whenChange('custom')}
|
||||
>
|
||||
</frigate-card-date-picker>
|
||||
<frigate-card-date-picker
|
||||
</advanced-camera-card-date-picker>
|
||||
<advanced-camera-card-date-picker
|
||||
class="${classMap({
|
||||
selected: !!this._refWhenTo.value?.value,
|
||||
hidden: this._refWhen.value?.value !== MediaFilterCoreWhen.Custom,
|
||||
})}"
|
||||
${ref(this._refWhenTo)}
|
||||
.icon=${'mdi:calendar-arrow-left'}
|
||||
@frigate-card:date-picker:change=${() => whenChange('custom')}
|
||||
@advanced-camera-card:date-picker:change=${() => whenChange('custom')}
|
||||
>
|
||||
</frigate-card-date-picker>
|
||||
</advanced-camera-card-date-picker>
|
||||
</div>
|
||||
<frigate-card-select
|
||||
<advanced-camera-card-select
|
||||
${ref(this._refCamera)}
|
||||
.label=${localize('media_filter.camera')}
|
||||
placeholder=${localize('media_filter.select_camera')}
|
||||
@@ -181,11 +181,11 @@ class FrigateCardMediaFilter extends ScopedRegistryHost(LitElement) {
|
||||
.initialValue=${defaults?.cameraIDs}
|
||||
clearable
|
||||
multiple
|
||||
@frigate-card:select:change=${() => valueChange()}
|
||||
@advanced-camera-card:select:change=${() => valueChange()}
|
||||
>
|
||||
</frigate-card-select>
|
||||
</advanced-camera-card-select>
|
||||
${controls.events && whatOptions.length
|
||||
? html` <frigate-card-select
|
||||
? html` <advanced-camera-card-select
|
||||
${ref(this._refWhat)}
|
||||
label=${localize('media_filter.what')}
|
||||
placeholder=${localize('media_filter.select_what')}
|
||||
@@ -193,12 +193,12 @@ class FrigateCardMediaFilter extends ScopedRegistryHost(LitElement) {
|
||||
multiple
|
||||
.options=${whatOptions}
|
||||
.initialValue=${defaults?.what}
|
||||
@frigate-card:select:change=${() => valueChange()}
|
||||
@advanced-camera-card:select:change=${() => valueChange()}
|
||||
>
|
||||
</frigate-card-select>`
|
||||
</advanced-camera-card-select>`
|
||||
: ''}
|
||||
${controls.events && tagsOptions.length
|
||||
? html` <frigate-card-select
|
||||
? html` <advanced-camera-card-select
|
||||
${ref(this._refTags)}
|
||||
label=${localize('media_filter.tag')}
|
||||
placeholder=${localize('media_filter.select_tag')}
|
||||
@@ -206,12 +206,12 @@ class FrigateCardMediaFilter extends ScopedRegistryHost(LitElement) {
|
||||
multiple
|
||||
.options=${tagsOptions}
|
||||
.initialValue=${defaults?.tags}
|
||||
@frigate-card:select:change=${() => valueChange()}
|
||||
@advanced-camera-card:select:change=${() => valueChange()}
|
||||
>
|
||||
</frigate-card-select>`
|
||||
</advanced-camera-card-select>`
|
||||
: ''}
|
||||
${controls.events && whereOptions.length
|
||||
? html` <frigate-card-select
|
||||
? html` <advanced-camera-card-select
|
||||
${ref(this._refWhere)}
|
||||
label=${localize('media_filter.where')}
|
||||
placeholder=${localize('media_filter.select_where')}
|
||||
@@ -219,22 +219,22 @@ class FrigateCardMediaFilter extends ScopedRegistryHost(LitElement) {
|
||||
multiple
|
||||
.options=${whereOptions}
|
||||
.initialValue=${defaults?.where}
|
||||
@frigate-card:select:change=${() => valueChange()}
|
||||
@advanced-camera-card:select:change=${() => valueChange()}
|
||||
>
|
||||
</frigate-card-select>`
|
||||
</advanced-camera-card-select>`
|
||||
: ''}
|
||||
${controls.favorites
|
||||
? html`
|
||||
<frigate-card-select
|
||||
<advanced-camera-card-select
|
||||
${ref(this._refFavorite)}
|
||||
label=${localize('media_filter.favorite')}
|
||||
placeholder=${localize('media_filter.select_favorite')}
|
||||
.options=${this._mediaFilterController.getFavoriteOptions()}
|
||||
.initialValue=${defaults?.favorite}
|
||||
clearable
|
||||
@frigate-card:select:change=${() => valueChange()}
|
||||
@advanced-camera-card:select:change=${() => valueChange()}
|
||||
>
|
||||
</frigate-card-select>
|
||||
</advanced-camera-card-select>
|
||||
`
|
||||
: ''}`;
|
||||
}
|
||||
@@ -246,6 +246,6 @@ class FrigateCardMediaFilter extends ScopedRegistryHost(LitElement) {
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
'frigate-card-media-filter': FrigateCardMediaFilter;
|
||||
'advanced-camera-card-media-filter': AdvancedCameraCardMediaFilter;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -12,8 +12,8 @@ import { MediaGridController } from '../components-lib/media-grid-controller.js'
|
||||
import { ViewDisplayConfig } from '../config/types';
|
||||
import mediaGridStyle from '../scss/media-grid.scss';
|
||||
|
||||
@customElement('frigate-card-media-grid')
|
||||
export class FrigateCardMediaGrid extends LitElement {
|
||||
@customElement('advanced-camera-card-media-grid')
|
||||
export class AdvancedCameraCardMediaGrid extends LitElement {
|
||||
@property({ attribute: false })
|
||||
public selected?: string;
|
||||
|
||||
@@ -68,6 +68,6 @@ export class FrigateCardMediaGrid extends LitElement {
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
'frigate-card-media-grid': FrigateCardMediaGrid;
|
||||
'advanced-camera-card-media-grid': AdvancedCameraCardMediaGrid;
|
||||
}
|
||||
}
|
||||
|
||||
+24
-22
@@ -6,14 +6,14 @@ import { actionHandler } from '../action-handler-directive.js';
|
||||
import { MenuController } from '../components-lib/menu-controller.js';
|
||||
import type { MenuConfig, MenuItem } from '../config/types.js';
|
||||
import menuStyle from '../scss/menu.scss';
|
||||
import { frigateCardHasAction } from '../utils/action.js';
|
||||
import { hasAction } from '../utils/action.js';
|
||||
import { getEntityTitle } from '../utils/ha/index.js';
|
||||
import { EntityRegistryManager } from '../utils/ha/registry/entity/index.js';
|
||||
import './icon.js';
|
||||
import './submenu.js';
|
||||
|
||||
@customElement('frigate-card-menu')
|
||||
export class FrigateCardMenu extends LitElement {
|
||||
@customElement('advanced-camera-card-menu')
|
||||
export class AdvancedCameraCardMenu extends LitElement {
|
||||
protected _controller = new MenuController(this);
|
||||
|
||||
@property({ attribute: false })
|
||||
@@ -43,37 +43,39 @@ export class FrigateCardMenu extends LitElement {
|
||||
return;
|
||||
}
|
||||
|
||||
if (button.type === 'custom:frigate-card-menu-submenu') {
|
||||
return html` <frigate-card-submenu
|
||||
if (button.type === 'custom:advanced-camera-card-menu-submenu') {
|
||||
return html` <advanced-camera-card-submenu
|
||||
.hass=${this.hass}
|
||||
.submenu=${button}
|
||||
@action=${(ev) => this._controller.actionHandler(ev)}
|
||||
>
|
||||
</frigate-card-submenu>`;
|
||||
} else if (button.type === 'custom:frigate-card-menu-submenu-select') {
|
||||
return html` <frigate-card-submenu-select
|
||||
</advanced-camera-card-submenu>`;
|
||||
} else if (button.type === 'custom:advanced-camera-card-menu-submenu-select') {
|
||||
return html` <advanced-camera-card-submenu-select
|
||||
.hass=${this.hass}
|
||||
.submenuSelect=${button}
|
||||
.entityRegistryManager=${this.entityRegistryManager}
|
||||
@action=${(ev) => this._controller.actionHandler(ev)}
|
||||
>
|
||||
</frigate-card-submenu-select>`;
|
||||
</advanced-camera-card-submenu-select>`;
|
||||
}
|
||||
|
||||
const title =
|
||||
this.hass && button.type === 'custom:frigate-card-menu-state-icon' && !button.title
|
||||
this.hass &&
|
||||
button.type === 'custom:advanced-camera-card-menu-state-icon' &&
|
||||
!button.title
|
||||
? getEntityTitle(this.hass, button.entity)
|
||||
: button.title;
|
||||
|
||||
return html` <ha-icon-button
|
||||
.actionHandler=${actionHandler({
|
||||
hasHold: frigateCardHasAction(button.hold_action),
|
||||
hasDoubleClick: frigateCardHasAction(button.double_tap_action),
|
||||
hasHold: hasAction(button.hold_action),
|
||||
hasDoubleClick: hasAction(button.double_tap_action),
|
||||
})}
|
||||
.label=${title ?? ''}
|
||||
@action=${(ev) => this._controller.actionHandler(ev, button)}
|
||||
>
|
||||
<frigate-card-icon
|
||||
<advanced-camera-card-icon
|
||||
?allow-override-non-active-styles=${true}
|
||||
style="${styleMap(button.style || {})}"
|
||||
.hass=${this.hass}
|
||||
@@ -83,7 +85,7 @@ export class FrigateCardMenu extends LitElement {
|
||||
stateColor: button.state_color,
|
||||
fallback: 'mdi:gesture-tap-button',
|
||||
}}
|
||||
></frigate-card-icon>
|
||||
></advanced-camera-card-icon>
|
||||
</ha-icon-button>`;
|
||||
}
|
||||
|
||||
@@ -108,13 +110,13 @@ export class FrigateCardMenu extends LitElement {
|
||||
|
||||
const generateValue = (suffix: string): string => {
|
||||
return `
|
||||
var(--frigate-card-menu-override-${suffix},
|
||||
var(--frigate-card-menu-position-${position}-alignment-${alignment}-style-${style}-${suffix},
|
||||
var(--frigate-card-menu-position-${position}-alignment-${alignment}-${suffix},
|
||||
var(--frigate-card-menu-position-${position}-${suffix},
|
||||
var(--frigate-card-menu-style-${style}-${suffix},
|
||||
var(--frigate-card-menu-alignment-${alignment}-${suffix},
|
||||
var(--frigate-card-menu-${suffix})))))))`;
|
||||
var(--advanced-camera-card-menu-override-${suffix},
|
||||
var(--advanced-camera-card-menu-position-${position}-alignment-${alignment}-style-${style}-${suffix},
|
||||
var(--advanced-camera-card-menu-position-${position}-alignment-${alignment}-${suffix},
|
||||
var(--advanced-camera-card-menu-position-${position}-${suffix},
|
||||
var(--advanced-camera-card-menu-style-${style}-${suffix},
|
||||
var(--advanced-camera-card-menu-alignment-${alignment}-${suffix},
|
||||
var(--advanced-camera-card-menu-${suffix})))))))`;
|
||||
};
|
||||
|
||||
// By definition `rule` will match the current configuration, the choice is
|
||||
@@ -169,6 +171,6 @@ export class FrigateCardMenu extends LitElement {
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
'frigate-card-menu': FrigateCardMenu;
|
||||
'advanced-camera-card-menu': AdvancedCameraCardMenu;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -13,13 +13,13 @@ export function renderMessage(
|
||||
overlay?: boolean;
|
||||
},
|
||||
): TemplateResult {
|
||||
return html` <frigate-card-message
|
||||
return html` <advanced-camera-card-message
|
||||
.message=${message}
|
||||
?overlay=${!!renderOptions?.overlay}
|
||||
></frigate-card-message>`;
|
||||
></advanced-camera-card-message>`;
|
||||
}
|
||||
@customElement('frigate-card-message')
|
||||
export class FrigateCardMessage extends LitElement {
|
||||
@customElement('advanced-camera-card-message')
|
||||
export class AdvancedCameraCardMessage extends LitElement {
|
||||
@property({ attribute: false })
|
||||
public message?: Message;
|
||||
|
||||
@@ -51,7 +51,9 @@ export class FrigateCardMessage extends LitElement {
|
||||
return html` <div class="wrapper">
|
||||
<div class="message padded">
|
||||
<div class="icon">
|
||||
<frigate-card-icon .icon="${{ icon: icon }}"></frigate-card-icon>
|
||||
<advanced-camera-card-icon
|
||||
.icon="${{ icon: icon }}"
|
||||
></advanced-camera-card-icon>
|
||||
</div>
|
||||
<div class="contents">
|
||||
<span class="${classMap(classes)}">${messageTemplate}</span>
|
||||
@@ -70,6 +72,6 @@ export class FrigateCardMessage extends LitElement {
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
'frigate-card-message': FrigateCardMessage;
|
||||
'advanced-camera-card-message': AdvancedCameraCardMessage;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -8,14 +8,17 @@ import { Icon } from '../types.js';
|
||||
import { renderTask } from '../utils/task.js';
|
||||
import { createFetchThumbnailTask } from '../utils/thumbnail.js';
|
||||
|
||||
@customElement('frigate-card-next-previous-control')
|
||||
export class FrigateCardNextPreviousControl extends LitElement {
|
||||
@customElement('advanced-camera-card-next-previous-control')
|
||||
export class AdvancedCameraCardNextPreviousControl extends LitElement {
|
||||
@property({ attribute: false })
|
||||
public side?: 'left' | 'right';
|
||||
|
||||
set controlConfig(controlConfig: NextPreviousControlConfig | undefined) {
|
||||
if (controlConfig?.size) {
|
||||
this.style.setProperty('--frigate-card-next-prev-size', `${controlConfig.size}px`);
|
||||
this.style.setProperty(
|
||||
'--advanced-camera-card-next-prev-size',
|
||||
`${controlConfig.size}px`,
|
||||
);
|
||||
}
|
||||
this._controlConfig = controlConfig;
|
||||
}
|
||||
@@ -74,7 +77,10 @@ export class FrigateCardNextPreviousControl extends LitElement {
|
||||
: { icon: 'mdi:chevron-right' };
|
||||
|
||||
return html` <ha-icon-button class="${classMap(classes)}" .label=${this.label}>
|
||||
<frigate-card-icon .hass=${this.hass} .icon=${icon}></frigate-card-icon>
|
||||
<advanced-camera-card-icon
|
||||
.hass=${this.hass}
|
||||
.icon=${icon}
|
||||
></advanced-camera-card-icon>
|
||||
</ha-icon-button>`;
|
||||
}
|
||||
|
||||
@@ -106,6 +112,6 @@ export class FrigateCardNextPreviousControl extends LitElement {
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
'frigate-card-next-previous-control': FrigateCardNextPreviousControl;
|
||||
'advanced-camera-card-next-previous-control': AdvancedCameraCardNextPreviousControl;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -2,8 +2,8 @@ import { CSSResultGroup, LitElement, TemplateResult, html, unsafeCSS } from 'lit
|
||||
import { customElement } from 'lit/decorators.js';
|
||||
import overlayStyle from '../scss/overlay.scss';
|
||||
|
||||
@customElement('frigate-card-overlay')
|
||||
export class FrigateCardOverlay extends LitElement {
|
||||
@customElement('advanced-camera-card-overlay')
|
||||
export class AdvancedCameraCardOverlay extends LitElement {
|
||||
protected render(): TemplateResult | void {
|
||||
return html`
|
||||
<slot name="top"></slot>
|
||||
@@ -20,6 +20,6 @@ export class FrigateCardOverlay extends LitElement {
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
'frigate-card-overlay': FrigateCardOverlay;
|
||||
'advanced-camera-card-overlay': AdvancedCameraCardOverlay;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -6,17 +6,17 @@ import { CardWideConfig } from '../config/types.js';
|
||||
import messageStyle from '../scss/message.scss';
|
||||
import './icon.js';
|
||||
|
||||
type FrigateCardProgressIndicatorSize = 'tiny' | 'small' | 'medium' | 'large';
|
||||
type AdvancedCameraCardProgressIndicatorSize = 'tiny' | 'small' | 'medium' | 'large';
|
||||
|
||||
export function renderProgressIndicator(options?: {
|
||||
message?: string;
|
||||
cardWideConfig?: CardWideConfig | null;
|
||||
componentRef?: Ref<HTMLElement>;
|
||||
classes?: ClassInfo;
|
||||
size?: FrigateCardProgressIndicatorSize;
|
||||
size?: AdvancedCameraCardProgressIndicatorSize;
|
||||
}): TemplateResult {
|
||||
return html`
|
||||
<frigate-card-progress-indicator
|
||||
<advanced-camera-card-progress-indicator
|
||||
class="${classMap(options?.classes ?? {})}"
|
||||
.size=${options?.size}
|
||||
${options?.componentRef ? ref(options.componentRef) : ''}
|
||||
@@ -24,12 +24,12 @@ export function renderProgressIndicator(options?: {
|
||||
.animated=${options?.cardWideConfig?.performance?.features
|
||||
.animated_progress_indicator ?? true}
|
||||
>
|
||||
</frigate-card-progress-indicator>
|
||||
</advanced-camera-card-progress-indicator>
|
||||
`;
|
||||
}
|
||||
|
||||
@customElement('frigate-card-progress-indicator')
|
||||
export class FrigateCardProgressIndicator extends LitElement {
|
||||
@customElement('advanced-camera-card-progress-indicator')
|
||||
export class AdvancedCameraCardProgressIndicator extends LitElement {
|
||||
@property({ attribute: false })
|
||||
public message: string = '';
|
||||
|
||||
@@ -37,16 +37,16 @@ export class FrigateCardProgressIndicator extends LitElement {
|
||||
public animated = false;
|
||||
|
||||
@property({ attribute: false })
|
||||
public size: FrigateCardProgressIndicatorSize = 'large';
|
||||
public size: AdvancedCameraCardProgressIndicatorSize = 'large';
|
||||
|
||||
protected render(): TemplateResult {
|
||||
return html` <div class="message vertical">
|
||||
${this.animated
|
||||
? html`<ha-circular-progress indeterminate size="${this.size}">
|
||||
</ha-circular-progress>`
|
||||
: html`<frigate-card-icon
|
||||
: html`<advanced-camera-card-icon
|
||||
.icon=${{ icon: 'mdi:timer-sand' }}
|
||||
></frigate-card-icon>`}
|
||||
></advanced-camera-card-icon>`}
|
||||
${this.message ? html`<span>${this.message}</span>` : html``}
|
||||
</div>`;
|
||||
}
|
||||
@@ -58,6 +58,6 @@ export class FrigateCardProgressIndicator extends LitElement {
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
'frigate-card-progress-indicator': FrigateCardProgressIndicator;
|
||||
'advanced-camera-card-progress-indicator': AdvancedCameraCardProgressIndicator;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -16,11 +16,11 @@ import { PTZActionPresence } from '../components-lib/ptz/types.js';
|
||||
import { Actions, PTZControlsConfig } from '../config/types.js';
|
||||
import { localize } from '../localize/localize.js';
|
||||
import ptzStyle from '../scss/ptz.scss';
|
||||
import { frigateCardHasAction } from '../utils/action.js';
|
||||
import { hasAction } from '../utils/action.js';
|
||||
import './icon.js';
|
||||
|
||||
@customElement('frigate-card-ptz')
|
||||
export class FrigateCardPTZ extends LitElement {
|
||||
@customElement('advanced-camera-card-ptz')
|
||||
export class AdvancedCameraCardPTZ extends LitElement {
|
||||
@property({ attribute: false })
|
||||
public config?: PTZControlsConfig;
|
||||
|
||||
@@ -68,17 +68,17 @@ export class FrigateCardPTZ extends LitElement {
|
||||
};
|
||||
|
||||
return actions
|
||||
? html`<frigate-card-icon
|
||||
? html`<advanced-camera-card-icon
|
||||
class=${classMap(classes)}
|
||||
.icon=${{ icon: icon }}
|
||||
.actionHandler=${actionHandler({
|
||||
hasHold: frigateCardHasAction(actions?.hold_action),
|
||||
hasDoubleClick: frigateCardHasAction(actions?.double_tap_action),
|
||||
hasHold: hasAction(actions?.hold_action),
|
||||
hasDoubleClick: hasAction(actions?.double_tap_action),
|
||||
})}
|
||||
.title=${localize(`elements.ptz.${name}`)}
|
||||
@action=${(ev: HASSDomEvent<{ action: string }>) =>
|
||||
this._controller.handleAction(ev, actions)}
|
||||
></frigate-card-icon>`
|
||||
></advanced-camera-card-icon>`
|
||||
: html``;
|
||||
};
|
||||
|
||||
@@ -113,6 +113,6 @@ export class FrigateCardPTZ extends LitElement {
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
'frigate-card-ptz': FrigateCardPTZ;
|
||||
'advanced-camera-card-ptz': AdvancedCameraCardPTZ;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -9,7 +9,7 @@ import {
|
||||
import { property } from 'lit/decorators.js';
|
||||
import { createRef, ref, Ref } from 'lit/directives/ref.js';
|
||||
import selectStyle from '../scss/select.scss';
|
||||
import { contentsChanged, dispatchFrigateCardEvent } from '../utils/basic';
|
||||
import { contentsChanged, dispatchAdvancedCameraCardEvent } from '../utils/basic';
|
||||
import { ScopedRegistryHost } from '@lit-labs/scoped-registry-mixin';
|
||||
import { grSelectElements } from '../scoped-elements/gr-select';
|
||||
import isEqual from 'lodash-es/isEqual';
|
||||
@@ -26,7 +26,7 @@ type SelectElement = HTMLElement & {
|
||||
value: SelectValues;
|
||||
};
|
||||
|
||||
export class FrigateCardSelect extends ScopedRegistryHost(LitElement) {
|
||||
export class AdvancedCameraCardSelect extends ScopedRegistryHost(LitElement) {
|
||||
@property({ attribute: false, hasChanged: contentsChanged })
|
||||
public options?: SelectOption[];
|
||||
|
||||
@@ -73,7 +73,7 @@ export class FrigateCardSelect extends ScopedRegistryHost(LitElement) {
|
||||
// (even when the user has not interacted with the control). Do not
|
||||
// dispatch events for this.
|
||||
if (!initialValueSet) {
|
||||
dispatchFrigateCardEvent(this, 'select:change', value);
|
||||
dispatchAdvancedCameraCardEvent(this, 'select:change', value);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -111,6 +111,6 @@ export class FrigateCardSelect extends ScopedRegistryHost(LitElement) {
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
'frigate-card-select': FrigateCardSelect;
|
||||
'advanced-camera-card-select': AdvancedCameraCardSelect;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -12,11 +12,11 @@ import { actionHandler } from '../action-handler-directive.js';
|
||||
import { StatusBarController } from '../components-lib/status-bar-controller';
|
||||
import { StatusBarConfig, StatusBarItem } from '../config/types';
|
||||
import statusStyle from '../scss/status.scss';
|
||||
import { frigateCardHasAction } from '../utils/action';
|
||||
import { hasAction } from '../utils/action';
|
||||
import './icon.js';
|
||||
|
||||
@customElement('frigate-card-status-bar')
|
||||
export class FrigateCardStatusBar extends LitElement {
|
||||
@customElement('advanced-camera-card-status-bar')
|
||||
export class AdvancedCameraCardStatusBar extends LitElement {
|
||||
protected _controller = new StatusBarController(this);
|
||||
|
||||
@property({ attribute: false })
|
||||
@@ -54,11 +54,11 @@ export class FrigateCardStatusBar extends LitElement {
|
||||
|
||||
const generateValue = (suffix: string): string => {
|
||||
return `
|
||||
var(--frigate-card-status-bar-override-${suffix},
|
||||
var(--frigate-card-status-bar-position-${position}-style-${style}-${suffix},
|
||||
var(--frigate-card-status-bar-position-${position}-${suffix},
|
||||
var(--frigate-card-status-bar-style-${style}-${suffix},
|
||||
var(--frigate-card-status-bar-${suffix})))))`;
|
||||
var(--advanced-camera-card-status-bar-override-${suffix},
|
||||
var(--advanced-camera-card-status-bar-position-${position}-style-${style}-${suffix},
|
||||
var(--advanced-camera-card-status-bar-position-${position}-${suffix},
|
||||
var(--advanced-camera-card-status-bar-style-${style}-${suffix},
|
||||
var(--advanced-camera-card-status-bar-${suffix})))))`;
|
||||
};
|
||||
|
||||
const rule = `[data-position='${position}']` + `[data-style='${style}']`;
|
||||
@@ -91,11 +91,11 @@ export class FrigateCardStatusBar extends LitElement {
|
||||
});
|
||||
|
||||
const handler = actionHandler({
|
||||
hasHold: frigateCardHasAction(item.actions?.hold_action),
|
||||
hasDoubleClick: frigateCardHasAction(item.actions?.double_tap_action),
|
||||
hasHold: hasAction(item.actions?.hold_action),
|
||||
hasDoubleClick: hasAction(item.actions?.double_tap_action),
|
||||
});
|
||||
|
||||
if (item.type === 'custom:frigate-card-status-bar-string') {
|
||||
if (item.type === 'custom:advanced-camera-card-status-bar-string') {
|
||||
return html`<div
|
||||
.actionHandler=${handler}
|
||||
class="${classes}"
|
||||
@@ -103,14 +103,14 @@ export class FrigateCardStatusBar extends LitElement {
|
||||
>
|
||||
${item.string}
|
||||
</div>`;
|
||||
} else if (item.type === 'custom:frigate-card-status-bar-icon') {
|
||||
return html`<frigate-card-icon
|
||||
} else if (item.type === 'custom:advanced-camera-card-status-bar-icon') {
|
||||
return html`<advanced-camera-card-icon
|
||||
.actionHandler=${handler}
|
||||
.icon=${{ icon: item.icon }}
|
||||
class="${classes}"
|
||||
@action=${(ev) => this._controller.actionHandler(ev, item.actions)}
|
||||
></frigate-card-icon>`;
|
||||
} else if (item.type === 'custom:frigate-card-status-bar-image') {
|
||||
></advanced-camera-card-icon>`;
|
||||
} else if (item.type === 'custom:advanced-camera-card-status-bar-image') {
|
||||
return html`<img
|
||||
.actionHandler=${handler}
|
||||
class="${classes}"
|
||||
@@ -130,6 +130,6 @@ export class FrigateCardStatusBar extends LitElement {
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
'frigate-card-status-bar': FrigateCardStatusBar;
|
||||
'advanced-camera-card-status-bar': AdvancedCameraCardStatusBar;
|
||||
}
|
||||
}
|
||||
|
||||
+20
-23
@@ -13,10 +13,7 @@ import { styleMap } from 'lit/directives/style-map.js';
|
||||
import { actionHandler } from '../action-handler-directive.js';
|
||||
import { MenuSubmenu, MenuSubmenuItem, MenuSubmenuSelect } from '../config/types.js';
|
||||
import submenuStyle from '../scss/submenu.scss';
|
||||
import {
|
||||
frigateCardHasAction,
|
||||
stopEventFromActivatingCardWideActions,
|
||||
} from '../utils/action.js';
|
||||
import { hasAction, stopEventFromActivatingCardWideActions } from '../utils/action.js';
|
||||
import { getEntityTitle, isHassDifferent } from '../utils/ha';
|
||||
import { getEntityStateTranslation } from '../utils/ha/entity-state-translation.js';
|
||||
import { EntityRegistryManager } from '../utils/ha/registry/entity/index.js';
|
||||
@@ -25,12 +22,12 @@ import { Icon } from '../types.js';
|
||||
|
||||
interface ExtendedMenuSubmenu extends MenuSubmenu {
|
||||
// An internal version of a submenu that allows entity-based submenus (for
|
||||
// FrigateCardSubmenuSelect).
|
||||
// AdvancedCameraCardSubmenuSelect).
|
||||
icon: string | Icon;
|
||||
}
|
||||
|
||||
@customElement('frigate-card-submenu')
|
||||
export class FrigateCardSubmenu extends LitElement {
|
||||
@customElement('advanced-camera-card-submenu')
|
||||
export class AdvancedCameraCardSubmenu extends LitElement {
|
||||
@property({ attribute: false })
|
||||
public hass?: HomeAssistant;
|
||||
|
||||
@@ -57,15 +54,15 @@ export class FrigateCardSubmenu extends LitElement {
|
||||
ev.detail.config = item;
|
||||
}}
|
||||
.actionHandler=${actionHandler({
|
||||
hasHold: frigateCardHasAction(item.hold_action),
|
||||
hasDoubleClick: frigateCardHasAction(item.double_tap_action),
|
||||
hasHold: hasAction(item.hold_action),
|
||||
hasDoubleClick: hasAction(item.double_tap_action),
|
||||
})}
|
||||
>
|
||||
<span style="${style}">${title ?? ''}</span>
|
||||
${item.subtitle
|
||||
? html`<span slot="secondary" style="${style}">${item.subtitle}</span>`
|
||||
: ''}
|
||||
<frigate-card-icon
|
||||
<advanced-camera-card-icon
|
||||
slot="graphic"
|
||||
.hass=${this.hass}
|
||||
.icon=${{
|
||||
@@ -73,7 +70,7 @@ export class FrigateCardSubmenu extends LitElement {
|
||||
entity: item.entity,
|
||||
}}
|
||||
style="${style}"
|
||||
></frigate-card-icon>
|
||||
></advanced-camera-card-icon>
|
||||
</mwc-list-item>
|
||||
`;
|
||||
}
|
||||
@@ -90,7 +87,7 @@ export class FrigateCardSubmenu extends LitElement {
|
||||
@closed=${
|
||||
// Prevent the submenu closing from closing anything upstream (e.g.
|
||||
// selecting a submenu in the editor dialog should not close the
|
||||
// editor, see https://github.com/dermotduffy/frigate-hass-card/issues/377).
|
||||
// editor, see https://github.com/dermotduffy/advanced-camera-card/issues/377).
|
||||
(ev) => ev.stopPropagation()
|
||||
}
|
||||
@click=${(ev) => stopEventFromActivatingCardWideActions(ev)}
|
||||
@@ -105,11 +102,11 @@ export class FrigateCardSubmenu extends LitElement {
|
||||
// propagation is forbidden by the @click handler on
|
||||
// <ha-button-menu>.
|
||||
allowPropagation: true,
|
||||
hasHold: frigateCardHasAction(this.submenu.hold_action),
|
||||
hasDoubleClick: frigateCardHasAction(this.submenu.double_tap_action),
|
||||
hasHold: hasAction(this.submenu.hold_action),
|
||||
hasDoubleClick: hasAction(this.submenu.double_tap_action),
|
||||
})}
|
||||
>
|
||||
<frigate-card-icon
|
||||
<advanced-camera-card-icon
|
||||
?allow-override-non-active-styles=${true}
|
||||
style="${style}"
|
||||
.hass=${this.hass}
|
||||
@@ -118,7 +115,7 @@ export class FrigateCardSubmenu extends LitElement {
|
||||
icon: this.submenu.icon,
|
||||
}
|
||||
: this.submenu.icon}
|
||||
></frigate-card-icon>
|
||||
></advanced-camera-card-icon>
|
||||
</ha-icon-button>
|
||||
${items.map(this._renderItem.bind(this))}
|
||||
</ha-button-menu>
|
||||
@@ -130,8 +127,8 @@ export class FrigateCardSubmenu extends LitElement {
|
||||
}
|
||||
}
|
||||
|
||||
@customElement('frigate-card-submenu-select')
|
||||
export class FrigateCardSubmenuSelect extends LitElement {
|
||||
@customElement('advanced-camera-card-submenu-select')
|
||||
export class AdvancedCameraCardSubmenuSelect extends LitElement {
|
||||
@property({ attribute: false })
|
||||
public hass?: HomeAssistant;
|
||||
|
||||
@@ -220,7 +217,7 @@ export class FrigateCardSubmenuSelect extends LitElement {
|
||||
fallback: 'mdi:format-list-bulleted',
|
||||
},
|
||||
|
||||
type: 'custom:frigate-card-menu-submenu',
|
||||
type: 'custom:advanced-camera-card-menu-submenu',
|
||||
items: [],
|
||||
};
|
||||
|
||||
@@ -261,16 +258,16 @@ export class FrigateCardSubmenuSelect extends LitElement {
|
||||
}
|
||||
|
||||
protected render(): TemplateResult {
|
||||
return html` <frigate-card-submenu
|
||||
return html` <advanced-camera-card-submenu
|
||||
.hass=${this.hass}
|
||||
.submenu=${this._generatedSubmenu}
|
||||
></frigate-card-submenu>`;
|
||||
></advanced-camera-card-submenu>`;
|
||||
}
|
||||
}
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
'frigate-card-submenu': FrigateCardSubmenu;
|
||||
'frigate-card-submenu-select': FrigateCardSubmenuSelect;
|
||||
'advanced-camera-card-submenu': AdvancedCameraCardSubmenu;
|
||||
'advanced-camera-card-submenu-select': AdvancedCameraCardSubmenuSelect;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,26 +1,26 @@
|
||||
import { CSSResultGroup, LitElement, TemplateResult, html, unsafeCSS } from 'lit';
|
||||
import { createRef, ref, Ref } from 'lit/directives/ref.js';
|
||||
import { customElement, property } from 'lit/decorators.js';
|
||||
import { DrawerIcons, FrigateCardDrawer } from './drawer.js';
|
||||
import { DrawerIcons, AdvancedCameraCardDrawer } from './drawer.js';
|
||||
|
||||
import './drawer.js';
|
||||
|
||||
import surroundBasicStyle from '../scss/surround-basic.scss';
|
||||
|
||||
interface FrigateCardDrawerOpen {
|
||||
interface AdvancedCameraCardDrawerOpen {
|
||||
drawer: 'left' | 'right';
|
||||
}
|
||||
|
||||
@customElement('frigate-card-surround-basic')
|
||||
export class FrigateCardSurroundBasic extends LitElement {
|
||||
@customElement('advanced-camera-card-surround-basic')
|
||||
export class AdvancedCameraCardSurroundBasic extends LitElement {
|
||||
@property({ attribute: false })
|
||||
public drawerIcons?: {
|
||||
left?: DrawerIcons;
|
||||
right?: DrawerIcons;
|
||||
};
|
||||
|
||||
protected _refDrawerLeft: Ref<FrigateCardDrawer> = createRef();
|
||||
protected _refDrawerRight: Ref<FrigateCardDrawer> = createRef();
|
||||
protected _refDrawerLeft: Ref<AdvancedCameraCardDrawer> = createRef();
|
||||
protected _refDrawerRight: Ref<AdvancedCameraCardDrawer> = createRef();
|
||||
protected _boundDrawerHandler = this._drawerHandler.bind(this);
|
||||
|
||||
/**
|
||||
@@ -28,8 +28,8 @@ export class FrigateCardSurroundBasic extends LitElement {
|
||||
*/
|
||||
connectedCallback(): void {
|
||||
super.connectedCallback();
|
||||
this.addEventListener('frigate-card:drawer:open', this._boundDrawerHandler);
|
||||
this.addEventListener('frigate-card:drawer:close', this._boundDrawerHandler);
|
||||
this.addEventListener('advanced-camera-card:drawer:open', this._boundDrawerHandler);
|
||||
this.addEventListener('advanced-camera-card:drawer:close', this._boundDrawerHandler);
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -37,12 +37,18 @@ export class FrigateCardSurroundBasic extends LitElement {
|
||||
*/
|
||||
disconnectedCallback(): void {
|
||||
super.disconnectedCallback();
|
||||
this.removeEventListener('frigate-card:drawer:open', this._boundDrawerHandler);
|
||||
this.removeEventListener('frigate-card:drawer:close', this._boundDrawerHandler);
|
||||
this.removeEventListener(
|
||||
'advanced-camera-card:drawer:open',
|
||||
this._boundDrawerHandler,
|
||||
);
|
||||
this.removeEventListener(
|
||||
'advanced-camera-card:drawer:close',
|
||||
this._boundDrawerHandler,
|
||||
);
|
||||
}
|
||||
|
||||
protected _drawerHandler(ev: Event) {
|
||||
const drawer = (ev as CustomEvent<FrigateCardDrawerOpen>).detail.drawer;
|
||||
const drawer = (ev as CustomEvent<AdvancedCameraCardDrawerOpen>).detail.drawer;
|
||||
const open = ev.type.endsWith(':open');
|
||||
if (drawer === 'left' && this._refDrawerLeft.value) {
|
||||
this._refDrawerLeft.value.open = open;
|
||||
@@ -54,20 +60,20 @@ export class FrigateCardSurroundBasic extends LitElement {
|
||||
protected render(): TemplateResult | void {
|
||||
return html` <slot name="above"></slot>
|
||||
<slot></slot>
|
||||
<frigate-card-drawer
|
||||
<advanced-camera-card-drawer
|
||||
${ref(this._refDrawerLeft)}
|
||||
location="left"
|
||||
.icons=${this.drawerIcons?.left}
|
||||
>
|
||||
<slot name="left"></slot>
|
||||
</frigate-card-drawer>
|
||||
<frigate-card-drawer
|
||||
</advanced-camera-card-drawer>
|
||||
<advanced-camera-card-drawer
|
||||
${ref(this._refDrawerRight)}
|
||||
location="right"
|
||||
.icons=${this.drawerIcons?.right}
|
||||
>
|
||||
<slot name="right"></slot>
|
||||
</frigate-card-drawer>
|
||||
</advanced-camera-card-drawer>
|
||||
<slot name="below"></slot>`;
|
||||
}
|
||||
|
||||
@@ -81,6 +87,6 @@ export class FrigateCardSurroundBasic extends LitElement {
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
'frigate-card-surround-basic': FrigateCardSurroundBasic;
|
||||
'advanced-camera-card-surround-basic': AdvancedCameraCardSurroundBasic;
|
||||
}
|
||||
}
|
||||
|
||||
+17
-15
@@ -17,12 +17,12 @@ import {
|
||||
} from '../config/types.js';
|
||||
import basicBlockStyle from '../scss/basic-block.scss';
|
||||
import { ExtendedHomeAssistant } from '../types.js';
|
||||
import { contentsChanged, dispatchFrigateCardEvent } from '../utils/basic.js';
|
||||
import { contentsChanged, dispatchAdvancedCameraCardEvent } from '../utils/basic.js';
|
||||
import './surround-basic.js';
|
||||
import { ThumbnailCarouselTap } from './thumbnail-carousel.js';
|
||||
|
||||
@customElement('frigate-card-surround')
|
||||
export class FrigateCardSurround extends LitElement {
|
||||
@customElement('advanced-camera-card-surround')
|
||||
export class AdvancedCameraCardSurround extends LitElement {
|
||||
@property({ attribute: false })
|
||||
public hass?: ExtendedHomeAssistant;
|
||||
|
||||
@@ -110,20 +110,22 @@ export class FrigateCardSurround extends LitElement {
|
||||
// request to view thumbnails and re-dispatches a request to open the drawer
|
||||
// (if the thumbnails are in a drawer). The new event needs to be dispatched
|
||||
// from the origin of the inbound event, so it can be handled by
|
||||
// <frigate-card-surround> .
|
||||
// <advanced-camera-card-surround> .
|
||||
if (this.thumbnailConfig && this._hasDrawer()) {
|
||||
dispatchFrigateCardEvent(ev.composedPath()[0], 'drawer:' + action, {
|
||||
dispatchAdvancedCameraCardEvent(ev.composedPath()[0], 'drawer:' + action, {
|
||||
drawer: this.thumbnailConfig.mode,
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
return html` <frigate-card-surround-basic
|
||||
@frigate-card:thumbnails:open=${(ev: CustomEvent) => changeDrawer(ev, 'open')}
|
||||
@frigate-card:thumbnails:close=${(ev: CustomEvent) => changeDrawer(ev, 'close')}
|
||||
return html` <advanced-camera-card-surround-basic
|
||||
@advanced-camera-card:thumbnails:open=${(ev: CustomEvent) =>
|
||||
changeDrawer(ev, 'open')}
|
||||
@advanced-camera-card:thumbnails:close=${(ev: CustomEvent) =>
|
||||
changeDrawer(ev, 'close')}
|
||||
>
|
||||
${this.thumbnailConfig && this.thumbnailConfig.mode !== 'none'
|
||||
? html` <frigate-card-thumbnail-carousel
|
||||
? html` <advanced-camera-card-thumbnail-carousel
|
||||
slot=${this.thumbnailConfig.mode}
|
||||
.hass=${this.hass}
|
||||
.config=${this.thumbnailConfig}
|
||||
@@ -131,7 +133,7 @@ export class FrigateCardSurround extends LitElement {
|
||||
.fadeThumbnails=${view.isViewerView()}
|
||||
.viewManagerEpoch=${this.viewManagerEpoch}
|
||||
.selected=${view.queryResults?.getSelectedIndex() ?? undefined}
|
||||
@frigate-card:thumbnail-carousel:tap=${(
|
||||
@advanced-camera-card:thumbnail-carousel:tap=${(
|
||||
ev: CustomEvent<ThumbnailCarouselTap>,
|
||||
) => {
|
||||
const media = ev.detail.queryResults.getSelectedResult();
|
||||
@@ -150,10 +152,10 @@ export class FrigateCardSurround extends LitElement {
|
||||
}
|
||||
}}
|
||||
>
|
||||
</frigate-card-thumbnail-carousel>`
|
||||
</advanced-camera-card-thumbnail-carousel>`
|
||||
: ''}
|
||||
${this.timelineConfig && this.timelineConfig.mode !== 'none'
|
||||
? html` <frigate-card-timeline-core
|
||||
? html` <advanced-camera-card-timeline-core
|
||||
slot=${this.timelineConfig.mode}
|
||||
.hass=${this.hass}
|
||||
.viewManagerEpoch=${this.viewManagerEpoch}
|
||||
@@ -169,10 +171,10 @@ export class FrigateCardSurround extends LitElement {
|
||||
.cameraManager=${this.cameraManager}
|
||||
.cardWideConfig=${this.cardWideConfig}
|
||||
>
|
||||
</frigate-card-timeline-core>`
|
||||
</advanced-camera-card-timeline-core>`
|
||||
: ''}
|
||||
<slot></slot>
|
||||
</frigate-card-surround-basic>`;
|
||||
</advanced-camera-card-surround-basic>`;
|
||||
}
|
||||
|
||||
static get styles(): CSSResultGroup {
|
||||
@@ -182,6 +184,6 @@ export class FrigateCardSurround extends LitElement {
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
'frigate-card-surround': FrigateCardSurround;
|
||||
'advanced-camera-card-surround': AdvancedCameraCardSurround;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -9,23 +9,23 @@ import {
|
||||
import { customElement, property } from 'lit/decorators.js';
|
||||
import { classMap } from 'lit/directives/class-map.js';
|
||||
import { CameraManager } from '../camera-manager/manager.js';
|
||||
import { ViewManagerEpoch } from '../card-controller/view/types.js';
|
||||
import { ThumbnailsControlConfig } from '../config/types.js';
|
||||
import thumbnailCarouselStyle from '../scss/thumbnail-carousel.scss';
|
||||
import { ExtendedHomeAssistant } from '../types.js';
|
||||
import { stopEventFromActivatingCardWideActions } from '../utils/action.js';
|
||||
import { dispatchFrigateCardEvent } from '../utils/basic.js';
|
||||
import { dispatchAdvancedCameraCardEvent } from '../utils/basic.js';
|
||||
import { CarouselDirection } from '../utils/embla/carousel-controller.js';
|
||||
import { MediaQueriesResults } from '../view/media-queries-results';
|
||||
import './carousel.js';
|
||||
import './thumbnail.js';
|
||||
import { ViewManagerEpoch } from '../card-controller/view/types.js';
|
||||
|
||||
export interface ThumbnailCarouselTap {
|
||||
queryResults: MediaQueriesResults;
|
||||
}
|
||||
|
||||
@customElement('frigate-card-thumbnail-carousel')
|
||||
export class FrigateCardThumbnailCarousel extends LitElement {
|
||||
@customElement('advanced-camera-card-thumbnail-carousel')
|
||||
export class AdvancedCameraCardThumbnailCarousel extends LitElement {
|
||||
@property({ attribute: false })
|
||||
public hass?: ExtendedHomeAssistant;
|
||||
|
||||
@@ -46,7 +46,10 @@ export class FrigateCardThumbnailCarousel extends LitElement {
|
||||
protected willUpdate(changedProps: PropertyValues): void {
|
||||
if (changedProps.has('config')) {
|
||||
if (this.config?.size) {
|
||||
this.style.setProperty('--frigate-card-thumbnail-size', `${this.config.size}px`);
|
||||
this.style.setProperty(
|
||||
'--advanced-camera-card-thumbnail-size',
|
||||
`${this.config.size}px`,
|
||||
);
|
||||
}
|
||||
const direction = this._getDirection();
|
||||
if (direction) {
|
||||
@@ -68,7 +71,7 @@ export class FrigateCardThumbnailCarousel extends LitElement {
|
||||
|
||||
if (changedProps.has('viewManagerEpoch')) {
|
||||
this.style.setProperty(
|
||||
'--frigate-card-carousel-thumbnail-opacity',
|
||||
'--advanced-camera-card-carousel-thumbnail-opacity',
|
||||
!this.fadeThumbnails || this._getSelectedSlide() === null ? '1.0' : '0.4',
|
||||
);
|
||||
}
|
||||
@@ -94,7 +97,7 @@ export class FrigateCardThumbnailCarousel extends LitElement {
|
||||
};
|
||||
|
||||
slides.push(
|
||||
html` <frigate-card-thumbnail
|
||||
html` <advanced-camera-card-thumbnail
|
||||
class="${classMap(classes)}"
|
||||
.cameraManager=${this.cameraManager}
|
||||
.hass=${this.hass}
|
||||
@@ -108,7 +111,7 @@ export class FrigateCardThumbnailCarousel extends LitElement {
|
||||
@click=${(ev: Event) => {
|
||||
const view = this.viewManagerEpoch?.manager.getView();
|
||||
if (view && view.queryResults) {
|
||||
dispatchFrigateCardEvent<ThumbnailCarouselTap>(
|
||||
dispatchAdvancedCameraCardEvent<ThumbnailCarouselTap>(
|
||||
this,
|
||||
'thumbnail-carousel:tap',
|
||||
{
|
||||
@@ -119,7 +122,7 @@ export class FrigateCardThumbnailCarousel extends LitElement {
|
||||
stopEventFromActivatingCardWideActions(ev);
|
||||
}}
|
||||
>
|
||||
</frigate-card-thumbnail>`,
|
||||
</advanced-camera-card-thumbnail>`,
|
||||
);
|
||||
}
|
||||
return slides;
|
||||
@@ -140,13 +143,13 @@ export class FrigateCardThumbnailCarousel extends LitElement {
|
||||
return;
|
||||
}
|
||||
|
||||
return html`<frigate-card-carousel
|
||||
return html`<advanced-camera-card-carousel
|
||||
direction=${direction}
|
||||
.selected=${this._getSelectedSlide() ?? 0}
|
||||
.dragFree=${true}
|
||||
>
|
||||
${this._thumbnailSlides}
|
||||
</frigate-card-carousel>`;
|
||||
</advanced-camera-card-carousel>`;
|
||||
}
|
||||
|
||||
static get styles(): CSSResultGroup {
|
||||
@@ -156,6 +159,6 @@ export class FrigateCardThumbnailCarousel extends LitElement {
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
'frigate-card-thumbnail-carousel': FrigateCardThumbnailCarousel;
|
||||
'advanced-camera-card-thumbnail-carousel': AdvancedCameraCardThumbnailCarousel;
|
||||
}
|
||||
}
|
||||
|
||||
+55
-55
@@ -14,7 +14,7 @@ import { CameraManager } from '../camera-manager/manager.js';
|
||||
import { CameraManagerCameraMetadata } from '../camera-manager/types.js';
|
||||
import { RemoveContextViewModifier } from '../card-controller/view/modifiers/remove-context.js';
|
||||
import { ViewManagerEpoch } from '../card-controller/view/types.js';
|
||||
import { dispatchFrigateCardErrorEvent } from '../components-lib/message/dispatch.js';
|
||||
import { dispatchAdvancedCameraCardErrorEvent } from '../components-lib/message/dispatch.js';
|
||||
import { localize } from '../localize/localize.js';
|
||||
import thumbnailDetailsStyle from '../scss/thumbnail-details.scss';
|
||||
import thumbnailFeatureTextStyle from '../scss/thumbnail-feature-text.scss';
|
||||
@@ -37,8 +37,8 @@ import { EventViewMedia, RecordingViewMedia, ViewMedia } from '../view/media.js'
|
||||
// The minimum width of a thumbnail with details enabled.
|
||||
export const THUMBNAIL_DETAILS_WIDTH_MIN = 300;
|
||||
|
||||
@customElement('frigate-card-thumbnail-feature-thumbnail')
|
||||
export class FrigateCardThumbnailFeatureThumbnail extends LitElement {
|
||||
@customElement('advanced-camera-card-thumbnail-feature-thumbnail')
|
||||
export class AdvancedCameraCardThumbnailFeatureThumbnail extends LitElement {
|
||||
@property({ attribute: false })
|
||||
public thumbnail?: string;
|
||||
|
||||
@@ -105,10 +105,10 @@ export class FrigateCardThumbnailFeatureThumbnail extends LitElement {
|
||||
}
|
||||
|
||||
protected render(): TemplateResult | void {
|
||||
const imageOff = html`<frigate-card-icon
|
||||
const imageOff = html`<advanced-camera-card-icon
|
||||
.icon=${{ icon: 'mdi:image-off' }}
|
||||
title=${localize('thumbnail.no_thumbnail')}
|
||||
></frigate-card-icon> `;
|
||||
></advanced-camera-card-icon> `;
|
||||
|
||||
if (!this._embedThumbnailTask || this._thumbnailError) {
|
||||
return imageOff;
|
||||
@@ -134,8 +134,8 @@ export class FrigateCardThumbnailFeatureThumbnail extends LitElement {
|
||||
}
|
||||
}
|
||||
|
||||
@customElement('frigate-card-thumbnail-feature-text')
|
||||
export class FrigateCardThumbnailFeatureText extends LitElement {
|
||||
@customElement('advanced-camera-card-thumbnail-feature-text')
|
||||
export class AdvancedCameraCardThumbnailFeatureText extends LitElement {
|
||||
@property({ attribute: false })
|
||||
public date?: Date;
|
||||
|
||||
@@ -151,10 +151,10 @@ export class FrigateCardThumbnailFeatureText extends LitElement {
|
||||
}
|
||||
return html`
|
||||
${this.cameraMetadata?.engineIcon
|
||||
? html`<frigate-card-icon
|
||||
? html`<advanced-camera-card-icon
|
||||
class="background"
|
||||
.icon=${{ icon: this.cameraMetadata.engineIcon }}
|
||||
></frigate-card-icon>`
|
||||
></advanced-camera-card-icon>`
|
||||
: ''}
|
||||
<div class="content">
|
||||
<div class="title">${format(this.date, 'HH:mm')}</div>
|
||||
@@ -171,8 +171,8 @@ export class FrigateCardThumbnailFeatureText extends LitElement {
|
||||
}
|
||||
}
|
||||
|
||||
@customElement('frigate-card-thumbnail-details-event')
|
||||
export class FrigateCardThumbnailDetailsEvent extends LitElement {
|
||||
@customElement('advanced-camera-card-thumbnail-details-event')
|
||||
export class AdvancedCameraCardThumbnailDetailsEvent extends LitElement {
|
||||
@property({ attribute: false })
|
||||
public media?: EventViewMedia;
|
||||
|
||||
@@ -214,18 +214,18 @@ export class FrigateCardThumbnailDetailsEvent extends LitElement {
|
||||
<div class="details">
|
||||
${startTime
|
||||
? html` <div>
|
||||
<frigate-card-icon
|
||||
<advanced-camera-card-icon
|
||||
title=${localize('event.start')}
|
||||
.icon=${{ icon: 'mdi:calendar-clock-outline' }}
|
||||
></frigate-card-icon>
|
||||
></advanced-camera-card-icon>
|
||||
<span title="${startTime}">${startTime}</span>
|
||||
</div>
|
||||
${duration || inProgress
|
||||
? html` <div>
|
||||
<frigate-card-icon
|
||||
<advanced-camera-card-icon
|
||||
title=${localize('event.duration')}
|
||||
.icon=${{ icon: 'mdi:clock-outline' }}
|
||||
></frigate-card-icon>
|
||||
></advanced-camera-card-icon>
|
||||
${duration ? html`<span title="${duration}">${duration}</span>` : ''}
|
||||
${inProgress
|
||||
? html`<span title="${inProgress}">${inProgress}</span>`
|
||||
@@ -235,37 +235,37 @@ export class FrigateCardThumbnailDetailsEvent extends LitElement {
|
||||
: ''}
|
||||
${this.cameraTitle
|
||||
? html` <div>
|
||||
<frigate-card-icon
|
||||
<advanced-camera-card-icon
|
||||
title=${localize('event.camera')}
|
||||
.icon=${{ icon: 'mdi:cctv' }}
|
||||
></frigate-card-icon>
|
||||
></advanced-camera-card-icon>
|
||||
<span title="${this.cameraTitle}">${this.cameraTitle}</span>
|
||||
</div>`
|
||||
: ''}
|
||||
${where
|
||||
? html` <div>
|
||||
<frigate-card-icon
|
||||
<advanced-camera-card-icon
|
||||
title=${localize('event.where')}
|
||||
.icon=${{ icon: 'mdi:map-marker-outline' }}
|
||||
></frigate-card-icon>
|
||||
></advanced-camera-card-icon>
|
||||
<span title="${where}">${where}</span>
|
||||
</div>`
|
||||
: html``}
|
||||
${tags
|
||||
? html` <div>
|
||||
<frigate-card-icon
|
||||
<advanced-camera-card-icon
|
||||
title=${localize('event.tag')}
|
||||
.icon=${{ icon: 'mdi:tag' }}
|
||||
></frigate-card-icon>
|
||||
></advanced-camera-card-icon>
|
||||
<span title="${tags}">${tags}</span>
|
||||
</div>`
|
||||
: html``}
|
||||
${seek
|
||||
? html` <div>
|
||||
<frigate-card-icon
|
||||
<advanced-camera-card-icon
|
||||
title=${localize('event.seek')}
|
||||
.icon=${{ icon: 'mdi:clock-fast' }}
|
||||
></frigate-card-icon>
|
||||
></advanced-camera-card-icon>
|
||||
<span title="${seek}">${seek}</span>
|
||||
</div>`
|
||||
: html``}
|
||||
@@ -278,8 +278,8 @@ export class FrigateCardThumbnailDetailsEvent extends LitElement {
|
||||
}
|
||||
}
|
||||
|
||||
@customElement('frigate-card-thumbnail-details-recording')
|
||||
export class FrigateCardThumbnailDetailsRecording extends LitElement {
|
||||
@customElement('advanced-camera-card-thumbnail-details-recording')
|
||||
export class AdvancedCameraCardThumbnailDetailsRecording extends LitElement {
|
||||
@property({ attribute: false })
|
||||
public media?: RecordingViewMedia;
|
||||
|
||||
@@ -315,18 +315,18 @@ export class FrigateCardThumbnailDetailsRecording extends LitElement {
|
||||
<div class="details">
|
||||
${startTime
|
||||
? html` <div>
|
||||
<frigate-card-icon
|
||||
<advanced-camera-card-icon
|
||||
title=${localize('recording.start')}
|
||||
.icon=${{ icon: 'mdi:calendar-clock-outline' }}
|
||||
></frigate-card-icon>
|
||||
></advanced-camera-card-icon>
|
||||
<span title="${startTime}">${startTime}</span>
|
||||
</div>
|
||||
${duration || inProgress
|
||||
? html` <div>
|
||||
<frigate-card-icon
|
||||
<advanced-camera-card-icon
|
||||
title=${localize('recording.duration')}
|
||||
.icon=${{ icon: 'mdi:clock-outline' }}
|
||||
></frigate-card-icon>
|
||||
></advanced-camera-card-icon>
|
||||
${duration ? html`<span title="${duration}">${duration}</span>` : ''}
|
||||
${inProgress
|
||||
? html`<span title="${inProgress}">${inProgress}</span>`
|
||||
@@ -336,19 +336,19 @@ export class FrigateCardThumbnailDetailsRecording extends LitElement {
|
||||
: ''}
|
||||
${seek
|
||||
? html` <div>
|
||||
<frigate-card-icon
|
||||
<advanced-camera-card-icon
|
||||
title=${localize('event.seek')}
|
||||
.icon=${{ icon: 'mdi:clock-fast' }}
|
||||
></frigate-card-icon>
|
||||
></advanced-camera-card-icon>
|
||||
<span title="${seek}">${seek}</span>
|
||||
</div>`
|
||||
: html``}
|
||||
${eventCount !== null
|
||||
? html`<div>
|
||||
<frigate-card-icon
|
||||
<advanced-camera-card-icon
|
||||
title=${localize('recording.events')}
|
||||
.icon=${{ icon: 'mdi:shield-alert' }}
|
||||
></frigate-card-icon>
|
||||
></advanced-camera-card-icon>
|
||||
<span title="${eventCount}">${eventCount}</span>
|
||||
</div>`
|
||||
: ``}
|
||||
@@ -361,8 +361,8 @@ export class FrigateCardThumbnailDetailsRecording extends LitElement {
|
||||
}
|
||||
}
|
||||
|
||||
@customElement('frigate-card-thumbnail')
|
||||
export class FrigateCardThumbnail extends LitElement {
|
||||
@customElement('advanced-camera-card-thumbnail')
|
||||
export class AdvancedCameraCardThumbnail extends LitElement {
|
||||
// Performance: During timeline scrubbing, hass may be updated continuously.
|
||||
// As it is not needed for the thumbnail rendering itself, it does not trigger
|
||||
// a re-render. The HomeAssistant object may be required for thumbnail signing
|
||||
@@ -439,25 +439,25 @@ export class FrigateCardThumbnail extends LitElement {
|
||||
|
||||
return html`
|
||||
${ViewMediaClassifier.isEvent(this.media) && thumbnail
|
||||
? html`<frigate-card-thumbnail-feature-thumbnail
|
||||
? html`<advanced-camera-card-thumbnail-feature-thumbnail
|
||||
aria-label="${title ?? ''}"
|
||||
title=${title}
|
||||
.hass=${this.hass}
|
||||
.date=${this.media.getStartTime() ?? undefined}
|
||||
.thumbnail=${thumbnail ?? undefined}
|
||||
></frigate-card-thumbnail-feature-thumbnail>`
|
||||
></advanced-camera-card-thumbnail-feature-thumbnail>`
|
||||
: ViewMediaClassifier.isEvent(this.media) ||
|
||||
ViewMediaClassifier.isRecording(this.media)
|
||||
? html`<frigate-card-thumbnail-feature-text
|
||||
? html`<advanced-camera-card-thumbnail-feature-text
|
||||
aria-label="${title ?? ''}"
|
||||
title="${title ?? ''}"
|
||||
.cameraMetadata=${cameraMetadata}
|
||||
.showCameraTitle=${!this.details}
|
||||
.date=${this.media.getStartTime() ?? undefined}
|
||||
></frigate-card-thumbnail-feature-text>`
|
||||
></advanced-camera-card-thumbnail-feature-text>`
|
||||
: html``}
|
||||
${shouldShowFavoriteControl
|
||||
? html` <frigate-card-icon
|
||||
? html` <advanced-camera-card-icon
|
||||
class="${classMap(starClasses)}"
|
||||
title=${localize('thumbnail.retain_indefinitely')}
|
||||
.icon=${{ icon: this.media.isFavorite() ? 'mdi:star' : 'mdi:star-outline' }}
|
||||
@@ -476,23 +476,23 @@ export class FrigateCardThumbnail extends LitElement {
|
||||
this.requestUpdate();
|
||||
}
|
||||
}}
|
||||
/></frigate-card-icon>`
|
||||
/></advanced-camera-card-icon>`
|
||||
: ``}
|
||||
${this.details && ViewMediaClassifier.isEvent(this.media)
|
||||
? html`<frigate-card-thumbnail-details-event
|
||||
? html`<advanced-camera-card-thumbnail-details-event
|
||||
.media=${this.media ?? undefined}
|
||||
.cameraTitle=${cameraMetadata?.title}
|
||||
.seek=${this.seek}
|
||||
></frigate-card-thumbnail-details-event>`
|
||||
></advanced-camera-card-thumbnail-details-event>`
|
||||
: this.details && ViewMediaClassifier.isRecording(this.media)
|
||||
? html`<frigate-card-thumbnail-details-recording
|
||||
? html`<advanced-camera-card-thumbnail-details-recording
|
||||
.media=${this.media ?? undefined}
|
||||
.cameraTitle=${cameraMetadata?.title}
|
||||
.seek=${this.seek}
|
||||
></frigate-card-thumbnail-details-recording>`
|
||||
></advanced-camera-card-thumbnail-details-recording>`
|
||||
: html``}
|
||||
${shouldShowTimelineControl
|
||||
? html`<frigate-card-icon
|
||||
? html`<advanced-camera-card-icon
|
||||
class="timeline"
|
||||
.icon=${{ icon: 'mdi:target' }}
|
||||
title=${localize('thumbnail.timeline')}
|
||||
@@ -512,10 +512,10 @@ export class FrigateCardThumbnail extends LitElement {
|
||||
modifiers: [new RemoveContextViewModifier(['timeline'])],
|
||||
});
|
||||
}}
|
||||
></frigate-card-icon>`
|
||||
></advanced-camera-card-icon>`
|
||||
: ''}
|
||||
${shouldShowDownloadControl
|
||||
? html` <frigate-card-icon
|
||||
? html` <advanced-camera-card-icon
|
||||
class="download"
|
||||
.icon=${{ icon: 'mdi:download' }}
|
||||
title=${localize('thumbnail.download')}
|
||||
@@ -525,11 +525,11 @@ export class FrigateCardThumbnail extends LitElement {
|
||||
try {
|
||||
await downloadMedia(this.hass, this.cameraManager, this.media);
|
||||
} catch (error: unknown) {
|
||||
dispatchFrigateCardErrorEvent(this, error);
|
||||
dispatchAdvancedCameraCardErrorEvent(this, error);
|
||||
}
|
||||
}
|
||||
}}
|
||||
></frigate-card-icon>`
|
||||
></advanced-camera-card-icon>`
|
||||
: ``}
|
||||
`;
|
||||
}
|
||||
@@ -544,10 +544,10 @@ export class FrigateCardThumbnail extends LitElement {
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
'frigate-card-thumbnail': FrigateCardThumbnail;
|
||||
'frigate-card-thumbnail-details-recording': FrigateCardThumbnailDetailsRecording;
|
||||
'frigate-card-thumbnail-details-event': FrigateCardThumbnailDetailsEvent;
|
||||
'frigate-card-thumbnail-feature-text': FrigateCardThumbnailFeatureText;
|
||||
'frigate-card-thumbnail-feature-thumbnail': FrigateCardThumbnailFeatureThumbnail;
|
||||
'advanced-camera-card-thumbnail': AdvancedCameraCardThumbnail;
|
||||
'advanced-camera-card-thumbnail-details-recording': AdvancedCameraCardThumbnailDetailsRecording;
|
||||
'advanced-camera-card-thumbnail-details-event': AdvancedCameraCardThumbnailDetailsEvent;
|
||||
'advanced-camera-card-thumbnail-feature-text': AdvancedCameraCardThumbnailFeatureText;
|
||||
'advanced-camera-card-thumbnail-feature-thumbnail': AdvancedCameraCardThumbnailFeatureThumbnail;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -34,17 +34,17 @@ import { convertRangeToCacheFriendlyTimes } from '../camera-manager/utils/range-
|
||||
import { MergeContextViewModifier } from '../card-controller/view/modifiers/merge-context';
|
||||
import { ViewManagerEpoch } from '../card-controller/view/types';
|
||||
import {
|
||||
FrigateCardTimelineItem,
|
||||
AdvancedCameraCardTimelineItem,
|
||||
TimelineDataSource,
|
||||
} from '../components-lib/timeline-source';
|
||||
import {
|
||||
AdvancedCameraCardView,
|
||||
CameraConfig,
|
||||
CardWideConfig,
|
||||
FrigateCardView,
|
||||
ThumbnailsControlBaseConfig,
|
||||
TimelineCoreConfig,
|
||||
TimelinePanMode,
|
||||
frigateCardConfigDefaults,
|
||||
configDefaults,
|
||||
} from '../config/types';
|
||||
import { localize } from '../localize/localize';
|
||||
import timelineCoreStyle from '../scss/timeline-core.scss';
|
||||
@@ -52,7 +52,7 @@ import { ExtendedHomeAssistant } from '../types';
|
||||
import { stopEventFromActivatingCardWideActions } from '../utils/action';
|
||||
import {
|
||||
contentsChanged,
|
||||
dispatchFrigateCardEvent,
|
||||
dispatchAdvancedCameraCardEvent,
|
||||
formatDateAndTime,
|
||||
isHoverableDevice,
|
||||
isTruthy,
|
||||
@@ -73,11 +73,11 @@ import {
|
||||
import { MediaQueriesResults } from '../view/media-queries-results';
|
||||
import { mergeViewContext } from '../view/view';
|
||||
import './date-picker.js';
|
||||
import { DatePickerEvent, FrigateCardDatePicker } from './date-picker.js';
|
||||
import { AdvancedCameraCardDatePicker, DatePickerEvent } from './date-picker.js';
|
||||
import './icon';
|
||||
import './thumbnail.js';
|
||||
|
||||
interface FrigateCardGroupData {
|
||||
interface AdvancedCameraCardGroupData {
|
||||
id: string;
|
||||
content: string;
|
||||
}
|
||||
@@ -123,8 +123,8 @@ const TIMELINE_TARGET_BAR_ID = 'target_bar';
|
||||
* A simgple thumbnail wrapper class for use in the timeline where Lit data
|
||||
* bindings are not available.
|
||||
*/
|
||||
@customElement('frigate-card-timeline-thumbnail')
|
||||
export class FrigateCardTimelineThumbnail extends LitElement {
|
||||
@customElement('advanced-camera-card-timeline-thumbnail')
|
||||
export class AdvancedCameraCardTimelineThumbnail extends LitElement {
|
||||
@property({ attribute: true })
|
||||
public item?: IdType;
|
||||
|
||||
@@ -153,11 +153,14 @@ export class FrigateCardTimelineThumbnail extends LitElement {
|
||||
item: this.item,
|
||||
};
|
||||
this.dispatchEvent(
|
||||
new ThumbnailDataRequestEvent(`frigate-card:timeline:thumbnail-data-request`, {
|
||||
composed: true,
|
||||
bubbles: true,
|
||||
detail: dataRequest,
|
||||
}),
|
||||
new ThumbnailDataRequestEvent(
|
||||
`advanced-camera-card:timeline:thumbnail-data-request`,
|
||||
{
|
||||
composed: true,
|
||||
bubbles: true,
|
||||
detail: dataRequest,
|
||||
},
|
||||
),
|
||||
);
|
||||
|
||||
if (
|
||||
@@ -170,19 +173,19 @@ export class FrigateCardTimelineThumbnail extends LitElement {
|
||||
return html``;
|
||||
}
|
||||
|
||||
return html` <frigate-card-thumbnail
|
||||
return html` <advanced-camera-card-thumbnail
|
||||
.hass=${dataRequest.hass}
|
||||
.cameraManager=${dataRequest.cameraManager}
|
||||
.media=${dataRequest.media}
|
||||
.viewManagerEpoch=${dataRequest.viewManagerEpoch}
|
||||
?details=${this.details}
|
||||
>
|
||||
</frigate-card-thumbnail>`;
|
||||
</advanced-camera-card-thumbnail>`;
|
||||
}
|
||||
}
|
||||
|
||||
@customElement('frigate-card-timeline-core')
|
||||
export class FrigateCardTimelineCore extends LitElement {
|
||||
@customElement('advanced-camera-card-timeline-core')
|
||||
export class AdvancedCameraCardTimelineCore extends LitElement {
|
||||
@property({ attribute: false })
|
||||
public hass?: ExtendedHomeAssistant;
|
||||
|
||||
@@ -219,7 +222,7 @@ export class FrigateCardTimelineCore extends LitElement {
|
||||
|
||||
protected _targetBarVisible = false;
|
||||
|
||||
protected _refDatePicker: Ref<FrigateCardDatePicker> = createRef();
|
||||
protected _refDatePicker: Ref<AdvancedCameraCardDatePicker> = createRef();
|
||||
protected _refTimeline: Ref<HTMLElement> = createRef();
|
||||
protected _timeline?: ExtendedTimeline;
|
||||
|
||||
@@ -256,11 +259,11 @@ export class FrigateCardTimelineCore extends LitElement {
|
||||
// Note that changes to attributes here must be mirrored in the xss
|
||||
// whitelist in `_getOptions()` .
|
||||
return `
|
||||
<frigate-card-timeline-thumbnail
|
||||
<advanced-camera-card-timeline-thumbnail
|
||||
item='${item.id}'
|
||||
${this.thumbnailConfig?.show_details ? 'details' : ''}
|
||||
>
|
||||
</frigate-card-timeline-thumbnail>`;
|
||||
</advanced-camera-card-timeline-thumbnail>`;
|
||||
}
|
||||
|
||||
protected _handleThumbnailDataRequest(request: ThumbnailDataRequestEvent): void {
|
||||
@@ -302,7 +305,7 @@ export class FrigateCardTimelineCore extends LitElement {
|
||||
: 'mdi:camera-lock';
|
||||
|
||||
return html` <div
|
||||
@frigate-card:timeline:thumbnail-data-request=${this._handleThumbnailDataRequest.bind(
|
||||
@advanced-camera-card:timeline:thumbnail-data-request=${this._handleThumbnailDataRequest.bind(
|
||||
this,
|
||||
)}
|
||||
class="timeline"
|
||||
@@ -310,7 +313,7 @@ export class FrigateCardTimelineCore extends LitElement {
|
||||
>
|
||||
<div class="timeline-tools">
|
||||
${this._shouldSupportSeeking()
|
||||
? html` <frigate-card-icon
|
||||
? html` <advanced-camera-card-icon
|
||||
.icon=${{ icon: panIcon }}
|
||||
@click=${() => {
|
||||
this._panMode =
|
||||
@@ -325,17 +328,19 @@ export class FrigateCardTimelineCore extends LitElement {
|
||||
aria-label="${panTitle}"
|
||||
title="${panTitle}"
|
||||
>
|
||||
</frigate-card-icon>`
|
||||
</advanced-camera-card-icon>`
|
||||
: ''}
|
||||
<frigate-card-date-picker
|
||||
<advanced-camera-card-date-picker
|
||||
${ref(this._refDatePicker)}
|
||||
@frigate-card:date-picker:change=${(ev: CustomEvent<DatePickerEvent>) => {
|
||||
@advanced-camera-card:date-picker:change=${(
|
||||
ev: CustomEvent<DatePickerEvent>,
|
||||
) => {
|
||||
if (ev.detail.date) {
|
||||
this._timeline?.moveTo(ev.detail.date);
|
||||
}
|
||||
}}
|
||||
>
|
||||
</frigate-card-date-picker>
|
||||
</advanced-camera-card-date-picker>
|
||||
</div>
|
||||
</div>`;
|
||||
}
|
||||
@@ -498,7 +503,7 @@ export class FrigateCardTimelineCore extends LitElement {
|
||||
newResults = results;
|
||||
}
|
||||
|
||||
const desiredView: FrigateCardView = this.mini
|
||||
const desiredView: AdvancedCameraCardView = this.mini
|
||||
? targetTime >= new Date()
|
||||
? 'live'
|
||||
: 'media'
|
||||
@@ -629,7 +634,7 @@ export class FrigateCardTimelineCore extends LitElement {
|
||||
}
|
||||
}
|
||||
|
||||
dispatchFrigateCardEvent(this, `thumbnails:${drawerAction}`);
|
||||
dispatchAdvancedCameraCardEvent(this, `thumbnails:${drawerAction}`);
|
||||
|
||||
this._ignoreClick = false;
|
||||
}
|
||||
@@ -726,7 +731,7 @@ export class FrigateCardTimelineCore extends LitElement {
|
||||
* @returns The dataset.
|
||||
*/
|
||||
protected _getGroups(): DataGroupCollectionType {
|
||||
const groups: FrigateCardGroupData[] = [];
|
||||
const groups: AdvancedCameraCardGroupData[] = [];
|
||||
(this.cameraIDs ?? []).forEach((cameraID: string) => {
|
||||
if (!this.hass || !this.cameraManager) {
|
||||
return;
|
||||
@@ -789,10 +794,7 @@ export class FrigateCardTimelineCore extends LitElement {
|
||||
* Get the configured window length in seconds.
|
||||
*/
|
||||
protected _getConfiguredWindowSeconds(): number {
|
||||
return (
|
||||
this.timelineConfig?.window_seconds ??
|
||||
frigateCardConfigDefaults.timeline.window_seconds
|
||||
);
|
||||
return this.timelineConfig?.window_seconds ?? configDefaults.timeline.window_seconds;
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -862,8 +864,8 @@ export class FrigateCardTimelineCore extends LitElement {
|
||||
|
||||
clusterCriteria: (first: TimelineItem, second: TimelineItem): boolean => {
|
||||
const selectedIDs = this._getAllSelectedMediaIDsFromView();
|
||||
const firstMedia = (<FrigateCardTimelineItem>first).media;
|
||||
const secondMedia = (<FrigateCardTimelineItem>second).media;
|
||||
const firstMedia = (<AdvancedCameraCardTimelineItem>first).media;
|
||||
const secondMedia = (<AdvancedCameraCardTimelineItem>second).media;
|
||||
|
||||
// Never include the currently selected item in a cluster, and
|
||||
// never group different object types together (e.g. person and
|
||||
@@ -909,7 +911,7 @@ export class FrigateCardTimelineCore extends LitElement {
|
||||
disabled: false,
|
||||
filterOptions: {
|
||||
whiteList: {
|
||||
'frigate-card-timeline-thumbnail': ['details', 'item'],
|
||||
'advanced-camera-card-timeline-thumbnail': ['details', 'item'],
|
||||
div: ['title'],
|
||||
span: ['style'],
|
||||
},
|
||||
@@ -1117,11 +1119,11 @@ export class FrigateCardTimelineCore extends LitElement {
|
||||
if (changedProps.has('thumbnailConfig')) {
|
||||
if (this.thumbnailConfig) {
|
||||
this.style.setProperty(
|
||||
'--frigate-card-thumbnail-size',
|
||||
'--advanced-camera-card-thumbnail-size',
|
||||
`${this.thumbnailConfig.size}px`,
|
||||
);
|
||||
} else {
|
||||
this.style.removeProperty('--frigate-card-thumbnail-size');
|
||||
this.style.removeProperty('--advanced-camera-card-thumbnail-size');
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1248,7 +1250,7 @@ export class FrigateCardTimelineCore extends LitElement {
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
'frigate-card-timeline-thumbnail': FrigateCardTimelineThumbnail;
|
||||
'frigate-card-timeline-core': FrigateCardTimelineCore;
|
||||
'advanced-camera-card-timeline-thumbnail': AdvancedCameraCardTimelineThumbnail;
|
||||
'advanced-camera-card-timeline-core': AdvancedCameraCardTimelineCore;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -8,8 +8,8 @@ import { ExtendedHomeAssistant } from '../types';
|
||||
import './surround.js';
|
||||
import './timeline-core.js';
|
||||
|
||||
@customElement('frigate-card-timeline')
|
||||
export class FrigateCardTimeline extends LitElement {
|
||||
@customElement('advanced-camera-card-timeline')
|
||||
export class AdvancedCameraCardTimeline extends LitElement {
|
||||
@property({ attribute: false })
|
||||
public hass?: ExtendedHomeAssistant;
|
||||
|
||||
@@ -31,7 +31,7 @@ export class FrigateCardTimeline extends LitElement {
|
||||
}
|
||||
|
||||
return html`
|
||||
<frigate-card-timeline-core
|
||||
<advanced-camera-card-timeline-core
|
||||
.hass=${this.hass}
|
||||
.viewManagerEpoch=${this.viewManagerEpoch}
|
||||
.timelineConfig=${this.timelineConfig}
|
||||
@@ -45,7 +45,7 @@ export class FrigateCardTimeline extends LitElement {
|
||||
? 'play'
|
||||
: 'select'}
|
||||
>
|
||||
</frigate-card-timeline-core>
|
||||
</advanced-camera-card-timeline-core>
|
||||
`;
|
||||
}
|
||||
|
||||
@@ -56,6 +56,6 @@ export class FrigateCardTimeline extends LitElement {
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
'frigate-card-timeline': FrigateCardTimeline;
|
||||
'advanced-camera-card-timeline': AdvancedCameraCardTimeline;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -15,7 +15,7 @@ import { ViewManagerEpoch } from '../../card-controller/view/types.js';
|
||||
import { MediaActionsController } from '../../components-lib/media-actions-controller.js';
|
||||
import {
|
||||
CardWideConfig,
|
||||
frigateCardConfigDefaults,
|
||||
configDefaults,
|
||||
TransitionEffect,
|
||||
ViewerConfig,
|
||||
} from '../../config/types.js';
|
||||
@@ -23,8 +23,8 @@ import { localize } from '../../localize/localize.js';
|
||||
import '../../patches/ha-hls-player.js';
|
||||
import viewerCarouselStyle from '../../scss/viewer-carousel.scss';
|
||||
import {
|
||||
AdvancedCameraCardMediaPlayer,
|
||||
ExtendedHomeAssistant,
|
||||
FrigateCardMediaPlayer,
|
||||
MediaLoadedInfo,
|
||||
} from '../../types.js';
|
||||
import { stopEventFromActivatingCardWideActions } from '../../utils/action.js';
|
||||
@@ -42,7 +42,7 @@ import { renderMessage } from '../message.js';
|
||||
import '../next-prev-control.js';
|
||||
import '../ptz.js';
|
||||
import './provider.js';
|
||||
import { FrigateCardViewerProvider } from './provider.js';
|
||||
import { AdvancedCameraCardViewerProvider } from './provider.js';
|
||||
|
||||
interface MediaNeighbor {
|
||||
index: number;
|
||||
@@ -54,10 +54,10 @@ interface MediaNeighbors {
|
||||
next?: MediaNeighbor;
|
||||
}
|
||||
|
||||
const FRIGATE_CARD_VIEWER_PROVIDER = 'frigate-card-viewer-provider';
|
||||
const ADVANCED_CAMERA_CARD_VIEWER_PROVIDER = 'advanced-camera-card-viewer-provider';
|
||||
|
||||
@customElement('frigate-card-viewer-carousel')
|
||||
export class FrigateCardViewerCarousel extends LitElement {
|
||||
@customElement('advanced-camera-card-viewer-carousel')
|
||||
export class AdvancedCameraCardViewerCarousel extends LitElement {
|
||||
@property({ attribute: false })
|
||||
public hass?: ExtendedHomeAssistant;
|
||||
|
||||
@@ -92,7 +92,7 @@ export class FrigateCardViewerCarousel extends LitElement {
|
||||
|
||||
protected _media: ViewMedia[] | null = null;
|
||||
protected _mediaActionsController = new MediaActionsController();
|
||||
protected _player: FrigateCardMediaPlayer | null = null;
|
||||
protected _player: AdvancedCameraCardMediaPlayer | null = null;
|
||||
protected _refCarousel: Ref<HTMLElement> = createRef();
|
||||
|
||||
updated(changedProperties: PropertyValues): void {
|
||||
@@ -134,7 +134,7 @@ export class FrigateCardViewerCarousel extends LitElement {
|
||||
protected _getTransitionEffect(): TransitionEffect {
|
||||
return (
|
||||
this.viewerConfig?.transition_effect ??
|
||||
frigateCardConfigDefaults.media_viewer.transition_effect
|
||||
configDefaults.media_viewer.transition_effect
|
||||
);
|
||||
}
|
||||
|
||||
@@ -227,8 +227,8 @@ export class FrigateCardViewerCarousel extends LitElement {
|
||||
}
|
||||
|
||||
const viewerProvider = slide?.querySelector(
|
||||
'frigate-card-viewer-provider',
|
||||
) as FrigateCardViewerProvider | null;
|
||||
'advanced-camera-card-viewer-provider',
|
||||
) as AdvancedCameraCardViewerProvider | null;
|
||||
if (viewerProvider) {
|
||||
viewerProvider.load = true;
|
||||
}
|
||||
@@ -259,7 +259,7 @@ export class FrigateCardViewerCarousel extends LitElement {
|
||||
protected willUpdate(changedProps: PropertyValues): void {
|
||||
if (changedProps.has('viewerConfig')) {
|
||||
this._mediaActionsController.setOptions({
|
||||
playerSelector: FRIGATE_CARD_VIEWER_PROVIDER,
|
||||
playerSelector: ADVANCED_CAMERA_CARD_VIEWER_PROVIDER,
|
||||
...(this.viewerConfig?.auto_play && {
|
||||
autoPlayConditions: this.viewerConfig.auto_play,
|
||||
}),
|
||||
@@ -330,7 +330,7 @@ export class FrigateCardViewerCarousel extends LitElement {
|
||||
? 'previous'
|
||||
: 'next';
|
||||
|
||||
return html` <frigate-card-next-previous-control
|
||||
return html` <advanced-camera-card-next-previous-control
|
||||
slot=${side}
|
||||
.hass=${this.hass}
|
||||
.side=${side}
|
||||
@@ -342,7 +342,7 @@ export class FrigateCardViewerCarousel extends LitElement {
|
||||
scroll(scrollDirection);
|
||||
stopEventFromActivatingCardWideActions(ev);
|
||||
}}
|
||||
></frigate-card-next-previous-control>`;
|
||||
></advanced-camera-card-next-previous-control>`;
|
||||
}
|
||||
|
||||
protected render(): TemplateResult | void {
|
||||
@@ -373,40 +373,40 @@ export class FrigateCardViewerCarousel extends LitElement {
|
||||
const view = this.viewManagerEpoch?.manager.getView();
|
||||
|
||||
return html`
|
||||
<frigate-card-carousel
|
||||
<advanced-camera-card-carousel
|
||||
${ref(this._refCarousel)}
|
||||
.dragEnabled=${this.viewerConfig?.draggable ?? true}
|
||||
.plugins=${guard([this.viewerConfig, this._media], this._getPlugins.bind(this))}
|
||||
.selected=${this._selected}
|
||||
transitionEffect=${this._getTransitionEffect()}
|
||||
@frigate-card:carousel:select=${(ev: CustomEvent<CarouselSelected>) => {
|
||||
@advanced-camera-card:carousel:select=${(ev: CustomEvent<CarouselSelected>) => {
|
||||
this._setViewSelectedIndex(ev.detail.index);
|
||||
}}
|
||||
@frigate-card:media:loaded=${(ev: CustomEvent<MediaLoadedInfo>) => {
|
||||
@advanced-camera-card:media:loaded=${(ev: CustomEvent<MediaLoadedInfo>) => {
|
||||
this._player = ev.detail.player ?? null;
|
||||
this._seekHandler();
|
||||
}}
|
||||
@frigate-card:media:unloaded=${() => {
|
||||
@advanced-camera-card:media:unloaded=${() => {
|
||||
this._player = null;
|
||||
}}
|
||||
>
|
||||
${this.showControls ? this._renderNextPrevious('left', neighbors) : ''}
|
||||
${guard([this._media, view], () => this._getSlides())}
|
||||
${this.showControls ? this._renderNextPrevious('right', neighbors) : ''}
|
||||
</frigate-card-carousel>
|
||||
</advanced-camera-card-carousel>
|
||||
${view
|
||||
? html` <frigate-card-ptz
|
||||
? html` <advanced-camera-card-ptz
|
||||
.config=${this.viewerConfig?.controls.ptz}
|
||||
.forceVisibility=${view?.context?.ptzControls?.enabled}
|
||||
>
|
||||
</frigate-card-ptz>`
|
||||
</advanced-camera-card-ptz>`
|
||||
: ''}
|
||||
<div class="seek-warning">
|
||||
<frigate-card-icon
|
||||
<advanced-camera-card-icon
|
||||
title="${localize('media_viewer.unseekable')}"
|
||||
.icon=${{ icon: 'mdi:clock-remove' }}
|
||||
>
|
||||
</frigate-card-icon>
|
||||
</advanced-camera-card-icon>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
@@ -448,7 +448,7 @@ export class FrigateCardViewerCarousel extends LitElement {
|
||||
}
|
||||
|
||||
return html` <div class="embla__slide">
|
||||
<frigate-card-viewer-provider
|
||||
<advanced-camera-card-viewer-provider
|
||||
.hass=${this.hass}
|
||||
.viewManagerEpoch=${this.viewManagerEpoch}
|
||||
.media=${media}
|
||||
@@ -457,7 +457,7 @@ export class FrigateCardViewerCarousel extends LitElement {
|
||||
.cameraManager=${this.cameraManager}
|
||||
.load=${!this.viewerConfig.lazy_load}
|
||||
.cardWideConfig=${this.cardWideConfig}
|
||||
></frigate-card-viewer-provider>
|
||||
></advanced-camera-card-viewer-provider>
|
||||
</div>`;
|
||||
}
|
||||
|
||||
@@ -468,6 +468,6 @@ export class FrigateCardViewerCarousel extends LitElement {
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
'frigate-card-viewer-carousel': FrigateCardViewerCarousel;
|
||||
'advanced-camera-card-viewer-carousel': AdvancedCameraCardViewerCarousel;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -18,8 +18,8 @@ import { ExtendedHomeAssistant } from '../../types.js';
|
||||
import { ResolvedMediaCache } from '../../utils/ha/resolved-media.js';
|
||||
import './carousel';
|
||||
|
||||
@customElement('frigate-card-viewer-grid')
|
||||
export class FrigateCardViewerGrid extends LitElement {
|
||||
@customElement('advanced-camera-card-viewer-grid')
|
||||
export class AdvancedCameraCardViewerGrid extends LitElement {
|
||||
@property({ attribute: false })
|
||||
public hass?: ExtendedHomeAssistant;
|
||||
|
||||
@@ -41,7 +41,7 @@ export class FrigateCardViewerGrid extends LitElement {
|
||||
protected _renderCarousel(filterCamera?: string): TemplateResult {
|
||||
const selectedCameraID = this.viewManagerEpoch?.manager.getView()?.camera;
|
||||
return html`
|
||||
<frigate-card-viewer-carousel
|
||||
<advanced-camera-card-viewer-carousel
|
||||
grid-id=${ifDefined(filterCamera)}
|
||||
.hass=${this.hass}
|
||||
.viewManagerEpoch=${this.viewManagerEpoch}
|
||||
@@ -52,7 +52,7 @@ export class FrigateCardViewerGrid extends LitElement {
|
||||
.cardWideConfig=${this.cardWideConfig}
|
||||
.showControls=${!filterCamera || selectedCameraID === filterCamera}
|
||||
>
|
||||
</frigate-card-viewer-carousel>
|
||||
</advanced-camera-card-viewer-carousel>
|
||||
`;
|
||||
}
|
||||
|
||||
@@ -92,14 +92,15 @@ export class FrigateCardViewerGrid extends LitElement {
|
||||
}
|
||||
|
||||
return html`
|
||||
<frigate-card-media-grid
|
||||
<advanced-camera-card-media-grid
|
||||
.selected=${view?.camera}
|
||||
.displayConfig=${this.viewerConfig?.display}
|
||||
@frigate-card:media-grid:selected=${(ev: CustomEvent<MediaGridSelected>) =>
|
||||
this._gridSelectCamera(ev.detail.selected)}
|
||||
@advanced-camera-card:media-grid:selected=${(
|
||||
ev: CustomEvent<MediaGridSelected>,
|
||||
) => this._gridSelectCamera(ev.detail.selected)}
|
||||
>
|
||||
${[...cameraIDs].map((cameraID) => this._renderCarousel(cameraID))}
|
||||
</frigate-card-media-grid>
|
||||
</advanced-camera-card-media-grid>
|
||||
`;
|
||||
}
|
||||
|
||||
@@ -110,6 +111,6 @@ export class FrigateCardViewerGrid extends LitElement {
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
'frigate-card-viewer-grid': FrigateCardViewerGrid;
|
||||
'advanced-camera-card-viewer-grid': AdvancedCameraCardViewerGrid;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -21,8 +21,8 @@ declare module 'view' {
|
||||
}
|
||||
}
|
||||
|
||||
@customElement('frigate-card-viewer')
|
||||
export class FrigateCardViewer extends LitElement {
|
||||
@customElement('advanced-camera-card-viewer')
|
||||
export class AdvancedCameraCardViewer extends LitElement {
|
||||
@property({ attribute: false })
|
||||
public hass?: ExtendedHomeAssistant;
|
||||
|
||||
@@ -68,7 +68,7 @@ export class FrigateCardViewer extends LitElement {
|
||||
});
|
||||
}
|
||||
|
||||
return html` <frigate-card-viewer-grid
|
||||
return html` <advanced-camera-card-viewer-grid
|
||||
.hass=${this.hass}
|
||||
.viewManagerEpoch=${this.viewManagerEpoch}
|
||||
.viewerConfig=${this.viewerConfig}
|
||||
@@ -76,7 +76,7 @@ export class FrigateCardViewer extends LitElement {
|
||||
.cameraManager=${this.cameraManager}
|
||||
.cardWideConfig=${this.cardWideConfig}
|
||||
>
|
||||
</frigate-card-viewer-grid>`;
|
||||
</advanced-camera-card-viewer-grid>`;
|
||||
}
|
||||
|
||||
static get styles(): CSSResultGroup {
|
||||
@@ -86,6 +86,6 @@ export class FrigateCardViewer extends LitElement {
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
'frigate-card-viewer': FrigateCardViewer;
|
||||
'advanced-camera-card-viewer': AdvancedCameraCardViewer;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -17,8 +17,8 @@ import { CardWideConfig, ViewerConfig } from '../../config/types.js';
|
||||
import '../../patches/ha-hls-player.js';
|
||||
import viewerProviderStyle from '../../scss/viewer-provider.scss';
|
||||
import {
|
||||
AdvancedCameraCardMediaPlayer,
|
||||
ExtendedHomeAssistant,
|
||||
FrigateCardMediaPlayer,
|
||||
FullscreenElement,
|
||||
ResolvedMedia,
|
||||
} from '../../types.js';
|
||||
@@ -54,10 +54,10 @@ import { MediaQueriesClassifier } from '../../view/media-queries-classifier.js';
|
||||
import { VideoContentType, ViewMedia } from '../../view/media.js';
|
||||
import { renderProgressIndicator } from '../progress-indicator.js';
|
||||
|
||||
@customElement('frigate-card-viewer-provider')
|
||||
export class FrigateCardViewerProvider
|
||||
@customElement('advanced-camera-card-viewer-provider')
|
||||
export class AdvancedCameraCardViewerProvider
|
||||
extends LitElement
|
||||
implements FrigateCardMediaPlayer
|
||||
implements AdvancedCameraCardMediaPlayer
|
||||
{
|
||||
@property({ attribute: false })
|
||||
public hass?: ExtendedHomeAssistant;
|
||||
@@ -86,8 +86,9 @@ export class FrigateCardViewerProvider
|
||||
@property({ attribute: false })
|
||||
public cardWideConfig?: CardWideConfig;
|
||||
|
||||
protected _refFrigateCardMediaPlayer: Ref<Element & FrigateCardMediaPlayer> =
|
||||
createRef();
|
||||
protected _refAdvancedCameraCardMediaPlayer: Ref<
|
||||
Element & AdvancedCameraCardMediaPlayer
|
||||
> = createRef();
|
||||
protected _refVideoProvider: Ref<HTMLVideoElement> = createRef();
|
||||
protected _refImageProvider: Ref<HTMLImageElement> = createRef();
|
||||
|
||||
@@ -97,33 +98,35 @@ export class FrigateCardViewerProvider
|
||||
public async play(): Promise<void> {
|
||||
await playMediaMutingIfNecessary(
|
||||
this,
|
||||
this._refFrigateCardMediaPlayer.value ?? this._refVideoProvider.value,
|
||||
this._refAdvancedCameraCardMediaPlayer.value ?? this._refVideoProvider.value,
|
||||
);
|
||||
}
|
||||
|
||||
public async pause(): Promise<void> {
|
||||
(this._refFrigateCardMediaPlayer.value || this._refVideoProvider.value)?.pause();
|
||||
(
|
||||
this._refAdvancedCameraCardMediaPlayer.value || this._refVideoProvider.value
|
||||
)?.pause();
|
||||
}
|
||||
|
||||
public async mute(): Promise<void> {
|
||||
if (this._refFrigateCardMediaPlayer.value) {
|
||||
this._refFrigateCardMediaPlayer.value?.mute();
|
||||
if (this._refAdvancedCameraCardMediaPlayer.value) {
|
||||
this._refAdvancedCameraCardMediaPlayer.value?.mute();
|
||||
} else if (this._refVideoProvider.value) {
|
||||
this._refVideoProvider.value.muted = true;
|
||||
}
|
||||
}
|
||||
|
||||
public async unmute(): Promise<void> {
|
||||
if (this._refFrigateCardMediaPlayer.value) {
|
||||
this._refFrigateCardMediaPlayer.value?.mute();
|
||||
if (this._refAdvancedCameraCardMediaPlayer.value) {
|
||||
this._refAdvancedCameraCardMediaPlayer.value?.mute();
|
||||
} else if (this._refVideoProvider.value) {
|
||||
this._refVideoProvider.value.muted = false;
|
||||
}
|
||||
}
|
||||
|
||||
public isMuted(): boolean {
|
||||
if (this._refFrigateCardMediaPlayer.value) {
|
||||
return this._refFrigateCardMediaPlayer.value?.isMuted() ?? true;
|
||||
if (this._refAdvancedCameraCardMediaPlayer.value) {
|
||||
return this._refAdvancedCameraCardMediaPlayer.value?.isMuted() ?? true;
|
||||
} else if (this._refVideoProvider.value) {
|
||||
return this._refVideoProvider.value.muted;
|
||||
}
|
||||
@@ -131,8 +134,8 @@ export class FrigateCardViewerProvider
|
||||
}
|
||||
|
||||
public async seek(seconds: number): Promise<void> {
|
||||
if (this._refFrigateCardMediaPlayer.value) {
|
||||
return this._refFrigateCardMediaPlayer.value.seek(seconds);
|
||||
if (this._refAdvancedCameraCardMediaPlayer.value) {
|
||||
return this._refAdvancedCameraCardMediaPlayer.value.seek(seconds);
|
||||
} else if (this._refVideoProvider.value) {
|
||||
hideMediaControlsTemporarily(this._refVideoProvider.value);
|
||||
this._refVideoProvider.value.currentTime = seconds;
|
||||
@@ -140,8 +143,8 @@ export class FrigateCardViewerProvider
|
||||
}
|
||||
|
||||
public async setControls(controls?: boolean): Promise<void> {
|
||||
if (this._refFrigateCardMediaPlayer.value) {
|
||||
return this._refFrigateCardMediaPlayer.value.setControls(controls);
|
||||
if (this._refAdvancedCameraCardMediaPlayer.value) {
|
||||
return this._refAdvancedCameraCardMediaPlayer.value.setControls(controls);
|
||||
} else if (this._refVideoProvider.value) {
|
||||
setControlsOnVideo(
|
||||
this._refVideoProvider.value,
|
||||
@@ -151,8 +154,8 @@ export class FrigateCardViewerProvider
|
||||
}
|
||||
|
||||
public isPaused(): boolean {
|
||||
if (this._refFrigateCardMediaPlayer.value) {
|
||||
return this._refFrigateCardMediaPlayer.value.isPaused();
|
||||
if (this._refAdvancedCameraCardMediaPlayer.value) {
|
||||
return this._refAdvancedCameraCardMediaPlayer.value.isPaused();
|
||||
} else if (this._refVideoProvider.value) {
|
||||
return this._refVideoProvider.value.paused;
|
||||
}
|
||||
@@ -160,8 +163,8 @@ export class FrigateCardViewerProvider
|
||||
}
|
||||
|
||||
public async getScreenshotURL(): Promise<string | null> {
|
||||
if (this._refFrigateCardMediaPlayer.value) {
|
||||
return await this._refFrigateCardMediaPlayer.value.getScreenshotURL();
|
||||
if (this._refAdvancedCameraCardMediaPlayer.value) {
|
||||
return await this._refAdvancedCameraCardMediaPlayer.value.getScreenshotURL();
|
||||
} else if (this._refVideoProvider.value) {
|
||||
return screenshotMedia(this._refVideoProvider.value);
|
||||
} else if (this._refImageProvider.value) {
|
||||
@@ -171,8 +174,8 @@ export class FrigateCardViewerProvider
|
||||
}
|
||||
|
||||
public getFullscreenElement(): FullscreenElement | null {
|
||||
if (this._refFrigateCardMediaPlayer.value) {
|
||||
return this._refFrigateCardMediaPlayer.value.getFullscreenElement();
|
||||
if (this._refAdvancedCameraCardMediaPlayer.value) {
|
||||
return this._refAdvancedCameraCardMediaPlayer.value.getFullscreenElement();
|
||||
} else if (this._refVideoProvider.value) {
|
||||
return this._refVideoProvider.value;
|
||||
}
|
||||
@@ -319,7 +322,7 @@ export class FrigateCardViewerProvider
|
||||
const view = this.viewManagerEpoch?.manager.getView();
|
||||
|
||||
return this.viewerConfig?.zoomable
|
||||
? html` <frigate-card-zoomer
|
||||
? html` <advanced-camera-card-zoomer
|
||||
.defaultSettings=${guard([cameraConfig?.dimensions?.layout], () =>
|
||||
cameraConfig?.dimensions?.layout
|
||||
? {
|
||||
@@ -329,13 +332,13 @@ export class FrigateCardViewerProvider
|
||||
: undefined,
|
||||
)}
|
||||
.settings=${mediaID ? view?.context?.zoom?.[mediaID]?.requested : undefined}
|
||||
@frigate-card:zoom:zoomed=${() => this.setControls(false)}
|
||||
@frigate-card:zoom:unzoomed=${() => this.setControls()}
|
||||
@frigate-card:zoom:change=${(ev: CustomEvent<ZoomSettingsObserved>) =>
|
||||
@advanced-camera-card:zoom:zoomed=${() => this.setControls(false)}
|
||||
@advanced-camera-card:zoom:unzoomed=${() => this.setControls()}
|
||||
@advanced-camera-card:zoom:change=${(ev: CustomEvent<ZoomSettingsObserved>) =>
|
||||
handleZoomSettingsObservedEvent(ev, this.viewManagerEpoch?.manager, mediaID)}
|
||||
>
|
||||
${template}
|
||||
</frigate-card-zoomer>`
|
||||
</advanced-camera-card-zoomer>`
|
||||
: template;
|
||||
}
|
||||
|
||||
@@ -355,8 +358,8 @@ export class FrigateCardViewerProvider
|
||||
return this._useZoomIfRequired(html`
|
||||
${ViewMediaClassifier.isVideo(this.media)
|
||||
? this.media.getVideoContentType() === VideoContentType.HLS
|
||||
? html`<frigate-card-ha-hls-player
|
||||
${ref(this._refFrigateCardMediaPlayer)}
|
||||
? html`<advanced-camera-card-ha-hls-player
|
||||
${ref(this._refAdvancedCameraCardMediaPlayer)}
|
||||
allow-exoplayer
|
||||
aria-label="${this.media.getTitle() ?? ''}"
|
||||
?autoplay=${false}
|
||||
@@ -368,7 +371,7 @@ export class FrigateCardViewerProvider
|
||||
.hass=${this.hass}
|
||||
?controls=${this.viewerConfig.controls.builtin}
|
||||
>
|
||||
</frigate-card-ha-hls-player>`
|
||||
</advanced-camera-card-ha-hls-player>`
|
||||
: html`
|
||||
<video
|
||||
${ref(this._refVideoProvider)}
|
||||
@@ -428,6 +431,6 @@ export class FrigateCardViewerProvider
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
'frigate-card-viewer-provider': FrigateCardViewerProvider;
|
||||
'advanced-camera-card-viewer-provider': AdvancedCameraCardViewerProvider;
|
||||
}
|
||||
}
|
||||
|
||||
+25
-25
@@ -13,9 +13,9 @@ import { ConditionsManagerEpoch } from '../card-controller/conditions-manager.js
|
||||
import { MicrophoneState } from '../card-controller/types.js';
|
||||
import { ViewManagerEpoch } from '../card-controller/view/types.js';
|
||||
import {
|
||||
AdvancedCameraCardConfig,
|
||||
CardWideConfig,
|
||||
FrigateCardConfig,
|
||||
RawFrigateCardConfig,
|
||||
RawAdvancedCameraCardConfig,
|
||||
} from '../config/types.js';
|
||||
import viewsStyle from '../scss/views.scss';
|
||||
import { ExtendedHomeAssistant } from '../types.js';
|
||||
@@ -27,8 +27,8 @@ import './surround.js';
|
||||
// something goes wrong.
|
||||
import './diagnostics.js';
|
||||
|
||||
@customElement('frigate-card-views')
|
||||
export class FrigateCardViews extends LitElement {
|
||||
@customElement('advanced-camera-card-views')
|
||||
export class AdvancedCameraCardViews extends LitElement {
|
||||
@property({ attribute: false })
|
||||
public hass?: ExtendedHomeAssistant;
|
||||
|
||||
@@ -39,16 +39,16 @@ export class FrigateCardViews extends LitElement {
|
||||
public cameraManager?: CameraManager;
|
||||
|
||||
@property({ attribute: false })
|
||||
public nonOverriddenConfig?: FrigateCardConfig;
|
||||
public nonOverriddenConfig?: AdvancedCameraCardConfig;
|
||||
|
||||
@property({ attribute: false })
|
||||
public overriddenConfig?: FrigateCardConfig;
|
||||
public overriddenConfig?: AdvancedCameraCardConfig;
|
||||
|
||||
@property({ attribute: false })
|
||||
public cardWideConfig?: CardWideConfig;
|
||||
|
||||
@property({ attribute: false })
|
||||
public rawConfig?: RawFrigateCardConfig;
|
||||
public rawConfig?: RawAdvancedCameraCardConfig;
|
||||
|
||||
@property({ attribute: false })
|
||||
public resolvedMediaCache?: ResolvedMediaCache;
|
||||
@@ -101,11 +101,11 @@ export class FrigateCardViews extends LitElement {
|
||||
// > v5.0.0-beta1 .
|
||||
//
|
||||
// These updates are necessary in these cases:
|
||||
// - conditionState: Required to let `frigate-card-live` calculate its own
|
||||
// - conditionState: Required to let `advanced-camera-card-live` calculate its own
|
||||
// overrides.
|
||||
// - hass: Required for anything that needs to sign URLs. Of note is
|
||||
// anything that renders an image (e.g. a thumbnail -- almost everything,
|
||||
// or the main `frigate-card-image` view).
|
||||
// or the main `advanced-camera-card-image` view).
|
||||
//
|
||||
// It should instead be possible to pass conditionState to live only (every
|
||||
// update required), and pass hass only once / 5 minutes (see
|
||||
@@ -165,7 +165,7 @@ export class FrigateCardViews extends LitElement {
|
||||
? this.cameraManager?.getStore().getCameraConfig(view.camera) ?? null
|
||||
: null;
|
||||
|
||||
return html` <frigate-card-surround
|
||||
return html` <advanced-camera-card-surround
|
||||
class="${classMap(overallClasses)}"
|
||||
.hass=${this.hass}
|
||||
.viewManagerEpoch=${this.viewManagerEpoch}
|
||||
@@ -175,28 +175,28 @@ export class FrigateCardViews extends LitElement {
|
||||
.cardWideConfig=${this.cardWideConfig}
|
||||
>
|
||||
${!this.hide && view?.is('image') && cameraConfig
|
||||
? html` <frigate-card-image
|
||||
? html` <advanced-camera-card-image
|
||||
.imageConfig=${this.overriddenConfig.image}
|
||||
.viewManagerEpoch=${this.viewManagerEpoch}
|
||||
.hass=${this.hass}
|
||||
.cameraConfig=${cameraConfig}
|
||||
.cameraManager=${this.cameraManager}
|
||||
>
|
||||
</frigate-card-image>`
|
||||
</advanced-camera-card-image>`
|
||||
: ``}
|
||||
${!this.hide && view?.isGalleryView()
|
||||
? html` <frigate-card-gallery
|
||||
? html` <advanced-camera-card-gallery
|
||||
.hass=${this.hass}
|
||||
.viewManagerEpoch=${this.viewManagerEpoch}
|
||||
.galleryConfig=${this.overriddenConfig.media_gallery}
|
||||
.cameraManager=${this.cameraManager}
|
||||
.cardWideConfig=${this.cardWideConfig}
|
||||
>
|
||||
</frigate-card-gallery>`
|
||||
</advanced-camera-card-gallery>`
|
||||
: ``}
|
||||
${!this.hide && view?.isViewerView()
|
||||
? html`
|
||||
<frigate-card-viewer
|
||||
<advanced-camera-card-viewer
|
||||
.hass=${this.hass}
|
||||
.viewManagerEpoch=${this.viewManagerEpoch}
|
||||
.viewerConfig=${this.overriddenConfig.media_viewer}
|
||||
@@ -204,37 +204,37 @@ export class FrigateCardViews extends LitElement {
|
||||
.cameraManager=${this.cameraManager}
|
||||
.cardWideConfig=${this.cardWideConfig}
|
||||
>
|
||||
</frigate-card-viewer>
|
||||
</advanced-camera-card-viewer>
|
||||
`
|
||||
: ``}
|
||||
${!this.hide && view?.is('timeline')
|
||||
? html` <frigate-card-timeline
|
||||
? html` <advanced-camera-card-timeline
|
||||
.hass=${this.hass}
|
||||
.viewManagerEpoch=${this.viewManagerEpoch}
|
||||
.timelineConfig=${this.overriddenConfig.timeline}
|
||||
.cameraManager=${this.cameraManager}
|
||||
.cardWideConfig=${this.cardWideConfig}
|
||||
>
|
||||
</frigate-card-timeline>`
|
||||
</advanced-camera-card-timeline>`
|
||||
: ``}
|
||||
${!this.hide && view?.is('diagnostics')
|
||||
? html` <frigate-card-diagnostics
|
||||
? html` <advanced-camera-card-diagnostics
|
||||
.hass=${this.hass}
|
||||
.rawConfig=${this.rawConfig}
|
||||
.deviceRegistryManager=${this.deviceRegistryManager}
|
||||
>
|
||||
</frigate-card-diagnostics>`
|
||||
</advanced-camera-card-diagnostics>`
|
||||
: ``}
|
||||
${
|
||||
// Note: Subtle difference in condition below vs the other views in order
|
||||
// to always render the live view for live.preload mode.
|
||||
|
||||
// Note: <frigate-card-live> uses nonOverriddenConfig rather than the
|
||||
// Note: <advanced-camera-card-live> uses nonOverriddenConfig rather than the
|
||||
// overriden config as it does it's own overriding as part of the camera
|
||||
// carousel.
|
||||
this._shouldLivePreload() || (!this.hide && view?.is('live'))
|
||||
? html`
|
||||
<frigate-card-live
|
||||
<advanced-camera-card-live
|
||||
.hass=${this.hass}
|
||||
.viewManagerEpoch=${this.viewManagerEpoch}
|
||||
.nonOverriddenLiveConfig=${this.nonOverriddenConfig.live}
|
||||
@@ -247,11 +247,11 @@ export class FrigateCardViews extends LitElement {
|
||||
.triggeredCameraIDs=${this.triggeredCameraIDs}
|
||||
class="${classMap(liveClasses)}"
|
||||
>
|
||||
</frigate-card-live>
|
||||
</advanced-camera-card-live>
|
||||
`
|
||||
: ``
|
||||
}
|
||||
</frigate-card-surround>`;
|
||||
</advanced-camera-card-surround>`;
|
||||
}
|
||||
|
||||
static get styles(): CSSResultGroup {
|
||||
@@ -261,6 +261,6 @@ export class FrigateCardViews extends LitElement {
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
'frigate-card-views': FrigateCardViews;
|
||||
'advanced-camera-card-views': AdvancedCameraCardViews;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -11,8 +11,8 @@ import { ZoomController } from '../components-lib/zoom/zoom-controller.js';
|
||||
import { setOrRemoveAttribute } from '../utils/basic.js';
|
||||
import { PartialZoomSettings } from '../components-lib/zoom/types.js';
|
||||
|
||||
@customElement('frigate-card-zoomer')
|
||||
export class FrigateCardZoomer extends LitElement {
|
||||
@customElement('advanced-camera-card-zoomer')
|
||||
export class AdvancedCameraCardZoomer extends LitElement {
|
||||
protected _zoom: ZoomController | null = null;
|
||||
|
||||
@property({ attribute: false })
|
||||
@@ -29,8 +29,8 @@ export class FrigateCardZoomer extends LitElement {
|
||||
|
||||
connectedCallback(): void {
|
||||
super.connectedCallback();
|
||||
this.addEventListener('frigate-card:zoom:zoomed', this._zoomHandler);
|
||||
this.addEventListener('frigate-card:zoom:unzoomed', this._unzoomHandler);
|
||||
this.addEventListener('advanced-camera-card:zoom:zoomed', this._zoomHandler);
|
||||
this.addEventListener('advanced-camera-card:zoom:unzoomed', this._unzoomHandler);
|
||||
|
||||
// Call for an update to activate.
|
||||
this.requestUpdate();
|
||||
@@ -38,8 +38,8 @@ export class FrigateCardZoomer extends LitElement {
|
||||
|
||||
disconnectedCallback(): void {
|
||||
this._zoom?.deactivate();
|
||||
this.removeEventListener('frigate-card:zoom:zoomed', this._zoomHandler);
|
||||
this.removeEventListener('frigate-card:zoom:unzoomed', this._unzoomHandler);
|
||||
this.removeEventListener('advanced-camera-card:zoom:zoomed', this._zoomHandler);
|
||||
this.removeEventListener('advanced-camera-card:zoom:unzoomed', this._unzoomHandler);
|
||||
}
|
||||
|
||||
protected willUpdate(changedProps: PropertyValues): void {
|
||||
@@ -87,6 +87,6 @@ export class FrigateCardZoomer extends LitElement {
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
'frigate-card-zoomer': FrigateCardZoomer;
|
||||
'advanced-camera-card-zoomer': AdvancedCameraCardZoomer;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user