@streamscloud/embeddable 7.2.0-1759185799768 → 7.2.0

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

@@ -12,6 +12,7 @@ import { PostViewer } from '../posts/post-viewer';
 import { Icon } from '../ui/icon';
 import { Loading } from '../ui/loading';
 import { PlayerSlider } from '../ui/player-slider';
+import { SpotlightLayout } from '../ui/spotlight-layout';
 import { SwipeIndicator } from '../ui/swipe-indicator';
 import { default as ControlsAndAttachments } from './controls-and-attachments.svelte';
 import { default as OverviewPanel } from './overview-panel.svelte';
@@ -32,15 +33,18 @@ $effect(() => {
         }
     });
 });
+const handleDimensionsChanged = (dimensions) => {
+    uiManager.setDialogDimensions({
+        mainViewColumnWidth: dimensions.mainSceneWidth,
+        viewTotalWidth: dimensions.totalWidth
+    });
+};
 const handleMediaCenterHeaderMounted = (data) => {
     uiManager.setMediaCenterHeaderHeight(data.height);
 };
-const handleContentPlayerMounted = (node) => {
+const handleContentAreaMounted = (node) => {
     const markAsTouched = () => {
         everTouched = true;
-        removeListeners();
-    };
-    const removeListeners = () => {
         node.removeEventListener('touchstart', markAsTouched);
         node.removeEventListener('wheel', markAsTouched);
         node.removeEventListener('click', markAsTouched);
@@ -50,48 +54,6 @@ const handleContentPlayerMounted = (node) => {
     node.addEventListener('wheel', markAsTouched);
     node.addEventListener('click', markAsTouched);
     node.addEventListener('keypress', markAsTouched);
-    let resizeObserver = new ResizeObserver(() => {
-        const { width: playerWidth, height: playerHeight } = node.getBoundingClientRect();
-        const parentAspectRatio = playerWidth / playerHeight;
-        const ratio = 9 / 16;
-        let width;
-        let height;
-        let margin;
-        let contentWidthNumber = playerWidth;
-        if (parentAspectRatio > ratio) {
-            // container is wider than main content
-            contentWidthNumber = playerHeight * ratio;
-            width = `${contentWidthNumber}px`;
-            height = '100%';
-            margin = '0 auto';
-        }
-        else if (parentAspectRatio < ratio) {
-            // main content is wider than container
-            width = '100%';
-            height = `${playerWidth / ratio}px`;
-            margin = 'auto 0';
-        }
-        else {
-            // fallback case
-            width = '100%';
-            height = '100%';
-            margin = '0';
-        }
-        node.style.setProperty('--_content-player--content--width', width);
-        node.style.setProperty('--_content-player--content--height', height);
-        node.style.setProperty('--_content-player--content--margin', margin);
-        uiManager.setDialogDimensions({
-            contentViewWidth: contentWidthNumber,
-            playerTotalWidth: node.getBoundingClientRect().width
-        });
-    });
-    resizeObserver.observe(node);
-    return {
-        destroy: () => {
-            removeListeners();
-            resizeObserver.disconnect();
-        }
-    };
 };
 </script>
 
@@ -111,13 +73,13 @@ const handleContentPlayerMounted = (node) => {
     {/snippet}
     <div class="content-player-container__media-center">
       {@render config.mediaCenterControlsPanel({
-        maxItemsWidth: Math.min(uiManager.contentViewWidth * 1.4, uiManager.playerTotalWidth),
+        maxItemsWidth: Math.min(uiManager.mainViewColumnWidth * 1.4, uiManager.dialogTotalWidth),
         onMounted: handleMediaCenterHeaderMounted,
         closeButton: config.callbacks?.close && closeButton
       })}
     </div>
   {/if}
-  <div class="content-player" use:handleContentPlayerMounted>
+  <div class="content-player">
     {#if config.showStreamsCloudWatermark}
       <div class="content-player__watermark">
         <a href="https://streamscloud.com/" tabindex="-1" aria-label="none">
@@ -126,35 +88,36 @@ const handleContentPlayerMounted = (node) => {
       </div>
     {/if}
     {#if config.playerBuffer}
-      <PlayerSlider buffer={config.playerBuffer} on={config.playerSliderCallbacks}>
-        {#snippet children({ item })}
-          {@const postModel = config.itemAsPostViewerModel(item)}
-          <div class="content-player__content">
-            {#if postModel}
-              <PostViewer
-                model={postModel}
-                socialInteractionsHandler={config.socialInteractionsHandler}
-                showAttachments={config.uiManager.showPostOverlayAttachments}
-                showControls={config.uiManager.showPostOverlayControls}
-                autoplay="on-appearance"
-                locale={config.locale}
-                on={{
-                  progress: (progress) => config.callbacks?.videoProgress?.(item.id, postModel.id, progress),
-                  productClick: (productId) => config.callbacks?.productClick?.(productId, postModel.id),
-                  productImpression: (productId) => config.callbacks?.productImpression?.(productId, postModel.id),
-                  adClick: (adId) => config.callbacks?.adClick?.(adId, postModel.id),
-                  adImpression: (adId) => config.callbacks?.adImpression?.(adId, postModel.id)
-                }} />
-            {:else if nonPostItemView}
-              {@render nonPostItemView({ item })}
-            {/if}
-
-            {#if uiManager.isMobileView && config.playerBuffer && config.playerBuffer.loaded.length > 1 && !everTouched}
-              <SwipeIndicator locale={config.locale} />
-            {/if}
-          </div>
-        {/snippet}
-      </PlayerSlider>
+      <SpotlightLayout ratio={9 / 16} on={{ dimensionsChanged: handleDimensionsChanged }}>
+        <div class="content-player__content" use:handleContentAreaMounted>
+          <PlayerSlider buffer={config.playerBuffer} on={config.playerSliderCallbacks}>
+            {#snippet children({ item })}
+              {@const postModel = config.itemAsPostViewerModel(item)}
+              {#if postModel}
+                <PostViewer
+                  model={postModel}
+                  socialInteractionsHandler={config.socialInteractionsHandler}
+                  showAttachments={config.uiManager.showPostOverlayAttachments}
+                  showControls={config.uiManager.showPostOverlayControls}
+                  autoplay="on-appearance"
+                  locale={config.locale}
+                  on={{
+                    progress: (progress) => config.callbacks?.videoProgress?.(item.id, postModel.id, progress),
+                    productClick: (productId) => config.callbacks?.productClick?.(productId, postModel.id),
+                    productImpression: (productId) => config.callbacks?.productImpression?.(productId, postModel.id),
+                    adClick: (adId) => config.callbacks?.adClick?.(adId, postModel.id),
+                    adImpression: (adId) => config.callbacks?.adImpression?.(adId, postModel.id)
+                  }} />
+              {:else if nonPostItemView}
+                {@render nonPostItemView({ item })}
+              {/if}
+            {/snippet}
+          </PlayerSlider>
+          {#if uiManager.isMobileView && config.playerBuffer.loaded.length > 1 && !everTouched}
+            <SwipeIndicator locale={config.locale} />
+          {/if}
+        </div>
+      </SpotlightLayout>
       {#if overviewPanelContent}
         <OverviewPanel contentFaded={config.fadeContent} uiManager={uiManager}>
           {@render overviewPanelContent()}
@@ -216,8 +179,6 @@ const handleContentPlayerMounted = (node) => {
   padding: var(--content-player--padding);
   backdrop-filter: blur(30px);
   position: relative;
-  opacity: var(--content-player--elements-opacity);
-  transition: opacity 0.3s ease-in-out;
   /* Set 'container-type: inline-size;' to reference container*/
 }
 @container (width < 576px) {
@@ -229,12 +190,14 @@ const handleContentPlayerMounted = (node) => {
   position: absolute;
   bottom: 5rem;
   left: calc(var(--content-player--overview--width) + 5rem);
+  opacity: var(--content-player--elements-opacity);
+  transition: opacity 0.3s ease-in-out;
 }
 .content-player__content {
-  width: var(--_content-player--content--width, 100%);
-  height: var(--_content-player--content--height, 100%);
-  margin: var(--_content-player--content--margin, 0);
-  position: relative;
+  width: 100%;
+  height: 100%;
+  opacity: var(--content-player--elements-opacity);
+  transition: opacity 0.3s ease-in-out;
 }
 
 .close-button {

package/dist/content-player/controls-and-attachments.svelte

@@ -49,7 +49,7 @@ const trackNavigationButtonsSize = (node) => {
     {#if !uiManager.showPostOverlayControls}
       <div class="controls-and-attachments__left">
         {#if currentItemPostContainer}
-          <div class="controls-and-attachments__post-controls">
+          <div class="controls-and-attachments__short-video-controls">
             <PostControls
               model={currentItemPostContainer}
               socialInteractionsHandler={config.socialInteractionsHandler}
@@ -80,7 +80,7 @@ const trackNavigationButtonsSize = (node) => {
           </div>
         {/if}
         {#if currentItemPostContainer && uiManager.showAttachments && (currentItemPostContainer.products.length || currentItemPostContainer.ads.length)}
-          <div class="controls-and-attachments__post-attachments" transition:slideHorizontally|local>
+          <div class="controls-and-attachments__short-video-attachments" transition:slideHorizontally|local>
             <PostAttachments
               container={currentItemPostContainer}
               locale={config.locale}
@@ -124,7 +124,6 @@ const trackNavigationButtonsSize = (node) => {
   justify-content: space-between;
   padding: var(--content-player--controls--padding);
   container-type: inline-size;
-  pointer-events: none;
 }
 .controls-and-attachments--with-logo {
   padding-top: 0;
@@ -141,6 +140,7 @@ const trackNavigationButtonsSize = (node) => {
 .controls-and-attachments__right {
   flex: 1;
   display: flex;
+  justify-content: space-between;
   align-items: flex-end;
   flex-direction: column;
   overflow-x: hidden;
@@ -169,7 +169,7 @@ const trackNavigationButtonsSize = (node) => {
 .controls-and-attachments__right:hover::-webkit-scrollbar-thumb {
   background: var(--custom-scrollbar-color, #7d7d7d);
 }
-.controls-and-attachments__post-controls {
+.controls-and-attachments__short-video-controls {
   gap: 2.5rem;
   display: flex;
   flex: 1;
@@ -177,8 +177,7 @@ const trackNavigationButtonsSize = (node) => {
   flex-direction: column;
   align-items: flex-start;
   justify-content: flex-end;
-  pointer-events: auto;
-  --post-controls--icon--size: 1.75rem;
+  --short-video-controls--icon--size: 1.75rem;
 }
 .controls-and-attachments__player-logo {
   width: var(--content-player--controls--logo--max-width);
@@ -195,11 +194,10 @@ const trackNavigationButtonsSize = (node) => {
   min-width: 6.25rem;
   max-width: 6.25rem;
 }
-.controls-and-attachments__post-attachments {
+.controls-and-attachments__short-video-attachments {
   flex: 1;
   width: var(--content-player--controls--attachments--max-width);
   max-width: var(--content-player--controls--attachments--max-width);
-  pointer-events: auto;
   opacity: var(--content-player--elements-opacity);
   transition: opacity 0.3s ease-in-out;
 }
@@ -208,7 +206,6 @@ const trackNavigationButtonsSize = (node) => {
   flex-direction: column;
   gap: 1rem;
   z-index: 1;
-  pointer-events: auto;
 }
 
 .close-button {

package/dist/content-player/ui-manager.svelte.d.ts

@@ -7,21 +7,21 @@ export declare class ContentPlayerUIManager {
     showPostOverlayAttachments: boolean;
     showPostOverlayControls: boolean;
     private _backgroundImageUrl;
-    private _playerTotalWidth;
-    private _contentViewWidth;
+    private _dialogTotalWidth;
+    private _mainViewColumnWidth;
     private _mediaCenterHeaderHeight;
     private _overviewWidth;
     private _controlsAttachmentsPanelWidth;
     private _controlsNavitagionButtonsWidth;
     private _controlsAvailableSpace;
     private _controlsContentWidth;
-    get playerTotalWidth(): number;
-    get contentViewWidth(): number;
+    get dialogTotalWidth(): number;
+    get mainViewColumnWidth(): number;
     get backgroundImageUrl(): string | null;
     get overviewWidth(): number;
     setDialogDimensions: (dimensions: {
-        playerTotalWidth: number;
-        contentViewWidth: number;
+        viewTotalWidth: number;
+        mainViewColumnWidth: number;
     }) => void;
     setOverviewWidth: (width: number) => void;
     setMediaCenterHeaderHeight: (height: number) => void;

package/dist/content-player/ui-manager.svelte.js

@@ -21,24 +21,24 @@ export class ContentPlayerUIManager {
         }
         return values.join(';');
     });
-    isMobileView = $derived.by(() => this._playerTotalWidth <= 576);
-    viewInitialized = $derived.by(() => !!this._playerTotalWidth && !!this._contentViewWidth);
+    isMobileView = $derived.by(() => this._dialogTotalWidth <= 576);
+    viewInitialized = $derived.by(() => !!this._dialogTotalWidth && !!this._mainViewColumnWidth);
     showPostOverlayAttachments = $derived.by(() => this.viewInitialized && this._controlsAttachmentsPanelWidth < CONTROLS_ATTACHMENTS_MAX_WIDTH + 10);
     showPostOverlayControls = $derived.by(() => this.viewInitialized && this._controlsContentWidth < this._controlsNavitagionButtonsWidth);
     _backgroundImageUrl = $state(null);
-    _playerTotalWidth = $state(0);
-    _contentViewWidth = $state(0);
+    _dialogTotalWidth = $state(0);
+    _mainViewColumnWidth = $state(0);
     _mediaCenterHeaderHeight = $state(0);
     _overviewWidth = $state(0);
     _controlsAttachmentsPanelWidth = $state(0);
     _controlsNavitagionButtonsWidth = $state(0);
-    _controlsAvailableSpace = $derived.by(() => (this._playerTotalWidth - this._contentViewWidth) / 2);
+    _controlsAvailableSpace = $derived.by(() => (this._dialogTotalWidth - this._mainViewColumnWidth) / 2);
     _controlsContentWidth = $derived.by(() => this._controlsAvailableSpace - CONTROLS_PADDING_HORIZONTAL * 2);
-    get playerTotalWidth() {
-        return this._playerTotalWidth;
+    get dialogTotalWidth() {
+        return this._dialogTotalWidth;
     }
-    get contentViewWidth() {
-        return this._contentViewWidth;
+    get mainViewColumnWidth() {
+        return this._mainViewColumnWidth;
     }
     get backgroundImageUrl() {
         return this._backgroundImageUrl;
@@ -47,8 +47,8 @@ export class ContentPlayerUIManager {
         return this._overviewWidth;
     }
     setDialogDimensions = (dimensions) => {
-        this._playerTotalWidth = dimensions.playerTotalWidth;
-        this._contentViewWidth = dimensions.contentViewWidth;
+        this._dialogTotalWidth = dimensions.viewTotalWidth;
+        this._mainViewColumnWidth = dimensions.mainViewColumnWidth;
     };
     setOverviewWidth = (width) => {
         this._overviewWidth = width;

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

@@ -30,21 +30,13 @@ let maxPageIndexViewed = 0;
 $effect(() => {
     void streamId;
     untrack(() => {
+        if (currentStreamModel) {
+            finalizeStreamTracking(currentStreamModel.id);
+        }
         buffer = null;
         contentPlayerConfig.playerBuffer = null;
         initNewStream(streamId);
     });
-    return () => {
-        console.warn('finalize');
-        stopActivityTracking();
-        if (currentStreamModel) {
-            analyticsHandler === null || analyticsHandler === void 0 ? void 0 : analyticsHandler.trackStreamEngagementTime(currentStreamModel.id, totalEngagementTimeSeconds);
-            if (buffer && buffer.loaded.length > 0) {
-                let scrollDepth = Math.round(((maxPageIndexViewed + 1) / buffer.loaded.length) * 100);
-                analyticsHandler === null || analyticsHandler === void 0 ? void 0 : analyticsHandler.trackStreamScrollDepth(currentStreamModel.id, scrollDepth);
-            }
-        }
-    };
 });
 $effect(() => contentPlayerConfig.updateMediaCenterData(mediaCenterData));
 const initNewStream = (streamId) => __awaiter(void 0, void 0, void 0, function* () {
@@ -147,8 +139,19 @@ const onStreamProductClick = (productId) => {
 const onStreamProductImpression = (productId) => {
     analyticsHandler === null || analyticsHandler === void 0 ? void 0 : analyticsHandler.trackStreamProductImpression(productId, streamId);
 };
+const finalizeStreamTracking = (id) => {
+    stopActivityTracking();
+    analyticsHandler === null || analyticsHandler === void 0 ? void 0 : analyticsHandler.trackStreamEngagementTime(id, totalEngagementTimeSeconds);
+    if (buffer && buffer.loaded.length > 0) {
+        let scrollDepth = Math.round(((maxPageIndexViewed + 1) / buffer.loaded.length) * 100);
+        analyticsHandler === null || analyticsHandler === void 0 ? void 0 : analyticsHandler.trackStreamScrollDepth(id, scrollDepth);
+    }
+};
 const onPlayerClose = () => {
     var _a;
+    if (currentStreamModel) {
+        finalizeStreamTracking(currentStreamModel.id);
+    }
     (_a = on === null || on === void 0 ? void 0 : on.playerClosed) === null || _a === void 0 ? void 0 : _a.call(on);
 };
 const onProgress = (pageId, videoId, progress) => {

package/dist/ui/spotlight-layout/cmp.spotlight-layout.svelte

@@ -0,0 +1,120 @@
+<script lang="ts">let { ratio, children, left = undefined, right = undefined, on } = $props();
+let containerRef = $state.raw(null);
+let mainSceneRef = $state.raw(null);
+let leftSidebarRef = $state.raw(null);
+let rightSidebarRef = $state.raw(null);
+const notifyDimensionChanged = () => {
+    var _a;
+    if (!containerRef || !mainSceneRef || !leftSidebarRef || !rightSidebarRef) {
+        return;
+    }
+    (_a = on === null || on === void 0 ? void 0 : on.dimensionsChanged) === null || _a === void 0 ? void 0 : _a.call(on, {
+        mainSceneWidth: mainSceneRef.getBoundingClientRect().width,
+        leftSidebarWidth: leftSidebarRef.getBoundingClientRect().width,
+        rightSidebarWidth: rightSidebarRef.getBoundingClientRect().width,
+        totalWidth: containerRef.getBoundingClientRect().width
+    });
+};
+let computedMainSceneStyle = $state('width: 100%; height: 100%');
+const calcMainSceneSize = () => {
+    if (!containerRef) {
+        return;
+    }
+    const { width: parentWidth, height: parentHeight } = containerRef.getBoundingClientRect();
+    const parentAspectRatio = parentWidth / parentHeight;
+    let width;
+    let height;
+    let margin;
+    if (parentAspectRatio > ratio) {
+        // container is wider than main content
+        width = `${parentHeight * ratio}px`;
+        height = '100%';
+        margin = '0 auto';
+    }
+    else if (parentAspectRatio < ratio) {
+        // main content is wider than container
+        width = '100%';
+        height = `${parentWidth / ratio}px`;
+        margin = 'auto 0';
+    }
+    else {
+        // fallback case
+        width = '100%';
+        height = '100%';
+        margin = '0';
+    }
+    computedMainSceneStyle = `--_spotlight-layout--main--width: ${width}; --_spotlight-layout--main--height: ${height}; --_spotlight-layout--main--margin: ${margin};`;
+};
+$effect(() => {
+    let mainSceneSizeCalculationObserver = new ResizeObserver(calcMainSceneSize);
+    let dimentionsChangedObserver = new ResizeObserver(notifyDimensionChanged);
+    if (containerRef && mainSceneRef && leftSidebarRef && rightSidebarRef) {
+        mainSceneSizeCalculationObserver.observe(mainSceneRef);
+        dimentionsChangedObserver.observe(containerRef);
+        dimentionsChangedObserver.observe(mainSceneRef);
+        dimentionsChangedObserver.observe(leftSidebarRef);
+        dimentionsChangedObserver.observe(rightSidebarRef);
+    }
+    return () => {
+        mainSceneSizeCalculationObserver.disconnect();
+        dimentionsChangedObserver.disconnect();
+    };
+});
+export {};
+</script>
+
+<div class="spotlight-layout" bind:this={containerRef}>
+  <div class="spotlight-layout__sidebar" bind:this={leftSidebarRef}>
+    {#if left}
+      {@render left()}
+    {/if}
+  </div>
+
+  <div class="spotlight-layout__main-scene" bind:this={mainSceneRef} style={computedMainSceneStyle}>
+    {@render children()}
+  </div>
+  <div class="spotlight-layout__sidebar" bind:this={rightSidebarRef}>
+    {#if right}
+      {@render right()}
+    {/if}
+  </div>
+</div>
+
+<style>@keyframes fadeIn {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.4;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+.spotlight-layout {
+  width: 100%;
+  min-width: 100%;
+  max-width: 100%;
+  height: 100%;
+  min-height: 100%;
+  max-height: 100%;
+  container-type: inline-size;
+  display: flex;
+}
+.spotlight-layout__main-scene {
+  width: var(--_spotlight-layout--main--width);
+  height: var(--_spotlight-layout--main--height);
+  margin: var(--_spotlight-layout--main--margin);
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  /* Set 'container-type: inline-size;' to reference container*/
+}
+@container (width < 576px) {
+  .spotlight-layout__main-scene {
+    width: 100%;
+    height: 100%;
+    margin: 0;
+  }
+}</style>

package/dist/ui/spotlight-layout/cmp.spotlight-layout.svelte.d.ts

@@ -0,0 +1,18 @@
+import type { Snippet } from 'svelte';
+type Props = {
+    ratio: number;
+    children: Snippet;
+    left?: Snippet;
+    right?: Snippet;
+    on?: {
+        dimensionsChanged?: (dimensions: {
+            mainSceneWidth: number;
+            leftSidebarWidth: number;
+            rightSidebarWidth: number;
+            totalWidth: number;
+        }) => void;
+    };
+};
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

package/dist/ui/spotlight-layout/index.d.ts

@@ -0,0 +1 @@
+export { default as SpotlightLayout } from './cmp.spotlight-layout.svelte';

package/dist/ui/spotlight-layout/index.js

@@ -0,0 +1 @@
+export { default as SpotlightLayout } from './cmp.spotlight-layout.svelte';

package/package.json

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