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

Match media direction to timeline.

Browse Source
This commit is contained in:
Dermot Duffy
2023-02-08 19:51:57 -08:00
parent 1d4cb3f9ff
commit 479671ab6c
8 changed files with 77 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files
package.json
+1 -1
View File
@@ -26,7 +26,7 @@
"custom-card-helpers": "^1.9.0",
"date-fns": "^2.29.2",
"date-fns-tz": "^1.3.7",
"embla-carousel": "^7.0.2",
"embla-carousel": "^7.0.9",
"embla-carousel-wheel-gestures": "^3.0.0",
"home-assistant-js-websocket": "^8.0.0",
"keycharm": "^0.4.0",
src/camera-manager/frigate/media.ts
-1
View File
@@ -1,4 +1,3 @@
import { HomeAssistant } from 'custom-card-helpers';
import fromUnixTime from 'date-fns/fromUnixTime';
import isEqual from 'lodash-es/isEqual';
import { CameraConfig } from '../../types';
src/camera-manager/manager.ts
+3 -2
View File
@@ -525,9 +525,10 @@ export class CameraManager {
// are assumed to be unique.
uniqBy(mediaArray, (media) => media.getID() ?? media),
// Sort all items leading with the most recent.
// Sort all items leading oldest -> youngest (so media is loaded in this
// order in the viewer which matches the left-to-right timeline order).
(media) => media.getStartTime(),
'desc',
'asc',
);
}
src/components/gallery.ts
+50 -37
View File
@@ -35,6 +35,7 @@ import { MediaQueriesResults } from '../view/media-queries-results';
import { errorToConsole } from '../utils/basic';
import './media-filter';
import "./surround-basic";
import { ViewMedia } from '../view/media';
const GALLERY_MEDIA_CHUNK_SIZE = 100;
@@ -91,8 +92,8 @@ export class FrigateCardGallery extends LitElement {
const mediaType = this.view.is('snapshots')
? 'snapshots'
: this.view.is('clips')
? 'clips'
: null;
? 'clips'
: null;
changeViewToRecentEventsForCameraAndDependents(
this,
this.hass,
@@ -110,14 +111,14 @@ export class FrigateCardGallery extends LitElement {
return html`
<frigate-card-surround-basic
.drawerIcons=${{
...(this.galleryConfig &&
this.galleryConfig.controls.filter.mode !== 'none' && {
[this.galleryConfig.controls.filter.mode]: GALLERY_MEDIA_FILTER_MENU_ICONS,
}),
}}
...(this.galleryConfig &&
this.galleryConfig.controls.filter.mode !== 'none' && {
[this.galleryConfig.controls.filter.mode]: GALLERY_MEDIA_FILTER_MENU_ICONS,
}),
}}
>
${this.galleryConfig && this.galleryConfig.controls.filter.mode !== 'none'
? html` <frigate-card-media-filter
? html` <frigate-card-media-filter
.hass=${this.hass}
.cameras=${this.cameras}
.cameraManager=${this.cameraManager}
@@ -126,7 +127,7 @@ export class FrigateCardGallery extends LitElement {
slot=${this.galleryConfig.controls.filter.mode}
>
</frigate-card-media-filter>`
: ''}
: ''}
<frigate-card-gallery-core
.hass=${this.hass}
.view=${this.view}
@@ -181,6 +182,8 @@ export class FrigateCardGalleryCore extends LitElement {
@state()
protected _showExtensionLoader = true;
protected _media?: ViewMedia[];
constructor() {
super();
this._resizeObserver = new ResizeObserver(this._resizeHandler.bind(this));
@@ -220,10 +223,10 @@ export class FrigateCardGalleryCore extends LitElement {
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 / THUMBNAIL_WIDTH_MAX),
Math.ceil(this.clientWidth / thumbnailSize),
);
1,
Math.ceil(this.clientWidth / THUMBNAIL_WIDTH_MAX),
Math.ceil(this.clientWidth / thumbnailSize),
);
this.style.setProperty('--frigate-card-gallery-columns', String(columns));
}
@@ -272,8 +275,8 @@ export class FrigateCardGalleryCore extends LitElement {
const newMediaQueries = MediaQueriesClassifier.areEventQueries(query)
? new EventMediaQueries(extension.queries as EventQuery[])
: MediaQueriesClassifier.areRecordingQueries(query)
? new RecordingMediaQueries(extension.queries as RecordingQuery[])
: null;
? new RecordingMediaQueries(extension.queries as RecordingQuery[])
: null;
if (newMediaQueries) {
this.view
@@ -307,6 +310,14 @@ export class FrigateCardGalleryCore extends LitElement {
}
if (changedProps.has('view')) {
this._showExtensionLoader = true;
const oldView: View | undefined = changedProps.get('view');
if (oldView?.queryResults?.getResults() !== this.view?.queryResults?.getResults()) {
// Gallery places the most recent media at the top (the query results place
// the most recent media at the end for use in the viewer). This is copied
// to a new array to avoid reversing the query results in place.
this._media = [...this.view?.queryResults?.getResults() ?? []].reverse();
}
}
}
@@ -315,10 +326,8 @@ export class FrigateCardGalleryCore extends LitElement {
* @returns A rendered template.
*/
protected render(): TemplateResult | void {
const results = this.view?.queryResults?.getResults();
if (
!results ||
!this._media ||
!this.hass ||
!this.view ||
!this.view.isGalleryView() ||
@@ -328,9 +337,9 @@ export class FrigateCardGalleryCore extends LitElement {
}
return html`
${results.map(
(media, index) =>
html`<frigate-card-thumbnail
${this._media.map(
(media, index) =>
html`<frigate-card-thumbnail
.hass=${this.hass}
.cameraManager=${this.cameraManager}
.media=${media}
@@ -338,28 +347,32 @@ export class FrigateCardGalleryCore extends LitElement {
.view=${this.view}
?details=${!!this.galleryConfig?.controls.thumbnails.show_details}
?show_favorite_control=${!!this.galleryConfig?.controls.thumbnails
.show_favorite_control}
.show_favorite_control}
?show_timeline_control=${!!this.galleryConfig?.controls.thumbnails
.show_timeline_control}
.show_timeline_control}
@click=${(ev: Event) => {
if (this.view) {
this.view
.evolve({
view: 'media',
queryResults: this.view.queryResults?.clone().selectResult(index),
})
.dispatchChangeEvent(this);
}
stopEventFromActivatingCardWideActions(ev);
}}
if (this.view && this._media) {
this.view
.evolve({
view: 'media',
queryResults: this.view.queryResults?.clone().selectResult(
// Media in the gallery is reversed vs the queryResults (see
// note above).
this._media.length - index - 1
),
})
.dispatchChangeEvent(this);
}
stopEventFromActivatingCardWideActions(ev);
}}
>
</frigate-card-thumbnail>`,
)}
)}
${this._showExtensionLoader
? html`${renderProgressIndicator({
cardWideConfig: this.cardWideConfig,
componentRef: this._refLoader,
})}`
cardWideConfig: this.cardWideConfig,
componentRef: this._refLoader,
})}`
: ''}
`;
}
src/components/viewer.ts
+15 -10
View File
@@ -402,18 +402,23 @@ export class FrigateCardViewerCarousel extends LitElement {
.dispatchChangeEvent(this);
}
/**
* Handle the user selecting a new slide in the carousel.
*/
protected _setViewHandler(ev: CustomEvent<CarouselSelect>): void {
// The slide may already be selected on load, so don't dispatch a new view
// unless necessary.
if (ev.detail.index !== this.view?.queryResults?.getSelectedIndex()) {
this._setViewSelectedIndex(ev.detail.index);
}
this._setViewSelectedIndex(ev.detail.index);
}
protected _setViewSelectedIndex(index: number): void {
if (!this.view?.queryResults) {
return;
}
const selectedIndex = this.view.queryResults.getSelectedIndex();
if (selectedIndex === null || selectedIndex === index) {
// The slide may already be selected on load, so don't dispatch a new view
// unless necessary (i.e. the new index is different from the current
// index).
return;
}
const newResults = this.view?.queryResults?.clone().selectResult(index);
if (!newResults) {
return;
@@ -555,7 +560,7 @@ export class FrigateCardViewerCarousel extends LitElement {
}
const media = this.view?.queryResults?.getSelectedResult();
if (!media || !this.cameras) {
if (!media || !this.cameras || !this.view || !this.view.queryResults) {
return;
}
@@ -578,7 +583,7 @@ export class FrigateCardViewerCarousel extends LitElement {
draggable: this.viewerConfig?.draggable ?? true,
}))}
.carouselPlugins=${guard(
[this.viewerConfig, this.view?.queryResults?.getResults()],
[this.viewerConfig, this.view.queryResults.getResults()],
this._getPlugins.bind(this),
)}
.label=${media.getTitle() ?? undefined}
src/utils/media-to-view.ts
+3 -2
View File
@@ -198,8 +198,9 @@ const executeMediaQueryForView = async (
if (!mediaArray) {
return null;
}
const queryResults = new MediaQueriesResults(mediaArray);
// Select the last item by default (which is the most recent).
const selectedIndex = mediaArray.length ? mediaArray.length - 1 : undefined;
const queryResults = new MediaQueriesResults(mediaArray, selectedIndex);
let viewerContext: ViewContext | undefined = {};
if (options?.targetTime && options.cameraIDs) {
src/utils/timeline-source.ts
+3 -1
View File
@@ -132,12 +132,13 @@ export class TimelineDataSource {
}
const mediaArray = await this._cameraManager.executeMediaQueries(hass, eventQueries);
const data: FrigateCardTimelineItem[] = []
for (const media of mediaArray ?? []) {
const endTime = media.getEndTime();
const startTime = media.getStartTime();
const id = media.getID();
if (id && startTime) {
this._dataset.update({
data.push({
id: id,
group: media.getCameraID(),
content: '',
@@ -148,6 +149,7 @@ export class TimelineDataSource {
});
}
}
this._dataset.update(data);
this._eventRanges.add({
...cacheFriendlyWindow,
yarn.lock
+2 -2
View File
@@ -1858,7 +1858,7 @@ __metadata:
languageName: node
linkType: hard
"embla-carousel@npm:^7.0.2":
"embla-carousel@npm:^7.0.9":
version: 7.0.9
resolution: "embla-carousel@npm:7.0.9"
checksum: dabb371a44c2d67f21aa7a0ff3f452a5c2678b79e80cb251e0a83b707c4b684fbdbe010927142cdcae3d1c9711a269e05655bd05c39608337fd1b6f5d2c20371
@@ -2424,7 +2424,7 @@ __metadata:
custom-card-helpers: ^1.9.0
date-fns: ^2.29.2
date-fns-tz: ^1.3.7
embla-carousel: ^7.0.2
embla-carousel: ^7.0.9
embla-carousel-wheel-gestures: ^3.0.0
eslint: ^8.23.0
eslint-config-airbnb-base: ^15.0.0