@streamscloud/embeddable 1.1.2

package/dist/streams/components/stream-components-localization.svelte.js

@@ -0,0 +1,13 @@
+export class StreamComponentsLocalization {
+    viewsCount = $state((count) => (count === 1 ? '1 view' : `${count} views`));
+    timeAgoLocalization = $state(undefined);
+    constructor(init) {
+        if (!init) {
+            return;
+        }
+        if (init.viewsCount !== undefined) {
+            this.viewsCount = init.viewsCount;
+        }
+        this.timeAgoLocalization = init.timeAgoLocalization;
+    }
+}

package/dist/streams/components/types.d.ts

@@ -0,0 +1,27 @@
+import type { ImagesComponentData } from './images';
+import type { ProductComponentData } from './product';
+import type { ShortVideoStreamComponentData } from './short-video';
+export type StreamComponentModel = ImagesStreamComponentModel | ShortVideoStreamComponentModel | ProductStreamComponentModel;
+export type ImagesStreamComponentModel = {
+    type: StreamComponentType.Images;
+    id: string;
+    slotId: string;
+    data: ImagesComponentData;
+};
+export type ShortVideoStreamComponentModel = {
+    type: StreamComponentType.ShortVideo;
+    id: string;
+    slotId: string;
+    data: ShortVideoStreamComponentData;
+};
+export type ProductStreamComponentModel = {
+    type: StreamComponentType.Product;
+    id: string;
+    slotId: string;
+    data: ProductComponentData;
+};
+export declare enum StreamComponentType {
+    Images = "IMAGES",
+    Product = "PRODUCT",
+    ShortVideo = "SHORT_VIDEO"
+}

package/dist/streams/components/types.js

@@ -0,0 +1,6 @@
+export var StreamComponentType;
+(function (StreamComponentType) {
+    StreamComponentType["Images"] = "IMAGES";
+    StreamComponentType["Product"] = "PRODUCT";
+    StreamComponentType["ShortVideo"] = "SHORT_VIDEO";
+})(StreamComponentType || (StreamComponentType = {}));

package/dist/streams/slots/cmp.stream-component-slot.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">import { generatePaddingsCssVar } from './styles-transformer';
+let { model, children } = $props();
+const computeStyles = (settings) => {
+    const values = [`width: ${settings.width}%`, `height: ${settings.height}%`, `top: ${settings.top}%`, `left: ${settings.left}%`];
+    if (settings.styles) {
+        values.push(`padding: ${generatePaddingsCssVar(settings.styles)}`);
+    }
+    return values.join(';');
+};
+</script>
+
+<div class="slot" style={computeStyles(model)}>
+  <div class="slot__content">
+    {@render children()}
+  </div>
+</div>
+
+<style>@keyframes fadeIn {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.4;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+.slot {
+  position: absolute;
+}
+.slot__content {
+  width: 100%;
+  height: 100%;
+}</style>

package/dist/streams/slots/cmp.stream-component-slot.svelte.d.ts

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

package/dist/streams/slots/index.d.ts

@@ -0,0 +1,3 @@
+export { default as StreamComponentSlot } from './cmp.stream-component-slot.svelte';
+export type { StreamComponentSlotModel } from './types';
+export { mapToStreamComponentSlotModel } from './mapper';

package/dist/streams/slots/index.js

@@ -0,0 +1,2 @@
+export { default as StreamComponentSlot } from './cmp.stream-component-slot.svelte';
+export { mapToStreamComponentSlotModel } from './mapper';

package/dist/streams/slots/mapper.d.ts

@@ -0,0 +1,3 @@
+import type { StreamComponentSlotFragment } from './operations.generated';
+import type { StreamComponentSlotModel } from './types';
+export declare const mapToStreamComponentSlotModel: (payload: StreamComponentSlotFragment) => StreamComponentSlotModel;

package/dist/streams/slots/mapper.js

@@ -0,0 +1,18 @@
+export const mapToStreamComponentSlotModel = (payload) => {
+    return {
+        id: payload.id,
+        allowedComponents: payload.allowedComponents,
+        top: payload.top,
+        left: payload.left,
+        width: payload.width,
+        height: payload.height,
+        styles: payload.styles
+            ? {
+                paddingTop: payload.styles.paddingTop,
+                paddingRight: payload.styles.paddingRight,
+                paddingBottom: payload.styles.paddingBottom,
+                paddingLeft: payload.styles.paddingLeft
+            }
+            : null
+    };
+};

package/dist/streams/slots/operations.generated.d.ts

@@ -0,0 +1,17 @@
+import type * as SchemaTypes from '../../../gql/types';
+import type { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/core';
+export type StreamComponentSlotFragment = {
+    id: string;
+    allowedComponents: Array<SchemaTypes.StreamComponentType>;
+    top: number;
+    left: number;
+    width: number;
+    height: number;
+    styles: {
+        paddingTop: number;
+        paddingRight: number;
+        paddingBottom: number;
+        paddingLeft: number;
+    } | null;
+};
+export declare const StreamComponentSlotFragmentDoc: DocumentNode<StreamComponentSlotFragment, unknown>;

package/dist/streams/slots/operations.generated.js

@@ -0,0 +1,34 @@
+export const StreamComponentSlotFragmentDoc = {
+    kind: 'Document',
+    definitions: [
+        {
+            kind: 'FragmentDefinition',
+            name: { kind: 'Name', value: 'StreamComponentSlotFragment' },
+            typeCondition: { kind: 'NamedType', name: { kind: 'Name', value: 'StreamComponentSlot' } },
+            selectionSet: {
+                kind: 'SelectionSet',
+                selections: [
+                    { kind: 'Field', name: { kind: 'Name', value: 'id' } },
+                    { kind: 'Field', name: { kind: 'Name', value: 'allowedComponents' } },
+                    { kind: 'Field', name: { kind: 'Name', value: 'top' } },
+                    { kind: 'Field', name: { kind: 'Name', value: 'left' } },
+                    { kind: 'Field', name: { kind: 'Name', value: 'width' } },
+                    { kind: 'Field', name: { kind: 'Name', value: 'height' } },
+                    {
+                        kind: 'Field',
+                        name: { kind: 'Name', value: 'styles' },
+                        selectionSet: {
+                            kind: 'SelectionSet',
+                            selections: [
+                                { kind: 'Field', name: { kind: 'Name', value: 'paddingTop' } },
+                                { kind: 'Field', name: { kind: 'Name', value: 'paddingRight' } },
+                                { kind: 'Field', name: { kind: 'Name', value: 'paddingBottom' } },
+                                { kind: 'Field', name: { kind: 'Name', value: 'paddingLeft' } }
+                            ]
+                        }
+                    }
+                ]
+            }
+        }
+    ]
+};

package/dist/streams/slots/operations.graphql

@@ -0,0 +1,14 @@
+fragment StreamComponentSlotFragment on StreamComponentSlot {
+  id
+  allowedComponents
+  top
+  left
+  width
+  height
+  styles {
+    paddingTop
+    paddingRight
+    paddingBottom
+    paddingLeft
+  }
+}

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

@@ -0,0 +1,6 @@
+export declare const generatePaddingsCssVar: (styles: {
+    paddingTop: number;
+    paddingBottom: number;
+    paddingLeft: number;
+    paddingRight: number;
+}) => string;

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

@@ -0,0 +1,12 @@
+export const generatePaddingsCssVar = (styles) => {
+    const paddingsRem = [styles.paddingTop, styles.paddingRight, styles.paddingBottom, styles.paddingLeft];
+    return `${paddingsRem.map(generateResponsivePaddingValue).join(' ')}`;
+};
+const containerSize = 25; // rem ~ 380px, the size of container, we will use max value of padding
+const generateResponsivePaddingValue = (valueRem) => {
+    // use clamp with cqi (container query inline size) to make sure the padding is responsive
+    // min value == 0.5 * padding
+    // max value == padding
+    // preferred value is computed based on the container size
+    return `clamp(${0.5 * valueRem}rem, ${(valueRem / containerSize) * 100}cqi, ${valueRem}rem)`;
+};

package/dist/streams/slots/types.d.ts

@@ -0,0 +1,16 @@
+import { StreamComponentType } from '../components';
+export type StreamComponentSlotModel = {
+    id: string;
+    allowedComponents: StreamComponentType[];
+    top: number;
+    left: number;
+    width: number;
+    height: number;
+    styles: StreamComponentSlotStylesModel | null;
+};
+export type StreamComponentSlotStylesModel = {
+    paddingTop: number;
+    paddingRight: number;
+    paddingBottom: number;
+    paddingLeft: number;
+};

package/dist/streams/slots/types.js

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

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

@@ -0,0 +1,47 @@
+<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>
+
+{#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>
+    {/each}
+  </div>
+{/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

@@ -0,0 +1,9 @@
+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>;
+export default Cmp;

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

@@ -0,0 +1,2 @@
+export { default as StreamPageViewer } from './cmp.stream-page-viewer.svelte';
+export type { StreamPageViewerModel } from './types';

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

@@ -0,0 +1 @@
+export { default as StreamPageViewer } from './cmp.stream-page-viewer.svelte';

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

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

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

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

package/dist/streams/stream-page-viewer/operations.generated.d.ts

@@ -0,0 +1,113 @@
+import type * as SchemaTypes from '../../../gql/types';
+import type { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/core';
+export type StreamPageViewerPayloadFragment = {
+    id: string;
+    name: string | null;
+    cover: {
+        url: string;
+    } | null;
+    components: Array<{
+        slotId: string;
+        type: SchemaTypes.StreamComponentType;
+        params: {
+            shortVideo: {
+                data: {
+                    id: string;
+                    enableSocialInteractions: boolean;
+                    postHeading: {
+                        sourceImage: string | null;
+                        sourceName: string;
+                        postDisplayDate: any;
+                        postViewsCount: number;
+                    };
+                    allProducts: Array<{
+                        title: string;
+                        id: string;
+                        link: string | null;
+                        media: Array<{
+                            url: string;
+                            thumbnailUrl: string | null;
+                            type: SchemaTypes.MediaType;
+                        }>;
+                        priceAndAvailability: {
+                            currency: SchemaTypes.Currency;
+                            price: number;
+                            productSalePrices: Array<{
+                                salePrice: number;
+                                salePriceEffectiveDateFrom: any | null;
+                                salePriceEffectiveDateTo: any | null;
+                            }> | null;
+                        };
+                    }>;
+                    ad: {
+                        id: string;
+                        title: string;
+                        description: string | null;
+                        buttonText: string | null;
+                        buttonUrl: string | null;
+                        openLinkInNewWindow: boolean | null;
+                        type: SchemaTypes.AdType;
+                        media: Array<{
+                            type: SchemaTypes.MediaType;
+                            url: string;
+                            thumbnailUrl: string | null;
+                        }>;
+                    } | null;
+                    postData: {
+                        media: Array<{
+                            url: string;
+                            thumbnailUrl: string | null;
+                            type: SchemaTypes.MediaType;
+                        }>;
+                        shortVideoData: {
+                            text: string | null;
+                        } | null;
+                    };
+                } | null;
+            } | null;
+            images: {
+                mode: SchemaTypes.StreamMediaComponentMode;
+                images: Array<{
+                    id: string;
+                    url: string;
+                }>;
+            } | null;
+            product: {
+                data: {
+                    title: string;
+                    id: string;
+                    link: string | null;
+                    media: Array<{
+                        url: string;
+                        thumbnailUrl: string | null;
+                        type: SchemaTypes.MediaType;
+                    }>;
+                    priceAndAvailability: {
+                        currency: SchemaTypes.Currency;
+                        price: number;
+                        productSalePrices: Array<{
+                            salePrice: number;
+                            salePriceEffectiveDateFrom: any | null;
+                            salePriceEffectiveDateTo: any | null;
+                        }> | null;
+                    };
+                } | null;
+            } | null;
+        };
+    }>;
+    slots: Array<{
+        id: string;
+        allowedComponents: Array<SchemaTypes.StreamComponentType>;
+        top: number;
+        left: number;
+        width: number;
+        height: number;
+        styles: {
+            paddingTop: number;
+            paddingRight: number;
+            paddingBottom: number;
+            paddingLeft: number;
+        } | null;
+    }>;
+};
+export declare const StreamPageViewerPayloadFragmentDoc: DocumentNode<StreamPageViewerPayloadFragment, unknown>;