@klikeai/cut-preview 1.0.0 → 1.0.1

package/dist/index.js

@@ -184,11 +184,23 @@ var resolveCutTransition = (theme, explicitType, explicitMs) => {
 };
 
 // ../src/layers/VideoBase.tsx
-import { AbsoluteFill, OffthreadVideo } from "remotion";
+import { AbsoluteFill } from "remotion";
+
+// ../src/layers/SmartVideo.tsx
+import { getRemotionEnvironment, OffthreadVideo, Video } from "remotion";
 import { jsx } from "react/jsx-runtime";
+var SmartVideo = (props) => {
+  if (getRemotionEnvironment().isRendering) {
+    return /* @__PURE__ */ jsx(OffthreadVideo, { ...props });
+  }
+  return /* @__PURE__ */ jsx(Video, { ...props });
+};
+
+// ../src/layers/VideoBase.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
 var VideoBase = ({ source, fit = "cover" }) => {
-  return /* @__PURE__ */ jsx(AbsoluteFill, { children: /* @__PURE__ */ jsx(
-    OffthreadVideo,
+  return /* @__PURE__ */ jsx2(AbsoluteFill, { children: /* @__PURE__ */ jsx2(
+    SmartVideo,
     {
       src: source.videoPath,
       style: { width: "100%", height: "100%", objectFit: fit }
@@ -197,15 +209,15 @@ var VideoBase = ({ source, fit = "cover" }) => {
 };
 
 // ../src/layers/ReframeContainer.tsx
-import { AbsoluteFill as AbsoluteFill2, OffthreadVideo as OffthreadVideo2 } from "remotion";
-import { Fragment, jsx as jsx2, jsxs } from "react/jsx-runtime";
+import { AbsoluteFill as AbsoluteFill2 } from "remotion";
+import { Fragment, jsx as jsx3, jsxs } from "react/jsx-runtime";
 var ReframeContainer = ({ reframe, source, children }) => {
   if (!reframe.enabled) {
-    return /* @__PURE__ */ jsx2(Fragment, { children });
+    return /* @__PURE__ */ jsx3(Fragment, { children });
   }
   return /* @__PURE__ */ jsxs(AbsoluteFill2, { children: [
-    /* @__PURE__ */ jsx2(AbsoluteFill2, { children: /* @__PURE__ */ jsx2(
-      OffthreadVideo2,
+    /* @__PURE__ */ jsx3(AbsoluteFill2, { children: /* @__PURE__ */ jsx3(
+      SmartVideo,
       {
         src: source.videoPath,
         muted: true,
@@ -218,7 +230,7 @@ var ReframeContainer = ({ reframe, source, children }) => {
         }
       }
     ) }),
-    /* @__PURE__ */ jsx2(
+    /* @__PURE__ */ jsx3(
       AbsoluteFill2,
       {
         style: { alignItems: "center", justifyContent: "center" },
@@ -229,12 +241,7 @@ var ReframeContainer = ({ reframe, source, children }) => {
 };
 
 // ../src/layers/CutsSequencer.tsx
-import {
-  AbsoluteFill as AbsoluteFill3,
-  interpolate as interpolate2,
-  OffthreadVideo as OffthreadVideo3,
-  useVideoConfig
-} from "remotion";
+import { AbsoluteFill as AbsoluteFill3, interpolate as interpolate2, useVideoConfig } from "remotion";
 import {
   linearTiming,
   TransitionSeries
@@ -296,7 +303,7 @@ var textOutline = (color, px = 3) => {
 };
 
 // ../src/layers/CutsSequencer.tsx
-import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
 var presentationFor = (type) => {
   if (type === "wipe") return wipe();
   if (type === "slide") return slide();
@@ -328,8 +335,8 @@ var SegmentVideo = ({
     }
     return v;
   };
-  const fg = /* @__PURE__ */ jsx3(
-    OffthreadVideo3,
+  const fg = /* @__PURE__ */ jsx4(
+    SmartVideo,
     {
       src: source.videoPath,
       startFrom: startFromFrames,
@@ -342,11 +349,11 @@ var SegmentVideo = ({
     }
   );
   if (!reframe.enabled) {
-    return /* @__PURE__ */ jsx3(AbsoluteFill3, { children: fg });
+    return /* @__PURE__ */ jsx4(AbsoluteFill3, { children: fg });
   }
   return /* @__PURE__ */ jsxs2(AbsoluteFill3, { children: [
-    /* @__PURE__ */ jsx3(AbsoluteFill3, { children: /* @__PURE__ */ jsx3(
-      OffthreadVideo3,
+    /* @__PURE__ */ jsx4(AbsoluteFill3, { children: /* @__PURE__ */ jsx4(
+      SmartVideo,
       {
         src: source.videoPath,
         startFrom: startFromFrames,
@@ -360,7 +367,7 @@ var SegmentVideo = ({
         }
       }
     ) }),
-    /* @__PURE__ */ jsx3(AbsoluteFill3, { style: { alignItems: "center", justifyContent: "center" }, children: fg })
+    /* @__PURE__ */ jsx4(AbsoluteFill3, { style: { alignItems: "center", justifyContent: "center" }, children: fg })
   ] });
 };
 var CutsSequencer = ({ source, cuts, reframe, transition }) => {
@@ -379,11 +386,11 @@ var CutsSequencer = ({ source, cuts, reframe, transition }) => {
     const fadeInF = i > 0 ? transF : 0;
     const fadeOutF = i < segments.length - 1 ? transF : 0;
     children.push(
-      /* @__PURE__ */ jsx3(
+      /* @__PURE__ */ jsx4(
         TransitionSeries.Sequence,
         {
           durationInFrames,
-          children: /* @__PURE__ */ jsx3(
+          children: /* @__PURE__ */ jsx4(
             SegmentVideo,
             {
               source,
@@ -400,7 +407,7 @@ var CutsSequencer = ({ source, cuts, reframe, transition }) => {
     );
     if (useTransition && i < segments.length - 1) {
       children.push(
-        /* @__PURE__ */ jsx3(
+        /* @__PURE__ */ jsx4(
           TransitionSeries.Transition,
           {
             presentation: presentationFor(transition.type),
@@ -411,12 +418,12 @@ var CutsSequencer = ({ source, cuts, reframe, transition }) => {
       );
     }
   });
-  return /* @__PURE__ */ jsx3(TransitionSeries, { children });
+  return /* @__PURE__ */ jsx4(TransitionSeries, { children });
 };
 
 // ../src/layers/ZoomLayer.tsx
 import { AbsoluteFill as AbsoluteFill4, spring as spring2, useCurrentFrame } from "remotion";
-import { Fragment as Fragment2, jsx as jsx4 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx5 } from "react/jsx-runtime";
 var momentScaleBoost = (frame, fps, moment) => {
   const startF = msToFrames(moment.startMs, fps);
   const endF = msToFrames(moment.endMs, fps);
@@ -438,7 +445,7 @@ var momentScaleBoost = (frame, fps, moment) => {
 var ZoomLayer = ({ zoom, fps, children }) => {
   const frame = useCurrentFrame();
   if (!zoom.enabled) {
-    return /* @__PURE__ */ jsx4(Fragment2, { children });
+    return /* @__PURE__ */ jsx5(Fragment2, { children });
   }
   const moments = zoom.moments?.length ? zoom.moments : [{ startMs: zoom.startMs, endMs: zoom.endMs, factor: zoom.factor }];
   let scale = 1;
@@ -456,7 +463,7 @@ var ZoomLayer = ({ zoom, fps, children }) => {
       }
     }
   }
-  return /* @__PURE__ */ jsx4(AbsoluteFill4, { style: { transform: `scale(${scale})` }, children });
+  return /* @__PURE__ */ jsx5(AbsoluteFill4, { style: { transform: `scale(${scale})` }, children });
 };
 
 // ../src/layers/CaptionsLayer.tsx
@@ -505,7 +512,7 @@ function resolveFontFamily(name) {
 var AVAILABLE_FONTS = Object.keys(FONTS).filter((k) => FONTS[k]);
 
 // ../src/layers/CaptionsLayer.tsx
-import { Fragment as Fragment3, jsx as jsx5 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx6 } from "react/jsx-runtime";
 var glowShadow = (color, scale = 1) => `0 0 ${8 * scale}px ${color}, 0 0 ${18 * scale}px ${color}, 0 0 ${36 * scale}px ${color}66`;
 var Page = ({ page, style, displayMode, safeZones }) => {
   const frame = useCurrentFrame2();
@@ -543,7 +550,7 @@ var Page = ({ page, style, displayMode, safeZones }) => {
       scale = springScale(frame - tokenStartFrame, fps, style.activeScale);
     }
     const boxed = template === "box" && highlight;
-    return /* @__PURE__ */ jsx5(
+    return /* @__PURE__ */ jsx6(
       "span",
       {
         style: {
@@ -565,7 +572,7 @@ var Page = ({ page, style, displayMode, safeZones }) => {
     );
   };
   const position = style.position;
-  return /* @__PURE__ */ jsx5(
+  return /* @__PURE__ */ jsx6(
     AbsoluteFill5,
     {
       style: {
@@ -576,7 +583,7 @@ var Page = ({ page, style, displayMode, safeZones }) => {
         paddingLeft: width * safeZones.marginSidePercent,
         paddingRight: width * safeZones.marginSidePercent
       },
-      children: /* @__PURE__ */ jsx5(
+      children: /* @__PURE__ */ jsx6(
         "div",
         {
           style: {
@@ -628,16 +635,16 @@ var CaptionsLayer = ({ captions, style, displayMode, combineTokensWithinMs, safe
       combineTokensWithinMilliseconds: combineTokensWithinMs
     }).pages;
   });
-  return /* @__PURE__ */ jsx5(Fragment3, { children: pages.map((page, i) => {
+  return /* @__PURE__ */ jsx6(Fragment3, { children: pages.map((page, i) => {
     const from = msToFrames(page.startMs, fps);
     const durationInFrames = Math.max(1, msToFrames(page.durationMs, fps));
-    return /* @__PURE__ */ jsx5(
+    return /* @__PURE__ */ jsx6(
       Sequence,
       {
         from,
         durationInFrames,
         name: `caption-page-${i}`,
-        children: /* @__PURE__ */ jsx5(
+        children: /* @__PURE__ */ jsx6(
           Page,
           {
             page,
@@ -662,7 +669,7 @@ import {
   useVideoConfig as useVideoConfig3
 } from "remotion";
 import { fitText } from "@remotion/layout-utils";
-import { Fragment as Fragment4, jsx as jsx6 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx7 } from "react/jsx-runtime";
 var DEFAULT_FADE_MS = 300;
 var DEFAULT_FONT_SIZE = 72;
 var DEFAULT_COLOR = "#FFFFFF";
@@ -746,7 +753,7 @@ var OverlayText = ({ item, durationInFrames, fps, safeZones, captionsPosition })
   const overlayPos = item.position ?? "center";
   const bottomClearance = safeZones.marginBottomPercent + (captionsPosition === "bottom" && overlayPos === "bottom" ? CAPTION_BAND_PCT : 0);
   const topClearance = safeZones.marginTopPercent + (captionsPosition === "top" && overlayPos === "top" ? CAPTION_BAND_PCT : 0);
-  return /* @__PURE__ */ jsx6(
+  return /* @__PURE__ */ jsx7(
     AbsoluteFill6,
     {
       style: {
@@ -757,7 +764,7 @@ var OverlayText = ({ item, durationInFrames, fps, safeZones, captionsPosition })
         paddingLeft: width * safeZones.marginSidePercent,
         paddingRight: width * safeZones.marginSidePercent
       },
-      children: /* @__PURE__ */ jsx6(
+      children: /* @__PURE__ */ jsx7(
         "div",
         {
           style: {
@@ -781,19 +788,19 @@ var OverlayText = ({ item, durationInFrames, fps, safeZones, captionsPosition })
 };
 var OverlayLayer = ({ overlays, safeZones, fps, captionsPosition = null }) => {
   if (!overlays || overlays.length === 0) return null;
-  return /* @__PURE__ */ jsx6(Fragment4, { children: overlays.map((item, i) => {
+  return /* @__PURE__ */ jsx7(Fragment4, { children: overlays.map((item, i) => {
     const from = msToFrames(item.startMs, fps);
     const durationInFrames = Math.max(
       1,
       msToFrames(item.endMs, fps) - from
     );
-    return /* @__PURE__ */ jsx6(
+    return /* @__PURE__ */ jsx7(
       Sequence2,
       {
         from,
         durationInFrames,
         name: `overlay-${i}`,
-        children: /* @__PURE__ */ jsx6(
+        children: /* @__PURE__ */ jsx7(
           OverlayText,
           {
             item,
@@ -818,7 +825,7 @@ import {
   useCurrentFrame as useCurrentFrame4,
   useVideoConfig as useVideoConfig4
 } from "remotion";
-import { Fragment as Fragment5, jsx as jsx7 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx8 } from "react/jsx-runtime";
 var FADE_MS = 300;
 var alignFor = (corner) => {
   const vertical = corner.startsWith("top") ? "flex-start" : corner.startsWith("bottom") ? "flex-end" : "center";
@@ -836,7 +843,7 @@ var ImageOverlay = ({ item, durationInFrames, fps, safeZones }) => {
     { extrapolateLeft: "clamp", extrapolateRight: "clamp" }
   ) * item.opacity;
   const { vertical, horizontal } = alignFor(item.corner);
-  return /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsx8(
     AbsoluteFill7,
     {
       style: {
@@ -847,7 +854,7 @@ var ImageOverlay = ({ item, durationInFrames, fps, safeZones }) => {
         paddingLeft: width * safeZones.marginSidePercent,
         paddingRight: width * safeZones.marginSidePercent
       },
-      children: /* @__PURE__ */ jsx7(
+      children: /* @__PURE__ */ jsx8(
         Img,
         {
           src: item.src,
@@ -865,19 +872,19 @@ var ImageOverlay = ({ item, durationInFrames, fps, safeZones }) => {
 };
 var ImageOverlayLayer = ({ imageOverlays, safeZones, fps }) => {
   if (!imageOverlays || imageOverlays.length === 0) return null;
-  return /* @__PURE__ */ jsx7(Fragment5, { children: imageOverlays.map((item, i) => {
+  return /* @__PURE__ */ jsx8(Fragment5, { children: imageOverlays.map((item, i) => {
     const from = msToFrames(item.startMs, fps);
     const durationInFrames = Math.max(
       1,
       msToFrames(item.endMs, fps) - from
     );
-    return /* @__PURE__ */ jsx7(
+    return /* @__PURE__ */ jsx8(
       Sequence3,
       {
         from,
         durationInFrames,
         name: `image-overlay-${i}`,
-        children: /* @__PURE__ */ jsx7(
+        children: /* @__PURE__ */ jsx8(
           ImageOverlay,
           {
             item,
@@ -894,14 +901,14 @@ var ImageOverlayLayer = ({ imageOverlays, safeZones, fps }) => {
 
 // ../src/layers/ProgressBarLayer.tsx
 import { useCurrentFrame as useCurrentFrame5, useVideoConfig as useVideoConfig5 } from "remotion";
-import { jsx as jsx8 } from "react/jsx-runtime";
+import { jsx as jsx9 } from "react/jsx-runtime";
 var ProgressBarLayer = ({ progressBar, sourceDurationInSeconds, fps }) => {
   const frame = useCurrentFrame5();
   const { width, height } = useVideoConfig5();
   if (!progressBar.enabled || sourceDurationInSeconds <= 0) return null;
   const totalFrames = Math.max(1, Math.round(sourceDurationInSeconds * fps));
   const progress = Math.min(1, frame / totalFrames);
-  return /* @__PURE__ */ jsx8(
+  return /* @__PURE__ */ jsx9(
     "div",
     {
       style: {
@@ -928,7 +935,7 @@ import {
   useCurrentFrame as useCurrentFrame6,
   useVideoConfig as useVideoConfig6
 } from "remotion";
-import { jsx as jsx9, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx10, jsxs as jsxs3 } from "react/jsx-runtime";
 var DEFAULT_GRADIENT_ANGLE_DEG = 160;
 var DEFAULT_LOGO_HEIGHT_PX = 140;
 var backgroundStyle = (endcard) => {
@@ -973,7 +980,7 @@ var EndcardCard = ({
         padding: "8%"
       },
       children: [
-        endcard.logoUrl ? /* @__PURE__ */ jsx9(
+        endcard.logoUrl ? /* @__PURE__ */ jsx10(
           Img2,
           {
             src: endcard.logoUrl,
@@ -986,7 +993,7 @@ var EndcardCard = ({
             }
           }
         ) : null,
-        /* @__PURE__ */ jsx9(
+        /* @__PURE__ */ jsx10(
           "div",
           {
             style: {
@@ -1012,11 +1019,11 @@ var EndcardSequence = ({ endcard, sourceDurationInSeconds, fps }) => {
   if (!endcard.enabled || !endcard.text) return null;
   const from = Math.round(sourceDurationInSeconds * fps);
   const durationInFrames = Math.max(1, msToFrames(endcard.durationMs, fps));
-  return /* @__PURE__ */ jsx9(Sequence4, { from, durationInFrames, name: "endcard", children: /* @__PURE__ */ jsx9(EndcardCard, { endcard, fps }) });
+  return /* @__PURE__ */ jsx10(Sequence4, { from, durationInFrames, name: "endcard", children: /* @__PURE__ */ jsx10(EndcardCard, { endcard, fps }) });
 };
 
 // ../src/SmartStudioComposition.tsx
-import { jsx as jsx10, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx11, jsxs as jsxs4 } from "react/jsx-runtime";
 var SmartStudioComposition = (props) => {
   const { source, output, captions, overlays, endcard, safeZones, reframe, zoom, cuts } = props;
   const theme = resolveTheme(props.stylePreset);
@@ -1033,11 +1040,11 @@ var SmartStudioComposition = (props) => {
   );
   const videoFilter = props.colorGrade ? gradeFilter(props.colorGrade.preset, props.colorGrade.intensity) : "none";
   return /* @__PURE__ */ jsxs4(AbsoluteFill9, { style: { backgroundColor: "#000000" }, children: [
-    /* @__PURE__ */ jsx10(AbsoluteFill9, { style: videoFilter !== "none" ? { filter: videoFilter } : void 0, children: cuts.enabled ? (
+    /* @__PURE__ */ jsx11(AbsoluteFill9, { style: videoFilter !== "none" ? { filter: videoFilter } : void 0, children: cuts.enabled ? (
       // Cortes DENTRO da composição: CutsSequencer é reframe-aware por
       // segmento; o ZoomLayer envolve tudo (janelas já remapeadas p/ a
       // timeline pós-corte pelo Python).
-      /* @__PURE__ */ jsx10(ZoomLayer, { zoom, fps: output.fps, children: /* @__PURE__ */ jsx10(
+      /* @__PURE__ */ jsx11(ZoomLayer, { zoom, fps: output.fps, children: /* @__PURE__ */ jsx11(
         CutsSequencer,
         {
           source,
@@ -1046,14 +1053,14 @@ var SmartStudioComposition = (props) => {
           transition: cutTransition
         }
       ) })
-    ) : /* @__PURE__ */ jsx10(ReframeContainer, { reframe, output, source, children: /* @__PURE__ */ jsx10(ZoomLayer, { zoom, fps: output.fps, children: /* @__PURE__ */ jsx10(
+    ) : /* @__PURE__ */ jsx11(ReframeContainer, { reframe, output, source, children: /* @__PURE__ */ jsx11(ZoomLayer, { zoom, fps: output.fps, children: /* @__PURE__ */ jsx11(
       VideoBase,
       {
         source,
         fit: reframe.enabled ? "contain" : "cover"
       }
     ) }) }) }),
-    /* @__PURE__ */ jsx10(
+    /* @__PURE__ */ jsx11(
       CaptionsLayer,
       {
         captions,
@@ -1064,7 +1071,7 @@ var SmartStudioComposition = (props) => {
         fps: output.fps
       }
     ),
-    /* @__PURE__ */ jsx10(
+    /* @__PURE__ */ jsx11(
       OverlayLayer,
       {
         overlays: themedOverlays,
@@ -1073,7 +1080,7 @@ var SmartStudioComposition = (props) => {
         captionsPosition: captions.enabled && captions.tokens.length > 0 ? captionStyle.position : null
       }
     ),
-    /* @__PURE__ */ jsx10(
+    /* @__PURE__ */ jsx11(
       ImageOverlayLayer,
       {
         imageOverlays: props.imageOverlays,
@@ -1081,7 +1088,7 @@ var SmartStudioComposition = (props) => {
         fps: output.fps
       }
     ),
-    /* @__PURE__ */ jsx10(
+    /* @__PURE__ */ jsx11(
       ProgressBarLayer,
       {
         progressBar,
@@ -1089,7 +1096,7 @@ var SmartStudioComposition = (props) => {
         fps: output.fps
       }
     ),
-    /* @__PURE__ */ jsx10(
+    /* @__PURE__ */ jsx11(
       EndcardSequence,
       {
         endcard: themedEndcard,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@klikeai/cut-preview",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "SmartStudioComposition + calculateMetadata do Klike Cut para o preview ao vivo (Remotion Player).",
   "type": "module",
   "main": "./dist/index.js",