dylan/vod-system
1
1
Fork 0
Code Issues 16 Pull Requests 2 Actions Packages Projects Releases Wiki Activity

feat(stream): add streaming endpoint and indicator

Browse Source
This commit is contained in:
Dylan De Faoite
2026-06-20 16:21:18 +01:00
parent 2b1f8ce710
commit a0efa3eb8c
9 changed files with 82 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/components/Dropdown.tsx
View File

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

25
frontend/src/components/Sidebar.tsx
View File

@@ -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" />
</>
)}

14
frontend/src/components/Topbar.tsx
View File

@@ -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"

14
frontend/src/layouts/MainLayout.tsx
View File

@@ -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>

8
frontend/src/utils/endpoints.ts
View File

@@ -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,

12
src/main/java/com/ddf/vodsystem/controllers/StreamController.java
View File

@@ -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))));
}
}

7
src/main/java/com/ddf/vodsystem/controllers/dto/StreamResponse.java Normal file
View File

@@ -0,0 +1,7 @@
package com.ddf.vodsystem.controllers.dto;
public record StreamResponse(
boolean isStreaming,
Long id
) {
}

11
src/main/java/com/ddf/vodsystem/services/StreamService.java
View File

@@ -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) {

1
src/main/java/com/ddf/vodsystem/services/UserService.java
View File

@@ -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) {