@streamscloud/embeddable 1.1.2

package/dist/short-videos/short-video-viewer/operations.generated.js

@@ -0,0 +1,187 @@
+export const ShortVideoViewerPayloadFragmentDoc = {
+    kind: 'Document',
+    definitions: [
+        {
+            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: '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' } } }
+                                    ]
+                                }
+                            ]
+                        }
+                    }
+                ]
+            }
+        }
+    ]
+};

package/dist/short-videos/short-video-viewer/operations.graphql

@@ -0,0 +1,26 @@
+fragment ShortVideoViewerPayloadFragment on Post {
+  id
+  enableSocialInteractions
+  postHeading {
+    sourceImage
+    sourceName
+    postDisplayDate
+    postViewsCount
+  }
+  allProducts {
+    ...ProductCardPayloadFragment
+  }
+  ad {
+    ...AdViewPayloadFragment
+  }
+  postData {
+    media {
+      url(scale: $image_scale)
+      thumbnailUrl(scale: $image_scale)
+      type
+    }
+    shortVideoData {
+      text
+    }
+  }
+}

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

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

package/dist/short-videos/short-video-viewer/short-video-details-localization.svelte.js

@@ -0,0 +1,21 @@
+export class ShortVideoDetailsLocalization {
+    productsSection = $state('Products');
+    offersSection = $state('Offers');
+    viewsCount = $state((count) => (count === 1 ? '1 view' : `${count} views`));
+    timeAgoLocalization = $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;
+    }
+}

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

@@ -0,0 +1,10 @@
+import type { ITimeAgoLocalization } from '../../ui/time-ago';
+export interface IShortVideoViewerLocalization {
+    viewsCount?: (count: number) => string;
+    timeAgoLocalization?: ITimeAgoLocalization;
+}
+export declare class ShortVideoViewerLocalization {
+    viewsCount: (count: number) => string;
+    timeAgoLocalization: ITimeAgoLocalization | undefined;
+    constructor(init?: IShortVideoViewerLocalization);
+}

package/dist/short-videos/short-video-viewer/short-video-viewer-localization.svelte.js

@@ -0,0 +1,13 @@
+export class ShortVideoViewerLocalization {
+    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/short-videos/short-video-viewer/types.d.ts

@@ -0,0 +1,17 @@
+import type { AdViewModel } from '../../advertising/ad-view';
+import type { MediaItemModel } from '../../core/media';
+import type { ProductCardModel } from '../../products/product-card';
+export type ShortVideoViewerModel = {
+    id: string;
+    media: MediaItemModel;
+    text?: string | null;
+    heading: ShortVideoViewerHeadingModel;
+    products: ProductCardModel[];
+    ad: AdViewModel | null;
+};
+export type ShortVideoViewerHeadingModel = {
+    image: string | null;
+    name: string;
+    displayDate: string;
+    viewsCount: number;
+};

package/dist/short-videos/short-video-viewer/types.js

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

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

@@ -0,0 +1,12 @@
+export declare class ShortVideoViewerUiManager {
+    readonly globalCssVariables: string;
+    readonly showActionsInsideFrame: boolean;
+    readonly showAttachments: boolean;
+    private readonly buttonSize;
+    private actionsPanelWidth;
+    private availableSideSpace;
+    private canShowAttachments;
+    updateActionsPanelWidth: (value: number) => void;
+    updateAvailableSideSpace: (value: number) => void;
+    updateCanShowAttachments: (value: boolean) => void;
+}

package/dist/short-videos/short-video-viewer/ui-manager.svelte.js

@@ -0,0 +1,26 @@
+export class ShortVideoViewerUiManager {
+    globalCssVariables = $derived.by(() => {
+        const values = [`--_short-video-viewer--button--size: ${this.buttonSize}px`];
+        return values.join(';');
+    });
+    showActionsInsideFrame = $derived.by(() => {
+        return this.actionsPanelWidth + 40 > this.availableSideSpace;
+    });
+    showAttachments = $derived.by(() => {
+        return this.canShowAttachments;
+    });
+    buttonSize = 40;
+    actionsPanelWidth = $state(0);
+    availableSideSpace = $state(0);
+    // is provided from the calling side
+    canShowAttachments = $state(true);
+    updateActionsPanelWidth = (value) => {
+        this.actionsPanelWidth = value;
+    };
+    updateAvailableSideSpace = (value) => {
+        this.availableSideSpace = value;
+    };
+    updateCanShowAttachments = (value) => {
+        this.canShowAttachments = value;
+    };
+}

package/dist/short-videos/short-videos-player/action-button.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">let { children, on } = $props();
+export {};
+</script>
+
+<button type="button" class="action-button" onclick={() => on.click()}>
+  {@render children()}
+</button>
+
+<style>@keyframes fadeIn {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.4;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+.action-button {
+  --_short-video-player--action-button--size: var(--short-video-player--action-button--size);
+  --_action-button--background: var(--action-button-background, #1c1c1c);
+  width: var(--_short-video-player--action-button--size);
+  min-width: var(--_short-video-player--action-button--size);
+  max-width: var(--_short-video-player--action-button--size);
+  height: var(--_short-video-player--action-button--size);
+  min-height: var(--_short-video-player--action-button--size);
+  max-height: var(--_short-video-player--action-button--size);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  line-height: 0;
+  background: var(--_action-button--background);
+  border-radius: 50%;
+  --icon--size: 1.25rem;
+  z-index: 1;
+  color: #ffffff;
+}</style>

package/dist/short-videos/short-videos-player/action-button.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { Snippet } from 'svelte';
+type Props = {
+    on: {
+        click: () => void;
+    };
+    children: Snippet;
+};
+declare const ActionButton: import("svelte").Component<Props, {}, "">;
+type ActionButton = ReturnType<typeof ActionButton>;
+export default ActionButton;

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

@@ -0,0 +1,91 @@
+<script lang="ts">var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+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();
+const localization = $derived(new ShortVideosPlayerLocalization(localizationInit));
+const buffer = $derived(new PlayerBuffer(shortVidesProvider));
+const uiManager = new ShortVideoPlayerUiManager();
+onMount(() => __awaiter(void 0, void 0, void 0, function* () {
+    uiManager.detailsCollapsed = window && window.innerWidth < window.innerHeight;
+}));
+onDestroy(() => {
+    // end tracking the short video
+});
+const handleDimensionsChanged = (dimensions) => {
+    uiManager.updateDimensions({
+        mainViewColumnWidth: dimensions.mainSceneWidth,
+        viewTotalWidth: dimensions.totalWidth
+    });
+};
+</script>
+
+<div class="short-videos-player-container">
+  <div class="short-videos-player" style={uiManager.globalCssVariables}>
+    {#if buffer}
+      <SpotlightLayout ratio={9 / 16} on={{ dimensionsChanged: handleDimensionsChanged }}>
+        <div class="short-videos-player__content">
+          <PlayerSlider buffer={buffer}>
+            {#snippet children({ item })}
+              <ShortVideosViewer model={item} autoplay="on-appearance" showAttachments={uiManager.showShortVideoOverlay} />
+            {/snippet}
+          </PlayerSlider>
+        </div>
+      </SpotlightLayout>
+      <Controls buffer={buffer} uiManager={uiManager} localization={localization} on={{ closePlayer: () => on?.closePlayer?.() }} />
+    {/if}
+  </div>
+</div>
+
+<style>@keyframes fadeIn {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.4;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+.short-videos-player-container {
+  width: 100%;
+  min-width: 100%;
+  max-width: 100%;
+  height: 100%;
+  min-height: 100%;
+  max-height: 100%;
+  container-type: inline-size;
+  display: flex;
+  position: relative;
+  background: #000000;
+}
+
+.short-videos-player {
+  display: flex;
+  flex: 1;
+  padding: 0.625rem 0;
+  /* Set 'container-type: inline-size;' to reference container*/
+}
+@container (width < 576px) {
+  .short-videos-player {
+    padding: 0;
+  }
+}
+.short-videos-player__content {
+  width: 100%;
+  height: 100%;
+  --short-video-viewer--actions-panel--bottom: 5rem;
+}</style>

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

@@ -0,0 +1,13 @@
+import { type PlayerItemsProvider } from '../../ui/player';
+import { type ShortVideoViewerModel } from '../short-video-viewer';
+import { type IShortVideosPlayerLocalization } from './short-videos-player-localization.svelte';
+type Props = {
+    shortVidesProvider: PlayerItemsProvider<ShortVideoViewerModel>;
+    localization?: IShortVideosPlayerLocalization;
+    on?: {
+        closePlayer?: () => void;
+    };
+};
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;