@streamscloud/embeddable 16.0.7-1772046586256 → 16.0.7-1772050914349

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,14 +1,26 @@
 <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 { Icon } from '@streamscloud/kit/ui/icon';
 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 editable = $derived(!!on?.edit || !!on?.remove);
 const handleClick = (e) => {
     if (on?.click) {
         e.stopPropagation();
         on.click();
     }
 };
+const handleEdit = (e) => {
+    e.stopPropagation();
+    on?.edit?.();
+};
+const handleRemove = (e) => {
+    e.stopPropagation();
+    on?.remove?.();
+};
 const parsedRatio = $derived.by(() => {
     if (!ratio || ratio === 'fit-parent') {
         return 0;
@@ -45,6 +57,20 @@ const parsedRatio = $derived.by(() => {
     {:else}
       {@render mediaView()}
     {/if}
+    {#if editable}
+      <div class="media-item-view__actions">
+        {#if on?.edit}
+          <button type="button" class="media-item-view__action" onclick={handleEdit} aria-label="edit">
+            <Icon src={IconEdit} />
+          </button>
+        {/if}
+        {#if on?.remove}
+          <button type="button" class="media-item-view__action" onclick={handleRemove} aria-label="remove">
+            <Icon src={IconDelete} />
+          </button>
+        {/if}
+      </div>
+    {/if}
   </div>
 {/if}
 
@@ -74,6 +100,28 @@ const parsedRatio = $derived.by(() => {
   height: 100%;
   cursor: pointer;
 }
+.media-item-view__actions {
+  position: absolute;
+  top: 0.3125rem;
+  right: 0.3125rem;
+  opacity: 0;
+  transition: opacity ease-in-out 0.6s;
+  display: flex;
+  padding: 0 0.3125rem;
+  background: light-dark(#f2f2f3, #111827);
+  border-radius: 0.1875rem;
+  --sc-kit--icon--color: light-dark(#1f2937, #ffffff);
+}
+.media-item-view__action {
+  padding: 0.3125rem;
+  transition: transform 0.3s;
+}
+.media-item-view__action:hover {
+  transform: scale(1.2);
+}
 .media-item-view--clickable {
   cursor: pointer;
+}
+.media-item-view:hover .media-item-view__actions {
+  opacity: 1;
 }</style>

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-1772050914349",
   "author": "StreamsCloud",
   "repository": {
     "type": "git",