ugcinc-render 1.8.70 → 1.8.71

package/dist/index.js

@@ -2818,7 +2818,7 @@ function ScreenshotAnimation({
 
 // src/compositions/InstagramDmComposition/index.tsx
 var import_react8 = require("react");
-var import_remotion8 = require("remotion");
+var import_remotion9 = require("remotion");
 
 // src/compositions/InstagramDmComposition/theme.ts
 var IG_THEME_COLORS = {
@@ -3075,6 +3075,7 @@ function DebugOverlay({
 }
 
 // src/compositions/InstagramDmComposition/components/IgMessageFooter.tsx
+var import_remotion8 = require("remotion");
 var import_jsx_runtime10 = require("react/jsx-runtime");
 var FOOTER_TOP = 2363;
 var FOOTER_BOTTOM = 2496;
@@ -3084,21 +3085,64 @@ var FOOTER_HEIGHT = FOOTER_BOTTOM - FOOTER_TOP;
 var FOOTER_WIDTH = FOOTER_RIGHT - FOOTER_LEFT;
 var FOOTER_BORDER_RADIUS = FOOTER_HEIGHT / 2;
 var FOOTER_BG_COLOR = "#0a0a0a";
+var CAMERA_BTN_LEFT = 39;
+var CAMERA_BTN_RIGHT = 141;
+var CAMERA_BTN_TOP = 2379;
+var CAMERA_BTN_BOTTOM = 2481;
+var CAMERA_BTN_WIDTH = CAMERA_BTN_RIGHT - CAMERA_BTN_LEFT;
+var CAMERA_BTN_HEIGHT = CAMERA_BTN_BOTTOM - CAMERA_BTN_TOP;
+var CAMERA_BTN_RADIUS = CAMERA_BTN_WIDTH / 2;
+var CAMERA_BTN_BG_COLOR = "#5354fc";
+var CAMERA_ICON_LEFT = 62;
+var CAMERA_ICON_RIGHT = 118;
+var CAMERA_ICON_TOP = 2400;
+var CAMERA_ICON_BOTTOM = 2454;
+var CAMERA_ICON_WIDTH = CAMERA_ICON_RIGHT - CAMERA_ICON_LEFT;
+var CAMERA_ICON_HEIGHT = CAMERA_ICON_BOTTOM - CAMERA_ICON_TOP;
 function IgMessageFooter({ theme }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-    "div",
-    {
-      style: {
-        position: "absolute",
-        top: FOOTER_TOP,
-        left: FOOTER_LEFT,
-        width: FOOTER_WIDTH,
-        height: FOOTER_HEIGHT,
-        backgroundColor: FOOTER_BG_COLOR,
-        borderRadius: FOOTER_BORDER_RADIUS
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+      "div",
+      {
+        style: {
+          position: "absolute",
+          top: FOOTER_TOP,
+          left: FOOTER_LEFT,
+          width: FOOTER_WIDTH,
+          height: FOOTER_HEIGHT,
+          backgroundColor: FOOTER_BG_COLOR,
+          borderRadius: FOOTER_BORDER_RADIUS
+        }
       }
-    }
-  );
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+      "div",
+      {
+        style: {
+          position: "absolute",
+          top: CAMERA_BTN_TOP,
+          left: CAMERA_BTN_LEFT,
+          width: CAMERA_BTN_WIDTH,
+          height: CAMERA_BTN_HEIGHT,
+          backgroundColor: CAMERA_BTN_BG_COLOR,
+          borderRadius: CAMERA_BTN_RADIUS
+        }
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+      import_remotion8.Img,
+      {
+        src: (0, import_remotion8.staticFile)("ig-camera.png"),
+        style: {
+          position: "absolute",
+          top: CAMERA_ICON_TOP,
+          left: CAMERA_ICON_LEFT,
+          width: CAMERA_ICON_WIDTH,
+          height: CAMERA_ICON_HEIGHT
+        }
+      }
+    )
+  ] });
 }
 
 // src/compositions/InstagramDmComposition/index.tsx
@@ -3155,18 +3199,18 @@ function InstagramDmComposition({
     };
   }, []);
   (0, import_react8.useEffect)(() => {
-    const handle = (0, import_remotion8.delayRender)("Loading fonts...");
+    const handle = (0, import_remotion9.delayRender)("Loading fonts...");
     preloadFonts().then(() => {
       setFontsLoaded(true);
-      (0, import_remotion8.continueRender)(handle);
+      (0, import_remotion9.continueRender)(handle);
     }).catch((err) => {
       console.error("Failed to load fonts:", err);
       setFontsLoaded(true);
-      (0, import_remotion8.continueRender)(handle);
+      (0, import_remotion9.continueRender)(handle);
     });
   }, []);
   if (!fontsLoaded) {
-    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_remotion8.AbsoluteFill, {});
+    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_remotion9.AbsoluteFill, {});
   }
   const colors = getThemeColors(theme);
   const zoomScale = zoom / 100;
@@ -3186,7 +3230,7 @@ function InstagramDmComposition({
           opacity: showDebugOverlay ? 1 : clampedReferenceOpacity / 100
         },
         children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-          import_remotion8.Img,
+          import_remotion9.Img,
           {
             src: referenceImageUrl,
             style: {
@@ -3200,7 +3244,7 @@ function InstagramDmComposition({
     )
   ] });
   return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
-    import_remotion8.AbsoluteFill,
+    import_remotion9.AbsoluteFill,
     {
       style: {
         backgroundColor: colors.background,
@@ -3394,7 +3438,7 @@ function MessageBubble({
 }
 
 // src/compositions/messaging/components/ProfilePic.tsx
-var import_remotion9 = require("remotion");
+var import_remotion10 = require("remotion");
 var import_jsx_runtime13 = require("react/jsx-runtime");
 function ProfilePic({
   src,
@@ -3429,7 +3473,7 @@ function ProfilePic({
               boxSizing: "border-box"
             },
             children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-              import_remotion9.Img,
+              import_remotion10.Img,
               {
                 src,
                 style: {
@@ -3494,7 +3538,7 @@ function Reaction({
 }
 
 // src/compositions/messaging/components/TypingIndicator.tsx
-var import_remotion10 = require("remotion");
+var import_remotion11 = require("remotion");
 var import_jsx_runtime15 = require("react/jsx-runtime");
 function gradientToCss2(color) {
   if (color.type === "solid") {
@@ -3524,7 +3568,7 @@ function TypingIndicator({
   paddingH,
   paddingV
 }) {
-  const frame = (0, import_remotion10.useCurrentFrame)();
+  const frame = (0, import_remotion11.useCurrentFrame)();
   const dot1Y = calculateDotBounce(frame, 0);
   const dot2Y = calculateDotBounce(frame, 1);
   const dot3Y = calculateDotBounce(frame, 2);
@@ -3579,7 +3623,7 @@ function TypingIndicator({
 }
 
 // src/compositions/messaging/components/MediaBubble.tsx
-var import_remotion11 = require("remotion");
+var import_remotion12 = require("remotion");
 var import_jsx_runtime16 = require("react/jsx-runtime");
 function MediaBubble({
   src,
@@ -3602,7 +3646,7 @@ function MediaBubble({
         boxSizing: "border-box"
       },
       children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-        import_remotion11.Img,
+        import_remotion12.Img,
         {
           src,
           style: {
@@ -3984,7 +4028,7 @@ function useResolvedPositions(elements, textValues) {
 }
 
 // src/Root.tsx
-var import_remotion12 = require("remotion");
+var import_remotion13 = require("remotion");
 var import_zod = require("zod");
 var import_jsx_runtime17 = require("react/jsx-runtime");
 var defaultImageProps = {
@@ -4236,7 +4280,7 @@ var calculateImageMetadata = async ({ props }) => {
 var RenderRoot = () => {
   return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_jsx_runtime17.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
-      import_remotion12.Composition,
+      import_remotion13.Composition,
       {
         id: "ImageEditorComposition",
         component: ImageComp,
@@ -4249,7 +4293,7 @@ var RenderRoot = () => {
       }
     ),
     /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
-      import_remotion12.Composition,
+      import_remotion13.Composition,
       {
         id: "VideoEditorComposition",
         component: VideoComp,
@@ -4261,7 +4305,7 @@ var RenderRoot = () => {
       }
     ),
     /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
-      import_remotion12.Composition,
+      import_remotion13.Composition,
       {
         id: "AutoCaptionComposition",
         component: AutoCaptionComp,
@@ -4273,7 +4317,7 @@ var RenderRoot = () => {
       }
     ),
     /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
-      import_remotion12.Composition,
+      import_remotion13.Composition,
       {
         id: "ScreenshotAnimationComposition",
         component: ScreenshotAnimationComp,
@@ -4286,7 +4330,7 @@ var RenderRoot = () => {
       }
     ),
     /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
-      import_remotion12.Composition,
+      import_remotion13.Composition,
       {
         id: "InstagramDmComposition",
         component: InstagramDmComp,

package/dist/index.mjs

@@ -1926,7 +1926,7 @@ function ScreenshotAnimation({
 
 // src/compositions/InstagramDmComposition/index.tsx
 import { useCallback as useCallback2, useEffect as useEffect2, useState as useState3 } from "react";
-import { AbsoluteFill as AbsoluteFill5, Img as Img4, continueRender as continueRender2, delayRender as delayRender2 } from "remotion";
+import { AbsoluteFill as AbsoluteFill5, Img as Img5, continueRender as continueRender2, delayRender as delayRender2 } from "remotion";
 
 // src/compositions/InstagramDmComposition/theme.ts
 var IG_THEME_COLORS = {
@@ -2183,7 +2183,8 @@ function DebugOverlay({
 }
 
 // src/compositions/InstagramDmComposition/components/IgMessageFooter.tsx
-import { jsx as jsx10 } from "react/jsx-runtime";
+import { Img as Img4, staticFile } from "remotion";
+import { Fragment as Fragment2, jsx as jsx10, jsxs as jsxs8 } from "react/jsx-runtime";
 var FOOTER_TOP = 2363;
 var FOOTER_BOTTOM = 2496;
 var FOOTER_LEFT = 24;
@@ -2192,25 +2193,68 @@ var FOOTER_HEIGHT = FOOTER_BOTTOM - FOOTER_TOP;
 var FOOTER_WIDTH = FOOTER_RIGHT - FOOTER_LEFT;
 var FOOTER_BORDER_RADIUS = FOOTER_HEIGHT / 2;
 var FOOTER_BG_COLOR = "#0a0a0a";
+var CAMERA_BTN_LEFT = 39;
+var CAMERA_BTN_RIGHT = 141;
+var CAMERA_BTN_TOP = 2379;
+var CAMERA_BTN_BOTTOM = 2481;
+var CAMERA_BTN_WIDTH = CAMERA_BTN_RIGHT - CAMERA_BTN_LEFT;
+var CAMERA_BTN_HEIGHT = CAMERA_BTN_BOTTOM - CAMERA_BTN_TOP;
+var CAMERA_BTN_RADIUS = CAMERA_BTN_WIDTH / 2;
+var CAMERA_BTN_BG_COLOR = "#5354fc";
+var CAMERA_ICON_LEFT = 62;
+var CAMERA_ICON_RIGHT = 118;
+var CAMERA_ICON_TOP = 2400;
+var CAMERA_ICON_BOTTOM = 2454;
+var CAMERA_ICON_WIDTH = CAMERA_ICON_RIGHT - CAMERA_ICON_LEFT;
+var CAMERA_ICON_HEIGHT = CAMERA_ICON_BOTTOM - CAMERA_ICON_TOP;
 function IgMessageFooter({ theme }) {
-  return /* @__PURE__ */ jsx10(
-    "div",
-    {
-      style: {
-        position: "absolute",
-        top: FOOTER_TOP,
-        left: FOOTER_LEFT,
-        width: FOOTER_WIDTH,
-        height: FOOTER_HEIGHT,
-        backgroundColor: FOOTER_BG_COLOR,
-        borderRadius: FOOTER_BORDER_RADIUS
+  return /* @__PURE__ */ jsxs8(Fragment2, { children: [
+    /* @__PURE__ */ jsx10(
+      "div",
+      {
+        style: {
+          position: "absolute",
+          top: FOOTER_TOP,
+          left: FOOTER_LEFT,
+          width: FOOTER_WIDTH,
+          height: FOOTER_HEIGHT,
+          backgroundColor: FOOTER_BG_COLOR,
+          borderRadius: FOOTER_BORDER_RADIUS
+        }
       }
-    }
-  );
+    ),
+    /* @__PURE__ */ jsx10(
+      "div",
+      {
+        style: {
+          position: "absolute",
+          top: CAMERA_BTN_TOP,
+          left: CAMERA_BTN_LEFT,
+          width: CAMERA_BTN_WIDTH,
+          height: CAMERA_BTN_HEIGHT,
+          backgroundColor: CAMERA_BTN_BG_COLOR,
+          borderRadius: CAMERA_BTN_RADIUS
+        }
+      }
+    ),
+    /* @__PURE__ */ jsx10(
+      Img4,
+      {
+        src: staticFile("ig-camera.png"),
+        style: {
+          position: "absolute",
+          top: CAMERA_ICON_TOP,
+          left: CAMERA_ICON_LEFT,
+          width: CAMERA_ICON_WIDTH,
+          height: CAMERA_ICON_HEIGHT
+        }
+      }
+    )
+  ] });
 }
 
 // src/compositions/InstagramDmComposition/index.tsx
-import { Fragment as Fragment2, jsx as jsx11, jsxs as jsxs8 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx11, jsxs as jsxs9 } from "react/jsx-runtime";
 var defaultInstagramDmProps = {
   showDebugOverlay: true,
   referenceImageUrl: "https://n14dcpakf8w1fekl.public.blob.vercel-storage.com/media/8ff1462b-13d7-4abe-9325-0a6ad19004f0/IMG_3171-DmKgZAYCYJpLxiZjJBYYCk4mynmjkv.png",
@@ -2278,7 +2322,7 @@ function InstagramDmComposition({
   }
   const colors = getThemeColors(theme);
   const zoomScale = zoom / 100;
-  const renderContent = () => /* @__PURE__ */ jsxs8(Fragment2, { children: [
+  const renderContent = () => /* @__PURE__ */ jsxs9(Fragment3, { children: [
     /* @__PURE__ */ jsx11(IgMessageFooter, { theme }),
     referenceImageUrl && (showDebugOverlay ? referenceVisible : clampedReferenceOpacity > 0) && /* @__PURE__ */ jsx11(
       "div",
@@ -2294,7 +2338,7 @@ function InstagramDmComposition({
           opacity: showDebugOverlay ? 1 : clampedReferenceOpacity / 100
         },
         children: /* @__PURE__ */ jsx11(
-          Img4,
+          Img5,
           {
             src: referenceImageUrl,
             style: {
@@ -2307,7 +2351,7 @@ function InstagramDmComposition({
       }
     )
   ] });
-  return /* @__PURE__ */ jsxs8(
+  return /* @__PURE__ */ jsxs9(
     AbsoluteFill5,
     {
       style: {
@@ -2502,8 +2546,8 @@ function MessageBubble({
 }
 
 // src/compositions/messaging/components/ProfilePic.tsx
-import { Img as Img5 } from "remotion";
-import { jsx as jsx13, jsxs as jsxs9 } from "react/jsx-runtime";
+import { Img as Img6 } from "remotion";
+import { jsx as jsx13, jsxs as jsxs10 } from "react/jsx-runtime";
 function ProfilePic({
   src,
   size,
@@ -2515,7 +2559,7 @@ function ProfilePic({
 }) {
   const activeSize = size * activeIndicatorRatio;
   const activeBorderWidth = activeSize * 0.15;
-  return /* @__PURE__ */ jsxs9(
+  return /* @__PURE__ */ jsxs10(
     "div",
     {
       style: {
@@ -2537,7 +2581,7 @@ function ProfilePic({
               boxSizing: "border-box"
             },
             children: /* @__PURE__ */ jsx13(
-              Img5,
+              Img6,
               {
                 src,
                 style: {
@@ -2603,7 +2647,7 @@ function Reaction({
 
 // src/compositions/messaging/components/TypingIndicator.tsx
 import { useCurrentFrame as useCurrentFrame6 } from "remotion";
-import { jsx as jsx15, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx15, jsxs as jsxs11 } from "react/jsx-runtime";
 function gradientToCss2(color) {
   if (color.type === "solid") {
     return color.colors[0];
@@ -2642,7 +2686,7 @@ function TypingIndicator({
     borderRadius: "50%",
     backgroundColor: dotColor
   };
-  return /* @__PURE__ */ jsxs10(
+  return /* @__PURE__ */ jsxs11(
     "div",
     {
       style: {
@@ -2687,7 +2731,7 @@ function TypingIndicator({
 }
 
 // src/compositions/messaging/components/MediaBubble.tsx
-import { Img as Img6 } from "remotion";
+import { Img as Img7 } from "remotion";
 import { jsx as jsx16 } from "react/jsx-runtime";
 function MediaBubble({
   src,
@@ -2710,7 +2754,7 @@ function MediaBubble({
         boxSizing: "border-box"
       },
       children: /* @__PURE__ */ jsx16(
-        Img6,
+        Img7,
         {
           src,
           style: {
@@ -2811,7 +2855,7 @@ function useResolvedPositions(elements, textValues) {
 // src/Root.tsx
 import { Composition } from "remotion";
 import { z } from "zod";
-import { Fragment as Fragment3, jsx as jsx17, jsxs as jsxs11 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx17, jsxs as jsxs12 } from "react/jsx-runtime";
 var defaultImageProps = {
   config: {
     width: 1080,
@@ -3059,7 +3103,7 @@ var calculateImageMetadata = async ({ props }) => {
   };
 };
 var RenderRoot = () => {
-  return /* @__PURE__ */ jsxs11(Fragment3, { children: [
+  return /* @__PURE__ */ jsxs12(Fragment4, { children: [
     /* @__PURE__ */ jsx17(
       Composition,
       {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ugcinc-render",
-  "version": "1.8.70",
+  "version": "1.8.71",
   "description": "Unified rendering package for UGC Inc - shared types, components, and compositions for pixel-perfect client/server rendering",
   "main": "dist/index.js",
   "module": "dist/index.mjs",