npm - ugcinc-render - Versions diffs - 1.8.55 → 1.8.56 - Mend

ugcinc-render 1.8.55 → 1.8.56

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (3) hide show

package/dist/index.js CHANGED Viewed

@@ -4341,8 +4341,12 @@ function IgMessageList({
 // src/compositions/InstagramDmComposition/components/DebugOverlay.tsx
 var import_react7 = require("react");
 var import_jsx_runtime22 = require("react/jsx-runtime");
-function DebugOverlay({ width, height }) {
+function DebugOverlay({ width, height, onZoomChange, initialZoom = 100 }) {
   const [mousePos, setMousePos] = (0, import_react7.useState)(null);
+  const [zoom, setZoom] = (0, import_react7.useState)(initialZoom);
+  (0, import_react7.useEffect)(() => {
+    onZoomChange?.(zoom);
+  }, [zoom, onZoomChange]);
   const handleMouseMove = (0, import_react7.useCallback)(
     (e) => {
       const rect = e.currentTarget.getBoundingClientRect();
@@ -4357,6 +4361,15 @@ function DebugOverlay({ width, height }) {
   const handleMouseLeave = (0, import_react7.useCallback)(() => {
     setMousePos(null);
   }, []);
+  const handleWheel = (0, import_react7.useCallback)((e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    const delta = e.deltaY > 0 ? -5 : 5;
+    setZoom((prev) => {
+      const newZoom = Math.max(10, Math.min(500, prev + delta));
+      return newZoom;
+    });
+  }, []);
   return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
     "div",
     {
@@ -4371,6 +4384,7 @@ function DebugOverlay({ width, height }) {
       },
       onMouseMove: handleMouseMove,
       onMouseLeave: handleMouseLeave,
+      onWheel: handleWheel,
       children: [
         mousePos && /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_jsx_runtime22.Fragment, { children: [
           /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
@@ -4432,7 +4446,7 @@ function DebugOverlay({ width, height }) {
             ] }) : /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { children: "Move mouse over preview" })
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
           "div",
           {
             style: {
@@ -4449,11 +4463,19 @@ function DebugOverlay({ width, height }) {
               pointerEvents: "none",
               border: "2px solid rgba(255, 255, 0, 0.5)"
             },
-            children: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { children: [
-              width,
-              " x ",
-              height
-            ] })
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { children: [
+                width,
+                " x ",
+                height
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { style: { color: "#00FFFF", marginTop: 8 }, children: [
+                "Zoom: ",
+                zoom,
+                "%"
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { style: { color: "#888", fontSize: 16, marginTop: 4 }, children: "(scroll to zoom)" })
+            ]
           }
         )
       ]
@@ -4516,6 +4538,7 @@ function InstagramDmComposition({
   scrollOffset
 }) {
   const [fontsLoaded, setFontsLoaded] = (0, import_react8.useState)(false);
+  const [zoom, setZoom] = (0, import_react8.useState)(100);
   (0, import_react8.useEffect)(() => {
     const handle = (0, import_remotion14.delayRender)("Loading fonts...");
     preloadFonts().then(() => {
@@ -4541,102 +4564,131 @@ function InstagramDmComposition({
   const footerHeight = mergedFooter.height;
   const contentTop = headerHeight;
   const contentHeight = height - headerHeight - footerHeight;
+  const handleZoomChange = (0, import_react8.useCallback)((newZoom) => {
+    setZoom(newZoom);
+  }, []);
+  const zoomScale = zoom / 100;
   return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
     import_remotion14.AbsoluteFill,
     {
       style: {
         backgroundColor: colors.background,
-        fontFamily: '"SF Pro", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Apple Color Emoji", sans-serif'
+        fontFamily: '"SF Pro", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Apple Color Emoji", sans-serif',
+        overflow: "hidden"
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(IgStatusBar, { config: mergedStatusBar, theme, width }),
-        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
-          IgHeader,
-          {
-            config: mergedHeader,
-            theme,
-            recipient,
-            avatarUrl: recipientAvatarUrl
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
-          "div",
-          {
-            style: {
-              position: "absolute",
-              top: contentTop,
-              left: 0,
-              right: 0,
-              height: contentHeight,
-              overflow: "hidden"
-            },
-            children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
-              "div",
-              {
-                style: {
-                  position: "absolute",
-                  top: 0,
-                  left: 0,
-                  right: 0,
-                  bottom: 0,
-                  display: "flex",
-                  flexDirection: "column",
-                  justifyContent: "flex-end",
-                  paddingBottom: 16
-                },
-                children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
-                  IgMessageList,
-                  {
-                    messages,
-                    imageUrls,
-                    style: mergedStyle,
-                    theme,
-                    containerWidth: width - mergedStyle.sideMargin * 2,
-                    showTypingIndicator,
-                    readReceipt,
-                    recipientAvatarUrl,
-                    scrollOffset
-                  }
-                )
-              }
-            )
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
-          IgFooter,
-          {
-            config: mergedFooter,
-            theme,
-            compositionHeight: height
-          }
-        ),
-        referenceImageUrl && referenceOpacity > 0 && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
           "div",
           {
             style: {
               position: "absolute",
               top: 0,
               left: 0,
-              right: 0,
-              bottom: 0,
-              zIndex: 100,
-              pointerEvents: "none",
-              opacity: referenceOpacity / 100
+              width,
+              height,
+              transform: `scale(${zoomScale})`,
+              transformOrigin: "top left"
             },
-            children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
-              import_remotion14.Img,
-              {
-                src: referenceImageUrl,
-                style: {
-                  width: "100%",
-                  height: "100%",
-                  objectFit: "cover"
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(IgStatusBar, { config: mergedStatusBar, theme, width }),
+              /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+                IgHeader,
+                {
+                  config: mergedHeader,
+                  theme,
+                  recipient,
+                  avatarUrl: recipientAvatarUrl
                 }
-              }
-            )
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+                "div",
+                {
+                  style: {
+                    position: "absolute",
+                    top: contentTop,
+                    left: 0,
+                    right: 0,
+                    height: contentHeight,
+                    overflow: "hidden"
+                  },
+                  children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+                    "div",
+                    {
+                      style: {
+                        position: "absolute",
+                        top: 0,
+                        left: 0,
+                        right: 0,
+                        bottom: 0,
+                        display: "flex",
+                        flexDirection: "column",
+                        justifyContent: "flex-end",
+                        paddingBottom: 16
+                      },
+                      children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+                        IgMessageList,
+                        {
+                          messages,
+                          imageUrls,
+                          style: mergedStyle,
+                          theme,
+                          containerWidth: width - mergedStyle.sideMargin * 2,
+                          showTypingIndicator,
+                          readReceipt,
+                          recipientAvatarUrl,
+                          scrollOffset
+                        }
+                      )
+                    }
+                  )
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+                IgFooter,
+                {
+                  config: mergedFooter,
+                  theme,
+                  compositionHeight: height
+                }
+              ),
+              referenceImageUrl && referenceOpacity > 0 && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+                "div",
+                {
+                  style: {
+                    position: "absolute",
+                    top: 0,
+                    left: 0,
+                    right: 0,
+                    bottom: 0,
+                    zIndex: 100,
+                    pointerEvents: "none",
+                    opacity: referenceOpacity / 100
+                  },
+                  children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+                    import_remotion14.Img,
+                    {
+                      src: referenceImageUrl,
+                      style: {
+                        width: "100%",
+                        height: "100%",
+                        objectFit: "cover"
+                      }
+                    }
+                  )
+                }
+              )
+            ]
           }
         ),
-        showDebugOverlay && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(DebugOverlay, { width, height })
+        showDebugOverlay && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+          DebugOverlay,
+          {
+            width,
+            height,
+            onZoomChange: handleZoomChange,
+            initialZoom: zoom
+          }
+        )
       ]
     }
   );

package/dist/index.mjs CHANGED Viewed

@@ -1833,7 +1833,7 @@ function ScreenshotAnimation({
 }
 // src/compositions/InstagramDmComposition/index.tsx
-import { useEffect as useEffect2, useState as useState3 } from "react";
+import { useCallback as useCallback2, useEffect as useEffect3, useState as useState3 } from "react";
 import { AbsoluteFill as AbsoluteFill5, Img as Img9, continueRender as continueRender2, delayRender as delayRender2 } from "remotion";
 // src/compositions/InstagramDmComposition/theme.ts
@@ -3443,10 +3443,14 @@ function IgMessageList({
 }
 // src/compositions/InstagramDmComposition/components/DebugOverlay.tsx
-import { useState as useState2, useCallback } from "react";
+import { useState as useState2, useCallback, useEffect as useEffect2 } from "react";
 import { Fragment, jsx as jsx22, jsxs as jsxs15 } from "react/jsx-runtime";
-function DebugOverlay({ width, height }) {
+function DebugOverlay({ width, height, onZoomChange, initialZoom = 100 }) {
   const [mousePos, setMousePos] = useState2(null);
+  const [zoom, setZoom] = useState2(initialZoom);
+  useEffect2(() => {
+    onZoomChange?.(zoom);
+  }, [zoom, onZoomChange]);
   const handleMouseMove = useCallback(
     (e) => {
       const rect = e.currentTarget.getBoundingClientRect();
@@ -3461,6 +3465,15 @@ function DebugOverlay({ width, height }) {
   const handleMouseLeave = useCallback(() => {
     setMousePos(null);
   }, []);
+  const handleWheel = useCallback((e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    const delta = e.deltaY > 0 ? -5 : 5;
+    setZoom((prev) => {
+      const newZoom = Math.max(10, Math.min(500, prev + delta));
+      return newZoom;
+    });
+  }, []);
   return /* @__PURE__ */ jsxs15(
     "div",
     {
@@ -3475,6 +3488,7 @@ function DebugOverlay({ width, height }) {
       },
       onMouseMove: handleMouseMove,
       onMouseLeave: handleMouseLeave,
+      onWheel: handleWheel,
       children: [
         mousePos && /* @__PURE__ */ jsxs15(Fragment, { children: [
           /* @__PURE__ */ jsx22(
@@ -3536,7 +3550,7 @@ function DebugOverlay({ width, height }) {
             ] }) : /* @__PURE__ */ jsx22("div", { children: "Move mouse over preview" })
           }
         ),
-        /* @__PURE__ */ jsx22(
+        /* @__PURE__ */ jsxs15(
           "div",
           {
             style: {
@@ -3553,11 +3567,19 @@ function DebugOverlay({ width, height }) {
               pointerEvents: "none",
               border: "2px solid rgba(255, 255, 0, 0.5)"
             },
-            children: /* @__PURE__ */ jsxs15("div", { children: [
-              width,
-              " x ",
-              height
-            ] })
+            children: [
+              /* @__PURE__ */ jsxs15("div", { children: [
+                width,
+                " x ",
+                height
+              ] }),
+              /* @__PURE__ */ jsxs15("div", { style: { color: "#00FFFF", marginTop: 8 }, children: [
+                "Zoom: ",
+                zoom,
+                "%"
+              ] }),
+              /* @__PURE__ */ jsx22("div", { style: { color: "#888", fontSize: 16, marginTop: 4 }, children: "(scroll to zoom)" })
+            ]
           }
         )
       ]
@@ -3620,7 +3642,8 @@ function InstagramDmComposition({
   scrollOffset
 }) {
   const [fontsLoaded, setFontsLoaded] = useState3(false);
-  useEffect2(() => {
+  const [zoom, setZoom] = useState3(100);
+  useEffect3(() => {
     const handle = delayRender2("Loading fonts...");
     preloadFonts().then(() => {
       setFontsLoaded(true);
@@ -3645,112 +3668,141 @@ function InstagramDmComposition({
   const footerHeight = mergedFooter.height;
   const contentTop = headerHeight;
   const contentHeight = height - headerHeight - footerHeight;
+  const handleZoomChange = useCallback2((newZoom) => {
+    setZoom(newZoom);
+  }, []);
+  const zoomScale = zoom / 100;
   return /* @__PURE__ */ jsxs16(
     AbsoluteFill5,
     {
       style: {
         backgroundColor: colors.background,
-        fontFamily: '"SF Pro", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Apple Color Emoji", sans-serif'
+        fontFamily: '"SF Pro", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Apple Color Emoji", sans-serif',
+        overflow: "hidden"
       },
       children: [
-        /* @__PURE__ */ jsx23(IgStatusBar, { config: mergedStatusBar, theme, width }),
-        /* @__PURE__ */ jsx23(
-          IgHeader,
-          {
-            config: mergedHeader,
-            theme,
-            recipient,
-            avatarUrl: recipientAvatarUrl
-          }
-        ),
-        /* @__PURE__ */ jsx23(
-          "div",
-          {
-            style: {
-              position: "absolute",
-              top: contentTop,
-              left: 0,
-              right: 0,
-              height: contentHeight,
-              overflow: "hidden"
-            },
-            children: /* @__PURE__ */ jsx23(
-              "div",
-              {
-                style: {
-                  position: "absolute",
-                  top: 0,
-                  left: 0,
-                  right: 0,
-                  bottom: 0,
-                  display: "flex",
-                  flexDirection: "column",
-                  justifyContent: "flex-end",
-                  paddingBottom: 16
-                },
-                children: /* @__PURE__ */ jsx23(
-                  IgMessageList,
-                  {
-                    messages,
-                    imageUrls,
-                    style: mergedStyle,
-                    theme,
-                    containerWidth: width - mergedStyle.sideMargin * 2,
-                    showTypingIndicator,
-                    readReceipt,
-                    recipientAvatarUrl,
-                    scrollOffset
-                  }
-                )
-              }
-            )
-          }
-        ),
-        /* @__PURE__ */ jsx23(
-          IgFooter,
-          {
-            config: mergedFooter,
-            theme,
-            compositionHeight: height
-          }
-        ),
-        referenceImageUrl && referenceOpacity > 0 && /* @__PURE__ */ jsx23(
+        /* @__PURE__ */ jsxs16(
           "div",
           {
             style: {
               position: "absolute",
               top: 0,
               left: 0,
-              right: 0,
-              bottom: 0,
-              zIndex: 100,
-              pointerEvents: "none",
-              opacity: referenceOpacity / 100
+              width,
+              height,
+              transform: `scale(${zoomScale})`,
+              transformOrigin: "top left"
             },
-            children: /* @__PURE__ */ jsx23(
-              Img9,
-              {
-                src: referenceImageUrl,
-                style: {
-                  width: "100%",
-                  height: "100%",
-                  objectFit: "cover"
+            children: [
+              /* @__PURE__ */ jsx23(IgStatusBar, { config: mergedStatusBar, theme, width }),
+              /* @__PURE__ */ jsx23(
+                IgHeader,
+                {
+                  config: mergedHeader,
+                  theme,
+                  recipient,
+                  avatarUrl: recipientAvatarUrl
                 }
-              }
-            )
+              ),
+              /* @__PURE__ */ jsx23(
+                "div",
+                {
+                  style: {
+                    position: "absolute",
+                    top: contentTop,
+                    left: 0,
+                    right: 0,
+                    height: contentHeight,
+                    overflow: "hidden"
+                  },
+                  children: /* @__PURE__ */ jsx23(
+                    "div",
+                    {
+                      style: {
+                        position: "absolute",
+                        top: 0,
+                        left: 0,
+                        right: 0,
+                        bottom: 0,
+                        display: "flex",
+                        flexDirection: "column",
+                        justifyContent: "flex-end",
+                        paddingBottom: 16
+                      },
+                      children: /* @__PURE__ */ jsx23(
+                        IgMessageList,
+                        {
+                          messages,
+                          imageUrls,
+                          style: mergedStyle,
+                          theme,
+                          containerWidth: width - mergedStyle.sideMargin * 2,
+                          showTypingIndicator,
+                          readReceipt,
+                          recipientAvatarUrl,
+                          scrollOffset
+                        }
+                      )
+                    }
+                  )
+                }
+              ),
+              /* @__PURE__ */ jsx23(
+                IgFooter,
+                {
+                  config: mergedFooter,
+                  theme,
+                  compositionHeight: height
+                }
+              ),
+              referenceImageUrl && referenceOpacity > 0 && /* @__PURE__ */ jsx23(
+                "div",
+                {
+                  style: {
+                    position: "absolute",
+                    top: 0,
+                    left: 0,
+                    right: 0,
+                    bottom: 0,
+                    zIndex: 100,
+                    pointerEvents: "none",
+                    opacity: referenceOpacity / 100
+                  },
+                  children: /* @__PURE__ */ jsx23(
+                    Img9,
+                    {
+                      src: referenceImageUrl,
+                      style: {
+                        width: "100%",
+                        height: "100%",
+                        objectFit: "cover"
+                      }
+                    }
+                  )
+                }
+              )
+            ]
           }
         ),
-        showDebugOverlay && /* @__PURE__ */ jsx23(DebugOverlay, { width, height })
+        showDebugOverlay && /* @__PURE__ */ jsx23(
+          DebugOverlay,
+          {
+            width,
+            height,
+            onZoomChange: handleZoomChange,
+            initialZoom: zoom
+          }
+        )
       ]
     }
   );
 }
 // src/hooks/index.ts
-import { useEffect as useEffect3, useState as useState4, useMemo as useMemo7 } from "react";
+import { useEffect as useEffect4, useState as useState4, useMemo as useMemo7 } from "react";
 function useFontsLoaded() {
   const [loaded, setLoaded] = useState4(areFontsLoaded());
-  useEffect3(() => {
+  useEffect4(() => {
     if (!loaded) {
       preloadFonts().then(() => setLoaded(true)).catch(console.error);
     }
@@ -3759,7 +3811,7 @@ function useFontsLoaded() {
 }
 function useImageLoader(src) {
   const [image, setImage] = useState4(null);
-  useEffect3(() => {
+  useEffect4(() => {
     if (!src) {
       setImage(null);
       return;
@@ -3781,7 +3833,7 @@ function useImageLoader(src) {
 function useImagePreloader(sources) {
   const [images, setImages] = useState4({});
   const [loaded, setLoaded] = useState4(false);
-  useEffect3(() => {
+  useEffect4(() => {
     const entries = Object.entries(sources);
     if (entries.length === 0) {
       setLoaded(true);

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "ugcinc-render",
-  "version": "1.8.55",
+  "version": "1.8.56",
   "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",