@streamscloud/embeddable 1.2.0 → 2.0.0

package/dist/short-videos/short-video-viewer/types.d.ts

@@ -1,13 +1,18 @@
-import type { AdViewModel } from '../../advertising/ad-view';
-import type { MediaItemModel } from '../../core/media';
-import type { ProductCardModel } from '../../products/product-card';
+import type { Currency } from '../../core/enums';
 export type ShortVideoViewerModel = {
     id: string;
-    media: MediaItemModel;
+    media: {
+        isImage: true;
+        url: string;
+    } | {
+        isImage: false;
+        url: string;
+        thumbnailUrl: string;
+    };
     text?: string | null;
     heading: ShortVideoViewerHeadingModel;
-    products: ProductCardModel[];
-    ad: AdViewModel | null;
+    products: ShortVideoViewerProductModel[];
+    ad: ShortVideoViewerAdModel | null;
 };
 export type ShortVideoViewerHeadingModel = {
     image: string | null;
@@ -15,3 +20,21 @@ export type ShortVideoViewerHeadingModel = {
     displayDate: string;
     viewsCount: number;
 };
+export type ShortVideoViewerAdModel = {
+    id: string;
+    image: string | null;
+    title: string;
+    description: string | null;
+    buttonText: string | null;
+    buttonUrl: string | null;
+    openLinkInNewWindow: boolean | null;
+};
+export type ShortVideoViewerProductModel = {
+    id: string;
+    title: string;
+    image: string | null;
+    link: string | null;
+    price: number;
+    currency: Currency;
+    salePrice: number | null;
+};

package/dist/short-videos/short-videos-player/cmp.short-videos-player.svelte

@@ -7,16 +7,16 @@
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
+import { ShortVideoViewer } from '../short-video-viewer';
 import { PlayerBuffer, PlayerSlider } from '../../ui/player';
-import { ShortVideosViewer } from '../short-video-viewer';
 import { SpotlightLayout } from '../../ui/spotlight-layout';
 import { default as Controls } from './controls.svelte';
 import { ShortVideosPlayerLocalization } from './short-videos-player-localization.svelte';
 import { ShortVideoPlayerUiManager } from './ui-manager.svelte';
 import { onDestroy, onMount } from 'svelte';
-let { shortVidesProvider, localization: localizationInit, on } = $props();
+let { shortVideosProvider, localization: localizationInit, on } = $props();
 const localization = $derived(new ShortVideosPlayerLocalization(localizationInit));
-const buffer = $derived(new PlayerBuffer(shortVidesProvider));
+const buffer = $derived(new PlayerBuffer(shortVideosProvider));
 const uiManager = new ShortVideoPlayerUiManager();
 onMount(() => __awaiter(void 0, void 0, void 0, function* () {
     uiManager.detailsCollapsed = window && window.innerWidth < window.innerHeight;
@@ -39,7 +39,7 @@ const handleDimensionsChanged = (dimensions) => {
         <div class="short-videos-player__content">
           <PlayerSlider buffer={buffer}>
             {#snippet children({ item })}
-              <ShortVideosViewer model={item} autoplay="on-appearance" showAttachments={uiManager.showShortVideoOverlay} />
+              <ShortVideoViewer model={item} autoplay="on-appearance" showAttachments={uiManager.showShortVideoOverlay} />
             {/snippet}
           </PlayerSlider>
         </div>

package/dist/short-videos/short-videos-player/cmp.short-videos-player.svelte.d.ts

@@ -1,8 +1,8 @@
-import { type PlayerItemsProvider } from '../../ui/player';
 import { type ShortVideoViewerModel } from '../short-video-viewer';
+import { type PlayerItemsProvider } from '../../ui/player';
 import { type IShortVideosPlayerLocalization } from './short-videos-player-localization.svelte';
 type Props = {
-    shortVidesProvider: PlayerItemsProvider<ShortVideoViewerModel>;
+    shortVideosProvider: PlayerItemsProvider<ShortVideoViewerModel>;
     localization?: IShortVideosPlayerLocalization;
     on?: {
         closePlayer?: () => void;

package/dist/short-videos/short-videos-player/controls.svelte

@@ -1,7 +1,6 @@
-<script lang="ts">import { MediaVolumeManager } from '../../ui/media-playback';
-import { ProductCard } from '../../products/product-card';
-import { ShortVideoDetails, ShortVideoViewerAttachments } from '../short-video-viewer';
+<script lang="ts">import { ShortVideoDetails, ShortVideoViewerAttachments, ShortVideoViewerAttachmentsInline } from '../short-video-viewer';
 import { Icon } from '../../ui/icon';
+import { MediaVolumeManager } from '../../ui/media-playback';
 import { default as ActionButton } from './action-button.svelte';
 import { ShortVideosPlayerLocalization } from './short-videos-player-localization.svelte.js';
 import IconChevronDown from '@fluentui/svg-icons/icons/chevron_down_20_regular.svg';
@@ -21,8 +20,8 @@ const shortVideo = $derived(buffer.current);
   <div class="short-video-player-controls__left">
     {#if shortVideo && uiManager.detailsCollapsed && !uiManager.showShortVideoOverlay}
       <div class="short-video-player-controls__short-video-overlay">
-        <div class="short-video-player-controls__short-video-attachments">
-          <ShortVideoViewerAttachments model={shortVideo} />
+        <div class="short-video-player-controls__short-video-attachments-inline">
+          <ShortVideoViewerAttachmentsInline model={shortVideo} />
         </div>
       </div>
     {/if}
@@ -36,11 +35,9 @@ const shortVideo = $derived(buffer.current);
     </div>
   </div>
   <div class="short-video-player-controls__right">
-    {#if shortVideo && shortVideo.products}
-      <div class="short-video-player-controls__short-video-products">
-        {#each shortVideo.products as product (product.id)}
-          <ProductCard model={product} />
-        {/each}
+    {#if shortVideo}
+      <div class="short-video-player-controls__short-video-attachments">
+        <ShortVideoViewerAttachments shortVideo={shortVideo} localization={localization.shortVideoDetailsLocalization?.attachmentsLocalization} />
       </div>
     {/if}
     <div class="short-video-player-controls__controls">
@@ -58,15 +55,7 @@ const shortVideo = $derived(buffer.current);
 </div>
 
 {#if shortVideo && !uiManager.isMobileView}
-  <ShortVideoDetails
-    shortVideo={shortVideo}
-    collapsed={uiManager.detailsCollapsed}
-    localization={{
-      productsSection: localization.productsSection,
-      offersSection: localization.offersSection,
-      viewsCount: localization.viewsCount,
-      timeAgoLocalization: localization.timeAgoLocalization
-    }} />
+  <ShortVideoDetails shortVideo={shortVideo} collapsed={uiManager.detailsCollapsed} localization={localization.shortVideoDetailsLocalization} />
   <div class="toggle-collapsed-button">
     <ActionButton on={{ click: () => (uiManager.detailsCollapsed = !uiManager.detailsCollapsed) }}>
       <Icon src={IconPanelRightGallery} />
@@ -147,31 +136,49 @@ const shortVideo = $derived(buffer.current);
   --short-video-viewer--interactions--counter--color: #f3f4f6;
   --short-video-viewer--interactions--icon--font-color: #f3f4f6;
 }
-.short-video-player-controls__short-video-attachments {
+.short-video-player-controls__short-video-attachments-inline {
   display: none;
   /* Set 'container-type: inline-size;' to reference container*/
 }
-@container (width < 16.25rem) {
-  .short-video-player-controls__short-video-attachments {
+@container (width < calc(21.875rem + 3.75rem)) {
+  .short-video-player-controls__short-video-attachments-inline {
     display: contents;
   }
 }
-.short-video-player-controls__short-video-products {
+.short-video-player-controls__short-video-attachments {
   flex: 1;
-  display: flex;
-  flex-direction: column;
-  gap: 1.5rem;
-  flex-wrap: wrap;
-  justify-content: flex-start;
-  align-items: flex-end;
-  overflow: hidden;
-  width: 12.5rem;
-  max-width: 12.5rem;
-  --product-card--text--color: #d1d5db;
+  overflow-x: hidden;
+  overflow-y: auto;
+  scrollbar-color: transparent transparent;
+  scrollbar-width: thin;
+  width: 21.875rem;
+  max-width: 21.875rem;
   /* Set 'container-type: inline-size;' to reference container*/
 }
-@container (width < 16.25rem) {
-  .short-video-player-controls__short-video-products {
+.short-video-player-controls__short-video-attachments::-webkit-scrollbar {
+  width: 3px;
+  height: 3px;
+  background: var(--custom-scrollbar-background, transparent);
+  visibility: hidden;
+}
+.short-video-player-controls__short-video-attachments::-webkit-scrollbar-thumb {
+  background: transparent;
+}
+.short-video-player-controls__short-video-attachments:hover {
+  scrollbar-color: var(--custom-scrollbar-color, #7d7d7d) var(--custom-scrollbar-background, transparent);
+  scrollbar-width: thin;
+}
+.short-video-player-controls__short-video-attachments:hover::-webkit-scrollbar {
+  width: 3px;
+  height: 3px;
+  background: var(--custom-scrollbar-background, transparent);
+  visibility: hidden;
+}
+.short-video-player-controls__short-video-attachments:hover::-webkit-scrollbar-thumb {
+  background: var(--custom-scrollbar-color, #7d7d7d);
+}
+@container (width < calc(21.875rem + 3.75rem)) {
+  .short-video-player-controls__short-video-attachments {
     display: none;
   }
 }

package/dist/short-videos/short-videos-player/controls.svelte.d.ts

@@ -1,5 +1,5 @@
-import type { IPlayerBuffer } from '../../ui/player';
 import { type ShortVideoViewerModel } from '../short-video-viewer';
+import type { IPlayerBuffer } from '../../ui/player';
 import { ShortVideosPlayerLocalization } from './short-videos-player-localization.svelte.js';
 import type { ShortVideoPlayerUiManager } from './ui-manager.svelte';
 type Props = {

package/dist/short-videos/short-videos-player/index.d.ts

@@ -1,2 +1,28 @@
-export { default as ShortVideosPlayer } from './cmp.short-videos-player.svelte';
-export type { IShortVideosPlayerLocalization } from './short-videos-player-localization.svelte';
+import type { ShortVideoViewerModel } from '../short-video-viewer';
+import type { PlayerItemsProvider } from '../../ui/player';
+import type { IShortVideosPlayerLocalization } from './short-videos-player-localization.svelte';
+export type { IShortVideosPlayerLocalization };
+/**
+ * Opens the short videos player modal with the specified provider and optional localization.
+ *
+ * @param init - Configuration options.
+ * @param {PlayerItemsProvider<ShortVideoViewerModel>} init.shortVideosProvider - The provider instance supplying short video items to the player.
+ * @param {IShortVideosPlayerLocalization} [init.localization] - Optional localization settings for the player UI.
+ *
+ * @example
+ * ```ts
+ * import { openShortVideosPlayer } from '@streamscloud/embeddable/short-videos-player';
+ *
+ * openShortVideosPlayer({
+ *   shortVideosProvider: myShortVideosProvider,
+ *   localization: {
+ *     next: 'Next',
+ *     previous: 'Previous'
+ *   }
+ * });
+ * ```
+ */
+export declare const openShortVideosPlayer: (init: {
+    shortVideosProvider: PlayerItemsProvider<ShortVideoViewerModel>;
+    localization?: IShortVideosPlayerLocalization;
+}) => void;

package/dist/short-videos/short-videos-player/index.js

@@ -1 +1,40 @@
-export { default as ShortVideosPlayer } from './cmp.short-videos-player.svelte';
+import { ShadowHost } from '../../ui/shadow-dom';
+import { default as ShortVideosPlayer } from './cmp.short-videos-player.svelte';
+import { mount } from 'svelte';
+/**
+ * Opens the short videos player modal with the specified provider and optional localization.
+ *
+ * @param init - Configuration options.
+ * @param {PlayerItemsProvider<ShortVideoViewerModel>} init.shortVideosProvider - The provider instance supplying short video items to the player.
+ * @param {IShortVideosPlayerLocalization} [init.localization] - Optional localization settings for the player UI.
+ *
+ * @example
+ * ```ts
+ * import { openShortVideosPlayer } from '@streamscloud/embeddable/short-videos-player';
+ *
+ * openShortVideosPlayer({
+ *   shortVideosProvider: myShortVideosProvider,
+ *   localization: {
+ *     next: 'Next',
+ *     previous: 'Previous'
+ *   }
+ * });
+ * ```
+ */
+export const openShortVideosPlayer = (init) => {
+    const { shortVideosProvider, localization } = init;
+    const shadowHost = new ShadowHost();
+    mount(ShortVideosPlayer, {
+        target: shadowHost.shadowRoot,
+        props: {
+            shortVideosProvider,
+            localization,
+            on: {
+                closePlayer: () => {
+                    shadowHost.remove();
+                }
+            }
+        }
+    });
+    shadowHost.attachToBody();
+};

package/dist/short-videos/short-videos-player/short-videos-player-localization.svelte.d.ts

@@ -1,14 +1,8 @@
-import type { ITimeAgoLocalization } from '../../ui/time-ago';
+import type { IShortVideoDetailsLocalization } from '../short-video-viewer';
 export interface IShortVideosPlayerLocalization {
-    productsSection?: string;
-    offersSection?: string;
-    viewsCount?: (count: number) => string;
-    timeAgoLocalization?: ITimeAgoLocalization;
+    shortVideoDetailsLocalization?: IShortVideoDetailsLocalization;
 }
 export declare class ShortVideosPlayerLocalization {
-    productsSection: string;
-    offersSection: string;
-    viewsCount: (count: number) => string;
-    timeAgoLocalization: ITimeAgoLocalization | undefined;
+    shortVideoDetailsLocalization: IShortVideoDetailsLocalization | undefined;
     constructor(init?: IShortVideosPlayerLocalization);
 }

package/dist/short-videos/short-videos-player/short-videos-player-localization.svelte.js

@@ -1,21 +1,6 @@
 export class ShortVideosPlayerLocalization {
-    productsSection = $state('Products');
-    offersSection = $state('Offers');
-    viewsCount = $state((count) => (count === 1 ? '1 view' : `${count} views`));
-    timeAgoLocalization = $state(undefined);
+    shortVideoDetailsLocalization = $state(undefined);
     constructor(init) {
-        if (!init) {
-            return;
-        }
-        if (init.productsSection !== undefined) {
-            this.productsSection = init.productsSection;
-        }
-        if (init.offersSection !== undefined) {
-            this.offersSection = init.offersSection;
-        }
-        if (init.viewsCount !== undefined) {
-            this.viewsCount = init.viewsCount;
-        }
-        this.timeAgoLocalization = init.timeAgoLocalization;
+        this.shortVideoDetailsLocalization = init?.shortVideoDetailsLocalization || this.shortVideoDetailsLocalization;
     }
 }

package/dist/streams/layout/cmp.layout.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">import { ProportionalContainer } from '../../ui/proportional-container';
+import { generateStreamLayoutStyles } from './styles-transformer';
+let { model, children } = $props();
+</script>
+
+<ProportionalContainer ratio={9 / 16}>
+  <div class="stream-page-layout" style={generateStreamLayoutStyles(model.styles)}>
+    {@render children()}
+  </div>
+</ProportionalContainer>
+
+<style>@keyframes fadeIn {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.4;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+.stream-page-layout {
+  width: 100%;
+  min-width: 100%;
+  max-width: 100%;
+  height: 100%;
+  min-height: 100%;
+  max-height: 100%;
+  position: relative;
+  border-radius: 0.25rem;
+  overflow: hidden;
+  container-type: inline-size;
+}</style>

package/dist/streams/{slots/cmp.stream-component-slot.svelte.d.ts → layout/cmp.layout.svelte.d.ts}

@@ -1,7 +1,7 @@
-import type { StreamComponentSlotModel } from './types';
+import type { StreamLayout } from './layout';
 import type { Snippet } from 'svelte';
 type Props = {
-    model: StreamComponentSlotModel;
+    model: StreamLayout;
     children: Snippet;
 };
 declare const Cmp: import("svelte").Component<Props, {}, "">;

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

@@ -0,0 +1,32 @@
+<script lang="ts">import { Utils } from '../../core/utils';
+import { StreamElement } from './element-views';
+import { StreamComponentDataType } from './enums';
+let { model, localization } = $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); });
+});
+const dataIsFilled = $derived.by(() => {
+    if (!model.data) {
+        return false;
+    }
+    switch (model.data.type) {
+        case StreamComponentDataType.ShortVideo: {
+            return !!model.data.shortVideo;
+        }
+        case StreamComponentDataType.Product: {
+            return !!model.data.product;
+        }
+        case StreamComponentDataType.Images: {
+            return !!model.data.items.length;
+        }
+        default:
+            Utils.assertUnreachable(model.data);
+    }
+});
+</script>
+
+{#if component && model.data && dataIsFilled}
+  {#each component.elements as element (element)}
+    <StreamElement model={element} data={model.data} localization={localization} />
+  {/each}
+{/if}

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

@@ -0,0 +1,9 @@
+import { type IStreamElementLocalization } from './element-views';
+import type { StreamSlot } from './slot';
+type Props = {
+    model: StreamSlot;
+    localization?: IStreamElementLocalization;
+};
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

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

@@ -0,0 +1,26 @@
+<script lang="ts">let { model, children } = $props();
+const computeStyles = (settings) => {
+    const values = [`width: ${settings.width}%`, `height: ${settings.height}%`, `top: ${settings.top}%`, `left: ${settings.left}%`];
+    return values.join(';');
+};
+export {};
+</script>
+
+<div class="stream-layout-slot" style={computeStyles(model)}>
+  {@render children()}
+</div>
+
+<style>@keyframes fadeIn {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.4;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+.stream-layout-slot {
+  position: absolute;
+}</style>

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

@@ -0,0 +1,9 @@
+import type { StreamSlot } from './slot';
+import type { Snippet } from 'svelte';
+type Props = {
+    model: StreamSlot;
+    children: Snippet;
+};
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

package/dist/streams/layout/component.d.ts

@@ -0,0 +1,6 @@
+import type { StreamElementModel } from './elements';
+import { StreamComponentDataType } from './enums';
+export type StreamComponent = {
+    dataType: StreamComponentDataType;
+    elements: StreamElementModel[];
+};

package/dist/streams/layout/component.js

@@ -0,0 +1 @@
+import { StreamComponentDataType } from './enums';

package/dist/streams/layout/css-values.d.ts

@@ -0,0 +1,10 @@
+import { StreamCssValueType } from './enums';
+export type StreamCssValue = DeviceDependentStreamCssValue | PercentStreamCssValue;
+export type DeviceDependentStreamCssValue = {
+    type: StreamCssValueType.DDU;
+    value: number;
+};
+export type PercentStreamCssValue = {
+    type: StreamCssValueType.Pct;
+    value: number;
+};

package/dist/streams/layout/css-values.js

@@ -0,0 +1 @@
+import { StreamCssValueType } from './enums';

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

@@ -0,0 +1,16 @@
+<script lang="ts">import {} from './stream-element-localization.svelte';
+import { StreamElementStyleDirection } from '../enums';
+import { generateContainerStyles } from '../styles-transformer';
+import { default as StreamElement } from './cmp.stream-element.svelte';
+let { model, data, localization } = $props();
+</script>
+
+<div class="container-stream-element" style={generateContainerStyles(model.styles)}>
+  {#each model.elements as element (element)}
+    <StreamElement
+      model={element}
+      data={data}
+      constainerDirection={model.styles?.direction ?? StreamElementStyleDirection.Vertical}
+      localization={localization} />
+  {/each}
+</div>

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

@@ -0,0 +1,11 @@
+import { type IStreamElementLocalization } from './stream-element-localization.svelte';
+import type { ContainerStreamElementModel } from '../elements';
+import type { StreamSlotData } from '../slot-data';
+type Props = {
+    model: ContainerStreamElementModel;
+    data: StreamSlotData;
+    localization?: IStreamElementLocalization;
+};
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

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

@@ -0,0 +1,38 @@
+<script lang="ts">import { getStringValueByKey } from './data-by-key-accessor';
+import { generateImageStyles } from '../styles-transformer';
+let { model, data } = $props();
+const value = $derived(getStringValueByKey(data, model.key));
+</script>
+
+<div class="image-ref-stream-element">
+  <img class="image-ref-stream-element-image" src={value} alt={model.key} style={generateImageStyles(model.styles)} />
+</div>
+
+<style>@keyframes fadeIn {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.4;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+.image-ref-stream-element {
+  width: 100%;
+  min-width: 100%;
+  max-width: 100%;
+  height: 100%;
+  min-height: 100%;
+  max-height: 100%;
+  overflow: hidden;
+}
+
+.image-ref-stream-element-image {
+  object-fit: cover;
+  min-width: 100%;
+  min-height: 100%;
+  max-width: 100%;
+  max-height: 100%;
+}</style>

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

@@ -0,0 +1,9 @@
+import type { ImageRefStreamElementModel } from '../elements';
+import type { StreamSlotData } from '../slot-data';
+type Props = {
+    model: ImageRefStreamElementModel;
+    data: StreamSlotData;
+};
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

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

@@ -0,0 +1,30 @@
+<script lang="ts">import { Image } from '../../../ui/image';
+import { ImagesImagesElementMode } from '../enums';
+let { model, data } = $props();
+</script>
+
+<div class="images-stream-element">
+  {#if data.length > 0}
+    {#if model.mode === ImagesImagesElementMode.Single || data.length === 1}
+      <Image src={data[0].url} />
+    {:else}
+      need implement multiple images
+    {/if}
+  {/if}
+</div>
+
+<style>@keyframes fadeIn {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.4;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+.images-stream-element {
+  width: 100%;
+  height: 100%;
+}</style>

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

@@ -0,0 +1,9 @@
+import type { ImagesStreamElementModel } from '../elements';
+import type { StreamLayoutBlobModel } from '../models';
+type Props = {
+    model: ImagesStreamElementModel;
+    data: StreamLayoutBlobModel[];
+};
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;