@streamscloud/embeddable 11.0.0 → 12.1.0

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

@@ -0,0 +1,50 @@
+import type { IMediaCenterConfig } from '../..';
+import type { PostPlayerModel } from '../../../posts/posts-player';
+import type { IStreamsPlayerDataProvider } from '../../../streams/streams-player';
+import type { ICloseOrchestrator } from '../../../ui/player/close-orchestrator';
+import type { IPlayerDataProvider } from '../../../ui/player/providers';
+import { MediaCenterSettingsHandler } from '../handlers';
+import type { PlayerProps } from '../types';
+import type { PostsDataProviderFilter, StreamsDataProviderFilter } from './types';
+export declare class FeedHandler {
+    private _active;
+    private _providersGenerator;
+    private _feedPlayerProps;
+    private _externalHandlers;
+    private _mediaCenterSettingsHandler;
+    private _closeOrchestrator;
+    constructor(data: {
+        config: IMediaCenterConfig;
+        mediaCenterSettingsHandler: MediaCenterSettingsHandler;
+        closeOrchestrator: ICloseOrchestrator;
+    });
+    get active(): boolean;
+    get feedPlayerProps(): PlayerProps | null;
+    deactivate: () => void;
+    activatePostsFeed: (options: {
+        dataProvider?: IPlayerDataProvider<PostPlayerModel>;
+        filter?: PostsDataProviderFilter;
+        onPostActivated?: (id: string) => void;
+    }) => Promise<void>;
+    activateStreamsFeed: (options: {
+        dataProvider?: IStreamsPlayerDataProvider;
+        filter?: StreamsDataProviderFilter;
+        onStreamActivated?: (data: {
+            title: string;
+            image: string | null;
+        }) => void;
+    }) => Promise<void>;
+    private makePostsPlayerProps;
+    private makeStreamsPlayerProps;
+}
+export type MakePostsPlayerPropsData = {
+    dataProvider: IPlayerDataProvider<PostPlayerModel>;
+    onPostActivated?: (id: string) => void;
+};
+export type MakeStreamsPlayerPropsData = {
+    dataProvider: IStreamsPlayerDataProvider;
+    onStreamActivated?: (data: {
+        title: string;
+        image: string | null;
+    }) => void;
+};

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

@@ -0,0 +1,84 @@
+import { StreamsPlayerBuffer } from '../../../streams/streams-player/streams-player-buffer.svelte';
+import { initBufferFromProvider } from '../../../ui/player/providers/service';
+import { MediaCenterSettingsHandler } from '../handlers';
+import { FeedProvidersGenerator } from './feed-providers-generator';
+export class FeedHandler {
+    _active = $state(false);
+    _providersGenerator;
+    _feedPlayerProps = $state.raw(null);
+    _externalHandlers;
+    _mediaCenterSettingsHandler;
+    _closeOrchestrator;
+    constructor(data) {
+        const { config, mediaCenterSettingsHandler, closeOrchestrator } = data;
+        this._providersGenerator = new FeedProvidersGenerator(config);
+        this._mediaCenterSettingsHandler = mediaCenterSettingsHandler;
+        this._externalHandlers = config.handlers;
+        this._closeOrchestrator = closeOrchestrator;
+    }
+    get active() {
+        return this._active;
+    }
+    get feedPlayerProps() {
+        return this._feedPlayerProps;
+    }
+    deactivate = () => {
+        this._active = false;
+    };
+    activatePostsFeed = async (options) => {
+        const { dataProvider, filter, onPostActivated } = options;
+        if (dataProvider) {
+            this._feedPlayerProps = this.makePostsPlayerProps({ dataProvider, onPostActivated });
+        }
+        else {
+            const dataProvider = this._providersGenerator.makePostPlayerItemsProvider(filter);
+            this._feedPlayerProps = this.makePostsPlayerProps({ dataProvider, onPostActivated });
+        }
+        this._active = true;
+    };
+    activateStreamsFeed = async (options) => {
+        const { dataProvider, filter, onStreamActivated } = options;
+        if (dataProvider) {
+            this._feedPlayerProps = this.makeStreamsPlayerProps({ dataProvider, onStreamActivated });
+        }
+        else {
+            const dataProvider = this._providersGenerator.makeStreamsPlayerDataProvider(filter);
+            this._feedPlayerProps = this.makeStreamsPlayerProps({ dataProvider, onStreamActivated });
+        }
+        this._active = true;
+    };
+    makePostsPlayerProps = (data) => {
+        const { dataProvider, onPostActivated } = data;
+        return {
+            type: 'posts',
+            props: {
+                dataProvider: { type: 'buffer', buffer: initBufferFromProvider(dataProvider) },
+                socialInteractionsHandler: this._externalHandlers?.socialInteractionsHandler,
+                analyticsHandler: this._externalHandlers?.analyticsHandler,
+                playerSettings: this._mediaCenterSettingsHandler.playerSettings,
+                closeOrchestrator: this._closeOrchestrator,
+                on: {
+                    postActivated: onPostActivated,
+                    backgroundImageLoaded: this._mediaCenterSettingsHandler.backgroundImageLoadedHandler
+                }
+            }
+        };
+    };
+    makeStreamsPlayerProps = (data) => {
+        const { dataProvider, onStreamActivated } = data;
+        return {
+            type: 'streams',
+            props: {
+                dataProvider: { type: 'buffer', buffer: new StreamsPlayerBuffer(dataProvider) },
+                analyticsHandler: this._externalHandlers?.analyticsHandler,
+                postSocialInteractionsHandler: this._externalHandlers?.socialInteractionsHandler,
+                playerSettings: this._mediaCenterSettingsHandler.playerSettings,
+                closeOrchestrator: this._closeOrchestrator,
+                on: {
+                    streamActivated: onStreamActivated,
+                    backgroundImageLoaded: this._mediaCenterSettingsHandler.backgroundImageLoadedHandler
+                }
+            }
+        };
+    };
+}

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

@@ -0,0 +1,11 @@
+import type { IMediaCenterConfig } 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;
+}

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

@@ -0,0 +1,79 @@
+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;
+    }
+    makePostPlayerItemsProvider = (filter) => {
+        const { categoryId, prefetchedItems: initialPrefetchedItems = [], initialPostId } = filter || {};
+        const loader = new CursorDataLoader({
+            loadPage: async (continuationToken) => {
+                const result = await this.config.postsPlayer.getPostsCursor({
+                    filter: {
+                        types: [PostType.Article, PostType.Media, PostType.ShortVideo, PostType.Video],
+                        categoryId,
+                        excludeIds: initialPrefetchedItems.length ? initialPrefetchedItems.map((i) => i.id) : undefined
+                    },
+                    continuationToken: continuationToken.toNextChunkString(),
+                    limit: 20
+                });
+                const items = result.items;
+                return {
+                    items: items,
+                    continuationToken: ContinuationToken.fromPayload(result.continuationToken)
+                };
+            }
+        });
+        let prefetchedItems = initialPrefetchedItems;
+        if (initialPostId) {
+            const targetPost = prefetchedItems.find((p) => p.id === initialPostId);
+            if (targetPost) {
+                prefetchedItems = [targetPost, ...prefetchedItems.filter((p) => p.id !== initialPostId)];
+            }
+        }
+        return {
+            kind: 'feed',
+            initialData: {
+                prefetchedItems,
+                startIndex: prefetchedItems.length ? 0 : -1
+            },
+            loadMore: loader.loadMore
+        };
+    };
+    makeStreamsPlayerDataProvider = (filter) => {
+        const { categoryId, prefetchedStreams: initialPrefetchedStreams = [], initialStreamId } = filter || {};
+        const loader = new CursorDataLoader({
+            loadPage: async (continuationToken) => {
+                const result = await this.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: this.config.streamPlayer.getStreamPages
+        };
+    };
+}

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

@@ -0,0 +1 @@
+export { FeedHandler } from './feed-handler.svelte';

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

@@ -0,0 +1 @@
+export { FeedHandler } from './feed-handler.svelte';

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

@@ -0,0 +1,12 @@
+import type { PostPlayerModel } from '../../../posts/posts-player/types';
+import type { StreamPlayerModel } from '../../../streams/streams-player/types';
+export type PostsDataProviderFilter = {
+    categoryId?: string;
+    prefetchedItems?: PostPlayerModel[];
+    initialPostId?: string;
+};
+export type StreamsDataProviderFilter = {
+    categoryId?: string;
+    prefetchedStreams?: StreamPlayerModel[];
+    initialStreamId?: string;
+};

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

@@ -1,21 +1,40 @@
 import type { MediaCenterConfigModel } from '../../config/types';
 import type { MediaCenterCategoryData } from '../types';
 export declare class CategoriesHandler {
-    readonly categories: {
+    private _allCateogories;
+    private _tagAssociations;
+    private _selectedCategoryId;
+    get allCategories(): {
         id: string;
         name: string;
-        children: {
-            id: string;
-            name: string;
-            image: string | null;
-            parentId: string;
-        }[];
         image: string | null;
+        parentId: string | null;
     }[];
-    private _allCateogories;
-    private _selectedCategoryId;
+    get categoriesGrouped(): MediaCenterCategoryModel[];
     get selectedCategoryId(): string | null;
     set selectedCategoryId(value: string | null);
     getCategoryData: (categoryId: string) => MediaCenterCategoryData | null;
-    init: (categories: MediaCenterConfigModel["contentCategories"]) => Promise<void>;
+    init: (data: {
+        categories: MediaCenterConfigModel["contentCategories"];
+        tagAssociations: MediaCenterConfigModel["categoryTagAssociations"];
+    }) => Promise<void>;
 }
+export type MediaCenterCategoryModel = {
+    id: string;
+    name: string;
+    image: string | null;
+    tag: MediaCenterCategoryTagModel | null;
+    children: MediaCenterSubCategoryModel[];
+};
+export type MediaCenterSubCategoryModel = {
+    id: string;
+    name: string;
+    image: string | null;
+    parentId: string;
+    tag: MediaCenterCategoryTagModel | null;
+};
+export type MediaCenterCategoryTagModel = {
+    text: string;
+    fontColor: string;
+    backgroundColor: string;
+};

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

@@ -1,15 +1,25 @@
 export class CategoriesHandler {
-    categories = $derived.by(() => {
+    _allCateogories = $state.raw([]);
+    _tagAssociations = $state.raw(new Map());
+    _selectedCategoryId = $state.raw(null);
+    get allCategories() {
+        return this._allCateogories;
+    }
+    get categoriesGrouped() {
         return this._allCateogories
             .filter((c) => !c.parentId)
             .map((c) => {
             const childCategories = this._allCateogories.filter((cc) => cc.parentId === c.id);
-            const children = childCategories.map((cc) => ({ id: cc.id, name: cc.name, image: cc.image, parentId: cc.parentId }));
-            return { id: c.id, name: c.name, children, image: c.image };
+            const children = childCategories.map((cc) => ({
+                id: cc.id,
+                name: cc.name,
+                image: cc.image,
+                parentId: cc.parentId,
+                tag: this._tagAssociations.get(cc.id) || null
+            }));
+            return { id: c.id, name: c.name, image: c.image, tag: this._tagAssociations.get(c.id) || null, children };
         });
-    });
-    _allCateogories = $state.raw([]);
-    _selectedCategoryId = $state.raw(null);
+    }
     get selectedCategoryId() {
         return this._selectedCategoryId;
     }
@@ -30,7 +40,15 @@ export class CategoriesHandler {
         };
         return selectedCategoryData;
     };
-    init = async (categories) => {
+    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/index.d.ts

@@ -1,2 +1,3 @@
 export { CategoriesHandler } from './categories-handler.svelte';
-export { FeedHandler } from './feed-handler.svelte';
+export type { MediaCenterCategoryModel, MediaCenterSubCategoryModel, MediaCenterCategoryTagModel } from './categories-handler.svelte';
+export { MediaCenterSettingsHandler } from './media-center-settings-handler.svelte';

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

@@ -1,2 +1,2 @@
 export { CategoriesHandler } from './categories-handler.svelte';
-export { FeedHandler } from './feed-handler.svelte';
+export { MediaCenterSettingsHandler } from './media-center-settings-handler.svelte';

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

@@ -0,0 +1,19 @@
+import type { PlayerColors } from '../../../ui/player/colors';
+import type { MediaCenterSettings } from '../types';
+export declare class MediaCenterSettingsHandler {
+    private _backgroundImageUrl;
+    private _contentPlayerSettings;
+    constructor(settings?: MediaCenterSettings);
+    get playerSettings(): MediaCenterSettingsWithColors;
+    get backgroundWrapperProps(): {
+        backgroundDisabled: boolean;
+        backgroundImageUrl: string | null;
+        backgroundColor?: string | null;
+    };
+    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

@@ -0,0 +1,26 @@
+export class MediaCenterSettingsHandler {
+    _backgroundImageUrl = $state(null);
+    _contentPlayerSettings = $state({});
+    constructor(settings) {
+        this._contentPlayerSettings = settings ?? {};
+    }
+    get playerSettings() {
+        return this._contentPlayerSettings;
+    }
+    get backgroundWrapperProps() {
+        return {
+            backgroundDisabled: this._contentPlayerSettings.disableBackground === true,
+            backgroundImageUrl: this._backgroundImageUrl,
+            backgroundColor: this._contentPlayerSettings.playerColors?.playerBackground
+        };
+    }
+    get backgroundImageLoadedHandler() {
+        return this._contentPlayerSettings.disableBackground === true ? undefined : (url) => this.updateBackgroundImageUrl(url);
+    }
+    updateBackgroundImageUrl = (url) => {
+        this._backgroundImageUrl = url;
+    };
+    updatePlayerColors = (colors) => {
+        this._contentPlayerSettings.playerColors = colors;
+    };
+}

package/dist/media-center/media-center/header-footer/media-center-footer.svelte

@@ -12,7 +12,7 @@ let { context } = $props();
     type="button"
     class="media-center-footer__button"
     class:media-center-footer__button--active={context.feedHandler.active}
-    onclick={() => context.activateFeed()}>
+    onclick={() => context.playRootFeed()}>
     <Icon src={IconPhone} />
   </button>
   <div class="media-center-footer__spacer"></div>
@@ -20,7 +20,7 @@ let { context } = $props();
     type="button"
     class="media-center-footer__button"
     class:media-center-footer__button--active={context.discoverHandler.activated}
-    onclick={context.activateDiscover}>
+    onclick={() => context.activateDiscover({ categoryId: null })}>
     <Icon src={IconScreenSearch} />
   </button>
   <div class="media-center-footer__spacer"></div>
@@ -54,7 +54,7 @@ let { context } = $props();
   z-index: 1;
   background: #000000;
   padding-top: 0.5rem;
-  padding-bottom: 2.625rem;
+  padding-bottom: 1.25rem;
 }
 .media-center-footer__button {
   position: relative;
@@ -69,9 +69,5 @@ let { context } = $props();
 }
 .media-center-footer__button--active {
   --icon--color: #ffffff;
-  --icon--stroke-width: 0.5;
-}
-.media-center-footer__button--active {
-  color: #ffffff;
-  text-shadow: 0.001em 0 0 currentColor, -0.001em 0 0 currentColor, 0 0.001em 0 currentColor, 0 -0.001em 0 currentColor;
+  --icon--stroke-width: 0.6;
 }</style>

package/dist/media-center/media-center/header-footer/media-center-header-localization.d.ts

@@ -8,5 +8,6 @@ export declare class MediaCenterHeaderLocalization {
         moments: string;
         webpage: string;
     };
+    discoverLabel: string;
     constructor(locale: Locale);
 }

package/dist/media-center/media-center/header-footer/media-center-header-localization.js

@@ -1,7 +1,9 @@
 import {} from '../../../core/locale';
 export class MediaCenterHeaderLocalization {
     buttons;
+    discoverLabel;
     constructor(locale) {
+        this.discoverLabel = loc.discoverLabel[locale];
         this.buttons = {
             cart: loc.cartButton[locale],
             discover: loc.discoverButton[locale],
@@ -13,6 +15,10 @@ export class MediaCenterHeaderLocalization {
     }
 }
 const loc = {
+    discoverLabel: {
+        en: 'Discover',
+        no: 'Oppdag'
+    },
     discoverButton: {
         en: 'Discover',
         no: 'Oppdag'

package/dist/media-center/media-center/header-footer/media-center-header-mobile.svelte

@@ -1,7 +1,9 @@
 <script lang="ts">import { Icon } from '../../../ui/icon';
+import { MediaCenterHeaderLocalization } from './media-center-header-localization';
 import IconDismiss from '@fluentui/svg-icons/icons/dismiss_20_regular.svg?raw';
-import IconLineHorizontal3 from '@fluentui/svg-icons/icons/line_horizontal_3_20_regular.svg?raw';
-let { context, closeFn, on } = $props();
+import IconLayoutColumnOneThirdLeft from '@fluentui/svg-icons/icons/layout_column_one_third_left_20_regular.svg?raw';
+let { context, locale = 'en', on } = $props();
+const localization = $derived(new MediaCenterHeaderLocalization(locale));
 const headerMounted = (node) => {
     const heightResizeObserver = new ResizeObserver(() => {
         const headerHeight = node.clientHeight;
@@ -15,33 +17,23 @@ const headerMounted = (node) => {
         }
     };
 };
-const styles = $derived.by(() => {
-    var _a, _b;
-    const values = [];
-    if ((_a = context.playerColors) === null || _a === void 0 ? void 0 : _a.button) {
-        values.push(`--media-center-header-mobile--button-color: ${context.playerColors.button}`);
-    }
-    if ((_b = context.playerColors) === null || _b === void 0 ? void 0 : _b.buttonInactive) {
-        values.push(`--media-center-header-mobile--button-color--inactive: ${context.playerColors.buttonInactive}`);
-    }
-    return values.join(';');
-});
 </script>
 
-<div class="media-center-header-mobile" use:headerMounted style={styles}>
-  {#if closeFn}
-    <button type="button" class="media-center-header-mobile__button" onclick={closeFn}>
+<div class="media-center-header-mobile" class:media-center-header-mobile--static={context.mediaCenterMode === 'discover'} use:headerMounted>
+  {#if context.closeOrchestrator.closeTriggerVisible}
+    <button type="button" class="media-center-header-mobile__button" onclick={context.closeOrchestrator.requestClose}>
       <Icon src={IconDismiss} />
     </button>
   {:else}
     <span><!--just a stub--></span>
   {/if}
-  <button
-    type="button"
-    class="media-center-header-mobile__button"
-    class:media-center-header-mobile__button--active={context.menuActive}
-    onclick={context.toggleMenu}>
-    <Icon src={IconLineHorizontal3} />
+  {#if context.mediaCenterMode === 'discover'}
+    <div class="media-center-header-mobile__title">
+      {localization.discoverLabel}
+    </div>
+  {/if}
+  <button type="button" class="media-center-header-mobile__button" onclick={context.toggleMenu}>
+    <Icon src={IconLayoutColumnOneThirdLeft} />
   </button>
 </div>
 
@@ -57,35 +49,32 @@ const styles = $derived.by(() => {
   }
 }
 .media-center-header-mobile {
-  --_media-center-header-mobile--button-color: var(--media-center-header-mobile--button-color, rgb(from #000000 r g b / 95%));
-  --_media-center-header-mobile--button-color--inactive: var(
-    --media-center-header-mobile--button-color--inactive,
-    rgb(from var(--_media-center-header-mobile--button-color, #000000) r g b / 60%)
-  );
   position: absolute;
   inset: 0;
   bottom: auto;
-  padding-block: 0.9375rem;
-  padding-inline: 0.625rem;
   z-index: 1;
   display: flex;
   justify-content: space-between;
   align-items: center;
 }
+.media-center-header-mobile--static {
+  position: static;
+}
+.media-center-header-mobile__title {
+  font-size: 1.125rem;
+  font-weight: 600;
+  line-height: 1.4;
+  color: #ffffff;
+}
 .media-center-header-mobile__button {
   pointer-events: auto;
-  padding-block: 0.25rem;
+  padding-block: 0.5625rem;
   padding-inline: 1rem;
   display: flex;
   justify-content: center;
   align-items: center;
-  border-radius: 0.875rem;
-  background-color: var(--_media-center-header-mobile--button-color--inactive);
-  border: var(--_media-center-header-mobile--button-color);
   --icon--size: 1.5rem;
   --icon--color: #ffffff;
+  --icon--filter: drop-shadow(1px 1px 0 rgba(0, 0, 0, 0.2));
   line-height: 0;
-}
-.media-center-header-mobile__button--active {
-  background-color: var(--_media-center-header-mobile--button-color);
 }</style>

package/dist/media-center/media-center/header-footer/media-center-header-mobile.svelte.d.ts

@@ -1,7 +1,8 @@
+import type { Locale } from '../../../core/locale';
 import type { MediaCenterContext } from '../media-center-context.svelte';
 type Props = {
     context: MediaCenterContext;
-    closeFn: (() => void) | null;
+    locale?: Locale;
     on: {
         headerHeightChanged: (height: number) => void;
     };