@streamscloud/embeddable 8.0.0 → 8.0.1

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

@@ -48,6 +48,13 @@ const handleContentPlayerMounted = (node) => {
     node.addEventListener('wheel', markAsTouched);
     node.addEventListener('click', markAsTouched);
     node.addEventListener('keypress', markAsTouched);
+    return {
+        destroy: () => {
+            removeListeners();
+        }
+    };
+};
+const handleSliderMounted = (node) => {
     let resizeObserver = new ResizeObserver(() => {
         const { width: playerWidth, height: playerHeight } = node.getBoundingClientRect();
         uiManager.playerTotalWidth = playerWidth;
@@ -95,7 +102,6 @@ const handleContentPlayerMounted = (node) => {
     resizeObserver.observe(node);
     return {
         destroy: () => {
-            removeListeners();
             resizeObserver.disconnect();
         }
     };
@@ -157,35 +163,37 @@ const variables = $derived.by(() => {
       </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}
-                enableAttachments={config.uiManager.showPostOverlayAttachments}
-                enableControls={config.uiManager.showPostOverlayControls}
-                autoplay="on-appearance"
-                locale={config.settings.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}
+      <div class="content-player__slider" use:handleSliderMounted>
+        <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}
+                  enableAttachments={config.uiManager.showPostOverlayAttachments}
+                  enableControls={config.uiManager.showPostOverlayControls}
+                  autoplay="on-appearance"
+                  locale={config.settings.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.settings.locale} />
-            {/if}
-          </div>
-        {/snippet}
-      </PlayerSlider>
+              {#if uiManager.isMobileView && config.playerBuffer && config.playerBuffer.loaded.length > 1 && !everTouched}
+                <SwipeIndicator locale={config.settings.locale} />
+              {/if}
+            </div>
+          {/snippet}
+        </PlayerSlider>
+      </div>
       <ControlsAndAttachments config={config} />
     {:else}
       <Loading positionFixedCenter={true} timeout={1000} />
@@ -242,6 +250,14 @@ const variables = $derived.by(() => {
     padding: 0;
   }
 }
+.content-player__slider {
+  width: 100%;
+  min-width: 100%;
+  max-width: 100%;
+  height: 100%;
+  min-height: 100%;
+  max-height: 100%;
+}
 .content-player__watermark {
   position: absolute;
   bottom: 5rem;
@@ -256,4 +272,7 @@ const variables = $derived.by(() => {
   position: relative;
   opacity: var(--content-player--elements-opacity);
   transition: opacity 0.3s ease-in-out;
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }</style>

package/package.json

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