@streamscloud/embeddable 5.1.3 → 6.0.1

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

@@ -5,7 +5,7 @@ import { ShortVideosPlayerLocalization } from './short-videos-player-localizatio
 import IconChevronDown from '@fluentui/svg-icons/icons/chevron_down_20_regular.svg?raw';
 import IconChevronUp from '@fluentui/svg-icons/icons/chevron_up_20_regular.svg?raw';
 import IconDismiss from '@fluentui/svg-icons/icons/dismiss_20_regular.svg?raw';
-let { buffer, uiManager, localization, socialInteractionsHandler, on } = $props();
+let { buffer, uiManager, localization, socialInteractionsHandler, playerLogo, on } = $props();
 const shortVideo = $derived(buffer.current);
 const changeShowAttachments = () => {
     uiManager.showAttachments = !uiManager.showAttachments;
@@ -13,7 +13,7 @@ const changeShowAttachments = () => {
 </script>
 
 {#if uiManager.viewInitialized && !uiManager.showShortVideoOverlay}
-  <div class="short-videos-player-controls">
+  <div class="short-videos-player-controls" class:short-videos-player-controls--with-logo={!!playerLogo}>
     <div class="short-videos-player-controls__left">
       {#if shortVideo}
         <div class="short-videos-player-controls__short-video-hub">
@@ -39,6 +39,11 @@ const changeShowAttachments = () => {
       </div>
     </div>
     <div class="short-videos-player-controls__right">
+      {#if playerLogo}
+        <div class="short-videos-player-controls__player-logo">
+          <img src={playerLogo} class="short-videos-player-controls__logo-img" alt="Player Logo" />
+        </div>
+      {/if}
       {#if shortVideo && uiManager.showAttachments}
         <div class="short-videos-player-controls__short-video-attachments" transition:slideHorizontally|local>
           <ShortVideoViewerAttachments
@@ -75,18 +80,24 @@ const changeShowAttachments = () => {
   top: 0;
   right: 0;
   height: 100%;
-  width: var(--short-videos-player--sidebar--available-space);
+  width: var(--short-videos-player--controls--available-space);
   display: flex;
   justify-content: space-between;
-  padding: var(--short-videos-player--controls--offset-vertical) var(--short-videos-player--controls--offset-horizontal);
+  padding: var(--short-videos-player--controls--padding);
   container-type: inline-size;
 }
+.short-videos-player-controls--with-logo {
+  padding-top: 0;
+}
 .short-videos-player-controls__left {
   display: flex;
   flex-direction: column;
   gap: 2.3125rem;
   justify-content: flex-end;
   align-items: center;
+  padding-top: var(--short-videos-player--media-center-header--height);
+  opacity: var(--short-videos-player--elements-opacity);
+  transition: opacity 0.3s ease-in-out;
 }
 .short-videos-player-controls__right {
   flex: 1;
@@ -131,6 +142,28 @@ const changeShowAttachments = () => {
   justify-content: flex-end;
   --short-video-controls--icon--size: var(--short-videos-player--icon--size);
 }
+.short-videos-player-controls__player-logo {
+  width: 11rem;
+  max-width: 11rem;
+  height: var(--short-videos-player--media-center-header--height);
+  min-height: var(--short-videos-player--media-center-header--height);
+  max-height: var(--short-videos-player--media-center-header--height);
+  min-height: 4.375rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  /* Set 'container-type: inline-size;' to reference container*/
+}
+@container (width < calc(11rem + 3.75rem)) {
+  .short-videos-player-controls__player-logo {
+    display: none;
+  }
+}
+.short-videos-player-controls__logo-img {
+  width: 6.25rem;
+  min-width: 6.25rem;
+  max-width: 6.25rem;
+}
 .short-videos-player-controls__short-video-attachments-inline {
   display: none;
   /* Set 'container-type: inline-size;' to reference container*/
@@ -144,6 +177,8 @@ const changeShowAttachments = () => {
   flex: 1;
   width: 11rem;
   max-width: 11rem;
+  opacity: var(--short-videos-player--elements-opacity);
+  transition: opacity 0.3s ease-in-out;
   /* Set 'container-type: inline-size;' to reference container*/
 }
 @container (width < calc(11rem + 3.75rem)) {

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

@@ -1,4 +1,4 @@
-import { type ShortVideoSocialInteractionsHandler, type ShortVideoViewerModel } from '../short-video-viewer';
+import { type IPostSocialInteractionsHandler, type ShortVideoViewerModel } from '../short-video-viewer';
 import type { IPlayerBuffer } from '../../ui/player';
 import { ShortVideosPlayerLocalization } from './short-videos-player-localization';
 import type { ShortVideosPlayerUiManager } from './ui-manager.svelte';
@@ -6,7 +6,8 @@ type Props = {
     buffer: IPlayerBuffer<ShortVideoViewerModel>;
     uiManager: ShortVideosPlayerUiManager;
     localization: ShortVideosPlayerLocalization;
-    socialInteractionsHandler?: ShortVideoSocialInteractionsHandler;
+    socialInteractionsHandler?: IPostSocialInteractionsHandler;
+    playerLogo: string | null;
     on: {
         closePlayer?: () => void;
         productClick?: (productId: string) => void;

package/dist/short-videos/short-videos-player/fade-mixins.scss

@@ -0,0 +1,12 @@
+@mixin default-opacity {
+  --short-videos-player--elements-opacity: 1;
+}
+
+@mixin fade-opacity {
+  --short-videos-player--elements-opacity: 0;
+}
+
+@mixin handle-fade {
+  opacity: var(--short-videos-player--elements-opacity);
+  transition: opacity 0.3s ease-in-out;
+}

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
   }
 }