first commit

backend/Dockerfile

@@ -0,0 +1,13 @@
+FROM python:3.9-slim
+
+# Install yt-dlp and dependencies
+RUN apt-get update && apt-get install -y ffmpeg curl && \
+    curl -L https://github.com/yt-dlp/yt-dlp/releases/latest/download/yt-dlp -o /usr/local/bin/yt-dlp && \
+    chmod a+rx /usr/local/bin/yt-dlp
+
+WORKDIR /app
+COPY requirements.txt .
+RUN pip install -r requirements.txt
+COPY . .
+
+CMD ["python", "main.py"]

backend/main.py

@@ -0,0 +1,64 @@
+from flask import Flask, request, Response, send_from_directory, jsonify
+import subprocess
+import requests
+
+app = Flask(__name__, static_folder='../frontend', static_url_path='')
+app.url_map.strict_slashes = False
+
+@app.route('/api/status', methods=['POST', 'GET'])
+def proxy_status():
+    if request.method == 'POST':
+        # Safely get the json body
+        client_data = request.get_json() or {}
+        target_server = client_data.get('server')
+    else:
+        target_server = request.args.get('server')
+
+    if not target_server:
+        return jsonify({"error": "No server provided"}), 400
+
+    try:
+        # Use the data gathered above
+        response = requests.post(target_server, json=client_data if request.method == 'POST' else {}, timeout=5)
+        return (response.content, response.status_code, response.headers.items())
+    except Exception as e:
+        return jsonify({"error": str(e)}), 500
+    
+
+
+@app.route('/')
+def index():
+    return send_from_directory(app.static_folder, 'index.html')
+
+@app.route('/api/stream', methods=['POST', 'GET'])
+def stream_video():
+    # Note: <video> tags perform GET. To support your POST requirement, 
+    # we handle the URL via JSON post or URL params.
+    video_url = ""
+    if request.method == 'POST':
+        video_url = request.json.get('url')
+    else:
+        video_url = request.args.get('url')
+
+    def generate():
+        # yt-dlp command to get the stream and pipe to stdout
+        cmd = [
+            'yt-dlp',
+            '-o', '-', # output to stdout
+            '-f', 'best[ext=mp4]/best',
+            video_url
+        ]
+        process = subprocess.Popen(cmd, stdout=subprocess.PIPE, stderr=subprocess.STDOUT)
+        try:
+            while True:
+                chunk = process.stdout.read(1024 * 16)
+                if not chunk:
+                    break
+                yield chunk
+        finally:
+            process.kill()
+
+    return Response(generate(), mimetype='video/mp4')
+
+if __name__ == '__main__':
+    app.run(host='0.0.0.0', port=5000)

docker-compose.yml

@@ -0,0 +1,10 @@
+version: '3.8'
+services:
+  webserver:
+    build: ./backend
+    ports:
+      - "5000:5000"
+    volumes:
+      - ./frontend:/frontend
+    environment:
+      - PYTHONUNBUFFERED=1

frontend/app.js

@@ -0,0 +1,106 @@
+let currentPage = 1;
+const perPage = 12;
+
+localStorage.clear();
+
+function InitializeLocalStorage() {
+    if (!localStorage.getItem('config')) {
+        localStorage.setItem('config', JSON.stringify({ servers: [{ "https://getfigleaf.com": {} }] }));
+        InitializeServerStatus();
+    }
+}
+
+function InitializeServerStatus() {
+    const config = JSON.parse(localStorage.getItem('config'));
+    config.servers.forEach(serverObj => {
+        const server = Object.keys(serverObj)[0];
+        fetch(`/api/status`, {
+            method: "POST", 
+            body: JSON.stringify({ server: server }), 
+            headers: {
+                "Content-Type": "application/json",
+            },
+        })
+            .then(response => response.json())
+            .then(status => {
+                serverObj[server] = status;
+                localStorage.setItem('config', JSON.stringify(config));
+            })
+            .catch(err => {
+                serverObj[server] = { online: false };
+                localStorage.setItem('config', JSON.stringify(config));
+            });
+    });
+}
+
+async function loadVideos() {
+    const config = JSON.parse(localStorage.getItem('config'));
+    const response = await fetch('/api/videos', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+            channel: config.channel,
+            sort: "latest",
+            query: "",
+            page: currentPage,
+            perPage: perPage
+        })
+    });
+    const videos = await response.json();
+    renderVideos(videos);
+    currentPage++;
+}
+
+function renderVideos(videos) {
+    const grid = document.getElementById('video-grid');
+    videos.forEach(v => {
+        const card = document.createElement('div');
+        card.className = 'video-card';
+        card.innerHTML = `
+            <img src="${v.thumb}" alt="${v.title}">
+            <h4>${v.title}</h4>
+            <p>${v.channel} • ${v.duration}s</p>
+        `;
+        card.onclick = () => openPlayer(v.url);
+        grid.appendChild(card);
+    });
+}
+
+function openPlayer(videoUrl) {
+    const modal = document.getElementById('video-modal');
+    const player = document.getElementById('player');
+    // Using GET for the video tag src as it's the standard for streaming
+    player.src = `/api/stream?url=${encodeURIComponent(videoUrl)}`;
+    modal.style.display = 'block';
+}
+
+function closePlayer() {
+    const modal = document.getElementById('video-modal');
+    const player = document.getElementById('player');
+    player.pause();
+    player.src = "";
+    modal.style.display = 'none';
+}
+
+// UI Helpers
+function toggleDrawer(id) {
+    document.querySelectorAll('.drawer').forEach(d => d.classList.remove('open'));
+    document.getElementById(`drawer-${id}`).classList.add('open');
+    document.getElementById('overlay').style.display = 'block';
+}
+
+function closeDrawers() {
+    document.querySelectorAll('.drawer').forEach(d => d.classList.remove('open'));
+    document.getElementById('overlay').style.display = 'none';
+}
+
+// Infinite Scroll Observer
+const observer = new IntersectionObserver((entries) => {
+    if (entries[0].isIntersecting) loadVideos();
+}, { threshold: 1.0 });
+
+observer.observe(document.getElementById('sentinel'));
+
+// Init
+InitializeLocalStorage();
+loadVideos();

frontend/index.html

@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Hottub</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <header class="top-bar">
+        <div class="logo">Hottub</div>
+        <div class="actions">
+            <button onclick="toggleDrawer('settings')">Settings</button>
+            <button onclick="toggleDrawer('menu')" class="menu-btn">
+                <span></span><span></span><span></span>
+            </button>
+        </div>
+        <div class="search-container">
+            <input type="text" id="search-input" placeholder="Search videos..." oninput="handleSearch(this.value)">
+        </div>
+    </header>
+
+    <main id="video-grid" class="grid-container"></main>
+    <div id="sentinel"></div> <div id="drawer-menu" class="drawer"><h3>Menu</h3></div>
+    <div id="drawer-settings" class="drawer"><h3>Settings</h3></div>
+    <div id="overlay" onclick="closeDrawers()"></div>
+
+    <div id="video-modal" class="modal">
+        <div class="modal-content">
+            <span class="close" onclick="closePlayer()">&times;</span>
+            <video id="player" controls autoplay></video>
+        </div>
+    </div>
+
+    <script src="app.js"></script>
+</body>
+</html>

frontend/style.css

@@ -0,0 +1,30 @@
+:root { --bg: #0f0f0f; --text: #fff; --accent: #3d3d3d; }
+body { margin: 0; background: var(--bg); color: var(--text); font-family: sans-serif; overflow-x: hidden; }
+
+.top-bar { 
+    height: 60px; display: flex; justify-content: space-between; align-items: center;
+    padding: 0 20px; background: #202020; position: sticky; top: 0; z-index: 100;
+}
+
+.grid-container {
+    display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+    gap: 20px; padding: 20px;
+}
+
+.video-card { cursor: pointer; transition: transform 0.2s; }
+.video-card img { width: 100%; border-radius: 12px; }
+
+.drawer {
+    position: fixed; top: 0; right: -300px; width: 300px; height: 100%;
+    background: #1e1e1e; z-index: 1000; transition: 0.3s; padding: 20px;
+}
+.drawer.open { right: 0; }
+
+#overlay {
+    position: fixed; inset: 0; background: rgba(0,0,0,0.7);
+    display: none; z-index: 999;
+}
+
+.modal { display: none; position: fixed; inset: 0; background: #000; z-index: 2000; }
+.modal-content { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
+video { width: 80%; max-height: 80vh; }