FEAT: Add StreamDashboardPage;

UPDATE: Add route to `StreamDashboardPage`;
UPDATE: `VideoPlayer` for improved stream handling;
UPDATE: `Navbar` to include navigation to `StreamDashboardPage`;
UPDATE: Expand `stream_data` method to include `stream_key` in `streams.py`;
REFACTOR: Format `streams.py`;

frontend/src/App.tsx

@@ -12,6 +12,7 @@ import CategoriesPage from "./pages/AllCategoriesPage";
 import ResultsPage from "./pages/ResultsPage";
 import { SidebarProvider } from "./context/SidebarContext";
 import { QuickSettingsProvider } from "./context/QuickSettingsContext";
+import StreamDashboardPage from "./pages/StreamDashboardPage";
 
 function App() {
   const [isLoggedIn, setIsLoggedIn] = useState(false);
@@ -51,6 +52,7 @@ function App() {
                     )
                   }
                 />
+                <Route path="/go-live" element={isLoggedIn ? <StreamDashboardPage /> : <Navigate to="/" replace />} />
                 <Route path="/:streamerName" element={<StreamerRoute />} />
                 <Route path="/user/:username" element={<UserPage />} />
                 <Route

frontend/src/components/Navigation/Navbar.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect } from "react";
 import Logo from "../Layout/Logo";
 import Button, { ToggleButton } from "../Input/Button";
 import Sidebar from "./Sidebar";
@@ -7,6 +7,7 @@ import {
   LogIn as LogInIcon,
   LogOut as LogOutIcon,
   Settings as SettingsIcon,
+  Radio as LiveIcon,
 } from "lucide-react";
 import SearchBar from "../Input/SearchBar";
 import AuthModal from "../Auth/AuthModal";
@@ -15,6 +16,7 @@ import { useAuth } from "../../context/AuthContext";
 import QuickSettings from "../Settings/QuickSettings";
 import { useSidebar } from "../../context/SidebarContext";
 import { useQuickSettings } from "../../context/QuickSettingsContext";
+import { useNavigate } from "react-router-dom";
 
 interface NavbarProps {
   variant?: "home" | "default";
@@ -25,6 +27,7 @@ const Navbar: React.FC<NavbarProps> = ({ variant = "default" }) => {
   const { showAuthModal, setShowAuthModal } = useAuthModal();
   const { showSideBar, setShowSideBar } = useSidebar();
   const { showQuickSettings, setShowQuickSettings } = useQuickSettings();
+  const navigate = useNavigate();
 
   const handleLogout = () => {
     console.log("Logging out...");
@@ -76,8 +79,10 @@ const Navbar: React.FC<NavbarProps> = ({ variant = "default" }) => {
       }`}
     >
       <Logo variant={variant} />
+
+      {/* Login / Logout Button */}
       <Button
-        extraClasses={`absolute top-[75px] ${
+        extraClasses={`absolute top-[2vh] ${
           showSideBar
             ? "left-[16vw] duration-[0.5s]"
             : "left-[20px] duration-[1s]"
@@ -102,7 +107,7 @@ const Navbar: React.FC<NavbarProps> = ({ variant = "default" }) => {
         <>
           <ToggleButton
             onClick={() => handleSideBar()}
-            extraClasses={`absolute group text-[1rem] top-[20px] ${
+            extraClasses={`absolute group text-[1rem] top-[9vh] ${
               showSideBar
                 ? "left-[16vw] duration-[0.5s]"
                 : "left-[20px] duration-[1s]"
@@ -123,7 +128,7 @@ const Navbar: React.FC<NavbarProps> = ({ variant = "default" }) => {
 
       {/* Quick Settings Sidebar */}
       <ToggleButton
-        extraClasses={`absolute group text-[1rem] top-[20px] ${
+        extraClasses={`absolute group text-[1rem] top-[2vh] ${
           showQuickSettings ? "right-[21vw]" : "right-[20px]"
         } cursor-pointer`}
         onClick={() => handleQuickSettings()}
@@ -132,15 +137,28 @@ const Navbar: React.FC<NavbarProps> = ({ variant = "default" }) => {
         <SettingsIcon className="h-15 w-15" />
 
         {showQuickSettings && (
-              <small className="absolute flex items-center top-0 mr-4 right-0 h-full w-full my-auto group-hover:right-full opacity-0 group-hover:opacity-100 text-white transition-all delay-200">
-                Press Q
-              </small>
-            )}
+          <small className="absolute flex items-center top-0 mr-4 right-0 h-full w-full my-auto group-hover:right-full opacity-0 group-hover:opacity-100 text-white transition-all delay-200">
+            Press Q
+          </small>
+        )}
       </ToggleButton>
       <QuickSettings />
 
       <SearchBar />
 
+      {/* Stream Button */}
+      {isLoggedIn && !window.location.pathname.includes('go-live') && (
+        <Button
+          extraClasses={`${
+            variant === "home" ? "absolute top-[2vh] right-[10vw]" : ""
+          } flex flex-row items-center`}
+          onClick={() => navigate("/go-live")}
+        >
+          <LiveIcon className="h-15 w-15 mr-2" />
+          Go Live
+        </Button>
+      )}
+
       {showAuthModal && <AuthModal onClose={() => setShowAuthModal(false)} />}
     </div>
   );

frontend/src/components/Video/VideoPlayer.tsx

@@ -2,31 +2,50 @@ import React, { useEffect, useRef } from "react";
 import { useParams } from "react-router-dom";
 import videojs from "video.js";
 import "video.js/dist/video-js.css";
+interface VideoPlayerProps {
+  streamer?: string;
+  extraClasses?: string;
+  onStreamDetected?: (isStreamAvailable: boolean) => void;
+}
 
-const VideoPlayer: React.FC = () => {
-  const { streamerName } = useParams<{ streamerName: string }>(); // Get streamerName from URL
+const VideoPlayer: React.FC<VideoPlayerProps> = ({
+  streamer,
+  extraClasses,
+  onStreamDetected,
+}) => {
+  const { streamerName: urlStreamerName } = useParams<{
+    streamerName: string;
+  }>();
   const videoRef = useRef<HTMLDivElement>(null);
   const playerRef = useRef<videojs.Player | null>(null);
 
+  // Use URL param if available, otherwise fall back to prop
+  const streamerName = urlStreamerName || streamer;
+
   useEffect(() => {
     if (!videoRef.current || !streamerName) return;
 
-    const streamUrl = `/stream/${streamerName}/index.m3u8`; // Updated URL with streamerName
+    const streamUrl = `/stream/${streamerName}/index.m3u8`;
 
     if (!playerRef.current) {
       const videoElement = document.createElement("video");
-      videoElement.classList.add("video-js", "vjs-big-play-centered", "w-full", "h-full");
+      videoElement.classList.add(
+        "video-js",
+        "vjs-big-play-centered",
+        "w-full",
+        "h-full"
+      );
       videoElement.setAttribute("playsinline", "true");
       videoRef.current.appendChild(videoElement);
 
       playerRef.current = videojs(videoElement, {
-        controls: true,
+        controls: false,
         autoplay: true,
-        muted: true,
+        muted: false,
         fluid: true,
         responsive: true,
         aspectRatio: "16:9",
-        liveui: true,
+        liveui: false,
         sources: [
           {
             src: streamUrl,
@@ -35,12 +54,19 @@ const VideoPlayer: React.FC = () => {
         ],
       });
 
-      // Handle stream errors & retry
+      playerRef.current.on('loadeddata', () => {
+        if (onStreamDetected) onStreamDetected(true);
+      });
+
       playerRef.current.on("error", () => {
         console.error(`Stream failed to load: ${streamUrl}`);
+        if (onStreamDetected) onStreamDetected(false);
         setTimeout(() => {
           console.log("Retrying stream...");
-          playerRef.current?.src({ src: streamUrl, type: "application/x-mpegURL" });
+          playerRef.current?.src({
+            src: streamUrl,
+            type: "application/x-mpegURL",
+          });
           playerRef.current?.play();
         }, 5000);
       });
@@ -58,7 +84,10 @@ const VideoPlayer: React.FC = () => {
   }, [streamerName]);
 
   return (
-    <div className="w-full h-full flex justify-center items-center bg-gray-900 rounded-lg">
+    <div
+      id="video-player"
+      className={`${extraClasses} w-full h-full mx-auto flex justify-center items-center bg-gray-900 rounded-lg`}
+    >
       <div ref={videoRef} className="w-full max-w-[160vh] self-center" />
     </div>
   );

frontend/src/pages/StreamDashboardPage.tsx

@@ -0,0 +1,444 @@
+import React, { useState, useEffect } from "react";
+import DynamicPageContent from "../components/Layout/DynamicPageContent";
+import Button from "../components/Input/Button";
+import Input from "../components/Input/Input";
+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";
+
+interface StreamData {
+  title: string;
+  category_name: string;
+  viewer_count: number;
+  start_time: string;
+  stream_key: string;
+}
+
+interface Category {
+  category_id: number;
+  category_name: string;
+}
+
+const StreamDashboardPage: React.FC = () => {
+  const { username } = useAuth();
+  const [isStreaming, setIsStreaming] = useState(false);
+  const [streamData, setStreamData] = useState<StreamData>({
+    title: "",
+    category_name: "",
+    viewer_count: 0,
+    start_time: "",
+    stream_key: "",
+  });
+  const [streamDetected, setStreamDetected] = useState(false);
+  const [timeStarted, setTimeStarted] = useState("");
+  const [categories, setCategories] = useState<Category[]>([]);
+  const [isCategoryFocused, setIsCategoryFocused] = useState(false);
+  const [filteredCategories, setFilteredCategories] = useState<Category[]>([]);
+  const [thumbnail, setThumbnail] = useState<File | null>(null);
+  const [thumbnailPreview, setThumbnailPreview] = useState<{
+    url: string;
+    isCustom: boolean;
+  }>({ url: "", isCustom: false });
+  const [debouncedCheck, setDebouncedCheck] = useState<Function | null>(null);
+  const [showKey, setShowKey] = useState(false);
+
+  useEffect(() => {
+    const categoryCheck = debounce((categoryName: string) => {
+      const isValidCategory = categories.some(
+        (cat) => cat.category_name.toLowerCase() === categoryName.toLowerCase()
+      );
+
+      if (isValidCategory && !thumbnailPreview.isCustom) {
+        const defaultThumbnail = `/images/thumbnails/categories/${categoryName
+          .toLowerCase()
+          .replace(/ /g, "_")}.webp`;
+        setThumbnailPreview({ url: defaultThumbnail, isCustom: false });
+      }
+    }, 300);
+
+    setDebouncedCheck(() => categoryCheck);
+
+    return () => {
+      categoryCheck.cancel();
+    };
+  }, [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 handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const { name, value } = e.target;
+    setStreamData((prev) => ({ ...prev, [name]: value }));
+
+    if (name === "category_name") {
+      const filtered = categories.filter((cat) =>
+        cat.category_name.toLowerCase().includes(value.toLowerCase())
+      );
+      setFilteredCategories(filtered);
+      if (debouncedCheck) {
+        debouncedCheck(value);
+      }
+    }
+  };
+
+  const handleCategorySelect = (categoryName: string) => {
+    console.log("Selected category:", categoryName);
+    setStreamData((prev) => ({ ...prev, category_name: categoryName }));
+    setFilteredCategories([]);
+    if (debouncedCheck) {
+      debouncedCheck(categoryName);
+    }
+  };
+
+  const handleThumbnailChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    if (e.target.files && e.target.files[0]) {
+      const file = e.target.files[0];
+      setThumbnail(file);
+      setThumbnailPreview({
+        url: URL.createObjectURL(file),
+        isCustom: true,
+      });
+    } else {
+      setThumbnail(null);
+      if (streamData.category_name && debouncedCheck) {
+        debouncedCheck(streamData.category_name);
+      } else {
+        setThumbnailPreview({ url: "", isCustom: false });
+      }
+    }
+  };
+
+  const clearThumbnail = () => {
+    setThumbnail(null);
+    if (streamData.category_name) {
+      console.log(
+        "Clearing thumbnail as category is set and default category thumbnail will be used"
+      );
+      const defaultThumbnail = `/images/thumbnails/categories/${streamData.category_name
+        .toLowerCase()
+        .replace(/ /g, "_")}.webp`;
+      setThumbnailPreview({ url: defaultThumbnail, isCustom: false });
+    } else {
+      setThumbnailPreview({ url: "", isCustom: false });
+    }
+  };
+
+  const isFormValid = () => {
+    return (
+      streamData.title.trim() !== "" &&
+      streamData.category_name.trim() !== "" &&
+      categories.some(
+        (cat) =>
+          cat.category_name.toLowerCase() ===
+          streamData.category_name.toLowerCase()
+      ) &&
+      streamDetected
+    );
+  };
+
+  const handleStartStream = async () => {
+    console.log("Starting stream with data:", streamData);
+
+    const formData = new FormData();
+    formData.append("key", streamData.stream_key);
+
+    try {
+      const response = await fetch("/api/publish_stream", {
+        method: "POST",
+        body: formData,
+      });
+
+      if (response.ok) {
+        console.log("Stream published successfully");
+        window.location.reload();
+      } else if (response.status === 403) {
+        console.error("Unauthorized - Invalid stream key or already streaming");
+      } else {
+        console.error("Failed to publish stream");
+      }
+    } catch (error) {
+      console.error("Error publishing stream:", error);
+    }
+  };
+
+  const handleUpdateStream = async () => {
+    console.log("Updating stream with data:", streamData);
+  };
+
+  const handleEndStream = async () => {
+    console.log("Ending stream...");
+
+    const formData = new FormData();
+    formData.append("key", streamData.stream_key);
+
+    try {
+      const response = await fetch("/api/end_stream", {
+        method: "POST",
+        body: formData,
+      });
+
+      if (response.ok) {
+        console.log("Stream ended successfully");
+        window.location.reload();
+      } else {
+        console.error("Failed to end stream");
+      }
+    } catch (error) {
+      console.error("Error ending stream:", error);
+    }
+  };
+
+  return (
+    <DynamicPageContent className="flex flex-col min-h-screen bg-gradient-radial from-purple-600 via-blue-900 to-black">
+      <div
+        id="streamer-dashboard"
+        className="flex flex-col flex-grow mx-auto px-4"
+      >
+        <h1 className="text-4xl font-bold text-white text-center">
+          {isStreaming ? "Stream Dashboard" : "Start Streaming"}
+        </h1>
+
+        <div className="flex flex-grow gap-8 items-stretch pb-4">
+          {/* Left side - Stream Settings */}
+          <div className="flex flex-col flex-grow">
+            <h2 className="text-center text-2xl font-bold text-white mb-4">
+              Stream Settings
+            </h2>
+            <div className="flex flex-col flex-grow justify-evenly space-y-6 bg-gray-800 rounded-lg p-6 shadow-xl">
+              <div>
+                <label className="block text-white mb-2">Stream Title</label>
+                <Input
+                  name="title"
+                  value={streamData.title}
+                  onChange={handleInputChange}
+                  placeholder="Enter your stream title"
+                  extraClasses="w-[70%] focus:w-[100%]"
+                  maxLength={50}
+                />
+              </div>
+
+              <div className="relative">
+                <label className="block text-white mb-2">Category</label>
+                <Input
+                  value={streamData.category_name}
+                  onChange={handleInputChange}
+                  onFocus={() => setIsCategoryFocused(true)}
+                  onBlur={() =>
+                    setTimeout(() => setIsCategoryFocused(false), 200)
+                  }
+                  placeholder="Select or type a category"
+                  extraClasses="w-[70%] focus:w-[100%]"
+                  maxLength={50}
+                  autoComplete="off"
+                  type="search"
+                />
+                {isCategoryFocused && filteredCategories.length > 0 && (
+                  <div className="absolute z-10 w-full bg-gray-700 mt-1 rounded-md shadow-lg max-h-48 overflow-y-auto">
+                    {filteredCategories.map((category) => (
+                      <div
+                        key={category.category_id}
+                        className="px-4 py-2 hover:bg-gray-600 cursor-pointer text-white"
+                        onClick={() =>
+                          handleCategorySelect(category.category_name)
+                        }
+                      >
+                        {category.category_name}
+                      </div>
+                    ))}
+                  </div>
+                )}
+              </div>
+
+              <div>
+                <label className="block text-white mb-2">
+                  Stream Thumbnail
+                </label>
+                <div className="relative flex flex-row items-center justify-center">
+                  <input
+                    type="file"
+                    accept="image/*"
+                    onChange={handleThumbnailChange}
+                    className="hidden"
+                    id="thumbnail-upload"
+                  />
+                  <label
+                    htmlFor="thumbnail-upload"
+                    className="cursor-pointer inline-block bg-gray-700 hover:bg-gray-600 text-white py-2 px-4 rounded-lg transition-colors"
+                  >
+                    {thumbnail ? "Change Thumbnail" : "Choose Thumbnail"}
+                  </label>
+                  <span className="ml-3 text-gray-400">
+                    {thumbnail ? thumbnail.name : "No file selected"}
+                  </span>
+                  {thumbnailPreview.isCustom && (
+                    <button
+                      onClick={clearThumbnail}
+                      className="absolute right-0 top-0 p-1 bg-red-500 rounded-full hover:bg-red-600 transition-colors"
+                    >
+                      <XIcon size={16} className="text-white" />
+                    </button>
+                  )}
+                </div>
+                {!thumbnailPreview.isCustom && (
+                  <p className="text-gray-400 mt-2 text-sm text-center">
+                    No thumbnail selected - the default category image will be
+                    used
+                  </p>
+                )}
+              </div>
+
+              {isStreaming && (
+                <div className="bg-gray-700 p-4 rounded-lg">
+                  <h3 className="text-white font-semibold mb-2">Stream Info</h3>
+                  <p className="text-gray-300">
+                    Viewers: {streamData.viewer_count}
+                  </p>
+                  <p className="text-gray-300">
+                    Started:{" "}
+                    {new Date(streamData.start_time!).toLocaleTimeString()}
+                    {` (${timeStarted})`}
+                  </p>
+                </div>
+              )}
+              <div className="flex items-center mx-auto p-10 bg-gray-900 w-fit rounded-xl py-4">
+                <label className="block text-white mr-8">Stream Key</label>
+                <Input
+                  type={showKey ? "text" : "password"}
+                  value={streamData.stream_key}
+                  readOnly
+                  extraClasses="w-fit pr-[30px]"
+                  disabled
+                />
+                <button
+                  type="button"
+                  onClick={() => setShowKey(!showKey)}
+                  className="-translate-x-[30px] top-1/2 h-6 w-6 text-white"
+                >
+                  {showKey ? (
+                    <HideIcon className="h-6 w-6" />
+                  ) : (
+                    <ShowIcon className="h-6 w-6" />
+                  )}
+                </button>
+              </div>
+
+              <div className="flex flex-col w-fit mx-auto items-center justify-center pt-6 gap-6">
+                <Button
+                  onClick={isStreaming ? handleUpdateStream : handleStartStream}
+                  disabled={!isFormValid()}
+                  extraClasses="text-2xl px-8 py-4 disabled:opacity-50 disabled:cursor-not-allowed"
+                >
+                  {isStreaming ? "Update Stream" : "Start Streaming"}
+                </Button>
+                {!streamDetected && (
+                  <p className="text-red-500 text-sm">
+                    No stream input detected. Please start streaming using your
+                    broadcast software.
+                  </p>
+                )}
+              </div>
+            </div>
+          </div>
+
+          {/* Right side - Preview */}
+          <div className="w-[25vw] flex flex-col">
+            <h2 className="text-center text-2xl font-bold text-white mb-4">
+              Stream Preview
+            </h2>
+            <div className="flex flex-col gap-4 bg-gray-800 rounded-lg p-4 w-full h-fit flex-grow justify-around">
+              <div className="flex flex-col">
+                <p className="text-white text-center pb-4">Video</p>
+                <VideoPlayer
+                  streamer={username ?? undefined}
+                  extraClasses="border border-white"
+                  onStreamDetected={setStreamDetected}
+                />
+              </div>
+              <div className="flex flex-col">
+                <p className="text-white text-center">List Item</p>
+                <ListItem
+                  type="stream"
+                  id={1}
+                  title={streamData.title || "Stream Title"}
+                  streamer={username || ""}
+                  streamCategory={streamData.category_name || "Category"}
+                  viewers={streamData.viewer_count}
+                  thumbnail={thumbnailPreview.url || ""}
+                  onItemClick={() => {}}
+                  extraClasses="max-w-[20vw]"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </DynamicPageContent>
+  );
+};
+
+export default StreamDashboardPage;

web_server/blueprints/streams.py

@@ -14,10 +14,12 @@ stream_bp = Blueprint("stream", __name__)
 # Constants
 THUMBNAIL_GENERATION_INTERVAL = 10
 
-## Path Manager
+# Path Manager
 path_manager = PathManager()
 
-## Stream Routes
+# Stream Routes
+
+
 @stream_bp.route('/streams/popular/<int:no_streams>')
 def popular_streams(no_streams) -> list[dict]:
     """
@@ -35,6 +37,7 @@ def popular_streams(no_streams) -> list[dict]:
     streams = get_highest_view_streams(no_streams)
     return jsonify(streams)
 
+
 @stream_bp.route('/streams/popular/<string:category_name>')
 @stream_bp.route('/streams/popular/<string:category_name>/<int:no_streams>/<int:offset>')
 def popular_streams_by_category(category_name, no_streams=4, offset=0) -> list[dict]:
@@ -47,7 +50,8 @@ def popular_streams_by_category(category_name, no_streams=4, offset=0) -> list[d
     streams = get_streams_based_on_category(category_id, no_streams, offset)
     return jsonify(streams)
 
-@login_required 
+
+@login_required
 @stream_bp.route('/streams/recommended')
 def recommended_streams() -> list[dict]:
     """
@@ -61,16 +65,27 @@ def recommended_streams() -> list[dict]:
     streams = get_streams_based_on_category(category)
     return streams
 
+
 @stream_bp.route('/streams/<int:streamer_id>/data')
-def stream_data(streamer_id):
+def stream_data(streamer_id) -> dict:
     """
     Returns a streamer's current stream data
     """
+    data = get_current_stream_data(streamer_id)
     
-    return jsonify(get_current_stream_data(streamer_id))
+    if session.get('user_id') == streamer_id:
+        with Database() as db:
+            stream_key = db.fetchone(
+                """SELECT stream_key FROM users WHERE user_id = ?""", (streamer_id,))
+            if data:
+                data["stream_key"] = stream_key["stream_key"]
+            else:
+                data = {"stream_key": stream_key["stream_key"]}
+
+    return jsonify(data)
 
 
-## Category Routes
+# Category Routes
 @stream_bp.route('/categories/popular/<int:no_categories>')
 @stream_bp.route('/categories/popular/<int:no_categories>/<int:offset>')
 def popular_categories(no_categories=4, offset=0) -> list[dict]:
@@ -87,7 +102,8 @@ def popular_categories(no_categories=4, offset=0) -> list[dict]:
     category_data = get_highest_view_categories(no_categories, offset)
     return jsonify(category_data)
 
-@login_required 
+
+@login_required
 @stream_bp.route('/categories/recommended')
 def recommended_categories() -> list | list[dict]:
     """
@@ -98,6 +114,7 @@ def recommended_categories() -> list | list[dict]:
     categories = get_user_category_recommendations(user_id)
     return jsonify(categories)
 
+
 @login_required
 @stream_bp.route('/categories/following')
 def following_categories_streams():
@@ -109,7 +126,7 @@ def following_categories_streams():
     return jsonify(streams)
 
 
-## User Routes
+# User Routes
 @stream_bp.route('/user/<string:username>/status')
 def user_live_status(username):
     """
@@ -134,7 +151,7 @@ def user_live_status(username):
     })
 
 
-## VOD Routes
+# VOD Routes
 @stream_bp.route('/vods/<string:username>')
 def vods(username):
     """
@@ -145,7 +162,7 @@ def vods(username):
     return jsonify(vods)
 
 
-## RTMP Server Routes
+# RTMP Server Routes
 @stream_bp.route("/publish_stream", methods=["POST"])
 def publish_stream():
     """
@@ -157,7 +174,7 @@ def publish_stream():
     set user as streaming
     periodically update thumbnail
     """
-    stream_key = request.form.get("name")
+    stream_key = request.form.get("key")
     print("Stream request received")
 
     # Open database connection
@@ -170,32 +187,34 @@ def publish_stream():
         # If stream key is invalid, return unauthorized
         if not user_info or user_info["is_live"]:
             return "Unauthorized", 403
-        
+
         # Insert stream into database
         db.execute("""INSERT INTO streams (user_id, title, start_time, num_viewers, category_id)
-                    VALUES (?, ?, ?, ?, ?)""", (user_info["user_id"], 
-                                            user_info["current_stream_title"],
-                                            datetime.now(),
-                                            0,
-                                            1))
-        
+                    VALUES (?, ?, ?, ?, ?)""", (user_info["user_id"],
+                                                user_info["current_stream_title"],
+                                                datetime.now(),
+                                                0,
+                                                1))
+
         # Set user as streaming
-        db.execute("""UPDATE users SET is_live = 1 WHERE user_id = ?""", (user_info["user_id"],))
+        db.execute("""UPDATE users SET is_live = 1 WHERE user_id = ?""",
+                   (user_info["user_id"],))
 
     username = user_info["username"]
     user_id = user_info["user_id"]
-    
+
     # Local file creation
     create_local_directories(username)
 
     # Update thumbnail periodically
     update_thumbnail.delay(user_id,
-                           path_manager.get_stream_file_path(username), 
-                           path_manager.get_thumbnail_file_path(username), 
+                           path_manager.get_stream_file_path(username),
+                           path_manager.get_thumbnail_file_path(username),
                            THUMBNAIL_GENERATION_INTERVAL)
 
     return redirect(f"/{user_info['username']}/stream/")
 
+
 @stream_bp.route("/end_stream", methods=["POST"])
 def end_stream():
     """
@@ -209,8 +228,8 @@ def end_stream():
     clean up old ts files
     end thumbnail generation
     """
-    
-    stream_key = request.form.get("name")
+
+    stream_key = request.form.get("key")
 
     # Open database connection
     with Database() as db:
@@ -218,41 +237,42 @@ def end_stream():
         user_info = db.fetchone("""SELECT *
                                 FROM users 
                                 WHERE stream_key = ?""", (stream_key,))
-        
+
         stream_info = db.fetchone("""SELECT *
                                 FROM streams
                                 WHERE user_id = ?""", (user_info["user_id"],))
-        
 
         # If stream key is invalid, return unauthorized
         if not user_info:
             return "Unauthorized", 403
-        
+
         # Remove stream from database
         db.execute("""DELETE FROM streams 
                    WHERE user_id = ?""", (user_info["user_id"],))
 
         # Move stream to vod table
-        stream_length = int((datetime.now() - parser.parse(stream_info["start_time"])).total_seconds())
+        stream_length = int(
+            (datetime.now() - parser.parse(stream_info["start_time"])).total_seconds())
 
         db.execute("""INSERT INTO vods (user_id, title, datetime, category_id, length, views)
-                    VALUES (?, ?, ?, ?, ?, ?)""", (user_info["user_id"], 
-                                            user_info["current_stream_title"],
-                                            stream_info["start_time"],
-                                            user_info["current_selected_category_id"],
-                                            stream_length,
-                                            0))
-        
+                    VALUES (?, ?, ?, ?, ?, ?)""", (user_info["user_id"],
+                                                   user_info["current_stream_title"],
+                                                   stream_info["start_time"],
+                                                   user_info["current_selected_category_id"],
+                                                   stream_length,
+                                                   0))
+
         vod_id = db.get_last_insert_id()
-        
+
         # Set user as not streaming
         db.execute("""UPDATE users 
                    SET is_live = 0 
                    WHERE user_id = ?""", (user_info["user_id"],))
-        
+
     # Get username
     username = user_info["username"]
-    
-    combine_ts_stream.delay(path_manager.get_stream_path(username), path_manager.get_vods_path(username), vod_id)
 
-    return "Stream ended", 200
+    combine_ts_stream.delay(path_manager.get_stream_path(
+        username), path_manager.get_vods_path(username), vod_id)
+
+    return "Stream ended", 200