@streamscloud/embeddable 2.1.0 → 2.1.2

package/dist/short-videos/short-video-viewer/cmp.attachments.svelte

@@ -2,7 +2,7 @@
 import { default as ShortVideoProductViewer } from './cmp.product.svelte';
 import { ShortVideoAttachmentsLocalizationSvelte } from './short-video-attachments-localization.svelte';
 import {} from './types';
-let { shortVideo, localization: localizationInit } = $props();
+let { shortVideo, localization: localizationInit, on } = $props();
 const localization = $derived(new ShortVideoAttachmentsLocalizationSvelte(localizationInit));
 </script>
 
@@ -12,7 +12,7 @@ const localization = $derived(new ShortVideoAttachmentsLocalizationSvelte(locali
       <div class="short-video-attachments__section-header">{localization.productsSection}</div>
       <div class="short-video-attachments__products">
         {#each shortVideo.products as product (product.id)}
-          <ShortVideoProductViewer product={product} localization={localization.productLocalization} />
+          <ShortVideoProductViewer product={product} localization={localization.productLocalization} on={on} />
         {/each}
       </div>
     {/if}

package/dist/short-videos/short-video-viewer/cmp.attachments.svelte.d.ts

@@ -3,6 +3,9 @@ import { type ShortVideoViewerModel } from './types';
 type Props = {
     shortVideo: ShortVideoViewerModel;
     localization?: IShortVideoAttachmentsLocalization;
+    on?: {
+        productClick?: (productId: string) => void;
+    };
 };
 declare const Cmp: import("svelte").Component<Props, {}, "">;
 type Cmp = ReturnType<typeof Cmp>;

package/dist/short-videos/short-video-viewer/cmp.product.svelte

@@ -2,8 +2,19 @@
 import { ImageRounded } from '../../ui/image';
 import { ProportionalContainer } from '../../ui/proportional-container';
 import { ShortVideoProductLocalization } from './short-video-product-localization.svelte';
-let { product, fitToContainer = false, localization: localizationInit } = $props();
+let { product, fitToContainer = false, localization: localizationInit, on } = $props();
 const localization = $derived(new ShortVideoProductLocalization(localizationInit));
+const handleProductClick = (event) => {
+    if (!product.link) {
+        return;
+    }
+    event.preventDefault();
+    event.stopPropagation();
+    if (on === null || on === void 0 ? void 0 : on.productClick) {
+        on.productClick(product.id);
+    }
+    window.open(product.link, '_blank', 'noopener noreferrer');
+};
 </script>
 
 <div class="short-video-product-viewer">
@@ -36,7 +47,8 @@ const localization = $derived(new ShortVideoProductLocalization(localizationInit
   </div>
 
   {#if product.link}
-    <a href={product.link} target="_blank" rel="noopener noreferrer" class="short-video-product-viewer__link" aria-label="none">&nbsp;</a>
+    <a href={product.link} onclick={handleProductClick} target="_blank" rel="noopener noreferrer" class="short-video-product-viewer__link" aria-label="none"
+      >&nbsp;</a>
   {/if}
 </div>
 

package/dist/short-videos/short-video-viewer/cmp.product.svelte.d.ts

@@ -4,6 +4,9 @@ type Props = {
     product: ShortVideoViewerProductModel;
     fitToContainer?: boolean;
     localization?: IShortVideoProductLocalization;
+    on?: {
+        productClick?: (productId: string) => void;
+    };
 };
 declare const Cmp: import("svelte").Component<Props, {}, "">;
 type Cmp = ReturnType<typeof Cmp>;

package/dist/short-videos/short-video-viewer/cmp.short-video-details.svelte

@@ -3,7 +3,7 @@ import { default as ShortVideoAttachments } from './cmp.attachments.svelte';
 import { default as ShortVideoHeading } from './cmp.short-video-heading.svelte';
 import { ShortVideoDetailsLocalization } from './short-video-details-localization.svelte';
 import {} from './types';
-let { shortVideo, collapsed, localization: localizationInit } = $props();
+let { shortVideo, collapsed, localization: localizationInit, on } = $props();
 const localization = $derived(new ShortVideoDetailsLocalization(localizationInit));
 </script>
 
@@ -26,7 +26,7 @@ const localization = $derived(new ShortVideoDetailsLocalization(localizationInit
 
       <div class="short-video-details__section-splitter"></div>
 
-      <ShortVideoAttachments shortVideo={shortVideo} localization={localization.attachmentsLocalization} />
+      <ShortVideoAttachments shortVideo={shortVideo} localization={localization.attachmentsLocalization} on={on} />
     </div>
   </div>
 {/if}

package/dist/short-videos/short-video-viewer/cmp.short-video-details.svelte.d.ts

@@ -4,6 +4,9 @@ type Props = {
     shortVideo: ShortVideoViewerModel;
     collapsed: boolean;
     localization?: IShortVideoDetailsLocalization;
+    on?: {
+        productClick?: (productId: string) => void;
+    };
 };
 declare const Cmp: import("svelte").Component<Props, {}, "">;
 type Cmp = ReturnType<typeof Cmp>;

package/dist/short-videos/short-video-viewer/cmp.short-video-viewer.svelte

@@ -4,7 +4,7 @@ import { default as AttachmentsInline } from './cmp.attachments-inline.svelte';
 import { default as ShortVideoDescription } from './description.svelte';
 import { ShortVideoViewerLocalization } from './short-video-viewer-localization.svelte';
 import { ShortVideoViewerUiManager } from './ui-manager.svelte';
-let { model, availableSideSpace = 0, showAttachments = true, autoplay = 'on-appearance', localization: localizationInit } = $props();
+let { model, availableSideSpace = 0, showAttachments = true, autoplay = 'on-appearance', localization: localizationInit, on } = $props();
 const localization = $derived(new ShortVideoViewerLocalization(localizationInit));
 let actionsPanelRef = $state.raw(null);
 const uiManager = new ShortVideoViewerUiManager();
@@ -32,7 +32,7 @@ $effect(() => {
 <div class="short-video-viewer" style={uiManager.globalCssVariables}>
   <div class="short-video-viewer__media">
     {#if !model.media.isImage}
-      <Video controls={false} autoplay={autoplay} src={model.media.url} loop={true} poster={model.media.thumbnailUrl} id={model.id} />
+      <Video controls={false} autoplay={autoplay} src={model.media.url} loop={true} poster={model.media.thumbnailUrl} id={model.id} on={on} />
     {:else}
       <Image src={model.media.url} />
     {/if}

package/dist/short-videos/short-video-viewer/cmp.short-video-viewer.svelte.d.ts

@@ -6,6 +6,9 @@ type Props = {
     showAttachments?: boolean;
     autoplay?: true | false | 'on-appearance';
     localization?: IShortVideoViewerLocalization;
+    on?: {
+        progress?: (progress: number) => void;
+    };
 };
 declare const Cmp: import("svelte").Component<Props, {}, "">;
 type Cmp = ReturnType<typeof Cmp>;

package/dist/streams/layout/cmp.slot-content.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">import { Utils } from '../../core/utils';
 import { StreamElement } from './element-views';
 import { StreamComponentDataType } from './enums';
-let { model, localization } = $props();
+let { model, localization, on } = $props();
 const component = $derived.by(() => {
     return model.components.find((c) => { var _a; return c.dataType === ((_a = model.data) === null || _a === void 0 ? void 0 : _a.type); });
 });
@@ -27,6 +27,6 @@ const dataIsFilled = $derived.by(() => {
 
 {#if component && model.data && dataIsFilled}
   {#each component.elements as element (element)}
-    <StreamElement model={element} data={model.data} localization={localization} />
+    <StreamElement model={element} data={model.data} localization={localization} on={on} />
   {/each}
 {/if}

package/dist/streams/layout/cmp.slot-content.svelte.d.ts

@@ -3,6 +3,10 @@ import type { StreamSlot } from './slot';
 type Props = {
     model: StreamSlot;
     localization?: IStreamElementLocalization;
+    on?: {
+        productClick: (productId: string) => void;
+        progress?: (videoId: string, progress: number) => void;
+    };
 };
 declare const Cmp: import("svelte").Component<Props, {}, "">;
 type Cmp = ReturnType<typeof Cmp>;

package/dist/streams/layout/element-views/cmp.short-video-stream-element.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">import { ShortVideoViewer } from '../../../short-videos/short-video-viewer';
 import { mapToShortVideoViewerModel } from '../models';
-let { data } = $props();
+let { data, on } = $props();
 </script>
 
-<ShortVideoViewer model={mapToShortVideoViewerModel(data)} autoplay={false} />
+<ShortVideoViewer model={mapToShortVideoViewerModel(data)} autoplay={false} on={on} />

package/dist/streams/layout/element-views/cmp.short-video-stream-element.svelte.d.ts

@@ -1,6 +1,9 @@
 import { type StreamLayoutShortVideoModel } from '../models';
 type Props = {
     data: StreamLayoutShortVideoModel;
+    on?: {
+        progress?: (progress: number) => void;
+    };
 };
 declare const Cmp: import("svelte").Component<Props, {}, "">;
 type Cmp = ReturnType<typeof Cmp>;

package/dist/streams/layout/element-views/cmp.stream-element.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">import { ContainerStreamElement, ImageRefStreamElement, ImagesStreamElement, PriceStreamElement, ShortVideoStreamElement, SpacerStreamElement, TextRefStreamElement, TextStreamElement } from '.';
 import { StreamElementLocalization } from './stream-element-localization.svelte';
 import { StreamComponentDataType, StreamElementStyleDirection, StreamElementType } from '../enums';
-let { model, data, constainerDirection = StreamElementStyleDirection.Vertical, localization: localizatoinInit } = $props();
+let { model, data, constainerDirection = StreamElementStyleDirection.Vertical, localization: localizatoinInit, on } = $props();
 const localization = $derived(new StreamElementLocalization(localizatoinInit));
 const shortVideoModel = $derived.by(() => {
     if (!data) {
@@ -52,7 +52,15 @@ const productModel = $derived.by(() => {
 {:else if model.type === StreamElementType.Price && productModel}
   <PriceStreamElement model={model} data={productModel} localization={localization.priceElementLocalization} />
 {:else if model.type === StreamElementType.ShortVideo && shortVideoModel}
-  <ShortVideoStreamElement data={shortVideoModel} />
+  <ShortVideoStreamElement
+    data={shortVideoModel}
+    on={on
+      ? {
+          progress: (progress: number) => {
+            on.progress?.(shortVideoModel.id, progress);
+          }
+        }
+      : undefined} />
 {:else if model.type === StreamElementType.Text}
   <TextStreamElement model={model} />
 {:else if model.type === StreamElementType.TextRef}

package/dist/streams/layout/element-views/cmp.stream-element.svelte.d.ts

@@ -7,6 +7,10 @@ type Props = {
     data: StreamSlotData;
     constainerDirection?: StreamElementStyleDirection;
     localization?: IStreamElementLocalization;
+    on?: {
+        productClick: (productId: string) => void;
+        progress?: (videoId: string, progress: number) => void;
+    };
 };
 declare const Cmp: import("svelte").Component<Props, {}, "">;
 type Cmp = ReturnType<typeof Cmp>;

package/dist/streams/stream-page-viewer/cmp.stream-page-viewer.svelte

@@ -1,12 +1,12 @@
 <script lang="ts">import { StreamLayoutSlot, StreamPageLayout, StreamLayoutSlotContent } from '../layout';
-let { page } = $props();
+let { page, on } = $props();
 </script>
 
 {#if page.type === 'general'}
   <StreamPageLayout model={page.layout}>
     {#each page.layout.slots as slot (slot)}
       <StreamLayoutSlot model={slot}>
-        <StreamLayoutSlotContent model={slot} />
+        <StreamLayoutSlotContent model={slot} on={on} />
       </StreamLayoutSlot>
     {/each}
   </StreamPageLayout>

package/dist/streams/stream-page-viewer/cmp.stream-page-viewer.svelte.d.ts

@@ -1,6 +1,10 @@
 import type { StreamPageViewerModel } from './types';
 type Props = {
     page: StreamPageViewerModel;
+    on?: {
+        productClick: (productId: string) => void;
+        progress?: (videoId: string, progress: number) => void;
+    };
 };
 declare const Cmp: import("svelte").Component<Props, {}, "">;
 type Cmp = ReturnType<typeof Cmp>;

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

@@ -82,10 +82,18 @@ const handleDimensionsChanged = (dimensions) => {
           <PlayerSlider buffer={buffer}>
             {#snippet children({ item })}
               {#if item.type === 'general'}
-                <StreamPageViewer page={item} />
+                <StreamPageViewer
+                  page={item}
+                  on={{
+                    progress: (videoId: string, progress: number) => on?.progress?.(videoId, progress),
+                    productClick: (productId: string) => on?.productClick?.(productId)
+                  }} />
               {:else if item.type === 'short-video'}
                 <ShortVideoViewer
                   model={mapToShortVideoViewerModel(item.shortVideo)}
+                  on={{
+                    progress: (progress: number) => on?.progress?.(item.id, progress)
+                  }}
                   autoplay="on-appearance"
                   showAttachments={uiManager.showShortVideoOverlay} />
               {/if}
@@ -102,7 +110,14 @@ const handleDimensionsChanged = (dimensions) => {
           localization={localization}
           on={{ setCurrentItem: handleChangePage }} />
       {/if}
-      <Controls buffer={buffer} uiManager={uiManager} localization={localization} on={{ closePlayer: () => on?.closePlayer?.() }} />
+      <Controls
+        buffer={buffer}
+        uiManager={uiManager}
+        localization={localization}
+        on={{
+          closePlayer: () => on?.closePlayer?.(),
+          productClick: (productId: string) => on?.productClick?.(productId)
+        }} />
     {/if}
   </div>
 </div>

package/dist/streams/stream-player/cmp.stream-player.svelte.d.ts

@@ -10,6 +10,8 @@ type Props = {
             title: string;
             image: string | null;
         }) => void;
+        productClick?: (productId: string) => void;
+        progress?: (videoId: string, progress: number) => void;
     };
 };
 declare const Cmp: import("svelte").Component<Props, {}, "">;

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

@@ -63,7 +63,13 @@ const shortVideo = $derived(((_a = buffer.current) === null || _a === void 0 ? v
 </div>
 
 {#if shortVideo && (!uiManager.isMobileView || uiManager.overviewCollapsed)}
-  <ShortVideoDetails shortVideo={shortVideo} collapsed={uiManager.shortVideoDetailsCollapsed} localization={localization.shortVideoDetailsLocalization} />
+  <ShortVideoDetails
+    shortVideo={shortVideo}
+    collapsed={uiManager.shortVideoDetailsCollapsed}
+    localization={localization.shortVideoDetailsLocalization}
+    on={{
+      productClick: on.productClick
+    }} />
   <div class="toggle-collapsed-button">
     <ActionButton on={{ click: () => (uiManager.shortVideoDetailsCollapsed = !uiManager.shortVideoDetailsCollapsed) }}>
       <Icon src={IconPanelRightGallery} />

package/dist/streams/stream-player/controls.svelte.d.ts

@@ -7,6 +7,7 @@ type Props = {
     localization: StreamPlayerLocalization;
     on: {
         closePlayer: () => void;
+        productClick?: (productId: string) => void;
     };
 };
 declare const Controls: import("svelte").Component<Props, {}, "">;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@streamscloud/embeddable",
-  "version": "2.1.0",
+  "version": "2.1.2",
   "author": "StreamsCloud",
   "repository": "https://github.com/StreamsCloud/streamscloud-frontend-packages.git",
   "type": "module",