@streamscloud/embeddable 17.0.0-1775770682344 → 17.0.1

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}
@@ -511,4 +522,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/sidebar/playlist-tab.svelte

@@ -7,9 +7,10 @@ let data = $state.raw(null);
 $effect(() => {
     void handler;
     untrack(() => {
-        handler.getPlaylist().then((result) => {
-            data = result;
-        });
+        const load = async () => {
+            data = await handler.getPlaylist();
+        };
+        void load();
     });
 });
 const currentPostIndex = $derived.by(() => {

package/dist/feed-player/sidebar/post-card.svelte

@@ -33,7 +33,7 @@ const formatDate = (dateString) => {
     style:height="{thumbnailHeight}px"
     style:--_post-card--thumbnail-radius="{thumbnailRadius}px">
     <Image src={post.thumbnailUrl} />
-    {#if post.durationSeconds != null}
+    {#if post.durationSeconds !== null && post.durationSeconds !== undefined}
       <div class="post-card__duration">{formatDuration(post.durationSeconds)}</div>
     {/if}
   </div>

package/dist/feed-player/sidebar/recommended-tab.svelte

@@ -10,9 +10,10 @@ $effect(() => {
     const postId = currentPostId;
     untrack(() => {
         data = null;
-        handler.getRecommendations(postId).then((result) => {
-            data = result;
-        });
+        const load = async () => {
+            data = await handler.getRecommendations(postId);
+        };
+        void load();
     });
 });
 </script>
@@ -124,6 +125,7 @@ $effect(() => {
   background: white;
   border-radius: 0.375rem;
   overflow: hidden;
+  cursor: pointer;
 }
 .recommended-tab__playlist-thumbnail {
   flex-shrink: 0;

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-1775770682344",
+  "version": "17.0.1",
   "author": "StreamsCloud",
   "repository": {
     "type": "git",