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"

frontend/src/layouts/MainLayout.tsx

@@ -4,11 +4,12 @@ import Topbar from '../components/Topbar'
 import { Outlet } from 'react-router-dom';
 import {useEffect, useState} from "react";
 import type {User} from "../utils/types";
-import { getUser } from "../utils/endpoints";
+import { getUser, getStreamStatus } from "../utils/endpoints";
 
 const MainLayout = () => {
     const [sidebarToggled, setSidebarToggled] = useState(false);
     const [user, setUser] = useState<null | User>(null);
+    const [isStreaming, setIsStreaming] = useState(false);
 
     const fetchUser = async () => {
         try {
@@ -23,6 +24,14 @@ const MainLayout = () => {
         fetchUser();
     }, []);
 
+    useEffect(() => {
+        if (!user) return;
+        const poll = () => getStreamStatus().then(setIsStreaming).catch(() => {});
+        poll();
+        const interval = setInterval(poll, 10000);
+        return () => clearInterval(interval);
+    }, [user]);
+
     return (
         <div className={`transition-all duration-300 grid h-screen ${sidebarToggled ? "grid-cols-[0px_1fr]" : "grid-cols-[240px_1fr]"} grid-rows-[auto_1fr]`}>
             <Sidebar
@@ -33,7 +42,8 @@ const MainLayout = () => {
                 sidebarToggled={sidebarToggled}
                 setSidebarToggled={setSidebarToggled}
                 user={user}
-                fetchUser={fetchUser}/>
+                fetchUser={fetchUser}
+                isStreaming={isStreaming}/>
             <div className="overflow-auto bg-background">
                 <Outlet />
             </div>

frontend/src/utils/endpoints.ts

@@ -295,6 +295,13 @@ const deleteClip = async (id: number): Promise<void> => {
     }
 };
 
+const getStreamStatus = async (): Promise<boolean> => {
+    const response = await fetch(API_URL + '/api/v1/stream/current', { credentials: 'include' });
+    if (!response.ok) return false;
+    const result: APIResponse = await response.json();
+    return result.status === 'success' && result.data?.isStreaming === true;
+};
+
 const isThumbnailAvailable = async (id: number): Promise<boolean> => {
     const response = await fetch(API_URL + `/api/v1/download/thumbnail/${id}`, {credentials: "include"});
     return response.ok;
@@ -305,6 +312,7 @@ const isThumbnailAvailable = async (id: number): Promise<boolean> => {
 export {
     login,
     logout,
+    getStreamStatus,
     uploadFile,
     editFile,
     processFile,