@streamscloud/embeddable 3.4.2 → 5.0.0

package/dist/streams/stream-player/controls.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">var _a, _b;
+import { slideHorizontally } from '../../core/transitions';
 import { ShortVideoViewerAttachmentsInline, ShortVideoViewerAttachments } from '../../short-videos/short-video-viewer';
-import { ShortVideoSocialInteractions } from '../../short-videos/short-video-viewer/index.js';
+import { ShortVideoControls } from '../../short-videos/short-video-viewer/index.js';
 import { StreamElementType } from '../layout/enums';
 import { mapToShortVideoViewerModel } from '../layout/models';
 import { Icon } from '../../ui/icon';
@@ -8,7 +9,7 @@ import { StreamPlayerLocalization } from './stream-player-localization';
 import IconChevronDown from '@fluentui/svg-icons/icons/chevron_down_28_regular.svg?raw';
 import IconChevronUp from '@fluentui/svg-icons/icons/chevron_up_28_regular.svg?raw';
 import IconDismiss from '@fluentui/svg-icons/icons/dismiss_28_regular.svg?raw';
-let { buffer, uiManager, localization, on } = $props();
+let { buffer, uiManager, shortVideoSocialInteractionsHandler, localization, on } = $props();
 const shortVideo = $derived(((_a = buffer.current) === null || _a === void 0 ? void 0 : _a.type) === 'short-video' && ((_b = buffer.current) === null || _b === void 0 ? void 0 : _b.shortVideo) ? mapToShortVideoViewerModel(buffer.current.shortVideo) : null);
 const singleWebViewPage = $derived.by(() => {
     var _a;
@@ -45,42 +46,51 @@ const changeShowShortVideoAttachments = () => {
 };
 </script>
 
-<div class="stream-player-controls">
-  <div class="stream-player-controls__left">
-    {#if shortVideo && uiManager.shortVideoDetailsCollapsed && !uiManager.showShortVideoOverlay}
-      <div class="stream-player-controls__short-video-overlay">
-        {#if uiManager.showShortVideoAttachments}
-          <div class="stream-player-controls__short-video-attachments-inline">
-            <ShortVideoViewerAttachmentsInline model={shortVideo} />
-          </div>
-        {/if}
-        <ShortVideoSocialInteractions model={shortVideo} on={{ attachmentsClicked: changeShowShortVideoAttachments }} />
+{#if uiManager.viewInitialized && !uiManager.showShortVideoOverlay}
+  <div class="stream-player-controls">
+    <div class="stream-player-controls__left">
+      {#if shortVideo}
+        <div class="stream-player-controls__short-video-hub">
+          {#if uiManager.showShortVideoAttachments}
+            <div class="stream-player-controls__short-video-attachments-inline">
+              <ShortVideoViewerAttachmentsInline model={shortVideo} />
+            </div>
+          {/if}
+          <ShortVideoControls
+            model={shortVideo}
+            socialInteractionsHandler={shortVideoSocialInteractionsHandler}
+            on={{ attachmentsClicked: changeShowShortVideoAttachments }} />
+        </div>
+      {/if}
+      <div class="stream-player-controls__navigation-buttons" class:stream-player-controls__navigation-buttons--single-web-view-page={singleWebViewPage}>
+        <button type="button" class="navigation-button" disabled={!buffer.canLoadPrevious} onclick={buffer.loadPrevious}>
+          <span class="navigation-button__icon">
+            <Icon src={IconChevronUp} />
+          </span>
+        </button>
+        <button type="button" class="navigation-button" disabled={!buffer.canLoadNext} onclick={buffer.loadNext}>
+          <span class="navigation-button__icon">
+            <Icon src={IconChevronDown} />
+          </span>
+        </button>
       </div>
-    {/if}
-    <div class="stream-player-controls__navigation-buttons" class:stream-player-controls__navigation-buttons--single-web-view-page={singleWebViewPage}>
-      <button type="button" class="navigation-button" disabled={!buffer.canLoadPrevious} onclick={buffer.loadPrevious}>
-        <Icon src={IconChevronUp} />
-      </button>
-      <button type="button" class="navigation-button" disabled={!buffer.canLoadNext} onclick={buffer.loadNext}>
-        <Icon src={IconChevronDown} />
-      </button>
+    </div>
+    <div class="stream-player-controls__right">
+      {#if shortVideo && uiManager.showShortVideoAttachments}
+        <div class="stream-player-controls__short-video-attachments" transition:slideHorizontally|local>
+          <ShortVideoViewerAttachments
+            shortVideo={shortVideo}
+            localization={localization.shortVideoAttachmentsLocalization}
+            on={{
+              productClick: on.productClick
+            }} />
+        </div>
+      {/if}
     </div>
   </div>
-  <div class="stream-player-controls__right">
-    {#if shortVideo && shortVideo.products && uiManager.showShortVideoAttachments}
-      <div class="stream-player-controls__short-video-attachments">
-        <ShortVideoViewerAttachments
-          shortVideo={shortVideo}
-          localization={localization.shortVideoAttachmentsLocalization}
-          on={{
-            productClick: on.productClick
-          }} />
-      </div>
-    {/if}
-  </div>
-</div>
+{/if}
 
-<button type="button" class="close-button" onclick={on.closePlayer} class:close-button--left={uiManager.overviewCollapsed}>
+<button type="button" class="close-button" onclick={on.closePlayer}>
   <Icon src={IconDismiss} />
 </button>
 
@@ -95,34 +105,6 @@ const changeShowShortVideoAttachments = () => {
     opacity: 1;
   }
 }
-.close-button {
-  position: absolute;
-  top: 0.9375rem;
-  left: 15.1875rem;
-  z-index: 1;
-  width: var(--stream-player--button--size);
-  min-width: var(--stream-player--button--size);
-  max-width: var(--stream-player--button--size);
-  height: var(--stream-player--button--size);
-  min-height: var(--stream-player--button--size);
-  max-height: var(--stream-player--button--size);
-  background-color: rgba(0, 0, 0, 0.6);
-  border: 0.0625rem solid #1c1c1e;
-  border-radius: 50%;
-  text-align: center;
-  --icon--color: #ffffff;
-  /* Set 'container-type: inline-size;' to reference container*/
-}
-.close-button--left {
-  left: 0.625rem;
-}
-@container (width < 576px) {
-  .close-button {
-    left: unset;
-    right: 0.625rem;
-  }
-}
-
 .stream-player-controls {
   position: absolute;
   top: 0;
@@ -131,7 +113,6 @@ const changeShowShortVideoAttachments = () => {
   width: var(--stream-player--sidebar--available-space);
   display: flex;
   justify-content: space-between;
-  gap: 2.5rem;
   padding: var(--stream-player--controls--offset-vertical) var(--stream-player--controls--offset-horizontal);
   container-type: inline-size;
 }
@@ -148,14 +129,8 @@ const changeShowShortVideoAttachments = () => {
   justify-content: space-between;
   align-items: flex-end;
   flex-direction: column;
-  /* Set 'container-type: inline-size;' to reference container*/
 }
-@container (width < 9.375rem) {
-  .stream-player-controls__right {
-    display: none;
-  }
-}
-.stream-player-controls__short-video-overlay {
+.stream-player-controls__short-video-hub {
   gap: 2.5rem;
   display: flex;
   flex: 1;
@@ -163,6 +138,7 @@ const changeShowShortVideoAttachments = () => {
   flex-direction: column;
   align-items: flex-start;
   justify-content: flex-end;
+  --short-video-controls--icon--size: var(--stream-player--icon--size);
 }
 .stream-player-controls__short-video-attachments-inline {
   display: none;
@@ -215,15 +191,44 @@ const changeShowShortVideoAttachments = () => {
   flex-direction: column;
   gap: 1rem;
   z-index: 1;
+}
+
+.close-button {
+  width: var(--stream-player--button--size);
+  min-width: var(--stream-player--button--size);
+  max-width: var(--stream-player--button--size);
+  height: var(--stream-player--button--size);
+  min-height: var(--stream-player--button--size);
+  max-height: var(--stream-player--button--size);
+  background-color: rgba(0, 0, 0, 0.6);
+  border: 0.0625rem solid #1c1c1c;
+  border-radius: 50%;
+  text-align: center;
+  --icon--color: #ffffff;
+  --icon--size: var(--stream-player--icon--size);
+  position: absolute;
+  top: 0.9375rem;
+  left: calc(var(--stream-player--overview--width) + 0.625rem);
+  z-index: 1;
   /* Set 'container-type: inline-size;' to reference container*/
 }
-@container (width < 6.25rem) {
-  .stream-player-controls__navigation-buttons {
-    visibility: hidden;
+.close-button:disabled {
+  opacity: 0.5;
+  cursor: default;
+}
+.close-button:hover {
+  background-color: rgba(0, 0, 0, 0.9);
+  transition: background-color 0.5s;
+}
+@container (width < 576px) {
+  .close-button {
+    left: unset;
+    right: 0.625rem;
   }
 }
 
 .navigation-button {
+  --_icon-scale: 1;
   width: var(--stream-player--button--size);
   min-width: var(--stream-player--button--size);
   max-width: var(--stream-player--button--size);
@@ -231,7 +236,7 @@ const changeShowShortVideoAttachments = () => {
   min-height: var(--stream-player--button--size);
   max-height: var(--stream-player--button--size);
   background-color: rgba(0, 0, 0, 0.6);
-  border: 0.0625rem solid #1c1c1e;
+  border: 0.0625rem solid #1c1c1c;
   border-radius: 50%;
   text-align: center;
   --icon--color: #ffffff;
@@ -240,4 +245,12 @@ const changeShowShortVideoAttachments = () => {
 .navigation-button:disabled {
   opacity: 0.5;
   cursor: default;
+}
+.navigation-button:hover:not(:disabled) {
+  --_icon-scale: 1.2;
+}
+.navigation-button__icon {
+  display: block;
+  transform: scale(var(--_icon-scale));
+  transition: 0.3s;
 }</style>

package/dist/streams/stream-player/controls.svelte.d.ts

@@ -1,9 +1,11 @@
+import { type ShortVideoSocialInteractionsHanlder } from '../../short-videos/short-video-viewer';
 import type { StreamPlayerBuffer } from './stream-player-buffer.svelte';
 import { StreamPlayerLocalization } from './stream-player-localization';
 import type { StreamPlayerUiManager } from './ui-manager.svelte';
 type Props = {
     buffer: StreamPlayerBuffer;
     uiManager: StreamPlayerUiManager;
+    shortVideoSocialInteractionsHandler?: ShortVideoSocialInteractionsHanlder;
     localization: StreamPlayerLocalization;
     on: {
         closePlayer: () => void;

package/dist/streams/stream-player/index.d.ts

@@ -1,3 +1,4 @@
+import type { ShortVideoSocialInteractionsHanlder } from '../../short-videos/short-video-viewer';
 import type { IStreamPlayerLocalization } from './stream-player-localization';
 export type { IStreamPlayerLocalization };
 /**
@@ -28,6 +29,7 @@ export declare const openStreamPlayer: (init: {
     graphqlOrigin?: string;
     localization?: IStreamPlayerLocalization | "en" | "no";
     showStreamsCloudWatermark?: boolean;
+    shortVideoSocialInteractionsHandler?: ShortVideoSocialInteractionsHanlder;
     initiator?: string;
     on?: {
         streamActivated?: (data: {

package/dist/streams/stream-player/index.js

@@ -1,5 +1,5 @@
 import { getLocale } from '../../core/locale';
-import { ShadowHost } from '../../ui/shadow-dom';
+import { ModalShadowHost } from '../../ui/shadow-dom';
 import { default as StreamPlayer } from './cmp.stream-player.svelte';
 import { AppEventsTracker } from '@streamscloud/streams-analytics-collector';
 import { mount, unmount } from 'svelte';
@@ -27,8 +27,8 @@ import { mount, unmount } from 'svelte';
  * ```
  */
 export const openStreamPlayer = (init) => {
-    const { streamId, graphqlOrigin, localization, showStreamsCloudWatermark, initiator } = init;
-    const shadowHost = new ShadowHost();
+    const { streamId, graphqlOrigin, localization, showStreamsCloudWatermark, shortVideoSocialInteractionsHandler, initiator } = init;
+    const shadowHost = new ModalShadowHost();
     const mounted = mount(StreamPlayer, {
         target: shadowHost.shadowRoot,
         props: {
@@ -36,6 +36,7 @@ export const openStreamPlayer = (init) => {
             graphqlOrigin,
             localization: getLocale(localization),
             showStreamsCloudWatermark,
+            shortVideoSocialInteractionsHandler,
             initiator,
             on: {
                 streamActivated: (data) => {

package/dist/streams/stream-player/mapper.d.ts

@@ -1,3 +1,3 @@
 import type { StreamPlayerPayloadFragment } from './operations.generated';
 import type { StreamPlayerModel } from './types';
-export declare const mapStreamPlayerModel: (payload: StreamPlayerPayloadFragment) => StreamPlayerModel;
+export declare const mapToStreamPlayerModel: (payload: StreamPlayerPayloadFragment) => StreamPlayerModel;

package/dist/streams/stream-player/mapper.js

@@ -1,4 +1,4 @@
-export const mapStreamPlayerModel = (payload) => {
+export const mapToStreamPlayerModel = (payload) => {
     const headerDataProvider = payload.availableFrom ?? payload.ownerProfile;
     return {
         id: payload.id,

package/dist/streams/stream-player/stream-overview.svelte

@@ -8,10 +8,21 @@ import { TimeAgo } from '../../ui/time-ago';
 import { StreamPlayerLocalization } from './stream-player-localization';
 import IconPanelLeftText from '@fluentui/svg-icons/icons/panel_left_text_20_regular.svg?raw';
 let { model, buffer, activePageId, on, uiManager, localization } = $props();
+const overviewAttached = (node) => {
+    const resizeObserver = new ResizeObserver(() => {
+        on.widthChanged(node.clientWidth);
+    });
+    resizeObserver.observe(node);
+    return {
+        destroy() {
+            resizeObserver.disconnect();
+        }
+    };
+};
 </script>
 
 {#if !uiManager.overviewCollapsed}
-  <div class="stream-overview" transition:slideHorizontally|local>
+  <div class="stream-overview" transition:slideHorizontally|local use:overviewAttached>
     <div class="stream-overview-info">
       <div class="stream-overview-owner">
         <div class="stream-overview-owner__image">

package/dist/streams/stream-player/stream-overview.svelte.d.ts

@@ -10,6 +10,7 @@ type Props = {
     localization: StreamPlayerLocalization;
     on: {
         setCurrentItem: (index: number) => void;
+        widthChanged: (width: number) => void;
     };
 };
 declare const StreamOverview: import("svelte").Component<Props, {}, "">;

package/dist/streams/stream-player/stream-player-localization.d.ts

@@ -1,5 +1,5 @@
 import { type Locale } from '../../core/locale';
-import type { IShortVideoAttachmentsLocalization, IShortVideoDetailsLocalization, IShortVideoViewerLocalization } from '../../short-videos/short-video-viewer';
+import type { IShortVideoAttachmentsLocalization, IShortVideoViewerLocalization } from '../../short-videos/short-video-viewer';
 import type { IStreamPageViewerLocalization } from '../stream-page-viewer';
 import type { ISwipeIndicatorLocalization } from '../../ui/swipe-indicator';
 import type { ITimeAgoLocalization } from '../../ui/time-ago';
@@ -9,7 +9,6 @@ export interface IStreamPlayerLocalization {
     timeAgoLocalization?: ITimeAgoLocalization | Locale;
     streamPageViewerLocalization?: IStreamPageViewerLocalization | Locale;
     shortVideoAttachmentsLocalization?: IShortVideoAttachmentsLocalization | Locale;
-    shortVideoDetailsLocalization?: IShortVideoDetailsLocalization | Locale;
     shortVideoViewerLocalization?: IShortVideoViewerLocalization | Locale;
     swipeIndicatorLocalization?: ISwipeIndicatorLocalization | Locale;
 }
@@ -19,7 +18,6 @@ export declare class StreamPlayerLocalization {
     timeAgoLocalization: ITimeAgoLocalization | Locale;
     streamPageViewerLocalization: IStreamPageViewerLocalization | Locale;
     shortVideoAttachmentsLocalization: IShortVideoAttachmentsLocalization | Locale;
-    shortVideoDetailsLocalization: IShortVideoDetailsLocalization | Locale;
     shortVideoViewerLocalization: IShortVideoViewerLocalization | Locale;
     swipeIndicatorLocalization: ISwipeIndicatorLocalization | Locale;
     constructor(init: IStreamPlayerLocalization | Locale);

package/dist/streams/stream-player/stream-player-localization.js

@@ -5,7 +5,6 @@ export class StreamPlayerLocalization {
     timeAgoLocalization;
     streamPageViewerLocalization;
     shortVideoAttachmentsLocalization;
-    shortVideoDetailsLocalization;
     shortVideoViewerLocalization;
     swipeIndicatorLocalization;
     constructor(init) {
@@ -14,7 +13,6 @@ export class StreamPlayerLocalization {
         this.timeAgoLocalization = isLocale(init) ? init : init.timeAgoLocalization || 'en';
         this.streamPageViewerLocalization = isLocale(init) ? init : init.streamPageViewerLocalization || 'en';
         this.shortVideoAttachmentsLocalization = isLocale(init) ? init : init.shortVideoAttachmentsLocalization || 'en';
-        this.shortVideoDetailsLocalization = isLocale(init) ? init : init.shortVideoDetailsLocalization || 'en';
         this.shortVideoViewerLocalization = isLocale(init) ? init : init.shortVideoViewerLocalization || 'en';
         this.swipeIndicatorLocalization = isLocale(init) ? init : init.swipeIndicatorLocalization || 'en';
     }

package/dist/streams/stream-player/ui-manager.svelte.d.ts

@@ -1,18 +1,20 @@
 export declare class StreamPlayerUiManager {
     overviewCollapsed: boolean;
-    shortVideoDetailsCollapsed: boolean;
     showShortVideoAttachments: boolean;
     globalCssVariables: string;
     isMobileView: boolean;
+    viewInitialized: boolean;
     showShortVideoOverlay: boolean;
     private readonly buttonSize;
+    private readonly iconSize;
     private readonly controlsOffsetHorizontal;
     private readonly controlsOffsetVertical;
-    private readonly iconSize;
     private viewTotalWidth;
     private mainViewColumnWidth;
+    private overviewWidth;
     updateDimensions: (dimensions: {
         viewTotalWidth: number;
         mainViewColumnWidth: number;
     }) => void;
+    updateOverviewWidth: (width: number) => void;
 }

package/dist/streams/stream-player/ui-manager.svelte.js

@@ -1,27 +1,32 @@
 export class StreamPlayerUiManager {
     overviewCollapsed = $state(false);
-    shortVideoDetailsCollapsed = $state(true);
     showShortVideoAttachments = $state(true);
     globalCssVariables = $derived.by(() => {
         const values = [
             `--stream-player--button--size: ${this.buttonSize}px`,
+            `--stream-player--icon--size: ${this.iconSize}px`,
             `--stream-player--controls--offset-horizontal: ${this.controlsOffsetHorizontal}px`,
             `--stream-player--controls--offset-vertical: ${this.controlsOffsetVertical}px`,
-            `--stream-player--sidebar--available-space: ${(this.viewTotalWidth - this.mainViewColumnWidth) / 2}px`,
-            `--stream-player--icon--size: ${this.iconSize}px`
+            `--stream-player--overview--width: ${this.overviewWidth}px`,
+            `--stream-player--sidebar--available-space: ${(this.viewTotalWidth - this.mainViewColumnWidth) / 2}px`
         ];
         return values.join(';');
     });
     isMobileView = $derived.by(() => this.viewTotalWidth <= 576);
-    showShortVideoOverlay = $derived.by(() => (this.viewTotalWidth - this.mainViewColumnWidth) / 2 <= 70);
+    viewInitialized = $derived.by(() => !!this.viewTotalWidth && !!this.mainViewColumnWidth);
+    showShortVideoOverlay = $derived.by(() => this.viewInitialized && (this.viewTotalWidth - this.mainViewColumnWidth) / 2 <= 85);
     buttonSize = 48;
+    iconSize = 28;
     controlsOffsetHorizontal = 28;
     controlsOffsetVertical = 28;
-    iconSize = 28;
     viewTotalWidth = $state(0);
     mainViewColumnWidth = $state(0);
+    overviewWidth = $state(0);
     updateDimensions = (dimensions) => {
         this.viewTotalWidth = dimensions.viewTotalWidth;
         this.mainViewColumnWidth = dimensions.mainViewColumnWidth;
     };
+    updateOverviewWidth = (width) => {
+        this.overviewWidth = width;
+    };
 }

package/dist/ui/button/resources/button-theme.svelte

@@ -36,6 +36,7 @@ let { style = undefined, size = ButtonSize.Standard, children } = $props();
   }
 }
 .button-theme {
+  display: contents;
   /*Style*/
   /*Size*/
 }

package/dist/ui/line-clamp/cmp.line-clamp.svelte

@@ -51,20 +51,25 @@ const toggleShowMore = () => {
 </script>
 
 <div class="line-clamp" bind:this={element}>
-  <div class="line-clamp__wrapper" bind:this={clampWrapperRef}>
-    {#if children}
-      {@render children()}
-    {:else if value}
-      {@html value}
+  <div class="line-clamp__wrapper-container">
+    <div class="line-clamp__wrapper" bind:this={clampWrapperRef}>
+      {#if children}
+        {@render children()}
+      {:else if value}
+        {@html value}
+      {/if}
+    </div>
+
+    {#if enableShowMore && isTruncated && !showingAllText}
+      <button type="button" class="line-clamp__show-more-button line-clamp__show-more-button--inline" onclick={toggleShowMore}>
+        {localization.showMore}
+      </button>
     {/if}
   </div>
-  {#if enableShowMore && (isTruncated || showingAllText)}
+
+  {#if enableShowMore && showingAllText}
     <button type="button" class="line-clamp__show-more-button" onclick={toggleShowMore}>
-      {#if showingAllText}
-        {localization.showLess}
-      {:else}
-        {localization.showMore}
-      {/if}
+      {localization.showLess}
     </button>
   {/if}
 </div>
@@ -75,6 +80,9 @@ const toggleShowMore = () => {
   display: flex;
   flex-direction: column;
 }
+.line-clamp__wrapper-container {
+  position: relative;
+}
 .line-clamp__wrapper {
   display: -webkit-box;
   overflow: hidden;
@@ -83,7 +91,21 @@ const toggleShowMore = () => {
   -webkit-box-orient: vertical;
 }
 .line-clamp__show-more-button {
-  margin-top: 0.5em;
   font-size: 0.9em;
-  opacity: 0.8;
+  font-style: italic;
+}
+.line-clamp__show-more-button--inline {
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  padding-left: 1em;
+  backdrop-filter: blur(2px);
+}
+.line-clamp__show-more-button--inline::after {
+  content: "...";
+  position: absolute;
+  left: 0;
+}
+.line-clamp__show-more-button:not(.line-clamp__show-more-button--inline) {
+  margin-top: 0.5em;
 }</style>

package/dist/ui/player/cmp.player-slider.svelte

@@ -1,5 +1,4 @@
-<script lang="ts">import { Utils } from '../../core/utils';
-import { isScrollingPrevented } from './prevent-slider-scroll';
+<script lang="ts">import { isScrollingPrevented } from './prevent-slider-scroll';
 import { onDestroy, onMount, untrack } from 'svelte';
 let { buffer, on, children } = $props();
 let slidesRef;
@@ -90,7 +89,28 @@ onMount(() => {
         }
         reset();
     });
-    slidesRef.addEventListener('wheel', Utils.throttle((e) => {
+    let waveDetector = {
+        events: [],
+        direction: 0,
+        peakReached: false,
+        lastPeak: 0,
+        waveStartTime: 0
+    };
+    let isAnimatingWheel = false;
+    const triggerAnimation = (direction) => {
+        isAnimatingWheel = true;
+        if (direction > 0 && buffer.canLoadNext) {
+            buffer.loadNext();
+        }
+        else if (direction < 0 && buffer.canLoadPrevious) {
+            buffer.loadPrevious();
+        }
+        setTimeout(() => {
+            isAnimatingWheel = false;
+        }, buffer.animationDuration + 100);
+    };
+    slidesRef.addEventListener('wheel', (e) => {
+        e.preventDefault();
         const checkCanHandleWheel = (node) => {
             while (node && node !== slidesRef) {
                 if (isScrollingPrevented(node)) {
@@ -103,13 +123,55 @@ onMount(() => {
         if (!checkCanHandleWheel(e.target)) {
             return;
         }
-        if (e.deltaY > 0 && buffer.canLoadNext) {
-            buffer.loadNext();
+        const now = Date.now();
+        const absDelta = Math.abs(e.deltaY);
+        const direction = Math.sign(e.deltaY);
+        // Mouse - large stable values, trigger immediately
+        if (absDelta >= 10 && !isAnimatingWheel) {
+            const lastEvent = waveDetector.events[waveDetector.events.length - 1];
+            const timeSinceLastEvent = lastEvent ? now - lastEvent.time : 1000;
+            // If enough time has passed since the last event - it's a mouse
+            if (timeSinceLastEvent > 100) {
+                triggerAnimation(direction);
+                waveDetector = { events: [], direction: 0, peakReached: false, lastPeak: 0, waveStartTime: 0 };
+                return;
+            }
         }
-        if (e.deltaY < 0 && buffer.canLoadPrevious) {
-            buffer.loadPrevious();
+        // Touchpad - small, variable values, need to analyze the wave
+        // New wave if: direction changed or a lot of time has passed
+        if (direction !== waveDetector.direction || (waveDetector.waveStartTime && now - waveDetector.waveStartTime > 1500)) {
+            // Finalize the previous wave if it existed
+            if (waveDetector.peakReached && !isAnimatingWheel) {
+                triggerAnimation(waveDetector.direction);
+            }
+            // Start a new wave
+            waveDetector = {
+                events: [{ delta: absDelta, time: now }],
+                direction: direction,
+                peakReached: false,
+                lastPeak: absDelta,
+                waveStartTime: now
+            };
+            return;
+        }
+        // Continue the current wave
+        waveDetector.events.push({ delta: absDelta, time: now });
+        // Determine the phase of the wave
+        if (absDelta > waveDetector.lastPeak) {
+            // The wave is growing
+            waveDetector.lastPeak = absDelta;
+            waveDetector.peakReached = absDelta >= 5; // The minimum peak to consider a valid wave
         }
-    }, buffer.animationDuration + 250));
+        else if (absDelta < waveDetector.lastPeak * 0.5) {
+            // The wave has dropped significantly - consider the gesture complete
+            if (waveDetector.peakReached && !isAnimatingWheel) {
+                triggerAnimation(waveDetector.direction);
+                waveDetector = { events: [], direction: 0, peakReached: false, lastPeak: 0, waveStartTime: 0 };
+            }
+        }
+        // Cleanup old events
+        waveDetector.events = waveDetector.events.filter((evt) => now - evt.time < 2000);
+    });
     slidesRef.addEventListener('transitionend', (e) => {
         if (e.target !== slidesRef) {
             return;
@@ -142,7 +204,10 @@ const styles = $derived.by(() => {
   <div class="player-slider__slides" bind:this={slidesRef} style={styles}>
     {#each buffer.loaded as item, index (item)}
       <div class="player-slider__slide">
-        {@render children({ item, active: index === activeIndex })}
+        {#if index >= activeIndex - 1 && index <= activeIndex + 1}
+          <!-- Only render the active slide and its immediate neighbors for performance -->
+          {@render children({ item, active: index === activeIndex })}
+        {/if}
       </div>
     {/each}
   </div>

package/dist/ui/progress/cmp.progress.svelte

@@ -22,10 +22,13 @@
   --_progress--height: var(--progress--height, 0.25em);
   --_progress--back-color: var(--progress--back-color, #b0b0b0);
   --_progress--front-color: var(--progress--front-color, #ffffff);
+  --_progress--box-shadow: var(--progress--box-shadow, 0 2px 3px rgba(0, 0, 0, 0.25) inset);
+  --_progress--border-radius: var(--progress--border-radius, 0);
   width: 100%;
   background: var(--_progress--back-color);
   height: var(--_progress--height);
-  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.25) inset;
+  box-shadow: var(--_progress--box-shadow);
+  border-radius: var(--_progress--border-radius);
 }
 .progress__value {
   background: var(--_progress--front-color);