Merge branch 'main' into fix/ui

code100x · Sep 22, 2024 · 573b373 · 573b373
2 parents dd6962b + 2527659
commit 573b373
Show file tree

Hide file tree

Showing 31 changed files with 959 additions and 297 deletions.
diff --git a/next-app/app/api/auth/[...nextauth]/route.ts b/next-app/app/api/auth/[...nextauth]/route.ts
@@ -1,6 +1,7 @@
-import { authOptions } from "@/lib/auth-options";
 import NextAuth from "next-auth";
 
+import { authOptions } from "@/lib/auth-options";
+
 const handler = NextAuth(authOptions);
 
-export { handler as GET, handler as POST };
+export { handler as GET, handler as POST };
diff --git a/next-app/app/auth/page.tsx b/next-app/app/auth/page.tsx
@@ -0,0 +1,22 @@
+"use client";
+
+import { useSession } from "next-auth/react";
+import { useRouter } from "next/navigation";
+
+import { SignInFlow } from "@/types/auth-types";
+import AuthScreen from "@/components/auth/auth-screen";
+
+export default function AuthPage({
+  searchParams,
+}: {
+  searchParams: { authType: SignInFlow; mailId?: string };
+}) {
+  const formType = searchParams.authType;
+  const session = useSession();
+  const router = useRouter();
+
+  if (session.status === "authenticated") {
+    return router.push("/");
+  }
+  return <AuthScreen authType={formType} />;
+}
diff --git a/next-app/app/favicon.ico b/next-app/app/favicon.ico
diff --git a/next-app/app/globals.css b/next-app/app/globals.css
@@ -2,6 +2,12 @@
 @tailwind components;
 @tailwind utilities;
 
+html,
+body,
+:root {
+  height: 100%;
+}
+
 @layer base {
   :root {
     --background: 0 0% 100%;
@@ -90,3 +96,21 @@
     @apply text-foreground;
   }
 }
+
+
+input:-webkit-autofill,
+input:-webkit-autofill:hover,
+input:-webkit-autofill:focus,
+textarea:-webkit-autofill,
+textarea:-webkit-autofill:hover,
+textarea:-webkit-autofill:focus,
+select:-webkit-autofill,
+select:-webkit-autofill:hover,
+select:-webkit-autofill:focus {
+  -webkit-text-fill-color: white;
+  -webkit-box-shadow: 0 0 0px 1000px transparent inset;
+  box-shadow: 0 0 0px 1000px transparent inset;
+  transition: background-color 5000s ease-in-out 0s;
+  color: white;
+  caret-color: white;
+}
diff --git a/next-app/app/layout.tsx b/next-app/app/layout.tsx
@@ -3,8 +3,13 @@ import { Inter } from "next/font/google";
 import { Providers, ThemeProvider } from "@/components/provider";
 
 import "./globals.css";
-import { ToastContainer, toast, ToastContainerProps, Bounce } from 'react-toastify';
-import 'react-toastify/dist/ReactToastify.css';
+import {
+  ToastContainer,
+  toast,
+  ToastContainerProps,
+  Bounce,
+} from "react-toastify";
+import "react-toastify/dist/ReactToastify.css";
 
 const globalToastOptions: ToastContainerProps = {
   position: "top-right",
@@ -19,8 +24,24 @@ const globalToastOptions: ToastContainerProps = {
 const inter = Inter({ subsets: ["latin"] });
 
 export const metadata: Metadata = {
-  title: "Create Next App",
-  description: "Generated by create next app",
+  metadataBase: new URL(process.env.NEXTAUTH_URL || "https://muzer.100xdevs.com/"),
+  keywords:
+    "music stream, fan interaction, live streaming, high-quality audio, curate music, Muzer",
+  title: "Muzer | Fan-Curated Live Music Streaming",
+  description:
+    "Live fan-curated music streaming. High-quality audio, real-time engagement.",
+  openGraph: {
+    type: "website",
+    locale: "en_IE",
+    url: `${process.env.NEXTAUTH_URL}/opengraph-image.png`,
+    images: "/opengraph-image.png",
+    siteName: "Infra",
+  },
+  icons: [
+    {
+      url: `${process.env.NEXTAUTH_URL}/favicon.ico`,
+    },
+  ],
 };
 
 export default function RootLayout({
@@ -31,7 +52,7 @@ export default function RootLayout({
   return (
     <html lang="en" suppressHydrationWarning>
       <body className={`${inter.className} bg-[#1b1934b2]`}>
-      <ToastContainer {...globalToastOptions}/>
+       <ToastContainer {...globalToastOptions}/>
         <ThemeProvider
           attribute="class"
           defaultTheme="system"

diff --git a/next-app/app/opengraph-image.png b/next-app/app/opengraph-image.png
diff --git a/next-app/app/page.tsx b/next-app/app/page.tsx
@@ -5,12 +5,12 @@ import { Input } from "@/components/ui/input";
 import { Users, Radio, Headphones } from "lucide-react";
 import { Appbar } from "@/components/Appbar";
 import { getServerSession } from "next-auth";
-import { authOptions } from "@/lib/auth-options";
 import { redirect } from "next/navigation";
+import { authOptions } from "@/lib/auth-options";
 
 export default async function LandingPage() {
   const session = await getServerSession(authOptions);
-   if (session?.user.id) redirect("/home"); 
+  if (session?.user.id) redirect("/home");
 
   return (
     <div className="flex min-h-screen flex-col bg-gradient-to-br from-gray-900 via-purple-900 to-gray-900">
@@ -29,7 +29,14 @@ export default async function LandingPage() {
             </div>
             <div className="space-x-4">
               <Button className="bg-purple-600 text-white hover:bg-purple-700">
-                <Link href="/signin">Get Started</Link>
+                <Link
+                  href={{
+                    pathname: "/auth",
+                    query: { authType: "signUp" },
+                  }}
+                >
+                  Get Started
+                </Link>
               </Button>
               <Button className="bg-white text-purple-400 hover:bg-white/90">
                 Learn More
@@ -76,20 +83,30 @@ export default async function LandingPage() {
                 experiences.
               </p>
             </div>
-            <div className="w-full max-w-sm space-y-2">
-              <form className="flex space-x-2">
-                <Input
-                  className="max-w-lg flex-1 border-gray-700 bg-gray-800 text-white placeholder-gray-500"
+            <div className="w-full max-w-sm">
+              {/*<form className="flex space-x-2">
+                 <Input
+                  className="focus-visible:ring-offset-0 focus-visible:ring-purple-600 bg-gray-800  bg-opacity-50 placeholder:text-gray-400 border-gray-400 text-white"
                   placeholder="Enter your email"
+                  ref={mailRef}
                   type="email"
-                />
+                /> */}
+              <Link
+                href={{
+                  pathname: "/auth",
+                  query: {
+                    authType: "signUp",
+                  },
+                }}
+              >
                 <Button
                   type="submit"
                   className="bg-purple-600 text-white hover:bg-purple-700"
                 >
                   Sign Up
                 </Button>
-              </form>
+              </Link>
+              {/* </form> */}
             </div>
           </div>
         </div>

diff --git a/next-app/app/signin/page.tsx b/next-app/app/signin/page.tsx
diff --git a/next-app/components/Appbar.tsx b/next-app/components/Appbar.tsx
@@ -3,31 +3,61 @@ import { signIn, signOut, useSession } from "next-auth/react";
 import { Button } from "@/components/ui/button";
 import { useRouter } from "next/navigation";
 import { ThemeSwitcher } from "./ThemeSwitcher";
+import Link from "next/link";
 
 export function Appbar({ showThemeSwitch = true }) {
   const session = useSession();
-  const router= useRouter();
-  const isUserLoggedIn = session.data?.user;
-  const buttonTitle = isUserLoggedIn ? "Logout" : "Login";
-
-  const handleButtonClick = () => {
-    isUserLoggedIn
-      ? signOut({ callbackUrl: "/" })
-      : signIn("google", { callbackUrl: "/home" });
-  };
+  const router = useRouter();
 
   return (
     <div className="flex justify-between px-5 py-4 md:px-10 xl:px-20">
       <div
-        onClick={()=>{
-        router.push('/home') 
-      }}  className={`flex flex-col hover:cursor-pointer justify-center text-lg font-bold ${showThemeSwitch ? "" : "text-white"}`}
+        onClick={() => {
+          router.push("/home");
+        }}
+        className={`flex flex-col justify-center text-lg font-bold hover:cursor-pointer ${showThemeSwitch ? "" : "text-white"}`}
       >
         Muzer
       </div>
-      <div className="flex items-center gap-2">
+      <div className="flex items-center gap-x-2">
+        {session.data?.user && (
+          <Button
+            className="bg-purple-600 text-white hover:bg-purple-700"
+            onClick={() =>
+              signOut({
+                callbackUrl: "/",
+              })
+            }
+          >
+            Logout
+          </Button>
+        )}
+        {!session.data?.user && (
+          <div className="space-x-3">
+            <Button
+              className="bg-purple-600 text-white hover:bg-purple-700"
+              onClick={() => router.push("/auth")}
+            >
+              Signin
+            </Button>
+            <Link
+              href={{
+                pathname: "/auth",
+                query: {
+                  authType: "signUp",
+                },
+              }}
+            >
+              <Button
+                variant={"ghost"}
+                className="text-white hover:bg-white/10"
+              >
+                Signup
+              </Button>
+            </Link>
+          </div>
+        )}
         {showThemeSwitch && <ThemeSwitcher />}
-        <Button onClick={handleButtonClick}>{buttonTitle}</Button>
       </div>
     </div>
   );

diff --git a/next-app/components/HomeView.tsx b/next-app/components/HomeView.tsx
@@ -3,6 +3,7 @@ import { toast } from "react-toastify";
 import { Appbar } from "@/components/Appbar";
 import { Card, CardHeader, CardContent } from "@/components/ui/card";
 import { Button } from "@/components/ui/button";
+import Image from "next/image";
 import {
   Dialog,
   DialogContent,
@@ -13,7 +14,7 @@ import {
 import React, { useEffect, useState } from "react";
 import { useRouter } from "next/navigation";
 import CardSkeleton from "./ui/cardSkeleton";
-import Image from "next/image";
+
 
 
 interface Space {
@@ -141,8 +142,10 @@ export default function HomeView() {
                   </CardHeader>
                   <CardContent className="overflow-visible flex flex-col justify-center  items-center  py-2">
                     <Image
+                      width={450}
+                      height={300}
                       alt="Card background"
-                      className="object-cover w-[28rem]   rounded-3xl"
+                      className="object-cover w-[28rem] rounded-3xl"
                       src="https://images.unsplash.com/photo-1533174072545-7a4b6ad7a6c3?q=80&w=2940&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
                     />
                     <div className="flex justify-between space-x-6">

diff --git a/next-app/components/OldStreamView.tsx b/next-app/components/OldStreamView.tsx
@@ -13,6 +13,7 @@ import { YT_REGEX } from "../lib/utils";
 import YouTubePlayer from "youtube-player";
 import { useSession } from "next-auth/react";
 import type { Session } from "next-auth";
+import Image from "next/image";
 import {
   Dialog,
   DialogContent,
@@ -22,7 +23,8 @@ import {
   DialogFooter,
 } from "@/components/ui/dialog";
 import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator } from "@/components/ui/dropdown-menu";
-import Image from "next/image";
+
+
 
 interface Video {
   id: string;
@@ -389,6 +391,8 @@ export default function StreamView({
                   >
                     <CardContent className="p-4 flex flex-col md:flex-row md:space-x-3">
                       <Image
+                      width={160}
+                      height={160}
                         src={video.smallImg}
                         alt={`Thumbnail for ${video.title}`}
                         className="md:w-40 mb-5 md:mb-0 object-cover rounded-md"

diff --git a/next-app/components/SignInComponent.tsx b/next-app/components/SignInComponent.tsx
diff --git a/next-app/components/StreamView/NowPlaying.tsx b/next-app/components/StreamView/NowPlaying.tsx
@@ -6,6 +6,7 @@ import { Play } from "lucide-react";
 import YouTubePlayer from "youtube-player";
 import Image from "next/image";
 
+
 type Props = {
   playVideo: boolean;
   currentVideo: Video | null;
@@ -60,6 +61,8 @@ export default function NowPlaying({
               ) : (
                 <>
                   <Image
+                    height={288}
+                    width={288}
                     alt={currentVideo.bigImg}
                     src={currentVideo.bigImg}
                     className="h-72 w-full rounded object-cover"