@mohasinac/appkit 2.1.3 → 2.3.0

package/src/features/media/modals/VideoTrimModal.tsx

@@ -1,193 +0,0 @@
-"use client";
-
-/**
- * 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, Span, Text } from "../../../ui";
-import { MediaSlider } from "../components/MediaSlider";
-import { useMediaTrim } from "../hooks/useMedia";
-
-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;
-}
-
-function formatTime(seconds: number): string {
-  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,
-}: VideoTrimModalProps) {
-  const t = useTranslations("mediaEditor");
-  const [duration, setDuration] = useState(0);
-  const [startTime, setStartTime] = useState(0);
-  const [endTime, setEndTime] = useState(0);
-  const [quality, setQuality] = useState<"low" | "medium" | "high">("medium");
-  const [error, setError] = useState<string | null>(null);
-  const videoRef = useRef<HTMLVideoElement>(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: number) => {
-    if (videoRef.current) videoRef.current.currentTime = time;
-  };
-
-  const handleStartChange = (val: number) => {
-    const clamped = Math.min(val, endTime - 0.1);
-    setStartTime(clamped);
-    seekTo(clamped);
-  };
-
-  const handleEndChange = (val: number) => {
-    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: Record<"low" | "medium" | "high", string> = {
-    low: t("trimQualityLow"),
-    medium: t("trimQualityMedium"),
-    high: t("trimQualityHigh"),
-  };
-
-  return (
-    <Modal isOpen={isOpen} onClose={onClose} title={t("trimTitle")} size="lg">
-      <Div className="space-y-4">
-        <Text variant="secondary" className="text-xs">
-          {t("trimInstruction")}
-        </Text>
-
-        {/* Video player — raw <video> required: needs ref for duration/currentTime */}
-        <Div className="relative aspect-video overflow-hidden rounded-lg bg-black">
-          <video
-            ref={videoRef}
-            src={videoUrl}
-            className="absolute inset-0 w-full h-full object-contain"
-            controls
-            onLoadedMetadata={handleLoadedMetadata}
-          />
-        </Div>
-
-        {duration > 0 && (
-          <>
-            <Div className="space-y-1">
-              <Div className="flex items-center justify-between">
-                <Text size="sm">{t("trimStart")}</Text>
-                <Span className="text-sm font-mono tabular-nums">
-                  {formatTime(startTime)}
-                </Span>
-              </Div>
-              <MediaSlider
-                value={startTime}
-                min={0}
-                max={duration}
-                step={0.1}
-                onChange={handleStartChange}
-              />
-            </Div>
-
-            <Div className="space-y-1">
-              <Div className="flex items-center justify-between">
-                <Text size="sm">{t("trimEnd")}</Text>
-                <Span className="text-sm font-mono tabular-nums">
-                  {formatTime(endTime)}
-                </Span>
-              </Div>
-              <MediaSlider
-                value={endTime}
-                min={0}
-                max={duration}
-                step={0.1}
-                onChange={handleEndChange}
-              />
-            </Div>
-
-            <Text size="xs" variant="secondary">
-              {t("trimDuration", { duration: (endTime - startTime).toFixed(1) })}
-            </Text>
-
-            <Div className="space-y-1">
-              <Text size="sm">{t("trimQuality")}</Text>
-              <Div className="flex gap-2">
-                {(["low", "medium", "high"] as const).map((q) => (
-                  <Button
-                    key={q}
-                    type="button"
-                    variant={quality === q ? "primary" : "outline"}
-                    size="sm"
-                    onClick={() => setQuality(q)}
-                    disabled={isPending}
-                  >
-                    {qualityLabels[q]}
-                  </Button>
-                ))}
-              </Div>
-            </Div>
-          </>
-        )}
-
-        {error && <Alert variant="error">{error}</Alert>}
-
-        <Div className="flex items-center justify-end gap-2">
-          <Button type="button" variant="outline" size="sm" onClick={onClose} disabled={isPending}>
-            {t("trimSkip")}
-          </Button>
-          <Button
-            type="button"
-            variant="primary"
-            size="sm"
-            onClick={handleTrim}
-            disabled={isPending || duration === 0}
-          >
-            {isPending ? t("trimming") : t("trimSave")}
-          </Button>
-        </Div>
-      </Div>
-    </Modal>
-  );
-}

package/src/features/media/types/index.ts

@@ -1,69 +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 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: MediaFieldInput,
-  fallbackType: MediaFieldType = "image",
-): MediaField | null {
-  if (!value) {
-    return null;
-  }
-
-  if (typeof value === "string") {
-    return {
-      url: value,
-      type: fallbackType,
-    };
-  }
-
-  return value;
-}
-
-export function coerceMediaFieldArray(
-  values: Array<MediaField | string> | null | undefined,
-  fallbackType: MediaFieldType = "image",
-): MediaField[] {
-  if (!values || values.length === 0) {
-    return [];
-  }
-
-  return values
-    .map((value) => coerceMediaField(value, fallbackType))
-    .filter((value): value is MediaField => value !== null);
-}
-
-export function getMediaUrl(value: MediaFieldInput): string | undefined {
-  return coerceMediaField(value)?.url;
-}
-
-export function inferMediaTypeFromMime(
-  mimeType?: string,
-  url?: string,
-): MediaFieldType {
-  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/src/features/media/upload/CameraCapture.tsx

@@ -1,150 +0,0 @@
-"use client";
-
-/**
- * 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 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 = "environment",
-  onCapture,
-  onError,
-  className,
-}: CameraCaptureProps) {
-  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 (
-    <Div
-      className={`relative rounded-xl overflow-hidden bg-black ${className ?? ""}`}
-    >
-      <video
-        ref={camera.videoRef}
-        autoPlay
-        muted
-        playsInline
-        className="w-full aspect-video object-cover"
-      />
-
-      {isStarting && (
-        <Div className="absolute inset-0 flex items-center justify-center bg-black/60">
-          <Div className="flex flex-col items-center gap-2">
-            <Spinner />
-            <Span className="text-white text-sm">{t("starting")}</Span>
-          </Div>
-        </Div>
-      )}
-
-      {camera.error && (
-        <Div className="absolute top-2 left-2 right-2">
-          <Alert variant="error">{camera.error}</Alert>
-        </Div>
-      )}
-
-      {!isStarting && !camera.error && camera.isActive && (
-        <Div className="absolute bottom-0 left-0 right-0 p-3 bg-black/40 flex items-center justify-center gap-3">
-          {showPhotoButton && (
-            <Button
-              variant="secondary"
-              onClick={handleTakePhoto}
-              aria-label={t("takePhoto")}
-              disabled={camera.isCapturing}
-            >
-              {t("takePhoto")}
-            </Button>
-          )}
-
-          {showVideoButton && (
-            <Button
-              variant={camera.isCapturing ? "danger" : "secondary"}
-              onClick={
-                camera.isCapturing
-                  ? handleStopRecording
-                  : () => camera.startRecording()
-              }
-              aria-label={
-                camera.isCapturing ? t("stopRecording") : t("startRecording")
-              }
-            >
-              {camera.isCapturing ? t("stopRecording") : t("startRecording")}
-            </Button>
-          )}
-
-          {hasMultipleCameras && (
-            <Button
-              variant="outline"
-              onClick={() => void camera.switchCamera()}
-              aria-label={t("flipCamera")}
-              disabled={camera.isCapturing}
-            >
-              {t("flipCamera")}
-            </Button>
-          )}
-        </Div>
-      )}
-    </Div>
-  );
-}