@streamscloud/embeddable 16.0.7-1772036298284 → 16.0.7-1772050914349

package/dist/articles/article/fields/image-field.svelte

@@ -1,4 +1,4 @@
-<script lang="ts">import { MediaItemView } from '../../../ui/media-item-view';
+<script lang="ts">import { MediaItemView } from '../../../ui/media-items/media-item-view';
 import AltText from './alt-text.svelte';
 let { field } = $props();
 const fieldData = $derived(field.fieldData.imageData);

package/dist/articles/article/fields/media-field.svelte

@@ -1,4 +1,4 @@
-<script lang="ts">import { MediaItemView } from '../../../ui/media-item-view';
+<script lang="ts">import { MediaItemView } from '../../../ui/media-items/media-item-view';
 import AltText from './alt-text.svelte';
 let { field } = $props();
 const fieldData = $derived(field.fieldData.mediaData);

package/dist/articles/article/fields/media-gallery-field.svelte

@@ -1,4 +1,4 @@
-<script lang="ts">import { MediaItemsGallery } from '../../../ui/media-items-gallery';
+<script lang="ts">import { MediaItemsGallery } from '../../../ui/media-items/media-items-gallery';
 import AltText from './alt-text.svelte';
 let { field } = $props();
 const fieldData = $derived(field.fieldData.mediaGalleryData);

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

@@ -1,5 +1,15 @@
-import type { ArticleFieldType, GalleryFieldMode, MediaFormat, TextFieldMode, TextFieldWeight } from '../../../core/enums';
-import type { MediaItemModel, MediaItemWithMetadataModel } from '../../../core/media';
+import type { ArticleFieldType, GalleryFieldMode, MediaFormat, MediaType, TextFieldMode, TextFieldWeight } from '../../../core/enums';
+export type ArticleFieldMediaItem = {
+    type: MediaType;
+    url: string;
+    thumbnailUrl?: string | null;
+};
+export type ArticleFieldGalleryMediaItem = ArticleFieldMediaItem & {
+    metadata: {
+        width: number;
+        height: number;
+    };
+};
 export type FieldMetadata = {
     displayDate: string;
 };
@@ -30,17 +40,17 @@ export type BylineFieldDataModel = {
     authorName: string | null;
 };
 export type ImageFieldDataModel = {
-    image: MediaItemModel | null;
+    image: ArticleFieldMediaItem | null;
     preferredMediaFormat: MediaFormat;
     altText: string | null;
 };
 export type MediaFieldDataModel = {
-    media: MediaItemModel | null;
+    media: ArticleFieldMediaItem | null;
     preferredMediaFormat: MediaFormat;
     altText: string | null;
 };
 export type MediaGalleryFieldDataModel = {
-    media: MediaItemWithMetadataModel[] | null;
+    media: ArticleFieldGalleryMediaItem[] | null;
     galleryMode: GalleryFieldMode;
     preferredMediaFormat: MediaFormat;
     altText: string | null;
@@ -56,7 +66,7 @@ export type TextFieldDataModel = {
     textWeight: TextFieldWeight;
 };
 export type VideoFieldDataModel = {
-    video: MediaItemModel | null;
+    video: ArticleFieldMediaItem | null;
     preferredMediaFormat: MediaFormat;
     altText: string | null;
 };

package/dist/articles/article/fields/video-field.svelte

@@ -1,4 +1,4 @@
-<script lang="ts">import { MediaItemView } from '../../../ui/media-item-view';
+<script lang="ts">import { MediaItemView } from '../../../ui/media-items/media-item-view';
 import AltText from './alt-text.svelte';
 let { field } = $props();
 const fieldData = $derived(field.fieldData.videoData);

package/dist/core/media/index.d.ts

@@ -1,2 +1 @@
-export { type MediaItemModel, type MediaItemMetadataModel, type MediaItemWithMetadataModel } from './types';
 export { getMediaItemImageUrl } from './media-item-url.service';

package/dist/core/media/index.js

@@ -1,2 +1 @@
-export {} from './types';
 export { getMediaItemImageUrl } from './media-item-url.service';

package/dist/core/media/media-item-url.service.d.ts

@@ -1,2 +1,6 @@
-import type { MediaItemModel } from './types';
-export declare const getMediaItemImageUrl: (media: MediaItemModel) => string;
+import type { MediaType } from '../enums';
+export declare const getMediaItemImageUrl: (media: {
+    type: MediaType;
+    url: string;
+    thumbnailUrl?: string | null;
+}) => 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/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,14 +1,26 @@
-<script lang="ts">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 { 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-item-view → media-items/media-item-view}/cmp.media-item-view.svelte.d.ts

@@ -1,11 +1,13 @@
-import type { 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,6 +1,6 @@
-<script lang="ts">import {} from '../../core/media';
-import { MediaItemView } from '../media-item-view';
-import { GalleryLayout } from './types';
+<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();
 let layout = $state(null);
@@ -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-gallery → media-items/media-items-gallery}/cmp.media-items-gallery.svelte.d.ts

@@ -1,11 +1,13 @@
-import type { 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;

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

@@ -1,4 +1,4 @@
-import { getMediaItemImageUrl } from '../../core/media';
+import { getMediaItemImageUrl } from '../types';
 import { ImageHelper } from '@streamscloud/kit/core/media';
 export class GalleryLayout {
     layoutClass;

package/dist/ui/media-items/types.d.ts

@@ -0,0 +1,14 @@
+import type { MediaType } from '../../core/enums';
+export type MediaItem = {
+    type: MediaType;
+    url: string;
+    thumbnailUrl?: string | null;
+};
+export type MediaItemMetadataModel = {
+    width: number;
+    height: number;
+};
+export type MediaItemWithMetadataModel = MediaItem & {
+    metadata: MediaItemMetadataModel;
+};
+export declare const getMediaItemImageUrl: (media: MediaItem) => string;

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@streamscloud/embeddable",
-  "version": "16.0.7-1772036298284",
+  "version": "16.0.7-1772050914349",
   "author": "StreamsCloud",
   "repository": {
     "type": "git",
@@ -54,6 +54,10 @@
       "types": "./dist/media-page/index.d.ts",
       "svelte": "./dist/media-page/index.js"
     },
+    "./media-items": {
+      "types": "./dist/ui/media-items/index.d.ts",
+      "svelte": "./dist/ui/media-items/index.js"
+    },
     "./posts": {
       "types": "./dist/posts/index.d.ts",
       "svelte": "./dist/posts/index.js"
@@ -158,7 +162,7 @@
     "@graphql-codegen/typescript": "^5.0.7",
     "@graphql-codegen/typescript-operations": "^5.0.7",
     "@graphql-typed-document-node/core": "^3.2.0",
-    "@streamscloud/kit": "^0.1.12-0",
+    "@streamscloud/kit": "^0.1.12-1772041668184",
     "@streamscloud/streams-analytics-collector": "^4.0.1",
     "@sveltejs/package": "^2.5.7",
     "@sveltejs/vite-plugin-svelte": "^6.2.4",

package/dist/core/media/types.d.ts

@@ -1,13 +0,0 @@
-import type { MediaType } from '../enums';
-export type MediaItemModel = {
-    type: MediaType;
-    url: string;
-    thumbnailUrl?: string | null;
-};
-export type MediaItemMetadataModel = {
-    width: number;
-    height: number;
-};
-export type MediaItemWithMetadataModel = MediaItemModel & {
-    metadata: MediaItemMetadataModel;
-};

package/dist/core/media/types.js

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