@streamscloud/embeddable 16.0.7-1772107327250 → 16.0.7-1772186925109

package/dist/articles/article/article-proxy.svelte.d.ts

@@ -4,7 +4,7 @@ import type { AppLocaleValue } from '@streamscloud/kit/core/locale';
 type Props = {
     sections: ArticleSectionModel[];
     metadata: ArticleMetadata;
-    theme: ThemeValue;
+    theme: ThemeValue | undefined;
     locale: AppLocaleValue | undefined;
 };
 declare const ArticleProxy: import("svelte").Component<Props, {}, "">;

package/dist/articles/article/cmp.article.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">import { createShadowRoot } from '../../ui/shadow-dom';
 import { default as ArticleProxy } from './article-proxy.svelte';
 import { mount, unmount } from 'svelte';
-let { sections, metadata, theme = 'dark', locale } = $props();
+let { sections, metadata, theme, locale } = $props();
 const initHost = (node) => {
     const shadowRoot = createShadowRoot(node);
     const mounted = mount(ArticleProxy, {

package/dist/articles/article/index.d.ts

@@ -3,5 +3,5 @@ export { default as ArticleView } from './article-view.svelte';
 export { default as FactsContainer } from './cmp.facts-container.svelte';
 export { fieldIsFilled, layoutIsFilled, sectionIsFilled } from './helpers';
 export { ArticleStylesHelper } from './styles-transformer';
-export type { ArticleLayoutModel, ArticleLayoutStylesModel, ArticleMetadata, ArticleSectionModel, ArticleSectionStylesModel } from './types';
+export type { ArticleLayoutModel, ArticleLayoutStylesModel, ArticleMetadata, ArticleSectionModel, ArticleSectionStylesModel, ArticleSeo } from './types';
 export type { ArticleFieldDataModel, ArticleFieldModel, ArticleFieldStylesModel, BylineFieldDataModel, FieldMetadata, ImageFieldDataModel, MediaFieldDataModel, MediaGalleryFieldDataModel, RichTextFieldDataModel, TextFieldDataModel, VideoFieldDataModel } from './fields/types';

package/dist/articles/article/types.d.ts

@@ -2,6 +2,11 @@ import type { ArticleFieldModel } from './fields/types';
 export type ArticleMetadata = {
     displayDate: string;
 };
+export type ArticleSeo = {
+    title: string;
+    description: string;
+    keywords: string[];
+};
 export type ArticleSectionModel = {
     id: string;
     styles: ArticleSectionStylesModel | null;

package/dist/articles/article-dialog/article-dialog-localization.d.ts

@@ -0,0 +1,3 @@
+export declare class ArticleDialogLocalization {
+    get failedToLoad(): string;
+}

package/dist/articles/article-dialog/article-dialog-localization.js

@@ -0,0 +1,9 @@
+import { AppLocale } from '@streamscloud/kit/core/locale';
+export class ArticleDialogLocalization {
+    get failedToLoad() {
+        return loc.failedToLoad[AppLocale.current];
+    }
+}
+const loc = {
+    failedToLoad: { en: 'Failed to load article', no: 'Kunne ikke laste artikkelen' }
+};

package/dist/articles/article-dialog/cmp.article-dialog.svelte

@@ -0,0 +1,98 @@
+<script lang="ts">import { default as ArticleView } from '../article/article-view.svelte';
+import { ArticleDialogLocalization } from './article-dialog-localization';
+import { DialogCloseButton } from '@streamscloud/kit/ui/dialog';
+import { Loading } from '@streamscloud/kit/ui/loading';
+import { untrack } from 'svelte';
+let { controller, data } = $props();
+const localization = new ArticleDialogLocalization();
+$effect(() => untrack(() => {
+    controller.updateSettings({ closeOnEsc: true, closeOnClickOutside: true });
+    controller.updateContainerSettings({ position: 'full-screen' });
+}));
+let articleData = $state.raw(null);
+let loading = $state(true);
+let failed = $state(false);
+const load = async () => {
+    loading = true;
+    failed = false;
+    const result = await data.fetchArticle({ id: data.articleId });
+    if (result) {
+        articleData = result;
+    }
+    else {
+        failed = true;
+    }
+    loading = false;
+};
+void load();
+</script>
+
+<div class="article-dialog">
+  <div class="article-dialog__close">
+    <DialogCloseButton controller={controller} />
+  </div>
+  <div class="article-dialog__content">
+    {#if loading}
+      <div class="article-dialog__loading">
+        <Loading positionAbsoluteCenter timeout={400} />
+      </div>
+    {:else if failed}
+      <div class="article-dialog__error">{localization.failedToLoad}</div>
+    {:else if articleData}
+      <ArticleView sections={articleData.sections} metadata={articleData.metadata} />
+    {/if}
+  </div>
+</div>
+
+<style>.article-dialog {
+  width: 100%;
+  height: 100%;
+  position: relative;
+}
+.article-dialog__close {
+  --sc-kit--dialog-close-button--color: #fff;
+  --sc-kit--icon--filter: drop-shadow(1px 1px 0 rgba(0, 0, 0, 0.2));
+  position: absolute;
+  top: 0.75rem;
+  right: 1rem;
+  z-index: 10;
+}
+.article-dialog__content {
+  --article--max-width: 56.25rem;
+  --article--container-background: light-dark(rgba(255, 255, 255, 0.8), rgba(0, 0, 0, 0.8));
+  width: 100%;
+  height: 100%;
+  overflow-y: auto;
+  --_cross-browser-scrollbar--thumb-color: var(--scrollbar--thumb-color, #7d7d7d);
+  --_cross-browser-scrollbar--track-color: var(--scrollbar--track-color, transparent);
+}
+.article-dialog__content::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+.article-dialog__content::-webkit-scrollbar-track {
+  background: var(--_cross-browser-scrollbar--track-color);
+  border-radius: 100vw;
+}
+.article-dialog__content::-webkit-scrollbar-thumb {
+  background: var(--_cross-browser-scrollbar--thumb-color);
+  border-radius: 100vw;
+}
+@supports (scrollbar-color: transparent transparent) {
+  .article-dialog__content {
+    scrollbar-color: var(--_cross-browser-scrollbar--thumb-color) var(--_cross-browser-scrollbar--track-color);
+    scrollbar-width: thin;
+  }
+}
+.article-dialog__loading {
+  position: relative;
+  min-height: 18.75rem;
+}
+.article-dialog__error {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 12.5rem;
+  color: light-dark(#9ca3af, #6b7280);
+  font-size: 1rem;
+}</style>

package/dist/articles/article-dialog/cmp.article-dialog.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { ArticleDialogViewData } from './types';
+import { type DialogController } from '@streamscloud/kit/ui/dialog';
+type Props = {
+    controller: DialogController;
+    data: ArticleDialogViewData;
+};
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

package/dist/articles/article-dialog/index.d.ts

@@ -0,0 +1,6 @@
+import type { ArticleDataProvider } from '../data-providers';
+export declare const openArticleDialog: (data: {
+    anchor: HTMLElement;
+    articleId: string;
+    fetchArticle: ArticleDataProvider["fetchArticle"];
+}) => void;

package/dist/articles/article-dialog/index.js

@@ -0,0 +1,10 @@
+import { default as ArticleDialog } from './cmp.article-dialog.svelte';
+import { Dialogs } from '@streamscloud/kit/ui/dialog';
+export const openArticleDialog = (data) => {
+    const { anchor, articleId, fetchArticle } = data;
+    void Dialogs.open({
+        view: ArticleDialog,
+        data: { articleId, fetchArticle },
+        host: anchor
+    });
+};

package/dist/articles/article-dialog/types.d.ts

@@ -0,0 +1,6 @@
+import type { ArticleDataProvider } from '../data-providers';
+/** Data passed to the article dialog view component. */
+export type ArticleDialogViewData = {
+    articleId: string;
+    fetchArticle: ArticleDataProvider['fetchArticle'];
+};

package/dist/articles/article-dialog/types.js

@@ -0,0 +1 @@
+export {};

package/dist/articles/data-providers/index.d.ts

@@ -0,0 +1 @@
+export type { ArticleData, ArticleDataProvider } from './types';

package/dist/articles/data-providers/index.js

@@ -0,0 +1 @@
+export {};

package/dist/articles/data-providers/types.d.ts

@@ -0,0 +1,14 @@
+import type { ArticleMetadata, ArticleSectionModel, ArticleSeo } from '../article';
+/** Article data returned by a data provider. */
+export type ArticleData = {
+    sections: ArticleSectionModel[];
+    metadata: ArticleMetadata;
+    seo: ArticleSeo;
+};
+/** Provider for fetching article content by ID. */
+export type ArticleDataProvider = {
+    fetchArticle: (input: {
+        id?: string;
+        slug?: string;
+    }) => Promise<ArticleData | null>;
+};

package/dist/articles/data-providers/types.js

@@ -0,0 +1 @@
+export {};

package/dist/external-api/article/cmp.embed-article.svelte

@@ -1,28 +1,11 @@
 <script lang="ts">import { Article } from '../../articles/article';
 import { createLocalGQLClient } from '../../core/graphql';
-import { GetEmbedArticleDocument } from './operations.generated';
+import { createArticleDataProvider } from '../data-providers/article/article-data-provider';
 import { Loading } from '@streamscloud/kit/ui/loading';
 import { untrack } from 'svelte';
-let { id, slug, initiator, graphqlOrigin, theme = 'light', on } = $props();
-let sections = $state.raw(null);
-let metadata = $state.raw(null);
+let { id, slug, initiator, graphqlOrigin, theme, on } = $props();
+let data = $state.raw(null);
 let notFound = $state(false);
-const mapSections = (article) => article.sections.map((section) => ({
-    id: section.id,
-    facts: section.facts,
-    styles: section.styles,
-    layouts: section.layouts.map((layout) => ({
-        id: layout.id,
-        styles: layout.styles,
-        fields: layout.fields.map((field) => ({
-            id: field.id,
-            name: field.name,
-            description: field.description,
-            styles: field.styles,
-            fieldData: field.fieldData
-        }))
-    }))
-}));
 const extractCoverImageUrl = (article) => {
     for (const section of article.sections) {
         for (const layout of section.layouts) {
@@ -39,15 +22,13 @@ const extractCoverImageUrl = (article) => {
 };
 const load = async () => {
     const graphql = createLocalGQLClient(graphqlOrigin, { initiator });
-    const result = await graphql.query(GetEmbedArticleDocument, { input: { id, slug } }).toPromise();
-    if (!result.data?.article) {
+    const dataProvider = createArticleDataProvider(graphql);
+    data = await dataProvider.fetchArticle({ id, slug });
+    if (!data) {
         notFound = true;
         return;
     }
-    const article = result.data.article;
-    sections = mapSections(article);
-    metadata = { displayDate: article.publishedAt ?? '' };
-    on?.seoLoaded?.({ ...article.seo, imageUrl: extractCoverImageUrl(article) });
+    on?.seoLoaded?.({ ...data.seo, imageUrl: extractCoverImageUrl(data) });
 };
 $effect(() => {
     untrack(() => {
@@ -58,8 +39,8 @@ $effect(() => {
 
 {#if notFound}
   <div class="embed-article__not-found">¯\_(ツ)_/¯</div>
-{:else if sections && metadata}
-  <Article sections={sections} metadata={metadata} theme={theme} />
+{:else if data}
+  <Article sections={data.sections} metadata={data.metadata} theme={theme} />
 {:else}
   <div class="embed-article__loading">
     <Loading positionAbsoluteCenter timeout={600} />

package/dist/external-api/data-providers/article/article-data-provider.d.ts

@@ -0,0 +1,4 @@
+import type { ArticleDataProvider } from '../../../articles/data-providers';
+import type { Client } from '@urql/core';
+/** Creates an ArticleDataProvider that fetches articles via the GetEmbedArticle GraphQL query. */
+export declare const createArticleDataProvider: (graphql: Client) => ArticleDataProvider;

package/dist/external-api/data-providers/article/article-data-provider.js

@@ -0,0 +1,32 @@
+import { GetEmbedArticleDocument } from './operations.generated';
+/** Creates an ArticleDataProvider that fetches articles via the GetEmbedArticle GraphQL query. */
+export const createArticleDataProvider = (graphql) => ({
+    fetchArticle: async (input) => {
+        const { id, slug } = input;
+        const result = await graphql.query(GetEmbedArticleDocument, { input: { id, slug } }).toPromise();
+        const article = result.data?.article;
+        if (!article) {
+            return null;
+        }
+        return {
+            sections: article.sections.map((section) => ({
+                id: section.id,
+                facts: section.facts,
+                styles: section.styles,
+                layouts: section.layouts.map((layout) => ({
+                    id: layout.id,
+                    styles: layout.styles,
+                    fields: layout.fields.map((field) => ({
+                        id: field.id,
+                        name: field.name,
+                        description: field.description,
+                        styles: field.styles,
+                        fieldData: field.fieldData
+                    }))
+                }))
+            })),
+            metadata: { displayDate: article.publishedAt ?? '' },
+            seo: article.seo
+        };
+    }
+});

package/dist/external-api/data-providers/article/index.d.ts

@@ -0,0 +1 @@
+export { createArticleDataProvider } from './article-data-provider';

package/dist/external-api/data-providers/article/index.js

@@ -0,0 +1 @@
+export { createArticleDataProvider } from './article-data-provider';

package/dist/external-api/{article → data-providers/article}/operations.generated.d.ts

@@ -1,4 +1,4 @@
-import type * as SchemaTypes from '../../../gql/types';
+import type * as SchemaTypes from '../../../../gql/types';
 import type { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/core';
 export type GetEmbedArticleQueryVariables = SchemaTypes.Exact<{
     input: SchemaTypes.EmbedArticleInput;

package/dist/external-api/data-providers/internal-media-center-data-provider.svelte.js

@@ -1,4 +1,5 @@
 import { createLocalGQLClient } from '../../core/graphql';
+import { createArticleDataProvider } from './article';
 import { InternalMediaCenterAnalyticsHandler } from './internal-media-center-analytics-handler';
 import { MockCategoryFollowingProvider, MockMediaCenterContentManagementHandler, MockMembershipHandler, MockNavigationHandler, MockPostSocialInteractionsHandler } from './mocks';
 import { GetMediaPageConfigDocument } from './operations.generated';
@@ -57,7 +58,8 @@ export class InternalMediaCenterDataProvider {
                     limit,
                     graphql: this.graphql
                 });
-            }
+            },
+            fetchArticle: createArticleDataProvider(this.graphql).fetchArticle
         };
         this.streamPlayer = {
             getStreamsCursor: async ({ filter, limit, continuationToken }) => {

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

@@ -1,3 +1,4 @@
+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';
@@ -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/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/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/posts-feed/posts-feed-handler.svelte.js

@@ -175,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/model/post-model.d.ts

@@ -5,6 +5,7 @@ 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

@@ -3,6 +3,7 @@ export class PostModel {
     id;
     media;
     postType;
+    articleId;
     texts;
     heading;
     enableSocialInteractions;
@@ -10,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/cmp.post-viewer.svelte

@@ -45,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) {
@@ -56,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/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>;

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

@@ -1,30 +1,40 @@
 <script lang="ts">import { CloseOrchestrator } from '../../ui/player/close-orchestrator';
 import { createShadowRoot } from '../../ui/shadow-dom';
-import { PostsPlayerHostSettings } from './posts-player-host-settings.svelte';
 import { default as PostsPlayerProxy } from './posts-player-proxy.svelte';
-import { mount, unmount, untrack } from 'svelte';
-let { dataProvider, socialInteractionsHandler, sharingHandler, playerSettings, analyticsHandler, on } = $props();
-const settingsHolder = untrack(() => new PostsPlayerHostSettings(playerSettings));
-$effect(() => {
-    settingsHolder.update(playerSettings);
-});
+import { mount, unmount } from 'svelte';
+let { dataProvider, socialInteractionsHandler, sharingHandler, playerSettings, analyticsHandler, articleDataProvider, on } = $props();
 const initHost = (node) => {
     const shadowRoot = createShadowRoot(node);
     const mounted = mount(PostsPlayerProxy, {
         target: shadowRoot,
         props: {
-            dataProvider,
-            socialInteractionsHandler,
-            sharingHandler,
-            playerSettings: settingsHolder,
-            analyticsHandler,
+            get dataProvider() {
+                return dataProvider;
+            },
+            get socialInteractionsHandler() {
+                return socialInteractionsHandler;
+            },
+            get sharingHandler() {
+                return sharingHandler;
+            },
+            get playerSettings() {
+                return playerSettings;
+            },
+            get analyticsHandler() {
+                return analyticsHandler;
+            },
+            get articleDataProvider() {
+                return articleDataProvider;
+            },
             closeOrchestrator: new CloseOrchestrator({
                 closeFn: async () => {
                     await unmount(mounted);
                 },
                 canClose: false
             }),
-            on
+            get on() {
+                return on;
+            }
         }
     });
     return {

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

@@ -1,3 +1,4 @@
+import type { ArticleDataProvider } from '../../articles/data-providers';
 import type { IPostSocialInteractionsHandler } from '..';
 import type { IPostSharingHandler } from '../sharing';
 import type { IPostAnalyticsHandler, PostPlayerModel } from './types';
@@ -8,6 +9,7 @@ type Props = {
     socialInteractionsHandler?: IPostSocialInteractionsHandler;
     sharingHandler?: IPostSharingHandler;
     analyticsHandler?: IPostAnalyticsHandler;
+    articleDataProvider?: ArticleDataProvider;
     playerSettings?: {
         locale?: AppLocaleValue;
         showStreamsCloudWatermark?: boolean;

package/dist/posts/posts-player/index.d.ts

@@ -1,3 +1,4 @@
+import type { ArticleDataProvider } from '../../articles/data-providers';
 import { type IMediaCenterDataProvider } from '../../media-center/config/types';
 import type { IPostSharingHandler } from '../sharing';
 import type { IPostSocialInteractionsHandler } from '../social-interactions';
@@ -5,7 +6,7 @@ import { default as PostsPlayer } from './cmp.posts-player.svelte';
 import type { IPostAnalyticsHandler, PostPlayerModel } from './types';
 import type { AppLocaleValue } from '@streamscloud/kit/core/locale';
 export { PostsPlayer, type PostPlayerModel };
-export type { IMediaCenterDataProvider, IPostAnalyticsHandler };
+export type { ArticleDataProvider, IMediaCenterDataProvider, IPostAnalyticsHandler };
 /**
  * Opens the posts player modal.
  *
@@ -23,6 +24,11 @@ export type { IMediaCenterDataProvider, IPostAnalyticsHandler };
  * @param {IPostSocialInteractionsHandler} [init.socialInteractionsHandler]
  *   Handler for social interactions (like, share, etc.).
  *
+ * Article data provider (optional)
+ * @param {ArticleDataProvider} [init.articleDataProvider]
+ *   Provider for fetching article content. When provided, article posts will show
+ *   a "Read more" button that opens an article dialog instead of navigating to a URL.
+ *
  * Player settings (optional)
  * @param {object} [init.playerSettings]
  *   Player UI and behavior settings.
@@ -87,6 +93,7 @@ export declare function openPostsPlayer(init: {
     analyticsHandler?: IPostAnalyticsHandler;
     socialInteractionsHandler?: IPostSocialInteractionsHandler;
     sharingHandler?: IPostSharingHandler;
+    articleDataProvider?: ArticleDataProvider;
     playerSettings?: {
         disableBackground?: boolean;
         locale?: AppLocaleValue;

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

@@ -22,6 +22,11 @@ export { PostsPlayer };
  * @param {IPostSocialInteractionsHandler} [init.socialInteractionsHandler]
  *   Handler for social interactions (like, share, etc.).
  *
+ * Article data provider (optional)
+ * @param {ArticleDataProvider} [init.articleDataProvider]
+ *   Provider for fetching article content. When provided, article posts will show
+ *   a "Read more" button that opens an article dialog instead of navigating to a URL.
+ *
  * Player settings (optional)
  * @param {object} [init.playerSettings]
  *   Player UI and behavior settings.
@@ -82,7 +87,7 @@ export { PostsPlayer };
  * ```
  */
 export function openPostsPlayer(init) {
-    const { postsProvider: dataProvider, analyticsHandler, socialInteractionsHandler, sharingHandler, playerSettings, on } = init;
+    const { postsProvider: dataProvider, analyticsHandler, socialInteractionsHandler, sharingHandler, articleDataProvider, playerSettings, on } = init;
     const shadowHost = new ModalShadowHost();
     let mounted = null;
     const makeCloseOrchestrator = () => new CloseOrchestrator({
@@ -102,6 +107,7 @@ export function openPostsPlayer(init) {
             socialInteractionsHandler,
             sharingHandler,
             analyticsHandler,
+            articleDataProvider,
             playerSettings,
             closeOrchestrator: makeCloseOrchestrator(),
             on: {

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

@@ -1,7 +1,7 @@
 <script lang="ts">import {} from '../../ui/player/close-orchestrator';
 import { ShadowRoot } from '../../ui/shadow-dom';
 import { default as PostsPlayerView } from './posts-player-view.svelte';
-let { dataProvider, socialInteractionsHandler, sharingHandler, closeOrchestrator, playerSettings, analyticsHandler, on } = $props();
+let { dataProvider, socialInteractionsHandler, sharingHandler, closeOrchestrator, playerSettings, analyticsHandler, articleDataProvider, on } = $props();
 let backgroundImageUrl = $state(null);
 const handleBackgroundImagedLoaded = (url) => {
     backgroundImageUrl = url;
@@ -10,7 +10,7 @@ const handleBackgroundImagedLoaded = (url) => {
 
 <ShadowRoot
   locale={playerSettings?.locale}
-  theme={playerSettings?.theme ?? 'dark'}
+  theme={playerSettings?.theme}
   backgroundDisabled={playerSettings?.disableBackground === true}
   backgroundImageUrl={backgroundImageUrl}>
   <PostsPlayerView
@@ -19,6 +19,7 @@ const handleBackgroundImagedLoaded = (url) => {
     sharingHandler={sharingHandler}
     playerSettings={playerSettings}
     analyticsHandler={analyticsHandler}
+    articleDataProvider={articleDataProvider}
     closeOrchestrator={closeOrchestrator}
     on={{ postActivated: on?.postActivated, backgroundImageLoaded: playerSettings?.disableBackground === true ? undefined : handleBackgroundImagedLoaded }} />
 </ShadowRoot>

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

@@ -1,3 +1,4 @@
+import type { ArticleDataProvider } from '../../articles/data-providers';
 import type { IPostSharingHandler } from '../sharing';
 import type { IPostSocialInteractionsHandler } from '../social-interactions';
 import { type ICloseOrchestrator } from '../../ui/player/close-orchestrator';
@@ -9,6 +10,7 @@ type Props = {
     socialInteractionsHandler?: IPostSocialInteractionsHandler;
     sharingHandler?: IPostSharingHandler;
     analyticsHandler?: IPostAnalyticsHandler;
+    articleDataProvider?: ArticleDataProvider;
     closeOrchestrator: ICloseOrchestrator;
     playerSettings?: {
         locale?: AppLocaleValue;

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

@@ -1,14 +1,27 @@
-<script lang="ts">import { PostAttachments } from '../attachments';
+<script lang="ts">import { openArticleDialog } from '../../articles/article-dialog';
+import { PostAttachments } from '../attachments';
 import { PostActionsGenerator } from '../controls';
 import { getPostCoverImage, PostModel } from '../model';
 import { PostViewer } from '../post-viewer';
 import { Player, PlayerConfig, PlayerSettings } from '../../ui/player';
+import { getDialogAnchor } from '../../ui/shadow-dom';
 import IconDelete from '@fluentui/svg-icons/icons/delete_32_regular.svg?raw';
 import IconEdit from '@fluentui/svg-icons/icons/edit_32_regular.svg?raw';
 import { preloadImage } from '@streamscloud/kit/core/utils';
 import { initBufferFromProvider } from '@streamscloud/kit/ui/player/providers';
 import { untrack } from 'svelte';
-let { dataProvider, socialInteractionsHandler, sharingHandler, playerSettings, analyticsHandler, managementActions, closeOrchestrator, on } = $props();
+let { dataProvider, socialInteractionsHandler, sharingHandler, playerSettings, analyticsHandler, managementActions, articleDataProvider, closeOrchestrator, on } = $props();
+let playerHostElement = $state();
+const handleArticleReadMore = (articleId) => {
+    if (!articleDataProvider || !playerHostElement) {
+        return;
+    }
+    const anchor = getDialogAnchor(playerHostElement);
+    if (!anchor) {
+        return;
+    }
+    openArticleDialog({ anchor, articleId, fetchArticle: articleDataProvider.fetchArticle });
+};
 let buffer = $state.raw(null);
 let mappedPostsCache = {};
 $effect(() => {
@@ -145,7 +158,7 @@ const currentItemActions = $derived.by(() => {
       adImpression: (id) => onAdImpression(id)
     }} />
 {/snippet}
-<div class="player-host">
+<div class="player-host" bind:this={playerHostElement}>
   <Player
     config={contentPlayerConfig}
     itemActions={currentItemActions}
@@ -164,7 +177,8 @@ const currentItemActions = $derived.by(() => {
           productClick: (productId) => onProductClick(productId, postModel.id),
           productImpression: (productId) => onProductImpression(productId, postModel.id),
           adClick: (adId) => onAdClick(adId),
-          adImpression: (adId) => onAdImpression(adId)
+          adImpression: (adId) => onAdImpression(adId),
+          articleReadMore: articleDataProvider ? handleArticleReadMore : undefined
         }} />
     {/snippet}
   </Player>

package/dist/posts/posts-player/types.d.ts

@@ -1,3 +1,4 @@
+import type { ArticleDataProvider } from '../../articles/data-providers';
 import type { PostType } from '../../core/enums';
 import type { IPostModel } from '..';
 import type { IPostSharingHandler } from '../sharing';
@@ -26,6 +27,8 @@ export type PostsPlayerProps = {
     sharingHandler?: IPostSharingHandler;
     analyticsHandler?: IPostAnalyticsHandler;
     managementActions?: PostManagementActions;
+    /** Provider for fetching article content. Enables "Read more" button that opens an article dialog. */
+    articleDataProvider?: ArticleDataProvider;
     playerSettings?: PostPlayerSettings;
     closeOrchestrator: ICloseOrchestrator;
     on?: {

package/dist/streams/streams-player/cmp.streams-player.svelte

@@ -1,31 +1,40 @@
 <script lang="ts">import { CloseOrchestrator } from '../../ui/player/close-orchestrator';
 import { createShadowRoot } from '../../ui/shadow-dom';
-import { StreamsPlayerHostSettings } from './streams-player-host-settings.svelte';
 import { default as StreamsPlayerProxy } from './streams-player-proxy.svelte';
-import { mount, unmount, untrack } from 'svelte';
+import { mount, unmount } from 'svelte';
 let { dataProvider, postSocialInteractionsHandler, sharingHandler, amplificationParameters, playerSettings, analyticsHandler, on } = $props();
-const settingsHolder = untrack(() => new StreamsPlayerHostSettings(playerSettings));
-$effect(() => {
-    settingsHolder.update(playerSettings);
-});
 const initHost = (node) => {
     const shadowRoot = createShadowRoot(node);
     const mounted = mount(StreamsPlayerProxy, {
         target: shadowRoot,
         props: {
-            dataProvider,
-            postSocialInteractionsHandler,
-            sharingHandler,
-            analyticsHandler,
-            amplificationParameters,
-            playerSettings: settingsHolder,
+            get dataProvider() {
+                return dataProvider;
+            },
+            get postSocialInteractionsHandler() {
+                return postSocialInteractionsHandler;
+            },
+            get sharingHandler() {
+                return sharingHandler;
+            },
+            get analyticsHandler() {
+                return analyticsHandler;
+            },
+            get amplificationParameters() {
+                return amplificationParameters;
+            },
+            get playerSettings() {
+                return playerSettings;
+            },
             closeOrchestrator: new CloseOrchestrator({
                 closeFn: async () => {
                     await unmount(mounted);
                 },
                 canClose: false
             }),
-            on
+            get on() {
+                return on;
+            }
         }
     });
     return {

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

@@ -10,7 +10,7 @@ const handleBackgroundImagedLoaded = (url) => {
 
 <ShadowRoot
   locale={playerSettings?.locale}
-  theme={playerSettings?.theme ?? 'dark'}
+  theme={playerSettings?.theme}
   backgroundDisabled={playerSettings?.disableBackground === true}
   backgroundImageUrl={backgroundImageUrl}>
   <StreamsPlayerView

package/dist/ui/shadow-dom/cmp.shadow-root.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">import { brandColors } from '../../core/theme';
 import { AppLocale } from '@streamscloud/kit/core/locale';
-let { locale, theme = 'dark', backgroundDisabled, backgroundImageUrl, children } = $props();
+let { locale, theme, backgroundDisabled, backgroundImageUrl, children } = $props();
 $effect(() => {
     if (locale) {
         AppLocale.change(locale);
@@ -42,9 +42,10 @@ const styles = $derived.by(() => {
   class:shadow-root--background-enabled={!backgroundDisabled}
   class:shadow-root--background-active={!backgroundDisabled && backgroundImageUrl && backgroundImageUrl !== 'not-applicable'}
   class:shadow-root--background-loading={!backgroundDisabled && !backgroundImageUrl}
-  style:color-scheme={theme}
+  style:color-scheme={theme ?? 'light dark'}
   style={styles}>
   {@render children()}
+  <div data-dialog-anchor></div>
 </div>
 
 <style>@charset "UTF-8";

package/dist/ui/shadow-dom/index.d.ts

@@ -1,3 +1,3 @@
 export { ModalShadowHost } from './modal-shadow-host';
-export { createShadowRoot } from './shadow-root-service';
+export { createShadowRoot, getDialogAnchor } from './shadow-root-service';
 export { default as ShadowRoot } from './cmp.shadow-root.svelte';

package/dist/ui/shadow-dom/index.js

@@ -1,3 +1,3 @@
 export { ModalShadowHost } from './modal-shadow-host';
-export { createShadowRoot } from './shadow-root-service';
+export { createShadowRoot, getDialogAnchor } from './shadow-root-service';
 export { default as ShadowRoot } from './cmp.shadow-root.svelte';

package/dist/ui/shadow-dom/shadow-root-service.d.ts

@@ -1 +1,2 @@
 export declare const createShadowRoot: (host: HTMLElement) => ShadowRoot;
+export declare const getDialogAnchor: (element: HTMLElement) => HTMLElement | null;

package/dist/ui/shadow-dom/shadow-root-service.js

@@ -11,3 +11,11 @@ export const createShadowRoot = (host) => {
 const prepareShadowRootHost = (host) => {
     host.style.all = 'unset';
 };
+const DIALOG_ANCHOR_SELECTOR = '[data-dialog-anchor]';
+export const getDialogAnchor = (element) => {
+    const root = element.getRootNode();
+    if (root instanceof ShadowRoot) {
+        return root.querySelector(DIALOG_ANCHOR_SELECTOR);
+    }
+    return null;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@streamscloud/embeddable",
-  "version": "16.0.7-1772107327250",
+  "version": "16.0.7-1772186925109",
   "author": "StreamsCloud",
   "repository": {
     "type": "git",

package/dist/posts/posts-player/posts-player-host-settings.svelte.d.ts

@@ -1,20 +0,0 @@
-import type { ThemeValue } from '../../core/theme';
-import type { AppLocaleValue } from '@streamscloud/kit/core/locale';
-export declare class PostsPlayerHostSettings {
-    locale: AppLocaleValue | undefined;
-    showStreamsCloudWatermark: boolean | undefined;
-    disableBackground: boolean | undefined;
-    theme: ThemeValue | undefined;
-    constructor(init: {
-        locale?: AppLocaleValue;
-        showStreamsCloudWatermark?: boolean;
-        disableBackground?: boolean;
-        theme?: ThemeValue;
-    } | undefined);
-    update: (data: {
-        locale?: AppLocaleValue;
-        showStreamsCloudWatermark?: boolean;
-        disableBackground?: boolean;
-        theme?: ThemeValue;
-    } | undefined) => void;
-}

package/dist/posts/posts-player/posts-player-host-settings.svelte.js

@@ -1,15 +0,0 @@
-export class PostsPlayerHostSettings {
-    locale = $state();
-    showStreamsCloudWatermark = $state();
-    disableBackground = $state();
-    theme = $state();
-    constructor(init) {
-        this.update(init);
-    }
-    update = (data) => {
-        this.locale = data?.locale;
-        this.showStreamsCloudWatermark = data?.showStreamsCloudWatermark;
-        this.disableBackground = data?.disableBackground;
-        this.theme = data?.theme;
-    };
-}

package/dist/streams/streams-player/streams-player-host-settings.svelte.d.ts

@@ -1,20 +0,0 @@
-import type { ThemeValue } from '../../core/theme';
-import type { AppLocaleValue } from '@streamscloud/kit/core/locale';
-export declare class StreamsPlayerHostSettings {
-    locale: AppLocaleValue | undefined;
-    showStreamsCloudWatermark: boolean | undefined;
-    disableBackground: boolean | undefined;
-    theme: ThemeValue | undefined;
-    constructor(init: {
-        locale?: AppLocaleValue;
-        showStreamsCloudWatermark?: boolean;
-        disableBackground?: boolean;
-        theme?: ThemeValue;
-    } | undefined);
-    update: (data: {
-        locale?: AppLocaleValue;
-        showStreamsCloudWatermark?: boolean;
-        disableBackground?: boolean;
-        theme?: ThemeValue;
-    } | undefined) => void;
-}

package/dist/streams/streams-player/streams-player-host-settings.svelte.js

@@ -1,15 +0,0 @@
-export class StreamsPlayerHostSettings {
-    locale = $state();
-    showStreamsCloudWatermark = $state();
-    disableBackground = $state();
-    theme = $state();
-    constructor(init) {
-        this.update(init);
-    }
-    update = (data) => {
-        this.locale = data?.locale;
-        this.showStreamsCloudWatermark = data?.showStreamsCloudWatermark;
-        this.disableBackground = data?.disableBackground;
-        this.theme = data?.theme;
-    };
-}