@streamscloud/embeddable 7.5.2 → 8.0.1

package/dist/posts/model/post-media-model.svelte.js

@@ -0,0 +1,16 @@
+export class PostViewerMediaModel {
+    currentItem = $derived.by(() => {
+        const item = this.items[this.currentIndex];
+        return item ? item : { isImage: true, url: '' };
+    });
+    currentIndex = $state(0);
+    isGallery = $derived.by(() => this.items.length > 1);
+    items;
+    mediaFit;
+    constructor(init) {
+        const { media, mediaFit, mediaIndex } = init;
+        this.items = media;
+        this.mediaFit = mediaFit;
+        this.currentIndex = mediaIndex || 0;
+    }
+}

package/dist/posts/model/post-model.d.ts

@@ -0,0 +1,25 @@
+import { PostViewerMediaModel } from './post-media-model.svelte';
+import type { IPostModel, IPostAdCardModel, IPostHeadingModel, IPostProductCardModel } from './types';
+export declare class PostModel {
+    id: string;
+    media: PostViewerMediaModel;
+    texts: {
+        kicker: string | null;
+        title: string | null;
+        text: string | null;
+        readMoreUrl: string | null;
+    };
+    heading: PostHeadingModel | null;
+    enableSocialInteractions: boolean;
+    attachments: false | {
+        products: PostProductCardModel[];
+        ads: PostAdCardModel[];
+    };
+    constructor(init: IPostModel & {
+        mediaIndex?: number;
+    });
+}
+type PostHeadingModel = IPostHeadingModel;
+type PostAdCardModel = IPostAdCardModel;
+type PostProductCardModel = IPostProductCardModel;
+export {};

package/dist/posts/model/post-model.js

@@ -0,0 +1,28 @@
+import { PostViewerMediaModel } from './post-media-model.svelte';
+export class PostModel {
+    id;
+    media;
+    texts;
+    heading;
+    enableSocialInteractions;
+    attachments;
+    constructor(init) {
+        this.id = init.id;
+        this.media = new PostViewerMediaModel({ media: init.media, mediaFit: init.mediaFit, mediaIndex: init.mediaIndex });
+        this.texts = {
+            kicker: init.kicker,
+            title: init.title,
+            text: init.text,
+            readMoreUrl: init.readMoreUrl ?? null
+        };
+        this.heading = init.heading;
+        this.enableSocialInteractions = init.enableSocialInteractions;
+        this.attachments =
+            init.products.length || init.ads.length
+                ? {
+                    products: init.products,
+                    ads: init.ads
+                }
+                : false;
+    }
+}

package/dist/posts/model/types.d.ts

@@ -1,13 +1,57 @@
-import type { AdCardModel } from '../../ads/ad-card';
-import type { ProductCardModel } from '../../products/product-card';
-export type PostContainer = PostAttachmentsContainer & {
+import { AdType, type Currency } from '../../core/enums';
+export type IPostModel = {
     id: string;
+    media: IPostMediaItemModel[];
+    mediaFit: PostModelMediaFit;
+    kicker: string | null;
+    title: string | null;
+    text: string | null;
+    readMoreUrl?: string;
+    heading: IPostHeadingModel | null;
     enableSocialInteractions: boolean;
-    media: {
-        isMutable: boolean;
-    } | null;
+    products: IPostProductCardModel[];
+    ads: IPostAdCardModel[];
+};
+export type IPostMediaItemModel = {
+    isImage: true;
+    url: string;
+} | {
+    isImage: false;
+    url: string;
+    thumbnailUrl: string;
 };
-export type PostAttachmentsContainer = {
-    ads: AdCardModel[];
-    products: ProductCardModel[];
+export type IPostHeadingModel = {
+    image: string | null;
+    name: string;
+    displayDate: string;
+    viewsCount: number;
+};
+export type PostModelMediaFit = 'cover' | 'contain';
+export type IPostProductCardModel = {
+    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 IPostAdCardModel = {
+    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/posts/model/types.js

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

package/dist/posts/model/utils.d.ts

@@ -0,0 +1,4 @@
+import type { IPostMediaItemModel } from './types';
+export declare const getPostCoverImage: (post: {
+    media: IPostMediaItemModel[];
+}) => string;

package/dist/posts/model/utils.js

@@ -0,0 +1,7 @@
+export const getPostCoverImage = (post) => {
+    const firstItem = post.media[0];
+    if (!firstItem) {
+        return '';
+    }
+    return firstItem.isImage ? firstItem.url : firstItem.thumbnailUrl;
+};

package/dist/posts/post-viewer/attachments-horizontal.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">import { horizontalWheelScroll, swallowTouch } from '../../core/actions';
 import { Currency } from '../../core/enums';
+import { PostModel } from '../model';
 import { toPriceRepresentation } from '../../products/price-helper';
 import { Icon, IconColor } from '../../ui/icon';
 import { ImageRounded } from '../../ui/image';
@@ -7,7 +8,10 @@ import { PostViewerUiManager } from './ui-manager.svelte';
 import IconTargetArrow from '@fluentui/svg-icons/icons/target_arrow_20_regular.svg?raw';
 let { model, uiManager, on } = $props();
 const attachmentsToShow = $derived.by(() => {
-    const products = model.products
+    if (!model.attachments) {
+        return [];
+    }
+    const products = model.attachments.products
         .filter((p) => !!p.image)
         .map((p) => ({
         isAd: false,
@@ -22,7 +26,7 @@ const attachmentsToShow = $derived.by(() => {
         title: p.title,
         description: p.shortDescription
     }));
-    const ads = model.ads
+    const ads = model.attachments.ads
         .filter((a) => !!a.image)
         .map((a) => {
         var _a;
@@ -154,6 +158,7 @@ const variables = $derived.by(() => {
   }
 }
 .attachments-horizontal {
+  pointer-events: auto;
   display: flex;
   gap: 0.5rem;
   flex-wrap: nowrap;

package/dist/posts/post-viewer/attachments-horizontal.svelte.d.ts

@@ -1,7 +1,7 @@
-import type { PostViewerModel } from './types';
+import { PostModel } from '../model';
 import { PostViewerUiManager } from './ui-manager.svelte';
 type Props = {
-    model: PostViewerModel;
+    model: PostModel;
     uiManager: PostViewerUiManager;
     on?: {
         productClick?: (productId: string) => void;

package/dist/posts/post-viewer/cmp.post-viewer.svelte

@@ -1,8 +1,9 @@
 <script lang="ts">import { PostControls } from '../controls';
-import { LineClamp } from '../../ui/line-clamp';
+import { PostModel } from '../model';
 import { default as AttachmentsHorizontal } from './attachments-horizontal.svelte';
 import { default as Heading } from './heading.svelte';
-import { default as PostMedia } from './post-media.svelte';
+import { default as PostMedia } from './media/post-media.svelte';
+import { default as Texts } from './post-texts.svelte';
 import { PostViewerLocalization } from './post-viewer-localization';
 import { PostViewerUiManager } from './ui-manager.svelte';
 let { model, socialInteractionsHandler, enableAttachments = true, enableControls = true, autoplay = 'on-appearance', locale = 'en', on } = $props();
@@ -35,40 +36,33 @@ const trackControlsPanelSize = (node) => {
         }
     };
 };
-const handleMediaContentChanged = (data) => {
-    console.warn('gallery:', data.galleryMode, 'seekBar:', data.videoSeekBar);
-};
 const variables = $derived.by(() => {
-    const values = [
-        `--_post-viewer--information--text--padding: 0 ${uiManager.controlsPanelWidth ? uiManager.controlsPanelWidth : uiManager.infoPaddingInline}px 0 ${uiManager.infoPaddingInline}px`
-    ];
+    const values = [];
+    if (model.media.isGallery) {
+        values.push(`--_post-viewer--information--padding-bottom: 45px`);
+    }
     return values.join(';');
 });
 </script>
 
 <div class="post-viewer" style={variables} use:viewerMounted>
-  <PostMedia id={model.id} media={model.media} autoplay={autoplay} on={{ progress: on?.progress, mediaChanged: handleMediaContentChanged }} />
+  <PostMedia id={model.id} media={model.media} locale={locale} autoplay={autoplay} on={{ videoProgress: on?.progress }} />
   <div class="post-viewer__information">
     {#if model.heading}
       <Heading model={model.heading} uiManager={uiManager} localization={localization} />
     {/if}
-    <div class="post-viewer__text">
-      {#if model.text}
-        <LineClamp value={model.text} maxLines={2} enableShowMore={true} />
-      {/if}
-    </div>
-    {#if uiManager.showAttachments && (model.ads.length || model.products.length)}
-      <div class="post-viewer__attachments">
-        <AttachmentsHorizontal
-          model={model}
-          uiManager={uiManager}
-          on={{
-            productClick: on?.productClick,
-            productImpression: on?.productImpression,
-            adClick: on?.adClick,
-            adImpression: on?.adImpression
-          }} />
-      </div>
+    <Texts model={model.texts} uiManager={uiManager} localization={localization} />
+
+    {#if uiManager.showAttachments && model.attachments}
+      <AttachmentsHorizontal
+        model={model}
+        uiManager={uiManager}
+        on={{
+          productClick: on?.productClick,
+          productImpression: on?.productImpression,
+          adClick: on?.adClick,
+          adImpression: on?.adImpression
+        }} />
     {/if}
   </div>
 
@@ -94,7 +88,6 @@ const variables = $derived.by(() => {
   }
 }
 .post-viewer {
-  --video--media-fit: cover;
   width: 100%;
   min-width: 100%;
   max-width: 100%;
@@ -116,7 +109,6 @@ const variables = $derived.by(() => {
   position: absolute;
   left: auto;
   right: 0;
-  top: 5rem;
   bottom: 6.25rem;
   gap: 2.5rem;
   display: flex;
@@ -126,38 +118,23 @@ const variables = $derived.by(() => {
   padding: 0 0.625rem;
 }
 .post-viewer__information {
+  pointer-events: none;
   position: absolute;
   bottom: 0;
   left: 0;
   right: 0;
   padding: 1.875rem 0;
+  padding-bottom: var(--_post-viewer--information--padding-bottom, 1.875rem);
+  display: flex;
+  flex-direction: column;
+  gap: 1.25rem;
   background: linear-gradient(0deg, #000 0%, rgba(0, 0, 0, 0) 100%);
   /* Set 'container-type: inline-size;' to reference container*/
 }
 @container (width < 576px) {
   .post-viewer__information {
     padding-block: 1.25rem;
-  }
-}
-.post-viewer__text {
-  color: #ffffff;
-  font-size: 1.125rem;
-  font-weight: 400;
-  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 6px rgba(0, 0, 0, 0.05);
-  padding: var(--_post-viewer--information--text--padding);
-  /* Set 'container-type: inline-size;' to reference container*/
-}
-@container (width < 576px) {
-  .post-viewer__text {
-    font-size: 0.9375rem;
-  }
-}
-.post-viewer__attachments {
-  margin-top: 1.25rem;
-  /* Set 'container-type: inline-size;' to reference container*/
-}
-@container (width < 576px) {
-  .post-viewer__attachments {
-    margin-top: 0.625rem;
+    padding-bottom: var(--_post-viewer--information--padding-bottom, 1.25rem);
+    gap: 0.625rem;
   }
 }</style>

package/dist/posts/post-viewer/cmp.post-viewer.svelte.d.ts

@@ -1,8 +1,8 @@
 import type { Locale } from '../../core/locale';
+import { PostModel } from '../model';
 import type { IPostSocialInteractionsHandler } from '../social-interactions';
-import type { PostViewerModel } from './types';
 type Props = {
-    model: PostViewerModel;
+    model: PostModel;
     socialInteractionsHandler?: IPostSocialInteractionsHandler;
     enableAttachments?: boolean;
     enableControls?: boolean;

package/dist/posts/post-viewer/heading.svelte

@@ -1,4 +1,5 @@
-<script lang="ts">import { PostViewerUiManager } from './ui-manager.svelte';
+<script lang="ts">import { PostModel } from '../model';
+import { PostViewerUiManager } from './ui-manager.svelte';
 import { ImageRound } from '../../ui/image';
 import { TimeAgo } from '../../ui/time-ago';
 import { PostViewerLocalization } from './post-viewer-localization';

package/dist/posts/post-viewer/heading.svelte.d.ts

@@ -1,8 +1,8 @@
+import { PostModel } from '../model';
 import { PostViewerUiManager } from './ui-manager.svelte';
 import { PostViewerLocalization } from './post-viewer-localization';
-import type { PostViewerHeadingModel } from './types';
 type Props = {
-    model: PostViewerHeadingModel;
+    model: NonNullable<PostModel['heading']>;
     uiManager: PostViewerUiManager;
     localization: PostViewerLocalization;
 };

package/dist/posts/post-viewer/index.d.ts

@@ -1,4 +1,2 @@
 export { default as PostViewer } from './cmp.post-viewer.svelte';
-export type { PostViewerModel, PostViewerAdCardModel, PostViewerProductCardModel } from './types';
-export { mapToPostViewerModel } from './mapper';
-export { getPostCoverImage } from './utils';
+export { mapToPostModel } from './mapper';

package/dist/posts/post-viewer/index.js

@@ -1,3 +1,2 @@
 export { default as PostViewer } from './cmp.post-viewer.svelte';
-export { mapToPostViewerModel } from './mapper';
-export { getPostCoverImage } from './utils';
+export { mapToPostModel } from './mapper';

package/dist/posts/post-viewer/mapper.d.ts

@@ -1,3 +1,3 @@
+import type { IPostModel } from '../model';
 import type { PostViewerPayloadFragment } from './operations.generated';
-import type { PostViewerModel } from './types';
-export declare const mapToPostViewerModel: (payload: PostViewerPayloadFragment) => PostViewerModel;
+export declare const mapToPostModel: (payload: PostViewerPayloadFragment) => IPostModel;

package/dist/posts/post-viewer/mapper.js

@@ -1,10 +1,13 @@
 import { MediaType } from '../../core/enums';
 import { getMediaItemImageUrl } from '../../core/media';
 import { shouldUseSalePrice } from '../../products/price-helper';
-export const mapToPostViewerModel = (payload) => {
+export const mapToPostModel = (payload) => {
     return {
         id: payload.id,
         media: mapToPostViewerMediaModel(payload.postData),
+        mediaFit: mediaFitFromPostType(payload.postData),
+        kicker: extractPostKicker(payload.postData),
+        title: extractPostTitle(payload.postData),
         text: extractPostText(payload.postData),
         enableSocialInteractions: payload.enableSocialInteractions,
         heading: null,
@@ -19,35 +22,28 @@ export const mapToPostViewerModel = (payload) => {
         // )
     };
 };
-const extractPostText = (payload) => {
-    return payload.articleData?.title ?? payload.mediaData?.text ?? payload.momentData?.text ?? payload.shortVideoData?.text ?? payload.videoData?.text ?? null;
+const mediaFitFromPostType = (payload) => {
+    return payload.shortVideoData || payload.momentData ? 'cover' : 'contain';
+};
+const extractPostKicker = (payload) => {
+    return payload.articleData?.kicker ?? null;
 };
-const emptyMedia = { type: 'image', url: '', isMutable: false };
-const toSingleMediaItem = (mediaBlob) => {
-    switch (mediaBlob.type) {
-        case MediaType.Image:
-            return { type: 'image', url: mediaBlob.url, isMutable: false };
-        case MediaType.Video:
-        case MediaType.ShortVideo:
-            return { type: 'video', url: mediaBlob.url, thumbnailUrl: mediaBlob.thumbnailUrl, isMutable: true };
-        default:
-            return emptyMedia;
-    }
+const extractPostTitle = (payload) => {
+    return payload.articleData?.title ?? payload.videoData?.title ?? null;
+};
+const extractPostText = (payload) => {
+    return payload.mediaData?.text ?? payload.momentData?.text ?? payload.shortVideoData?.text ?? payload.videoData?.text ?? null;
 };
 const mapToPostViewerMediaModel = (payload) => {
-    const mediaBlob = payload.media[0];
-    if (!payload.media.length) {
-        return emptyMedia;
-    }
-    if (payload.media.length > 1) {
-        const items = payload.media.map(toSingleMediaItem);
-        return {
-            type: 'gallery',
-            items,
-            isMutable: items.some((x) => x.isMutable)
-        };
-    }
-    return toSingleMediaItem(mediaBlob);
+    return payload.media.map((i) => {
+        return i.type === MediaType.Image
+            ? { isImage: true, url: i.url }
+            : {
+                isImage: false,
+                url: i.url,
+                thumbnailUrl: i.thumbnailUrl
+            };
+    });
 };
 const mapToPostViewerAdCardModel = (payload) => {
     return {

package/dist/posts/post-viewer/media/post-media.svelte

@@ -0,0 +1,64 @@
+<script lang="ts">import { Image } from '../../../ui/image';
+import { Slider } from '../../../ui/slider';
+import { Video } from '../../../ui/video';
+let { id, media, locale, autoplay = 'on-appearance', on } = $props();
+</script>
+
+{#snippet mediaItem(item: IPostMediaItemModel)}
+  {#if item.isImage}
+    <Image src={item.url} />
+  {:else}
+    <Video
+      src={item.url}
+      poster={item.thumbnailUrl}
+      controls={false}
+      autoplay={autoplay}
+      loop={true}
+      id={id}
+      hideSpeaker={true}
+      on={{
+        progress: on?.videoProgress
+      }} />
+  {/if}
+{/snippet}
+
+<div class="post-media" class:post-media--fit={media.mediaFit === 'contain'} class:post-media--fill={media.mediaFit === 'cover'}>
+  {#if media.items.length === 1}
+    {@render mediaItem(media.items[0])}
+  {:else if media.items.length > 1}
+    <Slider items={media.items} initialIndex={media.currentIndex} locale={locale} on={{ indexChanged: (index) => (media.currentIndex = index) }}>
+      {#snippet children(item)}
+        {@render mediaItem(item)}
+      {/snippet}
+    </Slider>
+  {/if}
+</div>
+
+<style>@keyframes fadeIn {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.4;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+.post-media {
+  width: 100%;
+  min-width: 100%;
+  max-width: 100%;
+  height: 100%;
+  min-height: 100%;
+  max-height: 100%;
+  background-color: rgba(0, 0, 0, 0.6);
+}
+.post-media--fit {
+  --video--media-fit: contain;
+  --image--object-fit: contain;
+}
+.post-media--fill {
+  --video--media-fit: cover;
+  --image--object-fit: cover;
+}</style>

package/dist/posts/post-viewer/{post-media.svelte.d.ts → media/post-media.svelte.d.ts}

@@ -1,14 +1,12 @@
-import type { PostViewerMediaModel } from './types';
+import type { Locale } from '../../../core/locale';
+import type { PostViewerMediaModel } from '../../model/post-media-model.svelte';
 type Props = {
     id: string;
     media: PostViewerMediaModel;
+    locale: Locale;
     autoplay?: true | false | 'on-appearance';
     on: {
-        mediaChanged: (data: {
-            videoSeekBar: boolean;
-            galleryMode: boolean;
-        }) => void;
-        progress?: (progress: number) => void;
+        videoProgress?: (progress: number) => void;
     };
 };
 declare const PostMedia: import("svelte").Component<Props, {}, "">;

package/dist/posts/post-viewer/post-texts.svelte

@@ -0,0 +1,101 @@
+<script lang="ts">import { LineClamp } from '../../ui/line-clamp';
+import { PostViewerLocalization } from './post-viewer-localization';
+import { PostViewerUiManager } from './ui-manager.svelte';
+let { model, uiManager, localization } = $props();
+const variables = $derived.by(() => {
+    const values = [
+        `--_post-viewer-texts--padding: 0 ${uiManager.controlsPanelWidth ? uiManager.controlsPanelWidth : uiManager.infoPaddingInline}px 0 ${uiManager.infoPaddingInline}px`
+    ];
+    return values.join(';');
+});
+</script>
+
+<div class="post-viewer-texts" style={variables}>
+  {#if model.kicker}
+    <div class="post-viewer-texts__kicker">
+      <LineClamp value={model.kicker} maxLines={1} enableShowMore={false} />
+    </div>
+  {/if}
+  {#if model.title}
+    <div class="post-viewer-texts__title">
+      <LineClamp value={model.title} maxLines={2} enableShowMore={false} />
+    </div>
+  {/if}
+  {#if model.text}
+    <div class="post-viewer-texts__text">
+      <LineClamp value={model.text} maxLines={2} enableShowMore={true} />
+    </div>
+  {/if}
+  {#if model.readMoreUrl}
+    <a class="post-viewer-texts__read-more" href={model.readMoreUrl} target="_blank" rel="noopener noreferrer">
+      {localization.readMore}
+    </a>
+  {/if}
+</div>
+
+<style>@keyframes fadeIn {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.4;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+.post-viewer-texts {
+  color: #ffffff;
+  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 6px rgba(0, 0, 0, 0.05);
+  padding: var(--_post-viewer-texts--padding);
+  display: flex;
+  flex-direction: column;
+  gap: 0.625rem;
+  /* Set 'container-type: inline-size;' to reference container*/
+}
+@container (width < 576px) {
+  .post-viewer-texts {
+    gap: 0.375rem;
+  }
+}
+.post-viewer-texts__kicker {
+  font-size: 1rem;
+  font-weight: 400;
+  /* Set 'container-type: inline-size;' to reference container*/
+}
+@container (width < 576px) {
+  .post-viewer-texts__kicker {
+    font-size: 0.875rem;
+  }
+}
+.post-viewer-texts__title {
+  font-size: 1.25rem;
+  font-weight: 500;
+  /* Set 'container-type: inline-size;' to reference container*/
+}
+@container (width < 576px) {
+  .post-viewer-texts__title {
+    font-size: 1rem;
+  }
+}
+.post-viewer-texts__text {
+  font-size: 1.125rem;
+  font-weight: 400;
+  /* Set 'container-type: inline-size;' to reference container*/
+}
+@container (width < 576px) {
+  .post-viewer-texts__text {
+    font-size: 0.9375rem;
+  }
+}
+.post-viewer-texts__read-more {
+  pointer-events: auto;
+  font-size: 1rem;
+  font-weight: 400;
+  /* Set 'container-type: inline-size;' to reference container*/
+}
+@container (width < 576px) {
+  .post-viewer-texts__read-more {
+    font-size: 0.875rem;
+  }
+}</style>

package/dist/posts/post-viewer/post-texts.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { PostModel } from '../model/post-model';
+import { PostViewerLocalization } from './post-viewer-localization';
+import { PostViewerUiManager } from './ui-manager.svelte';
+type Props = {
+    model: PostModel['texts'];
+    uiManager: PostViewerUiManager;
+    localization: PostViewerLocalization;
+};
+declare const PostTexts: import("svelte").Component<Props, {}, "">;
+type PostTexts = ReturnType<typeof PostTexts>;
+export default PostTexts;

package/dist/posts/post-viewer/post-viewer-localization.d.ts

@@ -1,6 +1,7 @@
 import { type Locale } from '../../core/locale';
 export declare class PostViewerLocalization {
     viewsCount: (count: number) => string;
+    readMore: string;
     locale: Locale;
     constructor(locale: Locale);
 }