@streamscloud/embeddable 16.0.7-1772046586256 → 16.0.7-1772051881364

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

@@ -1,5 +1,4 @@
-import type { ArticleFieldType, GalleryFieldMode, MediaFormat, TextFieldMode, TextFieldWeight } from '../../../core/enums';
-import type { MediaType } from '../../../core/enums';
+import type { ArticleFieldType, GalleryFieldMode, MediaFormat, MediaType, TextFieldMode, TextFieldWeight } from '../../../core/enums';
 export type ArticleFieldMediaItem = {
     type: MediaType;
     url: string;

package/dist/core/media/media-item-url.service.js

@@ -1 +1 @@
-export const getMediaItemImageUrl = (media) => (media.type === 'IMAGE' ? media.url : (media.thumbnailUrl ?? ''));
+export const getMediaItemImageUrl = (media) => media.type === 'IMAGE' ? media.url : (media.thumbnailUrl ?? '');

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

@@ -1,8 +1,21 @@
 <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();
@@ -37,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()}
@@ -45,6 +63,7 @@ const parsedRatio = $derived.by(() => {
     {:else}
       {@render mediaView()}
     {/if}
+    <CardActions actions={actions} />
   </div>
 {/if}
 

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

@@ -6,6 +6,8 @@ type Props = {
     inert?: boolean;
     on?: {
         click?: () => void;
+        edit?: () => void;
+        remove?: () => void;
     };
 };
 declare const Cmp: import("svelte").Component<Props, {}, "">;

package/dist/ui/media-items/media-items-gallery/cmp.media-items-gallery.svelte

@@ -1,5 +1,5 @@
-<script lang="ts">import {} from '../types';
-import { MediaItemView } from '../media-item-view';
+<script lang="ts">import { MediaItemView } from '../media-item-view';
+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();
@@ -52,7 +52,9 @@ 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}>
@@ -62,7 +64,9 @@ const handleGalleryItemClick = (index) => {
             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/media-items-gallery/cmp.media-items-gallery.svelte.d.ts

@@ -5,7 +5,9 @@ type Props = {
     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/package.json

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