@streamscloud/embeddable 4.0.0 → 5.1.0

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

@@ -1,5 +1,4 @@
-import type { AdCardModel } from '../../ads/ad-card';
-import type { ProductCardModel } from '../../products/product-card';
+import { AdType, type Currency } from '../../core/enums';
 export type ShortVideoViewerModel = {
     id: string;
     media: {
@@ -13,8 +12,8 @@ export type ShortVideoViewerModel = {
     text?: string | null;
     heading: ShortVideoViewerHeadingModel | null;
     enableSocialInteractions: boolean;
-    products: ProductCardModel[];
-    ad: AdCardModel | null;
+    products: ShortVideoProductCardModel[];
+    ad: ShortVideoAdCardModel | null;
 };
 export type ShortVideoViewerHeadingModel = {
     image: string | null;
@@ -22,8 +21,38 @@ export type ShortVideoViewerHeadingModel = {
     displayDate: string;
     viewsCount: number;
 };
-export type ShortVideoSocialInteractions = {
-    isLiked: (shortVideoId: string) => boolean;
+export type ShortVideoSocialInteractionsHandler = {
+    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;
+        textColor: string;
+        text: string;
+        url: string;
+        border: string;
+    } | null;
+};

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

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

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

@@ -16,9 +16,9 @@ export class ShortVideoViewerUiManager {
     actionsPanelWidth = $state(0);
     availableSideSpace = $state(0);
     // is provided from the calling side
-    canShowControls = $state(true);
+    canShowControls = $state(false);
     // is provided from the calling side
-    canShowAttachments = $state(true);
+    canShowAttachments = $state(false);
     // managed internally by component
     enableAttachments = $state(true);
     updateActionsPanelWidth = (value) => {

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

@@ -3,15 +3,17 @@ 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();
+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
         }
     });

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

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

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

@@ -5,14 +5,14 @@ import { ShortVideosPlayerLocalization } from './short-videos-player-localizatio
 import IconChevronDown from '@fluentui/svg-icons/icons/chevron_down_20_regular.svg?raw';
 import IconChevronUp from '@fluentui/svg-icons/icons/chevron_up_20_regular.svg?raw';
 import IconDismiss from '@fluentui/svg-icons/icons/dismiss_20_regular.svg?raw';
-let { buffer, uiManager, localization, on } = $props();
+let { buffer, uiManager, localization, socialInteractionsHandler, on } = $props();
 const shortVideo = $derived(buffer.current);
 const changeShowAttachments = () => {
     uiManager.showAttachments = !uiManager.showAttachments;
 };
 </script>
 
-{#if !uiManager.showShortVideoOverlay}
+{#if uiManager.viewInitialized && !uiManager.showShortVideoOverlay}
   <div class="short-videos-player-controls">
     <div class="short-videos-player-controls__left">
       {#if shortVideo}
@@ -22,15 +22,19 @@ const changeShowAttachments = () => {
               <ShortVideoViewerAttachmentsInline model={shortVideo} />
             </div>
           {/if}
-          <ShortVideoControls model={shortVideo} on={{ attachmentsClicked: changeShowAttachments }} />
+          <ShortVideoControls model={shortVideo} socialInteractionsHandler={socialInteractionsHandler} on={{ attachmentsClicked: changeShowAttachments }} />
         </div>
       {/if}
       <div class="short-videos-player-controls__navigation-buttons">
         <button type="button" class="navigation-button" disabled={!buffer.canLoadPrevious} onclick={buffer.loadPrevious}>
-          <Icon src={IconChevronUp} />
+          <span class="navigation-button__icon">
+            <Icon src={IconChevronUp} />
+          </span>
         </button>
         <button type="button" class="navigation-button" disabled={!buffer.canLoadNext} onclick={buffer.loadNext}>
-          <Icon src={IconChevronDown} />
+          <span class="navigation-button__icon">
+            <Icon src={IconChevronDown} />
+          </span>
         </button>
       </div>
     </div>
@@ -50,7 +54,7 @@ const changeShowAttachments = () => {
 {/if}
 
 {#if on.closePlayer}
-  <button type="button" class="close-button navigation-button" onclick={on.closePlayer}>
+  <button type="button" class="close-button" onclick={on.closePlayer}>
     <Icon src={IconDismiss} />
   </button>
 {/if}
@@ -155,7 +159,7 @@ const changeShowAttachments = () => {
   z-index: 1;
 }
 
-.navigation-button {
+.close-button {
   width: var(--short-videos-player--button--size);
   min-width: var(--short-videos-player--button--size);
   max-width: var(--short-videos-player--button--size);
@@ -168,13 +172,29 @@ const changeShowAttachments = () => {
   text-align: center;
   --icon--color: #ffffff;
   --icon--size: var(--short-videos-player--icon--size);
+  position: absolute;
+  top: 0.9375rem;
+  left: 0.625rem;
+  z-index: 1;
+  /* Set 'container-type: inline-size;' to reference container*/
 }
-.navigation-button:disabled {
+.close-button:disabled {
   opacity: 0.5;
   cursor: default;
 }
+.close-button:hover {
+  background-color: rgba(0, 0, 0, 0.9);
+  transition: background-color 0.5s;
+}
+@container (width < 576px) {
+  .close-button {
+    left: unset;
+    right: 0.625rem;
+  }
+}
 
-.close-button {
+.navigation-button {
+  --_icon-scale: 1;
   width: var(--short-videos-player--button--size);
   min-width: var(--short-videos-player--button--size);
   max-width: var(--short-videos-player--button--size);
@@ -187,19 +207,16 @@ const changeShowAttachments = () => {
   text-align: center;
   --icon--color: #ffffff;
   --icon--size: var(--short-videos-player--icon--size);
-  position: absolute;
-  top: 0.9375rem;
-  left: 0.625rem;
-  z-index: 1;
-  /* Set 'container-type: inline-size;' to reference container*/
 }
-.close-button:disabled {
+.navigation-button:disabled {
   opacity: 0.5;
   cursor: default;
 }
-@container (width < 576px) {
-  .close-button {
-    left: unset;
-    right: 0.625rem;
-  }
+.navigation-button:hover:not(:disabled) {
+  --_icon-scale: 1.2;
+}
+.navigation-button__icon {
+  display: block;
+  transform: scale(var(--_icon-scale));
+  transition: 0.3s;
 }</style>

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

@@ -1,4 +1,4 @@
-import { type ShortVideoViewerModel } from '../short-video-viewer';
+import { type ShortVideoSocialInteractionsHandler, type ShortVideoViewerModel } from '../short-video-viewer';
 import type { IPlayerBuffer } from '../../ui/player';
 import { ShortVideosPlayerLocalization } from './short-videos-player-localization';
 import type { ShortVideosPlayerUiManager } from './ui-manager.svelte';
@@ -6,6 +6,7 @@ type Props = {
     buffer: IPlayerBuffer<ShortVideoViewerModel>;
     uiManager: ShortVideosPlayerUiManager;
     localization: ShortVideosPlayerLocalization;
+    socialInteractionsHandler?: ShortVideoSocialInteractionsHandler;
     on: {
         closePlayer?: () => void;
         productClick?: (productId: string) => void;

package/dist/short-videos/short-videos-player/index.js

@@ -97,6 +97,7 @@ export const openShortVideosPlayer = async (init) => {
         target: shadowHost.shadowRoot,
         props: {
             input,
+            socialInteractionsHandler: init.socialInteractionsHandler,
             localization: getLocale(init.localization),
             showStreamsCloudWatermark: init.showStreamsCloudWatermark,
             on: {
@@ -106,6 +107,11 @@ export const openShortVideosPlayer = async (init) => {
                     }
                     await unmount(mounted);
                     shadowHost.remove();
+                },
+                videoActivated: (id) => {
+                    if (init.on?.videoActivated) {
+                        init.on.videoActivated(id);
+                    }
                 }
             }
         }

package/dist/short-videos/short-videos-player/operations.generated.d.ts

@@ -37,6 +37,7 @@ export type GetShortVideosQuery = {
                 title: string;
                 description: string | null;
                 price: number | null;
+                priceInfo: string | null;
                 currency: SchemaTypes.Currency | null;
                 type: SchemaTypes.AdType;
                 ctaButton: {

package/dist/short-videos/short-videos-player/operations.generated.js

@@ -45,118 +45,107 @@ export const GetShortVideosDocument = {
         },
         {
             kind: 'FragmentDefinition',
-            name: { kind: 'Name', value: 'ProductCardPayloadFragment' },
-            typeCondition: { kind: 'NamedType', name: { kind: 'Name', value: 'Product' } },
+            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: 'title' } },
-                    { kind: 'Field', name: { kind: 'Name', value: 'shortDescription' } },
-                    { kind: 'Field', name: { kind: 'Name', value: 'link' } },
+                    { kind: 'Field', name: { kind: 'Name', value: 'enableSocialInteractions' } },
                     {
                         kind: 'Field',
-                        name: { kind: 'Name', value: 'media' },
+                        name: { kind: 'Name', value: 'allProducts' },
                         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: '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: 'Field',
-                        name: { kind: 'Name', value: 'brand' },
-                        selectionSet: { kind: 'SelectionSet', selections: [{ kind: 'Field', name: { kind: 'Name', value: 'name' } }] }
-                    },
-                    {
-                        kind: 'Field',
-                        name: { kind: 'Name', value: 'priceAndAvailability' },
+                        name: { kind: 'Name', value: 'ad' },
                         selectionSet: {
                             kind: 'SelectionSet',
                             selections: [
-                                { kind: 'Field', name: { kind: 'Name', value: 'currency' } },
+                                { 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: 'priceInfo' } },
+                                { kind: 'Field', name: { kind: 'Name', value: 'currency' } },
                                 {
                                     kind: 'Field',
-                                    name: { kind: 'Name', value: 'productSalePrices' },
+                                    name: { kind: 'Name', value: 'ctaButton' },
                                     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: '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' } }
                                         ]
                                     }
                                 }
                             ]
                         }
-                    }
-                ]
-            }
-        },
-        {
-            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' } }
-                            ]
-                        }
-                    }
-                ]
-            }
-        },
-        {
-            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: '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: 'AdCardPayloadFragment' } }] }
                     },
                     {
                         kind: 'Field',

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

@@ -9,7 +9,7 @@
 };
 import { handleEsc } from '../../core/document.event-handlers';
 import { createLocalGQLClient } from '../../core/graphql';
-import { mapShortVideoViewerModel, ShortVideoViewer } from '../short-video-viewer';
+import { mapToShortVideoViewerModel, ShortVideoViewer } from '../short-video-viewer';
 import { Loading } from '../../ui/loading';
 import { PlayerBuffer, PlayerSlider } from '../../ui/player';
 import { SpotlightLayout } from '../../ui/spotlight-layout';
@@ -19,7 +19,7 @@ import { GetShortVideosDocument } from './operations.generated';
 import { ShortVideosPlayerLocalization } from './short-videos-player-localization';
 import { ShortVideosPlayerUiManager } from './ui-manager.svelte';
 import { onMount } from 'svelte';
-let { input, localization: localizationInit = 'en', showStreamsCloudWatermark, on } = $props();
+let { input, socialInteractionsHandler, localization: localizationInit = 'en', showStreamsCloudWatermark, disableBackground, on } = $props();
 const localization = $derived(new ShortVideosPlayerLocalization(localizationInit));
 let everTouched = $state(false);
 let background = $state(null);
@@ -47,7 +47,7 @@ const initBuffer = (input) => __awaiter(void 0, void 0, void 0, function* () {
         const index = initialId ? posts.findIndex((p) => p.id === initialId) : 0;
         const provider = {
             initialData: {
-                prefetchedItems: posts.map(mapShortVideoViewerModel),
+                prefetchedItems: posts.map(mapToShortVideoViewerModel),
                 startIndex: index
             },
             loadMore: () => __awaiter(void 0, void 0, void 0, function* () {
@@ -69,11 +69,13 @@ onMount(() => {
     }
 });
 const onItemActivated = (id) => {
+    var _a;
     const shortVideo = buffer === null || buffer === void 0 ? void 0 : buffer.loaded.find((x) => x.id === id);
     if (!shortVideo) {
         return;
     }
     background = shortVideo.media.isImage ? shortVideo.media.url : shortVideo.media.thumbnailUrl;
+    (_a = on === null || on === void 0 ? void 0 : on.videoActivated) === null || _a === void 0 ? void 0 : _a.call(on, id);
 };
 const contentMounted = (node) => {
     const markAsTouched = () => {
@@ -102,7 +104,10 @@ const onPlayerClose = () => {
 
 <svelte:document onkeydown={(e) => handleEsc(e, onPlayerClose)} />
 
-<div class="short-videos-player-container" style={background ? `--background-image: url(${background})` : null}>
+<div
+  class="short-videos-player-container"
+  class:short-videos-player-container--background-enabled={!disableBackground}
+  style={background && !disableBackground ? `--background-image: url(${background})` : null}>
   <div class="short-videos-player" style={uiManager.globalCssVariables}>
     {#if showStreamsCloudWatermark}
       <div class="short-videos-player__watermark">
@@ -122,6 +127,7 @@ const onPlayerClose = () => {
             {#snippet children({ item })}
               <ShortVideoViewer
                 model={item}
+                socialInteractionsHandler={socialInteractionsHandler}
                 autoplay="on-appearance"
                 showAttachments={uiManager.showShortVideoOverlay}
                 showControls={uiManager.showShortVideoOverlay}
@@ -133,7 +139,12 @@ const onPlayerClose = () => {
           {/if}
         </div>
       </SpotlightLayout>
-      <Controls buffer={buffer} uiManager={uiManager} localization={localization} on={{ closePlayer: on?.closePlayer }} />
+      <Controls
+        buffer={buffer}
+        uiManager={uiManager}
+        localization={localization}
+        socialInteractionsHandler={socialInteractionsHandler}
+        on={{ closePlayer: on?.closePlayer }} />
     {:else}
       <Loading positionFixedCenter={true} timeout={1000} />
     {/if}
@@ -161,7 +172,9 @@ const onPlayerClose = () => {
   container-type: inline-size;
   display: flex;
   position: relative;
-  background-color: rgba(0, 0, 0, 0.75);
+}
+.short-videos-player-container--background-enabled {
+  background-color: #c1c1c1;
   background-image: var(--background-image);
   background-size: cover;
   background-blend-mode: multiply;

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

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

package/dist/short-videos/short-videos-player/types.d.ts

@@ -1,4 +1,4 @@
-import type { ShortVideoViewerModel } from '../..';
+import type { ShortVideoViewerModel, ShortVideoSocialInteractionsHandler } from '../short-video-viewer';
 import type { PlayerItemsProvider } from '../../ui/player';
 import type { IShortVideosPlayerLocalization } from './short-videos-player-localization';
 export type PlayerInput = ProviderPlayerInput | IdsPlayerInput;
@@ -14,23 +14,23 @@ export type IdsPlayerInput = {
     initiator?: string;
 };
 export type OpenShortVideosPlayerInit = ProviderInit | IdsInit;
-type ProviderInit = {
+type ProviderInit = PlayerSettings & {
     shortVideosProvider: PlayerItemsProvider<ShortVideoViewerModel>;
-    localization?: IShortVideosPlayerLocalization | 'en' | 'no';
-    showStreamsCloudWatermark?: boolean;
-    on?: {
-        playerClosed?: () => void;
-    };
 };
-type IdsInit = {
+type IdsInit = PlayerSettings & {
     ids: string[];
     graphqlOrigin?: string;
     initialId?: string;
-    localization?: IShortVideosPlayerLocalization | 'en' | 'no';
     initiator?: string;
+};
+type PlayerSettings = {
+    socialInteractionsHandler?: ShortVideoSocialInteractionsHandler;
+    disableBackground?: boolean;
+    localization?: IShortVideosPlayerLocalization | 'en' | 'no';
     showStreamsCloudWatermark?: boolean;
     on?: {
         playerClosed?: () => void;
+        videoActivated?: (id: string) => void;
     };
 };
 export declare const isShortVideosProviderInit: (init: unknown) => init is ProviderInit;

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

@@ -2,6 +2,7 @@ export declare class ShortVideosPlayerUiManager {
     showAttachments: boolean;
     globalCssVariables: string;
     isMobileView: boolean;
+    viewInitialized: boolean;
     showShortVideoOverlay: boolean;
     private readonly buttonSize;
     private readonly iconSize;

package/dist/short-videos/short-videos-player/ui-manager.svelte.js

@@ -11,7 +11,8 @@ export class ShortVideosPlayerUiManager {
         return values.join(';');
     });
     isMobileView = $derived.by(() => this.viewTotalWidth <= 576);
-    showShortVideoOverlay = $derived.by(() => (this.viewTotalWidth - this.mainViewColumnWidth) / 2 <= 85);
+    viewInitialized = $derived.by(() => !!this.viewTotalWidth && !!this.mainViewColumnWidth);
+    showShortVideoOverlay = $derived.by(() => this.viewInitialized && (this.viewTotalWidth - this.mainViewColumnWidth) / 2 <= 85);
     buttonSize = 48;
     iconSize = 28;
     controlsOffsetHorizontal = 28;

package/dist/streams/layout/models/mapper.js

@@ -37,7 +37,8 @@ const mapToAdViewModel = (model) => {
         description: model.description,
         price: model.price,
         currency: model.currency,
-        ctaButton: model.ctaButton
+        ctaButton: model.ctaButton,
+        priceInfoLabel: model.priceInfo
     };
 };
 const mapToProductCardModel = (model) => {

package/dist/streams/layout/models/stream-layout-short-video-model.d.ts

@@ -18,6 +18,7 @@ export type StreamLayoutShortVideoAdModel = {
     title: string;
     description: string | null;
     price: number | null;
+    priceInfo: string | null;
     currency: Currency | null;
     ctaButton: {
         background: string;