ugcinc-render 1.8.11 → 1.8.13

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
  1. package/dist/index.js +107 -89
  2. package/dist/index.mjs +107 -89
  3. package/package.json +1 -1
package/dist/index.js CHANGED
@@ -2634,12 +2634,12 @@ function interpolateKeyframes(keyframes, timeMs, defaultValue) {
2634
2634
  }
2635
2635
  function ScreenshotAnimationV2({
2636
2636
  imageUrl,
2637
- width = 1080,
2638
- height = 1920,
2637
+ width = 1202,
2638
+ height = 2618,
2639
2639
  pauseDurationMs = 1e3,
2640
2640
  flashDurationMs = 255,
2641
2641
  borderRadius = 16,
2642
- borderColor = "rgba(80, 80, 80, 0.8)",
2642
+ borderColor = "rgba(254, 255, 255, 1)",
2643
2643
  backgroundColor = "#000000"
2644
2644
  }) {
2645
2645
  const frame = (0, import_remotion8.useCurrentFrame)();
@@ -2715,7 +2715,7 @@ function ScreenshotAnimationV2({
2715
2715
  }
2716
2716
  }
2717
2717
  ),
2718
- isPhase2 && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
2718
+ isPhase2 && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
2719
2719
  "div",
2720
2720
  {
2721
2721
  style: {
@@ -2729,87 +2729,105 @@ function ScreenshotAnimationV2({
2729
2729
  boxSizing: "border-box",
2730
2730
  overflow: "hidden"
2731
2731
  },
2732
- children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
2733
- "div",
2734
- {
2735
- style: {
2736
- position: "absolute",
2737
- left: 0,
2738
- top: 0,
2739
- width: contentW,
2740
- height: contentH,
2741
- overflow: "hidden",
2742
- borderRadius: `${borderRadius - borderWidth}px ${borderRadius - borderWidth}px ${innerBorderRadius}px ${innerBorderRadius}px`
2743
- },
2744
- children: [
2745
- !thumbnailFilled && grayGapHeight > 0 && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
2746
- "div",
2747
- {
2748
- style: {
2749
- position: "absolute",
2750
- left: 0,
2751
- top: 0,
2752
- width: contentW,
2753
- height: grayGapBottom - containerTopInner * height,
2754
- backgroundColor: grayColor
2732
+ children: [
2733
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
2734
+ "div",
2735
+ {
2736
+ style: {
2737
+ position: "absolute",
2738
+ left: 0,
2739
+ top: 0,
2740
+ width: contentW,
2741
+ height: contentH,
2742
+ overflow: "hidden",
2743
+ // Top corners always match border, bottom corners animate
2744
+ borderRadius: `${borderRadius - borderWidth}px ${borderRadius - borderWidth}px ${innerBorderRadius}px ${innerBorderRadius}px`
2745
+ },
2746
+ children: [
2747
+ !thumbnailFilled && grayGapHeight > 0 && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
2748
+ "div",
2749
+ {
2750
+ style: {
2751
+ position: "absolute",
2752
+ left: 0,
2753
+ top: 0,
2754
+ width: contentW,
2755
+ height: grayGapBottom - containerTopInner * height,
2756
+ backgroundColor: grayColor
2757
+ }
2755
2758
  }
2756
- }
2757
- ),
2758
- !thumbnailFilled && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
2759
- "div",
2760
- {
2761
- style: {
2762
- position: "absolute",
2763
- left: 0,
2764
- top: largeImgTop - containerTopInner * height,
2765
- width: contentW,
2766
- height: largeImgHeight,
2767
- overflow: "hidden"
2768
- },
2769
- children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
2770
- import_remotion8.Img,
2771
- {
2772
- src: imageUrl,
2773
- style: {
2774
- width: contentW,
2775
- height: contentW * (height / width),
2776
- // Maintain aspect ratio
2777
- objectFit: "cover"
2759
+ ),
2760
+ !thumbnailFilled && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
2761
+ "div",
2762
+ {
2763
+ style: {
2764
+ position: "absolute",
2765
+ left: 0,
2766
+ top: largeImgTop - containerTopInner * height,
2767
+ width: contentW,
2768
+ height: largeImgHeight,
2769
+ overflow: "hidden"
2770
+ },
2771
+ children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
2772
+ import_remotion8.Img,
2773
+ {
2774
+ src: imageUrl,
2775
+ style: {
2776
+ width: contentW,
2777
+ height: contentW * (height / width),
2778
+ // Maintain aspect ratio
2779
+ objectFit: "cover"
2780
+ }
2778
2781
  }
2779
- }
2780
- )
2781
- }
2782
- ),
2783
- /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
2784
- "div",
2785
- {
2786
- style: {
2787
- position: "absolute",
2788
- left: 0,
2789
- top: thumbnailFilled ? 0 : smallClipTop - containerTopInner * height,
2790
- width: thumbnailFilled ? contentW : smallClipWidth,
2791
- height: thumbnailFilled ? contentH : smallClipHeight,
2792
- overflow: "hidden"
2793
- },
2794
- children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
2795
- import_remotion8.Img,
2796
- {
2797
- src: imageUrl,
2798
- style: {
2799
- width: thumbnailFilled ? contentW : smallClipWidth,
2800
- height: thumbnailFilled ? contentH : smallClipWidth * (height / width),
2801
- objectFit: "cover"
2782
+ )
2783
+ }
2784
+ ),
2785
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
2786
+ "div",
2787
+ {
2788
+ style: {
2789
+ position: "absolute",
2790
+ left: 0,
2791
+ top: thumbnailFilled ? 0 : smallClipTop - containerTopInner * height,
2792
+ width: thumbnailFilled ? contentW : smallClipWidth,
2793
+ height: thumbnailFilled ? contentH : smallClipHeight,
2794
+ overflow: "hidden"
2795
+ },
2796
+ children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
2797
+ import_remotion8.Img,
2798
+ {
2799
+ src: imageUrl,
2800
+ style: {
2801
+ width: thumbnailFilled ? contentW : smallClipWidth,
2802
+ height: thumbnailFilled ? contentH : smallClipWidth * (height / width),
2803
+ objectFit: "cover"
2804
+ }
2802
2805
  }
2803
- }
2804
- )
2805
- }
2806
- )
2807
- ]
2808
- }
2809
- )
2806
+ )
2807
+ }
2808
+ )
2809
+ ]
2810
+ }
2811
+ ),
2812
+ whiteOpacity > 1e-3 && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
2813
+ "div",
2814
+ {
2815
+ style: {
2816
+ position: "absolute",
2817
+ left: 0,
2818
+ top: 0,
2819
+ width: "100%",
2820
+ height: "100%",
2821
+ backgroundColor: `rgba(255, 254, 255, ${whiteOpacity})`,
2822
+ borderRadius: borderRadius - borderWidth,
2823
+ pointerEvents: "none"
2824
+ }
2825
+ }
2826
+ )
2827
+ ]
2810
2828
  }
2811
2829
  ),
2812
- whiteOpacity > 1e-3 && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
2830
+ !isPhase2 && whiteOpacity > 1e-3 && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
2813
2831
  import_remotion8.AbsoluteFill,
2814
2832
  {
2815
2833
  style: {
@@ -3256,23 +3274,23 @@ var defaultScreenshotAnimationProps = {
3256
3274
  backgroundColor: "#000000"
3257
3275
  };
3258
3276
  var defaultScreenshotAnimationV2Props = {
3259
- imageUrl: "https://images.unsplash.com/photo-1611162617474-5b21e879e113?w=1080&h=1920&fit=crop",
3260
- width: 1080,
3261
- height: 1920,
3277
+ imageUrl: "https://n14dcpakf8w1fekl.public.blob.vercel-storage.com/media/8ff1462b-13d7-4abe-9325-0a6ad19004f0/15.9-aUsMryjm5qRrmw8nsxv8KWJWKnsetx.png",
3278
+ width: 1202,
3279
+ height: 2618,
3262
3280
  pauseDurationMs: 1e3,
3263
3281
  flashDurationMs: 255,
3264
3282
  borderRadius: 16,
3265
- borderColor: "rgba(80, 80, 80, 0.8)",
3283
+ borderColor: "rgba(254, 255, 255, 1)",
3266
3284
  backgroundColor: "#000000"
3267
3285
  };
3268
3286
  var screenshotAnimationV2Schema = import_zod.z.object({
3269
3287
  imageUrl: import_zod.z.string().describe("URL of the image being screenshotted"),
3270
- width: import_zod.z.number().optional().default(1080).describe("Canvas width (px)"),
3271
- height: import_zod.z.number().optional().default(1920).describe("Canvas height (px)"),
3288
+ width: import_zod.z.number().optional().default(1202).describe("Canvas width (px)"),
3289
+ height: import_zod.z.number().optional().default(2618).describe("Canvas height (px)"),
3272
3290
  pauseDurationMs: import_zod.z.number().optional().default(1e3).describe("Pause before flash (ms)"),
3273
3291
  flashDurationMs: import_zod.z.number().optional().default(255).describe("Flash phase duration (ms)"),
3274
3292
  borderRadius: import_zod.z.number().optional().default(16).describe("Border corner radius (px)"),
3275
- borderColor: import_zod.z.string().optional().default("rgba(80, 80, 80, 0.8)").describe("Border color"),
3293
+ borderColor: import_zod.z.string().optional().default("rgba(254, 255, 255, 1)").describe("Border color"),
3276
3294
  backgroundColor: import_zod.z.string().optional().default("#000000").describe("Background color")
3277
3295
  });
3278
3296
  var screenshotAnimationSchema = import_zod.z.object({
@@ -3416,8 +3434,8 @@ var RenderRoot = () => {
3416
3434
  schema: screenshotAnimationV2Schema,
3417
3435
  durationInFrames: 90,
3418
3436
  fps: 30,
3419
- width: 1080,
3420
- height: 1920,
3437
+ width: 1202,
3438
+ height: 2618,
3421
3439
  defaultProps: defaultScreenshotAnimationV2Props
3422
3440
  }
3423
3441
  )
package/dist/index.mjs CHANGED
@@ -1770,12 +1770,12 @@ function interpolateKeyframes(keyframes, timeMs, defaultValue) {
1770
1770
  }
1771
1771
  function ScreenshotAnimationV2({
1772
1772
  imageUrl,
1773
- width = 1080,
1774
- height = 1920,
1773
+ width = 1202,
1774
+ height = 2618,
1775
1775
  pauseDurationMs = 1e3,
1776
1776
  flashDurationMs = 255,
1777
1777
  borderRadius = 16,
1778
- borderColor = "rgba(80, 80, 80, 0.8)",
1778
+ borderColor = "rgba(254, 255, 255, 1)",
1779
1779
  backgroundColor = "#000000"
1780
1780
  }) {
1781
1781
  const frame = useCurrentFrame6();
@@ -1851,7 +1851,7 @@ function ScreenshotAnimationV2({
1851
1851
  }
1852
1852
  }
1853
1853
  ),
1854
- isPhase2 && /* @__PURE__ */ jsx9(
1854
+ isPhase2 && /* @__PURE__ */ jsxs7(
1855
1855
  "div",
1856
1856
  {
1857
1857
  style: {
@@ -1865,87 +1865,105 @@ function ScreenshotAnimationV2({
1865
1865
  boxSizing: "border-box",
1866
1866
  overflow: "hidden"
1867
1867
  },
1868
- children: /* @__PURE__ */ jsxs7(
1869
- "div",
1870
- {
1871
- style: {
1872
- position: "absolute",
1873
- left: 0,
1874
- top: 0,
1875
- width: contentW,
1876
- height: contentH,
1877
- overflow: "hidden",
1878
- borderRadius: `${borderRadius - borderWidth}px ${borderRadius - borderWidth}px ${innerBorderRadius}px ${innerBorderRadius}px`
1879
- },
1880
- children: [
1881
- !thumbnailFilled && grayGapHeight > 0 && /* @__PURE__ */ jsx9(
1882
- "div",
1883
- {
1884
- style: {
1885
- position: "absolute",
1886
- left: 0,
1887
- top: 0,
1888
- width: contentW,
1889
- height: grayGapBottom - containerTopInner * height,
1890
- backgroundColor: grayColor
1868
+ children: [
1869
+ /* @__PURE__ */ jsxs7(
1870
+ "div",
1871
+ {
1872
+ style: {
1873
+ position: "absolute",
1874
+ left: 0,
1875
+ top: 0,
1876
+ width: contentW,
1877
+ height: contentH,
1878
+ overflow: "hidden",
1879
+ // Top corners always match border, bottom corners animate
1880
+ borderRadius: `${borderRadius - borderWidth}px ${borderRadius - borderWidth}px ${innerBorderRadius}px ${innerBorderRadius}px`
1881
+ },
1882
+ children: [
1883
+ !thumbnailFilled && grayGapHeight > 0 && /* @__PURE__ */ jsx9(
1884
+ "div",
1885
+ {
1886
+ style: {
1887
+ position: "absolute",
1888
+ left: 0,
1889
+ top: 0,
1890
+ width: contentW,
1891
+ height: grayGapBottom - containerTopInner * height,
1892
+ backgroundColor: grayColor
1893
+ }
1891
1894
  }
1892
- }
1893
- ),
1894
- !thumbnailFilled && /* @__PURE__ */ jsx9(
1895
- "div",
1896
- {
1897
- style: {
1898
- position: "absolute",
1899
- left: 0,
1900
- top: largeImgTop - containerTopInner * height,
1901
- width: contentW,
1902
- height: largeImgHeight,
1903
- overflow: "hidden"
1904
- },
1905
- children: /* @__PURE__ */ jsx9(
1906
- Img4,
1907
- {
1908
- src: imageUrl,
1909
- style: {
1910
- width: contentW,
1911
- height: contentW * (height / width),
1912
- // Maintain aspect ratio
1913
- objectFit: "cover"
1895
+ ),
1896
+ !thumbnailFilled && /* @__PURE__ */ jsx9(
1897
+ "div",
1898
+ {
1899
+ style: {
1900
+ position: "absolute",
1901
+ left: 0,
1902
+ top: largeImgTop - containerTopInner * height,
1903
+ width: contentW,
1904
+ height: largeImgHeight,
1905
+ overflow: "hidden"
1906
+ },
1907
+ children: /* @__PURE__ */ jsx9(
1908
+ Img4,
1909
+ {
1910
+ src: imageUrl,
1911
+ style: {
1912
+ width: contentW,
1913
+ height: contentW * (height / width),
1914
+ // Maintain aspect ratio
1915
+ objectFit: "cover"
1916
+ }
1914
1917
  }
1915
- }
1916
- )
1917
- }
1918
- ),
1919
- /* @__PURE__ */ jsx9(
1920
- "div",
1921
- {
1922
- style: {
1923
- position: "absolute",
1924
- left: 0,
1925
- top: thumbnailFilled ? 0 : smallClipTop - containerTopInner * height,
1926
- width: thumbnailFilled ? contentW : smallClipWidth,
1927
- height: thumbnailFilled ? contentH : smallClipHeight,
1928
- overflow: "hidden"
1929
- },
1930
- children: /* @__PURE__ */ jsx9(
1931
- Img4,
1932
- {
1933
- src: imageUrl,
1934
- style: {
1935
- width: thumbnailFilled ? contentW : smallClipWidth,
1936
- height: thumbnailFilled ? contentH : smallClipWidth * (height / width),
1937
- objectFit: "cover"
1918
+ )
1919
+ }
1920
+ ),
1921
+ /* @__PURE__ */ jsx9(
1922
+ "div",
1923
+ {
1924
+ style: {
1925
+ position: "absolute",
1926
+ left: 0,
1927
+ top: thumbnailFilled ? 0 : smallClipTop - containerTopInner * height,
1928
+ width: thumbnailFilled ? contentW : smallClipWidth,
1929
+ height: thumbnailFilled ? contentH : smallClipHeight,
1930
+ overflow: "hidden"
1931
+ },
1932
+ children: /* @__PURE__ */ jsx9(
1933
+ Img4,
1934
+ {
1935
+ src: imageUrl,
1936
+ style: {
1937
+ width: thumbnailFilled ? contentW : smallClipWidth,
1938
+ height: thumbnailFilled ? contentH : smallClipWidth * (height / width),
1939
+ objectFit: "cover"
1940
+ }
1938
1941
  }
1939
- }
1940
- )
1941
- }
1942
- )
1943
- ]
1944
- }
1945
- )
1942
+ )
1943
+ }
1944
+ )
1945
+ ]
1946
+ }
1947
+ ),
1948
+ whiteOpacity > 1e-3 && /* @__PURE__ */ jsx9(
1949
+ "div",
1950
+ {
1951
+ style: {
1952
+ position: "absolute",
1953
+ left: 0,
1954
+ top: 0,
1955
+ width: "100%",
1956
+ height: "100%",
1957
+ backgroundColor: `rgba(255, 254, 255, ${whiteOpacity})`,
1958
+ borderRadius: borderRadius - borderWidth,
1959
+ pointerEvents: "none"
1960
+ }
1961
+ }
1962
+ )
1963
+ ]
1946
1964
  }
1947
1965
  ),
1948
- whiteOpacity > 1e-3 && /* @__PURE__ */ jsx9(
1966
+ !isPhase2 && whiteOpacity > 1e-3 && /* @__PURE__ */ jsx9(
1949
1967
  AbsoluteFill5,
1950
1968
  {
1951
1969
  style: {
@@ -2109,23 +2127,23 @@ var defaultScreenshotAnimationProps = {
2109
2127
  backgroundColor: "#000000"
2110
2128
  };
2111
2129
  var defaultScreenshotAnimationV2Props = {
2112
- imageUrl: "https://images.unsplash.com/photo-1611162617474-5b21e879e113?w=1080&h=1920&fit=crop",
2113
- width: 1080,
2114
- height: 1920,
2130
+ imageUrl: "https://n14dcpakf8w1fekl.public.blob.vercel-storage.com/media/8ff1462b-13d7-4abe-9325-0a6ad19004f0/15.9-aUsMryjm5qRrmw8nsxv8KWJWKnsetx.png",
2131
+ width: 1202,
2132
+ height: 2618,
2115
2133
  pauseDurationMs: 1e3,
2116
2134
  flashDurationMs: 255,
2117
2135
  borderRadius: 16,
2118
- borderColor: "rgba(80, 80, 80, 0.8)",
2136
+ borderColor: "rgba(254, 255, 255, 1)",
2119
2137
  backgroundColor: "#000000"
2120
2138
  };
2121
2139
  var screenshotAnimationV2Schema = z.object({
2122
2140
  imageUrl: z.string().describe("URL of the image being screenshotted"),
2123
- width: z.number().optional().default(1080).describe("Canvas width (px)"),
2124
- height: z.number().optional().default(1920).describe("Canvas height (px)"),
2141
+ width: z.number().optional().default(1202).describe("Canvas width (px)"),
2142
+ height: z.number().optional().default(2618).describe("Canvas height (px)"),
2125
2143
  pauseDurationMs: z.number().optional().default(1e3).describe("Pause before flash (ms)"),
2126
2144
  flashDurationMs: z.number().optional().default(255).describe("Flash phase duration (ms)"),
2127
2145
  borderRadius: z.number().optional().default(16).describe("Border corner radius (px)"),
2128
- borderColor: z.string().optional().default("rgba(80, 80, 80, 0.8)").describe("Border color"),
2146
+ borderColor: z.string().optional().default("rgba(254, 255, 255, 1)").describe("Border color"),
2129
2147
  backgroundColor: z.string().optional().default("#000000").describe("Background color")
2130
2148
  });
2131
2149
  var screenshotAnimationSchema = z.object({
@@ -2269,8 +2287,8 @@ var RenderRoot = () => {
2269
2287
  schema: screenshotAnimationV2Schema,
2270
2288
  durationInFrames: 90,
2271
2289
  fps: 30,
2272
- width: 1080,
2273
- height: 1920,
2290
+ width: 1202,
2291
+ height: 2618,
2274
2292
  defaultProps: defaultScreenshotAnimationV2Props
2275
2293
  }
2276
2294
  )
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "ugcinc-render",
3
- "version": "1.8.11",
3
+ "version": "1.8.13",
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",