@streamscloud/embeddable 12.0.0 → 12.2.0

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

@@ -0,0 +1,12 @@
+import type { IMediaCenterConfig } from '../config/types';
+import { type ICloseOrchestrator } from '../../ui/player/close-orchestrator';
+import type { MediaCenterSettings, MediaCenterModeProps } from './types';
+type Props = {
+    config: IMediaCenterConfig;
+    settings?: MediaCenterSettings;
+    modeProps: MediaCenterModeProps;
+    closeOrchestrator: ICloseOrchestrator;
+};
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

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

@@ -4,8 +4,8 @@ import { LineClamp } from '../../../ui/line-clamp';
 import { ProportionalContainer } from '../../../ui/proportional-container';
 import { DiscoverHeaderLocalization } from './discover-header-localization';
 import { MomentsCircle } from '../moments';
-let { context, locale = 'en' } = $props();
-const localization = $derived(new DiscoverHeaderLocalization(locale));
+let { context } = $props();
+const localization = $derived(new DiscoverHeaderLocalization(context.locale));
 </script>
 
 {#if context.targetData}
@@ -19,7 +19,7 @@ const localization = $derived(new DiscoverHeaderLocalization(locale));
       <p class="header__handle">@{target.handle}</p>
       <div class="header__members">
         <span class="header__members-count">
-          {compactNumber(target.membersCount, { locale: localization.locale })}
+          {compactNumber(target.membersCount, { locale: context.locale })}
         </span>
         <span class="header__members-label">
           {localization.membersLabel(target.membersCount)}
@@ -28,7 +28,7 @@ const localization = $derived(new DiscoverHeaderLocalization(locale));
 
       {#if target.description}
         <p class="header__description">
-          <LineClamp enableShowMore={true} locale={locale}>{target.description}</LineClamp>
+          <LineClamp enableShowMore={true} locale={context.locale}>{target.description}</LineClamp>
         </p>
       {/if}
     </div>
@@ -60,7 +60,7 @@ const localization = $derived(new DiscoverHeaderLocalization(locale));
     </div>
     {#if target.description}
       <p class="header-mobile__description">
-        <LineClamp enableShowMore={true} locale={locale}>{target.description}</LineClamp>
+        <LineClamp enableShowMore={true} locale={context.locale}>{target.description}</LineClamp>
       </p>
     {/if}
   </div>
@@ -82,7 +82,7 @@ const localization = $derived(new DiscoverHeaderLocalization(locale));
   flex-direction: row;
   gap: 2.25rem;
   padding-top: 1.25rem;
-  color: #ffffff;
+  color: var(--sc-mc-color--text-primary);
   /* Set 'container-type: inline-size;' to reference container*/
 }
 @container (width < 576px) {
@@ -109,10 +109,7 @@ const localization = $derived(new DiscoverHeaderLocalization(locale));
 .header__handle {
   font-size: 0.875rem;
   font-weight: 400;
-  color: #5a8dec;
-}
-:global([data-theme="dark"]) .header__handle {
-  color: #5a8dec;
+  color: var(--sc-mc-color--text-brand);
 }
 .header__members {
   margin-top: 0.625rem;
@@ -129,7 +126,7 @@ const localization = $derived(new DiscoverHeaderLocalization(locale));
   font-size: 0.75rem;
   line-height: 1;
   font-weight: 400;
-  color: #d1d5db;
+  color: var(--sc-mc-color--text-secondary);
 }
 .header__description {
   margin-top: 0.875rem;
@@ -154,7 +151,7 @@ const localization = $derived(new DiscoverHeaderLocalization(locale));
   flex-direction: column;
   gap: 1.0625rem;
   padding-top: 0.625rem;
-  color: #ffffff;
+  color: var(--sc-mc-color--text-primary);
   /* Set 'container-type: inline-size;' to reference container*/
 }
 @container (width < 576px) {
@@ -205,7 +202,7 @@ const localization = $derived(new DiscoverHeaderLocalization(locale));
   font-size: 0.75rem;
   line-height: 1;
   font-weight: 600;
-  color: #d1d5db;
+  color: var(--sc-mc-color--text-secondary);
 }
 .header-mobile__description {
   font-size: 1rem;

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

@@ -1,8 +1,6 @@
-import type { Locale } from '../../../core/locale';
 import type { MediaCenterContext } from '../media-center-context.svelte';
 type Props = {
     context: MediaCenterContext;
-    locale?: Locale;
 };
 declare const DiscoverHeader: import("svelte").Component<Props, {}, "">;
 type DiscoverHeader = ReturnType<typeof DiscoverHeader>;

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

@@ -4,15 +4,15 @@ import { StreamCard } from '../../../streams/stream-card';
 import { InfiniteScrolling } from '../../../ui/infinite-scrolling';
 import { default as Header } from './discover-header.svelte';
 import { DiscoverViewLocalization } from './discover-view-localization';
-let { context, locale = 'en', on } = $props();
+let { context, on } = $props();
 const handler = $derived(context.discoverHandler);
-const localization = $derived(new DiscoverViewLocalization(locale));
+const localization = $derived(new DiscoverViewLocalization(context.locale));
 </script>
 
 {#if !handler.loading}
   <div class="media-center-discover">
     <div class="media-center-discover__content">
-      <Header context={context} locale={locale} />
+      <Header context={context} />
       {#if handler.streamsHolder?.streams.length}
         <div class="media-center-discover__section">
           <div class="media-center-discover__section-header">
@@ -46,7 +46,7 @@ const localization = $derived(new DiscoverViewLocalization(locale));
                       viewsCount: item.viewsCount,
                       products: item.products
                     }}
-                    locale={locale}
+                    locale={context.locale}
                     on={{ click: () => on.shortVideoSelected(item) }} />
                 {/each}
               </div>
@@ -154,8 +154,8 @@ const localization = $derived(new DiscoverViewLocalization(locale));
   font-size: 1.125rem;
   line-height: 1.75rem;
   font-weight: 600;
-  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-white);
+  text-shadow: var(--sc-mc-color--text-white-shadow);
 }
 .media-center-discover__section-content {
   display: grid;

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/handlers/categories-handler.svelte.d.ts

@@ -2,6 +2,7 @@ import type { MediaCenterConfigModel } from '../../config/types';
 import type { MediaCenterCategoryData } from '../types';
 export declare class CategoriesHandler {
     private _allCateogories;
+    private _tagAssociations;
     private _selectedCategoryId;
     get allCategories(): {
         id: string;
@@ -9,19 +10,31 @@ export declare class CategoriesHandler {
         image: string | null;
         parentId: string | null;
     }[];
-    get categoriesGrouped(): {
-        id: string;
-        name: string;
-        children: {
-            id: string;
-            name: string;
-            image: string | null;
-            parentId: string;
-        }[];
-        image: string | null;
-    }[];
+    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,5 +1,6 @@
 export class CategoriesHandler {
     _allCateogories = $state.raw([]);
+    _tagAssociations = $state.raw(new Map());
     _selectedCategoryId = $state.raw(null);
     get allCategories() {
         return this._allCateogories;
@@ -9,8 +10,14 @@ export class CategoriesHandler {
             .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 };
         });
     }
     get selectedCategoryId() {
@@ -33,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 type { MediaCenterCategoryModel, MediaCenterSubCategoryModel, MediaCenterCategoryTagModel } from './categories-handler.svelte';
 export { MediaCenterSettingsHandler } from './media-center-settings-handler.svelte';

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

@@ -3,8 +3,10 @@ import type { MediaCenterSettings } from '../types';
 export declare class MediaCenterSettingsHandler {
     private _backgroundImageUrl;
     private _contentPlayerSettings;
+    private _colorsMap;
     constructor(settings?: MediaCenterSettings);
     get playerSettings(): MediaCenterSettingsWithColors;
+    get locale(): import("../../../core/locale").Locale;
     get backgroundWrapperProps(): {
         backgroundDisabled: boolean;
         backgroundImageUrl: string | null;

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

@@ -1,12 +1,27 @@
+import { Theme } from '../../../core/theme';
+import { untrack } from 'svelte';
 export class MediaCenterSettingsHandler {
     _backgroundImageUrl = $state(null);
     _contentPlayerSettings = $state({});
+    _colorsMap = {
+        light: null,
+        dark: null
+    };
     constructor(settings) {
         this._contentPlayerSettings = settings ?? {};
+        $effect(() => {
+            const theme = Theme.get();
+            untrack(() => {
+                this._contentPlayerSettings.playerColors = this._colorsMap[theme];
+            });
+        });
     }
     get playerSettings() {
         return this._contentPlayerSettings;
     }
+    get locale() {
+        return this._contentPlayerSettings.locale || 'en';
+    }
     get backgroundWrapperProps() {
         return {
             backgroundDisabled: this._contentPlayerSettings.disableBackground === true,
@@ -21,6 +36,10 @@ export class MediaCenterSettingsHandler {
         this._backgroundImageUrl = url;
     };
     updatePlayerColors = (colors) => {
-        this._contentPlayerSettings.playerColors = colors;
+        this._colorsMap = {
+            light: null,
+            dark: colors
+        };
+        this._contentPlayerSettings.playerColors = this._colorsMap[Theme.get()];
     };
 }

package/dist/media-center/media-center/header-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: 2.625rem;
+  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/header-footer/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>

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

@@ -10,8 +10,8 @@ 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 = 'en', on } = $props();
-const localization = $derived(new MediaCenterHeaderLocalization(locale));
+let { context, on } = $props();
+const localization = $derived(new MediaCenterHeaderLocalization(context.locale));
 let scrollAreaRef = $state(null);
 const headerMounted = (node) => {
     const heightResizeObserver = new ResizeObserver(() => {
@@ -172,10 +172,10 @@ const styles = $derived.by(() => {
 }
 
 .media-center-header {
-  --_media-center-header--button-color: var(--media-center-header--button-color, rgb(from #000000 r g b / 95%));
+  --_media-center-header--button-color: var(--media-center-header--button-color, var(--sc-mc-color--button-player));
   --_media-center-header--button-color--inactive: var(
     --media-center-header--button-color--inactive,
-    rgb(from var(--_media-center-header--button-color, #000000) r g b / 60%)
+    rgb(from var(--_media-center-header--button-color, var(--sc-mc-color--button-player)) r g b / 60%)
   );
   width: 73.75rem;
   max-width: 100%;
@@ -264,7 +264,7 @@ const styles = $derived.by(() => {
   border-radius: 0.875rem;
   background-color: var(--_media-center-header--button-color--inactive);
   border-color: var(--_media-center-header--button-color);
-  color: #f2f2f2;
+  color: var(--sc-mc-color--text-inactive);
   transition: background 0.3s ease-in-out;
   -webkit-user-drag: none;
   user-select: none;
@@ -278,21 +278,19 @@ const styles = $derived.by(() => {
 }
 .control-button--active {
   background-color: var(--_media-center-header--button-color);
-  color: #ffffff;
+  color: var(--sc-mc-color--text-white);
 }
 .control-button:hover:not(.control-button--active) {
   background-color: var(--_media-center-header--button-color);
 }
 .control-button__icon {
   --icon--size: 1rem;
-  --icon--color: #f2f2f2;
   line-height: 0;
 }
 .control-button__icon--trigger {
   --icon--size: 1.5rem;
 }
 .control-button__icon--active {
-  --icon--color: #ffffff;
   --icon--stroke-width: 0.2;
 }
 .control-button__value {

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

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

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

@@ -1 +1 @@
-export { default as MediaCenter } from './cmp.media-center.svelte';
+export { default as MediaCenterProxy } from './cmp.media-center-proxy.svelte';

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

@@ -1 +1 @@
-export { default as MediaCenter } from './cmp.media-center.svelte';
+export { default as MediaCenterProxy } from './cmp.media-center-proxy.svelte';

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

@@ -20,7 +20,7 @@ export declare class MediaCenterContext {
     categoryFollowingHandler: IContentCategoryFollowingHandler | null;
     settingsHandler: MediaCenterSettingsHandler;
     closeOrchestrator: ICloseOrchestrator;
-    private _mediaCenterConfig;
+    private _targetData;
     constructor(data: {
         config: IMediaCenterConfig;
         closeOrchestrator: ICloseOrchestrator;
@@ -28,18 +28,7 @@ export declare class MediaCenterContext {
         on: MediaCenterContextInitializationCallbacks;
     });
     get targetData(): import("../config/types").MediaCenterTargetDataModel | null;
-    get playerColors(): {
-        brand: string | null;
-        button: string | null;
-        buttonInactive: string | null;
-        cardButton: string | null;
-        cardBackground: string | null;
-        menuBackground: string | null;
-        playerBackground: string | null;
-        price: string | null;
-        salePrice: string | null;
-        sidebarBackground: string | null;
-    } | null;
+    get playerColors(): import("../../ui/player/colors").PlayerColors | undefined;
     get loading(): boolean;
     get overlayIsActive(): boolean;
     get backgroundWrapperProps(): {
@@ -48,6 +37,7 @@ export declare class MediaCenterContext {
         backgroundColor?: string | null;
     };
     get feedPlayerProps(): import("./types").PlayerProps | null;
+    get locale(): import("../../core/locale").Locale;
     toggleMenu: () => void;
     showMenu: () => void;
     hideMenu: () => void;

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

@@ -21,7 +21,7 @@ export class MediaCenterContext {
     categoryFollowingHandler = $state.raw(null);
     settingsHandler;
     closeOrchestrator;
-    _mediaCenterConfig = $state.raw(null);
+    _targetData = $state.raw(null);
     constructor(data) {
         const { config, closeOrchestrator, settings, on } = data;
         this.closeOrchestrator = closeOrchestrator;
@@ -35,10 +35,10 @@ export class MediaCenterContext {
         this.init(config, on);
     }
     get targetData() {
-        return this._mediaCenterConfig?.targetData || null;
+        return this._targetData;
     }
     get playerColors() {
-        return this._mediaCenterConfig?.playerColors || null;
+        return this.settingsHandler.playerSettings.playerColors;
     }
     get loading() {
         return this.discoverHandler.loading || this.streamsInCategoryHandler.loading;
@@ -52,6 +52,9 @@ export class MediaCenterContext {
     get feedPlayerProps() {
         return this.feedHandler.feedPlayerProps;
     }
+    get locale() {
+        return this.settingsHandler.locale;
+    }
     toggleMenu = () => {
         if (this.menuActive) {
             this.hideMenu();
@@ -114,13 +117,14 @@ export class MediaCenterContext {
     };
     init = async (config, on) => {
         try {
-            this._mediaCenterConfig = await config.getConfig();
-            if (!this._mediaCenterConfig) {
+            const configModel = await config.getConfig();
+            if (!configModel) {
                 on.failed();
                 return;
             }
-            this.categoriesHandler.init(this._mediaCenterConfig.contentCategories);
-            this.settingsHandler.updatePlayerColors(this._mediaCenterConfig.playerColors);
+            this.categoriesHandler.init({ categories: configModel.contentCategories, tagAssociations: configModel.categoryTagAssociations });
+            this.settingsHandler.updatePlayerColors(configModel.playerColors);
+            this._targetData = configModel.targetData;
             on.initialized(this);
             this.initialized = true;
         }