@streamscloud/embeddable 3.4.2 → 4.0.0

package/dist/short-videos/short-videos-player/short-videos-player-view.svelte

@@ -0,0 +1,198 @@
+<script lang="ts">var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { handleEsc } from '../../core/document.event-handlers';
+import { createLocalGQLClient } from '../../core/graphql';
+import { mapShortVideoViewerModel, ShortVideoViewer } from '../short-video-viewer';
+import { Loading } from '../../ui/loading';
+import { PlayerBuffer, PlayerSlider } from '../../ui/player';
+import { SpotlightLayout } from '../../ui/spotlight-layout';
+import { SwipeIndicator } from '../../ui/swipe-indicator';
+import { default as Controls } from './controls.svelte';
+import { GetShortVideosDocument } from './operations.generated';
+import { ShortVideosPlayerLocalization } from './short-videos-player-localization';
+import { ShortVideosPlayerUiManager } from './ui-manager.svelte';
+import { onMount } from 'svelte';
+let { input, localization: localizationInit = 'en', showStreamsCloudWatermark, on } = $props();
+const localization = $derived(new ShortVideosPlayerLocalization(localizationInit));
+let everTouched = $state(false);
+let background = $state(null);
+let buffer = $state(input.type === 'provider' ? new PlayerBuffer(input.provider) : null);
+const initBuffer = (input) => __awaiter(void 0, void 0, void 0, function* () {
+    var _a, _b;
+    try {
+        const { graphqlOrigin, ids, initialId } = input;
+        const graphql = createLocalGQLClient(graphqlOrigin, { 'x-initiator': input.initiator || 'player/short-videos' });
+        const payload = yield graphql
+            .query(GetShortVideosDocument, {
+            input: {
+                filter: {
+                    ids
+                }
+            }
+        })
+            .toPromise();
+        const posts = ((_b = (_a = payload.data) === null || _a === void 0 ? void 0 : _a.shortVideos) === null || _b === void 0 ? void 0 : _b.items) || [];
+        const idOrder = new Map(ids.map((id, index) => [id, index]));
+        posts.sort((a, b) => {
+            var _a, _b;
+            return ((_a = idOrder.get(a.id)) !== null && _a !== void 0 ? _a : Infinity) - ((_b = idOrder.get(b.id)) !== null && _b !== void 0 ? _b : Infinity);
+        });
+        const index = initialId ? posts.findIndex((p) => p.id === initialId) : 0;
+        const provider = {
+            initialData: {
+                prefetchedItems: posts.map(mapShortVideoViewerModel),
+                startIndex: index
+            },
+            loadMore: () => __awaiter(void 0, void 0, void 0, function* () {
+                // No more items to load, as all are already prefetched
+                return [];
+            })
+        };
+        buffer = new PlayerBuffer(provider);
+    }
+    catch (_c) {
+        console.error('Failed to load short videos by IDs:', input.ids);
+        buffer = null; // Reset buffer on error
+    }
+});
+const uiManager = new ShortVideosPlayerUiManager();
+onMount(() => {
+    if (input.type === 'ids') {
+        initBuffer(input);
+    }
+});
+const onItemActivated = (id) => {
+    const shortVideo = buffer === null || buffer === void 0 ? void 0 : buffer.loaded.find((x) => x.id === id);
+    if (!shortVideo) {
+        return;
+    }
+    background = shortVideo.media.isImage ? shortVideo.media.url : shortVideo.media.thumbnailUrl;
+};
+const contentMounted = (node) => {
+    const markAsTouched = () => {
+        everTouched = true;
+        node.removeEventListener('touchstart', markAsTouched);
+        node.removeEventListener('wheel', markAsTouched);
+        node.removeEventListener('click', markAsTouched);
+        node.removeEventListener('keypress', markAsTouched);
+    };
+    node.addEventListener('touchstart', markAsTouched);
+    node.addEventListener('wheel', markAsTouched);
+    node.addEventListener('click', markAsTouched);
+    node.addEventListener('keypress', markAsTouched);
+};
+const handleDimensionsChanged = (dimensions) => {
+    uiManager.updateDimensions({
+        mainViewColumnWidth: dimensions.mainSceneWidth,
+        viewTotalWidth: dimensions.totalWidth
+    });
+};
+const onPlayerClose = () => {
+    var _a;
+    (_a = on === null || on === void 0 ? void 0 : on.closePlayer) === null || _a === void 0 ? void 0 : _a.call(on);
+};
+</script>
+
+<svelte:document onkeydown={(e) => handleEsc(e, onPlayerClose)} />
+
+<div class="short-videos-player-container" style={background ? `--background-image: url(${background})` : null}>
+  <div class="short-videos-player" style={uiManager.globalCssVariables}>
+    {#if showStreamsCloudWatermark}
+      <div class="short-videos-player__watermark">
+        <a href="https://streamscloud.com/" tabindex="-1" aria-label="none">
+          <img src="https://embedabble-assets.streamscloud-cdn.com/watermark.svg" alt="StreamsCloud" />
+        </a>
+      </div>
+    {/if}
+    {#if buffer}
+      <SpotlightLayout ratio={9 / 16} on={{ dimensionsChanged: handleDimensionsChanged }}>
+        <div class="short-videos-player__content" use:contentMounted>
+          <PlayerSlider
+            buffer={buffer}
+            on={{
+              itemActivated: onItemActivated
+            }}>
+            {#snippet children({ item })}
+              <ShortVideoViewer
+                model={item}
+                autoplay="on-appearance"
+                showAttachments={uiManager.showShortVideoOverlay}
+                showControls={uiManager.showShortVideoOverlay}
+                localization={localization.shortVideoViewerLocalization} />
+            {/snippet}
+          </PlayerSlider>
+          {#if uiManager.isMobileView && buffer.loaded.length > 1 && !everTouched}
+            <SwipeIndicator localization={localization.swipeIndicatorLocalization} />
+          {/if}
+        </div>
+      </SpotlightLayout>
+      <Controls buffer={buffer} uiManager={uiManager} localization={localization} on={{ closePlayer: on?.closePlayer }} />
+    {:else}
+      <Loading positionFixedCenter={true} timeout={1000} />
+    {/if}
+  </div>
+</div>
+
+<style>@keyframes fadeIn {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.4;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+.short-videos-player-container {
+  width: 100%;
+  min-width: 100%;
+  max-width: 100%;
+  height: 100%;
+  min-height: 100%;
+  max-height: 100%;
+  container-type: inline-size;
+  display: flex;
+  position: relative;
+  background-color: rgba(0, 0, 0, 0.75);
+  background-image: var(--background-image);
+  background-size: cover;
+  background-blend-mode: multiply;
+}
+
+.short-videos-player {
+  display: flex;
+  flex: 1;
+  padding: 0.625rem 0;
+  backdrop-filter: blur(30px);
+  position: relative;
+  /* Set 'container-type: inline-size;' to reference container*/
+}
+@container (width < 576px) {
+  .short-videos-player {
+    padding: 0;
+  }
+}
+.short-videos-player__watermark {
+  position: absolute;
+  bottom: 5rem;
+  left: 5rem;
+}
+.short-videos-player__content {
+  width: 100%;
+  height: 100%;
+  --short-video-viewer--actions-panel--bottom: 5rem;
+  /* Set 'container-type: inline-size;' to reference container*/
+}
+@container (width < 576px) {
+  .short-videos-player__content {
+    --short-video-viewer--actions-panel--top: 5rem;
+  }
+}</style>

package/dist/short-videos/short-videos-player/short-videos-player-view.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { Locale } from '../../core/locale';
+import { type IShortVideosPlayerLocalization } from './short-videos-player-localization';
+import type { PlayerInput } from './types';
+type Props = {
+    input: PlayerInput;
+    localization?: IShortVideosPlayerLocalization | Locale;
+    showStreamsCloudWatermark?: boolean;
+    on?: {
+        closePlayer?: () => void;
+    };
+};
+declare const ShortVideosPlayerView: import("svelte").Component<Props, {}, "">;
+type ShortVideosPlayerView = ReturnType<typeof ShortVideosPlayerView>;
+export default ShortVideosPlayerView;

package/dist/short-videos/short-videos-player/types.d.ts

@@ -17,6 +17,7 @@ export type OpenShortVideosPlayerInit = ProviderInit | IdsInit;
 type ProviderInit = {
     shortVideosProvider: PlayerItemsProvider<ShortVideoViewerModel>;
     localization?: IShortVideosPlayerLocalization | 'en' | 'no';
+    showStreamsCloudWatermark?: boolean;
     on?: {
         playerClosed?: () => void;
     };
@@ -27,6 +28,7 @@ type IdsInit = {
     initialId?: string;
     localization?: IShortVideosPlayerLocalization | 'en' | 'no';
     initiator?: string;
+    showStreamsCloudWatermark?: boolean;
     on?: {
         playerClosed?: () => void;
     };

package/dist/short-videos/short-videos-player/ui-manager.svelte.d.ts

@@ -1,10 +1,10 @@
 export declare class ShortVideosPlayerUiManager {
-    detailsCollapsed: boolean;
+    showAttachments: boolean;
     globalCssVariables: string;
     isMobileView: boolean;
     showShortVideoOverlay: boolean;
-    private readonly actionButtonSize;
-    private readonly navigationButtonSize;
+    private readonly buttonSize;
+    private readonly iconSize;
     private readonly controlsOffsetHorizontal;
     private readonly controlsOffsetVertical;
     private viewTotalWidth;

package/dist/short-videos/short-videos-player/ui-manager.svelte.js

@@ -1,9 +1,9 @@
 export class ShortVideosPlayerUiManager {
-    detailsCollapsed = $state(true);
+    showAttachments = $state(true);
     globalCssVariables = $derived.by(() => {
         const values = [
-            `--short-videos-player--action-button--size: ${this.actionButtonSize}px`,
-            `--short-videos-player--navigation-button--size: ${this.navigationButtonSize}px`,
+            `--short-videos-player--button--size: ${this.buttonSize}px`,
+            `--short-videos-player--icon--size: ${this.iconSize}px`,
             `--short-videos-player--controls--offset-horizontal: ${this.controlsOffsetHorizontal}px`,
             `--short-videos-player--controls--offset-vertical: ${this.controlsOffsetVertical}px`,
             `--short-videos-player--sidebar--available-space: ${(this.viewTotalWidth - this.mainViewColumnWidth) / 2}px`
@@ -11,11 +11,11 @@ export class ShortVideosPlayerUiManager {
         return values.join(';');
     });
     isMobileView = $derived.by(() => this.viewTotalWidth <= 576);
-    showShortVideoOverlay = $derived.by(() => (this.viewTotalWidth - this.mainViewColumnWidth) / 2 <= 70);
-    actionButtonSize = 30;
-    navigationButtonSize = 40;
-    controlsOffsetHorizontal = 15;
-    controlsOffsetVertical = 10;
+    showShortVideoOverlay = $derived.by(() => (this.viewTotalWidth - this.mainViewColumnWidth) / 2 <= 85);
+    buttonSize = 48;
+    iconSize = 28;
+    controlsOffsetHorizontal = 28;
+    controlsOffsetVertical = 28;
     viewTotalWidth = $state(0);
     mainViewColumnWidth = $state(0);
     updateDimensions = (dimensions) => {

package/dist/streams/layout/element-views/price-element-view.svelte

@@ -22,20 +22,21 @@ const lineHeight = 1.2;
 const elementHeight = $derived(adjustedHeight);
 const priceHeight = $derived(model.stock ? elementHeight * 0.68 : elementHeight);
 const adjustableHeight = $derived(!!(on === null || on === void 0 ? void 0 : on.heightAdjusted));
+const includeCurrency = $derived(model.includeCurrency || false);
 const currentPrice = $derived.by(() => {
     if (data.salePrice) {
-        return toPriceRepresentation(data.salePrice, data.currency, model.includeCurrency || false);
+        return toPriceRepresentation({ amount: data.salePrice, currency: data.currency, includeCurrency });
     }
-    return toPriceRepresentation(data.price, data.currency, model.includeCurrency || false);
+    return toPriceRepresentation({ amount: data.price, currency: data.currency, includeCurrency });
 });
 const saveValue = $derived.by(() => {
     if (data.salePrice) {
-        return toPriceRepresentation(data.price - data.salePrice, data.currency, model.includeCurrency || false);
+        return toPriceRepresentation({ amount: data.price - data.salePrice, currency: data.currency, includeCurrency });
     }
     return 0;
 });
 const beforeValue = $derived.by(() => {
-    return toPriceRepresentation(data.price, data.currency, model.includeCurrency || false);
+    return toPriceRepresentation({ amount: data.price, currency: data.currency, includeCurrency });
 });
 const elementContainerStyles = $derived.by(() => {
     var _a, _b;

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

@@ -16,26 +16,16 @@ export const mapToShortVideoViewerModel = (model) => {
             displayDate: model.header.postDisplayDate,
             viewsCount: model.header.postViewsCount
         },
+        enableSocialInteractions: model.enableSocialInteractions,
         ad: model.ad ? mapToAdViewModel(model.ad) : null,
         products: model.products.map(mapToProductCardModel)
         // uncomment if you want to test many products behavior
-        /*.flatMap((x) => [
-          { ...x, id: x.id + '1' },
-          { ...x, id: x.id + '2' },
-          { ...x, id: x.id + '3' },
-          { ...x, id: x.id + '4' },
-          { ...x, id: x.id + '5' },
-          { ...x, id: x.id + '6' },
-          { ...x, id: x.id + '7' },
-          { ...x, id: x.id + '8' },
-          { ...x, id: x.id + '9' },
-          { ...x, id: x.id + '10' },
-          { ...x, id: x.id + '11' },
-          { ...x, id: x.id + '12' },
-          { ...x, id: x.id + '13' },
-          { ...x, id: x.id + '14' },
-          { ...x, id: x.id + '15' }
-        ])*/
+        // .flatMap(x =>
+        //   Array.from({ length: 20 }, (_, i) => ({
+        //     ...x,
+        //     id: x.id + String(i + 1)
+        //   }))
+        // )
     };
 };
 const mapToAdViewModel = (model) => {
@@ -56,6 +46,7 @@ const mapToProductCardModel = (model) => {
         title: model.title,
         image: model.image,
         link: model.link,
+        brandName: null,
         currency: model.currency,
         price: model.price,
         salePrice: model.salePrice,

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

@@ -27,7 +27,7 @@ import { StreamPlayerLocalization } from './stream-player-localization';
 import { StreamPlayerUiManager } from './ui-manager.svelte';
 import { AppEventsTracker } from '@streamscloud/streams-analytics-collector';
 import { onMount } from 'svelte';
-let { streamId, graphqlOrigin, localization: localizationInit, showStreamsCloudWatermark, initiator, on } = $props();
+let { streamId, graphqlOrigin, localization: localizationInit = 'en', showStreamsCloudWatermark, initiator, on } = $props();
 const localization = $derived(new StreamPlayerLocalization(localizationInit));
 let model = $state(null);
 let buffer = $state.raw(null);
@@ -124,6 +124,9 @@ const handleDimensionsChanged = (dimensions) => {
         viewTotalWidth: dimensions.totalWidth
     });
 };
+const handleOverviewWidthChanged = (width) => {
+    uiManager.updateOverviewWidth(width);
+};
 const contentMounted = (node) => {
     const markAsTouched = () => {
         everTouched = true;
@@ -171,7 +174,7 @@ const onProgress = (pageId, videoId, progress) => {
 
 <svelte:document onkeydown={(e) => handleEsc(e, onPlayerClose)} />
 
-<div class="stream-player-container" style="--background-image: url({background})">
+<div class="stream-player-container" style={background ? `--background-image: url(${background})` : null}>
   {#if loading}
     <Loading positionAbsoluteCenter={true} timeout={600} />
   {/if}
@@ -209,7 +212,8 @@ const onProgress = (pageId, videoId, progress) => {
                   }}
                   autoplay="on-appearance"
                   localization={localization.shortVideoViewerLocalization}
-                  showAttachments={uiManager.showShortVideoOverlay} />
+                  showAttachments={uiManager.showShortVideoOverlay}
+                  showControls={uiManager.showShortVideoOverlay} />
               {/if}
             {/snippet}
           </PlayerSlider>
@@ -225,7 +229,10 @@ const onProgress = (pageId, videoId, progress) => {
           activePageId={activePageId}
           uiManager={uiManager}
           localization={localization}
-          on={{ setCurrentItem: handleChangePage }} />
+          on={{
+            setCurrentItem: handleChangePage,
+            widthChanged: handleOverviewWidthChanged
+          }} />
       {/if}
       <Controls
         buffer={buffer}
@@ -282,10 +289,16 @@ const onProgress = (pageId, videoId, progress) => {
 .stream-player__watermark {
   position: absolute;
   bottom: 5rem;
-  left: 20rem;
+  left: calc(var(--stream-player--overview--width) + 5rem);
 }
 .stream-player__content {
   width: 100%;
   height: 100%;
   --short-video-viewer--actions-panel--bottom: 5rem;
+  /* Set 'container-type: inline-size;' to reference container*/
+}
+@container (width < 576px) {
+  .stream-player__content {
+    --short-video-viewer--actions-panel--top: 5rem;
+  }
 }</style>

package/dist/streams/stream-player/cmp.stream-player.svelte.d.ts

@@ -2,7 +2,7 @@ import type { Locale } from '../../core/locale';
 import { type IStreamPlayerLocalization } from './stream-player-localization';
 type Props = {
     streamId: string;
-    localization: IStreamPlayerLocalization | Locale;
+    localization?: IStreamPlayerLocalization | Locale;
     graphqlOrigin?: string;
     showStreamsCloudWatermark?: boolean;
     initiator?: string;

package/dist/streams/stream-player/controls.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">var _a, _b;
+import { slideHorizontally } from '../../core/transitions';
 import { ShortVideoViewerAttachmentsInline, ShortVideoViewerAttachments } from '../../short-videos/short-video-viewer';
-import { ShortVideoSocialInteractions } from '../../short-videos/short-video-viewer/index.js';
+import { ShortVideoControls } from '../../short-videos/short-video-viewer/index.js';
 import { StreamElementType } from '../layout/enums';
 import { mapToShortVideoViewerModel } from '../layout/models';
 import { Icon } from '../../ui/icon';
@@ -45,42 +46,44 @@ const changeShowShortVideoAttachments = () => {
 };
 </script>
 
-<div class="stream-player-controls">
-  <div class="stream-player-controls__left">
-    {#if shortVideo && uiManager.shortVideoDetailsCollapsed && !uiManager.showShortVideoOverlay}
-      <div class="stream-player-controls__short-video-overlay">
-        {#if uiManager.showShortVideoAttachments}
-          <div class="stream-player-controls__short-video-attachments-inline">
-            <ShortVideoViewerAttachmentsInline model={shortVideo} />
-          </div>
-        {/if}
-        <ShortVideoSocialInteractions model={shortVideo} on={{ attachmentsClicked: changeShowShortVideoAttachments }} />
+{#if !uiManager.showShortVideoOverlay}
+  <div class="stream-player-controls">
+    <div class="stream-player-controls__left">
+      {#if shortVideo}
+        <div class="stream-player-controls__short-video-hub">
+          {#if uiManager.showShortVideoAttachments}
+            <div class="stream-player-controls__short-video-attachments-inline">
+              <ShortVideoViewerAttachmentsInline model={shortVideo} />
+            </div>
+          {/if}
+          <ShortVideoControls model={shortVideo} on={{ attachmentsClicked: changeShowShortVideoAttachments }} />
+        </div>
+      {/if}
+      <div class="stream-player-controls__navigation-buttons" class:stream-player-controls__navigation-buttons--single-web-view-page={singleWebViewPage}>
+        <button type="button" class="navigation-button" disabled={!buffer.canLoadPrevious} onclick={buffer.loadPrevious}>
+          <Icon src={IconChevronUp} />
+        </button>
+        <button type="button" class="navigation-button" disabled={!buffer.canLoadNext} onclick={buffer.loadNext}>
+          <Icon src={IconChevronDown} />
+        </button>
       </div>
-    {/if}
-    <div class="stream-player-controls__navigation-buttons" class:stream-player-controls__navigation-buttons--single-web-view-page={singleWebViewPage}>
-      <button type="button" class="navigation-button" disabled={!buffer.canLoadPrevious} onclick={buffer.loadPrevious}>
-        <Icon src={IconChevronUp} />
-      </button>
-      <button type="button" class="navigation-button" disabled={!buffer.canLoadNext} onclick={buffer.loadNext}>
-        <Icon src={IconChevronDown} />
-      </button>
+    </div>
+    <div class="stream-player-controls__right">
+      {#if shortVideo && uiManager.showShortVideoAttachments}
+        <div class="stream-player-controls__short-video-attachments" transition:slideHorizontally|local>
+          <ShortVideoViewerAttachments
+            shortVideo={shortVideo}
+            localization={localization.shortVideoAttachmentsLocalization}
+            on={{
+              productClick: on.productClick
+            }} />
+        </div>
+      {/if}
     </div>
   </div>
-  <div class="stream-player-controls__right">
-    {#if shortVideo && shortVideo.products && uiManager.showShortVideoAttachments}
-      <div class="stream-player-controls__short-video-attachments">
-        <ShortVideoViewerAttachments
-          shortVideo={shortVideo}
-          localization={localization.shortVideoAttachmentsLocalization}
-          on={{
-            productClick: on.productClick
-          }} />
-      </div>
-    {/if}
-  </div>
-</div>
+{/if}
 
-<button type="button" class="close-button" onclick={on.closePlayer} class:close-button--left={uiManager.overviewCollapsed}>
+<button type="button" class="close-button" onclick={on.closePlayer}>
   <Icon src={IconDismiss} />
 </button>
 
@@ -95,34 +98,6 @@ const changeShowShortVideoAttachments = () => {
     opacity: 1;
   }
 }
-.close-button {
-  position: absolute;
-  top: 0.9375rem;
-  left: 15.1875rem;
-  z-index: 1;
-  width: var(--stream-player--button--size);
-  min-width: var(--stream-player--button--size);
-  max-width: var(--stream-player--button--size);
-  height: var(--stream-player--button--size);
-  min-height: var(--stream-player--button--size);
-  max-height: var(--stream-player--button--size);
-  background-color: rgba(0, 0, 0, 0.6);
-  border: 0.0625rem solid #1c1c1e;
-  border-radius: 50%;
-  text-align: center;
-  --icon--color: #ffffff;
-  /* Set 'container-type: inline-size;' to reference container*/
-}
-.close-button--left {
-  left: 0.625rem;
-}
-@container (width < 576px) {
-  .close-button {
-    left: unset;
-    right: 0.625rem;
-  }
-}
-
 .stream-player-controls {
   position: absolute;
   top: 0;
@@ -131,7 +106,6 @@ const changeShowShortVideoAttachments = () => {
   width: var(--stream-player--sidebar--available-space);
   display: flex;
   justify-content: space-between;
-  gap: 2.5rem;
   padding: var(--stream-player--controls--offset-vertical) var(--stream-player--controls--offset-horizontal);
   container-type: inline-size;
 }
@@ -148,14 +122,8 @@ const changeShowShortVideoAttachments = () => {
   justify-content: space-between;
   align-items: flex-end;
   flex-direction: column;
-  /* Set 'container-type: inline-size;' to reference container*/
-}
-@container (width < 9.375rem) {
-  .stream-player-controls__right {
-    display: none;
-  }
 }
-.stream-player-controls__short-video-overlay {
+.stream-player-controls__short-video-hub {
   gap: 2.5rem;
   display: flex;
   flex: 1;
@@ -163,6 +131,7 @@ const changeShowShortVideoAttachments = () => {
   flex-direction: column;
   align-items: flex-start;
   justify-content: flex-end;
+  --short-video-controls--icon--size: var(--stream-player--icon--size);
 }
 .stream-player-controls__short-video-attachments-inline {
   display: none;
@@ -215,11 +184,35 @@ const changeShowShortVideoAttachments = () => {
   flex-direction: column;
   gap: 1rem;
   z-index: 1;
+}
+
+.close-button {
+  width: var(--stream-player--button--size);
+  min-width: var(--stream-player--button--size);
+  max-width: var(--stream-player--button--size);
+  height: var(--stream-player--button--size);
+  min-height: var(--stream-player--button--size);
+  max-height: var(--stream-player--button--size);
+  background-color: rgba(0, 0, 0, 0.6);
+  border: 0.0625rem solid #1c1c1c;
+  border-radius: 50%;
+  text-align: center;
+  --icon--color: #ffffff;
+  --icon--size: var(--stream-player--icon--size);
+  position: absolute;
+  top: 0.9375rem;
+  left: calc(var(--stream-player--overview--width) + 0.625rem);
+  z-index: 1;
   /* Set 'container-type: inline-size;' to reference container*/
 }
-@container (width < 6.25rem) {
-  .stream-player-controls__navigation-buttons {
-    visibility: hidden;
+.close-button:disabled {
+  opacity: 0.5;
+  cursor: default;
+}
+@container (width < 576px) {
+  .close-button {
+    left: unset;
+    right: 0.625rem;
   }
 }
 
@@ -231,7 +224,7 @@ const changeShowShortVideoAttachments = () => {
   min-height: var(--stream-player--button--size);
   max-height: var(--stream-player--button--size);
   background-color: rgba(0, 0, 0, 0.6);
-  border: 0.0625rem solid #1c1c1e;
+  border: 0.0625rem solid #1c1c1c;
   border-radius: 50%;
   text-align: center;
   --icon--color: #ffffff;

package/dist/streams/stream-player/index.js

@@ -1,5 +1,5 @@
 import { getLocale } from '../../core/locale';
-import { ShadowHost } from '../../ui/shadow-dom';
+import { ModalShadowHost } from '../../ui/shadow-dom';
 import { default as StreamPlayer } from './cmp.stream-player.svelte';
 import { AppEventsTracker } from '@streamscloud/streams-analytics-collector';
 import { mount, unmount } from 'svelte';
@@ -28,7 +28,7 @@ import { mount, unmount } from 'svelte';
  */
 export const openStreamPlayer = (init) => {
     const { streamId, graphqlOrigin, localization, showStreamsCloudWatermark, initiator } = init;
-    const shadowHost = new ShadowHost();
+    const shadowHost = new ModalShadowHost();
     const mounted = mount(StreamPlayer, {
         target: shadowHost.shadowRoot,
         props: {

package/dist/streams/stream-player/stream-overview.svelte

@@ -8,10 +8,21 @@ import { TimeAgo } from '../../ui/time-ago';
 import { StreamPlayerLocalization } from './stream-player-localization';
 import IconPanelLeftText from '@fluentui/svg-icons/icons/panel_left_text_20_regular.svg?raw';
 let { model, buffer, activePageId, on, uiManager, localization } = $props();
+const overviewAttached = (node) => {
+    const resizeObserver = new ResizeObserver(() => {
+        on.widthChanged(node.clientWidth);
+    });
+    resizeObserver.observe(node);
+    return {
+        destroy() {
+            resizeObserver.disconnect();
+        }
+    };
+};
 </script>
 
 {#if !uiManager.overviewCollapsed}
-  <div class="stream-overview" transition:slideHorizontally|local>
+  <div class="stream-overview" transition:slideHorizontally|local use:overviewAttached>
     <div class="stream-overview-info">
       <div class="stream-overview-owner">
         <div class="stream-overview-owner__image">

package/dist/streams/stream-player/stream-overview.svelte.d.ts

@@ -10,6 +10,7 @@ type Props = {
     localization: StreamPlayerLocalization;
     on: {
         setCurrentItem: (index: number) => void;
+        widthChanged: (width: number) => void;
     };
 };
 declare const StreamOverview: import("svelte").Component<Props, {}, "">;