@streamscloud/embeddable 12.1.0 → 13.0.0

package/dist/media-center/media-center/moments/moments-state.svelte.d.ts

@@ -0,0 +1,20 @@
+import type { IMediaCenterDataProvider } from '../..';
+import { type PostPlayerModel } from '../../../posts/posts-player';
+import type { IChunksPlayerDataProvider } from '../../../ui/player/providers';
+export declare class MomentsState {
+    private readonly dataProvider;
+    private momentsSeenLocally;
+    constructor(dataProvider: IMediaCenterDataProvider);
+    get allMoments(): {
+        id: string;
+        cover: string;
+        isSeen: boolean;
+    }[];
+    get unwatchedMoments(): {
+        id: string;
+        cover: string;
+        isSeen: boolean;
+    }[];
+    markMomentAsSeen: (momentId: string) => void;
+    generatePlayerDataProvider: (onEndReached: () => void) => IChunksPlayerDataProvider<PostPlayerModel>;
+}

package/dist/media-center/media-center/moments/moments-state.svelte.js

@@ -0,0 +1,82 @@
+import { PostType } from '../../../core/enums';
+import {} from '../../../posts/posts-player';
+export class MomentsState {
+    dataProvider;
+    momentsSeenLocally = $state.raw([]);
+    constructor(dataProvider) {
+        this.dataProvider = dataProvider;
+    }
+    get allMoments() {
+        return this.dataProvider.model?.moments ?? [];
+    }
+    get unwatchedMoments() {
+        return this.allMoments.filter((s) => !s.isSeen && !this.momentsSeenLocally.includes(s.id));
+    }
+    markMomentAsSeen = (momentId) => {
+        if (!this.momentsSeenLocally.includes(momentId)) {
+            this.momentsSeenLocally = [...this.momentsSeenLocally, momentId];
+        }
+    };
+    generatePlayerDataProvider = (onEndReached) => {
+        const collectionCapacity = 5;
+        const sortedMoments = [...this.allMoments].sort((a, b) => {
+            const aUnwatched = !a.isSeen && !this.momentsSeenLocally.includes(a.id);
+            const bUnwatched = !b.isSeen && !this.momentsSeenLocally.includes(b.id);
+            if (aUnwatched === bUnwatched) {
+                return 0;
+            }
+            return aUnwatched ? -1 : 1;
+        });
+        const ids = sortedMoments.map((m) => m.id);
+        const idOrder = new Map();
+        ids.forEach((id, idx) => idOrder.set(id, idx));
+        const chunksCount = Math.ceil(sortedMoments.length / collectionCapacity);
+        const prefetchedChunks = [];
+        for (let i = 1; i <= chunksCount; i++) {
+            prefetchedChunks.push({
+                id: i.toString()
+            });
+        }
+        return {
+            kind: 'chunks',
+            initialData: {
+                prefetchedChunks
+            },
+            loadMoreChunks: () => {
+                return Promise.resolve([]);
+            },
+            loadChunkItems: async (chunkId, continuationToken) => {
+                const emptyResult = {
+                    items: [],
+                    continuationToken: null
+                };
+                if (continuationToken === null) {
+                    return emptyResult;
+                }
+                const idsStart = (parseInt(chunkId) - 1) * collectionCapacity;
+                const idsEnd = Math.min(idsStart + collectionCapacity, ids.length);
+                const momentsInChunk = ids.slice(idsStart, idsEnd);
+                if (momentsInChunk.length === 0) {
+                    return emptyResult;
+                }
+                const moments = await this.dataProvider.postsPlayer.getPostsCursor({
+                    filter: {
+                        types: [PostType.Moment],
+                        includeIds: momentsInChunk
+                    },
+                    limit: collectionCapacity
+                });
+                const items = moments.items.sort((a, b) => {
+                    const ia = idOrder.get(a.id) ?? Number.MAX_SAFE_INTEGER;
+                    const ib = idOrder.get(b.id) ?? Number.MAX_SAFE_INTEGER;
+                    return ia - ib;
+                });
+                return {
+                    items,
+                    continuationToken: null
+                };
+            },
+            onEndReached
+        };
+    };
+}

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

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

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

@@ -1,12 +1,12 @@
 export class StreamsInCategoryPanelHandler {
-    config;
+    dataProvider;
     _activated = $state(false);
     _state = $state('loading');
     _categoryId = $state.raw('');
     _categoryName = $state.raw('');
     _streams = $state.raw([]);
-    constructor(config) {
-        this.config = config;
+    constructor(dataProvider) {
+        this.dataProvider = dataProvider;
     }
     get streamSectionItems() {
         return this._streams;
@@ -33,7 +33,7 @@ export class StreamsInCategoryPanelHandler {
         this._activated = true;
         this._state = 'loading';
         try {
-            const streamsResponse = await this.config.streamPlayer.getStreamsCursor({ filter: { categoryId: categoryData.id }, limit: 5 });
+            const streamsResponse = await this.dataProvider.streamPlayer.getStreamsCursor({ filter: { categoryId: categoryData.id }, limit: 5 });
             this._categoryName = categoryData.parentName ? `${categoryData.parentName} - ${categoryData.name}` : categoryData.name;
             this._categoryId = categoryData.id;
             this._streams = streamsResponse.items;

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

@@ -63,8 +63,7 @@ let { handler, on } = $props();
   font-size: 1.125rem;
   line-height: 1.75rem;
   font-weight: 500;
-  color: #ffffff;
-  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 6px rgba(0, 0, 0, 0.05);
+  color: var(--sc-mc-color--text-primary);
 }
 .streams-in-category__section-header::before {
   content: "";
@@ -72,7 +71,7 @@ let { handler, on } = $props();
   width: 0.3125rem;
   height: 1.625rem;
   border-radius: 0.125rem;
-  background: #5a8dec;
+  background: var(--sc-mc-color--border-brand);
 }
 .streams-in-category__section-content {
   --product-card--aspect-ratio: 9/16;

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

@@ -1,22 +1,14 @@
 import type { Locale } from '../../core/locale';
-import type { IMediaCenterConfig } from '../config/types';
 import type { PostPlayerModel, PostsPlayerProps } from '../../posts/posts-player/types';
 import type { IStreamsPlayerDataProvider, StreamAmplificationParameters, StreamsPlayerProps } from '../../streams/streams-player/types';
-import type { ICloseOrchestrator } from '../../ui/player/close-orchestrator';
 import type { IPlayerDataProvider } from '../../ui/player/providers';
-export type MediaCenterMode = 'feed' | 'discover';
+export type MediaCenterMode = 'feed' | 'discover' | 'moments';
 export type MediaCenterCategoryData = {
     id: string;
     name: string;
     parentId: string | undefined;
     parentName: string | undefined;
 };
-export type MediaCenterProps = {
-    config: IMediaCenterConfig;
-    settings?: MediaCenterSettings;
-    modeProps: MediaCenterModeProps;
-    closeOrchestrator: ICloseOrchestrator;
-};
 export type MediaCenterModeProps = {
     mode: 'posts';
     props: {
@@ -34,7 +26,7 @@ export type MediaCenterModeProps = {
         }) => void;
     };
 } | {
-    mode: 'discover';
+    mode: 'default';
 };
 export type PlayerProps = {
     type: 'posts';
@@ -43,8 +35,9 @@ export type PlayerProps = {
     type: 'streams';
     props: StreamsPlayerProps;
 };
-export type MediaCenterSettings = {
+export type IMediaCenterSettings = {
     locale?: Locale;
     showStreamsCloudWatermark?: boolean;
     disableBackground?: boolean;
+    theme?: 'light' | 'dark';
 };

package/dist/media-center/membership/index.d.ts

@@ -0,0 +1 @@
+export type { IMediaCenterMembershipHandler } from './types';

package/dist/media-center/membership/index.js

@@ -0,0 +1 @@
+export {};

package/dist/media-center/membership/mock-membership-handler.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { IMediaCenterMembershipHandler } from './types';
+export declare class MockMembershipHandler implements IMediaCenterMembershipHandler {
+    private isJoined;
+    getIsJoined: () => Promise<{
+        readonly isJoined: boolean;
+    }>;
+    join: () => void;
+    leave: () => void;
+    viewMembersList: () => void;
+}

package/dist/media-center/membership/mock-membership-handler.svelte.js

@@ -0,0 +1,21 @@
+export class MockMembershipHandler {
+    isJoined = $state(false);
+    getIsJoined = () => {
+        // eslint-disable-next-line @typescript-eslint/no-this-alias
+        const handler = this;
+        return Promise.resolve({
+            get isJoined() {
+                return handler.isJoined;
+            }
+        });
+    };
+    join = () => {
+        this.isJoined = true;
+    };
+    leave = () => {
+        this.isJoined = false;
+    };
+    viewMembersList = () => {
+        console.warn('MockMembershipHandler.viewMembersList called');
+    };
+}

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

@@ -0,0 +1,10 @@
+export interface IMediaCenterMembershipHandler {
+    getIsJoined: () => PromiseLike<{
+        readonly isJoined: boolean;
+    }>;
+    join: () => PromiseLike<void>;
+    leave: () => PromiseLike<void>;
+    viewMembersList: () => PromiseLike<void>;
+}
+type PromiseLike<T> = T | Promise<T>;
+export {};

package/dist/media-center/membership/types.js

@@ -0,0 +1 @@
+export {};

package/dist/media-center/navigation/index.d.ts

@@ -0,0 +1,2 @@
+export type { IMediaCenterNavigationHandler } from './types';
+export type { MediaCenterState } from './media-center-state';

package/dist/media-center/navigation/index.js

@@ -0,0 +1 @@
+export {};

package/dist/media-center/navigation/media-center-state.d.ts

@@ -0,0 +1,19 @@
+export type MediaCenterState = PostsFeedState | StreamsFeedState | DiscoverState | MomentsState;
+export type PostsFeedState = {
+    mode: 'posts-feed';
+    postId: string;
+    categoryId: string | null;
+};
+export type StreamsFeedState = {
+    mode: 'streams-feed';
+    streamId: string;
+    categoryId: string | null;
+};
+export type DiscoverState = {
+    mode: 'discover';
+    categoryId: string | null;
+};
+export type MomentsState = {
+    mode: 'moments';
+    momentId: string;
+};

package/dist/media-center/navigation/media-center-state.js

@@ -0,0 +1 @@
+export {};

package/dist/media-center/navigation/mock-navigation-handler.svelte.d.ts

@@ -0,0 +1,6 @@
+import type { MediaCenterState } from './media-center-state';
+import type { IMediaCenterNavigationHandler } from './types';
+export declare class MockNavigationHandler implements IMediaCenterNavigationHandler {
+    initialState: undefined;
+    onChange: (state: MediaCenterState) => void;
+}

package/dist/media-center/navigation/mock-navigation-handler.svelte.js

@@ -0,0 +1,6 @@
+export class MockNavigationHandler {
+    initialState = undefined;
+    onChange = (state) => {
+        console.warn(state);
+    };
+}

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

@@ -0,0 +1,5 @@
+import type { MediaCenterState } from './media-center-state';
+export interface IMediaCenterNavigationHandler {
+    initialState?: MediaCenterState;
+    onChange: (state: MediaCenterState) => void;
+}

package/dist/media-center/navigation/types.js

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,45 @@
+<script lang="ts">var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { MediaCenterProxy } from '../media-center/media-center';
+import { MediaCenterSettings } from '../media-center/media-center/media-center-settings.svelte';
+import { CloseOrchestrator } from '../ui/player/close-orchestrator';
+import { createShadowRoot } from '../ui/shadow-dom';
+import { mount, unmount } from 'svelte';
+let { dataProvider, settings, dynamicActions } = $props();
+const settingsHolder = new MediaCenterSettings(settings);
+$effect(() => {
+    settingsHolder.patch(settings);
+});
+const initHost = (node) => {
+    const shadowRoot = createShadowRoot(node);
+    const mounted = mount(MediaCenterProxy, {
+        target: shadowRoot,
+        props: {
+            dataProvider,
+            settings: settingsHolder,
+            modeProps: { mode: 'default' },
+            dynamicActions,
+            closeOrchestrator: new CloseOrchestrator({
+                closeFn: () => __awaiter(void 0, void 0, void 0, function* () {
+                    yield unmount(mounted);
+                }),
+                canClose: false
+            })
+        }
+    });
+    return {
+        destroy: () => {
+            unmount(mounted);
+        }
+    };
+};
+</script>
+
+<div class="streams-player-host" use:initHost></div>

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

@@ -0,0 +1,11 @@
+import type { IMediaCenterDataProvider } from '../media-center';
+import type { IMediaCenterSettings } from '../media-center/media-center/types';
+import { type Snippet } from 'svelte';
+type Props = {
+    dataProvider: IMediaCenterDataProvider;
+    settings?: IMediaCenterSettings;
+    dynamicActions?: Snippet;
+};
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

package/dist/media-page/index.d.ts

@@ -1,42 +1,36 @@
 import type { Locale } from '../core/locale';
-import { type IMediaCenterConfig } from '../media-center/config/types';
-export type { IMediaCenterConfig };
-export { mapToPostPlayerModel } from '../posts/data-loaders/mapper';
+import { type IMediaCenterDataProvider } from '../media-center/config/types';
+import type { PostPlayerModel } from '../posts/posts-player';
+import type { IStreamsPlayerDataProvider } from '../streams/streams-player';
+import type { StreamAmplificationParameters } from '../streams/streams-player/types';
+import type { IPlayerDataProvider } from '../ui/player/providers';
+export { default as MediaPage } from './cmp.media-page.svelte';
+export type { IMediaCenterDataProvider };
 /**
  * Opens the media page modal.
  *
- * Two overloads (mutually exclusive; enforced by TypeScript):
- * - Config mode: openMediaPageModal({ mediaCenterConfig, viewerSettings?, on? })
- * - Internal config mode: openMediaPageModal({ id, initiator, graphqlOrigin?, viewerSettings?, on? })
- *
  * @param init Configuration options.
  *
- * Config mode (overload 1)
- * @param {IMediaCenterConfig} init.mediaCenterConfig
+ * Config mode
+ * @param {IMediaCenterDataProvider} init.dataProvider
  *   Configuration for the media center.
  *
- * Internal config mode (overload 2)
- * @param {string} init.id
- *   Media page ID, used to construct an internal media-center config.
- * @param {string} init.initiator
- *   Initiator identifier (used for tracking/analytics and GraphQL).
- * @param {string} [init.graphqlOrigin]
- *   Optional GraphQL origin (base URL). If omitted, the default origin is determined internally.
- *
  * Common (optional)
- * @param {MediaPageViewerSettings} [init.viewerSettings]
+ * @param {Object} [init.viewerSettings]
  *   Viewer UI and behavior settings.
  *
- *   Fields of MediaPageViewerSettings:
- *   - {boolean} [disableBackground]
- *       If true , hides the viewer background image.
- *   - {Locale} [locale='en']
+ *   Fields of `viewerSettings`:
+ *   - {boolean} [viewerSettings.disableBackground]
+ *       If true, hides the viewer background image.
+ *   - {Locale} [viewerSettings.locale]
  *       Localization for the viewer UI. Supported values: 'en' | 'no'.
  *       If omitted, the default locale 'en' is used.
- *   - {boolean} [showStreamsCloudWatermark]
+ *   - {boolean} [viewerSettings.showStreamsCloudWatermark]
  *       If true, shows the StreamsCloud watermark.
- *   - {boolean} [hideCloseButton]
+ *   - {boolean} [viewerSettings.hideCloseButton]
  *       If true, hides the close button.
+ *   - {'light' | 'dark'} [viewerSettings.theme]
+ *       Optional theme for the viewer UI.
  *
  * Events
  * @param {{ closed?: () => void }} [init.on]
@@ -44,52 +38,28 @@ export { mapToPostPlayerModel } from '../posts/data-loaders/mapper';
  * @param {() => void} [init.on.closed]
  *   Called after the modal is fully closed (after unmount and removal from the DOM).
  *
- * Notes
- * - If neither mediaCenterConfig nor id is specified, a warning is shown and the modal is not opened.
- *
  * @returns {void}
  *
  * @example <caption>Config mode</caption>
  * ```ts
  * import {
  *   openMediaPageModal,
- *   type IMediaCenterConfig,
+ *   type IMediaCenterDataProvider
  * } from '@streamscloud/embeddable/media-page';
  *
- * const mediaCenterConfig: IMediaCenterConfig = {
+ * const dataProvider: IMediaDataProvider= {
  *   // ...your media center configuration
  * };
  *
  * openMediaPageModal({
- *   mediaCenterConfig,
+ *   dataProvider,
  *   viewerSettings: {
- *     // Locale defaults to 'en'; set 'no' to switch to Norwegian:
+ *     // Example: switch to Norwegian (if supported by your Locale type)
  *     locale: 'no',
  *     disableBackground: false,
  *     hideCloseButton: false,
  *     showStreamsCloudWatermark: true,
- *   },
- *   on: {
- *     closed: () => console.log('Media page modal closed'),
- *   },
- * });
- * ```
- *
-
-
- * @example <caption>Internal config mode</caption>
- * ```ts
- * import { openMediaPageModal } from '@streamscloud/embeddable/media-page';
- *
- * openMediaPageModal({
- *   id: 'media-page-123',
- *   initiator: 'marketing-campaign',
- *   graphqlOrigin: 'https://api.example.com',
- *   viewerSettings: {
- *     locale: 'en',
- *     disableBackground: true,
- *     hideCloseButton: false,
- *     showStreamsCloudWatermark: false,
+ *     theme: 'dark',
  *   },
  *   on: {
  *     closed: () => console.log('Media page modal closed'),
@@ -98,19 +68,32 @@ export { mapToPostPlayerModel } from '../posts/data-loaders/mapper';
  * ```
  */
 export declare function openMediaPageModal(init: {
-    mediaCenterConfig: IMediaCenterConfig;
+    dataProvider: IMediaCenterDataProvider;
     viewerSettings?: MediaPageViewerSettings;
     on?: {
         closed?: () => void;
     };
 }): void;
-export declare function openMediaPageModal(init: {
-    id: string;
-    initiator: string;
-    graphqlOrigin?: string;
+export declare function openMediaPageModalWithInitialPostsProvider(init: {
+    dataProvider: IPlayerDataProvider<PostPlayerModel>;
+    mediaCenterDataProvider: IMediaCenterDataProvider;
+    viewerSettings?: MediaPageViewerSettings;
+    on?: {
+        closed?: () => void;
+        postActivated?: (id: string) => void;
+    };
+}): void;
+export declare function openMediaPageModalWithInitialStreamsProvider(init: {
+    dataProvider: IStreamsPlayerDataProvider;
+    amplificationParameters?: StreamAmplificationParameters;
+    mediaCenterDataProvider: IMediaCenterDataProvider;
     viewerSettings?: MediaPageViewerSettings;
     on?: {
         closed?: () => void;
+        streamActivated?: (data: {
+            title: string;
+            image: string | null;
+        }) => void;
     };
 }): void;
 export type MediaPageViewerSettings = {
@@ -118,4 +101,5 @@ export type MediaPageViewerSettings = {
     locale?: Locale;
     showStreamsCloudWatermark?: boolean;
     hideCloseButton?: boolean;
+    theme?: 'light' | 'dark';
 };