@streamscloud/embeddable 3.2.3 → 3.2.5

package/dist/core/analytics.profile-id.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Retrieves the profile ID from localStorage or generates a new one if it doesn't exist
+ * @returns The profile ID to use for analytics tracking
+ */
+export declare const getOrCreateProfileId: () => string;

package/dist/core/analytics.profile-id.js

@@ -0,0 +1,17 @@
+/**
+ * Key used for storing the profile ID in local storage
+ */
+const PROFILE_ID_STORAGE_KEY = 'streamscloud_profile_id';
+/**
+ * Retrieves the profile ID from localStorage or generates a new one if it doesn't exist
+ * @returns The profile ID to use for analytics tracking
+ */
+export const getOrCreateProfileId = () => {
+    const storedProfileId = localStorage.getItem(PROFILE_ID_STORAGE_KEY);
+    if (!storedProfileId) {
+        const newProfileId = crypto.randomUUID();
+        localStorage.setItem(PROFILE_ID_STORAGE_KEY, newProfileId);
+        return newProfileId;
+    }
+    return storedProfileId;
+};

package/dist/core/document.event-handlers.d.ts

@@ -0,0 +1 @@
+export declare const handleEsc: (event: KeyboardEvent, callback: () => void) => void;

package/dist/core/document.event-handlers.js

@@ -0,0 +1,5 @@
+export const handleEsc = (event, callback) => {
+    if (event.key === 'Escape' || event.key === 'Esc') {
+        callback();
+    }
+};

package/dist/core/enums.d.ts

@@ -1,6 +1,4 @@
 export declare enum PostSourceType {
-    Channel = "CHANNEL",
-    Group = "GROUP",
     MediaPage = "MEDIA_PAGE",
     Organization = "ORGANIZATION",
     UserProfile = "USER_PROFILE"

package/dist/core/enums.js

@@ -1,7 +1,5 @@
 export var PostSourceType;
 (function (PostSourceType) {
-    PostSourceType["Channel"] = "CHANNEL";
-    PostSourceType["Group"] = "GROUP";
     PostSourceType["MediaPage"] = "MEDIA_PAGE";
     PostSourceType["Organization"] = "ORGANIZATION";
     PostSourceType["UserProfile"] = "USER_PROFILE";

package/dist/core/graphql.d.ts

@@ -1 +1,3 @@
-export declare const createLocalGQLClient: (graphqlUrl: string, customFetch?: typeof fetch) => import("@urql/core").Client;
+export declare const createLocalGQLClient: (graphqlOrigin?: string, headers?: HeadersInit, customFetch?: typeof fetch) => import("@urql/core").Client;
+export declare const resolveGraphQLOrigin: (origin?: string) => string;
+export declare const constructGraphQLUrl: (graphqlOrigin?: string) => string;

package/dist/core/graphql.js

@@ -1,10 +1,19 @@
 import { createClient, fetchExchange } from '@urql/core';
-export const createLocalGQLClient = (graphqlUrl, customFetch) => createClient({
-    url: graphqlUrl,
+export const createLocalGQLClient = (graphqlOrigin, headers, customFetch) => createClient({
+    url: constructGraphQLUrl(resolveGraphQLOrigin(graphqlOrigin)),
     requestPolicy: 'network-only',
     fetchOptions: {
-        credentials: 'include'
+        credentials: 'include',
+        headers: headers
     },
     fetch: customFetch || fetch,
     exchanges: [fetchExchange]
 });
+export const resolveGraphQLOrigin = (origin) => {
+    return origin || 'https://api.streamscloud.com';
+};
+export const constructGraphQLUrl = (graphqlOrigin) => {
+    let baseUrl = resolveGraphQLOrigin(graphqlOrigin);
+    baseUrl = baseUrl.endsWith('/') ? baseUrl : `${baseUrl}/`;
+    return `${baseUrl}external/graphql`;
+};

package/dist/core/locale.d.ts

@@ -0,0 +1,6 @@
+export type Locale = 'en' | 'no';
+export declare const getLocale: <T>(input?: Locale | T) => Locale | T;
+export declare const isEn: <T>(input: Locale | T) => input is "en";
+export declare const isNo: <T>(input: Locale | T) => input is "no";
+export declare const isLocale: <T>(input: Locale | T) => input is Locale;
+export declare const isLocalizationInterface: <T>(input: Locale | T) => input is T;

package/dist/core/locale.js

@@ -0,0 +1,24 @@
+export const getLocale = (input) => {
+    if (input === undefined || input === null) {
+        return 'en';
+    }
+    switch (input) {
+        case 'en':
+        case 'no':
+            return input;
+        default:
+            return input;
+    }
+};
+export const isEn = (input) => {
+    return input === 'en';
+};
+export const isNo = (input) => {
+    return input === 'no';
+};
+export const isLocale = (input) => {
+    return input === 'en' || input === 'no';
+};
+export const isLocalizationInterface = (input) => {
+    return typeof input === 'object' && input !== null;
+};

package/dist/core/utils/html-helper.d.ts

@@ -36,5 +36,6 @@ export declare class HtmlHelper {
      * DomHelper.insert(siblingElement, newContentField, false);
      */
     static insert(newElement: Element, siblingElement: Element, insertBefore?: boolean): void;
+    static sanitizeSvg(svg: string): string;
     static pasteIntoInput(value: string, element: HTMLInputElement | HTMLTextAreaElement): void;
 }

package/dist/core/utils/html-helper.js

@@ -1,3 +1,4 @@
+import dp from 'dompurify';
 export class HtmlHelper {
     static clearSelection() {
         if (window.getSelection) {
@@ -70,6 +71,9 @@ export class HtmlHelper {
             HtmlHelper.insertAfter(newElement, siblingElement);
         }
     }
+    static sanitizeSvg(svg) {
+        return dp.sanitize(svg, { USE_PROFILES: { svg: true, svgFilters: true }, ADD_ATTR: ['dominant-baseline'] });
+    }
     static pasteIntoInput(value, element) {
         if (element.selectionStart || element.selectionStart === 0) {
             const startPos = element.selectionStart;

package/dist/products/price-helper.js

@@ -20,7 +20,7 @@ export const toPriceRepresentation = (amount, currency, includeCurrency = true)
         }
         case Currency.Usd: {
             const value = formatNumber(amount);
-            return includeCurrency ? `€ ${value}` : value;
+            return includeCurrency ? `$ ${value}` : value;
         }
         default: {
             Utils.assertUnreachable(currency);

package/dist/short-videos/short-video-viewer/cmp.ad.svelte

@@ -1,27 +1,34 @@
-<script lang="ts">import { Button, ButtonSize } from '../../ui/button';
-import { Image } from '../../ui/image';
+<script lang="ts">import { Image } from '../../ui/image';
 import { LineClamp } from '../../ui/line-clamp';
 import { ProportionalContainer } from '../../ui/proportional-container';
 let { ad } = $props();
 </script>
 
-<div class="short-video-ad-viewer">
-  <ProportionalContainer ratio={16 / 9}>
+<div class="ad">
+  <ProportionalContainer ratio={234 / 277}>
     <Image src={ad.image} alt={ad.title} />
   </ProportionalContainer>
-  <div class="short-video-ad-viewer__body">
+  <div class="ad__info">
     {#if ad.title}
-      <p class="short-video-ad-viewer__title">{ad.title}</p>
+      <div class="ad__title">{ad.title}</div>
     {/if}
     {#if ad.description}
-      <p class="short-video-ad-viewer__description">
-        <LineClamp value={ad.description} maxLines={3} />
-      </p>
+      <div class="ad__description">
+        <LineClamp value={ad.description} maxLines={2} />
+      </div>
+    {/if}
+    {#if ad.price && ad.currency}
+      <div class="ad__price">{ad.currency} {ad.price}</div>
     {/if}
-    {#if ad.buttonUrl}
-      <div class="short-video-ad-viewer__button">
-        <a href={ad.buttonUrl} target="_blank" class="short-video-ad-viewer__link">
-          <Button size={ButtonSize.Standard}>{ad.buttonText || ad.buttonUrl}</Button>
+    {#if ad.ctaButton}
+      <div class="ad__button">
+        <a
+          href={ad.ctaButton.url}
+          target="_blank"
+          class="short-video-ad-viewer__link"
+          style="background-color: {ad.ctaButton.background}; color: {ad.ctaButton.textColor}; border: {ad.ctaButton
+            .border}; text-decoration: none; padding: 0.5em 1em; border-radius: 0.25em; display: inline-block;">
+          {ad.ctaButton.text}
         </a>
       </div>
     {/if}
@@ -39,36 +46,95 @@ let { ad } = $props();
     opacity: 1;
   }
 }
-.short-video-ad-viewer {
-  --_short-video-ad-viewer--background: var(--short-video-ad-viewer--background, #2e2e2e);
+.ad {
+  --image--border-radius: 0.25rem;
+  --image--object-fit: fit;
+  --image--width: auto;
+  --image--height: auto;
+  width: 100%;
+  height: max-content;
   display: flex;
   flex-direction: column;
-  border-radius: 0.25em;
-  background: var(--_short-video-ad-viewer--background);
-  min-height: 0;
-  overflow: hidden;
-  width: 100%;
+  position: relative;
+  container-type: inline-size;
+  aspect-ratio: 9/16;
+  background-color: #fafafa;
+  border: 0.038125rem solid #999999;
+  border-radius: 0.5rem;
+  padding: 0.75rem 0.75rem 1.125rem;
+  justify-content: space-between;
+  /* Set 'container-type: inline-size;' to reference container*/
 }
-.short-video-ad-viewer__body {
-  padding: 1em 1em 1.25em;
+@container (width < 230px) {
+  .ad {
+    padding: 0.5rem 0.5rem 0.75rem;
+  }
 }
-.short-video-ad-viewer__title {
-  color: #ffffff;
-  font-size: 0.9375em;
-  font-weight: bold;
-  display: block;
-  margin-bottom: 0.6666666667em;
+.ad__info {
+  display: flex;
+  flex-direction: column;
+  gap: 0.375rem;
+  margin-top: 0.1875rem;
+  /* Set 'container-type: inline-size;' to reference container*/
 }
-.short-video-ad-viewer__description {
-  color: #ffffff;
-  font-size: 0.75em;
-  display: block;
-  margin-bottom: 1.3333333333em;
-  white-space: pre-line;
-  word-break: break-word;
+@container (width < 230px) {
+  .ad__info {
+    gap: 0.25rem;
+    margin-top: 0.125rem;
+  }
+}
+.ad__title {
+  font-weight: 700;
+  font-size: 1.125rem;
+  line-height: 1.375rem;
+  min-height: 1.375rem;
+  color: #000000;
+  /* Set 'container-type: inline-size;' to reference container*/
 }
-.short-video-ad-viewer__button {
-  margin-top: 1em;
+@container (width < 230px) {
+  .ad__title {
+    font-size: 0.75rem;
+    line-height: 0.875rem;
+    min-height: 0.875rem;
+  }
+}
+.ad__description {
+  font-weight: 400;
+  color: #6b7280;
+  font-size: 0.9375rem;
+  line-height: 1.375rem;
+  min-height: 1.375rem;
+  /* Set 'container-type: inline-size;' to reference container*/
+}
+@container (width < 230px) {
+  .ad__description {
+    font-size: 0.625rem;
+    line-height: 0.875rem;
+    min-height: 0.875rem;
+  }
+}
+.ad__price {
+  font-size: 1.875rem;
+  font-weight: 700;
+  text-align: right;
+  min-height: 3.53125rem;
+  color: #000000;
+  /* Set 'container-type: inline-size;' to reference container*/
+}
+@container (width < 230px) {
+  .ad__price {
+    font-size: 1.25rem;
+    min-height: 2.40625rem;
+  }
+}
+.ad__button {
   display: flex;
   justify-content: center;
+  margin-top: auto;
+  width: 100%;
+}
+:global([data-theme="dark"]) .ad {
+  background-color: #121212;
+  color: #ffffff;
+  border-color: #1e1e1e;
 }</style>

package/dist/short-videos/short-video-viewer/cmp.attachments-inline.svelte

@@ -1,10 +1,10 @@
 <script lang="ts">import { Icon, IconColor } from '../../ui/icon';
 import { ImageRounded } from '../../ui/image';
-import IconTargetArrow from '@fluentui/svg-icons/icons/target_arrow_20_regular.svg';
+import IconTargetArrow from '@fluentui/svg-icons/icons/target_arrow_20_regular.svg?raw';
 let { model } = $props();
 const attachmentsToShow = $derived.by(() => {
     const products = model.products.filter((p) => !!p.image).map((p) => ({ isAd: false, image: p.image, link: p.link }));
-    const ads = (model.ad ? [model.ad] : []).filter((a) => !!a.image).map((a) => ({ isAd: true, image: a.image, link: a.buttonUrl }));
+    const ads = (model.ad ? [model.ad] : []).filter((a) => !!a.image).map((a) => { var _a; return ({ isAd: true, image: a.image, link: ((_a = a.ctaButton) === null || _a === void 0 ? void 0 : _a.url) || null }); });
     return [...products, ...ads];
 });
 </script>

package/dist/short-videos/short-video-viewer/cmp.attachments.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">import { default as ShortVideoAdViewer } from './cmp.ad.svelte';
 import { default as ShortVideoProductViewer } from './cmp.product.svelte';
-import { ShortVideoAttachmentsLocalizationSvelte } from './short-video-attachments-localization.svelte';
+import { ShortVideoAttachmentsLocalization } from './short-video-attachments-localization';
 import {} from './types';
 let { shortVideo, localization: localizationInit, on } = $props();
-const localization = $derived(new ShortVideoAttachmentsLocalizationSvelte(localizationInit));
+const localization = $derived(new ShortVideoAttachmentsLocalization(localizationInit));
 </script>
 
 {#if shortVideo.products.length || shortVideo.ad}

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

@@ -1,8 +1,9 @@
-import { type IShortVideoAttachmentsLocalization } from './short-video-attachments-localization.svelte';
+import type { Locale } from '../../core/locale';
+import { type IShortVideoAttachmentsLocalization } from './short-video-attachments-localization';
 import { type ShortVideoViewerModel } from './types';
 type Props = {
     shortVideo: ShortVideoViewerModel;
-    localization?: IShortVideoAttachmentsLocalization;
+    localization: IShortVideoAttachmentsLocalization | Locale;
     on?: {
         productClick?: (productId: string) => void;
     };

package/dist/short-videos/short-video-viewer/cmp.product.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">import { toPriceRepresentation } from '../../products/price-helper';
 import { ImageRounded } from '../../ui/image';
 import { ProportionalContainer } from '../../ui/proportional-container';
-import { ShortVideoProductLocalization } from './short-video-product-localization.svelte';
+import { ShortVideoProductLocalization } from './short-video-product-localization';
 let { product, fitToContainer = false, localization: localizationInit, on } = $props();
 const localization = $derived(new ShortVideoProductLocalization(localizationInit));
 const handleProductClick = (event) => {

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

@@ -1,9 +1,10 @@
-import { type IShortVideoProductLocalization } from './short-video-product-localization.svelte';
+import type { Locale } from '../../core/locale';
+import { type IShortVideoProductLocalization } from './short-video-product-localization';
 import type { ShortVideoViewerProductModel } from './types';
 type Props = {
     product: ShortVideoViewerProductModel;
     fitToContainer?: boolean;
-    localization?: IShortVideoProductLocalization;
+    localization: IShortVideoProductLocalization | Locale;
     on?: {
         productClick?: (productId: string) => void;
     };

package/dist/short-videos/short-video-viewer/cmp.short-video-details.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">import { slideHorizontally } from '../../core/transitions';
 import { default as ShortVideoAttachments } from './cmp.attachments.svelte';
 import { default as ShortVideoHeading } from './cmp.short-video-heading.svelte';
-import { ShortVideoDetailsLocalization } from './short-video-details-localization.svelte';
+import { ShortVideoDetailsLocalization } from './short-video-details-localization';
 import {} from './types';
 let { shortVideo, collapsed, localization: localizationInit, on } = $props();
 const localization = $derived(new ShortVideoDetailsLocalization(localizationInit));

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

@@ -1,9 +1,10 @@
-import { type IShortVideoDetailsLocalization } from './short-video-details-localization.svelte';
+import type { Locale } from '../../core/locale';
+import { type IShortVideoDetailsLocalization } from './short-video-details-localization';
 import { type ShortVideoViewerModel } from './types';
 type Props = {
     shortVideo: ShortVideoViewerModel;
     collapsed: boolean;
-    localization?: IShortVideoDetailsLocalization;
+    localization: IShortVideoDetailsLocalization | Locale;
     on?: {
         productClick?: (productId: string) => void;
     };

package/dist/short-videos/short-video-viewer/cmp.short-video-heading.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">import { ImageRound } from '../../ui/image';
 import { TimeAgo } from '../../ui/time-ago';
-import { ShortVideoViewerLocalization } from './short-video-viewer-localization.svelte';
+import { ShortVideoViewerLocalization } from './short-video-viewer-localization';
 let { model, localization: localizationInit } = $props();
 const localization = $derived(new ShortVideoViewerLocalization(localizationInit));
 </script>
@@ -14,7 +14,7 @@ const localization = $derived(new ShortVideoViewerLocalization(localizationInit)
     <div class="short-video-heading__source-name">{model.name}</div>
     <p class="short-video-heading__metadata">
       <TimeAgo date={model.displayDate} localization={localization.timeAgoLocalization} />
-      {#if Number.isInteger(model.viewsCount)}
+      {#if Number.isInteger(model.viewsCount) && model.viewsCount}
         <span>&middot;</span>
         {localization.viewsCount(model.viewsCount)}
       {/if}
@@ -36,7 +36,9 @@ const localization = $derived(new ShortVideoViewerLocalization(localizationInit)
 .short-video-heading {
   --_short-video-heading--container--font-size: var(--short-video-heading--container--font-size, 1em);
   --_short-video-heading--text--color: var(--short-video-heading--text--color, #374151);
+  --_short-video-heading--text--shadow: var(--short-video-heading--text--shadow, 1px 1px hsl(0, 0%, 10%));
   --_short-video-heading--meta--color: var(--short-video-heading--meta--color, #6b7280);
+  --_short-video-heading--meta--shadow: var(--short-video-heading--meta--shadow, 1px 1px hsl(0, 0%, 10%));
   --_short-video-heading--padding: var(--short-video-heading--padding, 0);
   display: flex;
   align-items: center;
@@ -66,6 +68,7 @@ const localization = $derived(new ShortVideoViewerLocalization(localizationInit)
   line-height: 1.25em;
   font-weight: 500;
   color: var(--_short-video-heading--text--color);
+  text-shadow: var(--_short-video-heading--text--shadow);
   text-overflow: ellipsis;
   width: 100%;
   white-space: nowrap;
@@ -80,6 +83,7 @@ const localization = $derived(new ShortVideoViewerLocalization(localizationInit)
   line-height: 1.2em;
   font-weight: 400;
   color: var(--_short-video-heading--meta--color);
+  text-shadow: var(--_short-video-heading--meta--shadow);
 }
 :global([data-theme="dark"]) .short-video-heading__metadata {
   --_short-video-heading--meta--color: var(--short-video-heading--meta--color, #d1d5db);

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

@@ -1,4 +1,4 @@
-import { type IShortVideoViewerLocalization } from './short-video-viewer-localization.svelte';
+import { type IShortVideoViewerLocalization } from './short-video-viewer-localization';
 import type { ShortVideoViewerHeadingModel } from './types';
 type Props = {
     model: ShortVideoViewerHeadingModel;

package/dist/short-videos/short-video-viewer/cmp.short-video-viewer.svelte

@@ -2,7 +2,7 @@
 import { Video } from '../../ui/video';
 import { default as AttachmentsInline } from './cmp.attachments-inline.svelte';
 import { default as ShortVideoDescription } from './description.svelte';
-import { ShortVideoViewerLocalization } from './short-video-viewer-localization.svelte';
+import { ShortVideoViewerLocalization } from './short-video-viewer-localization';
 import { ShortVideoViewerUiManager } from './ui-manager.svelte';
 let { model, availableSideSpace = 0, showAttachments = true, autoplay = 'on-appearance', localization: localizationInit, on } = $props();
 const localization = $derived(new ShortVideoViewerLocalization(localizationInit));

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

@@ -1,11 +1,12 @@
-import { type IShortVideoViewerLocalization } from './short-video-viewer-localization.svelte';
+import type { Locale } from '../../core/locale';
+import { type IShortVideoViewerLocalization } from './short-video-viewer-localization';
 import type { ShortVideoViewerModel } from './types';
 type Props = {
     model: ShortVideoViewerModel;
     availableSideSpace?: number;
     showAttachments?: boolean;
     autoplay?: true | false | 'on-appearance';
-    localization?: IShortVideoViewerLocalization;
+    localization: IShortVideoViewerLocalization | Locale;
     on?: {
         progress?: (progress: number) => void;
     };

package/dist/short-videos/short-video-viewer/description.svelte

@@ -27,7 +27,9 @@ let { model, localization } = $props();
 }
 .short-video-description {
   --_short-video-viewer--description--font--primary-color: var(--short-video-viewer--description--font--primary-color);
+  --_short-video-viewer--description--font--primary-shadow: var(--short-video-viewer--description--font--primary-shadow, 1px 1px hsl(0, 0%, 10%));
   --_short-video-viewer--description--font--secondary-color: var(--short-video-viewer--description--font--secondary-color);
+  --_short-video-viewer--description--font--secondary-shadow: var(--short-video-viewer--description--font--secondary-shadow, 1px 1px hsl(0, 0%, 10%));
   display: flex;
   flex-direction: column;
   padding-top: 0.75rem;
@@ -35,10 +37,13 @@ let { model, localization } = $props();
 .short-video-description__heading {
   --short-video-heading--padding: 0 0 0.875rem 0;
   --short-video-heading--text--color: var(--_short-video-viewer--description--font--primary-color);
+  --short-video-heading--text--shadow: var(--_short-video-viewer--description--font--primary-shadow);
   --short-video-heading--meta--color: var(--_short-video-viewer--description--font--secondary-color);
+  --short-video-heading--meta--shadow: var(--_short-video-viewer--description--font--secondary-shadow);
 }
 .short-video-description__text {
   color: var(--_short-video-viewer--description--font--primary-color);
+  text-shadow: var(--_short-video-viewer--description--font--primary-shadow);
   font-size: 0.9375rem;
   line-height: 1.25rem;
   font-weight: 400;

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

@@ -1,4 +1,4 @@
-import type { ShortVideoViewerLocalization } from './short-video-viewer-localization.svelte';
+import type { ShortVideoViewerLocalization } from './short-video-viewer-localization';
 import type { ShortVideoViewerModel } from './types';
 type Props = {
     model: ShortVideoViewerModel;

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

@@ -5,5 +5,7 @@ export { default as ShortVideoViewerAttachments } from './cmp.attachments.svelte
 export { default as ShortVideoViewerAttachmentsInline } from './cmp.attachments-inline.svelte';
 export { default as ShortVideoDetails } from './cmp.short-video-details.svelte';
 export type { ShortVideoViewerModel, ShortVideoViewerAdModel, ShortVideoViewerProductModel } from './types';
-export type { IShortVideoViewerLocalization } from './short-video-viewer-localization.svelte';
-export type { IShortVideoDetailsLocalization } from './short-video-details-localization.svelte';
+export type { IShortVideoViewerLocalization } from './short-video-viewer-localization';
+export type { IShortVideoDetailsLocalization } from './short-video-details-localization';
+export type { IShortVideoAttachmentsLocalization } from './short-video-attachments-localization';
+export { mapShortVideoViewerModel } from './mapper';

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

@@ -4,3 +4,4 @@ export { default as ShortVideoProductViewer } from './cmp.product.svelte';
 export { default as ShortVideoViewerAttachments } from './cmp.attachments.svelte';
 export { default as ShortVideoViewerAttachmentsInline } from './cmp.attachments-inline.svelte';
 export { default as ShortVideoDetails } from './cmp.short-video-details.svelte';
+export { mapShortVideoViewerModel } from './mapper';

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

@@ -37,9 +37,9 @@ const mapToShortVideoViewerAdModel = (payload) => {
         image: getMediaItemImageUrl(payload.media[0]),
         title: payload.title,
         description: payload.description,
-        buttonText: payload.buttonText,
-        buttonUrl: payload.buttonUrl,
-        openLinkInNewWindow: payload.openLinkInNewWindow
+        price: payload.price,
+        currency: payload.currency,
+        ctaButton: payload.ctaButton
     };
 };
 const mapToShortVideoViewerProductModel = (payload) => {
@@ -51,6 +51,7 @@ const mapToShortVideoViewerProductModel = (payload) => {
         link: payload.link,
         currency: payload.priceAndAvailability.currency,
         price: payload.priceAndAvailability.price,
-        salePrice: effectiveSalePrice?.salePrice ?? null
+        salePrice: effectiveSalePrice?.salePrice ?? null,
+        shortDescription: payload.shortDescription ?? null
     };
 };

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

@@ -13,6 +13,7 @@ export type ShortVideoViewerPayloadFragment = {
         title: string;
         id: string;
         link: string | null;
+        shortDescription: string | null;
         media: Array<{
             url: string;
             thumbnailUrl: string | null;
@@ -32,10 +33,16 @@ export type ShortVideoViewerPayloadFragment = {
         id: string;
         title: string;
         description: string | null;
-        buttonText: string | null;
-        buttonUrl: string | null;
-        openLinkInNewWindow: boolean | null;
+        price: number | null;
+        currency: SchemaTypes.Currency | null;
         type: SchemaTypes.AdType;
+        ctaButton: {
+            background: string;
+            textColor: string;
+            text: string;
+            url: string;
+            border: string;
+        } | null;
         media: Array<{
             url: string;
             thumbnailUrl: string | null;

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

@@ -44,6 +44,7 @@ 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: 'priceAndAvailability' },
@@ -79,9 +80,22 @@ export const ShortVideoViewerPayloadFragmentDoc = {
                                 { 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: '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',