@streamscloud/embeddable 14.0.4 → 14.1.1

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

@@ -58,7 +58,7 @@ export class DiscoverViewHandler {
             }
         }
         finally {
-            this._shortVideosLoadingDeferred.resolve();
+            this._shortVideosLoadingDeferred?.resolve();
             this._shortVideosLoadingDeferred = null;
         }
     };

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

@@ -12,11 +12,7 @@ export declare class MediaCenterSettingsHandler {
         readonly dataProvider: IMediaCenterDataProvider;
         settings: MediaCenterSettings;
     });
-    get playerSettings(): {
-        locale?: Locale;
-        showStreamsCloudWatermark?: boolean;
-        playerColors?: Record<ThemeValue, PlayerColors>;
-    };
+    get playerSettings(): ContentPlayerSettingsLocal;
     get actualMediaCenterColors(): PlayerColors;
     get locale(): Locale;
     get backgroundWrapperProps(): {
@@ -25,8 +21,19 @@ export declare class MediaCenterSettingsHandler {
         backgroundColor?: string | null;
     };
     get backgroundImageLoadedHandler(): ((url: string | null) => void) | undefined;
+    setMinOverlayOffsetTop: (value: number) => void;
     updateBackgroundImageUrl: (url: string | null | "not-applicable") => void;
 }
 export type MediaCenterSettingsWithColors = MediaCenterSettings & {
     playerColors?: PlayerColors;
 };
+declare class ContentPlayerSettingsLocal {
+    private settings;
+    private dataProvider;
+    locale?: Locale;
+    showStreamsCloudWatermark?: boolean;
+    playerColors?: Record<ThemeValue, PlayerColors>;
+    overlayMinOffsetTop?: number;
+    constructor(settings: MediaCenterSettings, dataProvider: IMediaCenterDataProvider);
+}
+export {};

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

@@ -4,14 +4,11 @@ export class MediaCenterSettingsHandler {
     _backgroundImageUrl = $state(null);
     _mediaCenterSettings;
     _dataProvider;
-    _contentPlayerSettings = $derived.by(() => ({
-        locale: this._mediaCenterSettings.locale,
-        playerColors: this._dataProvider.model?.playerColors,
-        showStreamsCloudWatermark: this._mediaCenterSettings.showStreamsCloudWatermark
-    }));
+    _contentPlayerSettings;
     constructor(init) {
         this._mediaCenterSettings = init.settings;
         this._dataProvider = init.dataProvider;
+        this._contentPlayerSettings = new ContentPlayerSettingsLocal(this._mediaCenterSettings, this._dataProvider);
     }
     get playerSettings() {
         return this._contentPlayerSettings;
@@ -32,7 +29,22 @@ export class MediaCenterSettingsHandler {
     get backgroundImageLoadedHandler() {
         return this._mediaCenterSettings.disableBackground ? undefined : (url) => this.updateBackgroundImageUrl(url);
     }
+    setMinOverlayOffsetTop = (value) => {
+        this._contentPlayerSettings.overlayMinOffsetTop = value;
+    };
     updateBackgroundImageUrl = (url) => {
         this._backgroundImageUrl = url;
     };
 }
+class ContentPlayerSettingsLocal {
+    settings;
+    dataProvider;
+    locale = $derived.by(() => this.settings.locale);
+    showStreamsCloudWatermark = $derived.by(() => this.settings.showStreamsCloudWatermark);
+    playerColors = $derived.by(() => this.dataProvider.model?.playerColors);
+    overlayMinOffsetTop = $state(0);
+    constructor(settings, dataProvider) {
+        this.settings = settings;
+        this.dataProvider = dataProvider;
+    }
+}

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

@@ -6,13 +6,15 @@ let { context, locale = 'en', on } = $props();
 const localization = $derived(new MediaCenterHeaderLocalization(locale));
 const headerMounted = (node) => {
     const heightResizeObserver = new ResizeObserver(() => {
+        var _a;
         const headerHeight = node.clientHeight;
-        on.headerHeightChanged(headerHeight);
+        (_a = on === null || on === void 0 ? void 0 : on.headerHeightChanged) === null || _a === void 0 ? void 0 : _a.call(on, headerHeight);
     });
     heightResizeObserver.observe(node);
     return {
         destroy: () => {
-            on.headerHeightChanged(0);
+            var _a;
+            (_a = on === null || on === void 0 ? void 0 : on.headerHeightChanged) === null || _a === void 0 ? void 0 : _a.call(on, 0);
             heightResizeObserver.disconnect();
         }
     };

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

@@ -19,14 +19,16 @@ let scrollAreaRef = $state(null);
 const headerMounted = (node) => {
     headerRef = node;
     const heightResizeObserver = new ResizeObserver(() => {
+        var _a;
         const headerHeight = node.clientHeight;
-        on.headerHeightChanged(headerHeight);
+        (_a = on === null || on === void 0 ? void 0 : on.headerHeightChanged) === null || _a === void 0 ? void 0 : _a.call(on, headerHeight);
         calcHeaderGridProportions();
     });
     heightResizeObserver.observe(node);
     return {
         destroy: () => {
-            on.headerHeightChanged(0);
+            var _a;
+            (_a = on === null || on === void 0 ? void 0 : on.headerHeightChanged) === null || _a === void 0 ? void 0 : _a.call(on, 0);
             heightResizeObserver.disconnect();
         }
     };

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

@@ -69,9 +69,13 @@ const activateSelectedStreamPlayer = (stream, categoryId) => {
 const activateSelectedStreamOfCategoryPlayer = (id, prefetchedStreams, categoryId) => {
     context.playStreamsFeed({ filter: { categoryId }, init: { prefetchedStreams, initialStreamId: id } });
 };
-const onHeaderHeightChanged = (height) => {
+const onDesktopHeaderHeightChanged = (height) => {
     headerHeight = height;
 };
+const onMobileHeaderHeightChanged = (height) => {
+    headerHeight = height;
+    context.settingsHandler.setMinOverlayOffsetTop(height);
+};
 const onWidthAnchorMounted = (node) => {
     const resizeObserver = new ResizeObserver(() => {
         isMobileView = node.clientWidth <= 576;
@@ -142,9 +146,9 @@ const swipeToOpen = (node) => {
 <div class="media-center" use:onWidthAnchorMounted>
   <div class="media-center__header-and-content">
     {#if !isMobileView}
-      <MediaCenterHeader context={context} dynamicActions={dynamicActions} on={{ headerHeightChanged: onHeaderHeightChanged }} />
+      <MediaCenterHeader context={context} dynamicActions={dynamicActions} on={{ headerHeightChanged: onDesktopHeaderHeightChanged }} />
     {:else}
-      <MediaCenterHeaderMobile context={context} on={{ headerHeightChanged: onHeaderHeightChanged }} />
+      <MediaCenterHeaderMobile context={context} on={{ headerHeightChanged: onMobileHeaderHeightChanged }} />
     {/if}
 
     <div class="media-center__content-container" use:swipeToOpen>

package/dist/media-center/media-center/menu/menu.svelte

@@ -291,7 +291,7 @@ const styles = $derived.by(() => {
 }
 .menu-item__text:hover, .menu-item__text--active {
   font-weight: 600;
-  letter-spacing: -0.5px;
+  letter-spacing: -0.2px;
 }
 .menu-item__tag {
   height: min-content;

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

@@ -7,7 +7,7 @@ import { default as PostMedia } from './media/post-media.svelte';
 import { default as Texts } from './post-texts.svelte';
 import { PostViewerLocalization } from './post-viewer-localization';
 import { PostViewerUiManager } from './ui-manager.svelte';
-let { model, trackingParams: externalTrackingParams, controlsColors = null, enableAttachments = true, controlActions, enableControls = true, autoplay = 'on-appearance', locale = 'en', on } = $props();
+let { model, trackingParams: externalTrackingParams, controlsColors = null, enableAttachments = true, controlActions, enableControls = true, autoplay = 'on-appearance', locale = 'en', on, overlay } = $props();
 const localization = $derived(new PostViewerLocalization(locale));
 const uiManager = new PostViewerUiManager();
 $effect(() => {
@@ -88,6 +88,9 @@ const variables = $derived.by(() => {
         scaleEffect={true} />
     </div>
   {/if}
+  {#if overlay}
+    {@render overlay()}
+  {/if}
 </div>
 
 <style>@keyframes fadeIn {

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

@@ -2,6 +2,7 @@ import type { Locale } from '../../core/locale';
 import type { TrackingParams } from '../../marketing-tracking';
 import { PostModel } from '../model';
 import { type PlayerButtonDef } from '../../ui/player/button';
+import type { Snippet } from 'svelte';
 type Props = {
     model: PostModel;
     trackingParams: TrackingParams | null;
@@ -21,6 +22,7 @@ type Props = {
         adClick?: (adId: string) => void;
         adImpression?: (adId: string) => void;
     };
+    overlay?: Snippet;
 };
 declare const Cmp: import("svelte").Component<Props, {}, "">;
 type Cmp = ReturnType<typeof Cmp>;

package/dist/streams/layout/cmp.layout.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">import { ProportionalContainer } from '../../ui/proportional-container';
 import { generateStreamLayoutStyles } from './styles-transformer';
-let { model, children, controls } = $props();
+let { model, children, controls, overlay } = $props();
 </script>
 
 <ProportionalContainer ratio={9 / 16}>
@@ -9,6 +9,9 @@ let { model, children, controls } = $props();
     {#if controls}
       {@render controls()}
     {/if}
+    {#if overlay}
+      {@render overlay()}
+    {/if}
   </div>
 </ProportionalContainer>
 

package/dist/streams/layout/cmp.layout.svelte.d.ts

@@ -6,6 +6,7 @@ type Props = {
     };
     children: Snippet;
     controls?: Snippet;
+    overlay?: Snippet;
 };
 declare const Cmp: import("svelte").Component<Props, {}, "">;
 type Cmp = ReturnType<typeof Cmp>;

package/dist/streams/stream-page-viewer/cmp.stream-page-viewer.svelte

@@ -1,12 +1,12 @@
 <script lang="ts">import { StreamLayoutSlot, StreamPageLayout, StreamLayoutSlotContent } from '../layout';
 import { ResponsivePlayerButtonsGroup } from '../../ui/player/button';
 import { StreamPageViewerLocalization } from './stream-page-viewer-localization';
-let { page, trackingParams, overlayControls, locale, on } = $props();
+let { page, trackingParams, overlayControls, locale, on, overlay } = $props();
 const localization = $derived(new StreamPageViewerLocalization(locale));
 </script>
 
 {#if page.type === 'general'}
-  <StreamPageLayout model={page.layout}>
+  <StreamPageLayout model={page.layout} overlay={overlay}>
     {#each page.layout.slots as slot (slot)}
       <StreamLayoutSlot model={slot}>
         <StreamLayoutSlotContent model={slot} trackingParams={trackingParams} on={on} locale={localization.elementsLocale} />

package/dist/streams/stream-page-viewer/cmp.stream-page-viewer.svelte.d.ts

@@ -2,6 +2,7 @@ import type { Locale } from '../../core/locale';
 import { type StreamTrackingParams } from '../layout';
 import { type PlayerButtonDef } from '../../ui/player/button';
 import type { StreamPageViewerModel } from './types';
+import type { Snippet } from 'svelte';
 type Props = {
     page: StreamPageViewerModel;
     trackingParams: StreamTrackingParams;
@@ -19,6 +20,7 @@ type Props = {
         productImpression?: (productId: string) => void;
         progress?: (videoId: string, progress: number) => void;
     };
+    overlay?: Snippet;
 };
 declare const Cmp: import("svelte").Component<Props, {}, "">;
 type Cmp = ReturnType<typeof Cmp>;

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

@@ -17,6 +17,7 @@ import { mapToPostModel } from '../layout/models';
 import { StreamPageViewer } from '../stream-page-viewer';
 import { IconColor } from '../../ui/icon';
 import { Player, PlayerConfig, PlayerSettings } from '../../ui/player';
+import { ChunksProgress } from '../../ui/player/progress';
 import { default as Overview } from './stream-overview.svelte';
 import { StreamPlayerLocalization } from './stream-player-localization';
 import { StreamsPlayerBuffer } from './streams-player-buffer.svelte';
@@ -235,6 +236,49 @@ const currentItemActions = $derived.by(() => {
     }
     return result;
 });
+const handlePageViewMounted = (node) => {
+    const updatePosition = () => {
+        var _a;
+        const progressElement = node.querySelector('[id^="chunk-progress-"]');
+        if (!progressElement) {
+            return;
+        }
+        const overlayMinOffsetTop = (_a = playerSettings === null || playerSettings === void 0 ? void 0 : playerSettings.overlayMinOffsetTop) !== null && _a !== void 0 ? _a : 0;
+        if (!overlayMinOffsetTop) {
+            progressElement.style.top = '';
+            return;
+        }
+        const contentElement = node.firstElementChild;
+        if (!contentElement) {
+            progressElement.style.top = '';
+            return;
+        }
+        const nodeRect = node.getBoundingClientRect();
+        const contentRect = contentElement.getBoundingClientRect();
+        const contentOffsetTop = contentRect.top - nodeRect.top;
+        if (contentOffsetTop <= 0) {
+            progressElement.style.top = `${overlayMinOffsetTop}px`;
+            return;
+        }
+        const overlayOverlap = overlayMinOffsetTop - contentOffsetTop;
+        if (overlayOverlap > 0) {
+            progressElement.style.top = `${overlayOverlap}px`;
+        }
+        else {
+            progressElement.style.top = '';
+        }
+    };
+    updatePosition();
+    const resizeObserver = new ResizeObserver(() => {
+        updatePosition();
+    });
+    resizeObserver.observe(node);
+    return {
+        destroy() {
+            resizeObserver.disconnect();
+        }
+    };
+};
 //#region Activity Tracking
 const resetInactivityTimer = () => {
     if (!isActive) {
@@ -300,59 +344,85 @@ const stopActivityTracking = () => {
       }} />
   {/if}
 {/snippet}
+{#snippet overlay()}
+  {#if buffer?.activeChunk && buffer.activeChunk.chunkItems.length > 1}
+    <div class="stream-progress" id="chunk-progress-{buffer.activeChunk.model.id}">
+      {#snippet info()}
+        <div class="stream-progress-info">
+          <div class="stream-progress-info__title">
+            {buffer?.activeChunk.model.title}
+          </div>
+          {#if buffer?.activeChunk.model.subTitle}
+            <div class="stream-progress-info__sub-title">
+              {buffer.activeChunk.model.subTitle}
+            </div>
+          {/if}
+        </div>
+      {/snippet}
+      <ChunksProgress
+        totalItems={buffer.activeChunk.model.pagesCount}
+        activeItemIndex={buffer.activeChunk.activeItemIndex}
+        chunkInfo={info} />
+    </div>
+  {/if}
+{/snippet}
 <Player
   config={contentPlayerConfig}
   itemActions={currentItemActions}
   attachmentsView={buffer?.current && itemAsPostModel(buffer.current)?.attachments ? attachmentsView : undefined}>
   {#snippet itemView({ item })}
-    {#if item.type === 'general'}
-      <StreamPageViewer
-        page={item}
-        trackingParams={streamTrackingParams}
-        locale={localization.locale}
-        overlayControls={{
-          enabled: contentPlayerConfig.uiManager.showControlsOverlay,
-          colors: {
-            active: contentPlayerConfig.playerColors.button,
-            inactive: contentPlayerConfig.playerColors.buttonInactive
-          },
-          actions: buffer?.activeChunk
-            ? streamActionsGenerator.getGeneralStreamPageActions({ streamId: buffer.activeChunk.model.id, streamPageId: item.id })
-            : []
-        }}
-        on={{
-          progress: (videoId, progress) => onProgress(item.id, videoId, progress),
-          productClick: (productId) => onStreamProductClick(productId),
-          productImpression: (productId) => onStreamProductImpression(productId)
-        }} />
-    {:else}
-      {@const postModel = itemAsPostModel(item)}
-      {#if postModel}
-        {@const handler = buffer?.activeChunk
-          ? streamActionsGenerator.getPostActionsHandler({
-              model: postModel,
-              streamId: buffer.activeChunk.model.id,
-              streamPageId: item.id
-            })
-          : null}
-        <PostViewer
-          model={postModel}
-          controlsColors={{ active: contentPlayerConfig.playerColors.button, inactive: contentPlayerConfig.playerColors.buttonInactive }}
-          trackingParams={trackingParams}
-          enableAttachments={contentPlayerConfig.uiManager.showAttachmentsOverlay}
-          enableControls={contentPlayerConfig.uiManager.showControlsOverlay}
-          controlActions={handler?.actions ?? []}
-          autoplay="on-appearance"
-          locale={contentPlayerConfig.settings.locale}
+    <div class="page-view" use:handlePageViewMounted>
+      {#if item.type === 'general'}
+        <StreamPageViewer
+          page={item}
+          trackingParams={streamTrackingParams}
+          locale={localization.locale}
+          overlayControls={{
+            enabled: contentPlayerConfig.uiManager.showControlsOverlay,
+            colors: {
+              active: contentPlayerConfig.playerColors.button,
+              inactive: contentPlayerConfig.playerColors.buttonInactive
+            },
+            actions: buffer?.activeChunk
+              ? streamActionsGenerator.getGeneralStreamPageActions({ streamId: buffer.activeChunk.model.id, streamPageId: item.id })
+              : []
+          }}
           on={{
-            progress: (progress) => onShortVideoProgress(item.id, postModel.id, progress),
-            productClick: (productId) => onShortVideoProductClick(productId, postModel.id),
-            productImpression: (productId) => onShortVideoProductImpression(productId, postModel.id),
-            adClick: (adId) => onShortVideoAdClick(adId),
-            adImpression: (adId) => onShortVideoAdImpression(adId)
-          }} />
+            progress: (videoId, progress) => onProgress(item.id, videoId, progress),
+            productClick: (productId) => onStreamProductClick(productId),
+            productImpression: (productId) => onStreamProductImpression(productId)
+          }}
+          overlay={overlay} />
+      {:else}
+        {@const postModel = itemAsPostModel(item)}
+        {#if postModel}
+          {@const handler = buffer?.activeChunk
+            ? streamActionsGenerator.getPostActionsHandler({
+                model: postModel,
+                streamId: buffer.activeChunk.model.id,
+                streamPageId: item.id
+              })
+            : null}
+          <PostViewer
+            model={postModel}
+            controlsColors={{ active: contentPlayerConfig.playerColors.button, inactive: contentPlayerConfig.playerColors.buttonInactive }}
+            trackingParams={trackingParams}
+            enableAttachments={contentPlayerConfig.uiManager.showAttachmentsOverlay}
+            enableControls={contentPlayerConfig.uiManager.showControlsOverlay}
+            controlActions={handler?.actions ?? []}
+            autoplay="on-appearance"
+            locale={contentPlayerConfig.settings.locale}
+            on={{
+              progress: (progress) => onShortVideoProgress(item.id, postModel.id, progress),
+              productClick: (productId) => onShortVideoProductClick(productId, postModel.id),
+              productImpression: (productId) => onShortVideoProductImpression(productId, postModel.id),
+              adClick: (adId) => onShortVideoAdClick(adId),
+              adImpression: (adId) => onShortVideoAdImpression(adId)
+            }}
+            overlay={overlay} />
+        {/if}
       {/if}
-    {/if}
+    </div>
   {/snippet}
   {#snippet overviewPanelContent()}
     {#if buffer}
@@ -365,3 +435,53 @@ const stopActivityTracking = () => {
     {/if}
   {/snippet}
 </Player>
+
+<style>@keyframes fadeIn {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.4;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+.page-view {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.stream-progress {
+  position: absolute;
+  top: 0.75rem;
+  left: 1rem;
+  right: 1rem;
+}
+
+.stream-progress-info {
+  color: var(--sc-mc-color--text-white);
+  text-shadow: var(--sc-mc-color--text-white-shadow);
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  gap: 0.25rem;
+}
+.stream-progress-info__title {
+  font-size: 1.125rem;
+  text-overflow: ellipsis;
+  width: 100%;
+  white-space: nowrap;
+  overflow: hidden;
+}
+.stream-progress-info__sub-title {
+  font-size: 0.875rem;
+  text-overflow: ellipsis;
+  width: 100%;
+  white-space: nowrap;
+  overflow: hidden;
+}</style>

package/dist/streams/streams-player/types.d.ts

@@ -48,6 +48,7 @@ export type StreamsPlayerSettings = {
     locale?: Locale;
     showStreamsCloudWatermark?: boolean;
     playerColors?: Record<ThemeValue, PlayerColors>;
+    overlayMinOffsetTop?: number;
 };
 export type StreamAmplificationParameters = {
     campaignId: string;

package/dist/ui/player/progress/cmp.chunks-progress.svelte

@@ -0,0 +1,64 @@
+<script lang="ts">let { totalItems, activeItemIndex, chunkInfo } = $props();
+export {};
+</script>
+
+<div class="chunks-progress">
+  <div
+    class="chunks"
+    class:chunks--few={totalItems <= 3}
+    class:chunks--common={totalItems > 3 && totalItems <= 6}
+    class:chunks--many={totalItems > 6}>
+    {#each Array(totalItems) as _, i (i)}
+      <div class="chunk" class:active={i <= activeItemIndex} aria-label={`Item ${i}`}></div>
+    {/each}
+  </div>
+
+  {#if chunkInfo}
+    <div class="info">
+      {@render chunkInfo()}
+    </div>
+  {/if}
+</div>
+
+<style>@keyframes fadeIn {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.4;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+.chunks-progress {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.chunks {
+  display: flex;
+}
+.chunks--few {
+  gap: 0.75rem;
+}
+.chunks--common {
+  gap: 0.5625rem;
+}
+.chunks--many {
+  gap: 0.375rem;
+}
+
+.chunk {
+  flex: 1;
+  height: 0.125rem;
+  border-radius: 1px;
+  background-color: rgb(from #6b7280 r g b/40%);
+  transition: background-color 0.2s ease;
+  box-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);
+}
+
+.chunk.active {
+  background-color: rgb(from #fafafa r g b/60%);
+}</style>

package/dist/ui/player/progress/cmp.chunks-progress.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Snippet } from 'svelte';
+type Props = {
+    totalItems: number;
+    activeItemIndex: number;
+    chunkInfo?: Snippet;
+};
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

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

@@ -0,0 +1 @@
+export { default as ChunksProgress } from './cmp.chunks-progress.svelte';

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

@@ -0,0 +1 @@
+export { default as ChunksProgress } from './cmp.chunks-progress.svelte';

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

@@ -122,8 +122,6 @@ export class PlayerChunksManager {
             ? this.provider.initialData.startItemIndex
             : 0;
         this.setActiveChunkIndex(firstFilledChunkIndex, initialStartItemIndex);
-        // Start background warm-up after initialization
-        this.warmUp();
     };
     setActiveChunkIndex = async (index, chunkItemIndex) => {
         this._activeChunkIndex = index;
@@ -148,6 +146,8 @@ export class PlayerChunksManager {
         }
         else {
             this.activeChunk.setActiveItemIndex(this.activeChunk.chunkItems.indexOf(nextItem));
+            // Don't wait for warm up to be finished, it runs in the background
+            this.warmUp();
         }
     };
     warmUp = async () => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@streamscloud/embeddable",
-  "version": "14.0.4",
+  "version": "14.1.1",
   "author": "StreamsCloud",
   "repository": {
     "type": "git",