@geekapps/silo-elements-nextjs 0.3.6 → 0.3.8

package/dist/index.js

@@ -2,6 +2,7 @@ import React, { useState, useRef, useCallback, useMemo, useEffect } from 'react'
 import { useMultipartUpload, useBatchUpload, useSignedUrl, useFileStatus } from '@geekapps/silo-nextjs';
 export { SiloProvider, useBatchUpload, useFileStatus, useMultipartUpload, useSignedUrl } from '@geekapps/silo-nextjs';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import MediaInfoFactory from 'mediainfo.js';
 import gsap from 'gsap';
 import { Pause, Play, Captions as Captions$1, Settings, Minimize, Maximize, VolumeX, Volume2 } from 'lucide-react';
 
@@ -163,7 +164,7 @@ var FORMATS = [
   { value: "png", label: "PNG", hint: "Sem perda" }
 ];
 function ImageOptions({ value, onChange, style }) {
-  const fmt = value.format ?? "webp";
+  const fmt2 = value.format ?? "webp";
   const optimize = value.optimize ?? true;
   return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2.5", style, children: [
     /* @__PURE__ */ jsxs("div", { children: [
@@ -174,7 +175,7 @@ function ImageOptions({ value, onChange, style }) {
           type: "button",
           onClick: () => onChange({ ...value, format: f.value }),
           title: f.hint,
-          style: fmt === f.value ? { border: "1px solid #6366f1", background: "#6366f1", color: "#fff", padding: "4px 12px", borderRadius: 6, fontSize: 12, fontWeight: 600, cursor: "pointer" } : { border: "1px solid rgba(255,255,255,0.2)", background: "rgba(255,255,255,0.06)", color: "rgba(255,255,255,0.8)", padding: "4px 12px", borderRadius: 6, fontSize: 12, fontWeight: 600, cursor: "pointer" },
+          style: fmt2 === f.value ? { border: "1px solid #6366f1", background: "#6366f1", color: "#fff", padding: "4px 12px", borderRadius: 6, fontSize: 12, fontWeight: 600, cursor: "pointer" } : { border: "1px solid rgba(255,255,255,0.2)", background: "rgba(255,255,255,0.06)", color: "rgba(255,255,255,0.8)", padding: "4px 12px", borderRadius: 6, fontSize: 12, fontWeight: 600, cursor: "pointer" },
           children: f.label
         },
         f.value
@@ -698,6 +699,125 @@ function VideoOptions({ value, onChange, style }) {
     )
   ] });
 }
+var CODEC_MESSAGES = {
+  AV1: { title: "AV1 n\xE3o \xE9 suportado como entrada", detail: "O pipeline de transcodifica\xE7\xE3o n\xE3o aceita arquivos AV1. Converta para H.264 ou H.265 antes de enviar." },
+  VP9: { title: "VP9 n\xE3o \xE9 suportado como entrada", detail: "Arquivos WebM/VP9 n\xE3o s\xE3o aceitos. Converta para H.264 ou H.265 antes de enviar." },
+  VP8: { title: "VP8 n\xE3o \xE9 suportado como entrada", detail: "Arquivos WebM/VP8 n\xE3o s\xE3o aceitos. Converta para H.264 antes de enviar." },
+  "MPEG-1 Video": { title: "MPEG-1 n\xE3o \xE9 suportado", detail: "Formato muito antigo. Converta para H.264 antes de enviar." },
+  "MPEG-2 Video": { title: "MPEG-2 n\xE3o \xE9 suportado", detail: "Converta para H.264 antes de enviar." }
+};
+var CONTAINER_MESSAGES = {
+  FLV: { title: "Formato FLV n\xE3o suportado", detail: "Arquivos Flash Video n\xE3o s\xE3o aceitos. Converta para MP4 (H.264) antes de enviar." },
+  "Flash Video": { title: "Formato FLV n\xE3o suportado", detail: "Arquivos Flash Video n\xE3o s\xE3o aceitos. Converta para MP4 (H.264) antes de enviar." },
+  RealMedia: { title: "Formato RealMedia n\xE3o suportado", detail: "Converta para MP4 (H.264) antes de enviar." },
+  ASF: { title: "Formato ASF/WMV n\xE3o suportado", detail: "Converta para MP4 (H.264) antes de enviar." }
+};
+function issueMessage(issue) {
+  if (issue.code === "unsupported_codec") {
+    return CODEC_MESSAGES[issue.codec] ?? { title: `Codec ${issue.codec} n\xE3o suportado`, detail: "Converta para H.264 ou H.265 antes de enviar." };
+  }
+  const key = Object.keys(CONTAINER_MESSAGES).find((k) => issue.container.includes(k));
+  return (key ? CONTAINER_MESSAGES[key] : null) ?? { title: `Container ${issue.container} n\xE3o suportado`, detail: "Converta para MP4 (H.264) antes de enviar." };
+}
+function fmt(n, unit) {
+  return `${n.toLocaleString("pt-BR")}${unit}`;
+}
+function fmtDuration(secs) {
+  const h = Math.floor(secs / 3600);
+  const m = Math.floor(secs % 3600 / 60);
+  const s = Math.floor(secs % 60);
+  if (h > 0) return `${h}h ${m}m ${s}s`;
+  if (m > 0) return `${m}m ${s}s`;
+  return `${s}s`;
+}
+function VideoCompatAlert({ info, issues, analyzing }) {
+  if (analyzing) {
+    return /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 8, padding: "10px 14px", background: "rgba(99,102,241,0.06)", border: "1px solid rgba(99,102,241,0.18)", borderRadius: 10 }, children: [
+      /* @__PURE__ */ jsx("span", { style: { fontSize: 14 }, children: "\u{1F50D}" }),
+      /* @__PURE__ */ jsx("span", { style: { fontSize: 12, color: "rgba(165,180,252,0.9)" }, children: "Analisando arquivo\u2026" })
+    ] });
+  }
+  const v = info.video;
+  return /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 8 }, children: [
+    /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexWrap: "wrap", gap: 6 }, children: [
+      v && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(Chip, { label: v.codec || "?", color: "neutral" }),
+        v.width > 0 && v.height > 0 && /* @__PURE__ */ jsx(Chip, { label: `${v.width}\xD7${v.height}`, color: "neutral" }),
+        v.duration > 0 && /* @__PURE__ */ jsx(Chip, { label: fmtDuration(v.duration), color: "neutral" }),
+        v.frameRate > 0 && /* @__PURE__ */ jsx(Chip, { label: fmt(Math.round(v.frameRate), " fps"), color: "neutral" }),
+        v.hdr && /* @__PURE__ */ jsx(Chip, { label: "HDR", color: "purple" })
+      ] }),
+      info.audio && /* @__PURE__ */ jsx(Chip, { label: info.audio.codec || "sem \xE1udio", color: "neutral" }),
+      /* @__PURE__ */ jsx(Chip, { label: formatBytes(info.fileSize), color: "neutral" })
+    ] }),
+    issues.map((issue, i) => {
+      const msg = issueMessage(issue);
+      return /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 8, padding: "10px 14px", background: "rgba(239,68,68,0.07)", border: "1px solid rgba(239,68,68,0.22)", borderRadius: 10 }, children: [
+        /* @__PURE__ */ jsx("span", { style: { fontSize: 14, flexShrink: 0 }, children: "\u{1F6AB}" }),
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("div", { style: { fontSize: 12, fontWeight: 700, color: "#f87171", marginBottom: 2 }, children: msg.title }),
+          /* @__PURE__ */ jsx("div", { style: { fontSize: 11, color: "rgba(255,255,255,0.5)", lineHeight: 1.55 }, children: msg.detail })
+        ] })
+      ] }, i);
+    })
+  ] });
+}
+function Chip({ label, color }) {
+  const s = color === "purple" ? { background: "rgba(168,85,247,0.12)", border: "1px solid rgba(168,85,247,0.25)", color: "#c084fc" } : { background: "rgba(255,255,255,0.05)", border: "1px solid rgba(255,255,255,0.1)", color: "rgba(255,255,255,0.6)" };
+  return /* @__PURE__ */ jsx("span", { style: { ...s, fontSize: 11, fontWeight: 600, borderRadius: 6, padding: "2px 8px", display: "inline-block" }, children: label });
+}
+var UNSUPPORTED_CODECS = ["AV1", "VP8", "VP9", "MPEG-1 Video", "MPEG-2 Video", "Theora", "RealVideo"];
+var UNSUPPORTED_CONTAINERS = ["FLV", "Flash Video", "RealMedia", "ASF"];
+function getCompatIssues(info) {
+  const issues = [];
+  if (info.video && UNSUPPORTED_CODECS.includes(info.video.codec)) {
+    issues.push({ code: "unsupported_codec", codec: info.video.codec });
+  }
+  if (UNSUPPORTED_CONTAINERS.some((c) => info.container.includes(c))) {
+    issues.push({ code: "unsupported_container", container: info.container });
+  }
+  return issues;
+}
+async function analyzeVideoFile(file) {
+  const wasmUrl = `https://cdn.jsdelivr.net/npm/mediainfo.js@0.3.7/dist/MediaInfoModule.wasm`;
+  const mediainfo = await MediaInfoFactory({ format: "object", locateFile: () => wasmUrl });
+  const getSize = () => file.size;
+  const readChunk = (chunkSize, offset) => new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onload = (e) => resolve(new Uint8Array(e.target.result));
+    reader.onerror = reject;
+    reader.readAsArrayBuffer(file.slice(offset, offset + chunkSize));
+  });
+  const result = await mediainfo.analyzeData(getSize, readChunk);
+  mediainfo.close();
+  const tracks = result.media?.track ?? [];
+  const general = tracks.find((t) => t["@type"] === "General");
+  const video = tracks.find((t) => t["@type"] === "Video");
+  const audio = tracks.find((t) => t["@type"] === "Audio");
+  const str = (v) => typeof v === "string" ? v : "";
+  const num = (v) => parseFloat(str(v)) || 0;
+  const hdrFormats = str(video?.["HDR_Format"] ?? video?.["transfer_characteristics"]);
+  const isHdr = hdrFormats.length > 0 && !hdrFormats.toLowerCase().includes("bt.709") && !hdrFormats.toLowerCase().includes("sdr");
+  return {
+    container: str(general?.["Format"]) || file.type || "Unknown",
+    fileSize: file.size,
+    video: video ? {
+      codec: str(video["Format"]),
+      width: num(video["Width"]),
+      height: num(video["Height"]),
+      duration: num(video["Duration"]) / 1e3,
+      bitrate: num(video["BitRate"]),
+      frameRate: num(video["FrameRate"]),
+      hdr: isHdr,
+      colorSpace: str(video["colour_primaries"]) || str(video["ColorSpace"])
+    } : null,
+    audio: audio ? {
+      codec: str(audio["Format"]),
+      channels: num(audio["Channels"]),
+      sampleRate: num(audio["SamplingRate"])
+    } : null
+  };
+}
 var DEFAULT_VIDEO_OPTS = {
   thumbnails: true,
   storyboard: false,
@@ -742,6 +862,9 @@ function VideoUploader({
   const [preview, setPreview] = useState(null);
   const [videoOpts, setVideoOpts] = useState(() => createInitialVideoOpts(video));
   const [stagedFile, setStagedFile] = useState(null);
+  const [videoInfo, setVideoInfo] = useState(null);
+  const [videoIssues, setVideoIssues] = useState([]);
+  const [analyzing, setAnalyzing] = useState(false);
   const t = resolveTheme(theme);
   const vars = themeToVars(t);
   const doUpload = useCallback(async (file, opts) => {
@@ -758,8 +881,19 @@ function VideoUploader({
     if (!file) return;
     if (showVideoOptions) {
       setVideoOpts(createInitialVideoOpts(video));
+      setVideoInfo(null);
+      setVideoIssues([]);
       setStagedFile(file);
       if (showPreview) setPreview(URL.createObjectURL(file));
+      setAnalyzing(true);
+      try {
+        const info = await analyzeVideoFile(file);
+        setVideoInfo(info);
+        setVideoIssues(getCompatIssues(info));
+      } catch {
+      } finally {
+        setAnalyzing(false);
+      }
     } else {
       await doUpload(file, video ?? videoOpts);
     }
@@ -802,7 +936,11 @@ function VideoUploader({
     ),
     showVideoOptions && stagedFile && !isUploading && state.status !== "done" && /* @__PURE__ */ jsxs(Fragment, { children: [
       preview && /* @__PURE__ */ jsx("div", { className: "border border-slate-200 rounded-xl overflow-hidden bg-black", children: /* @__PURE__ */ jsx("video", { src: preview, className: "w-full max-h-[200px] block", muted: true, playsInline: true, controls: true }) }),
-      /* @__PURE__ */ jsxs("div", { className: "border border-slate-200 rounded-xl overflow-hidden", children: [
+      (analyzing || videoInfo) && /* @__PURE__ */ jsxs("div", { className: "border border-slate-200 rounded-xl overflow-hidden", children: [
+        /* @__PURE__ */ jsx("div", { className: "px-3.5 py-2 bg-slate-100 text-[12px] font-bold text-slate-500 tracking-[0.04em]", children: "\u{1F4CB} Informa\xE7\xF5es do arquivo" }),
+        /* @__PURE__ */ jsx("div", { className: "p-3.5", children: /* @__PURE__ */ jsx(VideoCompatAlert, { info: videoInfo, issues: videoIssues, analyzing }) })
+      ] }),
+      videoIssues.length === 0 && /* @__PURE__ */ jsxs("div", { className: "border border-slate-200 rounded-xl overflow-hidden", children: [
         /* @__PURE__ */ jsx("div", { className: "px-3.5 py-2 bg-slate-100 text-[12px] font-bold text-slate-500 tracking-[0.04em]", children: "\u{1F3AC} Configura\xE7\xF5es de v\xEDdeo" }),
         /* @__PURE__ */ jsx(VideoOptions, { value: videoOpts, onChange: setVideoOpts, style: { padding: "12px 14px" } })
       ] }),
@@ -814,6 +952,8 @@ function VideoUploader({
             onClick: () => {
               setStagedFile(null);
               setPreview(null);
+              setVideoInfo(null);
+              setVideoIssues([]);
               setVideoOpts(createInitialVideoOpts(video));
             },
             children: "Cancelar"
@@ -822,10 +962,13 @@ function VideoUploader({
         /* @__PURE__ */ jsx(
           "button",
           {
-            className: "flex-1 inline-flex items-center justify-center gap-1.5 text-sm font-bold py-2.5 px-4 rounded-xl border-transparent bg-indigo-500 text-white cursor-pointer hover:opacity-90",
+            disabled: videoIssues.length > 0 || analyzing,
+            className: "flex-1 inline-flex items-center justify-center gap-1.5 text-sm font-bold py-2.5 px-4 rounded-xl border-transparent bg-indigo-500 text-white cursor-pointer hover:opacity-90 disabled:opacity-40 disabled:cursor-not-allowed",
             onClick: () => {
               const f = stagedFile;
               setStagedFile(null);
+              setVideoInfo(null);
+              setVideoIssues([]);
               void doUpload(f, videoOpts);
               setVideoOpts(createInitialVideoOpts(video));
             },
@@ -1565,7 +1708,12 @@ function Video({
     const best = sorted.find((e) => e.px >= targetPx) ?? sorted[sorted.length - 1];
     setPoster(best.url);
   }, [parsed.thumbnailUrls, parsed.thumbnailSrc, playerWidth]);
-  const activeSource = parsed.sources[sourceIndex] ?? parsed.sources[0] ?? null;
+  const rawActiveSource = parsed.sources[sourceIndex] ?? parsed.sources[0] ?? null;
+  const activeSourceRef = useRef(null);
+  if (rawActiveSource?.src !== activeSourceRef.current?.src || rawActiveSource?.type !== activeSourceRef.current?.type) {
+    activeSourceRef.current = rawActiveSource;
+  }
+  const activeSource = activeSourceRef.current;
   const progressPercent = duration ? currentTime / duration * 100 : 0;
   const bufferedPercent = duration ? bufferedTime / duration * 100 : 0;
   const destroyMediaEngines = useCallback(() => {
@@ -1813,7 +1961,9 @@ function Video({
         }, 60 * 1e3);
       }
     };
-    const onWaiting = () => setIsLoading(true);
+    const onWaiting = () => {
+      if (video.played.length > 0) setIsLoading(true);
+    };
     const onCanPlay = () => setIsLoading(false);
     const onEnded = () => setControlsVisible(true);
     video.addEventListener("timeupdate", syncTime);
@@ -2098,6 +2248,7 @@ function Video({
           const HlsModule = await import('hls.js');
           if (cancelled) return;
           const Hls = HlsModule.default;
+          console.debug("[Silo/hls] Hls.isSupported()=", Hls.isSupported());
           if (Hls.isSupported()) {
             const hls = new Hls({
               enableWorker: true,
@@ -2106,10 +2257,12 @@ function Video({
               maxBufferSize: 20 * 1e3 * 1e3
             });
             hlsRef.current = hls;
+            console.debug("[Silo/hls] loadSource", activeSource.src);
             hls.loadSource(activeSource.src);
             hls.attachMedia(video);
             hls.on(Hls.Events.MANIFEST_PARSED, (_, data) => {
               const levels = data.levels ?? hls.levels ?? [];
+              console.debug("[Silo/hls] MANIFEST_PARSED levels=", levels.length, "audioTracks=", hls.audioTracks?.length ?? 0);
               setQualities([
                 AUTO_QUALITY,
                 ...levels.map((level, index) => ({
@@ -2120,6 +2273,7 @@ function Video({
                 }))
               ]);
               const tracks = hls.audioTracks ?? [];
+              console.debug("[Silo/hls] audio tracks:", tracks.map((t) => ({ name: t.name, lang: t.lang, url: t.url })));
               if (tracks.length > 1) {
                 setAudioTracks(
                   tracks.map((t, i) => ({
@@ -2133,6 +2287,7 @@ function Video({
             });
             hls.on(Hls.Events.AUDIO_TRACKS_UPDATED, (_, data) => {
               const tracks = data.audioTracks ?? [];
+              console.debug("[Silo/hls] AUDIO_TRACKS_UPDATED", tracks.length);
               if (tracks.length > 1) {
                 setAudioTracks(
                   tracks.map((t, i) => ({
@@ -2142,18 +2297,49 @@ function Video({
                 );
               }
             });
+            hls.on(Hls.Events.LEVEL_LOADED, (_, data) => {
+              console.debug("[Silo/hls] LEVEL_LOADED level=", data.level, "fragments=", data.details?.fragments?.length);
+            });
+            hls.on(Hls.Events.AUDIO_TRACK_LOADED, (_, data) => {
+              console.debug("[Silo/hls] AUDIO_TRACK_LOADED track=", data.id, "fragments=", data.details?.fragments?.length);
+            });
+            hls.on(Hls.Events.FRAG_LOADING, (_, data) => {
+              console.debug("[Silo/hls] FRAG_LOADING", data.frag?.type, data.frag?.url?.slice(-60));
+            });
+            hls.on(Hls.Events.FRAG_LOADED, (_, data) => {
+              console.debug("[Silo/hls] FRAG_LOADED", data.frag?.type, data.frag?.sn);
+            });
+            let mediaErrorAttempts = 0;
             hls.on(Hls.Events.ERROR, (_, data) => {
+              const fragUrl = (data.frag?.url ?? data.url ?? "").slice(-80);
+              const fragType = data.frag?.type ?? "?";
+              console.debug("[Silo/hls] ERROR fatal=", data.fatal, "type=", data.type, "details=", data.details, "fragType=", fragType, "url=", fragUrl);
               if (!data.fatal) return;
-              if (data.type === Hls.ErrorTypes.MEDIA_ERROR) {
+              if (data.details === Hls.ErrorDetails.FRAG_PARSING_ERROR && fragType === "audio") {
+                console.warn("[Silo/hls] audio frag parse failed \u2014 disabling separate audio tracks and retrying");
+                setAudioTracks([]);
+                hls.recoverMediaError();
+                return;
+              }
+              if (data.type === Hls.ErrorTypes.MEDIA_ERROR && mediaErrorAttempts < 2) {
+                mediaErrorAttempts += 1;
+                console.debug("[Silo/hls] recoverMediaError attempt", mediaErrorAttempts);
                 hls.recoverMediaError();
                 return;
               }
-              console.error("[Silo] HLS playback failed");
+              console.error("[Silo] HLS playback failed", data.details, "fragType=", fragType, "url=", fragUrl);
+              hls.destroy();
+              hlsRef.current = null;
               setIsLoading(false);
             });
+            video.addEventListener("waiting", () => console.debug("[Silo/hls] video:waiting readyState=", video.readyState, "played=", video.played.length));
+            video.addEventListener("canplay", () => console.debug("[Silo/hls] video:canplay readyState=", video.readyState));
+            video.addEventListener("stalled", () => console.debug("[Silo/hls] video:stalled"));
+            video.addEventListener("suspend", () => console.debug("[Silo/hls] video:suspend"));
             return;
           }
           if (video.canPlayType("application/vnd.apple.mpegurl")) {
+            console.debug("[Silo/hls] using native HLS (Safari)");
             video.src = activeSource.src;
             video.load();
             setIsLoading(false);