srizan/hctv
1
0
Fork 0
mirror of https://github.com/SrIzan10/hctv.git synced 2026-06-06 00:56:56 +00:00
Code Issues Packages Projects Releases 5 Wiki Activity

feat: small redesign (also docker fixes)

Browse Source
This commit is contained in:
Izan Gil
2025-03-16 00:39:24 +01:00
parent b470c33e9d
commit 51d8e8b6ad
7 changed files with 138 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
Dockerfile
View File

@@ -33,7 +33,7 @@ COPY --from=builder /app/prisma ./prisma
# Install production dependencies only
RUN apk add --no-cache openssl
RUN yarn install --frozen-lockfile --production && \
yarn cache clean
yarn cache clean && yarn run prepare
# Remove unnecessary files
RUN rm -rf /app/.git \

11
src/app/(public)/page.tsx
View File

@@ -1,5 +1,6 @@
import LandingPage from '@/components/app/LandingPage/LandingPage';
import { Card, CardContent } from '@/components/ui/card';
import ConfusedDino from '@/components/ui/confuseddino';
import { validateRequest } from '@/lib/auth';
import prisma from '@/lib/db';
import { Avatar, AvatarImage, AvatarFallback } from '@radix-ui/react-avatar';
@@ -24,11 +25,17 @@ export default async function Home() {
return <LandingPage />;
}
if (!streams.length) {
return <div>No streams found</div>;
return (
<div className="flex justify-center items-center text-center flex-col pt-4 gap-2">
<h2>No streams found!!</h2>
<p>...maybe start one?</p>
<ConfusedDino className='w-40 h-40' />
</div>
);
}
return (
<div className='p-4'>
<div className="p-4">
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
{streams.map((stream) => (
<Link href={`/${stream.username}`} key={stream.id}>

2
src/components/app/ChatPanel/ChatPanel.tsx
View File

@@ -72,7 +72,7 @@ export default function ChatPanel() {
};
return (
<div className="border-l flex flex-col w-[350px] min-w-[350px] h-full">
<div className="md:border flex flex-col w-full min-w-[350px] h-full bg-mantle">
<div ref={scrollRef} className="flex-1 p-4 overflow-y-auto flex flex-col">
<div className="space-y-4 flex-1">
{chatMessages.map((msg, i) => (

21
src/components/app/Livestream/Livestream.tsx
View File

@@ -4,15 +4,28 @@ import StreamPlayer from '../StreamPlayer/StreamPlayer';
import UserInfoCard from '../UserInfoCard/UserInfoCard';
import ChatPanel from '../ChatPanel/ChatPanel';
import type { StreamInfo, User } from '@prisma/client';
import { useIsMobile } from '@/lib/hooks/useMobile';
export default function LiveStream(props: Props) {
const isMobile = useIsMobile();
return (
<div className="flex h-[calc(100vh-64px)] w-full">
<div className="flex-1">
<div className={`${isMobile ? 'flex flex-col' : 'flex'} h-[calc(100vh-64px)] w-full`}>
<div className="flex-1 flex flex-col">
<StreamPlayer />
{isMobile && (
<div className="h-[300px]">
<ChatPanel />
</div>
)}
<UserInfoCard streamInfo={props.streamInfo} />
</div>
<ChatPanel />
{!isMobile && (
<div>
<ChatPanel />
</div>
)}
</div>
);
}
@@ -20,4 +33,4 @@ export default function LiveStream(props: Props) {
interface Props {
username: string;
streamInfo: StreamInfo & { ownedBy: User };
}
}

94
src/components/app/NavBar/NavBar.tsx
View File

@@ -1,4 +1,4 @@
'use client'
'use client';
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
import { Button } from '@/components/ui/button';
@@ -37,55 +37,61 @@ export default function Navbar(props: Props) {
const { user } = useSession();
return (
<>
<nav className="flex items-center h-16 px-4 border-b gap-3 w-full z-20 fixed top-0 left-0 shadow-md bg-mantle">
<div className="flex items-center space-x-5">
<nav className="flex items-center justify-between h-14 md:h-16 px-2 md:px-4 border-b gap-1 md:gap-3 w-full z-40 fixed top-0 left-0 shadow-md bg-mantle">
<div className="flex items-center space-x-2 md:space-x-5 shrink-0">
<Link href="/" className="flex items-center">
<Button variant={'ghost'}>hackclub.tv</Button>
<Button variant={'ghost'} className="px-2 md:px-3 text-sm md:text-base">
hackclub.tv
</Button>
</Link>
<SidebarTrigger />
</div>
<MobileNavbarLinks />
<div className="flex-1" />
<div className="hidden md:flex">
<NavbarLinks />
</div>
<div className="flex-1" />
{props.editLivestream}
{user ? (
<DropdownMenu>
<DropdownMenuTrigger asChild className="cursor-pointer">
<Avatar>
<AvatarImage src={user.pfpUrl} alt={`@${user.id}`} />
<AvatarFallback>{user.pfpUrl}</AvatarFallback>
</Avatar>
</DropdownMenuTrigger>
<DropdownMenuContent className="w-56">
<DropdownMenuLabel>My Account</DropdownMenuLabel>
<DropdownMenuSeparator />
<DropdownMenuGroup>
<DropdownMenuItem
className="cursor-pointer"
onClick={() => {
logout();
}}
>
Sign out
</DropdownMenuItem>
</DropdownMenuGroup>
<DropdownMenuSeparator />
<DropdownMenuGroup>
<ThemeSwitcher />
</DropdownMenuGroup>
</DropdownMenuContent>
</DropdownMenu>
) : (
<Link href="/auth/slack">
<Button variant="outline" className="gap-2">
<Slack className="w-4 h-4" />
Sign in
</Button>
</Link>
)}
{/* Right Side Items */}
<div className="flex items-center gap-1 md:gap-3 shrink-0">
{props.editLivestream && <div className="hidden sm:block">{props.editLivestream}</div>}
{user ? (
<DropdownMenu>
<DropdownMenuTrigger asChild className="cursor-pointer">
<Avatar className="h-8 w-8 md:h-10 md:w-10">
<AvatarImage src={user.pfpUrl} alt={`@${user.id}`} />
<AvatarFallback>{user.pfpUrl}</AvatarFallback>
</Avatar>
</DropdownMenuTrigger>
<DropdownMenuContent className="w-56">
<DropdownMenuLabel>My Account</DropdownMenuLabel>
<DropdownMenuSeparator />
<DropdownMenuGroup>
<DropdownMenuItem
className="cursor-pointer"
onClick={() => {
logout();
}}
>
Sign out
</DropdownMenuItem>
</DropdownMenuGroup>
<DropdownMenuSeparator />
<DropdownMenuGroup>
<ThemeSwitcher />
</DropdownMenuGroup>
</DropdownMenuContent>
</DropdownMenu>
) : (
<Link href="/auth/slack">
<Button variant="outline" size="sm" className="gap-1 md:gap-2 text-xs md:text-sm">
<Slack className="w-3 h-3 md:w-4 md:h-4" />
<span className="hidden sm:inline">Sign in</span>
<span className="sm:hidden">Login</span>
</Button>
</Link>
)}
</div>
</nav>
</>
);
@@ -93,4 +99,4 @@ export default function Navbar(props: Props) {
interface Props {
editLivestream: Promise<JSX.Element>;
}
}

2
src/components/app/UserInfoCard/UserInfoCard.tsx
View File

@@ -5,7 +5,7 @@ import FollowCountText from './followCount';
export default function UserInfoCard(props: Props) {
return (
<div className="bg-mantle rounded-lg p-4">
<div className="bg-mantle p-4 border-b">
<div className="flex items-start justify-between mb-4">
<div className="flex items-center space-x-4">
<Avatar className="h-16 w-16">

59
src/components/ui/confuseddino.tsx Normal file
View File

@@ -0,0 +1,59 @@
import { cn } from "@/lib/utils"
export default function ConfusedDino({ className }: { className?: string }) {
return (
<svg
id="Layer_1"
data-name="Layer 1"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 153.86 112.82"
className={cn(className, "fill-black dark:fill-white")}
>
<title>confused_dinosaur</title>
<path
d="M1750.68,1812.34a2.49,2.49,0,0,1,1.91-.49c.69,0,1.43-.75,2.12-1.22a23.75,23.75,0,0,1,6.24-3.24,5.16,5.16,0,0,1,1.17-.23c3.38-.16,6.77-.42,10.17-.34,1.43,0,2.86-.13,4.29-.2a2.87,2.87,0,0,1,3,1.88c.62,1.45,1.7,2.72,1.72,4.41,0,3.06-.92,4.15-4,4.6a15.18,15.18,0,0,0-6.21,2,20.77,20.77,0,0,0-2.89,2.11,10,10,0,0,1-5.85,2.22,16,16,0,0,1-9.15-1.06,56.15,56.15,0,0,1-5.4-3.39,64.39,64.39,0,0,0-2.33,8.34,11.67,11.67,0,0,0-.21,5.32c.12.47.15.93.66,1.2s.6.94.72,1.46a16.19,16.19,0,0,0,2.31,5.46,4.07,4.07,0,0,1,.59,1.31,3.94,3.94,0,0,0,2.37,2.68,1.92,1.92,0,0,1,1,1c1.3,3,3.94,3.84,6.86,4.44,4.43.92,8.84-.36,13.23,0,3.15.27,6.17-.38,9.25-.7a33.07,33.07,0,0,1,4.67,0c4.11.21,8-1,11.83-2.1a30,30,0,0,0,6.6-2.42c4.19-2.38,8.11-5.16,11-9.07.64-.87,1.64-1.49,2-2.62.13-.41.67-.34,1.07-.35.88,0,1.76,0,2.63-.11.52,0,1,0,1.11.6s-.38.84-.89.93a8.9,8.9,0,0,0-2.42.52,9.51,9.51,0,0,0-2.84,2.66c-4.34,5-9.5,8.91-15.91,10.81-4.07,1.2-8.11,2.69-12.46,2.64-.77,0-.77.43-.54.94s.51.81.72,1.24a.73.73,0,0,1-.21,1.06.77.77,0,0,1-1.14-.29,7.42,7.42,0,0,1-.84-1.57,1.88,1.88,0,0,0-2.17-1.41,29.15,29.15,0,0,0-5.09.56c-2.73.57-5.5.11-8.25.19-1.56,0-3.11.18-4.66.24-3.89.13-7.83.28-11.45-1.65a6.26,6.26,0,0,1-2.28-1.91,34.32,34.32,0,0,0-3.5-3.63,3.6,3.6,0,0,1-1.08-1.95,3.44,3.44,0,0,0-.71-1.51,14.16,14.16,0,0,1-1.58-3.07,7.14,7.14,0,0,0-1.46-2.84c-.88-.86-.59-2.49-.7-3.79-.32-3.67.9-7.1,1.83-10.56a48.36,48.36,0,0,1,3.66-9.71c1.52-2.93,3-5.9,4.79-8.69,2.13-3.33,4.34-6.6,6.72-9.76a56.68,56.68,0,0,1,8.17-8.22c6.4-5.65,13.87-9.46,21.7-12.67a43.86,43.86,0,0,1,15.53-3.61c.63,0,1.72-.36,1.69.72s-1,.56-1.65.62a54.58,54.58,0,0,0-15.37,3.82,103.07,103.07,0,0,0-16.5,8.7c-2.59,1.6-4.68,3.84-7,5.82-5.22,4.51-8.72,10.35-12.39,16C1753.32,1806.94,1752.22,1809.73,1750.68,1812.34Zm21.06-4.21c-2.11.15-4.24-.12-6.33.32-1.6.33-3.31-.07-4.83.66a30.43,30.43,0,0,0-9,6,1.18,1.18,0,0,1-1,.51c-1-.12-1.08.71-1.3,1.29s-.29,1.43.33,1.75c1.59.84,2.91,2.08,4.53,2.87a12.27,12.27,0,0,0,4.55.87c3.16.26,6.24-.09,8.83-2.14,2.41-1.9,4.91-3.53,8-4a18.7,18.7,0,0,0,2.34-.49,2.56,2.56,0,0,0,1.7-3.89c-.41-.82-.88-1.62-1.21-2.47a2,2,0,0,0-2.17-1.32C1774.7,1808.15,1773.22,1808.13,1771.74,1808.13Z"
transform="translate(-1724.16 -1741.87)"
/>
<path
d="M1804.84,1764.83a7.29,7.29,0,0,1,4-1.06c2.31.12,4.63,0,6.94.34a87.53,87.53,0,0,1,14.13,3,172.67,172.67,0,0,1,18.23,6.94c9.43,4.1,17.59,9.88,23.79,18.2a24.9,24.9,0,0,1,3,6.22,49.87,49.87,0,0,1,3,16.62c.07,2.91,0,5.83,0,8.75a115.17,115.17,0,0,1-1.22,13c-.44,3.72-.88,7.43-1.65,11.1q-.59,2.8-1.23,5.6c-.13.56-.39,1.15-1.14.91s-.47-.81-.35-1.38c.75-3.46,1.57-6.91,2.13-10.41a138,138,0,0,0,1.81-30.77,43.27,43.27,0,0,0-3.14-13.68c-3.22-7.91-9.29-13.07-16.13-17.61a68.64,68.64,0,0,0-11.56-6,164.81,164.81,0,0,0-16-6,90.55,90.55,0,0,0-12.23-2.8,55.36,55.36,0,0,0-6.44-.53C1808.84,1765.19,1806.87,1764.83,1804.84,1764.83Z"
transform="translate(-1724.16 -1741.87)"
/>
<path
d="M1801,1801.39a15.42,15.42,0,0,0,1.27,7.22.62.62,0,0,1-.26.92,1,1,0,0,1-1.21-.18,2.08,2.08,0,0,1-.41-.86c-1.18-5.31-1.75-10.56,1.12-15.59a14.26,14.26,0,0,1,2.22-2.66,13.88,13.88,0,0,1,14.11-4.14c5.28,1.35,10,5.41,9.86,12-.05,1.9.17,3.82-.78,5.62a5.36,5.36,0,0,1-3.81,3.11c-4.64.94-9.3,1.82-13.9,2.93-2.28.55-4.52,1.28-6.79,1.9a2.34,2.34,0,0,1-.59.09c-.55,0-1.25.11-1.34-.65s.62-.74,1.16-.87c2-.51,3.92-1,5.87-1.58,3.18-.92,6.44-1.49,9.68-2.15,1.83-.37,3.69-.67,5.51-1.09,2.44-.56,3.2-2.6,3.51-4.66a12.42,12.42,0,0,0-1.18-7.45,10.91,10.91,0,0,0-6.1-5.12c-4.54-1.84-8.82-1-12.79,2A13.44,13.44,0,0,0,1801,1801.39Z"
transform="translate(-1724.16 -1741.87)"
/>
<path
d="M1740.46,1771.69a16.18,16.18,0,0,1-1.12,6.4c-.37,1.09-.4,2.38-1,3.29-1,1.46-.17,2,.7,3a54.7,54.7,0,0,0,5.25,5.19c.37.33.61.66.33,1.12s-.22,1.07-.9,1.16-.76-.39-1.07-.77c-1.19-1.51-2.21-3.21-4-4.11a2.94,2.94,0,0,1-1.22-1.29,2.58,2.58,0,0,0-1.32-1.3c-1-.35-.79-1.23-.6-2a71.59,71.59,0,0,0,1.86-7.51,14.16,14.16,0,0,0-.21-6.63c-.88-2.65-2.16-3.28-4.83-2.4-1,.33-2,.79-3,1.2-.74.31-1.31.71-1.29,1.66,0,.64-.47,1-1,.68s-.61.14-.76.4c-.37.62-.59,1.7-1.53,1.2-.78-.42-.55-1.46-.16-2.16a10,10,0,0,1,4.57-4.39,11.6,11.6,0,0,1,6.1-.74c2.23.33,3.18,2.23,4.35,3.83A5.79,5.79,0,0,1,1740.46,1771.69Z"
transform="translate(-1724.16 -1741.87)"
/>
<path
d="M1811.16,1804.55c-.45,0-1.09,0-1.72,0a3,3,0,0,1-2.58-2.7,9.46,9.46,0,0,0-.2-2.6,1.34,1.34,0,0,1,.06-.71c.33-1,2.92-2.87,4-2.66a21.72,21.72,0,0,0,3.69.17c1.94,0,2.65.75,2.69,2.67a6.08,6.08,0,0,1-1,3.94C1814.83,1804.32,1813.25,1804.77,1811.16,1804.55Z"
transform="translate(-1724.16 -1741.87)"
/>
<path
d="M1756.16,1756c.22,2.61-.84,4.93-1.6,7.31a2.12,2.12,0,0,0,.3,2.08c1.82,2.72,3.53,5.5,5.3,8.25.3.47.4.94-.18,1.2a1.1,1.1,0,0,1-1.54-.51c-1.33-3-3.37-5.66-5.19-8.41a3.17,3.17,0,0,1-.28-2.53c.29-1.57,1-3,1.4-4.57a12.23,12.23,0,0,0,.11-5.67,19.09,19.09,0,0,0-4.11-8.64,2.59,2.59,0,0,0-3.36-.85,9.82,9.82,0,0,1-3.77.78,7.1,7.1,0,0,0-4.21,1.82c-.45.37-.88.69-1.3.11a.94.94,0,0,1,.33-1.45c1.68-1,3.36-2.08,5.43-1.93,1.51.11,2.74-.77,4.14-1a3.47,3.47,0,0,1,3.75,1.39,18.86,18.86,0,0,1,4.62,10.16C1756.09,1754.35,1756.11,1755.19,1756.16,1756Z"
transform="translate(-1724.16 -1741.87)"
/>
<path
d="M1781.28,1752.19a7.12,7.12,0,0,1-1.11,5,2.64,2.64,0,0,0,.17,2.63c.3.69.63,1.37.87,2.08s.14,1.27-.59,1.48-.85-.45-.94-1c-.19-1.27-1.13-2.26-1.3-3.57a3.48,3.48,0,0,1,.46-2.49c1.75-2.76,1.41-5.62.28-8.46a1.69,1.69,0,0,0-2.46-1,11.27,11.27,0,0,0-1.68.89c-.4.22-.79.25-1.07-.14a.84.84,0,0,1,.11-1.1,4,4,0,0,1,6.73,1A10.27,10.27,0,0,1,1781.28,1752.19Z"
transform="translate(-1724.16 -1741.87)"
/>
<path
d="M1761.28,1780.56a6.84,6.84,0,0,1,1-2.52.67.67,0,0,1,.85-.26.6.6,0,0,1,.41.65,3.11,3.11,0,0,0,.36,1.62c.28.45.61.92.1,1.39a1.62,1.62,0,0,1-1.91.56A1.33,1.33,0,0,1,1761.28,1780.56Z"
transform="translate(-1724.16 -1741.87)"
/>
<path
d="M1748,1796.72c.06.82,0,1.57-1,1.81a1,1,0,0,1-1.3-.55c-.32-.91-.62-1.88.12-2.71a1.31,1.31,0,0,1,1.67-.15C1748.13,1795.47,1747.91,1796.15,1748,1796.72Z"
transform="translate(-1724.16 -1741.87)"
/>
<path
d="M1784.67,1770.84c-.16.51.42,1.5-.59,1.7s-.83-.86-1.18-1.37a2,2,0,0,1-.29-1.37c0-.6,0-1.33.81-1.36s1.16.58,1.25,1.32C1784.7,1770.08,1784.67,1770.4,1784.67,1770.84Z"
transform="translate(-1724.16 -1741.87)"
/>
<path
d="M1761.5,1815.55c-.22-1.62,1.06-2.58,1.56-3.85.17-.42.46-.82.6-1.28.21-.65.5-1.19,1.33-1.08.25,0,.44-.12.65-.24,2-1.15,3.67-.32,4.18,1.91a11.65,11.65,0,0,1-.4,5.19,3.32,3.32,0,0,1-1.74,2.18c-.8.42-1.5,1.28-2.59.6-.38-.23-.63.2-.91.4-.86.62-1.28.44-1.52-.65a1.35,1.35,0,0,0-.35-.73A2.76,2.76,0,0,1,1761.5,1815.55Z"
transform="translate(-1724.16 -1741.87)"
/>
</svg>
);
}