Add wheel gestures and fix scrolling issue.

package.json

@@ -27,6 +27,7 @@
     "custom-card-helpers": "^1.9.0",
     "date-fns": "^2.28.0",
     "embla-carousel": "^6.1.1",
+    "embla-carousel-wheel-gestures": "^2.1.1",
     "home-assistant-js-websocket": "^6.1.1",
     "keycharm": "^0.4.0",
     "lit": "^2.2.1",

src/components/carousel.ts

@@ -6,6 +6,7 @@ import EmblaCarousel, {
   EmblaOptionsType,
   EmblaPluginType,
 } from 'embla-carousel';
+import { WheelGesturesPlugin } from 'embla-carousel-wheel-gestures'
 
 import { TransitionEffect } from '../types';
 import { dispatchFrigateCardEvent } from '../common';
@@ -76,8 +77,12 @@ export class FrigateCardCarousel extends LitElement {
    * Get the Embla plugins to use.
    * @returns An EmblaOptionsType object or undefined for no options.
    */
-  protected _getPlugins(): EmblaPluginType[] | undefined {
+  protected _getPlugins(): EmblaPluginType[] {
-    return undefined;
+    return [WheelGesturesPlugin({
+      // Whether the carousel is vertical or horizontal, interpret y-axis wheel
+      // gestures as scrolling for the carousel.
+      forceWheelAxis: 'y',
+    })];
   }
 
   protected _destroyCarousel(): void {

src/components/live.ts

@@ -344,8 +344,9 @@ export class FrigateCardLiveCarousel extends FrigateCardMediaCarousel {
    * Get the Embla plugins to use.
    * @returns An EmblaOptionsType object or undefined for no options.
    */
-  protected _getPlugins(): EmblaPluginType[] | undefined {
+  protected _getPlugins(): EmblaPluginType[] {
     return [
+      ...super._getPlugins(),
       Lazyload({
         lazyloadCallback: this.liveConfig?.lazy_load
           ? (...args) => this._lazyloadOrUnloadSlide('load', ...args)

src/components/viewer.ts

@@ -331,8 +331,9 @@ export class FrigateCardViewerCarousel extends FrigateCardMediaCarousel {
    * Get the Embla plugins to use.
    * @returns An EmblaOptionsType object or undefined for no options.
    */
-  protected _getPlugins(): EmblaPluginType[] | undefined {
+  protected _getPlugins(): EmblaPluginType[] {
     return [
+      ...super._getPlugins(),
       Lazyload({
         lazyloadCallback: this.viewerConfig?.lazy_load
           ? this._lazyloadSlide.bind(this)

src/scss/thumbnail-carousel.scss

@@ -1,6 +1,11 @@
 :host {
   --frigate-card-carousel-thumbnail-opacity: 0.8;
+}
 
+:host([direction=vertical]) {
+  height: 100%;
+}
+:host([direction=horizontal]) {
   // In fullscreen mode, without explicitly setting the height to auto Chrome
   // will construct a stylesheet with 100% height.
   height: auto;

src/scss/timeline.scss

@@ -4,16 +4,19 @@
 :host {
   width: 100%;
   height: 100%;
-  display: block;
   background-color: var(--card-background-color);
   padding-bottom: 5px;
 
+  // Share the screen space with thumbnails that may be above/below.
+  display: flex;
+  flex-direction: column;
+
   // So that absolute sidedrawer is relative to this host.
   position: relative;
 }
 
 div.timeline {
-  height: 100%;
+  flex: 1;
 }
 div.timeline.left-margin {
   // Clearance for the drawer button.