From a8cc15410fec8907435d22aae40f80b6f12b6866 Mon Sep 17 00:00:00 2001
From: venus <git@riverrooks.art>
Date: Sun, 19 Jul 2026 14:00:28 -0500
Subject: [PATCH] initial commit

---
 Dockerfile         |  10 +
 docker-compose.yml |   9 +
 index.html         | 587 +++++++++++++++++++++++++++++++++++++++++++++
 streams.txt        |   7 +
 4 files changed, 613 insertions(+)
 create mode 100644 Dockerfile
 create mode 100644 docker-compose.yml
 create mode 100644 index.html
 create mode 100644 streams.txt
diff --git a/Dockerfile b/Dockerfile
new file mode 100644
index 0000000..7ac8368
--- /dev/null
+++ b/Dockerfile
@@ -0,0 +1,10 @@
+FROM nginx:alpine
+
+# Copy the static web application files
+COPY index.html /usr/share/nginx/html/index.html
+COPY streams.txt /usr/share/nginx/html/streams.txt
+
+# Nginx default port
+EXPOSE 80
+
+CMD ["nginx", "-g", "daemon off;"]
diff --git a/docker-compose.yml b/docker-compose.yml
new file mode 100644
index 0000000..238963e
--- /dev/null
+++ b/docker-compose.yml
@@ -0,0 +1,9 @@
+services:
+  stream-hub:
+    build: .
+    container_name: stream-hub
+    ports:
+      - "8080:80"
+    volumes:
+      - ./streams.txt:/usr/share/nginx/html/streams.txt:ro
+    restart: unless-stopped
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..1423b57
--- /dev/null
+++ b/index.html
@@ -0,0 +1,587 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>StreamHub - Live Stream Dashboard</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+    <style>
+        :root {
+            --bg-gradient: radial-gradient(circle at 100% 0%, #1e1b4b 0%, #09090b 100%);
+            --panel-bg: rgba(15, 23, 42, 0.6);
+            --panel-border: rgba(255, 255, 255, 0.08);
+            --text-primary: #f8fafc;
+            --text-secondary: #94a3b8;
+            --accent: #6366f1;
+            --accent-glow: rgba(99, 102, 241, 0.35);
+            --accent-hover: #4f46e5;
+            --btn-bg: rgba(30, 41, 59, 0.4);
+            --btn-border: rgba(255, 255, 255, 0.05);
+            --btn-hover-bg: rgba(255, 255, 255, 0.08);
+            --youtube-red: #ef4444;
+            --twitch-purple: #a855f7;
+            --web-blue: #06b6d4;
+        }
+
+        * {
+            box-sizing: border-box;
+            margin: 0;
+            padding: 0;
+        }
+
+        body {
+            background: var(--bg-gradient);
+            color: var(--text-primary);
+            font-family: 'Outfit', system-ui, -apple-system, sans-serif;
+            display: flex;
+            flex-direction: column-reverse;
+            height: 100vh;
+            overflow: hidden;
+        }
+
+        /* Responsive sidebar/dock */
+        @media (min-width: 1024px) {
+            body {
+                flex-direction: row;
+            }
+        }
+
+        /* Video Area */
+        .video-container {
+            position: relative;
+            flex-grow: 1;
+            background-color: #000000;
+            box-shadow: inset 0 0 100px rgba(0, 0, 0, 0.8);
+        }
+
+        iframe {
+            width: 100%;
+            height: 100%;
+            border: none;
+            display: block;
+        }
+
+        /* Loader Overlay */
+        .loader-container {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background-color: rgba(9, 9, 11, 0.9);
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            opacity: 0;
+            pointer-events: none;
+            transition: opacity 0.3s ease;
+            z-index: 10;
+            gap: 20px;
+        }
+
+        .loader-container.active {
+            opacity: 1;
+            pointer-events: auto;
+        }
+
+        .spinner {
+            width: 60px;
+            height: 60px;
+            border: 4px solid rgba(255, 255, 255, 0.05);
+            border-top: 4px solid var(--accent);
+            border-radius: 50%;
+            animation: spin 1s cubic-bezier(0.4, 0, 0.2, 1) infinite;
+            box-shadow: 0 0 20px var(--accent-glow);
+        }
+
+        .loader-text {
+            color: var(--text-secondary);
+            font-size: 15px;
+            letter-spacing: 0.05em;
+            text-transform: uppercase;
+            font-weight: 500;
+            animation: pulse 1.5s ease-in-out infinite;
+        }
+
+        /* Controls Panel */
+        .controls {
+            width: 100%;
+            background: var(--panel-bg);
+            backdrop-filter: blur(16px);
+            -webkit-backdrop-filter: blur(16px);
+            border-top: 1px solid var(--panel-border);
+            display: flex;
+            flex-direction: column;
+            padding: 24px;
+            z-index: 5;
+            box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.5);
+            transition: all 0.3s ease;
+        }
+
+        @media (min-width: 1024px) {
+            .controls {
+                width: 380px;
+                height: 100%;
+                border-top: none;
+                border-left: 1px solid var(--panel-border);
+                box-shadow: -10px 0 40px rgba(0, 0, 0, 0.5);
+            }
+        }
+
+        /* Header */
+        .header {
+            margin-bottom: 24px;
+            display: flex;
+            align-items: center;
+            gap: 12px;
+        }
+
+        .logo-icon {
+            width: 32px;
+            height: 32px;
+            background: linear-gradient(135deg, var(--accent) 0%, #a855f7 100%);
+            border-radius: 8px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            box-shadow: 0 0 15px var(--accent-glow);
+        }
+
+        .logo-icon svg {
+            fill: white;
+            width: 18px;
+            height: 18px;
+        }
+
+        .header h1 {
+            font-size: 22px;
+            font-weight: 700;
+            letter-spacing: -0.02em;
+            background: linear-gradient(to right, #ffffff, #cbd5e1);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+        }
+
+        .header p {
+            font-size: 13px;
+            color: var(--text-secondary);
+            margin-top: 2px;
+        }
+
+        .divider {
+            height: 1px;
+            background: linear-gradient(to right, var(--panel-border), transparent);
+            margin-bottom: 24px;
+        }
+
+        /* Stream Selector Title */
+        .section-title {
+            font-size: 12px;
+            text-transform: uppercase;
+            letter-spacing: 0.1em;
+            color: var(--text-secondary);
+            margin-bottom: 12px;
+            font-weight: 600;
+        }
+
+        /* Stream list scroll area */
+        .controls-list-wrapper {
+            flex-grow: 1;
+            overflow-y: auto;
+            margin-right: -10px;
+            padding-right: 10px;
+        }
+
+        /* Custom Scrollbar */
+        .controls-list-wrapper::-webkit-scrollbar {
+            width: 6px;
+        }
+        .controls-list-wrapper::-webkit-scrollbar-track {
+            background: rgba(0, 0, 0, 0.1);
+            border-radius: 8px;
+        }
+        .controls-list-wrapper::-webkit-scrollbar-thumb {
+            background: rgba(255, 255, 255, 0.1);
+            border-radius: 8px;
+        }
+        .controls-list-wrapper::-webkit-scrollbar-thumb:hover {
+            background: rgba(255, 255, 255, 0.2);
+        }
+
+        .controls-list {
+            display: flex;
+            flex-direction: row;
+            gap: 12px;
+            overflow-x: auto;
+            padding-bottom: 8px;
+        }
+
+        @media (min-width: 1024px) {
+            .controls-list {
+                flex-direction: column;
+                overflow-x: visible;
+                padding-bottom: 0;
+            }
+        }
+
+        /* Dynamic buttons */
+        .stream-btn {
+            display: flex;
+            flex-direction: column;
+            align-items: flex-start;
+            gap: 6px;
+            width: 220px;
+            flex-shrink: 0;
+            padding: 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--btn-border);
+            border-radius: 12px;
+            color: var(--text-primary);
+            cursor: pointer;
+            transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+            text-align: left;
+        }
+
+        @media (min-width: 1024px) {
+            .stream-btn {
+                width: 100%;
+                flex-shrink: 1;
+            }
+        }
+
+        .stream-btn:hover {
+            background: var(--btn-hover-bg);
+            border-color: rgba(255, 255, 255, 0.15);
+            transform: translateY(-2px);
+            box-shadow: 0 4px 12px rgba(0,0,0,0.2);
+        }
+
+        .stream-btn.active {
+            background: rgba(99, 102, 241, 0.15);
+            border-color: var(--accent);
+            box-shadow: 0 0 15px rgba(99, 102, 241, 0.1), inset 0 0 8px rgba(99, 102, 241, 0.1);
+        }
+
+        .stream-btn .stream-name {
+            font-size: 15px;
+            font-weight: 600;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            width: 100%;
+            transition: color 0.2s ease;
+        }
+
+        .stream-btn.active .stream-name {
+            color: #818cf8;
+        }
+
+        /* Badges */
+        .badge {
+            font-size: 10px;
+            font-weight: 700;
+            text-transform: uppercase;
+            padding: 2px 8px;
+            border-radius: 9999px;
+            letter-spacing: 0.05em;
+        }
+
+        .badge-youtube {
+            background: rgba(239, 68, 68, 0.15);
+            color: var(--youtube-red);
+            border: 1px solid rgba(239, 68, 68, 0.2);
+        }
+
+        .badge-twitch {
+            background: rgba(168, 85, 247, 0.15);
+            color: var(--twitch-purple);
+            border: 1px solid rgba(168, 85, 247, 0.2);
+        }
+
+        .badge-web {
+            background: rgba(6, 182, 212, 0.15);
+            color: var(--web-blue);
+            border: 1px solid rgba(6, 182, 212, 0.2);
+        }
+
+        /* Error and loading state in panel */
+        .panel-loader {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            padding: 40px 0;
+            color: var(--text-secondary);
+            font-size: 15px;
+            gap: 10px;
+        }
+
+        .panel-loader .mini-spinner {
+            width: 20px;
+            height: 20px;
+            border: 2px solid rgba(255, 255, 255, 0.1);
+            border-top: 2px solid var(--accent);
+            border-radius: 50%;
+            animation: spin 0.8s linear infinite;
+        }
+
+        .error-card {
+            background: rgba(239, 68, 68, 0.05);
+            border: 1px solid rgba(239, 68, 68, 0.15);
+            border-radius: 12px;
+            padding: 20px;
+            text-align: center;
+            margin-top: 10px;
+        }
+
+        .error-card h3 {
+            font-size: 16px;
+            color: #fca5a5;
+            margin-bottom: 8px;
+            font-weight: 600;
+        }
+
+        .error-card p {
+            font-size: 13px;
+            color: var(--text-secondary);
+            line-height: 1.5;
+            margin-bottom: 12px;
+        }
+
+        .error-tip {
+            font-style: italic;
+            font-size: 11px !important;
+            color: #64748b !important;
+        }
+
+        .retry-btn {
+            background: var(--accent);
+            color: white;
+            border: none;
+            padding: 8px 16px;
+            font-size: 13px;
+            font-weight: 600;
+            border-radius: 6px;
+            cursor: pointer;
+            transition: background 0.2s ease;
+        }
+
+        .retry-btn:hover {
+            background: var(--accent-hover);
+        }
+
+        /* Footer styling */
+        .footer {
+            margin-top: 24px;
+            font-size: 11px;
+            color: #475569;
+            text-align: center;
+        }
+
+        @keyframes spin {
+            to { transform: rotate(360deg); }
+        }
+
+        @keyframes pulse {
+            0%, 100% { opacity: 0.6; }
+            50% { opacity: 1; }
+        }
+    </style>
+</head>
+<body>
+
+    <div class="video-container">
+        <!-- Main Iframe Viewer -->
+        <iframe 
+            id="streamViewer" 
+            allowfullscreen>
+        </iframe>
+        
+        <!-- Loading Overlay over video -->
+        <div id="loader" class="loader-container">
+            <div class="spinner"></div>
+            <div class="loader-text">Loading Stream</div>
+        </div>
+    </div>
+
+    <div class="controls">
+        <div class="header">
+            <div class="logo-icon">
+                <!-- Simple Play/Stream SVG -->
+                <svg viewBox="0 0 24 24">
+                    <path d="M8 5v14l11-7z"/>
+                </svg>
+            </div>
+            <div>
+                <h1>StreamHub</h1>
+                <p>Dynamic Stream Selector</p>
+            </div>
+        </div>
+
+        <div class="divider"></div>
+
+        <div class="section-title">Available Channels</div>
+        
+        <div class="controls-list-wrapper">
+            <div id="controlsList" class="controls-list">
+                <div class="panel-loader">
+                    <div class="mini-spinner"></div>
+                    Loading streams.txt...
+                </div>
+            </div>
+        </div>
+
+        <div class="footer">
+            Edit <code>streams.txt</code> to manage channels
+        </div>
+    </div>
+
+    <script>
+        // Track the current stream active list
+        let activeStreams = [];
+
+        // Helper to infer badge type from URL
+        function getStreamBadge(url) {
+            const lowerUrl = url.toLowerCase();
+            if (lowerUrl.includes('youtube.com') || lowerUrl.includes('youtu.be')) {
+                return '<span class="badge badge-youtube">YouTube</span>';
+            } else if (lowerUrl.includes('twitch.tv')) {
+                return '<span class="badge badge-twitch">Twitch</span>';
+            } else {
+                return '<span class="badge badge-web">Web Stream</span>';
+            }
+        }
+
+        // Show standard errors inside controls list
+        function showErrorState(message) {
+            const list = document.getElementById('controlsList');
+            list.innerHTML = `
+                <div class="error-card">
+                    <h3>Failed to load channels</h3>
+                    <p>${message}</p>
+                    <p class="error-tip">Verify <code>streams.txt</code> exists in the root folder with comma-separated list of streams.</p>
+                    <button class="retry-btn" onclick="loadStreams()">Retry Connection</button>
+                </div>
+            `;
+        }
+
+        // Switch the source URL of the iframe
+        function switchStream(clickedButton, newUrl) {
+            const viewer = document.getElementById('streamViewer');
+            const loader = document.getElementById('loader');
+            
+            // Activate loader display
+            loader.classList.add('active');
+            
+            // Adjust Twitch specific URL configuration requirements
+            let finalUrl = newUrl;
+            if (newUrl.includes('player.twitch.tv')) {
+                const hostname = window.location.hostname || 'localhost';
+                if (newUrl.includes('parent=')) {
+                    // Update parent domain parameter dynamically
+                    finalUrl = newUrl.replace(/parent=[^&]+/, 'parent=' + hostname);
+                } else {
+                    // Append parent parameter
+                    finalUrl = newUrl + (newUrl.includes('?') ? '&' : '?') + 'parent=' + hostname;
+                }
+            }
+
+            viewer.src = finalUrl;
+
+            // Highlight the selected button in list
+            const buttons = document.querySelectorAll('.stream-btn');
+            buttons.forEach(btn => btn.classList.remove('active'));
+            if (clickedButton) {
+                clickedButton.classList.add('active');
+            }
+        }
+
+        // Parse streams.txt and construct lists
+        async function loadStreams() {
+            const list = document.getElementById('controlsList');
+            list.innerHTML = `
+                <div class="panel-loader">
+                    <div class="mini-spinner"></div>
+                    Parsing streams...
+                </div>
+            `;
+
+            try {
+                const response = await fetch('streams.txt');
+                if (!response.ok) {
+                    throw new Error(`HTTP Error ${response.status}: ${response.statusText}`);
+                }
+                const text = await response.text();
+                
+                const streams = [];
+                const lines = text.split('\n');
+
+                lines.forEach((line) => {
+                    const trimmed = line.trim();
+                    // Skip comments and empty lines
+                    if (!trimmed || trimmed.startsWith('#')) return;
+
+                    const commaIndex = trimmed.indexOf(',');
+                    if (commaIndex !== -1) {
+                        const name = trimmed.substring(0, commaIndex).trim();
+                        const url = trimmed.substring(commaIndex + 1).trim();
+                        if (name && url) {
+                            streams.push({ name, url });
+                        }
+                    } else {
+                        // Fallback logic if there is no comma: use url as name or parse
+                        if (trimmed.startsWith('http://') || trimmed.startsWith('https://')) {
+                            streams.push({ name: trimmed, url: trimmed });
+                        }
+                    }
+                });
+
+                if (streams.length === 0) {
+                    throw new Error('streams.txt contains no valid streams. Add stream entries using format: "Name, URL"');
+                }
+
+                activeStreams = streams;
+                buildControls();
+
+            } catch (error) {
+                console.error(error);
+                showErrorState(error.message);
+            }
+        }
+
+        // Build list elements from active parsed list
+        function buildControls() {
+            const list = document.getElementById('controlsList');
+            list.innerHTML = '';
+
+            activeStreams.forEach((stream, index) => {
+                const badgeHtml = getStreamBadge(stream.url);
+                const button = document.createElement('button');
+                button.className = 'stream-btn';
+                button.innerHTML = `
+                    ${badgeHtml}
+                    <div class="stream-name" title="${stream.name}">${stream.name}</div>
+                `;
+                button.onclick = () => switchStream(button, stream.url);
+                list.appendChild(button);
+            });
+
+            // Automatically switch and load the first stream in the text file
+            if (activeStreams.length > 0) {
+                const firstButton = list.querySelector('.stream-btn');
+                switchStream(firstButton, activeStreams[0].url);
+            }
+        }
+
+        // Handle loader removal when stream frame finishes loading
+        document.getElementById('streamViewer').addEventListener('load', () => {
+            document.getElementById('loader').classList.remove('active');
+        });
+
+        // Initialize loading on start
+        window.addEventListener('DOMContentLoaded', loadStreams);
+    </script>
+</body>
+</html>
diff --git a/streams.txt b/streams.txt
new file mode 100644
index 0000000..b0fdde4
--- /dev/null
+++ b/streams.txt
@@ -0,0 +1,7 @@
+# Default streams list
+# Format: Name, Embed URL
+YouTube Stream, https://www.youtube.com/embed/dQw4w9WgXcQ
+Twitch Stream, https://player.twitch.tv/?channel=twitch&parent=localhost
+Alt YouTube, https://www.youtube.com/embed/jNQXAC9IVRw
+FOX wc final, https://embed.st/embed/admin/ppv-spain-vs-argentina/3
+FOX timstreams, https://logic.icelanders.st/embed/fox-usa
