@streamscloud/embeddable 16.0.5 → 16.0.7-1772032308956

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

@@ -1,4 +1,3 @@
-import { PostType } from '../../..';
 import { StreamsInCategory, ShortVideosInCategory } from './types.svelte';
 export class DiscoverDataLoader {
     dataProvider;
@@ -30,7 +29,7 @@ export class DiscoverDataLoader {
         const shortVideosResponse = await this.dataProvider.postsPlayer.getPostsCursor({
             filter: {
                 categoryId: holder.categoryId,
-                types: [PostType.ShortVideo]
+                types: ['SHORT_VIDEO']
             },
             limit: this.minItemsPerLoad,
             continuationToken: holder.continuationToken

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

@@ -1,4 +1,3 @@
-import { PostType } from '../../../core/enums';
 import { DiscoverDataLoader } from './data-loading';
 import { ShortVideosInCategory, StreamsInCategory } from './types.svelte';
 import { Deferred } from '@streamscloud/kit/core';
@@ -113,7 +112,7 @@ export class DiscoverViewHandler {
         this._shortVideosLoadingDeferred = null;
     };
     onPostCreated = (data) => {
-        if (!data.isPublished || data.post.postType !== PostType.ShortVideo) {
+        if (!data.isPublished || data.post.postType !== 'SHORT_VIDEO') {
             return;
         }
         const affectedHolders = this._shortVideosInCategoryCache.filter((x) => data.categories.includes(x.categoryId) && x.continuationToken !== undefined);

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

@@ -4,7 +4,7 @@ import type { PostPlayerModel, PostsPlayerProps, PostManagementActions } from '.
 import type { ICloseOrchestrator } from '../../../ui/player/close-orchestrator';
 import { MomentsState } from './moments-state.svelte';
 import { MediaCenterContentHandler, MediaCenterSettingsHandler } from '../handlers';
-import { type IPlayerBuffer } from '@streamscloud/kit/ui/player/providers';
+import type { IPlayerBuffer } from '@streamscloud/kit/ui/player/providers';
 export declare class MomentsFeedHandler {
     momentsState: MomentsState;
     private _active;

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

@@ -1,4 +1,3 @@
-import { PostType } from '../../../core/enums';
 import { MomentsState } from './moments-state.svelte';
 import { MediaCenterContentHandler, MediaCenterSettingsHandler } from '../handlers';
 import { initBufferFromProvider } from '@streamscloud/kit/ui/player/providers';
@@ -79,7 +78,7 @@ export class MomentsFeedHandler {
         this._active = true;
     };
     onPostCreated = (data) => {
-        if (!this._active || !data.isPublished || data.post.postType !== PostType.Moment) {
+        if (!this._active || !data.isPublished || data.post.postType !== 'MOMENT') {
             return;
         }
         // Reactivate to include the new moment
@@ -89,7 +88,7 @@ export class MomentsFeedHandler {
         if (!this._active) {
             return false;
         }
-        const postStillInTheFeed = data.isPublished && data.post.postType === PostType.Moment;
+        const postStillInTheFeed = data.isPublished && data.post.postType === 'MOMENT';
         if (postStillInTheFeed) {
             this.activate({ initialMomentId: data.post.id });
         }

package/dist/media-center/media-center/moments/moments-state.svelte.d.ts

@@ -1,5 +1,5 @@
 import type { IMediaCenterDataProvider } from '../..';
-import { type PostPlayerModel } from '../../../posts/posts-player';
+import type { PostPlayerModel } from '../../../posts/posts-player';
 import type { IChunksPlayerDataProvider } from '@streamscloud/kit/ui/player/providers';
 export declare class MomentsState {
     private readonly dataProvider;

package/dist/media-center/media-center/moments/moments-state.svelte.js

@@ -1,5 +1,3 @@
-import { PostType } from '../../../core/enums';
-import {} from '../../../posts/posts-player';
 import { SvelteMap } from 'svelte/reactivity';
 export class MomentsState {
     dataProvider;
@@ -85,7 +83,7 @@ export class MomentsState {
                 }
                 const moments = await this.dataProvider.postsPlayer.getPostsCursor({
                     filter: {
-                        types: [PostType.Moment],
+                        types: ['MOMENT'],
                         ids: momentsInChunk
                     },
                     limit: collectionCapacity

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

@@ -1,7 +1,6 @@
-import { PostType } from '../../../core/enums';
 import { ContinuationToken } from '@streamscloud/kit/core';
 import { CursorDataLoader } from '@streamscloud/kit/core/data-loaders';
-const SUPPORTED_POST_TYPES = [PostType.Article, PostType.Media, PostType.ShortVideo, PostType.Video];
+const SUPPORTED_POST_TYPES = ['ARTICLE', 'MEDIA', 'SHORT_VIDEO', 'VIDEO'];
 export class FeedProvidersGenerator {
     dataProvider;
     constructor(dataProvider) {

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

@@ -4,7 +4,7 @@ import type { PostManagementActions, PostPlayerModel, PostsPlayerProps } from '.
 import type { ICloseOrchestrator } from '../../../ui/player/close-orchestrator';
 import { MediaCenterContentHandler, MediaCenterSettingsHandler } from '../handlers';
 import type { PostsFeedFilter, PostsFeedProviderInit } from './types';
-import { type IPlayerBuffer, type IPlayerDataProvider } from '@streamscloud/kit/ui/player/providers';
+import type { IPlayerBuffer, IPlayerDataProvider } from '@streamscloud/kit/ui/player/providers';
 export declare class PostsFeedHandler {
     private _state;
     private _providersGenerator;

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

@@ -1,4 +1,3 @@
-import { PostType } from '../../..';
 import { MediaCenterContentHandler, MediaCenterSettingsHandler } from '../handlers';
 import { FeedProvidersGenerator } from './feed-providers-generator';
 import { Utils } from '@streamscloud/kit/core/utils';
@@ -154,7 +153,7 @@ export class PostsFeedHandler {
             // Unpublished posts never affect the feed
             return false;
         }
-        if (post.postType === PostType.Moment) {
+        if (post.postType === 'MOMENT') {
             // Moments are processed separately
             return false;
         }

package/dist/media-page/cmp.media-page.svelte

@@ -33,4 +33,4 @@ const initHost = (node) => {
 };
 </script>
 
-<div class="streams-player-host" use:initHost></div>
+<div class="media-page-host" use:initHost></div>

package/dist/posts/attachments/cmp.attachments.svelte

@@ -1,5 +1,4 @@
-<script lang="ts">import { PostType } from '../..';
-import { AdCard } from '../../ads/ad-card';
+<script lang="ts">import { AdCard } from '../../ads/ad-card';
 import { PostModel } from '../model';
 import { ProductCard } from '../../products/product-card';
 let { model, trackingParams: externalTrackingParams, on } = $props();
@@ -7,7 +6,7 @@ const trackingParams = $derived.by(() => {
     if (externalTrackingParams || externalTrackingParams === false) {
         return externalTrackingParams;
     }
-    if (model.postType === PostType.ShortVideo) {
+    if (model.postType === 'SHORT_VIDEO') {
         return { shortVideoId: model.id };
     }
     return false;

package/dist/posts/model/post-model.d.ts

@@ -1,4 +1,4 @@
-import { PostType } from '../../core/enums';
+import type { PostType } from '../../core/enums';
 import { PostViewerMediaModel } from './post-media-model.svelte';
 import type { IPostModel, IPostAdCardModel, IPostHeadingModel, IPostProductCardModel } from './types';
 export declare class PostModel {

package/dist/posts/model/post-model.js

@@ -1,4 +1,3 @@
-import { PostType } from '../../core/enums';
 import { PostViewerMediaModel } from './post-media-model.svelte';
 export class PostModel {
     id;

package/dist/posts/post-viewer/attachments-horizontal.svelte

@@ -1,5 +1,4 @@
-<script lang="ts">import { Currency } from '../../core/enums';
-import { enrichAdLinkWithTracking, enrichProductLinkWithTracking } from '../../marketing-tracking';
+<script lang="ts">import { enrichAdLinkWithTracking, enrichProductLinkWithTracking } from '../../marketing-tracking';
 import { PostModel } from '../model';
 import { toPriceRepresentation } from '../../products/price-helper';
 import { PostViewerUiManager } from './ui-manager.svelte';

package/dist/posts/post-viewer/cmp.post-viewer.svelte

@@ -1,5 +1,4 @@
-<script lang="ts">import { PostType } from '../..';
-import { PostModel } from '../model';
+<script lang="ts">import { PostModel } from '../model';
 import { default as AttachmentsHorizontal } from './attachments-horizontal.svelte';
 import { default as Heading } from './heading.svelte';
 import { default as PostMedia } from './media/post-media.svelte';
@@ -18,7 +17,7 @@ const trackingParams = $derived.by(() => {
     if (externalTrackingParams || externalTrackingParams === false) {
         return externalTrackingParams;
     }
-    if (model.postType === PostType.ShortVideo) {
+    if (model.postType === 'SHORT_VIDEO') {
         return { shortVideoId: model.id };
     }
     return false;

package/dist/posts/post-viewer/mapper.js

@@ -1,4 +1,3 @@
-import { MediaType, PostType } from '../../core/enums';
 import { getMediaItemImageUrl } from '../../core/media';
 import { shouldUseSalePrice } from '../../products/price-helper';
 export const mapToPostModel = (payload) => {
@@ -29,15 +28,15 @@ export const mapToPostModel = (payload) => {
 const mapToPostType = (payload) => {
     switch (true) {
         case !!payload.shortVideoData:
-            return PostType.ShortVideo;
+            return 'SHORT_VIDEO';
         case !!payload.momentData:
-            return PostType.Moment;
+            return 'MOMENT';
         case !!payload.articleData:
-            return PostType.Article;
+            return 'ARTICLE';
         case !!payload.videoData:
-            return PostType.Video;
+            return 'VIDEO';
         case !!payload.mediaData:
-            return PostType.Media;
+            return 'MEDIA';
         default:
             return null;
     }
@@ -56,7 +55,7 @@ const extractPostText = (payload) => {
 };
 const mapToPostViewerMediaModel = (payload) => {
     return payload.media.map((i) => {
-        return i.type === MediaType.Image
+        return i.type === 'IMAGE'
             ? { isImage: true, url: i.url }
             : {
                 isImage: false,

package/dist/posts/posts-player/cmp.posts-player.svelte

@@ -1,8 +1,13 @@
 <script lang="ts">import { CloseOrchestrator } from '../../ui/player/close-orchestrator';
 import { createShadowRoot } from '../../ui/shadow-dom';
+import { PostsPlayerHostSettings } from './posts-player-host-settings.svelte';
 import { default as PostsPlayerProxy } from './posts-player-proxy.svelte';
-import { mount, unmount } from 'svelte';
+import { mount, unmount, untrack } from 'svelte';
 let { dataProvider, socialInteractionsHandler, sharingHandler, playerSettings, analyticsHandler, on } = $props();
+const settingsHolder = untrack(() => new PostsPlayerHostSettings(playerSettings));
+$effect(() => {
+    settingsHolder.update(playerSettings);
+});
 const initHost = (node) => {
     const shadowRoot = createShadowRoot(node);
     const mounted = mount(PostsPlayerProxy, {
@@ -11,7 +16,7 @@ const initHost = (node) => {
             dataProvider,
             socialInteractionsHandler,
             sharingHandler,
-            playerSettings,
+            playerSettings: settingsHolder,
             analyticsHandler,
             closeOrchestrator: new CloseOrchestrator({
                 closeFn: async () => {

package/dist/posts/posts-player/posts-player-host-settings.svelte.d.ts

@@ -0,0 +1,20 @@
+import type { ThemeValue } from '../../core/theme';
+import type { AppLocaleValue } from '@streamscloud/kit/core/locale';
+export declare class PostsPlayerHostSettings {
+    locale: AppLocaleValue | undefined;
+    showStreamsCloudWatermark: boolean | undefined;
+    disableBackground: boolean | undefined;
+    theme: ThemeValue | undefined;
+    constructor(init: {
+        locale?: AppLocaleValue;
+        showStreamsCloudWatermark?: boolean;
+        disableBackground?: boolean;
+        theme?: ThemeValue;
+    } | undefined);
+    update: (data: {
+        locale?: AppLocaleValue;
+        showStreamsCloudWatermark?: boolean;
+        disableBackground?: boolean;
+        theme?: ThemeValue;
+    } | undefined) => void;
+}

package/dist/posts/posts-player/posts-player-host-settings.svelte.js

@@ -0,0 +1,15 @@
+export class PostsPlayerHostSettings {
+    locale = $state();
+    showStreamsCloudWatermark = $state();
+    disableBackground = $state();
+    theme = $state();
+    constructor(init) {
+        this.update(init);
+    }
+    update = (data) => {
+        this.locale = data?.locale;
+        this.showStreamsCloudWatermark = data?.showStreamsCloudWatermark;
+        this.disableBackground = data?.disableBackground;
+        this.theme = data?.theme;
+    };
+}

package/dist/posts/posts-player/posts-player-view.svelte

@@ -1,5 +1,4 @@
-<script lang="ts">import { PostType } from '../../core/enums';
-import { PostAttachments } from '../attachments';
+<script lang="ts">import { PostAttachments } from '../attachments';
 import { PostActionsGenerator } from '../controls';
 import { getPostCoverImage, PostModel } from '../model';
 import { PostViewer } from '../post-viewer';
@@ -57,7 +56,7 @@ const contentPlayerConfig = untrack(() => new PlayerConfig({
             if (on?.backgroundImageLoaded) {
                 on.backgroundImageLoaded(getPostCoverImage(post));
             }
-            if (post.postType === PostType.ShortVideo) {
+            if (post.postType === 'SHORT_VIDEO') {
                 analyticsHandler?.trackShortVideoView(id);
             }
             else if (post.postType) {
@@ -73,12 +72,12 @@ const postActionsGenerator = untrack(() => new PostActionsGenerator({
     on: { attachmentClicked: () => (contentPlayerConfig.uiManager.attachmentsCollapsed = !contentPlayerConfig.uiManager.attachmentsCollapsed) }
 }));
 const onProductClick = (id, postId) => {
-    if (getLoadedItemById(postId)?.postType === PostType.ShortVideo) {
+    if (getLoadedItemById(postId)?.postType === 'SHORT_VIDEO') {
         analyticsHandler?.trackShortVideoProductClick(id, postId);
     }
 };
 const onProductImpression = (id, postId) => {
-    if (getLoadedItemById(postId)?.postType === PostType.ShortVideo) {
+    if (getLoadedItemById(postId)?.postType === 'SHORT_VIDEO') {
         analyticsHandler?.trackShortVideoProductImpression(id, postId);
     }
 };
@@ -104,7 +103,7 @@ const currentItemActions = $derived.by(() => {
     const postModel = itemAsPostModel(buffer.current);
     const handler = postActionsGenerator.getPostActionsHandler(postModel);
     result.push(...handler.actions);
-    if (managementActions?.editPost && postModel.postType !== PostType.Article) {
+    if (managementActions?.editPost && postModel.postType !== 'ARTICLE') {
         result.push({
             icon: IconEdit,
             callback: async () => {
@@ -112,7 +111,7 @@ const currentItemActions = $derived.by(() => {
             }
         });
     }
-    if (managementActions?.editArticle && postModel.postType === PostType.Article && buffer.current.articleId) {
+    if (managementActions?.editArticle && postModel.postType === 'ARTICLE' && buffer.current.articleId) {
         result.push({
             icon: IconEdit,
             callback: async () => {

package/dist/products/price-helper.d.ts

@@ -1,4 +1,4 @@
-import { Currency } from '../core/enums';
+import type { Currency } from '../core/enums';
 type CurrencyMode = 'none' | 'symbol' | 'code';
 export type PriceRepresentationOptions = {
     currencyMode?: CurrencyMode;

package/dist/products/price-helper.js

@@ -1,4 +1,3 @@
-import { Currency } from '../core/enums';
 import { Utils } from '@streamscloud/kit/core/utils';
 export const toPriceRepresentation = (data) => {
     const { amount, currency, options } = data;
@@ -52,9 +51,9 @@ export const toPriceRepresentation = (data) => {
     }
 };
 const currencyDefaults = {
-    [Currency.Nok]: { symbol: 'kr', code: 'NOK', missingFractionPlaceholder: '-' },
-    [Currency.Usd]: { symbol: '$', code: 'USD' },
-    [Currency.Eur]: { symbol: '€', code: 'EUR' }
+    ['NOK']: { symbol: 'kr', code: 'NOK', missingFractionPlaceholder: '-' },
+    ['USD']: { symbol: '$', code: 'USD' },
+    ['EUR']: { symbol: '€', code: 'EUR' }
 };
 const getDecimalSeparator = (locale) => {
     const nf = new Intl.NumberFormat(locale);

package/dist/streams/layout/cmp.slot-content.svelte

@@ -93,11 +93,7 @@ const productLinkMounted = (node, productModel) => {
       {@render slotContent()}
     </a>
   {:else}
-    <button
-      type="button"
-      class="stream-slot-content-product-link"
-      onclick={handleProductClick}
-      use:productLinkMounted={productModel}>
+    <button type="button" class="stream-slot-content-product-link" onclick={handleProductClick} use:productLinkMounted={productModel}>
       {@render slotContent()}
     </button>
   {/if}

package/dist/streams/layout/models/mapper.d.ts

@@ -1,3 +1,3 @@
-import { type IPostModel } from '../../../posts/model';
+import type { IPostModel } from '../../../posts/model';
 import type { StreamLayoutShortVideoModel } from '../models/stream-layout-short-video-model';
 export declare const mapToPostModel: (model: StreamLayoutShortVideoModel) => IPostModel;

package/dist/streams/layout/models/mapper.js

@@ -1,13 +1,9 @@
-import { MediaType, PostType } from '../../../core/enums';
-import {} from '../../../posts/model';
 export const mapToPostModel = (model) => {
     return {
         id: model.id,
-        postType: PostType.ShortVideo,
+        postType: 'SHORT_VIDEO',
         media: [
-            model.media.type === MediaType.Image
-                ? { isImage: true, url: model.media.url }
-                : { isImage: false, url: model.media.url, thumbnailUrl: model.media.thumbnailUrl }
+            model.media.type === 'IMAGE' ? { isImage: true, url: model.media.url } : { isImage: false, url: model.media.url, thumbnailUrl: model.media.thumbnailUrl }
         ],
         mediaFit: 'cover',
         kicker: null,

package/dist/streams/layout/models/stream-layout-media-item-model.d.ts

@@ -1,4 +1,4 @@
-import { MediaType } from '../../../core/enums';
+import type { MediaType } from '../../../core/enums';
 export type StreamLayoutMediaItemModel = {
     url: string;
     thumbnailUrl: string | null;

package/dist/streams/layout/models/stream-layout-media-item-model.js

@@ -1 +1 @@
-import { MediaType } from '../../../core/enums';
+export {};

package/dist/streams/layout/models/stream-layout-short-video-model.d.ts

@@ -1,4 +1,4 @@
-import { AdType, type Currency } from '../../../core/enums';
+import type { AdType, Currency } from '../../../core/enums';
 import type { StreamLayoutMediaItemModel } from './stream-layout-media-item-model';
 import type { StreamLayoutPostHeaderModel } from './stream-layout-post-header-model';
 export type StreamLayoutShortVideoModel = {

package/dist/streams/layout/models/stream-layout-short-video-model.js

@@ -1 +1 @@
-import { AdType } from '../../../core/enums';
+export {};

package/dist/streams/streams-player/cmp.streams-player.svelte

@@ -1,8 +1,13 @@
 <script lang="ts">import { CloseOrchestrator } from '../../ui/player/close-orchestrator';
 import { createShadowRoot } from '../../ui/shadow-dom';
+import { StreamsPlayerHostSettings } from './streams-player-host-settings.svelte';
 import { default as StreamsPlayerProxy } from './streams-player-proxy.svelte';
-import { mount, unmount } from 'svelte';
+import { mount, unmount, untrack } from 'svelte';
 let { dataProvider, postSocialInteractionsHandler, sharingHandler, amplificationParameters, playerSettings, analyticsHandler, on } = $props();
+const settingsHolder = untrack(() => new StreamsPlayerHostSettings(playerSettings));
+$effect(() => {
+    settingsHolder.update(playerSettings);
+});
 const initHost = (node) => {
     const shadowRoot = createShadowRoot(node);
     const mounted = mount(StreamsPlayerProxy, {
@@ -13,7 +18,7 @@ const initHost = (node) => {
             sharingHandler,
             analyticsHandler,
             amplificationParameters,
-            playerSettings,
+            playerSettings: settingsHolder,
             closeOrchestrator: new CloseOrchestrator({
                 closeFn: async () => {
                     await unmount(mounted);

package/dist/streams/streams-player/streams-player-host-settings.svelte.d.ts

@@ -0,0 +1,20 @@
+import type { ThemeValue } from '../../core/theme';
+import type { AppLocaleValue } from '@streamscloud/kit/core/locale';
+export declare class StreamsPlayerHostSettings {
+    locale: AppLocaleValue | undefined;
+    showStreamsCloudWatermark: boolean | undefined;
+    disableBackground: boolean | undefined;
+    theme: ThemeValue | undefined;
+    constructor(init: {
+        locale?: AppLocaleValue;
+        showStreamsCloudWatermark?: boolean;
+        disableBackground?: boolean;
+        theme?: ThemeValue;
+    } | undefined);
+    update: (data: {
+        locale?: AppLocaleValue;
+        showStreamsCloudWatermark?: boolean;
+        disableBackground?: boolean;
+        theme?: ThemeValue;
+    } | undefined) => void;
+}

package/dist/streams/streams-player/streams-player-host-settings.svelte.js

@@ -0,0 +1,15 @@
+export class StreamsPlayerHostSettings {
+    locale = $state();
+    showStreamsCloudWatermark = $state();
+    disableBackground = $state();
+    theme = $state();
+    constructor(init) {
+        this.update(init);
+    }
+    update = (data) => {
+        this.locale = data?.locale;
+        this.showStreamsCloudWatermark = data?.showStreamsCloudWatermark;
+        this.disableBackground = data?.disableBackground;
+        this.theme = data?.theme;
+    };
+}

package/dist/ui/media-item-view/cmp.media-item-view.svelte

@@ -1,5 +1,4 @@
-<script lang="ts">import { MediaFormat, MediaType } from '../../core/enums';
-import { getMediaItemImageUrl } from '../../core/media';
+<script lang="ts">import { getMediaItemImageUrl } from '../../core/media';
 import { Image } from '@streamscloud/kit/ui/image';
 import { ProportionalContainer } from '@streamscloud/kit/ui/proportional-container';
 import { Video } from '@streamscloud/kit/ui/video';
@@ -16,7 +15,7 @@ const parsedRatio = $derived.by(() => {
     }
     else {
         if (typeof ratio !== 'number') {
-            return ratio === MediaFormat.W16H9 ? 16 / 9 : 4 / 3;
+            return ratio === 'W16H9' ? 16 / 9 : 4 / 3;
         }
         else {
             return ratio;
@@ -27,7 +26,7 @@ const parsedRatio = $derived.by(() => {
 
 {#if media}
   {#snippet mediaView()}
-    {#if media.type === MediaType.Image}
+    {#if media.type === 'IMAGE'}
       <div class="media-item-view__image" onclick={handleClick} onkeydown={() => {}} role="none">
         <Image src={getMediaItemImageUrl(media)} />
       </div>

package/dist/ui/media-item-view/cmp.media-item-view.svelte.d.ts

@@ -1,4 +1,4 @@
-import { MediaFormat } from '../../core/enums';
+import type { MediaFormat } from '../../core/enums';
 import { type MediaItemModel } from '../../core/media';
 type Props = {
     media: MediaItemModel | null;

package/dist/ui/media-items-gallery/cmp.media-items-gallery.svelte

@@ -1,5 +1,4 @@
-<script lang="ts">import { MediaFormat } from '../../core/enums';
-import {} from '../../core/media';
+<script lang="ts">import {} from '../../core/media';
 import { MediaItemView } from '../media-item-view';
 import { GalleryLayout } from './types';
 let { media, singleImageRatio = 0, inert = false, on } = $props();
@@ -24,12 +23,12 @@ const handleGalleryItemClick = (index) => {
     }
     /*const toMediaViewerItemType = (type: MediaType) => {
       switch (type) {
-        case MediaType.Image:
+        case 'IMAGE':
           return MediaViewerItemType.Image;
-        case MediaType.Video:
-        case MediaType.ShortVideo:
+        case 'VIDEO':
+        case 'SHORT_VIDEO':
           return MediaViewerItemType.Video;
-        case MediaType.Audio:
+        case 'AUDIO':
           return MediaViewerItemType.Audio;
         default:
           Utils.assertUnreachable(type);

package/dist/ui/media-items-gallery/cmp.media-items-gallery.svelte.d.ts

@@ -1,4 +1,4 @@
-import { MediaFormat } from '../../core/enums';
+import type { MediaFormat } from '../../core/enums';
 import { type MediaItemWithMetadataModel } from '../../core/media';
 type Props = {
     media: Array<MediaItemWithMetadataModel> | ReadonlyArray<MediaItemWithMetadataModel>;

package/dist/ui/shadow-dom/cmp.shadow-root.svelte

@@ -81,6 +81,7 @@ const styles = $derived.by(() => {
   --sc-mc-color--text-secondary: light-dark(#6b7280, #d1d5db);
   --sc-mc-color--text-white: #ffffff;
   --sc-mc-color--text-white-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-primary);
   /* Player brand colors — overridable via --sc-player--{light|dark}--{name} custom properties */
   --sc-player--background: light-dark(
     var(--sc-player--light--background, rgb(from var(--sc-mc-color--bg-screen) r g b / 90%)),
@@ -128,10 +129,14 @@ const styles = $derived.by(() => {
   height: 100%;
   min-height: 100%;
   max-height: 100%;
+  box-sizing: border-box;
   container-type: inline-size;
   display: flex;
   flex-direction: column;
+  font: 400 16px Inter, sans-serif, arial;
+  line-height: 1.15;
   position: relative;
+  text-align: initial;
 }
 .shadow-root:before {
   content: "";

package/dist/ui/shadow-dom/colors.scss

@@ -38,6 +38,8 @@
   --sc-mc-color--text-white: #{colors.$color-white};
   --sc-mc-color--text-white-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-primary);
+
   /* Player brand colors — overridable via --sc-player--{light|dark}--{name} custom properties */
   --sc-player--background: light-dark(
     var(--sc-player--light--background, rgb(from var(--sc-mc-color--bg-screen) r g b / 90%)),

package/dist/ui/shadow-dom/shadow-root-service.js

@@ -10,11 +10,4 @@ export const createShadowRoot = (host) => {
 };
 const prepareShadowRootHost = (host) => {
     host.style.all = 'unset';
-    host.style.lineHeight = '1.15';
-    host.style.font = '16px Inter, sans-serif, arial';
-    host.style.fontWeight = '400';
-    host.style.margin = '0';
-    host.style.boxSizing = 'border-box';
-    host.style.textAlign = 'initial';
-    host.style.color = 'var(--sc-mc-color--text-primary)';
 };