From e6285c81ae9e454d631855eb2993dd139dfd954f Mon Sep 17 00:00:00 2001
From: AramJonghu <aramjonghu@tutamail.com>
Date: Sat, 13 Jun 2026 15:08:49 +0200
Subject: [PATCH] updated iframe with multi stream option

---
 frontend/src/pages/Stream.jsx | 31 ++++++++++++++++++++++++++++---
 1 file changed, 28 insertions(+), 3 deletions(-)

diff --git a/frontend/src/pages/Stream.jsx b/frontend/src/pages/Stream.jsx
index 6e39b34..768ff32 100644
--- a/frontend/src/pages/Stream.jsx
+++ b/frontend/src/pages/Stream.jsx
@@ -1,4 +1,14 @@
+import { useState } from "react";
+
+const streams = [
+    { id: "aramstream", label: "Aram" },
+    { id: "generalstream", label: "General" },
+    { id: "gueststream", label: "Guest" },
+];
+
 export default function Stream() {
+    const [activeStream, setActiveStream] = useState("aramstream");
+
     return (
         <div className="text-ctp-text flex flex-col min-h-screen px-4 py-6">
             <div className="w-full text-center flex flex-col flex-1">
@@ -6,12 +16,27 @@ export default function Stream() {
                     Stream
                 </h1>
 
+                <div className="flex justify-center gap-2 mb-4">
+                    {streams.map((s) => (
+                        <button
+                            key={s.id}
+                            onClick={() => setActiveStream(s.id)}
+                            className={
+                                activeStream === s.id
+                                    ? "ui-btn bg-ctp-surface0 text-ctp-text"
+                                    : "ui-btn ui-btn:hover"
+                            }
+                        >
+                            {s.label}
+                        </button>
+                    ))}
+                </div>
+
                 <div className="stream-frame w-full mx-auto flex-1 max-h-[85vh]">
                     <iframe
-                        src="https://stream.aramjonghu.nl"
-                        title="Stream"
+                        src={`https://stream.aramjonghu.nl/${activeStream}`}
+                        title={activeStream}
                         allow="autoplay; fullscreen; picture-in-picture"
-                        loading="lazy"
                         className="w-full h-full border-0 rounded-lg"
                     />
                 </div>