@ai-matrx/media 0.2.0 → 0.2.2

package/dist/react.d.cts

@@ -1,6 +1,6 @@
 import * as react from 'react';
 import react__default, { SVGProps, HTMLAttributes, InputHTMLAttributes, ReactNode } from 'react';
-import { MediaRefLike, MediaUploadOptions, MediaActionKind } from './index.cjs';
+import { MediaRefLike, DurableSrc, MediaUploadOptions, MediaActionKind } from './index.cjs';
 import { M as MediaUploadEntry } from './use-media-upload-v5Uq9Ruq.cjs';
 
 /**
@@ -142,6 +142,18 @@ interface InlineMediaRefProps {
     preload?: "none" | "metadata" | "auto" | undefined;
     /** Space-separated native controls to hide — forwarded to `<video controlsList>`. */
     controlsList?: string | undefined;
+    /**
+     * Poster frame forwarded to `<video poster>`. Takes the branded
+     * {@link DurableSrc} only (law 3) — the host resolves/mints it, exactly
+     * like the element `src`; there is no raw-string lane.
+     */
+    poster?: DurableSrc | undefined;
+    /**
+     * Label reported to the host's playback-session port while this element
+     * plays (e.g. "Video (fullscreen)" in a lightbox). Default: `alt`, then
+     * "Media file".
+     */
+    playbackLabel?: string | undefined;
     rounded?: "none" | "sm" | "md" | "lg" | "full" | undefined;
     /** Click handler — wires up cursor + role + keyboard activation. */
     onClick?: ((event: react__default.MouseEvent | react__default.KeyboardEvent) => void) | undefined;
@@ -168,7 +180,7 @@ interface InlineMediaRefProps {
     border?: "none" | "subtle" | undefined;
     className?: string | undefined;
 }
-declare function InlineMediaRef({ ref: mediaRef, size, fit, fallback, fallbackIcon, errorFallback, alt, as, controls, autoPlay, loop, muted, playsInline, preload, controlsList, rounded, onClick, onError, onLoad, mediaElementRef, crossOrigin, border, className, }: InlineMediaRefProps): react__default.JSX.Element | null;
+declare function InlineMediaRef({ ref: mediaRef, size, fit, fallback, fallbackIcon, errorFallback, alt, as, controls, autoPlay, loop, muted, playsInline, preload, controlsList, poster, playbackLabel, rounded, onClick, onError, onLoad, mediaElementRef, crossOrigin, border, className, }: InlineMediaRefProps): react__default.JSX.Element | null;
 
 interface MediaThumbnailProps {
     /** The file's durable ref (a MediaRef or bare fileId). */
@@ -304,6 +316,21 @@ interface MediaLightboxProps {
     alt?: string | undefined;
     /** Force the media element type (default: inferred from the resolution). */
     as?: "img" | "video" | "audio" | undefined;
+    /** Start video/audio playback on open — forwarded to the media element. */
+    autoPlay?: boolean | undefined;
+    /** Inline (non-fullscreen-hijack) playback on iOS — forwarded to `<video>`. */
+    playsInline?: boolean | undefined;
+    /**
+     * Poster frame for video — the branded {@link DurableSrc} only (law 3),
+     * resolved/minted by the host exactly like the element src.
+     */
+    poster?: DurableSrc | undefined;
+    /**
+     * Playback-session label reported to the host's `playbackSession` port
+     * while the media plays (e.g. "Video (fullscreen)"). Rides the existing
+     * port — no new playback lane.
+     */
+    playbackLabel?: string | undefined;
     /** Toolbar actions to offer. Default: share, download, copy, open. */
     actions?: MediaActionKind[] | undefined;
     /** Hide unavailable toolbar actions instead of disabling them. */
@@ -312,6 +339,6 @@ interface MediaLightboxProps {
     headerExtra?: ReactNode | undefined;
     className?: string | undefined;
 }
-declare function MediaLightbox({ open, onClose, mediaRef, fileName, alt, as, actions, hideUnavailableActions, headerExtra, className, }: MediaLightboxProps): react.JSX.Element | null;
+declare function MediaLightbox({ open, onClose, mediaRef, fileName, alt, as, autoPlay, playsInline, poster, playbackLabel, actions, hideUnavailableActions, headerExtra, className, }: MediaLightboxProps): react.JSX.Element | null;
 
 export { AlertCircleIcon, ArchiveIcon, BracesIcon, CheckCircle2Icon, CheckIcon, CodeIcon, CopyIcon, DatabaseIcon, DownloadIcon, ExternalLinkIcon, FileAudioIcon, FileCodeIcon, FileIcon, type FileIconProps, FileJsonIcon, FileSpreadsheetIcon, FileTextIcon, FileTypeIcon, FileUploadDropzone, type FileUploadDropzoneActions, type FileUploadDropzoneProps, FileVideoIcon, FolderIcon, FolderOpenIcon, GlobeIcon, ImageIcon, ImageOffIcon, InlineMediaRef, type InlineMediaRefFit, type InlineMediaRefProps, type InlineMediaRefSize, Link2Icon, MediaActionToolbar, type MediaActionToolbarProps, type MediaDropzoneOptions, type MediaDropzoneState, type MediaIconProps, MediaLightbox, type MediaLightboxProps, MediaThumbnail, type MediaThumbnailProps, MusicIcon, PackageBoxIcon, PenToolIcon, PlusIcon, SearchIcon, Settings2Icon, Share2Icon, SpinnerIcon, SubtitlesIcon, UploadIcon, UploadProgressList, type UploadProgressListProps, VideoIcon, VideoOffIcon, VolumeXIcon, XIcon, cn, formatFileSize, useMediaDropzone };

package/dist/react.d.ts

@@ -1,6 +1,6 @@
 import * as react from 'react';
 import react__default, { SVGProps, HTMLAttributes, InputHTMLAttributes, ReactNode } from 'react';
-import { MediaRefLike, MediaUploadOptions, MediaActionKind } from './index.js';
+import { MediaRefLike, DurableSrc, MediaUploadOptions, MediaActionKind } from './index.js';
 import { M as MediaUploadEntry } from './use-media-upload-Dg2HSvTq.js';
 
 /**
@@ -142,6 +142,18 @@ interface InlineMediaRefProps {
     preload?: "none" | "metadata" | "auto" | undefined;
     /** Space-separated native controls to hide — forwarded to `<video controlsList>`. */
     controlsList?: string | undefined;
+    /**
+     * Poster frame forwarded to `<video poster>`. Takes the branded
+     * {@link DurableSrc} only (law 3) — the host resolves/mints it, exactly
+     * like the element `src`; there is no raw-string lane.
+     */
+    poster?: DurableSrc | undefined;
+    /**
+     * Label reported to the host's playback-session port while this element
+     * plays (e.g. "Video (fullscreen)" in a lightbox). Default: `alt`, then
+     * "Media file".
+     */
+    playbackLabel?: string | undefined;
     rounded?: "none" | "sm" | "md" | "lg" | "full" | undefined;
     /** Click handler — wires up cursor + role + keyboard activation. */
     onClick?: ((event: react__default.MouseEvent | react__default.KeyboardEvent) => void) | undefined;
@@ -168,7 +180,7 @@ interface InlineMediaRefProps {
     border?: "none" | "subtle" | undefined;
     className?: string | undefined;
 }
-declare function InlineMediaRef({ ref: mediaRef, size, fit, fallback, fallbackIcon, errorFallback, alt, as, controls, autoPlay, loop, muted, playsInline, preload, controlsList, rounded, onClick, onError, onLoad, mediaElementRef, crossOrigin, border, className, }: InlineMediaRefProps): react__default.JSX.Element | null;
+declare function InlineMediaRef({ ref: mediaRef, size, fit, fallback, fallbackIcon, errorFallback, alt, as, controls, autoPlay, loop, muted, playsInline, preload, controlsList, poster, playbackLabel, rounded, onClick, onError, onLoad, mediaElementRef, crossOrigin, border, className, }: InlineMediaRefProps): react__default.JSX.Element | null;
 
 interface MediaThumbnailProps {
     /** The file's durable ref (a MediaRef or bare fileId). */
@@ -304,6 +316,21 @@ interface MediaLightboxProps {
     alt?: string | undefined;
     /** Force the media element type (default: inferred from the resolution). */
     as?: "img" | "video" | "audio" | undefined;
+    /** Start video/audio playback on open — forwarded to the media element. */
+    autoPlay?: boolean | undefined;
+    /** Inline (non-fullscreen-hijack) playback on iOS — forwarded to `<video>`. */
+    playsInline?: boolean | undefined;
+    /**
+     * Poster frame for video — the branded {@link DurableSrc} only (law 3),
+     * resolved/minted by the host exactly like the element src.
+     */
+    poster?: DurableSrc | undefined;
+    /**
+     * Playback-session label reported to the host's `playbackSession` port
+     * while the media plays (e.g. "Video (fullscreen)"). Rides the existing
+     * port — no new playback lane.
+     */
+    playbackLabel?: string | undefined;
     /** Toolbar actions to offer. Default: share, download, copy, open. */
     actions?: MediaActionKind[] | undefined;
     /** Hide unavailable toolbar actions instead of disabling them. */
@@ -312,6 +339,6 @@ interface MediaLightboxProps {
     headerExtra?: ReactNode | undefined;
     className?: string | undefined;
 }
-declare function MediaLightbox({ open, onClose, mediaRef, fileName, alt, as, actions, hideUnavailableActions, headerExtra, className, }: MediaLightboxProps): react.JSX.Element | null;
+declare function MediaLightbox({ open, onClose, mediaRef, fileName, alt, as, autoPlay, playsInline, poster, playbackLabel, actions, hideUnavailableActions, headerExtra, className, }: MediaLightboxProps): react.JSX.Element | null;
 
 export { AlertCircleIcon, ArchiveIcon, BracesIcon, CheckCircle2Icon, CheckIcon, CodeIcon, CopyIcon, DatabaseIcon, DownloadIcon, ExternalLinkIcon, FileAudioIcon, FileCodeIcon, FileIcon, type FileIconProps, FileJsonIcon, FileSpreadsheetIcon, FileTextIcon, FileTypeIcon, FileUploadDropzone, type FileUploadDropzoneActions, type FileUploadDropzoneProps, FileVideoIcon, FolderIcon, FolderOpenIcon, GlobeIcon, ImageIcon, ImageOffIcon, InlineMediaRef, type InlineMediaRefFit, type InlineMediaRefProps, type InlineMediaRefSize, Link2Icon, MediaActionToolbar, type MediaActionToolbarProps, type MediaDropzoneOptions, type MediaDropzoneState, type MediaIconProps, MediaLightbox, type MediaLightboxProps, MediaThumbnail, type MediaThumbnailProps, MusicIcon, PackageBoxIcon, PenToolIcon, PlusIcon, SearchIcon, Settings2Icon, Share2Icon, SpinnerIcon, SubtitlesIcon, UploadIcon, UploadProgressList, type UploadProgressListProps, VideoIcon, VideoOffIcon, VolumeXIcon, XIcon, cn, formatFileSize, useMediaDropzone };

package/dist/react.js

@@ -876,6 +876,8 @@ function InlineMediaRef({
   playsInline,
   preload,
   controlsList,
+  poster,
+  playbackLabel,
   rounded = "md",
   onClick,
   onError,
@@ -919,7 +921,7 @@ function InlineMediaRef({
     {
       isPlaying: isMediaPlaying,
       source: "file-media",
-      label: alt || "Media file",
+      label: playbackLabel ?? (alt || "Media file"),
       trackKey
     },
     sessionElRef
@@ -1060,6 +1062,7 @@ function InlineMediaRef({
         playsInline,
         preload,
         controlsList,
+        poster,
         onLoadedData: onLoad,
         onError: handleLoadError,
         crossOrigin,
@@ -1142,7 +1145,7 @@ function useThumbnailSource(ref, options = {}) {
       return null;
     }
   }, [client, thumbnailUrl]);
-  const needsBlob = allowSourceFallback && !explicitThumb && !resolution?.thumbnailSrc && resolution?.transport === "blob";
+  const needsBlob = allowSourceFallback && !explicitThumb && !resolution?.thumbnailSrc && resolution?.transport === "blob" && (resolution.kind === "image" || resolution.kind === "video");
   const blob = useMediaBlob(needsBlob ? ref : null);
   if (explicitThumb) {
     return {
@@ -1263,7 +1266,7 @@ function ImageThumb({
     {
       src: url,
       alt,
-      loading: "lazy",
+      loading: url.startsWith("blob:") ? "eager" : "lazy",
       className: "h-full w-full object-cover",
       onError: onLoadError
     },
@@ -2024,6 +2027,10 @@ function MediaLightbox({
   fileName,
   alt,
   as,
+  autoPlay,
+  playsInline,
+  poster,
+  playbackLabel,
   actions,
   hideUnavailableActions = false,
   headerExtra,
@@ -2102,7 +2109,11 @@ function MediaLightbox({
                 fit: "contain",
                 rounded: "none",
                 alt: alt ?? fileName ?? "",
-                as
+                as,
+                autoPlay,
+                playsInline,
+                poster,
+                playbackLabel
               }
             ) })
           }