feat(stream): add streaming endpoint and indicator

frontend/src/components/Dropdown.tsx

@@ -18,7 +18,7 @@ const DropdownItem = ({ item, onClick, className }: DropdownItemProps) => {
 }
 
 type DropdownProps = {
-    label: string;
+    label: React.ReactNode;
     children: React.ReactNode;
     className?: string;
 }

frontend/src/components/Sidebar.tsx

@@ -8,6 +8,8 @@ type props = {
     className?: string
 }
 
+const Divider = () => <hr className="my-1.5 mx-2 border-gray-100" />;
+
 const Sidebar = ({user, className}: props) => {
     return (
         <aside className={clsx("h-screen flex flex-col bg-white border-r border-gray-200", className)}>
@@ -18,12 +20,27 @@ const Sidebar = ({user, className}: props) => {
                     alt="VoD System Logo"
                 />
             </div>
-            <nav className="flex flex-col flex-1 gap-0.5 px-2 pb-4">
-                <SidebarButton url="/" logo={<Home size={18}/>} label="Home" />
-                <SidebarButton url="/create" logo={<Plus size={18}/>} label="Create Clip" />
+            <nav className="flex flex-col flex-1 px-2 pb-4">
+                <div className="flex flex-col gap-0.5">
+                    <SidebarButton url="/" logo={<Home size={18}/>} label="Home" />
+                    <SidebarButton url="/create" logo={<Plus size={18}/>} label="Create Clip" />
+                </div>
+
                 {user && (
                     <>
-                        <SidebarButton url="/my-clips" logo={<Film size={18}/>} label="My Clips" />
+                        <Divider />
+                        <div className="flex flex-col gap-0.5">
+                            <SidebarButton url="/my-clips" logo={<Film size={18}/>} label="Clips" />
+                            {/*<SidebarButton url="/vods" logo={<Video size={18}/>} label="VoDs" />*/}
+                        </div>
+                    </>
+                )}
+
+                <div className="flex-1" />
+
+                {user && (
+                    <>
+                        <Divider />
                         <SidebarButton url="/profile" logo={<UserIcon size={18}/>} label="Profile" />
                     </>
                 )}

frontend/src/components/Topbar.tsx

@@ -16,6 +16,7 @@ type props = {
     setSidebarToggled: (toggled: boolean) => void;
     user: User | null;
     fetchUser: () => void;
+    isStreaming: boolean;
     className?: string;
 }
 
@@ -24,6 +25,7 @@ const Topbar = ({
                     setSidebarToggled,
                     user,
                     fetchUser,
+                    isStreaming,
                     className}: props) => {
 
     const navigate = useNavigate();
@@ -69,7 +71,17 @@ const Topbar = ({
                         referrerPolicy="no-referrer"
                     />
 
-                    <Dropdown label={user.name}>
+                    <Dropdown label={
+                        <span className="flex items-center gap-1.5">
+                            {user.name}
+                            {isStreaming && (
+                                <span className="relative flex h-2 w-2">
+                                    <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-red-500 opacity-75" />
+                                    <span className="relative inline-flex rounded-full h-2 w-2 bg-red-500" />
+                                </span>
+                            )}
+                        </span>
+                    }>
                         <DropdownItem item="Profile"
                                       onClick={() => navigate("/profile")} />
                         <DropdownItem item="Logout"