@streamscloud/embeddable 3.4.2 → 5.0.0

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

@@ -1,7 +1,7 @@
 import { MediaType } from '../../core/enums';
 import { getMediaItemImageUrl } from '../../core/media';
 import { shouldUseSalePrice } from '../../products/price-helper';
-export const mapShortVideoViewerModel = (payload) => {
+export const mapToShortVideoViewerModel = (payload) => {
     const mediaBlob = payload.postData.media[0];
     return {
         id: payload.id,
@@ -13,25 +13,20 @@ export const mapShortVideoViewerModel = (payload) => {
                 thumbnailUrl: mediaBlob.thumbnailUrl
             },
         text: payload.postData.shortVideoData.text,
-        heading: {
-            image: payload.postHeading.sourceImage,
-            name: payload.postHeading.sourceName,
-            displayDate: payload.postHeading.postDisplayDate,
-            viewsCount: payload.postHeading.postViewsCount
-        },
-        ad: payload.ad ? mapToShortVideoViewerAdModel(payload.ad) : null,
-        products: payload.allProducts.map(mapToShortVideoViewerProductModel)
+        enableSocialInteractions: payload.enableSocialInteractions,
+        heading: null,
+        ad: payload.ad ? mapToShortVideoAdCardModel(payload.ad) : null,
+        products: payload.allProducts.map((x) => mapToShortVideoProductCard(x))
         // 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' }
-        ])*/
+        // .flatMap(x =>
+        //   Array.from({ length: 20 }, (_, i) => ({
+        //     ...x,
+        //     id: x.id + String(i + 1)
+        //   }))
+        // )
     };
 };
-const mapToShortVideoViewerAdModel = (payload) => {
+const mapToShortVideoAdCardModel = (payload) => {
     return {
         id: payload.id,
         type: payload.type,
@@ -39,20 +34,28 @@ const mapToShortVideoViewerAdModel = (payload) => {
         title: payload.title,
         description: payload.description,
         price: payload.price,
+        priceInfoLabel: payload.priceInfo,
         currency: payload.currency,
         ctaButton: payload.ctaButton
     };
 };
-const mapToShortVideoViewerProductModel = (payload) => {
-    const effectiveSalePrice = payload.priceAndAvailability.productSalePrices?.find((x) => shouldUseSalePrice(payload.priceAndAvailability.price, x.salePrice, x.salePriceEffectiveDateFrom, x.salePriceEffectiveDateTo));
+const mapToShortVideoProductCard = (payload, referenceDate) => {
+    const effectiveSalePrice = payload.priceAndAvailability.productSalePrices?.find((x) => shouldUseSalePrice({
+        price: payload.priceAndAvailability.price,
+        salePrice: x.salePrice,
+        effectiveDateFrom: x.salePriceEffectiveDateFrom,
+        effectiveDateTo: x.salePriceEffectiveDateTo,
+        referenceDate
+    }));
     return {
         id: payload.id,
         title: payload.title,
-        image: getMediaItemImageUrl(payload.media[0]),
+        shortDescription: payload.shortDescription,
         link: payload.link,
+        brandName: payload.brand?.name || null,
+        image: getMediaItemImageUrl(payload.media[0]),
         currency: payload.priceAndAvailability.currency,
         price: payload.priceAndAvailability.price,
-        salePrice: effectiveSalePrice?.salePrice ?? null,
-        shortDescription: payload.shortDescription ?? null
+        salePrice: effectiveSalePrice?.salePrice ?? null
     };
 };

package/dist/short-videos/short-video-viewer/operations.generated.d.ts

@@ -3,22 +3,19 @@ import type { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-
 export type ShortVideoViewerPayloadFragment = {
     id: string;
     enableSocialInteractions: boolean;
-    postHeading: {
-        sourceImage: string | null;
-        sourceName: string;
-        postDisplayDate: any;
-        postViewsCount: number;
-    };
     allProducts: Array<{
-        title: string;
         id: string;
-        link: string | null;
+        title: string;
         shortDescription: string | null;
+        link: string | null;
         media: Array<{
             url: string;
             thumbnailUrl: string | null;
             type: SchemaTypes.MediaType;
         }>;
+        brand: {
+            name: string;
+        } | null;
         priceAndAvailability: {
             currency: SchemaTypes.Currency;
             price: number;
@@ -34,6 +31,7 @@ export type ShortVideoViewerPayloadFragment = {
         title: string;
         description: string | null;
         price: number | null;
+        priceInfo: string | null;
         currency: SchemaTypes.Currency | null;
         type: SchemaTypes.AdType;
         ctaButton: {

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

@@ -10,25 +10,16 @@ export const ShortVideoViewerPayloadFragmentDoc = {
                 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: 'Field', name: { kind: 'Name', value: 'id' } },
+                                { kind: 'Field', name: { kind: 'Name', value: 'title' } },
+                                { kind: 'Field', name: { kind: 'Name', value: 'shortDescription' } },
+                                { kind: 'Field', name: { kind: 'Name', value: 'link' } },
                                 {
                                     kind: 'Field',
                                     name: { kind: 'Name', value: 'media' },
@@ -41,10 +32,11 @@ export const ShortVideoViewerPayloadFragmentDoc = {
                                         ]
                                     }
                                 },
-                                { 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: 'shortDescription' } },
+                                {
+                                    kind: 'Field',
+                                    name: { kind: 'Name', value: 'brand' },
+                                    selectionSet: { kind: 'SelectionSet', selections: [{ kind: 'Field', name: { kind: 'Name', value: 'name' } }] }
+                                },
                                 {
                                     kind: 'Field',
                                     name: { kind: 'Name', value: 'priceAndAvailability' },
@@ -81,6 +73,7 @@ export const ShortVideoViewerPayloadFragmentDoc = {
                                 { kind: 'Field', name: { kind: 'Name', value: 'title' } },
                                 { kind: 'Field', name: { kind: 'Name', value: 'description' } },
                                 { kind: 'Field', name: { kind: 'Name', value: 'price' } },
+                                { kind: 'Field', name: { kind: 'Name', value: 'priceInfo' } },
                                 { kind: 'Field', name: { kind: 'Name', value: 'currency' } },
                                 {
                                     kind: 'Field',

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

@@ -1,22 +1,19 @@
 fragment ShortVideoViewerPayloadFragment on Post {
   id
   enableSocialInteractions
-  postHeading {
-    sourceImage
-    sourceName
-    postDisplayDate
-    postViewsCount
-  }
   allProducts {
+    id
+    title
+    shortDescription
+    link
     media {
       url
       thumbnailUrl
       type
     }
-    title
-    id
-    link
-    shortDescription
+    brand {
+      name
+    }
     priceAndAvailability {
       currency
       price
@@ -32,6 +29,7 @@ fragment ShortVideoViewerPayloadFragment on Post {
     title
     description
     price
+    priceInfo
     currency
     ctaButton {
       background

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

@@ -1,13 +1,9 @@
 import { type Locale } from '../../core/locale';
-import type { IShortVideoProductLocalization } from './short-video-product-localization';
+import type { IProductCardLocalization } from '../../products/product-card/product-card-localization';
 export interface IShortVideoAttachmentsLocalization {
-    productsSection?: string;
-    offersSection?: string;
-    productLocalization?: IShortVideoProductLocalization;
+    productLocalization?: IProductCardLocalization | Locale;
 }
 export declare class ShortVideoAttachmentsLocalization {
-    productsSection: string;
-    offersSection: string;
-    productLocalization: IShortVideoProductLocalization | Locale;
+    productLocalization: IProductCardLocalization | Locale;
     constructor(init: IShortVideoAttachmentsLocalization | Locale);
 }

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

@@ -1,21 +1,7 @@
 import { isLocale } from '../../core/locale';
 export class ShortVideoAttachmentsLocalization {
-    productsSection;
-    offersSection;
     productLocalization;
     constructor(init) {
-        this.productsSection = isLocale(init) ? loc.productsSection[init] : init.productsSection || loc.productsSection.en;
-        this.offersSection = isLocale(init) ? loc.offersSection[init] : init.offersSection || loc.offersSection.en;
         this.productLocalization = isLocale(init) ? init : init.productLocalization || 'en';
     }
 }
-const loc = {
-    productsSection: {
-        en: 'Products',
-        no: 'Produkter'
-    },
-    offersSection: {
-        en: 'Offers',
-        no: 'Tilbud'
-    }
-};

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

@@ -1,14 +1,14 @@
 import { type Locale } from '../../core/locale';
+import type { IProductCardLocalization } from '../../products/product-card/product-card-localization';
 import type { ITimeAgoLocalization } from '../../ui/time-ago';
-import type { IShortVideoProductLocalization } from './short-video-product-localization';
 export interface IShortVideoViewerLocalization {
     viewsCount?: (count: number) => string;
     timeAgoLocalization?: ITimeAgoLocalization | Locale;
-    productLocalization?: IShortVideoProductLocalization | Locale;
+    productLocalization?: IProductCardLocalization | Locale;
 }
 export declare class ShortVideoViewerLocalization {
     viewsCount: (count: number) => string;
     timeAgoLocalization: ITimeAgoLocalization | Locale;
-    productLocalization: IShortVideoProductLocalization | Locale;
+    productLocalization: IProductCardLocalization | Locale;
     constructor(init: IShortVideoViewerLocalization | Locale);
 }

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

@@ -11,8 +11,9 @@ export type ShortVideoViewerModel = {
     };
     text?: string | null;
     heading: ShortVideoViewerHeadingModel | null;
-    products: ShortVideoViewerProductModel[];
-    ad: ShortVideoViewerAdModel | null;
+    enableSocialInteractions: boolean;
+    products: ShortVideoProductCardModel[];
+    ad: ShortVideoAdCardModel | null;
 };
 export type ShortVideoViewerHeadingModel = {
     image: string | null;
@@ -20,13 +21,32 @@ export type ShortVideoViewerHeadingModel = {
     displayDate: string;
     viewsCount: number;
 };
-export type ShortVideoViewerAdModel = {
+export type ShortVideoSocialInteractionsHanlder = {
+    isLiked: (shortVideoId: string) => Promise<{
+        readonly isLiked: boolean;
+    }>;
+    onToggleLike: (shortVideoId: string) => void;
+    onShare: (shortVideoId: string) => void;
+};
+export type ShortVideoProductCardModel = {
+    id: string;
+    title: string;
+    shortDescription?: string | null;
+    link: string | null;
+    image: string | null;
+    brandName: string | null;
+    price: number;
+    currency: Currency;
+    salePrice: number | null;
+};
+export type ShortVideoAdCardModel = {
     id: string;
     type: AdType;
     image: string | null;
     title: string;
     description: string | null;
     price: number | null;
+    priceInfoLabel: string | null;
     currency: Currency | null;
     ctaButton: {
         background: string;
@@ -36,13 +56,3 @@ export type ShortVideoViewerAdModel = {
         border: string;
     } | null;
 };
-export type ShortVideoViewerProductModel = {
-    id: string;
-    title: string;
-    image: string | null;
-    link: string | null;
-    price: number;
-    currency: Currency;
-    salePrice: number | null;
-    shortDescription?: string | null;
-};

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

@@ -2,11 +2,16 @@ export declare class ShortVideoViewerUiManager {
     readonly globalCssVariables: string;
     readonly showActionsInsideFrame: boolean;
     readonly showAttachments: boolean;
+    readonly showControls: boolean;
     private readonly buttonSize;
     private actionsPanelWidth;
     private availableSideSpace;
+    private canShowControls;
     private canShowAttachments;
+    private enableAttachments;
     updateActionsPanelWidth: (value: number) => void;
     updateAvailableSideSpace: (value: number) => void;
     updateCanShowAttachments: (value: boolean) => void;
+    updateCanShowControls: (value: boolean) => void;
+    toggleEnableAttachments: () => void;
 }

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

@@ -7,13 +7,20 @@ export class ShortVideoViewerUiManager {
         return this.actionsPanelWidth + 40 > this.availableSideSpace;
     });
     showAttachments = $derived.by(() => {
-        return this.canShowAttachments;
+        return this.canShowAttachments && this.enableAttachments;
+    });
+    showControls = $derived.by(() => {
+        return this.canShowControls;
     });
     buttonSize = 40;
     actionsPanelWidth = $state(0);
     availableSideSpace = $state(0);
     // is provided from the calling side
-    canShowAttachments = $state(true);
+    canShowControls = $state(false);
+    // is provided from the calling side
+    canShowAttachments = $state(false);
+    // managed internally by component
+    enableAttachments = $state(true);
     updateActionsPanelWidth = (value) => {
         this.actionsPanelWidth = value;
     };
@@ -23,4 +30,10 @@ export class ShortVideoViewerUiManager {
     updateCanShowAttachments = (value) => {
         this.canShowAttachments = value;
     };
+    updateCanShowControls = (value) => {
+        this.canShowControls = value;
+    };
+    toggleEnableAttachments = () => {
+        this.enableAttachments = !this.enableAttachments;
+    };
 }

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

@@ -1,168 +1,30 @@
-<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());
+<script lang="ts">import {} from '../../core/locale';
+import { createShadowRoot } from '../../ui/shadow-dom';
+import {} from './short-videos-player-localization';
+import { default as ShortVideosPlayerView } from './short-videos-player-view.svelte';
+import { mount, unmount } from 'svelte';
+let { input, socialInteractionsHandler, localization, showStreamsCloudWatermark, disableBackground, on } = $props();
+const initHost = (node) => {
+    const shadowRoot = createShadowRoot(node);
+    const mounted = mount(ShortVideosPlayerView, {
+        target: shadowRoot,
+        props: {
+            input,
+            socialInteractionsHandler,
+            localization,
+            showStreamsCloudWatermark,
+            disableBackground,
+            on
+        }
     });
-};
-import { handleEsc } from '../../core/document.event-handlers';
-import { createLocalGQLClient } from '../../core/graphql';
-import { mapShortVideoViewerModel, ShortVideoViewer } from '../short-video-viewer';
-import { Loading } from '../../ui/loading';
-import { PlayerBuffer, PlayerSlider } from '../../ui/player';
-import { SpotlightLayout } from '../../ui/spotlight-layout';
-import { SwipeIndicator } from '../../ui/swipe-indicator';
-import { default as Controls } from './controls.svelte';
-import { GetShortVideosDocument } from './operations.generated';
-import { ShortVideosPlayerLocalization } from './short-videos-player-localization';
-import { ShortVideosPlayerUiManager } from './ui-manager.svelte';
-import { onMount, untrack } from 'svelte';
-let { input, localization: localizationInit, on } = $props();
-const localization = $derived(new ShortVideosPlayerLocalization(localizationInit));
-let everTouched = $state(false);
-let buffer = $state(input.type === 'provider' ? new PlayerBuffer(input.provider) : null);
-$effect(() => {
-    if (input.type !== 'ids') {
-        return;
-    }
-    untrack(() => {
-        initBuffer(input);
-    });
-});
-const initBuffer = (input) => __awaiter(void 0, void 0, void 0, function* () {
-    var _a, _b;
-    try {
-        const { graphqlOrigin, ids, initialId } = input;
-        const graphql = createLocalGQLClient(graphqlOrigin, { 'x-initiator': input.initiator || 'player/short-videos' });
-        const payload = yield graphql
-            .query(GetShortVideosDocument, {
-            input: {
-                filter: {
-                    ids
-                }
-            }
-        })
-            .toPromise();
-        const posts = ((_b = (_a = payload.data) === null || _a === void 0 ? void 0 : _a.shortVideos) === null || _b === void 0 ? void 0 : _b.items) || [];
-        const idOrder = new Map(ids.map((id, index) => [id, index]));
-        posts.sort((a, b) => {
-            var _a, _b;
-            return ((_a = idOrder.get(a.id)) !== null && _a !== void 0 ? _a : Infinity) - ((_b = idOrder.get(b.id)) !== null && _b !== void 0 ? _b : Infinity);
-        });
-        const index = initialId ? posts.findIndex((p) => p.id === initialId) : 0;
-        const provider = {
-            initialData: {
-                prefetchedItems: posts.map(mapShortVideoViewerModel),
-                startIndex: index
-            },
-            loadMore: () => __awaiter(void 0, void 0, void 0, function* () {
-                // No more items to load, as all are already prefetched
-                return [];
-            })
-        };
-        buffer = new PlayerBuffer(provider);
-    }
-    catch (_c) {
-        console.error('Failed to load short videos by IDs:', input.ids);
-        buffer = null; // Reset buffer on error
-    }
-});
-const uiManager = new ShortVideosPlayerUiManager();
-onMount(() => __awaiter(void 0, void 0, void 0, function* () {
-    uiManager.detailsCollapsed = window && window.innerWidth < window.innerHeight;
-}));
-const contentMounted = (node) => {
-    const markAsTouched = () => {
-        everTouched = true;
-        node.removeEventListener('touchstart', markAsTouched);
-        node.removeEventListener('wheel', markAsTouched);
-        node.removeEventListener('click', markAsTouched);
-        node.removeEventListener('keypress', markAsTouched);
+    return {
+        destroy: () => {
+            unmount(mounted);
+        }
     };
-    node.addEventListener('touchstart', markAsTouched);
-    node.addEventListener('wheel', markAsTouched);
-    node.addEventListener('click', markAsTouched);
-    node.addEventListener('keypress', markAsTouched);
-};
-const handleDimensionsChanged = (dimensions) => {
-    uiManager.updateDimensions({
-        mainViewColumnWidth: dimensions.mainSceneWidth,
-        viewTotalWidth: dimensions.totalWidth
-    });
-};
-const onPlayerClose = () => {
-    var _a;
-    (_a = on === null || on === void 0 ? void 0 : on.closePlayer) === null || _a === void 0 ? void 0 : _a.call(on);
 };
 </script>
 
-<svelte:document onkeydown={(e) => handleEsc(e, onPlayerClose)} />
-
-<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" use:contentMounted>
-          <PlayerSlider buffer={buffer}>
-            {#snippet children({ item })}
-              <ShortVideoViewer
-                model={item}
-                autoplay="on-appearance"
-                showAttachments={uiManager.showShortVideoOverlay}
-                localization={localization.shortVideoViewerLocalization} />
-            {/snippet}
-          </PlayerSlider>
-          {#if uiManager.isMobileView && buffer.loaded.length > 1 && !everTouched}
-            <SwipeIndicator localization={localization.swipeIndicatorLocalization} />
-          {/if}
-        </div>
-      </SpotlightLayout>
-      <Controls buffer={buffer} uiManager={uiManager} localization={localization} on={{ closePlayer: () => onPlayerClose() }} />
-    {:else}
-      <Loading positionFixedCenter={true} timeout={1000} />
-    {/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>
+{#key input}
+  <div class="short-videos-player-host" use:initHost></div>
+{/key}

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

@@ -1,11 +1,16 @@
-import type { Locale } from '../../core/locale';
+import { type Locale } from '../../core/locale';
+import type { ShortVideoSocialInteractionsHanlder } from '../short-video-viewer';
 import { type IShortVideosPlayerLocalization } from './short-videos-player-localization';
 import type { PlayerInput } from './types';
 type Props = {
     input: PlayerInput;
-    localization: IShortVideosPlayerLocalization | Locale;
+    socialInteractionsHandler?: ShortVideoSocialInteractionsHanlder;
+    localization?: IShortVideosPlayerLocalization | Locale;
+    showStreamsCloudWatermark?: boolean;
+    disableBackground?: boolean;
     on?: {
         closePlayer?: () => void;
+        videoActivated?: (id: string) => void;
     };
 };
 declare const Cmp: import("svelte").Component<Props, {}, "">;