Allow dragging/swiping to be disabled.

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].|
 

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));

src/editor.ts

@@ -585,6 +585,17 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor
                   @change=${this._valueChangedHandler}
                 ></ha-switch>
               </ha-formfield>
+              <ha-formfield .label=${localize('config.event_viewer.draggable')}>
+                <ha-switch
+                  .checked=${getConfigValue(
+                    this._config,
+                    'event_viewer.draggable',
+                    defaults.event_viewer.draggable,
+                  )}
+                  .configValue=${'event_viewer.draggable'}
+                  @change=${this._valueChangedHandler}
+                ></ha-switch>
+              </ha-formfield>
               <ha-formfield .label=${localize('config.event_viewer.lazy_load')}>
                 <ha-switch
                   .checked=${getConfigValue(

src/localize/languages/en.json

@@ -31,6 +31,7 @@
     },
     "event_viewer": {
       "autoplay_clip": "Autoplay most recent clip (In 'clip' view)",
+      "draggable": "Event viewer can be dragged/swiped",
       "lazy_load": "Lazily load event media",
       "controls": {
         "next_previous": {

src/types.ts

@@ -384,6 +384,7 @@ export type MenuConfig = z.infer<typeof menuConfigSchema>;
 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,