@streamscloud/embeddable 10.1.2 → 12.0.0

package/dist/media-center/media-center/streams-in-category/index.d.ts

@@ -0,0 +1,2 @@
+export { default as StreamsInCategoryPanel } from './streams-in-category-panel.svelte';
+export { StreamsInCategoryPanelHandler } from './streams-in-category-panel-handler.svelte';

package/dist/media-center/media-center/streams-in-category/index.js

@@ -0,0 +1,2 @@
+export { default as StreamsInCategoryPanel } from './streams-in-category-panel.svelte';
+export { StreamsInCategoryPanelHandler } from './streams-in-category-panel-handler.svelte';

package/dist/media-center/media-center/{streams-in-category-panel-handler.svelte.d.ts → streams-in-category/streams-in-category-panel-handler.svelte.d.ts}

@@ -1,6 +1,6 @@
-import type { IMediaCenterConfig } from '../../short-videos/short-videos-player';
-import type { StreamPlayerModel } from '../../streams/streams-player';
-import type { MediaCenterCategoryData } from './types';
+import type { IMediaCenterConfig } from '../../../short-videos/short-videos-player';
+import type { StreamPlayerModel } from '../../../streams/streams-player';
+import type { MediaCenterCategoryData } from '../types';
 export declare class StreamsInCategoryPanelHandler {
     private readonly config;
     private _activated;
@@ -8,13 +8,13 @@ export declare class StreamsInCategoryPanelHandler {
     private _categoryId;
     private _categoryName;
     private _streams;
-    constructor(config: IMediaCenterConfig | null);
+    constructor(config: IMediaCenterConfig);
     get streamSectionItems(): StreamPlayerModel[];
     get categoryId(): string;
     get categoryName(): string;
     get activated(): boolean;
     get active(): boolean;
     get loading(): boolean;
-    activate: (category: MediaCenterCategoryData) => Promise<void>;
+    activate: (categoryData: MediaCenterCategoryData | null) => Promise<void>;
     deactivate: () => void;
 }

package/dist/media-center/media-center/{streams-in-category-panel-handler.svelte.js → streams-in-category/streams-in-category-panel-handler.svelte.js}

@@ -26,16 +26,16 @@ export class StreamsInCategoryPanelHandler {
     get loading() {
         return this._activated && this._state === 'loading';
     }
-    activate = async (category) => {
-        if (!this.config) {
+    activate = async (categoryData) => {
+        if (!categoryData || this.categoryId === categoryData.id) {
             return;
         }
         this._activated = true;
         this._state = 'loading';
         try {
-            const streamsResponse = await this.config.streamPlayer.getStreamsCursor({ filter: { categoryId: category.id }, limit: 5 });
-            this._categoryName = category.parentName ? `${category.parentName} - ${category.name}` : category.name;
-            this._categoryId = category.id;
+            const streamsResponse = await this.config.streamPlayer.getStreamsCursor({ filter: { categoryId: categoryData.id }, limit: 5 });
+            this._categoryName = categoryData.parentName ? `${categoryData.parentName} - ${categoryData.name}` : categoryData.name;
+            this._categoryId = categoryData.id;
             this._streams = streamsResponse.items;
         }
         finally {

package/dist/media-center/media-center/{streams-in-category-panel.svelte → streams-in-category/streams-in-category-panel.svelte}

@@ -1,4 +1,4 @@
-<script lang="ts">import { StreamCard } from '../../streams/stream-card';
+<script lang="ts">import { StreamCard } from '../../../streams/stream-card';
 import { StreamsInCategoryPanelHandler } from './streams-in-category-panel-handler.svelte';
 let { handler, on } = $props();
 </script>

package/dist/media-center/media-center/{streams-in-category-panel.svelte.d.ts → streams-in-category/streams-in-category-panel.svelte.d.ts}

@@ -1,4 +1,4 @@
-import type { StreamPlayerModel } from '../../streams/streams-player';
+import type { StreamPlayerModel } from '../../../streams/streams-player/types';
 import { StreamsInCategoryPanelHandler } from './streams-in-category-panel-handler.svelte';
 type Props = {
     handler: StreamsInCategoryPanelHandler;

package/dist/media-center/media-center/types.d.ts

@@ -1,7 +1,50 @@
-export type MediaCenterMode = 'stream' | 'posts';
+import type { Locale } from '../../core/locale';
+import type { IMediaCenterConfig } from '../config/types';
+import type { PostPlayerModel, PostsPlayerProps } from '../../posts/posts-player/types';
+import type { IStreamsPlayerDataProvider, StreamAmplificationParameters, StreamsPlayerProps } from '../../streams/streams-player/types';
+import type { ICloseOrchestrator } from '../../ui/player/close-orchestrator';
+import type { IPlayerDataProvider } from '../../ui/player/providers';
+export type MediaCenterMode = 'feed' | 'discover';
 export type MediaCenterCategoryData = {
     id: string;
     name: string;
     parentId: string | undefined;
     parentName: string | undefined;
 };
+export type MediaCenterProps = {
+    config: IMediaCenterConfig;
+    settings?: MediaCenterSettings;
+    modeProps: MediaCenterModeProps;
+    closeOrchestrator: ICloseOrchestrator;
+};
+export type MediaCenterModeProps = {
+    mode: 'posts';
+    props: {
+        dataProvider: IPlayerDataProvider<PostPlayerModel>;
+        onPostActivated?: (id: string) => void;
+    };
+} | {
+    mode: 'streams';
+    props: {
+        dataProvider: IStreamsPlayerDataProvider;
+        amplificationParameters?: StreamAmplificationParameters;
+        onStreamActivated?: (data: {
+            title: string;
+            image: string | null;
+        }) => void;
+    };
+} | {
+    mode: 'discover';
+};
+export type PlayerProps = {
+    type: 'posts';
+    props: PostsPlayerProps;
+} | {
+    type: 'streams';
+    props: StreamsPlayerProps;
+};
+export type MediaCenterSettings = {
+    locale?: Locale;
+    showStreamsCloudWatermark?: boolean;
+    disableBackground?: boolean;
+};

package/dist/media-page/index.d.ts

@@ -0,0 +1,121 @@
+import type { Locale } from '../core/locale';
+import { type IMediaCenterConfig } from '../media-center/config/types';
+export type { IMediaCenterConfig };
+export { mapToPostPlayerModel } from '../posts/data-loaders/mapper';
+/**
+ * Opens the media page modal.
+ *
+ * Two overloads (mutually exclusive; enforced by TypeScript):
+ * - Config mode: openMediaPageModal({ mediaCenterConfig, viewerSettings?, on? })
+ * - Internal config mode: openMediaPageModal({ id, initiator, graphqlOrigin?, viewerSettings?, on? })
+ *
+ * @param init Configuration options.
+ *
+ * Config mode (overload 1)
+ * @param {IMediaCenterConfig} init.mediaCenterConfig
+ *   Configuration for the media center.
+ *
+ * Internal config mode (overload 2)
+ * @param {string} init.id
+ *   Media page ID, used to construct an internal media-center config.
+ * @param {string} init.initiator
+ *   Initiator identifier (used for tracking/analytics and GraphQL).
+ * @param {string} [init.graphqlOrigin]
+ *   Optional GraphQL origin (base URL). If omitted, the default origin is determined internally.
+ *
+ * Common (optional)
+ * @param {MediaPageViewerSettings} [init.viewerSettings]
+ *   Viewer UI and behavior settings.
+ *
+ *   Fields of MediaPageViewerSettings:
+ *   - {boolean} [disableBackground]
+ *       If true , hides the viewer background image.
+ *   - {Locale} [locale='en']
+ *       Localization for the viewer UI. Supported values: 'en' | 'no'.
+ *       If omitted, the default locale 'en' is used.
+ *   - {boolean} [showStreamsCloudWatermark]
+ *       If true, shows the StreamsCloud watermark.
+ *   - {boolean} [hideCloseButton]
+ *       If true, hides the close button.
+ *
+ * Events
+ * @param {{ closed?: () => void }} [init.on]
+ *   Optional event handlers.
+ * @param {() => void} [init.on.closed]
+ *   Called after the modal is fully closed (after unmount and removal from the DOM).
+ *
+ * Notes
+ * - If neither mediaCenterConfig nor id is specified, a warning is shown and the modal is not opened.
+ *
+ * @returns {void}
+ *
+ * @example <caption>Config mode</caption>
+ * ```ts
+ * import {
+ *   openMediaPageModal,
+ *   type IMediaCenterConfig,
+ * } from '@streamscloud/embeddable/media-page';
+ *
+ * const mediaCenterConfig: IMediaCenterConfig = {
+ *   // ...your media center configuration
+ * };
+ *
+ * openMediaPageModal({
+ *   mediaCenterConfig,
+ *   viewerSettings: {
+ *     // Locale defaults to 'en'; set 'no' to switch to Norwegian:
+ *     locale: 'no',
+ *     disableBackground: false,
+ *     hideCloseButton: false,
+ *     showStreamsCloudWatermark: true,
+ *   },
+ *   on: {
+ *     closed: () => console.log('Media page modal closed'),
+ *   },
+ * });
+ * ```
+ *
+
+
+ * @example <caption>Internal config mode</caption>
+ * ```ts
+ * import { openMediaPageModal } from '@streamscloud/embeddable/media-page';
+ *
+ * openMediaPageModal({
+ *   id: 'media-page-123',
+ *   initiator: 'marketing-campaign',
+ *   graphqlOrigin: 'https://api.example.com',
+ *   viewerSettings: {
+ *     locale: 'en',
+ *     disableBackground: true,
+ *     hideCloseButton: false,
+ *     showStreamsCloudWatermark: false,
+ *   },
+ *   on: {
+ *     closed: () => console.log('Media page modal closed'),
+ *   },
+ * });
+ * ```
+ */
+export declare function openMediaPageModal(init: {
+    mediaCenterConfig: IMediaCenterConfig;
+    viewerSettings?: MediaPageViewerSettings;
+    on?: {
+        closed?: () => void;
+    };
+}): void;
+export declare function openMediaPageModal(init: {
+    id: string;
+    initiator: string;
+    graphqlOrigin?: string;
+    viewerSettings?: MediaPageViewerSettings;
+    on?: {
+        closed?: () => void;
+    };
+}): void;
+export type MediaPageViewerSettings = {
+    disableBackground?: boolean;
+    locale?: Locale;
+    showStreamsCloudWatermark?: boolean;
+    hideCloseButton?: boolean;
+};

package/dist/media-page/index.js

@@ -0,0 +1,43 @@
+import { toastrWarning } from '../core/toastr';
+import { InternalMediaCenterConfig } from '../media-center/config/internal-media-center-config';
+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 { mount, unmount } from 'svelte';
+export { mapToPostPlayerModel } from '../posts/data-loaders/mapper';
+export function openMediaPageModal(init) {
+    const { id, graphqlOrigin, initiator, viewerSettings, on } = init;
+    let mediaCenterConfig = init.mediaCenterConfig;
+    if (!mediaCenterConfig && id) {
+        mediaCenterConfig = new InternalMediaCenterConfig({ mediaPageId: id, graphqlOrigin, initiator });
+    }
+    if (!mediaCenterConfig) {
+        toastrWarning('Config is not specified.');
+        return;
+    }
+    const shadowHost = new ModalShadowHost();
+    let mounted = null;
+    const makeCloseOrchestrator = () => new CloseOrchestrator({
+        closeFn: async () => {
+            await unmount(mounted);
+            shadowHost.remove();
+            if (on?.closed) {
+                on.closed();
+            }
+        },
+        canClose: !viewerSettings?.hideCloseButton
+    });
+    mounted = mount(MediaCenter, {
+        target: shadowHost.shadowRoot,
+        props: {
+            config: mediaCenterConfig,
+            settings: viewerSettings,
+            modeProps: {
+                mode: 'discover'
+            },
+            closeOrchestrator: makeCloseOrchestrator()
+        }
+    });
+    shadowHost.attachToBody();
+}

package/dist/posts/attachments/cmp.attachments.svelte

@@ -2,7 +2,7 @@
 import { AdCard } from '../../ads/ad-card';
 import { PostModel } from '../model';
 import { ProductCard } from '../../products/product-card';
-let { model, trackingParams: externalTrackingParams, locale = 'en', on } = $props();
+let { model, colors, trackingParams: externalTrackingParams, locale = 'en', on } = $props();
 const trackingParams = $derived.by(() => {
     if (externalTrackingParams || externalTrackingParams === false) {
         return externalTrackingParams;
@@ -15,12 +15,14 @@ const trackingParams = $derived.by(() => {
 </script>
 
 {#if model.attachments}
-  <div class="post-attachments">
+  <div class="post-attachments" data-theme="dark">
     {#if model.attachments.ads.length}
       {#each model.attachments.ads as ad (ad.id)}
         <AdCard
           ad={ad}
+          colors={colors}
           trackingParams={trackingParams}
+          locale={locale}
           on={{
             click: on?.adClick,
             impression: on?.adImpression
@@ -32,6 +34,7 @@ const trackingParams = $derived.by(() => {
       {#each model.attachments.products as product (product.id)}
         <ProductCard
           product={product}
+          colors={colors}
           trackingParams={trackingParams}
           locale={locale}
           on={{
@@ -55,7 +58,7 @@ const trackingParams = $derived.by(() => {
   }
 }
 .post-attachments {
-  --_post-attachments--gap: var(--post-attachments--gap, 2.75rem);
+  --_post-attachments--gap: var(--post-attachments--gap, 1.875rem);
   display: flex;
   flex-direction: column;
   gap: var(--_post-attachments--gap);

package/dist/posts/attachments/cmp.attachments.svelte.d.ts

@@ -3,6 +3,12 @@ import type { TrackingParams } from '../../marketing-tracking';
 import { PostModel } from '../model';
 type Props = {
     model: PostModel;
+    colors: {
+        background?: string | null;
+        price?: string | null;
+        salePrice?: string | null;
+        buttonBackground?: string | null;
+    };
     trackingParams: TrackingParams | null;
     locale?: Locale;
     on?: {

package/dist/posts/controls/cmp.controls.svelte

@@ -9,14 +9,14 @@
 };
 import { IconColor } from '../../ui/icon';
 import { MediaVolumeManager } from '../../ui/media-playback';
-import { PlayerButton, PlayerButtonsGroup } from '../../ui/player/button';
-import IconHeartFilled from '@fluentui/svg-icons/icons/heart_20_filled.svg?raw';
-import IconHeart from '@fluentui/svg-icons/icons/heart_28_regular.svg?raw';
-import IconShare from '@fluentui/svg-icons/icons/share_28_regular.svg?raw';
-import IconShoppingBag from '@fluentui/svg-icons/icons/shopping_bag_28_regular.svg?raw';
-import IconSpeaker2 from '@fluentui/svg-icons/icons/speaker_2_28_regular.svg?raw';
-import IconSpeakerMute from '@fluentui/svg-icons/icons/speaker_mute_28_regular.svg?raw';
-let { model, socialInteractionsHandler, on } = $props();
+import { MobilePlayerButtonsGroup, PlayerButton, PlayerButtonsGroup } from '../../ui/player/button';
+import IconHeartFilled from '@fluentui/svg-icons/icons/heart_32_filled.svg?raw';
+import IconHeart from '@fluentui/svg-icons/icons/heart_32_regular.svg?raw';
+import IconShare from '@fluentui/svg-icons/icons/share_48_regular.svg?raw';
+import IconShoppingBag from '@fluentui/svg-icons/icons/shopping_bag_32_regular.svg?raw';
+import IconSpeaker2 from '@fluentui/svg-icons/icons/speaker_2_32_regular.svg?raw';
+import IconSpeakerMute from '@fluentui/svg-icons/icons/speaker_mute_32_regular.svg?raw';
+let { model, activeColor, inactiveColor, socialInteractionsHandler, on } = $props();
 const showSocialInteractions = $derived(!!socialInteractionsHandler && model.enableSocialInteractions);
 let isLikedStore = $state.raw({
     get isLiked() {
@@ -71,10 +71,47 @@ const refreshIsLiked = () => __awaiter(void 0, void 0, void 0, function* () {
 });
 </script>
 
-{#if actions.length > 0}
-  {#if actions.length === 1}
-    <PlayerButton scaleEffect={true} icon={actions[0].icon} on={{ click: actions[0].callback }} />
-  {:else}
-    <PlayerButtonsGroup scaleEffect={true} actions={actions} />
+<div class="desktop-controls">
+  {#if actions.length > 0}
+    {#if actions.length === 1}
+      <PlayerButton scaleEffect={true} activeColor={activeColor} inactiveColor={inactiveColor} icon={actions[0].icon} on={{ click: actions[0].callback }} />
+    {:else}
+      <PlayerButtonsGroup scaleEffect={true} activeColor={activeColor} backgroundColor={inactiveColor} actions={actions} />
+    {/if}
   {/if}
-{/if}
+</div>
+
+<div class="mobile-controls">
+  <MobilePlayerButtonsGroup actions={actions} />
+</div>
+
+<style>@keyframes fadeIn {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.4;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+.desktop-controls {
+  display: block;
+  /* Set 'container-type: inline-size;' to reference container*/
+}
+@container (width < 576px) {
+  .desktop-controls {
+    display: none;
+  }
+}
+
+.mobile-controls {
+  display: none;
+  /* Set 'container-type: inline-size;' to reference container*/
+}
+@container (width < 576px) {
+  .mobile-controls {
+    display: block;
+  }
+}</style>

package/dist/posts/controls/cmp.controls.svelte.d.ts

@@ -2,6 +2,8 @@ import type { PostModel } from '../model';
 import type { IPostSocialInteractionsHandler } from '../social-interactions';
 type Props = {
     model: PostModel;
+    activeColor: string | null;
+    inactiveColor: string | null;
     socialInteractionsHandler?: IPostSocialInteractionsHandler;
     on?: {
         attachmentsClicked?: () => void;

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

@@ -10,6 +10,8 @@ export type GetPostsQuery = {
         items: Array<{
             id: string;
             enableSocialInteractions: boolean;
+            viewsCount: number;
+            displayDate: any;
             ownerProfile: {
                 id: string;
                 type: SchemaTypes.ProfileType;
@@ -89,6 +91,8 @@ export type GetPostsQuery = {
 export type PostsPlayerPayloadFragment = {
     id: string;
     enableSocialInteractions: boolean;
+    viewsCount: number;
+    displayDate: any;
     ownerProfile: {
         id: string;
         type: SchemaTypes.ProfileType;

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

@@ -221,7 +221,9 @@ export const PostsPlayerPayloadFragmentDoc = {
                                 }
                             ]
                         }
-                    }
+                    },
+                    { kind: 'Field', name: { kind: 'Name', value: 'viewsCount' } },
+                    { kind: 'Field', name: { kind: 'Name', value: 'displayDate' } }
                 ]
             }
         }
@@ -468,7 +470,9 @@ export const GetPostsDocument = {
                                 }
                             ]
                         }
-                    }
+                    },
+                    { kind: 'Field', name: { kind: 'Name', value: 'viewsCount' } },
+                    { kind: 'Field', name: { kind: 'Name', value: 'displayDate' } }
                 ]
             }
         },

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

@@ -7,6 +7,8 @@ export type IPostModel = {
     kicker: string | null;
     title: string | null;
     text: string | null;
+    viewsCount: number;
+    displayDate: string;
     readMoreUrl?: string;
     heading: IPostHeadingModel | null;
     enableSocialInteractions: boolean;

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

@@ -7,7 +7,7 @@ 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, trackingParams: externalTrackingParams, enableAttachments = true, enableControls = true, autoplay = 'on-appearance', locale = 'en', on } = $props();
+let { model, socialInteractionsHandler, trackingParams: externalTrackingParams, controlsColors = null, enableAttachments = true, enableControls = true, autoplay = 'on-appearance', locale = 'en', on } = $props();
 const localization = $derived(new PostViewerLocalization(locale));
 const uiManager = new PostViewerUiManager();
 $effect(() => {
@@ -57,30 +57,34 @@ const variables = $derived.by(() => {
 
 <div class="post-viewer" style={variables} use:viewerMounted>
   <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}
-    <Texts model={model.texts} uiManager={uiManager} localization={localization} />
+  {#if (uiManager.showAttachments && model.attachments) || model.heading || model.texts.kicker || model.texts.title || model.texts.text || model.texts.readMoreUrl}
+    <div class="post-viewer__information">
+      {#if model.heading}
+        <Heading model={model.heading} uiManager={uiManager} localization={localization} />
+      {/if}
+      <Texts model={model.texts} uiManager={uiManager} localization={localization} />
 
-    {#if uiManager.showAttachments && model.attachments}
-      <AttachmentsHorizontal
-        model={model}
-        trackingParams={trackingParams}
-        uiManager={uiManager}
-        on={{
-          productClick: on?.productClick,
-          productImpression: on?.productImpression,
-          adClick: on?.adClick,
-          adImpression: on?.adImpression
-        }} />
-    {/if}
-  </div>
+      {#if uiManager.showAttachments && model.attachments}
+        <AttachmentsHorizontal
+          model={model}
+          trackingParams={trackingParams}
+          uiManager={uiManager}
+          on={{
+            productClick: on?.productClick,
+            productImpression: on?.productImpression,
+            adClick: on?.adClick,
+            adImpression: on?.adImpression
+          }} />
+      {/if}
+    </div>
+  {/if}
 
   {#if uiManager.showControls}
     <div class="post-viewer__controls-panel" use:trackControlsPanelSize>
       <PostControls
         model={model}
+        activeColor={controlsColors?.active ?? null}
+        inactiveColor={controlsColors?.inactive ?? null}
         socialInteractionsHandler={socialInteractionsHandler}
         on={{ attachmentsClicked: () => (uiManager.canShowAttachments = !uiManager.canShowAttachments) }} />
     </div>
@@ -127,6 +131,12 @@ const variables = $derived.by(() => {
   justify-content: flex-end;
   align-items: flex-end;
   padding: 0 0.625rem;
+  /* Set 'container-type: inline-size;' to reference container*/
+}
+@container (width < 576px) {
+  .post-viewer__controls-panel {
+    padding-right: 0;
+  }
 }
 .post-viewer__information {
   pointer-events: none;

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

@@ -8,6 +8,10 @@ type Props = {
     trackingParams: TrackingParams | null | false;
     enableAttachments?: boolean;
     enableControls?: boolean;
+    controlsColors: {
+        active: string | null;
+        inactive: string | null;
+    } | null;
     autoplay?: true | false | 'on-appearance';
     locale?: Locale;
     on?: {

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

@@ -11,6 +11,8 @@ export const mapToPostModel = (payload) => {
         title: extractPostTitle(payload.postData),
         text: extractPostText(payload.postData),
         enableSocialInteractions: payload.enableSocialInteractions,
+        viewsCount: payload.viewsCount,
+        displayDate: payload.displayDate,
         heading: null,
         ads: payload.ad ? [mapToPostViewerAdCardModel(payload.ad)] : [],
         products: payload.allProducts.map((x) => mapToPostViewerProductCard(x))

package/dist/posts/post-viewer/operations.generated.d.ts

@@ -3,6 +3,8 @@ import type { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-
 export type PostViewerPayloadFragment = {
     id: string;
     enableSocialInteractions: boolean;
+    viewsCount: number;
+    displayDate: any;
     allProducts: Array<{
         id: string;
         title: string;

package/dist/posts/post-viewer/operations.generated.js

@@ -199,7 +199,9 @@ export const PostViewerPayloadFragmentDoc = {
                                 }
                             ]
                         }
-                    }
+                    },
+                    { kind: 'Field', name: { kind: 'Name', value: 'viewsCount' } },
+                    { kind: 'Field', name: { kind: 'Name', value: 'displayDate' } }
                 ]
             }
         }

package/dist/posts/post-viewer/operations.graphql

@@ -70,4 +70,6 @@ fragment PostViewerPayloadFragment on Post {
       text
     }
   }
+  viewsCount
+  displayDate
 }

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

@@ -13,17 +13,17 @@ const variables = $derived.by(() => {
 <div class="post-viewer-texts" style={variables}>
   {#if model.kicker}
     <div class="post-viewer-texts__kicker">
-      <LineClamp value={model.kicker} maxLines={1} enableShowMore={false} />
+      <LineClamp maxLines={1} enableShowMore={false} locale={localization.locale}>{model.kicker}</LineClamp>
     </div>
   {/if}
   {#if model.title}
     <div class="post-viewer-texts__title">
-      <LineClamp value={model.title} maxLines={2} enableShowMore={false} />
+      <LineClamp maxLines={2} enableShowMore={false} locale={localization.locale}>{model.title}</LineClamp>
     </div>
   {/if}
   {#if model.text}
     <div class="post-viewer-texts__text">
-      <LineClamp value={model.text} maxLines={2} enableShowMore={true} />
+      <LineClamp maxLines={2} enableShowMore={true} locale={localization.locale}>{model.text}</LineClamp>
     </div>
   {/if}
   {#if model.readMoreUrl}