@mohasinac/appkit 2.2.0 → 2.3.0

package/dist/features/media/modals/VideoTrimModal.d.ts

@@ -1,11 +0,0 @@
-export interface VideoTrimModalProps {
-    isOpen: boolean;
-    /** Already-uploaded video URL on an approved CDN/Storage domain. */
-    videoUrl: string;
-    onClose: () => void;
-    /** Called with the trimmed video URL after the server operation succeeds. */
-    onSave: (trimmedUrl: string) => void;
-    /** Override POST endpoint. Defaults to /api/media/trim. */
-    endpoint?: string;
-}
-export declare function VideoTrimModal({ isOpen, videoUrl, onClose, onSave, endpoint, }: VideoTrimModalProps): import("react/jsx-runtime").JSX.Element;

package/dist/features/media/modals/VideoTrimModal.js

@@ -1,73 +0,0 @@
-"use client";
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-/**
- * VideoTrimModal — set-in/out trim for @mohasinac/feat-media.
- *
- * Calls POST /api/media/trim via useMediaTrim. Returns trimmed URL on save.
- */
-import { useState, useRef, useEffect } from "react";
-import { useTranslations } from "next-intl";
-import { Alert, Button, Div, Modal, Row, Span, Stack, Text } from "../../../ui";
-import { MediaSlider } from "../components/MediaSlider";
-import { useMediaTrim } from "../hooks/useMedia";
-function formatTime(seconds) {
-    const m = Math.floor(seconds / 60);
-    const s = Math.floor(seconds % 60);
-    return `${m}:${s.toString().padStart(2, "0")}`;
-}
-export function VideoTrimModal({ isOpen, videoUrl, onClose, onSave, endpoint, }) {
-    const t = useTranslations("mediaEditor");
-    const [duration, setDuration] = useState(0);
-    const [startTime, setStartTime] = useState(0);
-    const [endTime, setEndTime] = useState(0);
-    const [quality, setQuality] = useState("medium");
-    const [error, setError] = useState(null);
-    const videoRef = useRef(null);
-    const { mutateAsync: trim, isPending } = useMediaTrim(endpoint);
-    useEffect(() => {
-        if (isOpen) {
-            setStartTime(0);
-            setEndTime(0);
-            setDuration(0);
-            setError(null);
-        }
-    }, [isOpen, videoUrl]);
-    const handleLoadedMetadata = () => {
-        const video = videoRef.current;
-        if (!video)
-            return;
-        setDuration(video.duration);
-        setEndTime(video.duration);
-    };
-    const seekTo = (time) => {
-        if (videoRef.current)
-            videoRef.current.currentTime = time;
-    };
-    const handleStartChange = (val) => {
-        const clamped = Math.min(val, endTime - 0.1);
-        setStartTime(clamped);
-        seekTo(clamped);
-    };
-    const handleEndChange = (val) => {
-        const clamped = Math.max(val, startTime + 0.1);
-        setEndTime(clamped);
-        seekTo(clamped);
-    };
-    const handleTrim = async () => {
-        setError(null);
-        try {
-            const result = await trim({ sourceUrl: videoUrl, startTime, endTime, quality });
-            onSave(result.url);
-            onClose();
-        }
-        catch (err) {
-            setError(err instanceof Error ? err.message : t("trimError"));
-        }
-    };
-    const qualityLabels = {
-        low: t("trimQualityLow"),
-        medium: t("trimQualityMedium"),
-        high: t("trimQualityHigh"),
-    };
-    return (_jsx(Modal, { isOpen: isOpen, onClose: onClose, title: t("trimTitle"), size: "lg", children: _jsxs(Stack, { gap: "md", children: [_jsx(Text, { variant: "secondary", className: "text-xs", children: t("trimInstruction") }), _jsx(Div, { className: "relative aspect-video overflow-hidden rounded-lg bg-black", children: _jsx("video", { ref: videoRef, src: videoUrl, className: "absolute inset-0 w-full h-full object-contain", controls: true, onLoadedMetadata: handleLoadedMetadata }) }), duration > 0 && (_jsxs(_Fragment, { children: [_jsxs(Stack, { gap: "xs", children: [_jsxs(Row, { justify: "between", children: [_jsx(Text, { size: "sm", children: t("trimStart") }), _jsx(Span, { className: "text-sm font-mono tabular-nums", children: formatTime(startTime) })] }), _jsx(MediaSlider, { value: startTime, min: 0, max: duration, step: 0.1, onChange: handleStartChange })] }), _jsxs(Stack, { gap: "xs", children: [_jsxs(Row, { justify: "between", children: [_jsx(Text, { size: "sm", children: t("trimEnd") }), _jsx(Span, { className: "text-sm font-mono tabular-nums", children: formatTime(endTime) })] }), _jsx(MediaSlider, { value: endTime, min: 0, max: duration, step: 0.1, onChange: handleEndChange })] }), _jsx(Text, { size: "xs", variant: "secondary", children: t("trimDuration", { duration: (endTime - startTime).toFixed(1) }) }), _jsxs(Stack, { gap: "xs", children: [_jsx(Text, { size: "sm", children: t("trimQuality") }), _jsx(Div, { className: "flex gap-2", children: ["low", "medium", "high"].map((q) => (_jsx(Button, { type: "button", variant: quality === q ? "primary" : "outline", size: "sm", onClick: () => setQuality(q), disabled: isPending, children: qualityLabels[q] }, q))) })] })] })), error && _jsx(Alert, { variant: "error", children: error }), _jsxs(Row, { justify: "end", className: "gap-2", children: [_jsx(Button, { type: "button", variant: "outline", size: "sm", onClick: onClose, disabled: isPending, children: t("trimSkip") }), _jsx(Button, { type: "button", variant: "primary", size: "sm", onClick: handleTrim, disabled: isPending || duration === 0, children: isPending ? t("trimming") : t("trimSave") })] })] }) }));
-}

package/dist/features/media/server.d.ts

@@ -1,2 +0,0 @@
-import "server-only";
-export { extractStoragePathFromUrl, finalizeStagedMediaUrl, finalizeStagedMediaField, finalizeStagedMediaArray, finalizeStagedMediaObject, finalizeStagedMediaObjectArray, } from "./finalize";

package/dist/features/media/server.js

@@ -1,2 +0,0 @@
-import "server-only";
-export { extractStoragePathFromUrl, finalizeStagedMediaUrl, finalizeStagedMediaField, finalizeStagedMediaArray, finalizeStagedMediaObject, finalizeStagedMediaObjectArray, } from "./finalize";

package/dist/features/media/types/index.d.ts

@@ -1,29 +0,0 @@
-import { z } from "zod";
-export type MediaFieldType = "image" | "video" | "file";
-export type MediaFieldInput = MediaField | string | null | undefined;
-export interface MediaField {
-    url: string;
-    type: MediaFieldType;
-    alt?: string;
-    thumbnailUrl?: string;
-}
-export declare const mediaFieldSchema: z.ZodObject<{
-    url: z.ZodString;
-    type: z.ZodEnum<["image", "video", "file"]>;
-    alt: z.ZodOptional<z.ZodString>;
-    thumbnailUrl: z.ZodOptional<z.ZodString>;
-}, "strip", z.ZodTypeAny, {
-    type: "video" | "image" | "file";
-    url: string;
-    alt?: string | undefined;
-    thumbnailUrl?: string | undefined;
-}, {
-    type: "video" | "image" | "file";
-    url: string;
-    alt?: string | undefined;
-    thumbnailUrl?: string | undefined;
-}>;
-export declare function coerceMediaField(value: MediaFieldInput, fallbackType?: MediaFieldType): MediaField | null;
-export declare function coerceMediaFieldArray(values: Array<MediaField | string> | null | undefined, fallbackType?: MediaFieldType): MediaField[];
-export declare function getMediaUrl(value: MediaFieldInput): string | undefined;
-export declare function inferMediaTypeFromMime(mimeType?: string, url?: string): MediaFieldType;

package/dist/features/media/types/index.js

@@ -1,43 +0,0 @@
-import { z } from "zod";
-export const mediaFieldSchema = z.object({
-    url: z.string().url(),
-    type: z.enum(["image", "video", "file"]),
-    alt: z.string().optional(),
-    thumbnailUrl: z.string().url().optional(),
-});
-export function coerceMediaField(value, fallbackType = "image") {
-    if (!value) {
-        return null;
-    }
-    if (typeof value === "string") {
-        return {
-            url: value,
-            type: fallbackType,
-        };
-    }
-    return value;
-}
-export function coerceMediaFieldArray(values, fallbackType = "image") {
-    if (!values || values.length === 0) {
-        return [];
-    }
-    return values
-        .map((value) => coerceMediaField(value, fallbackType))
-        .filter((value) => value !== null);
-}
-export function getMediaUrl(value) {
-    return coerceMediaField(value)?.url;
-}
-export function inferMediaTypeFromMime(mimeType, url) {
-    if (mimeType?.startsWith("image/"))
-        return "image";
-    if (mimeType?.startsWith("video/"))
-        return "video";
-    if (url) {
-        if (/\.(jpe?g|png|gif|webp|svg)(\?|$)/i.test(url))
-            return "image";
-        if (/\.(mp4|webm|ogg|mov|avi)(\?|$)/i.test(url))
-            return "video";
-    }
-    return "file";
-}

package/dist/features/media/upload/CameraCapture.d.ts

@@ -1,8 +0,0 @@
-export interface CameraCaptureProps {
-    mode: "photo" | "video" | "both";
-    facingMode?: "user" | "environment";
-    onCapture: (blob: Blob, type: "photo" | "video") => void;
-    onError?: (error: string) => void;
-    className?: string;
-}
-export default function CameraCapture({ mode, facingMode, onCapture, onError, className, }: CameraCaptureProps): import("react/jsx-runtime").JSX.Element;

package/dist/features/media/upload/CameraCapture.js

@@ -1,59 +0,0 @@
-"use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-/**
- * CameraCapture — live camera viewfinder for @mohasinac/feat-media.
- *
- * Photo-capture, video-recording, or both. Camera-flip when multiple inputs detected.
- * Uses `useCamera` from `@mohasinac/react`.
- */
-import { useEffect, useState } from "react";
-import { useTranslations } from "next-intl";
-import { useCamera } from "../../../react";
-import { Alert, Button, Div, Span, Spinner } from "../../../ui";
-export default function CameraCapture({ mode, facingMode = "environment", onCapture, onError, className, }) {
-    const t = useTranslations("camera");
-    const camera = useCamera();
-    const [isStarting, setIsStarting] = useState(false);
-    const [hasMultipleCameras, setHasMultipleCameras] = useState(false);
-    useEffect(() => {
-        let cancelled = false;
-        async function init() {
-            setIsStarting(true);
-            if (typeof navigator !== "undefined" &&
-                navigator.mediaDevices?.enumerateDevices) {
-                const devices = await navigator.mediaDevices.enumerateDevices();
-                if (!cancelled) {
-                    setHasMultipleCameras(devices.filter((d) => d.kind === "videoinput").length > 1);
-                }
-            }
-            await camera.startCamera({
-                facingMode,
-                audio: mode === "video" || mode === "both",
-            });
-            if (!cancelled)
-                setIsStarting(false);
-        }
-        void init();
-        return () => {
-            cancelled = true;
-        };
-    }, []);
-    useEffect(() => {
-        if (camera.error && onError)
-            onError(camera.error);
-    }, [camera.error, onError]);
-    const handleTakePhoto = () => {
-        const blob = camera.takePhoto();
-        if (blob)
-            onCapture(blob, "photo");
-    };
-    const handleStopRecording = async () => {
-        const blob = await camera.stopRecording();
-        onCapture(blob, "video");
-    };
-    const showPhotoButton = mode === "photo" || mode === "both";
-    const showVideoButton = mode === "video" || mode === "both";
-    return (_jsxs(Div, { className: `relative rounded-xl overflow-hidden bg-black ${className ?? ""}`, children: [_jsx("video", { ref: camera.videoRef, autoPlay: true, muted: true, playsInline: true, className: "w-full aspect-video object-cover" }), isStarting && (_jsx(Div, { className: "absolute inset-0 flex items-center justify-center bg-black/60", children: _jsxs(Div, { className: "flex flex-col items-center gap-2", children: [_jsx(Spinner, {}), _jsx(Span, { className: "text-white text-sm", children: t("starting") })] }) })), camera.error && (_jsx(Div, { className: "absolute top-2 left-2 right-2", children: _jsx(Alert, { variant: "error", children: camera.error }) })), !isStarting && !camera.error && camera.isActive && (_jsxs(Div, { className: "absolute bottom-0 left-0 right-0 p-3 bg-black/40 flex items-center justify-center gap-3", children: [showPhotoButton && (_jsx(Button, { variant: "secondary", onClick: handleTakePhoto, "aria-label": t("takePhoto"), disabled: camera.isCapturing, children: t("takePhoto") })), showVideoButton && (_jsx(Button, { variant: camera.isCapturing ? "danger" : "secondary", onClick: camera.isCapturing
-                            ? handleStopRecording
-                            : () => camera.startRecording(), "aria-label": camera.isCapturing ? t("stopRecording") : t("startRecording"), children: camera.isCapturing ? t("stopRecording") : t("startRecording") })), hasMultipleCameras && (_jsx(Button, { variant: "outline", onClick: () => void camera.switchCamera(), "aria-label": t("flipCamera"), disabled: camera.isCapturing, children: t("flipCamera") }))] }))] }));
-}

package/dist/features/media/upload/ImageUpload.d.ts

@@ -1,14 +0,0 @@
-import type { ImageCropData } from "../modals/ImageCropModal";
-export interface ImageUploadProps {
-    currentImage?: string;
-    onUpload: (file: File) => Promise<string>;
-    onChange?: (url: string) => void;
-    accept?: string;
-    maxSizeMB?: number;
-    label?: string;
-    helperText?: string;
-    captureSource?: "file-only" | "camera-only" | "both";
-    enableCrop?: boolean;
-    onCropDataChange?: (cropData: ImageCropData) => void;
-}
-export declare function ImageUpload({ currentImage, onUpload, onChange, accept, maxSizeMB, label, helperText, captureSource, enableCrop, onCropDataChange, }: ImageUploadProps): import("react/jsx-runtime").JSX.Element;

package/dist/features/media/upload/ImageUpload.js

@@ -1,132 +0,0 @@
-"use client";
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-/**
- * ImageUpload — canonical image upload component for @mohasinac/feat-media.
- *
- * Stage locally → caller-provided onUpload() → /api/media/upload.
- * Optional focal-point crop (enableCrop, default true).
- * Optional camera capture (captureSource="both").
- */
-import { useState, useRef } from "react";
-import { useTranslations } from "next-intl";
-import { useCamera } from "../../../react";
-import { Alert, Button, Div, Label, Progress, Row, Span, Spinner, Text, } from "../../../ui";
-import { MediaImage } from "../MediaImage";
-import { ImageCropModal } from "../modals/ImageCropModal";
-import CameraCapture from "./CameraCapture";
-function formatFileSize(bytes) {
-    if (bytes < 1024 * 1024)
-        return `${(bytes / 1024).toFixed(1)}KB`;
-    return `${(bytes / (1024 * 1024)).toFixed(2)}MB`;
-}
-export function ImageUpload({ currentImage, onUpload, onChange, accept = "image/jpeg,image/png,image/gif,image/webp", maxSizeMB = 10, label = "Upload Image", helperText, captureSource = "both", enableCrop = true, onCropDataChange, }) {
-    const [uploading, setUploading] = useState(false);
-    const [preview, setPreview] = useState(currentImage || "");
-    const [error, setError] = useState("");
-    const [progress, setProgress] = useState(0);
-    const [showCropModal, setShowCropModal] = useState(false);
-    const [cropPreviewUrl, setCropPreviewUrl] = useState(null);
-    const [pendingFile, setPendingFile] = useState(null);
-    const [captureMode, setCaptureMode] = useState("file");
-    const fileInputRef = useRef(null);
-    const mobileCaptureRef = useRef(null);
-    const t = useTranslations("camera");
-    const tUpload = useTranslations("upload");
-    const tMediaEditor = useTranslations("mediaEditor");
-    const { isSupported: isCameraSupported } = useCamera();
-    const showCamera = captureSource === "camera-only" ||
-        (captureSource === "both" && captureMode === "camera");
-    const showFileInput = captureSource === "file-only" ||
-        (captureSource === "both" && captureMode === "file");
-    const performUpload = async (file, cropData) => {
-        try {
-            setUploading(true);
-            setProgress(30);
-            const url = await onUpload(file);
-            setProgress(100);
-            setPreview(url);
-            onChange?.(url);
-            if (cropData)
-                onCropDataChange?.(cropData);
-        }
-        catch (err) {
-            const message = err instanceof Error ? err.message : "Upload failed";
-            setError(message);
-            setPreview(currentImage || "");
-        }
-        finally {
-            setUploading(false);
-            setProgress(0);
-        }
-    };
-    const prepareFile = (file) => {
-        if (!enableCrop) {
-            void performUpload(file);
-            return;
-        }
-        const reader = new FileReader();
-        reader.onload = (event) => {
-            if (event.target?.result) {
-                setCropPreviewUrl(event.target.result);
-                setPendingFile(file);
-                setShowCropModal(true);
-            }
-        };
-        reader.readAsDataURL(file);
-    };
-    const handleCropSave = (cropData) => {
-        setShowCropModal(false);
-        if (pendingFile)
-            void performUpload(pendingFile, cropData);
-        setCropPreviewUrl(null);
-        setPendingFile(null);
-    };
-    const handleCropClose = () => {
-        setShowCropModal(false);
-        setCropPreviewUrl(null);
-        if (pendingFile) {
-            void performUpload(pendingFile);
-            setPendingFile(null);
-        }
-    };
-    const handleCameraCapture = (blob) => {
-        const file = new File([blob], "camera-capture.webp", {
-            type: "image/webp",
-        });
-        setError("");
-        setProgress(0);
-        prepareFile(file);
-    };
-    const handleFileChange = (e) => {
-        const file = e.target.files?.[0];
-        if (!file)
-            return;
-        setError("");
-        setProgress(0);
-        const fileSizeMB = file.size / 1024 / 1024;
-        if (fileSizeMB > maxSizeMB) {
-            setError(`File size must be less than ${maxSizeMB}MB (current: ${formatFileSize(file.size)})`);
-            return;
-        }
-        const acceptedTypes = accept.split(",").map((t) => t.trim());
-        if (!acceptedTypes.includes(file.type)) {
-            setError(`Invalid file type. Accepted: ${accept}`);
-            return;
-        }
-        prepareFile(file);
-    };
-    const handleRemove = () => {
-        setPreview("");
-        setError("");
-        if (fileInputRef.current)
-            fileInputRef.current.value = "";
-        onChange?.("");
-    };
-    return (_jsxs(Div, { className: "space-y-3", children: [label && (_jsx(Label, { className: "block text-sm font-medium text-zinc-600 dark:text-zinc-400", children: label })), _jsx(Div, { className: "relative", children: preview ? (_jsxs(Div, { className: "space-y-2", children: [_jsxs(Div, { className: "relative aspect-[16/9] overflow-hidden rounded-xl border-2 border-zinc-200 dark:border-zinc-700", children: [_jsx(MediaImage, { src: preview, alt: "Preview", size: "card" }), uploading && progress > 0 && (_jsx(Div, { className: "absolute inset-x-0 bottom-0", children: _jsx(Progress, { value: progress, size: "sm" }) }))] }), !uploading && (_jsxs(Row, { wrap: true, gap: "sm", children: [enableCrop && (_jsx(Button, { type: "button", onClick: () => {
-                                        setCropPreviewUrl(preview);
-                                        setShowCropModal(true);
-                                    }, variant: "secondary", size: "sm", children: tMediaEditor("editImage") })), _jsx(Button, { type: "button", onClick: () => fileInputRef.current?.click(), variant: "outline", size: "sm", children: tUpload("change") }), _jsx(Button, { type: "button", onClick: handleRemove, variant: "danger", size: "sm", children: tUpload("remove") })] }))] })) : (_jsxs(_Fragment, { children: [captureSource === "both" && isCameraSupported && (_jsxs(Row, { justify: "center", className: "gap-2 mb-3", children: [_jsx(Button, { type: "button", variant: captureMode === "file" ? "primary" : "outline", size: "sm", onClick: () => setCaptureMode("file"), children: t("switchToUpload") }), _jsx(Button, { type: "button", variant: captureMode === "camera" ? "primary" : "outline", size: "sm", onClick: () => setCaptureMode("camera"), children: t("switchToCamera") })] })), showCamera && isCameraSupported && (_jsx(CameraCapture, { mode: "photo", facingMode: "environment", onCapture: handleCameraCapture, onError: setError })), showCamera && !isCameraSupported && (_jsx(Button, { type: "button", onClick: () => mobileCaptureRef.current?.click(), disabled: uploading, variant: "ghost", className: "w-full aspect-[16/9] border-2 border-dashed border-zinc-200 dark:border-zinc-700 rounded-xl flex items-center justify-center flex-col text-zinc-500 dark:text-zinc-400", children: _jsx(Span, { className: "text-sm font-medium", children: t("switchToCamera") }) })), showFileInput && (_jsxs(Button, { type: "button", onClick: () => fileInputRef.current?.click(), disabled: uploading, variant: "ghost", className: "w-full aspect-[16/9] border-2 border-dashed border-zinc-200 dark:border-zinc-700 rounded-xl flex items-center justify-center flex-col text-zinc-500 dark:text-zinc-400", children: [_jsx("svg", { className: "w-12 h-12 mb-3", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", "aria-hidden": "true", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" }) }), _jsx(Span, { className: "text-sm font-medium", children: uploading ? tUpload("uploading") : tUpload("clickToUpload") }), _jsxs(Span, { className: "text-xs mt-1", children: [accept
-                                            .split(",")
-                                            .map((t) => t.split("/")[1]?.toUpperCase() ?? t)
-                                            .join(", "), " ", "(max ", maxSizeMB, "MB)"] })] }))] })) }), _jsx("input", { ref: fileInputRef, type: "file", accept: accept, onChange: handleFileChange, className: "hidden", "aria-hidden": "true" }), showCamera && !isCameraSupported && (_jsx("input", { ref: mobileCaptureRef, type: "file", accept: "image/*", capture: "environment", onChange: handleFileChange, className: "hidden", "aria-hidden": "true" })), helperText && !error && (_jsx(Text, { variant: "secondary", size: "xs", children: helperText })), error && _jsx(Alert, { variant: "error", children: error }), uploading && (_jsxs(Row, { className: "gap-2", children: [_jsx(Spinner, { size: "sm" }), _jsx(Text, { size: "sm", variant: "secondary", children: tUpload("uploadingProgress", { progress }) })] })), cropPreviewUrl && (_jsx(ImageCropModal, { isOpen: showCropModal, imageUrl: cropPreviewUrl, onClose: handleCropClose, onSave: handleCropSave }))] }));
-}

package/dist/features/media/upload/MediaUploadField.d.ts

@@ -1,31 +0,0 @@
-import { type MediaField } from "../types/index";
-export interface MediaUploadFieldProps {
-    label: string;
-    value: string;
-    onChange: (url: string) => void;
-    onChangeField?: (media: MediaField | null) => void;
-    onUpload: (file: File) => Promise<string>;
-    accept?: string;
-    maxSizeMB?: number;
-    disabled?: boolean;
-    helperText?: string;
-    captureSource?: "file-only" | "camera-only" | "both";
-    captureMode?: "photo" | "video" | "both";
-    enableTrim?: boolean;
-    enableThumbnail?: boolean;
-    onThumbnailChange?: (url: string) => void;
-    /**
-     * Called with every URL that was staged (uploaded) but never persisted.
-     * The parent form should call `DELETE /api/media?url=…` for each entry.
-     */
-    onAbort?: (stagedUrls: string[]) => void;
-    /**
-     * Called whenever staged URLs change.
-     */
-    onStagedUrlsChange?: (stagedUrls: string[]) => void;
-    /**
-     * Set true after successful save to prevent auto-cleanup on unmount.
-     */
-    isPersisted?: boolean;
-}
-export declare function MediaUploadField({ label, value, onChange, onChangeField, onUpload, accept, maxSizeMB, disabled, helperText, captureSource, captureMode, enableTrim, enableThumbnail, onThumbnailChange, onAbort, onStagedUrlsChange, isPersisted, }: MediaUploadFieldProps): import("react/jsx-runtime").JSX.Element;

package/dist/features/media/upload/MediaUploadField.js

@@ -1,204 +0,0 @@
-"use client";
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-/**
- * MediaUploadField — single-file upload field for @mohasinac/feat-media.
- *
- * For video: optionally opens VideoTrimModal then VideoThumbnailSelector after upload.
- * Stage locally → caller-provided onUpload() → /api/media/upload.
- */
-import { useState, useRef, useEffect } from "react";
-import { useTranslations } from "next-intl";
-import { useCamera } from "../../../react";
-import { Alert, Button, Div, Label, Row, Spinner, Text } from "../../../ui";
-import { MediaImage } from "../MediaImage";
-import { MediaVideo } from "../MediaVideo";
-import { VideoTrimModal } from "../modals/VideoTrimModal";
-import { VideoThumbnailSelector } from "../modals/VideoThumbnailSelector";
-import CameraCapture from "./CameraCapture";
-import { inferMediaTypeFromMime } from "../types/index";
-function isVideo(url) {
-    return /\.(mp4|webm|ogg|mov|avi)(\?|$)/i.test(url);
-}
-function isImage(url) {
-    return /\.(jpe?g|png|gif|webp|svg)(\?|$)/i.test(url);
-}
-function filenameFromUrl(url) {
-    try {
-        const parts = new URL(url).pathname.split("/");
-        return decodeURIComponent(parts[parts.length - 1] || url);
-    }
-    catch {
-        return url;
-    }
-}
-export function MediaUploadField({ label, value, onChange, onChangeField, onUpload, accept = "*", maxSizeMB = 50, disabled = false, helperText, captureSource = "file-only", captureMode = "photo", enableTrim = true, enableThumbnail = true, onThumbnailChange, onAbort, onStagedUrlsChange, isPersisted = false, }) {
-    const [isLoading, setIsLoading] = useState(false);
-    const [error, setError] = useState(null);
-    const [pendingVideoUrl, setPendingVideoUrl] = useState(null);
-    const [showTrimModal, setShowTrimModal] = useState(false);
-    const [showThumbnailModal, setShowThumbnailModal] = useState(false);
-    const [inputMode, setInputMode] = useState("file");
-    const fileInputRef = useRef(null);
-    const mobileCaptureRef = useRef(null);
-    const stagedUrlsRef = useRef([]);
-    const onAbortRef = useRef(onAbort);
-    const onStagedUrlsChangeRef = useRef(onStagedUrlsChange);
-    const isPersistedRef = useRef(isPersisted);
-    useEffect(() => {
-        onAbortRef.current = onAbort;
-    }, [onAbort]);
-    useEffect(() => {
-        onStagedUrlsChangeRef.current = onStagedUrlsChange;
-    }, [onStagedUrlsChange]);
-    useEffect(() => {
-        isPersistedRef.current = isPersisted;
-    }, [isPersisted]);
-    // On unmount, clean up only if the form wasn't persisted.
-    useEffect(() => {
-        return () => {
-            if (!isPersistedRef.current && stagedUrlsRef.current.length > 0) {
-                onAbortRef.current?.([...stagedUrlsRef.current]);
-            }
-        };
-    }, []);
-    const emitStaged = () => {
-        onStagedUrlsChangeRef.current?.([...stagedUrlsRef.current]);
-    };
-    const stageUrl = (url) => {
-        if (!stagedUrlsRef.current.includes(url)) {
-            stagedUrlsRef.current.push(url);
-            emitStaged();
-        }
-    };
-    const unstageUrl = (url) => {
-        const next = stagedUrlsRef.current.filter((u) => u !== url);
-        if (next.length !== stagedUrlsRef.current.length) {
-            stagedUrlsRef.current = next;
-            emitStaged();
-        }
-    };
-    const t = useTranslations("camera");
-    const tUpload = useTranslations("upload");
-    const tMediaEditor = useTranslations("mediaEditor");
-    const { isSupported: isCameraSupported } = useCamera();
-    const showCamera = captureSource === "camera-only" ||
-        (captureSource === "both" && inputMode === "camera");
-    const showFileInput = captureSource === "file-only" ||
-        (captureSource === "both" && inputMode === "file");
-    const captureModeAccept = captureMode === "video"
-        ? "video/*"
-        : captureMode === "both"
-            ? "image/*,video/*"
-            : "image/*";
-    const afterUpload = (url, fileType) => {
-        onChangeField?.({
-            url,
-            type: inferMediaTypeFromMime(fileType, url),
-        });
-        const isVideoFile = fileType.startsWith("video/");
-        if (isVideoFile && enableTrim) {
-            setPendingVideoUrl(url);
-            setShowTrimModal(true);
-            return;
-        }
-        if (isVideoFile && enableThumbnail) {
-            setPendingVideoUrl(url);
-            setShowThumbnailModal(true);
-            return;
-        }
-        onChange(url);
-    };
-    const handleTrimSave = (trimmedUrl) => {
-        setShowTrimModal(false);
-        if (enableThumbnail) {
-            setPendingVideoUrl(trimmedUrl);
-            setShowThumbnailModal(true);
-        }
-        else {
-            onChange(trimmedUrl);
-            setPendingVideoUrl(null);
-        }
-    };
-    const handleTrimClose = () => {
-        setShowTrimModal(false);
-        if (enableThumbnail && pendingVideoUrl) {
-            setShowThumbnailModal(true);
-        }
-        else {
-            if (pendingVideoUrl)
-                onChange(pendingVideoUrl);
-            setPendingVideoUrl(null);
-        }
-    };
-    const handleThumbnailSelect = (thumbUrl) => {
-        setShowThumbnailModal(false);
-        if (pendingVideoUrl)
-            onChange(pendingVideoUrl);
-        onThumbnailChange?.(thumbUrl);
-        setPendingVideoUrl(null);
-    };
-    const handleThumbnailClose = () => {
-        setShowThumbnailModal(false);
-        if (pendingVideoUrl)
-            onChange(pendingVideoUrl);
-        setPendingVideoUrl(null);
-    };
-    const handleFileChange = async (e) => {
-        const file = e.target.files?.[0];
-        if (!file)
-            return;
-        const fileSizeMB = file.size / 1024 / 1024;
-        if (fileSizeMB > maxSizeMB) {
-            setError(`File size must be less than ${maxSizeMB}MB`);
-            return;
-        }
-        setError(null);
-        setIsLoading(true);
-        try {
-            const url = await onUpload(file);
-            stageUrl(url);
-            afterUpload(url, file.type);
-        }
-        catch (err) {
-            setError(err instanceof Error ? err.message : "Upload failed");
-        }
-        finally {
-            setIsLoading(false);
-            if (fileInputRef.current)
-                fileInputRef.current.value = "";
-        }
-    };
-    const handleRemove = () => {
-        if (value && stagedUrlsRef.current.includes(value)) {
-            onAbortRef.current?.([value]);
-            unstageUrl(value);
-        }
-        onChange("");
-        onChangeField?.(null);
-        setError(null);
-    };
-    const handleCameraCapture = async (blob, type) => {
-        const ext = type === "video" ? "webm" : "webp";
-        const file = new File([blob], `camera-capture.${ext}`, { type: blob.type });
-        setError(null);
-        setIsLoading(true);
-        try {
-            const url = await onUpload(file);
-            stageUrl(url);
-            afterUpload(url, blob.type);
-        }
-        catch (err) {
-            setError(err instanceof Error ? err.message : "Upload failed");
-        }
-        finally {
-            setIsLoading(false);
-        }
-    };
-    return (_jsxs(Div, { className: "space-y-2", children: [_jsx(Label, { className: "block text-sm font-medium text-zinc-600 dark:text-zinc-400", children: label }), value && !isLoading && (_jsxs(Div, { className: "rounded-lg border border-zinc-200 dark:border-zinc-700 bg-zinc-50 dark:bg-zinc-900 p-3", children: [isVideo(value) ? (_jsx(Div, { className: "relative aspect-video overflow-hidden rounded-lg", children: _jsx(MediaVideo, { src: value, alt: label, controls: true, objectFit: "contain" }) })) : isImage(value) ? (_jsx(Div, { className: "relative aspect-video overflow-hidden rounded-lg", children: _jsx(MediaImage, { src: value, alt: label, size: "card", objectFit: "contain" }) })) : (_jsx("a", { href: value, target: "_blank", rel: "noopener noreferrer", className: "text-sm underline break-all text-blue-600 dark:text-blue-400", children: filenameFromUrl(value) })), !disabled && (_jsxs(Row, { wrap: true, gap: "sm", className: "mt-2", children: [isVideo(value) && (enableTrim || enableThumbnail) && (_jsx(Button, { type: "button", onClick: () => {
-                                    setPendingVideoUrl(value);
-                                    if (enableTrim)
-                                        setShowTrimModal(true);
-                                    else
-                                        setShowThumbnailModal(true);
-                                }, variant: "secondary", size: "sm", children: tMediaEditor("editVideo") })), _jsx(Button, { type: "button", onClick: handleRemove, variant: "danger", size: "sm", children: tUpload("remove") })] }))] })), !disabled && !isLoading && (_jsxs(_Fragment, { children: [captureSource === "both" && isCameraSupported && (_jsxs(Row, { className: "gap-2", children: [_jsx(Button, { type: "button", variant: inputMode === "file" ? "primary" : "outline", size: "sm", onClick: () => setInputMode("file"), children: t("switchToUpload") }), _jsx(Button, { type: "button", variant: inputMode === "camera" ? "primary" : "outline", size: "sm", onClick: () => setInputMode("camera"), children: t("switchToCamera") })] })), showCamera && isCameraSupported && (_jsx(CameraCapture, { mode: captureMode, facingMode: "environment", onCapture: handleCameraCapture, onError: (msg) => setError(msg) })), showCamera && !isCameraSupported && (_jsx(Button, { type: "button", onClick: () => mobileCaptureRef.current?.click(), variant: "ghost", className: "w-full py-3 border-2 border-dashed border-zinc-200 dark:border-zinc-700 rounded-xl text-sm text-zinc-500 dark:text-zinc-400", children: t("switchToCamera") })), showFileInput && (_jsx(Button, { type: "button", onClick: () => fileInputRef.current?.click(), variant: "ghost", className: "w-full py-3 border-2 border-dashed border-zinc-200 dark:border-zinc-700 rounded-xl text-sm text-zinc-500 dark:text-zinc-400", children: value ? tUpload("replaceFile") : tUpload("chooseFile") }))] })), isLoading && (_jsxs(Row, { className: "gap-2", children: [_jsx(Spinner, { size: "sm" }), _jsx(Text, { size: "sm", variant: "secondary", children: tUpload("uploading") })] })), _jsx("input", { ref: fileInputRef, type: "file", accept: accept, onChange: handleFileChange, className: "hidden", "aria-hidden": "true" }), showCamera && !isCameraSupported && (_jsx("input", { ref: mobileCaptureRef, type: "file", accept: captureModeAccept, capture: "environment", onChange: handleFileChange, className: "hidden", "aria-hidden": "true" })), helperText && !error && (_jsx(Text, { variant: "secondary", size: "xs", children: helperText })), error && _jsx(Alert, { variant: "error", children: error }), pendingVideoUrl && (_jsx(VideoTrimModal, { isOpen: showTrimModal, videoUrl: pendingVideoUrl, onClose: handleTrimClose, onSave: handleTrimSave })), pendingVideoUrl && (_jsx(VideoThumbnailSelector, { isOpen: showThumbnailModal, videoUrl: pendingVideoUrl, onClose: handleThumbnailClose, onSelect: handleThumbnailSelect, onUpload: onUpload }))] }));
-}