@streamscloud/embeddable 11.0.0 → 12.0.0

package/dist/posts/posts-player/index.js

@@ -1,104 +1,57 @@
 import {} from '../../media-center/config/types';
 import { MediaCenter } from '../../media-center/media-center';
+import { CloseOrchestrator } from '../../ui/player/close-orchestrator';
 import { ModalShadowHost } from '../../ui/shadow-dom';
 import { default as PostsPlayer } from './cmp.posts-player.svelte';
+import { default as PostsPlayerProxy } from './posts-player-proxy.svelte';
 import { mount, unmount } from 'svelte';
 export { PostsPlayer };
 export { mapToPostPlayerModel } from '../data-loaders/mapper';
-/**
- * Opens the posts player modal.
- *
- * @param init Configuration options.
- *
- * Data provider (required)
- * @param init.postsProvider
- *   Provider that supplies post items to the player.
- *
- * Media center (optional)
- * @param {IMediaCenterConfig} [init.mediaCenterConfig]
- *   Optional media-center config passed to MediaCenter.
- *
- * Analytics (optional)
- * @param {IPostAnalyticsHandler} [init.analyticsHandler]
- *   Custom analytics handler for posts player events.
- *
- * Social interactions (optional)
- * @param {IPostSocialInteractionsHandler} [init.socialInteractionsHandler]
- *   Handler for social interactions (like, share, etc.).
- *
- * Player settings
- * @param {PostPlayerSettings} [init.playerSettings]
- *   Player UI and behavior settings.
- *   Fields of PostPlayerSettings:
- *   - {boolean} [disableBackground]
- *       If true, hides the player's background image.
- *   - {boolean} [hideCloseButton]
- *       If true, hides the close button.
- *   - {'en'|'no'} [locale='en']
- *       Localization for the player UI. Default is 'en'; use 'no' for Norwegian.
- *   - {boolean} [showStreamsCloudWatermark]
- *       If true, shows the StreamsCloud watermark.
- *
- * Events
- * @param {{ playerClosed?: () => void; postActivated?: (id: string) => void }} [init.on]
- *   Optional event handlers.
- * @param {() => void} [init.on.playerClosed]
- *   Called after the player is fully closed (after unmount and removal from the DOM).
- * @param {(id: string) => void} [init.on.postActivated]
- *   Called when a post becomes active (receives the post's id).
- *
- * @returns {void}
- *
- * @example
- * ```ts
- * import { openPostsPlayer } from '@streamscloud/embeddable/posts-player';
- *
- * openPostsPlayer({
- *   postsProvider: myPostsProvider,
- *   mediaCenterConfig: myMediaCenterConfig,
- *   analyticsHandler: myAnalyticsHandler,
- *   socialInteractionsHandler: mySocialHandler,
- *   playerSettings: {
- *     // Default locale is 'en'; set 'no' to switch to Norwegian:
- *     locale: 'no',
- *     disableBackground: false,
- *     hideCloseButton: false,
- *     showStreamsCloudWatermark: true,
- *   },
- *   on: {
- *     playerClosed: () => console.log('Player closed'),
- *     postActivated: (id) => console.log('Activated post', id),
- *   },
- * });
- * ```
- */
 export function openPostsPlayer(init) {
     const { postsProvider: dataProvider, mediaCenterConfig, analyticsHandler, socialInteractionsHandler, playerSettings, on } = init;
     const shadowHost = new ModalShadowHost();
-    const mounted = mount(MediaCenter, {
-        target: shadowHost.shadowRoot,
-        props: {
-            config: mediaCenterConfig || null,
-            playerProps: {
-                mode: 'posts',
-                props: {
-                    dataProvider,
-                    socialInteractionsHandler,
-                    analyticsHandler,
-                    playerSettings,
-                    on: {
-                        playerClosed: async () => {
-                            await unmount(mounted);
-                            shadowHost.remove();
-                            if (on?.playerClosed) {
-                                on.playerClosed();
-                            }
-                        },
-                        postActivated: on?.postActivated
+    let mounted;
+    const makeCloseOrchestrator = () => new CloseOrchestrator({
+        closeFn: async () => {
+            await unmount(mounted);
+            shadowHost.remove();
+            if (on?.playerClosed) {
+                on.playerClosed();
+            }
+        },
+        canClose: !playerSettings?.hideCloseButton
+    });
+    if (mediaCenterConfig) {
+        mounted = mount(MediaCenter, {
+            target: shadowHost.shadowRoot,
+            props: {
+                config: mediaCenterConfig,
+                settings: playerSettings,
+                modeProps: {
+                    mode: 'posts',
+                    props: {
+                        dataProvider,
+                        onPostActivated: on?.postActivated
                     }
+                },
+                closeOrchestrator: makeCloseOrchestrator()
+            }
+        });
+    }
+    else {
+        mounted = mount(PostsPlayerProxy, {
+            target: shadowHost.shadowRoot,
+            props: {
+                dataProvider,
+                socialInteractionsHandler,
+                analyticsHandler,
+                playerSettings,
+                closeOrchestrator: makeCloseOrchestrator(),
+                on: {
+                    postActivated: on?.postActivated
                 }
             }
-        }
-    });
+        });
+    }
     shadowHost.attachToBody();
 }

package/dist/posts/posts-player/posts-player-proxy.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">import {} from '../../ui/player/close-orchestrator';
+import { WithBackground } from '../../ui/with-background';
+import { default as PostsPlayerView } from './posts-player-view.svelte';
+let { dataProvider, socialInteractionsHandler, closeOrchestrator, playerSettings, analyticsHandler, on } = $props();
+let backgroundImageUrl = $state(null);
+const handleBackgroundImagedLoaded = (url) => {
+    backgroundImageUrl = url;
+};
+</script>
+
+<WithBackground backgroundDisabled={playerSettings?.disableBackground === true} backgroundImageUrl={backgroundImageUrl}>
+  <PostsPlayerView
+    dataProvider={{ type: 'provider', provider: dataProvider }}
+    socialInteractionsHandler={socialInteractionsHandler}
+    playerSettings={playerSettings}
+    analyticsHandler={analyticsHandler}
+    closeOrchestrator={closeOrchestrator}
+    on={{ postActivated: on?.postActivated, backgroundImageLoaded: playerSettings?.disableBackground === true ? undefined : handleBackgroundImagedLoaded }} />
+</WithBackground>

package/dist/posts/posts-player/posts-player-proxy.svelte.d.ts

@@ -0,0 +1,22 @@
+import type { Locale } from '../../core/locale';
+import type { IPostSocialInteractionsHandler } from '..';
+import { type ICloseOrchestrator } from '../../ui/player/close-orchestrator';
+import type { IPlayerDataProvider } from '../../ui/player/providers';
+import type { IPostAnalyticsHandler, PostPlayerModel } from './types';
+type Props = {
+    dataProvider: IPlayerDataProvider<PostPlayerModel>;
+    socialInteractionsHandler?: IPostSocialInteractionsHandler;
+    analyticsHandler?: IPostAnalyticsHandler;
+    closeOrchestrator: ICloseOrchestrator;
+    playerSettings?: {
+        locale?: Locale;
+        showStreamsCloudWatermark?: boolean;
+        disableBackground?: boolean;
+    };
+    on?: {
+        postActivated?: (id: string) => void;
+    };
+};
+declare const PostsPlayerProxy: import("svelte").Component<Props, {}, "">;
+type PostsPlayerProxy = ReturnType<typeof PostsPlayerProxy>;
+export default PostsPlayerProxy;

package/dist/posts/posts-player/posts-player-view.svelte

@@ -11,11 +11,11 @@ import { PostType } from '../..';
 import { ContentPlayer, ContentPlayerConfig } from '../../content-player';
 import { ContentPlayerSettings } from '../../content-player/content-player-settings';
 import { preloadImage } from '../../core/image-preloader';
-import { Utils } from '../../core/utils';
 import { getPostCoverImage } from '../model';
-import { DefaultChunksPlayerBuffer, DefaultFeedPlayerBuffer } from '../../ui/player/providers';
+import {} from '../../ui/player/providers';
+import { initBufferFromProvider } from '../../ui/player/providers/service';
 import { untrack } from 'svelte';
-let { dataProvider, socialInteractionsHandler, playerSettings, analyticsHandler, on, mediaCenterData } = $props();
+let { dataProvider, socialInteractionsHandler, playerSettings, analyticsHandler, closeOrchestrator, on } = $props();
 $effect(() => {
     void dataProvider;
     untrack(() => {
@@ -23,36 +23,21 @@ $effect(() => {
         initBuffer(dataProvider);
     });
 });
-$effect(() => contentPlayerConfig.updateMediaCenterData(mediaCenterData));
 const initBuffer = (dataProvider) => __awaiter(void 0, void 0, void 0, function* () {
-    switch (dataProvider.kind) {
-        case 'feed':
-            new DefaultFeedPlayerBuffer(dataProvider, {
-                preloaded: (instance) => __awaiter(void 0, void 0, void 0, function* () {
-                    if (instance.loaded.length) {
-                        const coverUrl = getPostCoverImage(instance.loaded[0]);
-                        yield preloadImage(coverUrl);
-                        contentPlayerConfig.setBackgroundImageUrl(coverUrl);
-                    }
-                    contentPlayerConfig.playerBuffer = instance;
-                })
-            });
-            break;
-        case 'chunks':
-            new DefaultChunksPlayerBuffer(dataProvider, {
-                preloaded: (instance) => __awaiter(void 0, void 0, void 0, function* () {
-                    if (instance.loaded.length) {
-                        const coverUrl = getPostCoverImage(instance.loaded[0]);
-                        yield preloadImage(coverUrl);
-                        contentPlayerConfig.setBackgroundImageUrl(coverUrl);
-                    }
-                    contentPlayerConfig.playerBuffer = instance;
-                })
-            });
-            break;
-        default:
-            Utils.assertUnreachable(dataProvider);
+    let newBuffer;
+    if (dataProvider.type === 'buffer') {
+        newBuffer = dataProvider.buffer;
     }
+    else {
+        newBuffer = initBufferFromProvider(dataProvider.provider);
+    }
+    yield newBuffer.ensureWarmedUp();
+    if (newBuffer.loaded.length && (on === null || on === void 0 ? void 0 : on.backgroundImageLoaded)) {
+        const coverUrl = getPostCoverImage(newBuffer.loaded[0]);
+        yield preloadImage(coverUrl);
+        on.backgroundImageLoaded(coverUrl);
+    }
+    contentPlayerConfig.playerBuffer = newBuffer;
 });
 const getLoadedItemById = (id) => {
     if (!contentPlayerConfig.playerBuffer) {
@@ -66,10 +51,9 @@ const contentPlayerConfig = new ContentPlayerConfig({
         postModelFromCurrentItem: (item) => item
     },
     socialInteractionsHandler,
-    mediaCenterData,
     settings: new ContentPlayerSettings(playerSettings),
+    closeOrchestrator,
     callbacks: {
-        close: on === null || on === void 0 ? void 0 : on.playerClosed,
         productClick: (id, postId) => {
             var _a;
             if (((_a = getLoadedItemById(postId)) === null || _a === void 0 ? void 0 : _a.postType) === PostType.ShortVideo) {
@@ -96,7 +80,9 @@ const contentPlayerConfig = new ContentPlayerConfig({
             if (!post) {
                 return;
             }
-            contentPlayerConfig.setBackgroundImageUrl(getPostCoverImage(post));
+            if (on === null || on === void 0 ? void 0 : on.backgroundImageLoaded) {
+                on.backgroundImageLoaded(getPostCoverImage(post));
+            }
             if (post.analyticsOrganizationId) {
                 analyticsHandler === null || analyticsHandler === void 0 ? void 0 : analyticsHandler.setOrganizationId(post.analyticsOrganizationId);
             }

package/dist/posts/posts-player/posts-player-view.svelte.d.ts

@@ -1,8 +1,4 @@
-import type { MediaCenterData } from '../../media-center/model/types';
-import type { PostPlayerProps } from './types';
-type $$ComponentProps = PostPlayerProps & {
-    mediaCenterData?: MediaCenterData;
-};
-declare const PostsPlayerView: import("svelte").Component<$$ComponentProps, {}, "">;
+import type { PostsPlayerProps } from './types';
+declare const PostsPlayerView: import("svelte").Component<PostsPlayerProps, {}, "">;
 type PostsPlayerView = ReturnType<typeof PostsPlayerView>;
 export default PostsPlayerView;

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[];
 };