@evatril/video-templates 2.0.3 → 2.0.4

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/package.json +1 -1
  2. package/src/Invitations/Themes/T20012026_01.jsx +98 -71
  3. package/src/Invitations/hooks/usePreloadImages.js +11 -7
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@evatril/video-templates",
3
- "version": "2.0.3",
3
+ "version": "2.0.4",
4
4
  "description": "",
5
5
  "main": "src/index.js",
6
6
  "remotion": {
package/src/Invitations/Themes/T20012026_01.jsx CHANGED
@@ -1,5 +1,12 @@
1
- import React from "react";
2
- import { Sequence, useVideoConfig, Audio, staticFile,AbsoluteFill } from "remotion";
1
+ import React, { useMemo } from "react";
2
+ import {
3
+ Sequence,
4
+ useVideoConfig,
5
+ Audio,
6
+ staticFile,
7
+ AbsoluteFill,
8
+ } from "remotion";
9
+
3
10
  import { F20012026_01 } from "../Frames/F20012026_01.jsx";
4
11
  import { F20012026_02 } from "../Frames/F20012026_02.jsx";
5
12
  import { F20012026_03 } from "../Frames/F20012026_03.jsx";
@@ -18,7 +25,8 @@ export const T20012026_01 = ({
18
25
  }) => {
19
26
  const { durationInFrames } = useVideoConfig();
20
27
 
21
- // Detect creator safely
28
+ /* ---------------- SAFE DATA ---------------- */
29
+
22
30
  const whoIsCreating =
23
31
  event?.occasion_data?.who_is_creating ??
24
32
  event?.who_is_creating;
@@ -26,7 +34,6 @@ export const T20012026_01 = ({
26
34
  const isBrideCreating =
27
35
  whoIsCreating === "Bride" || !whoIsCreating;
28
36
 
29
- // Names
30
37
  const brideName =
31
38
  event?.occasion_data?.bride_name ??
32
39
  event?.bride_name ??
@@ -42,7 +49,6 @@ export const T20012026_01 = ({
42
49
  const firstName = isBrideCreating ? brideName : groomName;
43
50
  const secondName = isBrideCreating ? groomName : brideName;
44
51
 
45
- // Side notes (safe)
46
52
  const firstSideNote = isBrideCreating
47
53
  ? formData?.bride_side_note || ""
48
54
  : formData?.groom_side_note || "";
@@ -51,82 +57,103 @@ export const T20012026_01 = ({
51
57
  ? formData?.groom_side_note || ""
52
58
  : formData?.bride_side_note || "";
53
59
 
54
- // Venue (safe)
55
60
  const venueName =
56
61
  venue?.name || formData?.venue_name || "";
57
62
 
58
63
  const venueAddress =
59
64
  venue?.address || formData?.venue_address || "";
60
65
 
66
+ /* ---------------- TIMING ---------------- */
67
+
61
68
  const framesPerPage = Math.floor(durationInFrames / 3);
62
- const transitionDuration = Math.floor(framesPerPage * 0.25); // ~1 sec
63
-
64
- usePreloadImages([
65
- staticFile("video-images/20012026-bg.png"),
66
- staticFile("video-images/20012026-bride.png"),
67
- staticFile("video-images/20012026-butterfly.png"),
68
- staticFile("video-images/20012026-couple-walk.png"),
69
- staticFile("video-images/20012026-curtain-floral.png"),
70
- staticFile("video-images/20012026-floral-left.png"),
71
- staticFile("video-images/20012026-floral-right.png"),
72
- staticFile("video-images/20012026-groom.png"),
73
- staticFile("video-images/20012026-opening-gate.png"),
74
- staticFile("video-images/20012026-peacock.png"),
75
- staticFile("video-images/20012026-tree-left.png"),
76
- staticFile("video-images/20012026-tree-right.png"),
77
- staticFile("video-images/20012026-wedding-gate.png"),
78
- ]);
69
+ const transitionDuration = Math.floor(framesPerPage * 0.25);
70
+
71
+ /* ---------------- PRELOAD IMAGES (MEMOIZED) ---------------- */
72
+
73
+ const imagesToPreload = useMemo(
74
+ () => [
75
+ staticFile("video-images/20012026-bg.png"),
76
+ staticFile("video-images/20012026-bride.png"),
77
+ staticFile("video-images/20012026-butterfly.png"),
78
+ staticFile("video-images/20012026-couple-walk.png"),
79
+ staticFile("video-images/20012026-curtain-floral.png"),
80
+ staticFile("video-images/20012026-floral-left.png"),
81
+ staticFile("video-images/20012026-floral-right.png"),
82
+ staticFile("video-images/20012026-groom.png"),
83
+ staticFile("video-images/20012026-opening-gate.png"),
84
+ staticFile("video-images/20012026-peacock.png"),
85
+ staticFile("video-images/20012026-tree-left.png"),
86
+ staticFile("video-images/20012026-tree-right.png"),
87
+ staticFile("video-images/20012026-wedding-gate.png"),
88
+ ],
89
+ []
90
+ );
91
+
92
+ usePreloadImages(imagesToPreload);
93
+
94
+ /* ---------------- RENDER ---------------- */
79
95
 
80
96
  return (
81
- <AbsoluteFill style={{ backgroundColor: "#1a1a1a" }}>
82
- {/* 🎵 Background Music */}
83
- <Audio
84
- src={staticFile("video-images/wedding.mp3")}
85
- startFrom={30}
86
- endAt={900}
87
- volume={0.4}
97
+ <AbsoluteFill style={{ backgroundColor: "#1a1a1a" }}>
98
+ {/* 🎵 Background Music */}
99
+ <Audio
100
+ src={staticFile("video-images/wedding.mp3")}
101
+ startFrom={30}
102
+ endAt={900}
103
+ volume={0.4}
104
+ />
105
+
106
+ {/* -------- SCENE 1 -------- */}
107
+ <Sequence from={0} durationInFrames={framesPerPage + 1}>
108
+ <F20012026_01
109
+ firstName={firstName}
110
+ secondName={secondName}
111
+ welcomeMessage={welcomeMessage}
112
+ eventDateTime={eventDateTime}
113
+ />
114
+ </Sequence>
115
+
116
+ {/* -------- SCENE 2 -------- */}
117
+ <Sequence from={framesPerPage} durationInFrames={framesPerPage + 1}>
118
+ <F20012026_02
119
+ firstName={firstName}
120
+ secondName={secondName}
121
+ firstSideNote={firstSideNote}
122
+ secondSideNote={secondSideNote}
123
+ invitationMessage={invitationMessage}
124
+ occasionDate={occasionDate}
125
+ fadeInDuration={transitionDuration}
88
126
  />
89
- <Sequence from={0} durationInFrames={framesPerPage + 1}>
90
- <F20012026_01
91
- firstName={firstName}
92
- secondName={secondName}
93
- welcomeMessage={welcomeMessage}
94
- eventDateTime={eventDateTime}
95
- />
96
- </Sequence>
97
-
98
- <Sequence from={framesPerPage} durationInFrames={framesPerPage + 1}>
99
- <F20012026_02
100
- firstName={firstName}
101
- secondName={secondName}
102
- firstSideNote={firstSideNote}
103
- secondSideNote={secondSideNote}
104
- invitationMessage={invitationMessage}
105
- occasionDate={occasionDate}
106
- fadeInDuration={transitionDuration}
107
- />
108
- </Sequence>
109
-
110
- {/* ☁️ TRANSITION: SCENE 1 ➜ 2 */}
111
- <Sequence from={framesPerPage - 1} durationInFrames={transitionDuration + 2}
127
+ </Sequence>
128
+
129
+ {/* ☁️ TRANSITION 1 → 2 */}
130
+ <Sequence
131
+ from={framesPerPage - 1}
132
+ durationInFrames={transitionDuration + 2}
133
+ >
134
+ <InkSmokeTransition20012026 />
135
+ </Sequence>
136
+
137
+ {/* -------- SCENE 3 -------- */}
138
+ <Sequence
139
+ from={framesPerPage * 2}
140
+ durationInFrames={framesPerPage + 1}
141
+ >
142
+ <F20012026_03
143
+ eventDateTime={eventDateTime}
144
+ venueName={venueName}
145
+ venueAddress={venueAddress}
146
+ familyMember={familyMember}
147
+ />
148
+ </Sequence>
149
+
150
+ {/* ☁️ TRANSITION 2 → 3 */}
151
+ <Sequence
152
+ from={framesPerPage * 2 - 1}
153
+ durationInFrames={transitionDuration + 2}
112
154
  >
113
- <InkSmokeTransition20012026 />
114
- </Sequence>
115
-
116
- <Sequence from={framesPerPage * 2} durationInFrames={framesPerPage + 1}>
117
- <F20012026_03
118
- eventDateTime={eventDateTime}
119
- venueName={venueName}
120
- venueAddress={venueAddress}
121
- familyMember={familyMember}
122
- />
123
- </Sequence>
124
-
125
- {/* ☁️ TRANSITION: SCENE 2 ➜ 3 */}
126
- <Sequence from={framesPerPage * 2 - 1} durationInFrames={transitionDuration + 2}>
127
- <InkSmokeTransition20012026 />
128
- </Sequence>
129
-
130
- </AbsoluteFill>
155
+ <InkSmokeTransition20012026 />
156
+ </Sequence>
157
+ </AbsoluteFill>
131
158
  );
132
159
  };
package/src/Invitations/hooks/usePreloadImages.js CHANGED
@@ -12,13 +12,17 @@ export const usePreloadImages = (imageSources) => {
12
12
 
13
13
  let cancelled = false;
14
14
 
15
- Promise.all(
16
- imageSources.map((src) =>
17
- prefetch(src)
18
- .then(({ waitUntilDone }) => waitUntilDone())
19
- .catch(() => null) // never block render
20
- )
21
- )
15
+ const promises = imageSources.map((src) => {
16
+ try {
17
+ const { waitUntilDone } = prefetch(src);
18
+ return waitUntilDone();
19
+ } catch (err) {
20
+ console.warn("Prefetch failed:", src, err);
21
+ return Promise.resolve(); // never block render
22
+ }
23
+ });
24
+
25
+ Promise.all(promises)
22
26
  .then(() => {
23
27
  if (!cancelled) {
24
28
  continueRender(handle);