@streamscloud/embeddable 11.0.0 → 12.1.0

package/dist/ui/player/button/cmp.player-buttons-group.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">import { Icon } from '../../icon';
-let { scaleEffect = false, borderColor, backgroundColor, actions } = $props();
+let { scaleEffect = false, activeColor, backgroundColor, actions } = $props();
 const styles = $derived.by(() => {
     const values = [];
-    if (borderColor) {
-        values.push(`--player-buttons-group--border-color: ${borderColor}`);
+    if (activeColor) {
+        values.push(`--player-buttons-group--active-color: ${activeColor}`);
     }
     if (backgroundColor) {
         values.push(`--player-buttons-group--background-color: ${backgroundColor}`);
@@ -15,7 +15,7 @@ const styles = $derived.by(() => {
 <div class="player-buttons-group" style={styles}>
   {#each actions as action (action.icon)}
     <button type="button" class="player-buttons-group__action" class:player-buttons-group__action--scale-effect={scaleEffect} onclick={action.callback}>
-      <span class="player-buttons-group__action-icon" style={`--icon--stroke-width:${action.iconStrokeWidth}; --icon--stroke-color:${action.iconStrokeColor}`}>
+      <span class="player-buttons-group__action-icon">
         <Icon src={action.icon} color={action.iconColor} />
       </span>
     </button>
@@ -34,20 +34,18 @@ const styles = $derived.by(() => {
   }
 }
 .player-buttons-group {
-  --_player-buttons-group--border-color: var(--player-buttons-group--border-color, rgb(from #000000 r g b / 95%));
+  --_player-buttons-group--active-color: var(--player-buttons-group--active-color, rgb(from #000000 r g b / 95%));
   --_player-buttons-group--background-color: var(
     --player-buttons-group--background-color,
-    rgb(from var(--_player-buttons-group--border-color, #000000) r g b / 60%)
+    rgb(from var(--_player-buttons-group--active-color, #000000) r g b / 60%)
   );
   cursor: pointer;
   display: flex;
   flex-direction: column;
   justify-content: center;
-  gap: 1.125rem;
-  border: 1px solid var(--_player-buttons-group--border-color);
   border-radius: 1.25rem;
   background: var(--_player-buttons-group--background-color);
-  padding: 1rem 0.625rem;
+  padding: 0.4375rem 0.0625rem;
   pointer-events: auto;
   /* Set 'container-type: inline-size;' to reference container*/
 }
@@ -56,11 +54,18 @@ const styles = $derived.by(() => {
   display: flex;
   justify-content: center;
   align-items: center;
+  padding: 0.5625rem;
+  border-radius: 1.25rem;
   --icon--color: #ffffff;
   --icon--size: 1.75rem;
+  transition: background-color 0.5s;
+}
+.player-buttons-group__action:hover {
+  background-color: var(--_player-buttons-group--active-color);
 }
 .player-buttons-group__action--scale-effect:hover {
   --_player-action--icon-scale: 1.2;
+  background-color: transparent;
 }
 .player-buttons-group__action-icon {
   display: block;
@@ -69,9 +74,8 @@ const styles = $derived.by(() => {
 }
 @container (width < 576px) {
   .player-buttons-group {
-    gap: 1.125rem;
     border-radius: 0.9375rem;
-    padding: 0.625rem 0.5rem;
+    padding: 0.25rem 0.0625rem;
   }
   .player-buttons-group__action {
     --icon--size: 1.5rem;

package/dist/ui/player/button/cmp.player-buttons-group.svelte.d.ts

@@ -1,6 +1,6 @@
 import type { PlayerButtonsGroupAction } from './types';
 type Props = {
-    borderColor: string | null;
+    activeColor: string | null;
     backgroundColor: string | null;
     actions: PlayerButtonsGroupAction[];
     scaleEffect?: boolean;

package/dist/ui/player/button/index.d.ts

@@ -1,3 +1,4 @@
 export { default as PlayerButton } from './cmp.player-button.svelte';
 export { default as PlayerButtonsGroup } from './cmp.player-buttons-group.svelte';
+export { default as MobilePlayerButtonsGroup } from './cmp.mobile-player-buttons-group.svelte';
 export type { PlayerButtonsGroupAction } from './types';

package/dist/ui/player/button/index.js

@@ -1,2 +1,3 @@
 export { default as PlayerButton } from './cmp.player-button.svelte';
 export { default as PlayerButtonsGroup } from './cmp.player-buttons-group.svelte';
+export { default as MobilePlayerButtonsGroup } from './cmp.mobile-player-buttons-group.svelte';

package/dist/ui/player/button/types.d.ts

@@ -2,7 +2,5 @@ import { IconColor } from '../../icon';
 export type PlayerButtonsGroupAction = {
     icon: string;
     iconColor?: IconColor;
-    iconStrokeColor?: string;
-    iconStrokeWidth?: string;
     callback: () => void;
 };

package/dist/ui/player/close-orchestrator/close-orchestrator.svelte.d.ts

@@ -0,0 +1,18 @@
+import type { ICloseOrchestrator } from './types';
+export declare class CloseOrchestrator implements ICloseOrchestrator {
+    closingInProgress: boolean;
+    closed: boolean;
+    closeTriggerAttached: boolean;
+    private _canClose;
+    private _closeFn;
+    private _callbacks;
+    constructor(init: {
+        closeFn: () => void;
+        canClose: boolean;
+    });
+    get closeTriggerVisible(): boolean;
+    subscribe: (callback: () => void) => void;
+    unsubscribe: (callback: () => void) => void;
+    setCloseTriggerAttached: (attached: boolean) => void;
+    requestClose: () => Promise<void>;
+}

package/dist/ui/player/close-orchestrator/close-orchestrator.svelte.js

@@ -0,0 +1,58 @@
+export class CloseOrchestrator {
+    closingInProgress = $state(false);
+    closed = $state(false);
+    // Indicates whether the close trigger (button) is already attached to the DOM, to avoid duplicates
+    closeTriggerAttached = $state(false);
+    _canClose;
+    _closeFn;
+    _callbacks = new Set();
+    constructor(init) {
+        this._closeFn = init.closeFn;
+        this._canClose = init.canClose;
+    }
+    get closeTriggerVisible() {
+        return this._canClose;
+    }
+    subscribe = (callback) => {
+        this._callbacks.add(callback);
+    };
+    unsubscribe = (callback) => {
+        this._callbacks.delete(callback);
+    };
+    setCloseTriggerAttached = (attached) => {
+        this.closeTriggerAttached = attached;
+    };
+    requestClose = async () => {
+        // Check if closing is allowed
+        if (!this._canClose) {
+            return;
+        }
+        // Prevent multiple simultaneous close attempts
+        if (this.closingInProgress || this.closed) {
+            return;
+        }
+        this.closingInProgress = true;
+        try {
+            // Wait for all callbacks to complete
+            await Promise.all(Array.from(this._callbacks).map((cb) => cb()));
+            // Execute the close function
+            this._closeFn();
+            // Mark as successfully closed
+            this.closed = true;
+        }
+        catch (error) {
+            // Log error for debugging
+            console.error('Error during close operation:', error);
+            // Reset the flag to allow retry
+            this.closingInProgress = false;
+            // Re-throw error for upper-level handling
+            throw error;
+        }
+        finally {
+            // Clean up the closing flag on success
+            if (this.closed) {
+                this.closingInProgress = false;
+            }
+        }
+    };
+}

package/dist/ui/player/close-orchestrator/index.d.ts

@@ -0,0 +1,2 @@
+export { CloseOrchestrator } from './close-orchestrator.svelte';
+export type { ICloseOrchestrator } from './types';

package/dist/ui/player/close-orchestrator/index.js

@@ -0,0 +1 @@
+export { CloseOrchestrator } from './close-orchestrator.svelte';

package/dist/ui/player/close-orchestrator/types.d.ts

@@ -0,0 +1,9 @@
+export type ICloseOrchestrator = {
+    readonly closingInProgress: boolean;
+    readonly closeTriggerVisible: boolean;
+    readonly closeTriggerAttached: boolean;
+    setCloseTriggerAttached: (attached: boolean) => void;
+    subscribe: (callback: () => void) => void;
+    unsubscribe: (callback: () => void) => void;
+    requestClose: () => void;
+};

package/dist/ui/player/close-orchestrator/types.js

@@ -0,0 +1 @@
+export {};

package/dist/ui/player/colors/index.d.ts

@@ -0,0 +1 @@
+export type { PlayerColors } from './player-colors';

package/dist/ui/player/colors/index.js

@@ -0,0 +1 @@
+export {};

package/dist/ui/player/colors/player-colors.d.ts

@@ -0,0 +1,11 @@
+export type PlayerColors = {
+    brand: string | null;
+    button: string | null;
+    buttonInactive: string | null;
+    cardButton: string | null;
+    cardBackground: string | null;
+    playerBackground: string | null;
+    price: string | null;
+    salePrice: string | null;
+    sidebarBackground: string | null;
+} | null;

package/dist/ui/player/colors/player-colors.js

@@ -0,0 +1 @@
+export {};

package/dist/ui/player/providers/chunks-player-buffer/player-chunks-manager.svelte.d.ts

@@ -2,14 +2,10 @@ import { PlayerChunk } from './player-chunk.svelte';
 import type { IChunksPlayerDataProvider, WithId } from '../types';
 export declare class PlayerChunksManager<TItem extends WithId, TChunk extends WithId> {
     private provider;
-    private callbacks;
     private _activeChunkIndex;
     private _loadedChunks;
-    private _isLoading;
-    constructor(provider: IChunksPlayerDataProvider<TItem, TChunk>, callbacks: {
-        onInitializationFinished: () => void;
-        onEndReached: () => void;
-    });
+    private _fetchDeferred;
+    constructor(provider: IChunksPlayerDataProvider<TItem, TChunk>);
     get activeChunk(): PlayerChunk<TItem, TChunk>;
     get loadedChunks(): PlayerChunk<TItem, TChunk>[];
     get flattenedChunkItems(): TItem[];

package/dist/ui/player/providers/chunks-player-buffer/player-chunks-manager.svelte.js

@@ -1,15 +1,14 @@
+import { Deferred } from '../../../../core/deferred';
 import { PlayerChunk } from './player-chunk.svelte';
 const CHUNKS_BUFFER_SIZE = 5;
 const FIXED_START_INDEX = 0;
 export class PlayerChunksManager {
     provider;
-    callbacks;
     _activeChunkIndex = $state(-1);
     _loadedChunks = $state.raw([]);
-    _isLoading = $state(false);
-    constructor(provider, callbacks) {
+    _fetchDeferred = $state.raw(null);
+    constructor(provider) {
         this.provider = provider;
-        this.callbacks = callbacks;
     }
     get activeChunk() {
         return this._loadedChunks[this._activeChunkIndex] ?? null;
@@ -34,12 +33,10 @@ export class PlayerChunksManager {
         return itemsBeforeActiveChunk + this.activeChunk.activeChunkItem.indexWithinChunk;
     }
     initialize = async () => {
-        const { onInitializationFinished, onEndReached } = this.callbacks;
         const handleInitialized = async () => {
             const startIndex = Math.min(FIXED_START_INDEX, this._loadedChunks.length - 1);
             const populateChunkResult = await this.populateChunkAtIndex(startIndex, (currentIndex) => currentIndex + 1);
             if (!populateChunkResult) {
-                onEndReached();
                 return;
             }
             this.setActiveChunkIndex(populateChunkResult.closestReadyChunkIndex);
@@ -48,7 +45,6 @@ export class PlayerChunksManager {
                 this.provider.initialData.startItemIndex > 0) {
                 this.activeChunk.setActiveItemIndex(this.provider.initialData.startItemIndex);
             }
-            onInitializationFinished();
         };
         this._loadedChunks = this.provider.initialData.prefetchedChunks.map((chunk, chunkIndex) => new PlayerChunk({ chunk, chunkIndex, provider: { loadChunkItems: this.provider.loadChunkItems } }));
         const considerInitialized = this._loadedChunks.length !== 0;
@@ -84,10 +80,13 @@ export class PlayerChunksManager {
     };
     warmUp = async () => {
         // Early return if manager is sufficient or already loading
-        if (this._loadedChunks.length >= this._activeChunkIndex + CHUNKS_BUFFER_SIZE || this._isLoading) {
+        if (this._fetchDeferred) {
+            return this._fetchDeferred.promise;
+        }
+        if (this._loadedChunks.length >= this._activeChunkIndex + CHUNKS_BUFFER_SIZE) {
             return;
         }
-        this._isLoading = true;
+        this._fetchDeferred = new Deferred();
         try {
             const result = await this.provider.loadMoreChunks();
             this._loadedChunks = [
@@ -100,13 +99,14 @@ export class PlayerChunksManager {
             ];
         }
         finally {
-            this._isLoading = false;
+            this._fetchDeferred.resolve();
+            this._fetchDeferred = null;
         }
     };
     reset = () => {
         this._activeChunkIndex = -1;
         this._loadedChunks = [];
-        this._isLoading = false;
+        this._fetchDeferred = null;
         this.warmUp();
     };
     populateChunkAtIndex = async (index, nextIndexFn) => {

package/dist/ui/player/providers/default-chunks-player-buffer.svelte.d.ts

@@ -9,12 +9,11 @@ export declare class DefaultChunksPlayerBuffer<TItem extends WithId, TChunk exte
     readonly navigationDisabled: boolean;
     readonly animationDuration = 500;
     private _playerChunksManager;
-    constructor(provider: IChunksPlayerDataProvider<TItem, TChunk>, on?: {
-        preloaded?: (self: DefaultChunksPlayerBuffer<TItem, TChunk>) => void;
-    });
+    constructor(provider: IChunksPlayerDataProvider<TItem, TChunk>);
     get activeChunk(): import("./chunks-player-buffer").PlayerChunk<TItem, TChunk>;
     setActiveChunkItemIndex: (index: number) => void;
     loadNext: () => Promise<void>;
     loadPrevious: () => Promise<void>;
     reset: () => void;
+    ensureWarmedUp: () => Promise<void>;
 }

package/dist/ui/player/providers/default-chunks-player-buffer.svelte.js

@@ -10,14 +10,11 @@ export class DefaultChunksPlayerBuffer {
     navigationDisabled = $derived(!this.canLoadNext && !this.canLoadPrevious);
     animationDuration = 500;
     _playerChunksManager;
-    constructor(provider, on) {
+    constructor(provider) {
         // Throttle navigation methods
         this.loadNext = Utils.throttle(this.loadNext, this.animationDuration);
         this.loadPrevious = Utils.throttle(this.loadPrevious, this.animationDuration);
-        this._playerChunksManager = new PlayerChunksManager(provider, {
-            onInitializationFinished: () => on?.preloaded?.(this),
-            onEndReached: () => console.warn('end reached')
-        });
+        this._playerChunksManager = new PlayerChunksManager(provider);
         this._playerChunksManager.initialize();
     }
     get activeChunk() {
@@ -44,4 +41,7 @@ export class DefaultChunksPlayerBuffer {
     reset = () => {
         this._playerChunksManager.reset();
     };
+    ensureWarmedUp = async () => {
+        await this._playerChunksManager.warmUp();
+    };
 }

package/dist/ui/player/providers/default-feed-player-buffer.svelte.d.ts

@@ -15,13 +15,12 @@ export declare class DefaultFeedPlayerBuffer<T extends WithId> implements IFeedP
     private _currentIndex;
     private _loaded;
     private _loadMoreFn;
-    private _isLoading;
-    constructor(provider: IFeedPlayerDataProvider<T>, on?: {
-        preloaded?: (self: DefaultFeedPlayerBuffer<T>) => void;
-    });
+    private _fetchDeferred;
+    constructor(provider: IFeedPlayerDataProvider<T>);
     loadNext: () => Promise<void>;
     loadPrevious: () => Promise<void>;
     reset: () => void;
+    ensureWarmedUp: () => Promise<void>;
     private initializeBuffer;
     private warmUpBuffer;
 }

package/dist/ui/player/providers/default-feed-player-buffer.svelte.js

@@ -1,3 +1,4 @@
+import { Deferred } from '../../../core/deferred';
 import { Utils } from '../../../core/utils';
 const BUFFER_SIZE = 5;
 export class DefaultFeedPlayerBuffer {
@@ -12,13 +13,13 @@ export class DefaultFeedPlayerBuffer {
     _currentIndex = $state(-1);
     _loaded = $state.raw([]);
     _loadMoreFn;
-    _isLoading = $state(false);
-    constructor(provider, on) {
+    _fetchDeferred = $state.raw(null);
+    constructor(provider) {
         this._loadMoreFn = provider.loadMore;
         // Throttle navigation methods
         this.loadNext = Utils.throttle(this.loadNext, this.animationDuration);
         this.loadPrevious = Utils.throttle(this.loadPrevious, this.animationDuration);
-        this.initializeBuffer({ initialData: provider.initialData, onPreloaded: on?.preloaded });
+        this.initializeBuffer({ initialData: provider.initialData });
     }
     loadNext = async () => {
         if (!this.canLoadNext) {
@@ -36,11 +37,14 @@ export class DefaultFeedPlayerBuffer {
     reset = () => {
         this._loaded = [];
         this._currentIndex = -1;
-        this._isLoading = false;
+        this._fetchDeferred = null;
         this.warmUpBuffer();
     };
+    ensureWarmedUp = async () => {
+        await this.warmUpBuffer();
+    };
     initializeBuffer = async (options) => {
-        const { initialData, onPreloaded } = options;
+        const { initialData } = options;
         const handleInitialized = () => {
             const startIndex = initialData.startIndex >= 0 ? initialData.startIndex : 0;
             this._currentIndex = Math.min(startIndex, this._loaded.length - 1);
@@ -49,7 +53,6 @@ export class DefaultFeedPlayerBuffer {
             if (activeItem && hasCustomMediaIndex) {
                 activeItem.mediaIndex = initialData.startMediaIndex;
             }
-            onPreloaded?.(this);
         };
         this._loaded = initialData.prefetchedItems;
         const considerInitialized = this._loaded.length > 0;
@@ -63,16 +66,20 @@ export class DefaultFeedPlayerBuffer {
     };
     warmUpBuffer = async () => {
         // Early return if buffer is sufficient or already loading
-        if (this._loaded.length >= this.currentIndex + BUFFER_SIZE || this._isLoading) {
+        if (this._fetchDeferred) {
+            return this._fetchDeferred.promise;
+        }
+        if (this._loaded.length >= this.currentIndex + BUFFER_SIZE) {
             return;
         }
-        this._isLoading = true;
+        this._fetchDeferred = new Deferred();
         try {
             const result = await this._loadMoreFn();
             this._loaded = [...this._loaded, ...result];
         }
         finally {
-            this._isLoading = false;
+            this._fetchDeferred.resolve();
+            this._fetchDeferred = null;
         }
     };
 }

package/dist/ui/player/providers/service.d.ts

@@ -0,0 +1,2 @@
+import type { IPlayerBuffer, IPlayerDataProvider, WithId } from './types';
+export declare const initBufferFromProvider: <T extends WithId>(provider: IPlayerDataProvider<T>) => IPlayerBuffer<T>;

package/dist/ui/player/providers/service.js

@@ -0,0 +1,13 @@
+import { Utils } from '../../../core/utils';
+import { DefaultChunksPlayerBuffer } from './default-chunks-player-buffer.svelte';
+import { DefaultFeedPlayerBuffer } from './default-feed-player-buffer.svelte';
+export const initBufferFromProvider = (provider) => {
+    switch (provider.kind) {
+        case 'feed':
+            return new DefaultFeedPlayerBuffer(provider);
+        case 'chunks':
+            return new DefaultChunksPlayerBuffer(provider);
+        default:
+            Utils.assertUnreachable(provider);
+    }
+};

package/dist/ui/player/providers/types.d.ts

@@ -33,6 +33,7 @@ export interface IPlayerBufferBase<T extends WithId> {
     loadNext: () => void;
     loadPrevious: () => void;
     reset: () => void;
+    ensureWarmedUp: () => Promise<void>;
 }
 type TExtended<T> = T & {
     mediaIndex?: number;

package/dist/ui/with-background/cmp.with-background.svelte

@@ -0,0 +1,86 @@
+<script lang="ts">let { backgroundDisabled, backgroundImageUrl, backgroundColor, children } = $props();
+const styles = $derived.by(() => {
+    const values = [];
+    if (backgroundImageUrl) {
+        values.push(`--with-background--background-image-url: url(${backgroundImageUrl})`);
+    }
+    if (backgroundColor) {
+        values.push(`--with-background--background: ${backgroundColor}`);
+    }
+    return values.join(';');
+});
+export {};
+</script>
+
+<svelte:head>
+  <meta name="theme-color" content="#242424" />
+  <meta name="color-scheme" content="dark" />
+  <meta name="mobile-web-app-capable" content="yes" />
+  <meta name="apple-mobile-web-app-capable" content="yes" />
+  <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+
+  <style>
+    html,
+    body {
+      background-color: #242424;
+      color-scheme: dark;
+    }
+  </style>
+</svelte:head>
+
+<div
+  class="with-background"
+  class:with-background--background-enabled={!backgroundDisabled}
+  class:with-background--background-active={!backgroundDisabled && backgroundImageUrl && backgroundImageUrl !== 'not-applicable'}
+  class:with-background--background-loading={!backgroundDisabled && backgroundImageUrl !== 'not-applicable'}
+  style={styles}>
+  {@render children()}
+</div>
+
+<style>@keyframes fadeIn {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.4;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+.with-background {
+  --_with-background--background: var(--with-background--background);
+  --_with-background--background-image-url: var(--with-background--background-image-url);
+  width: 100%;
+  min-width: 100%;
+  max-width: 100%;
+  height: 100%;
+  min-height: 100%;
+  max-height: 100%;
+  container-type: inline-size;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+}
+.with-background:before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  backdrop-filter: blur(30px);
+  background-color: var(--_with-background--background);
+  display: none;
+}
+.with-background--background-enabled {
+  background-color: #7d7d7d;
+}
+.with-background--background-enabled:before {
+  display: block;
+}
+.with-background--background-active {
+  background-image: var(--_with-background--background-image-url);
+  background-size: cover;
+  background-blend-mode: multiply;
+}
+.with-background--background-loading {
+  background-color: transparent;
+}</style>

package/dist/ui/with-background/cmp.with-background.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { Snippet } from 'svelte';
+type Props = {
+    backgroundDisabled: boolean;
+    backgroundImageUrl: string | null | 'not-applicable';
+    backgroundColor?: string | null;
+    children: Snippet;
+};
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

package/dist/ui/with-background/index.d.ts

@@ -0,0 +1 @@
+export { default as WithBackground } from './cmp.with-background.svelte';

package/dist/ui/with-background/index.js

@@ -0,0 +1 @@
+export { default as WithBackground } from './cmp.with-background.svelte';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@streamscloud/embeddable",
-  "version": "11.0.0",
+  "version": "12.1.0",
   "author": "StreamsCloud",
   "repository": {
     "type": "git",
@@ -37,6 +37,10 @@
       "types": "./dist/media-center/index.d.ts",
       "svelte": "./dist/media-center/index.js"
     },
+    "./media-page": {
+      "types": "./dist/media-page/index.d.ts",
+      "svelte": "./dist/media-page/index.js"
+    },
     "./posts": {
       "types": "./dist/posts/index.d.ts",
       "svelte": "./dist/posts/index.js"

package/dist/content-player/fade-mixins.scss

@@ -1,12 +0,0 @@
-@mixin default-opacity {
-  --content-player--elements-opacity: 1;
-}
-
-@mixin fade-opacity {
-  --content-player--elements-opacity: 0;
-}
-
-@mixin handle-fade {
-  opacity: var(--content-player--elements-opacity);
-  transition: opacity 0.3s ease-in-out;
-}

package/dist/content-player/header.svelte

@@ -1,15 +0,0 @@
-<script lang="ts">import { ContentPlayerConfig } from './content-player-config.svelte';
-import { onMount } from 'svelte';
-let { config } = $props();
-onMount(() => {
-    var _a, _b;
-    (_a = config.mediaCenterCallbacks) === null || _a === void 0 ? void 0 : _a.onPlayerInitialized({
-        closePlayerFn: config.settings.enableCloseButton && ((_b = config.callbacks) === null || _b === void 0 ? void 0 : _b.close) ? config.callbacks.close : null,
-        extraActionsForMobilePanel: []
-    });
-});
-</script>
-
-{#if config.mediaCenterHeader}
-  {@render config.mediaCenterHeader()}
-{/if}

package/dist/content-player/header.svelte.d.ts

@@ -1,28 +0,0 @@
-import { ContentPlayerConfig } from './content-player-config.svelte';
-declare class __sveltets_Render<T extends {
-    id: string;
-}> {
-    props(): {
-        config: ContentPlayerConfig<T>;
-    };
-    events(): {};
-    slots(): {};
-    bindings(): "";
-    exports(): {};
-}
-interface $$IsomorphicComponent {
-    new <T extends {
-        id: string;
-    }>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
-        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
-    } & ReturnType<__sveltets_Render<T>['exports']>;
-    <T extends {
-        id: string;
-    }>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
-    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
-}
-declare const Header: $$IsomorphicComponent;
-type Header<T extends {
-    id: string;
-}> = InstanceType<typeof Header<T>>;
-export default Header;