@evatril/video-templates 2.0.7 → 2.0.8

package/src/Invitations/Themes/T20012026_01.jsx

@@ -31,6 +31,7 @@ export const T20012026_01 = ({
   /* ---------------- SAFE DATA ---------------- */
 
   const whoIsCreating =
+    event?.eventData?.occasion_data?.who_is_creating ??
     event?.occasion_data?.who_is_creating ??
     event?.who_is_creating;
 
@@ -38,20 +39,35 @@ export const T20012026_01 = ({
     whoIsCreating === "Bride" || !whoIsCreating;
 
   const brideName =
+    event?.eventData?.occasion_data?.bride_name ??
     event?.occasion_data?.bride_name ??
-    event?.bride_name ??
     formData?.bride_name ??
     "";
 
   const groomName =
+    event?.eventData?.occasion_data?.groom_name ??
     event?.occasion_data?.groom_name ??
-    event?.groom_name ??
     formData?.groom_name ??
     "";
 
+  const bridePhoto =
+    event?.eventData?.occasion_data?.bride_photo?.url ??
+    event?.occasion_data?.bride_photo?.url ??
+    formData?.bride_photo ??
+    "";
+
+  const groomPhoto =
+    event?.eventData?.occasion_data?.groom_photo?.url ??
+    event?.occasion_data?.groom_photo?.url ??
+    formData?.groom_photo ??
+    "";
+
   const firstName = isBrideCreating ? brideName : groomName;
   const secondName = isBrideCreating ? groomName : brideName;
 
+  const firstPhoto = isBrideCreating ? bridePhoto : groomPhoto;
+  const secondPhoto = isBrideCreating ? groomPhoto : bridePhoto;
+
   const firstSideNote = isBrideCreating
     ? formData?.bride_side_note || ""
     : formData?.groom_side_note || "";
@@ -176,4 +192,6 @@ export const T20012026_01 = ({
 
     </AbsoluteFill>
   );
-};
+};
+
+T20012026_01.duration = 30 * 30;

package/src/Invitations/Themes/T28012026_01.jsx

@@ -0,0 +1,241 @@
+import React, { useMemo } from "react";
+import {
+  Sequence,
+  useVideoConfig,
+  Audio,
+  staticFile,
+  AbsoluteFill,
+  useCurrentFrame,
+  interpolate,
+  Easing,
+} from "remotion";
+
+import { F28012026_01 } from "../Frames/F28012026_01.jsx";
+import { F28012026_02 } from "../Frames/F28012026_02.jsx";
+import { F28012026_03 } from "../Frames/F28012026_03.jsx";
+import { F28012026_04 } from "../Frames/F28012026_04.jsx";
+import { F28012026_05 } from "../Frames/F28012026_05.jsx";
+
+import { usePreloadImages } from "../hooks/usePreloadImages.js";
+import { PageFlipTransition } from "../Elements/PageFlipTransition.jsx";
+
+export const T28012026_01 = ({
+  event,
+  formData,
+  eventDateTime,
+  occasionDate,
+  venue,
+  welcomeMessage,
+  invitationMessage,
+  familyMember,
+}) => {
+  const { fps, durationInFrames } = useVideoConfig();
+  const frame = useCurrentFrame();
+  /* ---------------- MUSIC FADE ---------------- */
+  const fadeDuration = 2 * fps;
+  const fadeOutStart = durationInFrames - fadeDuration;
+  const musicVolume = interpolate(
+    frame,
+    [0, fadeOutStart, durationInFrames],
+    [0.4, 0.4, 0],
+    {
+      easing: Easing.inOut(Easing.ease),
+      extrapolateLeft: "clamp",
+      extrapolateRight: "clamp",
+    }
+  );
+  const firstSceneDuration = fps * 5;
+  const otherSceneDuration = fps * 8;
+
+  const flipDuration = fps * 1;
+
+  /* ---------------- SAFE DATA ---------------- */
+
+  const whoIsCreating =
+    event?.eventData?.occasion_data?.who_is_creating ??
+    event?.occasion_data?.who_is_creating ??
+    event?.who_is_creating;
+
+  const isBrideCreating =
+    whoIsCreating === "Bride" || !whoIsCreating;
+
+  const brideName =
+    event?.eventData?.occasion_data?.bride_name ??
+    event?.occasion_data?.bride_name ??
+    formData?.bride_name ??
+    "";
+
+  const groomName =
+    event?.eventData?.occasion_data?.groom_name ??
+    event?.occasion_data?.groom_name ??
+    formData?.groom_name ??
+    "";
+
+  const bridePhoto =
+    event?.eventData?.occasion_data?.bride_photo?.url ??
+    event?.occasion_data?.bride_photo?.url ??
+    formData?.bride_photo ??
+    "";
+
+  const groomPhoto =
+    event?.eventData?.occasion_data?.groom_photo?.url ??
+    event?.occasion_data?.groom_photo?.url ??
+    formData?.groom_photo ??
+    "";
+
+  const firstName = isBrideCreating ? brideName : groomName;
+  const secondName = isBrideCreating ? groomName : brideName;
+
+  const firstPhoto = isBrideCreating ? bridePhoto : groomPhoto;
+  const secondPhoto = isBrideCreating ? groomPhoto : bridePhoto;
+
+
+  const firstSideNote = isBrideCreating
+    ? formData?.bride_side_note || ""
+    : formData?.groom_side_note || "";
+
+  const secondSideNote = isBrideCreating
+    ? formData?.groom_side_note || ""
+    : formData?.bride_side_note || "";
+
+  const venueName =
+    venue?.name || formData?.venue_name || "";
+
+  const venueAddress =
+    venue?.address || formData?.venue_address || "";
+
+  /* ---------------- PRELOAD IMAGES ---------------- */
+
+  const imagesToPreload = useMemo(
+    () => [
+      staticFile("video-images/28012026-bg.webp"),
+      staticFile("video-images/28012026-TopRightFlower.webp"),
+      staticFile("video-images/28012026-BottomLeftFlower.webp"),
+      staticFile("video-images/28012026-Ganesh.webp"),
+      staticFile("video-images/28012026-FlowerBorder.webp"),
+      staticFile("video-images/28012026-TopBorder.webp"),
+      staticFile("video-images/28012026-TopLeftFlower.webp"),
+      staticFile("video-images/28012026-BottomRightFlower.webp"),
+      staticFile("video-images/28012026-frame.webp"),
+      staticFile("video-images/28012026-border.webp"),
+    ],
+    []
+  );
+
+  usePreloadImages(imagesToPreload);
+
+  const Page = ({ children }) => {
+    return (
+      <AbsoluteFill
+        style={{
+          transformStyle: "preserve-3d",
+        }}
+      >
+        {/* Background */}
+        <img
+          src={staticFile("video-images/28012026-bg.webp")}
+          style={{
+            position: "absolute",
+            inset: 0,
+            width: "100%",
+            height: "100%",
+            objectFit: "cover",
+          }}
+        />
+
+        {/* Content */}
+        <AbsoluteFill style={{ transformStyle: "preserve-3d" }}>
+          {children}
+        </AbsoluteFill>
+      </AbsoluteFill>
+    );
+  };
+
+  const scenes = [
+    <F28012026_01 welcomeMessage={welcomeMessage} />,
+
+    <F28012026_02
+      firstName={firstName}
+      secondName={secondName}
+      invitationMessage={invitationMessage}
+      occasionDate={occasionDate}
+    />,
+
+    <F28012026_03
+      firstName={firstName}
+      firstPhoto={firstPhoto}
+      firstSideNote={firstSideNote}
+    />,
+
+    <F28012026_04
+      secondName={secondName}
+      secondPhoto={secondPhoto}
+      secondSideNote={secondSideNote}
+    />,
+
+    <F28012026_05
+      eventDateTime={eventDateTime}
+      venueName={venueName}
+      venueAddress={venueAddress}
+      familyMember={familyMember}
+    />,
+  ];
+
+  /* 🧮 Dynamic Timing */
+  const sceneDurations = scenes.map((_, i) =>
+    i === 0 ? firstSceneDuration : otherSceneDuration
+  );
+
+  const sceneStartTimes = sceneDurations.reduce((acc, dur, i) => {
+    acc.push(i === 0 ? 0 : acc[i - 1] + sceneDurations[i - 1]);
+    return acc;
+  }, []);
+
+  const PageBackground = () => (
+    <AbsoluteFill>
+      <img
+        src={staticFile("video-images/28012026-bg.webp")}
+        style={{
+          position: "absolute",
+          inset: 0,
+          width: "100%",
+          height: "100%",
+          objectFit: "cover",
+        }}
+      />
+    </AbsoluteFill>
+  );
+
+  return (
+    <AbsoluteFill>
+      <Audio
+        src={staticFile("video-images/wedding2.mp3")}
+        volume={musicVolume}
+      />
+
+      {scenes.map((Scene, i) => {
+        const from = sceneStartTimes[i];
+        const duration = sceneDurations[i];
+
+        return (
+          <Sequence key={i} from={from} durationInFrames={duration}>
+            {i === scenes.length - 1 ? (
+              <Page>{Scene}</Page>
+            ) : (
+              <PageFlipTransition
+                sceneDuration={duration}
+                flipDuration={flipDuration}
+                background={<PageBackground />}
+                direction={i % 2 === 0 ? "left" : "right"}
+              >
+                <Page>{Scene}</Page>
+              </PageFlipTransition>
+            )}
+          </Sequence>
+        );
+      })}
+    </AbsoluteFill>
+  );
+}
+
+T28012026_01.duration = 30 * 37;

package/src/compositions.jsx

@@ -1,6 +1,8 @@
 import React from "react";
 import { Composition } from "remotion";
 import { T20012026_01 } from "./Invitations/Themes/T20012026_01.jsx";
+import { T28012026_01 } from "./Invitations/Themes/T28012026_01.jsx";
+import { T03022026_01 } from "./Invitations/Themes/T03022026_01.jsx";
 
 export const VideoCompositions = () => {
   return (
@@ -8,8 +10,24 @@ export const VideoCompositions = () => {
       <Composition
         id="T20012026-01"
         component={T20012026_01}
-        fps={24}
-        durationInFrames={24 * 30}
+        fps={30}
+        durationInFrames={30 * 30}
+        width={1080}
+        height={1920}
+      />
+       <Composition
+        id="T28012026-01"
+        component={T28012026_01}
+        fps={30}
+        durationInFrames={30 * 37}
+        width={1080}
+        height={1920}
+      />
+      <Composition
+        id="T03022026-01"
+        component={T03022026_01}
+        fps={30}
+        durationInFrames={30 * 38}
         width={1080}
         height={1920}
       />

package/src/index.js

@@ -1,2 +1,4 @@
 // Preview-only exports (PURE components)
-export { T20012026_01 } from "./Invitations/Themes/T20012026_01.jsx";
+export { T20012026_01 } from "./Invitations/Themes/T20012026_01.jsx"
+export { T28012026_01 } from "./Invitations/Themes/T28012026_01.jsx"
+export { T03022026_01 } from "./Invitations/Themes/T03022026_01.jsx"