@streamscloud/embeddable 1.1.11 → 2.0.0

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

@@ -1,113 +1,10 @@
-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;
+    layout: string;
     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>;

package/dist/streams/stream-page-viewer/operations.generated.js

@@ -17,381 +17,8 @@ export const StreamPageViewerPayloadFragmentDoc = {
                     { kind: 'Field', name: { kind: 'Name', value: 'name' } },
                     {
                         kind: 'Field',
-                        name: { kind: 'Name', value: 'components' },
-                        selectionSet: { kind: 'SelectionSet', selections: [{ kind: 'FragmentSpread', name: { kind: 'Name', value: 'StreamComponentPayloadFragment' } }] }
-                    },
-                    {
-                        kind: 'Field',
-                        name: { kind: 'Name', value: 'slots' },
-                        selectionSet: { kind: 'SelectionSet', selections: [{ kind: 'FragmentSpread', name: { kind: 'Name', value: 'StreamComponentSlotFragment' } }] }
-                    }
-                ]
-            }
-        },
-        {
-            kind: 'FragmentDefinition',
-            name: { kind: 'Name', value: 'ProductCardPayloadFragment' },
-            typeCondition: { kind: 'NamedType', name: { kind: 'Name', value: 'Product' } },
-            selectionSet: {
-                kind: 'SelectionSet',
-                selections: [
-                    {
-                        kind: 'Field',
-                        name: { kind: 'Name', value: 'media' },
-                        selectionSet: {
-                            kind: 'SelectionSet',
-                            selections: [
-                                {
-                                    kind: 'Field',
-                                    name: { kind: 'Name', value: 'url' },
-                                    arguments: [
-                                        { kind: 'Argument', name: { kind: 'Name', value: 'scale' }, value: { kind: 'Variable', name: { kind: 'Name', value: 'image_scale' } } }
-                                    ]
-                                },
-                                {
-                                    kind: 'Field',
-                                    name: { kind: 'Name', value: 'thumbnailUrl' },
-                                    arguments: [
-                                        { kind: 'Argument', name: { kind: 'Name', value: 'scale' }, value: { kind: 'Variable', name: { kind: 'Name', value: 'image_scale' } } }
-                                    ]
-                                },
-                                { kind: 'Field', name: { kind: 'Name', value: 'type' } }
-                            ]
-                        }
-                    },
-                    { kind: 'Field', name: { kind: 'Name', value: 'title' } },
-                    { kind: 'Field', name: { kind: 'Name', value: 'id' } },
-                    { kind: 'Field', name: { kind: 'Name', value: 'link' } },
-                    {
-                        kind: 'Field',
-                        name: { kind: 'Name', value: 'priceAndAvailability' },
-                        selectionSet: {
-                            kind: 'SelectionSet',
-                            selections: [
-                                { kind: 'Field', name: { kind: 'Name', value: 'currency' } },
-                                { kind: 'Field', name: { kind: 'Name', value: 'price' } },
-                                {
-                                    kind: 'Field',
-                                    name: { kind: 'Name', value: 'productSalePrices' },
-                                    selectionSet: {
-                                        kind: 'SelectionSet',
-                                        selections: [
-                                            { kind: 'Field', name: { kind: 'Name', value: 'salePrice' } },
-                                            { kind: 'Field', name: { kind: 'Name', value: 'salePriceEffectiveDateFrom' } },
-                                            { kind: 'Field', name: { kind: 'Name', value: 'salePriceEffectiveDateTo' } }
-                                        ]
-                                    }
-                                }
-                            ]
-                        }
-                    }
-                ]
-            }
-        },
-        {
-            kind: 'FragmentDefinition',
-            name: { kind: 'Name', value: 'AdViewPayloadFragment' },
-            typeCondition: { kind: 'NamedType', name: { kind: 'Name', value: 'Ad' } },
-            selectionSet: {
-                kind: 'SelectionSet',
-                selections: [
-                    { kind: 'Field', name: { kind: 'Name', value: 'id' } },
-                    { kind: 'Field', name: { kind: 'Name', value: 'title' } },
-                    { kind: 'Field', name: { kind: 'Name', value: 'description' } },
-                    { kind: 'Field', name: { kind: 'Name', value: 'buttonText' } },
-                    { kind: 'Field', name: { kind: 'Name', value: 'buttonUrl' } },
-                    { kind: 'Field', name: { kind: 'Name', value: 'openLinkInNewWindow' } },
-                    { kind: 'Field', name: { kind: 'Name', value: 'type' } },
-                    {
-                        kind: 'Field',
-                        name: { kind: 'Name', value: 'media' },
-                        selectionSet: {
-                            kind: 'SelectionSet',
-                            selections: [
-                                { kind: 'Field', name: { kind: 'Name', value: 'type' } },
-                                {
-                                    kind: 'Field',
-                                    name: { kind: 'Name', value: 'url' },
-                                    arguments: [
-                                        { kind: 'Argument', name: { kind: 'Name', value: 'scale' }, value: { kind: 'Variable', name: { kind: 'Name', value: 'image_scale' } } }
-                                    ]
-                                },
-                                {
-                                    kind: 'Field',
-                                    name: { kind: 'Name', value: 'thumbnailUrl' },
-                                    arguments: [
-                                        { kind: 'Argument', name: { kind: 'Name', value: 'scale' }, value: { kind: 'Variable', name: { kind: 'Name', value: 'image_scale' } } }
-                                    ]
-                                }
-                            ]
-                        }
-                    }
-                ]
-            }
-        },
-        {
-            kind: 'FragmentDefinition',
-            name: { kind: 'Name', value: 'ShortVideoViewerPayloadFragment' },
-            typeCondition: { kind: 'NamedType', name: { kind: 'Name', value: 'Post' } },
-            selectionSet: {
-                kind: 'SelectionSet',
-                selections: [
-                    { kind: 'Field', name: { kind: 'Name', value: 'id' } },
-                    { kind: 'Field', name: { kind: 'Name', value: 'enableSocialInteractions' } },
-                    {
-                        kind: 'Field',
-                        name: { kind: 'Name', value: 'postHeading' },
-                        selectionSet: {
-                            kind: 'SelectionSet',
-                            selections: [
-                                { kind: 'Field', name: { kind: 'Name', value: 'sourceImage' } },
-                                { kind: 'Field', name: { kind: 'Name', value: 'sourceName' } },
-                                { kind: 'Field', name: { kind: 'Name', value: 'postDisplayDate' } },
-                                { kind: 'Field', name: { kind: 'Name', value: 'postViewsCount' } }
-                            ]
-                        }
-                    },
-                    {
-                        kind: 'Field',
-                        name: { kind: 'Name', value: 'allProducts' },
-                        selectionSet: { kind: 'SelectionSet', selections: [{ kind: 'FragmentSpread', name: { kind: 'Name', value: 'ProductCardPayloadFragment' } }] }
-                    },
-                    {
-                        kind: 'Field',
-                        name: { kind: 'Name', value: 'ad' },
-                        selectionSet: { kind: 'SelectionSet', selections: [{ kind: 'FragmentSpread', name: { kind: 'Name', value: 'AdViewPayloadFragment' } }] }
-                    },
-                    {
-                        kind: 'Field',
-                        name: { kind: 'Name', value: 'postData' },
-                        selectionSet: {
-                            kind: 'SelectionSet',
-                            selections: [
-                                {
-                                    kind: 'Field',
-                                    name: { kind: 'Name', value: 'media' },
-                                    selectionSet: {
-                                        kind: 'SelectionSet',
-                                        selections: [
-                                            {
-                                                kind: 'Field',
-                                                name: { kind: 'Name', value: 'url' },
-                                                arguments: [
-                                                    {
-                                                        kind: 'Argument',
-                                                        name: { kind: 'Name', value: 'scale' },
-                                                        value: { kind: 'Variable', name: { kind: 'Name', value: 'image_scale' } }
-                                                    }
-                                                ]
-                                            },
-                                            {
-                                                kind: 'Field',
-                                                name: { kind: 'Name', value: 'thumbnailUrl' },
-                                                arguments: [
-                                                    {
-                                                        kind: 'Argument',
-                                                        name: { kind: 'Name', value: 'scale' },
-                                                        value: { kind: 'Variable', name: { kind: 'Name', value: 'image_scale' } }
-                                                    }
-                                                ]
-                                            },
-                                            { kind: 'Field', name: { kind: 'Name', value: 'type' } }
-                                        ]
-                                    }
-                                },
-                                {
-                                    kind: 'Field',
-                                    name: { kind: 'Name', value: 'shortVideoData' },
-                                    selectionSet: { kind: 'SelectionSet', selections: [{ kind: 'Field', name: { kind: 'Name', value: 'text' } }] }
-                                }
-                            ]
-                        }
-                    }
-                ]
-            }
-        },
-        {
-            kind: 'FragmentDefinition',
-            name: { kind: 'Name', value: 'ShortVideoStreamComponentDataFragment' },
-            typeCondition: { kind: 'NamedType', name: { kind: 'Name', value: 'Post' } },
-            selectionSet: { kind: 'SelectionSet', selections: [{ kind: 'FragmentSpread', name: { kind: 'Name', value: 'ShortVideoViewerPayloadFragment' } }] }
-        },
-        {
-            kind: 'FragmentDefinition',
-            name: { kind: 'Name', value: 'ShortVideoStreamComponentParamsFragment' },
-            typeCondition: { kind: 'NamedType', name: { kind: 'Name', value: 'ShortVideoStreamComponentParams' } },
-            selectionSet: {
-                kind: 'SelectionSet',
-                selections: [
-                    {
-                        kind: 'Field',
-                        name: { kind: 'Name', value: 'data' },
-                        selectionSet: {
-                            kind: 'SelectionSet',
-                            selections: [{ kind: 'FragmentSpread', name: { kind: 'Name', value: 'ShortVideoStreamComponentDataFragment' } }]
-                        }
-                    }
-                ]
-            }
-        },
-        {
-            kind: 'FragmentDefinition',
-            name: { kind: 'Name', value: 'ImagesStreamComponentParamsFragment' },
-            typeCondition: { kind: 'NamedType', name: { kind: 'Name', value: 'ImagesStreamComponentParams' } },
-            selectionSet: {
-                kind: 'SelectionSet',
-                selections: [
-                    {
-                        kind: 'Field',
-                        name: { kind: 'Name', value: 'images' },
-                        selectionSet: {
-                            kind: 'SelectionSet',
-                            selections: [
-                                { kind: 'Field', name: { kind: 'Name', value: 'id' } },
-                                { kind: 'Field', name: { kind: 'Name', value: 'url' } }
-                            ]
-                        }
-                    },
-                    { kind: 'Field', name: { kind: 'Name', value: 'mode' } }
-                ]
-            }
-        },
-        {
-            kind: 'FragmentDefinition',
-            name: { kind: 'Name', value: 'ProductStreamComponentDataFragment' },
-            typeCondition: { kind: 'NamedType', name: { kind: 'Name', value: 'Product' } },
-            selectionSet: {
-                kind: 'SelectionSet',
-                selections: [
-                    {
-                        kind: 'Field',
-                        name: { kind: 'Name', value: 'media' },
-                        selectionSet: {
-                            kind: 'SelectionSet',
-                            selections: [
-                                { kind: 'Field', name: { kind: 'Name', value: 'url' } },
-                                { kind: 'Field', name: { kind: 'Name', value: 'thumbnailUrl' } },
-                                { kind: 'Field', name: { kind: 'Name', value: 'type' } }
-                            ]
-                        }
-                    },
-                    { kind: 'Field', name: { kind: 'Name', value: 'title' } },
-                    { kind: 'Field', name: { kind: 'Name', value: 'id' } },
-                    { kind: 'Field', name: { kind: 'Name', value: 'link' } },
-                    {
-                        kind: 'Field',
-                        name: { kind: 'Name', value: 'priceAndAvailability' },
-                        selectionSet: {
-                            kind: 'SelectionSet',
-                            selections: [
-                                { kind: 'Field', name: { kind: 'Name', value: 'currency' } },
-                                { kind: 'Field', name: { kind: 'Name', value: 'price' } },
-                                {
-                                    kind: 'Field',
-                                    name: { kind: 'Name', value: 'productSalePrices' },
-                                    selectionSet: {
-                                        kind: 'SelectionSet',
-                                        selections: [
-                                            { kind: 'Field', name: { kind: 'Name', value: 'salePrice' } },
-                                            { kind: 'Field', name: { kind: 'Name', value: 'salePriceEffectiveDateFrom' } },
-                                            { kind: 'Field', name: { kind: 'Name', value: 'salePriceEffectiveDateTo' } }
-                                        ]
-                                    }
-                                }
-                            ]
-                        }
-                    }
-                ]
-            }
-        },
-        {
-            kind: 'FragmentDefinition',
-            name: { kind: 'Name', value: 'ProductStreamComponentParamsFragment' },
-            typeCondition: { kind: 'NamedType', name: { kind: 'Name', value: 'ProductStreamComponentParams' } },
-            selectionSet: {
-                kind: 'SelectionSet',
-                selections: [
-                    {
-                        kind: 'Field',
-                        name: { kind: 'Name', value: 'data' },
-                        selectionSet: {
-                            kind: 'SelectionSet',
-                            selections: [{ kind: 'FragmentSpread', name: { kind: 'Name', value: 'ProductStreamComponentDataFragment' } }]
-                        }
-                    }
-                ]
-            }
-        },
-        {
-            kind: 'FragmentDefinition',
-            name: { kind: 'Name', value: 'StreamComponentPayloadFragment' },
-            typeCondition: { kind: 'NamedType', name: { kind: 'Name', value: 'StreamComponent' } },
-            selectionSet: {
-                kind: 'SelectionSet',
-                selections: [
-                    { kind: 'Field', name: { kind: 'Name', value: 'slotId' } },
-                    { kind: 'Field', name: { kind: 'Name', value: 'type' } },
-                    {
-                        kind: 'Field',
-                        name: { kind: 'Name', value: 'params' },
-                        selectionSet: {
-                            kind: 'SelectionSet',
-                            selections: [
-                                {
-                                    kind: 'Field',
-                                    name: { kind: 'Name', value: 'shortVideo' },
-                                    selectionSet: {
-                                        kind: 'SelectionSet',
-                                        selections: [{ kind: 'FragmentSpread', name: { kind: 'Name', value: 'ShortVideoStreamComponentParamsFragment' } }]
-                                    }
-                                },
-                                {
-                                    kind: 'Field',
-                                    name: { kind: 'Name', value: 'images' },
-                                    selectionSet: {
-                                        kind: 'SelectionSet',
-                                        selections: [{ kind: 'FragmentSpread', name: { kind: 'Name', value: 'ImagesStreamComponentParamsFragment' } }]
-                                    }
-                                },
-                                {
-                                    kind: 'Field',
-                                    name: { kind: 'Name', value: 'product' },
-                                    selectionSet: {
-                                        kind: 'SelectionSet',
-                                        selections: [{ kind: 'FragmentSpread', name: { kind: 'Name', value: 'ProductStreamComponentParamsFragment' } }]
-                                    }
-                                }
-                            ]
-                        }
-                    }
-                ]
-            }
-        },
-        {
-            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' } }
-                            ]
-                        }
+                        name: { kind: 'Name', value: 'layout' },
+                        arguments: [{ kind: 'Argument', name: { kind: 'Name', value: 'scale' }, value: { kind: 'Variable', name: { kind: 'Name', value: 'image_scale' } } }]
                     }
                 ]
             }

package/dist/streams/stream-page-viewer/operations.graphql

@@ -4,10 +4,5 @@ fragment StreamPageViewerPayloadFragment on StreamPage {
     url
   }
   name
-  components {
-    ...StreamComponentPayloadFragment
-  }
-  slots {
-    ...StreamComponentSlotFragment
-  }
+  layout(scale: $image_scale)
 }

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

@@ -1,10 +1,13 @@
+import type { IStreamElementLocalization } from '../layout/element-views';
 import type { ITimeAgoLocalization } from '../../ui/time-ago';
 export interface IStreamPageViewerLocalization {
     viewsCount?: (count: number) => string;
     timeAgoLocalization?: ITimeAgoLocalization;
+    elementsLocalization?: IStreamElementLocalization;
 }
 export declare class StreamPageViewerLocalization {
     viewsCount: (count: number) => string;
     timeAgoLocalization: ITimeAgoLocalization | undefined;
+    elementsLocalization: IStreamElementLocalization | undefined;
     constructor(init?: IStreamPageViewerLocalization);
 }

package/dist/streams/stream-page-viewer/stream-page-viewer-localization.svelte.js

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

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

@@ -1,18 +1,18 @@
-import type { ShortVideoStreamComponentData, StreamComponentModel } from '../components';
-import type { StreamComponentSlotModel } from '../slots';
+import type { StreamLayout } from '../layout';
+import type { StreamLayoutShortVideoModel } from '../layout/models';
 export type StreamPageViewerModel = GeneralStreamPageViewerModel | ShortVideoStreamPageViewerModel;
 export type ShortVideoStreamPageViewerModel = {
     type: 'short-video';
     id: string;
     cover: string | null;
     name: string | null;
-    shortVideo: ShortVideoStreamComponentData;
+    shortVideo: StreamLayoutShortVideoModel;
+    layout: StreamLayout;
 };
 export type GeneralStreamPageViewerModel = {
     type: 'general';
     id: string;
     cover: string | null;
     name: string | null;
-    components: StreamComponentModel[];
-    slots: StreamComponentSlotModel[];
+    layout: StreamLayout;
 };

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

@@ -8,10 +8,11 @@
     });
 };
 import { toastrWarning } from '../../core/toastr';
-import { PlayerSlider } from '../../ui/player';
-import { ShortVideosViewer } from '../../short-videos/short-video-viewer';
+import { ShortVideoViewer } from '../../short-videos/short-video-viewer';
+import { mapToShortVideoViewerModel } from '../layout/models';
 import { StreamPageViewer } from '../stream-page-viewer';
 import { Loading } from '../../ui/loading';
+import { PlayerSlider } from '../../ui/player';
 import { SpotlightLayout } from '../../ui/spotlight-layout';
 import { default as Controls } from './controls.svelte';
 import { mapStreamPlayerModel } from './mapper';
@@ -79,7 +80,10 @@ const handleDimensionsChanged = (dimensions) => {
               {#if item.type === 'general'}
                 <StreamPageViewer page={item} />
               {:else if item.type === 'short-video'}
-                <ShortVideosViewer model={item.shortVideo} autoplay="on-appearance" showAttachments={uiManager.showShortVideoOverlay} />
+                <ShortVideoViewer
+                  model={mapToShortVideoViewerModel(item.shortVideo)}
+                  autoplay="on-appearance"
+                  showAttachments={uiManager.showShortVideoOverlay} />
               {/if}
             {/snippet}
           </PlayerSlider>