@streamscloud/embeddable 11.0.0 → 12.1.0

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

@@ -10,7 +10,7 @@ import IconReOrderDotsHorizontal from '@fluentui/svg-icons/icons/re_order_dots_h
 import IconScreenSearch from '@fluentui/svg-icons/icons/screen_search_20_regular.svg?raw';
 import IconSearch from '@fluentui/svg-icons/icons/search_20_regular.svg?raw';
 const SCROLL_MASK_OFFSET = 32;
-let { context, locale, closeFn, on } = $props();
+let { context, locale = 'en', on } = $props();
 const localization = $derived(new MediaCenterHeaderLocalization(locale));
 let scrollAreaRef = $state(null);
 const headerMounted = (node) => {
@@ -66,9 +66,9 @@ const styles = $derived.by(() => {
 
 <div class="media-center-header-container" use:headerMounted>
   <div class="media-center-header" style={styles}>
-    {#if context.logo}
+    {#if context.targetData?.logo}
       <div class="media-center-header__logo-wrap">
-        <img src={context.logo} class="media-center-header__logo" alt={context.targetData?.name} />
+        <img src={context.targetData.logo} class="media-center-header__logo" alt={context.targetData?.name} />
       </div>
     {/if}
     <button type="button" class="control-button control-button--trigger" class:control-button--active={context.menuActive} onclick={context.toggleMenu}>
@@ -78,7 +78,7 @@ const styles = $derived.by(() => {
     </button>
     <div class="media-center-header__scroll-area" use:onScrollMounted use:horizontalWheelScroll onscroll={handleScrollingAreaScroll}>
       <div class="media-center-header__scroll-area-block">
-        <button type="button" class="control-button" class:control-button--active={context.feedHandler.active} onclick={() => context.activateFeed()}>
+        <button type="button" class="control-button" class:control-button--active={context.feedHandler.active} onclick={() => context.playRootFeed()}>
           <span class="control-button__icon" class:control-button__icon--active={context.feedHandler.active}>
             <Icon src={IconPhone} />
           </span>
@@ -86,7 +86,11 @@ const styles = $derived.by(() => {
             {localization.buttons.feed}
           </span>
         </button>
-        <button type="button" class="control-button" class:control-button--active={context.discoverHandler.activated} onclick={context.activateDiscover}>
+        <button
+          type="button"
+          class="control-button"
+          class:control-button--active={context.discoverHandler.activated}
+          onclick={() => context.activateDiscover({ categoryId: null })}>
           <span class="control-button__icon" class:control-button__icon--active={context.discoverHandler.activated}>
             <Icon src={IconScreenSearch} />
           </span>
@@ -134,14 +138,14 @@ const styles = $derived.by(() => {
       </div>
     </div>
   </div>
-  {#if closeFn}
+  {#if context.closeOrchestrator.closeTriggerVisible}
     <div class="close-button">
       <PlayerButton
         icon={IconDismiss}
         zoom={0.8}
         activeColor={context.playerColors?.button ?? null}
         inactiveColor={context.playerColors?.buttonInactive ?? null}
-        on={{ click: closeFn }} />
+        on={{ click: context.closeOrchestrator.requestClose }} />
     </div>
   {/if}
 </div>
@@ -192,10 +196,11 @@ const styles = $derived.by(() => {
   display: flex;
   align-items: center;
   justify-content: center;
-  height: 3.125rem;
+  height: 2.9375rem;
   max-width: 11.25rem;
   min-width: 0;
   overflow: hidden;
+  flex-shrink: 0;
 }
 .media-center-header__logo {
   width: auto;
@@ -217,8 +222,7 @@ const styles = $derived.by(() => {
   flex-wrap: nowrap;
   mask-image: none;
   scrollbar-width: none;
-  padding: 0.5rem 0.625rem;
-  padding-left: 0;
+  padding-block: 0.5rem;
   --_scroll-area--mask-offset--left: var(--scroll-area--mask-offset);
   --_scroll-area--mask-offset--right: calc(100% - var(--scroll-area--mask-offset));
 }
@@ -275,7 +279,6 @@ const styles = $derived.by(() => {
 .control-button--active {
   background-color: var(--_media-center-header--button-color);
   color: #ffffff;
-  text-shadow: 0.001em 0 0 currentColor, -0.001em 0 0 currentColor, 0 0.001em 0 currentColor, 0 -0.001em 0 currentColor;
 }
 .control-button:hover:not(.control-button--active) {
   background-color: var(--_media-center-header--button-color);

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

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

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

@@ -1,28 +1,32 @@
 import type { IContentCategoryFollowingHandler } from '../categories-following/types';
 import type { IMediaCenterConfig } from '../config/types';
-import { DiscoverPanelHandler } from './discover';
-import { CategoriesHandler, FeedHandler } from './handlers';
+import type { ICloseOrchestrator } from '../../ui/player/close-orchestrator';
+import { DiscoverViewHandler } from './discover';
+import { FeedHandler } from './feed';
+import { CategoriesHandler, MediaCenterSettingsHandler } from './handlers';
 import { PopularStreamsPanelHandler } from './menu';
 import { StreamsInCategoryPanelHandler } from './streams-in-category';
+import type { MediaCenterMode, MediaCenterSettings } from './types';
 export declare class MediaCenterContext {
     initializing: boolean;
+    initialized: boolean;
+    readonly mediaCenterMode: MediaCenterMode;
     menuActive: boolean;
     categoriesHandler: CategoriesHandler;
     feedHandler: FeedHandler;
-    discoverHandler: DiscoverPanelHandler;
+    discoverHandler: DiscoverViewHandler;
     popularStreamsHandler: PopularStreamsPanelHandler;
     streamsInCategoryHandler: StreamsInCategoryPanelHandler;
     categoryFollowingHandler: IContentCategoryFollowingHandler | null;
+    settingsHandler: MediaCenterSettingsHandler;
+    closeOrchestrator: ICloseOrchestrator;
     private _mediaCenterConfig;
     constructor(data: {
-        config: IMediaCenterConfig | null;
-        followingHandler: IContentCategoryFollowingHandler | null | undefined;
-        on: {
-            initialized: () => void;
-        };
+        config: IMediaCenterConfig;
+        closeOrchestrator: ICloseOrchestrator;
+        settings?: MediaCenterSettings;
+        on: MediaCenterContextInitializationCallbacks;
     });
-    get mediaCenterEffective(): boolean;
-    get logo(): string | null;
     get targetData(): import("../config/types").MediaCenterTargetDataModel | null;
     get playerColors(): {
         brand: string | null;
@@ -38,13 +42,27 @@ export declare class MediaCenterContext {
     } | null;
     get loading(): boolean;
     get overlayIsActive(): boolean;
+    get backgroundWrapperProps(): {
+        backgroundDisabled: boolean;
+        backgroundImageUrl: string | null;
+        backgroundColor?: string | null;
+    };
+    get feedPlayerProps(): import("./types").PlayerProps | null;
     toggleMenu: () => void;
     showMenu: () => void;
     hideMenu: () => void;
-    activateDiscover: () => Promise<void>;
-    activateFeed: (options?: {
-        categoryId?: string | null;
+    activateDiscover: (options: {
+        categoryId: string | null;
     }) => Promise<void>;
+    playPostsFeed: (options: Parameters<FeedHandler["activatePostsFeed"]>[0]) => Promise<void>;
+    playStreamsFeed: (options: Parameters<FeedHandler["activateStreamsFeed"]>[0]) => Promise<void>;
+    playRootFeed: () => Promise<void>;
     tryActivateStreamsInCategory: (categoryId: string) => Promise<void>;
+    private deactivateOtherThanFeed;
     private init;
 }
+type MediaCenterContextInitializationCallbacks = {
+    initialized: (instance: MediaCenterContext) => void;
+    failed: () => void;
+};
+export {};

package/dist/media-center/media-center/media-center-context.svelte.js

@@ -1,30 +1,38 @@
-import { DiscoverPanelHandler } from './discover';
-import { CategoriesHandler, FeedHandler } from './handlers';
+import { DiscoverViewHandler } from './discover';
+import { FeedHandler } from './feed';
+import { CategoriesHandler, MediaCenterSettingsHandler } from './handlers';
 import { PopularStreamsPanelHandler } from './menu';
 import { StreamsInCategoryPanelHandler } from './streams-in-category';
 export class MediaCenterContext {
     initializing = $state(true);
+    initialized = $state(false);
+    mediaCenterMode = $derived.by(() => {
+        if (this.discoverHandler.activated) {
+            return 'discover';
+        }
+        return 'feed';
+    });
     menuActive = $state(false);
     categoriesHandler = new CategoriesHandler();
-    feedHandler = new FeedHandler();
+    feedHandler;
     discoverHandler;
     popularStreamsHandler;
     streamsInCategoryHandler;
     categoryFollowingHandler = $state.raw(null);
+    settingsHandler;
+    closeOrchestrator;
     _mediaCenterConfig = $state.raw(null);
     constructor(data) {
-        const { config, followingHandler, on } = data;
-        this.discoverHandler = new DiscoverPanelHandler(config);
+        const { config, closeOrchestrator, settings, on } = data;
+        this.closeOrchestrator = closeOrchestrator;
+        this.closeOrchestrator.setCloseTriggerAttached(true);
+        this.settingsHandler = new MediaCenterSettingsHandler(settings);
+        this.feedHandler = new FeedHandler({ config, mediaCenterSettingsHandler: this.settingsHandler, closeOrchestrator });
+        this.discoverHandler = new DiscoverViewHandler(config);
         this.popularStreamsHandler = new PopularStreamsPanelHandler(config);
         this.streamsInCategoryHandler = new StreamsInCategoryPanelHandler(config);
-        this.categoryFollowingHandler = followingHandler || null;
-        this.init(config, on.initialized);
-    }
-    get mediaCenterEffective() {
-        return !this.initializing && this.categoriesHandler.categories.length > 0;
-    }
-    get logo() {
-        return this._mediaCenterConfig?.logo || null;
+        this.categoryFollowingHandler = config.handlers?.categoriesFollowingHandler ?? null;
+        this.init(config, on);
     }
     get targetData() {
         return this._mediaCenterConfig?.targetData || null;
@@ -36,7 +44,13 @@ export class MediaCenterContext {
         return this.discoverHandler.loading || this.streamsInCategoryHandler.loading;
     }
     get overlayIsActive() {
-        return this.discoverHandler.activated || this.streamsInCategoryHandler.activated;
+        return this.streamsInCategoryHandler.activated;
+    }
+    get backgroundWrapperProps() {
+        return this.settingsHandler.backgroundWrapperProps;
+    }
+    get feedPlayerProps() {
+        return this.feedHandler.feedPlayerProps;
     }
     toggleMenu = () => {
         if (this.menuActive) {
@@ -53,26 +67,39 @@ export class MediaCenterContext {
     hideMenu = () => {
         this.menuActive = false;
     };
-    activateDiscover = async () => {
+    activateDiscover = async (options) => {
+        this.settingsHandler.updateBackgroundImageUrl('not-applicable');
         this.hideMenu();
         this.feedHandler.deactivate();
         this.streamsInCategoryHandler.deactivate();
-        await this.discoverHandler.activate();
+        this.categoriesHandler.selectedCategoryId = options.categoryId;
+        const childCategories = this.categoriesHandler.allCategories.filter((c) => c.parentId === this.categoriesHandler.selectedCategoryId);
+        await this.discoverHandler.activate({
+            activeCategoryId: this.categoriesHandler.selectedCategoryId,
+            childCategories: childCategories.map((c) => ({ id: c.id, name: c.name }))
+        });
     };
-    activateFeed = async (options) => {
-        this.hideMenu();
-        this.feedHandler.activate();
-        this.discoverHandler.deactivate();
-        this.streamsInCategoryHandler.deactivate();
-        if (options?.categoryId !== undefined) {
-            this.categoriesHandler.selectedCategoryId = options.categoryId;
+    playPostsFeed = async (options) => {
+        this.deactivateOtherThanFeed();
+        this.categoriesHandler.selectedCategoryId = options.filter?.categoryId ?? null;
+        this.feedHandler.activatePostsFeed(options);
+    };
+    playStreamsFeed = async (options) => {
+        this.deactivateOtherThanFeed();
+        this.categoriesHandler.selectedCategoryId = options.filter?.categoryId ?? null;
+        this.feedHandler.activateStreamsFeed(options);
+    };
+    playRootFeed = async () => {
+        this.deactivateOtherThanFeed();
+        this.categoriesHandler.selectedCategoryId = null;
+        if (this.feedPlayerProps?.type === 'streams') {
+            this.feedHandler.activateStreamsFeed({});
+        }
+        else {
+            this.feedHandler.activatePostsFeed({});
         }
     };
     tryActivateStreamsInCategory = async (categoryId) => {
-        if (this.categoriesHandler.selectedCategoryId === categoryId) {
-            this.activateFeed({ categoryId: null });
-            return;
-        }
         const selectedCategoryData = this.categoriesHandler.getCategoryData(categoryId);
         await this.streamsInCategoryHandler.activate(selectedCategoryData);
         this.hideMenu();
@@ -80,19 +107,28 @@ export class MediaCenterContext {
         this.discoverHandler.deactivate();
         this.categoriesHandler.selectedCategoryId = categoryId;
     };
-    init = async (config, onInitilized) => {
-        if (!config) {
-            this.initializing = false;
-            onInitilized();
-            return;
-        }
+    deactivateOtherThanFeed = () => {
+        this.hideMenu();
+        this.discoverHandler.deactivate();
+        this.streamsInCategoryHandler.deactivate();
+    };
+    init = async (config, on) => {
         try {
             this._mediaCenterConfig = await config.getConfig();
-            this.categoriesHandler.init(this._mediaCenterConfig?.contentCategories || []);
+            if (!this._mediaCenterConfig) {
+                on.failed();
+                return;
+            }
+            this.categoriesHandler.init({ categories: this._mediaCenterConfig.contentCategories, tagAssociations: this._mediaCenterConfig.categoryTagAssociations });
+            this.settingsHandler.updatePlayerColors(this._mediaCenterConfig.playerColors);
+            on.initialized(this);
+            this.initialized = true;
+        }
+        catch {
+            on.failed();
         }
         finally {
             this.initializing = false;
-            onInitilized();
         }
     };
 }

package/dist/media-center/media-center/menu/menu-localization.d.ts

@@ -1,18 +1,9 @@
 import { type Locale } from '../../../core/locale';
 export declare class MenuLocalization {
-    buttons: {
-        cart: string;
-        discover: string;
-        feed: string;
-        login: string;
-        moments: string;
-        webpage: string;
-    };
-    shortVideosSectionTitle: string;
     interestsSectionTitle: string;
-    latestStreamsSectionTitle: string;
     popularStreamsSectionTitle: string;
-    overviewLabel: string;
+    discoverLabel: string;
+    feedLabel: string;
     membersLabel: (count: number) => string;
     locale: Locale;
     constructor(locale: Locale);

package/dist/media-center/media-center/menu/menu-localization.js

@@ -1,76 +1,37 @@
 import {} from '../../../core/locale';
 export class MenuLocalization {
-    buttons;
-    shortVideosSectionTitle;
     interestsSectionTitle;
-    latestStreamsSectionTitle;
     popularStreamsSectionTitle;
-    overviewLabel;
+    discoverLabel;
+    feedLabel;
     membersLabel;
     locale;
     constructor(locale) {
-        this.shortVideosSectionTitle = loc.shortVideosSectionTitle[locale];
         this.interestsSectionTitle = loc.interestsSectionTitle[locale];
-        this.latestStreamsSectionTitle = loc.streamsSectionTitle[locale];
         this.popularStreamsSectionTitle = loc.popularStreamsSectionTitle[locale];
-        this.overviewLabel = loc.overviewLabel[locale];
-        this.buttons = {
-            cart: loc.cartButton[locale],
-            discover: loc.discoverButton[locale],
-            feed: loc.feedButton[locale],
-            login: loc.loginButton[locale],
-            moments: loc.momentsButton[locale],
-            webpage: loc.webpageButton[locale]
-        };
+        this.discoverLabel = loc.discoverLabel[locale];
+        this.feedLabel = loc.feedLabel[locale];
         this.membersLabel = loc.membersLabel[locale];
         this.locale = locale;
     }
 }
 const loc = {
-    shortVideosSectionTitle: {
-        en: 'Popular Short Videos',
-        no: 'Populære korte videoer'
-    },
     popularStreamsSectionTitle: {
         en: 'Popular Streams',
         no: 'Populære Streams'
     },
-    streamsSectionTitle: {
-        en: 'Latest Streams',
-        no: 'Siste Streams'
-    },
     interestsSectionTitle: {
         en: 'Interest Channels',
         no: 'Interessekanaler'
     },
-    overviewLabel: {
-        en: 'Overview',
-        no: 'Oversikt'
-    },
-    discoverButton: {
+    discoverLabel: {
         en: 'Discover',
         no: 'Oppdag'
     },
-    feedButton: {
+    feedLabel: {
         en: 'Feed',
         no: 'Feed'
     },
-    cartButton: {
-        en: 'Cart',
-        no: 'Handlekurv'
-    },
-    loginButton: {
-        en: 'Login',
-        no: 'Logg inn'
-    },
-    momentsButton: {
-        en: 'Moments',
-        no: 'Øyeblikk'
-    },
-    webpageButton: {
-        en: 'Webpage',
-        no: 'Nettside'
-    },
     membersLabel: {
         en: (count) => (count === 1 ? `Member` : `Members`),
         no: (count) => (count === 1 ? `Medlem` : `Medlemmer`)