@streamscloud/embeddable 12.1.0 → 13.0.0

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

@@ -1,10 +1,8 @@
-import type { Locale } from '../../../core/locale';
 import type { PostPlayerModel } from '../../../posts/posts-player/types';
 import type { StreamPlayerModel } from '../../../streams/streams-player';
 import type { MediaCenterContext } from '../media-center-context.svelte';
 type Props = {
     context: MediaCenterContext;
-    locale?: Locale;
     on: {
         shortVideoSelected: (shortVideo: PostPlayerModel) => void;
         streamSelected: (stream: StreamPlayerModel) => void;

package/dist/media-center/media-center/feed/feed-handler.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { IMediaCenterConfig } from '../..';
+import type { IMediaCenterDataProvider } from '../..';
 import type { PostPlayerModel } from '../../../posts/posts-player';
 import type { IStreamsPlayerDataProvider } from '../../../streams/streams-player';
 import type { ICloseOrchestrator } from '../../../ui/player/close-orchestrator';
@@ -10,13 +10,15 @@ export declare class FeedHandler {
     private _active;
     private _providersGenerator;
     private _feedPlayerProps;
-    private _externalHandlers;
+    private _dataProvider;
     private _mediaCenterSettingsHandler;
     private _closeOrchestrator;
+    private _onPlayerReachedEnd;
     constructor(data: {
-        config: IMediaCenterConfig;
+        dataProvider: IMediaCenterDataProvider;
         mediaCenterSettingsHandler: MediaCenterSettingsHandler;
         closeOrchestrator: ICloseOrchestrator;
+        onPlayerReachedEnd: () => void;
     });
     get active(): boolean;
     get feedPlayerProps(): PlayerProps | null;

package/dist/media-center/media-center/feed/feed-handler.svelte.js

@@ -6,15 +6,17 @@ export class FeedHandler {
     _active = $state(false);
     _providersGenerator;
     _feedPlayerProps = $state.raw(null);
-    _externalHandlers;
+    _dataProvider;
     _mediaCenterSettingsHandler;
     _closeOrchestrator;
+    _onPlayerReachedEnd;
     constructor(data) {
-        const { config, mediaCenterSettingsHandler, closeOrchestrator } = data;
-        this._providersGenerator = new FeedProvidersGenerator(config);
+        const { dataProvider, mediaCenterSettingsHandler, closeOrchestrator, onPlayerReachedEnd } = data;
+        this._providersGenerator = new FeedProvidersGenerator(dataProvider);
         this._mediaCenterSettingsHandler = mediaCenterSettingsHandler;
-        this._externalHandlers = config.handlers;
+        this._dataProvider = dataProvider;
         this._closeOrchestrator = closeOrchestrator;
+        this._onPlayerReachedEnd = onPlayerReachedEnd;
     }
     get active() {
         return this._active;
@@ -28,10 +30,13 @@ export class FeedHandler {
     activatePostsFeed = async (options) => {
         const { dataProvider, filter, onPostActivated } = options;
         if (dataProvider) {
+            if (!dataProvider.onEndReached) {
+                dataProvider.onEndReached = this._onPlayerReachedEnd;
+            }
             this._feedPlayerProps = this.makePostsPlayerProps({ dataProvider, onPostActivated });
         }
         else {
-            const dataProvider = this._providersGenerator.makePostPlayerItemsProvider(filter);
+            const dataProvider = this._providersGenerator.makePostPlayerItemsProvider({ filter, onEndReached: this._onPlayerReachedEnd });
             this._feedPlayerProps = this.makePostsPlayerProps({ dataProvider, onPostActivated });
         }
         this._active = true;
@@ -39,10 +44,13 @@ export class FeedHandler {
     activateStreamsFeed = async (options) => {
         const { dataProvider, filter, onStreamActivated } = options;
         if (dataProvider) {
+            if (!dataProvider.onEndReached) {
+                dataProvider.onEndReached = this._onPlayerReachedEnd;
+            }
             this._feedPlayerProps = this.makeStreamsPlayerProps({ dataProvider, onStreamActivated });
         }
         else {
-            const dataProvider = this._providersGenerator.makeStreamsPlayerDataProvider(filter);
+            const dataProvider = this._providersGenerator.makeStreamsPlayerDataProvider({ filter, onEndReached: this._onPlayerReachedEnd });
             this._feedPlayerProps = this.makeStreamsPlayerProps({ dataProvider, onStreamActivated });
         }
         this._active = true;
@@ -53,8 +61,8 @@ export class FeedHandler {
             type: 'posts',
             props: {
                 dataProvider: { type: 'buffer', buffer: initBufferFromProvider(dataProvider) },
-                socialInteractionsHandler: this._externalHandlers?.socialInteractionsHandler,
-                analyticsHandler: this._externalHandlers?.analyticsHandler,
+                socialInteractionsHandler: this._dataProvider.handlers?.socialInteractionsHandler,
+                analyticsHandler: this._dataProvider.handlers?.analyticsHandler,
                 playerSettings: this._mediaCenterSettingsHandler.playerSettings,
                 closeOrchestrator: this._closeOrchestrator,
                 on: {
@@ -70,8 +78,8 @@ export class FeedHandler {
             type: 'streams',
             props: {
                 dataProvider: { type: 'buffer', buffer: new StreamsPlayerBuffer(dataProvider) },
-                analyticsHandler: this._externalHandlers?.analyticsHandler,
-                postSocialInteractionsHandler: this._externalHandlers?.socialInteractionsHandler,
+                analyticsHandler: this._dataProvider.handlers?.analyticsHandler,
+                postSocialInteractionsHandler: this._dataProvider.handlers?.socialInteractionsHandler,
                 playerSettings: this._mediaCenterSettingsHandler.playerSettings,
                 closeOrchestrator: this._closeOrchestrator,
                 on: {

package/dist/media-center/media-center/feed/feed-providers-generator.d.ts

@@ -1,11 +1,17 @@
-import type { IMediaCenterConfig } from '../../config/types';
+import type { IMediaCenterDataProvider } from '../../config/types';
 import type { PostPlayerModel } from '../../../posts/posts-player/types';
 import type { IStreamsPlayerDataProvider } from '../../../streams/streams-player/types';
 import type { IFeedPlayerDataProvider } from '../../../ui/player/providers';
 import type { PostsDataProviderFilter, StreamsDataProviderFilter } from './types';
 export declare class FeedProvidersGenerator {
-    private config;
-    constructor(config: IMediaCenterConfig);
-    makePostPlayerItemsProvider: (filter?: PostsDataProviderFilter) => IFeedPlayerDataProvider<PostPlayerModel>;
-    makeStreamsPlayerDataProvider: (filter?: StreamsDataProviderFilter) => IStreamsPlayerDataProvider;
+    private dataProvider;
+    constructor(dataProvider: IMediaCenterDataProvider);
+    makePostPlayerItemsProvider: (data: {
+        filter?: PostsDataProviderFilter;
+        onEndReached: () => void;
+    }) => IFeedPlayerDataProvider<PostPlayerModel>;
+    makeStreamsPlayerDataProvider: (data: {
+        filter?: StreamsDataProviderFilter;
+        onEndReached: () => void;
+    }) => IStreamsPlayerDataProvider;
 }

package/dist/media-center/media-center/feed/feed-providers-generator.js

@@ -2,15 +2,16 @@ import { ContinuationToken } from '../../../core/continuation-token';
 import { CursorDataLoader } from '../../../core/data-loaders';
 import { PostType } from '../../../core/enums';
 export class FeedProvidersGenerator {
-    config;
-    constructor(config) {
-        this.config = config;
+    dataProvider;
+    constructor(dataProvider) {
+        this.dataProvider = dataProvider;
     }
-    makePostPlayerItemsProvider = (filter) => {
+    makePostPlayerItemsProvider = (data) => {
+        const { filter, onEndReached } = data;
         const { categoryId, prefetchedItems: initialPrefetchedItems = [], initialPostId } = filter || {};
         const loader = new CursorDataLoader({
             loadPage: async (continuationToken) => {
-                const result = await this.config.postsPlayer.getPostsCursor({
+                const result = await this.dataProvider.postsPlayer.getPostsCursor({
                     filter: {
                         types: [PostType.Article, PostType.Media, PostType.ShortVideo, PostType.Video],
                         categoryId,
@@ -39,14 +40,16 @@ export class FeedProvidersGenerator {
                 prefetchedItems,
                 startIndex: prefetchedItems.length ? 0 : -1
             },
-            loadMore: loader.loadMore
+            loadMore: loader.loadMore,
+            onEndReached
         };
     };
-    makeStreamsPlayerDataProvider = (filter) => {
+    makeStreamsPlayerDataProvider = (data) => {
+        const { filter, onEndReached } = data;
         const { categoryId, prefetchedStreams: initialPrefetchedStreams = [], initialStreamId } = filter || {};
         const loader = new CursorDataLoader({
             loadPage: async (continuationToken) => {
-                const result = await this.config.streamPlayer.getStreamsCursor({
+                const result = await this.dataProvider.streamPlayer.getStreamsCursor({
                     filter: {
                         categoryId,
                         excludeIds: initialPrefetchedStreams.length ? initialPrefetchedStreams.map((i) => i.id) : undefined
@@ -73,7 +76,8 @@ export class FeedProvidersGenerator {
                 prefetchedStreams
             },
             loadMoreStreams: loader.loadMore,
-            getStreamPages: this.config.streamPlayer.getStreamPages
+            getStreamPages: this.dataProvider.streamPlayer.getStreamPages,
+            onEndReached
         };
     };
 }

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

@@ -0,0 +1 @@
+export { default as MediaCenterFooter } from './media-center-footer.svelte';

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

@@ -0,0 +1 @@
+export { default as MediaCenterFooter } from './media-center-footer.svelte';

package/dist/media-center/media-center/{header-footer → footer}/media-center-footer.svelte

@@ -6,7 +6,7 @@ import IconScreenSearch from '@fluentui/svg-icons/icons/screen_search_20_regular
 let { context } = $props();
 </script>
 
-<div class="media-center-footer">
+<div class="media-center-footer" data-theme="dark">
   <div class="media-center-footer__spacer"></div>
   <button
     type="button"
@@ -52,9 +52,9 @@ let { context } = $props();
   justify-content: space-between;
   pointer-events: auto;
   z-index: 1;
-  background: #000000;
   padding-top: 0.5rem;
   padding-bottom: 1.25rem;
+  background: var(--sc-mc-color--bg-panel);
 }
 .media-center-footer__button {
   position: relative;
@@ -64,10 +64,10 @@ let { context } = $props();
   justify-content: center;
   align-items: center;
   --icon--size: 1.5rem;
-  --icon--color: #f2f2f2;
+  --icon--color: var(--sc-mc-color--text-secondary);
   line-height: 0;
 }
 .media-center-footer__button--active {
-  --icon--color: #ffffff;
-  --icon--stroke-width: 0.6;
+  --icon--color: var(--sc-mc-color--text-primary);
+  --icon--stroke-width: 0.3;
 }</style>

package/dist/media-center/media-center/handlers/categories-handler.svelte.d.ts

@@ -1,9 +1,11 @@
-import type { MediaCenterConfigModel } from '../../config/types';
+import type { IMediaCenterDataProvider } from '../../config/types';
 import type { MediaCenterCategoryData } from '../types';
 export declare class CategoriesHandler {
+    private readonly dataProvider;
     private _allCateogories;
     private _tagAssociations;
     private _selectedCategoryId;
+    constructor(dataProvider: IMediaCenterDataProvider);
     get allCategories(): {
         id: string;
         name: string;
@@ -14,10 +16,6 @@ export declare class CategoriesHandler {
     get selectedCategoryId(): string | null;
     set selectedCategoryId(value: string | null);
     getCategoryData: (categoryId: string) => MediaCenterCategoryData | null;
-    init: (data: {
-        categories: MediaCenterConfigModel["contentCategories"];
-        tagAssociations: MediaCenterConfigModel["categoryTagAssociations"];
-    }) => Promise<void>;
 }
 export type MediaCenterCategoryModel = {
     id: string;

package/dist/media-center/media-center/handlers/categories-handler.svelte.js

@@ -1,7 +1,21 @@
 export class CategoriesHandler {
-    _allCateogories = $state.raw([]);
-    _tagAssociations = $state.raw(new Map());
+    dataProvider;
+    _allCateogories = $derived.by(() => this.dataProvider.model?.contentCategories ?? []);
+    _tagAssociations = $derived.by(() => {
+        const newTagAssociations = new Map();
+        if (this.dataProvider.model?.categoryTagAssociations) {
+            for (const assoc of this.dataProvider.model.categoryTagAssociations) {
+                if (assoc.tag) {
+                    newTagAssociations.set(assoc.id, assoc.tag);
+                }
+            }
+        }
+        return newTagAssociations;
+    });
     _selectedCategoryId = $state.raw(null);
+    constructor(dataProvider) {
+        this.dataProvider = dataProvider;
+    }
     get allCategories() {
         return this._allCateogories;
     }
@@ -40,15 +54,4 @@ export class CategoriesHandler {
         };
         return selectedCategoryData;
     };
-    init = async (data) => {
-        const { categories, tagAssociations } = data;
-        this._allCateogories = categories;
-        const newTagAssociations = new Map();
-        for (const assoc of tagAssociations) {
-            if (assoc.tag) {
-                newTagAssociations.set(assoc.id, assoc.tag);
-            }
-        }
-        this._tagAssociations = newTagAssociations;
-    };
 }

package/dist/media-center/media-center/handlers/media-center-settings-handler.svelte.d.ts

@@ -1,10 +1,24 @@
-import type { PlayerColors } from '../../../ui/player/colors';
-import type { MediaCenterSettings } from '../types';
+import type { Locale } from '../../../core/locale';
+import { type ThemeValue } from '../../../core/theme';
+import type { IMediaCenterDataProvider } from '../../config/types';
+import { PlayerColors } from '../../../ui/player/colors';
+import type { MediaCenterSettings } from '../media-center-settings.svelte';
 export declare class MediaCenterSettingsHandler {
     private _backgroundImageUrl;
+    private _mediaCenterSettings;
+    private _dataProvider;
     private _contentPlayerSettings;
-    constructor(settings?: MediaCenterSettings);
-    get playerSettings(): MediaCenterSettingsWithColors;
+    constructor(init: {
+        readonly dataProvider: IMediaCenterDataProvider;
+        settings: MediaCenterSettings;
+    });
+    get playerSettings(): {
+        locale?: Locale;
+        showStreamsCloudWatermark?: boolean;
+        playerColors?: Record<ThemeValue, PlayerColors>;
+    };
+    get actualMediaCenterColors(): PlayerColors;
+    get locale(): Locale;
     get backgroundWrapperProps(): {
         backgroundDisabled: boolean;
         backgroundImageUrl: string | null;
@@ -12,7 +26,6 @@ export declare class MediaCenterSettingsHandler {
     };
     get backgroundImageLoadedHandler(): ((url: string | null) => void) | undefined;
     updateBackgroundImageUrl: (url: string | null | "not-applicable") => void;
-    updatePlayerColors: (colors: PlayerColors) => void;
 }
 export type MediaCenterSettingsWithColors = MediaCenterSettings & {
     playerColors?: PlayerColors;

package/dist/media-center/media-center/handlers/media-center-settings-handler.svelte.js

@@ -1,26 +1,38 @@
+import { Theme } from '../../../core/theme';
+import { PlayerColors } from '../../../ui/player/colors';
 export class MediaCenterSettingsHandler {
     _backgroundImageUrl = $state(null);
-    _contentPlayerSettings = $state({});
-    constructor(settings) {
-        this._contentPlayerSettings = settings ?? {};
+    _mediaCenterSettings;
+    _dataProvider;
+    _contentPlayerSettings = $derived.by(() => ({
+        locale: this._mediaCenterSettings.locale,
+        playerColors: this._dataProvider.model?.playerColors,
+        showStreamsCloudWatermark: this._mediaCenterSettings.showStreamsCloudWatermark
+    }));
+    constructor(init) {
+        this._mediaCenterSettings = init.settings;
+        this._dataProvider = init.dataProvider;
     }
     get playerSettings() {
         return this._contentPlayerSettings;
     }
+    get actualMediaCenterColors() {
+        return this._dataProvider.model?.playerColors?.[Theme.get()] || new PlayerColors(null);
+    }
+    get locale() {
+        return this._mediaCenterSettings.locale;
+    }
     get backgroundWrapperProps() {
         return {
-            backgroundDisabled: this._contentPlayerSettings.disableBackground === true,
+            backgroundDisabled: this._mediaCenterSettings.disableBackground,
             backgroundImageUrl: this._backgroundImageUrl,
-            backgroundColor: this._contentPlayerSettings.playerColors?.playerBackground
+            backgroundColor: this.actualMediaCenterColors.playerBackground
         };
     }
     get backgroundImageLoadedHandler() {
-        return this._contentPlayerSettings.disableBackground === true ? undefined : (url) => this.updateBackgroundImageUrl(url);
+        return this._mediaCenterSettings.disableBackground ? undefined : (url) => this.updateBackgroundImageUrl(url);
     }
     updateBackgroundImageUrl = (url) => {
         this._backgroundImageUrl = url;
     };
-    updatePlayerColors = (colors) => {
-        this._contentPlayerSettings.playerColors = colors;
-    };
 }

package/dist/media-center/media-center/{header-footer → header}/index.d.ts

@@ -1,3 +1,2 @@
-export { default as MediaCenterFooter } from './media-center-footer.svelte';
 export { default as MediaCenterHeaderMobile } from './media-center-header-mobile.svelte';
 export { default as MediaCenterHeader } from './media-center-header.svelte';

package/dist/media-center/media-center/{header-footer → header}/index.js

@@ -1,3 +1,2 @@
-export { default as MediaCenterFooter } from './media-center-footer.svelte';
 export { default as MediaCenterHeaderMobile } from './media-center-header-mobile.svelte';
 export { default as MediaCenterHeader } from './media-center-header.svelte';

package/dist/media-center/media-center/{header-footer → header}/media-center-header-mobile.svelte

@@ -64,7 +64,8 @@ const headerMounted = (node) => {
   font-size: 1.125rem;
   font-weight: 600;
   line-height: 1.4;
-  color: #ffffff;
+  color: var(--sc-mc-color--text-white);
+  text-shadow: var(--sc-mc-color--text-white-shadow);
 }
 .media-center-header-mobile__button {
   pointer-events: auto;
@@ -73,8 +74,8 @@ const headerMounted = (node) => {
   display: flex;
   justify-content: center;
   align-items: center;
-  --icon--size: 1.5rem;
-  --icon--color: #ffffff;
-  --icon--filter: drop-shadow(1px 1px 0 rgba(0, 0, 0, 0.2));
+  --icon--size: 1.625rem;
+  --icon--color: var(--sc-mc-color--icon-overlay);
+  --icon--filter: var(--sc-mc-color--icon-overlay-shadow);
   line-height: 0;
 }</style>