@streamscloud/embeddable 2.1.5 → 2.2.0

package/dist/short-videos/short-video-viewer/index.d.ts

@@ -7,3 +7,4 @@ export { default as ShortVideoDetails } from './cmp.short-video-details.svelte';
 export type { ShortVideoViewerModel, ShortVideoViewerAdModel, ShortVideoViewerProductModel } from './types';
 export type { IShortVideoViewerLocalization } from './short-video-viewer-localization.svelte';
 export type { IShortVideoDetailsLocalization } from './short-video-details-localization.svelte';
+export { mapShortVideoViewerModel } from './mapper';

package/dist/short-videos/short-video-viewer/index.js

@@ -4,3 +4,4 @@ export { default as ShortVideoProductViewer } from './cmp.product.svelte';
 export { default as ShortVideoViewerAttachments } from './cmp.attachments.svelte';
 export { default as ShortVideoViewerAttachmentsInline } from './cmp.attachments-inline.svelte';
 export { default as ShortVideoDetails } from './cmp.short-video-details.svelte';
+export { mapShortVideoViewerModel } from './mapper';

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

@@ -7,16 +7,64 @@
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-import { ShortVideoViewer } from '../short-video-viewer';
+import { createLocalGQLClient } from '../../core/graphql';
+import { mapShortVideoViewerModel, ShortVideoViewer } from '../short-video-viewer';
+import { GetShortVideosDocument } from './operations.generated';
+import { Loading } from '../../ui/loading';
 import { PlayerBuffer, PlayerSlider } from '../../ui/player';
 import { SpotlightLayout } from '../../ui/spotlight-layout';
 import { default as Controls } from './controls.svelte';
 import { ShortVideosPlayerLocalization } from './short-videos-player-localization.svelte';
 import { ShortVideosPlayerUiManager } from './ui-manager.svelte';
-import { onDestroy, onMount } from 'svelte';
-let { shortVideosProvider, localization: localizationInit, on } = $props();
+import { onDestroy, onMount, untrack } from 'svelte';
+let { input, localization: localizationInit, on } = $props();
 const localization = $derived(new ShortVideosPlayerLocalization(localizationInit));
-const buffer = $derived(new PlayerBuffer(shortVideosProvider));
+let buffer = $state(input.type === 'provider' ? new PlayerBuffer(input.provider) : null);
+$effect(() => {
+    if (input.type !== 'ids')
+        return;
+    untrack(() => {
+        initBuffer(input);
+    });
+});
+const initBuffer = (input) => __awaiter(void 0, void 0, void 0, function* () {
+    var _a, _b;
+    try {
+        const { graphqlUrl, ids, initialId } = input;
+        const graphql = createLocalGQLClient(graphqlUrl);
+        const payload = yield graphql
+            .query(GetShortVideosDocument, {
+            input: {
+                filter: {
+                    includePostIds: 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(mapShortVideoViewerModel),
+                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
+    }
+});
 const uiManager = new ShortVideosPlayerUiManager();
 onMount(() => __awaiter(void 0, void 0, void 0, function* () {
     uiManager.detailsCollapsed = window && window.innerWidth < window.innerHeight;
@@ -45,6 +93,8 @@ const handleDimensionsChanged = (dimensions) => {
         </div>
       </SpotlightLayout>
       <Controls buffer={buffer} uiManager={uiManager} localization={localization} on={{ closePlayer: () => on?.closePlayer?.() }} />
+    {:else}
+      <Loading positionFixedCenter={true} timeout={1000} />
     {/if}
   </div>
 </div>

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

@@ -1,8 +1,7 @@
-import { type ShortVideoViewerModel } from '../short-video-viewer';
-import { type PlayerItemsProvider } from '../../ui/player';
+import type { PlayerInput } from './types';
 import { type IShortVideosPlayerLocalization } from './short-videos-player-localization.svelte';
 type Props = {
-    shortVideosProvider: PlayerItemsProvider<ShortVideoViewerModel>;
+    input: PlayerInput;
     localization?: IShortVideosPlayerLocalization;
     on?: {
         closePlayer?: () => void;

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

@@ -1,15 +1,38 @@
-import type { ShortVideoViewerModel } from '../short-video-viewer';
-import type { PlayerItemsProvider } from '../../ui/player';
+import { type OpenShortVideosPlayerInit } from './types';
 import type { IShortVideosPlayerLocalization } from './short-videos-player-localization.svelte';
 export type { IShortVideosPlayerLocalization };
 /**
- * Opens the short videos player modal with the specified provider and optional localization.
+ * 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.
- * @param {IShortVideosPlayerLocalization} [init.localization] - Optional localization settings for the player UI.
  *
- * @example
+ * @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';
  *
@@ -21,11 +44,25 @@ export type { IShortVideosPlayerLocalization };
  *   }
  * });
  * ```
+ *
+ * @example <caption>Using a list of IDs</caption>
+ * ```ts
+ * import { openShortVideosPlayer } from '@streamscloud/embeddable/short-videos-player';
+ *
+ * openShortVideosPlayer({
+ *   ids: ['id1', 'id2', 'id3'],
+ *   graphqlUrl: 'https://api.example.com/graphql',
+ *   initialId: 'id2',
+ *   localization: {
+ *     next: 'Next',
+ *     previous: 'Previous'
+ *   },
+ *   on: {
+ *     playerClosed: () => {
+ *       console.log('Player was closed');
+ *     }
+ *   }
+ * });
+ * ```
  */
-export declare const openShortVideosPlayer: (init: {
-    shortVideosProvider: PlayerItemsProvider<ShortVideoViewerModel>;
-    localization?: IShortVideosPlayerLocalization;
-    on?: {
-        playerClosed?: () => void;
-    };
-}) => void;
+export declare const openShortVideosPlayer: (init: OpenShortVideosPlayerInit) => Promise<void>;

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

@@ -1,14 +1,39 @@
+import { isIdsInit, isShortVideosProviderInit } from './types';
 import { ShadowHost } from '../../ui/shadow-dom';
-import { default as ShortVideosPlayer } from './cmp.short-videos-player.svelte';
 import { mount } from 'svelte';
+import { default as ShortVideosPlayer } from './cmp.short-videos-player.svelte';
 /**
- * Opens the short videos player modal with the specified provider and optional localization.
+ * 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.
- * @param {IShortVideosPlayerLocalization} [init.localization] - Optional localization settings for the player UI.
  *
- * @example
+ * @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';
  *
@@ -20,15 +45,55 @@ import { mount } from 'svelte';
  *   }
  * });
  * ```
+ *
+ * @example <caption>Using a list of IDs</caption>
+ * ```ts
+ * import { openShortVideosPlayer } from '@streamscloud/embeddable/short-videos-player';
+ *
+ * openShortVideosPlayer({
+ *   ids: ['id1', 'id2', 'id3'],
+ *   graphqlUrl: 'https://api.example.com/graphql',
+ *   initialId: 'id2',
+ *   localization: {
+ *     next: 'Next',
+ *     previous: 'Previous'
+ *   },
+ *   on: {
+ *     playerClosed: () => {
+ *       console.log('Player was closed');
+ *     }
+ *   }
+ * });
+ * ```
  */
-export const openShortVideosPlayer = (init) => {
-    const { shortVideosProvider, localization } = init;
+export const openShortVideosPlayer = async (init) => {
+    let input = null;
+    if (isShortVideosProviderInit(init)) {
+        input = {
+            type: 'provider',
+            provider: init.shortVideosProvider
+        };
+    }
+    else if (isIdsInit(init)) {
+        input = {
+            type: 'ids',
+            ids: init.ids,
+            initialId: init.initialId,
+            graphqlUrl: init.graphqlUrl
+        };
+    }
+    else {
+        input = null;
+    }
+    if (!input) {
+        return;
+    }
     const shadowHost = new ShadowHost({ onClosed: () => init.on?.playerClosed?.() });
     mount(ShortVideosPlayer, {
         target: shadowHost.shadowRoot,
         props: {
-            shortVideosProvider,
-            localization,
+            input,
+            localization: init.localization,
             on: {
                 closePlayer: () => {
                     shadowHost.remove();

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

@@ -0,0 +1,64 @@
+import type * as SchemaTypes from '../../../gql/types';
+import type { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/core';
+export type GetShortVideosQueryVariables = SchemaTypes.Exact<{
+    input: SchemaTypes.PostsInput;
+    image_scale?: SchemaTypes.InputMaybe<SchemaTypes.ImageScale>;
+}>;
+export type GetShortVideosQuery = {
+    shortVideos: {
+        items: Array<{
+            id: string;
+            enableSocialInteractions: boolean;
+            postHeading: {
+                sourceImage: string | null;
+                sourceName: string;
+                postDisplayDate: any;
+                postViewsCount: number;
+            };
+            allProducts: Array<{
+                title: string;
+                id: string;
+                link: string | null;
+                media: Array<{
+                    url: string;
+                    thumbnailUrl: string | null;
+                    type: SchemaTypes.MediaType;
+                }>;
+                priceAndAvailability: {
+                    currency: SchemaTypes.Currency;
+                    price: number;
+                    productSalePrices: Array<{
+                        salePrice: number;
+                        salePriceEffectiveDateFrom: any | null;
+                        salePriceEffectiveDateTo: any | null;
+                    }> | null;
+                };
+            }>;
+            ad: {
+                id: string;
+                title: string;
+                description: string | null;
+                buttonText: string | null;
+                buttonUrl: string | null;
+                openLinkInNewWindow: boolean | null;
+                type: SchemaTypes.AdType;
+                media: Array<{
+                    url: string;
+                    thumbnailUrl: string | null;
+                    type: SchemaTypes.MediaType;
+                }>;
+            } | null;
+            postData: {
+                media: Array<{
+                    url: string;
+                    thumbnailUrl: string | null;
+                    type: SchemaTypes.MediaType;
+                }>;
+                shortVideoData: {
+                    text: string | null;
+                } | null;
+            };
+        }>;
+    };
+};
+export declare const GetShortVideosDocument: DocumentNode<GetShortVideosQuery, GetShortVideosQueryVariables>;

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

@@ -0,0 +1,193 @@
+export const GetShortVideosDocument = {
+    kind: 'Document',
+    definitions: [
+        {
+            kind: 'OperationDefinition',
+            operation: 'query',
+            name: { kind: 'Name', value: 'GetShortVideos' },
+            variableDefinitions: [
+                {
+                    kind: 'VariableDefinition',
+                    variable: { kind: 'Variable', name: { kind: 'Name', value: 'input' } },
+                    type: { kind: 'NonNullType', type: { kind: 'NamedType', name: { kind: 'Name', value: 'PostsInput' } } }
+                },
+                {
+                    kind: 'VariableDefinition',
+                    variable: { kind: 'Variable', name: { kind: 'Name', value: 'image_scale' } },
+                    type: { kind: 'NamedType', name: { kind: 'Name', value: 'ImageScale' } },
+                    defaultValue: { kind: 'EnumValue', value: 'ORIGINAL_ENCODED' }
+                }
+            ],
+            selectionSet: {
+                kind: 'SelectionSet',
+                selections: [
+                    {
+                        kind: 'Field',
+                        alias: { kind: 'Name', value: 'shortVideos' },
+                        name: { kind: 'Name', value: 'posts' },
+                        arguments: [{ kind: 'Argument', name: { kind: 'Name', value: 'input' }, value: { kind: 'Variable', name: { kind: 'Name', value: 'input' } } }],
+                        selectionSet: {
+                            kind: 'SelectionSet',
+                            selections: [
+                                {
+                                    kind: 'Field',
+                                    name: { kind: 'Name', value: 'items' },
+                                    selectionSet: {
+                                        kind: 'SelectionSet',
+                                        selections: [{ kind: 'FragmentSpread', name: { kind: 'Name', value: 'ShortVideoViewerPayloadFragment' } }]
+                                    }
+                                }
+                            ]
+                        }
+                    }
+                ]
+            }
+        },
+        {
+            kind: 'FragmentDefinition',
+            name: { kind: 'Name', value: 'ShortVideoViewerPayloadFragment' },
+            typeCondition: { kind: 'NamedType', name: { kind: 'Name', value: 'Post' } },
+            selectionSet: {
+                kind: 'SelectionSet',
+                selections: [
+                    { kind: 'Field', name: { kind: 'Name', value: 'id' } },
+                    { kind: 'Field', name: { kind: 'Name', value: 'enableSocialInteractions' } },
+                    {
+                        kind: 'Field',
+                        name: { kind: 'Name', value: 'postHeading' },
+                        selectionSet: {
+                            kind: 'SelectionSet',
+                            selections: [
+                                { kind: 'Field', name: { kind: 'Name', value: 'sourceImage' } },
+                                { kind: 'Field', name: { kind: 'Name', value: 'sourceName' } },
+                                { kind: 'Field', name: { kind: 'Name', value: 'postDisplayDate' } },
+                                { kind: 'Field', name: { kind: 'Name', value: 'postViewsCount' } }
+                            ]
+                        }
+                    },
+                    {
+                        kind: 'Field',
+                        name: { kind: 'Name', value: 'allProducts' },
+                        selectionSet: {
+                            kind: 'SelectionSet',
+                            selections: [
+                                {
+                                    kind: 'Field',
+                                    name: { kind: 'Name', value: 'media' },
+                                    selectionSet: {
+                                        kind: 'SelectionSet',
+                                        selections: [
+                                            { kind: 'Field', name: { kind: 'Name', value: 'url' } },
+                                            { kind: 'Field', name: { kind: 'Name', value: 'thumbnailUrl' } },
+                                            { kind: 'Field', name: { kind: 'Name', value: 'type' } }
+                                        ]
+                                    }
+                                },
+                                { kind: 'Field', name: { kind: 'Name', value: 'title' } },
+                                { kind: 'Field', name: { kind: 'Name', value: 'id' } },
+                                { kind: 'Field', name: { kind: 'Name', value: 'link' } },
+                                {
+                                    kind: 'Field',
+                                    name: { kind: 'Name', value: 'priceAndAvailability' },
+                                    selectionSet: {
+                                        kind: 'SelectionSet',
+                                        selections: [
+                                            { kind: 'Field', name: { kind: 'Name', value: 'currency' } },
+                                            { kind: 'Field', name: { kind: 'Name', value: 'price' } },
+                                            {
+                                                kind: 'Field',
+                                                name: { kind: 'Name', value: 'productSalePrices' },
+                                                selectionSet: {
+                                                    kind: 'SelectionSet',
+                                                    selections: [
+                                                        { kind: 'Field', name: { kind: 'Name', value: 'salePrice' } },
+                                                        { kind: 'Field', name: { kind: 'Name', value: 'salePriceEffectiveDateFrom' } },
+                                                        { kind: 'Field', name: { kind: 'Name', value: 'salePriceEffectiveDateTo' } }
+                                                    ]
+                                                }
+                                            }
+                                        ]
+                                    }
+                                }
+                            ]
+                        }
+                    },
+                    {
+                        kind: 'Field',
+                        name: { kind: 'Name', value: 'ad' },
+                        selectionSet: {
+                            kind: 'SelectionSet',
+                            selections: [
+                                { kind: 'Field', name: { kind: 'Name', value: 'id' } },
+                                { kind: 'Field', name: { kind: 'Name', value: 'title' } },
+                                { kind: 'Field', name: { kind: 'Name', value: 'description' } },
+                                { kind: 'Field', name: { kind: 'Name', value: 'buttonText' } },
+                                { kind: 'Field', name: { kind: 'Name', value: 'buttonUrl' } },
+                                { kind: 'Field', name: { kind: 'Name', value: 'openLinkInNewWindow' } },
+                                { kind: 'Field', name: { kind: 'Name', value: 'type' } },
+                                {
+                                    kind: 'Field',
+                                    name: { kind: 'Name', value: 'media' },
+                                    selectionSet: {
+                                        kind: 'SelectionSet',
+                                        selections: [
+                                            { kind: 'Field', name: { kind: 'Name', value: 'url' } },
+                                            { kind: 'Field', name: { kind: 'Name', value: 'thumbnailUrl' } },
+                                            { kind: 'Field', name: { kind: 'Name', value: 'type' } }
+                                        ]
+                                    }
+                                }
+                            ]
+                        }
+                    },
+                    {
+                        kind: 'Field',
+                        name: { kind: 'Name', value: 'postData' },
+                        selectionSet: {
+                            kind: 'SelectionSet',
+                            selections: [
+                                {
+                                    kind: 'Field',
+                                    name: { kind: 'Name', value: 'media' },
+                                    selectionSet: {
+                                        kind: 'SelectionSet',
+                                        selections: [
+                                            {
+                                                kind: 'Field',
+                                                name: { kind: 'Name', value: 'url' },
+                                                arguments: [
+                                                    {
+                                                        kind: 'Argument',
+                                                        name: { kind: 'Name', value: 'scale' },
+                                                        value: { kind: 'Variable', name: { kind: 'Name', value: 'image_scale' } }
+                                                    }
+                                                ]
+                                            },
+                                            {
+                                                kind: 'Field',
+                                                name: { kind: 'Name', value: 'thumbnailUrl' },
+                                                arguments: [
+                                                    {
+                                                        kind: 'Argument',
+                                                        name: { kind: 'Name', value: 'scale' },
+                                                        value: { kind: 'Variable', name: { kind: 'Name', value: 'image_scale' } }
+                                                    }
+                                                ]
+                                            },
+                                            { kind: 'Field', name: { kind: 'Name', value: 'type' } }
+                                        ]
+                                    }
+                                },
+                                {
+                                    kind: 'Field',
+                                    name: { kind: 'Name', value: 'shortVideoData' },
+                                    selectionSet: { kind: 'SelectionSet', selections: [{ kind: 'Field', name: { kind: 'Name', value: 'text' } }] }
+                                }
+                            ]
+                        }
+                    }
+                ]
+            }
+        }
+    ]
+};

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

@@ -0,0 +1,8 @@
+# noinspection GraphQLSchemaValidation
+query GetShortVideos($input: PostsInput!, $image_scale: ImageScale = ORIGINAL_ENCODED) {
+  shortVideos: posts(input: $input) {
+    items {
+      ...ShortVideoViewerPayloadFragment
+    }
+  }
+}

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

@@ -0,0 +1,34 @@
+import type { ShortVideoViewerModel } from '../..';
+import type { IShortVideosPlayerLocalization } from './short-videos-player-localization.svelte';
+import type { PlayerItemsProvider } from '../../ui/player';
+export type PlayerInput = ProviderPlayerInput | IdsPlayerInput;
+export type ProviderPlayerInput = {
+    type: 'provider';
+    provider: PlayerItemsProvider<ShortVideoViewerModel>;
+};
+export type IdsPlayerInput = {
+    type: 'ids';
+    ids: string[];
+    initialId?: string;
+    graphqlUrl: string;
+};
+export type OpenShortVideosPlayerInit = ProviderInit | IdsInit;
+type ProviderInit = {
+    shortVideosProvider: PlayerItemsProvider<ShortVideoViewerModel>;
+    localization?: IShortVideosPlayerLocalization;
+    on?: {
+        playerClosed?: () => void;
+    };
+};
+type IdsInit = {
+    ids: string[];
+    graphqlUrl: string;
+    initialId?: string;
+    localization?: IShortVideosPlayerLocalization;
+    on?: {
+        playerClosed?: () => 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

@@ -0,0 +1,6 @@
+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 && 'graphqlUrl' in init;
+}

package/dist/streams/stream-player/cmp.stream-player.svelte

@@ -21,14 +21,32 @@ import { default as Overview } from './stream-overview.svelte';
 import { StreamPlayerBuffer } from './stream-player-buffer.svelte';
 import { StreamPlayerLocalization } from './stream-player-localization.svelte';
 import { StreamPlayerUiManager } from './ui-manager.svelte';
-import { onDestroy, onMount } from 'svelte';
+import { onMount } from 'svelte';
+import { AppEventsTracker } from '@streamscloud/streams-analytics-collector';
 let { streamId, graphql, localization: localizationInit, on } = $props();
 const localization = $derived(new StreamPlayerLocalization(localizationInit));
 let model = $state(null);
 let buffer = $state.raw(null);
 let loading = $state(true);
 let activePageId = $derived.by(() => { var _a, _b; return (_b = (_a = buffer === null || buffer === void 0 ? void 0 : buffer.current) === null || _a === void 0 ? void 0 : _a.id) !== null && _b !== void 0 ? _b : ''; });
+let totalEngagementTimeSeconds = 0;
+let inactiveTimeSeconds = 10; // // Mark as inactive after 10 seconds of no activity
+let isActive = true;
+let activityTimeout = null;
+let trackingInterval = null;
+let maxPageIndexViewed = 0;
 const uiManager = new StreamPlayerUiManager();
+const resetInactivityTimer = () => {
+    if (!isActive) {
+        isActive = true;
+    }
+    if (activityTimeout) {
+        clearTimeout(activityTimeout);
+    }
+    activityTimeout = setTimeout(() => {
+        isActive = false;
+    }, inactiveTimeSeconds * 1000);
+};
 onMount(() => __awaiter(void 0, void 0, void 0, function* () {
     var _a, _b, _c, _d;
     uiManager.overviewCollapsed = window && window.innerWidth < window.innerHeight;
@@ -40,20 +58,48 @@ onMount(() => __awaiter(void 0, void 0, void 0, function* () {
             return;
         }
         (_c = on === null || on === void 0 ? void 0 : on.streamActivated) === null || _c === void 0 ? void 0 : _c.call(on, {
+            ownerId: streamPayload.data.stream.ownerProfile.id,
             title: streamPayload.data.stream.title,
             image: ((_d = streamPayload.data.stream.cover) === null || _d === void 0 ? void 0 : _d.url) || null
         });
         // start tracking the stream
         model = mapStreamPlayerModel(streamPayload.data.stream);
         buffer = new StreamPlayerBuffer({ graphql, streamId });
+        AppEventsTracker.trackStreamView(streamPayload.data.stream.id);
+        startActivityTracking();
     }
     finally {
         loading = false;
     }
 }));
-onDestroy(() => {
-    // end tracking the stream
-});
+const startActivityTracking = () => {
+    trackingInterval = setInterval(() => {
+        if (isActive) {
+            totalEngagementTimeSeconds += 1;
+        }
+    }, 1000);
+    window.addEventListener('mousemove', resetInactivityTimer);
+    window.addEventListener('mousedown', resetInactivityTimer);
+    window.addEventListener('keypress', resetInactivityTimer);
+    window.addEventListener('touchstart', resetInactivityTimer);
+    window.addEventListener('scroll', resetInactivityTimer);
+    resetInactivityTimer();
+};
+const stopActivityTracking = () => {
+    window.removeEventListener('mousemove', resetInactivityTimer);
+    window.removeEventListener('mousedown', resetInactivityTimer);
+    window.removeEventListener('keypress', resetInactivityTimer);
+    window.removeEventListener('touchstart', resetInactivityTimer);
+    window.removeEventListener('scroll', resetInactivityTimer);
+    if (activityTimeout) {
+        clearTimeout(activityTimeout);
+        activityTimeout = null;
+    }
+    if (trackingInterval) {
+        clearInterval(trackingInterval);
+        trackingInterval = null;
+    }
+};
 const handleChangePage = (index) => {
     if (!buffer) {
         return;
@@ -69,6 +115,35 @@ const handleDimensionsChanged = (dimensions) => {
         viewTotalWidth: dimensions.totalWidth
     });
 };
+const onPageActivated = (id) => {
+    const page = buffer === null || buffer === void 0 ? void 0 : buffer.loaded.find((x) => x.id === id);
+    if (page) {
+        AppEventsTracker.trackStreamPageView(id, streamId);
+        const currentIndex = buffer === null || buffer === void 0 ? void 0 : buffer.loaded.findIndex((p) => p.id === id);
+        if (currentIndex !== undefined && currentIndex > maxPageIndexViewed) {
+            maxPageIndexViewed = currentIndex;
+        }
+    }
+};
+const onProductCardClick = (productId) => {
+    AppEventsTracker.trackStreamProductClicked(productId, streamId);
+};
+const onPlayerClose = () => {
+    var _a;
+    stopActivityTracking();
+    AppEventsTracker.trackStreamEngagementTime(streamId, totalEngagementTimeSeconds);
+    if (buffer && buffer.loaded.length > 0) {
+        let scrollDepth = Math.round(((maxPageIndexViewed + 1) / buffer.loaded.length) * 100);
+        AppEventsTracker.trackStreamScrollDepth(streamId, scrollDepth);
+    }
+    (_a = on === null || on === void 0 ? void 0 : on.closePlayer) === null || _a === void 0 ? void 0 : _a.call(on);
+};
+const onPageDeactivated = (itemId) => {
+    AppEventsTracker.reportPageVideoViews(itemId, streamId);
+};
+const onProgress = (pageId, videoId, progress) => {
+    AppEventsTracker.trackShortVideoProgress(pageId, videoId, progress, streamId);
+};
 </script>
 
 <div class="stream-player-container">
@@ -79,20 +154,25 @@ const handleDimensionsChanged = (dimensions) => {
     {#if buffer && model}
       <SpotlightLayout ratio={9 / 16} on={{ dimensionsChanged: handleDimensionsChanged }}>
         <div class="stream-player__content">
-          <PlayerSlider buffer={buffer}>
+          <PlayerSlider
+            buffer={buffer}
+            on={{
+              itemActivated: (e) => onPageActivated(e),
+              itemDeactivated: (e) => onPageDeactivated(e)
+            }}>
             {#snippet children({ item })}
               {#if item.type === 'general'}
                 <StreamPageViewer
                   page={item}
                   on={{
-                    progress: (videoId: string, progress: number) => on?.progress?.(videoId, progress),
-                    productClick: (productId: string) => on?.productClick?.(productId)
+                    progress: (videoId: string, progress: number) => onProgress(item.id, videoId, progress),
+                    productClick: (productId: string) => onProductCardClick(productId)
                   }} />
               {:else if item.type === 'short-video'}
                 <ShortVideoViewer
                   model={mapToShortVideoViewerModel(item.shortVideo)}
                   on={{
-                    progress: (progress: number) => on?.progress?.(item.id, progress)
+                    progress: (progress) => onProgress(item.id, item.shortVideo.id, progress)
                   }}
                   autoplay="on-appearance"
                   showAttachments={uiManager.showShortVideoOverlay} />
@@ -115,8 +195,8 @@ const handleDimensionsChanged = (dimensions) => {
         uiManager={uiManager}
         localization={localization}
         on={{
-          closePlayer: () => on?.closePlayer?.(),
-          productClick: (productId: string) => on?.productClick?.(productId)
+          closePlayer: () => onPlayerClose(),
+          productClick: (productId: string) => onProductCardClick(productId)
         }} />
     {/if}
   </div>

package/dist/streams/stream-player/cmp.stream-player.svelte.d.ts

@@ -7,11 +7,10 @@ type Props = {
     on?: {
         closePlayer?: () => void;
         streamActivated?: (data: {
+            ownerId: string;
             title: string;
             image: string | null;
         }) => void;
-        productClick?: (productId: string) => void;
-        progress?: (videoId: string, progress: number) => void;
     };
 };
 declare const Cmp: import("svelte").Component<Props, {}, "">;

package/dist/streams/stream-player/controls.svelte

@@ -40,7 +40,12 @@ const shortVideo = $derived(((_a = buffer.current) === null || _a === void 0 ? v
   <div class="stream-player-controls__right">
     {#if shortVideo && shortVideo.products}
       <div class="stream-player-controls__short-video-attachments">
-        <ShortVideoViewerAttachments shortVideo={shortVideo} localization={localization.shortVideoDetailsLocalization?.attachmentsLocalization} />
+        <ShortVideoViewerAttachments
+          shortVideo={shortVideo}
+          localization={localization.shortVideoDetailsLocalization?.attachmentsLocalization}
+          on={{
+            productClick: on.productClick
+          }} />
       </div>
     {/if}
     <div class="stream-player-controls__controls">

package/dist/streams/stream-player/index.js

@@ -1,7 +1,25 @@
 import { createLocalGQLClient } from '../../core/graphql';
 import { ShadowHost } from '../../ui/shadow-dom';
 import { default as StreamPlayer } from './cmp.stream-player.svelte';
+import { AppEventsTracker } from '@streamscloud/streams-analytics-collector';
 import { mount } from 'svelte';
+/**
+ * Key used for storing the profile ID in local storage
+ */
+const PROFILE_ID_STORAGE_KEY = 'streamscloud_profile_id';
+/**
+ * Retrieves the profile ID from localStorage or generates a new one if it doesn't exist
+ * @returns The profile ID to use for analytics tracking
+ */
+function getOrCreateProfileId() {
+    const storedProfileId = localStorage.getItem(PROFILE_ID_STORAGE_KEY);
+    if (!storedProfileId) {
+        const newProfileId = crypto.randomUUID();
+        localStorage.setItem(PROFILE_ID_STORAGE_KEY, newProfileId);
+        return newProfileId;
+    }
+    return storedProfileId;
+}
 /**
  * Opens the stream player modal with the specified stream details.
  *
@@ -28,6 +46,8 @@ import { mount } from 'svelte';
 export const openStreamPlayer = (init) => {
     const { streamId, graphqlUrl, localization } = init;
     const shadowHost = new ShadowHost({ onClosed: () => init.on?.playerClosed?.() });
+    AppEventsTracker.setEndpoint(graphqlUrl);
+    AppEventsTracker.setProfileId(getOrCreateProfileId());
     mount(StreamPlayer, {
         target: shadowHost.shadowRoot,
         props: {
@@ -36,6 +56,7 @@ export const openStreamPlayer = (init) => {
             localization,
             on: {
                 streamActivated: (data) => {
+                    AppEventsTracker.setOrganizationId(data.ownerId);
                     if (init.on?.streamActivated) {
                         init.on.streamActivated({ title: data.title, image: data.image });
                     }

package/dist/streams/stream-player/operations.generated.d.ts

@@ -17,6 +17,8 @@ export type GetStreamQuery = {
         ownerProfile: {
             image: string | null;
             name: string;
+            id: string;
+            type: SchemaTypes.ProfileType;
         };
         availableFrom: {
             image: string;
@@ -54,6 +56,8 @@ export type StreamPlayerPayloadFragment = {
     ownerProfile: {
         image: string | null;
         name: string;
+        id: string;
+        type: SchemaTypes.ProfileType;
     };
     availableFrom: {
         image: string;

package/dist/streams/stream-player/operations.generated.js

@@ -25,7 +25,9 @@ export const StreamPlayerPayloadFragmentDoc = {
                             kind: 'SelectionSet',
                             selections: [
                                 { kind: 'Field', name: { kind: 'Name', value: 'image' } },
-                                { kind: 'Field', name: { kind: 'Name', value: 'name' } }
+                                { kind: 'Field', name: { kind: 'Name', value: 'name' } },
+                                { kind: 'Field', name: { kind: 'Name', value: 'id' } },
+                                { kind: 'Field', name: { kind: 'Name', value: 'type' } }
                             ]
                         }
                     },
@@ -105,7 +107,9 @@ export const GetStreamDocument = {
                             kind: 'SelectionSet',
                             selections: [
                                 { kind: 'Field', name: { kind: 'Name', value: 'image' } },
-                                { kind: 'Field', name: { kind: 'Name', value: 'name' } }
+                                { kind: 'Field', name: { kind: 'Name', value: 'name' } },
+                                { kind: 'Field', name: { kind: 'Name', value: 'id' } },
+                                { kind: 'Field', name: { kind: 'Name', value: 'type' } }
                             ]
                         }
                     },

package/dist/streams/stream-player/operations.graphql

@@ -26,6 +26,8 @@ fragment StreamPlayerPayloadFragment on Stream {
   ownerProfile {
     image
     name
+    id
+    type
   }
   availableFrom {
     image

package/dist/ui/icon/cmp.icon.svelte

@@ -13,14 +13,16 @@ const fillSvg = (node) => {
 };
 </script>
 
-<div class="icon" style="display: contents"
-     class:icon--white={color === IconColor.White}
-     class:icon--text={color === IconColor.Text}
-     class:icon--gray={color === IconColor.Gray}
-     class:icon--green={color === IconColor.Green}
-     class:icon--red={color === IconColor.Red}
-     class:icon--orange={color === IconColor.Orange}
-     class:icon--blue={color === IconColor.Blue}>
+<div
+  class="icon"
+  style="display: contents"
+  class:icon--white={color === IconColor.White}
+  class:icon--text={color === IconColor.Text}
+  class:icon--gray={color === IconColor.Gray}
+  class:icon--green={color === IconColor.Green}
+  class:icon--red={color === IconColor.Red}
+  class:icon--orange={color === IconColor.Orange}
+  class:icon--blue={color === IconColor.Blue}>
   {#if src.startsWith('<svg')}
     {@html src}
   {:else}

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

@@ -1,7 +1,7 @@
 <script lang="ts">import { Utils } from '../../core/utils';
 import { isScrollingPrevented } from './prevent-slider-scroll';
 import { onDestroy, onMount } from 'svelte';
-let { buffer, children } = $props();
+let { buffer, children, on } = $props();
 let slidesRef;
 let sliderHeight = $state(0);
 let swipeTransition = $state(0);
@@ -17,6 +17,8 @@ const onKeyPress = (e) => {
         buffer.loadNext();
     }
 };
+// Notify the parent component that the active item is about to change.
+let active = null;
 $effect(() => {
     if (buffer.currentIndex >= 0 && activeIndex >= 0 && Math.abs(activeIndex - buffer.currentIndex) === 1) {
         slidesRef.classList.toggle('animate', true);
@@ -85,6 +87,7 @@ onMount(() => {
             return;
         }
         slidesRef.classList.toggle('animate', false);
+        notifyOnItemChanged();
     });
     sliderHeight = slidesRef.clientHeight;
     resizeObserver = new ResizeObserver(() => {
@@ -92,6 +95,16 @@ onMount(() => {
     });
     resizeObserver.observe(slidesRef);
 });
+const notifyOnItemChanged = () => {
+    var _a, _b, _c;
+    if (active && ((_a = buffer.current) === null || _a === void 0 ? void 0 : _a.id) !== active.id) {
+        (_b = on === null || on === void 0 ? void 0 : on.itemDeactivated) === null || _b === void 0 ? void 0 : _b.call(on, active.id);
+    }
+    active = buffer.current;
+    if (active) {
+        (_c = on === null || on === void 0 ? void 0 : on.itemActivated) === null || _c === void 0 ? void 0 : _c.call(on, active.id);
+    }
+};
 onDestroy(() => {
     if (resizeObserver) {
         resizeObserver.disconnect();

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

@@ -5,6 +5,10 @@ declare class __sveltets_Render<T extends {
 }> {
     props(): {
         buffer: IPlayerBuffer<T>;
+        on?: {
+            itemDeactivated?: ((e: string) => void) | undefined;
+            itemActivated?: ((e: string) => void) | undefined;
+        } | undefined;
         children: Snippet<[{
             item: T;
             active?: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@streamscloud/embeddable",
-  "version": "2.1.5",
+  "version": "2.2.0",
   "author": "StreamsCloud",
   "repository": "https://github.com/StreamsCloud/streamscloud-frontend-packages.git",
   "type": "module",
@@ -95,7 +95,8 @@
     "@svelte-put/inline-svg": "^4.0.1",
     "@urql/core": "^5.1.1",
     "mobile-detect": "^1.4.5",
-    "svelte": "^5.25.3"
+    "svelte": "^5.25.3",
+    "@streamscloud/streams-analytics-collector": "latest"
   },
   "devDependencies": {
     "@eslint/compat": "^1.2.9",