fix: Fix thumbnail carousel scroll position (#1606)

* fix: Fix thumbnail carousel scroll position

* Small formatting fix

package.json

@@ -27,7 +27,7 @@
     "crypto": "^1.0.1",
     "date-fns": "^3.6.0",
     "date-fns-tz": "^3.1.3",
-    "embla-carousel": "^8.1.4",
+    "embla-carousel": "^8.3.0",
     "embla-carousel-wheel-gestures": "^8.0.1",
     "home-assistant-js-websocket": "^9.4.0",
     "js-yaml": "^4.1.0",

src/components/thumbnail-carousel.ts

@@ -15,7 +15,6 @@ import { ExtendedHomeAssistant } from '../types.js';
 import { stopEventFromActivatingCardWideActions } from '../utils/action.js';
 import { dispatchFrigateCardEvent } from '../utils/basic.js';
 import { CarouselDirection } from '../utils/embla/carousel-controller.js';
-import AutoSize from '../utils/embla/plugins/auto-size/auto-size.js';
 import { MediaQueriesResults } from '../view/media-queries-results';
 import './carousel.js';
 import './thumbnail.js';
@@ -43,7 +42,6 @@ export class FrigateCardThumbnailCarousel extends LitElement {
   public fadeThumbnails = false;
 
   protected _thumbnailSlides: TemplateResult[] = [];
-  protected _plugins = [AutoSize()];
 
   protected willUpdate(changedProps: PropertyValues): void {
     if (changedProps.has('config')) {
@@ -144,7 +142,6 @@ export class FrigateCardThumbnailCarousel extends LitElement {
 
     return html`<frigate-card-carousel
       direction=${direction}
-      .plugins=${this._plugins}
       .selected=${this._getSelectedSlide() ?? 0}
       .dragFree=${true}
     >

src/utils/embla/carousel-controller.ts

@@ -128,10 +128,7 @@ export class CarouselController {
         // This controller manages slide changes (including shadow DOM
         // assignments, which the stock watcher does not handle).
         watchSlides: false,
-
+        watchResize: true,
-        // We use the auto-size plugin to manage resizes without carousel resets
-        // mid-scroll.
-        watchResize: false,
         watchDrag: this._draggable,
       },
       [

src/utils/embla/plugins/auto-size/auto-size.ts

@@ -38,9 +38,13 @@ function AutoSize(): AutoSizeType {
     intersectionHandler,
   );
 
-  const debouncedSetContainerHeight = debounce(() => setContainerHeight(), 200, {
+  const debouncedSetContainerHeight = debounce(
-    trailing: true,
+    () => setContainerHeightAndReInit(),
-  });
+    200,
+    {
+      trailing: true,
+    },
+  );
 
   function init(emblaApiInstance: EmblaCarouselType): void {
     emblaApi = emblaApiInstance;
@@ -87,8 +91,9 @@ function AutoSize(): AutoSizeType {
 
     if (isContainerIntersectingNow !== previousContainerIntersecting) {
       // Don't reinitialize on first call (intersectionHandler is always called
-      // on initial observation).
+      // on initial observation), nor when the viewport is not intersecting.
-      const callReInit = previousContainerIntersecting !== null;
+      const callReInit =
+        isContainerIntersectingNow && previousContainerIntersecting !== null;
       previousContainerIntersecting = isContainerIntersectingNow;
       if (callReInit) {
         reInitController?.reinit();
@@ -122,7 +127,7 @@ function AutoSize(): AutoSizeType {
     }
   }
 
-  function setContainerHeight(): void {
+  function setContainerHeightAndReInit(): void {
     const {
       slideRegistry,
       options: { axis },

tests/utils/embla/carousel-controller.test.ts

@@ -207,7 +207,7 @@ describe('CarouselController', () => {
         loop: true,
         containScroll: 'trimSnaps',
         watchSlides: false,
-        watchResize: false,
+        watchResize: true,
         watchDrag: false,
       },
       plugins,

tests/utils/embla/plugins/auto-size/auto-size.test.ts

@@ -59,10 +59,17 @@ describe('AutoSize', () => {
     // First intersection handler call sets the state only.
     callIntersectionHandler(true);
 
+    // When not visible, will not re-init.
     callIntersectionHandler(false);
     callIntersectionHandler(false);
     callIntersectionHandler(false);
 
+    expect(emblaApi.reInit).not.toBeCalled();
+
+    // When visible, will re-initialize once.
+    callIntersectionHandler(true);
+    callIntersectionHandler(true);
+
     expect(emblaApi.reInit).toBeCalledTimes(1);
   });
 

yarn.lock

@@ -4236,10 +4236,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"embla-carousel@npm:^8.1.4":
+"embla-carousel@npm:^8.3.0":
-  version: 8.1.4
+  version: 8.3.0
-  resolution: "embla-carousel@npm:8.1.4"
+  resolution: "embla-carousel@npm:8.3.0"
-  checksum: 10c0/8dcd7fa5561fc354dd422440f3e24da8e2bc75617d8c053b88d44a603b69cb123a7ff3deae3eaa174b60a3a2d6bd8852b8ad21c7a3cca4692ce7da4078febf66
+  checksum: 10c0/0240156d6a736603d82ddfe93b03ce296e385e9c18ed2cca9465634c8adb7560bfc2fbef6368a4da2a54926c4ba6de1012ebb33d2fc92c052030ea2288e4cc92
   languageName: node
   linkType: hard
 
@@ -5149,7 +5149,7 @@ __metadata:
     date-fns: "npm:^3.6.0"
     date-fns-tz: "npm:^3.1.3"
     docsify-cli: "npm:^4.4.4"
-    embla-carousel: "npm:^8.1.4"
+    embla-carousel: "npm:^8.3.0"
     embla-carousel-wheel-gestures: "npm:^8.0.1"
     eslint: "npm:^8.57.0"
     eslint-config-airbnb-base: "npm:^15.0.0"