@streamscloud/embeddable 1.1.11 → 2.0.0

package/dist/streams/layout/models/index.js

@@ -0,0 +1 @@
+export { mapToShortVideoViewerModel } from './mapper';

package/dist/streams/layout/models/mapper.d.ts

@@ -0,0 +1,3 @@
+import type { ShortVideoViewerModel } from '../../../short-videos/short-video-viewer';
+import type { StreamLayoutShortVideoModel } from '../models/stream-layout-short-video-model';
+export declare const mapToShortVideoViewerModel: (model: StreamLayoutShortVideoModel) => ShortVideoViewerModel;

package/dist/streams/layout/models/mapper.js

@@ -0,0 +1,62 @@
+import { MediaType } from '../../../core/enums';
+export const mapToShortVideoViewerModel = (model) => {
+    return {
+        id: model.id,
+        media: model.media.type === MediaType.Image
+            ? { isImage: true, url: model.media.url }
+            : {
+                isImage: false,
+                url: model.media.url,
+                thumbnailUrl: model.media.thumbnailUrl
+            },
+        text: model.text,
+        heading: {
+            image: model.header.sourceImage,
+            name: model.header.sourceName,
+            displayDate: model.header.postDisplayDate,
+            viewsCount: model.header.postViewsCount
+        },
+        ad: model.ad ? mapToAdViewModel(model.ad) : null,
+        products: model.products.map(mapToProductCardModel)
+        // uncomment if you want to test many products behavior
+        /*.flatMap((x) => [
+          { ...x, id: x.id + '1' },
+          { ...x, id: x.id + '2' },
+          { ...x, id: x.id + '3' },
+          { ...x, id: x.id + '4' },
+          { ...x, id: x.id + '5' },
+          { ...x, id: x.id + '6' },
+          { ...x, id: x.id + '7' },
+          { ...x, id: x.id + '8' },
+          { ...x, id: x.id + '9' },
+          { ...x, id: x.id + '10' },
+          { ...x, id: x.id + '11' },
+          { ...x, id: x.id + '12' },
+          { ...x, id: x.id + '13' },
+          { ...x, id: x.id + '14' },
+          { ...x, id: x.id + '15' }
+        ])*/
+    };
+};
+const mapToAdViewModel = (model) => {
+    return {
+        id: model.id,
+        image: model.image,
+        title: model.title,
+        description: model.description,
+        buttonText: model.buttonText,
+        buttonUrl: model.buttonUrl,
+        openLinkInNewWindow: model.openLinkInNewWindow
+    };
+};
+const mapToProductCardModel = (model) => {
+    return {
+        id: model.id,
+        title: model.title,
+        image: model.image,
+        link: model.link,
+        currency: model.currency,
+        price: model.price,
+        salePrice: model.salePrice
+    };
+};

package/dist/streams/layout/models/stream-layout-blob-model.d.ts

@@ -0,0 +1,4 @@
+export type StreamLayoutBlobModel = {
+    id: string;
+    url: string;
+};

package/dist/streams/layout/models/stream-layout-media-item-model.d.ts

@@ -0,0 +1,6 @@
+import { MediaType } from '../../..';
+export type StreamLayoutMediaItemModel = {
+    url: string;
+    thumbnailUrl: string | null;
+    type: MediaType;
+};

package/dist/streams/layout/models/stream-layout-media-item-model.js

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

package/dist/streams/layout/models/stream-layout-post-header-model.d.ts

@@ -0,0 +1,11 @@
+import type { PostSourceType } from '$gql/types';
+export type StreamLayoutPostHeaderModel = {
+    sourceId: string;
+    sourceName: string;
+    sourceImage: string;
+    sourceHandle: string;
+    sourceType: PostSourceType;
+    postDisplayDate: string;
+    postViewsCount: number;
+    sourceIsRemoved: boolean;
+};

package/dist/streams/layout/models/stream-layout-post-header-model.js

@@ -0,0 +1 @@
+export {};

package/dist/streams/layout/models/stream-layout-product-model.d.ts

@@ -0,0 +1,19 @@
+import type { Currency } from '../../../core/enums';
+export type StreamLayoutProductModel = {
+    id: string;
+    title: string;
+    description: string | null;
+    image: string | null;
+    link: string | null;
+    price: StreamLayoutProductPriceModel;
+};
+type StreamLayoutProductPriceModel = {
+    price: number;
+    currency: Currency;
+    salePrice: number | null;
+    currentPriceValue: string;
+    beforePriceValue: string | null;
+    saveValue: string | null;
+    savePercentValue: string | null;
+};
+export {};

package/dist/streams/layout/models/stream-layout-product-model.js

@@ -0,0 +1 @@
+export {};

package/dist/streams/layout/models/stream-layout-short-video-model.d.ts

@@ -0,0 +1,31 @@
+import type { Currency } from '../../../core/enums';
+import type { StreamLayoutMediaItemModel } from './stream-layout-media-item-model';
+import type { StreamLayoutPostHeaderModel } from './stream-layout-post-header-model';
+export type StreamLayoutShortVideoModel = {
+    id: string;
+    media: StreamLayoutMediaItemModel;
+    text: string | null;
+    header: StreamLayoutPostHeaderModel;
+    enableSocialInteractions: boolean;
+    bookmarksCount: number;
+    products: StreamLayoutShortVideoProductModel[];
+    ad: StreamLayoutShortVideoAdModel | null;
+};
+export type StreamLayoutShortVideoAdModel = {
+    id: string;
+    image: string | null;
+    title: string;
+    description: string | null;
+    buttonText: string | null;
+    buttonUrl: string | null;
+    openLinkInNewWindow: boolean | null;
+};
+export type StreamLayoutShortVideoProductModel = {
+    id: string;
+    title: string;
+    image: string | null;
+    link: string | null;
+    price: number;
+    currency: Currency;
+    salePrice: number | null;
+};

package/dist/streams/layout/models/stream-layout-short-video-model.js

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,3 @@
+import type { StreamLayout } from './layout';
+export declare const parseToStreamLayout: (value: string) => StreamLayout;
+export declare const stringifyToStreamLayoutInput: (layout: StreamLayout) => string;

package/dist/streams/layout/serializer.js

@@ -0,0 +1,6 @@
+export const parseToStreamLayout = (value) => {
+    return JSON.parse(value);
+};
+export const stringifyToStreamLayoutInput = (layout) => {
+    return JSON.stringify(layout);
+};

package/dist/streams/layout/slot-data-input.d.ts

@@ -0,0 +1,14 @@
+import { StreamComponentDataType } from './enums';
+export type StreamSlotDataInput = ImagesStreamSlotDataInput | ProductStreamSlotDataInput | ShortVideoStreamSlotDataInput;
+export interface ImagesStreamSlotDataInput {
+    type: StreamComponentDataType.Images;
+    ids: string[];
+}
+export interface ProductStreamSlotDataInput {
+    type: StreamComponentDataType.Product;
+    id: string;
+}
+export interface ShortVideoStreamSlotDataInput {
+    type: StreamComponentDataType.ShortVideo;
+    id: string;
+}

package/dist/streams/layout/slot-data-input.js

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

package/dist/streams/layout/slot-data.d.ts

@@ -0,0 +1,18 @@
+import { StreamComponentDataType } from './enums';
+import type { StreamLayoutBlobModel, StreamLayoutProductModel, StreamLayoutShortVideoModel } from './models';
+export type StreamSlotData = ImagesStreamSlotData | ProductStreamSlotData | ShortVideoStreamSlotData;
+export type ImagesStreamSlotData = {
+    type: StreamComponentDataType.Images;
+    ids: string[];
+    items: StreamLayoutBlobModel[];
+};
+export type ProductStreamSlotData = {
+    type: StreamComponentDataType.Product;
+    id: string;
+    product: StreamLayoutProductModel | null;
+};
+export type ShortVideoStreamSlotData = {
+    type: StreamComponentDataType.ShortVideo;
+    id: string;
+    shortVideo: StreamLayoutShortVideoModel | null;
+};

package/dist/streams/layout/slot-data.js

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

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

@@ -0,0 +1,16 @@
+import type { StreamComponent } from './component';
+import type { StreamSlotData } from './slot-data';
+import type { StreamSlotDataInput } from './slot-data-input';
+export type StreamSlotTemplate = {
+    top: number;
+    left: number;
+    width: number;
+    height: number;
+    components: StreamComponent[];
+};
+export type StreamSlotInput = StreamSlotTemplate & {
+    data: StreamSlotDataInput | null;
+};
+export type StreamSlot = StreamSlotTemplate & {
+    data: StreamSlotData | null;
+};

package/dist/streams/layout/slot.js

@@ -0,0 +1 @@
+export {};

package/dist/streams/layout/styles-transformer.d.ts

@@ -0,0 +1,13 @@
+import { StreamElementStyleFontFamily, StreamElementStyleFontWeight, StreamElementStyleHorizontalAlign } from './enums';
+import type { ContainerStreamElementStyles, ImageStreamElementStyles, StreamLayoutStyles, TextStreamElementStyles } from './styles';
+export declare const generateStreamLayoutStyles: (styles: StreamLayoutStyles | null) => string;
+export declare const generateContainerStyles: (styles: Partial<ContainerStreamElementStyles> | null) => string;
+export declare const generateTextStyles: (styles: Partial<TextStreamElementStyles> | null) => string;
+export declare const generateImageStyles: (styles: Partial<ImageStreamElementStyles> | null) => string;
+export declare const mapFontFamily: (value: StreamElementStyleFontFamily | null | undefined) => string;
+export declare const mapFontWeight: (value: StreamElementStyleFontWeight | null | undefined) => "normal" | "600" | "500";
+export declare const mapTextAlign: (value: StreamElementStyleHorizontalAlign | null | undefined) => "center" | "left" | "right";
+export declare const mapFlexJustifyContent: (value: StreamElementStyleHorizontalAlign | null | undefined) => "center" | "flex-start" | "flex-end";
+export declare const transformFontSizeValue: (value: number | null | undefined) => string;
+export declare const transformNumericValue: (value: number | null | undefined, fallback?: string) => string;
+export declare const transformColorValue: (value: string | null | undefined) => string;

package/dist/streams/layout/styles-transformer.js

@@ -0,0 +1,140 @@
+import { Utils } from '../../core/utils';
+import { StreamCssValueType, StreamElementStyleDirection, StreamElementStyleFontFamily, StreamElementStyleFontWeight, StreamElementStyleMediaFit, StreamElementStyleHorizontalAlign } from './enums';
+export const generateStreamLayoutStyles = (styles) => {
+    if (!styles) {
+        return '';
+    }
+    const values = [`background-color: ${transformColorValue(styles.backgroundColor)};`, `font-family: ${mapFontFamily(styles.fontFamily)};`];
+    return values.join('');
+};
+export const generateContainerStyles = (styles) => {
+    styles = styles || {};
+    const values = [
+        'display: flex;',
+        'flex-direction: column;',
+        `width: ${transformCssValue(styles.width, 'auto')};`,
+        `height: ${transformCssValue(styles.height, 'fit-content')};`,
+        `aspect-ratio: ${styles.aspectRatio || 'auto'};`,
+        `gap: ${transformNumericValue(styles.gap)};`,
+        `padding-top: ${transformNumericValue(styles.paddingTop)};`,
+        `padding-right: ${transformNumericValue(styles.paddingRight)};`,
+        `padding-bottom: ${transformNumericValue(styles.paddingBottom)};`,
+        `padding-left: ${transformNumericValue(styles.paddingLeft)};`,
+        `background-color: ${transformColorValue(styles.backgroundColor)};`,
+        `border-width: ${styles.borderColor ? '1px' : '0'};`,
+        `border-radius: ${transformNumericValue(styles.borderRadius)};`,
+        `border-color: ${transformColorValue(styles.borderColor)};`,
+        `overflow: ${styles.borderRadius ? 'hidden' : 'visible'};`
+    ];
+    if (styles.direction) {
+        values.push(`display: flex;`);
+        values.push(`flex-direction: ${styles.direction === StreamElementStyleDirection.Horizontal ? 'row' : 'column'};`);
+    }
+    return values.join('');
+};
+export const generateTextStyles = (styles) => {
+    styles = styles || {};
+    const values = [
+        `font-family: ${mapFontFamily(styles.fontFamily)};`,
+        `font-size: ${transformFontSizeValue(styles.fontSize)};`,
+        `font-weight: ${mapFontWeight(styles.fontWeight)};`,
+        `line-height: ${transformNumericValue(styles.lineHeight, '1.2')};`,
+        `text-align: ${mapTextAlign(styles.textAlign)};`,
+        `color: ${transformColorValue(styles.color)};`
+    ];
+    return values.join('');
+};
+export const generateImageStyles = (styles) => {
+    styles = styles || {};
+    const imageStyles = [`object-fit: ${mapMediaFit(styles.mediaFit)};`];
+    return imageStyles.join('');
+};
+export const mapFontFamily = (value) => {
+    switch (value) {
+        case StreamElementStyleFontFamily.System:
+            return 'inherit';
+        default: {
+            return 'inherit';
+        }
+    }
+};
+export const mapFontWeight = (value) => {
+    switch (value) {
+        case StreamElementStyleFontWeight.Bold:
+            return '600';
+        case StreamElementStyleFontWeight.SemiBold:
+            return '500';
+        default: {
+            return 'normal';
+        }
+    }
+};
+export const mapTextAlign = (value) => {
+    switch (value) {
+        case StreamElementStyleHorizontalAlign.Left:
+            return 'left';
+        case StreamElementStyleHorizontalAlign.Center:
+            return 'center';
+        case StreamElementStyleHorizontalAlign.Right:
+            return 'right';
+        default: {
+            return 'left';
+        }
+    }
+};
+export const mapFlexJustifyContent = (value) => {
+    switch (value) {
+        case StreamElementStyleHorizontalAlign.Left:
+            return 'flex-start';
+        case StreamElementStyleHorizontalAlign.Center:
+            return 'center';
+        case StreamElementStyleHorizontalAlign.Right:
+            return 'flex-end';
+        default: {
+            return 'flex-start';
+        }
+    }
+};
+const mapMediaFit = (value) => {
+    switch (value) {
+        case StreamElementStyleMediaFit.Cover:
+            return 'cover';
+        case StreamElementStyleMediaFit.Contain:
+            return 'contain';
+        default: {
+            return 'cover';
+        }
+    }
+};
+const transformCssValue = (value, fallback = '0') => {
+    if (value === null || value === undefined) {
+        return fallback;
+    }
+    switch (value.type) {
+        case StreamCssValueType.DDU:
+            return transformNumericValue(value.value, fallback);
+        case StreamCssValueType.Pct:
+            return `${value.value}%`;
+        default:
+            Utils.assertUnreachable(value);
+    }
+};
+export const transformFontSizeValue = (value) => {
+    if (value === null || value === undefined) {
+        value = 16;
+    }
+    return transformNumericValue(value);
+};
+const baseContainerWidth = 400;
+export const transformNumericValue = (value, fallback = '0') => {
+    if (value === null || value === undefined) {
+        return fallback;
+    }
+    return `${(value / baseContainerWidth) * 100}cqi`;
+};
+export const transformColorValue = (value) => {
+    if (value === null || value === undefined) {
+        return 'transparent';
+    }
+    return value;
+};

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

@@ -0,0 +1,43 @@
+import type { StreamCssValue } from './css-values';
+import { StreamElementStyleDirection, StreamElementStyleFontFamily, StreamElementStyleFontWeight, StreamElementStyleMediaFit, StreamElementStyleHorizontalAlign } from './enums';
+export type StreamLayoutStyles = {
+    backgroundColor?: string | null;
+    fontFamily?: StreamElementStyleFontFamily | null;
+};
+export type ImageStreamElementStyles = {
+    mediaFit?: StreamElementStyleMediaFit | null;
+};
+export type PriceStreamElementStyles = {
+    height?: number | null;
+    fontWeight?: StreamElementStyleFontWeight | null;
+    fontFamily?: StreamElementStyleFontFamily | null;
+    regularPriceColor?: string | null;
+    salePriceColor?: string | null;
+    saveValueColor?: string | null;
+    saveValueBackgroundColor?: string | null;
+    beforeValueColor?: string | null;
+    horizontalAlign?: StreamElementStyleHorizontalAlign | null;
+};
+export type TextStreamElementStyles = {
+    fontSize?: number | null;
+    fontWeight?: StreamElementStyleFontWeight | null;
+    fontFamily?: StreamElementStyleFontFamily | null;
+    lineHeight?: number | null;
+    textAlign?: StreamElementStyleHorizontalAlign | null;
+    color?: string | null;
+    maxLines?: number | null;
+};
+export type ContainerStreamElementStyles = {
+    width?: StreamCssValue | null;
+    height?: StreamCssValue | null;
+    aspectRatio?: number | null;
+    direction?: StreamElementStyleDirection | null;
+    gap?: number | null;
+    paddingTop?: number | null;
+    paddingRight?: number | null;
+    paddingBottom?: number | null;
+    paddingLeft?: number | null;
+    backgroundColor?: string | null;
+    borderRadius?: number | null;
+    borderColor?: string | null;
+};

package/dist/streams/layout/styles.js

@@ -0,0 +1 @@
+import { StreamElementStyleDirection, StreamElementStyleFontFamily, StreamElementStyleFontWeight, StreamElementStyleMediaFit, StreamElementStyleHorizontalAlign } from './enums';

package/dist/streams/layout/type-guards.d.ts

@@ -0,0 +1,8 @@
+import type { ImagesStreamSlotData, ProductStreamSlotData, ShortVideoStreamSlotData, StreamSlotData } from './slot-data';
+import type { ImagesStreamSlotDataInput, ProductStreamSlotDataInput, ShortVideoStreamSlotDataInput, StreamSlotDataInput } from './slot-data-input';
+export declare function isImagesSlotDataInput(data: StreamSlotDataInput | null): data is ImagesStreamSlotDataInput;
+export declare function isProductSlotDataInput(data: StreamSlotDataInput | null): data is ProductStreamSlotDataInput;
+export declare function isShortVideoSlotDataInput(data: StreamSlotDataInput | null): data is ShortVideoStreamSlotDataInput;
+export declare function isImagesSlotData(data: StreamSlotData | null): data is ImagesStreamSlotData;
+export declare function isProductSlotData(data: StreamSlotData | null): data is ProductStreamSlotData;
+export declare function isShortVideoSlotData(data: StreamSlotData | null): data is ShortVideoStreamSlotData;

package/dist/streams/layout/type-guards.js

@@ -0,0 +1,21 @@
+import { StreamComponentDataType } from './enums';
+// SlotDataInput guards
+export function isImagesSlotDataInput(data) {
+    return data?.type === StreamComponentDataType.Images;
+}
+export function isProductSlotDataInput(data) {
+    return data?.type === StreamComponentDataType.Product;
+}
+export function isShortVideoSlotDataInput(data) {
+    return data?.type === StreamComponentDataType.ShortVideo;
+}
+// SlotData guards
+export function isImagesSlotData(data) {
+    return data?.type === StreamComponentDataType.Images;
+}
+export function isProductSlotData(data) {
+    return data?.type === StreamComponentDataType.Product;
+}
+export function isShortVideoSlotData(data) {
+    return data?.type === StreamComponentDataType.ShortVideo;
+}

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

@@ -1,47 +1,13 @@
-<script lang="ts">import { StreamPageComponent } from '../components';
-import { StreamComponentSlot } from '../slots';
-import { StreamPageViewerLocalization } from './stream-page-viewer-localization.svelte';
-let { page, localization: localizationInit } = $props();
-const localization = $derived(new StreamPageViewerLocalization(localizationInit));
-const selectComponentForSlot = (slotId, components) => { var _a; return (_a = components.find((s) => s.slotId === slotId)) !== null && _a !== void 0 ? _a : null; };
+<script lang="ts">import { StreamLayoutSlot, StreamPageLayout, StreamLayoutSlotContent } from '../layout';
+let { page } = $props();
 </script>
 
 {#if page.type === 'general'}
-  <div class="stream-page-viewer">
-    {#each page.slots as slot (slot.id)}
-      {@const component = selectComponentForSlot(slot.id, page.components)}
-      <StreamComponentSlot model={slot}>
-        {#if component}
-          <StreamPageComponent
-            component={component}
-            autoplay={false}
-            localization={{ viewsCount: localization.viewsCount, timeAgoLocalization: localization.timeAgoLocalization }} />
-        {/if}
-      </StreamComponentSlot>
+  <StreamPageLayout model={page.layout}>
+    {#each page.layout.slots as slot (slot)}
+      <StreamLayoutSlot model={slot}>
+        <StreamLayoutSlotContent model={slot} />
+      </StreamLayoutSlot>
     {/each}
-  </div>
+  </StreamPageLayout>
 {/if}
-
-<style>@keyframes fadeIn {
-  0% {
-    opacity: 1;
-  }
-  50% {
-    opacity: 0.4;
-  }
-  100% {
-    opacity: 1;
-  }
-}
-.stream-page-viewer {
-  width: 100%;
-  min-width: 100%;
-  max-width: 100%;
-  height: 100%;
-  min-height: 100%;
-  max-height: 100%;
-  position: relative;
-  background: #ffffff;
-  border-radius: 0.375rem;
-  overflow: hidden;
-}</style>

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

@@ -1,8 +1,6 @@
-import { type IStreamPageViewerLocalization } from './stream-page-viewer-localization.svelte';
 import type { StreamPageViewerModel } from './types';
 type Props = {
     page: StreamPageViewerModel;
-    localization?: IStreamPageViewerLocalization;
 };
 declare const Cmp: import("svelte").Component<Props, {}, "">;
 type Cmp = ReturnType<typeof Cmp>;

package/dist/streams/stream-page-viewer/mapper.d.ts

@@ -1,3 +1,3 @@
 import type { StreamPageViewerPayloadFragment } from './operations.generated';
-import { type StreamPageViewerModel } from './types';
+import type { StreamPageViewerModel } from './types';
 export declare const mapToStreamPageViewerModel: (payload: StreamPageViewerPayloadFragment) => StreamPageViewerModel;

package/dist/streams/stream-page-viewer/mapper.js

@@ -1,15 +1,15 @@
-import { mapToStreamComponentModel, StreamComponentType } from '../components';
-import { mapToStreamComponentSlotModel } from '../slots';
-import {} from './types';
+import { getSingleShortVideoFromLayout, parseToStreamLayout } from '../layout';
 export const mapToStreamPageViewerModel = (payload) => {
-    const components = payload.components.map(mapToStreamComponentModel).filter((x) => x !== null);
-    if (components.length === 1 && components[0].type === StreamComponentType.ShortVideo) {
+    const layout = parseToStreamLayout(payload.layout);
+    const singleShortVideo = getSingleShortVideoFromLayout(layout);
+    if (singleShortVideo) {
         return {
             type: 'short-video',
             id: payload.id,
             cover: payload.cover?.url || null,
             name: payload.name,
-            shortVideo: components[0].data
+            shortVideo: singleShortVideo,
+            layout
         };
     }
     return {
@@ -17,7 +17,6 @@ export const mapToStreamPageViewerModel = (payload) => {
         id: payload.id,
         cover: payload.cover?.url || null,
         name: payload.name,
-        components,
-        slots: payload.slots.map(mapToStreamComponentSlotModel)
+        layout
     };
 };