ugcinc-render 1.8.53 → 1.8.55
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.
- package/dist/index.d.mts +3 -1
- package/dist/index.d.ts +3 -1
- package/dist/index.js +161 -33
- package/dist/index.mjs +156 -28
- package/package.json +1 -1
package/dist/index.d.mts
CHANGED
|
@@ -927,6 +927,8 @@ interface IgCropConfig {
|
|
|
927
927
|
}
|
|
928
928
|
/** Instagram DM Composition props */
|
|
929
929
|
interface InstagramDmCompositionProps {
|
|
930
|
+
/** Show debug overlay with mouse coordinates */
|
|
931
|
+
showDebugOverlay?: boolean;
|
|
930
932
|
/** URL of a reference screenshot to overlay on top */
|
|
931
933
|
referenceImageUrl?: string;
|
|
932
934
|
/** Opacity of the reference overlay (0-100, default: 50) */
|
|
@@ -987,7 +989,7 @@ declare const DEFAULT_MESSAGE_STYLE: IgMessageStyle;
|
|
|
987
989
|
* Default composition props for registration
|
|
988
990
|
*/
|
|
989
991
|
declare const defaultInstagramDmProps: InstagramDmCompositionProps;
|
|
990
|
-
declare function InstagramDmComposition({ referenceImageUrl, referenceOpacity, width, height, theme, statusBar, user, recipient, messages, showTypingIndicator, readReceipt, imageUrls, messageStyle, headerConfig, footerConfig, scrollOffset, }: InstagramDmCompositionProps): react_jsx_runtime.JSX.Element;
|
|
992
|
+
declare function InstagramDmComposition({ showDebugOverlay, referenceImageUrl, referenceOpacity, width, height, theme, statusBar, user, recipient, messages, showTypingIndicator, readReceipt, imageUrls, messageStyle, headerConfig, footerConfig, scrollOffset, }: InstagramDmCompositionProps): react_jsx_runtime.JSX.Element;
|
|
991
993
|
|
|
992
994
|
/**
|
|
993
995
|
* Message grouping utility
|
package/dist/index.d.ts
CHANGED
|
@@ -927,6 +927,8 @@ interface IgCropConfig {
|
|
|
927
927
|
}
|
|
928
928
|
/** Instagram DM Composition props */
|
|
929
929
|
interface InstagramDmCompositionProps {
|
|
930
|
+
/** Show debug overlay with mouse coordinates */
|
|
931
|
+
showDebugOverlay?: boolean;
|
|
930
932
|
/** URL of a reference screenshot to overlay on top */
|
|
931
933
|
referenceImageUrl?: string;
|
|
932
934
|
/** Opacity of the reference overlay (0-100, default: 50) */
|
|
@@ -987,7 +989,7 @@ declare const DEFAULT_MESSAGE_STYLE: IgMessageStyle;
|
|
|
987
989
|
* Default composition props for registration
|
|
988
990
|
*/
|
|
989
991
|
declare const defaultInstagramDmProps: InstagramDmCompositionProps;
|
|
990
|
-
declare function InstagramDmComposition({ referenceImageUrl, referenceOpacity, width, height, theme, statusBar, user, recipient, messages, showTypingIndicator, readReceipt, imageUrls, messageStyle, headerConfig, footerConfig, scrollOffset, }: InstagramDmCompositionProps): react_jsx_runtime.JSX.Element;
|
|
992
|
+
declare function InstagramDmComposition({ showDebugOverlay, referenceImageUrl, referenceOpacity, width, height, theme, statusBar, user, recipient, messages, showTypingIndicator, readReceipt, imageUrls, messageStyle, headerConfig, footerConfig, scrollOffset, }: InstagramDmCompositionProps): react_jsx_runtime.JSX.Element;
|
|
991
993
|
|
|
992
994
|
/**
|
|
993
995
|
* Message grouping utility
|
package/dist/index.js
CHANGED
|
@@ -2729,7 +2729,7 @@ function ScreenshotAnimation({
|
|
|
2729
2729
|
}
|
|
2730
2730
|
|
|
2731
2731
|
// src/compositions/InstagramDmComposition/index.tsx
|
|
2732
|
-
var
|
|
2732
|
+
var import_react8 = require("react");
|
|
2733
2733
|
var import_remotion14 = require("remotion");
|
|
2734
2734
|
|
|
2735
2735
|
// src/compositions/InstagramDmComposition/theme.ts
|
|
@@ -4338,10 +4338,134 @@ function IgMessageList({
|
|
|
4338
4338
|
);
|
|
4339
4339
|
}
|
|
4340
4340
|
|
|
4341
|
-
// src/compositions/InstagramDmComposition/
|
|
4341
|
+
// src/compositions/InstagramDmComposition/components/DebugOverlay.tsx
|
|
4342
|
+
var import_react7 = require("react");
|
|
4342
4343
|
var import_jsx_runtime22 = require("react/jsx-runtime");
|
|
4344
|
+
function DebugOverlay({ width, height }) {
|
|
4345
|
+
const [mousePos, setMousePos] = (0, import_react7.useState)(null);
|
|
4346
|
+
const handleMouseMove = (0, import_react7.useCallback)(
|
|
4347
|
+
(e) => {
|
|
4348
|
+
const rect = e.currentTarget.getBoundingClientRect();
|
|
4349
|
+
const scaleX = width / rect.width;
|
|
4350
|
+
const scaleY = height / rect.height;
|
|
4351
|
+
const x = Math.round((e.clientX - rect.left) * scaleX);
|
|
4352
|
+
const y = Math.round((e.clientY - rect.top) * scaleY);
|
|
4353
|
+
setMousePos({ x, y });
|
|
4354
|
+
},
|
|
4355
|
+
[width, height]
|
|
4356
|
+
);
|
|
4357
|
+
const handleMouseLeave = (0, import_react7.useCallback)(() => {
|
|
4358
|
+
setMousePos(null);
|
|
4359
|
+
}, []);
|
|
4360
|
+
return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
|
|
4361
|
+
"div",
|
|
4362
|
+
{
|
|
4363
|
+
style: {
|
|
4364
|
+
position: "absolute",
|
|
4365
|
+
top: 0,
|
|
4366
|
+
left: 0,
|
|
4367
|
+
right: 0,
|
|
4368
|
+
bottom: 0,
|
|
4369
|
+
zIndex: 200,
|
|
4370
|
+
cursor: "crosshair"
|
|
4371
|
+
},
|
|
4372
|
+
onMouseMove: handleMouseMove,
|
|
4373
|
+
onMouseLeave: handleMouseLeave,
|
|
4374
|
+
children: [
|
|
4375
|
+
mousePos && /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_jsx_runtime22.Fragment, { children: [
|
|
4376
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
|
|
4377
|
+
"div",
|
|
4378
|
+
{
|
|
4379
|
+
style: {
|
|
4380
|
+
position: "absolute",
|
|
4381
|
+
top: 0,
|
|
4382
|
+
left: mousePos.x,
|
|
4383
|
+
width: 1,
|
|
4384
|
+
height: "100%",
|
|
4385
|
+
backgroundColor: "rgba(255, 0, 0, 0.5)",
|
|
4386
|
+
pointerEvents: "none"
|
|
4387
|
+
}
|
|
4388
|
+
}
|
|
4389
|
+
),
|
|
4390
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
|
|
4391
|
+
"div",
|
|
4392
|
+
{
|
|
4393
|
+
style: {
|
|
4394
|
+
position: "absolute",
|
|
4395
|
+
top: mousePos.y,
|
|
4396
|
+
left: 0,
|
|
4397
|
+
width: "100%",
|
|
4398
|
+
height: 1,
|
|
4399
|
+
backgroundColor: "rgba(255, 0, 0, 0.5)",
|
|
4400
|
+
pointerEvents: "none"
|
|
4401
|
+
}
|
|
4402
|
+
}
|
|
4403
|
+
)
|
|
4404
|
+
] }),
|
|
4405
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
|
|
4406
|
+
"div",
|
|
4407
|
+
{
|
|
4408
|
+
style: {
|
|
4409
|
+
position: "absolute",
|
|
4410
|
+
top: 16,
|
|
4411
|
+
left: 16,
|
|
4412
|
+
backgroundColor: "rgba(0, 0, 0, 0.85)",
|
|
4413
|
+
color: "#00FF00",
|
|
4414
|
+
fontFamily: "monospace",
|
|
4415
|
+
fontSize: 28,
|
|
4416
|
+
fontWeight: "bold",
|
|
4417
|
+
padding: "12px 20px",
|
|
4418
|
+
borderRadius: 8,
|
|
4419
|
+
pointerEvents: "none",
|
|
4420
|
+
border: "2px solid rgba(0, 255, 0, 0.5)",
|
|
4421
|
+
minWidth: 200
|
|
4422
|
+
},
|
|
4423
|
+
children: mousePos ? /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_jsx_runtime22.Fragment, { children: [
|
|
4424
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { children: [
|
|
4425
|
+
"X: ",
|
|
4426
|
+
mousePos.x
|
|
4427
|
+
] }),
|
|
4428
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { children: [
|
|
4429
|
+
"Y: ",
|
|
4430
|
+
mousePos.y
|
|
4431
|
+
] })
|
|
4432
|
+
] }) : /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { children: "Move mouse over preview" })
|
|
4433
|
+
}
|
|
4434
|
+
),
|
|
4435
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
|
|
4436
|
+
"div",
|
|
4437
|
+
{
|
|
4438
|
+
style: {
|
|
4439
|
+
position: "absolute",
|
|
4440
|
+
top: 16,
|
|
4441
|
+
right: 16,
|
|
4442
|
+
backgroundColor: "rgba(0, 0, 0, 0.85)",
|
|
4443
|
+
color: "#FFFF00",
|
|
4444
|
+
fontFamily: "monospace",
|
|
4445
|
+
fontSize: 24,
|
|
4446
|
+
fontWeight: "bold",
|
|
4447
|
+
padding: "12px 20px",
|
|
4448
|
+
borderRadius: 8,
|
|
4449
|
+
pointerEvents: "none",
|
|
4450
|
+
border: "2px solid rgba(255, 255, 0, 0.5)"
|
|
4451
|
+
},
|
|
4452
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { children: [
|
|
4453
|
+
width,
|
|
4454
|
+
" x ",
|
|
4455
|
+
height
|
|
4456
|
+
] })
|
|
4457
|
+
}
|
|
4458
|
+
)
|
|
4459
|
+
]
|
|
4460
|
+
}
|
|
4461
|
+
);
|
|
4462
|
+
}
|
|
4463
|
+
|
|
4464
|
+
// src/compositions/InstagramDmComposition/index.tsx
|
|
4465
|
+
var import_jsx_runtime23 = require("react/jsx-runtime");
|
|
4343
4466
|
var defaultInstagramDmProps = {
|
|
4344
|
-
|
|
4467
|
+
showDebugOverlay: true,
|
|
4468
|
+
referenceImageUrl: "https://n14dcpakf8w1fekl.public.blob.vercel-storage.com/media/8ff1462b-13d7-4abe-9325-0a6ad19004f0/IMG_3171-DmKgZAYCYJpLxiZjJBYYCk4mynmjkv.png",
|
|
4345
4469
|
referenceOpacity: 50,
|
|
4346
4470
|
width: 1206,
|
|
4347
4471
|
height: 2622,
|
|
@@ -4373,6 +4497,7 @@ var defaultInstagramDmProps = {
|
|
|
4373
4497
|
}
|
|
4374
4498
|
};
|
|
4375
4499
|
function InstagramDmComposition({
|
|
4500
|
+
showDebugOverlay = false,
|
|
4376
4501
|
referenceImageUrl,
|
|
4377
4502
|
referenceOpacity = 50,
|
|
4378
4503
|
width = 1206,
|
|
@@ -4390,8 +4515,8 @@ function InstagramDmComposition({
|
|
|
4390
4515
|
footerConfig,
|
|
4391
4516
|
scrollOffset
|
|
4392
4517
|
}) {
|
|
4393
|
-
const [fontsLoaded, setFontsLoaded] = (0,
|
|
4394
|
-
(0,
|
|
4518
|
+
const [fontsLoaded, setFontsLoaded] = (0, import_react8.useState)(false);
|
|
4519
|
+
(0, import_react8.useEffect)(() => {
|
|
4395
4520
|
const handle = (0, import_remotion14.delayRender)("Loading fonts...");
|
|
4396
4521
|
preloadFonts().then(() => {
|
|
4397
4522
|
setFontsLoaded(true);
|
|
@@ -4403,7 +4528,7 @@ function InstagramDmComposition({
|
|
|
4403
4528
|
});
|
|
4404
4529
|
}, []);
|
|
4405
4530
|
if (!fontsLoaded) {
|
|
4406
|
-
return /* @__PURE__ */ (0,
|
|
4531
|
+
return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_remotion14.AbsoluteFill, {});
|
|
4407
4532
|
}
|
|
4408
4533
|
const mergedStatusBar = mergeStatusBarConfig(statusBar);
|
|
4409
4534
|
const mergedStyle = mergeMessageStyle(messageStyle);
|
|
@@ -4416,7 +4541,7 @@ function InstagramDmComposition({
|
|
|
4416
4541
|
const footerHeight = mergedFooter.height;
|
|
4417
4542
|
const contentTop = headerHeight;
|
|
4418
4543
|
const contentHeight = height - headerHeight - footerHeight;
|
|
4419
|
-
return /* @__PURE__ */ (0,
|
|
4544
|
+
return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
|
|
4420
4545
|
import_remotion14.AbsoluteFill,
|
|
4421
4546
|
{
|
|
4422
4547
|
style: {
|
|
@@ -4424,8 +4549,8 @@ function InstagramDmComposition({
|
|
|
4424
4549
|
fontFamily: '"SF Pro", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Apple Color Emoji", sans-serif'
|
|
4425
4550
|
},
|
|
4426
4551
|
children: [
|
|
4427
|
-
/* @__PURE__ */ (0,
|
|
4428
|
-
/* @__PURE__ */ (0,
|
|
4552
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)(IgStatusBar, { config: mergedStatusBar, theme, width }),
|
|
4553
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
|
|
4429
4554
|
IgHeader,
|
|
4430
4555
|
{
|
|
4431
4556
|
config: mergedHeader,
|
|
@@ -4434,7 +4559,7 @@ function InstagramDmComposition({
|
|
|
4434
4559
|
avatarUrl: recipientAvatarUrl
|
|
4435
4560
|
}
|
|
4436
4561
|
),
|
|
4437
|
-
/* @__PURE__ */ (0,
|
|
4562
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
|
|
4438
4563
|
"div",
|
|
4439
4564
|
{
|
|
4440
4565
|
style: {
|
|
@@ -4445,7 +4570,7 @@ function InstagramDmComposition({
|
|
|
4445
4570
|
height: contentHeight,
|
|
4446
4571
|
overflow: "hidden"
|
|
4447
4572
|
},
|
|
4448
|
-
children: /* @__PURE__ */ (0,
|
|
4573
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
|
|
4449
4574
|
"div",
|
|
4450
4575
|
{
|
|
4451
4576
|
style: {
|
|
@@ -4459,7 +4584,7 @@ function InstagramDmComposition({
|
|
|
4459
4584
|
justifyContent: "flex-end",
|
|
4460
4585
|
paddingBottom: 16
|
|
4461
4586
|
},
|
|
4462
|
-
children: /* @__PURE__ */ (0,
|
|
4587
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
|
|
4463
4588
|
IgMessageList,
|
|
4464
4589
|
{
|
|
4465
4590
|
messages,
|
|
@@ -4477,7 +4602,7 @@ function InstagramDmComposition({
|
|
|
4477
4602
|
)
|
|
4478
4603
|
}
|
|
4479
4604
|
),
|
|
4480
|
-
/* @__PURE__ */ (0,
|
|
4605
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
|
|
4481
4606
|
IgFooter,
|
|
4482
4607
|
{
|
|
4483
4608
|
config: mergedFooter,
|
|
@@ -4485,7 +4610,7 @@ function InstagramDmComposition({
|
|
|
4485
4610
|
compositionHeight: height
|
|
4486
4611
|
}
|
|
4487
4612
|
),
|
|
4488
|
-
referenceImageUrl && referenceOpacity > 0 && /* @__PURE__ */ (0,
|
|
4613
|
+
referenceImageUrl && referenceOpacity > 0 && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
|
|
4489
4614
|
"div",
|
|
4490
4615
|
{
|
|
4491
4616
|
style: {
|
|
@@ -4498,7 +4623,7 @@ function InstagramDmComposition({
|
|
|
4498
4623
|
pointerEvents: "none",
|
|
4499
4624
|
opacity: referenceOpacity / 100
|
|
4500
4625
|
},
|
|
4501
|
-
children: /* @__PURE__ */ (0,
|
|
4626
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
|
|
4502
4627
|
import_remotion14.Img,
|
|
4503
4628
|
{
|
|
4504
4629
|
src: referenceImageUrl,
|
|
@@ -4510,7 +4635,8 @@ function InstagramDmComposition({
|
|
|
4510
4635
|
}
|
|
4511
4636
|
)
|
|
4512
4637
|
}
|
|
4513
|
-
)
|
|
4638
|
+
),
|
|
4639
|
+
showDebugOverlay && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(DebugOverlay, { width, height })
|
|
4514
4640
|
]
|
|
4515
4641
|
}
|
|
4516
4642
|
);
|
|
@@ -4800,10 +4926,10 @@ function isValidCaptionPreset(name) {
|
|
|
4800
4926
|
}
|
|
4801
4927
|
|
|
4802
4928
|
// src/hooks/index.ts
|
|
4803
|
-
var
|
|
4929
|
+
var import_react9 = require("react");
|
|
4804
4930
|
function useFontsLoaded() {
|
|
4805
|
-
const [loaded, setLoaded] = (0,
|
|
4806
|
-
(0,
|
|
4931
|
+
const [loaded, setLoaded] = (0, import_react9.useState)(areFontsLoaded());
|
|
4932
|
+
(0, import_react9.useEffect)(() => {
|
|
4807
4933
|
if (!loaded) {
|
|
4808
4934
|
preloadFonts().then(() => setLoaded(true)).catch(console.error);
|
|
4809
4935
|
}
|
|
@@ -4811,8 +4937,8 @@ function useFontsLoaded() {
|
|
|
4811
4937
|
return loaded;
|
|
4812
4938
|
}
|
|
4813
4939
|
function useImageLoader(src) {
|
|
4814
|
-
const [image, setImage] = (0,
|
|
4815
|
-
(0,
|
|
4940
|
+
const [image, setImage] = (0, import_react9.useState)(null);
|
|
4941
|
+
(0, import_react9.useEffect)(() => {
|
|
4816
4942
|
if (!src) {
|
|
4817
4943
|
setImage(null);
|
|
4818
4944
|
return;
|
|
@@ -4832,9 +4958,9 @@ function useImageLoader(src) {
|
|
|
4832
4958
|
return image;
|
|
4833
4959
|
}
|
|
4834
4960
|
function useImagePreloader(sources) {
|
|
4835
|
-
const [images, setImages] = (0,
|
|
4836
|
-
const [loaded, setLoaded] = (0,
|
|
4837
|
-
(0,
|
|
4961
|
+
const [images, setImages] = (0, import_react9.useState)({});
|
|
4962
|
+
const [loaded, setLoaded] = (0, import_react9.useState)(false);
|
|
4963
|
+
(0, import_react9.useEffect)(() => {
|
|
4838
4964
|
const entries = Object.entries(sources);
|
|
4839
4965
|
if (entries.length === 0) {
|
|
4840
4966
|
setLoaded(true);
|
|
@@ -4872,7 +4998,7 @@ function useImagePreloader(sources) {
|
|
|
4872
4998
|
return { loaded, images };
|
|
4873
4999
|
}
|
|
4874
5000
|
function useResolvedPositions(elements, textValues) {
|
|
4875
|
-
return (0,
|
|
5001
|
+
return (0, import_react9.useMemo)(() => {
|
|
4876
5002
|
if (elements.length === 0) {
|
|
4877
5003
|
return { elements: [], errors: [] };
|
|
4878
5004
|
}
|
|
@@ -4883,7 +5009,7 @@ function useResolvedPositions(elements, textValues) {
|
|
|
4883
5009
|
// src/Root.tsx
|
|
4884
5010
|
var import_remotion15 = require("remotion");
|
|
4885
5011
|
var import_zod = require("zod");
|
|
4886
|
-
var
|
|
5012
|
+
var import_jsx_runtime24 = require("react/jsx-runtime");
|
|
4887
5013
|
var defaultImageProps = {
|
|
4888
5014
|
config: {
|
|
4889
5015
|
width: 1080,
|
|
@@ -5063,8 +5189,10 @@ var readReceiptSchema = import_zod.z.object({
|
|
|
5063
5189
|
timestamp: import_zod.z.string().optional().describe("Timestamp text")
|
|
5064
5190
|
});
|
|
5065
5191
|
var instagramDmSchema = import_zod.z.object({
|
|
5192
|
+
// Debug overlay
|
|
5193
|
+
showDebugOverlay: import_zod.z.boolean().optional().default(true).describe("Show debug overlay with mouse coordinates"),
|
|
5066
5194
|
// Reference overlay
|
|
5067
|
-
referenceImageUrl: import_zod.z.string().optional().default("https://n14dcpakf8w1fekl.public.blob.vercel-storage.com/media/8ff1462b-13d7-4abe-9325-0a6ad19004f0/
|
|
5195
|
+
referenceImageUrl: import_zod.z.string().optional().default("https://n14dcpakf8w1fekl.public.blob.vercel-storage.com/media/8ff1462b-13d7-4abe-9325-0a6ad19004f0/IMG_3171-DmKgZAYCYJpLxiZjJBYYCk4mynmjkv.png").describe("Reference screenshot URL"),
|
|
5068
5196
|
referenceOpacity: import_zod.z.number().optional().default(50).describe("Reference overlay opacity (0-100)"),
|
|
5069
5197
|
// Canvas
|
|
5070
5198
|
width: import_zod.z.number().optional().default(1206).describe("Canvas width (px)"),
|
|
@@ -5144,8 +5272,8 @@ var calculateImageMetadata = async ({ props }) => {
|
|
|
5144
5272
|
};
|
|
5145
5273
|
};
|
|
5146
5274
|
var RenderRoot = () => {
|
|
5147
|
-
return /* @__PURE__ */ (0,
|
|
5148
|
-
/* @__PURE__ */ (0,
|
|
5275
|
+
return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_jsx_runtime24.Fragment, { children: [
|
|
5276
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
|
|
5149
5277
|
import_remotion15.Composition,
|
|
5150
5278
|
{
|
|
5151
5279
|
id: "ImageEditorComposition",
|
|
@@ -5158,7 +5286,7 @@ var RenderRoot = () => {
|
|
|
5158
5286
|
defaultProps: defaultImageProps
|
|
5159
5287
|
}
|
|
5160
5288
|
),
|
|
5161
|
-
/* @__PURE__ */ (0,
|
|
5289
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
|
|
5162
5290
|
import_remotion15.Composition,
|
|
5163
5291
|
{
|
|
5164
5292
|
id: "VideoEditorComposition",
|
|
@@ -5170,7 +5298,7 @@ var RenderRoot = () => {
|
|
|
5170
5298
|
defaultProps: defaultVideoProps
|
|
5171
5299
|
}
|
|
5172
5300
|
),
|
|
5173
|
-
/* @__PURE__ */ (0,
|
|
5301
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
|
|
5174
5302
|
import_remotion15.Composition,
|
|
5175
5303
|
{
|
|
5176
5304
|
id: "AutoCaptionComposition",
|
|
@@ -5182,7 +5310,7 @@ var RenderRoot = () => {
|
|
|
5182
5310
|
defaultProps: defaultAutoCaptionProps
|
|
5183
5311
|
}
|
|
5184
5312
|
),
|
|
5185
|
-
/* @__PURE__ */ (0,
|
|
5313
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
|
|
5186
5314
|
import_remotion15.Composition,
|
|
5187
5315
|
{
|
|
5188
5316
|
id: "ScreenshotAnimationComposition",
|
|
@@ -5195,7 +5323,7 @@ var RenderRoot = () => {
|
|
|
5195
5323
|
defaultProps: defaultScreenshotAnimationProps
|
|
5196
5324
|
}
|
|
5197
5325
|
),
|
|
5198
|
-
/* @__PURE__ */ (0,
|
|
5326
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
|
|
5199
5327
|
import_remotion15.Composition,
|
|
5200
5328
|
{
|
|
5201
5329
|
id: "InstagramDmComposition",
|
package/dist/index.mjs
CHANGED
|
@@ -1833,7 +1833,7 @@ function ScreenshotAnimation({
|
|
|
1833
1833
|
}
|
|
1834
1834
|
|
|
1835
1835
|
// src/compositions/InstagramDmComposition/index.tsx
|
|
1836
|
-
import { useEffect as useEffect2, useState as
|
|
1836
|
+
import { useEffect as useEffect2, useState as useState3 } from "react";
|
|
1837
1837
|
import { AbsoluteFill as AbsoluteFill5, Img as Img9, continueRender as continueRender2, delayRender as delayRender2 } from "remotion";
|
|
1838
1838
|
|
|
1839
1839
|
// src/compositions/InstagramDmComposition/theme.ts
|
|
@@ -3442,10 +3442,134 @@ function IgMessageList({
|
|
|
3442
3442
|
);
|
|
3443
3443
|
}
|
|
3444
3444
|
|
|
3445
|
+
// src/compositions/InstagramDmComposition/components/DebugOverlay.tsx
|
|
3446
|
+
import { useState as useState2, useCallback } from "react";
|
|
3447
|
+
import { Fragment, jsx as jsx22, jsxs as jsxs15 } from "react/jsx-runtime";
|
|
3448
|
+
function DebugOverlay({ width, height }) {
|
|
3449
|
+
const [mousePos, setMousePos] = useState2(null);
|
|
3450
|
+
const handleMouseMove = useCallback(
|
|
3451
|
+
(e) => {
|
|
3452
|
+
const rect = e.currentTarget.getBoundingClientRect();
|
|
3453
|
+
const scaleX = width / rect.width;
|
|
3454
|
+
const scaleY = height / rect.height;
|
|
3455
|
+
const x = Math.round((e.clientX - rect.left) * scaleX);
|
|
3456
|
+
const y = Math.round((e.clientY - rect.top) * scaleY);
|
|
3457
|
+
setMousePos({ x, y });
|
|
3458
|
+
},
|
|
3459
|
+
[width, height]
|
|
3460
|
+
);
|
|
3461
|
+
const handleMouseLeave = useCallback(() => {
|
|
3462
|
+
setMousePos(null);
|
|
3463
|
+
}, []);
|
|
3464
|
+
return /* @__PURE__ */ jsxs15(
|
|
3465
|
+
"div",
|
|
3466
|
+
{
|
|
3467
|
+
style: {
|
|
3468
|
+
position: "absolute",
|
|
3469
|
+
top: 0,
|
|
3470
|
+
left: 0,
|
|
3471
|
+
right: 0,
|
|
3472
|
+
bottom: 0,
|
|
3473
|
+
zIndex: 200,
|
|
3474
|
+
cursor: "crosshair"
|
|
3475
|
+
},
|
|
3476
|
+
onMouseMove: handleMouseMove,
|
|
3477
|
+
onMouseLeave: handleMouseLeave,
|
|
3478
|
+
children: [
|
|
3479
|
+
mousePos && /* @__PURE__ */ jsxs15(Fragment, { children: [
|
|
3480
|
+
/* @__PURE__ */ jsx22(
|
|
3481
|
+
"div",
|
|
3482
|
+
{
|
|
3483
|
+
style: {
|
|
3484
|
+
position: "absolute",
|
|
3485
|
+
top: 0,
|
|
3486
|
+
left: mousePos.x,
|
|
3487
|
+
width: 1,
|
|
3488
|
+
height: "100%",
|
|
3489
|
+
backgroundColor: "rgba(255, 0, 0, 0.5)",
|
|
3490
|
+
pointerEvents: "none"
|
|
3491
|
+
}
|
|
3492
|
+
}
|
|
3493
|
+
),
|
|
3494
|
+
/* @__PURE__ */ jsx22(
|
|
3495
|
+
"div",
|
|
3496
|
+
{
|
|
3497
|
+
style: {
|
|
3498
|
+
position: "absolute",
|
|
3499
|
+
top: mousePos.y,
|
|
3500
|
+
left: 0,
|
|
3501
|
+
width: "100%",
|
|
3502
|
+
height: 1,
|
|
3503
|
+
backgroundColor: "rgba(255, 0, 0, 0.5)",
|
|
3504
|
+
pointerEvents: "none"
|
|
3505
|
+
}
|
|
3506
|
+
}
|
|
3507
|
+
)
|
|
3508
|
+
] }),
|
|
3509
|
+
/* @__PURE__ */ jsx22(
|
|
3510
|
+
"div",
|
|
3511
|
+
{
|
|
3512
|
+
style: {
|
|
3513
|
+
position: "absolute",
|
|
3514
|
+
top: 16,
|
|
3515
|
+
left: 16,
|
|
3516
|
+
backgroundColor: "rgba(0, 0, 0, 0.85)",
|
|
3517
|
+
color: "#00FF00",
|
|
3518
|
+
fontFamily: "monospace",
|
|
3519
|
+
fontSize: 28,
|
|
3520
|
+
fontWeight: "bold",
|
|
3521
|
+
padding: "12px 20px",
|
|
3522
|
+
borderRadius: 8,
|
|
3523
|
+
pointerEvents: "none",
|
|
3524
|
+
border: "2px solid rgba(0, 255, 0, 0.5)",
|
|
3525
|
+
minWidth: 200
|
|
3526
|
+
},
|
|
3527
|
+
children: mousePos ? /* @__PURE__ */ jsxs15(Fragment, { children: [
|
|
3528
|
+
/* @__PURE__ */ jsxs15("div", { children: [
|
|
3529
|
+
"X: ",
|
|
3530
|
+
mousePos.x
|
|
3531
|
+
] }),
|
|
3532
|
+
/* @__PURE__ */ jsxs15("div", { children: [
|
|
3533
|
+
"Y: ",
|
|
3534
|
+
mousePos.y
|
|
3535
|
+
] })
|
|
3536
|
+
] }) : /* @__PURE__ */ jsx22("div", { children: "Move mouse over preview" })
|
|
3537
|
+
}
|
|
3538
|
+
),
|
|
3539
|
+
/* @__PURE__ */ jsx22(
|
|
3540
|
+
"div",
|
|
3541
|
+
{
|
|
3542
|
+
style: {
|
|
3543
|
+
position: "absolute",
|
|
3544
|
+
top: 16,
|
|
3545
|
+
right: 16,
|
|
3546
|
+
backgroundColor: "rgba(0, 0, 0, 0.85)",
|
|
3547
|
+
color: "#FFFF00",
|
|
3548
|
+
fontFamily: "monospace",
|
|
3549
|
+
fontSize: 24,
|
|
3550
|
+
fontWeight: "bold",
|
|
3551
|
+
padding: "12px 20px",
|
|
3552
|
+
borderRadius: 8,
|
|
3553
|
+
pointerEvents: "none",
|
|
3554
|
+
border: "2px solid rgba(255, 255, 0, 0.5)"
|
|
3555
|
+
},
|
|
3556
|
+
children: /* @__PURE__ */ jsxs15("div", { children: [
|
|
3557
|
+
width,
|
|
3558
|
+
" x ",
|
|
3559
|
+
height
|
|
3560
|
+
] })
|
|
3561
|
+
}
|
|
3562
|
+
)
|
|
3563
|
+
]
|
|
3564
|
+
}
|
|
3565
|
+
);
|
|
3566
|
+
}
|
|
3567
|
+
|
|
3445
3568
|
// src/compositions/InstagramDmComposition/index.tsx
|
|
3446
|
-
import { jsx as
|
|
3569
|
+
import { jsx as jsx23, jsxs as jsxs16 } from "react/jsx-runtime";
|
|
3447
3570
|
var defaultInstagramDmProps = {
|
|
3448
|
-
|
|
3571
|
+
showDebugOverlay: true,
|
|
3572
|
+
referenceImageUrl: "https://n14dcpakf8w1fekl.public.blob.vercel-storage.com/media/8ff1462b-13d7-4abe-9325-0a6ad19004f0/IMG_3171-DmKgZAYCYJpLxiZjJBYYCk4mynmjkv.png",
|
|
3449
3573
|
referenceOpacity: 50,
|
|
3450
3574
|
width: 1206,
|
|
3451
3575
|
height: 2622,
|
|
@@ -3477,6 +3601,7 @@ var defaultInstagramDmProps = {
|
|
|
3477
3601
|
}
|
|
3478
3602
|
};
|
|
3479
3603
|
function InstagramDmComposition({
|
|
3604
|
+
showDebugOverlay = false,
|
|
3480
3605
|
referenceImageUrl,
|
|
3481
3606
|
referenceOpacity = 50,
|
|
3482
3607
|
width = 1206,
|
|
@@ -3494,7 +3619,7 @@ function InstagramDmComposition({
|
|
|
3494
3619
|
footerConfig,
|
|
3495
3620
|
scrollOffset
|
|
3496
3621
|
}) {
|
|
3497
|
-
const [fontsLoaded, setFontsLoaded] =
|
|
3622
|
+
const [fontsLoaded, setFontsLoaded] = useState3(false);
|
|
3498
3623
|
useEffect2(() => {
|
|
3499
3624
|
const handle = delayRender2("Loading fonts...");
|
|
3500
3625
|
preloadFonts().then(() => {
|
|
@@ -3507,7 +3632,7 @@ function InstagramDmComposition({
|
|
|
3507
3632
|
});
|
|
3508
3633
|
}, []);
|
|
3509
3634
|
if (!fontsLoaded) {
|
|
3510
|
-
return /* @__PURE__ */
|
|
3635
|
+
return /* @__PURE__ */ jsx23(AbsoluteFill5, {});
|
|
3511
3636
|
}
|
|
3512
3637
|
const mergedStatusBar = mergeStatusBarConfig(statusBar);
|
|
3513
3638
|
const mergedStyle = mergeMessageStyle(messageStyle);
|
|
@@ -3520,7 +3645,7 @@ function InstagramDmComposition({
|
|
|
3520
3645
|
const footerHeight = mergedFooter.height;
|
|
3521
3646
|
const contentTop = headerHeight;
|
|
3522
3647
|
const contentHeight = height - headerHeight - footerHeight;
|
|
3523
|
-
return /* @__PURE__ */
|
|
3648
|
+
return /* @__PURE__ */ jsxs16(
|
|
3524
3649
|
AbsoluteFill5,
|
|
3525
3650
|
{
|
|
3526
3651
|
style: {
|
|
@@ -3528,8 +3653,8 @@ function InstagramDmComposition({
|
|
|
3528
3653
|
fontFamily: '"SF Pro", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Apple Color Emoji", sans-serif'
|
|
3529
3654
|
},
|
|
3530
3655
|
children: [
|
|
3531
|
-
/* @__PURE__ */
|
|
3532
|
-
/* @__PURE__ */
|
|
3656
|
+
/* @__PURE__ */ jsx23(IgStatusBar, { config: mergedStatusBar, theme, width }),
|
|
3657
|
+
/* @__PURE__ */ jsx23(
|
|
3533
3658
|
IgHeader,
|
|
3534
3659
|
{
|
|
3535
3660
|
config: mergedHeader,
|
|
@@ -3538,7 +3663,7 @@ function InstagramDmComposition({
|
|
|
3538
3663
|
avatarUrl: recipientAvatarUrl
|
|
3539
3664
|
}
|
|
3540
3665
|
),
|
|
3541
|
-
/* @__PURE__ */
|
|
3666
|
+
/* @__PURE__ */ jsx23(
|
|
3542
3667
|
"div",
|
|
3543
3668
|
{
|
|
3544
3669
|
style: {
|
|
@@ -3549,7 +3674,7 @@ function InstagramDmComposition({
|
|
|
3549
3674
|
height: contentHeight,
|
|
3550
3675
|
overflow: "hidden"
|
|
3551
3676
|
},
|
|
3552
|
-
children: /* @__PURE__ */
|
|
3677
|
+
children: /* @__PURE__ */ jsx23(
|
|
3553
3678
|
"div",
|
|
3554
3679
|
{
|
|
3555
3680
|
style: {
|
|
@@ -3563,7 +3688,7 @@ function InstagramDmComposition({
|
|
|
3563
3688
|
justifyContent: "flex-end",
|
|
3564
3689
|
paddingBottom: 16
|
|
3565
3690
|
},
|
|
3566
|
-
children: /* @__PURE__ */
|
|
3691
|
+
children: /* @__PURE__ */ jsx23(
|
|
3567
3692
|
IgMessageList,
|
|
3568
3693
|
{
|
|
3569
3694
|
messages,
|
|
@@ -3581,7 +3706,7 @@ function InstagramDmComposition({
|
|
|
3581
3706
|
)
|
|
3582
3707
|
}
|
|
3583
3708
|
),
|
|
3584
|
-
/* @__PURE__ */
|
|
3709
|
+
/* @__PURE__ */ jsx23(
|
|
3585
3710
|
IgFooter,
|
|
3586
3711
|
{
|
|
3587
3712
|
config: mergedFooter,
|
|
@@ -3589,7 +3714,7 @@ function InstagramDmComposition({
|
|
|
3589
3714
|
compositionHeight: height
|
|
3590
3715
|
}
|
|
3591
3716
|
),
|
|
3592
|
-
referenceImageUrl && referenceOpacity > 0 && /* @__PURE__ */
|
|
3717
|
+
referenceImageUrl && referenceOpacity > 0 && /* @__PURE__ */ jsx23(
|
|
3593
3718
|
"div",
|
|
3594
3719
|
{
|
|
3595
3720
|
style: {
|
|
@@ -3602,7 +3727,7 @@ function InstagramDmComposition({
|
|
|
3602
3727
|
pointerEvents: "none",
|
|
3603
3728
|
opacity: referenceOpacity / 100
|
|
3604
3729
|
},
|
|
3605
|
-
children: /* @__PURE__ */
|
|
3730
|
+
children: /* @__PURE__ */ jsx23(
|
|
3606
3731
|
Img9,
|
|
3607
3732
|
{
|
|
3608
3733
|
src: referenceImageUrl,
|
|
@@ -3614,16 +3739,17 @@ function InstagramDmComposition({
|
|
|
3614
3739
|
}
|
|
3615
3740
|
)
|
|
3616
3741
|
}
|
|
3617
|
-
)
|
|
3742
|
+
),
|
|
3743
|
+
showDebugOverlay && /* @__PURE__ */ jsx23(DebugOverlay, { width, height })
|
|
3618
3744
|
]
|
|
3619
3745
|
}
|
|
3620
3746
|
);
|
|
3621
3747
|
}
|
|
3622
3748
|
|
|
3623
3749
|
// src/hooks/index.ts
|
|
3624
|
-
import { useEffect as useEffect3, useState as
|
|
3750
|
+
import { useEffect as useEffect3, useState as useState4, useMemo as useMemo7 } from "react";
|
|
3625
3751
|
function useFontsLoaded() {
|
|
3626
|
-
const [loaded, setLoaded] =
|
|
3752
|
+
const [loaded, setLoaded] = useState4(areFontsLoaded());
|
|
3627
3753
|
useEffect3(() => {
|
|
3628
3754
|
if (!loaded) {
|
|
3629
3755
|
preloadFonts().then(() => setLoaded(true)).catch(console.error);
|
|
@@ -3632,7 +3758,7 @@ function useFontsLoaded() {
|
|
|
3632
3758
|
return loaded;
|
|
3633
3759
|
}
|
|
3634
3760
|
function useImageLoader(src) {
|
|
3635
|
-
const [image, setImage] =
|
|
3761
|
+
const [image, setImage] = useState4(null);
|
|
3636
3762
|
useEffect3(() => {
|
|
3637
3763
|
if (!src) {
|
|
3638
3764
|
setImage(null);
|
|
@@ -3653,8 +3779,8 @@ function useImageLoader(src) {
|
|
|
3653
3779
|
return image;
|
|
3654
3780
|
}
|
|
3655
3781
|
function useImagePreloader(sources) {
|
|
3656
|
-
const [images, setImages] =
|
|
3657
|
-
const [loaded, setLoaded] =
|
|
3782
|
+
const [images, setImages] = useState4({});
|
|
3783
|
+
const [loaded, setLoaded] = useState4(false);
|
|
3658
3784
|
useEffect3(() => {
|
|
3659
3785
|
const entries = Object.entries(sources);
|
|
3660
3786
|
if (entries.length === 0) {
|
|
@@ -3704,7 +3830,7 @@ function useResolvedPositions(elements, textValues) {
|
|
|
3704
3830
|
// src/Root.tsx
|
|
3705
3831
|
import { Composition } from "remotion";
|
|
3706
3832
|
import { z } from "zod";
|
|
3707
|
-
import { Fragment, jsx as
|
|
3833
|
+
import { Fragment as Fragment2, jsx as jsx24, jsxs as jsxs17 } from "react/jsx-runtime";
|
|
3708
3834
|
var defaultImageProps = {
|
|
3709
3835
|
config: {
|
|
3710
3836
|
width: 1080,
|
|
@@ -3884,8 +4010,10 @@ var readReceiptSchema = z.object({
|
|
|
3884
4010
|
timestamp: z.string().optional().describe("Timestamp text")
|
|
3885
4011
|
});
|
|
3886
4012
|
var instagramDmSchema = z.object({
|
|
4013
|
+
// Debug overlay
|
|
4014
|
+
showDebugOverlay: z.boolean().optional().default(true).describe("Show debug overlay with mouse coordinates"),
|
|
3887
4015
|
// Reference overlay
|
|
3888
|
-
referenceImageUrl: z.string().optional().default("https://n14dcpakf8w1fekl.public.blob.vercel-storage.com/media/8ff1462b-13d7-4abe-9325-0a6ad19004f0/
|
|
4016
|
+
referenceImageUrl: z.string().optional().default("https://n14dcpakf8w1fekl.public.blob.vercel-storage.com/media/8ff1462b-13d7-4abe-9325-0a6ad19004f0/IMG_3171-DmKgZAYCYJpLxiZjJBYYCk4mynmjkv.png").describe("Reference screenshot URL"),
|
|
3889
4017
|
referenceOpacity: z.number().optional().default(50).describe("Reference overlay opacity (0-100)"),
|
|
3890
4018
|
// Canvas
|
|
3891
4019
|
width: z.number().optional().default(1206).describe("Canvas width (px)"),
|
|
@@ -3965,8 +4093,8 @@ var calculateImageMetadata = async ({ props }) => {
|
|
|
3965
4093
|
};
|
|
3966
4094
|
};
|
|
3967
4095
|
var RenderRoot = () => {
|
|
3968
|
-
return /* @__PURE__ */
|
|
3969
|
-
/* @__PURE__ */
|
|
4096
|
+
return /* @__PURE__ */ jsxs17(Fragment2, { children: [
|
|
4097
|
+
/* @__PURE__ */ jsx24(
|
|
3970
4098
|
Composition,
|
|
3971
4099
|
{
|
|
3972
4100
|
id: "ImageEditorComposition",
|
|
@@ -3979,7 +4107,7 @@ var RenderRoot = () => {
|
|
|
3979
4107
|
defaultProps: defaultImageProps
|
|
3980
4108
|
}
|
|
3981
4109
|
),
|
|
3982
|
-
/* @__PURE__ */
|
|
4110
|
+
/* @__PURE__ */ jsx24(
|
|
3983
4111
|
Composition,
|
|
3984
4112
|
{
|
|
3985
4113
|
id: "VideoEditorComposition",
|
|
@@ -3991,7 +4119,7 @@ var RenderRoot = () => {
|
|
|
3991
4119
|
defaultProps: defaultVideoProps
|
|
3992
4120
|
}
|
|
3993
4121
|
),
|
|
3994
|
-
/* @__PURE__ */
|
|
4122
|
+
/* @__PURE__ */ jsx24(
|
|
3995
4123
|
Composition,
|
|
3996
4124
|
{
|
|
3997
4125
|
id: "AutoCaptionComposition",
|
|
@@ -4003,7 +4131,7 @@ var RenderRoot = () => {
|
|
|
4003
4131
|
defaultProps: defaultAutoCaptionProps
|
|
4004
4132
|
}
|
|
4005
4133
|
),
|
|
4006
|
-
/* @__PURE__ */
|
|
4134
|
+
/* @__PURE__ */ jsx24(
|
|
4007
4135
|
Composition,
|
|
4008
4136
|
{
|
|
4009
4137
|
id: "ScreenshotAnimationComposition",
|
|
@@ -4016,7 +4144,7 @@ var RenderRoot = () => {
|
|
|
4016
4144
|
defaultProps: defaultScreenshotAnimationProps
|
|
4017
4145
|
}
|
|
4018
4146
|
),
|
|
4019
|
-
/* @__PURE__ */
|
|
4147
|
+
/* @__PURE__ */ jsx24(
|
|
4020
4148
|
Composition,
|
|
4021
4149
|
{
|
|
4022
4150
|
id: "InstagramDmComposition",
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "ugcinc-render",
|
|
3
|
-
"version": "1.8.
|
|
3
|
+
"version": "1.8.55",
|
|
4
4
|
"description": "Unified rendering package for UGC Inc - shared types, components, and compositions for pixel-perfect client/server rendering",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"module": "dist/index.mjs",
|