@streamscloud/embeddable 12.1.0 → 13.0.0

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

@@ -1,21 +1,29 @@
 import { PostType } from '../../core/enums';
+import type { ThemeValue } from '../../core/theme';
 import type { IContentCategoryFollowingHandler } from '../categories-following';
+import type { IMediaCenterMembershipHandler } from '../membership';
+import type { IMediaCenterNavigationHandler } from '../navigation';
 import type { IPostAnalyticsHandler, PostPlayerModel } from '../../posts/posts-player/types';
 import type { IPostSocialInteractionsHandler } from '../../posts/social-interactions';
 import type { StreamPageViewerModel } from '../../streams/stream-page-viewer/types';
 import type { IStreamAnalyticsHandler, StreamPlayerModel } from '../../streams/streams-player/types';
-export interface IMediaCenterConfig {
-    getConfig: () => Promise<MediaCenterConfigModel | null>;
+import type { PlayerColors } from '../../ui/player/colors';
+export interface IMediaCenterDataProvider {
+    model: MediaCenterModel | null;
+    fetchModel: () => Promise<MediaCenterModel | null>;
     handlers?: {
         analyticsHandler?: IPostAnalyticsHandler & IStreamAnalyticsHandler;
-        socialInteractionsHandler?: IPostSocialInteractionsHandler;
         categoriesFollowingHandler?: IContentCategoryFollowingHandler;
+        membershipHandler?: IMediaCenterMembershipHandler;
+        navigationHandler?: IMediaCenterNavigationHandler;
+        socialInteractionsHandler?: IPostSocialInteractionsHandler;
     };
     postsPlayer: {
         getPostsCursor: (input: {
             filter: {
                 types: PostType[];
                 categoryId?: string;
+                includeIds?: string[];
                 excludeIds?: string[];
             };
             limit: number;
@@ -43,7 +51,22 @@ export interface IMediaCenterConfig {
         }>;
     };
 }
-export type MediaCenterConfigModel = {
+export type MediaCenterModel = {
+    id: string;
+    handle: string;
+    name: string;
+    description: string | null;
+    image: string | null;
+    logo: string | null;
+    banner: string | null;
+    moments: {
+        id: string;
+        cover: string;
+        isSeen: boolean;
+    }[];
+    communityFeatures: {
+        membersCount: number;
+    } | null;
     contentCategories: {
         id: string;
         name: string;
@@ -58,27 +81,5 @@ export type MediaCenterConfigModel = {
             backgroundColor: string;
         } | null;
     }[];
-    targetData: MediaCenterTargetDataModel;
-    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;
-};
-export type MediaCenterTargetDataModel = {
-    id: string;
-    name: string;
-    image: string | null;
-    membersCount: number;
-    logo: string | null;
-    handle: string;
-    description: string | null;
-    banner: string | null;
+    playerColors: Record<ThemeValue, PlayerColors>;
 };

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

@@ -1,2 +1,4 @@
-export type { IMediaCenterConfig } from './config/types';
+export type { IMediaCenterDataProvider } from './config/types';
 export type { IContentCategoryFollowingHandler } from './categories-following/types';
+export type { IMediaCenterMembershipHandler } from './membership';
+export type { IMediaCenterNavigationHandler, MediaCenterState } from './navigation';

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

@@ -0,0 +1,59 @@
+<script lang="ts">import { Theme } from '../../core/theme';
+import { Utils } from '../../core/utils';
+import { Loading } from '../../ui/loading';
+import {} from '../../ui/player/close-orchestrator';
+import { ShadowRoot } from '../../ui/shadow-dom';
+import { MediaCenterContext } from './media-center-context.svelte';
+import { default as MediaCenterView } from './media-center-view.svelte';
+import { untrack } from 'svelte';
+let { dataProvider, modeProps, settings, closeOrchestrator, dynamicActions } = $props();
+const context = new MediaCenterContext({
+    dataProvider,
+    closeOrchestrator,
+    settings,
+    on: {
+        initialized: (instance) => {
+            switch (modeProps.mode) {
+                case 'posts':
+                    instance.playPostsFeed({
+                        dataProvider: modeProps.props.dataProvider,
+                        onPostActivated: modeProps.props.onPostActivated
+                    });
+                    break;
+                case 'streams':
+                    instance.playStreamsFeed({
+                        dataProvider: modeProps.props.dataProvider,
+                        onStreamActivated: modeProps.props.onStreamActivated
+                    });
+                    break;
+                case 'default':
+                    instance.activateDiscover({ categoryId: null });
+                    break;
+                default:
+                    Utils.assertUnreachable(modeProps);
+            }
+        },
+        failed: () => {
+            console.error('Media Center initialization failed');
+            closeOrchestrator.requestClose();
+        }
+    }
+});
+$effect(() => {
+    void (settings === null || settings === void 0 ? void 0 : settings.theme);
+    untrack(() => {
+        var _a;
+        Theme.set((_a = settings === null || settings === void 0 ? void 0 : settings.theme) !== null && _a !== void 0 ? _a : 'dark');
+    });
+});
+</script>
+
+{#if context.initializing}
+  <Loading positionFixedCenter={true} timeout={600} />
+{:else if !context.initialized}
+  Not initialized placeholder
+{:else}
+  <ShadowRoot {...context.backgroundWrapperProps}>
+    <MediaCenterView context={context} dynamicActions={dynamicActions} />
+  </ShadowRoot>
+{/if}

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

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

package/dist/media-center/media-center/discover/community-features-localization.d.ts

@@ -0,0 +1,8 @@
+import { type Locale } from '../../../core/locale';
+export declare class CommunityFeaturesLocalization {
+    membersLabel: (count: number) => string;
+    memberButtonLabel: string;
+    joinButtonLabel: string;
+    leaveButtonLabel: string;
+    constructor(locale: Locale);
+}

package/dist/media-center/media-center/discover/community-features-localization.js

@@ -0,0 +1,31 @@
+import {} from '../../../core/locale';
+export class CommunityFeaturesLocalization {
+    membersLabel;
+    memberButtonLabel;
+    joinButtonLabel;
+    leaveButtonLabel;
+    constructor(locale) {
+        this.membersLabel = loc.membersLabel[locale];
+        this.memberButtonLabel = loc.memberButtonLabel[locale];
+        this.joinButtonLabel = loc.joinButtonLabel[locale];
+        this.leaveButtonLabel = loc.leaveButtonLabel[locale];
+    }
+}
+const loc = {
+    membersLabel: {
+        en: (count) => (count === 1 ? `Member` : `Members`),
+        no: (count) => (count === 1 ? `Medlem` : `Medlemmer`)
+    },
+    memberButtonLabel: {
+        en: 'Member',
+        no: 'Medlem'
+    },
+    joinButtonLabel: {
+        en: 'Join',
+        no: 'Bli med'
+    },
+    leaveButtonLabel: {
+        en: 'Leave',
+        no: 'Forlat'
+    }
+};

package/dist/media-center/media-center/discover/community-features.svelte

@@ -0,0 +1,171 @@
+<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 { compactNumber } from '../../../core/utils/compact-number';
+import { OptionsButton, ButtonSize, ButtonStyle, Button } from '../../../ui/button';
+import { CommunityFeaturesLocalization } from './community-features-localization';
+let { target, membershipHandler, locale } = $props();
+const localization = $derived(new CommunityFeaturesLocalization(locale));
+let uiState = $state('idle');
+let isJoinedStore = $state.raw({ isJoined: false });
+$effect(() => {
+    if (!membershipHandler) {
+        isJoinedStore = { isJoined: false };
+    }
+    else {
+        updateIsJoinedStore(membershipHandler);
+    }
+});
+const updateIsJoinedStore = (membershipHandler) => __awaiter(void 0, void 0, void 0, function* () {
+    uiState = 'loading';
+    try {
+        isJoinedStore = yield membershipHandler.getIsJoined();
+    }
+    finally {
+        uiState = 'idle';
+    }
+});
+const onLeaveMembershipClick = () => __awaiter(void 0, void 0, void 0, function* () {
+    if (!membershipHandler) {
+        return;
+    }
+    uiState = 'submitting';
+    try {
+        yield membershipHandler.leave();
+        yield updateIsJoinedStore(membershipHandler);
+    }
+    finally {
+        uiState = 'idle';
+    }
+});
+const onJoinMembershipClick = () => __awaiter(void 0, void 0, void 0, function* () {
+    if (!membershipHandler) {
+        return;
+    }
+    uiState = 'submitting';
+    try {
+        yield membershipHandler.join();
+        yield updateIsJoinedStore(membershipHandler);
+    }
+    finally {
+        uiState = 'idle';
+    }
+});
+</script>
+
+{#if target.communityFeatures && (target.communityFeatures.membersCount > 0 || membershipHandler)}
+  <div class="community-features">
+    <button
+      type="button"
+      class="members"
+      disabled={!membershipHandler || target.communityFeatures.membersCount === 0}
+      onclick={() => membershipHandler?.viewMembersList()}>
+      <span class="members__count">
+        {compactNumber(target.communityFeatures.membersCount, { locale })}
+      </span>
+      <span class="members__label">
+        {localization.membersLabel(target.communityFeatures.membersCount)}
+      </span>
+    </button>
+    {#if membershipHandler && uiState !== 'loading'}
+      <div class="actions">
+        {#if isJoinedStore.isJoined}
+          <OptionsButton size={ButtonSize.Small} style={ButtonStyle.Standard} optionsPosition="bottom-end" disabled={uiState === 'submitting'}>
+            {localization.memberButtonLabel}
+            {#snippet rightOptions()}
+              <div class="leave-actions">
+                <button type="button" class="leave-actions__button" onclick={onLeaveMembershipClick}>
+                  {localization.leaveButtonLabel}
+                </button>
+              </div>
+            {/snippet}
+          </OptionsButton>
+        {:else}
+          <Button size={ButtonSize.Small} style={ButtonStyle.Standard} on={{ click: onJoinMembershipClick }} disabled={uiState === 'submitting'}>
+            {localization.joinButtonLabel}
+          </Button>
+        {/if}
+      </div>
+    {/if}
+  </div>
+{/if}
+
+<style>@keyframes fadeIn {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.4;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+.community-features {
+  display: flex;
+  flex-wrap: nowrap;
+  margin-top: 0.625rem;
+  gap: 8.125rem;
+  align-items: center;
+  /* Set 'container-type: inline-size;' to reference container*/
+}
+@container (width < 576px) {
+  .community-features {
+    margin-top: 0.125rem;
+  }
+}
+
+.members {
+  display: flex;
+  align-items: center;
+  gap: 0.625rem;
+  /* Set 'container-type: inline-size;' to reference container*/
+}
+@container (width < 576px) {
+  .members {
+    align-items: flex-end;
+    gap: 0.25rem;
+  }
+}
+.members__count {
+  font-size: 0.9375rem;
+  line-height: 1;
+  font-weight: 500;
+  /* Set 'container-type: inline-size;' to reference container*/
+}
+@container (width < 576px) {
+  .members__count {
+    font-weight: 600;
+  }
+}
+.members__label {
+  font-size: 0.75rem;
+  line-height: 1;
+  font-weight: 400;
+  color: var(--sc-mc-color--text-secondary);
+  /* Set 'container-type: inline-size;' to reference container*/
+}
+@container (width < 576px) {
+  .members__label {
+    font-weight: 600;
+  }
+}
+
+.actions {
+  --button--min-width: 7.5rem;
+}
+
+.leave-actions {
+  background: var(--sc-mc-color--bg-button);
+  border-radius: 0.25rem;
+}
+.leave-actions__button {
+  padding: 0.3125rem 0.9375rem;
+  font-size: 0.75rem;
+}</style>

package/dist/media-center/media-center/discover/community-features.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { Locale } from '../../../core/locale';
+import type { MediaCenterModel } from '../../config/types';
+import type { IMediaCenterMembershipHandler } from '../../membership';
+type Props = {
+    target: MediaCenterModel;
+    membershipHandler: IMediaCenterMembershipHandler | null;
+    locale: Locale;
+};
+declare const CommunityFeatures: import("svelte").Component<Props, {}, "">;
+type CommunityFeatures = ReturnType<typeof CommunityFeatures>;
+export default CommunityFeatures;

package/dist/media-center/media-center/discover/data-loading.d.ts

@@ -1,8 +1,8 @@
-import type { IMediaCenterConfig } from '../../config/types';
+import type { IMediaCenterDataProvider } from '../../config/types';
 import { StreamsInCategory, ShortVideosInCategory } from './types.svelte';
 export declare class DiscoverDataLoader {
-    private readonly config;
-    constructor(config: IMediaCenterConfig);
+    private readonly dataProvider;
+    constructor(dataProvider: IMediaCenterDataProvider);
     loadStreams: (holder: StreamsInCategory) => Promise<void>;
     loadShortVideos: (holder: ShortVideosInCategory) => Promise<void>;
 }

package/dist/media-center/media-center/discover/data-loading.js

@@ -1,15 +1,15 @@
 import { PostType } from '../../..';
 import { StreamsInCategory, ShortVideosInCategory } from './types.svelte';
 export class DiscoverDataLoader {
-    config;
-    constructor(config) {
-        this.config = config;
+    dataProvider;
+    constructor(dataProvider) {
+        this.dataProvider = dataProvider;
     }
     loadStreams = async (holder) => {
         if (holder.continuationToken === null) {
             return;
         }
-        const streamsResponse = await this.config.streamPlayer.getStreamsCursor({
+        const streamsResponse = await this.dataProvider.streamPlayer.getStreamsCursor({
             filter: { categoryId: holder.categoryId ?? undefined },
             limit: 6,
             continuationToken: holder.continuationToken
@@ -21,7 +21,7 @@ export class DiscoverDataLoader {
         if (holder.continuationToken === null) {
             return;
         }
-        const shortVideosResponse = await this.config.postsPlayer.getPostsCursor({
+        const shortVideosResponse = await this.dataProvider.postsPlayer.getPostsCursor({
             filter: {
                 categoryId: holder.categoryId,
                 types: [PostType.ShortVideo]

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

@@ -1,15 +1,13 @@
-<script lang="ts">import { compactNumber } from '../../../core/utils/compact-number';
-import { ImageRounded } from '../../../ui/image';
+<script lang="ts">import { ImageRounded } from '../../../ui/image';
 import { LineClamp } from '../../../ui/line-clamp';
 import { ProportionalContainer } from '../../../ui/proportional-container';
-import { DiscoverHeaderLocalization } from './discover-header-localization';
+import { default as CommunityFeatures } from './community-features.svelte';
 import { MomentsCircle } from '../moments';
-let { context, locale = 'en' } = $props();
-const localization = $derived(new DiscoverHeaderLocalization(locale));
+let { context } = $props();
 </script>
 
-{#if context.targetData}
-  {@const target = context.targetData}
+{#if context.model}
+  {@const target = context.model}
   <div class="header">
     <div class="header__avatar">
       <MomentsCircle context={context} />
@@ -17,18 +15,11 @@ const localization = $derived(new DiscoverHeaderLocalization(locale));
     <div class="header__info">
       <p class="header__name">{target.name}</p>
       <p class="header__handle">@{target.handle}</p>
-      <div class="header__members">
-        <span class="header__members-count">
-          {compactNumber(target.membersCount, { locale: localization.locale })}
-        </span>
-        <span class="header__members-label">
-          {localization.membersLabel(target.membersCount)}
-        </span>
-      </div>
+      <CommunityFeatures target={target} membershipHandler={context.membershipHandler} locale={context.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>
@@ -48,19 +39,12 @@ const localization = $derived(new DiscoverHeaderLocalization(locale));
       </div>
       <div class="header-mobile__texts">
         <p class="header-mobile__name">{target.name}</p>
-        <div class="header-mobile__members">
-          <span class="header-mobile__members-count">
-            {compactNumber(target.membersCount, { locale: localization.locale })}
-          </span>
-          <span class="header-mobile__members-label">
-            {localization.membersLabel(target.membersCount)}
-          </span>
-        </div>
+        <CommunityFeatures target={target} membershipHandler={context.membershipHandler} locale={context.locale} />
       </div>
     </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 +66,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,33 +93,13 @@ 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;
-}
-.header__members {
-  margin-top: 0.625rem;
-  display: flex;
-  align-items: center;
-  gap: 0.625rem;
-}
-.header__members-count {
-  font-size: 0.9375rem;
-  line-height: 1;
-  font-weight: 500;
-}
-.header__members-label {
-  font-size: 0.75rem;
-  line-height: 1;
-  font-weight: 400;
-  color: #d1d5db;
+  color: var(--sc-mc-color--text-brand);
 }
 .header__description {
   margin-top: 0.875rem;
   font-size: 0.9375rem;
   max-width: 37.5rem;
-  --line-clamp--line-clamp: 6;
+  --line-clamp--line-clamp: 5;
 }
 .header__side-banner-container {
   width: 29.375rem;
@@ -154,7 +118,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) {
@@ -191,22 +155,6 @@ const localization = $derived(new DiscoverHeaderLocalization(locale));
     letter-spacing: -0.0103125rem;
   }
 }
-.header-mobile__members {
-  display: flex;
-  align-items: flex-end;
-  gap: 0.25rem;
-}
-.header-mobile__members-count {
-  font-size: 0.9375rem;
-  line-height: 1;
-  font-weight: 600;
-}
-.header-mobile__members-label {
-  font-size: 0.75rem;
-  line-height: 1;
-  font-weight: 600;
-  color: #d1d5db;
-}
 .header-mobile__description {
   font-size: 1rem;
   font-weight: 500;

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

@@ -1,7 +1,7 @@
-import type { IMediaCenterConfig } from '../../config/types';
+import type { IMediaCenterDataProvider } from '../../config/types';
 import { ShortVideosInCategory, StreamsInCategory } from './types.svelte';
 export declare class DiscoverViewHandler {
-    private readonly config;
+    private readonly dataProvider;
     private _activated;
     private _state;
     private _streamsInCategoryCache;
@@ -10,7 +10,7 @@ export declare class DiscoverViewHandler {
     private _shortVideosInCategory;
     private _dataLoader;
     private _shortVideosLoadingDeferred;
-    constructor(config: IMediaCenterConfig);
+    constructor(dataProvider: IMediaCenterDataProvider);
     get activated(): boolean;
     get active(): boolean;
     get loading(): boolean;

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

@@ -2,7 +2,7 @@ import { Deferred } from '../../../core/deferred';
 import { DiscoverDataLoader } from './data-loading';
 import { ShortVideosInCategory, StreamsInCategory } from './types.svelte';
 export class DiscoverViewHandler {
-    config;
+    dataProvider;
     _activated = $state(false);
     _state = $state('loading');
     _streamsInCategoryCache = $state.raw([]);
@@ -11,9 +11,9 @@ export class DiscoverViewHandler {
     _shortVideosInCategory = $state.raw([]);
     _dataLoader;
     _shortVideosLoadingDeferred = null;
-    constructor(config) {
-        this.config = config;
-        this._dataLoader = new DiscoverDataLoader(this.config);
+    constructor(dataProvider) {
+        this.dataProvider = dataProvider;
+        this._dataLoader = new DiscoverDataLoader(this.dataProvider);
     }
     get activated() {
         return this._activated;

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;