@streamscloud/kit 0.73.0 → 0.74.0

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

@@ -1,2 +1,3 @@
 export { horizontalWheelScroll } from './horizontal-wheel-scroll';
 export { swallowTouch } from './swallow-touch';
+export { predecodeOnLoad } from './predecode-on-load';

package/dist/core/actions/index.js

@@ -1,2 +1,3 @@
 export { horizontalWheelScroll } from './horizontal-wheel-scroll';
 export { swallowTouch } from './swallow-touch';
+export { predecodeOnLoad } from './predecode-on-load';

package/dist/core/actions/predecode-on-load.d.ts

@@ -0,0 +1,3 @@
+import type { Action } from 'svelte/action';
+/** Decodes the `<img>` once after every load, so a drag ghost snapshotted right after includes the picture. A broken image is ignored. `false` turns it off. */
+export declare const predecodeOnLoad: Action<HTMLImageElement, boolean | undefined>;

package/dist/core/actions/predecode-on-load.js

@@ -0,0 +1,31 @@
+/** Decodes the `<img>` once after every load, so a drag ghost snapshotted right after includes the picture. A broken image is ignored. `false` turns it off. */
+export const predecodeOnLoad = (node, enabled = true) => {
+    let active = enabled;
+    const decode = async () => {
+        try {
+            await node.decode();
+        }
+        catch {
+            // a broken image has nothing to decode
+        }
+    };
+    const decodeLoaded = () => {
+        if (active && node.complete && node.naturalWidth > 0) {
+            void decode();
+        }
+    };
+    node.addEventListener('load', decodeLoaded);
+    decodeLoaded();
+    return {
+        update(nextEnabled = true) {
+            const turnedOn = nextEnabled && !active;
+            active = nextEnabled;
+            if (turnedOn) {
+                decodeLoaded();
+            }
+        },
+        destroy() {
+            node.removeEventListener('load', decodeLoaded);
+        }
+    };
+};

package/dist/core/utils/image-preloader.d.ts

@@ -1,3 +1 @@
 export declare const preloadImage: (src: string, throwOnError?: boolean) => Promise<void>;
-/** Decodes a loaded `<img>` once, so a drag ghost snapshotted right after includes the picture. A broken image is ignored. */
-export declare const predecodeImage: (img: HTMLImageElement) => Promise<void>;

package/dist/core/utils/image-preloader.js

@@ -8,12 +8,3 @@ export const preloadImage = (src, throwOnError = false) => {
         img.src = src;
     });
 };
-/** Decodes a loaded `<img>` once, so a drag ghost snapshotted right after includes the picture. A broken image is ignored. */
-export const predecodeImage = async (img) => {
-    try {
-        await img.decode();
-    }
-    catch {
-        // a broken image has nothing to decode
-    }
-};

package/dist/ui/image/cmp.image.svelte

@@ -1,4 +1,4 @@
-<script lang="ts">import { predecodeImage } from '../../core/utils';
+<script lang="ts">import { predecodeOnLoad } from '../../core/actions';
 import { Icon } from '../icon';
 import { calculateImageState } from './image-state';
 import IconImageOff from '@fluentui/svg-icons/icons/image_off_20_regular.svg?raw';
@@ -9,10 +9,7 @@ const imageState = $derived(calculateImageState(src, hasError, showStubOnError))
 // down to fit — small pictures upscale too — and the box hugs the picture, rounding its own corners.
 // `src` must stay unset: it would join srcset as the 1x candidate and win.
 const srcset = $derived(src ? `${src.replace(/\s/g, (char) => encodeURIComponent(char))} 0.01x` : undefined);
-const onLoad = (event) => {
-    if (predecode && event.currentTarget instanceof HTMLImageElement) {
-        void predecodeImage(event.currentTarget);
-    }
+const onLoad = () => {
     hasError = false;
     on?.load?.(true);
 };
@@ -30,6 +27,7 @@ const onLoadError = () => {
       srcset={srcset}
       alt={alt || ''}
       draggable="false"
+      use:predecodeOnLoad={predecode}
       onload={onLoad}
       onerror={onLoadError} />
   {/if}

package/dist/ui/tile-card/cmp.tile-card.svelte

@@ -1,4 +1,4 @@
-<script lang="ts">import { predecodeImage } from '../../core/utils';
+<script lang="ts">import { predecodeOnLoad } from '../../core/actions';
 import { Checkbox } from '../checkbox';
 import { ToolbarIconButton } from '../page-toolbar';
 import { PlayIndicator } from '../play-indicator';
@@ -7,11 +7,6 @@ import { TileCardLocalization } from './tile-card-localization';
 import IconMore from '@fluentui/svg-icons/icons/more_vertical_20_regular.svg?raw';
 const { title, meta, preview, predecode = false, menu, menuLabel, selected = false, checkboxVisibility = 'hover', on } = $props();
 const localization = new TileCardLocalization();
-const onPictureLoad = (event) => {
-    if (predecode && event.currentTarget instanceof HTMLImageElement) {
-        void predecodeImage(event.currentTarget);
-    }
-};
 // Safari paints no frame for preload="metadata" until a seek target is given.
 const withFirstFrame = (src) => (src.includes('#') ? src : `${src}#t=0.001`);
 </script>
@@ -25,7 +20,7 @@ const withFirstFrame = (src) => (src.includes('#') ? src : `${src}#t=0.001`);
       {#if typeof preview === 'function'}
         {@render preview()}
       {:else if 'image' in preview}
-        <img class="tile-card__picture" src={preview.image} alt="" onload={onPictureLoad} />
+        <img class="tile-card__picture" src={preview.image} alt="" use:predecodeOnLoad={predecode} />
       {:else}
         <video class="tile-card__picture" src={withFirstFrame(preview.video)} poster={preview.poster} preload="metadata" muted playsinline></video>
         <span class="tile-card__play"><PlayIndicator /></span>

package/dist/ui/tile-card/cmp.tile-card.svelte.d.ts

@@ -6,7 +6,7 @@ type Props = {
     meta?: string;
     /** Top area: `image` / `video` render a drag-safe picture or frame (contain, never upscaled; a video gets a play glyph); a snippet renders custom content. The area is `pointer-events: none` — interactive content belongs in `menu` or `on.activate`. */
     preview?: TileCardPreview;
-    /** Decodes the `image` preview once right after it loads. Set it when the tile sits in a `DragSource`, or the first drag ghost comes out without the picture — an `<img>` in a preview snippet needs `predecodeImage` from its owner. @default false */
+    /** Decodes the `image` preview once right after it loads. Set it when the tile sits in a `DragSource`, or the first drag ghost comes out without the picture — an `<img>` in a preview snippet needs `use:predecodeOnLoad` from its owner. @default false */
     predecode?: boolean;
     /** `PopoverItem`s of the kebab menu at the end of the footer. */
     menu?: Snippet;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@streamscloud/kit",
-  "version": "0.73.0",
+  "version": "0.74.0",
   "author": "StreamsCloud",
   "repository": {
     "type": "git",