@streamscloud/embeddable 9.0.0 → 10.1.0

package/dist/media-center/config/operations.graphql

@@ -18,27 +18,3 @@ query GetMediaPageConfig($mediaPageId: String!) {
     }
   }
 }
-
-# noinspection GraphQLSchemaValidation
-query GetPosts($input: EmbedPostsInput!, $image_scale: ImageScale = ORIGINAL_ENCODED) {
-  posts: embedPosts(input: $input) {
-    items {
-      ...PostsPlayerPayloadFragment
-    }
-    continuationToken
-  }
-}
-
-query GetStreams($input: EmbedStreamsInput!) {
-  streams: embedStreams(input: $input) {
-    items {
-      id
-      cover {
-        url
-      }
-      title
-      subTitle
-    }
-    continuationToken
-  }
-}

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

@@ -2,7 +2,8 @@ import { PostType } from '../../core/enums';
 import type { IContentCategoryFollowingHandler } from '../categories-following';
 import type { IPostAnalyticsHandler, PostPlayerModel } from '../../posts/posts-player/types';
 import type { IPostSocialInteractionsHandler } from '../../posts/social-interactions';
-import type { IStreamPlayerDataProvider, IStreamAnalyticsHandler } from '../../streams/stream-player/types';
+import type { StreamPageViewerModel } from '../../streams/stream-page-viewer';
+import type { IStreamAnalyticsHandler, StreamPlayerModel } from '../../streams/streams-player/types';
 export interface IMediaCenterConfig {
     getConfig: () => Promise<MediaCenterConfigModel | null>;
     handlers?: {
@@ -33,10 +34,13 @@ export interface IMediaCenterConfig {
             limit: number;
             continuationToken?: string | null;
         }) => Promise<{
-            items: MediaCenterStreamPreviewModel[];
+            items: StreamPlayerModel[];
+            continuationToken: string | null;
+        }>;
+        getStreamPages: (streamId: string, continuationToken: string | null | undefined) => Promise<{
+            items: StreamPageViewerModel[];
             continuationToken: string | null;
         }>;
-        streamPlayerDataProvider: IStreamPlayerDataProvider;
     };
 }
 export type MediaCenterConfigModel = {
@@ -48,12 +52,6 @@ export type MediaCenterConfigModel = {
     }[];
     targetData: MediaCenterTargetDataModel;
 };
-export type MediaCenterStreamPreviewModel = {
-    id: string;
-    title: string;
-    subTitle: string | null;
-    cover: string | null;
-};
 export type MediaCenterTargetDataModel = {
     id: string;
     name: string;

package/dist/media-center/media-center/cmp.media-center.svelte

@@ -10,10 +10,10 @@
 import { horizontalWheelScroll } from '../../core/actions';
 import { Utils } from '../../core/utils';
 import { default as PostsPlayerView } from '../../posts/posts-player/posts-player-view.svelte';
-import { default as StreamPlayerView } from '../../streams/stream-player/stream-player-view.svelte';
+import { default as StreamsPlayerView } from '../../streams/streams-player/streams-player-view.svelte';
 import { Icon } from '../../ui/icon';
 import { Loading } from '../../ui/loading';
-import { PlayerButton } from '../../ui/player-button';
+import { PlayerButton } from '../../ui/player/button';
 import { default as DesktopCategoriesSelector } from './desktop-categories-selector.svelte';
 import { DiscoverPanelHandler } from './discover-panel-handler.svelte';
 import { default as DiscoverPanel } from './discover-panel.svelte';
@@ -23,6 +23,7 @@ import { default as MobileControlsPanel } from './mobile-controls-panel.svelte';
 import { makePostPlayerItemsProvider } from './post-player-provider-generator';
 import { StreamsInCategoryPanelHandler } from './streams-in-category-panel-handler.svelte';
 import { default as StreamsInCategoryPanel } from './streams-in-category-panel.svelte';
+import { makeStreamsPlayerDataProvider } from './streams-player-provider-generator';
 import IconLineHorizontal3 from '@fluentui/svg-icons/icons/line_horizontal_3_20_regular.svg?raw';
 import IconScreenSearch from '@fluentui/svg-icons/icons/screen_search_20_regular.svg?raw';
 import { tick } from 'svelte';
@@ -140,7 +141,7 @@ const activateSelectedShortVideoPlayer = (shortVideo) => {
     discoverHandler.deactivate();
     streamsInCategoryHandler.deactivate();
 };
-const activateSelectedStreamPlayer = (id) => {
+const activateSelectedStreamPlayer = (stream) => {
     var _a, _b;
     if (!config) {
         return;
@@ -148,7 +149,21 @@ const activateSelectedStreamPlayer = (id) => {
     mediaCenterMode = 'stream';
     computedPlayerProps = {
         mode: 'stream',
-        props: Object.assign({ streamId: id, dataProvider: config.streamPlayer.streamPlayerDataProvider, analyticsHandler: (_a = config.handlers) === null || _a === void 0 ? void 0 : _a.analyticsHandler, postSocialInteractionsHandler: (_b = config.handlers) === null || _b === void 0 ? void 0 : _b.socialInteractionsHandler }, commonPlayerSettings)
+        props: Object.assign({ dataProvider: makeStreamsPlayerDataProvider({ config, prefetchedStreams: [stream] }), analyticsHandler: (_a = config.handlers) === null || _a === void 0 ? void 0 : _a.analyticsHandler, postSocialInteractionsHandler: (_b = config.handlers) === null || _b === void 0 ? void 0 : _b.socialInteractionsHandler }, commonPlayerSettings)
+    };
+    handler.selectedCategoryId = null;
+    discoverHandler.deactivate();
+    streamsInCategoryHandler.deactivate();
+};
+const activateSelectedStreamOfCategoryPlayer = (id, prefetchedStreams, categoryId) => {
+    var _a, _b;
+    if (!config) {
+        return;
+    }
+    mediaCenterMode = 'stream';
+    computedPlayerProps = {
+        mode: 'stream',
+        props: Object.assign({ dataProvider: makeStreamsPlayerDataProvider({ config, prefetchedStreams: prefetchedStreams, initialStreamId: id, categoryId }), analyticsHandler: (_a = config.handlers) === null || _a === void 0 ? void 0 : _a.analyticsHandler, postSocialInteractionsHandler: (_b = config.handlers) === null || _b === void 0 ? void 0 : _b.socialInteractionsHandler }, commonPlayerSettings)
     };
     handler.selectedCategoryId = null;
     discoverHandler.deactivate();
@@ -272,7 +287,7 @@ const onWidthAnchorMounted = (node) => {
         callbacks: { onHeaderHeightChanged, onExtraActionsForMobileControlsPanelDetermined }
       }} />
   {:else if computedPlayerProps.mode === 'stream'}
-    <StreamPlayerView
+    <StreamsPlayerView
       {...computedPlayerProps.props}
       mediaCenterData={{
         controlsPanel: handler.categories.length ? controlsPanel : undefined,
@@ -290,13 +305,18 @@ const onWidthAnchorMounted = (node) => {
       <DiscoverPanel
         handler={discoverHandler}
         localization={localization}
-        on={{ shortVideoSelected: (shortVideo) => activateSelectedShortVideoPlayer(shortVideo), streamSelected: (id) => activateSelectedStreamPlayer(id) }} />
+        on={{
+          shortVideoSelected: (shortVideo) => activateSelectedShortVideoPlayer(shortVideo),
+          streamSelected: (stream) => activateSelectedStreamPlayer(stream)
+        }} />
     </div>
   {/if}
 
   {#if streamsInCategoryHandler.active}
     <div class="media-center-overlay" style={`top:${headerHeight}px`} transition:fade={{ duration: 300 }}>
-      <StreamsInCategoryPanel handler={streamsInCategoryHandler} on={{ streamSelected: (id) => activateSelectedStreamPlayer(id) }} />
+      <StreamsInCategoryPanel
+        handler={streamsInCategoryHandler}
+        on={{ streamSelected: (id, categoryId, streams) => activateSelectedStreamOfCategoryPlayer(id, streams, categoryId) }} />
     </div>
   {/if}
 

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

@@ -1,13 +1,13 @@
 import type { Locale } from '../../core/locale';
 import type { IMediaCenterConfig } from '../config/types';
 import type { PostPlayerProps } from '../../posts/posts-player/types';
-import type { StreamPlayerProps } from '../../streams/stream-player/types';
+import type { StreamsPlayerProps } from '../../streams/streams-player/types';
 type PlayerProps = {
     mode: 'posts';
     props: PostPlayerProps;
 } | {
     mode: 'stream';
-    props: StreamPlayerProps;
+    props: StreamsPlayerProps;
 };
 type Props = {
     config: IMediaCenterConfig | null;

package/dist/media-center/media-center/discover-panel-handler.svelte.d.ts

@@ -2,7 +2,7 @@ import type { TrackingParams } from '../../marketing-tracking';
 import type { IMediaCenterConfig } from '..';
 import type { PostPlayerModel } from '../../posts/posts-player';
 import type { ProductCardModel } from '../../products/product-card';
-import type { MediaCenterStreamModel } from './types';
+import type { StreamPlayerModel } from '../../streams/streams-player';
 export declare class DiscoverPanelHandler {
     private readonly config;
     private _activated;
@@ -11,7 +11,7 @@ export declare class DiscoverPanelHandler {
     private _shortVideos;
     private _products;
     constructor(config: IMediaCenterConfig | null);
-    get streamSectionItems(): MediaCenterStreamModel[];
+    get streamSectionItems(): StreamPlayerModel[];
     get shortVideoSectionItems(): ShortVideoSectionItemType[];
     get activated(): boolean;
     get active(): boolean;

package/dist/media-center/media-center/discover-panel.svelte

@@ -16,7 +16,7 @@ let { handler, localization, on } = $props();
         </div>
         <div class="media-center-overview__section-content">
           {#each handler.streamSectionItems as item (item.id)}
-            <StreamCard stream={item} on={{ click: () => on.streamSelected(item.id) }}></StreamCard>
+            <StreamCard stream={item} on={{ click: () => on.streamSelected(item) }}></StreamCard>
           {/each}
         </div>
       </div>

package/dist/media-center/media-center/discover-panel.svelte.d.ts

@@ -1,4 +1,5 @@
 import type { PostPlayerModel } from '../../posts/posts-player';
+import type { StreamPlayerModel } from '../../streams/streams-player';
 import { DiscoverPanelHandler } from './discover-panel-handler.svelte';
 import { MediaCenterLocalization } from './media-center-localization';
 type Props = {
@@ -6,7 +7,7 @@ type Props = {
     localization: MediaCenterLocalization;
     on: {
         shortVideoSelected: (shortVideo: PostPlayerModel) => void;
-        streamSelected: (id: string) => void;
+        streamSelected: (stream: StreamPlayerModel) => void;
     };
 };
 declare const DiscoverPanel: import("svelte").Component<Props, {}, "">;

package/dist/media-center/media-center/post-player-provider-generator.d.ts

@@ -1,8 +1,8 @@
 import type { PostPlayerModel } from '../../posts/posts-player';
-import type { IPlayerItemsProvider } from '../../ui/player-slider';
+import type { IFeedPlayerDataProvider } from '../../ui/player/providers';
 import type { IMediaCenterConfig } from '../config/types';
 export declare const makePostPlayerItemsProvider: (data: {
     config: IMediaCenterConfig;
     categoryId?: string;
     prefetchedItems?: PostPlayerModel[];
-}) => IPlayerItemsProvider<PostPlayerModel>;
+}) => IFeedPlayerDataProvider<PostPlayerModel>;

package/dist/media-center/media-center/post-player-provider-generator.js

@@ -1,6 +1,6 @@
-import { PostType } from '../..';
 import { ContinuationToken } from '../../core/continuation-token';
 import { CursorDataLoader } from '../../core/data-loaders';
+import { PostType } from '../../core/enums';
 export const makePostPlayerItemsProvider = (data) => {
     const { config, categoryId, prefetchedItems = [] } = data;
     const loader = new CursorDataLoader({
@@ -22,6 +22,7 @@ export const makePostPlayerItemsProvider = (data) => {
         }
     });
     return {
+        kind: 'feed',
         initialData: {
             prefetchedItems,
             startIndex: prefetchedItems.length ? 0 : -1

package/dist/media-center/media-center/streams-in-category-panel-handler.svelte.d.ts

@@ -1,13 +1,16 @@
 import type { IMediaCenterConfig } from '../../short-videos/short-videos-player';
-import type { MediaCenterCategoryData, MediaCenterStreamModel } from './types';
+import type { StreamPlayerModel } from '../../streams/streams-player';
+import type { MediaCenterCategoryData } from './types';
 export declare class StreamsInCategoryPanelHandler {
     private readonly config;
     private _activated;
     private _state;
+    private _categoryId;
     private _categoryName;
     private _streams;
     constructor(config: IMediaCenterConfig | null);
-    get streamSectionItems(): MediaCenterStreamModel[];
+    get streamSectionItems(): StreamPlayerModel[];
+    get categoryId(): string;
     get categoryName(): string;
     get activated(): boolean;
     get active(): boolean;

package/dist/media-center/media-center/streams-in-category-panel-handler.svelte.js

@@ -2,6 +2,7 @@ export class StreamsInCategoryPanelHandler {
     config;
     _activated = $state(false);
     _state = $state('loading');
+    _categoryId = $state.raw('');
     _categoryName = $state.raw('');
     _streams = $state.raw([]);
     constructor(config) {
@@ -10,6 +11,9 @@ export class StreamsInCategoryPanelHandler {
     get streamSectionItems() {
         return this._streams;
     }
+    get categoryId() {
+        return this._categoryId;
+    }
     get categoryName() {
         return this._categoryName;
     }
@@ -31,6 +35,7 @@ export class StreamsInCategoryPanelHandler {
         try {
             const streamsResponse = await this.config.streamPlayer.getStreamsCursor({ filter: { categoryId: category.id }, limit: 5 });
             this._categoryName = category.parentName ? `${category.parentName} - ${category.name}` : category.name;
+            this._categoryId = category.id;
             this._streams = streamsResponse.items;
         }
         finally {

package/dist/media-center/media-center/streams-in-category-panel.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">import { StreamCard } from '../../streams/stream-card';
-import { StreamsInCategoryPanelHandler } from './streams-in-category-panel-handler.svelte.js';
+import { StreamsInCategoryPanelHandler } from './streams-in-category-panel-handler.svelte';
 let { handler, on } = $props();
 </script>
 
@@ -12,7 +12,7 @@ let { handler, on } = $props();
         </div>
         <div class="streams-in-category__section-content">
           {#each handler.streamSectionItems as item (item.id)}
-            <StreamCard stream={item} on={{ click: () => on.streamSelected(item.id) }}></StreamCard>
+            <StreamCard stream={item} on={{ click: () => on.streamSelected(item.id, handler.categoryId, handler.streamSectionItems) }}></StreamCard>
           {/each}
         </div>
       </div>

package/dist/media-center/media-center/streams-in-category-panel.svelte.d.ts

@@ -1,8 +1,9 @@
-import { StreamsInCategoryPanelHandler } from './streams-in-category-panel-handler.svelte.js';
+import type { StreamPlayerModel } from '../../streams/streams-player';
+import { StreamsInCategoryPanelHandler } from './streams-in-category-panel-handler.svelte';
 type Props = {
     handler: StreamsInCategoryPanelHandler;
     on: {
-        streamSelected: (id: string) => void;
+        streamSelected: (streamId: string, categoryId: string, streams: StreamPlayerModel[]) => void;
     };
 };
 declare const StreamsInCategoryPanel: import("svelte").Component<Props, {}, "">;

package/dist/media-center/media-center/streams-player-provider-generator.d.ts

@@ -0,0 +1,8 @@
+import type { IStreamsPlayerDataProvider, StreamPlayerModel } from '../../streams/streams-player/types';
+import type { IMediaCenterConfig } from '../config/types';
+export declare const makeStreamsPlayerDataProvider: (data: {
+    config: IMediaCenterConfig;
+    initialStreamId?: string;
+    categoryId?: string;
+    prefetchedStreams?: StreamPlayerModel[];
+}) => IStreamsPlayerDataProvider;

package/dist/media-center/media-center/streams-player-provider-generator.js

@@ -0,0 +1,36 @@
+import { ContinuationToken } from '../../core/continuation-token';
+import { CursorDataLoader } from '../../core/data-loaders';
+export const makeStreamsPlayerDataProvider = (data) => {
+    const { config, categoryId, prefetchedStreams: initialPrefetchedStreams = [], initialStreamId } = data;
+    const loader = new CursorDataLoader({
+        loadPage: async (continuationToken) => {
+            const result = await config.streamPlayer.getStreamsCursor({
+                filter: {
+                    categoryId,
+                    excludeIds: initialPrefetchedStreams.length ? initialPrefetchedStreams.map((i) => i.id) : undefined
+                },
+                continuationToken: continuationToken.toNextChunkString(),
+                limit: 20
+            });
+            const items = result.items;
+            return {
+                items: items,
+                continuationToken: ContinuationToken.fromPayload(result.continuationToken)
+            };
+        }
+    });
+    let prefetchedStreams = initialPrefetchedStreams;
+    if (initialStreamId) {
+        const targetStream = prefetchedStreams.find((stream) => stream.id === initialStreamId);
+        if (targetStream) {
+            prefetchedStreams = [targetStream, ...prefetchedStreams.filter((stream) => stream.id !== initialStreamId)];
+        }
+    }
+    return {
+        initialData: {
+            prefetchedStreams
+        },
+        loadMoreStreams: loader.loadMore,
+        getStreamPages: config.streamPlayer.getStreamPages
+    };
+};

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

@@ -1,10 +1,4 @@
 export type MediaCenterMode = 'stream' | 'posts';
-export type MediaCenterStreamModel = {
-    id: string;
-    title: string;
-    subTitle: string | null;
-    cover: string | null;
-};
 export type MediaCenterCategoryData = {
     id: string;
     name: string;

package/dist/posts/controls/cmp.controls.svelte

@@ -9,7 +9,7 @@
 };
 import { IconColor } from '../../ui/icon';
 import { MediaVolumeManager } from '../../ui/media-playback';
-import { PlayerButton, PlayerButtonsGroup } from '../../ui/player-button';
+import { PlayerButton, PlayerButtonsGroup } from '../../ui/player/button';
 import IconHeartFilled from '@fluentui/svg-icons/icons/heart_20_filled.svg?raw';
 import IconHeart from '@fluentui/svg-icons/icons/heart_28_regular.svg?raw';
 import IconShare from '@fluentui/svg-icons/icons/share_28_regular.svg?raw';

package/dist/posts/data-loaders/index.d.ts

@@ -0,0 +1 @@
+export { getPostsCursor } from './posts-loader';

package/dist/posts/data-loaders/index.js

@@ -0,0 +1 @@
+export { getPostsCursor } from './posts-loader';

package/dist/posts/{posts-player → data-loaders}/mapper.d.ts

@@ -1,3 +1,3 @@
+import type { PostPlayerModel } from '../posts-player/types';
 import type { PostsPlayerPayloadFragment } from './operations.generated';
-import type { PostPlayerModel } from './types';
 export declare const mapToPostPlayerModel: (payload: PostsPlayerPayloadFragment) => PostPlayerModel;

package/dist/{short-videos/data-providers → posts/data-loaders}/operations.generated.d.ts

@@ -1,11 +1,11 @@
 import type * as SchemaTypes from '../../../gql/types';
 import type { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/core';
-export type GetShortVideosQueryVariables = SchemaTypes.Exact<{
+export type GetPostsQueryVariables = SchemaTypes.Exact<{
     input: SchemaTypes.EmbedPostsInput;
     image_scale?: SchemaTypes.InputMaybe<SchemaTypes.ImageScale>;
 }>;
-export type GetShortVideosQuery = {
-    shortVideos: {
+export type GetPostsQuery = {
+    posts: {
         continuationToken: string | null;
         items: Array<{
             id: string;
@@ -86,4 +86,82 @@ export type GetShortVideosQuery = {
         }>;
     };
 };
-export declare const GetShortVideosDocument: DocumentNode<GetShortVideosQuery, GetShortVideosQueryVariables>;
+export type PostsPlayerPayloadFragment = {
+    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;
+        }>;
+        articleData: {
+            title: string;
+            kicker: string | null;
+            articleId: string;
+        } | null;
+        mediaData: {
+            text: string | null;
+        } | null;
+        momentData: {
+            text: string | null;
+        } | null;
+        shortVideoData: {
+            text: string | null;
+        } | null;
+        videoData: {
+            title: string | null;
+            text: string | null;
+        } | null;
+    };
+};
+export declare const PostsPlayerPayloadFragmentDoc: DocumentNode<PostsPlayerPayloadFragment, unknown>;
+export declare const GetPostsDocument: DocumentNode<GetPostsQuery, GetPostsQueryVariables>;