@streamscloud/embeddable 11.0.0 → 12.0.0

package/dist/ui/line-clamp/cmp.line-clamp-auto.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { Locale } from '../../core/locale';
+import { type Snippet } from 'svelte';
+type Props = {
+    enableShowMore?: boolean;
+    locale?: Locale;
+    children: Snippet;
+};
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

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

@@ -1,70 +1,44 @@
 <script lang="ts">import { LineClampLocalization } from './line-clamp-localization';
-import { LineClampUtils } from './line-clamp-utils';
-import { onDestroy, onMount } from 'svelte';
-let { value = undefined, maxLines = 3, locale, enableShowMore = false, children } = $props();
-const localization = $derived(new LineClampLocalization(locale !== null && locale !== void 0 ? locale : 'en'));
-let parent;
-let element;
-let clampWrapperRef;
+import {} from 'svelte';
+let { maxLines, locale, enableShowMore = false, children } = $props();
+const localization = $derived(new LineClampLocalization(locale));
 let isTruncated = $state(false);
 let showingAllText = $state(false);
-let resizeObserver = null;
-onMount(() => {
-    let parentElement = element.parentElement;
-    if (!parentElement || !('clientHeight' in parentElement)) {
-        console.error('Unsupported parent for multiline clamper');
-    }
-    else {
-        parent = parentElement;
-        clamp();
-        resizeObserver = new ResizeObserver(clamp);
-        resizeObserver.observe(parent);
-    }
-});
-onDestroy(() => {
-    resizeObserver === null || resizeObserver === void 0 ? void 0 : resizeObserver.disconnect();
-    resizeObserver = null;
-});
-const clamp = () => {
-    isTruncated = clampWrapperRef.scrollHeight > clampWrapperRef.offsetHeight;
-    if (showingAllText) {
-        setClampValue('unset');
-    }
-    else {
-        let clampValue;
-        if (maxLines === 'auto') {
-            clampValue = LineClampUtils.calculateClampValue(parent);
-        }
-        else {
-            clampValue = maxLines;
-        }
-        setClampValue(clampValue.toString());
-    }
-};
-const setClampValue = (value) => {
-    clampWrapperRef.style.setProperty('-webkit-line-clamp', value);
-};
+const canShowMore = $derived(enableShowMore && isTruncated && !showingAllText);
 const toggleShowMore = () => {
     showingAllText = !showingAllText;
-    clamp();
 };
+const trackTruncatatedState = (node) => {
+    const resizeObserver = new ResizeObserver(() => {
+        isTruncated = node.scrollHeight > node.offsetHeight;
+    });
+    resizeObserver.observe(node);
+    return {
+        destroy() {
+            resizeObserver.disconnect();
+        }
+    };
+};
+const styles = $derived.by(() => {
+    const values = [];
+    if (maxLines) {
+        values.push(`--line-clamp--line-clamp: ${maxLines}`);
+    }
+    return values.join(';');
+});
 </script>
 
-<div class="line-clamp" bind:this={element}>
+<div
+  class="line-clamp"
+  class:line-clamp--clickable={canShowMore}
+  style={styles}
+  onclick={() => canShowMore && toggleShowMore()}
+  onmousedown={() => {}}
+  role="none">
   <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 class="line-clamp__wrapper" class:line-clamp__wrapper--showing-all={showingAllText} use:trackTruncatatedState>
+      {@render children()}
     </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 && showingAllText}
@@ -75,11 +49,17 @@ const toggleShowMore = () => {
 </div>
 
 <style>.line-clamp {
+  --_line-clamp--white-space: var(--line-clamp--white-space, pre-line);
+  --_line-clamp--line-clamp: var(--line-clamp--line-clamp, 0);
   width: 100%;
   height: 100%;
   display: flex;
   flex-direction: column;
 }
+.line-clamp--clickable {
+  cursor: pointer;
+  pointer-events: auto;
+}
 .line-clamp__wrapper-container {
   position: relative;
 }
@@ -87,26 +67,18 @@ const toggleShowMore = () => {
   display: -webkit-box;
   overflow: hidden;
   word-break: break-word;
-  white-space: var(--line-clamp-white-space, pre-line);
+  white-space: var(--_line-clamp--white-space);
   -webkit-box-orient: vertical;
+  line-clamp: var(--_line-clamp--line-clamp);
+  -webkit-line-clamp: var(--_line-clamp--line-clamp);
+  text-overflow: ellipsis;
+}
+.line-clamp__wrapper--showing-all {
+  --_line-clamp--line-clamp: none;
 }
 .line-clamp__show-more-button {
   font-size: 0.9em;
   font-style: italic;
   pointer-events: auto;
-}
-.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/line-clamp/cmp.line-clamp.svelte.d.ts

@@ -1,11 +1,10 @@
 import type { Locale } from '../../core/locale';
 import { type Snippet } from 'svelte';
 type Props = {
-    value?: string | null;
-    maxLines?: number | 'auto';
+    maxLines?: number;
     enableShowMore?: boolean;
-    locale?: Locale;
-    children?: Snippet;
+    locale: Locale;
+    children: Snippet;
 };
 declare const Cmp: import("svelte").Component<Props, {}, "">;
 type Cmp = ReturnType<typeof Cmp>;

package/dist/ui/line-clamp/index.d.ts

@@ -1 +1,2 @@
 export { default as LineClamp } from './cmp.line-clamp.svelte';
+export { default as LineClampAuto } from './cmp.line-clamp-auto.svelte';

package/dist/ui/line-clamp/index.js

@@ -1 +1,2 @@
 export { default as LineClamp } from './cmp.line-clamp.svelte';
+export { default as LineClampAuto } from './cmp.line-clamp-auto.svelte';

package/dist/ui/player/button/cmp.mobile-player-buttons-group.svelte

@@ -0,0 +1,44 @@
+<script lang="ts">import { Icon } from '../../icon';
+let { actions } = $props();
+</script>
+
+<div class="mobile-player-buttons-group">
+  {#each actions as action (action.icon)}
+    <button type="button" class="mobile-player-buttons-group__action" onclick={action.callback}>
+      <span class="mobile-player-buttons-group__action-icon">
+        <Icon src={action.icon} color={action.iconColor} />
+      </span>
+    </button>
+  {/each}
+</div>
+
+<style>@keyframes fadeIn {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.4;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+.mobile-player-buttons-group {
+  cursor: pointer;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  pointer-events: auto;
+}
+.mobile-player-buttons-group__action {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 1rem;
+  --icon--color: #ffffff;
+  --icon--size: 2rem;
+  --icon--filter: drop-shadow(1px 1px 0 rgba(0, 0, 0, 0.2));
+}
+.mobile-player-buttons-group__action-icon {
+  display: block;
+}</style>

package/dist/ui/player/button/cmp.mobile-player-buttons-group.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { PlayerButtonsGroupAction } from './types';
+type Props = {
+    actions: PlayerButtonsGroupAction[];
+};
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

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

@@ -40,7 +40,6 @@ const styles = $derived.by(() => {
   align-items: center;
   background-color: var(--_player-button--color--inactive);
   transition: background-color 0.5s;
-  border: 1px solid var(--_player-button--color);
   border-radius: 50%;
   --icon--color: #ffffff;
   --icon--size: 1.75rem;

package/dist/ui/player/button/cmp.player-buttons-group.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">import { Icon } from '../../icon';
-let { scaleEffect = false, borderColor, backgroundColor, actions } = $props();
+let { scaleEffect = false, activeColor, backgroundColor, actions } = $props();
 const styles = $derived.by(() => {
     const values = [];
-    if (borderColor) {
-        values.push(`--player-buttons-group--border-color: ${borderColor}`);
+    if (activeColor) {
+        values.push(`--player-buttons-group--active-color: ${activeColor}`);
     }
     if (backgroundColor) {
         values.push(`--player-buttons-group--background-color: ${backgroundColor}`);
@@ -15,7 +15,7 @@ const styles = $derived.by(() => {
 <div class="player-buttons-group" style={styles}>
   {#each actions as action (action.icon)}
     <button type="button" class="player-buttons-group__action" class:player-buttons-group__action--scale-effect={scaleEffect} onclick={action.callback}>
-      <span class="player-buttons-group__action-icon" style={`--icon--stroke-width:${action.iconStrokeWidth}; --icon--stroke-color:${action.iconStrokeColor}`}>
+      <span class="player-buttons-group__action-icon">
         <Icon src={action.icon} color={action.iconColor} />
       </span>
     </button>
@@ -34,20 +34,18 @@ const styles = $derived.by(() => {
   }
 }
 .player-buttons-group {
-  --_player-buttons-group--border-color: var(--player-buttons-group--border-color, rgb(from #000000 r g b / 95%));
+  --_player-buttons-group--active-color: var(--player-buttons-group--active-color, rgb(from #000000 r g b / 95%));
   --_player-buttons-group--background-color: var(
     --player-buttons-group--background-color,
-    rgb(from var(--_player-buttons-group--border-color, #000000) r g b / 60%)
+    rgb(from var(--_player-buttons-group--active-color, #000000) r g b / 60%)
   );
   cursor: pointer;
   display: flex;
   flex-direction: column;
   justify-content: center;
-  gap: 1.125rem;
-  border: 1px solid var(--_player-buttons-group--border-color);
   border-radius: 1.25rem;
   background: var(--_player-buttons-group--background-color);
-  padding: 1rem 0.625rem;
+  padding: 0.4375rem 0.0625rem;
   pointer-events: auto;
   /* Set 'container-type: inline-size;' to reference container*/
 }
@@ -56,11 +54,18 @@ const styles = $derived.by(() => {
   display: flex;
   justify-content: center;
   align-items: center;
+  padding: 0.5625rem;
+  border-radius: 1.25rem;
   --icon--color: #ffffff;
   --icon--size: 1.75rem;
+  transition: background-color 0.5s;
+}
+.player-buttons-group__action:hover {
+  background-color: var(--_player-buttons-group--active-color);
 }
 .player-buttons-group__action--scale-effect:hover {
   --_player-action--icon-scale: 1.2;
+  background-color: transparent;
 }
 .player-buttons-group__action-icon {
   display: block;
@@ -69,9 +74,8 @@ const styles = $derived.by(() => {
 }
 @container (width < 576px) {
   .player-buttons-group {
-    gap: 1.125rem;
     border-radius: 0.9375rem;
-    padding: 0.625rem 0.5rem;
+    padding: 0.25rem 0.0625rem;
   }
   .player-buttons-group__action {
     --icon--size: 1.5rem;

package/dist/ui/player/button/cmp.player-buttons-group.svelte.d.ts

@@ -1,6 +1,6 @@
 import type { PlayerButtonsGroupAction } from './types';
 type Props = {
-    borderColor: string | null;
+    activeColor: string | null;
     backgroundColor: string | null;
     actions: PlayerButtonsGroupAction[];
     scaleEffect?: boolean;

package/dist/ui/player/button/index.d.ts

@@ -1,3 +1,4 @@
 export { default as PlayerButton } from './cmp.player-button.svelte';
 export { default as PlayerButtonsGroup } from './cmp.player-buttons-group.svelte';
+export { default as MobilePlayerButtonsGroup } from './cmp.mobile-player-buttons-group.svelte';
 export type { PlayerButtonsGroupAction } from './types';

package/dist/ui/player/button/index.js

@@ -1,2 +1,3 @@
 export { default as PlayerButton } from './cmp.player-button.svelte';
 export { default as PlayerButtonsGroup } from './cmp.player-buttons-group.svelte';
+export { default as MobilePlayerButtonsGroup } from './cmp.mobile-player-buttons-group.svelte';

package/dist/ui/player/button/types.d.ts

@@ -2,7 +2,5 @@ import { IconColor } from '../../icon';
 export type PlayerButtonsGroupAction = {
     icon: string;
     iconColor?: IconColor;
-    iconStrokeColor?: string;
-    iconStrokeWidth?: string;
     callback: () => void;
 };

package/dist/ui/player/close-orchestrator/close-orchestrator.svelte.d.ts

@@ -0,0 +1,18 @@
+import type { ICloseOrchestrator } from './types';
+export declare class CloseOrchestrator implements ICloseOrchestrator {
+    closingInProgress: boolean;
+    closed: boolean;
+    closeTriggerAttached: boolean;
+    private _canClose;
+    private _closeFn;
+    private _callbacks;
+    constructor(init: {
+        closeFn: () => void;
+        canClose: boolean;
+    });
+    get closeTriggerVisible(): boolean;
+    subscribe: (callback: () => void) => void;
+    unsubscribe: (callback: () => void) => void;
+    setCloseTriggerAttached: (attached: boolean) => void;
+    requestClose: () => Promise<void>;
+}

package/dist/ui/player/close-orchestrator/close-orchestrator.svelte.js

@@ -0,0 +1,58 @@
+export class CloseOrchestrator {
+    closingInProgress = $state(false);
+    closed = $state(false);
+    // Indicates whether the close trigger (button) is already attached to the DOM, to avoid duplicates
+    closeTriggerAttached = $state(false);
+    _canClose;
+    _closeFn;
+    _callbacks = new Set();
+    constructor(init) {
+        this._closeFn = init.closeFn;
+        this._canClose = init.canClose;
+    }
+    get closeTriggerVisible() {
+        return this._canClose;
+    }
+    subscribe = (callback) => {
+        this._callbacks.add(callback);
+    };
+    unsubscribe = (callback) => {
+        this._callbacks.delete(callback);
+    };
+    setCloseTriggerAttached = (attached) => {
+        this.closeTriggerAttached = attached;
+    };
+    requestClose = async () => {
+        // Check if closing is allowed
+        if (!this._canClose) {
+            return;
+        }
+        // Prevent multiple simultaneous close attempts
+        if (this.closingInProgress || this.closed) {
+            return;
+        }
+        this.closingInProgress = true;
+        try {
+            // Wait for all callbacks to complete
+            await Promise.all(Array.from(this._callbacks).map((cb) => cb()));
+            // Execute the close function
+            this._closeFn();
+            // Mark as successfully closed
+            this.closed = true;
+        }
+        catch (error) {
+            // Log error for debugging
+            console.error('Error during close operation:', error);
+            // Reset the flag to allow retry
+            this.closingInProgress = false;
+            // Re-throw error for upper-level handling
+            throw error;
+        }
+        finally {
+            // Clean up the closing flag on success
+            if (this.closed) {
+                this.closingInProgress = false;
+            }
+        }
+    };
+}

package/dist/ui/player/close-orchestrator/index.d.ts

@@ -0,0 +1,2 @@
+export { CloseOrchestrator } from './close-orchestrator.svelte';
+export type { ICloseOrchestrator } from './types';

package/dist/ui/player/close-orchestrator/index.js

@@ -0,0 +1 @@
+export { CloseOrchestrator } from './close-orchestrator.svelte';

package/dist/ui/player/close-orchestrator/types.d.ts

@@ -0,0 +1,9 @@
+export type ICloseOrchestrator = {
+    readonly closingInProgress: boolean;
+    readonly closeTriggerVisible: boolean;
+    readonly closeTriggerAttached: boolean;
+    setCloseTriggerAttached: (attached: boolean) => void;
+    subscribe: (callback: () => void) => void;
+    unsubscribe: (callback: () => void) => void;
+    requestClose: () => void;
+};

package/dist/ui/player/close-orchestrator/types.js

@@ -0,0 +1 @@
+export {};

package/dist/ui/player/colors/index.d.ts

@@ -0,0 +1 @@
+export type { PlayerColors } from './player-colors';

package/dist/ui/player/colors/index.js

@@ -0,0 +1 @@
+export {};

package/dist/ui/player/colors/player-colors.d.ts

@@ -0,0 +1,11 @@
+export type PlayerColors = {
+    brand: string | null;
+    button: string | null;
+    buttonInactive: string | null;
+    cardButton: string | null;
+    cardBackground: string | null;
+    playerBackground: string | null;
+    price: string | null;
+    salePrice: string | null;
+    sidebarBackground: string | null;
+} | null;

package/dist/ui/player/colors/player-colors.js

@@ -0,0 +1 @@
+export {};

package/dist/ui/player/providers/chunks-player-buffer/player-chunks-manager.svelte.d.ts

@@ -2,14 +2,10 @@ import { PlayerChunk } from './player-chunk.svelte';
 import type { IChunksPlayerDataProvider, WithId } from '../types';
 export declare class PlayerChunksManager<TItem extends WithId, TChunk extends WithId> {
     private provider;
-    private callbacks;
     private _activeChunkIndex;
     private _loadedChunks;
-    private _isLoading;
-    constructor(provider: IChunksPlayerDataProvider<TItem, TChunk>, callbacks: {
-        onInitializationFinished: () => void;
-        onEndReached: () => void;
-    });
+    private _fetchDeferred;
+    constructor(provider: IChunksPlayerDataProvider<TItem, TChunk>);
     get activeChunk(): PlayerChunk<TItem, TChunk>;
     get loadedChunks(): PlayerChunk<TItem, TChunk>[];
     get flattenedChunkItems(): TItem[];

package/dist/ui/player/providers/chunks-player-buffer/player-chunks-manager.svelte.js

@@ -1,15 +1,14 @@
+import { Deferred } from '../../../../core/deferred';
 import { PlayerChunk } from './player-chunk.svelte';
 const CHUNKS_BUFFER_SIZE = 5;
 const FIXED_START_INDEX = 0;
 export class PlayerChunksManager {
     provider;
-    callbacks;
     _activeChunkIndex = $state(-1);
     _loadedChunks = $state.raw([]);
-    _isLoading = $state(false);
-    constructor(provider, callbacks) {
+    _fetchDeferred = $state.raw(null);
+    constructor(provider) {
         this.provider = provider;
-        this.callbacks = callbacks;
     }
     get activeChunk() {
         return this._loadedChunks[this._activeChunkIndex] ?? null;
@@ -34,12 +33,10 @@ export class PlayerChunksManager {
         return itemsBeforeActiveChunk + this.activeChunk.activeChunkItem.indexWithinChunk;
     }
     initialize = async () => {
-        const { onInitializationFinished, onEndReached } = this.callbacks;
         const handleInitialized = async () => {
             const startIndex = Math.min(FIXED_START_INDEX, this._loadedChunks.length - 1);
             const populateChunkResult = await this.populateChunkAtIndex(startIndex, (currentIndex) => currentIndex + 1);
             if (!populateChunkResult) {
-                onEndReached();
                 return;
             }
             this.setActiveChunkIndex(populateChunkResult.closestReadyChunkIndex);
@@ -48,7 +45,6 @@ export class PlayerChunksManager {
                 this.provider.initialData.startItemIndex > 0) {
                 this.activeChunk.setActiveItemIndex(this.provider.initialData.startItemIndex);
             }
-            onInitializationFinished();
         };
         this._loadedChunks = this.provider.initialData.prefetchedChunks.map((chunk, chunkIndex) => new PlayerChunk({ chunk, chunkIndex, provider: { loadChunkItems: this.provider.loadChunkItems } }));
         const considerInitialized = this._loadedChunks.length !== 0;
@@ -84,10 +80,13 @@ export class PlayerChunksManager {
     };
     warmUp = async () => {
         // Early return if manager is sufficient or already loading
-        if (this._loadedChunks.length >= this._activeChunkIndex + CHUNKS_BUFFER_SIZE || this._isLoading) {
+        if (this._fetchDeferred) {
+            return this._fetchDeferred.promise;
+        }
+        if (this._loadedChunks.length >= this._activeChunkIndex + CHUNKS_BUFFER_SIZE) {
             return;
         }
-        this._isLoading = true;
+        this._fetchDeferred = new Deferred();
         try {
             const result = await this.provider.loadMoreChunks();
             this._loadedChunks = [
@@ -100,13 +99,14 @@ export class PlayerChunksManager {
             ];
         }
         finally {
-            this._isLoading = false;
+            this._fetchDeferred.resolve();
+            this._fetchDeferred = null;
         }
     };
     reset = () => {
         this._activeChunkIndex = -1;
         this._loadedChunks = [];
-        this._isLoading = false;
+        this._fetchDeferred = null;
         this.warmUp();
     };
     populateChunkAtIndex = async (index, nextIndexFn) => {

package/dist/ui/player/providers/default-chunks-player-buffer.svelte.d.ts

@@ -9,12 +9,11 @@ export declare class DefaultChunksPlayerBuffer<TItem extends WithId, TChunk exte
     readonly navigationDisabled: boolean;
     readonly animationDuration = 500;
     private _playerChunksManager;
-    constructor(provider: IChunksPlayerDataProvider<TItem, TChunk>, on?: {
-        preloaded?: (self: DefaultChunksPlayerBuffer<TItem, TChunk>) => void;
-    });
+    constructor(provider: IChunksPlayerDataProvider<TItem, TChunk>);
     get activeChunk(): import("./chunks-player-buffer").PlayerChunk<TItem, TChunk>;
     setActiveChunkItemIndex: (index: number) => void;
     loadNext: () => Promise<void>;
     loadPrevious: () => Promise<void>;
     reset: () => void;
+    ensureWarmedUp: () => Promise<void>;
 }

package/dist/ui/player/providers/default-chunks-player-buffer.svelte.js

@@ -10,14 +10,11 @@ export class DefaultChunksPlayerBuffer {
     navigationDisabled = $derived(!this.canLoadNext && !this.canLoadPrevious);
     animationDuration = 500;
     _playerChunksManager;
-    constructor(provider, on) {
+    constructor(provider) {
         // Throttle navigation methods
         this.loadNext = Utils.throttle(this.loadNext, this.animationDuration);
         this.loadPrevious = Utils.throttle(this.loadPrevious, this.animationDuration);
-        this._playerChunksManager = new PlayerChunksManager(provider, {
-            onInitializationFinished: () => on?.preloaded?.(this),
-            onEndReached: () => console.warn('end reached')
-        });
+        this._playerChunksManager = new PlayerChunksManager(provider);
         this._playerChunksManager.initialize();
     }
     get activeChunk() {
@@ -44,4 +41,7 @@ export class DefaultChunksPlayerBuffer {
     reset = () => {
         this._playerChunksManager.reset();
     };
+    ensureWarmedUp = async () => {
+        await this._playerChunksManager.warmUp();
+    };
 }

package/dist/ui/player/providers/default-feed-player-buffer.svelte.d.ts

@@ -15,13 +15,12 @@ export declare class DefaultFeedPlayerBuffer<T extends WithId> implements IFeedP
     private _currentIndex;
     private _loaded;
     private _loadMoreFn;
-    private _isLoading;
-    constructor(provider: IFeedPlayerDataProvider<T>, on?: {
-        preloaded?: (self: DefaultFeedPlayerBuffer<T>) => void;
-    });
+    private _fetchDeferred;
+    constructor(provider: IFeedPlayerDataProvider<T>);
     loadNext: () => Promise<void>;
     loadPrevious: () => Promise<void>;
     reset: () => void;
+    ensureWarmedUp: () => Promise<void>;
     private initializeBuffer;
     private warmUpBuffer;
 }