Renames

Review comments, minus renames
refactor(web): extract common timeline functionality into PhotostreamManager base classes
2025-12-10 17:23:12 +03:00 · 2025-10-09 00:58:42 +00:00 · 2025-10-08 22:00:07 +00:00 · 2025-10-08 20:33:55 +00:00
18 changed files with 764 additions and 629 deletions
--- a/web/src/lib/components/timeline/Timeline.svelte
+++ b/web/src/lib/components/timeline/Timeline.svelte
@@ -11,7 +11,7 @@
  import Skeleton from '$lib/elements/Skeleton.svelte';
  import type { DayGroup } from '$lib/managers/timeline-manager/day-group.svelte';
  import type { MonthGroup } from '$lib/managers/timeline-manager/month-group.svelte';
-  import { TimelineManager } from '$lib/managers/timeline-manager/timeline-manager.svelte';
+  import { getSegmentIdentifier, TimelineManager } from '$lib/managers/timeline-manager/timeline-manager.svelte';
  import type { TimelineAsset } from '$lib/managers/timeline-manager/types';
  import { assetsSnapshot } from '$lib/managers/timeline-manager/utils.svelte';
  import type { AssetInteraction } from '$lib/stores/asset-interaction.svelte';
@@ -107,7 +107,7 @@
  // Indicates whether the viewport is currently in the lead-out section (after all months)
  let isInLeadOutSection = $state(false);

-  const isEmpty = $derived(timelineManager.isInitialized && timelineManager.months.length === 0);
+  const isEmpty = $derived(timelineManager.isInitialized && timelineManager.segments.length === 0);
  const maxMd = $derived(mobileDevice.maxMd);
  const usingMobileDevice = $derived(mobileDevice.pointerCoarse);

@@ -148,7 +148,7 @@
    // handle any scroll compensation that may have been set
    const height = monthGroup!.findAssetAbsolutePosition(assetId);

-    while (timelineManager.scrollCompensation.monthGroup) {
+    while (timelineManager.scrollCompensation.segment) {
      handleScrollCompensation(timelineManager.scrollCompensation);
      timelineManager.clearScrollCompensation();
    }
@@ -267,11 +267,6 @@
    }
  });

-  const getMaxScrollPercent = () => {
-    const totalHeight = timelineManager.timelineHeight + bottomSectionHeight + timelineManager.topSectionHeight;
-    return (totalHeight - timelineManager.viewportHeight) / totalHeight;
-  };
-
  const getMaxScroll = () => {
    if (!element || !timelineElement) {
      return 0;
@@ -283,7 +278,7 @@

  const scrollToMonthGroupAndOffset = (monthGroup: MonthGroup, monthGroupScrollPercent: number) => {
    const topOffset = monthGroup.top;
-    const maxScrollPercent = getMaxScrollPercent();
+    const maxScrollPercent = timelineManager.maxScrollPercent;
    const delta = monthGroup.height * monthGroupScrollPercent;
    const scrollToTop = (topOffset + delta) * maxScrollPercent;

@@ -295,13 +290,13 @@
  const onScrub: ScrubberListener = (scrubberData) => {
    const { scrubberMonth, overallScrollPercent, scrubberMonthScrollPercent } = scrubberData;

-    if (!scrubberMonth || timelineManager.timelineHeight < timelineManager.viewportHeight * 2) {
+    if (!scrubberMonth || timelineManager.streamViewerHeight < timelineManager.viewportHeight * 2) {
      // edge case - scroll limited due to size of content, must adjust - use use the overall percent instead
      const maxScroll = getMaxScroll();
      const offset = maxScroll * overallScrollPercent;
      scrollTop(offset);
    } else {
-      const monthGroup = timelineManager.months.find(
+      const monthGroup = timelineManager.segments.find(
        ({ yearMonth: { year, month } }) => year === scrubberMonth.year && month === scrubberMonth.month,
      );
      if (!monthGroup) {
@@ -319,7 +314,7 @@
      return;
    }

-    if (timelineManager.timelineHeight < timelineManager.viewportHeight * 2) {
+    if (timelineManager.streamViewerHeight < timelineManager.viewportHeight * 2) {
      // edge case - scroll limited due to size of content, must adjust -  use the overall percent instead
      const maxScroll = getMaxScroll();
      timelineScrollPercent = Math.min(1, element.scrollTop / maxScroll);
@@ -338,10 +333,10 @@
        return;
      }

-      let maxScrollPercent = getMaxScrollPercent();
+      let maxScrollPercent = timelineManager.maxScrollPercent;
      let found = false;

-      const monthsLength = timelineManager.months.length;
+      const monthsLength = timelineManager.segments.length;
      for (let i = -1; i < monthsLength + 1; i++) {
        let monthGroup: TimelineYearMonth | undefined;
        let monthGroupHeight = 0;
@@ -352,8 +347,8 @@
          // lead-out
          monthGroupHeight = bottomSectionHeight;
        } else {
-          monthGroup = timelineManager.months[i].yearMonth;
-          monthGroupHeight = timelineManager.months[i].height;
+          monthGroup = timelineManager.segments[i].yearMonth;
+          monthGroupHeight = timelineManager.segments[i].height;
        }

        let next = top - monthGroupHeight * maxScrollPercent;
@@ -366,7 +361,7 @@

          // compensate for lost precision/rounding errors advance to the next bucket, if present
          if (viewportTopMonthScrollPercent > 0.9999 && i + 1 < monthsLength - 1) {
-            viewportTopMonth = timelineManager.months[i + 1].yearMonth;
+            viewportTopMonth = timelineManager.segments[i + 1].yearMonth;
            viewportTopMonthScrollPercent = 0;
          }

@@ -473,12 +468,12 @@

      // Select/deselect assets in range (start,end)
      let started = false;
-      for (const monthGroup of timelineManager.months) {
+      for (const monthGroup of timelineManager.segments) {
        if (monthGroup === endBucket) {
          break;
        }
        if (started) {
-          await timelineManager.loadMonthGroup(monthGroup.yearMonth);
+          await timelineManager.loadSegment(monthGroup.identifier);
          for (const asset of monthGroup.assetsIterator()) {
            if (deselect) {
              assetInteraction.removeAssetFromMultiselectGroup(asset.id);
@@ -494,7 +489,7 @@

      // Update date group selection in range [start,end]
      started = false;
-      for (const monthGroup of timelineManager.months) {
+      for (const monthGroup of timelineManager.segments) {
        if (monthGroup === startBucket) {
          started = true;
        }
@@ -553,7 +548,7 @@
  $effect(() => {
    if ($showAssetViewer) {
      const { localDateTime } = getTimes($viewingAsset.fileCreatedAt, DateTime.local().offset / 60);
-      void timelineManager.loadMonthGroup({ year: localDateTime.year, month: localDateTime.month });
+      void timelineManager.loadSegment(getSegmentIdentifier({ year: localDateTime.year, month: localDateTime.month }));
    }
  });
 </script>
@@ -570,7 +565,7 @@
  {onEscape}
 />

-{#if timelineManager.months.length > 0}
+{#if timelineManager.segments.length > 0}
  <Scrubber
    {timelineManager}
    height={timelineManager.viewportHeight}
@@ -615,7 +610,7 @@
    bind:this={timelineElement}
    id="virtual-timeline"
    class:invisible={showSkeleton}
-    style:height={timelineManager.timelineHeight + 'px'}
+    style:height={timelineManager.streamViewerHeight + 'px'}
  >
    <section
      use:resizeObserver={topSectionResizeObserver}
@@ -631,11 +626,11 @@
      {/if}
    </section>

-    {#each timelineManager.months as monthGroup (monthGroup.viewId)}
+    {#each timelineManager.segments as monthGroup (monthGroup.identifier.id)}
      {@const display = monthGroup.intersecting}
      {@const absoluteHeight = monthGroup.top}

-      {#if !monthGroup.isLoaded}
+      {#if !monthGroup.loaded}
        <div
          style:height={monthGroup.height + 'px'}
          style:position="absolute"
@@ -643,7 +638,7 @@
          style:width="100%"
        >
          <Skeleton
-            height={monthGroup.height - monthGroup.timelineManager.headerHeight}
+            height={monthGroup.height - monthGroup.assetStreamManager.headerHeight}
            title={monthGroup.monthGroupTitle}
          />
        </div>
@@ -679,7 +674,7 @@
      style:position="absolute"
      style:left="0"
      style:right="0"
-      style:transform={`translate3d(0,${timelineManager.timelineHeight}px,0)`}
+      style:transform={`translate3d(0,${timelineManager.streamViewerHeight}px,0)`}
    ></div>
  </section>
 </section>
--- a/web/src/lib/components/timeline/TimelineDateGroup.svelte
+++ b/web/src/lib/components/timeline/TimelineDateGroup.svelte
@@ -12,7 +12,6 @@

  import { mdiCheckCircle, mdiCircleOutline } from '@mdi/js';

-  import { fromTimelinePlainDate, getDateLocaleString } from '$lib/utils/timeline-util';
  import { Icon } from '@immich/ui';
  import type { Snippet } from 'svelte';
  import { flip } from 'svelte/animate';
@@ -67,7 +66,7 @@
  let hoveredDayGroup = $state();

  const transitionDuration = $derived.by(() =>
-    monthGroup.timelineManager.suspendTransitions && !$isUploading ? 0 : 150,
+    monthGroup.assetStreamManager.suspendTransitions && !$isUploading ? 0 : 150,
  );
  const scaleDuration = $derived(transitionDuration === 0 ? 0 : transitionDuration + 100);
  const _onClick = (
@@ -125,18 +124,8 @@
    return intersectable.filter((int) => int.intersecting);
  }

-  const getDayGroupFullDate = (dayGroup: DayGroup): string => {
-    const { month, year } = dayGroup.monthGroup.yearMonth;
-    const date = fromTimelinePlainDate({
-      year,
-      month,
-      day: dayGroup.day,
-    });
-    return getDateLocaleString(date);
-  };
-
  $effect.root(() => {
-    if (timelineManager.scrollCompensation.monthGroup === monthGroup) {
+    if (timelineManager.scrollCompensation.segment === monthGroup) {
      onScrollCompensation(timelineManager.scrollCompensation);
      timelineManager.clearScrollCompensation();
    }
@@ -149,8 +138,8 @@
  <!-- svelte-ignore a11y_no_static_element_interactions -->
  <section
    class={[
-      { 'transition-all': !monthGroup.timelineManager.suspendTransitions },
-      !monthGroup.timelineManager.suspendTransitions && `delay-${transitionDuration}`,
+      { 'transition-all': !monthGroup.assetStreamManager.suspendTransitions },
+      !monthGroup.assetStreamManager.suspendTransitions && `delay-${transitionDuration}`,
    ]}
    data-group
    style:position="absolute"
@@ -185,7 +174,7 @@
        </div>
      {/if}

-      <span class="w-full truncate first-letter:capitalize" title={getDayGroupFullDate(dayGroup)}>
+      <span class="w-full truncate first-letter:capitalize" title={dayGroup.groupTitleFull}>
        {dayGroup.groupTitle}
      </span>
    </div>
@@ -228,9 +217,9 @@
            onSelect={(asset) => assetSelectHandler(timelineManager, asset, dayGroup.getAssets(), dayGroup.groupTitle)}
            onMouseEvent={() => assetMouseEventHandler(dayGroup.groupTitle, assetSnapshot(asset))}
            selected={assetInteraction.hasSelectedAsset(asset.id) ||
-              dayGroup.monthGroup.timelineManager.albumAssets.has(asset.id)}
+              dayGroup.monthGroup.assetStreamManager.albumAssets.has(asset.id)}
            selectionCandidate={assetInteraction.hasSelectionCandidate(asset.id)}
-            disabled={dayGroup.monthGroup.timelineManager.albumAssets.has(asset.id)}
+            disabled={dayGroup.monthGroup.assetStreamManager.albumAssets.has(asset.id)}
            thumbnailWidth={position.width}
            thumbnailHeight={position.height}
          />
--- a/web/src/lib/components/timeline/actions/TimelineKeyboardActions.svelte
+++ b/web/src/lib/components/timeline/actions/TimelineKeyboardActions.svelte
@@ -127,7 +127,7 @@
  };

  const isTrashEnabled = $derived($featureFlags.loaded && $featureFlags.trash);
-  const isEmpty = $derived(timelineManager.isInitialized && timelineManager.months.length === 0);
+  const isEmpty = $derived(timelineManager.isInitialized && timelineManager.segments.length === 0);
  const idsSelectedAssets = $derived(assetInteraction.selectedAssets.map(({ id }) => id));
  let isShortcutModalOpen = false;

--- a/web/src/lib/managers/AssetStreamManager/AssetStreamManager.svelte.ts
+++ b/web/src/lib/managers/AssetStreamManager/AssetStreamManager.svelte.ts
@@ -0,0 +1,317 @@
+import type { AssetStreamSegment, SegmentIdentifier } from '$lib/managers/AssetStreamManager/AssetStreamSegment.svelte';
+import type { AssetDescriptor, TimelineAsset } from '$lib/managers/timeline-manager/types';
+import { CancellableTask, TaskStatus } from '$lib/utils/cancellable-task';
+import { TUNABLES } from '$lib/utils/tunables';
+import { clamp, debounce } from 'lodash-es';
+
+const {
+  TIMELINE: { INTERSECTION_EXPAND_TOP, INTERSECTION_EXPAND_BOTTOM },
+} = TUNABLES;
+
+export abstract class AssetStreamManager {
+  isInitialized = $state(false);
+  topSectionHeight = $state(0);
+  bottomSectionHeight = $state(60);
+
+  streamViewerHeight = $derived.by(
+    () => this.segments.reduce((accumulator, b) => accumulator + b.height, 0) + this.topSectionHeight,
+  );
+  assetCount = $derived.by(() => this.segments.reduce((accumulator, b) => accumulator + b.assetsCount, 0));
+
+  topIntersectingSegment: AssetStreamSegment | undefined = $state();
+
+  visibleWindow = $derived.by(() => ({
+    top: this.#scrollTop,
+    bottom: this.#scrollTop + this.viewportHeight,
+  }));
+
+  protected initTask = new CancellableTask(
+    () => (this.isInitialized = true),
+    () => (this.isInitialized = false),
+    () => void 0,
+  );
+
+  #viewportHeight = $state(0);
+  #viewportWidth = $state(0);
+  #scrollTop = $state(0);
+
+  #rowHeight = $state(235);
+  #headerHeight = $state(48);
+  #gap = $state(12);
+
+  #scrolling = $state(false);
+  #suspendTransitions = $state(false);
+  #resetScrolling = debounce(() => (this.#scrolling = false), 1000);
+  #resetSuspendTransitions = debounce(() => (this.suspendTransitions = false), 1000);
+  scrollCompensation: {
+    heightDelta: number | undefined;
+    scrollTop: number | undefined;
+    segment: AssetStreamSegment | undefined;
+  } = $state({
+    heightDelta: 0,
+    scrollTop: 0,
+    segment: undefined,
+  });
+
+  constructor() {}
+
+  setLayoutOptions({ headerHeight = 48, rowHeight = 235, gap = 12 }) {
+    let changed = false;
+    changed ||= this.#setHeaderHeight(headerHeight);
+    changed ||= this.#setGap(gap);
+    changed ||= this.#setRowHeight(rowHeight);
+    if (changed) {
+      this.refreshLayout();
+    }
+  }
+
+  abstract get segments(): AssetStreamSegment[];
+
+  get maxScrollPercent() {
+    const totalHeight = this.streamViewerHeight + this.bottomSectionHeight + this.topSectionHeight;
+    return (totalHeight - this.viewportHeight) / totalHeight;
+  }
+
+  get maxScroll() {
+    return this.topSectionHeight + this.bottomSectionHeight + (this.streamViewerHeight - this.viewportHeight);
+  }
+
+  #setHeaderHeight(value: number) {
+    if (this.#headerHeight == value) {
+      return false;
+    }
+    this.#headerHeight = value;
+    return true;
+  }
+
+  get headerHeight() {
+    return this.#headerHeight;
+  }
+
+  #setGap(value: number) {
+    if (this.#gap == value) {
+      return false;
+    }
+    this.#gap = value;
+    return true;
+  }
+
+  get gap() {
+    return this.#gap;
+  }
+
+  #setRowHeight(value: number) {
+    if (this.#rowHeight == value) {
+      return false;
+    }
+    this.#rowHeight = value;
+    return true;
+  }
+
+  get rowHeight() {
+    return this.#rowHeight;
+  }
+
+  set scrolling(value: boolean) {
+    this.#scrolling = value;
+    if (value) {
+      this.suspendTransitions = true;
+      this.#resetScrolling();
+    }
+  }
+
+  get scrolling() {
+    return this.#scrolling;
+  }
+
+  set suspendTransitions(value: boolean) {
+    this.#suspendTransitions = value;
+    if (value) {
+      this.#resetSuspendTransitions();
+    }
+  }
+
+  get suspendTransitions() {
+    return this.#suspendTransitions;
+  }
+
+  set viewportWidth(value: number) {
+    const changed = value !== this.#viewportWidth;
+    this.#viewportWidth = value;
+    this.suspendTransitions = true;
+    void this.updateViewportGeometry(changed);
+  }
+
+  get viewportWidth() {
+    return this.#viewportWidth;
+  }
+
+  set viewportHeight(value: number) {
+    this.#viewportHeight = value;
+    this.#suspendTransitions = true;
+    void this.updateViewportGeometry(false);
+  }
+
+  get viewportHeight() {
+    return this.#viewportHeight;
+  }
+
+  get hasEmptyViewport() {
+    return this.viewportWidth === 0 || this.viewportHeight === 0;
+  }
+
+  updateSlidingWindow(scrollTop: number) {
+    if (this.#scrollTop !== scrollTop) {
+      this.#scrollTop = scrollTop;
+      this.updateIntersections();
+    }
+  }
+
+  clearScrollCompensation() {
+    this.scrollCompensation = {
+      heightDelta: undefined,
+      scrollTop: undefined,
+      segment: undefined,
+    };
+  }
+
+  updateIntersections() {
+    if (!this.isInitialized || this.visibleWindow.bottom === this.visibleWindow.top) {
+      return;
+    }
+    let topIntersectingSegment = undefined;
+    for (const segment of this.segments) {
+      this.updateSegmentIntersections(segment);
+      if (!topIntersectingSegment && segment.actuallyIntersecting) {
+        topIntersectingSegment = segment;
+      }
+    }
+    if (topIntersectingSegment !== undefined && this.topIntersectingSegment !== topIntersectingSegment) {
+      this.topIntersectingSegment = topIntersectingSegment;
+    }
+    for (const segment of this.segments) {
+      if (segment === this.topIntersectingSegment) {
+        this.topIntersectingSegment.percent = clamp(
+          (this.visibleWindow.top - this.topIntersectingSegment.top) / this.topIntersectingSegment.height,
+          0,
+          1,
+        );
+      } else {
+        segment.percent = 0;
+      }
+    }
+  }
+
+  async init() {
+    this.isInitialized = false;
+    await this.initTask.execute(() => Promise.resolve(undefined), true);
+  }
+
+  destroy() {
+    this.isInitialized = false;
+  }
+
+  protected updateViewportGeometry(changedWidth: boolean) {
+    if (!this.isInitialized || this.hasEmptyViewport) {
+      return;
+    }
+    for (const segment of this.segments) {
+      segment.updateGeometry({ invalidateHeight: changedWidth });
+    }
+    this.updateIntersections();
+  }
+
+  createLayoutOptions() {
+    const viewportWidth = this.viewportWidth;
+
+    return {
+      spacing: 2,
+      heightTolerance: 0.15,
+      rowHeight: this.#rowHeight,
+      rowWidth: Math.floor(viewportWidth),
+    };
+  }
+
+  async loadSegment(identifier: SegmentIdentifier, options?: { cancelable: boolean }): Promise<void> {
+    const { cancelable = true } = options ?? {};
+    const segment = this.segments.find((segment) => identifier.matches(segment));
+    if (!segment || segment.loader?.executed) {
+      return;
+    }
+
+    const result = await segment.load(cancelable);
+    if (result === TaskStatus.LOADED) {
+      this.updateSegmentIntersections(segment);
+    }
+  }
+
+  getSegmentForAssetId(assetId: string) {
+    for (const segment of this.segments) {
+      const asset = segment.assets.find((asset) => asset.id === assetId);
+      if (asset) {
+        return segment;
+      }
+    }
+  }
+
+  refreshLayout() {
+    for (const segment of this.segments) {
+      segment.updateGeometry({ invalidateHeight: true });
+    }
+    this.updateIntersections();
+  }
+
+  retrieveRange(start: AssetDescriptor, end: AssetDescriptor): Promise<TimelineAsset[]> {
+    const range: TimelineAsset[] = [];
+    let collecting = false;
+
+    for (const segment of this.segments) {
+      for (const asset of segment.assets) {
+        if (asset.id === start.id) {
+          collecting = true;
+        }
+        if (collecting) {
+          range.push(asset);
+        }
+        if (asset.id === end.id) {
+          return Promise.resolve(range);
+        }
+      }
+    }
+    return Promise.resolve(range);
+  }
+
+  protected calculateSegmentIntersecting(segment: AssetStreamSegment, expandTop: number, expandBottom: number) {
+    const monthGroupTop = segment.top;
+    const monthGroupBottom = monthGroupTop + segment.height;
+    const topWindow = this.visibleWindow.top - expandTop;
+    const bottomWindow = this.visibleWindow.bottom + expandBottom;
+
+    return isIntersecting(monthGroupTop, monthGroupBottom, topWindow, bottomWindow);
+  }
+
+  protected updateSegmentIntersections(segment: AssetStreamSegment) {
+    const actuallyIntersecting = this.calculateSegmentIntersecting(segment, 0, 0);
+    let preIntersecting = false;
+    if (!actuallyIntersecting) {
+      preIntersecting = this.calculateSegmentIntersecting(segment, INTERSECTION_EXPAND_TOP, INTERSECTION_EXPAND_BOTTOM);
+    }
+    segment.updateIntersection({ intersecting: actuallyIntersecting || preIntersecting, actuallyIntersecting });
+  }
+}
+
+/**
+ * General function to check if a rectangular region intersects with a window.
+ * @param regionTop - Top position of the region to check
+ * @param regionBottom - Bottom position of the region to check
+ * @param windowTop - Top position of the window
+ * @param windowBottom - Bottom position of the window
+ * @returns true if the region intersects with the window
+ */
+export function isIntersecting(regionTop: number, regionBottom: number, windowTop: number, windowBottom: number) {
+  return (
+    (regionTop >= windowTop && regionTop < windowBottom) ||
+    (regionBottom >= windowTop && regionBottom < windowBottom) ||
+    (regionTop < windowTop && regionBottom >= windowBottom)
+  );
+}
--- a/web/src/lib/managers/AssetStreamManager/AssetStreamSegment.svelte.ts
+++ b/web/src/lib/managers/AssetStreamManager/AssetStreamSegment.svelte.ts
@@ -0,0 +1,166 @@
+import type { AssetStreamManager } from '$lib/managers/AssetStreamManager/AssetStreamManager.svelte';
+import type { TimelineAsset, UpdateGeometryOptions } from '$lib/managers/timeline-manager/types';
+import type { ViewerAsset } from '$lib/managers/timeline-manager/viewer-asset.svelte';
+import { CancellableTask, TaskStatus } from '$lib/utils/cancellable-task';
+import { handleError } from '$lib/utils/handle-error';
+import { t } from 'svelte-i18n';
+import { get } from 'svelte/store';
+
+export type SegmentIdentifier = {
+  get id(): string;
+  matches(segment: AssetStreamSegment): boolean;
+};
+export abstract class AssetStreamSegment {
+  #intersecting = $state(false);
+  #actuallyIntersecting = $state(false);
+  #isLoaded = $state(false);
+
+  #height = $state(0);
+  #top = $state(0);
+  #assets = $derived.by(() => this.viewerAssets.map((viewerAsset) => viewerAsset.asset));
+
+  initialCount = $state(0);
+  percent = $state(0);
+
+  assetsCount = $derived.by(() => (this.loaded ? this.viewerAssets.length : this.initialCount));
+  loader = new CancellableTask(
+    () => (this.loaded = true),
+    () => (this.loaded = false),
+    () => this.handleLoadError,
+  );
+  isHeightActual = $state(false);
+
+  abstract get assetStreamManager(): AssetStreamManager;
+
+  abstract get identifier(): SegmentIdentifier;
+
+  abstract get viewerAssets(): ViewerAsset[];
+
+  abstract findAssetAbsolutePosition(assetId: string): number;
+
+  protected abstract fetch(signal: AbortSignal): Promise<void>;
+
+  get loaded() {
+    return this.#isLoaded;
+  }
+
+  protected set loaded(newValue: boolean) {
+    this.#isLoaded = newValue;
+  }
+
+  set intersecting(newValue: boolean) {
+    const old = this.#intersecting;
+    if (old === newValue) {
+      return;
+    }
+    this.#intersecting = newValue;
+    if (newValue) {
+      void this.load(true);
+    } else {
+      this.cancel();
+    }
+  }
+
+  get intersecting() {
+    return this.#intersecting;
+  }
+
+  get actuallyIntersecting() {
+    return this.#actuallyIntersecting;
+  }
+
+  get assets(): TimelineAsset[] {
+    return this.#assets;
+  }
+
+  set height(height: number) {
+    if (this.#height === height) {
+      return;
+    }
+    const { assetStreamManager: store, percent } = this;
+    const index = store.segments.indexOf(this);
+    const heightDelta = height - this.#height;
+    this.#height = height;
+    const prevSegment = store.segments[index - 1];
+    if (prevSegment) {
+      const newTop = prevSegment.#top + prevSegment.#height;
+      if (this.#top !== newTop) {
+        this.#top = newTop;
+      }
+    }
+    for (let cursor = index + 1; cursor < store.segments.length; cursor++) {
+      const segment = this.assetStreamManager.segments[cursor];
+      const newTop = segment.#top + heightDelta;
+      if (segment.#top !== newTop) {
+        segment.#top = newTop;
+      }
+    }
+    if (store.topIntersectingSegment) {
+      const currentIndex = store.segments.indexOf(store.topIntersectingSegment);
+      if (currentIndex > 0) {
+        if (index < currentIndex) {
+          store.scrollCompensation = {
+            heightDelta,
+            scrollTop: undefined,
+            segment: this,
+          };
+        } else if (percent > 0) {
+          const top = this.top + height * percent;
+          store.scrollCompensation = {
+            heightDelta: undefined,
+            scrollTop: top,
+            segment: this,
+          };
+        }
+      }
+    }
+  }
+
+  get height() {
+    return this.#height;
+  }
+
+  get top(): number {
+    return this.#top + this.assetStreamManager.topSectionHeight;
+  }
+
+  async load(cancelable: boolean): Promise<TaskStatus> {
+    return await this.loader?.execute(async (signal: AbortSignal) => {
+      await this.fetch(signal);
+    }, cancelable);
+  }
+
+  protected handleLoadError(error: unknown) {
+    const _$t = get(t);
+    handleError(error, _$t('errors.failed_to_load_assets'));
+  }
+
+  cancel() {
+    this.loader?.cancel();
+  }
+
+  layout(_: boolean) {}
+
+  updateIntersection({ intersecting, actuallyIntersecting }: { intersecting: boolean; actuallyIntersecting: boolean }) {
+    this.intersecting = intersecting;
+    this.#actuallyIntersecting = actuallyIntersecting;
+  }
+
+  updateGeometry(options: UpdateGeometryOptions) {
+    const { invalidateHeight, noDefer = false } = options;
+    if (invalidateHeight) {
+      this.isHeightActual = false;
+    }
+    if (!this.loaded) {
+      const viewportWidth = this.assetStreamManager.viewportWidth;
+      if (!this.isHeightActual) {
+        const unwrappedWidth = (3 / 2) * this.assetsCount * this.assetStreamManager.rowHeight * (7 / 10);
+        const rows = Math.ceil(unwrappedWidth / viewportWidth);
+        const height = 51 + Math.max(1, rows) * this.assetStreamManager.rowHeight;
+        this.height = height;
+      }
+      return;
+    }
+    this.layout(noDefer);
+  }
+}
--- a/web/src/lib/managers/timeline-manager/day-group.svelte.ts
+++ b/web/src/lib/managers/timeline-manager/day-group.svelte.ts
@@ -13,6 +13,7 @@ export class DayGroup {
  readonly monthGroup: MonthGroup;
  readonly index: number;
  readonly groupTitle: string;
+  readonly groupTitleFull: string;
  readonly day: number;
  viewerAssets: ViewerAsset[] = $state([]);

@@ -26,11 +27,12 @@ export class DayGroup {
  #col = $state(0);
  #deferredLayout = false;

-  constructor(monthGroup: MonthGroup, index: number, day: number, groupTitle: string) {
+  constructor(monthGroup: MonthGroup, index: number, day: number, groupTitle: string, groupTitleFull: string) {
    this.index = index;
    this.monthGroup = monthGroup;
    this.day = day;
    this.groupTitle = groupTitle;
+    this.groupTitleFull = groupTitleFull;
  }

  get top() {
@@ -131,7 +133,7 @@ export class DayGroup {
      }
      unprocessedIds.delete(assetId);
      processedIds.add(assetId);
-      if (remove || this.monthGroup.timelineManager.isExcluded(asset)) {
+      if (remove || this.monthGroup.assetStreamManager.isExcluded(asset)) {
        this.viewerAssets.splice(index, 1);
        changedGeometry = true;
      }
--- a/web/src/lib/managers/timeline-manager/internal/intersection-support.svelte.ts
+++ b/web/src/lib/managers/timeline-manager/internal/intersection-support.svelte.ts
@@ -1,75 +1,29 @@
+import { isIntersecting, type AssetStreamManager } from '$lib/managers/AssetStreamManager/AssetStreamManager.svelte';
 import { TUNABLES } from '$lib/utils/tunables';
-import type { MonthGroup } from '../month-group.svelte';
-import type { TimelineManager } from '../timeline-manager.svelte';

 const {
  TIMELINE: { INTERSECTION_EXPAND_TOP, INTERSECTION_EXPAND_BOTTOM },
 } = TUNABLES;

-export function updateIntersectionMonthGroup(timelineManager: TimelineManager, month: MonthGroup) {
-  const actuallyIntersecting = calculateMonthGroupIntersecting(timelineManager, month, 0, 0);
-  let preIntersecting = false;
-  if (!actuallyIntersecting) {
-    preIntersecting = calculateMonthGroupIntersecting(
-      timelineManager,
-      month,
-      INTERSECTION_EXPAND_TOP,
-      INTERSECTION_EXPAND_BOTTOM,
-    );
-  }
-  month.intersecting = actuallyIntersecting || preIntersecting;
-  month.actuallyIntersecting = actuallyIntersecting;
-  if (preIntersecting || actuallyIntersecting) {
-    timelineManager.clearDeferredLayout(month);
-  }
-}
-
-/**
- * General function to check if a rectangular region intersects with a window.
- * @param regionTop - Top position of the region to check
- * @param regionBottom - Bottom position of the region to check
- * @param windowTop - Top position of the window
- * @param windowBottom - Bottom position of the window
- * @returns true if the region intersects with the window
- */
-export function isIntersecting(regionTop: number, regionBottom: number, windowTop: number, windowBottom: number) {
-  return (
-    (regionTop >= windowTop && regionTop < windowBottom) ||
-    (regionBottom >= windowTop && regionBottom < windowBottom) ||
-    (regionTop < windowTop && regionBottom >= windowBottom)
-  );
-}
-
-export function calculateMonthGroupIntersecting(
-  timelineManager: TimelineManager,
-  monthGroup: MonthGroup,
-  expandTop: number,
-  expandBottom: number,
-) {
-  const monthGroupTop = monthGroup.top;
-  const monthGroupBottom = monthGroupTop + monthGroup.height;
-  const topWindow = timelineManager.visibleWindow.top - expandTop;
-  const bottomWindow = timelineManager.visibleWindow.bottom + expandBottom;
-
-  return isIntersecting(monthGroupTop, monthGroupBottom, topWindow, bottomWindow);
-}
-
 /**
 * Calculate intersection for viewer assets with additional parameters like header height and scroll compensation
 */
 export function calculateViewerAssetIntersecting(
-  timelineManager: TimelineManager,
+  assetStreamManager: AssetStreamManager,
  positionTop: number,
  positionHeight: number,
  expandTop: number = INTERSECTION_EXPAND_TOP,
  expandBottom: number = INTERSECTION_EXPAND_BOTTOM,
 ) {
-  const scrollCompensationHeightDelta = timelineManager.scrollCompensation?.heightDelta ?? 0;
+  const scrollCompensationHeightDelta = assetStreamManager.scrollCompensation?.heightDelta ?? 0;

  const topWindow =
-    timelineManager.visibleWindow.top - timelineManager.headerHeight - expandTop + scrollCompensationHeightDelta;
+    assetStreamManager.visibleWindow.top - assetStreamManager.headerHeight - expandTop + scrollCompensationHeightDelta;
  const bottomWindow =
-    timelineManager.visibleWindow.bottom + timelineManager.headerHeight + expandBottom + scrollCompensationHeightDelta;
+    assetStreamManager.visibleWindow.bottom +
+    assetStreamManager.headerHeight +
+    expandBottom +
+    scrollCompensationHeightDelta;

  const positionBottom = positionTop + positionHeight;

--- a/web/src/lib/managers/timeline-manager/internal/layout-support.svelte.ts
+++ b/web/src/lib/managers/timeline-manager/internal/layout-support.svelte.ts
@@ -1,24 +1,5 @@
+import type { TimelineManager } from '$lib/managers/timeline-manager/timeline-manager.svelte';
 import type { MonthGroup } from '../month-group.svelte';
-import type { TimelineManager } from '../timeline-manager.svelte';
-import type { UpdateGeometryOptions } from '../types';
-
-export function updateGeometry(timelineManager: TimelineManager, month: MonthGroup, options: UpdateGeometryOptions) {
-  const { invalidateHeight, noDefer = false } = options;
-  if (invalidateHeight) {
-    month.isHeightActual = false;
-  }
-  if (!month.isLoaded) {
-    const viewportWidth = timelineManager.viewportWidth;
-    if (!month.isHeightActual) {
-      const unwrappedWidth = (3 / 2) * month.assetsCount * timelineManager.rowHeight * (7 / 10);
-      const rows = Math.ceil(unwrappedWidth / viewportWidth);
-      const height = 51 + Math.max(1, rows) * timelineManager.rowHeight;
-      month.height = height;
-    }
-    return;
-  }
-  layoutMonthGroup(timelineManager, month, noDefer);
-}

 export function layoutMonthGroup(timelineManager: TimelineManager, month: MonthGroup, noDefer: boolean = false) {
  let cumulativeHeight = 0;
--- a/web/src/lib/managers/timeline-manager/internal/operations-support.svelte.ts
+++ b/web/src/lib/managers/timeline-manager/internal/operations-support.svelte.ts
@@ -1,12 +1,10 @@
 import { setDifference, type TimelineDate } from '$lib/utils/timeline-util';
 import { AssetOrder } from '@immich/sdk';
-
 import { SvelteSet } from 'svelte/reactivity';
 import { GroupInsertionCache } from '../group-insertion-cache.svelte';
 import { MonthGroup } from '../month-group.svelte';
 import type { TimelineManager } from '../timeline-manager.svelte';
 import type { AssetOperation, TimelineAsset } from '../types';
-import { updateGeometry } from './layout-support.svelte';
 import { getMonthGroupByDate } from './search-support.svelte';

 export function addAssetsToMonthGroups(
@@ -17,25 +15,23 @@ export function addAssetsToMonthGroups(
  if (assets.length === 0) {
    return;
  }
-
  const addContext = new GroupInsertionCache();
  const updatedMonthGroups = new SvelteSet<MonthGroup>();
-  const monthCount = timelineManager.months.length;
+  const monthCount = timelineManager.segments.length;
  for (const asset of assets) {
    let month = getMonthGroupByDate(timelineManager, asset.localDateTime);

    if (!month) {
-      month = new MonthGroup(timelineManager, asset.localDateTime, 1, options.order);
-      month.isLoaded = true;
-      timelineManager.months.push(month);
+      month = new MonthGroup(timelineManager, asset.localDateTime, 1, true, options.order);
+      timelineManager.segments.push(month);
    }

    month.addTimelineAsset(asset, addContext);
    updatedMonthGroups.add(month);
  }

-  if (timelineManager.months.length !== monthCount) {
-    timelineManager.months.sort((a, b) => {
+  if (timelineManager.segments.length !== monthCount) {
+    timelineManager.segments.sort((a, b) => {
      return a.yearMonth.year === b.yearMonth.year
        ? b.yearMonth.month - a.yearMonth.month
        : b.yearMonth.year - a.yearMonth.year;
@@ -52,7 +48,7 @@ export function addAssetsToMonthGroups(

  for (const month of addContext.updatedBuckets) {
    month.sortDayGroups();
-    updateGeometry(timelineManager, month, { invalidateHeight: true });
+    month.updateGeometry({ invalidateHeight: true });
  }
  timelineManager.updateIntersections();
 }
@@ -71,7 +67,7 @@ export function runAssetOperation(
  let idsToProcess = new SvelteSet(ids);
  const idsProcessed = new SvelteSet<string>();
  const combinedMoveAssets: { asset: TimelineAsset; date: TimelineDate }[][] = [];
-  for (const month of timelineManager.months) {
+  for (const month of timelineManager.segments) {
    if (idsToProcess.size > 0) {
      const { moveAssets, processedIds, changedGeometry } = month.runAssetOperation(idsToProcess, operation);
      if (moveAssets.length > 0) {
@@ -95,7 +91,7 @@ export function runAssetOperation(
  }
  const changedGeometry = changedMonthGroups.size > 0;
  for (const month of changedMonthGroups) {
-    updateGeometry(timelineManager, month, { invalidateHeight: true });
+    month.updateGeometry({ invalidateHeight: true });
  }
  if (changedGeometry) {
    timelineManager.updateIntersections();
--- a/web/src/lib/managers/timeline-manager/internal/search-support.svelte.ts
+++ b/web/src/lib/managers/timeline-manager/internal/search-support.svelte.ts
@@ -32,7 +32,7 @@ export async function getAssetWithOffset(
 }

 export function findMonthGroupForAsset(timelineManager: TimelineManager, id: string) {
-  for (const month of timelineManager.months) {
+  for (const month of timelineManager.segments) {
    const asset = month.findAssetById({ id });
    if (asset) {
      return { monthGroup: month, asset };
@@ -44,7 +44,7 @@ export function getMonthGroupByDate(
  timelineManager: TimelineManager,
  targetYearMonth: TimelineYearMonth,
 ): MonthGroup | undefined {
-  return timelineManager.months.find(
+  return timelineManager.segments.find(
    (month) => month.yearMonth.year === targetYearMonth.year && month.yearMonth.month === targetYearMonth.month,
  );
 }
@@ -136,7 +136,7 @@ export async function retrieveRange(timelineManager: TimelineManager, start: Ass
 }

 export function findMonthGroupForDate(timelineManager: TimelineManager, targetYearMonth: TimelineYearMonth) {
-  for (const month of timelineManager.months) {
+  for (const month of timelineManager.segments) {
    const { year, month: monthNum } = month.yearMonth;
    if (monthNum === targetYearMonth.month && year === targetYearMonth.year) {
      return month;
--- a/web/src/lib/managers/timeline-manager/month-group.svelte.ts
+++ b/web/src/lib/managers/timeline-manager/month-group.svelte.ts
@@ -1,9 +1,9 @@
-import { AssetOrder, type TimeBucketAssetResponseDto } from '@immich/sdk';
-
-import { CancellableTask } from '$lib/utils/cancellable-task';
-import { handleError } from '$lib/utils/handle-error';
+import { AssetStreamSegment, type SegmentIdentifier } from '$lib/managers/AssetStreamManager/AssetStreamSegment.svelte';
+import { layoutMonthGroup } from '$lib/managers/timeline-manager/internal/layout-support.svelte';
+import { loadFromTimeBuckets } from '$lib/managers/timeline-manager/internal/load-support.svelte';
 import {
  formatGroupTitle,
+  formatGroupTitleFull,
  formatMonthGroupTitle,
  fromTimelinePlainDate,
  fromTimelinePlainDateTime,
@@ -13,82 +13,55 @@ import {
  type TimelineDateTime,
  type TimelineYearMonth,
 } from '$lib/utils/timeline-util';
-
-import { t } from 'svelte-i18n';
-import { get } from 'svelte/store';
-
+import { AssetOrder, type TimeBucketAssetResponseDto } from '@immich/sdk';
 import { SvelteSet } from 'svelte/reactivity';
 import { DayGroup } from './day-group.svelte';
 import { GroupInsertionCache } from './group-insertion-cache.svelte';
-import type { TimelineManager } from './timeline-manager.svelte';
+import { getSegmentIdentifier, type TimelineManager } from './timeline-manager.svelte';
 import type { AssetDescriptor, AssetOperation, Direction, MoveAsset, TimelineAsset } from './types';
 import { ViewerAsset } from './viewer-asset.svelte';

-export class MonthGroup {
-  #intersecting: boolean = $state(false);
-  actuallyIntersecting: boolean = $state(false);
-  isLoaded: boolean = $state(false);
+export class MonthGroup extends AssetStreamSegment {
  dayGroups: DayGroup[] = $state([]);
-  readonly timelineManager: TimelineManager;

-  #height: number = $state(0);
-  #top: number = $state(0);
-
-  #initialCount: number = 0;
  #sortOrder: AssetOrder = AssetOrder.Desc;
-  percent: number = $state(0);
-
-  assetsCount: number = $derived(
-    this.isLoaded
-      ? this.dayGroups.reduce((accumulator, g) => accumulator + g.viewerAssets.length, 0)
-      : this.#initialCount,
-  );
-  loader: CancellableTask | undefined;
-  isHeightActual: boolean = $state(false);
+  #yearMonth: TimelineYearMonth;
+  #identifier: SegmentIdentifier;
+  #timelineManager: TimelineManager;

  readonly monthGroupTitle: string;
-  readonly yearMonth: TimelineYearMonth;

  constructor(
-    store: TimelineManager,
+    timelineManager: TimelineManager,
    yearMonth: TimelineYearMonth,
    initialCount: number,
+    loaded: boolean,
    order: AssetOrder = AssetOrder.Desc,
  ) {
-    this.timelineManager = store;
-    this.#initialCount = initialCount;
+    super();
+    this.initialCount = initialCount;
+    this.#yearMonth = yearMonth;
+    this.#identifier = getSegmentIdentifier(yearMonth);
+    this.#timelineManager = timelineManager;
    this.#sortOrder = order;
-
-    this.yearMonth = yearMonth;
    this.monthGroupTitle = formatMonthGroupTitle(fromTimelinePlainYearMonth(yearMonth));
-
-    this.loader = new CancellableTask(
-      () => {
-        this.isLoaded = true;
-      },
-      () => {
-        this.dayGroups = [];
-        this.isLoaded = false;
-      },
-      this.#handleLoadError,
-    );
+    this.loaded = loaded;
  }

-  set intersecting(newValue: boolean) {
-    const old = this.#intersecting;
-    if (old === newValue) {
-      return;
-    }
-    this.#intersecting = newValue;
-    if (newValue) {
-      void this.timelineManager.loadMonthGroup(this.yearMonth);
-    } else {
-      this.cancel();
-    }
+  get identifier() {
+    return this.#identifier;
  }

-  get intersecting() {
-    return this.#intersecting;
+  get assetStreamManager() {
+    return this.#timelineManager;
+  }
+
+  get yearMonth() {
+    return this.#yearMonth;
+  }
+
+  fetch(signal: AbortSignal): Promise<void> {
+    return loadFromTimeBuckets(this.assetStreamManager, this, this.assetStreamManager.options, signal);
  }

  get lastDayGroup() {
@@ -99,9 +72,9 @@ export class MonthGroup {
    return this.dayGroups[0]?.getFirstAsset();
  }

-  getAssets() {
+  get viewerAssets() {
    // eslint-disable-next-line unicorn/no-array-reduce
-    return this.dayGroups.reduce((accumulator: TimelineAsset[], g: DayGroup) => accumulator.concat(g.getAssets()), []);
+    return this.dayGroups.reduce((accumulator: ViewerAsset[], g: DayGroup) => accumulator.concat(g.viewerAssets), []);
  }

  sortDayGroups() {
@@ -222,7 +195,8 @@ export class MonthGroup {
      addContext.setDayGroup(dayGroup, localDateTime);
    } else {
      const groupTitle = formatGroupTitle(fromTimelinePlainDate(localDateTime));
-      dayGroup = new DayGroup(this, this.dayGroups.length, localDateTime.day, groupTitle);
+      const groupTitleFull = formatGroupTitleFull(fromTimelinePlainDate(localDateTime));
+      dayGroup = new DayGroup(this, this.dayGroups.length, localDateTime.day, groupTitle, groupTitleFull);
      this.dayGroups.push(dayGroup);
      addContext.setDayGroup(dayGroup, localDateTime);
      addContext.newDayGroups.add(dayGroup);
@@ -233,67 +207,6 @@ export class MonthGroup {
    addContext.changedDayGroups.add(dayGroup);
  }

-  get viewId() {
-    const { year, month } = this.yearMonth;
-    return year + '-' + month;
-  }
-
-  set height(height: number) {
-    if (this.#height === height) {
-      return;
-    }
-    const { timelineManager: store, percent } = this;
-    const index = store.months.indexOf(this);
-    const heightDelta = height - this.#height;
-    this.#height = height;
-    const prevMonthGroup = store.months[index - 1];
-    if (prevMonthGroup) {
-      const newTop = prevMonthGroup.#top + prevMonthGroup.#height;
-      if (this.#top !== newTop) {
-        this.#top = newTop;
-      }
-    }
-    for (let cursor = index + 1; cursor < store.months.length; cursor++) {
-      const monthGroup = this.timelineManager.months[cursor];
-      const newTop = monthGroup.#top + heightDelta;
-      if (monthGroup.#top !== newTop) {
-        monthGroup.#top = newTop;
-      }
-    }
-    if (store.topIntersectingMonthGroup) {
-      const currentIndex = store.months.indexOf(store.topIntersectingMonthGroup);
-      if (currentIndex > 0) {
-        if (index < currentIndex) {
-          store.scrollCompensation = {
-            heightDelta,
-            scrollTop: undefined,
-            monthGroup: this,
-          };
-        } else if (percent > 0) {
-          const top = this.top + height * percent;
-          store.scrollCompensation = {
-            heightDelta: undefined,
-            scrollTop: top,
-            monthGroup: this,
-          };
-        }
-      }
-    }
-  }
-
-  get height() {
-    return this.#height;
-  }
-
-  get top(): number {
-    return this.#top + this.timelineManager.topSectionHeight;
-  }
-
-  #handleLoadError(error: unknown) {
-    const _$t = get(t);
-    handleError(error, _$t('errors.failed_to_load_assets'));
-  }
-
  findDayGroupForAsset(asset: TimelineAsset) {
    for (const group of this.dayGroups) {
      if (group.viewerAssets.some((viewerAsset) => viewerAsset.id === asset.id)) {
@@ -307,7 +220,7 @@ export class MonthGroup {
  }

  findAssetAbsolutePosition(assetId: string) {
-    this.timelineManager.clearDeferredLayout(this);
+    this.#clearDeferredLayout();
    for (const group of this.dayGroups) {
      const viewerAsset = group.viewerAssets.find((viewAsset) => viewAsset.id === assetId);
      if (viewerAsset) {
@@ -315,7 +228,7 @@ export class MonthGroup {
          console.warn('No position for asset');
          break;
        }
-        return this.top + group.top + viewerAsset.position.top + this.timelineManager.headerHeight;
+        return this.top + group.top + viewerAsset.position.top + this.assetStreamManager.headerHeight;
      }
    }
    return -1;
@@ -365,4 +278,25 @@ export class MonthGroup {
  cancel() {
    this.loader?.cancel();
  }
+
+  layout(noDefer: boolean) {
+    layoutMonthGroup(this.assetStreamManager, this, noDefer);
+  }
+
+  #clearDeferredLayout() {
+    const hasDeferred = this.dayGroups.some((group) => group.deferredLayout);
+    if (hasDeferred) {
+      this.updateGeometry({ invalidateHeight: true, noDefer: true });
+      for (const group of this.dayGroups) {
+        group.deferredLayout = false;
+      }
+    }
+  }
+
+  updateIntersection({ intersecting, actuallyIntersecting }: { intersecting: boolean; actuallyIntersecting: boolean }) {
+    super.updateIntersection({ intersecting, actuallyIntersecting });
+    if (intersecting) {
+      this.#clearDeferredLayout();
+    }
+  }
 }
--- a/web/src/lib/managers/timeline-manager/timeline-manager.svelte.spec.ts
+++ b/web/src/lib/managers/timeline-manager/timeline-manager.svelte.spec.ts
@@ -1,10 +1,11 @@
 import { sdkMock } from '$lib/__mocks__/sdk.mock';
 import { getMonthGroupByDate } from '$lib/managers/timeline-manager/internal/search-support.svelte';
+import { TimelineManager } from '$lib/managers/timeline-manager/timeline-manager.svelte';
 import { AbortError } from '$lib/utils';
 import { fromISODateTimeUTCToObject } from '$lib/utils/timeline-util';
 import { type AssetResponseDto, type TimeBucketAssetResponseDto } from '@immich/sdk';
 import { timelineAssetFactory, toResponseDto } from '@test-data/factories/asset-factory';
-import { TimelineManager } from './timeline-manager.svelte';
+import { getSegmentIdentifier } from './timeline-manager.svelte';
 import type { TimelineAsset } from './types';

 async function getAssets(timelineManager: TimelineManager) {
@@ -22,6 +23,14 @@ function deriveLocalDateTimeFromFileCreatedAt(arg: TimelineAsset): TimelineAsset
  };
 }

+const initViewport = async (timelineManager: TimelineManager, viewportHeight = 1000, viewportWidth = 1588) => {
+  timelineManager.viewportHeight = viewportHeight;
+  timelineManager.viewportWidth = viewportWidth;
+  await timelineManager.init();
+  timelineManager.updateSlidingWindow(0);
+  timelineManager.updateIntersections();
+};
+
 describe('TimelineManager', () => {
  beforeEach(() => {
    vi.resetAllMocks();
@@ -63,16 +72,16 @@ describe('TimelineManager', () => {
      ]);

      sdkMock.getTimeBucket.mockImplementation(({ timeBucket }) => Promise.resolve(bucketAssetsResponse[timeBucket]));
-      await timelineManager.updateViewport({ width: 1588, height: 1000 });
+      await initViewport(timelineManager);
    });

    it('should load months in viewport', () => {
      expect(sdkMock.getTimeBuckets).toBeCalledTimes(1);
-      expect(sdkMock.getTimeBucket).toHaveBeenCalledTimes(2);
+      expect(sdkMock.getTimeBucket).toHaveBeenCalledTimes(3);
    });

    it('calculates month height', () => {
-      const plainMonths = timelineManager.months.map((month) => ({
+      const plainMonths = timelineManager.segments.map((month) => ({
        year: month.yearMonth.year,
        month: month.yearMonth.month,
        height: month.height,
@@ -82,17 +91,17 @@ describe('TimelineManager', () => {
        expect.arrayContaining([
          expect.objectContaining({ year: 2024, month: 3, height: 165.5 }),
          expect.objectContaining({ year: 2024, month: 2, height: 11_996 }),
-          expect.objectContaining({ year: 2024, month: 1, height: 286 }),
+          expect.objectContaining({ year: 2024, month: 1, height: 404.5 }),
        ]),
      );
    });

    it('calculates timeline height', () => {
-      expect(timelineManager.timelineHeight).toBe(12_447.5);
+      expect(timelineManager.streamViewerHeight).toBe(12566);
    });
  });

-  describe('loadMonthGroup', () => {
+  describe('loadSegment', () => {
    let timelineManager: TimelineManager;
    const bucketAssets: Record<string, TimelineAsset[]> = {
      '2024-01-03T00:00:00.000Z': timelineAssetFactory.buildList(1).map((asset) =>
@@ -124,52 +133,52 @@ describe('TimelineManager', () => {
        }
        return bucketAssetsResponse[timeBucket];
      });
-      await timelineManager.updateViewport({ width: 1588, height: 0 });
+      await initViewport(timelineManager);
    });

    it('loads a month', async () => {
-      expect(getMonthGroupByDate(timelineManager, { year: 2024, month: 1 })?.getAssets().length).toEqual(0);
-      await timelineManager.loadMonthGroup({ year: 2024, month: 1 });
-      expect(sdkMock.getTimeBucket).toBeCalledTimes(1);
-      expect(getMonthGroupByDate(timelineManager, { year: 2024, month: 1 })?.getAssets().length).toEqual(3);
+      expect(getMonthGroupByDate(timelineManager, { year: 2024, month: 1 })?.assets.length).toEqual(0);
+      await timelineManager.loadSegment(getSegmentIdentifier({ year: 2024, month: 1 }));
+      expect(sdkMock.getTimeBucket).toBeCalledTimes(2);
+      expect(getMonthGroupByDate(timelineManager, { year: 2024, month: 1 })?.assets.length).toEqual(3);
    });

    it('ignores invalid months', async () => {
-      await timelineManager.loadMonthGroup({ year: 2023, month: 1 });
-      expect(sdkMock.getTimeBucket).toBeCalledTimes(0);
+      await timelineManager.loadSegment(getSegmentIdentifier({ year: 2023, month: 1 }));
+      expect(sdkMock.getTimeBucket).toBeCalledTimes(2);
    });

    it('cancels month loading', async () => {
      const month = getMonthGroupByDate(timelineManager, { year: 2024, month: 1 })!;
-      void timelineManager.loadMonthGroup({ year: 2024, month: 1 });
+      void timelineManager.loadSegment(getSegmentIdentifier({ year: 2024, month: 1 }));
      const abortSpy = vi.spyOn(month!.loader!.cancelToken!, 'abort');
      month?.cancel();
      expect(abortSpy).toBeCalledTimes(1);
-      await timelineManager.loadMonthGroup({ year: 2024, month: 1 });
-      expect(getMonthGroupByDate(timelineManager, { year: 2024, month: 1 })?.getAssets().length).toEqual(3);
+      await timelineManager.loadSegment(getSegmentIdentifier({ year: 2024, month: 1 }));
+      expect(getMonthGroupByDate(timelineManager, { year: 2024, month: 1 })?.assets.length).toEqual(3);
    });

    it('prevents loading months multiple times', async () => {
      await Promise.all([
-        timelineManager.loadMonthGroup({ year: 2024, month: 1 }),
-        timelineManager.loadMonthGroup({ year: 2024, month: 1 }),
+        timelineManager.loadSegment(getSegmentIdentifier({ year: 2024, month: 1 })),
+        timelineManager.loadSegment(getSegmentIdentifier({ year: 2024, month: 1 })),
      ]);
-      expect(sdkMock.getTimeBucket).toBeCalledTimes(1);
+      expect(sdkMock.getTimeBucket).toBeCalledTimes(2);

-      await timelineManager.loadMonthGroup({ year: 2024, month: 1 });
-      expect(sdkMock.getTimeBucket).toBeCalledTimes(1);
+      await timelineManager.loadSegment(getSegmentIdentifier({ year: 2024, month: 1 }));
+      expect(sdkMock.getTimeBucket).toBeCalledTimes(2);
    });

    it('allows loading a canceled month', async () => {
      const month = getMonthGroupByDate(timelineManager, { year: 2024, month: 1 })!;
-      const loadPromise = timelineManager.loadMonthGroup({ year: 2024, month: 1 });
+      const loadPromise = timelineManager.loadSegment(getSegmentIdentifier({ year: 2024, month: 1 }));

      month.cancel();
      await loadPromise;
-      expect(month?.getAssets().length).toEqual(0);
+      expect(month?.assets.length).toEqual(0);

-      await timelineManager.loadMonthGroup({ year: 2024, month: 1 });
-      expect(month!.getAssets().length).toEqual(3);
+      await timelineManager.loadSegment(getSegmentIdentifier({ year: 2024, month: 1 }));
+      expect(month!.assets.length).toEqual(3);
    });
  });

@@ -180,11 +189,12 @@ describe('TimelineManager', () => {
      timelineManager = new TimelineManager();
      sdkMock.getTimeBuckets.mockResolvedValue([]);

-      await timelineManager.updateViewport({ width: 1588, height: 1000 });
+      timelineManager.viewportHeight = 1000;
+      timelineManager.viewportHeight = 1588;
    });

    it('is empty initially', () => {
-      expect(timelineManager.months.length).toEqual(0);
+      expect(timelineManager.segments.length).toEqual(0);
      expect(timelineManager.assetCount).toEqual(0);
    });

@@ -196,12 +206,12 @@ describe('TimelineManager', () => {
      );
      timelineManager.addAssets([asset]);

-      expect(timelineManager.months.length).toEqual(1);
+      expect(timelineManager.segments.length).toEqual(1);
      expect(timelineManager.assetCount).toEqual(1);
-      expect(timelineManager.months[0].getAssets().length).toEqual(1);
-      expect(timelineManager.months[0].yearMonth.year).toEqual(2024);
-      expect(timelineManager.months[0].yearMonth.month).toEqual(1);
-      expect(timelineManager.months[0].getFirstAsset().id).toEqual(asset.id);
+      expect(timelineManager.segments[0].assets.length).toEqual(1);
+      expect(timelineManager.segments[0].yearMonth.year).toEqual(2024);
+      expect(timelineManager.segments[0].yearMonth.month).toEqual(1);
+      expect(timelineManager.segments[0].getFirstAsset().id).toEqual(asset.id);
    });

    it('adds assets to existing month', () => {
@@ -213,11 +223,11 @@ describe('TimelineManager', () => {
      timelineManager.addAssets([assetOne]);
      timelineManager.addAssets([assetTwo]);

-      expect(timelineManager.months.length).toEqual(1);
+      expect(timelineManager.segments.length).toEqual(1);
      expect(timelineManager.assetCount).toEqual(2);
-      expect(timelineManager.months[0].getAssets().length).toEqual(2);
-      expect(timelineManager.months[0].yearMonth.year).toEqual(2024);
-      expect(timelineManager.months[0].yearMonth.month).toEqual(1);
+      expect(timelineManager.segments[0].assets.length).toEqual(2);
+      expect(timelineManager.segments[0].yearMonth.year).toEqual(2024);
+      expect(timelineManager.segments[0].yearMonth.month).toEqual(1);
    });

    it('orders assets in months by descending date', () => {
@@ -240,10 +250,10 @@ describe('TimelineManager', () => {

      const month = getMonthGroupByDate(timelineManager, { year: 2024, month: 1 });
      expect(month).not.toBeNull();
-      expect(month?.getAssets().length).toEqual(3);
-      expect(month?.getAssets()[0].id).toEqual(assetOne.id);
-      expect(month?.getAssets()[1].id).toEqual(assetThree.id);
-      expect(month?.getAssets()[2].id).toEqual(assetTwo.id);
+      expect(month?.assets.length).toEqual(3);
+      expect(month?.assets[0].id).toEqual(assetOne.id);
+      expect(month?.assets[1].id).toEqual(assetThree.id);
+      expect(month?.assets[2].id).toEqual(assetTwo.id);
    });

    it('orders months by descending date', () => {
@@ -264,15 +274,15 @@ describe('TimelineManager', () => {
      );
      timelineManager.addAssets([assetOne, assetTwo, assetThree]);

-      expect(timelineManager.months.length).toEqual(3);
-      expect(timelineManager.months[0].yearMonth.year).toEqual(2024);
-      expect(timelineManager.months[0].yearMonth.month).toEqual(4);
+      expect(timelineManager.segments.length).toEqual(3);
+      expect(timelineManager.segments[0].yearMonth.year).toEqual(2024);
+      expect(timelineManager.segments[0].yearMonth.month).toEqual(4);

-      expect(timelineManager.months[1].yearMonth.year).toEqual(2024);
-      expect(timelineManager.months[1].yearMonth.month).toEqual(1);
+      expect(timelineManager.segments[1].yearMonth.year).toEqual(2024);
+      expect(timelineManager.segments[1].yearMonth.month).toEqual(1);

-      expect(timelineManager.months[2].yearMonth.year).toEqual(2023);
-      expect(timelineManager.months[2].yearMonth.month).toEqual(1);
+      expect(timelineManager.segments[2].yearMonth.year).toEqual(2023);
+      expect(timelineManager.segments[2].yearMonth.month).toEqual(1);
    });

    it('updates existing asset', () => {
@@ -304,13 +314,14 @@ describe('TimelineManager', () => {
      timelineManager = new TimelineManager();
      sdkMock.getTimeBuckets.mockResolvedValue([]);

-      await timelineManager.updateViewport({ width: 1588, height: 1000 });
+      timelineManager.viewportHeight = 1000;
+      timelineManager.viewportHeight = 1588;
    });

    it('ignores non-existing assets', () => {
      timelineManager.updateAssets([deriveLocalDateTimeFromFileCreatedAt(timelineAssetFactory.build())]);

-      expect(timelineManager.months.length).toEqual(0);
+      expect(timelineManager.segments.length).toEqual(0);
      expect(timelineManager.assetCount).toEqual(0);
    });

@@ -320,11 +331,11 @@ describe('TimelineManager', () => {

      timelineManager.addAssets([asset]);
      expect(timelineManager.assetCount).toEqual(1);
-      expect(timelineManager.months[0].getFirstAsset().isFavorite).toEqual(false);
+      expect(timelineManager.segments[0].getFirstAsset().isFavorite).toEqual(false);

      timelineManager.updateAssets([updatedAsset]);
      expect(timelineManager.assetCount).toEqual(1);
-      expect(timelineManager.months[0].getFirstAsset().isFavorite).toEqual(true);
+      expect(timelineManager.segments[0].getFirstAsset().isFavorite).toEqual(true);
    });

    it('asset moves months when asset date changes', () => {
@@ -339,16 +350,16 @@ describe('TimelineManager', () => {
      });

      timelineManager.addAssets([asset]);
-      expect(timelineManager.months.length).toEqual(1);
+      expect(timelineManager.segments.length).toEqual(1);
      expect(getMonthGroupByDate(timelineManager, { year: 2024, month: 1 })).not.toBeUndefined();
-      expect(getMonthGroupByDate(timelineManager, { year: 2024, month: 1 })?.getAssets().length).toEqual(1);
+      expect(getMonthGroupByDate(timelineManager, { year: 2024, month: 1 })?.assets.length).toEqual(1);

      timelineManager.updateAssets([updatedAsset]);
-      expect(timelineManager.months.length).toEqual(2);
+      expect(timelineManager.segments.length).toEqual(2);
      expect(getMonthGroupByDate(timelineManager, { year: 2024, month: 1 })).not.toBeUndefined();
-      expect(getMonthGroupByDate(timelineManager, { year: 2024, month: 1 })?.getAssets().length).toEqual(0);
+      expect(getMonthGroupByDate(timelineManager, { year: 2024, month: 1 })?.assets.length).toEqual(0);
      expect(getMonthGroupByDate(timelineManager, { year: 2024, month: 3 })).not.toBeUndefined();
-      expect(getMonthGroupByDate(timelineManager, { year: 2024, month: 3 })?.getAssets().length).toEqual(1);
+      expect(getMonthGroupByDate(timelineManager, { year: 2024, month: 3 })?.assets.length).toEqual(1);
    });
  });

@@ -359,7 +370,8 @@ describe('TimelineManager', () => {
      timelineManager = new TimelineManager();
      sdkMock.getTimeBuckets.mockResolvedValue([]);

-      await timelineManager.updateViewport({ width: 1588, height: 1000 });
+      timelineManager.viewportHeight = 1000;
+      timelineManager.viewportHeight = 1588;
    });

    it('ignores invalid IDs', () => {
@@ -373,8 +385,8 @@ describe('TimelineManager', () => {
      timelineManager.removeAssets(['', 'invalid', '4c7d9acc']);

      expect(timelineManager.assetCount).toEqual(2);
-      expect(timelineManager.months.length).toEqual(1);
-      expect(timelineManager.months[0].getAssets().length).toEqual(2);
+      expect(timelineManager.segments.length).toEqual(1);
+      expect(timelineManager.segments[0].assets.length).toEqual(2);
    });

    it('removes asset from month', () => {
@@ -387,8 +399,8 @@ describe('TimelineManager', () => {
      timelineManager.removeAssets([assetOne.id]);

      expect(timelineManager.assetCount).toEqual(1);
-      expect(timelineManager.months.length).toEqual(1);
-      expect(timelineManager.months[0].getAssets().length).toEqual(1);
+      expect(timelineManager.segments.length).toEqual(1);
+      expect(timelineManager.segments[0].assets.length).toEqual(1);
    });

    it('does not remove month when empty', () => {
@@ -401,7 +413,7 @@ describe('TimelineManager', () => {
      timelineManager.removeAssets(assets.map((asset) => asset.id));

      expect(timelineManager.assetCount).toEqual(0);
-      expect(timelineManager.months.length).toEqual(1);
+      expect(timelineManager.segments.length).toEqual(1);
    });
  });

@@ -411,7 +423,8 @@ describe('TimelineManager', () => {
    beforeEach(async () => {
      timelineManager = new TimelineManager();
      sdkMock.getTimeBuckets.mockResolvedValue([]);
-      await timelineManager.updateViewport({ width: 0, height: 0 });
+
+      await initViewport(timelineManager, 0, 0);
    });

    it('empty store returns null', () => {
@@ -468,7 +481,8 @@ describe('TimelineManager', () => {
        { count: 3, timeBucket: '2024-01-01T00:00:00.000Z' },
      ]);
      sdkMock.getTimeBucket.mockImplementation(({ timeBucket }) => Promise.resolve(bucketAssetsResponse[timeBucket]));
-      await timelineManager.updateViewport({ width: 1588, height: 1000 });
+
+      initViewport(timelineManager);
    });

    it('returns null for invalid assetId', async () => {
@@ -477,45 +491,45 @@ describe('TimelineManager', () => {
    });

    it('returns previous assetId', async () => {
-      await timelineManager.loadMonthGroup({ year: 2024, month: 1 });
+      await timelineManager.loadSegment(getSegmentIdentifier({ year: 2024, month: 1 }));
      const month = getMonthGroupByDate(timelineManager, { year: 2024, month: 1 });

-      const a = month!.getAssets()[0];
-      const b = month!.getAssets()[1];
+      const a = month!.assets[0];
+      const b = month!.assets[1];
      const previous = await timelineManager.getLaterAsset(b);
      expect(previous).toEqual(a);
    });

    it('returns previous assetId spanning multiple months', async () => {
-      await timelineManager.loadMonthGroup({ year: 2024, month: 2 });
-      await timelineManager.loadMonthGroup({ year: 2024, month: 3 });
+      await timelineManager.loadSegment(getSegmentIdentifier({ year: 2024, month: 2 }));
+      await timelineManager.loadSegment(getSegmentIdentifier({ year: 2024, month: 3 }));

      const month = getMonthGroupByDate(timelineManager, { year: 2024, month: 2 });
      const previousMonth = getMonthGroupByDate(timelineManager, { year: 2024, month: 3 });
-      const a = month!.getAssets()[0];
-      const b = previousMonth!.getAssets()[0];
+      const a = month!.assets[0];
+      const b = previousMonth!.assets[0];
      const previous = await timelineManager.getLaterAsset(a);
      expect(previous).toEqual(b);
    });

    it('loads previous month', async () => {
-      await timelineManager.loadMonthGroup({ year: 2024, month: 2 });
+      await timelineManager.loadSegment(getSegmentIdentifier({ year: 2024, month: 2 }));
      const month = getMonthGroupByDate(timelineManager, { year: 2024, month: 2 });
      const previousMonth = getMonthGroupByDate(timelineManager, { year: 2024, month: 3 });
      const a = month!.getFirstAsset();
      const b = previousMonth!.getFirstAsset();
-      const loadMonthGroupSpy = vi.spyOn(month!.loader!, 'execute');
+      const loadSegmentSpy = vi.spyOn(month!.loader!, 'execute');
      const previousMonthSpy = vi.spyOn(previousMonth!.loader!, 'execute');
      const previous = await timelineManager.getLaterAsset(a);
      expect(previous).toEqual(b);
-      expect(loadMonthGroupSpy).toBeCalledTimes(0);
+      expect(loadSegmentSpy).toBeCalledTimes(0);
      expect(previousMonthSpy).toBeCalledTimes(0);
    });

    it('skips removed assets', async () => {
-      await timelineManager.loadMonthGroup({ year: 2024, month: 1 });
-      await timelineManager.loadMonthGroup({ year: 2024, month: 2 });
-      await timelineManager.loadMonthGroup({ year: 2024, month: 3 });
+      await timelineManager.loadSegment(getSegmentIdentifier({ year: 2024, month: 1 }));
+      await timelineManager.loadSegment(getSegmentIdentifier({ year: 2024, month: 2 }));
+      await timelineManager.loadSegment(getSegmentIdentifier({ year: 2024, month: 3 }));

      const [assetOne, assetTwo, assetThree] = await getAssets(timelineManager);
      timelineManager.removeAssets([assetTwo.id]);
@@ -523,8 +537,8 @@ describe('TimelineManager', () => {
    });

    it('returns null when no more assets', async () => {
-      await timelineManager.loadMonthGroup({ year: 2024, month: 3 });
-      expect(await timelineManager.getLaterAsset(timelineManager.months[0].getFirstAsset())).toBeUndefined();
+      await timelineManager.loadSegment(getSegmentIdentifier({ year: 2024, month: 3 }));
+      expect(await timelineManager.getLaterAsset(timelineManager.segments[0].getFirstAsset())).toBeUndefined();
    });
  });

@@ -535,7 +549,7 @@ describe('TimelineManager', () => {
      timelineManager = new TimelineManager();
      sdkMock.getTimeBuckets.mockResolvedValue([]);

-      await timelineManager.updateViewport({ width: 0, height: 0 });
+      await initViewport(timelineManager, 0, 0);
    });

    it('returns null for invalid months', () => {
@@ -618,7 +632,7 @@ describe('TimelineManager', () => {
      ]);

      sdkMock.getTimeBucket.mockImplementation(({ timeBucket }) => Promise.resolve(bucketAssetsResponse[timeBucket]));
-      await timelineManager.updateViewport({ width: 1588, height: 0 });
+      await initViewport(timelineManager);
    });

    it('gets all assets once', async () => {
--- a/web/src/lib/managers/timeline-manager/timeline-manager.svelte.ts
+++ b/web/src/lib/managers/timeline-manager/timeline-manager.svelte.ts
@@ -1,16 +1,5 @@
-import { AssetOrder, getAssetInfo, getTimeBuckets } from '@immich/sdk';
-
+import { AssetStreamManager } from '$lib/managers/AssetStreamManager/AssetStreamManager.svelte';
 import { authManager } from '$lib/managers/auth-manager.svelte';
-
-import { CancellableTask } from '$lib/utils/cancellable-task';
-import { toTimelineAsset, type TimelineDateTime, type TimelineYearMonth } from '$lib/utils/timeline-util';
-
-import { clamp, debounce, isEqual } from 'lodash-es';
-import { SvelteDate, SvelteMap, SvelteSet } from 'svelte/reactivity';
-
-import { updateIntersectionMonthGroup } from '$lib/managers/timeline-manager/internal/intersection-support.svelte';
-import { updateGeometry } from '$lib/managers/timeline-manager/internal/layout-support.svelte';
-import { loadFromTimeBuckets } from '$lib/managers/timeline-manager/internal/load-support.svelte';
 import {
  addAssetsToMonthGroups,
  runAssetOperation,
@@ -23,6 +12,11 @@ import {
  retrieveRange as retrieveRangeUtil,
 } from '$lib/managers/timeline-manager/internal/search-support.svelte';
 import { WebsocketSupport } from '$lib/managers/timeline-manager/internal/websocket-support.svelte';
+import { CancellableTask } from '$lib/utils/cancellable-task';
+import { toTimelineAsset, type TimelineDateTime, type TimelineYearMonth } from '$lib/utils/timeline-util';
+import { AssetOrder, getAssetInfo, getTimeBuckets } from '@immich/sdk';
+import { isEqual } from 'lodash-es';
+import { SvelteDate, SvelteMap, SvelteSet } from 'svelte/reactivity';
 import { DayGroup } from './day-group.svelte';
 import { isMismatched, updateObject } from './internal/utils.svelte';
 import { MonthGroup } from './month-group.svelte';
@@ -32,29 +26,14 @@ import type {
  Direction,
  ScrubberMonth,
  TimelineAsset,
-  TimelineManagerLayoutOptions,
  TimelineManagerOptions,
-  Viewport,
 } from './types';

-export class TimelineManager {
-  isInitialized = $state(false);
-  months: MonthGroup[] = $state([]);
-  topSectionHeight = $state(0);
-  timelineHeight = $derived(this.months.reduce((accumulator, b) => accumulator + b.height, 0) + this.topSectionHeight);
-  assetCount = $derived(this.months.reduce((accumulator, b) => accumulator + b.assetsCount, 0));
-
+export class TimelineManager extends AssetStreamManager {
  albumAssets: Set<string> = new SvelteSet();
-
  scrubberMonths: ScrubberMonth[] = $state([]);
  scrubberTimelineHeight: number = $state(0);
-
-  topIntersectingMonthGroup: MonthGroup | undefined = $state();
-
-  visibleWindow = $derived.by(() => ({
-    top: this.#scrollTop,
-    bottom: this.#scrollTop + this.viewportHeight,
-  }));
+  #months: MonthGroup[] = $state([]);

  initTask = new CancellableTask(
    () => {
@@ -72,121 +51,16 @@ export class TimelineManager {
  );

  static #INIT_OPTIONS = {};
-  #viewportHeight = $state(0);
-  #viewportWidth = $state(0);
-  #scrollTop = $state(0);
+
  #websocketSupport: WebsocketSupport | undefined;
-
-  #rowHeight = $state(235);
-  #headerHeight = $state(48);
-  #gap = $state(12);
-
  #options: TimelineManagerOptions = TimelineManager.#INIT_OPTIONS;

-  #scrolling = $state(false);
-  #suspendTransitions = $state(false);
-  #resetScrolling = debounce(() => (this.#scrolling = false), 1000);
-  #resetSuspendTransitions = debounce(() => (this.suspendTransitions = false), 1000);
-  scrollCompensation: {
-    heightDelta: number | undefined;
-    scrollTop: number | undefined;
-    monthGroup: MonthGroup | undefined;
-  } = $state({
-    heightDelta: 0,
-    scrollTop: 0,
-    monthGroup: undefined,
-  });
-
-  constructor() {}
-
-  setLayoutOptions({ headerHeight = 48, rowHeight = 235, gap = 12 }: TimelineManagerLayoutOptions) {
-    let changed = false;
-    changed ||= this.#setHeaderHeight(headerHeight);
-    changed ||= this.#setGap(gap);
-    changed ||= this.#setRowHeight(rowHeight);
-    if (changed) {
-      this.refreshLayout();
-    }
+  get segments() {
+    return this.#months;
  }

-  #setHeaderHeight(value: number) {
-    if (this.#headerHeight == value) {
-      return false;
-    }
-    this.#headerHeight = value;
-    return true;
-  }
-
-  get headerHeight() {
-    return this.#headerHeight;
-  }
-
-  #setGap(value: number) {
-    if (this.#gap == value) {
-      return false;
-    }
-    this.#gap = value;
-    return true;
-  }
-
-  get gap() {
-    return this.#gap;
-  }
-
-  #setRowHeight(value: number) {
-    if (this.#rowHeight == value) {
-      return false;
-    }
-    this.#rowHeight = value;
-    return true;
-  }
-
-  get rowHeight() {
-    return this.#rowHeight;
-  }
-
-  set scrolling(value: boolean) {
-    this.#scrolling = value;
-    if (value) {
-      this.suspendTransitions = true;
-      this.#resetScrolling();
-    }
-  }
-
-  get scrolling() {
-    return this.#scrolling;
-  }
-
-  set suspendTransitions(value: boolean) {
-    this.#suspendTransitions = value;
-    if (value) {
-      this.#resetSuspendTransitions();
-    }
-  }
-
-  get suspendTransitions() {
-    return this.#suspendTransitions;
-  }
-
-  set viewportWidth(value: number) {
-    const changed = value !== this.#viewportWidth;
-    this.#viewportWidth = value;
-    this.suspendTransitions = true;
-    void this.#updateViewportGeometry(changed);
-  }
-
-  get viewportWidth() {
-    return this.#viewportWidth;
-  }
-
-  set viewportHeight(value: number) {
-    this.#viewportHeight = value;
-    this.#suspendTransitions = true;
-    void this.#updateViewportGeometry(false);
-  }
-
-  get viewportHeight() {
-    return this.#viewportHeight;
+  get options() {
+    return this.#options;
  }

  async *assetsIterator(options?: {
@@ -198,7 +72,7 @@ export class TimelineManager {
    const direction = options?.direction ?? 'earlier';
    let { startDayGroup, startAsset } = options ?? {};
    for (const monthGroup of this.monthGroupIterator({ direction, startMonthGroup: options?.startMonthGroup })) {
-      await this.loadMonthGroup(monthGroup.yearMonth, { cancelable: false });
+      await this.loadSegment(monthGroup.identifier, { cancelable: false });
      yield* monthGroup.assetsIterator({ startDayGroup, startAsset, direction });
      startDayGroup = startAsset = undefined;
    }
@@ -207,13 +81,13 @@ export class TimelineManager {
  *monthGroupIterator(options?: { direction?: Direction; startMonthGroup?: MonthGroup }) {
    const isEarlier = options?.direction === 'earlier';
    let startIndex = options?.startMonthGroup
-      ? this.months.indexOf(options.startMonthGroup)
+      ? this.segments.indexOf(options.startMonthGroup)
      : isEarlier
        ? 0
-        : this.months.length - 1;
+        : this.segments.length - 1;

-    while (startIndex >= 0 && startIndex < this.months.length) {
-      yield this.months[startIndex];
+    while (startIndex >= 0 && startIndex < this.segments.length) {
+      yield this.segments[startIndex];
      startIndex += isEarlier ? 1 : -1;
    }
  }
@@ -234,75 +108,24 @@ export class TimelineManager {
    this.#websocketSupport = undefined;
  }

-  updateSlidingWindow(scrollTop: number) {
-    if (this.#scrollTop !== scrollTop) {
-      this.#scrollTop = scrollTop;
-      this.updateIntersections();
-    }
-  }
-
-  clearScrollCompensation() {
-    this.scrollCompensation = {
-      heightDelta: undefined,
-      scrollTop: undefined,
-      monthGroup: undefined,
-    };
-  }
-
-  updateIntersections() {
-    if (!this.isInitialized || this.visibleWindow.bottom === this.visibleWindow.top) {
-      return;
-    }
-    let topIntersectingMonthGroup = undefined;
-    for (const month of this.months) {
-      updateIntersectionMonthGroup(this, month);
-      if (!topIntersectingMonthGroup && month.actuallyIntersecting) {
-        topIntersectingMonthGroup = month;
-      }
-    }
-    if (topIntersectingMonthGroup !== undefined && this.topIntersectingMonthGroup !== topIntersectingMonthGroup) {
-      this.topIntersectingMonthGroup = topIntersectingMonthGroup;
-    }
-    for (const month of this.months) {
-      if (month === this.topIntersectingMonthGroup) {
-        this.topIntersectingMonthGroup.percent = clamp(
-          (this.visibleWindow.top - this.topIntersectingMonthGroup.top) / this.topIntersectingMonthGroup.height,
-          0,
-          1,
-        );
-      } else {
-        month.percent = 0;
-      }
-    }
-  }
-
-  clearDeferredLayout(month: MonthGroup) {
-    const hasDeferred = month.dayGroups.some((group) => group.deferredLayout);
-    if (hasDeferred) {
-      updateGeometry(this, month, { invalidateHeight: true, noDefer: true });
-      for (const group of month.dayGroups) {
-        group.deferredLayout = false;
-      }
-    }
-  }
-
  async #initializeMonthGroups() {
    const timebuckets = await getTimeBuckets({
      ...authManager.params,
      ...this.#options,
    });

-    this.months = timebuckets.map((timeBucket) => {
+    this.#months = timebuckets.map((timeBucket) => {
      const date = new SvelteDate(timeBucket.timeBucket);
      return new MonthGroup(
        this,
        { year: date.getUTCFullYear(), month: date.getUTCMonth() + 1 },
        timeBucket.count,
+        false,
        this.#options.order,
      );
    });
    this.albumAssets.clear();
-    this.#updateViewportGeometry(false);
+    this.updateViewportGeometry(false);
  }

  async updateOptions(options: TimelineManagerOptions) {
@@ -313,16 +136,16 @@ export class TimelineManager {
      return;
    }
    await this.initTask.reset();
-    await this.#init(options);
-    this.#updateViewportGeometry(false);
+    this.#options = options;
+    await this.init();
+    this.updateViewportGeometry(false);
  }

-  async #init(options: TimelineManagerOptions) {
+  async init() {
    this.isInitialized = false;
-    this.months = [];
+    this.#months = [];
    this.albumAssets.clear();
    await this.initTask.execute(async () => {
-      this.#options = options;
      await this.#initializeMonthGroups();
    }, true);
  }
@@ -332,81 +155,20 @@ export class TimelineManager {
    this.isInitialized = false;
  }

-  async updateViewport(viewport: Viewport) {
-    if (viewport.height === 0 && viewport.width === 0) {
-      return;
-    }
-
-    if (this.viewportHeight === viewport.height && this.viewportWidth === viewport.width) {
-      return;
-    }
-
-    if (!this.initTask.executed) {
-      await (this.initTask.loading ? this.initTask.waitUntilCompletion() : this.#init(this.#options));
-    }
-
-    const changedWidth = viewport.width !== this.viewportWidth;
-    this.viewportHeight = viewport.height;
-    this.viewportWidth = viewport.width;
-    this.#updateViewportGeometry(changedWidth);
-  }
-
-  #updateViewportGeometry(changedWidth: boolean) {
-    if (!this.isInitialized) {
-      return;
-    }
-    if (this.viewportWidth === 0 || this.viewportHeight === 0) {
-      return;
-    }
-    for (const month of this.months) {
-      updateGeometry(this, month, { invalidateHeight: changedWidth });
-    }
-    this.updateIntersections();
+  updateViewportGeometry(changedWidth: boolean) {
+    super.updateViewportGeometry(changedWidth);
    this.#createScrubberMonths();
  }

  #createScrubberMonths() {
-    this.scrubberMonths = this.months.map((month) => ({
+    this.scrubberMonths = this.segments.map((month) => ({
      assetCount: month.assetsCount,
      year: month.yearMonth.year,
      month: month.yearMonth.month,
      title: month.monthGroupTitle,
      height: month.height,
    }));
-    this.scrubberTimelineHeight = this.timelineHeight;
-  }
-
-  createLayoutOptions() {
-    const viewportWidth = this.viewportWidth;
-
-    return {
-      spacing: 2,
-      heightTolerance: 0.15,
-      rowHeight: this.#rowHeight,
-      rowWidth: Math.floor(viewportWidth),
-    };
-  }
-
-  async loadMonthGroup(yearMonth: TimelineYearMonth, options?: { cancelable: boolean }): Promise<void> {
-    let cancelable = true;
-    if (options) {
-      cancelable = options.cancelable;
-    }
-    const monthGroup = getMonthGroupByDate(this, yearMonth);
-    if (!monthGroup) {
-      return;
-    }
-
-    if (monthGroup.loader?.executed) {
-      return;
-    }
-
-    const result = await monthGroup.loader?.execute(async (signal: AbortSignal) => {
-      await loadFromTimeBuckets(this, monthGroup, this.#options, signal);
-    }, cancelable);
-    if (result === 'LOADED') {
-      updateIntersectionMonthGroup(this, monthGroup);
-    }
+    this.scrubberTimelineHeight = this.streamViewerHeight;
  }

  addAssets(assets: TimelineAsset[]) {
@@ -442,7 +204,7 @@ export class TimelineManager {
  }

  async #loadMonthGroupAtTime(yearMonth: TimelineYearMonth, options?: { cancelable: boolean }) {
-    await this.loadMonthGroup(yearMonth, options);
+    await this.loadSegment(getSegmentIdentifier(yearMonth), options);
    return getMonthGroupByDate(this, yearMonth);
  }

@@ -460,7 +222,7 @@ export class TimelineManager {
    let accumulatedCount = 0;

    let randomMonth: MonthGroup | undefined = undefined;
-    for (const month of this.months) {
+    for (const month of this.segments) {
      if (randomAssetIndex < accumulatedCount + month.assetsCount) {
        randomMonth = month;
        break;
@@ -471,7 +233,7 @@ export class TimelineManager {
    if (!randomMonth) {
      return;
    }
-    await this.loadMonthGroup(randomMonth.yearMonth, { cancelable: false });
+    await this.loadSegment(getSegmentIdentifier(randomMonth.yearMonth), { cancelable: false });

    let randomDay: DayGroup | undefined = undefined;
    for (const day of randomMonth.dayGroups) {
@@ -524,14 +286,14 @@ export class TimelineManager {
  }

  refreshLayout() {
-    for (const month of this.months) {
-      updateGeometry(this, month, { invalidateHeight: true });
+    for (const month of this.segments) {
+      month.updateGeometry({ invalidateHeight: true });
    }
    this.updateIntersections();
  }

  getFirstAsset(): TimelineAsset | undefined {
-    return this.months[0]?.getFirstAsset();
+    return this.segments[0]?.getFirstAsset();
  }

  async getLaterAsset(
@@ -553,7 +315,7 @@ export class TimelineManager {
    if (!monthGroup) {
      return;
    }
-    await this.loadMonthGroup(dateTime, { cancelable: false });
+    await this.loadSegment(getSegmentIdentifier(dateTime), { cancelable: false });
    const asset = monthGroup.findClosest(dateTime);
    if (asset) {
      return asset;
@@ -579,3 +341,13 @@ export class TimelineManager {
    return this.#options.order ?? AssetOrder.Desc;
  }
 }
+export const getSegmentIdentifier = (yearMonth: TimelineYearMonth | TimelineDateTime) => ({
+  get id() {
+    return yearMonth.year + '-' + yearMonth.month;
+  },
+  matches: (segment: MonthGroup) => {
+    return (
+      segment.yearMonth && segment.yearMonth.year === yearMonth.year && segment.yearMonth.month === yearMonth.month
+    );
+  },
+});
--- a/web/src/lib/managers/timeline-manager/viewer-asset.svelte.ts
+++ b/web/src/lib/managers/timeline-manager/viewer-asset.svelte.ts
@@ -12,7 +12,7 @@ export class ViewerAsset {
      return false;
    }

-    const store = this.#group.monthGroup.timelineManager;
+    const store = this.#group.monthGroup.assetStreamManager;
    const positionTop = this.#group.absoluteDayGroupTop + this.position.top;

    return calculateViewerAssetIntersecting(store, positionTop, this.position.height);
--- a/web/src/lib/utils/asset-utils.ts
+++ b/web/src/lib/utils/asset-utils.ts
@@ -512,8 +512,8 @@ export const selectAllAssets = async (timelineManager: TimelineManager, assetInt
  isSelectingAllAssets.set(true);

  try {
-    for (const monthGroup of timelineManager.months) {
-      await timelineManager.loadMonthGroup(monthGroup.yearMonth);
+    for (const monthGroup of timelineManager.segments) {
+      await monthGroup.load(false);

      if (!get(isSelectingAllAssets)) {
        assetInteraction.clearMultiselect();
--- a/web/src/lib/utils/cancellable-task.ts
+++ b/web/src/lib/utils/cancellable-task.ts
@@ -1,3 +1,10 @@
+export enum TaskStatus {
+  DONE,
+  WAITED,
+  CANCELED,
+  LOADED,
+  ERRORED,
+}
 export class CancellableTask {
  cancelToken: AbortController | null = null;
  cancellable: boolean = true;
@@ -32,18 +39,18 @@ export class CancellableTask {

  async waitUntilCompletion() {
    if (this.executed) {
-      return 'DONE';
+      return TaskStatus.DONE;
    }
    // if there is a cancel token, task is currently executing, so wait on the promise. If it
    // isn't, then  the task is in new state, it hasn't been loaded, nor has it been executed.
    // in either case, we wait on the promise.
    await this.complete;
-    return 'WAITED';
+    return TaskStatus.WAITED;
  }

  async execute<F extends (abortSignal: AbortSignal) => Promise<void>>(f: F, cancellable: boolean) {
    if (this.executed) {
-      return 'DONE';
+      return TaskStatus.DONE;
    }

    // if promise is pending, wait on previous request instead.
@@ -54,7 +61,7 @@ export class CancellableTask {
        this.cancellable = cancellable;
      }
      await this.complete;
-      return 'WAITED';
+      return TaskStatus.WAITED;
    }
    this.cancellable = cancellable;
    const cancelToken = (this.cancelToken = new AbortController());
@@ -62,18 +69,18 @@ export class CancellableTask {
    try {
      await f(cancelToken.signal);
      if (cancelToken.signal.aborted) {
-        return 'CANCELED';
+        return TaskStatus.CANCELED;
      }
      this.#transitionToExecuted();
-      return 'LOADED';
+      return TaskStatus.LOADED;
    } catch (error) {
      // eslint-disable-next-line  @typescript-eslint/no-explicit-any
      if ((error as any).name === 'AbortError') {
        // abort error is not treated as an error, but as a cancellation.
-        return 'CANCELED';
+        return TaskStatus.CANCELED;
      }
      this.#transitionToErrored(error);
-      return 'ERRORED';
+      return TaskStatus.ERRORED;
    } finally {
      this.cancelToken = null;
    }
--- a/web/src/lib/utils/timeline-util.ts
+++ b/web/src/lib/utils/timeline-util.ts
@@ -151,6 +151,14 @@ export function formatGroupTitle(_date: DateTime): string {
  return getDateLocaleString(date, { locale: get(locale) });
 }

+export const formatGroupTitleFull = (_date: DateTime): string => {
+  if (!_date.isValid) {
+    return _date.toString();
+  }
+  const date = _date as DateTime<true>;
+  return getDateLocaleString(date);
+};
+
 export const getDateLocaleString = (date: DateTime, opts?: LocaleOptions): string =>
  date.toLocaleString(DateTime.DATE_MED_WITH_WEEKDAY, opts);

--- a/web/src/routes/(user)/albums/[albumId=id]/[[photos=photos]]/[[assetId=id]]/+page.svelte
+++ b/web/src/routes/(user)/albums/[albumId=id]/[[photos=photos]]/[[assetId=id]]/+page.svelte
@@ -145,7 +145,7 @@
    const asset =
      $slideshowNavigation === SlideshowNavigation.Shuffle
        ? await timelineManager.getRandomAsset()
-        : timelineManager.months[0]?.dayGroups[0]?.viewerAssets[0]?.asset;
+        : timelineManager.segments[0]?.dayGroups[0]?.viewerAssets[0]?.asset;
    if (asset) {
      handlePromiseError(setAssetId(asset.id).then(() => ($slideshowState = SlideshowState.PlaySlideshow)));
    }