@evatril/video-templates 2.0.1 → 2.0.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@evatril/video-templates",
-  "version": "2.0.1",
+  "version": "2.0.2",
   "description": "",
   "main": "src/index.js",
   "remotion": {

package/src/Invitations/Themes/T20012026_01.jsx

@@ -1,9 +1,10 @@
 import React from "react";
-import { Sequence, useVideoConfig, Audio, staticFile } from "remotion";
+import { Sequence, useVideoConfig, Audio, staticFile,AbsoluteFill } from "remotion";
 import { F20012026_01 } from "../Frames/F20012026_01.jsx";
 import { F20012026_02 } from "../Frames/F20012026_02.jsx";
 import { F20012026_03 } from "../Frames/F20012026_03.jsx";
 import { InkSmokeTransition20012026 } from "../Elements/InkSmokeTransition20012026.jsx";
+import { usePreloadImages } from "../hooks/usePreloadImages.js";
 
 export const T20012026_01 = ({
   event,
@@ -17,109 +18,115 @@ export const T20012026_01 = ({
 }) => {
   const { durationInFrames } = useVideoConfig();
 
- // Detect creator safely
-const whoIsCreating =
-  event?.occasion_data?.who_is_creating ??
-  event?.who_is_creating;
+  // Detect creator safely
+  const whoIsCreating =
+    event?.occasion_data?.who_is_creating ??
+    event?.who_is_creating;
 
-const isBrideCreating =
-  whoIsCreating === "Bride" || !whoIsCreating;
+  const isBrideCreating =
+    whoIsCreating === "Bride" || !whoIsCreating;
 
-// Names
-const brideName =
-  event?.occasion_data?.bride_name ??
-  event?.bride_name ??
-  formData?.bride_name ??
-  "";
+  // Names
+  const brideName =
+    event?.occasion_data?.bride_name ??
+    event?.bride_name ??
+    formData?.bride_name ??
+    "";
 
-const groomName =
-  event?.occasion_data?.groom_name ??
-  event?.groom_name ??
-  formData?.groom_name ??
-  "";
+  const groomName =
+    event?.occasion_data?.groom_name ??
+    event?.groom_name ??
+    formData?.groom_name ??
+    "";
 
-const firstName = isBrideCreating ? brideName : groomName;
-const secondName = isBrideCreating ? groomName : brideName;
+  const firstName = isBrideCreating ? brideName : groomName;
+  const secondName = isBrideCreating ? groomName : brideName;
 
-// Side notes (safe)
-const firstSideNote = isBrideCreating
-  ? formData?.bride_side_note || ""
-  : formData?.groom_side_note || "";
+  // Side notes (safe)
+  const firstSideNote = isBrideCreating
+    ? formData?.bride_side_note || ""
+    : formData?.groom_side_note || "";
 
-const secondSideNote = isBrideCreating
-  ? formData?.groom_side_note || ""
-  : formData?.bride_side_note || "";
+  const secondSideNote = isBrideCreating
+    ? formData?.groom_side_note || ""
+    : formData?.bride_side_note || "";
 
-// Venue (safe)
-const venueName =
-  venue?.name || formData?.venue_name || "";
-
-const venueAddress =
-  venue?.address || formData?.venue_address || "";
+  // Venue (safe)
+  const venueName =
+    venue?.name || formData?.venue_name || "";
 
+  const venueAddress =
+    venue?.address || formData?.venue_address || "";
 
   const framesPerPage = Math.floor(durationInFrames / 3);
   const transitionDuration = Math.floor(framesPerPage * 0.25); // ~1 sec
 
-  return (
-    <>
-      {/* 🎵 Background Music */}
-      <Audio
-        src={staticFile("video-images/wedding.mp3")}
-        startFrom={30}
-        endAt={900}
-        volume={0.4}
-      />
-      <Sequence from={0} durationInFrames={framesPerPage}>
-        <F20012026_01
-          firstName={firstName}
-          secondName={secondName}
-          welcomeMessage={welcomeMessage}
-          eventDateTime={eventDateTime}
-        />
-      </Sequence>
-
-      <Sequence
-        from={framesPerPage}
-        durationInFrames={framesPerPage}
-      >
-        <F20012026_02
-          firstName={firstName}
-          secondName={secondName}
-          firstSideNote={firstSideNote}
-          secondSideNote={secondSideNote}
-          invitationMessage={invitationMessage}
-          occasionDate={occasionDate}
-          fadeInDuration={transitionDuration}
-        />
-      </Sequence>
+  usePreloadImages([
+  staticFile("video-images/20012026-bg.png"),
+  staticFile("video-images/20012026-bride.png"),
+  staticFile("video-images/20012026-butterfly.png"),
+  staticFile("video-images/20012026-couple-walk.png"),
+  staticFile("video-images/20012026-curtain-floral.png"),
+  staticFile("video-images/20012026-floral-left.png"),
+  staticFile("video-images/20012026-floral-right.png"),
+  staticFile("video-images/20012026-groom.png"),
+  staticFile("video-images/20012026-opening-gate.png"),
+  staticFile("video-images/20012026-peacock.png"),
+  staticFile("video-images/20012026-tree-left.png"),
+  staticFile("video-images/20012026-tree-right.png"),
+  staticFile("video-images/20012026-wedding-gate.png"),
+]);
 
-      {/* 🎨 INK / SMOKE TRANSITION OVERLAY */}
-      <Sequence
-        from={framesPerPage}
-        durationInFrames={transitionDuration}
-      >
-        <InkSmokeTransition20012026 />
-      </Sequence>
-
-      <Sequence from={framesPerPage * 2} durationInFrames={framesPerPage}>
-        <F20012026_03
-          eventDateTime={eventDateTime}
-          venueName={venueName}
-          venueAddress={venueAddress}
-          familyMember={familyMember}
+  return (
+      <AbsoluteFill style={{ backgroundColor: "#1a1a1a" }}>
+        {/* 🎵 Background Music */}
+        <Audio
+          src={staticFile("video-images/wedding.mp3")}
+          startFrom={30}
+          endAt={900}
+          volume={0.4}
         />
-      </Sequence>
-
-      {/* ☁️ SMOKE TRANSITION: SCENE 2 ➜ SCENE 3 */}
-      <Sequence
-        from={framesPerPage * 2}
-        durationInFrames={transitionDuration}
+       <Sequence from={0} durationInFrames={framesPerPage + 1}>
+          <F20012026_01
+            firstName={firstName}
+            secondName={secondName}
+            welcomeMessage={welcomeMessage}
+            eventDateTime={eventDateTime}
+          />
+        </Sequence>
+
+       <Sequence from={framesPerPage} durationInFrames={framesPerPage + 1}>
+          <F20012026_02
+            firstName={firstName}
+            secondName={secondName}
+            firstSideNote={firstSideNote}
+            secondSideNote={secondSideNote}
+            invitationMessage={invitationMessage}
+            occasionDate={occasionDate}
+            fadeInDuration={transitionDuration}
+          />
+        </Sequence>
+
+        {/* ☁️ TRANSITION: SCENE 1 ➜ 2 */}
+           <Sequence from={framesPerPage - 1} durationInFrames={transitionDuration + 2}
       >
-        <InkSmokeTransition20012026 />
-      </Sequence>
-
-
-    </>
+          <InkSmokeTransition20012026 />
+        </Sequence>
+
+         <Sequence from={framesPerPage * 2} durationInFrames={framesPerPage + 1}>
+          <F20012026_03
+            eventDateTime={eventDateTime}
+            venueName={venueName}
+            venueAddress={venueAddress}
+            familyMember={familyMember}
+          />
+        </Sequence>
+
+        {/* ☁️ TRANSITION: SCENE 2 ➜ 3 */}
+        <Sequence from={framesPerPage * 2 - 1} durationInFrames={transitionDuration + 2}>
+          <InkSmokeTransition20012026 />
+        </Sequence>
+
+      </AbsoluteFill>
   );
 };

package/src/Invitations/hooks/usePreloadImages.js

@@ -0,0 +1,44 @@
+import { useState, useEffect } from "react";
+import { delayRender, continueRender } from "remotion";
+
+export const usePreloadImages = (imageSources) => {
+  const [handle] = useState(() => delayRender("Preloading images"));
+  const [loaded, setLoaded] = useState(false);
+
+  useEffect(() => {
+    let cancelled = false;
+
+    const done = () => {
+      if (!cancelled) {
+        setLoaded(true);
+        continueRender(handle);
+      }
+    };
+
+    if (!imageSources || imageSources.length === 0) {
+      done();
+      return;
+    }
+
+    Promise.all(
+      imageSources.map(
+        (src) =>
+          new Promise((resolve) => {
+            const img = new Image();
+            img.onload = resolve;
+            img.onerror = resolve;
+            img.src = src;
+          }),
+      ),
+    )
+      .then(done)
+      .catch(done);
+
+    return () => {
+      cancelled = true;
+      continueRender(handle); // 🔥 safety cleanup
+    };
+  }, [handle, imageSources]);
+
+  return loaded;
+};