@streamscloud/embeddable 13.0.1 → 13.2.0

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

@@ -13,6 +13,7 @@ export declare class DefaultChunksPlayerBuffer<TItem extends WithId, TChunk exte
     constructor(provider: IChunksPlayerDataProvider<TItem, TChunk>);
     get activeChunk(): import("./chunks-player-buffer").PlayerChunk<TItem, TChunk>;
     setActiveChunkItemIndex: (index: number) => void;
+    tryActivateItemById: (id: string) => boolean;
     loadNext: () => Promise<void>;
     loadPrevious: () => Promise<void>;
     reset: () => void;

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

@@ -28,6 +28,9 @@ export class DefaultChunksPlayerBuffer {
         }
         this.activeChunk.setActiveItemIndex(index);
     };
+    tryActivateItemById = (id) => {
+        return this._playerChunksManager.tryActivateItemById(id);
+    };
     loadNext = async () => {
         if (!this.canLoadNext) {
             return;

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

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

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

@@ -23,6 +23,14 @@ export class DefaultFeedPlayerBuffer {
         this.loadPrevious = Utils.throttle(this.loadPrevious, this.animationDuration);
         this.initializeBuffer({ initialData: provider.initialData });
     }
+    tryActivateItemById = (id) => {
+        const itemIndex = this._loaded.findIndex((item) => item.id === id);
+        if (itemIndex === -1) {
+            return false;
+        }
+        this._currentIndex = itemIndex;
+        return true;
+    };
     loadNext = async () => {
         if (!this.canLoadNext) {
             return;

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

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

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

@@ -83,7 +83,7 @@ onMount(() => {
                 return;
             }
         }
-    });
+    }, { passive: false });
     slidesRef.addEventListener('touchend', (e) => {
         const touchEndX = e.changedTouches[0].screenX;
         const touchEndY = e.changedTouches[0].screenY;

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

@@ -77,6 +77,7 @@ const styles = $derived.by(() => {
   --sc-mc-color--text-brand: #144ab0;
   --sc-mc-color--text-inverted: #ffffff;
   --sc-mc-color--text-primary: #000000;
+  --sc-mc-color--text-primary-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(255, 255, 255, 0.1), 0 1px 6px rgba(255, 255, 255, 0.05);
   --sc-mc-color--text-secondary: #6b7280;
   --sc-mc-color--text-white: #ffffff;
   --sc-mc-color--text-white-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 6px rgba(0, 0, 0, 0.05);
@@ -109,6 +110,7 @@ const styles = $derived.by(() => {
   --sc-mc-color--text-brand: #5a8dec;
   --sc-mc-color--text-inverted: #ffffff;
   --sc-mc-color--text-primary: #ffffff;
+  --sc-mc-color--text-primary-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 6px rgba(0, 0, 0, 0.05);
   --sc-mc-color--text-secondary: #d1d5db;
   --sc-mc-color--text-white: #ffffff;
   --sc-mc-color--text-white-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 6px rgba(0, 0, 0, 0.05);

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

@@ -31,6 +31,7 @@
   --sc-mc-color--text-brand: #{colors.$color-primary-500};
   --sc-mc-color--text-inverted: #{colors.$color-white};
   --sc-mc-color--text-primary: #{colors.$color-black};
+  --sc-mc-color--text-primary-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(255, 255, 255, 0.1), 0 1px 6px rgba(255, 255, 255, 0.05);
   --sc-mc-color--text-secondary: #{colors.$color-neutral-500};
   --sc-mc-color--text-white: #{colors.$color-white};
   --sc-mc-color--text-white-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 6px rgba(0, 0, 0, 0.05);
@@ -67,6 +68,7 @@
   --sc-mc-color--text-brand: #{colors.$color-primary-400};
   --sc-mc-color--text-inverted: #{colors.$color-white};
   --sc-mc-color--text-primary: #{colors.$color-white};
+  --sc-mc-color--text-primary-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 6px rgba(0, 0, 0, 0.05);
   --sc-mc-color--text-secondary: #{colors.$color-neutral-300};
   --sc-mc-color--text-white: #{colors.$color-white};
   --sc-mc-color--text-white-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 6px rgba(0, 0, 0, 0.05);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@streamscloud/embeddable",
-  "version": "13.0.1",
+  "version": "13.2.0",
   "author": "StreamsCloud",
   "repository": {
     "type": "git",
@@ -129,12 +129,15 @@
     }
   },
   "peerDependencies": {
-    "@fluentui/svg-icons": "^1.1.292",
+    "@fluentui/svg-icons": "^1.1.301",
+    "@popperjs/core": "^2.11.8",
     "@streamscloud/streams-analytics-collector": "^2.0.9",
     "@urql/core": "^5.1.1",
+    "dequal": "^2.0.3",
     "dompurify": "^3.2.6",
     "mobile-detect": "^1.4.5",
-    "svelte": "^5.33.4"
+    "svelte": "^5.33.4",
+    "wheel-gestures": "^2.2.48"
   },
   "devDependencies": {
     "@eslint/compat": "^1.2.9",
@@ -149,11 +152,13 @@
     "@graphql-codegen/typescript": "^4.1.6",
     "@graphql-codegen/typescript-operations": "^4.6.1",
     "@graphql-typed-document-node/core": "^3.2.0",
+    "@popperjs/core": "^2.11.8",
     "@sveltejs/package": "^2.3.11",
     "@sveltejs/vite-plugin-svelte": "^5.0.3",
     "@tsconfig/svelte": "^5.0.4",
     "@urql/core": "^5.1.1",
     "autoprefixer": "^10.4.21",
+    "dequal": "^2.0.3",
     "eslint": "^9.27.0",
     "eslint-config-prettier": "^10.1.5",
     "eslint-formatter-codeframe": "^7.32.1",
@@ -176,10 +181,7 @@
     "typescript": "^5.8.3",
     "typescript-eslint": "^8.32.1",
     "vite": "^6.3.5",
-    "vite-tsconfig-paths": "^5.1.4"
-  },
-  "dependencies": {
-    "@popperjs/core": "^2.11.8",
+    "vite-tsconfig-paths": "^5.1.4",
     "wheel-gestures": "^2.2.48"
   }
 }

package/dist/media-center/media-center/feed/feed-handler.svelte.d.ts

@@ -1,52 +0,0 @@
-import type { IMediaCenterDataProvider } from '../..';
-import type { PostPlayerModel } from '../../../posts/posts-player';
-import type { IStreamsPlayerDataProvider } from '../../../streams/streams-player';
-import type { ICloseOrchestrator } from '../../../ui/player/close-orchestrator';
-import type { IPlayerDataProvider } from '../../../ui/player/providers';
-import { MediaCenterSettingsHandler } from '../handlers';
-import type { PlayerProps } from '../types';
-import type { PostsDataProviderFilter, StreamsDataProviderFilter } from './types';
-export declare class FeedHandler {
-    private _active;
-    private _providersGenerator;
-    private _feedPlayerProps;
-    private _dataProvider;
-    private _mediaCenterSettingsHandler;
-    private _closeOrchestrator;
-    private _onPlayerReachedEnd;
-    constructor(data: {
-        dataProvider: IMediaCenterDataProvider;
-        mediaCenterSettingsHandler: MediaCenterSettingsHandler;
-        closeOrchestrator: ICloseOrchestrator;
-        onPlayerReachedEnd: () => void;
-    });
-    get active(): boolean;
-    get feedPlayerProps(): PlayerProps | null;
-    deactivate: () => void;
-    activatePostsFeed: (options: {
-        dataProvider?: IPlayerDataProvider<PostPlayerModel>;
-        filter?: PostsDataProviderFilter;
-        onPostActivated?: (id: string) => void;
-    }) => Promise<void>;
-    activateStreamsFeed: (options: {
-        dataProvider?: IStreamsPlayerDataProvider;
-        filter?: StreamsDataProviderFilter;
-        onStreamActivated?: (data: {
-            title: string;
-            image: string | null;
-        }) => void;
-    }) => Promise<void>;
-    private makePostsPlayerProps;
-    private makeStreamsPlayerProps;
-}
-export type MakePostsPlayerPropsData = {
-    dataProvider: IPlayerDataProvider<PostPlayerModel>;
-    onPostActivated?: (id: string) => void;
-};
-export type MakeStreamsPlayerPropsData = {
-    dataProvider: IStreamsPlayerDataProvider;
-    onStreamActivated?: (data: {
-        title: string;
-        image: string | null;
-    }) => void;
-};

package/dist/media-center/media-center/feed/feed-handler.svelte.js

@@ -1,92 +0,0 @@
-import { StreamsPlayerBuffer } from '../../../streams/streams-player/streams-player-buffer.svelte';
-import { initBufferFromProvider } from '../../../ui/player/providers/service';
-import { MediaCenterSettingsHandler } from '../handlers';
-import { FeedProvidersGenerator } from './feed-providers-generator';
-export class FeedHandler {
-    _active = $state(false);
-    _providersGenerator;
-    _feedPlayerProps = $state.raw(null);
-    _dataProvider;
-    _mediaCenterSettingsHandler;
-    _closeOrchestrator;
-    _onPlayerReachedEnd;
-    constructor(data) {
-        const { dataProvider, mediaCenterSettingsHandler, closeOrchestrator, onPlayerReachedEnd } = data;
-        this._providersGenerator = new FeedProvidersGenerator(dataProvider);
-        this._mediaCenterSettingsHandler = mediaCenterSettingsHandler;
-        this._dataProvider = dataProvider;
-        this._closeOrchestrator = closeOrchestrator;
-        this._onPlayerReachedEnd = onPlayerReachedEnd;
-    }
-    get active() {
-        return this._active;
-    }
-    get feedPlayerProps() {
-        return this._feedPlayerProps;
-    }
-    deactivate = () => {
-        this._active = false;
-    };
-    activatePostsFeed = async (options) => {
-        const { dataProvider, filter, onPostActivated } = options;
-        if (dataProvider) {
-            if (!dataProvider.onEndReached) {
-                dataProvider.onEndReached = this._onPlayerReachedEnd;
-            }
-            this._feedPlayerProps = this.makePostsPlayerProps({ dataProvider, onPostActivated });
-        }
-        else {
-            const dataProvider = this._providersGenerator.makePostPlayerItemsProvider({ filter, onEndReached: this._onPlayerReachedEnd });
-            this._feedPlayerProps = this.makePostsPlayerProps({ dataProvider, onPostActivated });
-        }
-        this._active = true;
-    };
-    activateStreamsFeed = async (options) => {
-        const { dataProvider, filter, onStreamActivated } = options;
-        if (dataProvider) {
-            if (!dataProvider.onEndReached) {
-                dataProvider.onEndReached = this._onPlayerReachedEnd;
-            }
-            this._feedPlayerProps = this.makeStreamsPlayerProps({ dataProvider, onStreamActivated });
-        }
-        else {
-            const dataProvider = this._providersGenerator.makeStreamsPlayerDataProvider({ filter, onEndReached: this._onPlayerReachedEnd });
-            this._feedPlayerProps = this.makeStreamsPlayerProps({ dataProvider, onStreamActivated });
-        }
-        this._active = true;
-    };
-    makePostsPlayerProps = (data) => {
-        const { dataProvider, onPostActivated } = data;
-        return {
-            type: 'posts',
-            props: {
-                dataProvider: { type: 'buffer', buffer: initBufferFromProvider(dataProvider) },
-                socialInteractionsHandler: this._dataProvider.handlers?.socialInteractionsHandler,
-                analyticsHandler: this._dataProvider.handlers?.analyticsHandler,
-                playerSettings: this._mediaCenterSettingsHandler.playerSettings,
-                closeOrchestrator: this._closeOrchestrator,
-                on: {
-                    postActivated: onPostActivated,
-                    backgroundImageLoaded: this._mediaCenterSettingsHandler.backgroundImageLoadedHandler
-                }
-            }
-        };
-    };
-    makeStreamsPlayerProps = (data) => {
-        const { dataProvider, onStreamActivated } = data;
-        return {
-            type: 'streams',
-            props: {
-                dataProvider: { type: 'buffer', buffer: new StreamsPlayerBuffer(dataProvider) },
-                analyticsHandler: this._dataProvider.handlers?.analyticsHandler,
-                postSocialInteractionsHandler: this._dataProvider.handlers?.socialInteractionsHandler,
-                playerSettings: this._mediaCenterSettingsHandler.playerSettings,
-                closeOrchestrator: this._closeOrchestrator,
-                on: {
-                    streamActivated: onStreamActivated,
-                    backgroundImageLoaded: this._mediaCenterSettingsHandler.backgroundImageLoadedHandler
-                }
-            }
-        };
-    };
-}

package/dist/media-center/media-center/feed/feed-providers-generator.js

@@ -1,83 +0,0 @@
-import { ContinuationToken } from '../../../core/continuation-token';
-import { CursorDataLoader } from '../../../core/data-loaders';
-import { PostType } from '../../../core/enums';
-export class FeedProvidersGenerator {
-    dataProvider;
-    constructor(dataProvider) {
-        this.dataProvider = dataProvider;
-    }
-    makePostPlayerItemsProvider = (data) => {
-        const { filter, onEndReached } = data;
-        const { categoryId, prefetchedItems: initialPrefetchedItems = [], initialPostId } = filter || {};
-        const loader = new CursorDataLoader({
-            loadPage: async (continuationToken) => {
-                const result = await this.dataProvider.postsPlayer.getPostsCursor({
-                    filter: {
-                        types: [PostType.Article, PostType.Media, PostType.ShortVideo, PostType.Video],
-                        categoryId,
-                        excludeIds: initialPrefetchedItems.length ? initialPrefetchedItems.map((i) => i.id) : undefined
-                    },
-                    continuationToken: continuationToken.toNextChunkString(),
-                    limit: 20
-                });
-                const items = result.items;
-                return {
-                    items: items,
-                    continuationToken: ContinuationToken.fromPayload(result.continuationToken)
-                };
-            }
-        });
-        let prefetchedItems = initialPrefetchedItems;
-        if (initialPostId) {
-            const targetPost = prefetchedItems.find((p) => p.id === initialPostId);
-            if (targetPost) {
-                prefetchedItems = [targetPost, ...prefetchedItems.filter((p) => p.id !== initialPostId)];
-            }
-        }
-        return {
-            kind: 'feed',
-            initialData: {
-                prefetchedItems,
-                startIndex: prefetchedItems.length ? 0 : -1
-            },
-            loadMore: loader.loadMore,
-            onEndReached
-        };
-    };
-    makeStreamsPlayerDataProvider = (data) => {
-        const { filter, onEndReached } = data;
-        const { categoryId, prefetchedStreams: initialPrefetchedStreams = [], initialStreamId } = filter || {};
-        const loader = new CursorDataLoader({
-            loadPage: async (continuationToken) => {
-                const result = await this.dataProvider.streamPlayer.getStreamsCursor({
-                    filter: {
-                        categoryId,
-                        excludeIds: initialPrefetchedStreams.length ? initialPrefetchedStreams.map((i) => i.id) : undefined
-                    },
-                    continuationToken: continuationToken.toNextChunkString(),
-                    limit: 20
-                });
-                const items = result.items;
-                return {
-                    items: items,
-                    continuationToken: ContinuationToken.fromPayload(result.continuationToken)
-                };
-            }
-        });
-        let prefetchedStreams = initialPrefetchedStreams;
-        if (initialStreamId) {
-            const targetStream = prefetchedStreams.find((stream) => stream.id === initialStreamId);
-            if (targetStream) {
-                prefetchedStreams = [targetStream, ...prefetchedStreams.filter((stream) => stream.id !== initialStreamId)];
-            }
-        }
-        return {
-            initialData: {
-                prefetchedStreams
-            },
-            loadMoreStreams: loader.loadMore,
-            getStreamPages: this.dataProvider.streamPlayer.getStreamPages,
-            onEndReached
-        };
-    };
-}

package/dist/media-center/media-center/feed/index.d.ts

@@ -1 +0,0 @@
-export { FeedHandler } from './feed-handler.svelte';

package/dist/media-center/media-center/feed/index.js

@@ -1 +0,0 @@
-export { FeedHandler } from './feed-handler.svelte';

package/dist/media-center/media-center/feed/types.d.ts

@@ -1,12 +0,0 @@
-import type { PostPlayerModel } from '../../../posts/posts-player/types';
-import type { StreamPlayerModel } from '../../../streams/streams-player/types';
-export type PostsDataProviderFilter = {
-    categoryId?: string;
-    prefetchedItems?: PostPlayerModel[];
-    initialPostId?: string;
-};
-export type StreamsDataProviderFilter = {
-    categoryId?: string;
-    prefetchedStreams?: StreamPlayerModel[];
-    initialStreamId?: string;
-};