diff --git a/src/components/carousel.ts b/src/components/carousel.ts index 9da0102f..57bcad5d 100644 --- a/src/components/carousel.ts +++ b/src/components/carousel.ts @@ -3,7 +3,6 @@ import EmblaCarousel, { EmblaOptionsType, EmblaPluginType } from 'embla-carousel'; -import { WheelGesturesPlugin } from 'embla-carousel-wheel-gestures'; import { CSSResultGroup, LitElement, PropertyValues, unsafeCSS } from 'lit'; import { property } from 'lit/decorators.js'; import carouselStyle from '../scss/carousel.scss'; @@ -72,16 +71,10 @@ export class FrigateCardCarousel extends LitElement { /** * Get the Embla plugins to use. - * @returns An EmblaOptionsType object or undefined for no options. + * @returns A list of EmblaOptionsTypes. */ protected _getPlugins(): EmblaPluginType[] { - return [ - WheelGesturesPlugin({ - // Whether the carousel is vertical or horizontal, interpret y-axis wheel - // gestures as scrolling for the carousel. - forceWheelAxis: 'y', - }), - ]; + return []; } protected _destroyCarousel(): void { diff --git a/src/components/live.ts b/src/components/live.ts index 9b408375..7bc50aa0 100644 --- a/src/components/live.ts +++ b/src/components/live.ts @@ -2,6 +2,7 @@ import JSMpeg from '@cycjimmy/jsmpeg-player'; import { Task } from '@lit-labs/task'; import { HomeAssistant } from 'custom-card-helpers'; import { EmblaOptionsType, EmblaPluginType } from 'embla-carousel'; +import { WheelGesturesPlugin } from 'embla-carousel-wheel-gestures'; import { CSSResultGroup, html, @@ -287,11 +288,21 @@ export class FrigateCardLiveCarousel extends FrigateCardMediaCarousel { /** * Get the Embla plugins to use. - * @returns An EmblaOptionsType object or undefined for no options. + * @returns A list of EmblaOptionsTypes. */ protected _getPlugins(): EmblaPluginType[] { return [ ...super._getPlugins(), + // Only enable wheel plugin if there is more than one camera. + ...(this.cameras && this.cameras.size > 1 + ? [ + WheelGesturesPlugin({ + // Whether the carousel is vertical or horizontal, interpret y-axis wheel + // gestures as scrolling for the carousel. + forceWheelAxis: 'y', + }), + ] + : []), Lazyload({ ...(this.liveConfig?.lazy_load && { lazyLoadCallback: (index, slide) => @@ -893,7 +904,7 @@ export class FrigateCardLiveWebRTCCard extends LitElement { e instanceof FrigateCardError ? e.message : localize('error.webrtc_card_reported_error') + ': ' + (e as Error).message, - (e as FrigateCardError).context + (e as FrigateCardError).context, ); } return html`${webrtcElement}`; diff --git a/src/components/thumbnail-carousel.ts b/src/components/thumbnail-carousel.ts index 54b515da..36d6940f 100644 --- a/src/components/thumbnail-carousel.ts +++ b/src/components/thumbnail-carousel.ts @@ -1,4 +1,5 @@ -import { EmblaOptionsType } from 'embla-carousel'; +import { EmblaOptionsType, EmblaPluginType } from 'embla-carousel'; +import { WheelGesturesPlugin } from 'embla-carousel-wheel-gestures'; import { CSSResultGroup, html, PropertyValues, TemplateResult, unsafeCSS } from 'lit'; import { customElement, property, state } from 'lit/decorators.js'; import { classMap } from 'lit/directives/class-map.js'; @@ -100,6 +101,22 @@ export class FrigateCardThumbnailCarousel extends FrigateCardCarousel { }; } + /** + * Get the Embla plugins to use. + * @returns A list of EmblaOptionsTypes. + */ + protected _getPlugins(): EmblaPluginType[] { + return [ + ...super._getPlugins(), + // Only enable wheel plugin if there is more than one camera. + WheelGesturesPlugin({ + // Whether the carousel is vertical or horizontal, interpret y-axis wheel + // gestures as scrolling for the carousel. + forceWheelAxis: 'y', + }), + ]; + } + /** * Get slides to include in the render. * @returns The slides to include in the render. diff --git a/src/components/viewer.ts b/src/components/viewer.ts index 0304949a..f29b5dd3 100644 --- a/src/components/viewer.ts +++ b/src/components/viewer.ts @@ -1,5 +1,6 @@ import { Task } from '@lit-labs/task'; import { EmblaOptionsType, EmblaPluginType } from 'embla-carousel'; +import { WheelGesturesPlugin } from 'embla-carousel-wheel-gestures'; import { CSSResultGroup, html, @@ -296,11 +297,24 @@ export class FrigateCardViewerCarousel extends FrigateCardMediaCarousel { /** * Get the Embla plugins to use. - * @returns An EmblaOptionsType object or undefined for no options. + * @returns A list of EmblaOptionsTypes. */ protected _getPlugins(): EmblaPluginType[] { return [ ...super._getPlugins(), + // Only enable wheel plugin if there is more than one media item. + ...(this.view && + this.view.target && + this.view.target.children && + this.view.target.children.length > 1 + ? [ + WheelGesturesPlugin({ + // Whether the carousel is vertical or horizontal, interpret y-axis wheel + // gestures as scrolling for the carousel. + forceWheelAxis: 'y', + }), + ] + : []), Lazyload({ ...(this.viewerConfig?.lazy_load && { lazyLoadCallback: this._lazyloadSlide.bind(this),