@streamscloud/embeddable 17.0.0 → 17.0.2

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

@@ -146,6 +146,15 @@ const handleRootResize = (node) => {
     observer.observe(node);
     return { destroy: () => observer.disconnect() };
 };
+// Measured from header
+let headerHeight = $state(0);
+const handleHeaderResize = (node) => {
+    const observer = new ResizeObserver(([entry]) => {
+        headerHeight = entry.contentRect.height;
+    });
+    observer.observe(node);
+    return { destroy: () => observer.disconnect() };
+};
 // Measured from video-area
 let contentViewWidth = $state(0);
 let videoAreaWidth = $state(0);
@@ -266,7 +275,7 @@ const itemActions = $derived.by(() => {
   use:handleRootResize>
   <div class="feed-player__main">
     {#if header}
-      <div class="feed-player__header">
+      <div class="feed-player__header" use:handleHeaderResize>
         {@render header()}
       </div>
     {/if}
@@ -325,7 +334,9 @@ const itemActions = $derived.by(() => {
         <div
           class="feed-player__sidebar"
           class:feed-player__sidebar--with-close={on?.closed}
+          class:feed-player__sidebar--with-header={!on?.closed && !!header}
           style:--_--feed-player--sidebar--width={SIDEBAR_WIDTH + 'px'}
+          style:--_--feed-player--header-height={headerHeight + 'px'}
           transition:slideHorizontally|local>
           <SidebarPanel
             tabs={visibleTabs}
@@ -366,12 +377,14 @@ const itemActions = $derived.by(() => {
   | Property | Description | Default |
   |---|---|---|
   | `--sc-fp--background` | Player background | `light-dark(white, black)` |
+  | `--sc-fp--padding-left` | Left padding for video area offset | `0px` |
   | `--sc-fp--button--color` | Control button color | inherited |
   | `--sc-fp--button--color--inactive` | Inactive control button color | inherited |
 -->
 
 <style>.feed-player {
   --_feed-player--background: var(--sc-fp--background, light-dark(#ffffff, #000000));
+  --_feed-player--padding-left: var(--sc-fp--padding-left, 0px);
   --_feed-player--button--color: var(--sc-fp--button--color);
   --_feed-player--button--color--inactive: var(--sc-fp--button--color--inactive);
   --post-viewer--button--color: var(--_feed-player--button--color);
@@ -380,6 +393,7 @@ const itemActions = $derived.by(() => {
   width: 100%;
   height: 100%;
   display: flex;
+  padding-left: var(--_feed-player--padding-left);
   background: var(--_feed-player--background);
   overflow: hidden;
   container-type: inline-size;
@@ -511,4 +525,7 @@ const itemActions = $derived.by(() => {
 }
 .feed-player__sidebar--with-close {
   padding-top: 3.75rem;
+}
+.feed-player__sidebar--with-header {
+  padding-top: var(--_--feed-player--header-height, 0px);
 }</style>

package/dist/feed-player/cmp.feed-player.svelte.d.ts

@@ -6,6 +6,7 @@ import type { FeedPlayerProps } from './types';
  * | Property | Description | Default |
  * |---|---|---|
  * | `--sc-fp--background` | Player background | `light-dark(white, black)` |
+ * | `--sc-fp--padding-left` | Left padding for video area offset | `0px` |
  * | `--sc-fp--button--color` | Control button color | inherited |
  * | `--sc-fp--button--color--inactive` | Inactive control button color | inherited |
  */

package/dist/feed-player/sidebar/sidebar-panel.svelte

@@ -14,9 +14,7 @@ let { tabs, activeTabId, model, trackingParams, selectedProductId, recommendedHa
 </script>
 
 <div class="sidebar-panel">
-  {#if tabs.length > 1}
-    <SidebarTabBar tabs={tabs} activeTabId={activeTabId} on={{ tabChange: on.tabChange }} />
-  {/if}
+  <SidebarTabBar tabs={tabs} activeTabId={activeTabId} on={{ tabChange: on.tabChange }} />
 
   <div class="sidebar-panel__content">
     {#if activeTabId === 'information'}

package/package.json

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