From a0d00ec4117be70b96f4fc476327b1126d7714b2 Mon Sep 17 00:00:00 2001 From: Chris-1010 <122332721@umail.ucc.ie> Date: Sat, 22 Feb 2025 12:18:59 +0000 Subject: [PATCH] FEAT: Add functionality to update ongoing stream on frontend --- frontend/src/pages/StreamDashboardPage.tsx | 153 ++++++++++++--------- 1 file changed, 88 insertions(+), 65 deletions(-) diff --git a/frontend/src/pages/StreamDashboardPage.tsx b/frontend/src/pages/StreamDashboardPage.tsx index 0aa4baf..e886bbf 100644 --- a/frontend/src/pages/StreamDashboardPage.tsx +++ b/frontend/src/pages/StreamDashboardPage.tsx @@ -6,7 +6,7 @@ import ListItem from "../components/Layout/ListItem"; import { X as XIcon, Eye as ShowIcon, EyeOff as HideIcon } from "lucide-react"; import { useAuth } from "../context/AuthContext"; import { debounce } from "lodash"; -import VideoPlayer from "../components/Video/VideoPlayer"; +import VideoPlayer from "../components/Stream/VideoPlayer"; interface StreamData { title: string; @@ -66,71 +66,70 @@ const StreamDashboardPage: React.FC = () => { }, [categories, thumbnailPreview.isCustom]); useEffect(() => { - const checkStreamStatus = async () => { - try { - const response = await fetch(`/api/user/${username}/status`); - const data = await response.json(); - setIsStreaming(data.is_live); - - if (data.is_live) { - const streamResponse = await fetch( - `/api/streams/${data.user_id}/data`, - { credentials: "include" } - ); - const streamData = await streamResponse.json(); - setStreamData({ - title: streamData.title, - category_name: streamData.category_name, - viewer_count: streamData.num_viewers, - start_time: streamData.start_time, - stream_key: streamData.stream_key, - }); - - console.log("Stream data:", streamData); - - const time = Math.floor( - (Date.now() - new Date(streamData.start_time).getTime()) / 60000 // Convert to minutes - ); - - if (time < 60) setTimeStarted(`${time}m ago`); - else if (time < 1440) - setTimeStarted(`${Math.floor(time / 60)}h ${time % 60}m ago`); - else - setTimeStarted( - `${Math.floor(time / 1440)}d ${Math.floor((time % 1440) / 60)}h ${ - time % 60 - }m ago` - ); - } else { - const response = await fetch(`/api/user/${username}/stream_key`); - const keyData = await response.json(); - setStreamData((prev) => ({ - ...prev, - stream_key: keyData.stream_key, - })); - - console.log("Stream key:", keyData.stream_key); - } - } catch (error) { - console.error("Error checking stream status:", error); - } - }; - - const fetchCategories = async () => { - try { - const response = await fetch("/api/categories/popular/100"); - const data = await response.json(); - setCategories(data); - setFilteredCategories(data); - } catch (error) { - console.error("Error fetching categories:", error); - } - }; - checkStreamStatus(); fetchCategories(); }, [username]); + const checkStreamStatus = async () => { + try { + const response = await fetch(`/api/user/${username}/status`); + const data = await response.json(); + setIsStreaming(data.is_live); + + if (data.is_live) { + const streamResponse = await fetch( + `/api/streams/${data.user_id}/data`, + { credentials: "include" } + ); + const streamData = await streamResponse.json(); + setStreamData({ + title: streamData.title, + category_name: streamData.category_name, + viewer_count: streamData.num_viewers, + start_time: streamData.start_time, + stream_key: streamData.stream_key, + }); + + console.log("Stream data:", streamData); + + const time = Math.floor( + (Date.now() - new Date(streamData.start_time).getTime()) / 60000 // Convert to minutes + ); + + if (time < 60) setTimeStarted(`${time}m ago`); + else if (time < 1440) + setTimeStarted(`${Math.floor(time / 60)}h ${time % 60}m ago`); + else + setTimeStarted( + `${Math.floor(time / 1440)}d ${Math.floor((time % 1440) / 60)}h ${ + time % 60 + }m ago` + ); + } else { + // Just need the stream key if not streaming + const response = await fetch(`/api/user/${username}/stream_key`); + const keyData = await response.json(); + setStreamData((prev) => ({ + ...prev, + stream_key: keyData.stream_key, + })); + } + } catch (error) { + console.error("Error checking stream status:", error); + } + }; + + const fetchCategories = async () => { + try { + const response = await fetch("/api/categories/popular/100"); + const data = await response.json(); + setCategories(data); + setFilteredCategories(data); + } catch (error) { + console.error("Error fetching categories:", error); + } + }; + const handleInputChange = (e: React.ChangeEvent) => { const { name, value } = e.target; setStreamData((prev) => ({ ...prev, [name]: value })); @@ -201,11 +200,11 @@ const StreamDashboardPage: React.FC = () => { ); }; - const handleStartStream = async () => { + const handlePublishStream = async () => { console.log("Starting stream with data:", streamData); const formData = new FormData(); - formData.append("key", streamData.stream_key); + formData.append("data", JSON.stringify(streamData)); try { const response = await fetch("/api/publish_stream", { @@ -228,6 +227,30 @@ const StreamDashboardPage: React.FC = () => { const handleUpdateStream = async () => { console.log("Updating stream with data:", streamData); + + const formData = new FormData(); + formData.append("key", streamData.stream_key); + formData.append("title", streamData.title); + formData.append("category_name", streamData.category_name); + if (thumbnail) { + formData.append("thumbnail", thumbnail); + } + + try { + const response = await fetch("/api/update_stream", { + method: "POST", + body: formData, + }); + + if (response.ok) { + console.log("Stream updated successfully"); + window.location.reload(); + } else { + console.error("Failed to update stream"); + } + } catch (error) { + console.error("Error updating stream:", error); + } }; const handleEndStream = async () => { @@ -392,7 +415,7 @@ const StreamDashboardPage: React.FC = () => {