fix: caption timer, navbar auth button

nagarajpandith · nagarajpandith · commit 2eb517785dd8 · 2023-03-17T18:18:51.000+05:30
diff --git a/src/components/captions/index.tsx b/src/components/captions/index.tsx
@@ -58,7 +58,7 @@ const Captions: React.FC<Props> = ({
   }, [transcriptionQueue]);
 
   return (
-    <div className="closed-captions-wrapper">
+    <div className="closed-captions-wrapper z-50">
       <div className="closed-captions-container">
         {caption?.message ? (
           <>
diff --git a/src/components/navbar/index.tsx b/src/components/navbar/index.tsx
@@ -4,8 +4,16 @@ import CharacterAnimation from "../animation/character";
 import { BiMenuAltRight as MenuIcon } from "react-icons/bi";
 import { AiOutlineClose as XIcon } from "react-icons/ai";
 import { useState } from "react";
+import { signIn, signOut } from "next-auth/react";
+import { Session } from "next-auth";
 
-const Navbar = () => {
+const Navbar = ({
+  status,
+  session,
+}: {
+  status: "loading" | "authenticated" | "unauthenticated";
+  session: Session | null;
+}) => {
   const links = [
     {
       label: "Home",
@@ -43,7 +51,7 @@ const Navbar = () => {
             <span className={`font-bold text-white`}>Jab We Meet</span>
           </Link>
 
-          <div className="hidden space-x-6 text-white lg:flex">
+          <div className="hidden space-x-6 text-white lg:flex lg:items-center">
             {links.map((link) => (
               <Link
                 className="transition-colors duration-300 hover:text-white"
@@ -56,7 +64,20 @@ const Navbar = () => {
                 />
               </Link>
             ))}
+            <button
+              className="rounded-md bg-white bg-opacity-30 p-2 text-white"
+              onClick={() => {
+                if (status === "authenticated") {
+                  signOut();
+                } else {
+                  signIn("google");
+                }
+              }}
+            >
+              {status === "authenticated" ? "Sign Out" : "Sign In"}
+            </button>
           </div>
+
           <div className="flex items-center space-x-4 lg:hidden">
             {isMenuOpen ? (
               <XIcon className="h-6 w-6 text-white" onClick={toggleMenu} />
@@ -67,7 +88,7 @@ const Navbar = () => {
         </div>
 
         {isMenuOpen && (
-          <div>
+          <div className="flex flex-col space-y-2 p-5 text-white lg:hidden">
             {links.map((link) => (
               <Link
                 key={link.path}
@@ -77,6 +98,18 @@ const Navbar = () => {
                 {link.label}
               </Link>
             ))}
+            <button
+              className="w-fit rounded-md bg-white bg-opacity-30 p-2 text-white"
+              onClick={() => {
+                if (status === "authenticated") {
+                  signIn("google");
+                } else {
+                  signOut();
+                }
+              }}
+            >
+              {status === "authenticated" ? "Sign Out" : "Sign In"}
+            </button>
           </div>
         )}
       </div>
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -1,11 +1,13 @@
 import type { NextPage } from "next";
+import { useSession } from "next-auth/react";
 import { useRouter } from "next/router";
 import React from "react";
 import Typing from "~/components/animation/typing";
 import Navbar from "~/components/navbar";
 import { api } from "~/utils/api";
 
 function ConnectionTab() {
+  const { data: session, status } = useSession();
   const createRoom = api.rooms.createRoom.useMutation();
   const router = useRouter();
 
@@ -14,11 +16,13 @@ function ConnectionTab() {
     router.push(`/rooms/${data.roomName}`);
   };
 
+  if (status === "loading") return <div>Loading...</div>;
+
   return (
     <>
-      <Navbar />
+      <Navbar status={status} session={session} />
       <div className="flex h-full w-full flex-col items-center justify-center space-y-4 p-4">
-        <Typing/>
+        <Typing />
 
         <p className="text-sm text-gray-400">
           Multilingual Video Conferencing App
diff --git a/src/pages/rooms/[name].tsx b/src/pages/rooms/[name].tsx
@@ -57,7 +57,7 @@ const Home: NextPage = () => {
   return (
     <>
       <Head>
-        <title>LiveKit Meet</title>
+        <title>Jab We Meet</title>
         <link rel="icon" href="/favicon.ico" />
       </Head>
 
