@evatril/video-templates 2.0.7 → 2.0.9

package/src/Invitations/Themes/T03022026_01.jsx

@@ -0,0 +1,269 @@
+import React, { useMemo } from "react";
+import {
+    Sequence,
+    useVideoConfig,
+    Audio,
+    staticFile,
+    AbsoluteFill,
+    Img,
+    useCurrentFrame,
+    interpolate,
+    Easing,
+} from "remotion";
+
+import { usePreloadImages } from "../hooks/usePreloadImages.js";
+import { F03022026_01 } from "../Frames/F03022026_01.jsx";
+import { F03022026_02 } from "../Frames/F03022026_02.jsx";
+import { F03022026_03 } from "../Frames/F03022026_03.jsx";
+import { F03022026_04 } from "../Frames/F03022026_04.jsx";
+import { F03022026_05 } from "../Frames/F03022026_05.jsx";
+import { HoldSlide } from "../Elements/HoldSlide.jsx";
+
+export const T03022026_01 = ({
+    event,
+    formData,
+    eventDateTime,
+    occasionDate,
+    venue,
+    welcomeMessage,
+    invitationMessage,
+    familyMember,
+}) => {
+    const frame = useCurrentFrame();
+    const { fps, durationInFrames } = useVideoConfig();
+
+    /* ---------------- 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 slideDuration = 1 * fps;
+
+    const firstSceneContent = 5 * fps;
+    const secondSceneContent = 6 * fps;
+    const thirdSceneContent = 7 * fps;
+    const fourSceneContent = 7 * fps;
+    const fiveSceneContent = 9 * fps;
+    const firstSceneDuration = firstSceneContent + slideDuration;
+    const secondSceneDuration = secondSceneContent + slideDuration;
+    const thirdSceneDuration = thirdSceneContent + slideDuration;
+    const fourSceneDuration = fourSceneContent + slideDuration;
+    const fiveSceneDuration = fiveSceneContent + slideDuration;
+
+    /* ---------------- 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/03022026-bg.webp"),
+            staticFile("video-images/03022026-bg-2.webp"),
+            staticFile("video-images/03022026-bg-3.webp"),
+            staticFile("video-images/03022026-bg-4.webp"),
+            staticFile("video-images/03022026-bg-5.webp"),
+            staticFile("video-images/03022026-krishnaradha.webp"),
+            staticFile("video-images/03022026-krishnaradha-2.webp"),
+            staticFile("video-images/03022026-krishnaradha-4.webp"),
+            staticFile("video-images/03022026-krishnaradha-5.webp"),
+        ],
+        []
+    );
+
+    usePreloadImages(imagesToPreload);
+
+    const Page = ({ bg, children }) => (
+        <AbsoluteFill>
+            <Img
+                src={bg}
+                style={{
+                    position: "absolute",
+                    inset: 0,
+                    width: "100%",
+                    height: "100%",
+                    objectFit: "cover",
+                }}
+            />
+            {children}
+        </AbsoluteFill>
+    );
+
+    const backgrounds = useMemo(
+        () => [
+            staticFile("video-images/03022026-bg.webp"),
+            staticFile("video-images/03022026-bg-2.webp"),
+            staticFile("video-images/03022026-bg-3.webp"),
+            staticFile("video-images/03022026-bg-4.webp"),
+            staticFile("video-images/03022026-bg-5.webp"),
+        ],
+        []
+    );
+
+    return (
+        <AbsoluteFill>
+            {/* 🎵 MUSIC */}
+            <Audio
+                src={staticFile("video-images/wedding2.mp3")}
+                volume={musicVolume}
+            />
+
+            {/* 🌸 SCENE 1 (0–10s) */}
+            <Sequence from={0} durationInFrames={firstSceneDuration}>
+                <HoldSlide
+                    contentDuration={firstSceneContent}
+                    slideDuration={slideDuration}
+                    nextBg={backgrounds[1]}
+                >
+                    <Page bg={backgrounds[0]}>
+                        <F03022026_01 />
+                    </Page>
+                </HoldSlide>
+            </Sequence>
+
+            {/* 🌸 SCENE 2 (10–20s) */}
+            <Sequence from={firstSceneDuration} durationInFrames={secondSceneDuration}>
+                <HoldSlide
+                    contentDuration={secondSceneContent}
+                    slideDuration={slideDuration}
+                    nextBg={backgrounds[2]}
+                >
+                    <Page bg={backgrounds[1]}>
+                        <F03022026_02
+                            firstName={firstName}
+                            secondName={secondName}
+                            welcomeMessage={welcomeMessage}
+                            occasionDate={occasionDate}
+                        />
+                    </Page>
+                </HoldSlide>
+            </Sequence>
+
+            {/* 🌸 SCENE 3 (20–30s) */}
+            <Sequence
+                from={firstSceneDuration + secondSceneDuration}
+                durationInFrames={thirdSceneDuration}
+            >
+                <HoldSlide
+                    contentDuration={thirdSceneContent}
+                    slideDuration={slideDuration}
+                    nextBg={backgrounds[3]}
+
+                >
+                    <Page bg={backgrounds[2]}>
+                        <F03022026_03
+                            firstName={firstName}
+                            firstPhoto={firstPhoto}
+                            firstSideNote={firstSideNote}
+                            secondName={secondName}
+                            secondPhoto={secondPhoto}
+                            secondSideNote={secondSideNote}
+                            invitationMessage={invitationMessage}
+                        />
+                    </Page>
+                </HoldSlide>
+            </Sequence>
+
+            {/* SCENE 4 */}
+            <Sequence
+                from={firstSceneDuration + secondSceneDuration + thirdSceneDuration}
+                durationInFrames={fourSceneDuration}
+            >
+                <HoldSlide
+                    contentDuration={fourSceneContent}
+                    slideDuration={slideDuration}
+                    nextBg={backgrounds[4]}
+                >
+                    <Page bg={backgrounds[3]}>
+                        <F03022026_04
+                            eventDateTime={eventDateTime}
+                            venueName={venueName}
+                            venueAddress={venueAddress}
+                        />
+                    </Page>
+                </HoldSlide>
+            </Sequence>
+
+            {/* SCENE 5 */}
+            <Sequence
+                from={
+                    firstSceneDuration +
+                    secondSceneDuration +
+                    thirdSceneDuration +
+                    fourSceneDuration
+                }
+                durationInFrames={fiveSceneDuration}
+            >
+                <HoldSlide
+                    contentDuration={fiveSceneContent}
+                    slideDuration={slideDuration}
+                >
+                    <Page bg={backgrounds[4]}>
+                        <F03022026_05 familyMember={familyMember} />
+                    </Page>
+                </HoldSlide>
+            </Sequence>
+
+        </AbsoluteFill>
+    );
+};
+
+T03022026_01.duration = 30 * 38;

package/src/Invitations/Themes/T05022026_01.jsx

@@ -0,0 +1,259 @@
+import React, { useMemo } from "react";
+import {
+    Sequence,
+    useVideoConfig,
+    Audio,
+    staticFile,
+    AbsoluteFill,
+    Img,
+    useCurrentFrame,
+    interpolate,
+    Easing,
+} from "remotion";
+
+import { usePreloadImages } from "../hooks/usePreloadImages.js";
+import { F05022026_01 } from "../Frames/F05022026_01.jsx";
+import { F05022026_02 } from "../Frames/F05022026_02.jsx";
+import { F05022026_03 } from "../Frames/F05022026_03.jsx";
+import { F05022026_04 } from "../Frames/F05022026_04.jsx";
+import { CornerFlipTransition } from "../Elements/CornerFlipTransition05022026.jsx";
+
+export const T05022026_01 = ({
+    event,
+    formData,
+    eventDateTime,
+    occasionDate,
+    venue,
+    welcomeMessage,
+    invitationMessage,
+    familyMember,
+}) => {
+    const frame = useCurrentFrame();
+    const { fps, durationInFrames } = useVideoConfig();
+
+    /* ---------------- 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 flipDuration = 1 * fps;
+
+    const firstSceneDuration = 7 * fps;
+    const secondSceneDuration = 7 * fps;
+    const thirdSceneDuration = 7 * fps;
+    const fourSceneDuration = 9 * fps;
+
+    const s1 = 0;
+    const f1 = s1 + firstSceneDuration;
+
+    const s2 = f1 + flipDuration;
+    const f2 = s2 + secondSceneDuration;
+
+    const s3 = f2 + flipDuration;
+    const f3 = s3 + thirdSceneDuration;
+
+    const s4 = f3 + flipDuration;
+
+    /* ---------------- 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/05022026-bg.webp"),
+            staticFile("video-images/05022026-bg-2.webp"),
+            staticFile("video-images/05022026-bg-3.webp"),
+            staticFile("video-images/05022026-bg-4.webp"),
+            staticFile("video-images/05022026-Duck.webp"),
+            staticFile("video-images/05022026-HangingLamps.webp"),
+            staticFile("video-images/05022026-Ganesh.webp"),
+            staticFile("video-images/05022026-Flower.webp"),
+            staticFile("video-images/20012026-couple-walk.webp"),
+            staticFile("video-images/05022026-HangingJumar.webp"),
+            staticFile("video-images/05022026-Nameplate.webp"),
+            staticFile("video-images/05022026-LeftPeacock.webp"),
+        ],
+        []
+    );
+
+    usePreloadImages(imagesToPreload);
+
+    const Page = ({ bg, children }) => (
+        <AbsoluteFill>
+            <Img
+                src={bg}
+                style={{
+                    position: "absolute",
+                    inset: 0,
+                    width: "100%",
+                    height: "100%",
+                    objectFit: "cover",
+                }}
+            />
+            {children}
+        </AbsoluteFill>
+    );
+
+    const backgrounds = useMemo(
+        () => [
+            staticFile("video-images/05022026-bg.webp"),
+            staticFile("video-images/05022026-bg-2.webp"),
+            staticFile("video-images/05022026-bg-3.webp"),
+            staticFile("video-images/05022026-bg-4.webp"),
+        ],
+        []
+    );
+
+    return (
+        <AbsoluteFill>
+            <Audio
+                src={staticFile("video-images/wedding2.mp3")} volume={musicVolume}
+            />
+
+            {/* SCENE 1 */}
+            <Sequence from={s1} durationInFrames={firstSceneDuration}>
+                <Page bg={backgrounds[0]}>
+                    <F05022026_01 />
+                </Page>
+            </Sequence>
+
+            {/* SCENE 2 */}
+            <Sequence from={f1 - flipDuration} durationInFrames={flipDuration + secondSceneDuration}>
+
+                {/* OLD scene stays underneath */}
+                <Page bg={backgrounds[0]}>
+                    <F05022026_01 />
+                </Page>
+
+                {/* NEW scene flips in */}
+                <CornerFlipTransition duration={flipDuration}>
+                    <Page bg={backgrounds[1]}>
+                        <F05022026_02
+                            firstName={firstName}
+                            firstSideNote={firstSideNote}
+                            secondName={secondName}
+                            secondSideNote={secondSideNote}
+                            invitationMessage={invitationMessage}
+                            occasionDate={occasionDate}
+                        />
+                    </Page>
+                </CornerFlipTransition>
+
+            </Sequence>
+
+            {/* SCENE 3 */}
+            <Sequence from={f2 - flipDuration} durationInFrames={flipDuration + thirdSceneDuration}>
+
+                {/* OLD scene stays visible underneath */}
+                <Page bg={backgrounds[1]}>
+                    <F05022026_02
+                        firstName={firstName}
+                        firstSideNote={firstSideNote}
+                        secondName={secondName}
+                        secondSideNote={secondSideNote}
+                        invitationMessage={invitationMessage}
+                        occasionDate={occasionDate}
+                    />
+                </Page>
+
+                {/* NEW scene flips in smoothly */}
+                <CornerFlipTransition duration={flipDuration}>
+                    <Page bg={backgrounds[2]}>
+                        <F05022026_03
+                            eventDateTime={eventDateTime}
+                            venueName={venueName}
+                            venueAddress={venueAddress}
+                        />
+                    </Page>
+                </CornerFlipTransition>
+
+            </Sequence>
+
+            {/* SCENE 4 */}
+            <Sequence from={f3 - flipDuration} durationInFrames={flipDuration + fourSceneDuration}>
+
+                {/* OLD Scene (Scene-3) stays underneath */}
+                <Page bg={backgrounds[2]}>
+                    <F05022026_03
+                        eventDateTime={eventDateTime}
+                        venueName={venueName}
+                        venueAddress={venueAddress}
+                    />
+                </Page>
+
+                {/* NEW Scene flips in */}
+                <CornerFlipTransition duration={flipDuration}>
+                    <Page bg={backgrounds[3]}>
+                        <F05022026_04 familyMember={familyMember} />
+                    </Page>
+                </CornerFlipTransition>
+
+            </Sequence>
+
+        </AbsoluteFill>
+
+    );
+};
+
+T05022026_01.duration = 30 * 30;

package/src/Invitations/Themes/T20012026_01.jsx

@@ -7,6 +7,8 @@ import {
   AbsoluteFill,
   useCurrentFrame,
   Img,
+  interpolate,
+  Easing,
 } from "remotion";
 
 import { F20012026_01 } from "../Frames/F20012026_01.jsx";
@@ -25,12 +27,27 @@ export const T20012026_01 = ({
   invitationMessage,
   familyMember,
 }) => {
-  const { durationInFrames } = useVideoConfig();
+  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",
+    }
+  );
+
   /* ---------------- SAFE DATA ---------------- */
 
   const whoIsCreating =
+    event?.eventData?.occasion_data?.who_is_creating ??
     event?.occasion_data?.who_is_creating ??
     event?.who_is_creating;
 
@@ -38,20 +55,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 || "";
@@ -75,26 +107,47 @@ export const T20012026_01 = ({
 
   const imagesToPreload = useMemo(
     () => [
-      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"),
+      staticFile("video-images/20012026-bg.webp"),
+      staticFile("video-images/20012026-bride.webp"),
+      staticFile("video-images/20012026-butterfly.webp"),
+      staticFile("video-images/20012026-couple-walk.webp"),
+      staticFile("video-images/20012026-curtain-floral.webp"),
+      staticFile("video-images/20012026-floral-left.webp"),
+      staticFile("video-images/20012026-floral-right.webp"),
+      staticFile("video-images/20012026-groom.webp"),
+      staticFile("video-images/20012026-opening-gate.webp"),
+      staticFile("video-images/20012026-peacock.webp"),
+      staticFile("video-images/20012026-tree-left.webp"),
+      staticFile("video-images/20012026-tree-right.webp"),
+      staticFile("video-images/20012026-wedding-gate.webp"),
     ],
     []
   );
 
   usePreloadImages(imagesToPreload);
 
-  /* ---------------- RENDER ---------------- */
+  const Page = ({ bg, children }) => (
+    <AbsoluteFill>
+      <Img
+        src={bg}
+        style={{
+          position: "absolute",
+          inset: 0,
+          width: "100%",
+          height: "100%",
+          objectFit: "cover",
+        }}
+      />
+      {children}
+    </AbsoluteFill>
+  );
+
+  const backgrounds = useMemo(
+    () => [
+      staticFile("video-images/20012026-bg.webp"),
+    ],
+    []
+  );
 
   return (
     <AbsoluteFill>
@@ -102,9 +155,7 @@ export const T20012026_01 = ({
       {/* 🎵 MUSIC */}
       <Audio
         src={staticFile("video-images/wedding.mp3")}
-        startFrom={0}
-        endAt={durationInFrames}
-        volume={0.4}
+        volume={musicVolume}
       />
 
 
@@ -176,4 +227,6 @@ export const T20012026_01 = ({
 
     </AbsoluteFill>
   );
-};
+};
+
+T20012026_01.duration = 30 * 30;