npm - ugcinc-render - Versions diffs - 1.8.58 → 1.8.60 - Mend

ugcinc-render 1.8.58 → 1.8.60

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

@@ -4344,54 +4344,48 @@ var import_jsx_runtime22 = require("react/jsx-runtime");
 function DebugOverlay({
   width,
   height,
-  scrollContainerRef,
-  onZoomChange,
-  initialZoom = 100
+  zoom,
+  scrollX,
+  scrollY,
+  onZoomChange
 }) {
   const [mousePos, setMousePos] = (0, import_react7.useState)(null);
-  const [zoom, setZoom] = (0, import_react7.useState)(initialZoom);
+  const [viewportPos, setViewportPos] = (0, import_react7.useState)(null);
+  const zoomScale = zoom / 100;
   const handleMouseMove = (0, import_react7.useCallback)(
     (e) => {
-      const container = scrollContainerRef.current;
-      if (!container) return;
       const rect = e.currentTarget.getBoundingClientRect();
-      const currentZoom = zoom / 100;
-      const mouseViewX = e.clientX - rect.left;
-      const mouseViewY = e.clientY - rect.top;
-      const scrollLeft = container.scrollLeft;
-      const scrollTop = container.scrollTop;
-      const x = Math.round((scrollLeft + mouseViewX) / currentZoom);
-      const y = Math.round((scrollTop + mouseViewY) / currentZoom);
-      setMousePos({ x, y });
+      const remotionScaleX = width / rect.width;
+      const remotionScaleY = height / rect.height;
+      const vpX = (e.clientX - rect.left) * remotionScaleX;
+      const vpY = (e.clientY - rect.top) * remotionScaleY;
+      setViewportPos({ x: vpX, y: vpY });
+      const canvasX = Math.round((vpX + scrollX) / zoomScale);
+      const canvasY = Math.round((vpY + scrollY) / zoomScale);
+      setMousePos({ x: canvasX, y: canvasY });
     },
-    [width, height, zoom, scrollContainerRef]
+    [width, height, zoomScale, scrollX, scrollY]
   );
   const handleMouseLeave = (0, import_react7.useCallback)(() => {
     setMousePos(null);
+    setViewportPos(null);
   }, []);
   const handleWheel = (0, import_react7.useCallback)(
     (e) => {
       e.preventDefault();
       e.stopPropagation();
-      const container = scrollContainerRef.current;
-      if (!container) return;
-      const rect = e.currentTarget.getBoundingClientRect();
-      const mouseScreenX = e.clientX - rect.left;
-      const mouseScreenY = e.clientY - rect.top;
-      const scrollLeft = container.scrollLeft;
-      const scrollTop = container.scrollTop;
-      const oldZoom = zoom / 100;
-      const canvasX = (scrollLeft + mouseScreenX) / oldZoom;
-      const canvasY = (scrollTop + mouseScreenY) / oldZoom;
+      if (!viewportPos) return;
+      const { x: vpX, y: vpY } = viewportPos;
+      const canvasX = (vpX + scrollX) / zoomScale;
+      const canvasY = (vpY + scrollY) / zoomScale;
       const delta = e.deltaY > 0 ? -5 : 5;
-      const newZoomPercent = Math.max(10, Math.min(500, zoom + delta));
-      const newZoom = newZoomPercent / 100;
-      const newScrollLeft = canvasX * newZoom - mouseScreenX;
-      const newScrollTop = canvasY * newZoom - mouseScreenY;
-      setZoom(newZoomPercent);
-      onZoomChange?.(newZoomPercent, newScrollLeft, newScrollTop);
+      const newZoom = Math.max(25, Math.min(400, zoom + delta));
+      const newZoomScale = newZoom / 100;
+      const newScrollX = Math.max(0, canvasX * newZoomScale - vpX);
+      const newScrollY = Math.max(0, canvasY * newZoomScale - vpY);
+      onZoomChange(newZoom, newScrollX, newScrollY);
     },
-    [zoom, onZoomChange, scrollContainerRef]
+    [zoom, zoomScale, scrollX, scrollY, viewportPos, onZoomChange]
   );
   return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
     "div",
@@ -4409,7 +4403,6 @@ function DebugOverlay({
       onMouseLeave: handleMouseLeave,
       onWheel: handleWheel,
       children: [
-        mousePos && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_jsx_runtime22.Fragment, {}),
         /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
           "div",
           {
@@ -4468,7 +4461,7 @@ function DebugOverlay({
                 zoom,
                 "%"
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { style: { color: "#888", fontSize: 16, marginTop: 4 }, children: "(scroll to zoom, drag to pan)" })
+              /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { style: { color: "#888", fontSize: 16, marginTop: 4 }, children: "(scroll to zoom)" })
             ]
           }
         )
@@ -4533,15 +4526,12 @@ function InstagramDmComposition({
 }) {
   const [fontsLoaded, setFontsLoaded] = (0, import_react8.useState)(false);
   const [zoom, setZoom] = (0, import_react8.useState)(100);
-  const scrollContainerRef = (0, import_react8.useRef)(null);
-  const handleZoomChange = (0, import_react8.useCallback)((newZoom, scrollX, scrollY) => {
+  const [scrollX, setScrollX] = (0, import_react8.useState)(0);
+  const [scrollY, setScrollY] = (0, import_react8.useState)(0);
+  const handleZoomChange = (0, import_react8.useCallback)((newZoom, newScrollX, newScrollY) => {
     setZoom(newZoom);
-    requestAnimationFrame(() => {
-      if (scrollContainerRef.current) {
-        scrollContainerRef.current.scrollLeft = Math.max(0, scrollX);
-        scrollContainerRef.current.scrollTop = Math.max(0, scrollY);
-      }
-    });
+    setScrollX(newScrollX);
+    setScrollY(newScrollY);
   }, []);
   (0, import_react8.useEffect)(() => {
     const handle = (0, import_remotion14.delayRender)("Loading fonts...");
@@ -4569,139 +4559,117 @@ function InstagramDmComposition({
   const contentTop = headerHeight;
   const contentHeight = height - headerHeight - footerHeight;
   const zoomScale = zoom / 100;
+  const renderContent = () => /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_jsx_runtime23.Fragment, { 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"
+            }
+          }
+        )
+      }
+    )
+  ] });
   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)(
           "div",
           {
-            ref: scrollContainerRef,
             style: {
               position: "absolute",
               top: 0,
               left: 0,
-              right: 0,
-              bottom: 0,
-              overflow: showDebugOverlay ? "auto" : "hidden"
+              width,
+              height,
+              transform: `translate(${-scrollX}px, ${-scrollY}px) scale(${zoomScale})`,
+              transformOrigin: "top left"
             },
-            children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
-              "div",
-              {
-                style: {
-                  width: width * zoomScale,
-                  height: height * zoomScale,
-                  position: "relative"
-                },
-                children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
-                  "div",
-                  {
-                    style: {
-                      position: "absolute",
-                      top: 0,
-                      left: 0,
-                      width,
-                      height,
-                      transform: `scale(${zoomScale})`,
-                      transformOrigin: "top left"
-                    },
-                    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"
-                              }
-                            }
-                          )
-                        }
-                      )
-                    ]
-                  }
-                )
-              }
-            )
+            children: renderContent()
           }
         ),
         showDebugOverlay && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
@@ -4709,9 +4677,10 @@ function InstagramDmComposition({
           {
             width,
             height,
-            scrollContainerRef,
-            onZoomChange: handleZoomChange,
-            initialZoom: zoom
+            zoom,
+            scrollX,
+            scrollY,
+            onZoomChange: handleZoomChange
           }
         )
       ]

package/dist/index.mjs CHANGED Viewed

@@ -1833,7 +1833,7 @@ function ScreenshotAnimation({
 }
 // src/compositions/InstagramDmComposition/index.tsx
-import { useCallback as useCallback2, useEffect as useEffect2, useRef, useState as useState3 } from "react";
+import { useCallback as useCallback2, useEffect as useEffect2, 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
@@ -3448,54 +3448,48 @@ import { Fragment, jsx as jsx22, jsxs as jsxs15 } from "react/jsx-runtime";
 function DebugOverlay({
   width,
   height,
-  scrollContainerRef,
-  onZoomChange,
-  initialZoom = 100
+  zoom,
+  scrollX,
+  scrollY,
+  onZoomChange
 }) {
   const [mousePos, setMousePos] = useState2(null);
-  const [zoom, setZoom] = useState2(initialZoom);
+  const [viewportPos, setViewportPos] = useState2(null);
+  const zoomScale = zoom / 100;
   const handleMouseMove = useCallback(
     (e) => {
-      const container = scrollContainerRef.current;
-      if (!container) return;
       const rect = e.currentTarget.getBoundingClientRect();
-      const currentZoom = zoom / 100;
-      const mouseViewX = e.clientX - rect.left;
-      const mouseViewY = e.clientY - rect.top;
-      const scrollLeft = container.scrollLeft;
-      const scrollTop = container.scrollTop;
-      const x = Math.round((scrollLeft + mouseViewX) / currentZoom);
-      const y = Math.round((scrollTop + mouseViewY) / currentZoom);
-      setMousePos({ x, y });
+      const remotionScaleX = width / rect.width;
+      const remotionScaleY = height / rect.height;
+      const vpX = (e.clientX - rect.left) * remotionScaleX;
+      const vpY = (e.clientY - rect.top) * remotionScaleY;
+      setViewportPos({ x: vpX, y: vpY });
+      const canvasX = Math.round((vpX + scrollX) / zoomScale);
+      const canvasY = Math.round((vpY + scrollY) / zoomScale);
+      setMousePos({ x: canvasX, y: canvasY });
     },
-    [width, height, zoom, scrollContainerRef]
+    [width, height, zoomScale, scrollX, scrollY]
   );
   const handleMouseLeave = useCallback(() => {
     setMousePos(null);
+    setViewportPos(null);
   }, []);
   const handleWheel = useCallback(
     (e) => {
       e.preventDefault();
       e.stopPropagation();
-      const container = scrollContainerRef.current;
-      if (!container) return;
-      const rect = e.currentTarget.getBoundingClientRect();
-      const mouseScreenX = e.clientX - rect.left;
-      const mouseScreenY = e.clientY - rect.top;
-      const scrollLeft = container.scrollLeft;
-      const scrollTop = container.scrollTop;
-      const oldZoom = zoom / 100;
-      const canvasX = (scrollLeft + mouseScreenX) / oldZoom;
-      const canvasY = (scrollTop + mouseScreenY) / oldZoom;
+      if (!viewportPos) return;
+      const { x: vpX, y: vpY } = viewportPos;
+      const canvasX = (vpX + scrollX) / zoomScale;
+      const canvasY = (vpY + scrollY) / zoomScale;
       const delta = e.deltaY > 0 ? -5 : 5;
-      const newZoomPercent = Math.max(10, Math.min(500, zoom + delta));
-      const newZoom = newZoomPercent / 100;
-      const newScrollLeft = canvasX * newZoom - mouseScreenX;
-      const newScrollTop = canvasY * newZoom - mouseScreenY;
-      setZoom(newZoomPercent);
-      onZoomChange?.(newZoomPercent, newScrollLeft, newScrollTop);
+      const newZoom = Math.max(25, Math.min(400, zoom + delta));
+      const newZoomScale = newZoom / 100;
+      const newScrollX = Math.max(0, canvasX * newZoomScale - vpX);
+      const newScrollY = Math.max(0, canvasY * newZoomScale - vpY);
+      onZoomChange(newZoom, newScrollX, newScrollY);
     },
-    [zoom, onZoomChange, scrollContainerRef]
+    [zoom, zoomScale, scrollX, scrollY, viewportPos, onZoomChange]
   );
   return /* @__PURE__ */ jsxs15(
     "div",
@@ -3513,7 +3507,6 @@ function DebugOverlay({
       onMouseLeave: handleMouseLeave,
       onWheel: handleWheel,
       children: [
-        mousePos && /* @__PURE__ */ jsx22(Fragment, {}),
         /* @__PURE__ */ jsx22(
           "div",
           {
@@ -3572,7 +3565,7 @@ function DebugOverlay({
                 zoom,
                 "%"
               ] }),
-              /* @__PURE__ */ jsx22("div", { style: { color: "#888", fontSize: 16, marginTop: 4 }, children: "(scroll to zoom, drag to pan)" })
+              /* @__PURE__ */ jsx22("div", { style: { color: "#888", fontSize: 16, marginTop: 4 }, children: "(scroll to zoom)" })
             ]
           }
         )
@@ -3582,7 +3575,7 @@ function DebugOverlay({
 }
 // src/compositions/InstagramDmComposition/index.tsx
-import { jsx as jsx23, jsxs as jsxs16 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx23, jsxs as jsxs16 } 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",
@@ -3637,15 +3630,12 @@ function InstagramDmComposition({
 }) {
   const [fontsLoaded, setFontsLoaded] = useState3(false);
   const [zoom, setZoom] = useState3(100);
-  const scrollContainerRef = useRef(null);
-  const handleZoomChange = useCallback2((newZoom, scrollX, scrollY) => {
+  const [scrollX, setScrollX] = useState3(0);
+  const [scrollY, setScrollY] = useState3(0);
+  const handleZoomChange = useCallback2((newZoom, newScrollX, newScrollY) => {
     setZoom(newZoom);
-    requestAnimationFrame(() => {
-      if (scrollContainerRef.current) {
-        scrollContainerRef.current.scrollLeft = Math.max(0, scrollX);
-        scrollContainerRef.current.scrollTop = Math.max(0, scrollY);
-      }
-    });
+    setScrollX(newScrollX);
+    setScrollY(newScrollY);
   }, []);
   useEffect2(() => {
     const handle = delayRender2("Loading fonts...");
@@ -3673,139 +3663,117 @@ function InstagramDmComposition({
   const contentTop = headerHeight;
   const contentHeight = height - headerHeight - footerHeight;
   const zoomScale = zoom / 100;
+  const renderContent = () => /* @__PURE__ */ jsxs16(Fragment2, { 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"
+            }
+          }
+        )
+      }
+    )
+  ] });
   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(
           "div",
           {
-            ref: scrollContainerRef,
             style: {
               position: "absolute",
               top: 0,
               left: 0,
-              right: 0,
-              bottom: 0,
-              overflow: showDebugOverlay ? "auto" : "hidden"
+              width,
+              height,
+              transform: `translate(${-scrollX}px, ${-scrollY}px) scale(${zoomScale})`,
+              transformOrigin: "top left"
             },
-            children: /* @__PURE__ */ jsx23(
-              "div",
-              {
-                style: {
-                  width: width * zoomScale,
-                  height: height * zoomScale,
-                  position: "relative"
-                },
-                children: /* @__PURE__ */ jsxs16(
-                  "div",
-                  {
-                    style: {
-                      position: "absolute",
-                      top: 0,
-                      left: 0,
-                      width,
-                      height,
-                      transform: `scale(${zoomScale})`,
-                      transformOrigin: "top left"
-                    },
-                    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"
-                              }
-                            }
-                          )
-                        }
-                      )
-                    ]
-                  }
-                )
-              }
-            )
+            children: renderContent()
           }
         ),
         showDebugOverlay && /* @__PURE__ */ jsx23(
@@ -3813,9 +3781,10 @@ function InstagramDmComposition({
           {
             width,
             height,
-            scrollContainerRef,
-            onZoomChange: handleZoomChange,
-            initialZoom: zoom
+            zoom,
+            scrollX,
+            scrollY,
+            onZoomChange: handleZoomChange
           }
         )
       ]
@@ -3907,7 +3876,7 @@ function useResolvedPositions(elements, textValues) {
 // src/Root.tsx
 import { Composition } from "remotion";
 import { z } from "zod";
-import { Fragment as Fragment2, jsx as jsx24, jsxs as jsxs17 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx24, jsxs as jsxs17 } from "react/jsx-runtime";
 var defaultImageProps = {
   config: {
     width: 1080,
@@ -4170,7 +4139,7 @@ var calculateImageMetadata = async ({ props }) => {
   };
 };
 var RenderRoot = () => {
-  return /* @__PURE__ */ jsxs17(Fragment2, { children: [
+  return /* @__PURE__ */ jsxs17(Fragment3, { children: [
     /* @__PURE__ */ jsx24(
       Composition,
       {

package/package.json CHANGED Viewed

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