vndangkhoa/kv-tube
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Compare commits

base: vndangkhoa:6c1f459cd6c459fc9563075af552eb850d4506af
Branches Tags
vndangkhoa:main
vndangkhoa:master
vndangkhoa:v4.0.0
vndangkhoa:v3.1.4
vndangkhoa:v3.1.3
vndangkhoa:v3.1.2
vndangkhoa:v3.1.1
vndangkhoa:v3.1
vndangkhoa:v3
vndangkhoa:v2.2
vndangkhoa:v2.1
vndangkhoa:v2.0
..
compare: vndangkhoa:eefc5120e6a5cbfedd5c1369d58d99cf05f18b35
Branches Tags
vndangkhoa:main
vndangkhoa:master
vndangkhoa:v4.0.0
vndangkhoa:v3.1.4
vndangkhoa:v3.1.3
vndangkhoa:v3.1.2
vndangkhoa:v3.1.1
vndangkhoa:v3.1
vndangkhoa:v3
vndangkhoa:v2.2
vndangkhoa:v2.1
vndangkhoa:v2.0

No commits in common. "6c1f459cd6c459fc9563075af552eb850d4506af" and "eefc5120e6a5cbfedd5c1369d58d99cf05f18b35" have entirely different histories.
6c1f459cd6 ... eefc5120e6

2613 changed files with 628363 additions and 9240 deletions
Show stats Expand all files Collapse all files

11
.dockerignore
View file

@ -1,11 +0,0 @@
.venv/
.venv_clean/
env/
__pycache__/
.git/
.DS_Store
*.pyc
*.pyo
*.pyd
.idea/
.vscode/

12
.env.example
View file

@ -1,12 +0,0 @@
# KV-Tube Environment Configuration
# Copy this file to .env and customize as needed
# Secret key for Flask sessions (required for production)
# Generate a secure key: python -c "import os; print(os.urandom(32).hex())"
SECRET_KEY=your-secure-secret-key-here
# Environment: development or production
FLASK_ENV=development
# Local video directory (optional)
KVTUBE_VIDEO_DIR=./videos

68
.github/workflows/docker-publish.yml vendored
View file

@ -1,68 +0,0 @@
name: Docker Build & Push
on:
push:
tags:
- 'v*'
env:
# Use docker.io for Docker Hub if empty
REGISTRY: docker.io
# github.repository as <account>/<repo>
IMAGE_NAME: ${{ github.repository }}
jobs:
build:
runs-on: ubuntu-latest
permissions:
contents: read
packages: write
steps:
- name: Checkout repository
uses: actions/checkout@v4
- name: Set up QEMU
uses: docker/setup-qemu-action@v3
- name: Set up Docker Buildx
uses: docker/setup-buildx-action@v3
- name: Log into Docker Hub
if: github.event_name != 'pull_request'
uses: docker/login-action@v3
with:
registry: ${{ env.REGISTRY }}
username: ${{ secrets.DOCKER_USERNAME }}
password: ${{ secrets.DOCKER_PASSWORD }}
- name: Log into Forgejo Registry
if: github.event_name != 'pull_request'
uses: docker/login-action@v3
with:
registry: git.khoavo.myds.me
username: ${{ secrets.FORGEJO_USERNAME }}
password: ${{ secrets.FORGEJO_PASSWORD }}
- name: Extract Docker metadata
id: meta
uses: docker/metadata-action@v5
with:
images: |
${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}
git.khoavo.myds.me/${{ github.repository }}
tags: |
type=semver,pattern={{version}}
type=raw,value=latest,enable=${{ github.ref == 'refs/tags/v*' }}
- name: Build and push Docker image
id: build-and-push
uses: docker/build-push-action@v5
with:
context: .
push: ${{ github.event_name != 'pull_request' }}
tags: ${{ steps.meta.outputs.tags }}
labels: ${{ steps.meta.outputs.labels }}
platforms: linux/amd64
cache-from: type=gha
cache-to: type=gha,mode=max

12
.gitignore vendored
View file

@ -1,12 +0,0 @@
.DS_Store
__pycache__/
*.pyc
venv/
.venv/
.venv_clean/
.env
data/
videos/
*.db
server.log
.ruff_cache/

0
API_DOCUMENTATION.md Executable file → Normal file
View file

64
Dockerfile Executable file → Normal file
View file

@ -1,31 +1,33 @@
# Build stage
FROM python:3.11-slim
WORKDIR /app
# Install system dependencies (ffmpeg is critical for yt-dlp)
RUN apt-get update && apt-get install -y --no-install-recommends \
ffmpeg \
curl \
&& rm -rf /var/lib/apt/lists/*
# Install Python dependencies
COPY requirements.txt .
RUN pip install --no-cache-dir -r requirements.txt
# Copy application code
COPY . .
# Environment variables
ENV PYTHONUNBUFFERED=1
ENV FLASK_APP=wsgi.py
ENV FLASK_ENV=production
# Create directories for data persistence
RUN mkdir -p /app/videos /app/data
# Expose port
EXPOSE 5000
# Run with Gunicorn
CMD ["gunicorn", "--bind", "0.0.0.0:5000", "--workers", "4", "--threads", "2", "--timeout", "120", "wsgi:app"]
# Build stage
FROM python:3.11-slim
WORKDIR /app
# Install system dependencies (ffmpeg is critical for yt-dlp)
RUN apt-get update && apt-get install -y --no-install-recommends \
ffmpeg \
curl \
&& rm -rf /var/lib/apt/lists/*
# Install Python dependencies
COPY requirements.txt .
RUN pip install --no-cache-dir -r requirements.txt
# Copy application code
COPY . .
# Environment variables
ENV PYTHONUNBUFFERED=1
ENV FLASK_APP=wsgi.py
ENV FLASK_ENV=production
# Create directories for data persistence
RUN mkdir -p /app/videos /app/data
# Expose port
EXPOSE 5000
# Run with Entrypoint (handles updates)
COPY entrypoint.sh /app/entrypoint.sh
RUN chmod +x /app/entrypoint.sh
CMD ["/app/entrypoint.sh"]

193
README.md Executable file → Normal file
View file

@ -1,110 +1,83 @@
# KV-Tube
**A Distraction-Free, Privacy-Focused YouTube Client**
> [!NOTE]
> Designed for a premium, cinematic viewing experience.
KV-Tube removes the clutter and noise of modern YouTube, focusing purely on the content you love. It strictly enforces a horizontal-first video policy, aggressively filtering out Shorts and vertical "TikTok-style" content to keep your feed clean and high-quality.
### 🚀 **Key Features (v2.0)**
* **🚫 Ads-Free & Privacy-First**: Watch without interruptions. No Google account required. All watch history is stored locally on your device (or self-hosted DB).
* **📺 Horizontal-First Experience**: Say goodbye to "Shorts". The feed only displays horizontal, cinematic content.
* **🔍 Specialized Feeds**:
* **Tech & AI**: Clean feed for gadget reviews and deep dives.
* **Trending**: See what's popular across major categories (Music, Gaming, News).
* **Suggested for You**: Personalized recommendations based on your local watch history.
* **🧠 Local AI Integration**:
* **Auto-Captions**: Automatically enables English subtitles.
* **AI Summary**: (Optional) Generate quick text summaries of videos locally.
* **⚡ High Performance**: Optimized for speed with smart caching and rate-limit handling.
* **📱 PWA Ready**: Install on your phone or tablet with a responsive, app-like interface.
---
## 🛠️ Deployment
You can run KV-Tube easily using Docker (recommended for NAS/Servers) or directly with Python.
### Option A: Docker Compose (Recommended)
Ideal for Synology NAS, Unraid, or casual servers.
1. Create a folder `kv-tube` and add the `docker-compose.yml` file.
2. Run the container:
```bash
docker-compose up -d
```
3. Access the app at: **http://localhost:5011**
**docker-compose.yml**:
```yaml
version: '3.8'
services:
kv-tube:
image: vndangkhoa/kv-tube:latest
container_name: kv-tube
restart: unless-stopped
ports:
- "5011:5000"
volumes:
- ./data:/app/data
environment:
- PYTHONUNBUFFERED=1
- FLASK_ENV=production
```
### Option B: Local Development (Python)
For developers or running locally on a PC.
1. **Clone & Install**:
```bash
git clone https://github.com/vndangkhoa/kv-tube.git
cd kv-tube
python -m venv .venv
# Windows
.venv\Scripts\activate
# Linux/Mac
source .venv/bin/activate
pip install -r requirements.txt
```
2. **Run**:
```bash
python kv_server.py
```
3. Access the app at: **http://localhost:5002**
---
## ⚙️ Configuration
KV-Tube is designed to be "Zero-Config", but you can customize it via Environment Variables (in `.env` or Docker).
| Variable | Default | Description |
| :--- | :--- | :--- |
| `FLASK_ENV` | `production` | Set to `development` for debug mode. |
| `KVTUBE_DATA_DIR` | `./data` | Location for the SQLite database. |
| `KVTUBE_VIDEO_DIR` | `./videos` | (Optional) Location for downloaded videos. |
| `SECRET_KEY` | *(Auto)* | Session security key. Set manually for persistence. |
---
## 🔌 API Endpoints
KV-Tube exposes a RESTful API for its frontend.
| Endpoint | Method | Description |
| :--- | :--- | :--- |
| `/api/search` | `GET` | Search for videos. |
| `/api/stream_info` | `GET` | Get raw stream URLs (HLS/MP4). |
| `/api/suggested` | `GET` | Get recommendations based on history. |
| `/api/download` | `GET` | Get direct download link for a video. |
| `/api/history` | `GET` | Retrieve local watch history. |
---
## 📜 License
Proprietary / Personal Use.
Created by **Khoa N.D**
# KV-Tube v3.0
> A lightweight, privacy-focused YouTube frontend web application with AI-powered features.
KV-Tube removes distractions, tracking, and ads from the YouTube watching experience. It provides a clean interface to search, watch, and discover related content without needing a Google account.
## 🚀 Key Features (v3)
- **Privacy First**: No tracking, no ads.
- **Clean Interface**: Distraction-free watching experience.
- **Efficient Streaming**: Direct video stream extraction using `yt-dlp`.
- **AI Summary (Experimental)**: Generate concise summaries of videos (Currently disabled due to upstream rate limits).
- **Multi-Language**: Support for English and Vietnamese (UI & Content).
- **Auto-Update**: Includes `update_deps.py` to easily keep core fetching tools up-to-date.
## 🛠️ Architecture Data Flow
```mermaid
graph TD
User[User Browser]
Server[KV-Tube Server (Flask)]
YTDLP[yt-dlp Core]
YTFetcher[YTFetcher Lib]
YouTube[YouTube V3 API / HTML]
User -- "1. Search / Watch Request" --> Server
Server -- "2. Extract Video Metadata" --> YTDLP
YTDLP -- "3. Network Requests (Cookies Optional)" --> YouTube
YouTube -- "4. Raw Video/Audio Streams" --> YTDLP
YTDLP -- "5. Stream URL / Metadata" --> Server
subgraph Transcript System [Transcript System (Deferred)]
Server -.-> YTFetcher
YTFetcher -.-> YouTube
YTFetcher -- "No Transcript (429)" -.-> Server
end
Server -- "6. Render HTML / Stream Proxy" --> User
```
## 🔧 Installation & Usage
### Prerequisites
- Python 3.10+
- Git
- Valid `cookies.txt` (Optional, for bypassing age-restrictions or rate limits)
### Local Setup
1. Clone the repository:
```bash
git clone https://git.khoavo.myds.me/vndangkhoa/kv-tube.git
cd kv-tube
```
2. Install dependencies:
```bash
pip install -r requirements.txt
```
3. Run the application:
```bash
python wsgi.py
```
4. Access at `http://localhost:5002`
### Docker Deployment (Linux/AMD64)
Built for stability and ease of use.
```bash
docker pull vndangkhoa/kv-tube:latest
docker run -d -p 5002:5002 -v $(pwd)/cookies.txt:/app/cookies.txt vndangkhoa/kv-tube:latest
```
## 📦 Updates
- **v3.0**: Major release.
- Full modularization of backend routes.
- Integrated `ytfetcher` for specialized fetching.
- Added manual dependency update script (`update_deps.py`).
- Enhanced error handling for upstream rate limits.
- Docker `linux/amd64` support verified.
---
*Developed by Khoa Vo*

0
USER_GUIDE.md Executable file → Normal file
View file

BIN
__pycache__/config.cpython-312.pyc Normal file
View file

Binary file not shown.

317
app/__init__.py Executable file → Normal file
View file

@ -1,155 +1,162 @@
"""
KV-Tube App Package
Flask application factory pattern
"""
from flask import Flask
import os
import sqlite3
import logging
# Setup logging
logging.basicConfig(level=logging.INFO)
logger = logging.getLogger(__name__)
# Database configuration
DATA_DIR = os.environ.get("KVTUBE_DATA_DIR", "data")
DB_NAME = os.path.join(DATA_DIR, "kvtube.db")
def init_db():
"""Initialize the database with required tables."""
# Ensure data directory exists
if not os.path.exists(DATA_DIR):
os.makedirs(DATA_DIR)
conn = sqlite3.connect(DB_NAME)
c = conn.cursor()
# Users Table
c.execute("""CREATE TABLE IF NOT EXISTS users (
id INTEGER PRIMARY KEY AUTOINCREMENT,
username TEXT UNIQUE NOT NULL,
password TEXT NOT NULL
)""")
# User Videos (history/saved)
c.execute("""CREATE TABLE IF NOT EXISTS user_videos (
id INTEGER PRIMARY KEY AUTOINCREMENT,
user_id INTEGER,
video_id TEXT,
title TEXT,
thumbnail TEXT,
type TEXT,
timestamp DATETIME DEFAULT CURRENT_TIMESTAMP,
FOREIGN KEY(user_id) REFERENCES users(id)
)""")
# Video Cache
c.execute("""CREATE TABLE IF NOT EXISTS video_cache (
video_id TEXT PRIMARY KEY,
data TEXT,
expires_at DATETIME
)""")
conn.commit()
conn.close()
logger.info("Database initialized")
def create_app(config_name=None):
"""
Application factory for creating Flask app instances.
Args:
config_name: Configuration name ('development', 'production', or None for default)
Returns:
Flask application instance
"""
app = Flask(__name__,
template_folder='../templates',
static_folder='../static')
# Load configuration
app.secret_key = "super_secret_key_change_this" # Required for sessions
# Fix for OMP: Error #15
os.environ["KMP_DUPLICATE_LIB_OK"] = "TRUE"
# Initialize database
init_db()
# Register Jinja filters
register_filters(app)
# Register Blueprints
register_blueprints(app)
logger.info("KV-Tube app created successfully")
return app
def register_filters(app):
"""Register custom Jinja2 template filters."""
@app.template_filter("format_views")
def format_views(views):
if not views:
return "0"
try:
num = int(views)
if num >= 1000000:
return f"{num / 1000000:.1f}M"
if num >= 1000:
return f"{num / 1000:.0f}K"
return f"{num:,}"
except (ValueError, TypeError) as e:
logger.debug(f"View formatting failed: {e}")
return str(views)
@app.template_filter("format_date")
def format_date(value):
if not value:
return "Recently"
from datetime import datetime
try:
# Handle YYYYMMDD
if len(str(value)) == 8 and str(value).isdigit():
dt = datetime.strptime(str(value), "%Y%m%d")
# Handle Timestamp
elif isinstance(value, (int, float)):
dt = datetime.fromtimestamp(value)
# Handle YYYY-MM-DD
else:
try:
dt = datetime.strptime(str(value), "%Y-%m-%d")
except ValueError:
return str(value)
now = datetime.now()
diff = now - dt
if diff.days > 365:
return f"{diff.days // 365} years ago"
if diff.days > 30:
return f"{diff.days // 30} months ago"
if diff.days > 0:
return f"{diff.days} days ago"
if diff.seconds > 3600:
return f"{diff.seconds // 3600} hours ago"
return "Just now"
except Exception as e:
logger.debug(f"Date formatting failed: {e}")
return str(value)
def register_blueprints(app):
"""Register all application blueprints."""
from app.routes import pages_bp, api_bp, streaming_bp
app.register_blueprint(pages_bp)
app.register_blueprint(api_bp)
app.register_blueprint(streaming_bp)
logger.info("Blueprints registered: pages, api, streaming")
"""
KV-Tube App Package
Flask application factory pattern
"""
from flask import Flask
import os
import sqlite3
import logging
# Setup logging
logging.basicConfig(level=logging.INFO)
logger = logging.getLogger(__name__)
# Database configuration
DATA_DIR = os.environ.get("KVTUBE_DATA_DIR", "data")
DB_NAME = os.path.join(DATA_DIR, "kvtube.db")
def init_db():
"""Initialize the database with required tables."""
# Ensure data directory exists
if not os.path.exists(DATA_DIR):
os.makedirs(DATA_DIR)
conn = sqlite3.connect(DB_NAME)
c = conn.cursor()
# Users Table
c.execute("""CREATE TABLE IF NOT EXISTS users (
id INTEGER PRIMARY KEY AUTOINCREMENT,
username TEXT UNIQUE NOT NULL,
password TEXT NOT NULL
)""")
# User Videos (history/saved)
c.execute("""CREATE TABLE IF NOT EXISTS user_videos (
id INTEGER PRIMARY KEY AUTOINCREMENT,
user_id INTEGER,
video_id TEXT,
title TEXT,
thumbnail TEXT,
type TEXT,
timestamp DATETIME DEFAULT CURRENT_TIMESTAMP,
FOREIGN KEY(user_id) REFERENCES users(id)
)""")
# Video Cache
c.execute("""CREATE TABLE IF NOT EXISTS video_cache (
video_id TEXT PRIMARY KEY,
data TEXT,
expires_at DATETIME
)""")
conn.commit()
conn.close()
logger.info("Database initialized")
def create_app(config_name=None):
"""
Application factory for creating Flask app instances.
Args:
config_name: Configuration name ('development', 'production', or None for default)
Returns:
Flask application instance
"""
app = Flask(__name__,
template_folder='../templates',
static_folder='../static')
# Load configuration
app.secret_key = "super_secret_key_change_this" # Required for sessions
# Fix for OMP: Error #15
os.environ["KMP_DUPLICATE_LIB_OK"] = "TRUE"
# Initialize database
init_db()
# Register Jinja filters
register_filters(app)
# Register Blueprints
register_blueprints(app)
# Start Background Cache Warmer (x5 Speedup)
try:
from app.routes.api import start_background_warmer
start_background_warmer()
except Exception as e:
logger.warning(f"Failed to start background warmer: {e}")
logger.info("KV-Tube app created successfully")
return app
def register_filters(app):
"""Register custom Jinja2 template filters."""
@app.template_filter("format_views")
def format_views(views):
if not views:
return "0"
try:
num = int(views)
if num >= 1000000:
return f"{num / 1000000:.1f}M"
if num >= 1000:
return f"{num / 1000:.0f}K"
return f"{num:,}"
except (ValueError, TypeError) as e:
logger.debug(f"View formatting failed: {e}")
return str(views)
@app.template_filter("format_date")
def format_date(value):
if not value:
return "Recently"
from datetime import datetime
try:
# Handle YYYYMMDD
if len(str(value)) == 8 and str(value).isdigit():
dt = datetime.strptime(str(value), "%Y%m%d")
# Handle Timestamp
elif isinstance(value, (int, float)):
dt = datetime.fromtimestamp(value)
# Handle YYYY-MM-DD
else:
try:
dt = datetime.strptime(str(value), "%Y-%m-%d")
except ValueError:
return str(value)
now = datetime.now()
diff = now - dt
if diff.days > 365:
return f"{diff.days // 365} years ago"
if diff.days > 30:
return f"{diff.days // 30} months ago"
if diff.days > 0:
return f"{diff.days} days ago"
if diff.seconds > 3600:
return f"{diff.seconds // 3600} hours ago"
return "Just now"
except Exception as e:
logger.debug(f"Date formatting failed: {e}")
return str(value)
def register_blueprints(app):
"""Register all application blueprints."""
from app.routes import pages_bp, api_bp, streaming_bp
app.register_blueprint(pages_bp)
app.register_blueprint(api_bp)
app.register_blueprint(streaming_bp)
logger.info("Blueprints registered: pages, api, streaming")

BIN
app/__pycache__/__init__.cpython-312.pyc Normal file
View file

Binary file not shown.

18
app/routes/__init__.py Executable file → Normal file
View file

@ -1,9 +1,9 @@
"""
KV-Tube Routes Package
Exports all Blueprints for registration
"""
from app.routes.pages import pages_bp
from app.routes.api import api_bp
from app.routes.streaming import streaming_bp
__all__ = ['pages_bp', 'api_bp', 'streaming_bp']
"""
KV-Tube Routes Package
Exports all Blueprints for registration
"""
from app.routes.pages import pages_bp
from app.routes.api import api_bp
from app.routes.streaming import streaming_bp
__all__ = ['pages_bp', 'api_bp', 'streaming_bp']

BIN
app/routes/__pycache__/__init__.cpython-312.pyc Normal file
View file

Binary file not shown.

BIN
app/routes/__pycache__/api.cpython-312.pyc Normal file
View file

Binary file not shown.

BIN
app/routes/__pycache__/pages.cpython-312.pyc Normal file
View file

Binary file not shown.

BIN
app/routes/__pycache__/streaming.cpython-312.pyc Normal file
View file

Binary file not shown.

1181
app/routes/api.py Executable file → Normal file
View file

File diff suppressed because it is too large Load diff

0
app/routes/pages.py Executable file → Normal file
View file

94
app/routes/streaming.py Executable file → Normal file
View file

@ -29,18 +29,44 @@ def stream_local(filename):
return send_from_directory(VIDEO_DIR, filename)
@streaming_bp.route("/video_proxy")
def add_cors_headers(response):
"""Add CORS headers to allow video playback from any origin."""
response.headers["Access-Control-Allow-Origin"] = "*"
response.headers["Access-Control-Allow-Methods"] = "GET, OPTIONS"
response.headers["Access-Control-Allow-Headers"] = "Range, Content-Type"
response.headers["Access-Control-Expose-Headers"] = "Content-Length, Content-Range, Accept-Ranges"
return response
@streaming_bp.route("/video_proxy", methods=["GET", "OPTIONS"])
def video_proxy():
"""Proxy video streams with HLS manifest rewriting."""
# Handle CORS preflight
if request.method == "OPTIONS":
response = Response("")
return add_cors_headers(response)
url = request.args.get("url")
if not url:
return "No URL provided", 400
# Forward headers to mimic browser and support seeking
headers = {
"User-Agent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/136.0.0.0 Safari/537.36",
# "Referer": "https://www.youtube.com/", # Removed to test if it fixes 403
"User-Agent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36",
"Referer": "https://www.youtube.com/",
"Origin": "https://www.youtube.com",
"Accept": "*/*",
"Accept-Language": "en-US,en;q=0.9",
"Sec-Fetch-Dest": "empty",
"Sec-Fetch-Mode": "cors",
"Sec-Fetch-Site": "cross-site",
}
# Override with propagated headers (h_*)
for key, value in request.args.items():
if key.startswith("h_"):
header_name = key[2:] # Remove 'h_' prefix
headers[header_name] = value
# Support Range requests (scrubbing)
range_header = request.headers.get("Range")
@ -48,47 +74,70 @@ def video_proxy():
headers["Range"] = range_header
try:
logger.info(f"Proxying URL: {url}")
# logger.info(f"Proxy Request Headers: {headers}")
logger.info(f"Proxying URL: {url[:100]}...")
req = requests.get(url, headers=headers, stream=True, timeout=30)
logger.info(f"Upstream Status: {req.status_code}")
if req.status_code != 200:
logger.error(f"Upstream Error Body: {req.text[:500]}")
logger.info(f"Upstream Status: {req.status_code}, Content-Type: {req.headers.get('content-type', 'unknown')}")
if req.status_code != 200 and req.status_code != 206:
logger.error(f"Upstream Error: {req.status_code}")
# Handle HLS (M3U8) Rewriting - CRITICAL for 1080p+ and proper sync
content_type = req.headers.get("content-type", "").lower()
url_path = url.split("?")[0]
# Improved manifest detection - YouTube may send text/plain or octet-stream
is_manifest = (
url_path.endswith(".m3u8")
or "application/x-mpegurl" in content_type
or "application/vnd.apple.mpegurl" in content_type
or "mpegurl" in content_type
or "m3u8" in url_path.lower()
or ("/playlist/" in url.lower() and "index.m3u8" in url.lower())
)
logger.info(f"Is Manifest: {is_manifest}, Status: {req.status_code}")
if is_manifest and req.status_code == 200:
# Handle 200 and 206 (partial content) responses for manifests
if is_manifest and req.status_code in [200, 206]:
content = req.text
base_url = url.rsplit("/", 1)[0]
new_lines = []
logger.info(f"Rewriting manifest with {len(content.splitlines())} lines")
for line in content.splitlines():
if line.strip() and not line.startswith("#"):
# If relative, make absolute
if not line.startswith("http"):
full_url = f"{base_url}/{line}"
line_stripped = line.strip()
if line_stripped and not line_stripped.startswith("#"):
# URL line - needs rewriting
if not line_stripped.startswith("http"):
# Relative URL - make absolute
full_url = f"{base_url}/{line_stripped}"
else:
full_url = line
# Absolute URL
full_url = line_stripped
from urllib.parse import quote
quoted_url = quote(full_url, safe="")
new_lines.append(f"/video_proxy?url={quoted_url}")
new_line = f"/video_proxy?url={quoted_url}"
# Propagate existing h_* params to segments
query_string = request.query_string.decode("utf-8")
h_params = [p for p in query_string.split("&") if p.startswith("h_")]
if h_params:
param_str = "&".join(h_params)
new_line += f"&{param_str}"
new_lines.append(new_line)
else:
new_lines.append(line)
return Response(
"\n".join(new_lines), content_type="application/vnd.apple.mpegurl"
rewritten_content = "\n".join(new_lines)
logger.info(f"Manifest rewritten successfully")
response = Response(
rewritten_content, content_type="application/vnd.apple.mpegurl"
)
return add_cors_headers(response)
# Standard Stream Proxy (Binary)
# Standard Stream Proxy (Binary) - for video segments and other files
excluded_headers = [
"content-encoding",
"content-length",
@ -101,12 +150,15 @@ def video_proxy():
if name.lower() not in excluded_headers
]
return Response(
response = Response(
stream_with_context(req.iter_content(chunk_size=8192)),
status=req.status_code,
headers=response_headers,
content_type=req.headers.get("content-type"),
)
return add_cors_headers(response)
except Exception as e:
logger.error(f"Proxy Error: {e}")
return str(e), 500

2
app/services/__init__.py Executable file → Normal file
View file

@ -1 +1 @@
"""KV-Tube Services Package"""
"""KV-Tube Services Package"""

BIN
app/services/__pycache__/__init__.cpython-312.pyc Normal file
View file

Binary file not shown.

BIN
app/services/__pycache__/gemini_summarizer.cpython-312.pyc Normal file
View file

Binary file not shown.

BIN
app/services/__pycache__/loader_to.cpython-312.pyc Normal file
View file

Binary file not shown.

BIN
app/services/__pycache__/settings.cpython-312.pyc Normal file
View file

Binary file not shown.

BIN
app/services/__pycache__/summarizer.cpython-312.pyc Normal file
View file

Binary file not shown.

BIN
app/services/__pycache__/youtube.cpython-312.pyc Normal file
View file

Binary file not shown.

434
app/services/cache.py Executable file → Normal file
View file

@ -1,217 +1,217 @@
"""
Cache Service Module
SQLite-based caching with connection pooling
"""
import sqlite3
import json
import time
import threading
import logging
from typing import Optional, Any, Dict
from contextlib import contextmanager
from config import Config
logger = logging.getLogger(__name__)
class ConnectionPool:
"""Thread-safe SQLite connection pool"""
def __init__(self, db_path: str, max_connections: int = 5):
self.db_path = db_path
self.max_connections = max_connections
self._local = threading.local()
self._lock = threading.Lock()
self._init_db()
def _init_db(self):
"""Initialize database tables"""
conn = sqlite3.connect(self.db_path)
c = conn.cursor()
# Users table
c.execute('''CREATE TABLE IF NOT EXISTS users (
id INTEGER PRIMARY KEY AUTOINCREMENT,
username TEXT UNIQUE NOT NULL,
password TEXT NOT NULL
)''')
# User videos (history/saved)
c.execute('''CREATE TABLE IF NOT EXISTS user_videos (
id INTEGER PRIMARY KEY AUTOINCREMENT,
user_id INTEGER,
video_id TEXT,
title TEXT,
thumbnail TEXT,
type TEXT,
timestamp DATETIME DEFAULT CURRENT_TIMESTAMP,
FOREIGN KEY(user_id) REFERENCES users(id)
)''')
# Video cache
c.execute('''CREATE TABLE IF NOT EXISTS video_cache (
video_id TEXT PRIMARY KEY,
data TEXT,
expires_at REAL
)''')
conn.commit()
conn.close()
def get_connection(self) -> sqlite3.Connection:
"""Get a thread-local database connection"""
if not hasattr(self._local, 'connection') or self._local.connection is None:
self._local.connection = sqlite3.connect(self.db_path)
self._local.connection.row_factory = sqlite3.Row
return self._local.connection
@contextmanager
def connection(self):
"""Context manager for database connections"""
conn = self.get_connection()
try:
yield conn
conn.commit()
except Exception as e:
conn.rollback()
logger.error(f"Database error: {e}")
raise
def close(self):
"""Close the thread-local connection"""
if hasattr(self._local, 'connection') and self._local.connection:
self._local.connection.close()
self._local.connection = None
# Global connection pool
_pool: Optional[ConnectionPool] = None
def get_pool() -> ConnectionPool:
"""Get or create the global connection pool"""
global _pool
if _pool is None:
_pool = ConnectionPool(Config.DB_NAME)
return _pool
def get_db_connection() -> sqlite3.Connection:
"""Get a database connection - backward compatibility"""
return get_pool().get_connection()
class CacheService:
"""Service for caching video metadata"""
@staticmethod
def get_video_cache(video_id: str) -> Optional[Dict[str, Any]]:
"""
Get cached video data if not expired
Args:
video_id: YouTube video ID
Returns:
Cached data dict or None if not found/expired
"""
try:
pool = get_pool()
with pool.connection() as conn:
row = conn.execute(
'SELECT data, expires_at FROM video_cache WHERE video_id = ?',
(video_id,)
).fetchone()
if row:
expires_at = float(row['expires_at'])
if time.time() < expires_at:
return json.loads(row['data'])
else:
# Expired, clean it up
conn.execute('DELETE FROM video_cache WHERE video_id = ?', (video_id,))
return None
except Exception as e:
logger.error(f"Cache get error for {video_id}: {e}")
return None
@staticmethod
def set_video_cache(video_id: str, data: Dict[str, Any], ttl: int = None) -> bool:
"""
Cache video data
Args:
video_id: YouTube video ID
data: Data to cache
ttl: Time to live in seconds (default from config)
Returns:
True if cached successfully
"""
try:
if ttl is None:
ttl = Config.CACHE_VIDEO_TTL
expires_at = time.time() + ttl
pool = get_pool()
with pool.connection() as conn:
conn.execute(
'INSERT OR REPLACE INTO video_cache (video_id, data, expires_at) VALUES (?, ?, ?)',
(video_id, json.dumps(data), expires_at)
)
return True
except Exception as e:
logger.error(f"Cache set error for {video_id}: {e}")
return False
@staticmethod
def clear_expired():
"""Remove all expired cache entries"""
try:
pool = get_pool()
with pool.connection() as conn:
conn.execute('DELETE FROM video_cache WHERE expires_at < ?', (time.time(),))
except Exception as e:
logger.error(f"Cache cleanup error: {e}")
class HistoryService:
"""Service for user video history"""
@staticmethod
def get_history(limit: int = 50) -> list:
"""Get watch history"""
try:
pool = get_pool()
with pool.connection() as conn:
rows = conn.execute(
'SELECT video_id as id, title, thumbnail FROM user_videos WHERE type = "history" ORDER BY timestamp DESC LIMIT ?',
(limit,)
).fetchall()
return [dict(row) for row in rows]
except Exception as e:
logger.error(f"History get error: {e}")
return []
@staticmethod
def add_to_history(video_id: str, title: str, thumbnail: str) -> bool:
"""Add a video to history"""
try:
pool = get_pool()
with pool.connection() as conn:
conn.execute(
'INSERT INTO user_videos (user_id, video_id, title, thumbnail, type) VALUES (?, ?, ?, ?, ?)',
(1, video_id, title, thumbnail, 'history')
)
return True
except Exception as e:
logger.error(f"History add error: {e}")
return False
"""
Cache Service Module
SQLite-based caching with connection pooling
"""
import sqlite3
import json
import time
import threading
import logging
from typing import Optional, Any, Dict
from contextlib import contextmanager
from config import Config
logger = logging.getLogger(__name__)
class ConnectionPool:
"""Thread-safe SQLite connection pool"""
def __init__(self, db_path: str, max_connections: int = 5):
self.db_path = db_path
self.max_connections = max_connections
self._local = threading.local()
self._lock = threading.Lock()
self._init_db()
def _init_db(self):
"""Initialize database tables"""
conn = sqlite3.connect(self.db_path)
c = conn.cursor()
# Users table
c.execute('''CREATE TABLE IF NOT EXISTS users (
id INTEGER PRIMARY KEY AUTOINCREMENT,
username TEXT UNIQUE NOT NULL,
password TEXT NOT NULL
)''')
# User videos (history/saved)
c.execute('''CREATE TABLE IF NOT EXISTS user_videos (
id INTEGER PRIMARY KEY AUTOINCREMENT,
user_id INTEGER,
video_id TEXT,
title TEXT,
thumbnail TEXT,
type TEXT,
timestamp DATETIME DEFAULT CURRENT_TIMESTAMP,
FOREIGN KEY(user_id) REFERENCES users(id)
)''')
# Video cache
c.execute('''CREATE TABLE IF NOT EXISTS video_cache (
video_id TEXT PRIMARY KEY,
data TEXT,
expires_at REAL
)''')
conn.commit()
conn.close()
def get_connection(self) -> sqlite3.Connection:
"""Get a thread-local database connection"""
if not hasattr(self._local, 'connection') or self._local.connection is None:
self._local.connection = sqlite3.connect(self.db_path)
self._local.connection.row_factory = sqlite3.Row
return self._local.connection
@contextmanager
def connection(self):
"""Context manager for database connections"""
conn = self.get_connection()
try:
yield conn
conn.commit()
except Exception as e:
conn.rollback()
logger.error(f"Database error: {e}")
raise
def close(self):
"""Close the thread-local connection"""
if hasattr(self._local, 'connection') and self._local.connection:
self._local.connection.close()
self._local.connection = None
# Global connection pool
_pool: Optional[ConnectionPool] = None
def get_pool() -> ConnectionPool:
"""Get or create the global connection pool"""
global _pool
if _pool is None:
_pool = ConnectionPool(Config.DB_NAME)
return _pool
def get_db_connection() -> sqlite3.Connection:
"""Get a database connection - backward compatibility"""
return get_pool().get_connection()
class CacheService:
"""Service for caching video metadata"""
@staticmethod
def get_video_cache(video_id: str) -> Optional[Dict[str, Any]]:
"""
Get cached video data if not expired
Args:
video_id: YouTube video ID
Returns:
Cached data dict or None if not found/expired
"""
try:
pool = get_pool()
with pool.connection() as conn:
row = conn.execute(
'SELECT data, expires_at FROM video_cache WHERE video_id = ?',
(video_id,)
).fetchone()
if row:
expires_at = float(row['expires_at'])
if time.time() < expires_at:
return json.loads(row['data'])
else:
# Expired, clean it up
conn.execute('DELETE FROM video_cache WHERE video_id = ?', (video_id,))
return None
except Exception as e:
logger.error(f"Cache get error for {video_id}: {e}")
return None
@staticmethod
def set_video_cache(video_id: str, data: Dict[str, Any], ttl: int = None) -> bool:
"""
Cache video data
Args:
video_id: YouTube video ID
data: Data to cache
ttl: Time to live in seconds (default from config)
Returns:
True if cached successfully
"""
try:
if ttl is None:
ttl = Config.CACHE_VIDEO_TTL
expires_at = time.time() + ttl
pool = get_pool()
with pool.connection() as conn:
conn.execute(
'INSERT OR REPLACE INTO video_cache (video_id, data, expires_at) VALUES (?, ?, ?)',
(video_id, json.dumps(data), expires_at)
)
return True
except Exception as e:
logger.error(f"Cache set error for {video_id}: {e}")
return False
@staticmethod
def clear_expired():
"""Remove all expired cache entries"""
try:
pool = get_pool()
with pool.connection() as conn:
conn.execute('DELETE FROM video_cache WHERE expires_at < ?', (time.time(),))
except Exception as e:
logger.error(f"Cache cleanup error: {e}")
class HistoryService:
"""Service for user video history"""
@staticmethod
def get_history(limit: int = 50) -> list:
"""Get watch history"""
try:
pool = get_pool()
with pool.connection() as conn:
rows = conn.execute(
'SELECT video_id as id, title, thumbnail FROM user_videos WHERE type = "history" ORDER BY timestamp DESC LIMIT ?',
(limit,)
).fetchall()
return [dict(row) for row in rows]
except Exception as e:
logger.error(f"History get error: {e}")
return []
@staticmethod
def add_to_history(video_id: str, title: str, thumbnail: str) -> bool:
"""Add a video to history"""
try:
pool = get_pool()
with pool.connection() as conn:
conn.execute(
'INSERT INTO user_videos (user_id, video_id, title, thumbnail, type) VALUES (?, ?, ?, ?, ?)',
(1, video_id, title, thumbnail, 'history')
)
return True
except Exception as e:
logger.error(f"History add error: {e}")
return False

135
app/services/gemini_summarizer.py Normal file
View file

@ -0,0 +1,135 @@
"""
AI-powered video summarizer using Google Gemini.
"""
import os
import logging
import base64
from typing import Optional
logger = logging.getLogger(__name__)
# Obfuscated API key - encoded with app-specific salt
# This prevents casual copying but is not cryptographically secure
_OBFUSCATED_KEY = "QklqYVN5RG9yLWpsdmhtMEVGVkxnV3F4TllFR0MyR21oQUY3Y3Rv"
_APP_SALT = "KV-Tube-2026"
def _decode_api_key() -> str:
"""Decode the obfuscated API key. Only works with correct app context."""
try:
# Decode base64
decoded = base64.b64decode(_OBFUSCATED_KEY).decode('utf-8')
# Remove prefix added during encoding
if decoded.startswith("Bij"):
return "AI" + decoded[3:] # Reconstruct original key
return decoded
except:
return ""
# Get API key: prefer environment variable, fall back to obfuscated default
GEMINI_API_KEY = os.environ.get("GEMINI_API_KEY", "") or _decode_api_key()
def summarize_with_gemini(transcript: str, video_title: str = "") -> Optional[str]:
"""
Summarize video transcript using Google Gemini AI.
Args:
transcript: The video transcript text
video_title: Optional video title for context
Returns:
AI-generated summary or None if failed
"""
if not GEMINI_API_KEY:
logger.warning("GEMINI_API_KEY not set, falling back to TextRank")
return None
try:
logger.info(f"Importing google.generativeai... Key len: {len(GEMINI_API_KEY)}")
import google.generativeai as genai
genai.configure(api_key=GEMINI_API_KEY)
logger.info("Gemini configured. Creating model...")
model = genai.GenerativeModel('gemini-1.5-flash')
# Limit transcript to avoid token limits
max_chars = 8000
if len(transcript) > max_chars:
transcript = transcript[:max_chars] + "..."
logger.info(f"Generating summary content... Transcript len: {len(transcript)}")
# Create prompt for summarization
prompt = f"""You are a helpful AI assistant. Summarize the following video transcript in 2-3 concise sentences.
Focus on the main topic and key points. If it's a music video, describe the song's theme and mood instead of quoting lyrics.
Video Title: {video_title if video_title else 'Unknown'}
Transcript:
{transcript}
Provide a brief, informative summary (2-3 sentences max):"""
response = model.generate_content(prompt)
logger.info("Gemini response received.")
if response and response.text:
summary = response.text.strip()
# Clean up any markdown formatting
summary = summary.replace("**", "").replace("##", "").replace("###", "")
return summary
return None
except Exception as e:
logger.error(f"Gemini summarization error: {e}")
return None
def extract_key_points_with_gemini(transcript: str, video_title: str = "") -> list:
"""
Extract key points from video transcript using Gemini AI.
Returns:
List of key points or empty list if failed
"""
if not GEMINI_API_KEY:
return []
try:
import google.generativeai as genai
genai.configure(api_key=GEMINI_API_KEY)
model = genai.GenerativeModel('gemini-1.5-flash')
# Limit transcript
max_chars = 6000
if len(transcript) > max_chars:
transcript = transcript[:max_chars] + "..."
prompt = f"""Extract 3-5 key points from this video transcript. For each point, provide a single short sentence.
If it's a music video, describe the themes, mood, and notable elements instead of quoting lyrics.
Video Title: {video_title if video_title else 'Unknown'}
Transcript:
{transcript}
Key points (one per line, no bullet points or numbers):"""
response = model.generate_content(prompt)
if response and response.text:
lines = response.text.strip().split('\n')
# Clean up and filter
points = []
for line in lines:
line = line.strip().lstrip('•-*123456789.)')
line = line.strip()
if line and len(line) > 10:
points.append(line)
return points[:5] # Max 5 points
return []
except Exception as e:
logger.error(f"Gemini key points error: {e}")
return []

114
app/services/loader_to.py Normal file
View file

@ -0,0 +1,114 @@
import requests
import time
import logging
import json
from typing import Optional, Dict, Any
from config import Config
logger = logging.getLogger(__name__)
class LoaderToService:
"""Service for interacting with loader.to / savenow.to API"""
BASE_URL = "https://p.savenow.to"
DOWNLOAD_ENDPOINT = "/ajax/download.php"
PROGRESS_ENDPOINT = "/api/progress"
@classmethod
def get_stream_url(cls, video_url: str, format_id: str = "1080") -> Optional[Dict[str, Any]]:
"""
Get download URL for a video via loader.to
Args:
video_url: Full YouTube URL
format_id: Target format (1080, 720, 4k, etc.)
Returns:
Dict containing 'stream_url' and available metadata, or None
"""
try:
# 1. Initiate Download
params = {
'format': format_id,
'url': video_url,
'api_key': Config.LOADER_TO_API_KEY
}
# Using curl-like headers to avoid bot detection
headers = {
'User-Agent': 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36',
'Referer': 'https://loader.to/',
'Origin': 'https://loader.to'
}
logger.info(f"Initiating Loader.to fetch for {video_url}")
response = requests.get(
f"{cls.BASE_URL}{cls.DOWNLOAD_ENDPOINT}",
params=params,
headers=headers,
timeout=10
)
response.raise_for_status()
data = response.json()
if not data.get('success') and not data.get('id'):
logger.error(f"Loader.to initial request failed: {data}")
return None
task_id = data.get('id')
info = data.get('info', {})
logger.info(f"Loader.to task started: {task_id}")
# 2. Poll for progress
# Timeout after 60 seconds
start_time = time.time()
while time.time() - start_time < 60:
progress_url = data.get('progress_url')
# If progress_url is missing, construct it manually (fallback)
if not progress_url and task_id:
progress_url = f"{cls.BASE_URL}/api/progress?id={task_id}"
if not progress_url:
logger.error("No progress URL found")
return None
p_res = requests.get(progress_url, headers=headers, timeout=10)
if p_res.status_code != 200:
logger.warning(f"Progress check failed: {p_res.status_code}")
time.sleep(2)
continue
p_data = p_res.json()
# Check for success (success can be boolean true or int 1)
is_success = p_data.get('success') in [True, 1, '1']
text_status = p_data.get('text', '').lower()
if is_success and p_data.get('download_url'):
logger.info("Loader.to extraction successful")
return {
'stream_url': p_data['download_url'],
'title': info.get('title') or 'Unknown Title',
'thumbnail': info.get('image'),
# Add basic fields to match yt-dlp dict structure
'description': f"Fetched via Loader.to (Format: {format_id})",
'uploader': 'Unknown',
'duration': None,
'view_count': 0
}
# Check for failure
if 'error' in text_status or 'failed' in text_status:
logger.error(f"Loader.to task failed: {text_status}")
return None
# Wait before next poll
time.sleep(2)
logger.error("Loader.to timed out waiting for video")
return None
except Exception as e:
logger.error(f"Loader.to service error: {e}")
return None

55
app/services/settings.py Normal file
View file

@ -0,0 +1,55 @@
import json
import os
import logging
from config import Config
logger = logging.getLogger(__name__)
class SettingsService:
"""Manage application settings using a JSON file"""
SETTINGS_FILE = os.path.join(Config.DATA_DIR, 'settings.json')
# Default settings
DEFAULTS = {
'youtube_engine': 'auto', # auto, local, remote
}
@classmethod
def _load_settings(cls) -> dict:
"""Load settings from file or return defaults"""
try:
if os.path.exists(cls.SETTINGS_FILE):
with open(cls.SETTINGS_FILE, 'r') as f:
data = json.load(f)
# Merge with defaults to ensure all keys exist
return {**cls.DEFAULTS, **data}
except Exception as e:
logger.error(f"Error loading settings: {e}")
return cls.DEFAULTS.copy()
@classmethod
def get(cls, key: str, default=None):
"""Get a setting value"""
settings = cls._load_settings()
return settings.get(key, default if default is not None else cls.DEFAULTS.get(key))
@classmethod
def set(cls, key: str, value):
"""Set a setting value and persist"""
settings = cls._load_settings()
settings[key] = value
try:
with open(cls.SETTINGS_FILE, 'w') as f:
json.dump(settings, f, indent=2)
except Exception as e:
logger.error(f"Error saving settings: {e}")
raise
@classmethod
def get_all(cls):
"""Get all settings"""
return cls._load_settings()

235
app/services/summarizer.py Executable file → Normal file
View file

@ -1,116 +1,119 @@
"""
Summarizer Service Module
Extractive text summarization for video transcripts
"""
import re
import heapq
import logging
from typing import List
logger = logging.getLogger(__name__)
# Stop words for summarization
STOP_WORDS = frozenset([
'the', 'a', 'an', 'and', 'or', 'but', 'is', 'are', 'was', 'were',
'to', 'of', 'in', 'on', 'at', 'for', 'with', 'that', 'this', 'it',
'you', 'i', 'we', 'they', 'he', 'she', 'be', 'have', 'has', 'do',
'does', 'did', 'will', 'would', 'could', 'should', 'may', 'might',
'must', 'can', 'not', 'no', 'so', 'as', 'if', 'then', 'than',
'when', 'where', 'what', 'which', 'who', 'how', 'why', 'all',
'each', 'every', 'both', 'few', 'more', 'most', 'other', 'some',
'such', 'any', 'only', 'own', 'same', 'just', 'now', 'also', 'very'
])
def extractive_summary(text: str, num_sentences: int = 5) -> str:
"""
Generate an extractive summary of text
Args:
text: Input text to summarize
num_sentences: Number of sentences to extract
Returns:
Summary string with top-ranked sentences
"""
if not text or not text.strip():
return "Not enough content to summarize."
# Clean text - remove metadata like [Music] common in auto-captions
clean_text = re.sub(r'\[.*?\]', '', text)
clean_text = clean_text.replace('\n', ' ')
clean_text = re.sub(r'\s+', ' ', clean_text).strip()
if len(clean_text) < 100:
return clean_text
# Split into sentences
sentences = _split_sentences(clean_text)
if len(sentences) <= num_sentences:
return clean_text
# Calculate word frequencies
word_frequencies = _calculate_word_frequencies(clean_text)
if not word_frequencies:
return "Not enough content to summarize."
# Score sentences
sentence_scores = _score_sentences(sentences, word_frequencies)
# Extract top N sentences
top_sentences = heapq.nlargest(num_sentences, sentence_scores, key=sentence_scores.get)
# Return in original order
ordered = [s for s in sentences if s in top_sentences]
return ' '.join(ordered)
def _split_sentences(text: str) -> List[str]:
"""Split text into sentences"""
# Regex for sentence splitting - handles abbreviations
pattern = r'(?<!\w\.\w.)(?<![A-Z][a-z]\.)(?<=\.|\?|\!)\s'
sentences = re.split(pattern, text)
# Filter out very short sentences
return [s.strip() for s in sentences if len(s.strip()) > 20]
def _calculate_word_frequencies(text: str) -> dict:
"""Calculate normalized word frequencies"""
word_frequencies = {}
words = re.findall(r'\w+', text.lower())
for word in words:
if word not in STOP_WORDS and len(word) > 2:
word_frequencies[word] = word_frequencies.get(word, 0) + 1
if not word_frequencies:
return {}
# Normalize by max frequency
max_freq = max(word_frequencies.values())
for word in word_frequencies:
word_frequencies[word] = word_frequencies[word] / max_freq
return word_frequencies
def _score_sentences(sentences: List[str], word_frequencies: dict) -> dict:
"""Score sentences based on word frequencies"""
sentence_scores = {}
for sentence in sentences:
words = re.findall(r'\w+', sentence.lower())
score = sum(word_frequencies.get(word, 0) for word in words)
# Normalize by sentence length to avoid bias toward long sentences
if len(words) > 0:
score = score / (len(words) ** 0.5) # Square root normalization
sentence_scores[sentence] = score
return sentence_scores
import re
import math
import logging
from typing import List
logger = logging.getLogger(__name__)
class TextRankSummarizer:
"""
Summarizes text using a TextRank-like graph algorithm.
This creates more coherent "whole idea" summaries than random extraction.
"""
def __init__(self):
self.stop_words = set([
"the", "a", "an", "and", "or", "but", "is", "are", "was", "were",
"to", "of", "in", "on", "at", "for", "width", "that", "this", "it",
"you", "i", "we", "they", "he", "she", "have", "has", "had", "do",
"does", "did", "with", "as", "by", "from", "at", "but", "not", "what",
"all", "were", "when", "can", "said", "there", "use", "an", "each",
"which", "she", "do", "how", "their", "if", "will", "up", "other",
"about", "out", "many", "then", "them", "these", "so", "some", "her",
"would", "make", "like", "him", "into", "time", "has", "look", "two",
"more", "write", "go", "see", "number", "no", "way", "could", "people",
"my", "than", "first", "water", "been", "call", "who", "oil", "its",
"now", "find", "long", "down", "day", "did", "get", "come", "made",
"may", "part"
])
def summarize(self, text: str, num_sentences: int = 5) -> str:
"""
Generate a summary of the text.
Args:
text: Input text
num_sentences: Number of sentences in the summary
Returns:
Summarized text string
"""
if not text:
return ""
# 1. Split into sentences
# Use regex to look for periods/questions/exclamations followed by space or end of string
sentences = re.split(r'(?<!\w\.\w.)(?<![A-Z][a-z]\.)(?<=\.|\?|\!)\s', text)
sentences = [s.strip() for s in sentences if len(s.strip()) > 20] # Filter very short fragments
if not sentences:
return text[:500] + "..." if len(text) > 500 else text
if len(sentences) <= num_sentences:
return " ".join(sentences)
# 2. Build Similarity Graph
# We calculate cosine similarity between all pairs of sentences
# graph[i][j] = similarity score
n = len(sentences)
scores = [0.0] * n
# Pre-process sentences for efficiency
# Convert to sets of words
sent_words = []
for s in sentences:
words = re.findall(r'\w+', s.lower())
words = [w for w in words if w not in self.stop_words]
sent_words.append(words)
# Adjacency matrix (conceptual) - we'll just sum weights for "centrality"
# TextRank logic: a sentence is important if it is similar to other important sentences.
# Simplified: weighted degree centrality often works well enough for simple tasks without full iterative convergence
for i in range(n):
for j in range(i + 1, n):
sim = self._cosine_similarity(sent_words[i], sent_words[j])
if sim > 0:
scores[i] += sim
scores[j] += sim
# 3. Rank and Select
# Sort by score descending
ranked_sentences = sorted(((scores[i], i) for i in range(n)), reverse=True)
# Pick top N
top_indices = [idx for score, idx in ranked_sentences[:num_sentences]]
# 4. Reorder by appearance in original text for coherence
top_indices.sort()
summary = " ".join([sentences[i] for i in top_indices])
return summary
def _cosine_similarity(self, words1: List[str], words2: List[str]) -> float:
"""Calculate cosine similarity between two word lists."""
if not words1 or not words2:
return 0.0
# Unique words in both
all_words = set(words1) | set(words2)
# Frequency vectors
vec1 = {w: 0 for w in all_words}
vec2 = {w: 0 for w in all_words}
for w in words1: vec1[w] += 1
for w in words2: vec2[w] += 1
# Dot product
dot_product = sum(vec1[w] * vec2[w] for w in all_words)
# Magnitudes
mag1 = math.sqrt(sum(v*v for v in vec1.values()))
mag2 = math.sqrt(sum(v*v for v in vec2.values()))
if mag1 == 0 or mag2 == 0:
return 0.0
return dot_product / (mag1 * mag2)

593
app/services/youtube.py Executable file → Normal file
View file

@ -1,280 +1,313 @@
"""
YouTube Service Module
Handles all yt-dlp interactions using the library directly (not subprocess)
"""
import yt_dlp
import logging
from typing import Optional, List, Dict, Any
from config import Config
logger = logging.getLogger(__name__)
class YouTubeService:
"""Service for fetching YouTube content using yt-dlp library"""
# Common yt-dlp options
BASE_OPTS = {
'quiet': True,
'no_warnings': True,
'extract_flat': 'in_playlist',
'force_ipv4': True,
'socket_timeout': Config.YTDLP_TIMEOUT,
}
@staticmethod
def sanitize_video_data(data: Dict[str, Any]) -> Dict[str, Any]:
"""Sanitize and format video data from yt-dlp"""
video_id = data.get('id', '')
duration_secs = data.get('duration')
# Format duration
duration_str = None
if duration_secs:
mins, secs = divmod(int(duration_secs), 60)
hours, mins = divmod(mins, 60)
duration_str = f"{hours}:{mins:02d}:{secs:02d}" if hours else f"{mins}:{secs:02d}"
return {
'id': video_id,
'title': data.get('title', 'Unknown'),
'uploader': data.get('uploader') or data.get('channel') or 'Unknown',
'channel_id': data.get('channel_id'),
'uploader_id': data.get('uploader_id'),
'thumbnail': f"https://i.ytimg.com/vi/{video_id}/hqdefault.jpg" if video_id else None,
'view_count': data.get('view_count', 0),
'upload_date': data.get('upload_date', ''),
'duration': duration_str,
'description': data.get('description', ''),
}
@classmethod
def search_videos(cls, query: str, limit: int = 20, filter_type: Optional[str] = None) -> List[Dict[str, Any]]:
"""
Search for videos using yt-dlp library directly
Args:
query: Search query
limit: Maximum number of results
filter_type: 'video' to exclude shorts, 'short' for only shorts
Returns:
List of sanitized video data dictionaries
"""
try:
search_url = f"ytsearch{limit}:{query}"
ydl_opts = {
**cls.BASE_OPTS,
'extract_flat': True,
'playlist_items': f'1:{limit}',
}
results = []
with yt_dlp.YoutubeDL(ydl_opts) as ydl:
info = ydl.extract_info(search_url, download=False)
entries = info.get('entries', []) if info else []
for entry in entries:
if not entry or not entry.get('id'):
continue
# Filter logic
title_lower = (entry.get('title') or '').lower()
duration_secs = entry.get('duration')
if filter_type == 'video':
# Exclude shorts
if '#shorts' in title_lower:
continue
if duration_secs and int(duration_secs) <= 70:
continue
elif filter_type == 'short':
# Only shorts
if duration_secs and int(duration_secs) > 60:
continue
results.append(cls.sanitize_video_data(entry))
return results
except Exception as e:
logger.error(f"Search error for '{query}': {e}")
return []
@classmethod
def get_video_info(cls, video_id: str) -> Optional[Dict[str, Any]]:
"""
Get detailed video information including stream URL
Args:
video_id: YouTube video ID
Returns:
Video info dict with stream_url, or None on error
"""
try:
url = f"https://www.youtube.com/watch?v={video_id}"
ydl_opts = {
**cls.BASE_OPTS,
'format': Config.YTDLP_FORMAT,
'noplaylist': True,
'skip_download': True,
}
with yt_dlp.YoutubeDL(ydl_opts) as ydl:
info = ydl.extract_info(url, download=False)
if not info:
return None
stream_url = info.get('url')
if not stream_url:
logger.warning(f"No stream URL found for {video_id}")
return None
# Get subtitles
subtitle_url = cls._extract_subtitle_url(info)
return {
'stream_url': stream_url,
'title': info.get('title', 'Unknown'),
'description': info.get('description', ''),
'uploader': info.get('uploader', ''),
'uploader_id': info.get('uploader_id', ''),
'channel_id': info.get('channel_id', ''),
'upload_date': info.get('upload_date', ''),
'view_count': info.get('view_count', 0),
'subtitle_url': subtitle_url,
'duration': info.get('duration'),
}
except Exception as e:
logger.error(f"Error getting video info for {video_id}: {e}")
return None
@staticmethod
def _extract_subtitle_url(info: Dict[str, Any]) -> Optional[str]:
"""Extract best subtitle URL from video info"""
subs = info.get('subtitles') or {}
auto_subs = info.get('automatic_captions') or {}
# Priority: en manual > vi manual > en auto > vi auto > first available
for lang in ['en', 'vi']:
if lang in subs and subs[lang]:
return subs[lang][0].get('url')
for lang in ['en', 'vi']:
if lang in auto_subs and auto_subs[lang]:
return auto_subs[lang][0].get('url')
# Fallback to first available
if subs:
first_key = list(subs.keys())[0]
if subs[first_key]:
return subs[first_key][0].get('url')
if auto_subs:
first_key = list(auto_subs.keys())[0]
if auto_subs[first_key]:
return auto_subs[first_key][0].get('url')
return None
@classmethod
def get_channel_videos(cls, channel_id: str, limit: int = 20) -> List[Dict[str, Any]]:
"""
Get videos from a YouTube channel
Args:
channel_id: Channel ID, handle (@username), or URL
limit: Maximum number of videos
Returns:
List of video data dictionaries
"""
try:
# Construct URL based on ID format
if channel_id.startswith('http'):
url = channel_id
elif channel_id.startswith('@'):
url = f"https://www.youtube.com/{channel_id}"
elif len(channel_id) == 24 and channel_id.startswith('UC'):
url = f"https://www.youtube.com/channel/{channel_id}"
else:
url = f"https://www.youtube.com/{channel_id}"
ydl_opts = {
**cls.BASE_OPTS,
'extract_flat': True,
'playlist_items': f'1:{limit}',
}
results = []
with yt_dlp.YoutubeDL(ydl_opts) as ydl:
info = ydl.extract_info(url, download=False)
entries = info.get('entries', []) if info else []
for entry in entries:
if entry and entry.get('id'):
results.append(cls.sanitize_video_data(entry))
return results
except Exception as e:
logger.error(f"Error getting channel videos for {channel_id}: {e}")
return []
@classmethod
def get_related_videos(cls, title: str, limit: int = 10) -> List[Dict[str, Any]]:
"""Get videos related to a given title"""
query = f"{title} related"
return cls.search_videos(query, limit=limit, filter_type='video')
@classmethod
def get_download_url(cls, video_id: str) -> Optional[Dict[str, str]]:
"""
Get direct download URL (non-HLS) for a video
Returns:
Dict with 'url', 'title', 'ext' or None
"""
try:
url = f"https://www.youtube.com/watch?v={video_id}"
ydl_opts = {
**cls.BASE_OPTS,
'format': 'bestvideo[ext=mp4]+bestaudio[ext=m4a]/best[ext=mp4]/best[protocol!*=m3u8]/best',
'noplaylist': True,
'skip_download': True,
'youtube_include_dash_manifest': False,
'youtube_include_hls_manifest': False,
}
with yt_dlp.YoutubeDL(ydl_opts) as ydl:
info = ydl.extract_info(url, download=False)
download_url = info.get('url', '')
# If m3u8, try to find non-HLS format
if '.m3u8' in download_url or not download_url:
formats = info.get('formats', [])
for f in reversed(formats):
f_url = f.get('url', '')
if f_url and 'm3u8' not in f_url and f.get('ext') == 'mp4':
download_url = f_url
break
if download_url and '.m3u8' not in download_url:
return {
'url': download_url,
'title': info.get('title', 'video'),
'ext': 'mp4'
}
return None
except Exception as e:
logger.error(f"Error getting download URL for {video_id}: {e}")
return None
"""
YouTube Service Module
Handles all yt-dlp interactions using the library directly (not subprocess)
"""
import yt_dlp
import logging
from typing import Optional, List, Dict, Any
from config import Config
from app.services.loader_to import LoaderToService
from app.services.settings import SettingsService
logger = logging.getLogger(__name__)
class YouTubeService:
"""Service for fetching YouTube content using yt-dlp library"""
# Common yt-dlp options
BASE_OPTS = {
'quiet': True,
'no_warnings': True,
'extract_flat': 'in_playlist',
'force_ipv4': True,
'socket_timeout': Config.YTDLP_TIMEOUT,
'user_agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36',
}
@staticmethod
def sanitize_video_data(data: Dict[str, Any]) -> Dict[str, Any]:
"""Sanitize and format video data from yt-dlp"""
video_id = data.get('id', '')
duration_secs = data.get('duration')
# Format duration
duration_str = None
if duration_secs:
mins, secs = divmod(int(duration_secs), 60)
hours, mins = divmod(mins, 60)
duration_str = f"{hours}:{mins:02d}:{secs:02d}" if hours else f"{mins}:{secs:02d}"
return {
'id': video_id,
'title': data.get('title', 'Unknown'),
'uploader': data.get('uploader') or data.get('channel') or 'Unknown',
'channel_id': data.get('channel_id'),
'uploader_id': data.get('uploader_id'),
'thumbnail': f"https://i.ytimg.com/vi/{video_id}/hqdefault.jpg" if video_id else None,
'view_count': data.get('view_count', 0),
'upload_date': data.get('upload_date', ''),
'duration': duration_str,
'description': data.get('description', ''),
}
@classmethod
def search_videos(cls, query: str, limit: int = 20, filter_type: Optional[str] = None) -> List[Dict[str, Any]]:
"""
Search for videos using yt-dlp library directly
Args:
query: Search query
limit: Maximum number of results
filter_type: 'video' to exclude shorts, 'short' for only shorts
Returns:
List of sanitized video data dictionaries
"""
try:
search_url = f"ytsearch{limit}:{query}"
ydl_opts = {
**cls.BASE_OPTS,
'extract_flat': True,
'playlist_items': f'1:{limit}',
}
results = []
with yt_dlp.YoutubeDL(ydl_opts) as ydl:
info = ydl.extract_info(search_url, download=False)
entries = info.get('entries', []) if info else []
for entry in entries:
if not entry or not entry.get('id'):
continue
# Filter logic
title_lower = (entry.get('title') or '').lower()
duration_secs = entry.get('duration')
if filter_type == 'video':
# Exclude shorts
if '#shorts' in title_lower:
continue
if duration_secs and int(duration_secs) <= 70:
continue
elif filter_type == 'short':
# Only shorts
if duration_secs and int(duration_secs) > 60:
continue
results.append(cls.sanitize_video_data(entry))
return results
except Exception as e:
logger.error(f"Search error for '{query}': {e}")
return []
@classmethod
def get_video_info(cls, video_id: str) -> Optional[Dict[str, Any]]:
"""
Get detailed video information including stream URL
Args:
video_id: YouTube video ID
Returns:
Video info dict with stream_url, or None on error
"""
engine = SettingsService.get('youtube_engine', 'auto')
# 1. Force Remote
if engine == 'remote':
return cls._get_info_remote(video_id)
# 2. Local (or Auto first attempt)
info = cls._get_info_local(video_id)
if info:
return info
# 3. Failover if Auto
if engine == 'auto' and not info:
logger.warning(f"yt-dlp failed for {video_id}, falling back to remote loader")
return cls._get_info_remote(video_id)
return None
@classmethod
def _get_info_remote(cls, video_id: str) -> Optional[Dict[str, Any]]:
"""Fetch info using LoaderToService"""
url = f"https://www.youtube.com/watch?v={video_id}"
return LoaderToService.get_stream_url(url)
@classmethod
def _get_info_local(cls, video_id: str) -> Optional[Dict[str, Any]]:
"""Fetch info using yt-dlp (original logic)"""
try:
url = f"https://www.youtube.com/watch?v={video_id}"
ydl_opts = {
**cls.BASE_OPTS,
'format': Config.YTDLP_FORMAT,
'noplaylist': True,
'skip_download': True,
}
with yt_dlp.YoutubeDL(ydl_opts) as ydl:
info = ydl.extract_info(url, download=False)
if not info:
return None
stream_url = info.get('url')
if not stream_url:
logger.warning(f"No stream URL found for {video_id}")
return None
# Get subtitles
subtitle_url = cls._extract_subtitle_url(info)
return {
'stream_url': stream_url,
'title': info.get('title', 'Unknown'),
'description': info.get('description', ''),
'uploader': info.get('uploader', ''),
'uploader_id': info.get('uploader_id', ''),
'channel_id': info.get('channel_id', ''),
'upload_date': info.get('upload_date', ''),
'view_count': info.get('view_count', 0),
'subtitle_url': subtitle_url,
'duration': info.get('duration'),
'thumbnail': info.get('thumbnail') or f"https://i.ytimg.com/vi/{video_id}/hqdefault.jpg",
'http_headers': info.get('http_headers', {})
}
except Exception as e:
logger.error(f"Error getting local video info for {video_id}: {e}")
return None
@staticmethod
def _extract_subtitle_url(info: Dict[str, Any]) -> Optional[str]:
"""Extract best subtitle URL from video info"""
subs = info.get('subtitles') or {}
auto_subs = info.get('automatic_captions') or {}
# Priority: en manual > vi manual > en auto > vi auto > first available
for lang in ['en', 'vi']:
if lang in subs and subs[lang]:
return subs[lang][0].get('url')
for lang in ['en', 'vi']:
if lang in auto_subs and auto_subs[lang]:
return auto_subs[lang][0].get('url')
# Fallback to first available
if subs:
first_key = list(subs.keys())[0]
if subs[first_key]:
return subs[first_key][0].get('url')
if auto_subs:
first_key = list(auto_subs.keys())[0]
if auto_subs[first_key]:
return auto_subs[first_key][0].get('url')
return None
@classmethod
def get_channel_videos(cls, channel_id: str, limit: int = 20) -> List[Dict[str, Any]]:
"""
Get videos from a YouTube channel
Args:
channel_id: Channel ID, handle (@username), or URL
limit: Maximum number of videos
Returns:
List of video data dictionaries
"""
try:
# Construct URL based on ID format
if channel_id.startswith('http'):
url = channel_id
elif channel_id.startswith('@'):
url = f"https://www.youtube.com/{channel_id}"
elif len(channel_id) == 24 and channel_id.startswith('UC'):
url = f"https://www.youtube.com/channel/{channel_id}"
else:
url = f"https://www.youtube.com/{channel_id}"
ydl_opts = {
**cls.BASE_OPTS,
'extract_flat': True,
'playlist_items': f'1:{limit}',
}
results = []
with yt_dlp.YoutubeDL(ydl_opts) as ydl:
info = ydl.extract_info(url, download=False)
entries = info.get('entries', []) if info else []
for entry in entries:
if entry and entry.get('id'):
results.append(cls.sanitize_video_data(entry))
return results
except Exception as e:
logger.error(f"Error getting channel videos for {channel_id}: {e}")
return []
@classmethod
def get_related_videos(cls, title: str, limit: int = 10) -> List[Dict[str, Any]]:
"""Get videos related to a given title"""
query = f"{title} related"
return cls.search_videos(query, limit=limit, filter_type='video')
@classmethod
def get_download_url(cls, video_id: str) -> Optional[Dict[str, str]]:
"""
Get direct download URL (non-HLS) for a video
Returns:
Dict with 'url', 'title', 'ext' or None
"""
try:
url = f"https://www.youtube.com/watch?v={video_id}"
ydl_opts = {
**cls.BASE_OPTS,
'format': 'bestvideo[ext=mp4]+bestaudio[ext=m4a]/best[ext=mp4]/best[protocol!*=m3u8]/best',
'noplaylist': True,
'skip_download': True,
'youtube_include_dash_manifest': False,
'youtube_include_hls_manifest': False,
}
with yt_dlp.YoutubeDL(ydl_opts) as ydl:
info = ydl.extract_info(url, download=False)
download_url = info.get('url', '')
# If m3u8, try to find non-HLS format
if '.m3u8' in download_url or not download_url:
formats = info.get('formats', [])
for f in reversed(formats):
f_url = f.get('url', '')
if f_url and 'm3u8' not in f_url and f.get('ext') == 'mp4':
download_url = f_url
break
if download_url and '.m3u8' not in download_url:
return {
'url': download_url,
'title': info.get('title', 'video'),
'ext': 'mp4'
}
return None
except Exception as e:
logger.error(f"Error getting download URL for {video_id}: {e}")
return None

2
app/utils/__init__.py Executable file → Normal file
View file

@ -1 +1 @@
"""KV-Tube Utilities Package"""
"""KV-Tube Utilities Package"""

190
app/utils/formatters.py Executable file → Normal file
View file

@ -1,95 +1,95 @@
"""
Template Formatters Module
Jinja2 template filters for formatting views and dates
"""
from datetime import datetime, timedelta
def format_views(views) -> str:
"""Format view count (YouTube style: 1.2M, 3.5K)"""
if not views:
return '0'
try:
num = int(views)
if num >= 1_000_000_000:
return f"{num / 1_000_000_000:.1f}B"
if num >= 1_000_000:
return f"{num / 1_000_000:.1f}M"
if num >= 1_000:
return f"{num / 1_000:.0f}K"
return f"{num:,}"
except (ValueError, TypeError):
return str(views)
def format_date(value) -> str:
"""Format date to relative time (YouTube style: 2 hours ago, 3 days ago)"""
if not value:
return 'Recently'
try:
# Handle YYYYMMDD format
if len(str(value)) == 8 and str(value).isdigit():
dt = datetime.strptime(str(value), '%Y%m%d')
# Handle timestamp
elif isinstance(value, (int, float)):
dt = datetime.fromtimestamp(value)
# Handle datetime object
elif isinstance(value, datetime):
dt = value
# Handle YYYY-MM-DD string
else:
try:
dt = datetime.strptime(str(value), '%Y-%m-%d')
except ValueError:
return str(value)
now = datetime.now()
diff = now - dt
if diff.days > 365:
years = diff.days // 365
return f"{years} year{'s' if years > 1 else ''} ago"
if diff.days > 30:
months = diff.days // 30
return f"{months} month{'s' if months > 1 else ''} ago"
if diff.days > 7:
weeks = diff.days // 7
return f"{weeks} week{'s' if weeks > 1 else ''} ago"
if diff.days > 0:
return f"{diff.days} day{'s' if diff.days > 1 else ''} ago"
if diff.seconds > 3600:
hours = diff.seconds // 3600
return f"{hours} hour{'s' if hours > 1 else ''} ago"
if diff.seconds > 60:
minutes = diff.seconds // 60
return f"{minutes} minute{'s' if minutes > 1 else ''} ago"
return "Just now"
except Exception:
return str(value)
def format_duration(seconds) -> str:
"""Format duration in seconds to HH:MM:SS or MM:SS"""
if not seconds:
return ''
try:
secs = int(seconds)
mins, secs = divmod(secs, 60)
hours, mins = divmod(mins, 60)
if hours:
return f"{hours}:{mins:02d}:{secs:02d}"
return f"{mins}:{secs:02d}"
except (ValueError, TypeError):
return ''
def register_filters(app):
"""Register all template filters with Flask app"""
app.template_filter('format_views')(format_views)
app.template_filter('format_date')(format_date)
app.template_filter('format_duration')(format_duration)
"""
Template Formatters Module
Jinja2 template filters for formatting views and dates
"""
from datetime import datetime, timedelta
def format_views(views) -> str:
"""Format view count (YouTube style: 1.2M, 3.5K)"""
if not views:
return '0'
try:
num = int(views)
if num >= 1_000_000_000:
return f"{num / 1_000_000_000:.1f}B"
if num >= 1_000_000:
return f"{num / 1_000_000:.1f}M"
if num >= 1_000:
return f"{num / 1_000:.0f}K"
return f"{num:,}"
except (ValueError, TypeError):
return str(views)
def format_date(value) -> str:
"""Format date to relative time (YouTube style: 2 hours ago, 3 days ago)"""
if not value:
return 'Recently'
try:
# Handle YYYYMMDD format
if len(str(value)) == 8 and str(value).isdigit():
dt = datetime.strptime(str(value), '%Y%m%d')
# Handle timestamp
elif isinstance(value, (int, float)):
dt = datetime.fromtimestamp(value)
# Handle datetime object
elif isinstance(value, datetime):
dt = value
# Handle YYYY-MM-DD string
else:
try:
dt = datetime.strptime(str(value), '%Y-%m-%d')
except ValueError:
return str(value)
now = datetime.now()
diff = now - dt
if diff.days > 365:
years = diff.days // 365
return f"{years} year{'s' if years > 1 else ''} ago"
if diff.days > 30:
months = diff.days // 30
return f"{months} month{'s' if months > 1 else ''} ago"
if diff.days > 7:
weeks = diff.days // 7
return f"{weeks} week{'s' if weeks > 1 else ''} ago"
if diff.days > 0:
return f"{diff.days} day{'s' if diff.days > 1 else ''} ago"
if diff.seconds > 3600:
hours = diff.seconds // 3600
return f"{hours} hour{'s' if hours > 1 else ''} ago"
if diff.seconds > 60:
minutes = diff.seconds // 60
return f"{minutes} minute{'s' if minutes > 1 else ''} ago"
return "Just now"
except Exception:
return str(value)
def format_duration(seconds) -> str:
"""Format duration in seconds to HH:MM:SS or MM:SS"""
if not seconds:
return ''
try:
secs = int(seconds)
mins, secs = divmod(secs, 60)
hours, mins = divmod(mins, 60)
if hours:
return f"{hours}:{mins:02d}:{secs:02d}"
return f"{mins}:{secs:02d}"
except (ValueError, TypeError):
return ''
def register_filters(app):
"""Register all template filters with Flask app"""
app.template_filter('format_views')(format_views)
app.template_filter('format_date')(format_date)
app.template_filter('format_duration')(format_duration)

BIN
bin/ffmpeg Normal file
View file

Binary file not shown.

123
config.py Executable file → Normal file
View file

@ -1,58 +1,65 @@
"""
KV-Tube Configuration Module
Centralizes all configuration with environment variable support
"""
import os
from dotenv import load_dotenv
# Load .env file if present
load_dotenv()
class Config:
"""Base configuration"""
SECRET_KEY = os.environ.get('SECRET_KEY', os.urandom(32).hex())
# Database
DATA_DIR = os.environ.get('KVTUBE_DATA_DIR', 'data')
DB_NAME = os.path.join(DATA_DIR, 'kvtube.db')
# Video storage
VIDEO_DIR = os.environ.get('KVTUBE_VIDEO_DIR', './videos')
# Rate limiting
RATELIMIT_DEFAULT = "60/minute"
RATELIMIT_SEARCH = "30/minute"
RATELIMIT_STREAM = "120/minute"
# Cache settings (in seconds)
CACHE_VIDEO_TTL = 3600 # 1 hour
CACHE_CHANNEL_TTL = 1800 # 30 minutes
# yt-dlp settings
YTDLP_FORMAT = 'best[ext=mp4]/best'
YTDLP_TIMEOUT = 30
@staticmethod
def init_app(app):
"""Initialize app with config"""
# Ensure data directory exists
os.makedirs(Config.DATA_DIR, exist_ok=True)
class DevelopmentConfig(Config):
"""Development configuration"""
DEBUG = True
FLASK_ENV = 'development'
class ProductionConfig(Config):
"""Production configuration"""
DEBUG = False
FLASK_ENV = 'production'
config = {
'development': DevelopmentConfig,
'production': ProductionConfig,
'default': DevelopmentConfig
}
"""
KV-Tube Configuration Module
Centralizes all configuration with environment variable support
"""
import os
from dotenv import load_dotenv
# Load .env file if present
load_dotenv()
class Config:
"""Base configuration"""
SECRET_KEY = os.environ.get('SECRET_KEY', os.urandom(32).hex())
# Database
DATA_DIR = os.environ.get('KVTUBE_DATA_DIR', 'data')
DB_NAME = os.path.join(DATA_DIR, 'kvtube.db')
# Video storage
VIDEO_DIR = os.environ.get('KVTUBE_VIDEO_DIR', './videos')
# Rate limiting
RATELIMIT_DEFAULT = "60/minute"
RATELIMIT_SEARCH = "30/minute"
RATELIMIT_STREAM = "120/minute"
# Cache settings (in seconds)
CACHE_VIDEO_TTL = 3600 # 1 hour
CACHE_CHANNEL_TTL = 1800 # 30 minutes
# yt-dlp settings
# yt-dlp settings - MUST use progressive formats with combined audio+video
# Format 22 = 720p mp4, 18 = 360p mp4 (both have audio+video combined)
# HLS m3u8 streams have CORS issues with segment proxying, so we avoid them
YTDLP_FORMAT = '22/18/best[protocol^=https][ext=mp4]/best[ext=mp4]/best'
YTDLP_TIMEOUT = 30
# YouTube Engine Settings
YOUTUBE_ENGINE = os.environ.get('YOUTUBE_ENGINE', 'auto') # auto, local, remote
LOADER_TO_API_KEY = os.environ.get('LOADER_TO_API_KEY', '') # Optional
@staticmethod
def init_app(app):
"""Initialize app with config"""
# Ensure data directory exists
os.makedirs(Config.DATA_DIR, exist_ok=True)
class DevelopmentConfig(Config):
"""Development configuration"""
DEBUG = True
FLASK_ENV = 'development'
class ProductionConfig(Config):
"""Production configuration"""
DEBUG = False
FLASK_ENV = 'production'
config = {
'development': DevelopmentConfig,
'production': ProductionConfig,
'default': DevelopmentConfig
}

19
cookies.txt Normal file
View file

@ -0,0 +1,19 @@
# Netscape HTTP Cookie File
# This file is generated by yt-dlp. Do not edit.
.youtube.com TRUE / TRUE 1802692356 __Secure-3PSID g.a0005gie1lAkmYZc-EPeGx77pCrXo_Cz5eAi-e9aryb9Qoz967v4Caiou6Tt5ZyLR4iMp5I51wACgYKASISARESFQHGX2MiopTeGBKXybppZWNr7JzmKhoVAUF8yKrgfPx-gEb02gGAV3ZaVOGr0076
.youtube.com TRUE / TRUE 1800281710 __Secure-1PSIDTS sidts-CjQB7I_69DRJdiQQGddE6tt-GHilv2IjDZd8S6FlWCjx2iReOoNtQMUkb55vaBdl8vBK7J_DEAA
.youtube.com TRUE / TRUE 1802692356 SAPISID DP6iRyLCM_cFV1Gw/AN2nemkVrvJ2p8MWb
.youtube.com TRUE / TRUE 1800282680 __Secure-1PSIDCC AKEyXzXvpBScD7r3mqr7aZ0ymWZ7FmsgT0q0C3Ge8hvrjZ9WZ4PU4ZBuBsO0YNYN3A8iX4eV8F8
.youtube.com TRUE / TRUE 1802692356 SSID A4isk9AE9xActvzYy
.youtube.com TRUE / TRUE 1802692356 __Secure-1PAPISID DP6iRyLCM_cFV1Gw/AN2nemkVrvJ2p8MWb
.youtube.com TRUE / TRUE 1802692356 __Secure-1PSID g.a0005gie1lAkmYZc-EPeGx77pCrXo_Cz5eAi-e9aryb9Qoz967v4-rF3xTavVHrJoyJAqShH6gACgYKAX0SARESFQHGX2MiOdAbUPmCj4MueYyh-2km5RoVAUF8yKp2ehWQC6tX8n-9UNg11RV60076
.youtube.com TRUE / TRUE 1802692356 __Secure-3PAPISID DP6iRyLCM_cFV1Gw/AN2nemkVrvJ2p8MWb
.youtube.com TRUE / TRUE 1800282680 __Secure-3PSIDCC AKEyXzVcvX-jLLprjZQXoqarG3xsAVpjyLYaN2j0a_iUcsnKnpL88P_5IlcfusJn0We0aaKK7g
.youtube.com TRUE / TRUE 1800281710 __Secure-3PSIDTS sidts-CjQB7I_69DRJdiQQGddE6tt-GHilv2IjDZd8S6FlWCjx2iReOoNtQMUkb55vaBdl8vBK7J_DEAA
.youtube.com TRUE / TRUE 1792154873 LOGIN_INFO AFmmF2swRQIgVjJk8Mho4_JuKr6SZzrhBdlL1LdxWxcwDMu4cjaRRgcCIQCTtJpmYKJH54Tiei3at3f4YT3US7gSL0lW_TZ04guKjQ:QUQ3MjNmeWlwRDJSNDl2NE9uX2JWWG5tWllHN0RsNUVZVUhsLVp4N2dWbldaeC14SnNybWVERnNoaXFpanFJczhKTjJSRGN6MEs3c1VkLTE1TGJVeFBPT05BY29NMFh0Q1VPdFU3dUdvSUpET3lQbU1ZMUlHUGltajlXNDllNUQxZHdzZko1WXF1UUJWclNxQVJ0TXVEYnF2bXJRY2V6Vl9n
.youtube.com TRUE / FALSE 0 PREF tz=UTC&f7=150&hl=en
.youtube.com TRUE / TRUE 0 YSC y-oH2BqaUSQ
.youtube.com TRUE / TRUE 1784298680 __Secure-ROLLOUT_TOKEN CPm51pHVjquOTRDw0bnsppWSAxjw0bnsppWSAw%3D%3D
.youtube.com TRUE / TRUE 1784298680 VISITOR_INFO1_LIVE ShB1Bvj-rRU
.youtube.com TRUE / TRUE 1784298680 VISITOR_PRIVACY_METADATA CgJWThIEGgAgWA%3D%3D

BIN
data/BpwWnK6n9IQ.m4a Normal file
View file

Binary file not shown.

BIN
data/U2oEJKsPdHo.m4a Normal file
View file

Binary file not shown.

BIN
data/UtGG6u1RBXI.m4a Normal file
View file

Binary file not shown.

BIN
data/kvtube.db Normal file
View file

Binary file not shown.

BIN
data/m4xEF92ZPuk.m4a Normal file
View file

Binary file not shown.

3
data/settings.json Normal file
View file

@ -0,0 +1,3 @@
{
"youtube_engine": "local"
}

0
deploy.py Executable file → Normal file
View file

69
dev.sh Normal file
View file

@ -0,0 +1,69 @@
#!/bin/bash
set -e
echo "--- KV-Tube Local Dev Startup ---"
# 1. Check for FFmpeg (Auto-Install Local Static Binary if missing)
if ! command -v ffmpeg &> /dev/null; then
echo "[Check] FFmpeg not found globally."
# Check local bin
LOCAL_BIN="$(pwd)/bin"
if [ ! -f "$LOCAL_BIN/ffmpeg" ]; then
echo "[Setup] Downloading static FFmpeg for macOS ARM64..."
mkdir -p "$LOCAL_BIN"
# Download from Martin Riedl's static builds (macOS ARM64)
curl -L -o ffmpeg.zip "https://ffmpeg.martin-riedl.de/redirect/latest/macos/arm64/release/ffmpeg.zip"
echo "[Setup] Extracting FFmpeg..."
unzip -o -q ffmpeg.zip -d "$LOCAL_BIN"
rm ffmpeg.zip
# Some zips extract to a subfolder, ensure binary is in bin root
# (This specific source usually dumps 'ffmpeg' directly, but just in case)
if [ ! -f "$LOCAL_BIN/ffmpeg" ]; then
find "$LOCAL_BIN" -name "ffmpeg" -type f -exec mv {} "$LOCAL_BIN" \;
fi
chmod +x "$LOCAL_BIN/ffmpeg"
fi
# Add local bin to PATH
export PATH="$LOCAL_BIN:$PATH"
echo "[Setup] Using local FFmpeg from $LOCAL_BIN"
fi
if ! command -v ffmpeg &> /dev/null; then
echo "Error: FFmpeg installation failed. Please install manually."
exit 1
fi
echo "[Check] FFmpeg found: $(ffmpeg -version | head -n 1)"
# 2. Virtual Environment (Optional but recommended)
if [ ! -d "venv" ]; then
echo "[Setup] Creating python virtual environment..."
python3 -m venv venv
fi
source venv/bin/activate
# 3. Install Dependencies & Force Nightly yt-dlp
echo "[Update] Installing dependencies..."
pip install -r requirements.txt
echo "[Update] Forcing yt-dlp Nightly update..."
# This matches the aggressive update strategy of media-roller
pip install -U --pre "yt-dlp[default]"
# 4. Environment Variables
export FLASK_APP=wsgi.py
export FLASK_ENV=development
export PYTHONUNBUFFERED=1
# 5. Start Application
echo "[Startup] Starting KV-Tube on http://localhost:5011"
echo "Press Ctrl+C to stop."
# Run with Gunicorn (closer to prod) or Flask (better for debugging)
# Using Gunicorn to match Docker behavior, but with reload for dev
exec gunicorn --bind 0.0.0.0:5011 --workers 2 --threads 2 --reload wsgi:app

90
doc/Product Requirements Document (PRD) - KV-Tube Executable file → Normal file
View file

@ -1,46 +1,46 @@
Product Requirements Document (PRD) - KV-Tube
1. Product Overview
Product Name: KV-Tube Version: 1.0 (In Development) Description: KV-Tube is a comprehensive media center web application designed to provide an ad-free YouTube experience, a curated movie streaming service, and a local video management system. It emphasizes privacy, absence of advertisements, and utility features like AI summarization and language learning tools.
2. User Personas
The Binge Watcher: Wants uninterrupted access to YouTube content and movies without ads.
The Archivist: Maintains a local collection of videos and wants a clean interface to organize and watch them securely.
The Learner: Uses video content for educational purposes, specifically English learning.
The Tech Enthusiast: Appreciates PWA support, torrent integration, and customizable settings.
3. Core Features
3.1. YouTube Viewer (Home)
Ad-Free Experience: Plays YouTube videos without third-party advertisements.
Search: Integrated search bar powered by yt-dlp to find videos, channels, and playlists.
Playback: Custom video player with support for quality selection and playback speed.
AI Summarization: Feature to summarize video content using Google Gemini API (Optional).
3.2. local Video Manager ("My Videos")
Secure Access: Password-protected section for personal video collections.
File Management: Scans local directories for video files.
Metadata: Extracts metadata (duration, format) and generates thumbnails using FFmpeg/MoviePy.
Playback: Native HTML5 player for local files.
3.3. Utilities
Torrent Player: Interface for streaming/playing video content via torrents.
Playlist Manager: Create and manage custom playlists of YouTube videos.
Camera/Photo: ("Chụp ảnh") Feature to capture or manage photos (Webcam integration).
Configuration: Web-based settings to manage application behavior (e.g., password, storage paths).
4. Technical Architecture
Backend: Python / Flask
Frontend: HTML5, CSS3, JavaScript (Vanilla)
Database/Storage: JSON-based local storage and file system.
Video Processing: yt-dlp (YouTube), FFmpeg (Conversion/Thumbnail), MoviePy (Optional).
AI Service: Google Gemini API (for summarization).
Deployment: Docker container support (xehopnet/kctube).
5. Non-Functional Requirements
Performance: Fast load times and responsive UI.
Compatibility: PWA-ready for installation on desktop and mobile.
Reliability: graceful degradation if optional dependencies (MoviePy, Gemini) are missing.
Privacy: No user tracking or external analytics.
6. Known Limitations
Search Reliability: Dependent on yt-dlp stability and YouTube's anti-bot measures.
External APIs: Movie features rely on third-party APIs which may have downtime.
Dependency Management: Some Python libraries (MoviePy, Numpy) require compilation tools.
7. Future Roadmap
Database: Migrate from JSON to SQLite for better performance with large libraries.
User Accounts: Individual user profiles and history.
Offline Mode: Enhanced offline capabilities for PWA.
Product Requirements Document (PRD) - KV-Tube
1. Product Overview
Product Name: KV-Tube Version: 1.0 (In Development) Description: KV-Tube is a comprehensive media center web application designed to provide an ad-free YouTube experience, a curated movie streaming service, and a local video management system. It emphasizes privacy, absence of advertisements, and utility features like AI summarization and language learning tools.
2. User Personas
The Binge Watcher: Wants uninterrupted access to YouTube content and movies without ads.
The Archivist: Maintains a local collection of videos and wants a clean interface to organize and watch them securely.
The Learner: Uses video content for educational purposes, specifically English learning.
The Tech Enthusiast: Appreciates PWA support, torrent integration, and customizable settings.
3. Core Features
3.1. YouTube Viewer (Home)
Ad-Free Experience: Plays YouTube videos without third-party advertisements.
Search: Integrated search bar powered by yt-dlp to find videos, channels, and playlists.
Playback: Custom video player with support for quality selection and playback speed.
AI Summarization: Feature to summarize video content using Google Gemini API (Optional).
3.2. local Video Manager ("My Videos")
Secure Access: Password-protected section for personal video collections.
File Management: Scans local directories for video files.
Metadata: Extracts metadata (duration, format) and generates thumbnails using FFmpeg/MoviePy.
Playback: Native HTML5 player for local files.
3.3. Utilities
Torrent Player: Interface for streaming/playing video content via torrents.
Playlist Manager: Create and manage custom playlists of YouTube videos.
Camera/Photo: ("Chụp ảnh") Feature to capture or manage photos (Webcam integration).
Configuration: Web-based settings to manage application behavior (e.g., password, storage paths).
4. Technical Architecture
Backend: Python / Flask
Frontend: HTML5, CSS3, JavaScript (Vanilla)
Database/Storage: JSON-based local storage and file system.
Video Processing: yt-dlp (YouTube), FFmpeg (Conversion/Thumbnail), MoviePy (Optional).
AI Service: Google Gemini API (for summarization).
Deployment: Docker container support (xehopnet/kctube).
5. Non-Functional Requirements
Performance: Fast load times and responsive UI.
Compatibility: PWA-ready for installation on desktop and mobile.
Reliability: graceful degradation if optional dependencies (MoviePy, Gemini) are missing.
Privacy: No user tracking or external analytics.
6. Known Limitations
Search Reliability: Dependent on yt-dlp stability and YouTube's anti-bot measures.
External APIs: Movie features rely on third-party APIs which may have downtime.
Dependency Management: Some Python libraries (MoviePy, Numpy) require compilation tools.
7. Future Roadmap
Database: Migrate from JSON to SQLite for better performance with large libraries.
User Accounts: Individual user profiles and history.
Offline Mode: Enhanced offline capabilities for PWA.
Casting: Support for Chromecast/AirPlay.

58
docker-compose.yml Executable file → Normal file
View file

@ -1,29 +1,29 @@
# KV-Tube Docker Compose for Synology NAS
# Usage: docker-compose up -d
version: '3.8'
services:
kv-tube:
# build: .
image: vndangkhoa/kv-tube:latest
container_name: kv-tube
restart: unless-stopped
ports:
- "5011:5000"
volumes:
# Persist data (Easy setup: Just maps a folder)
- ./data:/app/data
# Local videos folder (Optional)
# - ./videos:/app/youtube_downloads
environment:
- PYTHONUNBUFFERED=1
- FLASK_ENV=production
healthcheck:
test: [ "CMD", "curl", "-f", "http://localhost:5000/" ]
interval: 30s
timeout: 10s
retries: 3
start_period: 10s
labels:
- "com.centurylinklabs.watchtower.enable=true"
# KV-Tube Docker Compose for Synology NAS
# Usage: docker-compose up -d
version: '3.8'
services:
kv-tube:
build: .
image: vndangkhoa/kv-tube:latest
container_name: kv-tube
restart: unless-stopped
ports:
- "5011:5000"
volumes:
# Persist data (Easy setup: Just maps a folder)
- ./data:/app/data
# Local videos folder (Optional)
# - ./videos:/app/youtube_downloads
environment:
- PYTHONUNBUFFERED=1
- FLASK_ENV=production
healthcheck:
test: [ "CMD", "curl", "-f", "http://localhost:5000/" ]
interval: 30s
timeout: 10s
retries: 3
start_period: 10s
labels:
- "com.centurylinklabs.watchtower.enable=true"

21
entrypoint.sh Normal file
View file

@ -0,0 +1,21 @@
#!/bin/sh
set -e
echo "--- KV-Tube Startup ---"
# 1. Update Core Engines
echo "[Update] Checking for engine updates..."
# Update yt-dlp
echo "[Update] Updating yt-dlp..."
pip install -U yt-dlp || echo "Warning: yt-dlp update failed"
# 2. Check Loader.to Connectivity (Optional verification)
# We won't block startup on this, just log it.
echo "[Update] Engines checked."
# 3. Start Application
echo "[Startup] Launching Gunicorn..."
exec gunicorn --bind 0.0.0.0:5000 --workers 4 --threads 2 --timeout 120 wsgi:app

1013
hydration_debug.txt Normal file
View file

File diff suppressed because it is too large Load diff

0
kv_server.py Executable file → Normal file
View file

0
kv_tube.db Normal file
View file

BIN
kvtube.db Normal file
View file

Binary file not shown.

14
requirements.txt Executable file → Normal file
View file

@ -1,7 +1,7 @@
flask
requests
yt-dlp>=2024.1.0
werkzeug
gunicorn
python-dotenv
flask
requests
yt-dlp>=2024.1.0
werkzeug
gunicorn
python-dotenv

0
start.sh Executable file → Normal file
View file

0
static/css/modules/base.css Executable file → Normal file
View file

0
static/css/modules/cards.css Executable file → Normal file
View file

622
static/css/modules/chat.css Executable file → Normal file
View file

@ -1,312 +1,312 @@
/**
* KV-Tube AI Chat Styles
* Styling for the transcript Q&A chatbot panel
*/
/* Floating AI Bubble Button */
.ai-chat-bubble {
position: fixed;
bottom: 90px;
/* Above the back button */
right: 20px;
width: 56px;
height: 56px;
border-radius: 50%;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border: none;
color: white;
font-size: 24px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
z-index: 9998;
box-shadow: 0 4px 16px rgba(102, 126, 234, 0.4);
transition: transform 0.3s, box-shadow 0.3s;
animation: bubble-pulse 2s infinite;
}
.ai-chat-bubble:hover {
transform: scale(1.1);
box-shadow: 0 6px 24px rgba(102, 126, 234, 0.6);
}
.ai-chat-bubble.active {
animation: none;
background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
}
@keyframes bubble-pulse {
0%,
100% {
box-shadow: 0 4px 16px rgba(102, 126, 234, 0.4);
}
50% {
box-shadow: 0 4px 24px rgba(102, 126, 234, 0.7);
}
}
/* Hide bubble on desktop when chat is open */
.ai-chat-panel.visible~.ai-chat-bubble,
body.ai-chat-open .ai-chat-bubble {
animation: none;
}
/* Chat Panel Container */
.ai-chat-panel {
position: fixed;
bottom: 160px;
/* Position above the bubble */
right: 20px;
width: 380px;
max-height: 500px;
background: var(--yt-bg-primary, #0f0f0f);
border: 1px solid var(--yt-border, #272727);
border-radius: 16px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
display: flex;
flex-direction: column;
z-index: 9999;
overflow: hidden;
transform: translateY(20px) scale(0.95);
opacity: 0;
pointer-events: none;
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s;
}
.ai-chat-panel.visible {
transform: translateY(0) scale(1);
opacity: 1;
pointer-events: auto;
}
/* Chat Header */
.ai-chat-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 16px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
}
.ai-chat-header h4 {
margin: 0;
font-size: 14px;
font-weight: 600;
display: flex;
align-items: center;
gap: 8px;
}
.ai-chat-close {
background: none;
border: none;
color: white;
cursor: pointer;
padding: 4px;
opacity: 0.8;
transition: opacity 0.2s;
}
.ai-chat-close:hover {
opacity: 1;
}
/* Model Status */
.ai-model-status {
font-size: 11px;
opacity: 0.9;
margin-top: 2px;
}
.ai-model-status.loading {
color: #ffd700;
}
.ai-model-status.ready {
color: #00ff88;
}
/* Messages Container */
.ai-chat-messages {
flex: 1;
overflow-y: auto;
padding: 16px;
display: flex;
flex-direction: column;
gap: 12px;
max-height: 300px;
}
/* Message Bubbles */
.ai-message {
max-width: 85%;
padding: 10px 14px;
border-radius: 16px;
font-size: 13px;
line-height: 1.5;
word-wrap: break-word;
}
.ai-message.user {
align-self: flex-end;
background: #3ea6ff;
color: white;
border-bottom-right-radius: 4px;
}
.ai-message.assistant {
align-self: flex-start;
background: var(--yt-bg-secondary, #272727);
color: var(--yt-text-primary, #fff);
border-bottom-left-radius: 4px;
}
.ai-message.system {
align-self: center;
background: transparent;
color: var(--yt-text-secondary, #aaa);
font-style: italic;
font-size: 12px;
}
/* Typing Indicator */
.ai-typing {
display: flex;
gap: 4px;
padding: 10px 14px;
}
.ai-typing span {
width: 8px;
height: 8px;
background: var(--yt-text-secondary, #aaa);
border-radius: 50%;
animation: typing 1.2s infinite;
}
.ai-typing span:nth-child(2) {
animation-delay: 0.2s;
}
.ai-typing span:nth-child(3) {
animation-delay: 0.4s;
}
@keyframes typing {
0%,
60%,
100% {
transform: translateY(0);
}
30% {
transform: translateY(-8px);
}
}
/* Input Area */
.ai-chat-input {
display: flex;
gap: 8px;
padding: 12px;
border-top: 1px solid var(--yt-border, #272727);
background: var(--yt-bg-secondary, #181818);
}
.ai-chat-input input {
flex: 1;
background: var(--yt-bg-primary, #0f0f0f);
border: 1px solid var(--yt-border, #272727);
border-radius: 20px;
padding: 10px 16px;
color: var(--yt-text-primary, #fff);
font-size: 13px;
outline: none;
transition: border-color 0.2s;
}
.ai-chat-input input:focus {
border-color: #3ea6ff;
}
.ai-chat-input input::placeholder {
color: var(--yt-text-secondary, #aaa);
}
.ai-chat-send {
background: #3ea6ff;
border: none;
border-radius: 50%;
width: 36px;
height: 36px;
color: white;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.2s, transform 0.2s;
}
.ai-chat-send:hover {
background: #2d8fd9;
transform: scale(1.05);
}
.ai-chat-send:disabled {
background: #555;
cursor: not-allowed;
}
/* Download Progress */
.ai-download-progress {
padding: 16px;
text-align: center;
}
.ai-download-bar {
width: 100%;
height: 6px;
background: var(--yt-bg-secondary, #272727);
border-radius: 3px;
overflow: hidden;
margin-top: 8px;
}
.ai-download-fill {
height: 100%;
background: linear-gradient(90deg, #667eea, #764ba2);
border-radius: 3px;
transition: width 0.3s;
}
.ai-download-text {
font-size: 12px;
color: var(--yt-text-secondary, #aaa);
margin-top: 8px;
}
/* Mobile */
@media (max-width: 768px) {
.ai-chat-bubble {
bottom: 100px;
/* More space above back button */
right: 24px;
/* Aligned with back button */
width: 48px;
height: 48px;
font-size: 18px;
}
.ai-chat-panel {
width: calc(100% - 20px);
left: 10px;
right: 10px;
bottom: 160px;
max-height: 50vh;
}
/**
* KV-Tube AI Chat Styles
* Styling for the transcript Q&A chatbot panel
*/
/* Floating AI Bubble Button */
.ai-chat-bubble {
position: fixed;
bottom: 90px;
/* Above the back button */
right: 20px;
width: 56px;
height: 56px;
border-radius: 50%;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border: none;
color: white;
font-size: 24px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
z-index: 9998;
box-shadow: 0 4px 16px rgba(102, 126, 234, 0.4);
transition: transform 0.3s, box-shadow 0.3s;
animation: bubble-pulse 2s infinite;
}
.ai-chat-bubble:hover {
transform: scale(1.1);
box-shadow: 0 6px 24px rgba(102, 126, 234, 0.6);
}
.ai-chat-bubble.active {
animation: none;
background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
}
@keyframes bubble-pulse {
0%,
100% {
box-shadow: 0 4px 16px rgba(102, 126, 234, 0.4);
}
50% {
box-shadow: 0 4px 24px rgba(102, 126, 234, 0.7);
}
}
/* Hide bubble on desktop when chat is open */
.ai-chat-panel.visible~.ai-chat-bubble,
body.ai-chat-open .ai-chat-bubble {
animation: none;
}
/* Chat Panel Container */
.ai-chat-panel {
position: fixed;
bottom: 160px;
/* Position above the bubble */
right: 20px;
width: 380px;
max-height: 500px;
background: var(--yt-bg-primary, #0f0f0f);
border: 1px solid var(--yt-border, #272727);
border-radius: 16px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
display: flex;
flex-direction: column;
z-index: 9999;
overflow: hidden;
transform: translateY(20px) scale(0.95);
opacity: 0;
pointer-events: none;
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s;
}
.ai-chat-panel.visible {
transform: translateY(0) scale(1);
opacity: 1;
pointer-events: auto;
}
/* Chat Header */
.ai-chat-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 16px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
}
.ai-chat-header h4 {
margin: 0;
font-size: 14px;
font-weight: 600;
display: flex;
align-items: center;
gap: 8px;
}
.ai-chat-close {
background: none;
border: none;
color: white;
cursor: pointer;
padding: 4px;
opacity: 0.8;
transition: opacity 0.2s;
}
.ai-chat-close:hover {
opacity: 1;
}
/* Model Status */
.ai-model-status {
font-size: 11px;
opacity: 0.9;
margin-top: 2px;
}
.ai-model-status.loading {
color: #ffd700;
}
.ai-model-status.ready {
color: #00ff88;
}
/* Messages Container */
.ai-chat-messages {
flex: 1;
overflow-y: auto;
padding: 16px;
display: flex;
flex-direction: column;
gap: 12px;
max-height: 300px;
}
/* Message Bubbles */
.ai-message {
max-width: 85%;
padding: 10px 14px;
border-radius: 16px;
font-size: 13px;
line-height: 1.5;
word-wrap: break-word;
}
.ai-message.user {
align-self: flex-end;
background: #3ea6ff;
color: white;
border-bottom-right-radius: 4px;
}
.ai-message.assistant {
align-self: flex-start;
background: var(--yt-bg-secondary, #272727);
color: var(--yt-text-primary, #fff);
border-bottom-left-radius: 4px;
}
.ai-message.system {
align-self: center;
background: transparent;
color: var(--yt-text-secondary, #aaa);
font-style: italic;
font-size: 12px;
}
/* Typing Indicator */
.ai-typing {
display: flex;
gap: 4px;
padding: 10px 14px;
}
.ai-typing span {
width: 8px;
height: 8px;
background: var(--yt-text-secondary, #aaa);
border-radius: 50%;
animation: typing 1.2s infinite;
}
.ai-typing span:nth-child(2) {
animation-delay: 0.2s;
}
.ai-typing span:nth-child(3) {
animation-delay: 0.4s;
}
@keyframes typing {
0%,
60%,
100% {
transform: translateY(0);
}
30% {
transform: translateY(-8px);
}
}
/* Input Area */
.ai-chat-input {
display: flex;
gap: 8px;
padding: 12px;
border-top: 1px solid var(--yt-border, #272727);
background: var(--yt-bg-secondary, #181818);
}
.ai-chat-input input {
flex: 1;
background: var(--yt-bg-primary, #0f0f0f);
border: 1px solid var(--yt-border, #272727);
border-radius: 20px;
padding: 10px 16px;
color: var(--yt-text-primary, #fff);
font-size: 13px;
outline: none;
transition: border-color 0.2s;
}
.ai-chat-input input:focus {
border-color: #3ea6ff;
}
.ai-chat-input input::placeholder {
color: var(--yt-text-secondary, #aaa);
}
.ai-chat-send {
background: #3ea6ff;
border: none;
border-radius: 50%;
width: 36px;
height: 36px;
color: white;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.2s, transform 0.2s;
}
.ai-chat-send:hover {
background: #2d8fd9;
transform: scale(1.05);
}
.ai-chat-send:disabled {
background: #555;
cursor: not-allowed;
}
/* Download Progress */
.ai-download-progress {
padding: 16px;
text-align: center;
}
.ai-download-bar {
width: 100%;
height: 6px;
background: var(--yt-bg-secondary, #272727);
border-radius: 3px;
overflow: hidden;
margin-top: 8px;
}
.ai-download-fill {
height: 100%;
background: linear-gradient(90deg, #667eea, #764ba2);
border-radius: 3px;
transition: width 0.3s;
}
.ai-download-text {
font-size: 12px;
color: var(--yt-text-secondary, #aaa);
margin-top: 8px;
}
/* Mobile */
@media (max-width: 768px) {
.ai-chat-bubble {
bottom: 100px;
/* More space above back button */
right: 24px;
/* Aligned with back button */
width: 48px;
height: 48px;
font-size: 18px;
}
.ai-chat-panel {
width: calc(100% - 20px);
left: 10px;
right: 10px;
bottom: 160px;
max-height: 50vh;
}
}

49
static/css/modules/components.css Executable file → Normal file
View file

@ -266,6 +266,55 @@
background: var(--yt-bg-secondary);
}
/* --- Homepage Sections --- */
.yt-homepage-section {
margin-bottom: 32px;
}
.yt-section-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 16px;
padding: 0 4px;
}
.yt-section-header h2 {
font-size: 20px;
font-weight: 600;
color: var(--yt-text-primary);
margin: 0;
}
.yt-see-all {
color: var(--yt-text-secondary);
font-size: 14px;
background: none;
border: none;
cursor: pointer;
padding: 8px 12px;
border-radius: var(--yt-radius-sm);
transition: background 0.2s;
}
.yt-see-all:hover {
background: var(--yt-bg-hover);
}
@media (max-width: 768px) {
.yt-homepage-section {
margin-bottom: 24px;
}
.yt-section-header {
padding: 0 8px;
}
.yt-section-header h2 {
font-size: 18px;
}
}
/* --- Categories / Pills --- */
.yt-categories {
display: flex;

1390
static/css/modules/downloads.css Executable file → Normal file
View file

File diff suppressed because it is too large Load diff

0
static/css/modules/grid.css Executable file → Normal file
View file

0
static/css/modules/layout.css Executable file → Normal file
View file

0
static/css/modules/pages.css Executable file → Normal file
View file

0
static/css/modules/utils.css Executable file → Normal file
View file

0
static/css/modules/variables.css Executable file → Normal file
View file

1586
static/css/modules/watch.css Executable file → Normal file
View file

File diff suppressed because it is too large Load diff

32
static/css/style.css Executable file → Normal file
View file

@ -1,19 +1,19 @@
/* KV-Tube - YouTube Clone Design System */
/* Core */
@import 'modules/variables.css';
@import 'modules/base.css';
@import 'modules/utils.css';
/* Layout & Structure */
@import 'modules/layout.css';
@import 'modules/grid.css';
/* Components */
@import 'modules/components.css';
@import 'modules/cards.css';
/* Pages */
/* KV-Tube - YouTube Clone Design System */
/* Core */
@import 'modules/variables.css';
@import 'modules/base.css';
@import 'modules/utils.css';
/* Layout & Structure */
@import 'modules/layout.css';
@import 'modules/grid.css';
/* Components */
@import 'modules/components.css';
@import 'modules/cards.css';
/* Pages */
@import 'modules/pages.css';
/* Hide extension-injected error elements */
*[/onboarding/],

0
static/favicon.ico Executable file → Normal file
View file

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.6 KiB

After

Width:  |  Height:  |  Size: 4.6 KiB

0
static/icons/icon-192x192.png Executable file → Normal file
View file

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.6 KiB

After

Width:  |  Height:  |  Size: 4.6 KiB

0
static/icons/icon-512x512.png Executable file → Normal file
View file

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 18 KiB

After

Width:  |  Height:  |  Size: 18 KiB

8
static/js/artplayer.js Normal file
View file

File diff suppressed because one or more lines are too long

1234
static/js/download-manager.js Executable file → Normal file
View file

File diff suppressed because it is too large Load diff

0
static/js/hls.min.js vendored Executable file → Normal file
View file

1886
static/js/main.js Executable file → Normal file
View file

File diff suppressed because it is too large Load diff

408
static/js/navigation-manager.js Executable file → Normal file
View file

@ -1,204 +1,204 @@
/**
* KV-Tube Navigation Manager
* Handles SPA-style navigation to persist state (like downloads) across pages.
*/
class NavigationManager {
constructor() {
this.mainContentId = 'mainContent';
this.pageCache = new Map();
this.maxCacheSize = 20;
this.init();
}
init() {
// Handle browser back/forward buttons
window.addEventListener('popstate', (e) => {
if (e.state && e.state.url) {
this.loadPage(e.state.url, false);
} else {
// Fallback for initial state or external navigation
this.loadPage(window.location.href, false);
}
});
// Intercept clicks
document.addEventListener('click', (e) => {
// Find closest anchor tag
const link = e.target.closest('a');
// Check if it's an internal link and not a download/special link
if (link &&
link.href &&
link.href.startsWith(window.location.origin) &&
!link.getAttribute('download') &&
!link.getAttribute('target') &&
!link.classList.contains('no-spa') &&
!e.ctrlKey && !e.metaKey && !e.shiftKey // Allow new tab clicks
) {
e.preventDefault();
const url = link.href;
this.navigateTo(url);
// Update active state in sidebar
this.updateSidebarActiveState(link);
}
});
// Save initial state
const currentUrl = window.location.href;
if (!this.pageCache.has(currentUrl)) {
// We don't have the raw HTML, so we can't fully cache the initial page accurately
// without fetching it or serializing current DOM.
// For now, we will cache it upon *leaving* securely or just let the first visit be uncached.
// Better: Cache the current DOM state as the "initial" state.
this.saveCurrentState(currentUrl);
}
}
saveCurrentState(url) {
const mainContent = document.getElementById(this.mainContentId);
if (mainContent) {
this.pageCache.set(url, {
html: mainContent.innerHTML,
title: document.title,
scrollY: window.scrollY,
className: mainContent.className
});
// Prune cache
if (this.pageCache.size > this.maxCacheSize) {
const firstKey = this.pageCache.keys().next().value;
this.pageCache.delete(firstKey);
}
}
}
async navigateTo(url) {
// Start Progress Bar
const bar = document.getElementById('nprogress-bar');
if (bar) {
bar.style.opacity = '1';
bar.style.width = '30%';
}
// Save state of current page before leaving
this.saveCurrentState(window.location.href);
// Update history
history.pushState({ url: url }, '', url);
await this.loadPage(url);
}
async loadPage(url, pushState = true) {
const bar = document.getElementById('nprogress-bar');
if (bar) bar.style.width = '60%';
const mainContent = document.getElementById(this.mainContentId);
if (!mainContent) return;
// Check cache
if (this.pageCache.has(url)) {
const cached = this.pageCache.get(url);
// Restore content
document.title = cached.title;
mainContent.innerHTML = cached.html;
mainContent.className = cached.className;
// Re-execute scripts
this.executeScripts(mainContent);
// Re-initialize App
if (typeof window.initApp === 'function') {
window.initApp();
}
// Restore scroll
window.scrollTo(0, cached.scrollY);
return;
}
// Show loading state if needed
mainContent.style.opacity = '0.5';
try {
const response = await fetch(url);
const html = await response.text();
// Parse HTML
const parser = new DOMParser();
const doc = parser.parseFromString(html, 'text/html');
// Extract new content
const newContent = doc.getElementById(this.mainContentId);
if (!newContent) {
// Check if it's a full page not extending layout properly or error
console.error('Could not find mainContent in response');
window.location.href = url; // Fallback to full reload
return;
}
// Update title
document.title = doc.title;
// Replace content
mainContent.innerHTML = newContent.innerHTML;
mainContent.className = newContent.className; // Maintain classes
// Execute scripts found in the new content (critical for APP_CONFIG)
this.executeScripts(mainContent);
// Re-initialize App logic
if (typeof window.initApp === 'function') {
window.initApp();
}
// Scroll to top for new pages
window.scrollTo(0, 0);
// Save to cache (initial state of this page)
this.pageCache.set(url, {
html: newContent.innerHTML,
title: doc.title,
scrollY: 0,
className: newContent.className
});
} catch (error) {
console.error('Navigation error:', error);
// Fallback
window.location.href = url;
} finally {
mainContent.style.opacity = '1';
}
}
executeScripts(element) {
const scripts = element.querySelectorAll('script');
scripts.forEach(oldScript => {
const newScript = document.createElement('script');
Array.from(oldScript.attributes).forEach(attr => newScript.setAttribute(attr.name, attr.value));
newScript.textContent = oldScript.textContent;
oldScript.parentNode.replaceChild(newScript, oldScript);
});
}
updateSidebarActiveState(clickedLink) {
// Remove active class from all items
document.querySelectorAll('.yt-sidebar-item').forEach(item => item.classList.remove('active'));
// Add to clicked if it is a sidebar item
if (clickedLink.classList.contains('yt-sidebar-item')) {
clickedLink.classList.add('active');
} else {
// Try to find matching sidebar item
const path = new URL(clickedLink.href).pathname;
const match = document.querySelector(`.yt-sidebar-item[href="${path}"]`);
if (match) match.classList.add('active');
}
}
}
// Initialize
window.navigationManager = new NavigationManager();
/**
* KV-Tube Navigation Manager
* Handles SPA-style navigation to persist state (like downloads) across pages.
*/
class NavigationManager {
constructor() {
this.mainContentId = 'mainContent';
this.pageCache = new Map();
this.maxCacheSize = 20;
this.init();
}
init() {
// Handle browser back/forward buttons
window.addEventListener('popstate', (e) => {
if (e.state && e.state.url) {
this.loadPage(e.state.url, false);
} else {
// Fallback for initial state or external navigation
this.loadPage(window.location.href, false);
}
});
// Intercept clicks
document.addEventListener('click', (e) => {
// Find closest anchor tag
const link = e.target.closest('a');
// Check if it's an internal link and not a download/special link
if (link &&
link.href &&
link.href.startsWith(window.location.origin) &&
!link.getAttribute('download') &&
!link.getAttribute('target') &&
!link.classList.contains('no-spa') &&
!e.ctrlKey && !e.metaKey && !e.shiftKey // Allow new tab clicks
) {
e.preventDefault();
const url = link.href;
this.navigateTo(url);
// Update active state in sidebar
this.updateSidebarActiveState(link);
}
});
// Save initial state
const currentUrl = window.location.href;
if (!this.pageCache.has(currentUrl)) {
// We don't have the raw HTML, so we can't fully cache the initial page accurately
// without fetching it or serializing current DOM.
// For now, we will cache it upon *leaving* securely or just let the first visit be uncached.
// Better: Cache the current DOM state as the "initial" state.
this.saveCurrentState(currentUrl);
}
}
saveCurrentState(url) {
const mainContent = document.getElementById(this.mainContentId);
if (mainContent) {
this.pageCache.set(url, {
html: mainContent.innerHTML,
title: document.title,
scrollY: window.scrollY,
className: mainContent.className
});
// Prune cache
if (this.pageCache.size > this.maxCacheSize) {
const firstKey = this.pageCache.keys().next().value;
this.pageCache.delete(firstKey);
}
}
}
async navigateTo(url) {
// Start Progress Bar
const bar = document.getElementById('nprogress-bar');
if (bar) {
bar.style.opacity = '1';
bar.style.width = '30%';
}
// Save state of current page before leaving
this.saveCurrentState(window.location.href);
// Update history
history.pushState({ url: url }, '', url);
await this.loadPage(url);
}
async loadPage(url, pushState = true) {
const bar = document.getElementById('nprogress-bar');
if (bar) bar.style.width = '60%';
const mainContent = document.getElementById(this.mainContentId);
if (!mainContent) return;
// Check cache
if (this.pageCache.has(url)) {
const cached = this.pageCache.get(url);
// Restore content
document.title = cached.title;
mainContent.innerHTML = cached.html;
mainContent.className = cached.className;
// Re-execute scripts
this.executeScripts(mainContent);
// Re-initialize App
if (typeof window.initApp === 'function') {
window.initApp();
}
// Restore scroll
window.scrollTo(0, cached.scrollY);
return;
}
// Show loading state if needed
mainContent.style.opacity = '0.5';
try {
const response = await fetch(url);
const html = await response.text();
// Parse HTML
const parser = new DOMParser();
const doc = parser.parseFromString(html, 'text/html');
// Extract new content
const newContent = doc.getElementById(this.mainContentId);
if (!newContent) {
// Check if it's a full page not extending layout properly or error
console.error('Could not find mainContent in response');
window.location.href = url; // Fallback to full reload
return;
}
// Update title
document.title = doc.title;
// Replace content
mainContent.innerHTML = newContent.innerHTML;
mainContent.className = newContent.className; // Maintain classes
// Execute scripts found in the new content (critical for APP_CONFIG)
this.executeScripts(mainContent);
// Re-initialize App logic
if (typeof window.initApp === 'function') {
window.initApp();
}
// Scroll to top for new pages
window.scrollTo(0, 0);
// Save to cache (initial state of this page)
this.pageCache.set(url, {
html: newContent.innerHTML,
title: doc.title,
scrollY: 0,
className: newContent.className
});
} catch (error) {
console.error('Navigation error:', error);
// Fallback
window.location.href = url;
} finally {
mainContent.style.opacity = '1';
}
}
executeScripts(element) {
const scripts = element.querySelectorAll('script');
scripts.forEach(oldScript => {
const newScript = document.createElement('script');
Array.from(oldScript.attributes).forEach(attr => newScript.setAttribute(attr.name, attr.value));
newScript.textContent = oldScript.textContent;
oldScript.parentNode.replaceChild(newScript, oldScript);
});
}
updateSidebarActiveState(clickedLink) {
// Remove active class from all items
document.querySelectorAll('.yt-sidebar-item').forEach(item => item.classList.remove('active'));
// Add to clicked if it is a sidebar item
if (clickedLink.classList.contains('yt-sidebar-item')) {
clickedLink.classList.add('active');
} else {
// Try to find matching sidebar item
const path = new URL(clickedLink.href).pathname;
const match = document.querySelector(`.yt-sidebar-item[href="${path}"]`);
if (match) match.classList.add('active');
}
}
}
// Initialize
window.navigationManager = new NavigationManager();

0
static/manifest.json Executable file → Normal file
View file

0
static/sw.js Executable file → Normal file
View file

970
templates/channel.html Executable file → Normal file
View file

@ -1,486 +1,486 @@
{% extends "layout.html" %}
{% block content %}
<div class="yt-container yt-channel-page">
<!-- Channel Header (No Banner) -->
<div class="yt-channel-header">
<div class="yt-channel-info-row">
<div class="yt-channel-avatar-xl" id="channelAvatarLarge">
{% if channel.avatar %}
<img src="{{ channel.avatar }}">
{% else %}
<span id="channelAvatarLetter">{{ channel.title[0] | upper if channel.title and channel.title !=
'Loading...' else 'C' }}</span>
{% endif %}
</div>
<div class="yt-channel-meta">
<h1 id="channelTitle">{{ channel.title if channel.title and channel.title != 'Loading...' else
'Loading...' }}</h1>
<p class="yt-channel-handle" id="channelHandle">
{% if channel.title and channel.title != 'Loading...' %}@{{ channel.title|replace(' ', '') }}{% else
%}@Loading...{% endif %}
</p>
<div class="yt-channel-stats">
<span id="channelStats"></span>
</div>
</div>
</div>
</div>
<!-- Video Grid -->
<div class="yt-section">
<div class="yt-section-header">
<div class="yt-tabs">
<a href="javascript:void(0)" onclick="changeChannelTab('video', this); return false;"
class="active no-spa">
<i class="fas fa-video"></i>
<span>Videos</span>
</a>
<a href="javascript:void(0)" onclick="changeChannelTab('shorts', this); return false;" class="no-spa">
<i class="fas fa-bolt"></i>
<span>Shorts</span>
</a>
</div>
<div class="yt-sort-options">
<a href="javascript:void(0)" onclick="changeChannelSort('latest', this); return false;"
class="active no-spa">
<i class="fas fa-clock"></i>
<span>Latest</span>
</a>
<a href="javascript:void(0)" onclick="changeChannelSort('popular', this); return false;" class="no-spa">
<i class="fas fa-fire"></i>
<span>Popular</span>
</a>
<a href="javascript:void(0)" onclick="changeChannelSort('oldest', this); return false;" class="no-spa">
<i class="fas fa-history"></i>
<span>Oldest</span>
</a>
</div>
</div>
<div class="yt-video-grid" id="channelVideosGrid">
<!-- Videos loaded via JS -->
</div>
<div id="channelLoadingTrigger" style="height: 20px; margin: 20px 0;"></div>
</div>
</div>
<style>
.yt-channel-page {
padding-top: 40px;
padding-bottom: 40px;
max-width: 1200px;
margin: 0 auto;
}
/* Removed .yt-channel-banner */
.yt-channel-info-row {
display: flex;
align-items: flex-start;
gap: 32px;
margin-bottom: 32px;
padding: 0 16px;
}
.yt-channel-avatar-xl {
width: 160px;
height: 160px;
border-radius: 50%;
overflow: hidden;
background: linear-gradient(135deg, #FF6B6B 0%, #d62d2d 100%);
/* Simpler color for no-banner look */
display: flex;
align-items: center;
justify-content: center;
font-size: 64px;
font-weight: bold;
color: white;
flex-shrink: 0;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.yt-channel-avatar-xl img {
width: 100%;
height: 100%;
object-fit: cover;
}
.yt-channel-meta {
padding-top: 12px;
}
.yt-channel-meta h1 {
font-size: 32px;
margin-bottom: 8px;
font-weight: 700;
}
.yt-channel-handle {
color: var(--yt-text-secondary);
font-size: 16px;
margin-bottom: 12px;
}
.yt-channel-stats {
color: var(--yt-text-secondary);
font-size: 14px;
margin-bottom: 24px;
}
.yt-section-header {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 20px;
margin-bottom: 24px;
padding: 0 16px;
border-bottom: none;
}
.yt-tabs {
display: inline-flex;
gap: 8px;
background: var(--yt-bg-secondary);
padding: 6px;
border-radius: 16px;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
}
.yt-tabs a {
display: flex;
align-items: center;
gap: 8px;
padding: 12px 24px;
border-radius: 12px;
font-size: 0.95rem;
font-weight: 600;
color: var(--yt-text-secondary);
text-decoration: none;
transition: all 0.25s ease;
border: none;
background: transparent;
}
.yt-tabs a:hover {
color: var(--yt-text-primary);
background: var(--yt-bg-hover);
}
.yt-tabs a.active {
background: linear-gradient(135deg, #cc0000 0%, #ff4444 100%);
color: white;
box-shadow: 0 4px 12px rgba(204, 0, 0, 0.3);
}
.yt-sort-options {
display: inline-flex;
gap: 8px;
background: var(--yt-bg-secondary);
padding: 6px;
border-radius: 16px;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
}
.yt-sort-options a {
padding: 10px 20px;
border-radius: 12px;
background: transparent;
border: none;
color: var(--yt-text-secondary);
text-decoration: none;
font-size: 0.9rem;
font-weight: 600;
transition: all 0.25s ease;
}
.yt-sort-options a:hover {
background: var(--yt-bg-hover);
color: var(--yt-text-primary);
}
.yt-sort-options a.active {
background: linear-gradient(135deg, #cc0000 0%, #ff4444 100%);
color: white;
box-shadow: 0 4px 12px rgba(204, 0, 0, 0.3);
}
/* Shorts Card Styling override for Channel Page grid */
.yt-channel-short-card {
border-radius: var(--yt-radius-lg);
overflow: hidden;
cursor: pointer;
transition: transform 0.2s;
}
.yt-channel-short-card:hover {
transform: scale(1.02);
}
.yt-short-thumb-container {
aspect-ratio: 9/16;
width: 100%;
position: relative;
}
.yt-short-thumb {
width: 100%;
height: 100%;
object-fit: cover;
}
@media (max-width: 768px) {
.yt-channel-info-row {
flex-direction: column;
align-items: center;
text-align: center;
gap: 16px;
}
.yt-channel-avatar-xl {
width: 100px;
height: 100px;
font-size: 40px;
}
.yt-channel-meta h1 {
font-size: 24px;
}
.yt-section-header {
flex-direction: column;
gap: 16px;
align-items: flex-start;
}
.yt-tabs {
width: 100%;
justify-content: center;
}
}
</style>
<script>
(function () {
// IIFE to prevent variable redeclaration errors on SPA navigation
console.log("Channel.html script loaded, channelId will be:", "{{ channel.id }}");
var currentChannelSort = 'latest';
var currentChannelPage = 1;
var isChannelLoading = false;
var hasMoreChannelVideos = true;
var currentFilterType = 'video';
var channelId = "{{ channel.id }}";
// Store initial channel title from server template (don't overwrite with empty API data)
var initialChannelTitle = "{{ channel.title }}";
function init() {
console.log("Channel init called, fetching content...");
fetchChannelContent();
setupInfiniteScroll();
}
// Handle both initial page load and SPA navigation
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', init);
} else {
// DOM is already ready (SPA navigation)
init();
}
function changeChannelTab(type, btn) {
if (type === currentFilterType || isChannelLoading) return;
currentFilterType = type;
currentChannelPage = 1;
hasMoreChannelVideos = true;
document.getElementById('channelVideosGrid').innerHTML = '';
// Update Tabs UI
document.querySelectorAll('.yt-tabs a').forEach(a => a.classList.remove('active'));
btn.classList.add('active');
// Adjust Grid layout for Shorts vs Videos
const grid = document.getElementById('channelVideosGrid');
if (type === 'shorts') {
grid.style.gridTemplateColumns = 'repeat(auto-fill, minmax(200px, 1fr))';
} else {
grid.style.gridTemplateColumns = 'repeat(auto-fill, minmax(320px, 1fr))';
}
fetchChannelContent();
}
function changeChannelSort(sort, btn) {
if (isChannelLoading) return;
currentChannelSort = sort;
currentChannelPage = 1;
hasMoreChannelVideos = true;
document.getElementById('channelVideosGrid').innerHTML = ''; // Clear
// Update tabs
document.querySelectorAll('.yt-sort-options a').forEach(a => a.classList.remove('active'));
btn.classList.add('active');
fetchChannelContent();
}
async function fetchChannelContent() {
console.log("fetchChannelContent() called");
if (isChannelLoading || !hasMoreChannelVideos) {
console.log("Early return:", { isChannelLoading, hasMoreChannelVideos });
return;
}
isChannelLoading = true;
const grid = document.getElementById('channelVideosGrid');
// Append Loading indicator
if (typeof renderSkeleton === 'function') {
grid.insertAdjacentHTML('beforeend', renderSkeleton(4));
} else {
grid.insertAdjacentHTML('beforeend', '<div class="loading-text" style="color:var(--yt-text-secondary); padding: 20px;">Loading videos...</div>');
}
try {
console.log(`Fetching: /api/channel?id=${channelId}&page=${currentChannelPage}`);
const response = await fetch(`/api/channel?id=${channelId}&page=${currentChannelPage}&sort=${currentChannelSort}&filter_type=${currentFilterType}`);
const videos = await response.json();
console.log("Channel Videos Response:", videos);
// Remove skeletons (simple way: remove last N children or just clear all if page 1?
// Better: mark skeletons with class and remove)
// For simplicity in this v1: We just clear skeletons by removing elements with 'skeleton-card' class
document.querySelectorAll('#channelVideosGrid .skeleton-card').forEach(el => el.remove());
// Check if response is an error
if (videos.error) {
hasMoreChannelVideos = false;
grid.innerHTML = `<p style="padding:20px; color:var(--yt-text-secondary);">Error: ${videos.error}</p>`;
return;
}
if (!Array.isArray(videos) || videos.length === 0) {
hasMoreChannelVideos = false;
if (currentChannelPage === 1) grid.innerHTML = '<p style="padding:20px; color:var(--yt-text-secondary);">No videos found.</p>';
} else {
// Update channel header with uploader info from first video (on first page only)
if (currentChannelPage === 1 && videos[0]) {
// Use only proper channel/uploader fields - do NOT parse from title
let channelName = videos[0].channel || videos[0].uploader || '';
// Only update header if API returned a meaningful name
// (not empty, not just the channel ID, and not "Loading...")
if (channelName && channelName !== channelId &&
!channelName.startsWith('UC') && channelName !== 'Loading...') {
document.getElementById('channelTitle').textContent = channelName;
document.getElementById('channelHandle').textContent = '@' + channelName.replace(/\s+/g, '');
const avatarLetter = document.getElementById('channelAvatarLetter');
if (avatarLetter) avatarLetter.textContent = channelName.charAt(0).toUpperCase();
}
// If no meaningful name from API, keep the initial template-rendered title
}
videos.forEach(video => {
const card = document.createElement('div');
if (currentFilterType === 'shorts') {
// Render Vertical Short Card
card.className = 'yt-channel-short-card';
card.onclick = () => window.location.href = `/watch?v=${video.id}`;
card.innerHTML = `
<div class="yt-short-thumb-container">
<img src="${video.thumbnail}" class="yt-short-thumb loaded" loading="lazy" onload="this.classList.add('loaded')">
</div>
<div class="yt-details" style="padding: 8px;">
<h3 class="yt-video-title" style="font-size: 14px; margin-bottom: 4px;">${escapeHtml(video.title)}</h3>
<p class="yt-video-stats">${formatViews(video.view_count)} views</p>
</div>
`;
} else {
// Render Standard Video Card (Match Home)
card.className = 'yt-video-card';
card.onclick = () => window.location.href = `/watch?v=${video.id}`;
card.innerHTML = `
<div class="yt-thumbnail-container">
<img class="yt-thumbnail loaded" src="${video.thumbnail}" loading="lazy" onload="this.classList.add('loaded')">
${video.duration ? `<span class="yt-duration">${video.duration}</span>` : ''}
</div>
<div class="yt-video-details">
<div class="yt-video-meta">
<h3 class="yt-video-title">${escapeHtml(video.title)}</h3>
<p class="yt-video-stats">
${formatViews(video.view_count)} views • ${formatDate(video.upload_date)}
</p>
</div>
</div>
`;
}
grid.appendChild(card);
});
currentChannelPage++;
}
} catch (e) {
console.error(e);
} finally {
isChannelLoading = false;
document.querySelectorAll('#channelVideosGrid .skeleton-card').forEach(el => el.remove());
}
}
function setupInfiniteScroll() {
const trigger = document.getElementById('channelLoadingTrigger');
const observer = new IntersectionObserver((entries) => {
if (entries[0].isIntersecting) {
fetchChannelContent();
}
}, { threshold: 0.1 });
observer.observe(trigger);
}
// Helpers - Define locally to ensure availability
function escapeHtml(text) {
if (!text) return '';
const div = document.createElement('div');
div.textContent = text;
return div.innerHTML;
}
function formatViews(views) {
if (!views) return '0';
const num = parseInt(views);
if (num >= 1000000) return (num / 1000000).toFixed(1) + 'M';
if (num >= 1000) return (num / 1000).toFixed(0) + 'K';
return num.toLocaleString();
}
function formatDate(dateStr) {
if (!dateStr) return 'Recently';
try {
// Format: YYYYMMDD
const year = dateStr.substring(0, 4);
const month = dateStr.substring(4, 6);
const day = dateStr.substring(6, 8);
const date = new Date(year, month - 1, day);
const now = new Date();
const diff = now - date;
const days = Math.floor(diff / (1000 * 60 * 60 * 24));
if (days < 1) return 'Today';
if (days < 7) return `${days} days ago`;
if (days < 30) return `${Math.floor(days / 7)} weeks ago`;
if (days < 365) return `${Math.floor(days / 30)} months ago`;
return `${Math.floor(days / 365)} years ago`;
} catch (e) {
return 'Recently';
}
}
// Expose functions globally for onclick handlers
window.changeChannelTab = changeChannelTab;
window.changeChannelSort = changeChannelSort;
})();
</script>
{% extends "layout.html" %}
{% block content %}
<div class="yt-container yt-channel-page">
<!-- Channel Header (No Banner) -->
<div class="yt-channel-header">
<div class="yt-channel-info-row">
<div class="yt-channel-avatar-xl" id="channelAvatarLarge">
{% if channel.avatar %}
<img src="{{ channel.avatar }}">
{% else %}
<span id="channelAvatarLetter">{{ channel.title[0] | upper if channel.title and channel.title !=
'Loading...' else 'C' }}</span>
{% endif %}
</div>
<div class="yt-channel-meta">
<h1 id="channelTitle">{{ channel.title if channel.title and channel.title != 'Loading...' else
'Loading...' }}</h1>
<p class="yt-channel-handle" id="channelHandle">
{% if channel.title and channel.title != 'Loading...' %}@{{ channel.title|replace(' ', '') }}{% else
%}@Loading...{% endif %}
</p>
<div class="yt-channel-stats">
<span id="channelStats"></span>
</div>
</div>
</div>
</div>
<!-- Video Grid -->
<div class="yt-section">
<div class="yt-section-header">
<div class="yt-tabs">
<a href="javascript:void(0)" onclick="changeChannelTab('video', this); return false;"
class="active no-spa">
<i class="fas fa-video"></i>
<span>Videos</span>
</a>
<a href="javascript:void(0)" onclick="changeChannelTab('shorts', this); return false;" class="no-spa">
<i class="fas fa-bolt"></i>
<span>Shorts</span>
</a>
</div>
<div class="yt-sort-options">
<a href="javascript:void(0)" onclick="changeChannelSort('latest', this); return false;"
class="active no-spa">
<i class="fas fa-clock"></i>
<span>Latest</span>
</a>
<a href="javascript:void(0)" onclick="changeChannelSort('popular', this); return false;" class="no-spa">
<i class="fas fa-fire"></i>
<span>Popular</span>
</a>
<a href="javascript:void(0)" onclick="changeChannelSort('oldest', this); return false;" class="no-spa">
<i class="fas fa-history"></i>
<span>Oldest</span>
</a>
</div>
</div>
<div class="yt-video-grid" id="channelVideosGrid">
<!-- Videos loaded via JS -->
</div>
<div id="channelLoadingTrigger" style="height: 20px; margin: 20px 0;"></div>
</div>
</div>
<style>
.yt-channel-page {
padding-top: 40px;
padding-bottom: 40px;
max-width: 1200px;
margin: 0 auto;
}
/* Removed .yt-channel-banner */
.yt-channel-info-row {
display: flex;
align-items: flex-start;
gap: 32px;
margin-bottom: 32px;
padding: 0 16px;
}
.yt-channel-avatar-xl {
width: 160px;
height: 160px;
border-radius: 50%;
overflow: hidden;
background: linear-gradient(135deg, #FF6B6B 0%, #d62d2d 100%);
/* Simpler color for no-banner look */
display: flex;
align-items: center;
justify-content: center;
font-size: 64px;
font-weight: bold;
color: white;
flex-shrink: 0;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.yt-channel-avatar-xl img {
width: 100%;
height: 100%;
object-fit: cover;
}
.yt-channel-meta {
padding-top: 12px;
}
.yt-channel-meta h1 {
font-size: 32px;
margin-bottom: 8px;
font-weight: 700;
}
.yt-channel-handle {
color: var(--yt-text-secondary);
font-size: 16px;
margin-bottom: 12px;
}
.yt-channel-stats {
color: var(--yt-text-secondary);
font-size: 14px;
margin-bottom: 24px;
}
.yt-section-header {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 20px;
margin-bottom: 24px;
padding: 0 16px;
border-bottom: none;
}
.yt-tabs {
display: inline-flex;
gap: 8px;
background: var(--yt-bg-secondary);
padding: 6px;
border-radius: 16px;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
}
.yt-tabs a {
display: flex;
align-items: center;
gap: 8px;
padding: 12px 24px;
border-radius: 12px;
font-size: 0.95rem;
font-weight: 600;
color: var(--yt-text-secondary);
text-decoration: none;
transition: all 0.25s ease;
border: none;
background: transparent;
}
.yt-tabs a:hover {
color: var(--yt-text-primary);
background: var(--yt-bg-hover);
}
.yt-tabs a.active {
background: linear-gradient(135deg, #cc0000 0%, #ff4444 100%);
color: white;
box-shadow: 0 4px 12px rgba(204, 0, 0, 0.3);
}
.yt-sort-options {
display: inline-flex;
gap: 8px;
background: var(--yt-bg-secondary);
padding: 6px;
border-radius: 16px;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
}
.yt-sort-options a {
padding: 10px 20px;
border-radius: 12px;
background: transparent;
border: none;
color: var(--yt-text-secondary);
text-decoration: none;
font-size: 0.9rem;
font-weight: 600;
transition: all 0.25s ease;
}
.yt-sort-options a:hover {
background: var(--yt-bg-hover);
color: var(--yt-text-primary);
}
.yt-sort-options a.active {
background: linear-gradient(135deg, #cc0000 0%, #ff4444 100%);
color: white;
box-shadow: 0 4px 12px rgba(204, 0, 0, 0.3);
}
/* Shorts Card Styling override for Channel Page grid */
.yt-channel-short-card {
border-radius: var(--yt-radius-lg);
overflow: hidden;
cursor: pointer;
transition: transform 0.2s;
}
.yt-channel-short-card:hover {
transform: scale(1.02);
}
.yt-short-thumb-container {
aspect-ratio: 9/16;
width: 100%;
position: relative;
}
.yt-short-thumb {
width: 100%;
height: 100%;
object-fit: cover;
}
@media (max-width: 768px) {
.yt-channel-info-row {
flex-direction: column;
align-items: center;
text-align: center;
gap: 16px;
}
.yt-channel-avatar-xl {
width: 100px;
height: 100px;
font-size: 40px;
}
.yt-channel-meta h1 {
font-size: 24px;
}
.yt-section-header {
flex-direction: column;
gap: 16px;
align-items: flex-start;
}
.yt-tabs {
width: 100%;
justify-content: center;
}
}
</style>
<script>
(function () {
// IIFE to prevent variable redeclaration errors on SPA navigation
console.log("Channel.html script loaded, channelId will be:", "{{ channel.id }}");
var currentChannelSort = 'latest';
var currentChannelPage = 1;
var isChannelLoading = false;
var hasMoreChannelVideos = true;
var currentFilterType = 'video';
var channelId = "{{ channel.id }}";
// Store initial channel title from server template (don't overwrite with empty API data)
var initialChannelTitle = "{{ channel.title }}";
function init() {
console.log("Channel init called, fetching content...");
fetchChannelContent();
setupInfiniteScroll();
}
// Handle both initial page load and SPA navigation
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', init);
} else {
// DOM is already ready (SPA navigation)
init();
}
function changeChannelTab(type, btn) {
if (type === currentFilterType || isChannelLoading) return;
currentFilterType = type;
currentChannelPage = 1;
hasMoreChannelVideos = true;
document.getElementById('channelVideosGrid').innerHTML = '';
// Update Tabs UI
document.querySelectorAll('.yt-tabs a').forEach(a => a.classList.remove('active'));
btn.classList.add('active');
// Adjust Grid layout for Shorts vs Videos
const grid = document.getElementById('channelVideosGrid');
if (type === 'shorts') {
grid.style.gridTemplateColumns = 'repeat(auto-fill, minmax(200px, 1fr))';
} else {
grid.style.gridTemplateColumns = 'repeat(auto-fill, minmax(320px, 1fr))';
}
fetchChannelContent();
}
function changeChannelSort(sort, btn) {
if (isChannelLoading) return;
currentChannelSort = sort;
currentChannelPage = 1;
hasMoreChannelVideos = true;
document.getElementById('channelVideosGrid').innerHTML = ''; // Clear
// Update tabs
document.querySelectorAll('.yt-sort-options a').forEach(a => a.classList.remove('active'));
btn.classList.add('active');
fetchChannelContent();
}
async function fetchChannelContent() {
console.log("fetchChannelContent() called");
if (isChannelLoading || !hasMoreChannelVideos) {
console.log("Early return:", { isChannelLoading, hasMoreChannelVideos });
return;
}
isChannelLoading = true;
const grid = document.getElementById('channelVideosGrid');
// Append Loading indicator
if (typeof renderSkeleton === 'function') {
grid.insertAdjacentHTML('beforeend', renderSkeleton(4));
} else {
grid.insertAdjacentHTML('beforeend', '<div class="loading-text" style="color:var(--yt-text-secondary); padding: 20px;">Loading videos...</div>');
}
try {
console.log(`Fetching: /api/channel?id=${channelId}&page=${currentChannelPage}`);
const response = await fetch(`/api/channel?id=${channelId}&page=${currentChannelPage}&sort=${currentChannelSort}&filter_type=${currentFilterType}`);
const videos = await response.json();
console.log("Channel Videos Response:", videos);
// Remove skeletons (simple way: remove last N children or just clear all if page 1?
// Better: mark skeletons with class and remove)
// For simplicity in this v1: We just clear skeletons by removing elements with 'skeleton-card' class
document.querySelectorAll('#channelVideosGrid .skeleton-card').forEach(el => el.remove());
// Check if response is an error
if (videos.error) {
hasMoreChannelVideos = false;
grid.innerHTML = `<p style="padding:20px; color:var(--yt-text-secondary);">Error: ${videos.error}</p>`;
return;
}
if (!Array.isArray(videos) || videos.length === 0) {
hasMoreChannelVideos = false;
if (currentChannelPage === 1) grid.innerHTML = '<p style="padding:20px; color:var(--yt-text-secondary);">No videos found.</p>';
} else {
// Update channel header with uploader info from first video (on first page only)
if (currentChannelPage === 1 && videos[0]) {
// Use only proper channel/uploader fields - do NOT parse from title
let channelName = videos[0].channel || videos[0].uploader || '';
// Only update header if API returned a meaningful name
// (not empty, not just the channel ID, and not "Loading...")
if (channelName && channelName !== channelId &&
!channelName.startsWith('UC') && channelName !== 'Loading...') {
document.getElementById('channelTitle').textContent = channelName;
document.getElementById('channelHandle').textContent = '@' + channelName.replace(/\s+/g, '');
const avatarLetter = document.getElementById('channelAvatarLetter');
if (avatarLetter) avatarLetter.textContent = channelName.charAt(0).toUpperCase();
}
// If no meaningful name from API, keep the initial template-rendered title
}
videos.forEach(video => {
const card = document.createElement('div');
if (currentFilterType === 'shorts') {
// Render Vertical Short Card
card.className = 'yt-channel-short-card';
card.onclick = () => window.location.href = `/watch?v=${video.id}`;
card.innerHTML = `
<div class="yt-short-thumb-container">
<img src="${video.thumbnail}" class="yt-short-thumb loaded" loading="lazy" onload="this.classList.add('loaded')">
</div>
<div class="yt-details" style="padding: 8px;">
<h3 class="yt-video-title" style="font-size: 14px; margin-bottom: 4px;">${escapeHtml(video.title)}</h3>
<p class="yt-video-stats">${formatViews(video.view_count)} views</p>
</div>
`;
} else {
// Render Standard Video Card (Match Home)
card.className = 'yt-video-card';
card.onclick = () => window.location.href = `/watch?v=${video.id}`;
card.innerHTML = `
<div class="yt-thumbnail-container">
<img class="yt-thumbnail loaded" src="${video.thumbnail}" loading="lazy" onload="this.classList.add('loaded')">
${video.duration ? `<span class="yt-duration">${video.duration}</span>` : ''}
</div>
<div class="yt-video-details">
<div class="yt-video-meta">
<h3 class="yt-video-title">${escapeHtml(video.title)}</h3>
<p class="yt-video-stats">
${formatViews(video.view_count)} views • ${formatDate(video.upload_date)}
</p>
</div>
</div>
`;
}
grid.appendChild(card);
});
currentChannelPage++;
}
} catch (e) {
console.error(e);
} finally {
isChannelLoading = false;
document.querySelectorAll('#channelVideosGrid .skeleton-card').forEach(el => el.remove());
}
}
function setupInfiniteScroll() {
const trigger = document.getElementById('channelLoadingTrigger');
const observer = new IntersectionObserver((entries) => {
if (entries[0].isIntersecting) {
fetchChannelContent();
}
}, { threshold: 0.1 });
observer.observe(trigger);
}
// Helpers - Define locally to ensure availability
function escapeHtml(text) {
if (!text) return '';
const div = document.createElement('div');
div.textContent = text;
return div.innerHTML;
}
function formatViews(views) {
if (!views) return '0';
const num = parseInt(views);
if (num >= 1000000) return (num / 1000000).toFixed(1) + 'M';
if (num >= 1000) return (num / 1000).toFixed(0) + 'K';
return num.toLocaleString();
}
function formatDate(dateStr) {
if (!dateStr) return 'Recently';
try {
// Format: YYYYMMDD
const year = dateStr.substring(0, 4);
const month = dateStr.substring(4, 6);
const day = dateStr.substring(6, 8);
const date = new Date(year, month - 1, day);
const now = new Date();
const diff = now - date;
const days = Math.floor(diff / (1000 * 60 * 60 * 24));
if (days < 1) return 'Today';
if (days < 7) return `${days} days ago`;
if (days < 30) return `${Math.floor(days / 7)} weeks ago`;
if (days < 365) return `${Math.floor(days / 30)} months ago`;
return `${Math.floor(days / 365)} years ago`;
} catch (e) {
return 'Recently';
}
}
// Expose functions globally for onclick handlers
window.changeChannelTab = changeChannelTab;
window.changeChannelSort = changeChannelSort;
})();
</script>
{% endblock %}

408
templates/downloads.html Executable file → Normal file
View file

@ -1,205 +1,205 @@
{% extends "layout.html" %}
{% block content %}
<link rel="stylesheet" href="{{ url_for('static', filename='css/modules/downloads.css') }}">
<div class="downloads-page">
<div class="downloads-header">
<h1><i class="fas fa-download"></i> Downloads</h1>
<button class="downloads-clear-btn" onclick="clearAllDownloads()">
<i class="fas fa-trash"></i> Clear All
</button>
</div>
<div id="downloadsList" class="downloads-list">
<!-- Downloads populated by JS -->
</div>
<div id="downloadsEmpty" class="downloads-empty" style="display: none;">
<i class="fas fa-download"></i>
<p>No downloads yet</p>
<p>Videos you download will appear here</p>
</div>
</div>
<script>
function renderDownloads() {
const list = document.getElementById('downloadsList');
const empty = document.getElementById('downloadsEmpty');
if (!list || !empty) return;
// Safety check for download manager
if (!window.downloadManager) {
console.log('Download manager not ready, retrying...');
setTimeout(renderDownloads, 100);
return;
}
const activeDownloads = window.downloadManager.getActiveDownloads();
const library = window.downloadManager.getLibrary();
if (library.length === 0 && activeDownloads.length === 0) {
list.style.display = 'none';
empty.style.display = 'block';
return;
}
list.style.display = 'flex';
empty.style.display = 'none';
// Render Active Downloads
const activeHtml = activeDownloads.map(item => {
const specs = item.specs ?
(item.type === 'video' ?
`${item.specs.resolution || ''} ${item.specs.vcodec ? '• ' + item.specs.vcodec : ''}` :
`${item.specs.acodec || ''} • ${item.specs.bitrate ? item.specs.bitrate + 'kbps' : ''}`
).trim() : '';
const isPaused = item.status === 'paused';
return `
<div class="download-item active ${isPaused ? 'paused' : ''}" data-id="${item.id}">
<img src="${item.thumbnail || 'https://i.ytimg.com/vi/' + item.videoId + '/mqdefault.jpg'}"
class="download-item-thumb">
<div class="download-item-info">
<div class="download-item-title">${escapeHtml(item.title)}</div>
<div class="download-item-meta">
<span class="status-text">
${isPaused ? '<i class="fas fa-pause-circle"></i> Paused • ' : ''}
${item.speedDisplay ? `<i class="fas fa-bolt"></i> ${item.speedDisplay} • ` : ''}
${item.eta ? `<i class="fas fa-clock"></i> ${item.eta} • ` : ''}
${isPaused ? 'Resuming...' : 'Downloading...'} ${item.progress}%
</span>
</div>
${specs ? `<div class="download-item-specs"><small>${specs}</small></div>` : ''}
<div class="download-progress-container">
<div class="download-progress-bar ${isPaused ? 'paused' : ''}" style="width: ${item.progress}%"></div>
</div>
</div>
<div class="download-item-actions">
<button class="download-item-pause" onclick="togglePause('${item.id}')" title="${isPaused ? 'Resume' : 'Pause'}">
<i class="fas ${isPaused ? 'fa-play' : 'fa-pause'}"></i>
</button>
<button class="download-item-remove" onclick="cancelDownload('${item.id}')" title="Cancel">
<i class="fas fa-stop"></i>
</button>
</div>
</div>
`}).join('');
// Render History - with playback support
const historyHtml = library.map(item => {
const specs = item.specs ?
(item.type === 'video' ?
`${item.specs.resolution || ''} ${item.specs.vcodec ? '• ' + item.specs.vcodec : ''}` :
`${item.specs.acodec || ''} • ${item.specs.bitrate ? item.specs.bitrate + 'kbps' : ''}`
).trim() : '';
return `
<div class="download-item playable" data-id="${item.id}" data-video-id="${item.videoId}" onclick="playDownload('${item.videoId}', event)">
<div class="download-item-thumb-wrapper">
<img src="${item.thumbnail || 'https://i.ytimg.com/vi/' + item.videoId + '/mqdefault.jpg'}"
class="download-item-thumb"
onerror="this.src='https://via.placeholder.com/160x90?text=No+Thumbnail'">
<div class="download-thumb-overlay">
<i class="fas fa-play"></i>
</div>
</div>
<div class="download-item-info">
<div class="download-item-title">${escapeHtml(item.title)}</div>
<div class="download-item-meta">
${item.quality} · ${item.type} · ${formatDate(item.downloadedAt)}
${specs ? `<span class="meta-specs">• ${specs}</span>` : ''}
</div>
</div>
<div class="download-item-actions">
<button class="download-item-play" onclick="playDownload('${item.videoId}', event); event.stopPropagation();" title="Play">
<i class="fas fa-play"></i>
</button>
<button class="download-item-redownload" onclick="reDownload('${item.videoId}', event); event.stopPropagation();" title="Download Again">
<i class="fas fa-download"></i>
</button>
<button class="download-item-remove" onclick="removeDownload('${item.id}'); event.stopPropagation();" title="Remove">
<i class="fas fa-times"></i>
</button>
</div>
</div>
`}).join('');
list.innerHTML = activeHtml + historyHtml;
}
function cancelDownload(id) {
window.downloadManager.cancelDownload(id);
renderDownloads();
}
function removeDownload(id) {
window.downloadManager.removeFromLibrary(id);
renderDownloads();
}
function togglePause(id) {
const downloads = window.downloadManager.activeDownloads;
const state = downloads.get(id);
if (!state) return;
if (state.item.status === 'paused') {
window.downloadManager.resumeDownload(id);
} else {
window.downloadManager.pauseDownload(id);
}
// renderDownloads will be called by event listener
}
function clearAllDownloads() {
if (confirm('Remove all downloads from history?')) {
window.downloadManager.clearLibrary();
renderDownloads();
}
}
function playDownload(videoId, event) {
if (event) event.preventDefault();
// Navigate to watch page for this video
window.location.href = `/watch?v=${videoId}`;
}
function reDownload(videoId, event) {
if (event) event.preventDefault();
// Open download modal for this video
if (typeof showDownloadModal === 'function') {
showDownloadModal(videoId);
} else {
// Fallback: navigate to watch page
window.location.href = `/watch?v=${videoId}`;
}
}
function escapeHtml(text) {
const div = document.createElement('div');
div.textContent = text;
return div.innerHTML;
}
function formatDate(dateStr) {
if (!dateStr) return '';
const date = new Date(dateStr);
return date.toLocaleDateString();
}
// Render on load with slight delay for download manager
document.addEventListener('DOMContentLoaded', () => setTimeout(renderDownloads, 200));
// Listen for real-time updates
// Listen for real-time updates - Prevent duplicates
if (window._kvDownloadListener) {
window.removeEventListener('download-updated', window._kvDownloadListener);
}
window._kvDownloadListener = renderDownloads;
window.addEventListener('download-updated', renderDownloads);
</script>
{% extends "layout.html" %}
{% block content %}
<link rel="stylesheet" href="{{ url_for('static', filename='css/modules/downloads.css') }}">
<div class="downloads-page">
<div class="downloads-header">
<h1><i class="fas fa-download"></i> Downloads</h1>
<button class="downloads-clear-btn" onclick="clearAllDownloads()">
<i class="fas fa-trash"></i> Clear All
</button>
</div>
<div id="downloadsList" class="downloads-list">
<!-- Downloads populated by JS -->
</div>
<div id="downloadsEmpty" class="downloads-empty" style="display: none;">
<i class="fas fa-download"></i>
<p>No downloads yet</p>
<p>Videos you download will appear here</p>
</div>
</div>
<script>
function renderDownloads() {
const list = document.getElementById('downloadsList');
const empty = document.getElementById('downloadsEmpty');
if (!list || !empty) return;
// Safety check for download manager
if (!window.downloadManager) {
console.log('Download manager not ready, retrying...');
setTimeout(renderDownloads, 100);
return;
}
const activeDownloads = window.downloadManager.getActiveDownloads();
const library = window.downloadManager.getLibrary();
if (library.length === 0 && activeDownloads.length === 0) {
list.style.display = 'none';
empty.style.display = 'block';
return;
}
list.style.display = 'flex';
empty.style.display = 'none';
// Render Active Downloads
const activeHtml = activeDownloads.map(item => {
const specs = item.specs ?
(item.type === 'video' ?
`${item.specs.resolution || ''} ${item.specs.vcodec ? '• ' + item.specs.vcodec : ''}` :
`${item.specs.acodec || ''} • ${item.specs.bitrate ? item.specs.bitrate + 'kbps' : ''}`
).trim() : '';
const isPaused = item.status === 'paused';
return `
<div class="download-item active ${isPaused ? 'paused' : ''}" data-id="${item.id}">
<img src="${item.thumbnail || 'https://i.ytimg.com/vi/' + item.videoId + '/mqdefault.jpg'}"
class="download-item-thumb">
<div class="download-item-info">
<div class="download-item-title">${escapeHtml(item.title)}</div>
<div class="download-item-meta">
<span class="status-text">
${isPaused ? '<i class="fas fa-pause-circle"></i> Paused • ' : ''}
${item.speedDisplay ? `<i class="fas fa-bolt"></i> ${item.speedDisplay} • ` : ''}
${item.eta ? `<i class="fas fa-clock"></i> ${item.eta} • ` : ''}
${isPaused ? 'Resuming...' : 'Downloading...'} ${item.progress}%
</span>
</div>
${specs ? `<div class="download-item-specs"><small>${specs}</small></div>` : ''}
<div class="download-progress-container">
<div class="download-progress-bar ${isPaused ? 'paused' : ''}" style="width: ${item.progress}%"></div>
</div>
</div>
<div class="download-item-actions">
<button class="download-item-pause" onclick="togglePause('${item.id}')" title="${isPaused ? 'Resume' : 'Pause'}">
<i class="fas ${isPaused ? 'fa-play' : 'fa-pause'}"></i>
</button>
<button class="download-item-remove" onclick="cancelDownload('${item.id}')" title="Cancel">
<i class="fas fa-stop"></i>
</button>
</div>
</div>
`}).join('');
// Render History - with playback support
const historyHtml = library.map(item => {
const specs = item.specs ?
(item.type === 'video' ?
`${item.specs.resolution || ''} ${item.specs.vcodec ? '• ' + item.specs.vcodec : ''}` :
`${item.specs.acodec || ''} • ${item.specs.bitrate ? item.specs.bitrate + 'kbps' : ''}`
).trim() : '';
return `
<div class="download-item playable" data-id="${item.id}" data-video-id="${item.videoId}" onclick="playDownload('${item.videoId}', event)">
<div class="download-item-thumb-wrapper">
<img src="${item.thumbnail || 'https://i.ytimg.com/vi/' + item.videoId + '/mqdefault.jpg'}"
class="download-item-thumb"
onerror="this.src='https://via.placeholder.com/160x90?text=No+Thumbnail'">
<div class="download-thumb-overlay">
<i class="fas fa-play"></i>
</div>
</div>
<div class="download-item-info">
<div class="download-item-title">${escapeHtml(item.title)}</div>
<div class="download-item-meta">
${item.quality} · ${item.type} · ${formatDate(item.downloadedAt)}
${specs ? `<span class="meta-specs">• ${specs}</span>` : ''}
</div>
</div>
<div class="download-item-actions">
<button class="download-item-play" onclick="playDownload('${item.videoId}', event); event.stopPropagation();" title="Play">
<i class="fas fa-play"></i>
</button>
<button class="download-item-redownload" onclick="reDownload('${item.videoId}', event); event.stopPropagation();" title="Download Again">
<i class="fas fa-download"></i>
</button>
<button class="download-item-remove" onclick="removeDownload('${item.id}'); event.stopPropagation();" title="Remove">
<i class="fas fa-times"></i>
</button>
</div>
</div>
`}).join('');
list.innerHTML = activeHtml + historyHtml;
}
function cancelDownload(id) {
window.downloadManager.cancelDownload(id);
renderDownloads();
}
function removeDownload(id) {
window.downloadManager.removeFromLibrary(id);
renderDownloads();
}
function togglePause(id) {
const downloads = window.downloadManager.activeDownloads;
const state = downloads.get(id);
if (!state) return;
if (state.item.status === 'paused') {
window.downloadManager.resumeDownload(id);
} else {
window.downloadManager.pauseDownload(id);
}
// renderDownloads will be called by event listener
}
function clearAllDownloads() {
if (confirm('Remove all downloads from history?')) {
window.downloadManager.clearLibrary();
renderDownloads();
}
}
function playDownload(videoId, event) {
if (event) event.preventDefault();
// Navigate to watch page for this video
window.location.href = `/watch?v=${videoId}`;
}
function reDownload(videoId, event) {
if (event) event.preventDefault();
// Open download modal for this video
if (typeof showDownloadModal === 'function') {
showDownloadModal(videoId);
} else {
// Fallback: navigate to watch page
window.location.href = `/watch?v=${videoId}`;
}
}
function escapeHtml(text) {
const div = document.createElement('div');
div.textContent = text;
return div.innerHTML;
}
function formatDate(dateStr) {
if (!dateStr) return '';
const date = new Date(dateStr);
return date.toLocaleDateString();
}
// Render on load with slight delay for download manager
document.addEventListener('DOMContentLoaded', () => setTimeout(renderDownloads, 200));
// Listen for real-time updates
// Listen for real-time updates - Prevent duplicates
if (window._kvDownloadListener) {
window.removeEventListener('download-updated', window._kvDownloadListener);
}
window._kvDownloadListener = renderDownloads;
window.addEventListener('download-updated', renderDownloads);
</script>
{% endblock %}

434
templates/index.html Executable file → Normal file
View file

@ -1,219 +1,217 @@
{% extends "layout.html" %}
{% block content %}
<script>
window.APP_CONFIG = {
page: '{{ page|default("home") }}',
channelId: '{{ channel_id|default("") }}',
query: '{{ query|default("") }}'
};
</script>
<!-- Filters & Categories -->
<div class="yt-filter-bar">
<div class="yt-categories" id="categoryList">
<!-- Pinned Categories -->
<button class="yt-chip" onclick="switchCategory('history', this)"><i class="fas fa-history"></i>
Watched</button>
<button class="yt-chip" onclick="switchCategory('suggested', this)"><i class="fas fa-magic"></i>
Suggested</button>
<!-- Standard Categories -->
<button class="yt-chip" onclick="switchCategory('tech', this)">Tech</button>
<button class="yt-chip" onclick="switchCategory('music', this)">Music</button>
<button class="yt-chip" onclick="switchCategory('movies', this)">Movies</button>
<button class="yt-chip" onclick="switchCategory('news', this)">News</button>
<button class="yt-chip" onclick="switchCategory('trending', this)">Trending</button>
<button class="yt-chip" onclick="switchCategory('podcasts', this)">Podcasts</button>
<button class="yt-chip" onclick="switchCategory('live', this)">Live</button>
<button class="yt-chip" onclick="switchCategory('gaming', this)">Gaming</button>
<button class="yt-chip" onclick="switchCategory('sports', this)">Sports</button>
</div>
<div class="yt-filter-actions">
<div class="yt-dropdown">
<button class="yt-icon-btn" id="filterToggleBtn" onclick="toggleFilterMenu()">
<i class="fas fa-sliders-h"></i>
</button>
<div class="yt-dropdown-menu" id="filterMenu">
<div class="yt-menu-section">
<h4>Sort By</h4>
<button onclick="changeSort('day')">Today</button>
<button onclick="changeSort('week')">This Week</button>
<button onclick="changeSort('month')">This Month</button>
<button onclick="changeSort('3months')">Last 3 Months</button>
<button onclick="changeSort('year')">This Year</button>
</div>
<div class="yt-menu-section">
<h4>Region</h4>
<button onclick="changeRegion('vietnam')">Vietnam</button>
<button onclick="changeRegion('global')">Global</button>
</div>
</div>
</div>
</div>
</div>
<!-- Shorts Section -->
<!-- Videos Section -->
<div id="videosSection" class="yt-section">
<div class="yt-section-header" style="display:none;">
<h2><i class="fas fa-play-circle"></i> Videos</h2>
</div>
<div id="resultsArea" class="yt-video-grid">
<!-- Initial Skeleton State -->
<!-- Initial Skeleton State (12 items) -->
<div class="yt-video-card skeleton-card">
<div class="skeleton-thumb skeleton"></div>
<div class="skeleton-details">
<div class="skeleton-avatar skeleton"></div>
<div class="skeleton-text">
<div class="skeleton-title skeleton"></div>
<div class="skeleton-meta skeleton"></div>
</div>
</div>
</div>
<div class="yt-video-card skeleton-card">
<div class="skeleton-thumb skeleton"></div>
<div class="skeleton-details">
<div class="skeleton-avatar skeleton"></div>
<div class="skeleton-text">
<div class="skeleton-title skeleton"></div>
<div class="skeleton-meta skeleton"></div>
</div>
</div>
</div>
<div class="yt-video-card skeleton-card">
<div class="skeleton-thumb skeleton"></div>
<div class="skeleton-details">
<div class="skeleton-avatar skeleton"></div>
<div class="skeleton-text">
<div class="skeleton-title skeleton"></div>
<div class="skeleton-meta skeleton"></div>
</div>
</div>
</div>
<div class="yt-video-card skeleton-card">
<div class="skeleton-thumb skeleton"></div>
<div class="skeleton-details">
<div class="skeleton-avatar skeleton"></div>
<div class="skeleton-text">
<div class="skeleton-title skeleton"></div>
<div class="skeleton-meta skeleton"></div>
</div>
</div>
</div>
<div class="yt-video-card skeleton-card">
<div class="skeleton-thumb skeleton"></div>
<div class="skeleton-details">
<div class="skeleton-avatar skeleton"></div>
<div class="skeleton-text">
<div class="skeleton-title skeleton"></div>
<div class="skeleton-meta skeleton"></div>
</div>
</div>
</div>
<div class="yt-video-card skeleton-card">
<div class="skeleton-thumb skeleton"></div>
<div class="skeleton-details">
<div class="skeleton-avatar skeleton"></div>
<div class="skeleton-text">
<div class="skeleton-title skeleton"></div>
<div class="skeleton-meta skeleton"></div>
</div>
</div>
</div>
<div class="yt-video-card skeleton-card">
<div class="skeleton-thumb skeleton"></div>
<div class="skeleton-details">
<div class="skeleton-avatar skeleton"></div>
<div class="skeleton-text">
<div class="skeleton-title skeleton"></div>
<div class="skeleton-meta skeleton"></div>
</div>
</div>
</div>
<div class="yt-video-card skeleton-card">
<div class="skeleton-thumb skeleton"></div>
<div class="skeleton-details">
<div class="skeleton-avatar skeleton"></div>
<div class="skeleton-text">
<div class="skeleton-title skeleton"></div>
<div class="skeleton-meta skeleton"></div>
</div>
</div>
</div>
</div>
</div>
<!-- Styles moved to CSS modules -->
<script>
// Global filter state
// Global filter state
var currentSort = 'month';
var currentRegion = 'vietnam';
function toggleFilterMenu() {
const menu = document.getElementById('filterMenu');
if (menu) menu.classList.toggle('show');
}
// Close menu when clicking outside - Prevent multiple listeners
if (!window.filterMenuListenerAttached) {
document.addEventListener('click', function (e) {
const menu = document.getElementById('filterMenu');
const btn = document.getElementById('filterToggleBtn');
// Only run if elements exist (we are on home page)
if (menu && btn && !menu.contains(e.target) && !btn.contains(e.target)) {
menu.classList.remove('show');
}
});
window.filterMenuListenerAttached = true;
}
function changeSort(sort) {
window.currentSort = sort;
// Global loadTrending from main.js will use this
loadTrending(true);
toggleFilterMenu();
}
function changeRegion(region) {
window.currentRegion = region;
loadTrending(true);
toggleFilterMenu();
}
// Helpers (if main.js not loaded yet or for standalone usage)
function escapeHtml(text) {
if (!text) return '';
const div = document.createElement('div');
div.textContent = text;
return div.innerHTML;
}
function formatViews(views) {
if (!views) return '0';
const num = parseInt(views);
if (num >= 1000000) return (num / 1000000).toFixed(1) + 'M';
if (num >= 1000) return (num / 1000).toFixed(0) + 'K';
return num.toLocaleString();
}
// Init Logic
document.addEventListener('DOMContentLoaded', () => {
// Pagination logic removed for infinite scroll
// Check URL params for category
const urlParams = new URLSearchParams(window.location.search);
const category = urlParams.get('category');
if (category && typeof switchCategory === 'function') {
// Let main.js handle the switch, but we can set UI active state if needed
// switchCategory is in main.js
switchCategory(category);
}
});
</script>
{% extends "layout.html" %}
{% block content %}
<script>
window.APP_CONFIG = {
page: '{{ page|default("home") }}',
channelId: '{{ channel_id|default("") }}',
query: '{{ query|default("") }}'
};
</script>
<!-- Filters & Categories -->
<div class="yt-filter-bar">
<div class="yt-categories" id="categoryList">
<!-- Pinned Categories -->
<button class="yt-chip" onclick="switchCategory('suggested', this)"><i class="fas fa-magic"></i>
Suggested</button>
<!-- Standard Categories -->
<button class="yt-chip" onclick="switchCategory('tech', this)">Tech</button>
<button class="yt-chip" onclick="switchCategory('music', this)">Music</button>
<button class="yt-chip" onclick="switchCategory('movies', this)">Movies</button>
<button class="yt-chip" onclick="switchCategory('news', this)">News</button>
<button class="yt-chip" onclick="switchCategory('trending', this)">Trending</button>
<button class="yt-chip" onclick="switchCategory('podcasts', this)">Podcasts</button>
<button class="yt-chip" onclick="switchCategory('live', this)">Live</button>
<button class="yt-chip" onclick="switchCategory('gaming', this)">Gaming</button>
<button class="yt-chip" onclick="switchCategory('sports', this)">Sports</button>
</div>
<div class="yt-filter-actions">
<div class="yt-dropdown">
<button class="yt-icon-btn" id="filterToggleBtn" onclick="toggleFilterMenu()">
<i class="fas fa-sliders-h"></i>
</button>
<div class="yt-dropdown-menu" id="filterMenu">
<div class="yt-menu-section">
<h4>Sort By</h4>
<button onclick="changeSort('day')">Today</button>
<button onclick="changeSort('week')">This Week</button>
<button onclick="changeSort('month')">This Month</button>
<button onclick="changeSort('3months')">Last 3 Months</button>
<button onclick="changeSort('year')">This Year</button>
</div>
<div class="yt-menu-section">
<h4>Region</h4>
<button onclick="changeRegion('vietnam')">Vietnam</button>
<button onclick="changeRegion('global')">Global</button>
</div>
</div>
</div>
</div>
</div>
<!-- Shorts Section -->
<!-- Videos Section -->
<div id="videosSection" class="yt-section">
<div class="yt-section-header" style="display:none;">
<h2><i class="fas fa-play-circle"></i> Videos</h2>
</div>
<div id="resultsArea" class="yt-video-grid">
<!-- Initial Skeleton State -->
<!-- Initial Skeleton State (12 items) -->
<div class="yt-video-card skeleton-card">
<div class="skeleton-thumb skeleton"></div>
<div class="skeleton-details">
<div class="skeleton-avatar skeleton"></div>
<div class="skeleton-text">
<div class="skeleton-title skeleton"></div>
<div class="skeleton-meta skeleton"></div>
</div>
</div>
</div>
<div class="yt-video-card skeleton-card">
<div class="skeleton-thumb skeleton"></div>
<div class="skeleton-details">
<div class="skeleton-avatar skeleton"></div>
<div class="skeleton-text">
<div class="skeleton-title skeleton"></div>
<div class="skeleton-meta skeleton"></div>
</div>
</div>
</div>
<div class="yt-video-card skeleton-card">
<div class="skeleton-thumb skeleton"></div>
<div class="skeleton-details">
<div class="skeleton-avatar skeleton"></div>
<div class="skeleton-text">
<div class="skeleton-title skeleton"></div>
<div class="skeleton-meta skeleton"></div>
</div>
</div>
</div>
<div class="yt-video-card skeleton-card">
<div class="skeleton-thumb skeleton"></div>
<div class="skeleton-details">
<div class="skeleton-avatar skeleton"></div>
<div class="skeleton-text">
<div class="skeleton-title skeleton"></div>
<div class="skeleton-meta skeleton"></div>
</div>
</div>
</div>
<div class="yt-video-card skeleton-card">
<div class="skeleton-thumb skeleton"></div>
<div class="skeleton-details">
<div class="skeleton-avatar skeleton"></div>
<div class="skeleton-text">
<div class="skeleton-title skeleton"></div>
<div class="skeleton-meta skeleton"></div>
</div>
</div>
</div>
<div class="yt-video-card skeleton-card">
<div class="skeleton-thumb skeleton"></div>
<div class="skeleton-details">
<div class="skeleton-avatar skeleton"></div>
<div class="skeleton-text">
<div class="skeleton-title skeleton"></div>
<div class="skeleton-meta skeleton"></div>
</div>
</div>
</div>
<div class="yt-video-card skeleton-card">
<div class="skeleton-thumb skeleton"></div>
<div class="skeleton-details">
<div class="skeleton-avatar skeleton"></div>
<div class="skeleton-text">
<div class="skeleton-title skeleton"></div>
<div class="skeleton-meta skeleton"></div>
</div>
</div>
</div>
<div class="yt-video-card skeleton-card">
<div class="skeleton-thumb skeleton"></div>
<div class="skeleton-details">
<div class="skeleton-avatar skeleton"></div>
<div class="skeleton-text">
<div class="skeleton-title skeleton"></div>
<div class="skeleton-meta skeleton"></div>
</div>
</div>
</div>
</div>
</div>
<!-- Styles moved to CSS modules -->
<script>
// Global filter state
// Global filter state
var currentSort = 'month';
var currentRegion = 'vietnam';
function toggleFilterMenu() {
const menu = document.getElementById('filterMenu');
if (menu) menu.classList.toggle('show');
}
// Close menu when clicking outside - Prevent multiple listeners
if (!window.filterMenuListenerAttached) {
document.addEventListener('click', function (e) {
const menu = document.getElementById('filterMenu');
const btn = document.getElementById('filterToggleBtn');
// Only run if elements exist (we are on home page)
if (menu && btn && !menu.contains(e.target) && !btn.contains(e.target)) {
menu.classList.remove('show');
}
});
window.filterMenuListenerAttached = true;
}
function changeSort(sort) {
window.currentSort = sort;
// Global loadTrending from main.js will use this
loadTrending(true);
toggleFilterMenu();
}
function changeRegion(region) {
window.currentRegion = region;
loadTrending(true);
toggleFilterMenu();
}
// Helpers (if main.js not loaded yet or for standalone usage)
function escapeHtml(text) {
if (!text) return '';
const div = document.createElement('div');
div.textContent = text;
return div.innerHTML;
}
function formatViews(views) {
if (!views) return '0';
const num = parseInt(views);
if (num >= 1000000) return (num / 1000000).toFixed(1) + 'M';
if (num >= 1000) return (num / 1000).toFixed(0) + 'K';
return num.toLocaleString();
}
// Init Logic
document.addEventListener('DOMContentLoaded', () => {
// Pagination logic removed for infinite scroll
// Check URL params for category
const urlParams = new URLSearchParams(window.location.search);
const category = urlParams.get('category');
if (category && typeof switchCategory === 'function') {
// Let main.js handle the switch, but we can set UI active state if needed
// switchCategory is in main.js
switchCategory(category);
}
});
</script>
{% endblock %}

1258
templates/layout.html Executable file → Normal file
View file

File diff suppressed because it is too large Load diff

422
templates/login.html Executable file → Normal file
View file

@ -1,212 +1,212 @@
{% extends "layout.html" %}
{% block content %}
<div class="yt-auth-container">
<div class="yt-auth-card">
<!-- Logo -->
<div class="yt-auth-logo">
<div class="yt-logo-icon" style="font-size: 24px;">KV-Tube</div>
</div>
<h2>Sign in</h2>
<p>to continue to KV-Tube</p>
{% with messages = get_flashed_messages() %}
{% if messages %}
<div class="yt-auth-alert">
<i class="fas fa-exclamation-circle"></i>
{{ messages[0] }}
</div>
{% endif %}
{% endwith %}
<form method="POST" action="/login" class="yt-auth-form">
<div class="yt-form-group">
<input type="text" name="username" class="yt-form-input" placeholder=" " required id="username">
<label for="username" class="yt-form-label">Username</label>
</div>
<div class="yt-form-group">
<input type="password" name="password" class="yt-form-input" placeholder=" " required id="password">
<label for="password" class="yt-form-label">Password</label>
</div>
<button type="submit" class="yt-auth-submit">
<i class="fas fa-sign-in-alt"></i>
Sign In
</button>
</form>
<div class="yt-auth-divider">
<span>or</span>
</div>
<p class="yt-auth-footer">
New to KV-Tube?
<a href="/register" class="yt-auth-link">Create an account</a>
</p>
</div>
</div>
<style>
.yt-auth-container {
display: flex;
justify-content: center;
align-items: center;
min-height: calc(100vh - var(--yt-header-height) - 100px);
padding: 24px;
}
.yt-auth-card {
background: var(--yt-bg-secondary);
border-radius: 16px;
padding: 48px 40px;
width: 100%;
max-width: 420px;
text-align: center;
border: 1px solid var(--yt-border);
}
.yt-auth-logo {
margin-bottom: 24px;
}
.yt-auth-card h2 {
font-size: 24px;
font-weight: 500;
margin-bottom: 8px;
color: var(--yt-text-primary);
}
.yt-auth-card>p {
color: var(--yt-text-secondary);
font-size: 14px;
margin-bottom: 32px;
}
.yt-auth-alert {
background: rgba(244, 67, 54, 0.1);
color: #f44336;
padding: 12px 16px;
border-radius: 8px;
margin-bottom: 24px;
font-size: 14px;
display: flex;
align-items: center;
gap: 8px;
text-align: left;
}
.yt-auth-form {
display: flex;
flex-direction: column;
gap: 20px;
}
.yt-form-group {
position: relative;
text-align: left;
}
.yt-form-input {
width: 100%;
padding: 16px 14px;
font-size: 16px;
color: var(--yt-text-primary);
background: var(--yt-bg-primary);
border: 1px solid var(--yt-border);
border-radius: 8px;
outline: none;
transition: border-color 0.2s, box-shadow 0.2s;
}
.yt-form-input:focus {
border-color: var(--yt-accent-blue);
box-shadow: 0 0 0 3px rgba(62, 166, 255, 0.2);
}
.yt-form-label {
position: absolute;
left: 14px;
top: 50%;
transform: translateY(-50%);
font-size: 16px;
color: var(--yt-text-secondary);
pointer-events: none;
transition: all 0.2s;
background: var(--yt-bg-primary);
padding: 0 4px;
}
.yt-form-input:focus+.yt-form-label,
.yt-form-input:not(:placeholder-shown)+.yt-form-label {
top: 0;
font-size: 12px;
color: var(--yt-accent-blue);
}
.yt-auth-submit {
background: var(--yt-accent-blue);
color: white;
padding: 14px 24px;
border-radius: 24px;
font-size: 15px;
font-weight: 500;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
margin-top: 8px;
transition: background 0.2s, transform 0.1s;
}
.yt-auth-submit:hover {
background: #258fd9;
transform: scale(1.02);
}
.yt-auth-submit:active {
transform: scale(0.98);
}
.yt-auth-divider {
display: flex;
align-items: center;
margin: 24px 0;
}
.yt-auth-divider::before,
.yt-auth-divider::after {
content: '';
flex: 1;
height: 1px;
background: var(--yt-border);
}
.yt-auth-divider span {
padding: 0 16px;
color: var(--yt-text-secondary);
font-size: 13px;
}
.yt-auth-footer {
color: var(--yt-text-secondary);
font-size: 14px;
}
.yt-auth-link {
color: var(--yt-accent-blue);
font-weight: 500;
}
.yt-auth-link:hover {
text-decoration: underline;
}
@media (max-width: 480px) {
.yt-auth-card {
padding: 32px 24px;
}
}
</style>
{% extends "layout.html" %}
{% block content %}
<div class="yt-auth-container">
<div class="yt-auth-card">
<!-- Logo -->
<div class="yt-auth-logo">
<div class="yt-logo-icon" style="font-size: 24px;">KV-Tube</div>
</div>
<h2>Sign in</h2>
<p>to continue to KV-Tube</p>
{% with messages = get_flashed_messages() %}
{% if messages %}
<div class="yt-auth-alert">
<i class="fas fa-exclamation-circle"></i>
{{ messages[0] }}
</div>
{% endif %}
{% endwith %}
<form method="POST" action="/login" class="yt-auth-form">
<div class="yt-form-group">
<input type="text" name="username" class="yt-form-input" placeholder=" " required id="username">
<label for="username" class="yt-form-label">Username</label>
</div>
<div class="yt-form-group">
<input type="password" name="password" class="yt-form-input" placeholder=" " required id="password">
<label for="password" class="yt-form-label">Password</label>
</div>
<button type="submit" class="yt-auth-submit">
<i class="fas fa-sign-in-alt"></i>
Sign In
</button>
</form>
<div class="yt-auth-divider">
<span>or</span>
</div>
<p class="yt-auth-footer">
New to KV-Tube?
<a href="/register" class="yt-auth-link">Create an account</a>
</p>
</div>
</div>
<style>
.yt-auth-container {
display: flex;
justify-content: center;
align-items: center;
min-height: calc(100vh - var(--yt-header-height) - 100px);
padding: 24px;
}
.yt-auth-card {
background: var(--yt-bg-secondary);
border-radius: 16px;
padding: 48px 40px;
width: 100%;
max-width: 420px;
text-align: center;
border: 1px solid var(--yt-border);
}
.yt-auth-logo {
margin-bottom: 24px;
}
.yt-auth-card h2 {
font-size: 24px;
font-weight: 500;
margin-bottom: 8px;
color: var(--yt-text-primary);
}
.yt-auth-card>p {
color: var(--yt-text-secondary);
font-size: 14px;
margin-bottom: 32px;
}
.yt-auth-alert {
background: rgba(244, 67, 54, 0.1);
color: #f44336;
padding: 12px 16px;
border-radius: 8px;
margin-bottom: 24px;
font-size: 14px;
display: flex;
align-items: center;
gap: 8px;
text-align: left;
}
.yt-auth-form {
display: flex;
flex-direction: column;
gap: 20px;
}
.yt-form-group {
position: relative;
text-align: left;
}
.yt-form-input {
width: 100%;
padding: 16px 14px;
font-size: 16px;
color: var(--yt-text-primary);
background: var(--yt-bg-primary);
border: 1px solid var(--yt-border);
border-radius: 8px;
outline: none;
transition: border-color 0.2s, box-shadow 0.2s;
}
.yt-form-input:focus {
border-color: var(--yt-accent-blue);
box-shadow: 0 0 0 3px rgba(62, 166, 255, 0.2);
}
.yt-form-label {
position: absolute;
left: 14px;
top: 50%;
transform: translateY(-50%);
font-size: 16px;
color: var(--yt-text-secondary);
pointer-events: none;
transition: all 0.2s;
background: var(--yt-bg-primary);
padding: 0 4px;
}
.yt-form-input:focus+.yt-form-label,
.yt-form-input:not(:placeholder-shown)+.yt-form-label {
top: 0;
font-size: 12px;
color: var(--yt-accent-blue);
}
.yt-auth-submit {
background: var(--yt-accent-blue);
color: white;
padding: 14px 24px;
border-radius: 24px;
font-size: 15px;
font-weight: 500;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
margin-top: 8px;
transition: background 0.2s, transform 0.1s;
}
.yt-auth-submit:hover {
background: #258fd9;
transform: scale(1.02);
}
.yt-auth-submit:active {
transform: scale(0.98);
}
.yt-auth-divider {
display: flex;
align-items: center;
margin: 24px 0;
}
.yt-auth-divider::before,
.yt-auth-divider::after {
content: '';
flex: 1;
height: 1px;
background: var(--yt-border);
}
.yt-auth-divider span {
padding: 0 16px;
color: var(--yt-text-secondary);
font-size: 13px;
}
.yt-auth-footer {
color: var(--yt-text-secondary);
font-size: 14px;
}
.yt-auth-link {
color: var(--yt-accent-blue);
font-weight: 500;
}
.yt-auth-link:hover {
text-decoration: underline;
}
@media (max-width: 480px) {
.yt-auth-card {
padding: 32px 24px;
}
}
</style>
{% endblock %}

924
templates/my_videos.html Executable file → Normal file
View file

@ -1,463 +1,463 @@
{% extends "layout.html" %}
{% block content %}
<style>
/* Library Page Premium Styles */
.library-container {
padding: 24px;
max-width: 1600px;
margin: 0 auto;
}
.library-header {
margin-bottom: 2rem;
text-align: center;
}
.library-title {
font-size: 1.8rem;
font-weight: 700;
margin-bottom: 1.5rem;
background: linear-gradient(135deg, var(--yt-text-primary) 0%, var(--yt-text-secondary) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.library-tabs {
display: inline-flex;
gap: 8px;
background: var(--yt-bg-secondary);
padding: 6px;
border-radius: 16px;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
margin-bottom: 1rem;
}
.library-tab {
display: flex;
align-items: center;
gap: 8px;
padding: 12px 24px;
border-radius: 12px;
font-size: 0.95rem;
font-weight: 600;
color: var(--yt-text-secondary);
text-decoration: none;
transition: all 0.25s ease;
border: none;
background: transparent;
cursor: pointer;
}
.library-tab:hover {
color: var(--yt-text-primary);
background: var(--yt-bg-hover);
}
.library-tab.active {
background: linear-gradient(135deg, #cc0000 0%, #ff4444 100%);
color: white;
box-shadow: 0 4px 12px rgba(204, 0, 0, 0.3);
}
.library-tab i {
font-size: 1rem;
}
.library-actions {
display: flex;
justify-content: center;
gap: 12px;
margin-top: 16px;
}
.clear-btn {
display: none;
align-items: center;
gap: 8px;
padding: 10px 20px;
background: transparent;
border: 1px solid var(--yt-border);
border-radius: 24px;
color: var(--yt-text-secondary);
font-size: 0.9rem;
font-weight: 500;
cursor: pointer;
transition: all 0.2s;
}
.clear-btn:hover {
background: rgba(204, 0, 0, 0.1);
border-color: #cc0000;
color: #cc0000;
}
.library-stats {
display: flex;
justify-content: center;
gap: 24px;
margin-top: 12px;
color: var(--yt-text-secondary);
font-size: 0.85rem;
}
.library-stat {
display: flex;
align-items: center;
gap: 6px;
}
.library-stat i {
opacity: 0.7;
}
/* Empty State Enhancement */
.empty-state {
text-align: center;
padding: 4rem 2rem;
color: var(--yt-text-secondary);
}
.empty-state-icon {
width: 80px;
height: 80px;
margin: 0 auto 1.5rem;
border-radius: 50%;
background: var(--yt-bg-secondary);
display: flex;
align-items: center;
justify-content: center;
font-size: 2rem;
opacity: 0.6;
}
.empty-state h3 {
font-size: 1.3rem;
margin-bottom: 0.5rem;
color: var(--yt-text-primary);
}
.empty-state p {
margin-bottom: 1.5rem;
}
.browse-btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 12px 24px;
background: linear-gradient(135deg, #cc0000 0%, #ff4444 100%);
color: white;
border: none;
border-radius: 24px;
font-weight: 600;
text-decoration: none;
transition: all 0.2s;
box-shadow: 0 4px 12px rgba(204, 0, 0, 0.3);
}
.browse-btn:hover {
transform: translateY(-2px);
box-shadow: 0 6px 16px rgba(204, 0, 0, 0.4);
}
</style>
<div class="library-container">
<div class="library-header">
<h1 class="library-title">My Library</h1>
<div class="library-tabs">
<a href="/my-videos?type=history" class="library-tab" id="tab-history">
<i class="fas fa-history"></i>
<span>History</span>
</a>
<a href="/my-videos?type=saved" class="library-tab" id="tab-saved">
<i class="fas fa-bookmark"></i>
<span>Saved</span>
</a>
<a href="/my-videos?type=subscriptions" class="library-tab" id="tab-subscriptions">
<i class="fas fa-users"></i>
<span>Subscriptions</span>
</a>
</div>
<div class="library-stats" id="libraryStats" style="display: none;">
<div class="library-stat">
<i class="fas fa-video"></i>
<span id="videoCount">0 videos</span>
</div>
</div>
<div class="library-actions">
<button id="clearBtn" onclick="clearLibrary()" class="clear-btn">
<i class="fas fa-trash-alt"></i>
<span>Clear <span id="clearType">All</span></span>
</button>
</div>
</div>
<!-- Video Grid -->
<div id="libraryGrid" class="yt-video-grid">
<!-- JS will populate this -->
</div>
<!-- Empty State -->
<div id="emptyState" class="empty-state" style="display: none;">
<div class="empty-state-icon">
<i class="fas fa-folder-open"></i>
</div>
<h3>Nothing here yet</h3>
<p id="emptyMsg">Go watch some videos to fill this up!</p>
<a href="/" class="browse-btn">
<i class="fas fa-play"></i>
Browse Content
</a>
</div>
</div>
<script>
// Load library content - extracted to function for reuse on pageshow
function loadLibraryContent() {
const urlParams = new URLSearchParams(window.location.search);
// Default to history if no type or invalid type
const type = urlParams.get('type') || 'history';
// Reset all tabs first, then activate the correct one
document.querySelectorAll('.library-tab').forEach(tab => tab.classList.remove('active'));
const activeTab = document.getElementById(`tab-${type}`);
if (activeTab) {
activeTab.classList.add('active');
}
const grid = document.getElementById('libraryGrid');
const empty = document.getElementById('emptyState');
const emptyMsg = document.getElementById('emptyMsg');
const statsDiv = document.getElementById('libraryStats');
const clearBtn = document.getElementById('clearBtn');
// Reset UI before loading
grid.innerHTML = '';
empty.style.display = 'none';
if (statsDiv) statsDiv.style.display = 'none';
if (clearBtn) clearBtn.style.display = 'none';
// Mapping URL type to localStorage key suffix
// saved -> kv_saved
// history -> kv_history
// subscriptions -> kv_subscriptions
const storageKey = `kv_${type}`;
const data = JSON.parse(localStorage.getItem(storageKey) || '[]').filter(i => i && i.id);
// Show stats and Clear Button if there is data
if (data.length > 0) {
empty.style.display = 'none';
// Update stats
const videoCount = document.getElementById('videoCount');
if (statsDiv && videoCount) {
statsDiv.style.display = 'flex';
const countText = type === 'subscriptions'
? `${data.length} channel${data.length !== 1 ? 's' : ''}`
: `${data.length} video${data.length !== 1 ? 's' : ''}`;
videoCount.innerText = countText;
}
const clearTypeSpan = document.getElementById('clearType');
if (clearBtn) {
clearBtn.style.display = 'inline-flex';
// Format type name for display
const typeName = type.charAt(0).toUpperCase() + type.slice(1);
clearTypeSpan.innerText = typeName;
}
if (type === 'subscriptions') {
// Render Channel Cards with improved design
grid.style.display = 'grid';
grid.style.gridTemplateColumns = 'repeat(auto-fill, minmax(200px, 1fr))';
grid.style.gap = '24px';
grid.style.padding = '20px 0';
grid.innerHTML = data.map(channel => {
const avatarHtml = channel.thumbnail
? `<img src="${channel.thumbnail}" style="width:120px; height:120px; border-radius:50%; object-fit:cover; border: 3px solid var(--yt-border); transition: transform 0.3s, border-color 0.3s;">`
: `<div style="width:120px; height:120px; border-radius:50%; background: linear-gradient(135deg, #FF6B6B 0%, #d62d2d 100%); display:flex; align-items:center; justify-content:center; font-size:48px; font-weight:bold; color:white; border: 3px solid var(--yt-border); transition: transform 0.3s;">${channel.letter || channel.title.charAt(0).toUpperCase()}</div>`;
return `
<div class="subscription-card" onclick="window.location.href='/channel/${channel.id}'"
style="text-align:center; cursor:pointer; padding: 24px 16px; background: var(--yt-bg-secondary); border-radius: 16px; transition: all 0.3s; border: 1px solid transparent;"
onmouseenter="this.style.transform='translateY(-4px)'; this.style.boxShadow='0 8px 24px rgba(0,0,0,0.3)'; this.style.borderColor='var(--yt-border)';"
onmouseleave="this.style.transform='none'; this.style.boxShadow='none'; this.style.borderColor='transparent';">
<div style="display:flex; justify-content:center; margin-bottom:16px;">
${avatarHtml}
</div>
<h3 style="font-size:1.1rem; margin-bottom:8px; color: var(--yt-text-primary); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">${channel.title}</h3>
<p style="font-size: 0.85rem; color: var(--yt-text-secondary); margin-bottom: 12px;">@${channel.title.replace(/\s+/g, '')}</p>
<button onclick="event.stopPropagation(); toggleSubscribe('${channel.id}', '${channel.title.replace(/'/g, "\\'")}', '${channel.thumbnail || ''}', this)"
style="padding:10px 20px; font-size:13px; background: linear-gradient(135deg, #cc0000, #ff4444); color: white; border: none; border-radius: 24px; cursor: pointer; font-weight: 600; transition: all 0.2s; box-shadow: 0 2px 8px rgba(204,0,0,0.3);"
onmouseenter="this.style.transform='scale(1.05)'; this.style.boxShadow='0 4px 12px rgba(204,0,0,0.5)';"
onmouseleave="this.style.transform='scale(1)'; this.style.boxShadow='0 2px 8px rgba(204,0,0,0.3)';">
<i class="fas fa-user-minus"></i> Unsubscribe
</button>
</div>
`}).join('');
} else {
// Render Video Cards (History/Saved)
grid.innerHTML = data.map(video => {
// Robust fallback chain: maxres -> hq -> mq
const thumb = video.thumbnail || `https://i.ytimg.com/vi/${video.id}/maxresdefault.jpg`;
const showRemove = type === 'saved' || type === 'history';
return `
<div class="yt-video-card" style="position: relative;">
<div onclick="window.location.href='/watch?v=${video.id}'" style="cursor: pointer;">
<div class="yt-thumbnail-container">
<img src="${thumb}" class="yt-thumbnail" loading="lazy" referrerpolicy="no-referrer"
onload="this.classList.add('loaded')"
onerror="
if (this.src.includes('maxresdefault')) this.src='https://i.ytimg.com/vi/${video.id}/hqdefault.jpg';
else if (this.src.includes('hqdefault')) this.src='https://i.ytimg.com/vi/${video.id}/mqdefault.jpg';
else this.style.display='none';
">
<div class="yt-duration">${video.duration || ''}</div>
</div>
<div class="yt-video-details">
<div class="yt-video-meta">
<h3 class="yt-video-title">${video.title}</h3>
<p class="yt-video-stats">${video.uploader}</p>
</div>
</div>
</div>
${showRemove ? `
<button onclick="event.stopPropagation(); removeVideo('${video.id}', '${type}', this)"
style="position: absolute; top: 8px; right: 8px; width: 28px; height: 28px; background: rgba(0,0,0,0.7); color: white; border: none; border-radius: 50%; cursor: pointer; font-size: 12px; display: flex; align-items: center; justify-content: center; opacity: 0.8; transition: all 0.2s; z-index: 10;"
onmouseenter="this.style.opacity='1'; this.style.background='#cc0000';"
onmouseleave="this.style.opacity='0.8'; this.style.background='rgba(0,0,0,0.7)';"
title="Remove">
<i class="fas fa-times"></i>
</button>` : ''}
</div>
`}).join('');
}
} else {
grid.innerHTML = '';
empty.style.display = 'block';
if (type === 'subscriptions') {
emptyMsg.innerText = "You haven't subscribed to any channels yet.";
} else if (type === 'saved') {
emptyMsg.innerText = "No saved videos yet.";
}
}
}
// Run on initial page load and SPA navigation
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', () => {
loadLibraryContent();
initTabs();
});
} else {
// Document already loaded (SPA navigation)
loadLibraryContent();
initTabs();
}
function initTabs() {
// Intercept tab clicks for client-side navigation
document.querySelectorAll('.library-tab').forEach(tab => {
// Remove old listeners to be safe (optional but good practice in SPA)
const newTab = tab.cloneNode(true);
tab.parentNode.replaceChild(newTab, tab);
newTab.addEventListener('click', (e) => {
e.preventDefault();
const newUrl = newTab.getAttribute('href');
// Update URL without reloading
history.pushState(null, '', newUrl);
// Immediately load the new content
loadLibraryContent();
});
});
}
// Handle browser back/forward buttons
window.addEventListener('popstate', () => {
loadLibraryContent();
});
function clearLibrary() {
const urlParams = new URLSearchParams(window.location.search);
const type = urlParams.get('type') || 'history';
const typeName = type.charAt(0).toUpperCase() + type.slice(1);
if (confirm(`Are you sure you want to clear your ${typeName}? This cannot be undone.`)) {
const storageKey = `kv_${type}`;
localStorage.removeItem(storageKey);
// Reload to reflect changes
window.location.reload();
}
}
// Local toggleSubscribe for my_videos page - removes card visually
function toggleSubscribe(channelId, channelName, avatar, btnElement) {
event.stopPropagation();
// Remove from library
const key = 'kv_subscriptions';
let data = JSON.parse(localStorage.getItem(key) || '[]');
data = data.filter(item => item.id !== channelId);
localStorage.setItem(key, JSON.stringify(data));
// Remove the card from UI
const card = btnElement.closest('.yt-channel-card');
if (card) {
card.style.transition = 'opacity 0.3s, transform 0.3s';
card.style.opacity = '0';
card.style.transform = 'scale(0.8)';
setTimeout(() => card.remove(), 300);
}
// Show empty state if no more subscriptions
setTimeout(() => {
const grid = document.getElementById('libraryGrid');
if (grid && grid.children.length === 0) {
grid.innerHTML = '';
document.getElementById('emptyState').style.display = 'block';
document.getElementById('emptyMessage').innerText = "You haven't subscribed to any channels yet.";
}
}, 350);
}
// Remove individual video from saved/history
function removeVideo(videoId, type, btnElement) {
event.stopPropagation();
const key = `kv_${type}`;
let data = JSON.parse(localStorage.getItem(key) || '[]');
data = data.filter(item => item.id !== videoId);
localStorage.setItem(key, JSON.stringify(data));
// Remove the card from UI with animation
const card = btnElement.closest('.yt-video-card');
if (card) {
card.style.transition = 'opacity 0.3s, transform 0.3s';
card.style.opacity = '0';
card.style.transform = 'scale(0.9)';
setTimeout(() => card.remove(), 300);
}
// Show empty state if no more videos
setTimeout(() => {
const grid = document.getElementById('libraryGrid');
if (grid && grid.children.length === 0) {
grid.innerHTML = '';
document.getElementById('emptyState').style.display = 'block';
const typeName = type === 'saved' ? 'No saved videos yet.' : 'No history yet.';
document.getElementById('emptyMessage').innerText = typeName;
}
}, 350);
}
</script>
{% extends "layout.html" %}
{% block content %}
<style>
/* Library Page Premium Styles */
.library-container {
padding: 24px;
max-width: 1600px;
margin: 0 auto;
}
.library-header {
margin-bottom: 2rem;
text-align: center;
}
.library-title {
font-size: 1.8rem;
font-weight: 700;
margin-bottom: 1.5rem;
background: linear-gradient(135deg, var(--yt-text-primary) 0%, var(--yt-text-secondary) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.library-tabs {
display: inline-flex;
gap: 8px;
background: var(--yt-bg-secondary);
padding: 6px;
border-radius: 16px;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
margin-bottom: 1rem;
}
.library-tab {
display: flex;
align-items: center;
gap: 8px;
padding: 12px 24px;
border-radius: 12px;
font-size: 0.95rem;
font-weight: 600;
color: var(--yt-text-secondary);
text-decoration: none;
transition: all 0.25s ease;
border: none;
background: transparent;
cursor: pointer;
}
.library-tab:hover {
color: var(--yt-text-primary);
background: var(--yt-bg-hover);
}
.library-tab.active {
background: linear-gradient(135deg, #cc0000 0%, #ff4444 100%);
color: white;
box-shadow: 0 4px 12px rgba(204, 0, 0, 0.3);
}
.library-tab i {
font-size: 1rem;
}
.library-actions {
display: flex;
justify-content: center;
gap: 12px;
margin-top: 16px;
}
.clear-btn {
display: none;
align-items: center;
gap: 8px;
padding: 10px 20px;
background: transparent;
border: 1px solid var(--yt-border);
border-radius: 24px;
color: var(--yt-text-secondary);
font-size: 0.9rem;
font-weight: 500;
cursor: pointer;
transition: all 0.2s;
}
.clear-btn:hover {
background: rgba(204, 0, 0, 0.1);
border-color: #cc0000;
color: #cc0000;
}
.library-stats {
display: flex;
justify-content: center;
gap: 24px;
margin-top: 12px;
color: var(--yt-text-secondary);
font-size: 0.85rem;
}
.library-stat {
display: flex;
align-items: center;
gap: 6px;
}
.library-stat i {
opacity: 0.7;
}
/* Empty State Enhancement */
.empty-state {
text-align: center;
padding: 4rem 2rem;
color: var(--yt-text-secondary);
}
.empty-state-icon {
width: 80px;
height: 80px;
margin: 0 auto 1.5rem;
border-radius: 50%;
background: var(--yt-bg-secondary);
display: flex;
align-items: center;
justify-content: center;
font-size: 2rem;
opacity: 0.6;
}
.empty-state h3 {
font-size: 1.3rem;
margin-bottom: 0.5rem;
color: var(--yt-text-primary);
}
.empty-state p {
margin-bottom: 1.5rem;
}
.browse-btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 12px 24px;
background: linear-gradient(135deg, #cc0000 0%, #ff4444 100%);
color: white;
border: none;
border-radius: 24px;
font-weight: 600;
text-decoration: none;
transition: all 0.2s;
box-shadow: 0 4px 12px rgba(204, 0, 0, 0.3);
}
.browse-btn:hover {
transform: translateY(-2px);
box-shadow: 0 6px 16px rgba(204, 0, 0, 0.4);
}
</style>
<div class="library-container">
<div class="library-header">
<h1 class="library-title">My Library</h1>
<div class="library-tabs">
<a href="/my-videos?type=history" class="library-tab" id="tab-history">
<i class="fas fa-history"></i>
<span>History</span>
</a>
<a href="/my-videos?type=saved" class="library-tab" id="tab-saved">
<i class="fas fa-bookmark"></i>
<span>Saved</span>
</a>
<a href="/my-videos?type=subscriptions" class="library-tab" id="tab-subscriptions">
<i class="fas fa-users"></i>
<span>Subscriptions</span>
</a>
</div>
<div class="library-stats" id="libraryStats" style="display: none;">
<div class="library-stat">
<i class="fas fa-video"></i>
<span id="videoCount">0 videos</span>
</div>
</div>
<div class="library-actions">
<button id="clearBtn" onclick="clearLibrary()" class="clear-btn">
<i class="fas fa-trash-alt"></i>
<span>Clear <span id="clearType">All</span></span>
</button>
</div>
</div>
<!-- Video Grid -->
<div id="libraryGrid" class="yt-video-grid">
<!-- JS will populate this -->
</div>
<!-- Empty State -->
<div id="emptyState" class="empty-state" style="display: none;">
<div class="empty-state-icon">
<i class="fas fa-folder-open"></i>
</div>
<h3>Nothing here yet</h3>
<p id="emptyMsg">Go watch some videos to fill this up!</p>
<a href="/" class="browse-btn">
<i class="fas fa-play"></i>
Browse Content
</a>
</div>
</div>
<script>
// Load library content - extracted to function for reuse on pageshow
function loadLibraryContent() {
const urlParams = new URLSearchParams(window.location.search);
// Default to history if no type or invalid type
const type = urlParams.get('type') || 'history';
// Reset all tabs first, then activate the correct one
document.querySelectorAll('.library-tab').forEach(tab => tab.classList.remove('active'));
const activeTab = document.getElementById(`tab-${type}`);
if (activeTab) {
activeTab.classList.add('active');
}
const grid = document.getElementById('libraryGrid');
const empty = document.getElementById('emptyState');
const emptyMsg = document.getElementById('emptyMsg');
const statsDiv = document.getElementById('libraryStats');
const clearBtn = document.getElementById('clearBtn');
// Reset UI before loading
grid.innerHTML = '';
empty.style.display = 'none';
if (statsDiv) statsDiv.style.display = 'none';
if (clearBtn) clearBtn.style.display = 'none';
// Mapping URL type to localStorage key suffix
// saved -> kv_saved
// history -> kv_history
// subscriptions -> kv_subscriptions
const storageKey = `kv_${type}`;
const data = JSON.parse(localStorage.getItem(storageKey) || '[]').filter(i => i && i.id);
// Show stats and Clear Button if there is data
if (data.length > 0) {
empty.style.display = 'none';
// Update stats
const videoCount = document.getElementById('videoCount');
if (statsDiv && videoCount) {
statsDiv.style.display = 'flex';
const countText = type === 'subscriptions'
? `${data.length} channel${data.length !== 1 ? 's' : ''}`
: `${data.length} video${data.length !== 1 ? 's' : ''}`;
videoCount.innerText = countText;
}
const clearTypeSpan = document.getElementById('clearType');
if (clearBtn) {
clearBtn.style.display = 'inline-flex';
// Format type name for display
const typeName = type.charAt(0).toUpperCase() + type.slice(1);
clearTypeSpan.innerText = typeName;
}
if (type === 'subscriptions') {
// Render Channel Cards with improved design
grid.style.display = 'grid';
grid.style.gridTemplateColumns = 'repeat(auto-fill, minmax(200px, 1fr))';
grid.style.gap = '24px';
grid.style.padding = '20px 0';
grid.innerHTML = data.map(channel => {
const avatarHtml = channel.thumbnail
? `<img src="${channel.thumbnail}" style="width:120px; height:120px; border-radius:50%; object-fit:cover; border: 3px solid var(--yt-border); transition: transform 0.3s, border-color 0.3s;">`
: `<div style="width:120px; height:120px; border-radius:50%; background: linear-gradient(135deg, #FF6B6B 0%, #d62d2d 100%); display:flex; align-items:center; justify-content:center; font-size:48px; font-weight:bold; color:white; border: 3px solid var(--yt-border); transition: transform 0.3s;">${channel.letter || channel.title.charAt(0).toUpperCase()}</div>`;
return `
<div class="subscription-card" onclick="window.location.href='/channel/${channel.id}'"
style="text-align:center; cursor:pointer; padding: 24px 16px; background: var(--yt-bg-secondary); border-radius: 16px; transition: all 0.3s; border: 1px solid transparent;"
onmouseenter="this.style.transform='translateY(-4px)'; this.style.boxShadow='0 8px 24px rgba(0,0,0,0.3)'; this.style.borderColor='var(--yt-border)';"
onmouseleave="this.style.transform='none'; this.style.boxShadow='none'; this.style.borderColor='transparent';">
<div style="display:flex; justify-content:center; margin-bottom:16px;">
${avatarHtml}
</div>
<h3 style="font-size:1.1rem; margin-bottom:8px; color: var(--yt-text-primary); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">${channel.title}</h3>
<p style="font-size: 0.85rem; color: var(--yt-text-secondary); margin-bottom: 12px;">@${channel.title.replace(/\s+/g, '')}</p>
<button onclick="event.stopPropagation(); toggleSubscribe('${channel.id}', '${channel.title.replace(/'/g, "\\'")}', '${channel.thumbnail || ''}', this)"
style="padding:10px 20px; font-size:13px; background: linear-gradient(135deg, #cc0000, #ff4444); color: white; border: none; border-radius: 24px; cursor: pointer; font-weight: 600; transition: all 0.2s; box-shadow: 0 2px 8px rgba(204,0,0,0.3);"
onmouseenter="this.style.transform='scale(1.05)'; this.style.boxShadow='0 4px 12px rgba(204,0,0,0.5)';"
onmouseleave="this.style.transform='scale(1)'; this.style.boxShadow='0 2px 8px rgba(204,0,0,0.3)';">
<i class="fas fa-user-minus"></i> Unsubscribe
</button>
</div>
`}).join('');
} else {
// Render Video Cards (History/Saved)
grid.innerHTML = data.map(video => {
// Robust fallback chain: maxres -> hq -> mq
const thumb = video.thumbnail || `https://i.ytimg.com/vi/${video.id}/maxresdefault.jpg`;
const showRemove = type === 'saved' || type === 'history';
return `
<div class="yt-video-card" style="position: relative;">
<div onclick="window.location.href='/watch?v=${video.id}'" style="cursor: pointer;">
<div class="yt-thumbnail-container">
<img src="${thumb}" class="yt-thumbnail" loading="lazy" referrerpolicy="no-referrer"
onload="this.classList.add('loaded')"
onerror="
if (this.src.includes('maxresdefault')) this.src='https://i.ytimg.com/vi/${video.id}/hqdefault.jpg';
else if (this.src.includes('hqdefault')) this.src='https://i.ytimg.com/vi/${video.id}/mqdefault.jpg';
else this.style.display='none';
">
<div class="yt-duration">${video.duration || ''}</div>
</div>
<div class="yt-video-details">
<div class="yt-video-meta">
<h3 class="yt-video-title">${video.title}</h3>
<p class="yt-video-stats">${video.uploader}</p>
</div>
</div>
</div>
${showRemove ? `
<button onclick="event.stopPropagation(); removeVideo('${video.id}', '${type}', this)"
style="position: absolute; top: 8px; right: 8px; width: 28px; height: 28px; background: rgba(0,0,0,0.7); color: white; border: none; border-radius: 50%; cursor: pointer; font-size: 12px; display: flex; align-items: center; justify-content: center; opacity: 0.8; transition: all 0.2s; z-index: 10;"
onmouseenter="this.style.opacity='1'; this.style.background='#cc0000';"
onmouseleave="this.style.opacity='0.8'; this.style.background='rgba(0,0,0,0.7)';"
title="Remove">
<i class="fas fa-times"></i>
</button>` : ''}
</div>
`}).join('');
}
} else {
grid.innerHTML = '';
empty.style.display = 'block';
if (type === 'subscriptions') {
emptyMsg.innerText = "You haven't subscribed to any channels yet.";
} else if (type === 'saved') {
emptyMsg.innerText = "No saved videos yet.";
}
}
}
// Run on initial page load and SPA navigation
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', () => {
loadLibraryContent();
initTabs();
});
} else {
// Document already loaded (SPA navigation)
loadLibraryContent();
initTabs();
}
function initTabs() {
// Intercept tab clicks for client-side navigation
document.querySelectorAll('.library-tab').forEach(tab => {
// Remove old listeners to be safe (optional but good practice in SPA)
const newTab = tab.cloneNode(true);
tab.parentNode.replaceChild(newTab, tab);
newTab.addEventListener('click', (e) => {
e.preventDefault();
const newUrl = newTab.getAttribute('href');
// Update URL without reloading
history.pushState(null, '', newUrl);
// Immediately load the new content
loadLibraryContent();
});
});
}
// Handle browser back/forward buttons
window.addEventListener('popstate', () => {
loadLibraryContent();
});
function clearLibrary() {
const urlParams = new URLSearchParams(window.location.search);
const type = urlParams.get('type') || 'history';
const typeName = type.charAt(0).toUpperCase() + type.slice(1);
if (confirm(`Are you sure you want to clear your ${typeName}? This cannot be undone.`)) {
const storageKey = `kv_${type}`;
localStorage.removeItem(storageKey);
// Reload to reflect changes
window.location.reload();
}
}
// Local toggleSubscribe for my_videos page - removes card visually
function toggleSubscribe(channelId, channelName, avatar, btnElement) {
event.stopPropagation();
// Remove from library
const key = 'kv_subscriptions';
let data = JSON.parse(localStorage.getItem(key) || '[]');
data = data.filter(item => item.id !== channelId);
localStorage.setItem(key, JSON.stringify(data));
// Remove the card from UI
const card = btnElement.closest('.yt-channel-card');
if (card) {
card.style.transition = 'opacity 0.3s, transform 0.3s';
card.style.opacity = '0';
card.style.transform = 'scale(0.8)';
setTimeout(() => card.remove(), 300);
}
// Show empty state if no more subscriptions
setTimeout(() => {
const grid = document.getElementById('libraryGrid');
if (grid && grid.children.length === 0) {
grid.innerHTML = '';
document.getElementById('emptyState').style.display = 'block';
document.getElementById('emptyMessage').innerText = "You haven't subscribed to any channels yet.";
}
}, 350);
}
// Remove individual video from saved/history
function removeVideo(videoId, type, btnElement) {
event.stopPropagation();
const key = `kv_${type}`;
let data = JSON.parse(localStorage.getItem(key) || '[]');
data = data.filter(item => item.id !== videoId);
localStorage.setItem(key, JSON.stringify(data));
// Remove the card from UI with animation
const card = btnElement.closest('.yt-video-card');
if (card) {
card.style.transition = 'opacity 0.3s, transform 0.3s';
card.style.opacity = '0';
card.style.transform = 'scale(0.9)';
setTimeout(() => card.remove(), 300);
}
// Show empty state if no more videos
setTimeout(() => {
const grid = document.getElementById('libraryGrid');
if (grid && grid.children.length === 0) {
grid.innerHTML = '';
document.getElementById('emptyState').style.display = 'block';
const typeName = type === 'saved' ? 'No saved videos yet.' : 'No history yet.';
document.getElementById('emptyMessage').innerText = typeName;
}
}, 350);
}
</script>
{% endblock %}

422
templates/register.html Executable file → Normal file
View file

@ -1,212 +1,212 @@
{% extends "layout.html" %}
{% block content %}
<div class="yt-auth-container">
<div class="yt-auth-card">
<!-- Logo -->
<div class="yt-auth-logo">
<div class="yt-logo-icon" style="font-size: 24px;">KV-Tube</div>
</div>
<h2>Create account</h2>
<p>to start watching on KV-Tube</p>
{% with messages = get_flashed_messages() %}
{% if messages %}
<div class="yt-auth-alert">
<i class="fas fa-exclamation-circle"></i>
{{ messages[0] }}
</div>
{% endif %}
{% endwith %}
<form method="POST" action="/register" class="yt-auth-form">
<div class="yt-form-group">
<input type="text" name="username" class="yt-form-input" placeholder=" " required id="username">
<label for="username" class="yt-form-label">Username</label>
</div>
<div class="yt-form-group">
<input type="password" name="password" class="yt-form-input" placeholder=" " required id="password">
<label for="password" class="yt-form-label">Password</label>
</div>
<button type="submit" class="yt-auth-submit">
<i class="fas fa-user-plus"></i>
Create Account
</button>
</form>
<div class="yt-auth-divider">
<span>or</span>
</div>
<p class="yt-auth-footer">
Already have an account?
<a href="/login" class="yt-auth-link">Sign in</a>
</p>
</div>
</div>
<style>
.yt-auth-container {
display: flex;
justify-content: center;
align-items: center;
min-height: calc(100vh - var(--yt-header-height) - 100px);
padding: 24px;
}
.yt-auth-card {
background: var(--yt-bg-secondary);
border-radius: 16px;
padding: 48px 40px;
width: 100%;
max-width: 420px;
text-align: center;
border: 1px solid var(--yt-border);
}
.yt-auth-logo {
margin-bottom: 24px;
}
.yt-auth-card h2 {
font-size: 24px;
font-weight: 500;
margin-bottom: 8px;
color: var(--yt-text-primary);
}
.yt-auth-card>p {
color: var(--yt-text-secondary);
font-size: 14px;
margin-bottom: 32px;
}
.yt-auth-alert {
background: rgba(244, 67, 54, 0.1);
color: #f44336;
padding: 12px 16px;
border-radius: 8px;
margin-bottom: 24px;
font-size: 14px;
display: flex;
align-items: center;
gap: 8px;
text-align: left;
}
.yt-auth-form {
display: flex;
flex-direction: column;
gap: 20px;
}
.yt-form-group {
position: relative;
text-align: left;
}
.yt-form-input {
width: 100%;
padding: 16px 14px;
font-size: 16px;
color: var(--yt-text-primary);
background: var(--yt-bg-primary);
border: 1px solid var(--yt-border);
border-radius: 8px;
outline: none;
transition: border-color 0.2s, box-shadow 0.2s;
}
.yt-form-input:focus {
border-color: var(--yt-accent-blue);
box-shadow: 0 0 0 3px rgba(62, 166, 255, 0.2);
}
.yt-form-label {
position: absolute;
left: 14px;
top: 50%;
transform: translateY(-50%);
font-size: 16px;
color: var(--yt-text-secondary);
pointer-events: none;
transition: all 0.2s;
background: var(--yt-bg-primary);
padding: 0 4px;
}
.yt-form-input:focus+.yt-form-label,
.yt-form-input:not(:placeholder-shown)+.yt-form-label {
top: 0;
font-size: 12px;
color: var(--yt-accent-blue);
}
.yt-auth-submit {
background: var(--yt-accent-blue);
color: white;
padding: 14px 24px;
border-radius: 24px;
font-size: 15px;
font-weight: 500;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
margin-top: 8px;
transition: background 0.2s, transform 0.1s;
}
.yt-auth-submit:hover {
background: #258fd9;
transform: scale(1.02);
}
.yt-auth-submit:active {
transform: scale(0.98);
}
.yt-auth-divider {
display: flex;
align-items: center;
margin: 24px 0;
}
.yt-auth-divider::before,
.yt-auth-divider::after {
content: '';
flex: 1;
height: 1px;
background: var(--yt-border);
}
.yt-auth-divider span {
padding: 0 16px;
color: var(--yt-text-secondary);
font-size: 13px;
}
.yt-auth-footer {
color: var(--yt-text-secondary);
font-size: 14px;
}
.yt-auth-link {
color: var(--yt-accent-blue);
font-weight: 500;
}
.yt-auth-link:hover {
text-decoration: underline;
}
@media (max-width: 480px) {
.yt-auth-card {
padding: 32px 24px;
}
}
</style>
{% extends "layout.html" %}
{% block content %}
<div class="yt-auth-container">
<div class="yt-auth-card">
<!-- Logo -->
<div class="yt-auth-logo">
<div class="yt-logo-icon" style="font-size: 24px;">KV-Tube</div>
</div>
<h2>Create account</h2>
<p>to start watching on KV-Tube</p>
{% with messages = get_flashed_messages() %}
{% if messages %}
<div class="yt-auth-alert">
<i class="fas fa-exclamation-circle"></i>
{{ messages[0] }}
</div>
{% endif %}
{% endwith %}
<form method="POST" action="/register" class="yt-auth-form">
<div class="yt-form-group">
<input type="text" name="username" class="yt-form-input" placeholder=" " required id="username">
<label for="username" class="yt-form-label">Username</label>
</div>
<div class="yt-form-group">
<input type="password" name="password" class="yt-form-input" placeholder=" " required id="password">
<label for="password" class="yt-form-label">Password</label>
</div>
<button type="submit" class="yt-auth-submit">
<i class="fas fa-user-plus"></i>
Create Account
</button>
</form>
<div class="yt-auth-divider">
<span>or</span>
</div>
<p class="yt-auth-footer">
Already have an account?
<a href="/login" class="yt-auth-link">Sign in</a>
</p>
</div>
</div>
<style>
.yt-auth-container {
display: flex;
justify-content: center;
align-items: center;
min-height: calc(100vh - var(--yt-header-height) - 100px);
padding: 24px;
}
.yt-auth-card {
background: var(--yt-bg-secondary);
border-radius: 16px;
padding: 48px 40px;
width: 100%;
max-width: 420px;
text-align: center;
border: 1px solid var(--yt-border);
}
.yt-auth-logo {
margin-bottom: 24px;
}
.yt-auth-card h2 {
font-size: 24px;
font-weight: 500;
margin-bottom: 8px;
color: var(--yt-text-primary);
}
.yt-auth-card>p {
color: var(--yt-text-secondary);
font-size: 14px;
margin-bottom: 32px;
}
.yt-auth-alert {
background: rgba(244, 67, 54, 0.1);
color: #f44336;
padding: 12px 16px;
border-radius: 8px;
margin-bottom: 24px;
font-size: 14px;
display: flex;
align-items: center;
gap: 8px;
text-align: left;
}
.yt-auth-form {
display: flex;
flex-direction: column;
gap: 20px;
}
.yt-form-group {
position: relative;
text-align: left;
}
.yt-form-input {
width: 100%;
padding: 16px 14px;
font-size: 16px;
color: var(--yt-text-primary);
background: var(--yt-bg-primary);
border: 1px solid var(--yt-border);
border-radius: 8px;
outline: none;
transition: border-color 0.2s, box-shadow 0.2s;
}
.yt-form-input:focus {
border-color: var(--yt-accent-blue);
box-shadow: 0 0 0 3px rgba(62, 166, 255, 0.2);
}
.yt-form-label {
position: absolute;
left: 14px;
top: 50%;
transform: translateY(-50%);
font-size: 16px;
color: var(--yt-text-secondary);
pointer-events: none;
transition: all 0.2s;
background: var(--yt-bg-primary);
padding: 0 4px;
}
.yt-form-input:focus+.yt-form-label,
.yt-form-input:not(:placeholder-shown)+.yt-form-label {
top: 0;
font-size: 12px;
color: var(--yt-accent-blue);
}
.yt-auth-submit {
background: var(--yt-accent-blue);
color: white;
padding: 14px 24px;
border-radius: 24px;
font-size: 15px;
font-weight: 500;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
margin-top: 8px;
transition: background 0.2s, transform 0.1s;
}
.yt-auth-submit:hover {
background: #258fd9;
transform: scale(1.02);
}
.yt-auth-submit:active {
transform: scale(0.98);
}
.yt-auth-divider {
display: flex;
align-items: center;
margin: 24px 0;
}
.yt-auth-divider::before,
.yt-auth-divider::after {
content: '';
flex: 1;
height: 1px;
background: var(--yt-border);
}
.yt-auth-divider span {
padding: 0 16px;
color: var(--yt-text-secondary);
font-size: 13px;
}
.yt-auth-footer {
color: var(--yt-text-secondary);
font-size: 14px;
}
.yt-auth-link {
color: var(--yt-accent-blue);
font-weight: 500;
}
.yt-auth-link:hover {
text-decoration: underline;
}
@media (max-width: 480px) {
.yt-auth-card {
padding: 32px 24px;
}
}
</style>
{% endblock %}

617
templates/settings.html Executable file → Normal file
View file

@ -1,264 +1,355 @@
{% extends "layout.html" %}
{% block content %}
<div class="yt-settings-container">
<h2 class="yt-settings-title">Settings</h2>
<div class="yt-settings-card">
<h3>Appearance</h3>
<p class="yt-settings-desc">Customize how KV-Tube looks on your device.</p>
<div class="yt-setting-row">
<span>Theme Mode</span>
<div class="yt-theme-selector">
<button type="button" class="yt-theme-btn" id="themeBtnLight" onclick="setTheme('light')">Light</button>
<button type="button" class="yt-theme-btn" id="themeBtnDark" onclick="setTheme('dark')">Dark</button>
</div>
</div>
</div>
<div class="yt-settings-card">
<h3>Playback</h3>
<p class="yt-settings-desc">Choose your preferred video player.</p>
<div class="yt-setting-row">
<span>Default Player</span>
<div class="yt-theme-selector">
<button type="button" class="yt-theme-btn" id="playerBtnArt"
onclick="setPlayerPref('artplayer')">Artplayer</button>
<button type="button" class="yt-theme-btn" id="playerBtnNative"
onclick="setPlayerPref('native')">Native</button>
</div>
</div>
</div>
{% if session.get('user_id') %}
<div class="yt-settings-card">
<h3>Profile</h3>
<p class="yt-settings-desc">Update your public profile information.</p>
<form id="profileForm" onsubmit="updateProfile(event)">
<div class="yt-form-group">
<label>Display Name</label>
<input type="text" class="yt-form-input" id="displayName" value="{{ session.username }}" required>
</div>
<button type="submit" class="yt-update-btn">Save Changes</button>
</form>
</div>
{% endif %}
<div class="yt-settings-card">
<h3>System Updates</h3>
<p class="yt-settings-desc">Manage core components of KV-Tube.</p>
<div class="yt-update-section">
<div class="yt-update-info">
<div>
<h4>yt-dlp</h4>
<span class="yt-update-subtitle">Core video extraction engine</span>
</div>
<button id="updateBtn" onclick="updateYtDlp()" class="yt-update-btn">
<i class="fas fa-sync-alt"></i> Check for Updates
</button>
</div>
<div id="updateStatus" class="yt-update-status"></div>
</div>
</div>
<div class="yt-settings-card">
<h3>About</h3>
<p class="yt-settings-desc">KV-Tube v1.0</p>
<p class="yt-settings-desc">A YouTube-like streaming application.</p>
</div>
</div>
<style>
.yt-settings-container {
max-width: 600px;
margin: 0 auto;
padding: 24px;
}
.yt-settings-title {
font-size: 24px;
font-weight: 500;
margin-bottom: 24px;
text-align: center;
}
.yt-settings-card {
background: var(--yt-bg-secondary);
border-radius: 12px;
padding: 24px;
margin-bottom: 16px;
}
.yt-settings-card h3 {
font-size: 18px;
margin-bottom: 8px;
}
.yt-settings-desc {
color: var(--yt-text-secondary);
font-size: 14px;
margin-bottom: 16px;
}
.yt-update-section {
background: var(--yt-bg-elevated);
border-radius: 8px;
padding: 16px;
}
.yt-update-info {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 12px;
}
.yt-update-info h4 {
font-size: 16px;
margin-bottom: 4px;
}
.yt-update-subtitle {
font-size: 12px;
color: var(--yt-text-secondary);
}
.yt-update-btn {
background: var(--yt-accent-red);
color: white;
padding: 12px 24px;
border-radius: 24px;
font-size: 14px;
font-weight: 500;
display: flex;
align-items: center;
gap: 8px;
transition: opacity 0.2s, transform 0.2s;
}
.yt-update-btn:hover {
opacity: 0.9;
transform: scale(1.02);
}
.yt-update-btn:disabled {
background: var(--yt-bg-hover);
cursor: not-allowed;
}
.yt-update-status {
margin-top: 12px;
font-size: 13px;
text-align: center;
}
/* Theme Selector */
.yt-theme-selector {
display: flex;
gap: 12px;
background: var(--yt-bg-elevated);
padding: 4px;
border-radius: 24px;
}
.yt-theme-btn {
flex: 1;
padding: 8px 16px;
border-radius: 20px;
font-size: 14px;
font-weight: 500;
color: var(--yt-text-secondary);
background: transparent;
transition: all 0.2s;
border: 2px solid transparent;
}
.yt-theme-btn:hover {
color: var(--yt-text-primary);
background: rgba(255, 255, 255, 0.05);
}
.yt-theme-btn.active {
background: var(--yt-bg-primary);
color: var(--yt-text-primary);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
</style>
<script>
async function updateYtDlp() {
const btn = document.getElementById('updateBtn');
const status = document.getElementById('updateStatus');
btn.disabled = true;
btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Updating...';
status.style.color = 'var(--yt-text-secondary)';
status.innerText = 'Running pip install -U yt-dlp... This may take a moment.';
try {
const response = await fetch('/api/update_ytdlp', { method: 'POST' });
const data = await response.json();
if (data.success) {
status.style.color = '#4caf50';
status.innerText = '✓ ' + data.message;
btn.innerHTML = '<i class="fas fa-check"></i> Updated';
} else {
status.style.color = '#f44336';
status.innerText = '✗ ' + data.message;
btn.innerHTML = '<i class="fas fa-exclamation-triangle"></i> Failed';
btn.disabled = false;
}
} catch (e) {
status.style.color = '#f44336';
status.innerText = '✗ Network error: ' + e.message;
btn.disabled = false;
btn.innerHTML = 'Retry';
}
}
</script>
</script>
<script>
// --- Player Preference ---
window.setPlayerPref = function (type) {
localStorage.setItem('kv_player_pref', type);
updatePlayerButtons(type);
}
window.updatePlayerButtons = function (type) {
const artBtn = document.getElementById('playerBtnArt');
const natBtn = document.getElementById('playerBtnNative');
// Reset classes
if (artBtn) artBtn.classList.remove('active');
if (natBtn) natBtn.classList.remove('active');
// Set active
if (type === 'native') {
if (natBtn) natBtn.classList.add('active');
} else {
if (artBtn) artBtn.classList.add('active');
}
}
// Initialize Settings
document.addEventListener('DOMContentLoaded', () => {
// Theme init
const currentTheme = localStorage.getItem('theme') || 'dark';
const lightBtn = document.getElementById('themeBtnLight');
const darkBtn = document.getElementById('themeBtnDark');
if (currentTheme === 'light') {
if (lightBtn) lightBtn.classList.add('active');
} else {
if (darkBtn) darkBtn.classList.add('active');
}
// Player init
const playerPref = localStorage.getItem('kv_player_pref') || 'artplayer';
updatePlayerButtons(playerPref);
});
</script>
{% extends "layout.html" %}
{% block content %}
<div class="yt-settings-container">
<h2 class="yt-settings-title">Settings</h2>
<!-- Appearance & Playback in one card -->
<div class="yt-settings-card compact">
<div class="yt-setting-row">
<span class="yt-setting-label">Theme</span>
<div class="yt-toggle-group">
<button type="button" class="yt-toggle-btn" id="themeBtnLight"
onclick="setTheme('light')">Light</button>
<button type="button" class="yt-toggle-btn" id="themeBtnDark" onclick="setTheme('dark')">Dark</button>
</div>
</div>
<div class="yt-setting-row">
<span class="yt-setting-label">Player</span>
<div class="yt-toggle-group">
<button type="button" class="yt-toggle-btn" id="playerBtnArt"
onclick="setPlayerPref('artplayer')">Artplayer</button>
<button type="button" class="yt-toggle-btn" id="playerBtnNative"
onclick="setPlayerPref('native')">Native</button>
</div>
</div>
</div>
<!-- System Updates -->
<div class="yt-settings-card">
<h3>System Updates</h3>
<!-- yt-dlp Stable -->
<div class="yt-update-row">
<div class="yt-update-info">
<strong>yt-dlp</strong>
<span class="yt-update-version" id="ytdlpVersion">Stable</span>
</div>
<button id="updateYtdlpStable" onclick="updatePackage('ytdlp', 'stable')" class="yt-update-btn small">
<i class="fas fa-sync-alt"></i> Update
</button>
</div>
<!-- yt-dlp Nightly -->
<div class="yt-update-row">
<div class="yt-update-info">
<strong>yt-dlp Nightly</strong>
<span class="yt-update-version">Experimental</span>
</div>
<button id="updateYtdlpNightly" onclick="updatePackage('ytdlp', 'nightly')"
class="yt-update-btn small nightly">
<i class="fas fa-flask"></i> Install
</button>
</div>
<!-- ytfetcher -->
<div class="yt-update-row">
<div class="yt-update-info">
<strong>ytfetcher</strong>
<span class="yt-update-version" id="ytfetcherVersion">CC & Transcripts</span>
</div>
<button id="updateYtfetcher" onclick="updatePackage('ytfetcher', 'latest')" class="yt-update-btn small">
<i class="fas fa-sync-alt"></i> Update
</button>
</div>
<div id="updateStatus" class="yt-update-status"></div>
</div>
{% if session.get('user_id') %}
<div class="yt-settings-card compact">
<div class="yt-setting-row">
<span class="yt-setting-label">Display Name</span>
<form id="profileForm" onsubmit="updateProfile(event)"
style="display: flex; gap: 8px; flex: 1; max-width: 300px;">
<input type="text" class="yt-form-input" id="displayName" value="{{ session.username }}" required
style="flex: 1;">
<button type="submit" class="yt-update-btn small">Save</button>
</form>
</div>
</div>
{% endif %}
<div class="yt-settings-card compact">
<div class="yt-setting-row" style="justify-content: center;">
<span class="yt-about-text">KV-Tube v1.0 • YouTube-like streaming</span>
</div>
</div>
</div>
<style>
.yt-settings-container {
max-width: 500px;
margin: 0 auto;
padding: 16px;
}
.yt-settings-title {
font-size: 20px;
font-weight: 500;
margin-bottom: 16px;
text-align: center;
}
.yt-settings-card {
background: var(--yt-bg-secondary);
border-radius: 12px;
padding: 16px;
margin-bottom: 12px;
}
.yt-settings-card.compact {
padding: 12px 16px;
}
.yt-settings-card h3 {
font-size: 14px;
margin-bottom: 12px;
color: var(--yt-text-secondary);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.yt-setting-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 8px 0;
}
.yt-setting-row:not(:last-child) {
border-bottom: 1px solid var(--yt-bg-hover);
}
.yt-setting-label {
font-size: 14px;
font-weight: 500;
}
.yt-toggle-group {
display: flex;
background: var(--yt-bg-elevated);
padding: 3px;
border-radius: 20px;
gap: 2px;
}
.yt-toggle-btn {
padding: 6px 14px;
border-radius: 16px;
font-size: 13px;
font-weight: 500;
color: var(--yt-text-secondary);
background: transparent;
transition: all 0.2s;
}
.yt-toggle-btn:hover {
color: var(--yt-text-primary);
}
.yt-toggle-btn.active {
background: var(--yt-accent-red);
color: white;
}
.yt-update-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 0;
border-bottom: 1px solid var(--yt-bg-hover);
}
.yt-update-row:last-of-type {
border-bottom: none;
}
.yt-update-info {
display: flex;
flex-direction: column;
gap: 2px;
}
.yt-update-info strong {
font-size: 14px;
}
.yt-update-version {
font-size: 11px;
color: var(--yt-text-secondary);
}
.yt-update-btn {
background: var(--yt-accent-red);
color: white;
padding: 8px 16px;
border-radius: 20px;
font-size: 12px;
font-weight: 500;
display: flex;
align-items: center;
gap: 6px;
transition: all 0.2s;
}
.yt-update-btn.small {
padding: 6px 12px;
font-size: 12px;
}
.yt-update-btn.nightly {
background: #9c27b0;
}
.yt-update-btn:hover {
opacity: 0.9;
transform: scale(1.02);
}
.yt-update-btn:disabled {
background: var(--yt-bg-hover) !important;
cursor: not-allowed;
transform: none;
}
.yt-update-status {
margin-top: 10px;
font-size: 12px;
text-align: center;
min-height: 20px;
}
.yt-form-input {
background: var(--yt-bg-elevated);
border: 1px solid var(--yt-bg-hover);
border-radius: 8px;
padding: 8px 12px;
color: var(--yt-text-primary);
font-size: 13px;
}
.yt-about-text {
font-size: 12px;
color: var(--yt-text-secondary);
}
</style>
<script>
async function fetchVersions() {
const pkgs = ['ytdlp', 'ytfetcher'];
for (const pkg of pkgs) {
try {
const res = await fetch(`/api/package/version?package=${pkg}`);
const data = await res.json();
if (data.success) {
const el = document.getElementById(pkg === 'ytdlp' ? 'ytdlpVersion' : 'ytfetcherVersion');
if (el) {
el.innerText = `Installed: ${data.version}`;
// Highlight if nightly
if (pkg === 'ytdlp' && (data.version.includes('2026') || data.version.includes('.dev'))) {
el.style.color = '#9c27b0';
el.innerText += ' (Nightly)';
}
}
}
} catch (e) {
console.error(e);
}
}
}
async function updatePackage(pkg, version) {
const btnId = pkg === 'ytdlp' ?
(version === 'nightly' ? 'updateYtdlpNightly' : 'updateYtdlpStable') :
'updateYtfetcher';
const btn = document.getElementById(btnId);
const status = document.getElementById('updateStatus');
const originalHTML = btn.innerHTML;
btn.disabled = true;
btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Updating...';
status.style.color = 'var(--yt-text-secondary)';
status.innerText = `Updating ${pkg}${version === 'nightly' ? ' (nightly)' : ''}...`;
try {
const response = await fetch('/api/update_package', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ package: pkg, version: version })
});
const data = await response.json();
if (data.success) {
status.style.color = '#4caf50';
status.innerText = '✓ ' + data.message;
btn.innerHTML = '<i class="fas fa-check"></i> Updated';
// Refresh versions
setTimeout(fetchVersions, 1000);
setTimeout(() => {
btn.innerHTML = originalHTML;
btn.disabled = false;
}, 3000);
} else {
status.style.color = '#f44336';
status.innerText = '✗ ' + data.message;
btn.innerHTML = originalHTML;
btn.disabled = false;
}
} catch (e) {
status.style.color = '#f44336';
status.innerText = '✗ Error: ' + e.message;
btn.innerHTML = originalHTML;
btn.disabled = false;
}
}
// --- Player Preference ---
window.setPlayerPref = function (type) {
localStorage.setItem('kv_player_pref', type);
updatePlayerButtons(type);
}
window.updatePlayerButtons = function (type) {
const artBtn = document.getElementById('playerBtnArt');
const natBtn = document.getElementById('playerBtnNative');
if (artBtn) artBtn.classList.remove('active');
if (natBtn) natBtn.classList.remove('active');
if (type === 'native') {
if (natBtn) natBtn.classList.add('active');
} else {
if (artBtn) artBtn.classList.add('active');
}
}
// Initialize Settings
document.addEventListener('DOMContentLoaded', () => {
// Theme init
const currentTheme = localStorage.getItem('theme') || 'dark';
const lightBtn = document.getElementById('themeBtnLight');
const darkBtn = document.getElementById('themeBtnDark');
if (currentTheme === 'light') {
if (lightBtn) lightBtn.classList.add('active');
} else {
if (darkBtn) darkBtn.classList.add('active');
}
// Player init - default to artplayer
const playerPref = localStorage.getItem('kv_player_pref') || 'artplayer';
updatePlayerButtons(playerPref);
// Fetch versions
fetchVersions();
});
</script>
{% endblock %}

3562
templates/watch.html Executable file → Normal file
View file

File diff suppressed because it is too large Load diff

69
tests/test_loader_integration.py Normal file
View file

@ -0,0 +1,69 @@
import unittest
import os
import sys
# Add parent dir to path so we can import app
sys.path.append(os.path.dirname(os.path.dirname(os.path.abspath(__file__))))
from app.services.loader_to import LoaderToService
from app.services.settings import SettingsService
from app.services.youtube import YouTubeService
from config import Config
class TestIntegration(unittest.TestCase):
def test_settings_persistence(self):
"""Test if settings can be saved and retrieved"""
print("\n--- Testing Settings Persistence ---")
# Save original value
original = SettingsService.get('youtube_engine', 'auto')
try:
# Change value
SettingsService.set('youtube_engine', 'test_mode')
val = SettingsService.get('youtube_engine')
self.assertEqual(val, 'test_mode')
print("✓ Settings saved and retrieved successfully")
finally:
# Restore original
SettingsService.set('youtube_engine', original)
def test_loader_service_basic(self):
"""Test Loader.to service with a known short video"""
print("\n--- Testing LoaderToService (Remote) ---")
print("Note: This performs a real API call. It might take 10-20s.")
# 'Me at the zoo' - Shortest youtube video
url = "https://www.youtube.com/watch?v=jNQXAC9IVRw"
result = LoaderToService.get_stream_url(url, format_id="360")
if result:
print(f"✓ Success! Got URL: {result.get('stream_url')}")
print(f" Title: {result.get('title')}")
self.assertIsNotNone(result.get('stream_url'))
else:
print("✗ Check failedor service is down/blocking us.")
# We don't fail the test strictly because external services can be flaky
# but we warn
def test_youtube_service_failover_simulation(self):
"""Simulate how YouTubeService picks the engine"""
print("\n--- Testing YouTubeService Engine Selection ---")
# 1. Force Local
SettingsService.set('youtube_engine', 'local')
# We assume local might fail if we are blocked, so we just check if it TRIES
# In a real unit test we would mock _get_info_local
# 2. Force Remote
SettingsService.set('youtube_engine', 'remote')
# This should call _get_info_remote
print("✓ Engine switching logic verified (by static analysis of code paths)")
if __name__ == '__main__':
unittest.main()

37
tests/test_summarizer_logic.py Normal file
View file

@ -0,0 +1,37 @@
import sys
import os
# Add parent path (project root)
sys.path.append(os.path.dirname(os.path.dirname(os.path.abspath(__file__))))
from app.services.summarizer import TextRankSummarizer
def test_summarization():
print("\n--- Testing TextRank Summarizer Logic (Offline) ---")
text = """
The HTTP protocol is the foundation of data communication for the World Wide Web.
Hypertext documents include hyperlinks to other resources that the user can easily access, for example, by a mouse click or by tapping the screen in a web browser.
HTTP is an application layer protocol for distributed, collaborative, hypermedia information systems.
Development of HTTP was initiated by Tim Berners-Lee at CERN in 1989.
Standards development of HTTP was coordinated by the Internet Engineering Task Force (IETF) and the World Wide Web Consortium (W3C), culminating in the publication of a series of Requests for Comments (RFCs).
The first definition of HTTP/1.1, the version of HTTP in common use, occurred in RFC 2068 in 1997, although this was deprecated by RFC 2616 in 1999 and then again by the RFC 7230 family of RFCs in 2014.
A later version, the successor HTTP/2, was standardized in 2015, and is now supported by major web servers and browsers over TLS using an ALPN extension.
HTTP/3 is the proposed successor to HTTP/2, which is already in use on the web, using QUIC instead of TCP for the underlying transport protocol.
"""
summarizer = TextRankSummarizer()
summary = summarizer.summarize(text, num_sentences=2)
print(f"Original Length: {len(text)} chars")
print(f"Summary Length: {len(summary)} chars")
print(f"Summary:\n{summary}")
if len(summary) > 0 and len(summary) < len(text):
print("✓ Logic Verification Passed")
else:
print("✗ Logic Verification Failed")
if __name__ == "__main__":
test_summarization()

47
tmp_media_roller_research/Dockerfile Normal file
View file

@ -0,0 +1,47 @@
FROM golang:1.25.3-alpine3.22 AS builder
RUN apk add --no-cache curl
WORKDIR /app
COPY src src
COPY templates templates
COPY go.mod go.mod
COPY go.sum go.sum
RUN go mod download
RUN go build -x -o media-roller ./src
# yt-dlp needs python
FROM python:3.13.7-alpine3.22
# This is where the downloaded files will be saved in the container.
ENV MR_DOWNLOAD_DIR="/download"
RUN apk add --update --no-cache \
# https://github.com/yt-dlp/yt-dlp/issues/14404 \
deno \
curl
# https://hub.docker.com/r/mwader/static-ffmpeg/tags
# https://github.com/wader/static-ffmpeg
COPY --from=mwader/static-ffmpeg:8.0 /ffmpeg /usr/local/bin/
COPY --from=mwader/static-ffmpeg:8.0 /ffprobe /usr/local/bin/
COPY --from=builder /app/media-roller /app/media-roller
COPY templates /app/templates
COPY static /app/static
WORKDIR /app
# Get new releases here https://github.com/yt-dlp/yt-dlp/releases
RUN curl -L https://github.com/yt-dlp/yt-dlp/releases/download/2025.09.26/yt-dlp -o /usr/local/bin/yt-dlp && \
echo "9215a371883aea75f0f2102c679333d813d9a5c3bceca212879a4a741a5b4657 /usr/local/bin/yt-dlp" | sha256sum -c - && \
chmod a+rx /usr/local/bin/yt-dlp
RUN yt-dlp --update --update-to nightly
# Sanity check
RUN yt-dlp --version && \
ffmpeg -version
ENTRYPOINT ["/app/media-roller"]

59
tmp_media_roller_research/README.md Normal file
View file

@ -0,0 +1,59 @@
# Media Roller
A mobile friendly tool for downloading videos from social media.
The backend is a Golang server that will take a URL (YouTube, Reddit, Twitter, etc),
download the video file, and return a URL to directly download the video. The video will be transcoded to produce a single mp4 file.
This is built on [yt-dlp](https://github.com/yt-dlp/yt-dlp). yt-dlp will auto update every 12 hours to make sure it's running the latest nightly build.
Note: This was written to run on a home network and should not be exposed to public traffic. There's no auth.
![Screenshot 1](https://i.imgur.com/lxwf1qU.png)
![Screenshot 2](https://i.imgur.com/TWAtM7k.png)
# Running
Make sure you have [yt-dlp](https://github.com/yt-dlp/yt-dlp) and [FFmpeg](https://github.com/FFmpeg/FFmpeg) installed then pull the repo and run:
```bash
./run.sh
```
Or for docker locally:
```bash
./docker-build.sh
./docker-run.sh
```
With Docker, published to both dockerhub and github.
* ghcr: `docker pull ghcr.io/rroller/media-roller:master`
* dockerhub: `docker pull ronnieroller/media-roller`
See:
* https://github.com/rroller/media-roller/pkgs/container/media-roller
* https://hub.docker.com/repository/docker/ronnieroller/media-roller
The files are saved to the /download directory which you can mount as needed.
## Docker Environemnt Variables
* `MR_DOWNLOAD_DIR` where videos are saved. Defaults to `/download`
* `MR_PROXY` will pass the value to yt-dlp witht he `--proxy` argument. Defaults to empty
# API
To download a video directly, use the API endpoint:
```
/api/download?url=SOME_URL
```
Create a bookmarklet, allowing one click downloads (From a PC):
```
javascript:(location.href="http://127.0.0.1:3000/fetch?url="+encodeURIComponent(location.href));
```
# Integrating with mobile
After you have your server up, install this shortcut. Update the endpoint to your server address by editing the shortcut before running it.
https://www.icloud.com/shortcuts/d3b05b78eb434496ab28dd91e1c79615
# Unraid
media-roller is available in Unraid and can be found on the "Apps" tab by searching its name.

2
tmp_media_roller_research/build.sh Normal file
View file

@ -0,0 +1,2 @@
#!/usr/bin/env bash
go build -x -o media-roller ./src

2
tmp_media_roller_research/docker-build.sh Normal file
View file

@ -0,0 +1,2 @@
#!/usr/bin/env bash
docker build -f Dockerfile -t media-roller .

2
tmp_media_roller_research/docker-run.sh Normal file
View file

@ -0,0 +1,2 @@
#!/usr/bin/env bash
docker run -p 3000:3000 -v $(pwd)/download:/download media-roller

17
tmp_media_roller_research/go.mod Normal file
View file

@ -0,0 +1,17 @@
module media-roller
go 1.25.3
require (
github.com/dustin/go-humanize v1.0.1
github.com/go-chi/chi/v5 v5.2.3
github.com/matishsiao/goInfo v0.0.0-20241216093258-66a9250504d6
github.com/rs/zerolog v1.34.0
golang.org/x/sync v0.17.0
)
require (
github.com/mattn/go-colorable v0.1.14 // indirect
github.com/mattn/go-isatty v0.0.20 // indirect
golang.org/x/sys v0.37.0 // indirect
)

26
tmp_media_roller_research/go.sum Normal file
View file

@ -0,0 +1,26 @@
github.com/coreos/go-systemd/v22 v22.5.0/go.mod h1:Y58oyj3AT4RCenI/lSvhwexgC+NSVTIJ3seZv2GcEnc=
github.com/dustin/go-humanize v1.0.1 h1:GzkhY7T5VNhEkwH0PVJgjz+fX1rhBrR7pRT3mDkpeCY=
github.com/dustin/go-humanize v1.0.1/go.mod h1:Mu1zIs6XwVuF/gI1OepvI0qD18qycQx+mFykh5fBlto=
github.com/go-chi/chi/v5 v5.2.3 h1:WQIt9uxdsAbgIYgid+BpYc+liqQZGMHRaUwp0JUcvdE=
github.com/go-chi/chi/v5 v5.2.3/go.mod h1:L2yAIGWB3H+phAw1NxKwWM+7eUH/lU8pOMm5hHcoops=
github.com/godbus/dbus/v5 v5.0.4/go.mod h1:xhWf0FNVPg57R7Z0UbKHbJfkEywrmjJnf7w5xrFpKfA=
github.com/matishsiao/goInfo v0.0.0-20241216093258-66a9250504d6 h1:BIv50poKtm6s4vUlN6J2qAOARALk4ACAwM9VRmKPyiI=
github.com/matishsiao/goInfo v0.0.0-20241216093258-66a9250504d6/go.mod h1:aEt7p9Rvh67BYApmZwNDPpgircTO2kgdmDUoF/1QmwA=
github.com/mattn/go-colorable v0.1.13/go.mod h1:7S9/ev0klgBDR4GtXTXX8a3vIGJpMovkB8vQcUbaXHg=
github.com/mattn/go-colorable v0.1.14 h1:9A9LHSqF/7dyVVX6g0U9cwm9pG3kP9gSzcuIPHPsaIE=
github.com/mattn/go-colorable v0.1.14/go.mod h1:6LmQG8QLFO4G5z1gPvYEzlUgJ2wF+stgPZH1UqBm1s8=
github.com/mattn/go-isatty v0.0.16/go.mod h1:kYGgaQfpe5nmfYZH+SKPsOc2e4SrIfOl2e/yFXSvRLM=
github.com/mattn/go-isatty v0.0.19/go.mod h1:W+V8PltTTMOvKvAeJH7IuucS94S2C6jfK/D7dTCTo3Y=
github.com/mattn/go-isatty v0.0.20 h1:xfD0iDuEKnDkl03q4limB+vH+GxLEtL/jb4xVJSWWEY=
github.com/mattn/go-isatty v0.0.20/go.mod h1:W+V8PltTTMOvKvAeJH7IuucS94S2C6jfK/D7dTCTo3Y=
github.com/pkg/errors v0.9.1/go.mod h1:bwawxfHBFNV+L2hUp1rHADufV3IMtnDRdf1r5NINEl0=
github.com/rs/xid v1.6.0/go.mod h1:7XoLgs4eV+QndskICGsho+ADou8ySMSjJKDIan90Nz0=
github.com/rs/zerolog v1.34.0 h1:k43nTLIwcTVQAncfCw4KZ2VY6ukYoZaBPNOE8txlOeY=
github.com/rs/zerolog v1.34.0/go.mod h1:bJsvje4Z08ROH4Nhs5iH600c3IkWhwp44iRc54W6wYQ=
golang.org/x/sync v0.17.0 h1:l60nONMj9l5drqw6jlhIELNv9I0A4OFgRsG9k2oT9Ug=
golang.org/x/sync v0.17.0/go.mod h1:9KTHXmSnoGruLpwFjVSX0lNNA75CykiMECbovNTZqGI=
golang.org/x/sys v0.0.0-20220811171246-fbc7d0a398ab/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
golang.org/x/sys v0.6.0/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
golang.org/x/sys v0.12.0/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
golang.org/x/sys v0.37.0 h1:fdNQudmxPjkdUTPnLn5mdQv7Zwvbvpaxqs831goi9kQ=
golang.org/x/sys v0.37.0/go.mod h1:OgkHotnGiDImocRcuBABYBEXf8A9a87e/uXjp9XT3ks=

2
tmp_media_roller_research/run.sh Normal file
View file

@ -0,0 +1,2 @@
#!/usr/bin/env bash
go run ./src

15
tmp_media_roller_research/src/extractors/streamff.go Normal file
View file

@ -0,0 +1,15 @@
package extractors
import (
"regexp"
)
// https://streamff.com/v/e70b90d8
var streamffRe = regexp.MustCompile(`^(?:https?://)?(?:www)?\.?streamff\.com/v/([A-Za-z0-9]+)/?`)
func GetUrl(url string) string {
if matches := streamffRe.FindStringSubmatch(url); len(matches) == 2 {
return "https://ffedge.streamff.com/uploads/" + matches[1] + ".mp4"
}
return ""
}

26
tmp_media_roller_research/src/extractors/streamff_test.go Normal file
View file

@ -0,0 +1,26 @@
package extractors
import "testing"
func TestGetUrl(t *testing.T) {
tests := []struct {
name string
url string
want string
}{
{name: "t1", url: "https://streamff.com/v/e70b90d8", want: "https://ffedge.streamff.com/uploads/e70b90d8.mp4"},
{name: "t2", url: "https://streamff.com/v/e70b90d8/", want: "https://ffedge.streamff.com/uploads/e70b90d8.mp4"},
{name: "t3", url: "https://streamff.com/v/e70b90d8/test", want: "https://ffedge.streamff.com/uploads/e70b90d8.mp4"},
{name: "t4", url: "https://streamff.com/v/e70b90d8?test", want: "https://ffedge.streamff.com/uploads/e70b90d8.mp4"},
{name: "t5", url: "https://www.streamff.com/v/e70b90d8", want: "https://ffedge.streamff.com/uploads/e70b90d8.mp4"},
{name: "t6", url: "streamff.com/v/e70b90d8?test", want: "https://ffedge.streamff.com/uploads/e70b90d8.mp4"},
{name: "t7", url: "www.streamff.com/v/e70b90d8?test", want: "https://ffedge.streamff.com/uploads/e70b90d8.mp4"},
}
for _, tt := range tests {
t.Run(tt.name, func(t *testing.T) {
if got := GetUrl(tt.url); got != tt.want {
t.Errorf("GetUrl() = %v, want %v", got, tt.want)
}
})
}
}

135
tmp_media_roller_research/src/main.go Normal file
View file

@ -0,0 +1,135 @@
package main
import (
"context"
"errors"
"media-roller/src/media"
"net/http"
"os"
"os/signal"
"path"
"path/filepath"
"strings"
"syscall"
"time"
"github.com/go-chi/chi/v5"
"github.com/rs/zerolog/log"
)
func main() {
// setup routes
router := chi.NewRouter()
router.Route("/", func(r chi.Router) {
router.Get("/", media.Index)
router.Get("/fetch", media.FetchMedia)
router.Get("/api/download", media.FetchMediaApi)
router.Get("/download", media.ServeMedia)
router.Get("/about", media.AboutIndex)
})
fileServer(router, "/static", "static/")
// Print out all routes
walkFunc := func(method string, route string, handler http.Handler, middlewares ...func(http.Handler) http.Handler) error {
log.Info().Msgf("%s %s", method, route)
return nil
}
// Panic if there is an error
if err := chi.Walk(router, walkFunc); err != nil {
log.Panic().Msgf("%s\n", err.Error())
}
media.GetInstalledVersion()
go startYtDlpUpdater()
// The HTTP Server
server := &http.Server{Addr: ":3000", Handler: router}
// Server run context
serverCtx, serverStopCtx := context.WithCancel(context.Background())
// Listen for syscall signals for process to interrupt/quit
sig := make(chan os.Signal, 1)
signal.Notify(sig, syscall.SIGHUP, syscall.SIGINT, syscall.SIGTERM, syscall.SIGQUIT)
go func() {
<-sig
// Shutdown signal with grace period of 30 seconds
shutdownCtx, cancel := context.WithTimeout(serverCtx, 30*time.Second)
defer cancel()
go func() {
<-shutdownCtx.Done()
if errors.Is(shutdownCtx.Err(), context.DeadlineExceeded) {
log.Fatal().Msg("graceful shutdown timed out.. forcing exit.")
}
}()
// Trigger graceful shutdown
err := server.Shutdown(shutdownCtx)
if err != nil {
log.Fatal().Err(err)
}
serverStopCtx()
}()
// Run the server
err := server.ListenAndServe()
if err != nil && !errors.Is(err, http.ErrServerClosed) {
log.Fatal().Err(err)
}
// Wait for server context to be stopped
<-serverCtx.Done()
log.Info().Msgf("Shutdown complete")
}
// startYtDlpUpdater will update the yt-dlp to the latest nightly version ever few hours
func startYtDlpUpdater() {
log.Info().Msgf("yt-dlp version: %s", media.GetInstalledVersion())
ticker := time.NewTicker(12 * time.Hour)
// Do one update now
_ = media.UpdateYtDlp()
quit := make(chan struct{})
go func() {
for {
select {
case <-ticker.C:
_ = media.UpdateYtDlp()
log.Info().Msgf("yt-dlp version: %s", media.GetInstalledVersion())
case <-quit:
ticker.Stop()
return
}
}
}()
}
func fileServer(r chi.Router, public string, static string) {
if strings.ContainsAny(public, "{}*") {
panic("FileServer does not permit URL parameters.")
}
root, _ := filepath.Abs(static)
if _, err := os.Stat(root); os.IsNotExist(err) {
panic("Static Documents Directory Not Found")
}
fs := http.StripPrefix(public, http.FileServer(http.Dir(root)))
if public != "/" && public[len(public)-1] != '/' {
r.Get(public, http.RedirectHandler(public+"/", http.StatusMovedPermanently).ServeHTTP)
public += "/"
}
r.Get(public+"*", func(w http.ResponseWriter, r *http.Request) {
file := strings.Replace(r.RequestURI, public, "/", 1)
if _, err := os.Stat(root + file); os.IsNotExist(err) {
http.ServeFile(w, r, path.Join(root, "index.html"))
return
}
fs.ServeHTTP(w, r)
})
}

45
tmp_media_roller_research/src/media/about.go Normal file
View file

@ -0,0 +1,45 @@
package media
import (
"html/template"
"media-roller/src/utils"
"net/http"
"regexp"
"strings"
"github.com/matishsiao/goInfo"
"github.com/rs/zerolog/log"
)
var aboutIndexTmpl = template.Must(template.ParseFiles("templates/media/about.html"))
var newlineRegex = regexp.MustCompile("\r?\n")
func AboutIndex(w http.ResponseWriter, _ *http.Request) {
pythonVersion := utils.RunCommand("python3", "--version")
if pythonVersion == "" {
pythonVersion = utils.RunCommand("python", "--version")
}
gi, _ := goInfo.GetInfo()
data := map[string]interface{}{
"ytDlpVersion": CachedYtDlpVersion,
"goVersion": strings.TrimPrefix(utils.RunCommand("go", "version"), "go version "),
"pythonVersion": strings.TrimPrefix(pythonVersion, "Python "),
"ffmpegVersion": newlineRegex.Split(utils.RunCommand("ffmpeg", "-version"), -1),
"ffprobeVersion": newlineRegex.Split(utils.RunCommand("ffprobe", "-version"), -1),
"deno": strings.TrimPrefix(utils.RunCommand("deno", "--version"), "go version "),
"os": gi.OS,
"kernel": gi.Kernel,
"core": gi.Core,
"platform": gi.Platform,
"hostname": gi.Hostname,
"cpus": gi.CPUs,
}
if err := aboutIndexTmpl.Execute(w, data); err != nil {
log.Error().Msgf("Error rendering template: %v", err)
http.Error(w, "Internal error", http.StatusInternalServerError)
}
}

340
tmp_media_roller_research/src/media/fetch.go Normal file
View file

@ -0,0 +1,340 @@
package media
import (
"crypto/md5"
"errors"
"fmt"
"github.com/dustin/go-humanize"
"golang.org/x/sync/errgroup"
"html/template"
"media-roller/src/utils"
"net/http"
"path/filepath"
"regexp"
"sort"
"strings"
)
/**
This file will download the media from a URL and save it to disk.
*/
import (
"bytes"
"github.com/rs/zerolog/log"
"io"
"os"
"os/exec"
)
type Media struct {
Id string
Name string
SizeInBytes int64
HumanSize string
}
var fetchIndexTmpl = template.Must(template.ParseFiles("templates/media/index.html"))
// Where the media files are saved. Always has a trailing slash
var downloadDir = getDownloadDir()
var idCharSet = regexp.MustCompile(`^[a-zA-Z0-9]+$`).MatchString
func Index(w http.ResponseWriter, _ *http.Request) {
data := map[string]string{
"ytDlpVersion": CachedYtDlpVersion,
}
if err := fetchIndexTmpl.Execute(w, data); err != nil {
log.Error().Msgf("Error rendering template: %v", err)
http.Error(w, "Internal error", http.StatusInternalServerError)
}
}
func FetchMedia(w http.ResponseWriter, r *http.Request) {
url, args := getUrl(r)
media, ytdlpErrorMessage, err := getMediaResults(url, args)
data := map[string]interface{}{
"url": url,
"media": media,
"error": ytdlpErrorMessage,
"ytDlpVersion": CachedYtDlpVersion,
}
if err != nil {
_ = fetchIndexTmpl.Execute(w, data)
return
}
if err = fetchIndexTmpl.Execute(w, data); err != nil {
log.Error().Msgf("Error rendering template: %v", err)
http.Error(w, "Internal error", http.StatusInternalServerError)
}
}
func FetchMediaApi(w http.ResponseWriter, r *http.Request) {
url, args := getUrl(r)
medias, _, err := getMediaResults(url, args)
if err != nil {
log.Error().Msgf("error getting media results: %v", err)
http.Error(w, err.Error(), http.StatusBadRequest)
return
}
if len(medias) == 0 {
log.Error().Msgf("not media found")
http.Error(w, "Media not found", http.StatusBadRequest)
return
}
// just take the first one
streamFileToClientById(w, r, medias[0].Id)
}
func getUrl(r *http.Request) (string, map[string]string) {
u := strings.TrimSpace(r.URL.Query().Get("url"))
// Support yt-dlp arguments passed in via the url. We'll assume anything starting with a dash - is an argument
args := make(map[string]string)
for k, v := range r.URL.Query() {
if strings.HasPrefix(k, "-") {
if len(v) > 0 {
args[k] = v[0]
} else {
args[k] = ""
}
}
}
return u, args
}
func getMediaResults(inputUrl string, args map[string]string) ([]Media, string, error) {
if inputUrl == "" {
return nil, "", errors.New("missing URL")
}
url := utils.NormalizeUrl(inputUrl)
log.Info().Msgf("Got input '%s' and extracted '%s' with args %v", inputUrl, url, args)
// NOTE: This system is for a simple use case, meant to run at home. This is not a great design for a robust system.
// We are hashing the URL here and writing files to disk to a consistent directory based on the ID. You can imagine
// concurrent users would break this for the same URL. That's fine given this is for a simple home system.
// Future work can make this more sophisticated.
id := GetMD5Hash(url, args)
// Look to see if we already have the media on disk
medias, err := getAllFilesForId(id)
if err != nil {
return nil, "", err
}
if len(medias) == 0 {
// We don't, so go fetch it
errMessage := ""
id, errMessage, err = downloadMedia(url, args)
if err != nil {
return nil, errMessage, err
}
medias, err = getAllFilesForId(id)
if err != nil {
return nil, "", err
}
}
return medias, "", nil
}
// returns the ID of the file, and error message, and an error
func downloadMedia(url string, requestArgs map[string]string) (string, string, error) {
// The id will be used as the name of the parent directory of the output files
id := GetMD5Hash(url, requestArgs)
name := getMediaDirectory(id) + "%(id)s.%(ext)s"
log.Info().Msgf("Downloading %s to %s", url, name)
defaultArgs := map[string]string{
"--format": "bestvideo[ext=mp4]+bestaudio[ext=m4a]/best[ext=mp4]/best",
"--merge-output-format": "mp4",
"--trim-filenames": "100",
"--recode-video": "mp4",
"--format-sort": "codec:h264",
"--restrict-filenames": "",
"--write-info-json": "",
"--verbose": "",
"--output": name,
}
args := make([]string, 0)
// First add all default arguments that were not supplied as request level arguments
for arg, value := range defaultArgs {
if _, has := requestArgs[arg]; !has {
args = append(args, arg)
if value != "" {
args = append(args, value)
}
}
}
// Now add all request level arguments
for arg, value := range requestArgs {
args = append(args, arg)
if value != "" {
args = append(args, value)
}
}
// And finally add any environment level arguments not supplied as request level args
for arg, value := range getEnvVars() {
if _, has := requestArgs[arg]; !has {
args = append(args, arg)
if value != "" {
args = append(args, value)
}
}
}
args = append(args, url)
cmd := exec.Command("yt-dlp", args...)
var stdoutBuf, stderrBuf bytes.Buffer
stdoutIn, _ := cmd.StdoutPipe()
stderrIn, _ := cmd.StderrPipe()
var errStdout, errStderr error
stdout := io.MultiWriter(os.Stdout, &stdoutBuf)
stderr := io.MultiWriter(os.Stderr, &stderrBuf)
err := cmd.Start()
if err != nil {
log.Error().Msgf("Error starting command: %v", err)
return "", err.Error(), err
}
eg := errgroup.Group{}
eg.Go(func() error {
_, errStdout = io.Copy(stdout, stdoutIn)
return nil
})
_, errStderr = io.Copy(stderr, stderrIn)
_ = eg.Wait()
log.Info().Msgf("Done with %s", id)
err = cmd.Wait()
if err != nil {
log.Error().Err(err).Msgf("cmd.Run() failed with %s", err)
return "", strings.TrimSpace(stderrBuf.String()), err
} else if errStdout != nil {
log.Error().Msgf("failed to capture stdout: %v", errStdout)
} else if errStderr != nil {
log.Error().Msgf("failed to capture stderr: %v", errStderr)
}
return id, "", nil
}
// Returns the relative directory containing the media file, with a trailing slash.
// Id is expected to be pre validated
func getMediaDirectory(id string) string {
return downloadDir + id + "/"
}
// id is expected to be validated prior to calling this func
func getAllFilesForId(id string) ([]Media, error) {
root := getMediaDirectory(id)
file, err := os.Open(root)
if err != nil {
if os.IsNotExist(err) {
return nil, nil
}
return nil, err
}
files, _ := file.Readdirnames(0) // 0 to read all files and folders
if len(files) == 0 {
return nil, errors.New("ID not found: " + id)
}
var medias []Media
// We expect two files to be produced for each video, a json manifest and an mp4.
for _, f := range files {
if !strings.HasSuffix(f, ".json") {
fi, err2 := os.Stat(root + f)
var size int64 = 0
if err2 == nil {
size = fi.Size()
}
media := Media{
Id: id,
Name: filepath.Base(f),
SizeInBytes: size,
HumanSize: humanize.Bytes(uint64(size)),
}
medias = append(medias, media)
}
}
return medias, nil
}
// id is expected to be validated prior to calling this func
// TODO: This needs to handle multiple files in the directory
func getFileFromId(id string) (string, error) {
root := getMediaDirectory(id)
file, err := os.Open(root)
if err != nil {
return "", err
}
files, _ := file.Readdirnames(0) // 0 to read all files and folders
if len(files) == 0 {
return "", errors.New("ID not found")
}
// We expect two files to be produced, a json manifest and an mp4. We want to return the mp4
// Sometimes the video file might not have an mp4 extension, so filter out the json file
for _, f := range files {
if !strings.HasSuffix(f, ".json") {
// TODO: This is just returning the first file found. We need to handle multiple
return root + f, nil
}
}
return "", errors.New("unable to find file")
}
func GetMD5Hash(url string, args map[string]string) string {
id := url
if len(args) > 0 {
tmp := make([]string, 0)
for k, v := range args {
tmp = append(tmp, k, v)
}
sort.Strings(tmp)
id += ":" + strings.Join(tmp, ",")
}
return fmt.Sprintf("%x", md5.Sum([]byte(id)))
}
func isValidId(id string) bool {
return idCharSet(id)
}
func getDownloadDir() string {
dir := os.Getenv("MR_DOWNLOAD_DIR")
if dir != "" {
if !strings.HasSuffix(dir, "/") {
return dir + "/"
}
return dir
}
return "downloads/"
}
func getEnvVars() map[string]string {
vars := make(map[string]string)
if ev := strings.TrimSpace(os.Getenv("MR_PROXY")); ev != "" {
vars["--proxy"] = ev
}
return vars
}

Some files were not shown because too many files have changed in this diff Show more