@streamscloud/embeddable 10.1.2 → 12.0.0

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

@@ -0,0 +1,238 @@
+<script lang="ts">import { getPostCoverImage } from '../../../posts/model';
+import { ShortVideoCard } from '../../../short-videos/short-video-card';
+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();
+const handler = $derived(context.discoverHandler);
+const localization = $derived(new DiscoverViewLocalization(locale));
+</script>
+
+{#if !handler.loading}
+  <div class="media-center-discover">
+    <div class="media-center-discover__content">
+      <Header context={context} locale={locale} />
+      {#if handler.streamsHolder?.streams.length}
+        <div class="media-center-discover__section">
+          <div class="media-center-discover__section-header">
+            {localization.latestStreamsSectionTitle}
+          </div>
+          <div class="media-center-discover__section-content media-center-discover__section-content--5">
+            {#each handler.streamsHolder.streams as item (item.id)}
+              <StreamCard stream={item} on={{ click: () => on.streamSelected(item) }}></StreamCard>
+            {/each}
+          </div>
+        </div>
+      {/if}
+      {#each handler.shortVideosHolders as holder, index (holder)}
+        <InfiniteScrolling loadMore={handler.loadMoreShortVideos}>
+          {#if holder.shortVideos.length}
+            <div class="media-center-discover__section">
+              <div class="media-center-discover__section-header">
+                {holder.categoryName}
+              </div>
+              <div
+                class="media-center-discover__section-content"
+                class:media-center-discover__section-content--5={index % 2 !== 0}
+                class:media-center-discover__section-content--4={index % 2 === 0}>
+                {#each holder.shortVideos as item (item.id)}
+                  <ShortVideoCard
+                    shortVideo={{
+                      id: item.id,
+                      text: item.text,
+                      cover: getPostCoverImage(item),
+                      displayDate: item.displayDate,
+                      viewsCount: item.viewsCount,
+                      products: item.products
+                    }}
+                    locale={locale}
+                    on={{ click: () => on.shortVideoSelected(item) }} />
+                {/each}
+              </div>
+            </div>
+          {/if}
+        </InfiniteScrolling>
+      {/each}
+    </div>
+  </div>
+{/if}
+
+<style>@keyframes fadeIn {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.4;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+.media-center-discover {
+  width: 100%;
+  flex: 1;
+  scrollbar-gutter: stable both-edges;
+  padding-inline: 1.875rem;
+  overflow-y: auto;
+  --_cross-browser-scrollbar--thumb-color: transparent;
+  --_cross-browser-scrollbar--track-color: transparent;
+  /* Set 'container-type: inline-size;' to reference container*/
+}
+.media-center-discover:hover {
+  --_cross-browser-scrollbar--thumb-color: var(--scrollbar--thumb-color, #7d7d7d);
+  --_cross-browser-scrollbar--track-color: var(--scrollbar--track-color, transparent);
+}
+.media-center-discover::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+.media-center-discover::-webkit-scrollbar-track {
+  background: var(--_cross-browser-scrollbar--track-color);
+  border-radius: 100vw;
+}
+.media-center-discover::-webkit-scrollbar-thumb {
+  background: var(--_cross-browser-scrollbar--thumb-color);
+  border-radius: 100vw;
+}
+@supports (scrollbar-color: transparent transparent) {
+  .media-center-discover {
+    scrollbar-color: var(--_cross-browser-scrollbar--thumb-color) var(--_cross-browser-scrollbar--track-color);
+    scrollbar-width: thin;
+  }
+}
+@container (width < 576px) {
+  .media-center-discover {
+    padding-inline: 0.9375rem;
+  }
+}
+.media-center-discover__content {
+  width: 100%;
+  max-width: 73.75rem;
+  margin: 0 auto;
+  display: flex;
+  flex-direction: column;
+  gap: 3rem;
+  padding-bottom: 1.25rem;
+  /* Set 'container-type: inline-size;' to reference container*/
+  /* Set 'container-type: inline-size;' to reference container*/
+  /* Set 'container-type: inline-size;' to reference container*/
+}
+@container (width < 992px) {
+  .media-center-discover__content {
+    gap: 2.5rem;
+    padding-bottom: 1rem;
+  }
+}
+@container (width < 768px) {
+  .media-center-discover__content {
+    gap: 2rem;
+    padding-bottom: 0.8125rem;
+  }
+}
+@container (width < 576px) {
+  .media-center-discover__content {
+    gap: 1.5rem;
+    padding-bottom: 0.625rem;
+  }
+}
+.media-center-discover__section {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  /* Set 'container-type: inline-size;' to reference container*/
+}
+@container (width < 768px) {
+  .media-center-discover__section {
+    gap: 0.625rem;
+  }
+}
+.media-center-discover__section-header {
+  display: flex;
+  align-items: center;
+  gap: 0.6875rem;
+  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);
+}
+.media-center-discover__section-content {
+  display: grid;
+}
+.media-center-discover__section-content--4 {
+  gap: 1.25rem;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  /* Set 'container-type: inline-size;' to reference container*/
+  /* Set 'container-type: inline-size;' to reference container*/
+  /* Set 'container-type: inline-size;' to reference container*/
+}
+.media-center-discover__section-content--4 :global(> :nth-child(n + 5)) {
+  display: none;
+}
+@container (width < 992px) {
+  .media-center-discover__section-content--4 {
+    gap: 1rem;
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+  .media-center-discover__section-content--4 :global(> :nth-child(n + 4)) {
+    display: none;
+  }
+}
+@container (width < 768px) {
+  .media-center-discover__section-content--4 {
+    gap: 0.75rem;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+  .media-center-discover__section-content--4 :global(> :nth-child(n + 4)) {
+    display: block;
+  }
+  .media-center-discover__section-content--4 :global(> :nth-child(n + 5)) {
+    display: none;
+  }
+}
+@container (width < 576px) {
+  .media-center-discover__section-content--4 {
+    gap: 0.625rem;
+  }
+}
+.media-center-discover__section-content--5 {
+  gap: 1.875rem;
+  grid-template-columns: repeat(5, minmax(0, 1fr));
+  /* Set 'container-type: inline-size;' to reference container*/
+  /* Set 'container-type: inline-size;' to reference container*/
+  /* Set 'container-type: inline-size;' to reference container*/
+}
+.media-center-discover__section-content--5 :global(> :nth-child(n + 6)) {
+  display: none;
+}
+@container (width < 992px) {
+  .media-center-discover__section-content--5 {
+    gap: 1.5rem;
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
+  .media-center-discover__section-content--5 :global(> :nth-child(n + 5)) {
+    display: none;
+  }
+}
+@container (width < 768px) {
+  .media-center-discover__section-content--5 {
+    gap: 1.125rem;
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+  .media-center-discover__section-content--5 :global(> :nth-child(n + 4)) {
+    display: none;
+  }
+}
+@container (width < 576px) {
+  .media-center-discover__section-content--5 {
+    gap: 0.9375rem;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+  .media-center-discover__section-content--5 :global(> :nth-child(n + 4)) {
+    display: block;
+  }
+  .media-center-discover__section-content--5 :global(> :nth-child(n + 5)) {
+    display: none;
+  }
+}</style>

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

@@ -0,0 +1,15 @@
+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;
+    };
+};
+declare const DiscoverView: import("svelte").Component<Props, {}, "">;
+type DiscoverView = ReturnType<typeof DiscoverView>;
+export default DiscoverView;

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

@@ -0,0 +1,2 @@
+export { default as DiscoverPanel } from './discover-view.svelte';
+export { DiscoverViewHandler } from './discover-view-handler.svelte.js';

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

@@ -0,0 +1,2 @@
+export { default as DiscoverPanel } from './discover-view.svelte';
+export { DiscoverViewHandler } from './discover-view-handler.svelte.js';

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

@@ -0,0 +1,20 @@
+import type { PostPlayerModel } from '../../../posts/posts-player/types';
+import type { StreamPlayerModel } from '../../../streams/streams-player/types';
+export declare class ShortVideosInCategory {
+    categoryId: string;
+    categoryName: string;
+    shortVideos: PostPlayerModel[];
+    continuationToken: string | null | undefined;
+    constructor(data: {
+        categoryId: string;
+        categoryName: string;
+    });
+}
+export declare class StreamsInCategory {
+    categoryId: string | null;
+    streams: StreamPlayerModel[];
+    continuationToken: string | null | undefined;
+    constructor(data: {
+        categoryId: string | null;
+    });
+}

package/dist/media-center/media-center/discover/types.svelte.js

@@ -0,0 +1,20 @@
+export class ShortVideosInCategory {
+    categoryId;
+    categoryName;
+    shortVideos = $state.raw([]);
+    continuationToken = $state(undefined);
+    constructor(data) {
+        const { categoryId, categoryName } = data;
+        this.categoryId = categoryId;
+        this.categoryName = categoryName;
+    }
+}
+export class StreamsInCategory {
+    categoryId;
+    streams = $state.raw([]);
+    continuationToken = $state(undefined);
+    constructor(data) {
+        const { categoryId } = data;
+        this.categoryId = categoryId;
+    }
+}

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

@@ -0,0 +1,27 @@
+import type { MediaCenterConfigModel } from '../../config/types';
+import type { MediaCenterCategoryData } from '../types';
+export declare class CategoriesHandler {
+    private _allCateogories;
+    private _selectedCategoryId;
+    get allCategories(): {
+        id: string;
+        name: string;
+        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 selectedCategoryId(): string | null;
+    set selectedCategoryId(value: string | null);
+    getCategoryData: (categoryId: string) => MediaCenterCategoryData | null;
+    init: (categories: MediaCenterConfigModel["contentCategories"]) => Promise<void>;
+}

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

@@ -0,0 +1,39 @@
+export class CategoriesHandler {
+    _allCateogories = $state.raw([]);
+    _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 };
+        });
+    }
+    get selectedCategoryId() {
+        return this._selectedCategoryId;
+    }
+    set selectedCategoryId(value) {
+        this._selectedCategoryId = value;
+    }
+    getCategoryData = (categoryId) => {
+        const category = this._allCateogories.find((c) => c.id === categoryId);
+        if (!category) {
+            return null;
+        }
+        const parentCategory = category.parentId ? this._allCateogories.find((c) => c.id === category.parentId) : null;
+        const selectedCategoryData = {
+            id: category.id,
+            name: category.name,
+            parentId: parentCategory?.id,
+            parentName: parentCategory?.name
+        };
+        return selectedCategoryData;
+    };
+    init = async (categories) => {
+        this._allCateogories = categories;
+    };
+}

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

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

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

@@ -0,0 +1,2 @@
+export { CategoriesHandler } 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

@@ -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;
+    };
+}