@streamscloud/embeddable 11.0.0 → 12.1.0

package/dist/posts/posts-player/types.d.ts

@@ -1,7 +1,9 @@
-import type { IContentPlayerSettingsInitializer } from '../../content-player/content-player-settings';
+import type { Locale } from '../../core/locale';
 import type { IPostModel } from '..';
 import type { IPostSocialInteractionsHandler } from '../social-interactions';
-import type { IPlayerDataProvider } from '../../ui/player/providers';
+import type { ICloseOrchestrator } from '../../ui/player/close-orchestrator';
+import type { PlayerColors } from '../../ui/player/colors';
+import type { IPlayerBuffer, IPlayerDataProvider } from '../../ui/player/providers';
 export interface IPostAnalyticsHandler {
     setOrganizationId: (organizationId: string) => void;
     trackPostOpened: (postId: string, ownerId: string) => void;
@@ -14,14 +16,25 @@ export interface IPostAnalyticsHandler {
 export type PostPlayerModel = IPostModel & {
     analyticsOrganizationId: string | null;
 };
-export type PostPlayerProps = {
-    dataProvider: IPlayerDataProvider<PostPlayerModel>;
+export type PostsPlayerProps = {
+    dataProvider: {
+        type: 'buffer';
+        buffer: IPlayerBuffer<PostPlayerModel>;
+    } | {
+        type: 'provider';
+        provider: IPlayerDataProvider<PostPlayerModel>;
+    };
     socialInteractionsHandler?: IPostSocialInteractionsHandler;
     analyticsHandler?: IPostAnalyticsHandler;
     playerSettings?: PostPlayerSettings;
+    closeOrchestrator: ICloseOrchestrator;
     on?: {
-        playerClosed?: () => void;
         postActivated?: (id: string) => void;
+        backgroundImageLoaded?: (imageUrl: string | null) => void;
     };
 };
-export type PostPlayerSettings = IContentPlayerSettingsInitializer;
+export type PostPlayerSettings = {
+    locale?: Locale;
+    showStreamsCloudWatermark?: boolean;
+    playerColors?: PlayerColors;
+};

package/dist/products/product-card/cmp.product-card.svelte

@@ -4,7 +4,7 @@ import { Image } from '../../ui/image';
 import { LineClamp } from '../../ui/line-clamp';
 import { ProportionalContainer } from '../../ui/proportional-container';
 import { ProductCardLocalization } from './product-card-localization';
-let { product, colors, includeBeforeNowPrefix, trackingParams, inert = false, locale = 'en', on } = $props();
+let { product, colors, includeBeforeNowPrefix, trackingParams, inert = false, locale, on } = $props();
 const localization = $derived(new ProductCardLocalization(locale));
 const shortDescriptionPresented = $derived(product.shortDescription && product.shortDescription.length > 0);
 const trackImpression = (node) => {
@@ -58,13 +58,13 @@ const styles = $derived.by(() => {
   </ProportionalContainer>
 
   <div class="product-card__info">
-    <LineClamp maxLines={1}>
+    <LineClamp maxLines={1} locale={locale}>
       <div class="product-card__brand">{product.brandName}</div>
     </LineClamp>
-    <LineClamp value={product.shortDescription} maxLines={shortDescriptionPresented ? 1 : 2}>
+    <LineClamp maxLines={shortDescriptionPresented ? 1 : 2} locale={locale}>
       <div class="product-card__title" class:two-lines={!shortDescriptionPresented}>{product.title}</div>
     </LineClamp>
-    <LineClamp value={product.shortDescription} maxLines={2}>
+    <LineClamp maxLines={2} locale={locale}>
       <div class="product-card__description" class:two-lines={shortDescriptionPresented}>{product.shortDescription}</div>
     </LineClamp>
     <div class="product-price">
@@ -110,7 +110,7 @@ const styles = $derived.by(() => {
   --product-price-color: var(--_product-card--price-color);
   --product-price--sale--color: var(--_product-card--sale-price-color);
   --image--border-radius: 0.25rem;
-  --image--object-fit: contain;
+  --image--object-fit: cover;
   --image--width: auto;
   --image--height: auto;
   width: 100%;

package/dist/products/product-card/cmp.product-card.svelte.d.ts

@@ -8,7 +8,7 @@ type Props = {
         price?: string | null;
         salePrice?: string | null;
     };
-    locale?: Locale;
+    locale: Locale;
     includeBeforeNowPrefix?: boolean;
     inert?: boolean;
     trackingParams: TrackingParams;

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

@@ -1,27 +1,112 @@
-<script lang="ts">import { Icon } from '../../ui/icon';
+<script lang="ts">import { toPriceRepresentation } from '../../products/price-helper';
+import { Icon } from '../../ui/icon';
 import { ImageRounded } from '../../ui/image';
 import { LineClamp } from '../../ui/line-clamp';
 import { ProportionalContainer } from '../../ui/proportional-container';
+import { TimeAgo } from '../../ui/time-ago';
+import { ShortVideoCardLocalization } from './localization';
 import IconPhone from '@fluentui/svg-icons/icons/phone_20_regular.svg?raw';
-let { shortVideo, aspectRatio = 9 / 16, on } = $props();
+import IconShoppingBag from '@fluentui/svg-icons/icons/shopping_bag_20_regular.svg?raw';
+const ADJUST_TEXT_SIZE = false;
+let { shortVideo, locale, on } = $props();
+const localization = new ShortVideoCardLocalization(locale);
+const adjustTextSize = (node) => {
+    if (!ADJUST_TEXT_SIZE) {
+        return;
+    }
+    const isOverflown = ({ clientHeight, scrollHeight }) => scrollHeight > clientHeight;
+    const resizeObserver = new ResizeObserver(() => {
+        node.style.fontSize = '';
+        const { fontSize } = window.getComputedStyle(node);
+        const originalFontSize = parseFloat(fontSize);
+        const maxSize = originalFontSize * 2;
+        let i = originalFontSize;
+        let overflow = false;
+        while (!overflow && i < maxSize) {
+            node.style.fontSize = `${i}px`;
+            overflow = isOverflown(node);
+            if (!overflow) {
+                i += 1;
+            }
+        }
+        node.style.fontSize = `${i - 1}px`;
+    });
+    resizeObserver.observe(node);
+    return {
+        destroy() {
+            resizeObserver.disconnect();
+        }
+    };
+};
 </script>
 
 <div class="short-video-card">
   <div class="short-video-card__media">
-    <ProportionalContainer ratio={aspectRatio}>
+    <ProportionalContainer ratio={2 / 3}>
       <ImageRounded src={shortVideo.cover} alt="" noBorders={true} />
     </ProportionalContainer>
 
     <div class="short-video-card__media-icons">
-      <Icon src={IconPhone}></Icon>
+      <Icon src={shortVideo.products.length ? IconShoppingBag : IconPhone}></Icon>
     </div>
   </div>
 
-  {#if shortVideo.text}
-    <div class="short-video-card__text">
-      <LineClamp value={shortVideo.text} maxLines={2} enableShowMore={false} />
+  <div class="short-video-card__info">
+    <div class="short-video-card__meta">
+      <span><TimeAgo date={shortVideo.displayDate} locale={locale} /></span>
+      {#if shortVideo.viewsCount}
+        <span>&middot;</span>
+        <span>{localization.viewsLabel(shortVideo.viewsCount)}</span>
+      {/if}
     </div>
-  {/if}
+
+    <div class="short-video-card__text" use:adjustTextSize>
+      {#if shortVideo.text}
+        {shortVideo.text}
+      {/if}
+    </div>
+
+    <div class="short-video-card__products">
+      {#snippet productView(product: IPostProductCardModel)}
+        <div class="product-card">
+          <ProportionalContainer ratio={4 / 5}>
+            <ImageRounded src={product.image} alt={product.title} noBorders={true} />
+          </ProportionalContainer>
+
+          <div class="product-card__info">
+            <div class="product-card__title">
+              <LineClamp maxLines={1} enableShowMore={false} locale={locale}>{product.title}</LineClamp>
+            </div>
+            <div class="product-card__price">
+              <LineClamp maxLines={1} locale={locale}>
+                <span>
+                  {toPriceRepresentation({
+                    amount: product.salePrice || product.price,
+                    currency: product.currency,
+                    options: { currencyMode: 'none' }
+                  })}
+                </span>
+                {#if product.salePrice}
+                  &nbsp;
+                  <span
+                    >{toPriceRepresentation({
+                      amount: product.price,
+                      currency: product.currency,
+                      options: { currencyMode: 'none' }
+                    })}
+                  </span>
+                {/if}
+              </LineClamp>
+            </div>
+          </div>
+        </div>
+      {/snippet}
+
+      {#each shortVideo.products as product (product.id)}
+        {@render productView(product)}
+      {/each}
+    </div>
+  </div>
 
   {#if on?.click}
     <button type="button" onclick={on.click} class="short-video-card__link" aria-label="none">&nbsp;</button>
@@ -44,13 +129,12 @@ let { shortVideo, aspectRatio = 9 / 16, on } = $props();
   overflow: hidden;
   container-type: inline-size;
   width: 100%;
-  border-radius: 0.375rem;
 }
 .short-video-card__media {
   display: flex;
   align-items: center;
   justify-content: center;
-  --image--rounded--outer--border-radius: 1%;
+  --image--rounded--outer--border-radius: 0.5rem;
 }
 .short-video-card__media-icons {
   position: absolute;
@@ -63,17 +147,45 @@ let { shortVideo, aspectRatio = 9 / 16, on } = $props();
   --icon--color: #ffffff;
   --icon--filter: drop-shadow(1px 1px 0 rgba(0, 0, 0, 0.2));
 }
+.short-video-card__info {
+  margin-top: clamp(0.4375rem, 3.6cqi, 0.625rem);
+  display: flex;
+  flex-direction: column;
+  gap: clamp(0.4375rem, 3.6cqi, 0.625rem);
+}
+.short-video-card__meta {
+  font-size: clamp(0.625rem, 4.3cqi, 0.75rem);
+  font-weight: 500;
+  color: #999999;
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+}
 .short-video-card__text {
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  background: linear-gradient(0deg, rgba(0, 0, 0, 0.9) 30%, rgba(0, 0, 0, 0.01) 100%);
   color: #ffffff;
-  font-size: 0.75rem;
-  font-weight: 400;
-  padding: 0.75rem 0.75rem;
-  padding-top: 2.5rem;
+  --min-font: 0.75rem;
+  --max-font: 0.9375rem;
+  --line-height: 1.2;
+  font-size: clamp(var(--min-font), 5.4cqi, var(--max-font));
+  line-height: var(--line-height);
+  font-weight: 500;
+  height: clamp(var(--min-font) * var(--line-height) * 2 - 1px, 5.4cqi * var(--line-height) * 2 - 1px, var(--max-font) * var(--line-height) * 2 - 1px);
+  white-space: pre-line;
+  word-break: break-word;
+  display: -webkit-box;
+  overflow: hidden;
+  -webkit-box-orient: vertical;
+  line-clamp: 2;
+  -webkit-line-clamp: 2;
+  text-overflow: ellipsis;
+}
+.short-video-card__products {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: clamp(0.625rem, 5cqi, 0.875rem);
+}
+.short-video-card__products > :nth-child(n+4) {
+  display: none;
 }
 .short-video-card__link {
   position: absolute;
@@ -81,4 +193,33 @@ let { shortVideo, aspectRatio = 9 / 16, on } = $props();
   left: 0;
   width: 100%;
   height: 100%;
+}
+
+.product-card {
+  --image--rounded--outer--border-radius: 0.375rem;
+  container-type: inline-size;
+}
+.product-card__info {
+  display: flex;
+  flex-direction: column;
+  color: #ffffff;
+  font-size: clamp(0.5rem, 2.9cqi, 0.5rem);
+  line-height: clamp(0.75rem, 4.3cqi, 0.75rem);
+  font-weight: 500;
+  /* Set 'container-type: inline-size;' to reference container*/
+}
+@container (width < 60px) {
+  .product-card__info {
+    display: none;
+  }
+}
+.product-card__title {
+  font-weight: 500;
+}
+.product-card__price {
+  font-weight: 600;
+}
+.product-card__price span:nth-child(2) {
+  color: #999999;
+  text-decoration: line-through;
 }</style>

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

@@ -1,7 +1,8 @@
+import type { Locale } from '../../core/locale';
 import type { ShortVideoCardModel } from './types';
 type Props = {
     shortVideo: ShortVideoCardModel;
-    aspectRatio?: number;
+    locale: Locale;
     on?: {
         click?: () => void;
     };

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

@@ -0,0 +1,5 @@
+import { type Locale } from '../../core/locale';
+export declare class ShortVideoCardLocalization {
+    viewsLabel: (count: number) => string;
+    constructor(locale: Locale);
+}

package/dist/short-videos/short-video-card/localization.js

@@ -0,0 +1,13 @@
+import {} from '../../core/locale';
+export class ShortVideoCardLocalization {
+    viewsLabel;
+    constructor(locale) {
+        this.viewsLabel = loc.viewsLabel[locale];
+    }
+}
+const loc = {
+    viewsLabel: {
+        en: (count) => `${count} view${count !== 1 ? 's' : ''}`,
+        no: (count) => `${count} visning${count !== 1 ? 'er' : ''}`
+    }
+};

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

@@ -1,5 +1,9 @@
+import type { IPostProductCardModel } from '../../posts/model';
 export type ShortVideoCardModel = {
     id: string;
     text: string | null;
     cover: string;
+    displayDate: string;
+    viewsCount: number;
+    products: IPostProductCardModel[];
 };

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

@@ -1,10 +1,8 @@
 import { InternalMediaCenterConfig } from '../../media-center/config/internal-media-center-config';
 import {} from '../../media-center/config/types';
-import { MediaCenter } from '../../media-center/media-center';
 import { InternalPostAnalyticsHandler } from '../../posts/handlers';
+import { openPostsPlayer } from '../../posts/posts-player';
 import { InternalShortVideoPlayerItemsProvider } from '../data-providers';
-import { ModalShadowHost } from '../../ui/shadow-dom';
-import { mount, unmount } from 'svelte';
 /**
  * Opens the short videos player modal.
  *
@@ -71,35 +69,30 @@ import { mount, unmount } from 'svelte';
 export async function openShortVideosPlayer(init) {
     const { ids, graphqlOrigin, initialId, initiator, playerSettings, on } = init;
     const dataProvider = new InternalShortVideoPlayerItemsProvider({ ids, graphqlOrigin, initialId, initiator });
-    const mediaCenterConfig = init.mediaPageId ? new InternalMediaCenterConfig(init.mediaPageId, graphqlOrigin) : undefined;
+    const mediaCenterConfig = init.mediaPageId ? new InternalMediaCenterConfig({ mediaPageId: init.mediaPageId, graphqlOrigin, initiator }) : undefined;
     const analyticsHandler = new InternalPostAnalyticsHandler(graphqlOrigin);
-    const shadowHost = new ModalShadowHost();
-    const mounted = mount(MediaCenter, {
-        target: shadowHost.shadowRoot,
-        props: {
-            config: mediaCenterConfig || null,
-            playerProps: {
-                mode: 'posts',
-                props: {
-                    dataProvider,
-                    analyticsHandler,
-                    playerSettings: {
-                        hideCloseButton: playerSettings?.hideCloseButton,
-                        locale: playerSettings?.locale,
-                        showStreamsCloudWatermark: true
-                    },
-                    on: {
-                        playerClosed: async () => {
-                            await unmount(mounted);
-                            shadowHost.remove();
-                            if (on?.playerClosed) {
-                                on.playerClosed();
-                            }
-                        }
-                    }
-                }
-            }
-        }
-    });
-    shadowHost.attachToBody();
+    if (mediaCenterConfig) {
+        openPostsPlayer({
+            postsProvider: dataProvider,
+            mediaCenterConfig,
+            playerSettings: {
+                hideCloseButton: playerSettings?.hideCloseButton,
+                locale: playerSettings?.locale,
+                showStreamsCloudWatermark: true
+            },
+            on
+        });
+    }
+    else {
+        openPostsPlayer({
+            postsProvider: dataProvider,
+            analyticsHandler,
+            playerSettings: {
+                hideCloseButton: playerSettings?.hideCloseButton,
+                locale: playerSettings?.locale,
+                showStreamsCloudWatermark: true
+            },
+            on
+        });
+    }
 }

package/dist/streams/layout/element-views/cmp.stream-element.svelte

@@ -70,9 +70,9 @@ const productModel = $derived.by(() => {
 {:else if model.type === StreamElementType.Stock}
   <StockStreamElementView model={model} locale={locale} />
 {:else if model.type === StreamElementType.Text}
-  <TextStreamElementView model={model} />
+  <TextStreamElementView model={model} locale={locale} />
 {:else if model.type === StreamElementType.TextRef && data}
-  <TextRefStreamElementView model={model} data={data} />
+  <TextRefStreamElementView model={model} data={data} locale={locale} />
 {:else if model.type === StreamElementType.WebView}
   <WebViewStreamElementView model={model} />
 {/if}

package/dist/streams/layout/element-views/cmp.text-ref-stream-element.svelte

@@ -1,7 +1,7 @@
-<script lang="ts">import { LineClamp } from '../../../ui/line-clamp';
+<script lang="ts">import { LineClamp, LineClampAuto } from '../../../ui/line-clamp';
 import { getStringValueByKey } from './data-by-key-accessor';
 import { generateTextStyles } from '../styles-transformer';
-let { model, data } = $props();
+let { model, data, locale } = $props();
 const value = $derived.by(() => {
     const values = [];
     const value = getStringValueByKey(data, model.key);
@@ -19,5 +19,9 @@ const value = $derived.by(() => {
 </script>
 
 <div class="text-ref-stream-element" style={generateTextStyles(model.styles)}>
-  <LineClamp value={value} maxLines={model.styles?.maxLines || 'auto'} />
+  {#if model.styles?.maxLines}
+    <LineClamp maxLines={model.styles?.maxLines} locale={locale}>{value}</LineClamp>
+  {:else}
+    <LineClampAuto locale={locale}>{value}</LineClampAuto>
+  {/if}
 </div>

package/dist/streams/layout/element-views/cmp.text-ref-stream-element.svelte.d.ts

@@ -1,8 +1,10 @@
+import type { Locale } from '../../../core/locale';
 import type { TextRefStreamElementModel } from '../elements';
 import type { StreamSlotDataRef } from '../slot-data-ref';
 type Props = {
     model: TextRefStreamElementModel;
     data: StreamSlotDataRef;
+    locale: Locale;
 };
 declare const Cmp: import("svelte").Component<Props, {}, "">;
 type Cmp = ReturnType<typeof Cmp>;

package/dist/streams/layout/element-views/cmp.text-stream-element.svelte

@@ -1,11 +1,15 @@
-<script lang="ts">import { LineClamp } from '../../../ui/line-clamp';
+<script lang="ts">import { LineClamp, LineClampAuto } from '../../../ui/line-clamp';
 import { generateTextStyles } from '../styles-transformer';
-let { model, placeholder } = $props();
+let { model, locale, placeholder } = $props();
 </script>
 
 <div class="text-stream-element" style={generateTextStyles(model.styles)}>
   {#if model.value}
-    <LineClamp value={model.value} maxLines={model.styles?.maxLines || 'auto'} />
+    {#if model.styles?.maxLines}
+      <LineClamp maxLines={model.styles?.maxLines} locale={locale}>{model.value}</LineClamp>
+    {:else}
+      <LineClampAuto locale={locale}>{model.value}</LineClampAuto>
+    {/if}
   {:else if placeholder}
     {@render placeholder()}
   {/if}

package/dist/streams/layout/element-views/cmp.text-stream-element.svelte.d.ts

@@ -1,8 +1,10 @@
+import type { Locale } from '../../../core/locale';
 import type { TextStreamElementModel } from '../elements';
 import type { Snippet } from 'svelte';
 type Props = {
     model: TextStreamElementModel;
     placeholder?: Snippet;
+    locale: Locale;
 };
 declare const Cmp: import("svelte").Component<Props, {}, "">;
 type Cmp = ReturnType<typeof Cmp>;

package/dist/streams/layout/element-views/price-element-view.svelte

@@ -138,12 +138,12 @@ $effect(() => {
     {/if}
     {#if model.textAfter}
       <div class="price-stream-element__text-after" style={textAfterCustomStyles}>
-        <LineClamp value={model.textAfter} maxLines={1} />
+        <LineClamp maxLines={1} locale={localization.locale}>{model.textAfter}</LineClamp>
       </div>
     {/if}
   </div>
   {#if model.stock}
-    <StockElementView model={model.stock} heightOverrideDdu={stockElementHeight} locale={localization.stockLocalization} />
+    <StockElementView model={model.stock} heightOverrideDdu={stockElementHeight} locale={localization.locale} />
   {/if}
 </div>
 

package/dist/streams/layout/element-views/price-stream-element-localization.d.ts

@@ -2,6 +2,6 @@ import { type Locale } from '../../../core/locale';
 export declare class PriceStreamElementLocalization {
     saveValue: (value: string | number) => string;
     beforeValue: (value: string) => string;
-    stockLocalization: Locale;
+    locale: Locale;
     constructor(locale: Locale);
 }

package/dist/streams/layout/element-views/price-stream-element-localization.js

@@ -2,11 +2,11 @@ import {} from '../../../core/locale';
 export class PriceStreamElementLocalization {
     saveValue;
     beforeValue;
-    stockLocalization;
+    locale;
     constructor(locale) {
         this.saveValue = loc.saveValue[locale];
         this.beforeValue = loc.beforeValue[locale];
-        this.stockLocalization = locale;
+        this.locale = locale;
     }
 }
 const loc = {

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

@@ -13,6 +13,8 @@ export const mapToPostModel = (model) => {
         kicker: null,
         title: null,
         text: model.text,
+        viewsCount: model.header?.postViewsCount ?? 0,
+        displayDate: model.header?.postDisplayDate ?? '',
         heading: model.header && {
             image: model.header.sourceImage,
             name: model.header.sourceName,

package/dist/streams/streams-player/index.d.ts

@@ -1,7 +1,8 @@
+import type { Locale } from '../../core/locale';
 import { type IMediaCenterConfig } from '../../media-center/config/types';
 import type { IPostSocialInteractionsHandler } from '../../posts/social-interactions';
 import type { StreamPageViewerModel } from '../stream-page-viewer/types';
-import type { IStreamAnalyticsHandler, IStreamsPlayerDataProvider, StreamAmplificationParameters, StreamPlayerModel, StreamsPlayerSettings } from './types';
+import type { IStreamAnalyticsHandler, IStreamsPlayerDataProvider, StreamAmplificationParameters, StreamPlayerModel } from './types';
 export { type StreamPlayerModel, type StreamPageViewerModel };
 export { mapToStreamPlayerModel } from '../data-loaders/mapper';
 export type { IStreamsPlayerDataProvider, IStreamAnalyticsHandler, IMediaCenterConfig };
@@ -110,7 +111,19 @@ export type { IStreamsPlayerDataProvider, IStreamAnalyticsHandler, IMediaCenterC
  */
 export declare function openStreamsPlayer(init: {
     dataProvider: IStreamsPlayerDataProvider;
-    mediaCenterConfig?: IMediaCenterConfig;
+    mediaCenterConfig: IMediaCenterConfig;
+    amplificationParameters?: StreamAmplificationParameters;
+    playerSettings?: StreamsPlayerSettings;
+    on?: {
+        streamActivated?: (data: {
+            title: string;
+            image: string | null;
+        }) => void;
+        playerClosed?: () => void;
+    };
+}): void;
+export declare function openStreamsPlayer(init: {
+    dataProvider: IStreamsPlayerDataProvider;
     postSocialInteractionsHandler?: IPostSocialInteractionsHandler;
     analyticsHandler?: IStreamAnalyticsHandler;
     amplificationParameters?: StreamAmplificationParameters;
@@ -139,3 +152,9 @@ export declare function openStreamsPlayer(init: {
         playerClosed?: () => void;
     };
 }): void;
+export type StreamsPlayerSettings = {
+    disableBackground?: boolean;
+    locale?: Locale;
+    showStreamsCloudWatermark?: boolean;
+    hideCloseButton?: boolean;
+};