diff --git a/README.md b/README.md index d1eafa5b..94373822 100644 --- a/README.md +++ b/README.md @@ -130,6 +130,7 @@ All variables listed are under a `event_viewer:` section. | - | - | - | | `autoplay_clip` | `false` | Whether or not to autoplay clips in the 'clip' [view](#views). Clips manually chosen in the clips gallery will still autoplay.| | `lazy_load` | `true` | Whether or not to lazily load media in the event viewer carousel. Setting this will false will fetch all media immediately which may make the carousel experience smoother at a cost of (potentially) a substantial number of simultaneous media fetches on load. | +| `draggable` | `true` | Whether or not the event viewer carousel can be dragged left or right, via touch/swipe and mouse dragging. | | `controls.next_previous.style` | `thumbnails` | When viewing media, what kind of controls to show to move to the previous/next media item. Acceptable values: `thumbnails`, `chevrons`, `none` . | | `controls.next_previous.size` | `48px` | The size of the next/previous controls (in CSS Units)[https://www.w3schools.com/cssref/css_units.asp].| diff --git a/src/components/viewer.ts b/src/components/viewer.ts index bc4724b8..5c15a70d 100644 --- a/src/components/viewer.ts +++ b/src/components/viewer.ts @@ -197,7 +197,7 @@ export class FrigateCardViewerCore extends LitElement { '.embla__viewport', ) as HTMLElement; - if (carouselNode) { + if (carouselNode && this.viewerConfig) { this._loadedCarousel = true; // Start the carousel on the selected child number. @@ -209,6 +209,7 @@ export class FrigateCardViewerCore extends LitElement { this._carousel = EmblaCarousel(carouselNode, { startIndex: isNaN(startIndex) ? undefined : startIndex, + draggable: this.viewerConfig.draggable, }); // Update views and dispatch media-show events based on slide selections. this._carousel.on('select', this._selectSlideSetViewHandler.bind(this)); diff --git a/src/editor.ts b/src/editor.ts index 50c720a4..a168b954 100644 --- a/src/editor.ts +++ b/src/editor.ts @@ -585,6 +585,17 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor @change=${this._valueChangedHandler} > + + + ; const viewerConfigDefault = { autoplay_clip: false, lazy_load: true, + draggable: true, controls: { next_previous: { size: '48px', @@ -405,6 +406,7 @@ const viewerConfigSchema = z .object({ autoplay_clip: z.boolean().default(viewerConfigDefault.autoplay_clip), lazy_load: z.boolean().default(viewerConfigDefault.lazy_load), + draggable: z.boolean().default(viewerConfigDefault.draggable), controls: z .object({ next_previous: nextPreviousControlConfigSchema,