@streamscloud/embeddable 16.0.7 → 16.1.0

package/dist/external-api/data-providers/mocks/mock-content-management-handler.svelte.js

@@ -1,4 +1,3 @@
-import { Status, StreamStatus } from '../../../core/enums';
 import { mapToStreamPlayerModel } from '../stream-data-loaders/mapper';
 import { GetPostDocument, GetStreamDocument } from './operations.generated';
 import { mapToPostPlayerModel } from '../post-data-loaders/mapper';
@@ -43,7 +42,7 @@ export class MockMediaCenterContentManagementHandler {
         return {
             post: mapToPostPlayerModel(post),
             categories: post.categoryIds,
-            isPublished: post.status === Status.Published
+            isPublished: post.status === 'PUBLISHED'
         };
     };
     _getUpdatedStream = async (id) => {
@@ -55,7 +54,7 @@ export class MockMediaCenterContentManagementHandler {
         return {
             stream: mapToStreamPlayerModel(stream),
             categories: stream.categoryIds,
-            isPublished: stream.status === StreamStatus.Published
+            isPublished: stream.status === 'PUBLISHED'
         };
     };
 }

package/dist/external-api/data-providers/post-data-loaders/posts-loader.d.ts

@@ -1,4 +1,4 @@
-import { PostType, Status } from '../../../core/enums';
+import type { PostType, Status } from '../../../core/enums';
 import type { PostPlayerModel } from '../../../posts/posts-player/types';
 import type { Client } from '@urql/core';
 export declare const getPostsCursor: (input: {

package/dist/external-api/data-providers/post-data-loaders/posts-loader.js

@@ -1,4 +1,3 @@
-import { PostType, Status } from '../../../core/enums';
 import { mapToPostPlayerModel } from './mapper';
 import { GetPostsDocument } from './operations.generated';
 export const getPostsCursor = async (input) => {

package/dist/external-api/data-providers/stream-data-loaders/mapper.js

@@ -1,4 +1,3 @@
-import { ProfileType } from '../../../core/enums';
 export const mapToStreamPlayerModel = (payload) => {
     return {
         id: payload.id,
@@ -7,7 +6,7 @@ export const mapToStreamPlayerModel = (payload) => {
         cover: payload.cover?.url || null,
         createdAt: payload.createdAt,
         publishedAt: payload.publishedAt,
-        organizationId: payload.ownerProfile.type === ProfileType.Organization ? payload.ownerProfile.id : null,
+        organizationId: payload.ownerProfile.type === 'ORGANIZATION' ? payload.ownerProfile.id : null,
         pagesCount: payload.pagesCount
     };
 };

package/dist/external-api/data-providers/stream-data-loaders/stream-pages-loader.d.ts

@@ -1,4 +1,4 @@
-import { type StreamPageViewerModel } from '../../../streams/stream-page-viewer';
+import type { StreamPageViewerModel } from '../../../streams/stream-page-viewer';
 import type { Client } from '@urql/core';
 export declare const getStreamPagesCursor: (input: {
     streamId: string;

package/dist/external-api/data-providers/stream-data-loaders/stream-pages-loader.js

@@ -1,4 +1,3 @@
-import { ImageScale } from '../../..';
 import { mapToStreamPageViewerModel } from '../../../streams/stream-page-viewer';
 import { GetStreamPagesDocument } from './operations.generated';
 export const getStreamPagesCursor = async (input) => {
@@ -15,7 +14,7 @@ export const getStreamPagesCursor = async (input) => {
                 continuationToken,
                 filter: { streamId }
             },
-            image_scale: ImageScale.OriginalEncoded
+            image_scale: 'ORIGINAL_ENCODED'
         })
             .toPromise();
         const data = payload.data?.streamPages;

package/dist/external-api/data-providers/stream-data-loaders/streams-loader.d.ts

@@ -1,4 +1,4 @@
-import { StreamStatus } from '../../../core/enums';
+import type { StreamStatus } from '../../../core/enums';
 import type { StreamPlayerModel } from '../../../streams/streams-player/types';
 import type { Client } from '@urql/core';
 export declare const getStreamsCursor: (input: {

package/dist/external-api/data-providers/stream-data-loaders/streams-loader.js

@@ -1,4 +1,3 @@
-import { EmbedStreamsOrderBy, StreamStatus } from '../../../core/enums';
 import { mapToStreamPlayerModel } from './mapper';
 import { GetStreamsDocument } from './operations.generated';
 export const getStreamsCursor = async (input) => {
@@ -18,7 +17,7 @@ export const getStreamsCursor = async (input) => {
             limit,
             continuationToken,
             sorting: {
-                orderBy: EmbedStreamsOrderBy.ContentUpdatedAt,
+                orderBy: 'CONTENT_UPDATED_AT',
                 ascendingOrder: false
             }
         }

package/dist/external-api/index.d.ts

@@ -1,3 +1,4 @@
+export { Article, type ArticleSeoModel } from './article';
 export { openMediaPageModal } from './media-page';
-export { openStreamsPlayer } from './streams-player';
 export { openShortVideosPlayer } from './short-videos-player';
+export { openStreamsPlayer } from './streams-player';

package/dist/external-api/index.js

@@ -1,3 +1,4 @@
+export { Article } from './article';
 export { openMediaPageModal } from './media-page';
-export { openStreamsPlayer } from './streams-player';
 export { openShortVideosPlayer } from './short-videos-player';
+export { openStreamsPlayer } from './streams-player';

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

@@ -1,4 +1,5 @@
-import { PostType } from '../../core/enums';
+import type { ArticleDataProvider } from '../../articles/data-providers';
+import type { PostType } from '../../core/enums';
 import type { IContentCategoryFollowingHandler } from '../categories-following';
 import type { IMediaCenterContentManagementHandler } from '../content-management';
 import type { IMediaCenterMembershipHandler } from '../membership';
@@ -36,6 +37,8 @@ export interface IMediaCenterDataProvider {
             items: PostPlayerModel[];
             continuationToken: string | null;
         }>;
+        /** Provider for fetching article content. Enables "Read more" button that opens an article dialog in posts player. */
+        fetchArticle?: ArticleDataProvider['fetchArticle'];
     };
     streamPlayer: {
         getStreamsCursor: (input: {

package/dist/media-center/config/types.js

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

package/dist/media-center/media-center/cmp.media-center-proxy.svelte

@@ -1,15 +1,20 @@
 <script lang="ts">import {} from '../../ui/player/close-orchestrator';
 import { ShadowRoot } from '../../ui/shadow-dom';
 import { MediaCenterContext } from './media-center-context.svelte';
+import { MediaCenterSettings } from './media-center-settings.svelte';
 import { default as MediaCenterView } from './media-center-view.svelte';
 import { Utils } from '@streamscloud/kit/core/utils';
 import { Loading } from '@streamscloud/kit/ui/loading';
 import { untrack } from 'svelte';
 let { dataProvider, modeProps, settings, closeOrchestrator, dynamicActions } = $props();
+const settingsHolder = untrack(() => new MediaCenterSettings(settings));
+$effect(() => {
+    settingsHolder.update(settings);
+});
 const context = untrack(() => new MediaCenterContext({
     dataProvider,
     closeOrchestrator,
-    settings,
+    settings: settingsHolder,
     on: {
         initialized: (instance) => {
             switch (modeProps.mode) {
@@ -26,8 +31,8 @@ const context = untrack(() => new MediaCenterContext({
                     });
                     break;
                 case 'default':
-                    if (settings.state) {
-                        instance.restoreState(settings.state);
+                    if (settingsHolder.state) {
+                        instance.restoreState(settingsHolder.state);
                     }
                     else {
                         instance.activateDiscover({ categoryId: null });
@@ -50,7 +55,7 @@ const context = untrack(() => new MediaCenterContext({
 {:else if !context.initialized}
   Not initialized placeholder
 {:else}
-  <ShadowRoot locale={settings?.locale} theme={settings?.theme ?? 'dark'} {...context.backgroundWrapperProps}>
+  <ShadowRoot locale={settingsHolder.locale} theme={settingsHolder.theme} {...context.backgroundWrapperProps}>
     <MediaCenterView context={context} dynamicActions={dynamicActions} />
   </ShadowRoot>
 {/if}

package/dist/media-center/media-center/cmp.media-center-proxy.svelte.d.ts

@@ -1,11 +1,10 @@
 import type { IMediaCenterDataProvider } from '../config/types';
 import { type ICloseOrchestrator } from '../../ui/player/close-orchestrator';
-import type { MediaCenterSettings } from './media-center-settings.svelte';
-import type { MediaCenterModeProps } from './types';
+import type { IMediaCenterSettings, MediaCenterModeProps } from './types';
 import { type Snippet } from 'svelte';
 type Props = {
     dataProvider: IMediaCenterDataProvider;
-    settings: MediaCenterSettings;
+    settings?: IMediaCenterSettings;
     modeProps: MediaCenterModeProps;
     closeOrchestrator: ICloseOrchestrator;
     dynamicActions?: Snippet;

package/dist/media-center/media-center/discover/data-loading.js

@@ -1,4 +1,3 @@
-import { PostType } from '../../..';
 import { StreamsInCategory, ShortVideosInCategory } from './types.svelte';
 export class DiscoverDataLoader {
     dataProvider;
@@ -30,7 +29,7 @@ export class DiscoverDataLoader {
         const shortVideosResponse = await this.dataProvider.postsPlayer.getPostsCursor({
             filter: {
                 categoryId: holder.categoryId,
-                types: [PostType.ShortVideo]
+                types: ['SHORT_VIDEO']
             },
             limit: this.minItemsPerLoad,
             continuationToken: holder.continuationToken

package/dist/media-center/media-center/discover/discover-view-handler.svelte.js

@@ -1,4 +1,3 @@
-import { PostType } from '../../../core/enums';
 import { DiscoverDataLoader } from './data-loading';
 import { ShortVideosInCategory, StreamsInCategory } from './types.svelte';
 import { Deferred } from '@streamscloud/kit/core';
@@ -113,7 +112,7 @@ export class DiscoverViewHandler {
         this._shortVideosLoadingDeferred = null;
     };
     onPostCreated = (data) => {
-        if (!data.isPublished || data.post.postType !== PostType.ShortVideo) {
+        if (!data.isPublished || data.post.postType !== 'SHORT_VIDEO') {
             return;
         }
         const affectedHolders = this._shortVideosInCategoryCache.filter((x) => data.categories.includes(x.categoryId) && x.continuationToken !== undefined);

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

@@ -1,2 +1 @@
 export { default as MediaCenterProxy } from './cmp.media-center-proxy.svelte';
-export { MediaCenterSettings } from './media-center-settings.svelte';

package/dist/media-center/media-center/index.js

@@ -1,2 +1 @@
 export { default as MediaCenterProxy } from './cmp.media-center-proxy.svelte';
-export { MediaCenterSettings } from './media-center-settings.svelte';

package/dist/media-center/media-center/media-center-settings.svelte.d.ts

@@ -6,7 +6,7 @@ export declare class MediaCenterSettings {
     locale: AppLocaleValue;
     showStreamsCloudWatermark: boolean;
     disableBackground: boolean;
-    theme: ThemeValue;
+    theme: ThemeValue | undefined;
     state: MediaCenterState | null;
     constructor(init: IMediaCenterSettings | undefined);
     update: (data: IMediaCenterSettings | undefined) => void;

package/dist/media-center/media-center/media-center-settings.svelte.js

@@ -2,7 +2,7 @@ export class MediaCenterSettings {
     locale = $state('en');
     showStreamsCloudWatermark = $state(false);
     disableBackground = $state(false);
-    theme = $state('dark');
+    theme = $state(undefined);
     state = $state.raw(null);
     constructor(init) {
         this.update(init);
@@ -11,7 +11,7 @@ export class MediaCenterSettings {
         this.locale = data?.locale ?? 'en';
         this.showStreamsCloudWatermark = data?.showStreamsCloudWatermark ?? false;
         this.disableBackground = data?.disableBackground ?? false;
-        this.theme = data?.theme ?? 'dark';
+        this.theme = data?.theme;
         this.state = data?.state ?? null;
     };
 }

package/dist/media-center/media-center/moments/moments-feed-handler.svelte.d.ts

@@ -4,7 +4,7 @@ import type { PostPlayerModel, PostsPlayerProps, PostManagementActions } from '.
 import type { ICloseOrchestrator } from '../../../ui/player/close-orchestrator';
 import { MomentsState } from './moments-state.svelte';
 import { MediaCenterContentHandler, MediaCenterSettingsHandler } from '../handlers';
-import { type IPlayerBuffer } from '@streamscloud/kit/ui/player/providers';
+import type { IPlayerBuffer } from '@streamscloud/kit/ui/player/providers';
 export declare class MomentsFeedHandler {
     momentsState: MomentsState;
     private _active;

package/dist/media-center/media-center/moments/moments-feed-handler.svelte.js

@@ -1,4 +1,3 @@
-import { PostType } from '../../../core/enums';
 import { MomentsState } from './moments-state.svelte';
 import { MediaCenterContentHandler, MediaCenterSettingsHandler } from '../handlers';
 import { initBufferFromProvider } from '@streamscloud/kit/ui/player/providers';
@@ -79,7 +78,7 @@ export class MomentsFeedHandler {
         this._active = true;
     };
     onPostCreated = (data) => {
-        if (!this._active || !data.isPublished || data.post.postType !== PostType.Moment) {
+        if (!this._active || !data.isPublished || data.post.postType !== 'MOMENT') {
             return;
         }
         // Reactivate to include the new moment
@@ -89,7 +88,7 @@ export class MomentsFeedHandler {
         if (!this._active) {
             return false;
         }
-        const postStillInTheFeed = data.isPublished && data.post.postType === PostType.Moment;
+        const postStillInTheFeed = data.isPublished && data.post.postType === 'MOMENT';
         if (postStillInTheFeed) {
             this.activate({ initialMomentId: data.post.id });
         }

package/dist/media-center/media-center/moments/moments-state.svelte.d.ts

@@ -1,5 +1,5 @@
 import type { IMediaCenterDataProvider } from '../..';
-import { type PostPlayerModel } from '../../../posts/posts-player';
+import type { PostPlayerModel } from '../../../posts/posts-player';
 import type { IChunksPlayerDataProvider } from '@streamscloud/kit/ui/player/providers';
 export declare class MomentsState {
     private readonly dataProvider;

package/dist/media-center/media-center/moments/moments-state.svelte.js

@@ -1,5 +1,3 @@
-import { PostType } from '../../../core/enums';
-import {} from '../../../posts/posts-player';
 import { SvelteMap } from 'svelte/reactivity';
 export class MomentsState {
     dataProvider;
@@ -85,7 +83,7 @@ export class MomentsState {
                 }
                 const moments = await this.dataProvider.postsPlayer.getPostsCursor({
                     filter: {
-                        types: [PostType.Moment],
+                        types: ['MOMENT'],
                         ids: momentsInChunk
                     },
                     limit: collectionCapacity

package/dist/media-center/media-center/posts-feed/feed-providers-generator.js

@@ -1,7 +1,6 @@
-import { PostType } from '../../../core/enums';
 import { ContinuationToken } from '@streamscloud/kit/core';
 import { CursorDataLoader } from '@streamscloud/kit/core/data-loaders';
-const SUPPORTED_POST_TYPES = [PostType.Article, PostType.Media, PostType.ShortVideo, PostType.Video];
+const SUPPORTED_POST_TYPES = ['ARTICLE', 'MEDIA', 'SHORT_VIDEO', 'VIDEO'];
 export class FeedProvidersGenerator {
     dataProvider;
     constructor(dataProvider) {

package/dist/media-center/media-center/posts-feed/posts-feed-handler.svelte.d.ts

@@ -4,7 +4,7 @@ import type { PostManagementActions, PostPlayerModel, PostsPlayerProps } from '.
 import type { ICloseOrchestrator } from '../../../ui/player/close-orchestrator';
 import { MediaCenterContentHandler, MediaCenterSettingsHandler } from '../handlers';
 import type { PostsFeedFilter, PostsFeedProviderInit } from './types';
-import { type IPlayerBuffer, type IPlayerDataProvider } from '@streamscloud/kit/ui/player/providers';
+import type { IPlayerBuffer, IPlayerDataProvider } from '@streamscloud/kit/ui/player/providers';
 export declare class PostsFeedHandler {
     private _state;
     private _providersGenerator;

package/dist/media-center/media-center/posts-feed/posts-feed-handler.svelte.js

@@ -1,4 +1,3 @@
-import { PostType } from '../../..';
 import { MediaCenterContentHandler, MediaCenterSettingsHandler } from '../handlers';
 import { FeedProvidersGenerator } from './feed-providers-generator';
 import { Utils } from '@streamscloud/kit/core/utils';
@@ -154,7 +153,7 @@ export class PostsFeedHandler {
             // Unpublished posts never affect the feed
             return false;
         }
-        if (post.postType === PostType.Moment) {
+        if (post.postType === 'MOMENT') {
             // Moments are processed separately
             return false;
         }
@@ -176,6 +175,7 @@ export class PostsFeedHandler {
             socialInteractionsHandler: this._dataProvider.handlers?.postSocialInteractionsHandler,
             sharingHandler: this._dataProvider.handlers?.postSharingHandler,
             analyticsHandler: this._dataProvider.handlers?.analyticsHandler,
+            articleDataProvider: this._dataProvider.postsPlayer.fetchArticle ? { fetchArticle: this._dataProvider.postsPlayer.fetchArticle } : undefined,
             playerSettings: this._mediaCenterSettingsHandler.playerSettings,
             closeOrchestrator: this._closeOrchestrator,
             on: {

package/dist/media-page/cmp.media-page.svelte

@@ -1,22 +1,23 @@
 <script lang="ts">import { MediaCenterProxy } from '../media-center/media-center';
-import { MediaCenterSettings } from '../media-center/media-center/media-center-settings.svelte';
 import { CloseOrchestrator } from '../ui/player/close-orchestrator';
 import { createShadowRoot } from '../ui/shadow-dom';
-import { mount, unmount, untrack } from 'svelte';
+import { mount, unmount } from 'svelte';
 let { dataProvider, settings, dynamicActions } = $props();
-const settingsHolder = untrack(() => new MediaCenterSettings(settings));
-$effect(() => {
-    settingsHolder.update(settings);
-});
 const initHost = (node) => {
     const shadowRoot = createShadowRoot(node);
     const mounted = mount(MediaCenterProxy, {
         target: shadowRoot,
         props: {
-            dataProvider,
-            settings: settingsHolder,
+            get dataProvider() {
+                return dataProvider;
+            },
+            get settings() {
+                return settings;
+            },
             modeProps: { mode: 'default' },
-            dynamicActions,
+            get dynamicActions() {
+                return dynamicActions;
+            },
             closeOrchestrator: new CloseOrchestrator({
                 closeFn: async () => {
                     await unmount(mounted);

package/dist/media-page/index.js

@@ -1,5 +1,5 @@
 import {} from '../media-center/config/types';
-import { MediaCenterProxy, MediaCenterSettings } from '../media-center/media-center';
+import { MediaCenterProxy } from '../media-center/media-center';
 import { CloseOrchestrator } from '../ui/player/close-orchestrator';
 import { ModalShadowHost } from '../ui/shadow-dom';
 import { mount, unmount } from 'svelte';
@@ -83,7 +83,7 @@ export function openMediaPageModal(init) {
         target: shadowHost.shadowRoot,
         props: {
             dataProvider,
-            settings: new MediaCenterSettings(viewerSettings),
+            settings: viewerSettings,
             modeProps: {
                 mode: 'default'
             },
@@ -110,7 +110,7 @@ export function openMediaPageModalWithInitialPostsProvider(init) {
         target: shadowHost.shadowRoot,
         props: {
             dataProvider: mediaCenterDataProvider,
-            settings: new MediaCenterSettings(viewerSettings),
+            settings: viewerSettings,
             modeProps: {
                 mode: 'posts',
                 props: {
@@ -141,7 +141,7 @@ export function openMediaPageModalWithInitialStreamsProvider(init) {
         target: shadowHost.shadowRoot,
         props: {
             dataProvider: mediaCenterDataProvider,
-            settings: new MediaCenterSettings(viewerSettings),
+            settings: viewerSettings,
             modeProps: {
                 mode: 'streams',
                 props: {

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

@@ -1,5 +1,4 @@
-<script lang="ts">import { PostType } from '../..';
-import { AdCard } from '../../ads/ad-card';
+<script lang="ts">import { AdCard } from '../../ads/ad-card';
 import { PostModel } from '../model';
 import { ProductCard } from '../../products/product-card';
 let { model, trackingParams: externalTrackingParams, on } = $props();
@@ -7,7 +6,7 @@ const trackingParams = $derived.by(() => {
     if (externalTrackingParams || externalTrackingParams === false) {
         return externalTrackingParams;
     }
-    if (model.postType === PostType.ShortVideo) {
+    if (model.postType === 'SHORT_VIDEO') {
         return { shortVideoId: model.id };
     }
     return false;

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

@@ -1,10 +1,11 @@
-import { PostType } from '../../core/enums';
+import type { PostType } from '../../core/enums';
 import { PostViewerMediaModel } from './post-media-model.svelte';
 import type { IPostModel, IPostAdCardModel, IPostHeadingModel, IPostProductCardModel } from './types';
 export declare class PostModel {
     id: string;
     media: PostViewerMediaModel;
     postType: PostType | null;
+    articleId: string | null;
     texts: {
         kicker: string | null;
         title: string | null;

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

@@ -1,9 +1,9 @@
-import { PostType } from '../../core/enums';
 import { PostViewerMediaModel } from './post-media-model.svelte';
 export class PostModel {
     id;
     media;
     postType;
+    articleId;
     texts;
     heading;
     enableSocialInteractions;
@@ -11,6 +11,7 @@ export class PostModel {
     constructor(init) {
         this.id = init.id;
         this.postType = init.postType;
+        this.articleId = init.articleId;
         this.media = new PostViewerMediaModel({ media: init.media, mediaFit: init.mediaFit, mediaIndex: init.mediaIndex });
         this.texts = {
             kicker: init.kicker,

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

@@ -1,5 +1,4 @@
-<script lang="ts">import { Currency } from '../../core/enums';
-import { enrichAdLinkWithTracking, enrichProductLinkWithTracking } from '../../marketing-tracking';
+<script lang="ts">import { enrichAdLinkWithTracking, enrichProductLinkWithTracking } from '../../marketing-tracking';
 import { PostModel } from '../model';
 import { toPriceRepresentation } from '../../products/price-helper';
 import { PostViewerUiManager } from './ui-manager.svelte';

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

@@ -1,5 +1,4 @@
-<script lang="ts">import { PostType } from '../..';
-import { PostModel } from '../model';
+<script lang="ts">import { PostModel } from '../model';
 import { default as AttachmentsHorizontal } from './attachments-horizontal.svelte';
 import { default as Heading } from './heading.svelte';
 import { default as PostMedia } from './media/post-media.svelte';
@@ -18,7 +17,7 @@ const trackingParams = $derived.by(() => {
     if (externalTrackingParams || externalTrackingParams === false) {
         return externalTrackingParams;
     }
-    if (model.postType === PostType.ShortVideo) {
+    if (model.postType === 'SHORT_VIDEO') {
         return { shortVideoId: model.id };
     }
     return false;
@@ -46,6 +45,14 @@ const trackControlsPanelSize = (node) => {
         }
     };
 };
+const handleArticleReadMore = $derived.by(() => {
+    const articleId = model.articleId;
+    const handler = on?.articleReadMore;
+    if (!articleId || !handler) {
+        return undefined;
+    }
+    return () => handler(articleId);
+});
 const variables = $derived.by(() => {
     const values = [];
     if (model.media.isGallery) {
@@ -57,12 +64,12 @@ const variables = $derived.by(() => {
 
 <div class="post-viewer" style={variables} use:viewerMounted>
   <PostMedia id={model.id} media={model.media} autoplay={autoplay} on={{ videoProgress: on?.progress }} />
-  {#if (uiManager.showAttachments && model.attachments) || model.heading || model.texts.kicker || model.texts.title || model.texts.text || model.texts.readMoreUrl}
+  {#if (uiManager.showAttachments && model.attachments) || model.heading || model.texts.kicker || model.texts.title || model.texts.text || model.texts.readMoreUrl || handleArticleReadMore}
     <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} />
+      <Texts model={model.texts} uiManager={uiManager} localization={localization} on={{ readMore: handleArticleReadMore }} />
 
       {#if uiManager.showAttachments && model.attachments}
         <AttachmentsHorizontal

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

@@ -15,6 +15,7 @@ type Props = {
         productImpression?: (productId: string, videoId: string) => void;
         adClick?: (adId: string) => void;
         adImpression?: (adId: string) => void;
+        articleReadMore?: (articleId: string) => void;
     };
     overlay?: Snippet;
 };

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

@@ -1,4 +1,3 @@
-import { MediaType, PostType } from '../../core/enums';
 import { getMediaItemImageUrl } from '../../core/media';
 import { shouldUseSalePrice } from '../../products/price-helper';
 export const mapToPostModel = (payload) => {
@@ -29,15 +28,15 @@ export const mapToPostModel = (payload) => {
 const mapToPostType = (payload) => {
     switch (true) {
         case !!payload.shortVideoData:
-            return PostType.ShortVideo;
+            return 'SHORT_VIDEO';
         case !!payload.momentData:
-            return PostType.Moment;
+            return 'MOMENT';
         case !!payload.articleData:
-            return PostType.Article;
+            return 'ARTICLE';
         case !!payload.videoData:
-            return PostType.Video;
+            return 'VIDEO';
         case !!payload.mediaData:
-            return PostType.Media;
+            return 'MEDIA';
         default:
             return null;
     }
@@ -56,7 +55,7 @@ const extractPostText = (payload) => {
 };
 const mapToPostViewerMediaModel = (payload) => {
     return payload.media.map((i) => {
-        return i.type === MediaType.Image
+        return i.type === 'IMAGE'
             ? { isImage: true, url: i.url }
             : {
                 isImage: false,

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

@@ -1,7 +1,7 @@
 <script lang="ts">import { PostViewerLocalization } from './post-viewer-localization';
 import { PostViewerUiManager } from './ui-manager.svelte';
 import { LineClamp } from '@streamscloud/kit/ui/line-clamp';
-let { model, uiManager, localization } = $props();
+let { model, uiManager, localization, on } = $props();
 const variables = $derived.by(() => {
     const values = [
         `--_post-viewer-texts--padding: 0 ${uiManager.controlsPanelWidth ? uiManager.controlsPanelWidth : uiManager.infoPaddingInline}px 0 ${uiManager.infoPaddingInline}px`
@@ -30,6 +30,10 @@ const variables = $derived.by(() => {
     <a class="post-viewer-texts__read-more" href={model.readMoreUrl} target="_blank" rel="noopener noreferrer">
       {localization.readMore}
     </a>
+  {:else if on?.readMore}
+    <button type="button" class="post-viewer-texts__read-more" onclick={on.readMore}>
+      {localization.readMore}
+    </button>
   {/if}
 </div>
 
@@ -83,6 +87,9 @@ const variables = $derived.by(() => {
   pointer-events: auto;
   font-size: 1rem;
   font-weight: 400;
+  color: inherit;
+  cursor: pointer;
+  text-shadow: inherit;
   /* Set 'container-type: inline-size;' to reference container*/
 }
 @container (width < 576px) {

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

@@ -5,6 +5,9 @@ type Props = {
     model: PostModel['texts'];
     uiManager: PostViewerUiManager;
     localization: PostViewerLocalization;
+    on?: {
+        readMore?: () => void;
+    };
 };
 declare const PostTexts: import("svelte").Component<Props, {}, "">;
 type PostTexts = ReturnType<typeof PostTexts>;