@streamscloud/embeddable 5.1.3 → 6.0.0

package/dist/short-videos/short-videos-player/index.d.ts

@@ -1,70 +1,100 @@
+import { type IMediaCenterDataProvider } from '../../media-center/data-provider';
+import type { ShortVideoViewerModel } from '../short-video-viewer';
+import type { IPlayerItemsProvider } from '../../ui/player';
 import { default as ShortVideosPlayer } from './cmp.short-videos-player.svelte';
 import type { IShortVideosPlayerLocalization } from './short-videos-player-localization';
-import { type OpenShortVideosPlayerInit } from './types';
+import { type PlayerSettings } from './types';
 export { ShortVideosPlayer };
-export type { IShortVideosPlayerLocalization };
+export type { IShortVideosPlayerLocalization, IMediaCenterDataProvider, IPlayerItemsProvider };
 /**
- * Opens the short videos player modal with the specified provider or by fetching videos by IDs.
+ * Opens the short videos player modal.
  *
- * You can use either a ready-made provider, or simply pass a list of video IDs and a GraphQL endpoint to fetch them.
+ * Two overloads (mutually exclusive):
+ * - Provider mode: openShortVideosPlayer({ shortVideosProvider, mediaCenterDataProvider?, ...common })
+ * - IDs mode: openShortVideosPlayer({ ids, initiator, graphqlOrigin?, initialId?, mediaPageId?, ...common })
  *
- * @param init - Configuration options.
+ * @param init Configuration options.
  *
- * @param {PlayerItemsProvider<ShortVideoViewerModel>} [init.shortVideosProvider]
- *   The provider instance supplying short video items to the player.
- *   **Use this if you already have your own provider implementation.**
- *
- * @param {string[]} [init.ids]
- *   List of short video IDs to display in the player.
- *   **Use this if you want the player to fetch and show specific videos.**
- *
- * @param {string} [init.graphqlUrl]
- *   The GraphQL endpoint to use when fetching videos by IDs.
- *   **Required if you use `ids`.**
+ * Provider mode (overload 1)
+ * @param {IPlayerItemsProvider<ShortVideoViewerModel>} init.shortVideosProvider
+ *   Provider that supplies short-video items to the player.
+ * @param {IMediaCenterDataProvider} [init.mediaCenterDataProvider]
+ *   Optional media-center data provider.
  *
+ * IDs mode (overload 2)
+ * @param {string[]} init.ids
+ *   List of short-video IDs to display.
+ * @param {string} init.initiator
+ *   Identifier of the initiator (used for tracking/analytics and GraphQL).
+ * @param {string} [init.graphqlOrigin]
+ *   Optional GraphQL origin (base URL). If omitted, the default origin is determined internally.
  * @param {string} [init.initialId]
- *   The ID of the video that should be shown first.
- *   **Optional. Only used when using `ids`.**
+ *   ID of the video to open first (optional).
+ * @param {string} [init.mediaPageId]
+ *   Optional media page ID used to construct an internal media-center data provider.
  *
- * @param {IShortVideosPlayerLocalization} [init.localization]
- *   Optional localization settings for the player UI.
+ * Common settings
+ * @param {IPostSocialInteractionsHandler} [init.socialInteractionsHandler]
+ *   Handler for social interactions (like, share, etc.).
+ * @param {IShortVideosPlayerLocalization | Locale} [init.localization]
+ *   Localization for the player UI. If omitted, 'en' is used.
+ * @param {boolean} [init.disableBackground]
+ *   If true, hides the player's background image.
+ * @param {boolean} [init.showStreamsCloudWatermark]
+ *   If true, shows the StreamsCloud watermark.
  *
- * @param {object} [init.on]
+ * Events
+ * @param {{ playerClosed?: () => void; videoActivated?: (id: string) => void }} [init.on]
  *   Optional event handlers.
  * @param {() => void} [init.on.playerClosed]
- *   Called when the player is closed.
+ *   Called after the player is fully closed (after unmount and removal from the DOM).
+ * @param {(id: string) => void} [init.on.videoActivated]
+ *   Called when a video becomes active (receives the video's id).
  *
- * @example <caption>Using a custom provider</caption>
+ * @returns {void}
+ *
+ * @example <caption>Provider mode</caption>
  * ```ts
  * import { openShortVideosPlayer } from '@streamscloud/embeddable/short-videos-player';
  *
  * openShortVideosPlayer({
  *   shortVideosProvider: myShortVideosProvider,
- *   localization: {
- *     next: 'Next',
- *     previous: 'Previous'
+ *   mediaCenterDataProvider: myMediaCenterDataProvider,
+ *   localization: { next: 'Next', previous: 'Previous' },
+ *   showStreamsCloudWatermark: true,
+ *   on: {
+ *     playerClosed: () => console.log('Player closed'),
+ *     videoActivated: (id) => console.log('Activated', id)
  *   }
  * });
  * ```
  *
- * @example <caption>Using a list of IDs</caption>
+ * @example <caption>IDs mode</caption>
  * ```ts
  * import { openShortVideosPlayer } from '@streamscloud/embeddable/short-videos-player';
  *
  * openShortVideosPlayer({
  *   ids: ['id1', 'id2', 'id3'],
- *   graphqlOrigin: 'https://api.example.com',
+ *   initiator: 'marketing-campaign',
+ *   graphqlOrigin: 'https://graphql.example.com',
  *   initialId: 'id2',
- *   localization: {
- *     next: 'Next',
- *     previous: 'Previous'
- *   },
+ *   mediaPageId: 'media-page-123',
+ *   localization: { next: 'Next', previous: 'Previous' },
  *   on: {
- *     playerClosed: () => {
- *       console.log('Player was closed');
- *     }
+ *     playerClosed: () => console.log('Player closed'),
+ *     videoActivated: (id) => console.log('Activated', id)
  *   }
  * });
  * ```
  */
-export declare const openShortVideosPlayer: (init: OpenShortVideosPlayerInit) => Promise<void>;
+export declare function openShortVideosPlayer(init: PlayerSettings & {
+    shortVideosProvider: IPlayerItemsProvider<ShortVideoViewerModel>;
+    mediaCenterDataProvider?: IMediaCenterDataProvider;
+}): void;
+export declare function openShortVideosPlayer(init: PlayerSettings & {
+    ids: string[];
+    initiator: string;
+    graphqlOrigin?: string;
+    initialId?: string;
+    mediaPageId?: string;
+}): void;

package/dist/short-videos/short-videos-player/index.js

@@ -1,120 +1,56 @@
-import { getLocale } from '../../core/locale';
+import { toastrWarning } from '../../core/toastr';
+import { InternalMediaCenterDataProvider } from '../../media-center/data-provider';
+import { MediaCenter, MediaCenterMode } from '../../media-center/media-center';
 import { ModalShadowHost } from '../../ui/shadow-dom';
 import { default as ShortVideosPlayer } from './cmp.short-videos-player.svelte';
-import { default as ShortVideosPlayerView } from './short-videos-player-view.svelte';
-import { isIdsInit, isShortVideosProviderInit } from './types';
+import { InternalShortVideoPlayerProvider } from './internal-short-video-player-provider';
+import {} from './types';
 import { mount, unmount } from 'svelte';
 export { ShortVideosPlayer };
-/**
- * Opens the short videos player modal with the specified provider or by fetching videos by IDs.
- *
- * You can use either a ready-made provider, or simply pass a list of video IDs and a GraphQL endpoint to fetch them.
- *
- * @param init - Configuration options.
- *
- * @param {PlayerItemsProvider<ShortVideoViewerModel>} [init.shortVideosProvider]
- *   The provider instance supplying short video items to the player.
- *   **Use this if you already have your own provider implementation.**
- *
- * @param {string[]} [init.ids]
- *   List of short video IDs to display in the player.
- *   **Use this if you want the player to fetch and show specific videos.**
- *
- * @param {string} [init.graphqlUrl]
- *   The GraphQL endpoint to use when fetching videos by IDs.
- *   **Required if you use `ids`.**
- *
- * @param {string} [init.initialId]
- *   The ID of the video that should be shown first.
- *   **Optional. Only used when using `ids`.**
- *
- * @param {IShortVideosPlayerLocalization} [init.localization]
- *   Optional localization settings for the player UI.
- *
- * @param {object} [init.on]
- *   Optional event handlers.
- * @param {() => void} [init.on.playerClosed]
- *   Called when the player is closed.
- *
- * @example <caption>Using a custom provider</caption>
- * ```ts
- * import { openShortVideosPlayer } from '@streamscloud/embeddable/short-videos-player';
- *
- * openShortVideosPlayer({
- *   shortVideosProvider: myShortVideosProvider,
- *   localization: {
- *     next: 'Next',
- *     previous: 'Previous'
- *   }
- * });
- * ```
- *
- * @example <caption>Using a list of IDs</caption>
- * ```ts
- * import { openShortVideosPlayer } from '@streamscloud/embeddable/short-videos-player';
- *
- * openShortVideosPlayer({
- *   ids: ['id1', 'id2', 'id3'],
- *   graphqlOrigin: 'https://api.example.com',
- *   initialId: 'id2',
- *   localization: {
- *     next: 'Next',
- *     previous: 'Previous'
- *   },
- *   on: {
- *     playerClosed: () => {
- *       console.log('Player was closed');
- *     }
- *   }
- * });
- * ```
- */
-export const openShortVideosPlayer = async (init) => {
-    let input = null;
-    if (isShortVideosProviderInit(init)) {
-        input = {
-            type: 'provider',
-            provider: init.shortVideosProvider
-        };
+export function openShortVideosPlayer(init) {
+    const { shortVideosProvider, ids, graphqlOrigin, initialId, initiator, socialInteractionsHandler, disableBackground, localization, showStreamsCloudWatermark } = init;
+    let dataProvider = shortVideosProvider;
+    if (!dataProvider && ids) {
+        dataProvider = new InternalShortVideoPlayerProvider({ ids, graphqlOrigin, initialId, initiator });
     }
-    else if (isIdsInit(init)) {
-        input = {
-            type: 'ids',
-            ids: init.ids,
-            initialId: init.initialId,
-            graphqlOrigin: init.graphqlOrigin,
-            initiator: init.initiator
-        };
-    }
-    else {
-        input = null;
-    }
-    if (!input) {
+    if (!dataProvider) {
+        toastrWarning('Data provider is not specified.');
         return;
     }
+    let mediaCenterDataProvider = init.mediaCenterDataProvider;
+    if (!mediaCenterDataProvider && init.mediaPageId) {
+        mediaCenterDataProvider = new InternalMediaCenterDataProvider(init.mediaPageId, graphqlOrigin);
+    }
     const shadowHost = new ModalShadowHost();
-    const mounted = mount(ShortVideosPlayerView, {
+    const mounted = mount(MediaCenter, {
         target: shadowHost.shadowRoot,
         props: {
-            input,
-            socialInteractionsHandler: init.socialInteractionsHandler,
-            localization: getLocale(init.localization),
-            showStreamsCloudWatermark: init.showStreamsCloudWatermark,
-            on: {
-                closePlayer: async () => {
-                    if (init.on?.playerClosed) {
-                        init.on.playerClosed();
-                    }
-                    await unmount(mounted);
-                    shadowHost.remove();
-                },
-                videoActivated: (id) => {
-                    if (init.on?.videoActivated) {
-                        init.on.videoActivated(id);
+            dataProvider: mediaCenterDataProvider || null,
+            playerProps: {
+                type: MediaCenterMode.ShortVideos,
+                props: {
+                    dataProvider,
+                    socialInteractionsHandler,
+                    disableBackground,
+                    localization,
+                    showStreamsCloudWatermark,
+                    on: {
+                        playerClosed: async () => {
+                            await unmount(mounted);
+                            shadowHost.remove();
+                            if (init.on?.playerClosed) {
+                                init.on.playerClosed();
+                            }
+                        },
+                        videoActivated: (id) => {
+                            if (init.on?.videoActivated) {
+                                init.on.videoActivated(id);
+                            }
+                        }
                     }
                 }
             }
         }
     });
     shadowHost.attachToBody();
-};
+}

package/dist/short-videos/short-videos-player/internal-short-video-player-provider.d.ts

@@ -0,0 +1,17 @@
+import { type ShortVideoViewerModel } from '../short-video-viewer';
+import type { IPlayerItemsProvider } from '../../ui/player';
+export declare class InternalShortVideoPlayerProvider implements IPlayerItemsProvider<ShortVideoViewerModel> {
+    initialData: IPlayerItemsProvider<ShortVideoViewerModel>['initialData'];
+    private ids;
+    private initialId?;
+    private graphql;
+    private dataLoader;
+    constructor(input: {
+        ids: string[];
+        initiator?: string;
+        graphqlOrigin?: string;
+        initialId?: string;
+    });
+    loadMore: () => Promise<ShortVideoViewerModel[]>;
+    prefetch: () => Promise<void>;
+}

package/dist/short-videos/short-videos-player/internal-short-video-player-provider.js

@@ -0,0 +1,59 @@
+import { ImageScale } from '../..';
+import { ContinuationToken } from '../../core/continuation-token';
+import { CursorDataLoader } from '../../core/data-loaders';
+import { createLocalGQLClient } from '../../core/graphql';
+import { mapToShortVideoViewerModel } from '../short-video-viewer';
+import { GetShortVideosDocument } from './operations.generated';
+export class InternalShortVideoPlayerProvider {
+    initialData;
+    ids;
+    initialId;
+    graphql;
+    dataLoader = new CursorDataLoader({
+        loadPage: async (continuationToken) => {
+            try {
+                const payload = await this.graphql
+                    .query(GetShortVideosDocument, {
+                    input: {
+                        limit: 20,
+                        continuationToken,
+                        filter: {
+                            ids: this.ids
+                        }
+                    },
+                    image_scale: ImageScale.OriginalEncoded
+                })
+                    .toPromise();
+                const data = payload.data?.shortVideos;
+                if (!data) {
+                    return null;
+                }
+                return {
+                    items: data.items.map(mapToShortVideoViewerModel),
+                    continuationToken: ContinuationToken.fromPayload(data.continuationToken)
+                };
+            }
+            catch {
+                return null;
+            }
+        }
+    });
+    constructor(input) {
+        const { ids, graphqlOrigin, initiator, initialId } = input;
+        this.graphql = createLocalGQLClient(graphqlOrigin, initiator ? { 'x-initiator': initiator } : undefined);
+        this.ids = ids;
+        this.initialId = initialId;
+        this.initialData = { prefetchedItems: [], startIndex: 0 };
+    }
+    loadMore = () => this.dataLoader.loadMore();
+    prefetch = async () => {
+        const items = await this.loadMore();
+        if (this.initialId && items.length) {
+            const initialIndex = items.findIndex((i) => i.id === this.initialId);
+            this.initialData = { prefetchedItems: items, startIndex: initialIndex >= 0 ? initialIndex : 0 };
+        }
+        else {
+            this.initialData = { prefetchedItems: items, startIndex: 0 };
+        }
+    };
+}

package/dist/short-videos/short-videos-player/operations.generated.d.ts

@@ -6,6 +6,7 @@ export type GetShortVideosQueryVariables = SchemaTypes.Exact<{
 }>;
 export type GetShortVideosQuery = {
     shortVideos: {
+        continuationToken: string | null;
         items: Array<{
             id: string;
             enableSocialInteractions: boolean;

package/dist/short-videos/short-videos-player/operations.generated.js

@@ -36,7 +36,8 @@ export const GetShortVideosDocument = {
                                         kind: 'SelectionSet',
                                         selections: [{ kind: 'FragmentSpread', name: { kind: 'Name', value: 'ShortVideoViewerPayloadFragment' } }]
                                     }
-                                }
+                                },
+                                { kind: 'Field', name: { kind: 'Name', value: 'continuationToken' } }
                             ]
                         }
                     }

package/dist/short-videos/short-videos-player/operations.graphql

@@ -4,5 +4,6 @@ query GetShortVideos($input: EmbedPostsInput!, $image_scale: ImageScale = ORIGIN
     items {
       ...ShortVideoViewerPayloadFragment
     }
+    continuationToken
   }
 }

package/dist/short-videos/short-videos-player/short-videos-player-view.svelte

@@ -8,66 +8,34 @@
     });
 };
 import { handleEsc } from '../../core/document.event-handlers';
-import { createLocalGQLClient } from '../../core/graphql';
-import { mapToShortVideoViewerModel, ShortVideoViewer } from '../short-video-viewer';
+import { ShortVideoViewer } from '../short-video-viewer';
+import { InternalShortVideoPlayerProvider } from './internal-short-video-player-provider';
 import { Loading } from '../../ui/loading';
 import { PlayerBuffer, PlayerSlider } from '../../ui/player';
 import { SpotlightLayout } from '../../ui/spotlight-layout';
 import { SwipeIndicator } from '../../ui/swipe-indicator';
 import { default as Controls } from './controls.svelte';
-import { GetShortVideosDocument } from './operations.generated';
 import { ShortVideosPlayerLocalization } from './short-videos-player-localization';
 import { ShortVideosPlayerUiManager } from './ui-manager.svelte';
-import { onMount } from 'svelte';
-let { input, socialInteractionsHandler, localization: localizationInit = 'en', showStreamsCloudWatermark, disableBackground, on } = $props();
+import { onMount, untrack } from 'svelte';
+let { dataProvider, socialInteractionsHandler, localization: localizationInit = 'en', showStreamsCloudWatermark, disableBackground, on, categoriesSwitcher, playerLogo = null, fadeContent = false } = $props();
 const localization = $derived(new ShortVideosPlayerLocalization(localizationInit));
 let everTouched = $state(false);
 let background = $state(null);
-let buffer = $state(input.type === 'provider' ? new PlayerBuffer(input.provider) : null);
-const initBuffer = (input) => __awaiter(void 0, void 0, void 0, function* () {
-    var _a, _b;
-    try {
-        const { graphqlOrigin, ids, initialId } = input;
-        const graphql = createLocalGQLClient(graphqlOrigin, { 'x-initiator': input.initiator || 'player/short-videos' });
-        const payload = yield graphql
-            .query(GetShortVideosDocument, {
-            input: {
-                filter: {
-                    ids
-                }
-            }
-        })
-            .toPromise();
-        const posts = ((_b = (_a = payload.data) === null || _a === void 0 ? void 0 : _a.shortVideos) === null || _b === void 0 ? void 0 : _b.items) || [];
-        const idOrder = new Map(ids.map((id, index) => [id, index]));
-        posts.sort((a, b) => {
-            var _a, _b;
-            return ((_a = idOrder.get(a.id)) !== null && _a !== void 0 ? _a : Infinity) - ((_b = idOrder.get(b.id)) !== null && _b !== void 0 ? _b : Infinity);
-        });
-        const index = initialId ? posts.findIndex((p) => p.id === initialId) : 0;
-        const provider = {
-            initialData: {
-                prefetchedItems: posts.map(mapToShortVideoViewerModel),
-                startIndex: index
-            },
-            loadMore: () => __awaiter(void 0, void 0, void 0, function* () {
-                // No more items to load, as all are already prefetched
-                return [];
-            })
-        };
-        buffer = new PlayerBuffer(provider);
-    }
-    catch (_c) {
-        console.error('Failed to load short videos by IDs:', input.ids);
-        buffer = null; // Reset buffer on error
-    }
+let buffer = $derived.by(() => {
+    void dataProvider;
+    return untrack(() => (dataProvider instanceof InternalShortVideoPlayerProvider ? null : new PlayerBuffer(dataProvider)));
 });
 const uiManager = new ShortVideosPlayerUiManager();
 onMount(() => {
-    if (input.type === 'ids') {
-        initBuffer(input);
+    if (dataProvider instanceof InternalShortVideoPlayerProvider) {
+        initBuffer(dataProvider);
     }
 });
+const initBuffer = (provider) => __awaiter(void 0, void 0, void 0, function* () {
+    yield provider.prefetch();
+    buffer = new PlayerBuffer(provider);
+});
 const onItemActivated = (id) => {
     var _a;
     const shortVideo = buffer === null || buffer === void 0 ? void 0 : buffer.loaded.find((x) => x.id === id);
@@ -96,9 +64,12 @@ const handleDimensionsChanged = (dimensions) => {
         viewTotalWidth: dimensions.totalWidth
     });
 };
+const onMediaCenterHeaderMounted = (data) => {
+    uiManager.updateMediaCenterHeaderHeight(data.height);
+};
 const onPlayerClose = () => {
     var _a;
-    (_a = on === null || on === void 0 ? void 0 : on.closePlayer) === null || _a === void 0 ? void 0 : _a.call(on);
+    (_a = on === null || on === void 0 ? void 0 : on.playerClosed) === null || _a === void 0 ? void 0 : _a.call(on);
 };
 </script>
 
@@ -107,7 +78,15 @@ const onPlayerClose = () => {
 <div
   class="short-videos-player-container"
   class:short-videos-player-container--background-enabled={!disableBackground}
+  class:short-videos-player-container--faded={fadeContent}
   style={background && !disableBackground ? `--background-image: url(${background})` : null}>
+  {#if categoriesSwitcher}
+    {@render categoriesSwitcher({
+      maxItemsWidth: Math.min(uiManager.mainViewColumnWidth * 1.4, uiManager.viewTotalWidth),
+      onMounted: onMediaCenterHeaderMounted
+    })}
+  {/if}
+
   <div class="short-videos-player" style={uiManager.globalCssVariables}>
     {#if showStreamsCloudWatermark}
       <div class="short-videos-player__watermark">
@@ -144,7 +123,8 @@ const onPlayerClose = () => {
         uiManager={uiManager}
         localization={localization}
         socialInteractionsHandler={socialInteractionsHandler}
-        on={{ closePlayer: on?.closePlayer }} />
+        playerLogo={playerLogo}
+        on={{ closePlayer: on?.playerClosed }} />
     {:else}
       <Loading positionFixedCenter={true} timeout={1000} />
     {/if}
@@ -163,6 +143,7 @@ const onPlayerClose = () => {
   }
 }
 .short-videos-player-container {
+  --short-videos-player--elements-opacity: 1;
   width: 100%;
   min-width: 100%;
   max-width: 100%;
@@ -179,11 +160,14 @@ const onPlayerClose = () => {
   background-size: cover;
   background-blend-mode: multiply;
 }
+.short-videos-player-container--faded {
+  --short-videos-player--elements-opacity: 0;
+}
 
 .short-videos-player {
   display: flex;
   flex: 1;
-  padding: 0.625rem 0;
+  padding: var(--short-videos-player--padding);
   backdrop-filter: blur(30px);
   position: relative;
   /* Set 'container-type: inline-size;' to reference container*/
@@ -197,15 +181,12 @@ const onPlayerClose = () => {
   position: absolute;
   bottom: 5rem;
   left: 5rem;
+  opacity: var(--short-videos-player--elements-opacity);
+  transition: opacity 0.3s ease-in-out;
 }
 .short-videos-player__content {
   width: 100%;
   height: 100%;
-  --short-video-viewer--actions-panel--bottom: 5rem;
-  /* Set 'container-type: inline-size;' to reference container*/
-}
-@container (width < 576px) {
-  .short-videos-player__content {
-    --short-video-viewer--actions-panel--top: 5rem;
-  }
+  opacity: var(--short-videos-player--elements-opacity);
+  transition: opacity 0.3s ease-in-out;
 }</style>

package/dist/short-videos/short-videos-player/short-videos-player-view.svelte.d.ts

@@ -1,18 +1,15 @@
-import type { Locale } from '../../core/locale';
-import { type ShortVideoSocialInteractionsHandler } from '../short-video-viewer';
-import { type IShortVideosPlayerLocalization } from './short-videos-player-localization';
-import type { PlayerInput } from './types';
-type Props = {
-    input: PlayerInput;
-    socialInteractionsHandler?: ShortVideoSocialInteractionsHandler;
-    localization?: IShortVideosPlayerLocalization | Locale;
-    showStreamsCloudWatermark?: boolean;
-    disableBackground?: boolean;
-    on?: {
-        closePlayer?: () => void;
-        videoActivated?: (id: string) => void;
-    };
+import type { ShortVideoPlayerProps } from './types';
+import { type Snippet } from 'svelte';
+type $$ComponentProps = ShortVideoPlayerProps & {
+    categoriesSwitcher?: Snippet<[{
+        maxItemsWidth: number;
+        onMounted: (data: {
+            height: number;
+        }) => void;
+    }]>;
+    playerLogo?: string | null;
+    fadeContent?: boolean;
 };
-declare const ShortVideosPlayerView: import("svelte").Component<Props, {}, "">;
+declare const ShortVideosPlayerView: import("svelte").Component<$$ComponentProps, {}, "">;
 type ShortVideosPlayerView = ReturnType<typeof ShortVideosPlayerView>;
 export default ShortVideosPlayerView;

package/dist/short-videos/short-videos-player/types.d.ts

@@ -1,38 +1,17 @@
-import type { ShortVideoViewerModel, ShortVideoSocialInteractionsHandler } from '../short-video-viewer';
-import type { PlayerItemsProvider } from '../../ui/player';
+import type { Locale } from '../../core/locale';
+import type { ShortVideoViewerModel, IPostSocialInteractionsHandler } from '../short-video-viewer';
+import type { IPlayerItemsProvider } from '../../ui/player';
 import type { IShortVideosPlayerLocalization } from './short-videos-player-localization';
-export type PlayerInput = ProviderPlayerInput | IdsPlayerInput;
-export type ProviderPlayerInput = {
-    type: 'provider';
-    provider: PlayerItemsProvider<ShortVideoViewerModel>;
+export type ShortVideoPlayerProps = PlayerSettings & {
+    dataProvider: IPlayerItemsProvider<ShortVideoViewerModel>;
 };
-export type IdsPlayerInput = {
-    type: 'ids';
-    ids: string[];
-    initialId?: string;
-    graphqlOrigin?: string;
-    initiator?: string;
-};
-export type OpenShortVideosPlayerInit = ProviderInit | IdsInit;
-type ProviderInit = PlayerSettings & {
-    shortVideosProvider: PlayerItemsProvider<ShortVideoViewerModel>;
-};
-type IdsInit = PlayerSettings & {
-    ids: string[];
-    graphqlOrigin?: string;
-    initialId?: string;
-    initiator?: string;
-};
-type PlayerSettings = {
-    socialInteractionsHandler?: ShortVideoSocialInteractionsHandler;
+export type PlayerSettings = {
+    socialInteractionsHandler?: IPostSocialInteractionsHandler;
     disableBackground?: boolean;
-    localization?: IShortVideosPlayerLocalization | 'en' | 'no';
+    localization?: IShortVideosPlayerLocalization | Locale;
     showStreamsCloudWatermark?: boolean;
     on?: {
         playerClosed?: () => void;
         videoActivated?: (id: string) => void;
     };
 };
-export declare const isShortVideosProviderInit: (init: unknown) => init is ProviderInit;
-export declare function isIdsInit(init: unknown): init is IdsInit;
-export {};

package/dist/short-videos/short-videos-player/types.js

@@ -1,6 +1 @@
-export const isShortVideosProviderInit = (init) => {
-    return typeof init === 'object' && init !== null && 'shortVideosProvider' in init;
-};
-export function isIdsInit(init) {
-    return typeof init === 'object' && init !== null && 'ids' in init && 'graphqlOrigin' in init;
-}
+export {};