From 37da0ed69b930fec37d073a8cdfac93341503e43 Mon Sep 17 00:00:00 2001
From: sai80082 <saicharan.guntupalli@gmail.com>
Date: Tue, 3 Dec 2024 21:56:51 +0530
Subject: [PATCH] feat: updated UI for rewind.

---
 remotion/Root.tsx    |  2 +-
 src/pages/rewind.tsx | 77 ++++++++++++++++++++++++++++----------------
 2 files changed, 50 insertions(+), 29 deletions(-)

diff --git a/remotion/Root.tsx b/remotion/Root.tsx
index 67d4ada..9fa8334 100644
--- a/remotion/Root.tsx
+++ b/remotion/Root.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { Composition } from 'remotion';
 import { IntroComposition, Scene } from './Composition';
 
-const scenes: Scene[] = [
+export const scenes: Scene[] = [
   { message: "Welcome Varun!",
     type: "WELCOME",
     emoji: "👋",
diff --git a/src/pages/rewind.tsx b/src/pages/rewind.tsx
index de91892..77f7d00 100644
--- a/src/pages/rewind.tsx
+++ b/src/pages/rewind.tsx
@@ -1,33 +1,54 @@
-import React from 'react'
-import { Player } from '@remotion/player';
+import { Player } from "@remotion/player";
+import { IntroComposition } from "../../remotion/Composition";
+import { scenes } from "../../remotion/Root";
+import { Button } from "@/components/ui/button";
 
-import { IntroComposition } from '../../remotion/Composition';
-
-const scenes = [
-  { message: "Welcome to Immich Replay Varun!" },
-  { message: "2024! So much memories!" },
-  { message: "You've been to 10 new countries!" },
-  { message: "And 25 new cities!" },
-  { message: "Here are some of my favorite memories from this year!" },
-  { message: "The most memory filled album of all time!" },
-  { message: "You made so much memory with Soundarapandian"},
-]
 export default function RewindPage() {
+  const playerProps = {
+    component: IntroComposition,
+    inputProps: { scenes },
+    durationInFrames: scenes.length * 120,
+    compositionWidth: 720,
+    compositionHeight: 1280,
+    fps: 30,
+    controls: true,
+    autoPlay: true
+  };
+
+  const renderButton = (className = "") => (
+    <Button
+      size="lg"
+      className={`bg-gradient-to-r from-purple-600 to-blue-600 hover:from-purple-700 hover:to-blue-700 text-white rounded-full font-semibold ${className}`}
+    >
+      Render My Rewind 🎬
+    </Button>
+  );
+
   return (
-    <div>
-      <Player
-        component={IntroComposition}
-        inputProps={{ scenes: scenes }}
-        durationInFrames={scenes.length * 30}
-        compositionWidth={1280}
-        compositionHeight={720}
-        fps={30}
-        style={{
-          width: 1280,
-          height: 720,
-        }}
-        controls
-      />
+    <div className="min-h-screen text-white flex flex-col">
+      <h1 className="text-4xl font-bold text-center mt-4">Your 2024 Rewind</h1>
+      <div className="flex-1 flex flex-col lg:flex-row h-full p-4 gap-4">
+
+        <div className="flex-1 relative bg-gray-900 rounded-lg shadow-xl">
+          <Player
+            {...playerProps}
+            style={{
+              width: "100%",
+              height: "100%",
+              position: "absolute",
+              top: 0,
+              left: 0,
+            }}
+          />
+        </div>
+        <div className="flex-1 flex flex-col justify-center items-center p-4 lg:p-8 bg-gray-900 rounded-lg shadow-xl">
+          <h2 className="text-2xl font-semibold mb-4">Ready to create your video?</h2>
+          <p className="text-gray-300 mb-6 text-center">
+            Click the button below to render your personalized 2024 rewind video!
+          </p>
+          {renderButton("w-full lg:w-auto px-8 py-4")}
+        </div>
+      </div>
     </div>
-  )
+  );
 }