From e668eab53c1b0b1edd9c727d409bbd2bed20ecdb Mon Sep 17 00:00:00 2001
From: Redskull-127 <meerraja17@gmail.com>
Date: Sat, 27 Jul 2024 04:18:58 +0530
Subject: [PATCH] refactor: Remove commented out code and optimize LiveCount
 component

---
 components/live-count.tsx           |  11 --
 lib/client/functions/chromecast.tsx |  65 +++++++----
 lib/client/functions/settings.tsx   | 162 ++++++++++++++++------------
 3 files changed, 140 insertions(+), 98 deletions(-)

diff --git a/components/live-count.tsx b/components/live-count.tsx
index ce439be..8c50822 100644
--- a/components/live-count.tsx
+++ b/components/live-count.tsx
@@ -19,17 +19,6 @@ export default function LiveCount() {
   }, []);
   if (!activeUsers) return null;
   if (activeUsers === 0) return null;
-  // return (
-  //   <button
-  //     id="chat-with-ai"
-  //     className="relative inline-flex overflow-hidden rounded-lg p-[1px] focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 focus:ring-offset-slate-50"
-  //   >
-  //     <span className="absolute inset-[-1000%] animate-[spin_2s_linear_infinite] bg-[conic-gradient(from_90deg_at_50%_50%,#E2CBFF_0%,#393BB2_50%,#E2CBFF_100%)]" />
-  //     <span className="inline-flex h-full w-full cursor-pointer items-center justify-center rounded-lg bg-white dark:bg-primary-foreground px-3 py-1 text-sm font-medium dark:text-white text-primary backdrop-blur-3xl">
-  //       {activeUsers} Live {activeUsers === 1 ? "User" : "Users"}
-  //     </span>
-  //   </button>
-  // );
   return (
     <span>
       {activeUsers} Live {activeUsers === 1 ? 'User' : 'Users'}
diff --git a/lib/client/functions/chromecast.tsx b/lib/client/functions/chromecast.tsx
index 8e28147..12052ab 100644
--- a/lib/client/functions/chromecast.tsx
+++ b/lib/client/functions/chromecast.tsx
@@ -11,6 +11,12 @@ import {
   DialogHeader,
   DialogTitle,
 } from '@/components/ui/dialog';
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from '@/components/ui/tooltip';
 import { useState, useRef } from 'react';
 import { toast } from 'sonner';
 
@@ -64,11 +70,26 @@ export default function ChromeCast() {
           );
 
         toast.promise(connectPromise, {
-          loading: 'Loading...',
+          loading: (
+            <div className="w-full flex justify-between items-center">
+              <p className="text-md font-semibold">Connecting to device...</p>
+              <Button
+                variant={'destructive'}
+                onClick={(e) => {
+                  e.preventDefault();
+                  setConnected(false);
+                  showDPad(false);
+                  toast.dismiss();
+                }}
+              >
+                Cancel
+              </Button>
+            </div>
+          ),
           success: (data: any) => {
             return `${data.name} connected successfully!\n Now Playing ${castDetails.title}!`;
           },
-          error: 'Error',
+          error: 'Something went wrong!',
         });
 
         castRef.current.on('disconnect', () => {
@@ -82,19 +103,28 @@ export default function ChromeCast() {
 
   return (
     <>
-      <Button
-        onClick={async (e) => {
-          try {
-            handleClick();
-          } catch (error) {
-            console.error(error);
-          }
-        }}
-        variant={'default'}
-        size={'icon'}
-      >
-        <Cast className="h-5 w-5" />
-      </Button>
+      <TooltipProvider>
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <Button
+              onClick={async (e) => {
+                try {
+                  handleClick();
+                } catch (error) {
+                  console.error(error);
+                }
+              }}
+              variant={'default'}
+              size={'icon'}
+            >
+              <Cast className="h-5 w-5" />
+            </Button>
+          </TooltipTrigger>
+          <TooltipContent>
+            <p>Cast to chromecast enabled devices!</p>
+          </TooltipContent>
+        </Tooltip>
+      </TooltipProvider>
       {dPad && <ShowControls />}
     </>
   );
@@ -126,8 +156,3 @@ export const ShowControls = () => {
     </Dialog>
   );
 };
-
-function test() {
-  const casttest = new Castjs();
-  casttest._isConnectedChanged();
-}
diff --git a/lib/client/functions/settings.tsx b/lib/client/functions/settings.tsx
index ab64a85..f26d2fc 100644
--- a/lib/client/functions/settings.tsx
+++ b/lib/client/functions/settings.tsx
@@ -29,7 +29,7 @@ import {
   Bell,
 } from 'lucide-react';
 import { signIn, signOut, useSession } from 'next-auth/react';
-import { useEffect, useRef } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { toast } from 'sonner';
 import { CommandDialogBox } from '@/lib/commandbar/commandnew';
 import ChromeCast from './chromecast';
@@ -43,9 +43,14 @@ export type SettingsProps = {
 };
 
 export function Settings(params: SettingsProps) {
+  const [isHydrated, setIsHydrated] = useState(false);
   const { status, data: session } = useSession();
   const notificationRef = useRef<HTMLButtonElement>(null);
 
+  useEffect(() => {
+    setIsHydrated(true);
+  }, []);
+
   useEffect(() => {
     if (!window.localStorage.getItem('notificationSound')) {
       window.localStorage.setItem('notificationSound', 'low');
@@ -96,52 +101,66 @@ export function Settings(params: SettingsProps) {
       <ScrollArea className="w-full whitespace-nowrap">
         <div className="flex w-max py-1 space-x-3">
           <CommandDialogBox />
-          <DropdownMenu>
-            <DropdownMenuTrigger asChild>
-              <Button
-                aria-label="user action center"
-                variant={status === 'authenticated' ? 'ghost' : 'default'}
-                size={'icon'}
-              >
+
+          {isHydrated && (
+            <DropdownMenu>
+              <DropdownMenuTrigger>
+                <TooltipProvider>
+                  <Tooltip>
+                    <TooltipTrigger asChild>
+                      <Button
+                        aria-label="user action center"
+                        variant={
+                          status === 'authenticated' ? 'ghost' : 'default'
+                        }
+                        size={'icon'}
+                      >
+                        {status === 'authenticated' ? (
+                          <Image
+                            src={session.user?.image!}
+                            width={40}
+                            height={40}
+                            className="rounded-sm select-none"
+                            alt="user"
+                          />
+                        ) : (
+                          <CircleUser className="h-5 w-5" />
+                        )}
+                      </Button>
+                    </TooltipTrigger>
+                    <TooltipContent>
+                      <span>User Action Center!</span>
+                    </TooltipContent>
+                  </Tooltip>
+                </TooltipProvider>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent>
+                <DropdownMenuLabel>
+                  {status === 'authenticated'
+                    ? session.user?.name
+                    : 'Action Required'}
+                </DropdownMenuLabel>
+                <DropdownMenuSeparator />
                 {status === 'authenticated' ? (
-                  <Image
-                    src={session.user?.image!}
-                    width={40}
-                    height={40}
-                    className="rounded-sm"
-                    alt="user"
-                  />
+                  <DropdownMenuItem
+                    onClick={() => {
+                      signOut();
+                    }}
+                  >
+                    <LogOut className="h-5 w-5 mr-2" /> Sign Out
+                  </DropdownMenuItem>
                 ) : (
-                  <CircleUser className="h-5 w-5" />
+                  <DropdownMenuItem
+                    onClick={() => {
+                      signIn('google');
+                    }}
+                  >
+                    <LogIn className="h-5 w-5 mr-2" /> Log in
+                  </DropdownMenuItem>
                 )}
-              </Button>
-            </DropdownMenuTrigger>
-            <DropdownMenuContent>
-              <DropdownMenuLabel>
-                {status === 'authenticated'
-                  ? session.user?.name
-                  : 'Action Required'}
-              </DropdownMenuLabel>
-              <DropdownMenuSeparator />
-              {status === 'authenticated' ? (
-                <DropdownMenuItem
-                  onClick={() => {
-                    signOut();
-                  }}
-                >
-                  <LogOut className="h-5 w-5 mr-2" /> Sign Out
-                </DropdownMenuItem>
-              ) : (
-                <DropdownMenuItem
-                  onClick={() => {
-                    signIn('google');
-                  }}
-                >
-                  <LogIn className="h-5 w-5 mr-2" /> Log in
-                </DropdownMenuItem>
-              )}
-            </DropdownMenuContent>
-          </DropdownMenu>
+              </DropdownMenuContent>
+            </DropdownMenu>
+          )}
 
           <ThemeToggle />
 
@@ -189,29 +208,38 @@ export function Settings(params: SettingsProps) {
             </Tooltip>
           </TooltipProvider>
 
-          <Button
-            aria-label="notification center"
-            variant={'default'}
-            size={'icon'}
-            ref={notificationRef}
-            onClick={(e) => {
-              const ref = notificationRef.current;
-              const bell = ref?.firstChild as HTMLElement;
-              bell.classList.toggle('scale-125');
-              if (bell.classList.contains('scale-125')) {
-                window.localStorage.setItem('notificationSound', 'high');
-              } else {
-                window.localStorage.setItem('notificationSound', 'low');
-              }
-              toast('Notification Sound Changed:', {
-                description: bell.classList.contains('scale-125')
-                  ? 'High'
-                  : 'Low',
-              });
-            }}
-          >
-            <Bell className="h-5 w-5" />
-          </Button>
+          <TooltipProvider>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Button
+                  aria-label="notification center"
+                  variant={'default'}
+                  size={'icon'}
+                  ref={notificationRef}
+                  onClick={(e) => {
+                    const ref = notificationRef.current;
+                    const bell = ref?.firstChild as HTMLElement;
+                    bell.classList.toggle('scale-125');
+                    if (bell.classList.contains('scale-125')) {
+                      window.localStorage.setItem('notificationSound', 'high');
+                    } else {
+                      window.localStorage.setItem('notificationSound', 'low');
+                    }
+                    toast('Notification Sound Changed:', {
+                      description: bell.classList.contains('scale-125')
+                        ? 'High'
+                        : 'Low',
+                    });
+                  }}
+                >
+                  <Bell className="h-5 w-5" />
+                </Button>
+              </TooltipTrigger>
+              <TooltipContent>
+                <p>Change message notification sound!</p>
+              </TooltipContent>
+            </Tooltip>
+          </TooltipProvider>
 
           <ChromeCast />
         </div>