ugcinc-render 1.8.124 → 1.8.126

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 CHANGED
@@ -800,6 +800,44 @@ interface InstagramDmCompositionProps {
800
800
  videoIconBottom?: number;
801
801
  videoIconLeft?: number;
802
802
  videoIconRight?: number;
803
+ flagTop?: number;
804
+ flagBottom?: number;
805
+ flagLeft?: number;
806
+ flagRight?: number;
807
+ cellLevel?: number;
808
+ cellBar1Top?: number;
809
+ cellBar1Bottom?: number;
810
+ cellBar1Left?: number;
811
+ cellBar1Right?: number;
812
+ cellBar2Top?: number;
813
+ cellBar2Bottom?: number;
814
+ cellBar2Left?: number;
815
+ cellBar2Right?: number;
816
+ cellBar3Top?: number;
817
+ cellBar3Bottom?: number;
818
+ cellBar3Left?: number;
819
+ cellBar3Right?: number;
820
+ cellBar4Top?: number;
821
+ cellBar4Bottom?: number;
822
+ cellBar4Left?: number;
823
+ cellBar4Right?: number;
824
+ wifiLevel?: number;
825
+ wifiBottomTop?: number;
826
+ wifiBottomBottom?: number;
827
+ wifiBottomLeft?: number;
828
+ wifiBottomRight?: number;
829
+ wifiMiddleTop?: number;
830
+ wifiMiddleBottom?: number;
831
+ wifiMiddleLeft?: number;
832
+ wifiMiddleRight?: number;
833
+ wifiTopTop?: number;
834
+ wifiTopBottom?: number;
835
+ wifiTopLeft?: number;
836
+ wifiTopRight?: number;
837
+ batteryTop?: number;
838
+ batteryBottom?: number;
839
+ batteryLeft?: number;
840
+ batteryRight?: number;
803
841
  }
804
842
 
805
843
  /**
package/dist/index.d.ts CHANGED
@@ -800,6 +800,44 @@ interface InstagramDmCompositionProps {
800
800
  videoIconBottom?: number;
801
801
  videoIconLeft?: number;
802
802
  videoIconRight?: number;
803
+ flagTop?: number;
804
+ flagBottom?: number;
805
+ flagLeft?: number;
806
+ flagRight?: number;
807
+ cellLevel?: number;
808
+ cellBar1Top?: number;
809
+ cellBar1Bottom?: number;
810
+ cellBar1Left?: number;
811
+ cellBar1Right?: number;
812
+ cellBar2Top?: number;
813
+ cellBar2Bottom?: number;
814
+ cellBar2Left?: number;
815
+ cellBar2Right?: number;
816
+ cellBar3Top?: number;
817
+ cellBar3Bottom?: number;
818
+ cellBar3Left?: number;
819
+ cellBar3Right?: number;
820
+ cellBar4Top?: number;
821
+ cellBar4Bottom?: number;
822
+ cellBar4Left?: number;
823
+ cellBar4Right?: number;
824
+ wifiLevel?: number;
825
+ wifiBottomTop?: number;
826
+ wifiBottomBottom?: number;
827
+ wifiBottomLeft?: number;
828
+ wifiBottomRight?: number;
829
+ wifiMiddleTop?: number;
830
+ wifiMiddleBottom?: number;
831
+ wifiMiddleLeft?: number;
832
+ wifiMiddleRight?: number;
833
+ wifiTopTop?: number;
834
+ wifiTopBottom?: number;
835
+ wifiTopLeft?: number;
836
+ wifiTopRight?: number;
837
+ batteryTop?: number;
838
+ batteryBottom?: number;
839
+ batteryLeft?: number;
840
+ batteryRight?: number;
803
841
  }
804
842
 
805
843
  /**
package/dist/index.js CHANGED
@@ -3435,7 +3435,9 @@ var ICON_INPUT_IDS = {
3435
3435
  noNotis: "ig-no-notis",
3436
3436
  smilePlus: "ig-smile-plus",
3437
3437
  phone: "ig-phone",
3438
- video: "ig-video"
3438
+ video: "ig-video",
3439
+ flag: "ig-flag",
3440
+ battery: "ig-battery"
3439
3441
  };
3440
3442
  var USER_PFP_INPUT_ID = "user-pfp";
3441
3443
  var HEADER_DEFAULTS = {
@@ -3468,7 +3470,15 @@ var HEADER_DEFAULTS = {
3468
3470
  videoIconTop: 240,
3469
3471
  videoIconBottom: 300,
3470
3472
  videoIconLeft: 948,
3471
- videoIconRight: 1020
3473
+ videoIconRight: 1020,
3474
+ flagTop: 240,
3475
+ flagBottom: 302,
3476
+ flagLeft: 1096,
3477
+ flagRight: 1152,
3478
+ batteryTop: 78,
3479
+ batteryBottom: 116,
3480
+ batteryLeft: 1018,
3481
+ batteryRight: 1099
3472
3482
  };
3473
3483
  function generateHeaderElements(props) {
3474
3484
  const elements = [];
@@ -3578,6 +3588,40 @@ function generateHeaderElements(props) {
3578
3588
  inputId: ICON_INPUT_IDS.video,
3579
3589
  fit: "fill"
3580
3590
  });
3591
+ const flagTop = props.flagTop ?? HEADER_DEFAULTS.flagTop;
3592
+ const flagBottom = props.flagBottom ?? HEADER_DEFAULTS.flagBottom;
3593
+ const flagLeft = props.flagLeft ?? HEADER_DEFAULTS.flagLeft;
3594
+ const flagRight = props.flagRight ?? HEADER_DEFAULTS.flagRight;
3595
+ const flagWidth = flagRight - flagLeft;
3596
+ const flagHeight = flagBottom - flagTop;
3597
+ elements.push({
3598
+ id: "flag-icon",
3599
+ type: "image",
3600
+ x: flagLeft,
3601
+ y: flagTop,
3602
+ width: flagWidth,
3603
+ height: flagHeight,
3604
+ zIndex: 30,
3605
+ inputId: ICON_INPUT_IDS.flag,
3606
+ fit: "fill"
3607
+ });
3608
+ const batteryTop = props.batteryTop ?? HEADER_DEFAULTS.batteryTop;
3609
+ const batteryBottom = props.batteryBottom ?? HEADER_DEFAULTS.batteryBottom;
3610
+ const batteryLeft = props.batteryLeft ?? HEADER_DEFAULTS.batteryLeft;
3611
+ const batteryRight = props.batteryRight ?? HEADER_DEFAULTS.batteryRight;
3612
+ const batteryWidth = batteryRight - batteryLeft;
3613
+ const batteryHeight = batteryBottom - batteryTop;
3614
+ elements.push({
3615
+ id: "battery-icon",
3616
+ type: "image",
3617
+ x: batteryLeft,
3618
+ y: batteryTop,
3619
+ width: batteryWidth,
3620
+ height: batteryHeight,
3621
+ zIndex: 30,
3622
+ inputId: ICON_INPUT_IDS.battery,
3623
+ fit: "fill"
3624
+ });
3581
3625
  return elements;
3582
3626
  }
3583
3627
  function generateFooterIconElements(props) {
@@ -4079,6 +4123,8 @@ function buildImageUrls(props) {
4079
4123
  imageUrls[ICON_INPUT_IDS.smilePlus] = (0, import_remotion8.staticFile)("ig-smile-plus.png");
4080
4124
  imageUrls[ICON_INPUT_IDS.phone] = (0, import_remotion8.staticFile)("ig-phone.png");
4081
4125
  imageUrls[ICON_INPUT_IDS.video] = (0, import_remotion8.staticFile)("ig-video.png");
4126
+ imageUrls[ICON_INPUT_IDS.flag] = (0, import_remotion8.staticFile)("ig-flag.png");
4127
+ imageUrls[ICON_INPUT_IDS.battery] = (0, import_remotion8.staticFile)("ig-battery.png");
4082
4128
  if (props.profilePicUrl) {
4083
4129
  imageUrls[PROFILE_PIC_INPUT_ID] = props.profilePicUrl;
4084
4130
  }
@@ -4253,7 +4299,49 @@ var defaultInstagramDmProps = {
4253
4299
  videoIconTop: 240,
4254
4300
  videoIconBottom: 300,
4255
4301
  videoIconLeft: 948,
4256
- videoIconRight: 1020
4302
+ videoIconRight: 1020,
4303
+ // Header - Flag icon
4304
+ flagTop: 240,
4305
+ flagBottom: 302,
4306
+ flagLeft: 1096,
4307
+ flagRight: 1152,
4308
+ // Status bar - Cell signal
4309
+ cellLevel: 4,
4310
+ cellBar1Top: 102,
4311
+ cellBar1Bottom: 115,
4312
+ cellBar1Left: 865,
4313
+ cellBar1Right: 874,
4314
+ cellBar2Top: 95,
4315
+ cellBar2Bottom: 115,
4316
+ cellBar2Left: 881,
4317
+ cellBar2Right: 890,
4318
+ cellBar3Top: 87,
4319
+ cellBar3Bottom: 115,
4320
+ cellBar3Left: 897,
4321
+ cellBar3Right: 906,
4322
+ cellBar4Top: 79,
4323
+ cellBar4Bottom: 115,
4324
+ cellBar4Left: 913,
4325
+ cellBar4Right: 922,
4326
+ // Status bar - WiFi signal
4327
+ wifiLevel: 3,
4328
+ wifiBottomTop: 104,
4329
+ wifiBottomBottom: 115,
4330
+ wifiBottomLeft: 963,
4331
+ wifiBottomRight: 977,
4332
+ wifiMiddleTop: 91,
4333
+ wifiMiddleBottom: 103,
4334
+ wifiMiddleLeft: 954,
4335
+ wifiMiddleRight: 986,
4336
+ wifiTopTop: 79,
4337
+ wifiTopBottom: 94,
4338
+ wifiTopLeft: 945,
4339
+ wifiTopRight: 995,
4340
+ // Status bar - Battery
4341
+ batteryTop: 78,
4342
+ batteryBottom: 116,
4343
+ batteryLeft: 1018,
4344
+ batteryRight: 1099
4257
4345
  };
4258
4346
  function InstagramDmComposition(props) {
4259
4347
  const {
@@ -4271,7 +4359,39 @@ function InstagramDmComposition(props) {
4271
4359
  userStoryRingLeft = 168,
4272
4360
  userStoryRingRight = 288,
4273
4361
  userStoryRingColor = "#5e656d",
4274
- userStoryRingWidth = 6
4362
+ userStoryRingWidth = 6,
4363
+ // Cell signal props
4364
+ cellLevel = 4,
4365
+ cellBar1Top = 102,
4366
+ cellBar1Bottom = 115,
4367
+ cellBar1Left = 865,
4368
+ cellBar1Right = 874,
4369
+ cellBar2Top = 95,
4370
+ cellBar2Bottom = 115,
4371
+ cellBar2Left = 881,
4372
+ cellBar2Right = 890,
4373
+ cellBar3Top = 87,
4374
+ cellBar3Bottom = 115,
4375
+ cellBar3Left = 897,
4376
+ cellBar3Right = 906,
4377
+ cellBar4Top = 79,
4378
+ cellBar4Bottom = 115,
4379
+ cellBar4Left = 913,
4380
+ cellBar4Right = 922,
4381
+ // WiFi signal props
4382
+ wifiLevel = 3,
4383
+ wifiBottomTop = 104,
4384
+ wifiBottomBottom = 115,
4385
+ wifiBottomLeft = 963,
4386
+ wifiBottomRight = 977,
4387
+ wifiMiddleTop = 91,
4388
+ wifiMiddleBottom = 103,
4389
+ wifiMiddleLeft = 954,
4390
+ wifiMiddleRight = 986,
4391
+ wifiTopTop = 79,
4392
+ wifiTopBottom = 94,
4393
+ wifiTopLeft = 945,
4394
+ wifiTopRight = 995
4275
4395
  } = props;
4276
4396
  const clampedReferenceOpacity = Math.max(0, Math.min(100, referenceOpacity));
4277
4397
  const [zoom, setZoom] = (0, import_react8.useState)(100);
@@ -4365,6 +4485,121 @@ function InstagramDmComposition(props) {
4365
4485
  }
4366
4486
  }
4367
4487
  ),
4488
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
4489
+ "div",
4490
+ {
4491
+ style: {
4492
+ position: "absolute",
4493
+ top: cellBar1Top,
4494
+ left: cellBar1Left,
4495
+ width: cellBar1Right - cellBar1Left,
4496
+ height: cellBar1Bottom - cellBar1Top,
4497
+ backgroundColor: cellLevel >= 1 ? "#fefefe" : "#3c4043",
4498
+ borderRadius: 2,
4499
+ pointerEvents: "none",
4500
+ zIndex: 30
4501
+ }
4502
+ }
4503
+ ),
4504
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
4505
+ "div",
4506
+ {
4507
+ style: {
4508
+ position: "absolute",
4509
+ top: cellBar2Top,
4510
+ left: cellBar2Left,
4511
+ width: cellBar2Right - cellBar2Left,
4512
+ height: cellBar2Bottom - cellBar2Top,
4513
+ backgroundColor: cellLevel >= 2 ? "#fefefe" : "#3c4043",
4514
+ borderRadius: 2,
4515
+ pointerEvents: "none",
4516
+ zIndex: 30
4517
+ }
4518
+ }
4519
+ ),
4520
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
4521
+ "div",
4522
+ {
4523
+ style: {
4524
+ position: "absolute",
4525
+ top: cellBar3Top,
4526
+ left: cellBar3Left,
4527
+ width: cellBar3Right - cellBar3Left,
4528
+ height: cellBar3Bottom - cellBar3Top,
4529
+ backgroundColor: cellLevel >= 3 ? "#fefefe" : "#3c4043",
4530
+ borderRadius: 2,
4531
+ pointerEvents: "none",
4532
+ zIndex: 30
4533
+ }
4534
+ }
4535
+ ),
4536
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
4537
+ "div",
4538
+ {
4539
+ style: {
4540
+ position: "absolute",
4541
+ top: cellBar4Top,
4542
+ left: cellBar4Left,
4543
+ width: cellBar4Right - cellBar4Left,
4544
+ height: cellBar4Bottom - cellBar4Top,
4545
+ backgroundColor: cellLevel >= 4 ? "#fefefe" : "#3c4043",
4546
+ borderRadius: 2,
4547
+ pointerEvents: "none",
4548
+ zIndex: 30
4549
+ }
4550
+ }
4551
+ ),
4552
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
4553
+ import_remotion9.Img,
4554
+ {
4555
+ src: (0, import_remotion9.staticFile)("ig-wifi-bottom.png"),
4556
+ style: {
4557
+ position: "absolute",
4558
+ top: wifiBottomTop,
4559
+ left: wifiBottomLeft,
4560
+ width: wifiBottomRight - wifiBottomLeft,
4561
+ height: wifiBottomBottom - wifiBottomTop,
4562
+ objectFit: "fill",
4563
+ pointerEvents: "none",
4564
+ zIndex: 30,
4565
+ filter: wifiLevel >= 1 ? "none" : "brightness(0.25)"
4566
+ }
4567
+ }
4568
+ ),
4569
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
4570
+ import_remotion9.Img,
4571
+ {
4572
+ src: (0, import_remotion9.staticFile)("ig-wifi-middle.png"),
4573
+ style: {
4574
+ position: "absolute",
4575
+ top: wifiMiddleTop,
4576
+ left: wifiMiddleLeft,
4577
+ width: wifiMiddleRight - wifiMiddleLeft,
4578
+ height: wifiMiddleBottom - wifiMiddleTop,
4579
+ objectFit: "fill",
4580
+ pointerEvents: "none",
4581
+ zIndex: 30,
4582
+ filter: wifiLevel >= 2 ? "none" : "brightness(0.25)"
4583
+ }
4584
+ }
4585
+ ),
4586
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
4587
+ import_remotion9.Img,
4588
+ {
4589
+ src: (0, import_remotion9.staticFile)("ig-wifi-top.png"),
4590
+ style: {
4591
+ position: "absolute",
4592
+ top: wifiTopTop,
4593
+ left: wifiTopLeft,
4594
+ width: wifiTopRight - wifiTopLeft,
4595
+ height: wifiTopBottom - wifiTopTop,
4596
+ objectFit: "fill",
4597
+ pointerEvents: "none",
4598
+ zIndex: 30,
4599
+ filter: wifiLevel >= 3 ? "none" : "brightness(0.25)"
4600
+ }
4601
+ }
4602
+ ),
4368
4603
  referenceImageUrl && showReferenceImage && (!showDebugOverlay || referenceVisible) && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
4369
4604
  "div",
4370
4605
  {
@@ -5485,7 +5720,49 @@ var instagramDmSchema = import_zod.z.object({
5485
5720
  videoIconTop: import_zod.z.number().optional().default(240).describe("Video icon top Y"),
5486
5721
  videoIconBottom: import_zod.z.number().optional().default(300).describe("Video icon bottom Y"),
5487
5722
  videoIconLeft: import_zod.z.number().optional().default(948).describe("Video icon left X"),
5488
- videoIconRight: import_zod.z.number().optional().default(1020).describe("Video icon right X")
5723
+ videoIconRight: import_zod.z.number().optional().default(1020).describe("Video icon right X"),
5724
+ // Header - Flag icon
5725
+ flagTop: import_zod.z.number().optional().default(240).describe("Flag icon top Y"),
5726
+ flagBottom: import_zod.z.number().optional().default(302).describe("Flag icon bottom Y"),
5727
+ flagLeft: import_zod.z.number().optional().default(1096).describe("Flag icon left X"),
5728
+ flagRight: import_zod.z.number().optional().default(1152).describe("Flag icon right X"),
5729
+ // Status bar - Cell signal (0-4)
5730
+ cellLevel: import_zod.z.number().min(0).max(4).optional().default(4).describe("Cell signal level (0-4)"),
5731
+ cellBar1Top: import_zod.z.number().optional().default(102).describe("Cell bar 1 top Y"),
5732
+ cellBar1Bottom: import_zod.z.number().optional().default(115).describe("Cell bar 1 bottom Y"),
5733
+ cellBar1Left: import_zod.z.number().optional().default(865).describe("Cell bar 1 left X"),
5734
+ cellBar1Right: import_zod.z.number().optional().default(874).describe("Cell bar 1 right X"),
5735
+ cellBar2Top: import_zod.z.number().optional().default(95).describe("Cell bar 2 top Y"),
5736
+ cellBar2Bottom: import_zod.z.number().optional().default(115).describe("Cell bar 2 bottom Y"),
5737
+ cellBar2Left: import_zod.z.number().optional().default(881).describe("Cell bar 2 left X"),
5738
+ cellBar2Right: import_zod.z.number().optional().default(890).describe("Cell bar 2 right X"),
5739
+ cellBar3Top: import_zod.z.number().optional().default(87).describe("Cell bar 3 top Y"),
5740
+ cellBar3Bottom: import_zod.z.number().optional().default(115).describe("Cell bar 3 bottom Y"),
5741
+ cellBar3Left: import_zod.z.number().optional().default(897).describe("Cell bar 3 left X"),
5742
+ cellBar3Right: import_zod.z.number().optional().default(906).describe("Cell bar 3 right X"),
5743
+ cellBar4Top: import_zod.z.number().optional().default(79).describe("Cell bar 4 top Y"),
5744
+ cellBar4Bottom: import_zod.z.number().optional().default(115).describe("Cell bar 4 bottom Y"),
5745
+ cellBar4Left: import_zod.z.number().optional().default(913).describe("Cell bar 4 left X"),
5746
+ cellBar4Right: import_zod.z.number().optional().default(922).describe("Cell bar 4 right X"),
5747
+ // Status bar - WiFi signal (0-3)
5748
+ wifiLevel: import_zod.z.number().min(0).max(3).optional().default(3).describe("WiFi signal level (0-3)"),
5749
+ wifiBottomTop: import_zod.z.number().optional().default(104).describe("WiFi bottom bar top Y"),
5750
+ wifiBottomBottom: import_zod.z.number().optional().default(115).describe("WiFi bottom bar bottom Y"),
5751
+ wifiBottomLeft: import_zod.z.number().optional().default(963).describe("WiFi bottom bar left X"),
5752
+ wifiBottomRight: import_zod.z.number().optional().default(977).describe("WiFi bottom bar right X"),
5753
+ wifiMiddleTop: import_zod.z.number().optional().default(91).describe("WiFi middle bar top Y"),
5754
+ wifiMiddleBottom: import_zod.z.number().optional().default(103).describe("WiFi middle bar bottom Y"),
5755
+ wifiMiddleLeft: import_zod.z.number().optional().default(954).describe("WiFi middle bar left X"),
5756
+ wifiMiddleRight: import_zod.z.number().optional().default(986).describe("WiFi middle bar right X"),
5757
+ wifiTopTop: import_zod.z.number().optional().default(79).describe("WiFi top bar top Y"),
5758
+ wifiTopBottom: import_zod.z.number().optional().default(94).describe("WiFi top bar bottom Y"),
5759
+ wifiTopLeft: import_zod.z.number().optional().default(945).describe("WiFi top bar left X"),
5760
+ wifiTopRight: import_zod.z.number().optional().default(995).describe("WiFi top bar right X"),
5761
+ // Status bar - Battery icon
5762
+ batteryTop: import_zod.z.number().optional().default(78).describe("Battery icon top Y"),
5763
+ batteryBottom: import_zod.z.number().optional().default(116).describe("Battery icon bottom Y"),
5764
+ batteryLeft: import_zod.z.number().optional().default(1018).describe("Battery icon left X"),
5765
+ batteryRight: import_zod.z.number().optional().default(1099).describe("Battery icon right X")
5489
5766
  });
5490
5767
  var ImageComp = ImageEditorComposition;
5491
5768
  var VideoComp = VideoEditorComposition;
package/dist/index.mjs CHANGED
@@ -1948,7 +1948,7 @@ function ScreenshotAnimation({
1948
1948
 
1949
1949
  // src/compositions/InstagramDmComposition/index.tsx
1950
1950
  import { useCallback as useCallback2, useEffect as useEffect3, useMemo as useMemo7, useState as useState3 } from "react";
1951
- import { AbsoluteFill as AbsoluteFill5, Img as Img4, continueRender as continueRender2, delayRender as delayRender2 } from "remotion";
1951
+ import { AbsoluteFill as AbsoluteFill5, Img as Img4, continueRender as continueRender2, delayRender as delayRender2, staticFile as staticFile2 } from "remotion";
1952
1952
 
1953
1953
  // src/compositions/InstagramDmComposition/theme.ts
1954
1954
  var IG_THEME_COLORS = {
@@ -2504,7 +2504,9 @@ var ICON_INPUT_IDS = {
2504
2504
  noNotis: "ig-no-notis",
2505
2505
  smilePlus: "ig-smile-plus",
2506
2506
  phone: "ig-phone",
2507
- video: "ig-video"
2507
+ video: "ig-video",
2508
+ flag: "ig-flag",
2509
+ battery: "ig-battery"
2508
2510
  };
2509
2511
  var USER_PFP_INPUT_ID = "user-pfp";
2510
2512
  var HEADER_DEFAULTS = {
@@ -2537,7 +2539,15 @@ var HEADER_DEFAULTS = {
2537
2539
  videoIconTop: 240,
2538
2540
  videoIconBottom: 300,
2539
2541
  videoIconLeft: 948,
2540
- videoIconRight: 1020
2542
+ videoIconRight: 1020,
2543
+ flagTop: 240,
2544
+ flagBottom: 302,
2545
+ flagLeft: 1096,
2546
+ flagRight: 1152,
2547
+ batteryTop: 78,
2548
+ batteryBottom: 116,
2549
+ batteryLeft: 1018,
2550
+ batteryRight: 1099
2541
2551
  };
2542
2552
  function generateHeaderElements(props) {
2543
2553
  const elements = [];
@@ -2647,6 +2657,40 @@ function generateHeaderElements(props) {
2647
2657
  inputId: ICON_INPUT_IDS.video,
2648
2658
  fit: "fill"
2649
2659
  });
2660
+ const flagTop = props.flagTop ?? HEADER_DEFAULTS.flagTop;
2661
+ const flagBottom = props.flagBottom ?? HEADER_DEFAULTS.flagBottom;
2662
+ const flagLeft = props.flagLeft ?? HEADER_DEFAULTS.flagLeft;
2663
+ const flagRight = props.flagRight ?? HEADER_DEFAULTS.flagRight;
2664
+ const flagWidth = flagRight - flagLeft;
2665
+ const flagHeight = flagBottom - flagTop;
2666
+ elements.push({
2667
+ id: "flag-icon",
2668
+ type: "image",
2669
+ x: flagLeft,
2670
+ y: flagTop,
2671
+ width: flagWidth,
2672
+ height: flagHeight,
2673
+ zIndex: 30,
2674
+ inputId: ICON_INPUT_IDS.flag,
2675
+ fit: "fill"
2676
+ });
2677
+ const batteryTop = props.batteryTop ?? HEADER_DEFAULTS.batteryTop;
2678
+ const batteryBottom = props.batteryBottom ?? HEADER_DEFAULTS.batteryBottom;
2679
+ const batteryLeft = props.batteryLeft ?? HEADER_DEFAULTS.batteryLeft;
2680
+ const batteryRight = props.batteryRight ?? HEADER_DEFAULTS.batteryRight;
2681
+ const batteryWidth = batteryRight - batteryLeft;
2682
+ const batteryHeight = batteryBottom - batteryTop;
2683
+ elements.push({
2684
+ id: "battery-icon",
2685
+ type: "image",
2686
+ x: batteryLeft,
2687
+ y: batteryTop,
2688
+ width: batteryWidth,
2689
+ height: batteryHeight,
2690
+ zIndex: 30,
2691
+ inputId: ICON_INPUT_IDS.battery,
2692
+ fit: "fill"
2693
+ });
2650
2694
  return elements;
2651
2695
  }
2652
2696
  function generateFooterIconElements(props) {
@@ -3148,6 +3192,8 @@ function buildImageUrls(props) {
3148
3192
  imageUrls[ICON_INPUT_IDS.smilePlus] = staticFile("ig-smile-plus.png");
3149
3193
  imageUrls[ICON_INPUT_IDS.phone] = staticFile("ig-phone.png");
3150
3194
  imageUrls[ICON_INPUT_IDS.video] = staticFile("ig-video.png");
3195
+ imageUrls[ICON_INPUT_IDS.flag] = staticFile("ig-flag.png");
3196
+ imageUrls[ICON_INPUT_IDS.battery] = staticFile("ig-battery.png");
3151
3197
  if (props.profilePicUrl) {
3152
3198
  imageUrls[PROFILE_PIC_INPUT_ID] = props.profilePicUrl;
3153
3199
  }
@@ -3322,7 +3368,49 @@ var defaultInstagramDmProps = {
3322
3368
  videoIconTop: 240,
3323
3369
  videoIconBottom: 300,
3324
3370
  videoIconLeft: 948,
3325
- videoIconRight: 1020
3371
+ videoIconRight: 1020,
3372
+ // Header - Flag icon
3373
+ flagTop: 240,
3374
+ flagBottom: 302,
3375
+ flagLeft: 1096,
3376
+ flagRight: 1152,
3377
+ // Status bar - Cell signal
3378
+ cellLevel: 4,
3379
+ cellBar1Top: 102,
3380
+ cellBar1Bottom: 115,
3381
+ cellBar1Left: 865,
3382
+ cellBar1Right: 874,
3383
+ cellBar2Top: 95,
3384
+ cellBar2Bottom: 115,
3385
+ cellBar2Left: 881,
3386
+ cellBar2Right: 890,
3387
+ cellBar3Top: 87,
3388
+ cellBar3Bottom: 115,
3389
+ cellBar3Left: 897,
3390
+ cellBar3Right: 906,
3391
+ cellBar4Top: 79,
3392
+ cellBar4Bottom: 115,
3393
+ cellBar4Left: 913,
3394
+ cellBar4Right: 922,
3395
+ // Status bar - WiFi signal
3396
+ wifiLevel: 3,
3397
+ wifiBottomTop: 104,
3398
+ wifiBottomBottom: 115,
3399
+ wifiBottomLeft: 963,
3400
+ wifiBottomRight: 977,
3401
+ wifiMiddleTop: 91,
3402
+ wifiMiddleBottom: 103,
3403
+ wifiMiddleLeft: 954,
3404
+ wifiMiddleRight: 986,
3405
+ wifiTopTop: 79,
3406
+ wifiTopBottom: 94,
3407
+ wifiTopLeft: 945,
3408
+ wifiTopRight: 995,
3409
+ // Status bar - Battery
3410
+ batteryTop: 78,
3411
+ batteryBottom: 116,
3412
+ batteryLeft: 1018,
3413
+ batteryRight: 1099
3326
3414
  };
3327
3415
  function InstagramDmComposition(props) {
3328
3416
  const {
@@ -3340,7 +3428,39 @@ function InstagramDmComposition(props) {
3340
3428
  userStoryRingLeft = 168,
3341
3429
  userStoryRingRight = 288,
3342
3430
  userStoryRingColor = "#5e656d",
3343
- userStoryRingWidth = 6
3431
+ userStoryRingWidth = 6,
3432
+ // Cell signal props
3433
+ cellLevel = 4,
3434
+ cellBar1Top = 102,
3435
+ cellBar1Bottom = 115,
3436
+ cellBar1Left = 865,
3437
+ cellBar1Right = 874,
3438
+ cellBar2Top = 95,
3439
+ cellBar2Bottom = 115,
3440
+ cellBar2Left = 881,
3441
+ cellBar2Right = 890,
3442
+ cellBar3Top = 87,
3443
+ cellBar3Bottom = 115,
3444
+ cellBar3Left = 897,
3445
+ cellBar3Right = 906,
3446
+ cellBar4Top = 79,
3447
+ cellBar4Bottom = 115,
3448
+ cellBar4Left = 913,
3449
+ cellBar4Right = 922,
3450
+ // WiFi signal props
3451
+ wifiLevel = 3,
3452
+ wifiBottomTop = 104,
3453
+ wifiBottomBottom = 115,
3454
+ wifiBottomLeft = 963,
3455
+ wifiBottomRight = 977,
3456
+ wifiMiddleTop = 91,
3457
+ wifiMiddleBottom = 103,
3458
+ wifiMiddleLeft = 954,
3459
+ wifiMiddleRight = 986,
3460
+ wifiTopTop = 79,
3461
+ wifiTopBottom = 94,
3462
+ wifiTopLeft = 945,
3463
+ wifiTopRight = 995
3344
3464
  } = props;
3345
3465
  const clampedReferenceOpacity = Math.max(0, Math.min(100, referenceOpacity));
3346
3466
  const [zoom, setZoom] = useState3(100);
@@ -3434,6 +3554,121 @@ function InstagramDmComposition(props) {
3434
3554
  }
3435
3555
  }
3436
3556
  ),
3557
+ /* @__PURE__ */ jsx10(
3558
+ "div",
3559
+ {
3560
+ style: {
3561
+ position: "absolute",
3562
+ top: cellBar1Top,
3563
+ left: cellBar1Left,
3564
+ width: cellBar1Right - cellBar1Left,
3565
+ height: cellBar1Bottom - cellBar1Top,
3566
+ backgroundColor: cellLevel >= 1 ? "#fefefe" : "#3c4043",
3567
+ borderRadius: 2,
3568
+ pointerEvents: "none",
3569
+ zIndex: 30
3570
+ }
3571
+ }
3572
+ ),
3573
+ /* @__PURE__ */ jsx10(
3574
+ "div",
3575
+ {
3576
+ style: {
3577
+ position: "absolute",
3578
+ top: cellBar2Top,
3579
+ left: cellBar2Left,
3580
+ width: cellBar2Right - cellBar2Left,
3581
+ height: cellBar2Bottom - cellBar2Top,
3582
+ backgroundColor: cellLevel >= 2 ? "#fefefe" : "#3c4043",
3583
+ borderRadius: 2,
3584
+ pointerEvents: "none",
3585
+ zIndex: 30
3586
+ }
3587
+ }
3588
+ ),
3589
+ /* @__PURE__ */ jsx10(
3590
+ "div",
3591
+ {
3592
+ style: {
3593
+ position: "absolute",
3594
+ top: cellBar3Top,
3595
+ left: cellBar3Left,
3596
+ width: cellBar3Right - cellBar3Left,
3597
+ height: cellBar3Bottom - cellBar3Top,
3598
+ backgroundColor: cellLevel >= 3 ? "#fefefe" : "#3c4043",
3599
+ borderRadius: 2,
3600
+ pointerEvents: "none",
3601
+ zIndex: 30
3602
+ }
3603
+ }
3604
+ ),
3605
+ /* @__PURE__ */ jsx10(
3606
+ "div",
3607
+ {
3608
+ style: {
3609
+ position: "absolute",
3610
+ top: cellBar4Top,
3611
+ left: cellBar4Left,
3612
+ width: cellBar4Right - cellBar4Left,
3613
+ height: cellBar4Bottom - cellBar4Top,
3614
+ backgroundColor: cellLevel >= 4 ? "#fefefe" : "#3c4043",
3615
+ borderRadius: 2,
3616
+ pointerEvents: "none",
3617
+ zIndex: 30
3618
+ }
3619
+ }
3620
+ ),
3621
+ /* @__PURE__ */ jsx10(
3622
+ Img4,
3623
+ {
3624
+ src: staticFile2("ig-wifi-bottom.png"),
3625
+ style: {
3626
+ position: "absolute",
3627
+ top: wifiBottomTop,
3628
+ left: wifiBottomLeft,
3629
+ width: wifiBottomRight - wifiBottomLeft,
3630
+ height: wifiBottomBottom - wifiBottomTop,
3631
+ objectFit: "fill",
3632
+ pointerEvents: "none",
3633
+ zIndex: 30,
3634
+ filter: wifiLevel >= 1 ? "none" : "brightness(0.25)"
3635
+ }
3636
+ }
3637
+ ),
3638
+ /* @__PURE__ */ jsx10(
3639
+ Img4,
3640
+ {
3641
+ src: staticFile2("ig-wifi-middle.png"),
3642
+ style: {
3643
+ position: "absolute",
3644
+ top: wifiMiddleTop,
3645
+ left: wifiMiddleLeft,
3646
+ width: wifiMiddleRight - wifiMiddleLeft,
3647
+ height: wifiMiddleBottom - wifiMiddleTop,
3648
+ objectFit: "fill",
3649
+ pointerEvents: "none",
3650
+ zIndex: 30,
3651
+ filter: wifiLevel >= 2 ? "none" : "brightness(0.25)"
3652
+ }
3653
+ }
3654
+ ),
3655
+ /* @__PURE__ */ jsx10(
3656
+ Img4,
3657
+ {
3658
+ src: staticFile2("ig-wifi-top.png"),
3659
+ style: {
3660
+ position: "absolute",
3661
+ top: wifiTopTop,
3662
+ left: wifiTopLeft,
3663
+ width: wifiTopRight - wifiTopLeft,
3664
+ height: wifiTopBottom - wifiTopTop,
3665
+ objectFit: "fill",
3666
+ pointerEvents: "none",
3667
+ zIndex: 30,
3668
+ filter: wifiLevel >= 3 ? "none" : "brightness(0.25)"
3669
+ }
3670
+ }
3671
+ ),
3437
3672
  referenceImageUrl && showReferenceImage && (!showDebugOverlay || referenceVisible) && /* @__PURE__ */ jsx10(
3438
3673
  "div",
3439
3674
  {
@@ -4271,7 +4506,49 @@ var instagramDmSchema = z.object({
4271
4506
  videoIconTop: z.number().optional().default(240).describe("Video icon top Y"),
4272
4507
  videoIconBottom: z.number().optional().default(300).describe("Video icon bottom Y"),
4273
4508
  videoIconLeft: z.number().optional().default(948).describe("Video icon left X"),
4274
- videoIconRight: z.number().optional().default(1020).describe("Video icon right X")
4509
+ videoIconRight: z.number().optional().default(1020).describe("Video icon right X"),
4510
+ // Header - Flag icon
4511
+ flagTop: z.number().optional().default(240).describe("Flag icon top Y"),
4512
+ flagBottom: z.number().optional().default(302).describe("Flag icon bottom Y"),
4513
+ flagLeft: z.number().optional().default(1096).describe("Flag icon left X"),
4514
+ flagRight: z.number().optional().default(1152).describe("Flag icon right X"),
4515
+ // Status bar - Cell signal (0-4)
4516
+ cellLevel: z.number().min(0).max(4).optional().default(4).describe("Cell signal level (0-4)"),
4517
+ cellBar1Top: z.number().optional().default(102).describe("Cell bar 1 top Y"),
4518
+ cellBar1Bottom: z.number().optional().default(115).describe("Cell bar 1 bottom Y"),
4519
+ cellBar1Left: z.number().optional().default(865).describe("Cell bar 1 left X"),
4520
+ cellBar1Right: z.number().optional().default(874).describe("Cell bar 1 right X"),
4521
+ cellBar2Top: z.number().optional().default(95).describe("Cell bar 2 top Y"),
4522
+ cellBar2Bottom: z.number().optional().default(115).describe("Cell bar 2 bottom Y"),
4523
+ cellBar2Left: z.number().optional().default(881).describe("Cell bar 2 left X"),
4524
+ cellBar2Right: z.number().optional().default(890).describe("Cell bar 2 right X"),
4525
+ cellBar3Top: z.number().optional().default(87).describe("Cell bar 3 top Y"),
4526
+ cellBar3Bottom: z.number().optional().default(115).describe("Cell bar 3 bottom Y"),
4527
+ cellBar3Left: z.number().optional().default(897).describe("Cell bar 3 left X"),
4528
+ cellBar3Right: z.number().optional().default(906).describe("Cell bar 3 right X"),
4529
+ cellBar4Top: z.number().optional().default(79).describe("Cell bar 4 top Y"),
4530
+ cellBar4Bottom: z.number().optional().default(115).describe("Cell bar 4 bottom Y"),
4531
+ cellBar4Left: z.number().optional().default(913).describe("Cell bar 4 left X"),
4532
+ cellBar4Right: z.number().optional().default(922).describe("Cell bar 4 right X"),
4533
+ // Status bar - WiFi signal (0-3)
4534
+ wifiLevel: z.number().min(0).max(3).optional().default(3).describe("WiFi signal level (0-3)"),
4535
+ wifiBottomTop: z.number().optional().default(104).describe("WiFi bottom bar top Y"),
4536
+ wifiBottomBottom: z.number().optional().default(115).describe("WiFi bottom bar bottom Y"),
4537
+ wifiBottomLeft: z.number().optional().default(963).describe("WiFi bottom bar left X"),
4538
+ wifiBottomRight: z.number().optional().default(977).describe("WiFi bottom bar right X"),
4539
+ wifiMiddleTop: z.number().optional().default(91).describe("WiFi middle bar top Y"),
4540
+ wifiMiddleBottom: z.number().optional().default(103).describe("WiFi middle bar bottom Y"),
4541
+ wifiMiddleLeft: z.number().optional().default(954).describe("WiFi middle bar left X"),
4542
+ wifiMiddleRight: z.number().optional().default(986).describe("WiFi middle bar right X"),
4543
+ wifiTopTop: z.number().optional().default(79).describe("WiFi top bar top Y"),
4544
+ wifiTopBottom: z.number().optional().default(94).describe("WiFi top bar bottom Y"),
4545
+ wifiTopLeft: z.number().optional().default(945).describe("WiFi top bar left X"),
4546
+ wifiTopRight: z.number().optional().default(995).describe("WiFi top bar right X"),
4547
+ // Status bar - Battery icon
4548
+ batteryTop: z.number().optional().default(78).describe("Battery icon top Y"),
4549
+ batteryBottom: z.number().optional().default(116).describe("Battery icon bottom Y"),
4550
+ batteryLeft: z.number().optional().default(1018).describe("Battery icon left X"),
4551
+ batteryRight: z.number().optional().default(1099).describe("Battery icon right X")
4275
4552
  });
4276
4553
  var ImageComp = ImageEditorComposition;
4277
4554
  var VideoComp = VideoEditorComposition;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "ugcinc-render",
3
- "version": "1.8.124",
3
+ "version": "1.8.126",
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",