@streamscloud/embeddable 13.3.0 → 14.0.0

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

@@ -6,7 +6,6 @@ export class PlayerChunk {
     model;
     items = $derived.by(() => this._chunkItems.map((i) => i.model));
     chunkItems = $derived.by(() => this._chunkItems);
-    chunkIndex;
     activeChunkItem = $derived.by(() => this._chunkItems[this._activeItemIndex] ?? null);
     isEmpty = $derived.by(() => this.isFullyLoaded && this._chunkItems.length === 0);
     isFullyLoaded = $state(false);
@@ -15,9 +14,8 @@ export class PlayerChunk {
     _isLoading = $state(false);
     _itemsLoader;
     constructor(data) {
-        const { chunk, provider, chunkIndex, callbacks } = data;
+        const { chunk, provider, callbacks } = data;
         this.model = chunk;
-        this.chunkIndex = chunkIndex;
         this._itemsLoader = new CursorDataLoader({
             loadPage: async (continuationToken) => {
                 if (this.isFullyLoaded) {
@@ -27,9 +25,8 @@ export class PlayerChunk {
                 const newItems = result.items;
                 this._chunkItems = [
                     ...this._chunkItems,
-                    ...newItems.map((item, index) => new PlayerChunkItem({
+                    ...newItems.map((item) => new PlayerChunkItem({
                         model: item,
-                        indexWithinChunk: this._chunkItems.length + index,
                         chunkId: this.model.id
                     }))
                 ];
@@ -45,6 +42,12 @@ export class PlayerChunk {
             }
         });
     }
+    get isLoading() {
+        return this._isLoading;
+    }
+    get activeItemIndex() {
+        return this._activeItemIndex;
+    }
     loadMore = () => this._itemsLoader.loadMore();
     setActiveItemIndex = async (index, warmUp = true) => {
         this._activeItemIndex = index;
@@ -52,6 +55,9 @@ export class PlayerChunk {
             await this.warmUp();
         }
     };
+    mutateChunkItems = (items) => {
+        this._chunkItems = items;
+    };
     warmUp = async () => {
         if (this._chunkItems.length >= this._activeItemIndex + CHUNK_ITEMS_BUFFER_SIZE || this._isLoading) {
             return;

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

@@ -8,9 +8,12 @@ export declare class PlayerChunksManager<TItem extends WithId, TChunk extends Wi
     constructor(provider: IChunksPlayerDataProvider<TItem, TChunk>);
     get activeChunk(): PlayerChunk<TItem, TChunk>;
     get loadedChunks(): PlayerChunk<TItem, TChunk>[];
+    get isLoading(): boolean;
     get flattenedChunkItems(): TItem[];
     get flattenedActiveChunkItemIndex(): number;
     tryActivateItemById: (id: string) => boolean;
+    removeItemById: (id: string) => boolean;
+    removeChunkById: (id: string) => boolean | undefined;
     initialize: () => Promise<void>;
     setActiveChunkIndex: (index: number) => Promise<void>;
     activateItemAtFlattenedIndex: (index: number) => Promise<void>;

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

@@ -16,6 +16,9 @@ export class PlayerChunksManager {
     get loadedChunks() {
         return this._loadedChunks;
     }
+    get isLoading() {
+        return this._fetchDeferred !== null || this._loadedChunks.some((c) => c.isLoading);
+    }
     get flattenedChunkItems() {
         return this._loadedChunks.reduce((acc, chunk) => {
             acc.push(...chunk.items);
@@ -27,21 +30,85 @@ export class PlayerChunksManager {
             return -1;
         }
         let itemsBeforeActiveChunk = 0;
-        for (let i = 0; i < this.activeChunk.chunkIndex; i++) {
+        for (let i = 0; i < this._activeChunkIndex; i++) {
             itemsBeforeActiveChunk += this._loadedChunks[i].items.length;
         }
-        return itemsBeforeActiveChunk + this.activeChunk.activeChunkItem.indexWithinChunk;
+        return itemsBeforeActiveChunk + this.activeChunk.activeItemIndex;
     }
     tryActivateItemById = (id) => {
-        const chunkWithItem = this._loadedChunks.find((chunk) => chunk.items.some((item) => item.id === id));
+        const chunkWithItemIndex = this._loadedChunks.findIndex((chunk) => chunk.items.some((item) => item.id === id));
+        const chunkWithItem = this._loadedChunks[chunkWithItemIndex];
         if (!chunkWithItem) {
             return false;
         }
         const itemIndex = chunkWithItem.items.findIndex((item) => item.id === id);
-        this.setActiveChunkIndex(chunkWithItem.chunkIndex);
+        this.setActiveChunkIndex(chunkWithItemIndex);
         this.activeChunk.setActiveItemIndex(itemIndex);
         return true;
     };
+    removeItemById = (id) => {
+        const itemIndex = this.flattenedChunkItems.findIndex((item) => item.id === id);
+        if (itemIndex === -1) {
+            return false;
+        }
+        const currentItem = this.flattenedChunkItems[this.flattenedActiveChunkItemIndex];
+        // Find next item to activate BEFORE removing (if removing current item)
+        let nextItemId = currentItem?.id;
+        if (this.flattenedActiveChunkItemIndex === itemIndex) {
+            // Try next item
+            if (itemIndex + 1 < this.flattenedChunkItems.length) {
+                nextItemId = this.flattenedChunkItems[itemIndex + 1].id;
+            }
+            // Try previous item
+            else if (itemIndex > 0) {
+                nextItemId = this.flattenedChunkItems[itemIndex - 1].id;
+            }
+            else {
+                // No items left
+                nextItemId = null;
+            }
+        }
+        // Remove item from chunks
+        this._loadedChunks.forEach((chunk) => {
+            if (chunk.chunkItems.some((i) => i.model.id === id)) {
+                chunk.mutateChunkItems(chunk.chunkItems.filter((i) => i.model.id !== id));
+            }
+        });
+        if (nextItemId) {
+            this.tryActivateItemById(nextItemId);
+        }
+        else {
+            this._activeChunkIndex = -1;
+        }
+        return true;
+    };
+    removeChunkById = (id) => {
+        const chunkIndex = this._loadedChunks.findIndex((chunk) => chunk.model.id === id);
+        if (chunkIndex === -1) {
+            return false;
+        }
+        const isActiveChunk = this._activeChunkIndex === chunkIndex;
+        let newActiveChunkIndex = this._activeChunkIndex;
+        this._loadedChunks.splice(chunkIndex, 1);
+        if (this._loadedChunks.length === 0) {
+            this._activeChunkIndex = -1;
+            this.provider.onEndReached?.();
+            return;
+        }
+        if (isActiveChunk) {
+            if (chunkIndex < this._loadedChunks.length) {
+                newActiveChunkIndex = chunkIndex;
+            }
+            else {
+                newActiveChunkIndex = this._loadedChunks.length - 1;
+            }
+        }
+        else if (this._activeChunkIndex > chunkIndex) {
+            newActiveChunkIndex--;
+        }
+        this.setActiveChunkIndex(newActiveChunkIndex);
+        return true;
+    };
     initialize = async () => {
         const handleInitialized = async () => {
             const startIndex = Math.min(FIXED_START_INDEX, this._loadedChunks.length - 1);
@@ -56,7 +123,7 @@ export class PlayerChunksManager {
                 this.activeChunk.setActiveItemIndex(this.provider.initialData.startItemIndex);
             }
         };
-        this._loadedChunks = this.provider.initialData.prefetchedChunks.map((chunk, chunkIndex) => new PlayerChunk({ chunk, chunkIndex, provider: { loadChunkItems: this.provider.loadChunkItems } }));
+        this._loadedChunks = this.provider.initialData.prefetchedChunks.map((chunk) => new PlayerChunk({ chunk, provider: { loadChunkItems: this.provider.loadChunkItems } }));
         const considerInitialized = this._loadedChunks.length !== 0;
         if (considerInitialized) {
             handleInitialized();
@@ -85,7 +152,7 @@ export class PlayerChunksManager {
             this.activeChunk.warmUp();
         }
         else {
-            this.activeChunk.setActiveItemIndex(nextItem.indexWithinChunk);
+            this.activeChunk.setActiveItemIndex(this.activeChunk.chunkItems.indexOf(nextItem));
         }
     };
     warmUp = async () => {
@@ -101,9 +168,8 @@ export class PlayerChunksManager {
             const result = await this.provider.loadMoreChunks();
             this._loadedChunks = [
                 ...this._loadedChunks,
-                ...result.map((chunk, index) => new PlayerChunk({
+                ...result.map((chunk) => new PlayerChunk({
                     chunk,
-                    chunkIndex: this._loadedChunks.length + index,
                     provider: { loadChunkItems: this.provider.loadChunkItems }
                 }))
             ];

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

@@ -14,6 +14,8 @@ export declare class DefaultChunksPlayerBuffer<TItem extends WithId, TChunk exte
     get activeChunk(): import("./chunks-player-buffer").PlayerChunk<TItem, TChunk>;
     setActiveChunkItemIndex: (index: number) => void;
     tryActivateItemById: (id: string) => boolean;
+    removeChunkById: (id: string) => boolean | undefined;
+    removeItemById: (id: string) => boolean;
     loadNext: () => Promise<void>;
     loadPrevious: () => Promise<void>;
     reset: () => void;

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

@@ -5,7 +5,12 @@ export class DefaultChunksPlayerBuffer {
     loaded = $derived.by(() => this._playerChunksManager.flattenedChunkItems);
     currentIndex = $derived.by(() => this._playerChunksManager.flattenedActiveChunkItemIndex);
     current = $derived(this.currentIndex >= 0 ? this.loaded[this.currentIndex] : null);
-    canLoadNext = $derived.by(() => this.currentIndex < this.loaded.length - 1 || !!this._onEndReachedFn);
+    canLoadNext = $derived.by(() => {
+        if (this.loaded.length && this.currentIndex < this.loaded.length - 1) {
+            return true;
+        }
+        return !this._playerChunksManager.isLoading && !!this._onEndReachedFn;
+    });
     canLoadPrevious = $derived(this.currentIndex > 0);
     navigationDisabled = $derived(!this.canLoadNext && !this.canLoadPrevious);
     animationDuration = 500;
@@ -31,15 +36,21 @@ export class DefaultChunksPlayerBuffer {
     tryActivateItemById = (id) => {
         return this._playerChunksManager.tryActivateItemById(id);
     };
+    removeChunkById = (id) => {
+        return this._playerChunksManager.removeChunkById(id);
+    };
+    removeItemById = (id) => {
+        return this._playerChunksManager.removeItemById(id);
+    };
     loadNext = async () => {
         if (!this.canLoadNext) {
             return;
         }
-        if (this.currentIndex >= this.loaded.length - 1) {
-            this._onEndReachedFn?.();
+        if (this.currentIndex < this.loaded.length - 1) {
+            this._playerChunksManager.activateItemAtFlattenedIndex(this.currentIndex + 1);
             return;
         }
-        this._playerChunksManager.activateItemAtFlattenedIndex(this.currentIndex + 1);
+        this._onEndReachedFn?.();
     };
     loadPrevious = async () => {
         if (!this.canLoadPrevious) {

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

@@ -19,6 +19,7 @@ export declare class DefaultFeedPlayerBuffer<T extends WithId> implements IFeedP
     private _onEndReachedFn;
     constructor(provider: IFeedPlayerDataProvider<T>);
     tryActivateItemById: (id: string) => boolean;
+    removeItemById: (id: string) => boolean;
     loadNext: () => Promise<void>;
     loadPrevious: () => Promise<void>;
     reset: () => void;

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

@@ -6,7 +6,12 @@ export class DefaultFeedPlayerBuffer {
     loaded = $derived.by(() => this._loaded);
     currentIndex = $derived.by(() => this._currentIndex);
     current = $derived(this.currentIndex >= 0 ? this.loaded[this.currentIndex] : null);
-    canLoadNext = $derived.by(() => this.currentIndex < this.loaded.length - 1 || !!this._onEndReachedFn);
+    canLoadNext = $derived.by(() => {
+        if (this.loaded.length && this.currentIndex < this.loaded.length - 1) {
+            return true;
+        }
+        return !this._fetchDeferred && !!this._onEndReachedFn;
+    });
     canLoadPrevious = $derived(this.currentIndex > 0);
     navigationDisabled = $derived(!this.canLoadNext && !this.canLoadPrevious);
     animationDuration = 500;
@@ -31,16 +36,33 @@ export class DefaultFeedPlayerBuffer {
         this._currentIndex = itemIndex;
         return true;
     };
+    removeItemById = (id) => {
+        const itemIndex = this._loaded.findIndex((item) => item.id === id);
+        if (itemIndex === -1) {
+            return false;
+        }
+        this._loaded = this._loaded.filter((item) => item.id !== id);
+        if (itemIndex < this._currentIndex) {
+            this._currentIndex--;
+        }
+        else if (itemIndex === this._currentIndex) {
+            if (this._currentIndex >= this._loaded.length) {
+                this._currentIndex = this._loaded.length - 1;
+            }
+            // Otherwise keep the same index (activates next item)
+        }
+        return true;
+    };
     loadNext = async () => {
         if (!this.canLoadNext) {
             return;
         }
-        if (this.currentIndex >= this.loaded.length - 1) {
-            this._onEndReachedFn?.();
+        if (this.currentIndex < this.loaded.length - 1) {
+            ++this._currentIndex;
+            await this.warmUpBuffer();
             return;
         }
-        ++this._currentIndex;
-        this.warmUpBuffer();
+        this._onEndReachedFn?.();
     };
     loadPrevious = async () => {
         if (!this.canLoadPrevious) {

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

@@ -37,6 +37,7 @@ export interface IPlayerBufferBase<T extends WithId> {
     reset: () => void;
     ensureWarmedUp: () => Promise<void>;
     tryActivateItemById: (id: string) => boolean;
+    removeItemById: (id: string) => void;
 }
 type TExtended<T> = T & {
     mediaIndex?: number;

package/dist/ui/shadow-dom/cmp.shadow-root.svelte

@@ -55,6 +55,7 @@ const styles = $derived.by(() => {
   /* Backgrounds */
   --sc-mc-color--bg-button: #ffffff;
   --sc-mc-color--bg-card: #ffffff;
+  --sc-mc-color--bg-card-action: #f9fafb;
   --sc-mc-color--bg-image: #d1d5db;
   --sc-mc-color--bg-panel: #ffffff;
   --sc-mc-color--bg-screen: #f9fafb;
@@ -88,6 +89,7 @@ const styles = $derived.by(() => {
   /* Backgrounds */
   --sc-mc-color--bg-button: #111827;
   --sc-mc-color--bg-card: #000000;
+  --sc-mc-color--bg-card-action: #111827;
   --sc-mc-color--bg-image: #374151;
   --sc-mc-color--bg-panel: #000000;
   --sc-mc-color--bg-screen: #1e1e1e;
@@ -117,14 +119,17 @@ const styles = $derived.by(() => {
   --sc-mc-color--text-inactive: #d1d5db;
 }
 
-.shadow-root {
-  --_shadow-root--background-color: rgb(from var(--shadow-root--background, var(--sc-mc-color--bg-screen)) r g b);
-  --_shadow-root--shield-color: rgb(from var(--shadow-root--background, rgb(from var(--sc-mc-color--bg-screen) r g b / 50%)) r g b / alpha);
-  --_shadow-root--background-image-url: var(--shadow-root--background-image-url);
+:host {
   font-family: "Inter", sans-serif;
   font-size: 16px;
   font-weight: normal;
   color: var(--sc-mc-color--text-primary);
+}
+
+.shadow-root {
+  --_shadow-root--background-color: rgb(from var(--shadow-root--background, var(--sc-mc-color--bg-screen)) r g b);
+  --_shadow-root--shield-color: rgb(from var(--shadow-root--background, rgb(from var(--sc-mc-color--bg-screen) r g b / 50%)) r g b / alpha);
+  --_shadow-root--background-image-url: var(--shadow-root--background-image-url);
   width: 100%;
   min-width: 100%;
   max-width: 100%;

package/dist/ui/shadow-dom/colors.scss

@@ -5,6 +5,7 @@
   /* Backgrounds */
   --sc-mc-color--bg-button: #{colors.$color-white};
   --sc-mc-color--bg-card: #{colors.$color-white};
+  --sc-mc-color--bg-card-action: #{colors.$color-neutral-50};
   --sc-mc-color--bg-image: #{colors.$color-neutral-300};
   --sc-mc-color--bg-panel: #{colors.$color-white};
   --sc-mc-color--bg-screen: #{colors.$color-neutral-50};
@@ -42,6 +43,7 @@
   /* Backgrounds */
   --sc-mc-color--bg-button: #{colors.$color-neutral-900};
   --sc-mc-color--bg-card: #{colors.$color-black};
+  --sc-mc-color--bg-card-action: #{colors.$color-neutral-900};
   --sc-mc-color--bg-image: #{colors.$color-neutral-700};
   --sc-mc-color--bg-panel: #{colors.$color-black};
   --sc-mc-color--bg-screen: #{colors.$color-dark-800};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@streamscloud/embeddable",
-  "version": "13.3.0",
+  "version": "14.0.0",
   "author": "StreamsCloud",
   "repository": {
     "type": "git",
@@ -57,6 +57,10 @@
       "types": "./dist/posts/post-viewer/index.d.ts",
       "svelte": "./dist/posts/post-viewer/index.js"
     },
+    "./streams": {
+      "types": "./dist/streams/index.d.ts",
+      "svelte": "./dist/streams/index.js"
+    },
     "./streams-player": {
       "types": "./dist/streams/streams-player/index.d.ts",
       "svelte": "./dist/streams/streams-player/index.js"
@@ -180,7 +184,7 @@
     "svelte-preprocess": "^6.0.3",
     "typescript": "^5.8.3",
     "typescript-eslint": "^8.32.1",
-    "vite": "^6.3.5",
+    "vite": "^6.4.1",
     "vite-tsconfig-paths": "^5.1.4",
     "wheel-gestures": "^2.2.48"
   }

package/dist/content-player/content-player-config.svelte.d.ts

@@ -1,51 +0,0 @@
-import { type IPostModel, PostModel } from '../posts/model';
-import type { IPostSocialInteractionsHandler } from '../posts/social-interactions';
-import type { ICloseOrchestrator } from '../ui/player/close-orchestrator';
-import type { IPlayerBuffer } from '../ui/player/providers';
-import type { PlayerSliderCallbacks } from '../ui/player/slider/types';
-import { ContentPlayerSettings } from './content-player-settings.svelte';
-import { ContentPlayerUIManager } from './ui-manager.svelte';
-export declare class ContentPlayerConfig<T extends {
-    id: string;
-}> {
-    playerBuffer: IPlayerBuffer<T> | null;
-    readonly settings: ContentPlayerSettings;
-    readonly callbacks: ContentPlayerCallbacks | null;
-    readonly playerSliderCallbacks: PlayerSliderCallbacks | undefined;
-    readonly socialInteractionsHandler: IPostSocialInteractionsHandler | undefined;
-    readonly closeOrchestrator: ICloseOrchestrator;
-    readonly uiManager: ContentPlayerUIManager;
-    private _trackingParams;
-    private _mappers;
-    private mappedPostsCache;
-    constructor(init: {
-        playerBuffer: IPlayerBuffer<T> | null;
-        mappers: ContentPlayerMappers<T>;
-        socialInteractionsHandler?: IPostSocialInteractionsHandler;
-        settings?: ContentPlayerSettings;
-        callbacks?: ContentPlayerCallbacks;
-        playerSliderCallbacks?: PlayerSliderCallbacks;
-        trackingParams?: ContentPlayerTrackingParams | null;
-        closeOrchestrator: ICloseOrchestrator;
-    });
-    get playerColors(): import("../ui/player/colors").PlayerColors;
-    get trackingParams(): ContentPlayerConfig<T>['_trackingParams'];
-    itemAsPostViewerModel: (item: T & {
-        mediaIndex?: number;
-    }) => PostModel | null;
-    updateTrackingParams: (data: ContentPlayerTrackingParams | null) => void;
-}
-export type ContentPlayerMappers<T> = {
-    postModelFromCurrentItem: (item: T) => IPostModel | null;
-};
-export type ContentPlayerCallbacks = {
-    videoProgress?: (playerItemId: string, postId: string, progress: number) => void;
-    productClick?: (productId: string, postId: string) => void;
-    productImpression?: (productId: string, postId: string) => void;
-    adClick?: (adId: string, postId: string) => void;
-    adImpression?: (adId: string, postId: string) => void;
-};
-export type ContentPlayerTrackingParams = {
-    streamId?: string;
-    campaignId?: string;
-} | false;

package/dist/content-player/content-player-config.svelte.js

@@ -1,48 +0,0 @@
-import { PostModel } from '../posts/model';
-import { ContentPlayerSettings } from './content-player-settings.svelte';
-import { ContentPlayerUIManager } from './ui-manager.svelte';
-export class ContentPlayerConfig {
-    playerBuffer = $state.raw(null);
-    settings;
-    callbacks;
-    playerSliderCallbacks;
-    socialInteractionsHandler;
-    closeOrchestrator;
-    uiManager = new ContentPlayerUIManager();
-    _trackingParams = $state.raw(null);
-    _mappers;
-    mappedPostsCache = new Map();
-    constructor(init) {
-        const { playerBuffer, trackingParams, mappers, socialInteractionsHandler, settings, callbacks, playerSliderCallbacks, closeOrchestrator } = init;
-        this.playerBuffer = playerBuffer;
-        this._trackingParams = trackingParams ?? null;
-        this.settings = settings || new ContentPlayerSettings();
-        this.callbacks = callbacks || null;
-        this.playerSliderCallbacks = playerSliderCallbacks;
-        this.socialInteractionsHandler = socialInteractionsHandler;
-        this.closeOrchestrator = closeOrchestrator;
-        this._mappers = mappers;
-    }
-    get playerColors() {
-        return this.settings.playerColors;
-    }
-    get trackingParams() {
-        return this._trackingParams;
-    }
-    itemAsPostViewerModel = (item) => {
-        if (this.mappedPostsCache.has(item.id)) {
-            return this.mappedPostsCache.get(item.id) || null;
-        }
-        const post = this._mappers.postModelFromCurrentItem(item);
-        if (!post) {
-            this.mappedPostsCache.set(item.id, null);
-            return null;
-        }
-        const postModel = new PostModel(post);
-        this.mappedPostsCache.set(item.id, postModel);
-        return postModel;
-    };
-    updateTrackingParams = (data) => {
-        this._trackingParams = data ?? null;
-    };
-}

package/dist/posts/controls/cmp.controls.svelte

@@ -1,120 +0,0 @@
-<script lang="ts">var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-import { IconColor } from '../../ui/icon';
-import { MediaVolumeManager } from '../../ui/media-playback';
-import { MobilePlayerButtonsGroup, PlayerButton, PlayerButtonsGroup } from '../../ui/player/button';
-import IconHeartFilled from '@fluentui/svg-icons/icons/heart_32_filled.svg?raw';
-import IconHeart from '@fluentui/svg-icons/icons/heart_32_regular.svg?raw';
-import IconShare from '@fluentui/svg-icons/icons/share_48_regular.svg?raw';
-import IconShoppingBag from '@fluentui/svg-icons/icons/shopping_bag_32_regular.svg?raw';
-import IconSpeaker2 from '@fluentui/svg-icons/icons/speaker_2_32_regular.svg?raw';
-import IconSpeakerMute from '@fluentui/svg-icons/icons/speaker_mute_32_regular.svg?raw';
-let { model, activeColor, inactiveColor, socialInteractionsHandler, extraActions, on } = $props();
-const showSocialInteractions = $derived(!!socialInteractionsHandler && model.enableSocialInteractions);
-let isLikedStore = $state.raw({
-    get isLiked() {
-        return false;
-    }
-});
-const actions = $derived.by(() => {
-    const result = [];
-    if (model.attachments) {
-        result.push({ icon: IconShoppingBag, callback: onAttachmentsClicked });
-    }
-    if (showSocialInteractions) {
-        result.push({
-            icon: isLikedStore.isLiked ? IconHeartFilled : IconHeart,
-            iconColor: isLikedStore.isLiked ? IconColor.Red : undefined,
-            callback: onLikeClicked
-        });
-        result.push({ icon: IconShare, callback: onShareClicked });
-    }
-    if (model.media && !model.media.currentItem.isImage) {
-        result.push({ icon: MediaVolumeManager.isMuted ? IconSpeakerMute : IconSpeaker2, callback: onMuteClicked });
-    }
-    if (extraActions === null || extraActions === void 0 ? void 0 : extraActions.length) {
-        result.push(...extraActions);
-    }
-    return result;
-});
-$effect(() => {
-    refreshIsLiked();
-});
-const onAttachmentsClicked = () => {
-    var _a;
-    (_a = on === null || on === void 0 ? void 0 : on.attachmentsClicked) === null || _a === void 0 ? void 0 : _a.call(on);
-};
-const onMuteClicked = () => {
-    MediaVolumeManager.isMuted = !MediaVolumeManager.isMuted;
-};
-const onLikeClicked = () => __awaiter(void 0, void 0, void 0, function* () {
-    if (!socialInteractionsHandler) {
-        return;
-    }
-    yield socialInteractionsHandler.toggleLike(model.id);
-});
-const onShareClicked = () => __awaiter(void 0, void 0, void 0, function* () {
-    if (!socialInteractionsHandler) {
-        return;
-    }
-    yield socialInteractionsHandler.share(model.id);
-});
-const refreshIsLiked = () => __awaiter(void 0, void 0, void 0, function* () {
-    if (!socialInteractionsHandler) {
-        return;
-    }
-    isLikedStore = yield socialInteractionsHandler.getIsLiked(model.id);
-});
-</script>
-
-<div class="desktop-controls">
-  {#if actions.length > 0}
-    {#if actions.length === 1}
-      <PlayerButton scaleEffect={true} activeColor={activeColor} inactiveColor={inactiveColor} icon={actions[0].icon} on={{ click: actions[0].callback }} />
-    {:else}
-      <PlayerButtonsGroup scaleEffect={true} activeColor={activeColor} backgroundColor={inactiveColor} actions={actions} />
-    {/if}
-  {/if}
-</div>
-
-<div class="mobile-controls">
-  <MobilePlayerButtonsGroup actions={actions} />
-</div>
-
-<style>@keyframes fadeIn {
-  0% {
-    opacity: 1;
-  }
-  50% {
-    opacity: 0.4;
-  }
-  100% {
-    opacity: 1;
-  }
-}
-.desktop-controls {
-  display: block;
-  /* Set 'container-type: inline-size;' to reference container*/
-}
-@container (width < 576px) {
-  .desktop-controls {
-    display: none;
-  }
-}
-
-.mobile-controls {
-  display: none;
-  /* Set 'container-type: inline-size;' to reference container*/
-}
-@container (width < 576px) {
-  .mobile-controls {
-    display: block;
-  }
-}</style>

package/dist/posts/controls/cmp.controls.svelte.d.ts

@@ -1,16 +0,0 @@
-import type { PostModel } from '../model';
-import type { IPostSocialInteractionsHandler } from '../social-interactions';
-import { type PlayerButtonDef } from '../../ui/player/button';
-type Props = {
-    model: PostModel;
-    activeColor: string | null;
-    inactiveColor: string | null;
-    socialInteractionsHandler?: IPostSocialInteractionsHandler;
-    extraActions?: PlayerButtonDef[];
-    on?: {
-        attachmentsClicked?: () => void;
-    };
-};
-declare const Cmp: import("svelte").Component<Props, {}, "">;
-type Cmp = ReturnType<typeof Cmp>;
-export default Cmp;