From a0efa3eb8c9863f2814d27f4554573f4aa8b511e Mon Sep 17 00:00:00 2001
From: Dylan De Faoite <dylanseandefaoite@gmail.com>
Date: Sat, 20 Jun 2026 16:21:18 +0100
Subject: [PATCH] feat(stream): add streaming endpoint and indicator

---
 frontend/src/components/Dropdown.tsx          |  2 +-
 frontend/src/components/Sidebar.tsx           | 25 ++++++++++++++++---
 frontend/src/components/Topbar.tsx            | 14 ++++++++++-
 frontend/src/layouts/MainLayout.tsx           | 14 +++++++++--
 frontend/src/utils/endpoints.ts               |  8 ++++++
 .../controllers/StreamController.java         | 12 +++++++++
 .../controllers/dto/StreamResponse.java       |  7 ++++++
 .../ddf/vodsystem/services/StreamService.java | 11 +++++---
 .../ddf/vodsystem/services/UserService.java   |  1 -
 9 files changed, 82 insertions(+), 12 deletions(-)
 create mode 100644 src/main/java/com/ddf/vodsystem/controllers/dto/StreamResponse.java

diff --git a/frontend/src/components/Dropdown.tsx b/frontend/src/components/Dropdown.tsx
index b35b0b0..882d031 100644
--- a/frontend/src/components/Dropdown.tsx
+++ b/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;
 }
diff --git a/frontend/src/components/Sidebar.tsx b/frontend/src/components/Sidebar.tsx
index 48f547b..1dfbfce 100644
--- a/frontend/src/components/Sidebar.tsx
+++ b/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" />
                     </>
                 )}
diff --git a/frontend/src/components/Topbar.tsx b/frontend/src/components/Topbar.tsx
index bce7a54..d3bd7dd 100644
--- a/frontend/src/components/Topbar.tsx
+++ b/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"
diff --git a/frontend/src/layouts/MainLayout.tsx b/frontend/src/layouts/MainLayout.tsx
index e75d60f..d21a82e 100644
--- a/frontend/src/layouts/MainLayout.tsx
+++ b/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>
diff --git a/frontend/src/utils/endpoints.ts b/frontend/src/utils/endpoints.ts
index a7999e1..590a323 100644
--- a/frontend/src/utils/endpoints.ts
+++ b/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,
diff --git a/src/main/java/com/ddf/vodsystem/controllers/StreamController.java b/src/main/java/com/ddf/vodsystem/controllers/StreamController.java
index c8d3768..b75f4e1 100644
--- a/src/main/java/com/ddf/vodsystem/controllers/StreamController.java
+++ b/src/main/java/com/ddf/vodsystem/controllers/StreamController.java
@@ -1,6 +1,7 @@
 package com.ddf.vodsystem.controllers;
 
 import com.ddf.vodsystem.controllers.dto.ClipSectionRequest;
+import com.ddf.vodsystem.controllers.dto.StreamResponse;
 import com.ddf.vodsystem.dto.APIResponse;
 import com.ddf.vodsystem.controllers.dto.SaveSectionRequest;
 import com.ddf.vodsystem.entities.Stream;
@@ -12,6 +13,7 @@ import org.springframework.web.bind.annotation.*;
 
 import java.io.IOException;
 import java.util.List;
+import java.util.Optional;
 
 @RestController
 @RequestMapping("/api/v1/stream")
@@ -66,4 +68,14 @@ public class StreamController {
         List<Stream> history = streamService.getStreamHistory(userId);
         return ResponseEntity.ok(new APIResponse<>("success", "Stream history retrieved", history));
     }
+
+    @GetMapping("/current")
+    public ResponseEntity<APIResponse<StreamResponse>> getCurrentStream() {
+        Optional<Stream> stream = streamService.getActiveStream();
+        return stream.map(value -> ResponseEntity.ok(new APIResponse<>("success",
+                "Streaming status retrieved",
+                new StreamResponse(true, value.getId())))).orElseGet(() -> ResponseEntity.ok(new APIResponse<>("success",
+                "Streaming status retrieved",
+                new StreamResponse(false, null))));
+    }
 }
diff --git a/src/main/java/com/ddf/vodsystem/controllers/dto/StreamResponse.java b/src/main/java/com/ddf/vodsystem/controllers/dto/StreamResponse.java
new file mode 100644
index 0000000..a7c8695
--- /dev/null
+++ b/src/main/java/com/ddf/vodsystem/controllers/dto/StreamResponse.java
@@ -0,0 +1,7 @@
+package com.ddf.vodsystem.controllers.dto;
+
+public record StreamResponse(
+        boolean isStreaming,
+        Long id
+) {
+}
diff --git a/src/main/java/com/ddf/vodsystem/services/StreamService.java b/src/main/java/com/ddf/vodsystem/services/StreamService.java
index 1195019..4d4551f 100644
--- a/src/main/java/com/ddf/vodsystem/services/StreamService.java
+++ b/src/main/java/com/ddf/vodsystem/services/StreamService.java
@@ -85,9 +85,14 @@ public class StreamService {
         streamRepository.saveAndFlush(stream);
     }
 
-    public Optional<Stream> getActiveStream(String streamKey) {
-        User user = resolveUser(streamKey);
-        return streamRepository.findByUserAndEndDateIsNull(user);
+    public Optional<Stream> getActiveStream() {
+        Optional<User> user = userService.getLoggedInUser();
+
+        if (user.isEmpty()) {
+            throw new NotAuthenticated("Log in to see user streams");
+        }
+
+        return streamRepository.findByUserAndEndDateIsNull(user.get());
     }
 
     public List<Stream> getStreamHistory(Long userId) {
diff --git a/src/main/java/com/ddf/vodsystem/services/UserService.java b/src/main/java/com/ddf/vodsystem/services/UserService.java
index 7a17e06..51beeaf 100644
--- a/src/main/java/com/ddf/vodsystem/services/UserService.java
+++ b/src/main/java/com/ddf/vodsystem/services/UserService.java
@@ -28,7 +28,6 @@ public class UserService {
     private final UserRepository userRepository;
     private final JwtService jwtService;
 
-
     public UserService(UserRepository userRepository,
                        JwtService jwtService,
                        @Value("${google.client.id}") String googleClientId) {