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

Add show_controls to editor support.

Browse Source
This commit is contained in:
Dermot Duffy
2022-04-10 11:12:08 -07:00
parent ea10d1a634
commit 216afa015f
7 changed files with 53 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/thumbnail-carousel.ts
+1 -1
View File
@@ -179,7 +179,7 @@ export class FrigateCardThumbnailCarousel extends FrigateCardCarousel {
.target=${parent}
.childIndex=${childIndex}
?details=${this._config?.show_details}
?controls=${true}
?controls=${this._config?.show_controls}
thumbnail_size=${ifDefined(this._config?.size)}
class="${classMap(classes)}"
@click=${(ev) => {
src/components/timeline.ts
+6 -7
View File
@@ -1,5 +1,3 @@
// TODO: Editor support for timeline (incl. in views).
// TODO: Make thumbnail controls optional (in all places that use thumbnails).
// TODO: Search for TODOs and logging statements.
import {
@@ -66,9 +64,7 @@ interface TimelineViewContext extends ViewContext {
type TimelineMediaType = 'all' | 'clips' | 'snapshots';
const isHoverableDevice = window.matchMedia(
'(hover: hover) and (pointer: fine)'
)
const isHoverableDevice = window.matchMedia('(hover: hover) and (pointer: fine)');
/**
* A manager to maintain/fetch timeline events.
@@ -391,13 +387,16 @@ export class FrigateCardTimelineCore extends LitElement {
const eventAttr = source.frigate?.event
? `event='${JSON.stringify(source.frigate.event)}'`
: '';
const detailsAttr = this.timelineConfig?.controls.thumbnails.show_details
? 'details'
: '';
// Cannot use Lit data-bindings as visjs requires a string for tooltips.
// Note that changes to attributes here must be mirrored in the xss
// whitelist in `_getOptions()` .
return `
<frigate-card-thumbnail
details
${detailsAttr}
thumbnail="${source.thumbnail}"
label="${source.title}"
${eventAttr}
@@ -731,7 +730,7 @@ export class FrigateCardTimelineCore extends LitElement {
this.timelineConfig.media,
windowStart,
windowEnd,
)
);
this._generateThumbnails();
this._timeline.setSelection(event ? [event.id] : [], {
src/const.ts
+6
View File
@@ -47,6 +47,8 @@ export const CONF_EVENT_VIEWER_CONTROLS_THUMBNAILS_MODE =
`${CONF_EVENT_VIEWER}.controls.thumbnails.mode` as const;
export const CONF_EVENT_VIEWER_CONTROLS_THUMBNAILS_SHOW_DETAILS =
`${CONF_EVENT_VIEWER}.controls.thumbnails.show_details` as const;
export const CONF_EVENT_VIEWER_CONTROLS_THUMBNAILS_SHOW_CONTROLS =
`${CONF_EVENT_VIEWER}.controls.thumbnails.show_controls` as const;
export const CONF_EVENT_VIEWER_CONTROLS_THUMBNAILS_SIZE =
`${CONF_EVENT_VIEWER}.controls.thumbnails.size` as const;
export const CONF_EVENT_VIEWER_CONTROLS_TITLE_MODE =
@@ -68,6 +70,8 @@ export const CONF_LIVE_CONTROLS_THUMBNAILS_SIZE =
`${CONF_LIVE}.controls.thumbnails.size` as const;
export const CONF_LIVE_CONTROLS_THUMBNAILS_SHOW_DETAILS =
`${CONF_LIVE}.controls.thumbnails.show_details` as const;
export const CONF_LIVE_CONTROLS_THUMBNAILS_SHOW_CONTROLS =
`${CONF_LIVE}.controls.thumbnails.show_controls` as const;
export const CONF_LIVE_CONTROLS_TITLE_MODE = `${CONF_LIVE}.controls.title.mode` as const;
export const CONF_LIVE_CONTROLS_TITLE_DURATION_SECONDS =
`${CONF_LIVE}.controls.title.duration_seconds` as const;
@@ -90,6 +94,8 @@ export const CONF_TIMELINE_MEDIA = `${CONF_TIMELINE}.media` as const;
export const CONF_TIMELINE_CONTROLS_THUMBNAILS_MODE = `${CONF_TIMELINE}.controls.thumbnails.mode` as const;
export const CONF_TIMELINE_CONTROLS_THUMBNAILS_SIZE = `${CONF_TIMELINE}.controls.thumbnails.size` as const;
export const CONF_TIMELINE_CONTROLS_THUMBNAILS_SHOW_DETAILS = `${CONF_TIMELINE}.controls.thumbnails.show_details` as const;
export const CONF_TIMELINE_CONTROLS_THUMBNAILS_SHOW_CONTROLS =
`${CONF_TIMELINE}.controls.thumbnails.show_controls` as const;
export const CONF_MENU = 'menu' as const;
export const CONF_MENU_BUTTONS_FRIGATE = `${CONF_MENU}.buttons.frigate` as const;
src/editor.ts
+17 -1
View File
@@ -32,6 +32,7 @@ import {
CONF_EVENT_VIEWER_CONTROLS_NEXT_PREVIOUS_SIZE,
CONF_EVENT_VIEWER_CONTROLS_NEXT_PREVIOUS_STYLE,
CONF_EVENT_VIEWER_CONTROLS_THUMBNAILS_MODE,
CONF_EVENT_VIEWER_CONTROLS_THUMBNAILS_SHOW_CONTROLS,
CONF_EVENT_VIEWER_CONTROLS_THUMBNAILS_SHOW_DETAILS,
CONF_EVENT_VIEWER_CONTROLS_THUMBNAILS_SIZE,
CONF_EVENT_VIEWER_CONTROLS_TITLE_DURATION_SECONDS,
@@ -47,6 +48,7 @@ import {
CONF_LIVE_CONTROLS_NEXT_PREVIOUS_STYLE,
CONF_LIVE_CONTROLS_THUMBNAILS_MEDIA,
CONF_LIVE_CONTROLS_THUMBNAILS_MODE,
CONF_LIVE_CONTROLS_THUMBNAILS_SHOW_CONTROLS,
CONF_LIVE_CONTROLS_THUMBNAILS_SHOW_DETAILS,
CONF_LIVE_CONTROLS_THUMBNAILS_SIZE,
CONF_LIVE_CONTROLS_TITLE_DURATION_SECONDS,
@@ -68,6 +70,7 @@ import {
CONF_MENU_MODE,
CONF_TIMELINE_CLUSTERING_THRESHOLD,
CONF_TIMELINE_CONTROLS_THUMBNAILS_MODE,
CONF_TIMELINE_CONTROLS_THUMBNAILS_SHOW_CONTROLS,
CONF_TIMELINE_CONTROLS_THUMBNAILS_SHOW_DETAILS,
CONF_TIMELINE_CONTROLS_THUMBNAILS_SIZE,
CONF_TIMELINE_MEDIA,
@@ -191,6 +194,7 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor
{ value: 'clip', label: localize('config.view.views.clip') },
{ value: 'snapshot', label: localize('config.view.views.snapshot') },
{ value: 'image', label: localize('config.view.views.image') },
{ value: 'timeline', label: localize('config.view.views.timeline') },
];
protected _cameraSelectViewModes = [
@@ -913,6 +917,10 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor
CONF_LIVE_CONTROLS_THUMBNAILS_SHOW_DETAILS,
defaults.live.controls.thumbnails.show_details,
)}
${this._renderSwitch(
CONF_LIVE_CONTROLS_THUMBNAILS_SHOW_CONTROLS,
defaults.live.controls.thumbnails.show_controls,
)}
${this._renderNumberInput(
CONF_LIVE_CONTROLS_TITLE_DURATION_SECONDS,
0,
@@ -964,6 +972,10 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor
CONF_EVENT_VIEWER_CONTROLS_THUMBNAILS_SHOW_DETAILS,
defaults.event_viewer.controls.thumbnails.show_details,
)}
${this._renderSwitch(
CONF_EVENT_VIEWER_CONTROLS_THUMBNAILS_SHOW_CONTROLS,
defaults.event_viewer.controls.thumbnails.show_controls,
)}
${this._renderOptionSelector(
CONF_EVENT_VIEWER_CONTROLS_TITLE_MODE,
this._titleModes,
@@ -999,7 +1011,11 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor
${this._renderStringInput(CONF_TIMELINE_CONTROLS_THUMBNAILS_SIZE)}
${this._renderSwitch(
CONF_TIMELINE_CONTROLS_THUMBNAILS_SHOW_DETAILS,
defaults.event_viewer.controls.thumbnails.show_details,
defaults.timeline.controls.thumbnails.show_details,
)}
${this._renderSwitch(
CONF_TIMELINE_CONTROLS_THUMBNAILS_SHOW_CONTROLS,
defaults.timeline.controls.thumbnails.show_controls,
)}
</div>`
: ''}
src/localize/languages/en.json
+4 -1
View File
@@ -77,6 +77,7 @@
"mode": "Event Viewer thumbnails mode",
"size": "Event Viewer thumbnails size (e.g. '100px')",
"show_details": "Show event details with thumbnails",
"show_controls": "Show event controls with thumbnails",
"modes": {
"below": "Thumbnails below the media",
"above": "Thumbnails above the media",
@@ -119,6 +120,7 @@
"mode": "Live thumbnails mode",
"size": "Live thumbnails size (e.g. '100px')",
"show_details": "Show event details with thumbnails",
"show_controls": "Show event controls with thumbnails",
"media": "Whether to show thumbnails of clips or snapshots",
"medias": {
"clips": "Clip thumbnails",
@@ -181,7 +183,8 @@
"thumbnails": {
"mode": "Timeline thumbnails mode",
"size": "Timeline thumbnails size (e.g. '100px')",
"show_details": "Show event details with thumbnails"
"show_details": "Show event details with thumbnails",
"show_controls": "Show event controls with thumbnails"
}
}
},
src/scss/favorite.scss
+5 -3
View File
@@ -1,12 +1,14 @@
ha-icon.favorite {
position: absolute;
color: var(--primary-color);
padding: 2px;
color: gold;
background: rgba(0,0,0,0.2);
border-radius: 50%;
}
ha-icon.timeline {
position: absolute;
color: var(--primary-color);
padding: 2px;
right: 0px;
background: rgba(0,0,0,0.2);
border-radius: 50%;
}
src/types.ts
+13
View File
@@ -444,6 +444,7 @@ const thumbnailsControlSchema = z.object({
mode: z.enum(['none', 'above', 'below', 'left', 'right']),
size: z.string().optional(),
show_details: z.boolean().optional(),
show_controls: z.boolean().optional(),
});
export type ThumbnailsControlConfig = z.infer<typeof thumbnailsControlSchema>;
@@ -497,6 +498,7 @@ const liveConfigDefault = {
media: 'clips' as const,
size: '100px',
show_details: false,
show_controls: true,
mode: 'none' as const,
},
title: {
@@ -560,6 +562,9 @@ const liveOverridableConfigSchema = z
show_details: thumbnailsControlSchema.shape.show_details.default(
liveConfigDefault.controls.thumbnails.show_details,
),
show_controls: thumbnailsControlSchema.shape.show_controls.default(
liveConfigDefault.controls.thumbnails.show_controls,
),
media: z
.enum(['clips', 'snapshots'])
.default(liveConfigDefault.controls.thumbnails.media),
@@ -655,6 +660,7 @@ const viewerConfigDefault = {
size: '100px',
mode: 'none' as const,
show_details: false,
show_controls: true,
},
title: {
mode: 'popup-bottom-right' as const,
@@ -697,6 +703,9 @@ const viewerConfigSchema = z
show_details: thumbnailsControlSchema.shape.show_details.default(
viewerConfigDefault.controls.thumbnails.show_details,
),
show_controls: thumbnailsControlSchema.shape.show_controls.default(
viewerConfigDefault.controls.thumbnails.show_controls,
),
})
.default(viewerConfigDefault.controls.thumbnails),
title: titleControlConfigSchema
@@ -768,6 +777,7 @@ const timelineConfigDefault = {
mode: 'left' as const,
size: '100px' as const,
show_details: true,
show_controls: true,
},
},
};
@@ -788,6 +798,9 @@ const timelineConfigSchema = z
show_details: thumbnailsControlSchema.shape.show_details.default(
timelineConfigDefault.controls.thumbnails.show_details,
),
show_controls: thumbnailsControlSchema.shape.show_controls.default(
timelineConfigDefault.controls.thumbnails.show_controls,
),
})
.default(timelineConfigDefault.controls.thumbnails),
})