@streamscloud/embeddable 6.3.11 → 6.4.0

package/dist/core/enums.d.ts

@@ -29,6 +29,9 @@ export declare enum ImageScale {
     OriginalEncoded = "ORIGINAL_ENCODED",
     Small = "SMALL"
 }
+export declare enum ProfileType {
+    Organization = "ORGANIZATION"
+}
 export declare enum PostType {
     ShortVideo = "SHORT_VIDEO"
 }

package/dist/core/enums.js

@@ -35,6 +35,10 @@ export var ImageScale;
     ImageScale["OriginalEncoded"] = "ORIGINAL_ENCODED";
     ImageScale["Small"] = "SMALL";
 })(ImageScale || (ImageScale = {}));
+export var ProfileType;
+(function (ProfileType) {
+    ProfileType["Organization"] = "ORGANIZATION";
+})(ProfileType || (ProfileType = {}));
 export var PostType;
 (function (PostType) {
     PostType["ShortVideo"] = "SHORT_VIDEO";

package/dist/media-center/data-provider/internal-media-center-data-provider.svelte.js

@@ -1,6 +1,6 @@
 import { PostType, Status } from '../../core/enums';
 import { createLocalGQLClient } from '../../core/graphql';
-import { mapToShortVideoViewerModel } from '../../short-videos/short-video-viewer';
+import { mapToShortVideosPlayerModel } from '../../short-videos/short-videos-player/mapper';
 import { GetMediaPageConfigDocument, GetShortVideosDocument } from './operations.generated';
 export class InternalMediaCenterDataProvider {
     mediaPageId;
@@ -39,7 +39,7 @@ export class InternalMediaCenterDataProvider {
             .toPromise();
         const posts = payload.data?.shortVideos?.items || [];
         return {
-            items: posts.map(mapToShortVideoViewerModel),
+            items: posts.map(mapToShortVideosPlayerModel),
             continuationToken: payload.data?.shortVideos?.continuationToken || null
         };
     };

package/dist/media-center/data-provider/operations.generated.d.ts

@@ -30,6 +30,7 @@ export type GetShortVideosQuery = {
             enableSocialInteractions: boolean;
             ownerProfile: {
                 id: string;
+                type: SchemaTypes.ProfileType;
             };
             allProducts: Array<{
                 id: string;

package/dist/media-center/data-provider/operations.generated.js

@@ -108,7 +108,7 @@ export const GetShortVideosDocument = {
                                     name: { kind: 'Name', value: 'items' },
                                     selectionSet: {
                                         kind: 'SelectionSet',
-                                        selections: [{ kind: 'FragmentSpread', name: { kind: 'Name', value: 'ShortVideoViewerPayloadFragment' } }]
+                                        selections: [{ kind: 'FragmentSpread', name: { kind: 'Name', value: 'ShortVideosPlayerPayloadFragment' } }]
                                     }
                                 },
                                 { kind: 'Field', name: { kind: 'Name', value: 'continuationToken' } }
@@ -127,11 +127,6 @@ export const GetShortVideosDocument = {
                 selections: [
                     { kind: 'Field', name: { kind: 'Name', value: 'id' } },
                     { kind: 'Field', name: { kind: 'Name', value: 'enableSocialInteractions' } },
-                    {
-                        kind: 'Field',
-                        name: { kind: 'Name', value: 'ownerProfile' },
-                        selectionSet: { kind: 'SelectionSet', selections: [{ kind: 'Field', name: { kind: 'Name', value: 'id' } }] }
-                    },
                     {
                         kind: 'Field',
                         name: { kind: 'Name', value: 'allProducts' },
@@ -291,6 +286,28 @@ export const GetShortVideosDocument = {
                     }
                 ]
             }
+        },
+        {
+            kind: 'FragmentDefinition',
+            name: { kind: 'Name', value: 'ShortVideosPlayerPayloadFragment' },
+            typeCondition: { kind: 'NamedType', name: { kind: 'Name', value: 'Post' } },
+            selectionSet: {
+                kind: 'SelectionSet',
+                selections: [
+                    { kind: 'FragmentSpread', name: { kind: 'Name', value: 'ShortVideoViewerPayloadFragment' } },
+                    {
+                        kind: 'Field',
+                        name: { kind: 'Name', value: 'ownerProfile' },
+                        selectionSet: {
+                            kind: 'SelectionSet',
+                            selections: [
+                                { kind: 'Field', name: { kind: 'Name', value: 'id' } },
+                                { kind: 'Field', name: { kind: 'Name', value: 'type' } }
+                            ]
+                        }
+                    }
+                ]
+            }
         }
     ]
 };

package/dist/media-center/data-provider/operations.graphql

@@ -18,7 +18,7 @@ query GetMediaPageConfig($mediaPageId: String!) {
 query GetShortVideos($input: EmbedPostsInput!, $image_scale: ImageScale = ORIGINAL_ENCODED) {
   shortVideos: embedPosts(input: $input) {
     items {
-      ...ShortVideoViewerPayloadFragment
+      ...ShortVideosPlayerPayloadFragment
     }
     continuationToken
   }

package/dist/media-center/data-provider/types.d.ts

@@ -1,4 +1,4 @@
-import type { ShortVideoViewerModel } from '../../short-videos/short-video-viewer';
+import type { ShortVideoPlayerModel } from '../../short-videos/short-videos-player/types';
 export interface IMediaCenterDataProvider {
     getConfig: () => Promise<MediaCenterConfig | null>;
     getShortVideosCursor: (input: {
@@ -9,7 +9,7 @@ export interface IMediaCenterDataProvider {
         limit: number;
         continuationToken?: string | null;
     }) => Promise<{
-        items: ShortVideoViewerModel[];
+        items: ShortVideoPlayerModel[];
         continuationToken: string | null;
     }>;
 }

package/dist/media-center/media-center/overview.svelte.d.ts

@@ -1,11 +1,11 @@
-import type { ShortVideoViewerModel } from '../../short-videos/short-video-viewer';
+import type { ShortVideoPlayerModel } from '../../short-videos/short-videos-player';
 import { MediaCenterLocalization } from './media-center-localization';
 import type { OverviewData } from './types';
 type Props = {
     data: OverviewData;
     localization: MediaCenterLocalization;
     on: {
-        shortVideoSelected: (shortVideo: ShortVideoViewerModel) => void;
+        shortVideoSelected: (shortVideo: ShortVideoPlayerModel) => void;
     };
 };
 declare const Overview: import("svelte").Component<Props, {}, "">;

package/dist/media-center/media-center/short-video-resources-generator.d.ts

@@ -1,8 +1,8 @@
-import type { ShortVideoViewerModel } from '../../short-videos/short-video-viewer';
+import type { ShortVideoPlayerModel } from '../../short-videos/short-videos-player';
 import type { IPlayerItemsProvider } from '../../ui/player';
 import type { IMediaCenterDataProvider } from '../data-provider';
 export declare const makeShortVideosProvider: (data: {
     dataProvider: IMediaCenterDataProvider;
     categoryId?: string;
-    prefetchedItems?: ShortVideoViewerModel[];
-}) => IPlayerItemsProvider<ShortVideoViewerModel>;
+    prefetchedItems?: ShortVideoPlayerModel[];
+}) => IPlayerItemsProvider<ShortVideoPlayerModel>;

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

@@ -1,10 +1,10 @@
 import type { ProductCardModel } from '../../products/product-card';
-import type { ShortVideoViewerModel } from '../../short-videos/short-video-viewer';
+import type { ShortVideoPlayerModel } from '../../short-videos/short-videos-player';
 export declare enum MediaCenterMode {
     ShortVideos = "short-videos",
     Stream = "stream"
 }
 export type OverviewData = {
-    shortVideos: ShortVideoViewerModel[];
+    shortVideos: ShortVideoPlayerModel[];
     products: ProductCardModel[];
 };

package/dist/short-videos/short-video-viewer/cmp.attachments-inline.svelte

@@ -33,7 +33,7 @@ const handleAttachmentClick = (attachment) => {
         window.open(attachment.link, '_blank');
     }
 };
-let attachmentElements = {};
+let attachmentElements = $state({});
 let observer = null;
 $effect(() => {
     if ((on === null || on === void 0 ? void 0 : on.productImpression) && Object.keys(attachmentElements).length > 0) {

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

@@ -8,7 +8,6 @@ export const mapToShortVideoViewerModel = (payload) => {
     }
     return {
         id: payload.id,
-        organizationId: payload.ownerProfile.id,
         media: mediaBlob.type === MediaType.Image
             ? { isImage: true, url: mediaBlob.url }
             : {

package/dist/short-videos/short-video-viewer/operations.generated.d.ts

@@ -3,9 +3,6 @@ import type { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-
 export type ShortVideoViewerPayloadFragment = {
     id: string;
     enableSocialInteractions: boolean;
-    ownerProfile: {
-        id: string;
-    };
     allProducts: Array<{
         id: string;
         title: string;

package/dist/short-videos/short-video-viewer/operations.generated.js

@@ -10,11 +10,6 @@ export const ShortVideoViewerPayloadFragmentDoc = {
                 selections: [
                     { kind: 'Field', name: { kind: 'Name', value: 'id' } },
                     { kind: 'Field', name: { kind: 'Name', value: 'enableSocialInteractions' } },
-                    {
-                        kind: 'Field',
-                        name: { kind: 'Name', value: 'ownerProfile' },
-                        selectionSet: { kind: 'SelectionSet', selections: [{ kind: 'Field', name: { kind: 'Name', value: 'id' } }] }
-                    },
                     {
                         kind: 'Field',
                         name: { kind: 'Name', value: 'allProducts' },

package/dist/short-videos/short-video-viewer/operations.graphql

@@ -1,9 +1,6 @@
 fragment ShortVideoViewerPayloadFragment on Post {
   id
   enableSocialInteractions
-  ownerProfile {
-    id
-  }
   allProducts {
     id
     title

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

@@ -1,7 +1,6 @@
 import { AdType, type Currency } from '../../core/enums';
 export type ShortVideoViewerModel = {
     id: string;
-    organizationId: string;
     media: {
         isImage: true;
         url: string;

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

@@ -1,9 +1,10 @@
-import { type IPostSocialInteractionsHandler, type ShortVideoViewerModel } from '../short-video-viewer';
+import { type IPostSocialInteractionsHandler } from '../short-video-viewer';
 import type { IPlayerBuffer } from '../../ui/player';
 import { ShortVideosPlayerLocalization } from './short-videos-player-localization';
+import type { ShortVideoPlayerModel } from './types';
 import type { ShortVideosPlayerUiManager } from './ui-manager.svelte';
 type Props = {
-    buffer: IPlayerBuffer<ShortVideoViewerModel>;
+    buffer: IPlayerBuffer<ShortVideoPlayerModel>;
     uiManager: ShortVideosPlayerUiManager;
     localization: ShortVideosPlayerLocalization;
     socialInteractionsHandler?: IPostSocialInteractionsHandler;

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

@@ -1,12 +1,10 @@
 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 { InternalShortVideoAnalyticsHandler } from './internal-short-video-analytics-handler';
 import type { IShortVideosPlayerLocalization } from './short-videos-player-localization';
-import { type PlayerSettings, type IShortVideoAnalyticsHandler } from './types';
-export { ShortVideosPlayer };
-export type { IShortVideosPlayerLocalization, IMediaCenterDataProvider, IPlayerItemsProvider, IShortVideoAnalyticsHandler, InternalShortVideoAnalyticsHandler };
+import { type PlayerSettings, type IShortVideoAnalyticsHandler, type ShortVideoPlayerModel } from './types';
+export { ShortVideosPlayer, type ShortVideoPlayerModel };
+export type { IShortVideosPlayerLocalization, IMediaCenterDataProvider, IPlayerItemsProvider, IShortVideoAnalyticsHandler };
 /**
  * Opens the short videos player modal.
  *
@@ -17,7 +15,7 @@ export type { IShortVideosPlayerLocalization, IMediaCenterDataProvider, IPlayerI
  * @param init Configuration options.
  *
  * Provider mode (overload 1)
- * @param {IPlayerItemsProvider<ShortVideoViewerModel>} init.shortVideosProvider
+ * @param {IPlayerItemsProvider<ShortVideoPlayerModel>} init.shortVideosProvider
  *   Provider that supplies short-video items to the player.
  * @param {IMediaCenterDataProvider} [init.mediaCenterDataProvider]
  *   Optional media-center data provider.
@@ -89,7 +87,7 @@ export type { IShortVideosPlayerLocalization, IMediaCenterDataProvider, IPlayerI
  * ```
  */
 export declare function openShortVideosPlayer(init: PlayerSettings & {
-    shortVideosProvider: IPlayerItemsProvider<ShortVideoViewerModel>;
+    shortVideosProvider: IPlayerItemsProvider<ShortVideoPlayerModel>;
     mediaCenterDataProvider?: IMediaCenterDataProvider;
 }): void;
 export declare function openShortVideosPlayer(init: PlayerSettings & {

package/dist/short-videos/short-videos-player/internal-short-video-analytics-handler.js

@@ -6,16 +6,8 @@ export class InternalShortVideoAnalyticsHandler {
         AppEventsTracker.setEndpoint(constructGraphQLUrl(graphqlOrigin));
         AppEventsTracker.setProfileId(getOrCreateProfileId());
     }
-    setOrganizationId = (organizationId) => {
-        AppEventsTracker.setOrganizationId(organizationId);
-    };
-    trackShortVideoView = (videoId) => {
-        AppEventsTracker.trackShortVideoView(videoId);
-    };
-    trackShortVideoProductImpression = (productId, videoId) => {
-        AppEventsTracker.trackShortVideoProductImpression(productId, videoId);
-    };
-    trackShortVideoProductClick = (productId, videoId) => {
-        AppEventsTracker.trackShortVideoProductClick(productId, videoId);
-    };
+    setOrganizationId = (organizationId) => AppEventsTracker.setOrganizationId(organizationId);
+    trackShortVideoView = (videoId) => AppEventsTracker.trackShortVideoView(videoId);
+    trackShortVideoProductImpression = (productId, videoId) => AppEventsTracker.trackShortVideoProductImpression(productId, videoId);
+    trackShortVideoProductClick = (productId, videoId) => AppEventsTracker.trackShortVideoProductClick(productId, videoId);
 }

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

@@ -1,7 +1,7 @@
-import { type ShortVideoViewerModel } from '../short-video-viewer';
 import type { IPlayerItemsProvider } from '../../ui/player';
-export declare class InternalShortVideoPlayerProvider implements IPlayerItemsProvider<ShortVideoViewerModel> {
-    initialData: IPlayerItemsProvider<ShortVideoViewerModel>['initialData'];
+import type { ShortVideoPlayerModel } from './types';
+export declare class InternalShortVideoPlayerProvider implements IPlayerItemsProvider<ShortVideoPlayerModel> {
+    initialData: IPlayerItemsProvider<ShortVideoPlayerModel>['initialData'];
     private ids;
     private idOrder;
     private initialId?;
@@ -13,6 +13,6 @@ export declare class InternalShortVideoPlayerProvider implements IPlayerItemsPro
         graphqlOrigin?: string;
         initialId?: string;
     });
-    loadMore: () => Promise<ShortVideoViewerModel[]>;
+    loadMore: () => Promise<ShortVideoPlayerModel[]>;
     prefetch: () => Promise<void>;
 }

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

@@ -2,7 +2,7 @@ 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 { mapToShortVideosPlayerModel } from './mapper';
 import { GetShortVideosDocument } from './operations.generated';
 const CHUNK_SIZE = 20;
 export class InternalShortVideoPlayerProvider {
@@ -32,7 +32,7 @@ export class InternalShortVideoPlayerProvider {
                 if (!data) {
                     return null;
                 }
-                const items = data.items.map(mapToShortVideoViewerModel).sort((a, b) => {
+                const items = data.items.map(mapToShortVideosPlayerModel).sort((a, b) => {
                     const ia = this.idOrder.get(a.id) ?? Number.MAX_SAFE_INTEGER;
                     const ib = this.idOrder.get(b.id) ?? Number.MAX_SAFE_INTEGER;
                     return ia - ib;

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

@@ -0,0 +1,3 @@
+import type { GetShortVideosQuery } from './operations.generated';
+import type { ShortVideoPlayerModel } from './types';
+export declare const mapToShortVideosPlayerModel: (payload: GetShortVideosQuery["shortVideos"]["items"][0]) => ShortVideoPlayerModel;

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

@@ -0,0 +1,9 @@
+import { ProfileType } from '../../core/enums';
+import { mapToShortVideoViewerModel } from '../short-video-viewer';
+export const mapToShortVideosPlayerModel = (payload) => {
+    const viewerModel = mapToShortVideoViewerModel(payload);
+    return {
+        ...viewerModel,
+        analyticsOrganizationId: payload.ownerProfile.type === ProfileType.Organization ? payload.ownerProfile.id : null
+    };
+};

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

@@ -12,6 +12,7 @@ export type GetShortVideosQuery = {
             enableSocialInteractions: boolean;
             ownerProfile: {
                 id: string;
+                type: SchemaTypes.ProfileType;
             };
             allProducts: Array<{
                 id: string;
@@ -70,4 +71,67 @@ export type GetShortVideosQuery = {
         }>;
     };
 };
+export type ShortVideosPlayerPayloadFragment = {
+    id: string;
+    enableSocialInteractions: boolean;
+    ownerProfile: {
+        id: string;
+        type: SchemaTypes.ProfileType;
+    };
+    allProducts: Array<{
+        id: string;
+        title: string;
+        shortDescription: string | null;
+        link: string | null;
+        media: Array<{
+            url: string;
+            thumbnailUrl: string | null;
+            type: SchemaTypes.MediaType;
+        }>;
+        brand: {
+            name: string;
+        } | null;
+        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;
+        price: number | null;
+        priceInfo: string | null;
+        currency: SchemaTypes.Currency | null;
+        type: SchemaTypes.AdType;
+        ctaButton: {
+            background: string;
+            textColor: string;
+            text: string;
+            url: string;
+            border: string;
+        } | null;
+        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 ShortVideosPlayerPayloadFragmentDoc: DocumentNode<ShortVideosPlayerPayloadFragment, unknown>;
 export declare const GetShortVideosDocument: DocumentNode<GetShortVideosQuery, GetShortVideosQueryVariables>;

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

@@ -1,3 +1,199 @@
+export const ShortVideosPlayerPayloadFragmentDoc = {
+    kind: 'Document',
+    definitions: [
+        {
+            kind: 'FragmentDefinition',
+            name: { kind: 'Name', value: 'ShortVideosPlayerPayloadFragment' },
+            typeCondition: { kind: 'NamedType', name: { kind: 'Name', value: 'Post' } },
+            selectionSet: {
+                kind: 'SelectionSet',
+                selections: [
+                    { kind: 'FragmentSpread', name: { kind: 'Name', value: 'ShortVideoViewerPayloadFragment' } },
+                    {
+                        kind: 'Field',
+                        name: { kind: 'Name', value: 'ownerProfile' },
+                        selectionSet: {
+                            kind: 'SelectionSet',
+                            selections: [
+                                { kind: 'Field', name: { kind: 'Name', value: 'id' } },
+                                { kind: 'Field', name: { kind: 'Name', value: 'type' } }
+                            ]
+                        }
+                    }
+                ]
+            }
+        },
+        {
+            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: 'allProducts' },
+                        selectionSet: {
+                            kind: 'SelectionSet',
+                            selections: [
+                                { kind: 'Field', name: { kind: 'Name', value: 'id' } },
+                                { kind: 'Field', name: { kind: 'Name', value: 'title' } },
+                                { kind: 'Field', name: { kind: 'Name', value: 'shortDescription' } },
+                                { kind: 'Field', name: { kind: 'Name', value: 'link' } },
+                                {
+                                    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: 'EnumValue', value: 'SMALL' } }]
+                                            },
+                                            {
+                                                kind: 'Field',
+                                                name: { kind: 'Name', value: 'thumbnailUrl' },
+                                                arguments: [{ kind: 'Argument', name: { kind: 'Name', value: 'scale' }, value: { kind: 'EnumValue', value: 'SMALL' } }]
+                                            },
+                                            { kind: 'Field', name: { kind: 'Name', value: 'type' } }
+                                        ]
+                                    }
+                                },
+                                {
+                                    kind: 'Field',
+                                    name: { kind: 'Name', value: 'brand' },
+                                    selectionSet: { kind: 'SelectionSet', selections: [{ kind: 'Field', name: { kind: 'Name', value: 'name' } }] }
+                                },
+                                {
+                                    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: 'price' } },
+                                { kind: 'Field', name: { kind: 'Name', value: 'priceInfo' } },
+                                { kind: 'Field', name: { kind: 'Name', value: 'currency' } },
+                                {
+                                    kind: 'Field',
+                                    name: { kind: 'Name', value: 'ctaButton' },
+                                    selectionSet: {
+                                        kind: 'SelectionSet',
+                                        selections: [
+                                            { kind: 'Field', name: { kind: 'Name', value: 'background' } },
+                                            { kind: 'Field', name: { kind: 'Name', value: 'textColor' } },
+                                            { kind: 'Field', name: { kind: 'Name', value: 'text' } },
+                                            { kind: 'Field', name: { kind: 'Name', value: 'url' } },
+                                            { kind: 'Field', name: { kind: 'Name', value: 'border' } }
+                                        ]
+                                    }
+                                },
+                                { 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' },
+                                                arguments: [{ kind: 'Argument', name: { kind: 'Name', value: 'scale' }, value: { kind: 'EnumValue', value: 'SMALL' } }]
+                                            },
+                                            {
+                                                kind: 'Field',
+                                                name: { kind: 'Name', value: 'thumbnailUrl' },
+                                                arguments: [{ kind: 'Argument', name: { kind: 'Name', value: 'scale' }, value: { kind: 'EnumValue', value: 'SMALL' } }]
+                                            },
+                                            { 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' } }] }
+                                }
+                            ]
+                        }
+                    }
+                ]
+            }
+        }
+    ]
+};
 export const GetShortVideosDocument = {
     kind: 'Document',
     definitions: [
@@ -34,7 +230,7 @@ export const GetShortVideosDocument = {
                                     name: { kind: 'Name', value: 'items' },
                                     selectionSet: {
                                         kind: 'SelectionSet',
-                                        selections: [{ kind: 'FragmentSpread', name: { kind: 'Name', value: 'ShortVideoViewerPayloadFragment' } }]
+                                        selections: [{ kind: 'FragmentSpread', name: { kind: 'Name', value: 'ShortVideosPlayerPayloadFragment' } }]
                                     }
                                 },
                                 { kind: 'Field', name: { kind: 'Name', value: 'continuationToken' } }
@@ -53,11 +249,6 @@ export const GetShortVideosDocument = {
                 selections: [
                     { kind: 'Field', name: { kind: 'Name', value: 'id' } },
                     { kind: 'Field', name: { kind: 'Name', value: 'enableSocialInteractions' } },
-                    {
-                        kind: 'Field',
-                        name: { kind: 'Name', value: 'ownerProfile' },
-                        selectionSet: { kind: 'SelectionSet', selections: [{ kind: 'Field', name: { kind: 'Name', value: 'id' } }] }
-                    },
                     {
                         kind: 'Field',
                         name: { kind: 'Name', value: 'allProducts' },
@@ -217,6 +408,28 @@ export const GetShortVideosDocument = {
                     }
                 ]
             }
+        },
+        {
+            kind: 'FragmentDefinition',
+            name: { kind: 'Name', value: 'ShortVideosPlayerPayloadFragment' },
+            typeCondition: { kind: 'NamedType', name: { kind: 'Name', value: 'Post' } },
+            selectionSet: {
+                kind: 'SelectionSet',
+                selections: [
+                    { kind: 'FragmentSpread', name: { kind: 'Name', value: 'ShortVideoViewerPayloadFragment' } },
+                    {
+                        kind: 'Field',
+                        name: { kind: 'Name', value: 'ownerProfile' },
+                        selectionSet: {
+                            kind: 'SelectionSet',
+                            selections: [
+                                { kind: 'Field', name: { kind: 'Name', value: 'id' } },
+                                { kind: 'Field', name: { kind: 'Name', value: 'type' } }
+                            ]
+                        }
+                    }
+                ]
+            }
         }
     ]
 };

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

@@ -2,8 +2,16 @@
 query GetShortVideos($input: EmbedPostsInput!, $image_scale: ImageScale = ORIGINAL_ENCODED) {
   shortVideos: embedPosts(input: $input) {
     items {
-      ...ShortVideoViewerPayloadFragment
+      ...ShortVideosPlayerPayloadFragment
     }
     continuationToken
   }
 }
+
+fragment ShortVideosPlayerPayloadFragment on Post {
+  ...ShortVideoViewerPayloadFragment
+  ownerProfile {
+    id
+    type
+  }
+}

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

@@ -56,7 +56,9 @@ const onItemActivated = (id) => {
         return;
     }
     background = resolveVideoCover(shortVideo);
-    analyticsHandler === null || analyticsHandler === void 0 ? void 0 : analyticsHandler.setOrganizationId(shortVideo.organizationId);
+    if (shortVideo.analyticsOrganizationId) {
+        analyticsHandler === null || analyticsHandler === void 0 ? void 0 : analyticsHandler.setOrganizationId(shortVideo.analyticsOrganizationId);
+    }
     analyticsHandler === null || analyticsHandler === void 0 ? void 0 : analyticsHandler.trackShortVideoView(id);
     (_a = on === null || on === void 0 ? void 0 : on.videoActivated) === null || _a === void 0 ? void 0 : _a.call(on, id);
 };
@@ -137,8 +139,8 @@ const onShortVideoProductImpression = (productId, videoId) => {
                 showControls={uiManager.showShortVideoOverlay}
                 localization={localization.shortVideoViewerLocalization}
                 on={{
-                  productClick: (productId: string) => onShortVideoProductClick(productId, item.id),
-                  productImpression: (productId: string, videoId: string) => onShortVideoProductImpression(productId, videoId)
+                  productClick: (productId) => onShortVideoProductClick(productId, item.id),
+                  productImpression: (productId, videoId) => onShortVideoProductImpression(productId, videoId)
                 }} />
             {/snippet}
           </PlayerSlider>
@@ -155,7 +157,7 @@ const onShortVideoProductImpression = (productId, videoId) => {
         playerLogo={playerLogo}
         on={{
           closePlayer: on?.playerClosed,
-          productClick: (productId: string) => onShortVideoProductClick(productId, buffer?.current?.id || ''),
+          productClick: (productId) => onShortVideoProductClick(productId, buffer?.current?.id || ''),
           productImpression: onShortVideoProductImpression
         }} />
     {:else}

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

@@ -8,8 +8,11 @@ export interface IShortVideoAnalyticsHandler {
     trackShortVideoProductImpression: (productId: string, videoId: string) => void;
     trackShortVideoProductClick: (productId: string, videoId: string) => void;
 }
+export type ShortVideoPlayerModel = ShortVideoViewerModel & {
+    analyticsOrganizationId: string | null;
+};
 export type ShortVideoPlayerProps = PlayerSettings & {
-    dataProvider: IPlayerItemsProvider<ShortVideoViewerModel>;
+    dataProvider: IPlayerItemsProvider<ShortVideoPlayerModel>;
     analyticsHandler?: IShortVideoAnalyticsHandler;
 };
 export type PlayerSettings = {

package/dist/streams/layout/models/mapper.js

@@ -2,7 +2,6 @@ import { MediaType } from '../../../core/enums';
 export const mapToShortVideoViewerModel = (model) => {
     return {
         id: model.id,
-        organizationId: model.organizationId,
         media: model.media.type === MediaType.Image
             ? { isImage: true, url: model.media.url }
             : {

package/dist/streams/layout/models/stream-layout-short-video-model.d.ts

@@ -3,7 +3,6 @@ import type { StreamLayoutMediaItemModel } from './stream-layout-media-item-mode
 import type { StreamLayoutPostHeaderModel } from './stream-layout-post-header-model';
 export type StreamLayoutShortVideoModel = {
     id: string;
-    organizationId: string;
     media: StreamLayoutMediaItemModel;
     text: string | null;
     header: StreamLayoutPostHeaderModel | null;

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

@@ -1,3 +1,4 @@
+import { ProfileType } from '../../core/enums';
 export const mapToStreamPlayerModel = (payload) => {
     const headerDataProvider = payload.availableFrom ?? payload.ownerProfile;
     return {
@@ -7,7 +8,7 @@ export const mapToStreamPlayerModel = (payload) => {
         cover: payload.cover?.url || null,
         createdAt: payload.createdAt,
         publishedAt: payload.publishedAt,
-        organizationId: payload.ownerProfile.id,
+        organizationId: payload.ownerProfile.type === ProfileType.Organization ? payload.ownerProfile.id : null,
         header: {
             name: headerDataProvider.name,
             image: headerDataProvider.image

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

@@ -18,6 +18,7 @@ export type GetStreamQuery = {
             image: string | null;
             name: string;
             id: string;
+            type: SchemaTypes.ProfileType;
         };
         availableFrom: {
             image: string;
@@ -56,6 +57,7 @@ export type StreamPlayerPayloadFragment = {
         image: string | null;
         name: string;
         id: string;
+        type: SchemaTypes.ProfileType;
     };
     availableFrom: {
         image: string;

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

@@ -26,7 +26,8 @@ export const StreamPlayerPayloadFragmentDoc = {
                             selections: [
                                 { kind: 'Field', name: { kind: 'Name', value: 'image' } },
                                 { kind: 'Field', name: { kind: 'Name', value: 'name' } },
-                                { kind: 'Field', name: { kind: 'Name', value: 'id' } }
+                                { kind: 'Field', name: { kind: 'Name', value: 'id' } },
+                                { kind: 'Field', name: { kind: 'Name', value: 'type' } }
                             ]
                         }
                     },
@@ -108,7 +109,8 @@ export const GetStreamDocument = {
                             selections: [
                                 { kind: 'Field', name: { kind: 'Name', value: 'image' } },
                                 { kind: 'Field', name: { kind: 'Name', value: 'name' } },
-                                { kind: 'Field', name: { kind: 'Name', value: 'id' } }
+                                { kind: 'Field', name: { kind: 'Name', value: 'id' } },
+                                { kind: 'Field', name: { kind: 'Name', value: 'type' } }
                             ]
                         }
                     },

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

@@ -27,6 +27,7 @@ fragment StreamPlayerPayloadFragment on Stream {
     image
     name
     id
+    type
   }
   availableFrom {
     image

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

@@ -15,11 +15,14 @@ export declare class StreamPlayerBuffer implements IPlayerBuffer<StreamPageViewe
     constructor(init: {
         streamId: string;
         dataProvider: IStreamPlayerDataProvider;
+        on?: {
+            preloaded?: (self: StreamPlayerBuffer) => void;
+        };
     });
     loadMore: () => Promise<StreamPageViewerModel[]>;
     loadNext: () => Promise<void>;
     loadPrevious: () => Promise<void>;
     setIndex: (index: number) => void;
-    reset: () => Promise<void>;
+    reset: (onPreloaded?: (self: StreamPlayerBuffer) => void) => Promise<void>;
     private warmUpBuffer;
 }

package/dist/streams/stream-player/stream-player-buffer.svelte.js

@@ -14,7 +14,7 @@ export class StreamPlayerBuffer {
     _loaded = $state.raw([]);
     _pagesLoader;
     constructor(init) {
-        const { streamId, dataProvider } = init;
+        const { streamId, dataProvider, on } = init;
         this._pagesLoader = new CursorDataLoader({
             loadPage: async (continuationToken) => {
                 const result = await dataProvider.getStreamPages(streamId, continuationToken.toNextChunkString());
@@ -26,7 +26,7 @@ export class StreamPlayerBuffer {
                 };
             }
         });
-        this.warmUpBuffer();
+        this.warmUpBuffer(on?.preloaded);
         this.loadNext = Utils.throttle(this.loadNext, this.animationDuration);
         this.loadPrevious = Utils.throttle(this.loadPrevious, this.animationDuration);
     }
@@ -48,21 +48,31 @@ export class StreamPlayerBuffer {
         this._currentIndex = index;
         this.warmUpBuffer();
     };
-    reset = async () => {
+    reset = async (onPreloaded) => {
         this._loaded = [];
         this._currentIndex = -1;
         await this._pagesLoader.reset();
-        this.warmUpBuffer();
+        this.warmUpBuffer(onPreloaded);
     };
-    warmUpBuffer = async () => {
+    warmUpBuffer = async (onPreloaded) => {
         const bufferSize = 2;
         if (this.loaded.length >= this.currentIndex + bufferSize) {
+            if (onPreloaded) {
+                onPreloaded(this);
+            }
             return;
         }
-        await this.loadMore();
-        if (this._currentIndex < 0) {
-            if (this.loaded.length > 0) {
-                this._currentIndex = 0;
+        try {
+            await this.loadMore();
+            if (this._currentIndex < 0) {
+                if (this.loaded.length > 0) {
+                    this._currentIndex = 0;
+                }
+            }
+        }
+        finally {
+            if (onPreloaded) {
+                onPreloaded(this);
             }
         }
     };

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

@@ -8,6 +8,7 @@
     });
 };
 import { handleEsc } from '../../core/document.event-handlers';
+import { preloadImage } from '../../core/image-preloader';
 import { toastrWarning } from '../../core/toastr';
 import { ShortVideoViewer } from '../../short-videos/short-video-viewer';
 import { mapToShortVideoViewerModel } from '../layout/models';
@@ -21,12 +22,12 @@ import { default as Overview } from './stream-overview.svelte';
 import { StreamPlayerBuffer } from './stream-player-buffer.svelte';
 import { StreamPlayerLocalization } from './stream-player-localization';
 import { StreamPlayerUiManager } from './ui-manager.svelte';
-import { onMount } from 'svelte';
+import { onMount, untrack } from 'svelte';
 let { streamId, dataProvider, analyticsHandler, localization: localizationInit = 'en', showStreamsCloudWatermark, postSocialInteractionsHandler, on } = $props();
 const localization = $derived(new StreamPlayerLocalization(localizationInit));
 let model = $state(null);
 let buffer = $state.raw(null);
-let loading = $state(true);
+let bufferIsLoading = $state(false);
 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 everTouched = $state(false);
 let totalEngagementTimeSeconds = 0;
@@ -48,27 +49,49 @@ const resetInactivityTimer = () => {
         isActive = false;
     }, inactiveTimeSeconds * 1000);
 };
-onMount(() => __awaiter(void 0, void 0, void 0, function* () {
-    var _a, _b;
-    uiManager.overviewCollapsed = window && window.innerWidth < window.innerHeight;
-    try {
-        const stream = yield dataProvider.getStream(streamId);
-        if (!stream) {
-            toastrWarning(localization.streamNotFound);
-            (_a = on === null || on === void 0 ? void 0 : on.playerClosed) === null || _a === void 0 ? void 0 : _a.call(on);
-            return;
-        }
-        analyticsHandler === null || analyticsHandler === void 0 ? void 0 : analyticsHandler.setOrganizationId(stream.organizationId);
-        (_b = on === null || on === void 0 ? void 0 : on.streamActivated) === null || _b === void 0 ? void 0 : _b.call(on, { title: stream.title, image: stream.cover });
-        // start tracking the stream
-        model = stream;
-        buffer = new StreamPlayerBuffer({ streamId, dataProvider: dataProvider });
-        analyticsHandler === null || analyticsHandler === void 0 ? void 0 : analyticsHandler.trackStreamView(stream.id);
-        startActivityTracking();
+$effect(() => {
+    void dataProvider;
+    untrack(() => {
+        initBuffer(dataProvider);
+    });
+});
+const initBuffer = (dataProvider) => __awaiter(void 0, void 0, void 0, function* () {
+    var _a;
+    bufferIsLoading = true;
+    const stream = yield dataProvider.getStream(streamId);
+    if (!stream) {
+        toastrWarning(localization.streamNotFound);
+        onPlayerClose();
+        return;
     }
-    finally {
-        loading = false;
+    if (stream.organizationId) {
+        analyticsHandler === null || analyticsHandler === void 0 ? void 0 : analyticsHandler.setOrganizationId(stream.organizationId);
     }
+    (_a = on === null || on === void 0 ? void 0 : on.streamActivated) === null || _a === void 0 ? void 0 : _a.call(on, { title: stream.title, image: stream.cover });
+    // start tracking the stream
+    model = stream;
+    buffer = new StreamPlayerBuffer({
+        streamId,
+        dataProvider: dataProvider,
+        on: {
+            preloaded: (instance) => __awaiter(void 0, void 0, void 0, function* () {
+                if (instance.loaded.length) {
+                    const coverUrl = instance.loaded[0].cover;
+                    if (coverUrl) {
+                        yield preloadImage(coverUrl);
+                    }
+                    background = coverUrl;
+                }
+                buffer = instance;
+                bufferIsLoading = false;
+            })
+        }
+    });
+    analyticsHandler === null || analyticsHandler === void 0 ? void 0 : analyticsHandler.trackStreamView(stream.id);
+    startActivityTracking();
+});
+onMount(() => __awaiter(void 0, void 0, void 0, function* () {
+    uiManager.overviewCollapsed = window && window.innerWidth < window.innerHeight;
 }));
 const startActivityTracking = () => {
     trackingInterval = setInterval(() => {
@@ -175,10 +198,10 @@ const onProgress = (pageId, videoId, progress) => {
 
 <svelte:document onkeydown={(e) => handleEsc(e, onPlayerClose)} />
 
-<div class="stream-player-container" style={background ? `--background-image: url(${background})` : null}>
-  {#if loading}
-    <Loading positionAbsoluteCenter={true} timeout={600} />
-  {/if}
+<div
+  class="stream-player-container"
+  class:stream-player-container--background-loading={!background}
+  style={background ? `--background-image: url(${background})` : null}>
   <div class="stream-player" style={uiManager.globalCssVariables}>
     {#if showStreamsCloudWatermark}
       <div class="stream-player__watermark">
@@ -187,7 +210,7 @@ const onProgress = (pageId, videoId, progress) => {
         </a>
       </div>
     {/if}
-    {#if buffer && model}
+    {#if buffer && model && !bufferIsLoading}
       <SpotlightLayout ratio={9 / 16} on={{ dimensionsChanged: handleDimensionsChanged }}>
         <div class="stream-player__content" use:contentMounted>
           <PlayerSlider
@@ -211,8 +234,8 @@ const onProgress = (pageId, videoId, progress) => {
                   model={mapToShortVideoViewerModel(item.shortVideo)}
                   on={{
                     progress: (progress) => onProgress(item.id, item.shortVideo.id, progress),
-                    productClick: (productId: string) => onShortVideoProductClick(productId, item.shortVideo.id),
-                    productImpression: (productId: string, videoId: string) => onShortVideoProductImpression(productId, videoId)
+                    productClick: (productId) => onShortVideoProductClick(productId, item.shortVideo.id),
+                    productImpression: (productId, videoId) => onShortVideoProductImpression(productId, videoId)
                   }}
                   autoplay="on-appearance"
                   socialInteractionsHandler={postSocialInteractionsHandler}
@@ -249,6 +272,8 @@ const onProgress = (pageId, videoId, progress) => {
           productClick: (productId: String) => onProductCardClick(productId),
           productImpression: (productId: String) => onStreamProductImpression(productId)
         }} />
+    {:else}
+      <Loading positionFixedCenter={true} timeout={1000} />
     {/if}
   </div>
 </div>
@@ -274,11 +299,16 @@ const onProgress = (pageId, videoId, progress) => {
   container-type: inline-size;
   display: flex;
   position: relative;
+}
+.stream-player-container {
   background-color: #c1c1c1;
   background-image: var(--background-image);
   background-size: cover;
   background-blend-mode: multiply;
 }
+.stream-player-container--background-loading {
+  background-color: transparent;
+}
 
 .stream-player {
   display: flex;

package/dist/streams/stream-player/types.d.ts

@@ -9,7 +9,7 @@ export type StreamPlayerModel = {
     subTitle: string | null;
     createdAt: string;
     publishedAt: string | null;
-    organizationId: string;
+    organizationId: string | null;
     header: {
         image: string | null;
         name: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@streamscloud/embeddable",
-  "version": "6.3.11",
+  "version": "6.4.0",
   "author": "StreamsCloud",
   "repository": {
     "type": "git",