@streamscloud/embeddable 16.0.7 → 16.1.1

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,15 +1,26 @@
-<script lang="ts">import { PostType } from '../../core/enums';
+<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 dialogAnchor;
+const resolveDialogAnchor = (el) => {
+    dialogAnchor = getDialogAnchor(el) ?? undefined;
+};
+const handleArticleReadMore = (articleId) => {
+    if (!articleDataProvider || !dialogAnchor) {
+        return;
+    }
+    openArticleDialog({ anchor: dialogAnchor, articleId, fetchArticle: articleDataProvider.fetchArticle });
+};
 let buffer = $state.raw(null);
 let mappedPostsCache = {};
 $effect(() => {
@@ -57,7 +68,7 @@ const contentPlayerConfig = untrack(() => new PlayerConfig({
             if (on?.backgroundImageLoaded) {
                 on.backgroundImageLoaded(getPostCoverImage(post));
             }
-            if (post.postType === PostType.ShortVideo) {
+            if (post.postType === 'SHORT_VIDEO') {
                 analyticsHandler?.trackShortVideoView(id);
             }
             else if (post.postType) {
@@ -73,12 +84,12 @@ const postActionsGenerator = untrack(() => new PostActionsGenerator({
     on: { attachmentClicked: () => (contentPlayerConfig.uiManager.attachmentsCollapsed = !contentPlayerConfig.uiManager.attachmentsCollapsed) }
 }));
 const onProductClick = (id, postId) => {
-    if (getLoadedItemById(postId)?.postType === PostType.ShortVideo) {
+    if (getLoadedItemById(postId)?.postType === 'SHORT_VIDEO') {
         analyticsHandler?.trackShortVideoProductClick(id, postId);
     }
 };
 const onProductImpression = (id, postId) => {
-    if (getLoadedItemById(postId)?.postType === PostType.ShortVideo) {
+    if (getLoadedItemById(postId)?.postType === 'SHORT_VIDEO') {
         analyticsHandler?.trackShortVideoProductImpression(id, postId);
     }
 };
@@ -104,7 +115,7 @@ const currentItemActions = $derived.by(() => {
     const postModel = itemAsPostModel(buffer.current);
     const handler = postActionsGenerator.getPostActionsHandler(postModel);
     result.push(...handler.actions);
-    if (managementActions?.editPost && postModel.postType !== PostType.Article) {
+    if (managementActions?.editPost && postModel.postType !== 'ARTICLE') {
         result.push({
             icon: IconEdit,
             callback: async () => {
@@ -112,7 +123,7 @@ const currentItemActions = $derived.by(() => {
             }
         });
     }
-    if (managementActions?.editArticle && postModel.postType === PostType.Article && buffer.current.articleId) {
+    if (managementActions?.editArticle && postModel.postType === 'ARTICLE' && buffer.current.articleId) {
         result.push({
             icon: IconEdit,
             callback: async () => {
@@ -146,7 +157,7 @@ const currentItemActions = $derived.by(() => {
       adImpression: (id) => onAdImpression(id)
     }} />
 {/snippet}
-<div class="player-host">
+<div class="player-host" use:resolveDialogAnchor>
   <Player
     config={contentPlayerConfig}
     itemActions={currentItemActions}
@@ -165,7 +176,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/products/price-helper.d.ts

@@ -1,4 +1,4 @@
-import { Currency } from '../core/enums';
+import type { Currency } from '../core/enums';
 type CurrencyMode = 'none' | 'symbol' | 'code';
 export type PriceRepresentationOptions = {
     currencyMode?: CurrencyMode;

package/dist/products/price-helper.js

@@ -1,4 +1,3 @@
-import { Currency } from '../core/enums';
 import { Utils } from '@streamscloud/kit/core/utils';
 export const toPriceRepresentation = (data) => {
     const { amount, currency, options } = data;
@@ -52,9 +51,9 @@ export const toPriceRepresentation = (data) => {
     }
 };
 const currencyDefaults = {
-    [Currency.Nok]: { symbol: 'kr', code: 'NOK', missingFractionPlaceholder: '-' },
-    [Currency.Usd]: { symbol: '$', code: 'USD' },
-    [Currency.Eur]: { symbol: '€', code: 'EUR' }
+    ['NOK']: { symbol: 'kr', code: 'NOK', missingFractionPlaceholder: '-' },
+    ['USD']: { symbol: '$', code: 'USD' },
+    ['EUR']: { symbol: '€', code: 'EUR' }
 };
 const getDecimalSeparator = (locale) => {
     const nf = new Intl.NumberFormat(locale);

package/dist/streams/layout/models/mapper.d.ts

@@ -1,3 +1,3 @@
-import { type IPostModel } from '../../../posts/model';
+import type { IPostModel } from '../../../posts/model';
 import type { StreamLayoutShortVideoModel } from '../models/stream-layout-short-video-model';
 export declare const mapToPostModel: (model: StreamLayoutShortVideoModel) => IPostModel;

package/dist/streams/layout/models/mapper.js

@@ -1,13 +1,9 @@
-import { MediaType, PostType } from '../../../core/enums';
-import {} from '../../../posts/model';
 export const mapToPostModel = (model) => {
     return {
         id: model.id,
-        postType: PostType.ShortVideo,
+        postType: 'SHORT_VIDEO',
         media: [
-            model.media.type === MediaType.Image
-                ? { isImage: true, url: model.media.url }
-                : { isImage: false, url: model.media.url, thumbnailUrl: model.media.thumbnailUrl }
+            model.media.type === 'IMAGE' ? { isImage: true, url: model.media.url } : { isImage: false, url: model.media.url, thumbnailUrl: model.media.thumbnailUrl }
         ],
         mediaFit: 'cover',
         kicker: null,

package/dist/streams/layout/models/stream-layout-media-item-model.d.ts

@@ -1,4 +1,4 @@
-import { MediaType } from '../../../core/enums';
+import type { MediaType } from '../../../core/enums';
 export type StreamLayoutMediaItemModel = {
     url: string;
     thumbnailUrl: string | null;

package/dist/streams/layout/models/stream-layout-media-item-model.js

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

package/dist/streams/layout/models/stream-layout-short-video-model.d.ts

@@ -1,4 +1,4 @@
-import { AdType, type Currency } from '../../../core/enums';
+import type { AdType, Currency } from '../../../core/enums';
 import type { StreamLayoutMediaItemModel } from './stream-layout-media-item-model';
 import type { StreamLayoutPostHeaderModel } from './stream-layout-post-header-model';
 export type StreamLayoutShortVideoModel = {

package/dist/streams/layout/models/stream-layout-short-video-model.js

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

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/stream-overview.svelte

@@ -36,7 +36,7 @@ let { buffer, activePageId, on } = $props();
   --_cross-browser-scrollbar--track-color: transparent;
 }
 .stream-overview-pages:hover {
-  --_cross-browser-scrollbar--thumb-color: var(--scrollbar--thumb-color, #7d7d7d);
+  --_cross-browser-scrollbar--thumb-color: var(--scrollbar--thumb-color, light-dark(#999999, #333333));
   --_cross-browser-scrollbar--track-color: var(--scrollbar--track-color, transparent);
 }
 .stream-overview-pages::-webkit-scrollbar {

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/media-items/index.d.ts

@@ -0,0 +1,3 @@
+export { MediaItemView } from './media-item-view';
+export { MediaItemsGallery } from './media-items-gallery';
+export { type MediaItem, type MediaItemMetadataModel, type MediaItemWithMetadataModel, getMediaItemImageUrl } from './types';

package/dist/ui/media-items/index.js

@@ -0,0 +1,3 @@
+export { MediaItemView } from './media-item-view';
+export { MediaItemsGallery } from './media-items-gallery';
+export { getMediaItemImageUrl } from './types';

package/dist/ui/{media-item-view → media-items/media-item-view}/cmp.media-item-view.svelte

@@ -1,9 +1,21 @@
-<script lang="ts">import { MediaFormat, MediaType } from '../../core/enums';
-import { getMediaItemImageUrl } from '../../core/media';
+<script lang="ts">import { getMediaItemImageUrl } from '../types';
+import IconDelete from '@fluentui/svg-icons/icons/delete_20_regular.svg?raw';
+import IconEdit from '@fluentui/svg-icons/icons/edit_20_regular.svg?raw';
+import { cardActionContainer, CardActions } from '@streamscloud/kit/ui/card-actions';
 import { Image } from '@streamscloud/kit/ui/image';
 import { ProportionalContainer } from '@streamscloud/kit/ui/proportional-container';
 import { Video } from '@streamscloud/kit/ui/video';
 let { media, ratio = 0, inert = false, on } = $props();
+const actions = $derived.by(() => {
+    const result = [];
+    if (on?.edit) {
+        result.push({ icon: IconEdit, iconColor: 'blue', callback: on.edit });
+    }
+    if (on?.remove) {
+        result.push({ icon: IconDelete, iconColor: 'red', callback: on.remove });
+    }
+    return result;
+});
 const handleClick = (e) => {
     if (on?.click) {
         e.stopPropagation();
@@ -16,7 +28,7 @@ const parsedRatio = $derived.by(() => {
     }
     else {
         if (typeof ratio !== 'number') {
-            return ratio === MediaFormat.W16H9 ? 16 / 9 : 4 / 3;
+            return ratio === 'W16H9' ? 16 / 9 : 4 / 3;
         }
         else {
             return ratio;
@@ -27,7 +39,7 @@ const parsedRatio = $derived.by(() => {
 
 {#if media}
   {#snippet mediaView()}
-    {#if media.type === MediaType.Image}
+    {#if media.type === 'IMAGE'}
       <div class="media-item-view__image" onclick={handleClick} onkeydown={() => {}} role="none">
         <Image src={getMediaItemImageUrl(media)} />
       </div>
@@ -38,7 +50,12 @@ const parsedRatio = $derived.by(() => {
     {/if}
   {/snippet}
 
-  <div class="media-item-view" class:media-item-view--clickable={on?.click} class:media-item-view--fit-parent={ratio === 'fit-parent'} inert={inert}>
+  <div
+    class="media-item-view"
+    class:media-item-view--clickable={on?.click}
+    class:media-item-view--fit-parent={ratio === 'fit-parent'}
+    use:cardActionContainer
+    inert={inert}>
     {#if parsedRatio}
       <ProportionalContainer ratio={parsedRatio}>
         {@render mediaView()}
@@ -46,6 +63,7 @@ const parsedRatio = $derived.by(() => {
     {:else}
       {@render mediaView()}
     {/if}
+    <CardActions actions={actions} />
   </div>
 {/if}
 

package/dist/ui/{media-item-view → media-items/media-item-view}/cmp.media-item-view.svelte.d.ts

@@ -1,11 +1,13 @@
-import { MediaFormat } from '../../core/enums';
-import { type MediaItemModel } from '../../core/media';
+import type { MediaFormat } from '../../../core/enums';
+import { type MediaItem } from '../types';
 type Props = {
-    media: MediaItemModel | null;
+    media: MediaItem | null;
     ratio?: number | MediaFormat | 'fit-parent';
     inert?: boolean;
     on?: {
         click?: () => void;
+        edit?: () => void;
+        remove?: () => void;
     };
 };
 declare const Cmp: import("svelte").Component<Props, {}, "">;

package/dist/ui/{media-items-gallery → media-items/media-items-gallery}/cmp.media-items-gallery.svelte

@@ -1,9 +1,14 @@
-<script lang="ts">import { MediaFormat } from '../../core/enums';
-import {} from '../../core/media';
-import { MediaItemView } from '../media-item-view';
-import { GalleryLayout } from './types';
+<script lang="ts">import { MediaItemView } from '../media-item-view';
+import { getDialogAnchor } from '../../shadow-dom/shadow-root-service';
+import {} from '../types';
+import { GalleryLayout } from './gallery-layout';
+import { openMediaViewer } from '@streamscloud/kit/ui/media-viewer-dialog';
 let { media, singleImageRatio = 0, inert = false, on } = $props();
+let dialogHost;
 let layout = $state(null);
+const resolveDialogHost = (el) => {
+    dialogHost = getDialogAnchor(el) ?? undefined;
+};
 const initLayout = async () => {
     if (!media.length || media.length === 1 || media.length > 4) {
         layout = null;
@@ -17,35 +22,31 @@ $effect(() => {
 });
 const upperTwoImages = $derived(media.length > 4 ? media.slice(0, 2) : []);
 const bottomThreeImages = $derived(media.length > 4 ? media.slice(2, 5) : []);
+const toMediaViewerItemType = (type) => {
+    switch (type) {
+        case 'VIDEO':
+        case 'SHORT_VIDEO':
+        case 'AUDIO':
+            return 'video';
+        default:
+            return 'image';
+    }
+};
 const handleGalleryItemClick = (index) => {
     if (on?.click) {
-        on?.click(index);
+        on.click(index);
         return;
     }
-    /*const toMediaViewerItemType = (type: MediaType) => {
-      switch (type) {
-        case MediaType.Image:
-          return MediaViewerItemType.Image;
-        case MediaType.Video:
-        case MediaType.ShortVideo:
-          return MediaViewerItemType.Video;
-        case MediaType.Audio:
-          return MediaViewerItemType.Audio;
-        default:
-          Utils.assertUnreachable(type);
-      }
-    };
     openMediaViewer({
-      items: media.map((i) => ({
-        id: randomNanoid(),
-        url: i.url,
-        thumbnailUrl: i.thumbnailUrl,
-        type: toMediaViewerItemType(i.type),
-        width: i.metadata.width,
-        height: i.metadata.height
-      })),
-      index
-    });*/
+        items: media.map((i) => ({
+            url: i.url,
+            thumbnailUrl: i.thumbnailUrl ?? null,
+            type: toMediaViewerItemType(i.type),
+            width: i.metadata.width,
+            height: i.metadata.height
+        })),
+        index
+    }, dialogHost);
 };
 </script>
 
@@ -56,17 +57,21 @@ const handleGalleryItemClick = (index) => {
       ratio={singleImageRatio}
       inert={inert}
       on={{
-        click: on?.click ? () => on?.click(0) : undefined
+        click: on?.click ? () => on?.click?.(0) : undefined,
+        edit: on?.edit ? () => on?.edit?.(0) : undefined,
+        remove: on?.remove ? () => on?.remove?.(0) : undefined
       }} />
   {:else}
-    <div class="gallery-container" inert={inert}>
-      {#snippet galleryItem(index: NumberType)}
+    <div class="gallery-container" use:resolveDialogHost inert={inert}>
+      {#snippet galleryItem(index: number)}
         <div class="gallery-item">
           <MediaItemView
             media={media[index]}
             ratio="fit-parent"
             on={{
-              click: () => handleGalleryItemClick(index)
+              click: () => handleGalleryItemClick(index),
+              edit: on?.edit ? () => on?.edit?.(index) : undefined,
+              remove: on?.remove ? () => on?.remove?.(index) : undefined
             }} />
         </div>
       {/snippet}

package/dist/ui/{media-items-gallery → media-items/media-items-gallery}/cmp.media-items-gallery.svelte.d.ts

@@ -1,11 +1,13 @@
-import { MediaFormat } from '../../core/enums';
-import { type MediaItemWithMetadataModel } from '../../core/media';
+import type { MediaFormat } from '../../../core/enums';
+import { type MediaItemWithMetadataModel } from '../types';
 type Props = {
     media: Array<MediaItemWithMetadataModel> | ReadonlyArray<MediaItemWithMetadataModel>;
     singleImageRatio?: number | MediaFormat;
     inert?: boolean;
     on?: {
-        click: (index: number) => void;
+        click?: (index: number) => void;
+        edit?: (index: number) => void;
+        remove?: (index: number) => void;
     };
 };
 declare const Cmp: import("svelte").Component<Props, {}, "">;

package/dist/ui/{media-items-gallery/types.d.ts → media-items/media-items-gallery/gallery-layout.d.ts}

@@ -1,4 +1,4 @@
-import { type MediaItemWithMetadataModel } from '../../core/media';
+import { type MediaItemWithMetadataModel } from '../types';
 export declare class GalleryLayout {
     layoutClass: string;
     firstImage: MediaItemWithMetadataModel;