@streamscloud/embeddable 10.1.2 → 12.0.0

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/data-loaders/mapper.js

@@ -1,6 +1,5 @@
 import { ProfileType } from '../../core/enums';
 export const mapToStreamPlayerModel = (payload) => {
-    const headerDataProvider = payload.availableFrom ?? payload.ownerProfile;
     return {
         id: payload.id,
         title: payload.title,
@@ -9,10 +8,6 @@ export const mapToStreamPlayerModel = (payload) => {
         createdAt: payload.createdAt,
         publishedAt: payload.publishedAt,
         organizationId: payload.ownerProfile.type === ProfileType.Organization ? payload.ownerProfile.id : null,
-        header: {
-            name: headerDataProvider.name,
-            image: headerDataProvider.image
-        },
         pagesCount: payload.pagesCount
     };
 };

package/dist/streams/data-loaders/operations.generated.d.ts

@@ -17,15 +17,9 @@ export type GetStreamsQuery = {
                 url: string;
             } | null;
             ownerProfile: {
-                image: string | null;
-                name: string;
                 id: string;
                 type: SchemaTypes.ProfileType;
             };
-            availableFrom: {
-                image: string;
-                name: string;
-            } | null;
         }>;
     };
 };
@@ -57,15 +51,9 @@ export type StreamPlayerPayloadFragment = {
         url: string;
     } | null;
     ownerProfile: {
-        image: string | null;
-        name: string;
         id: string;
         type: SchemaTypes.ProfileType;
     };
-    availableFrom: {
-        image: string;
-        name: string;
-    } | null;
 };
 export declare const StreamPlayerPayloadFragmentDoc: DocumentNode<StreamPlayerPayloadFragment, unknown>;
 export declare const GetStreamsDocument: DocumentNode<GetStreamsQuery, GetStreamsQueryVariables>;

package/dist/streams/data-loaders/operations.generated.js

@@ -24,24 +24,11 @@ export const StreamPlayerPayloadFragmentDoc = {
                         selectionSet: {
                             kind: 'SelectionSet',
                             selections: [
-                                { kind: 'Field', name: { kind: 'Name', value: 'image' } },
-                                { kind: 'Field', name: { kind: 'Name', value: 'name' } },
                                 { kind: 'Field', name: { kind: 'Name', value: 'id' } },
                                 { kind: 'Field', name: { kind: 'Name', value: 'type' } }
                             ]
                         }
                     },
-                    {
-                        kind: 'Field',
-                        name: { kind: 'Name', value: 'availableFrom' },
-                        selectionSet: {
-                            kind: 'SelectionSet',
-                            selections: [
-                                { kind: 'Field', name: { kind: 'Name', value: 'image' } },
-                                { kind: 'Field', name: { kind: 'Name', value: 'name' } }
-                            ]
-                        }
-                    },
                     { kind: 'Field', name: { kind: 'Name', value: 'pagesCount' } }
                 ]
             }
@@ -108,24 +95,11 @@ export const GetStreamsDocument = {
                         selectionSet: {
                             kind: 'SelectionSet',
                             selections: [
-                                { kind: 'Field', name: { kind: 'Name', value: 'image' } },
-                                { kind: 'Field', name: { kind: 'Name', value: 'name' } },
                                 { kind: 'Field', name: { kind: 'Name', value: 'id' } },
                                 { kind: 'Field', name: { kind: 'Name', value: 'type' } }
                             ]
                         }
                     },
-                    {
-                        kind: 'Field',
-                        name: { kind: 'Name', value: 'availableFrom' },
-                        selectionSet: {
-                            kind: 'SelectionSet',
-                            selections: [
-                                { kind: 'Field', name: { kind: 'Name', value: 'image' } },
-                                { kind: 'Field', name: { kind: 'Name', value: 'name' } }
-                            ]
-                        }
-                    },
                     { kind: 'Field', name: { kind: 'Name', value: 'pagesCount' } }
                 ]
             }

package/dist/streams/data-loaders/operations.graphql

@@ -27,14 +27,8 @@ fragment StreamPlayerPayloadFragment on Stream {
     url
   }
   ownerProfile {
-    image
-    name
     id
     type
   }
-  availableFrom {
-    image
-    name
-  }
   pagesCount
 }

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

@@ -2,12 +2,13 @@
 import { PostViewer } from '../../../posts/post-viewer';
 import { ShortVideoStreamElementLocalization } from './short-video-stream-element-localization';
 import { mapToPostModel } from '../models';
-let { data, trackingParams, locale, on } = $props();
+let { data, trackingParams, locale, controlsColors = null, on } = $props();
 const localization = $derived(new ShortVideoStreamElementLocalization(locale));
 </script>
 
 <PostViewer
   model={new PostModel(mapToPostModel(data))}
+  controlsColors={controlsColors}
   trackingParams={trackingParams ? { streamId: trackingParams.streamId, campaignId: trackingParams.campaignId } : false}
   autoplay={false}
   enableControls={false}

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

@@ -5,6 +5,10 @@ type Props = {
     data: StreamLayoutShortVideoModel;
     trackingParams: StreamTrackingParams;
     locale: Locale;
+    controlsColors?: {
+        active: string | null;
+        inactive: string | null;
+    } | null;
     on?: {
         progress?: (progress: number) => void;
     };

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/stream-card/cmp.stream-card.svelte

@@ -55,25 +55,25 @@ let { stream, aspectRatio = 9 / 16, on } = $props();
   bottom: 0;
   left: 0;
   right: 0;
-  height: 2.5rem;
+  height: clamp(1.75rem, 20cqi, 2.5rem);
+  padding-inline: clamp(0.5rem, 6cqi, 0.75rem);
   background: rgba(0, 0, 0, 0.8);
   color: #ffffff;
-  padding: 0 0.75rem;
   display: flex;
   flex-direction: column;
   align-content: center;
   justify-content: center;
 }
 .stream-card__title {
-  font-size: 0.875rem;
-  font-weight: 500;
+  font-size: clamp(0.5rem, 7cqi, 0.875rem);
+  font-weight: 600;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   text-align: center;
 }
 .stream-card__sub-title {
-  font-size: 0.625rem;
+  font-size: clamp(0.4375rem, 5cqi, 0.625rem);
   font-weight: 400;
   white-space: nowrap;
   overflow: hidden;