From 6af58808addb16236c0c49b9bf1844d3b86bdcf2 Mon Sep 17 00:00:00 2001 From: ramforth Date: Mon, 17 Nov 2025 11:55:53 +0100 Subject: [PATCH] Phase 2: User experience enhancements to templates handling, dashboard and overlays. --- DEVELOPMENT_PLAN.md | 8 ++ README.md | 2 +- TASKS.md | 3 +- main.py | 16 ++- schemas.py | 2 +- templates/base.html | 51 ++++++++ templates/dashboard.html | 186 ++++++++++++++++++++------- templates/main.css | 79 ++++++++++++ templates/overlay-hacker-green.html | 41 ++++++ templates/overlay-minimal-light.html | 38 ++++++ 10 files changed, 368 insertions(+), 58 deletions(-) create mode 100644 templates/base.html create mode 100644 templates/main.css create mode 100644 templates/overlay-hacker-green.html create mode 100644 templates/overlay-minimal-light.html diff --git a/DEVELOPMENT_PLAN.md b/DEVELOPMENT_PLAN.md index dbaad8b..9f20321 100644 --- a/DEVELOPMENT_PLAN.md +++ b/DEVELOPMENT_PLAN.md @@ -17,6 +17,8 @@ The goal is to create a service where streamers can log in using their platform ## 3. Implementation Roadmap ### Phase 1: User Authentication & Database (FastAPI) +**Status: ✔️ Complete** + 1. **Project Skeleton:** Establish the core FastAPI application structure, dependencies, and version control. 2. **Database Schema:** Define the data models for users and settings using SQLAlchemy. 3. **Twitch OAuth2:** Implement the server-side OAuth2 flow within FastAPI to authenticate users and securely store encrypted tokens in the database. @@ -24,16 +26,22 @@ The goal is to create a service where streamers can log in using their platform 5. **Basic Frontend:** Develop a simple login page. ### Phase 2: User Dashboard & Configuration +**Status: 🚀 In Progress** + 1. **Dashboard UI:** Create a dashboard page accessible only to authenticated users. 2. **Settings API:** Build API endpoints for users to save and retrieve their overlay settings (e.g., custom CSS). 3. **Overlay URL Generation:** Display a unique, persistent overlay URL for each user on their dashboard. ### Phase 3: Dynamic Listeners & Basic Overlay +**Status: ⏳ Not Started** + 1. **Dynamic Listener Manager:** Design and build a background service that starts and stops chat listener processes (`twitchio`, `pytchat`) based on user activity. 2. **Real-time Message Broadcasting:** Implement a WebSocket system within FastAPI to push chat messages to the correct user's overlay in real-time. 3. **Basic Overlay UI:** Create the `overlay.html` page that connects to the WebSocket and renders incoming chat messages. ### Phase 4: Integration & Refinement +**Status: ⏳ Not Started** + 1. **YouTube Integration:** Implement the full YouTube OAuth2 flow and integrate the `pytchat` listener into the dynamic listener manager. 2. **Advanced Overlay Customization:** Add more features for users to customize their overlay's appearance and behavior. 3. **Twitch Chat Writeback:** Re-introduce the `chat:write` scope during authentication to allow the service (and potentially moderators, as per Issue #2) to send messages to the user's Twitch chat. diff --git a/README.md b/README.md index 2f6eb24..76f0e88 100644 --- a/README.md +++ b/README.md @@ -2,7 +2,7 @@ MultiChatOverlay is a web-based, multi-platform chat overlay service designed for streamers. The goal is to create a "SaaS" (Software as a Service) project where users can log in with their platform accounts (Twitch, YouTube, etc.) and get a single, unified, and customizable chat overlay for their stream. -This project is currently in **Phase 1: Initial Development**. +This project is currently in **Phase 2: User Dashboard & Configuration**. ## 🚀 Project Goal diff --git a/TASKS.md b/TASKS.md index f3000b2..6382954 100644 --- a/TASKS.md +++ b/TASKS.md @@ -35,8 +35,7 @@ If you want to use emojis for visibility, here's some I have used: ## ⏳ Phase 2: User Dashboard & Configuration -* **Goal:** Allow logged-in users to see a dashboard, get their overlay URL, and save settings. -* *(All tasks for this phase are on hold until Phase 1 is complete)* +* **Goal:** Allow logged-in users to see a dashboard, get their overlay URL, and save settings. Now that Phase 1 is done, these tasks are ready to be worked on. ### To Do * `[ ]` **2.0: CSS Refactor & Styling:** Improve the general look and feel of the application pages. diff --git a/main.py b/main.py index 0827f46..7c15da4 100644 --- a/main.py +++ b/main.py @@ -44,8 +44,8 @@ app.include_router(auth.router) app.add_middleware(SessionMiddleware, secret_key=settings.ENCRYPTION_KEY) @app.get("/") -async def read_root(): - return FileResponse(os.path.join(STATIC_DIR, "login.html")) +async def read_root(request: Request): + return templates.TemplateResponse("login.html", {"request": request}) @app.get("/dashboard") async def read_dashboard(request: Request, db: Session = Depends(auth.get_db)): @@ -72,15 +72,19 @@ async def logout(request: Request): return RedirectResponse(url="/") @app.get("/overlay/{user_id}") -async def read_overlay(request: Request, user_id: int, db: Session = Depends(auth.get_db)): +async def read_overlay(request: Request, user_id: int, theme_override: str = None, db: Session = Depends(auth.get_db)): # This endpoint serves the overlay page. user = db.query(models.User).filter(models.User.id == user_id).first() if not user: raise HTTPException(status_code=404, detail="User not found") - theme = "dark-purple" # Default theme - if user.settings and user.settings.overlay_theme: - theme = user.settings.overlay_theme + # The theme can be forced by a query parameter for previewing + if theme_override: + theme = theme_override + else: + theme = "dark-purple" # Default theme + if user.settings and user.settings.overlay_theme: + theme = user.settings.overlay_theme return templates.TemplateResponse(f"overlay-{theme}.html", {"request": request}) diff --git a/schemas.py b/schemas.py index f101dff..26b05a9 100644 --- a/schemas.py +++ b/schemas.py @@ -2,4 +2,4 @@ from pydantic import BaseModel from typing import Literal class SettingsUpdate(BaseModel): - overlay_theme: Literal['dark-purple', 'bright-green'] \ No newline at end of file + overlay_theme: Literal['dark-purple', 'bright-green', 'minimal-light', 'hacker-green'] \ No newline at end of file diff --git a/templates/base.html b/templates/base.html new file mode 100644 index 0000000..e5b228d --- /dev/null +++ b/templates/base.html @@ -0,0 +1,51 @@ + + + + + + {% block title %}MultiChat Overlay{% endblock %} + + + + + + +
+
+ +
+ +
+
+ {% block content %}{% endblock %} +
+ + + + \ No newline at end of file diff --git a/templates/dashboard.html b/templates/dashboard.html index 0e7ac15..8937db5 100644 --- a/templates/dashboard.html +++ b/templates/dashboard.html @@ -1,53 +1,143 @@ - - - - - - Dashboard - MultiChatOverlay +{% extends "base.html" %} - - - +{% block title %}Dashboard - {{ super() }}{% endblock %} - - - -
-

Dashboard

-

Welcome, {{ user.username }}! You are successfully logged in.

- -
-

Your unique overlay URL:

- {{ overlay_url }} -
+{% block content %} +
+

Welcome, {{ user.username }}!

+

This is your personal dashboard. Here you can manage your overlay settings and find your unique URL.

+
-
-

Overlay Theme

-
- - -
-

-
- -

Logout

+
+

Your Overlay URL

+

Copy this URL and add it as a "Browser Source" in your streaming software (e.g., OBS, Streamlabs).

+
+ +
+
- - - \ No newline at end of file +
+

Overlay Theme

+

Choose a theme for your chat overlay. Your selection will be saved automatically.

+
+
+ + +
+
+

Preview

+ +
+
+
+ +Logout + + + + +{% endblock %} \ No newline at end of file diff --git a/templates/main.css b/templates/main.css new file mode 100644 index 0000000..9a513b5 --- /dev/null +++ b/templates/main.css @@ -0,0 +1,79 @@ +:root { + --background-color: #121212; + --surface-color: #1e1e1e; + --primary-color: #9146FF; /* Twitch Purple */ + --on-primary-color: #FFFFFF; + --text-color: #E0E0E0; + --text-secondary-color: #A0A0A0; + --border-color: #333333; + --font-family: 'Inter', sans-serif; +} + +body { + background-color: var(--background-color); + color: var(--text-color); + font-family: var(--font-family); + margin: 0; + padding: 2rem; + display: flex; + justify-content: center; + align-items: flex-start; + min-height: 100vh; +} + +.container { + width: 100%; + max-width: 800px; + text-align: center; +} + +.main-header { + margin-bottom: 3rem; + border-bottom: 1px solid var(--border-color); + padding-bottom: 1rem; +} + +.main-header h1 { + margin: 0; + font-weight: 700; +} + +.card { + background-color: var(--surface-color); + border: 1px solid var(--border-color); + border-radius: 8px; + padding: 2rem; + margin-bottom: 1.5rem; + text-align: left; +} + +.card h2 { + margin-top: 0; + border-bottom: 1px solid var(--border-color); + padding-bottom: 0.5rem; + margin-bottom: 1rem; +} + +.btn { + display: inline-block; + background-color: var(--primary-color); + color: var(--on-primary-color); + padding: 12px 24px; + border-radius: 6px; + text-decoration: none; + font-weight: 500; + border: none; + cursor: pointer; + transition: background-color 0.2s ease-in-out; +} + +.btn:hover { + background-color: #7a3ad9; /* Darker purple */ +} + +.btn-twitch { + display: flex; + align-items: center; + gap: 10px; + font-size: 1.1rem; +} \ No newline at end of file diff --git a/templates/overlay-hacker-green.html b/templates/overlay-hacker-green.html new file mode 100644 index 0000000..d8dd93a --- /dev/null +++ b/templates/overlay-hacker-green.html @@ -0,0 +1,41 @@ + + + + + + Hacker Green Overlay + + + + +
+ system + Hacker Green Theme Initialized. +
+ + \ No newline at end of file diff --git a/templates/overlay-minimal-light.html b/templates/overlay-minimal-light.html new file mode 100644 index 0000000..968c0fc --- /dev/null +++ b/templates/overlay-minimal-light.html @@ -0,0 +1,38 @@ + + + + + + Minimal Light Overlay + + + + +
+ User: + This is the minimal light theme. +
+ + \ No newline at end of file