@streamscloud/embeddable 3.4.1 → 4.0.0

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

@@ -10,107 +10,15 @@ 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: '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: 'shortDescription' } },
-                                {
-                                    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' } }
-                                                    ]
-                                                }
-                                            }
-                                        ]
-                                    }
-                                }
-                            ]
-                        }
+                        selectionSet: { kind: 'SelectionSet', selections: [{ kind: 'FragmentSpread', name: { kind: 'Name', value: 'ProductCardPayloadFragment' } }] }
                     },
                     {
                         kind: 'Field',
                         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: 'price' } },
-                                { kind: 'Field', name: { kind: 'Name', value: 'currency' } },
-                                {
-                                    kind: 'Field',
-                                    name: { kind: 'Name', value: 'ctaButton' },
-                                    selectionSet: {
-                                        kind: 'SelectionSet',
-                                        selections: [
-                                            { kind: 'Field', name: { kind: 'Name', value: 'background' } },
-                                            { kind: 'Field', name: { kind: 'Name', value: 'textColor' } },
-                                            { kind: 'Field', name: { kind: 'Name', value: 'text' } },
-                                            { kind: 'Field', name: { kind: 'Name', value: 'url' } },
-                                            { kind: 'Field', name: { kind: 'Name', value: 'border' } }
-                                        ]
-                                    }
-                                },
-                                { kind: 'Field', name: { kind: 'Name', value: 'type' } },
-                                {
-                                    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' } }
-                                        ]
-                                    }
-                                }
-                            ]
-                        }
+                        selectionSet: { kind: 'SelectionSet', selections: [{ kind: 'FragmentSpread', name: { kind: 'Name', value: 'AdCardPayloadFragment' } }] }
                     },
                     {
                         kind: 'Field',
@@ -160,6 +68,102 @@ export const ShortVideoViewerPayloadFragmentDoc = {
                     }
                 ]
             }
+        },
+        {
+            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: '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' },
+                        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: 'brand' },
+                        selectionSet: { kind: 'SelectionSet', selections: [{ kind: 'Field', name: { kind: 'Name', value: 'name' } }] }
+                    },
+                    {
+                        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: 'AdCardPayloadFragment' },
+            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: 'price' } },
+                    { kind: 'Field', name: { kind: 'Name', value: 'currency' } },
+                    {
+                        kind: 'Field',
+                        name: { kind: 'Name', value: 'ctaButton' },
+                        selectionSet: {
+                            kind: 'SelectionSet',
+                            selections: [
+                                { kind: 'Field', name: { kind: 'Name', value: 'background' } },
+                                { kind: 'Field', name: { kind: 'Name', value: 'textColor' } },
+                                { kind: 'Field', name: { kind: 'Name', value: 'text' } },
+                                { kind: 'Field', name: { kind: 'Name', value: 'url' } },
+                                { kind: 'Field', name: { kind: 'Name', value: 'border' } }
+                            ]
+                        }
+                    },
+                    { kind: 'Field', name: { kind: 'Name', value: 'type' } },
+                    {
+                        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' } }
+                            ]
+                        }
+                    }
+                ]
+            }
         }
     ]
 };

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

@@ -1,51 +1,11 @@
 fragment ShortVideoViewerPayloadFragment on Post {
   id
   enableSocialInteractions
-  postHeading {
-    sourceImage
-    sourceName
-    postDisplayDate
-    postViewsCount
-  }
   allProducts {
-    media {
-      url
-      thumbnailUrl
-      type
-    }
-    title
-    id
-    link
-    shortDescription
-    priceAndAvailability {
-      currency
-      price
-      productSalePrices {
-        salePrice
-        salePriceEffectiveDateFrom
-        salePriceEffectiveDateTo
-      }
-    }
+    ...ProductCardPayloadFragment
   }
   ad {
-    id
-    title
-    description
-    price
-    currency
-    ctaButton {
-      background
-      textColor
-      text
-      url
-      border
-    }
-    type
-    media {
-      url
-      thumbnailUrl
-      type
-    }
+    ...AdCardPayloadFragment
   }
   postData {
     media {

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

@@ -1,4 +1,5 @@
-import { AdType, type Currency } from '../../core/enums';
+import type { AdCardModel } from '../../ads/ad-card';
+import type { ProductCardModel } from '../../products/product-card';
 export type ShortVideoViewerModel = {
     id: string;
     media: {
@@ -11,8 +12,9 @@ export type ShortVideoViewerModel = {
     };
     text?: string | null;
     heading: ShortVideoViewerHeadingModel | null;
-    products: ShortVideoViewerProductModel[];
-    ad: ShortVideoViewerAdModel | null;
+    enableSocialInteractions: boolean;
+    products: ProductCardModel[];
+    ad: AdCardModel | null;
 };
 export type ShortVideoViewerHeadingModel = {
     image: string | null;
@@ -20,29 +22,8 @@ export type ShortVideoViewerHeadingModel = {
     displayDate: string;
     viewsCount: number;
 };
-export type ShortVideoViewerAdModel = {
-    id: string;
-    type: AdType;
-    image: string | null;
-    title: string;
-    description: string | null;
-    price: number | null;
-    currency: Currency | null;
-    ctaButton: {
-        background: string;
-        textColor: string;
-        text: string;
-        url: string;
-        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;
+export type ShortVideoSocialInteractions = {
+    isLiked: (shortVideoId: string) => boolean;
+    onToggleLike: (shortVideoId: string) => void;
+    onShare: (shortVideoId: string) => void;
 };

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

@@ -1 +1 @@
-import { AdType } from '../../core/enums';
+export {};

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
+    canShowControls = $state(true);
+    // is provided from the calling side
     canShowAttachments = $state(true);
+    // 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,28 @@
-<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, localization, showStreamsCloudWatermark, on } = $props();
+const initHost = (node) => {
+    const shadowRoot = createShadowRoot(node);
+    const mounted = mount(ShortVideosPlayerView, {
+        target: shadowRoot,
+        props: {
+            input,
+            localization,
+            showStreamsCloudWatermark,
+            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,9 +1,10 @@
-import type { Locale } from '../../core/locale';
+import { type Locale } from '../../core/locale';
 import { type IShortVideosPlayerLocalization } from './short-videos-player-localization';
 import type { PlayerInput } from './types';
 type Props = {
     input: PlayerInput;
-    localization: IShortVideosPlayerLocalization | Locale;
+    localization?: IShortVideosPlayerLocalization | Locale;
+    showStreamsCloudWatermark?: boolean;
     on?: {
         closePlayer?: () => void;
     };