Hs/loginform

.env.development

@@ -1,5 +1,6 @@
 NEXTAUTH_SECRET= sadsada
-NEXTAPI_URL= http://localhost:3000
+NEXT_PUBLIC_BACKEND_URL = https://yoyo.dev.flamapp.com/
+# NEXT_PUBLIC_BACKEND_URL = http:/192.168.1.172:3000/
 NEXT_PUBLIC_BACKEND_URL = https://yoyo.dev.flamapp.com/
 NEXT_PUBLIC_ENV = development
 NEXT_PUBLIC_AVATURN_KEY= 1KpN2kSPr-2An7Vxi66yePiLv2NYTXRmS1AuDQqkEPf5_qUI6IHxb8KyOAdjHv_Ikf1tTsdWGsYZEJtvnTqu1Q

app/(protected)/avatars/loading.tsx

@@ -0,0 +1,12 @@
+import Spinner from "@/components/Spinner";
+import React from "react";
+
+const Loading = () => {
+  return (
+    <div className="text-white/50 flex w-full h-full items-center justify-center text-2xl z-50 font-bold gap-2">
+      <Spinner spinnerClassName="text-primary" />
+    </div>
+  );
+};
+
+export default Loading;

app/(protected)/avatars/page-client.tsx

@@ -1,42 +1,26 @@
 "use client";
 
+import Icon from "@/components/icons";
 import CreateAvatarButton from "@/components/ui/avatars/create-avatar-button";
-import Content from "@/components/ui/dashboard/Content";
-import NoAvatars from "@/components/ui/home/No-avatars";
-import { getAvatars } from "@/lib/api/http";
+import Content from "@/components/ui/avatars/Content";
+import NoAvatars from "@/components/ui/avatars/No-avatars";
+import Link from "next/link";
 
-import React, { useEffect, useState } from "react";
+import React from "react";
 
 const AvatarSelectClient = () => {
-  const [avatars, setAvatars] = useState<any[]>([]);
-  const [show, setShow] = useState(true);
-
-  useEffect(() => {
-    setTimeout(() => {
-      setShow(false);
-    }, 5000);
-  }, []);
-
-  useEffect(() => {
-    const api = async () => {
-      const res = await getAvatars();
-      console.log("res", res);
-      setAvatars(res);
-      return res;
-    };
-    api();
-  }, []);
-
   return (
     <div className="z-20 flex h-screen flex-col items-start gap-3 py-4 overflow-auto croll w-full">
-      <div className="fixed bg-gradient-to-t from-transparent via-transparent to-black/80 h-16 w-full top-0 left-0 z-40"></div>
-      <p className="font-extrabold text-xl text-white mt-8 px-6">My Avatars</p>
-      {avatars.length !== 0 && <Content avatars={avatars} />}
-      {avatars.length === 0 && (
-        <NoAvatars />
-      )}
+      {/* <div className="fixed bg-gradient-to-t from-transparent via-transparent to-black/80 h-16 w-full top-0 left-0 z-10"></div> */}
+      <div className="flex gap-4 font-extrabold text-xl text-white mt-8 px-6 items-center">
+        <Link href="/home" replace>
+          <Icon icon="back" size={24} />
+        </Link>
+        My Avatars
+      </div>
+      <Content />
       <CreateAvatarButton />
-      <div className="fixed bg-gradient-to-b from-transparent via-black/60 to-black/60 h-16 w-full bottom-0 left-0 z-40"></div>
+      {/* <div className="fixed bg-gradient-to-b from-transparent via-black/60 to-black/60 h-16 w-full bottom-0 left-0 z-10"></div> */}
     </div>
   );
 };

app/(protected)/avatars/use-avatars.tsx

@@ -0,0 +1,15 @@
+import { getAvatars } from '@/lib/api/http';
+import useSwr from 'swr';
+
+const useAvatars = () => {
+  const { data, mutate, isLoading, error } = useSwr('/avatars', getAvatars);
+
+  return {
+    data: data as any,
+    mutate,
+    loading: isLoading, 
+    error,
+  }
+}
+
+export default useAvatars

app/(protected)/home/create/page-client.tsx

@@ -0,0 +1,41 @@
+"use client";
+
+import React, { useEffect, useState } from "react";
+import { Button } from "@/components/ui/button";
+import Link from "next/link";
+import cookies from "js-cookie";
+
+const img =
+  "https://s3-alpha-sig.figma.com/img/2192/9ade/96e419a040fe1b637d4964ddf4f4689f?Expires=1707696000&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4&Signature=Wzh9aCE5Oi5lAk9DFPMKEe~JiXKlDhmQ8jql01oqCftocD2aDjJxsn1ZZmeDtdSN5LauU64X6TpbAiFSZU-QY7wTvIXjvX-7GyZvX~9dxHPGuamFF04caDGZpgEgHphmax2YzFkK-Ee4lXtjAi2VDePRoUpb3HOg5WPju5jkYEJGEOlAWr5sccyPaZzW8X2A18Mvm5DM-HB1pyhphL~eEqu5h2HIcB9paL69eZ4Zr~75DfbaI6PXwMIPzTvcZ0~T9m~ooTFbpc8iUF5sQZ8MJ6qA2Mp6K0EA5lNR1pM~b3d0VJ6aGF2CWNTFY-XFY9bGpOQjXgJaJDxCTkfLyQk9Kg__";
+
+const PageClient = () => {
+  const [avatarData, setAvatarData] = useState<any>(null);
+
+  useEffect(() => {
+     const data = cookies.get("__avatar") || null;
+     const aData = JSON.parse(data as any);
+     setAvatarData(aData);
+  }, [])
+
+  return (
+    <div className="flex flex-col items-center justify-center gap-4 h-full w-full">
+      <img
+        className="object-contain h-max saturate-50 z-30"
+        src={avatarData ? avatarData?.display_url : img}
+        alt={"hello"}
+      />
+      <span className="text-white/60 font-extrabold font-3xl text-center">
+        {" "}
+        Creating your video <br /> It will be available in 5-10 minutes...
+      </span>
+      <Link
+        href={"/videos"}
+        className="underline underline-offset-2 text-blue-500"
+      >
+        <Button>Go to my videos</Button>
+      </Link>
+    </div>
+  );
+};
+
+export default PageClient;

app/(protected)/home/create/page.tsx

@@ -1,35 +1,9 @@
-/* eslint-disable @next/next/no-img-element */
-import { Button } from "@/components/ui/button";
-import Image from "next/image";
-import Link from "next/link";
 import React from "react";
-
-const img =
-  "https://s3-alpha-sig.figma.com/img/2192/9ade/96e419a040fe1b637d4964ddf4f4689f?Expires=1707696000&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4&Signature=Wzh9aCE5Oi5lAk9DFPMKEe~JiXKlDhmQ8jql01oqCftocD2aDjJxsn1ZZmeDtdSN5LauU64X6TpbAiFSZU-QY7wTvIXjvX-7GyZvX~9dxHPGuamFF04caDGZpgEgHphmax2YzFkK-Ee4lXtjAi2VDePRoUpb3HOg5WPju5jkYEJGEOlAWr5sccyPaZzW8X2A18Mvm5DM-HB1pyhphL~eEqu5h2HIcB9paL69eZ4Zr~75DfbaI6PXwMIPzTvcZ0~T9m~ooTFbpc8iUF5sQZ8MJ6qA2Mp6K0EA5lNR1pM~b3d0VJ6aGF2CWNTFY-XFY9bGpOQjXgJaJDxCTkfLyQk9Kg__";
+import PageClient from "./page-client";
 
 const Page = () => {
   return (
-    <div className="flex flex-col items-center justify-center gap-4 h-full w-full">
-      <div className="relative h-72 w-72">
-        <Image
-          fill
-          className="object-contain saturate-50 z-30"
-          src={img}
-          alt={"hello"}
-        />
-      </div>
-      <span className="text-white/60 font-extrabold font-3xl text-center">
-        {" "}
-        Creating your video <br /> It will be available in 5-10 minutes...
-      </span>
-      <Link
-        replace
-        href={"/videos"}
-        className="underline underline-offset-2 text-blue-500"
-      >
-        <Button>Go to my videos</Button>
-      </Link>
-    </div>
+    <PageClient />
   );
 };
 

app/(protected)/home/page-client.tsx

@@ -7,22 +7,40 @@ import Link from "next/link";
 import React, { useState } from "react";
 import { Button } from "@/components/ui/button";
 import { useRouter } from "next/navigation";
+import cookies from "js-cookie";
+import { toast } from "sonner";
 
 const HomeClient = ({ templates }: any) => {
   const item = templates[0];
-  const [play, setPlay] = useState<boolean>(false);
-  const [loading, setLoading] = useState<boolean>(false)
+  const [loading, setLoading] = useState<boolean>(false);
+  const [muted, setMuted] = useState<boolean>(true);
 
   const router = useRouter();
-  
+
   const handleCreatevideo = async () => {
-    setLoading(true)
-    await createUserVideo(item?._id)
-    .then((res: any) => setLoading(false))
-    .catch((err: any) => console.log(err))
+    setLoading(true);
+
+    const cookieData: any = cookies.get("__avatar") || null;
+
+    const avatarData = JSON.parse(cookieData);
+
+    if (!avatarData) {
+      toast.error("Select a Avatar first");
+      setLoading(false);
+      router.replace("/avatars");
+      return;
+    }
 
-    router.push('/home/create');
-  }
+    await createUserVideo(item?._id, avatarData?.id)
+      .then((res: any) => {
+        router.replace("/home/create");
+        setLoading(false);
+      })
+      .catch((err: any) => {
+        toast.error("Error creating video");
+        console.log(err);
+      });
+  };
 
   return (
     <div className="relative z-20 flex h-screen w-full flex-col items-start gap-4 overflow-hidden">
@@ -39,51 +57,42 @@ const HomeClient = ({ templates }: any) => {
       >
         <Icon icon={"video"} size={25} />
       </Link>
-      <div className="absolute left-0 top-0 h-full w-full z-30">
-        <Image
-          fill
-          className="object-fit saturate-50 duration-300 ease-in-out z-30"
-          src={item?.thumbnail_url}
-          alt={"hello"}
-        />
-      </div>
-      {play && (
-        <video
-          autoPlay
-          loop
-          playsInline
-          className="object-cover h-full w-full z-30 duration-300 ease-in-out"
-        >
-          <source src={item?.preview_url} type="video/mp4" />
-        </video>
-      )}
+      <video
+        autoPlay
+        muted={muted}
+        loop
+        playsInline
+        className="object-cover h-full w-full z-30 duration-300 ease-in-out"
+        poster={item?.thumbnail_url}
+        preload="metadata"
+      >
+        <source src={`${item?.preview_url}#t=0.2`} type="video/mp4" />
+      </video>
       <div className="absolute z-30 bg-gradient-to-b from-transparent via-black/60 to-black/80 h-48 w-full bottom-0 left-0"></div>
       <div className="fixed bottom-2 left-0 flex flex-col p-4 gap-2 z-30 w-full">
-        <span className="text-white text-xl font-bold mb-4 flex w-full justify-between items-center">
+        <div className="text-white text-xl font-bold mb-4 flex w-full justify-between items-center">
           {item?.display_name}
           <span
-            className="h-max bg-primary rounded-full text-black cursor-pointer"
-            onClick={() => setPlay(!play)}
+            className="h-max bg-primary rounded-full text-black cursor-pointer p-1"
+            onClick={() => {
+              setMuted(!muted);
+            }}
           >
-            {play ? (
-              <Icon icon={"pause"} size={30} />
+            {muted ? (
+              <Icon icon={"muted"} size={18} />
             ) : (
-              <Icon icon={"play"} size={30} />
+              <Icon icon={"unmute"} size={18} />
             )}
           </span>
-        </span>
-        {/* <span className="flex gap-2 font-semibold text-sm text-white items-center mb-6">
-          <Icon icon={"bar"} size={"18"} />
-          {item?.display_name} theme song
-        </span> */}
+        </div>
         <Button
           onClick={handleCreatevideo}
           type="button"
           disabled={loading}
           className="gap-2"
         >
           <Icon icon={"create"} size={"18"} />
-          {!loading ? 'Create' : 'creating video...'}
+          {!loading ? "Create" : "creating video..."}
         </Button>
         {/* <span className="flex gap-2 text-sm items-center w-full justify-center text-white">
           Scroll to see next <Icon icon={"doubleUp"} />

app/(protected)/home/page.tsx

@@ -6,7 +6,7 @@ import { notFound } from "next/navigation";
 export default async function Page() {
   const templates = await getTemplates();
 
-  if(templates.length === 0 || !templates) {
+  if(templates?.length === 0 || !templates) {
     notFound();
   }
 

app/(protected)/layout.tsx

@@ -1,16 +1,13 @@
 import { ReactNode } from "react";
-import AuthProvider from "@/lib/providers/AuthProvider";
 import { Background } from "@/components/ui/background";
 
-export const dynamic = "force-static";
+// export const dynamic = "force-static";
 
 export default function Layout({ children }: { children: ReactNode }) {
   return (
-    <AuthProvider>
-      <div className="flex h-screen w-screen justify-center overflow-hidden">
-        <Background />
-        {children}
-      </div>
-    </AuthProvider>
+    <div className="flex h-screen w-screen justify-center overflow-hidden">
+      <Background />
+      {children}
+    </div>
   );
 }

app/(protected)/videos/loading.tsx

@@ -0,0 +1,12 @@
+import Spinner from "@/components/Spinner";
+import React from "react";
+
+const Loading = () => {
+  return (
+    <div className="text-white/50 flex w-full h-full items-center justify-center text-2xl z-50 font-bold gap-2">
+      <Spinner spinnerClassName="text-primary" />
+    </div>
+  );
+};
+
+export default Loading;