@streamscloud/embeddable 17.0.1 → 17.0.3

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

@@ -249,8 +249,12 @@ const onAdImpression = (adId) => {
 };
 // ── Action buttons (like, share, attachments toggle) ──
 const postActionsGenerator = untrack(() => new PostActionsGenerator({
-    socialInteractionsHandler,
-    sharingHandler,
+    get socialInteractionsHandler() {
+        return socialInteractionsHandler;
+    },
+    get sharingHandler() {
+        return sharingHandler;
+    },
     on: { attachmentClicked: () => (sidebarCollapsed = !sidebarCollapsed) }
 }));
 const itemActions = $derived.by(() => {
@@ -377,12 +381,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);
@@ -391,6 +397,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;

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/posts/controls/index.d.ts

@@ -1,2 +1,2 @@
 export { PostActionsGenerator } from './post-actions-generator.svelte';
-export { PostActionsHandler } from './post-actions-handler.svelte';
+export { PostActionsHandler, type PostActionsHandlerProps } from './post-actions-handler.svelte';

package/dist/posts/controls/post-actions-generator.svelte.d.ts

@@ -3,18 +3,16 @@ import type { IPostSharingHandler } from '../sharing';
 import type { IPostSocialInteractionsHandler } from '../social-interactions';
 import { PostActionsHandler } from './post-actions-handler.svelte';
 export declare class PostActionsGenerator {
-    private socialInteractionsHandler;
-    private sharingHandler;
-    private callbacks;
+    private props;
     private handlers;
-    constructor(init: {
-        socialInteractionsHandler: IPostSocialInteractionsHandler | undefined;
-        sharingHandler: IPostSharingHandler | undefined;
-        on: PostActionCallbacks;
-    });
+    constructor(props: PostActionsGeneratorProps);
     getPostActionsHandler: (model: PostModel) => PostActionsHandler;
 }
-type PostActionCallbacks = {
-    attachmentClicked: () => void;
+type PostActionsGeneratorProps = {
+    readonly socialInteractionsHandler: IPostSocialInteractionsHandler | undefined;
+    readonly sharingHandler: IPostSharingHandler | undefined;
+    readonly on: {
+        attachmentClicked: () => void;
+    };
 };
 export {};

package/dist/posts/controls/post-actions-generator.svelte.js

@@ -1,24 +1,24 @@
 import { PostActionsHandler } from './post-actions-handler.svelte';
 export class PostActionsGenerator {
-    socialInteractionsHandler;
-    sharingHandler;
-    callbacks;
+    props;
     handlers = {};
-    constructor(init) {
-        this.socialInteractionsHandler = init.socialInteractionsHandler ?? null;
-        this.sharingHandler = init.sharingHandler ?? null;
-        this.callbacks = init.on;
+    constructor(props) {
+        this.props = props;
     }
     getPostActionsHandler = (model) => {
         let handler = this.handlers[model.id];
         if (!handler) {
+            const props = this.props;
             handler = new PostActionsHandler({
                 post: model,
-                socialInteractionsHandler: this.socialInteractionsHandler,
-                callbacks: {
-                    attachmentClicked: this.callbacks.attachmentClicked,
-                    shareClicked: this.sharingHandler ? () => this.sharingHandler?.share(model.id) : undefined
-                }
+                get socialInteractionsHandler() {
+                    return props.socialInteractionsHandler ?? null;
+                },
+                get shareClicked() {
+                    const sh = props.sharingHandler;
+                    return sh ? () => sh.share(model.id) : undefined;
+                },
+                attachmentClicked: props.on.attachmentClicked
             });
             this.handlers[model.id] = handler;
         }

package/dist/posts/controls/post-actions-handler.svelte.d.ts

@@ -4,23 +4,20 @@ import type { IconColor } from '@streamscloud/kit/ui/icon';
 export declare class PostActionsHandler {
     readonly actions: PostAction[];
     private post;
-    private socialInteractionsHandler;
-    private callbacks;
+    private props;
     private isLikedStore;
-    constructor(init: {
-        post: PostModel;
-        socialInteractionsHandler: IPostSocialInteractionsHandler | null;
-        callbacks: PostActionCallbacks;
-    });
+    constructor(props: PostActionsHandlerProps);
     private initIsLikedStore;
 }
+export type PostActionsHandlerProps = {
+    post: PostModel;
+    readonly socialInteractionsHandler: IPostSocialInteractionsHandler | null;
+    readonly shareClicked: (() => void) | undefined;
+    attachmentClicked: () => void;
+};
 type PostAction = {
     icon: string;
     iconColor?: IconColor;
     callback: () => void;
 };
-type PostActionCallbacks = {
-    attachmentClicked: () => void;
-    shareClicked?: () => void;
-};
 export {};

package/dist/posts/controls/post-actions-handler.svelte.js

@@ -9,19 +9,20 @@ export class PostActionsHandler {
     actions = $derived.by(() => {
         const result = [];
         if (this.post.attachments) {
-            result.push({ icon: IconShoppingBag, callback: this.callbacks.attachmentClicked });
+            result.push({ icon: IconShoppingBag, callback: this.props.attachmentClicked });
         }
-        if (this.post.enableSocialInteractions && this.socialInteractionsHandler) {
+        if (this.post.enableSocialInteractions && this.props.socialInteractionsHandler) {
             result.push({
                 icon: this.isLikedStore.isLiked ? IconHeartFilled : IconHeart,
                 iconColor: this.isLikedStore.isLiked ? 'red' : undefined,
-                callback: () => this.socialInteractionsHandler?.toggleLike(this.post.id)
+                callback: () => this.props.socialInteractionsHandler?.toggleLike(this.post.id)
             });
         }
-        if (this.callbacks.shareClicked) {
+        const shareClicked = this.props.shareClicked;
+        if (shareClicked) {
             result.push({
                 icon: IconShare,
-                callback: () => this.callbacks.shareClicked?.()
+                callback: () => shareClicked()
             });
         }
         if (this.post.media && !this.post.media.currentItem.isImage) {
@@ -33,23 +34,22 @@ export class PostActionsHandler {
         return result;
     });
     post;
-    socialInteractionsHandler;
-    callbacks;
+    props;
     isLikedStore = $state.raw({
         get isLiked() {
             return false;
         }
     });
-    constructor(init) {
-        this.post = init.post;
-        this.socialInteractionsHandler = init.socialInteractionsHandler;
-        this.callbacks = init.callbacks;
+    constructor(props) {
+        this.post = props.post;
+        this.props = props;
         this.initIsLikedStore();
     }
     initIsLikedStore = async () => {
-        if (!this.socialInteractionsHandler) {
+        const handler = this.props.socialInteractionsHandler;
+        if (!handler) {
             return;
         }
-        this.isLikedStore = await this.socialInteractionsHandler.getIsLiked(this.post.id);
+        this.isLikedStore = await handler.getIsLiked(this.post.id);
     };
 }

package/dist/posts/posts-player/posts-player-view.svelte

@@ -79,8 +79,12 @@ const contentPlayerConfig = untrack(() => new PlayerConfig({
     }
 }));
 const postActionsGenerator = untrack(() => new PostActionsGenerator({
-    socialInteractionsHandler,
-    sharingHandler,
+    get socialInteractionsHandler() {
+        return socialInteractionsHandler;
+    },
+    get sharingHandler() {
+        return sharingHandler;
+    },
     on: { attachmentClicked: () => (contentPlayerConfig.uiManager.attachmentsCollapsed = !contentPlayerConfig.uiManager.attachmentsCollapsed) }
 }));
 const onProductClick = (id, postId) => {

package/dist/streams/controls/stream-actions-generator.svelte.d.ts

@@ -3,15 +3,9 @@ import type { PostModel } from '../../posts/model';
 import type { IPostSocialInteractionsHandler } from '../../posts/social-interactions';
 import type { IStreamSharingHandler } from '../sharing';
 export declare class StreamActionsGenerator {
-    private postSocialInteractionsHandler;
-    private sharingHandler;
-    private callbacks;
+    private props;
     private handlers;
-    constructor(init: {
-        postSocialInteractionsHandler: IPostSocialInteractionsHandler | undefined;
-        sharingHandler: IStreamSharingHandler | undefined;
-        on: StreamActionCallbacks;
-    });
+    constructor(props: StreamActionsGeneratorProps);
     getPostActionsHandler: (data: {
         model: PostModel;
         streamId: string;
@@ -25,7 +19,11 @@ export declare class StreamActionsGenerator {
         callback: () => (void | Promise<void>) | undefined;
     }[];
 }
-type StreamActionCallbacks = {
-    attachmentClicked: () => void;
+type StreamActionsGeneratorProps = {
+    readonly postSocialInteractionsHandler: IPostSocialInteractionsHandler | undefined;
+    readonly sharingHandler: IStreamSharingHandler | undefined;
+    readonly on: {
+        attachmentClicked: () => void;
+    };
 };
 export {};

package/dist/streams/controls/stream-actions-generator.svelte.js

@@ -1,33 +1,33 @@
 import { PostActionsHandler } from '../../posts/controls';
 import IconShare from '@fluentui/svg-icons/icons/share_48_regular.svg?raw';
 export class StreamActionsGenerator {
-    postSocialInteractionsHandler;
-    sharingHandler;
-    callbacks;
+    props;
     handlers = {};
-    constructor(init) {
-        this.postSocialInteractionsHandler = init.postSocialInteractionsHandler ?? null;
-        this.sharingHandler = init.sharingHandler ?? null;
-        this.callbacks = init.on;
+    constructor(props) {
+        this.props = props;
     }
     getPostActionsHandler = (data) => {
         const { model, streamId, streamPageId } = data;
         let handler = this.handlers[streamPageId];
         if (!handler) {
+            const props = this.props;
             handler = new PostActionsHandler({
                 post: model,
-                socialInteractionsHandler: this.postSocialInteractionsHandler,
-                callbacks: {
-                    attachmentClicked: this.callbacks.attachmentClicked,
-                    shareClicked: this.sharingHandler ? () => this.sharingHandler?.share(streamId) : undefined
-                }
+                get socialInteractionsHandler() {
+                    return props.postSocialInteractionsHandler ?? null;
+                },
+                get shareClicked() {
+                    const sh = props.sharingHandler;
+                    return sh ? () => sh.share(streamId) : undefined;
+                },
+                attachmentClicked: props.on.attachmentClicked
             });
             this.handlers[streamPageId] = handler;
         }
         return handler;
     };
     getGeneralStreamPageActions = (data) => {
-        if (!this.sharingHandler) {
+        if (!this.props.sharingHandler) {
             return [];
         }
         const { streamId, streamPageId } = data;
@@ -35,7 +35,7 @@ export class StreamActionsGenerator {
         return [
             {
                 icon: IconShare,
-                callback: () => this.sharingHandler?.share(streamId)
+                callback: () => this.props.sharingHandler?.share(streamId)
             }
         ];
     };

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

@@ -100,8 +100,12 @@ const contentPlayerConfig = untrack(() => new PlayerConfig({
     }
 }));
 const streamActionsGenerator = untrack(() => new StreamActionsGenerator({
-    postSocialInteractionsHandler,
-    sharingHandler,
+    get postSocialInteractionsHandler() {
+        return postSocialInteractionsHandler;
+    },
+    get sharingHandler() {
+        return sharingHandler;
+    },
     on: { attachmentClicked: () => (contentPlayerConfig.uiManager.attachmentsCollapsed = !contentPlayerConfig.uiManager.attachmentsCollapsed) }
 }));
 const itemAsPostModel = (item) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@streamscloud/embeddable",
-  "version": "17.0.1",
+  "version": "17.0.3",
   "author": "StreamsCloud",
   "repository": {
     "type": "git",
@@ -146,7 +146,7 @@
     }
   },
   "peerDependencies": {
-    "@streamscloud/kit": "^0.2.28",
+    "@streamscloud/kit": ">=0.2.28",
     "@streamscloud/streams-analytics-collector": "^4.0.1",
     "svelte": "^5.51.0"
   },