@streamscloud/embeddable 7.2.0-1759155152977 → 7.2.0-1759185799768

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

@@ -12,7 +12,6 @@ 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';
@@ -33,18 +32,15 @@ $effect(() => {
         }
     });
 });
-const handleDimensionsChanged = (dimensions) => {
-    uiManager.setDialogDimensions({
-        mainViewColumnWidth: dimensions.mainSceneWidth,
-        viewTotalWidth: dimensions.totalWidth
-    });
-};
 const handleMediaCenterHeaderMounted = (data) => {
     uiManager.setMediaCenterHeaderHeight(data.height);
 };
-const handleContentAreaMounted = (node) => {
+const handleContentPlayerMounted = (node) => {
     const markAsTouched = () => {
         everTouched = true;
+        removeListeners();
+    };
+    const removeListeners = () => {
         node.removeEventListener('touchstart', markAsTouched);
         node.removeEventListener('wheel', markAsTouched);
         node.removeEventListener('click', markAsTouched);
@@ -54,6 +50,48 @@ const handleContentAreaMounted = (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>
 
@@ -73,13 +111,13 @@ const handleContentAreaMounted = (node) => {
     {/snippet}
     <div class="content-player-container__media-center">
       {@render config.mediaCenterControlsPanel({
-        maxItemsWidth: Math.min(uiManager.mainViewColumnWidth * 1.4, uiManager.dialogTotalWidth),
+        maxItemsWidth: Math.min(uiManager.contentViewWidth * 1.4, uiManager.playerTotalWidth),
         onMounted: handleMediaCenterHeaderMounted,
         closeButton: config.callbacks?.close && closeButton
       })}
     </div>
   {/if}
-  <div class="content-player">
+  <div class="content-player" use:handleContentPlayerMounted>
     {#if config.showStreamsCloudWatermark}
       <div class="content-player__watermark">
         <a href="https://streamscloud.com/" tabindex="-1" aria-label="none">
@@ -88,36 +126,35 @@ const handleContentAreaMounted = (node) => {
       </div>
     {/if}
     {#if config.playerBuffer}
-      <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>
+      <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>
       {#if overviewPanelContent}
         <OverviewPanel contentFaded={config.fadeContent} uiManager={uiManager}>
           {@render overviewPanelContent()}
@@ -179,6 +216,8 @@ const handleContentAreaMounted = (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) {
@@ -190,14 +229,12 @@ const handleContentAreaMounted = (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: 100%;
-  height: 100%;
-  opacity: var(--content-player--elements-opacity);
-  transition: opacity 0.3s ease-in-out;
+  width: var(--_content-player--content--width, 100%);
+  height: var(--_content-player--content--height, 100%);
+  margin: var(--_content-player--content--margin, 0);
+  position: relative;
 }
 
 .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__short-video-controls">
+          <div class="controls-and-attachments__post-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__short-video-attachments" transition:slideHorizontally|local>
+          <div class="controls-and-attachments__post-attachments" transition:slideHorizontally|local>
             <PostAttachments
               container={currentItemPostContainer}
               locale={config.locale}
@@ -124,6 +124,7 @@ 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;
@@ -140,7 +141,6 @@ 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__short-video-controls {
+.controls-and-attachments__post-controls {
   gap: 2.5rem;
   display: flex;
   flex: 1;
@@ -177,7 +177,8 @@ const trackNavigationButtonsSize = (node) => {
   flex-direction: column;
   align-items: flex-start;
   justify-content: flex-end;
-  --short-video-controls--icon--size: 1.75rem;
+  pointer-events: auto;
+  --post-controls--icon--size: 1.75rem;
 }
 .controls-and-attachments__player-logo {
   width: var(--content-player--controls--logo--max-width);
@@ -194,10 +195,11 @@ const trackNavigationButtonsSize = (node) => {
   min-width: 6.25rem;
   max-width: 6.25rem;
 }
-.controls-and-attachments__short-video-attachments {
+.controls-and-attachments__post-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;
 }
@@ -206,6 +208,7 @@ 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 _dialogTotalWidth;
-    private _mainViewColumnWidth;
+    private _playerTotalWidth;
+    private _contentViewWidth;
     private _mediaCenterHeaderHeight;
     private _overviewWidth;
     private _controlsAttachmentsPanelWidth;
     private _controlsNavitagionButtonsWidth;
     private _controlsAvailableSpace;
     private _controlsContentWidth;
-    get dialogTotalWidth(): number;
-    get mainViewColumnWidth(): number;
+    get playerTotalWidth(): number;
+    get contentViewWidth(): number;
     get backgroundImageUrl(): string | null;
     get overviewWidth(): number;
     setDialogDimensions: (dimensions: {
-        viewTotalWidth: number;
-        mainViewColumnWidth: number;
+        playerTotalWidth: number;
+        contentViewWidth: 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._dialogTotalWidth <= 576);
-    viewInitialized = $derived.by(() => !!this._dialogTotalWidth && !!this._mainViewColumnWidth);
+    isMobileView = $derived.by(() => this._playerTotalWidth <= 576);
+    viewInitialized = $derived.by(() => !!this._playerTotalWidth && !!this._contentViewWidth);
     showPostOverlayAttachments = $derived.by(() => this.viewInitialized && this._controlsAttachmentsPanelWidth < CONTROLS_ATTACHMENTS_MAX_WIDTH + 10);
     showPostOverlayControls = $derived.by(() => this.viewInitialized && this._controlsContentWidth < this._controlsNavitagionButtonsWidth);
     _backgroundImageUrl = $state(null);
-    _dialogTotalWidth = $state(0);
-    _mainViewColumnWidth = $state(0);
+    _playerTotalWidth = $state(0);
+    _contentViewWidth = $state(0);
     _mediaCenterHeaderHeight = $state(0);
     _overviewWidth = $state(0);
     _controlsAttachmentsPanelWidth = $state(0);
     _controlsNavitagionButtonsWidth = $state(0);
-    _controlsAvailableSpace = $derived.by(() => (this._dialogTotalWidth - this._mainViewColumnWidth) / 2);
+    _controlsAvailableSpace = $derived.by(() => (this._playerTotalWidth - this._contentViewWidth) / 2);
     _controlsContentWidth = $derived.by(() => this._controlsAvailableSpace - CONTROLS_PADDING_HORIZONTAL * 2);
-    get dialogTotalWidth() {
-        return this._dialogTotalWidth;
+    get playerTotalWidth() {
+        return this._playerTotalWidth;
     }
-    get mainViewColumnWidth() {
-        return this._mainViewColumnWidth;
+    get contentViewWidth() {
+        return this._contentViewWidth;
     }
     get backgroundImageUrl() {
         return this._backgroundImageUrl;
@@ -47,8 +47,8 @@ export class ContentPlayerUIManager {
         return this._overviewWidth;
     }
     setDialogDimensions = (dimensions) => {
-        this._dialogTotalWidth = dimensions.viewTotalWidth;
-        this._mainViewColumnWidth = dimensions.mainViewColumnWidth;
+        this._playerTotalWidth = dimensions.playerTotalWidth;
+        this._contentViewWidth = dimensions.contentViewWidth;
     };
     setOverviewWidth = (width) => {
         this._overviewWidth = width;

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

@@ -30,13 +30,21 @@ 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* () {
@@ -139,19 +147,8 @@ 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/package.json

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

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

@@ -1,120 +0,0 @@
-<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

@@ -1,18 +0,0 @@
-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

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

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

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