Skip to content

Commit

Permalink
refactor: Remove commented out code and optimize LiveCount component
Browse files Browse the repository at this point in the history
  • Loading branch information
@Redskull-127
Redskull-127 committed Jul 26, 2024
1 parent 5548261 commit e668eab
Show file tree
Hide file tree
Showing 3 changed files with 140 additions and 98 deletions.
11 changes: 0 additions & 11 deletions components/live-count.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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'}
Expand Down
65 changes: 45 additions & 20 deletions lib/client/functions/chromecast.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand Down Expand Up @@ -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', () => {
Expand All @@ -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 />}
</>
);
Expand Down Expand Up @@ -126,8 +156,3 @@ export const ShowControls = () => {
</Dialog>
);
};

function test() {
const casttest = new Castjs();
casttest._isConnectedChanged();
}
162 changes: 95 additions & 67 deletions lib/client/functions/settings.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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');
Expand Down Expand Up @@ -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 />

Expand Down Expand Up @@ -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>
Expand Down

0 comments on commit e668eab

Please sign in to comment.