From 930910985cf63aa853caf45ac80f64d685a224ae Mon Sep 17 00:00:00 2001 From: Jo Eskil Date: Thu, 13 Nov 2025 16:19:15 +0100 Subject: [PATCH] Revise development plan for multi-user service --- DEVELOPMENT_PLAN.md | 142 +++++++++++++++++--------------------------- 1 file changed, 55 insertions(+), 87 deletions(-) diff --git a/DEVELOPMENT_PLAN.md b/DEVELOPMENT_PLAN.md index f766126..ba44241 100644 --- a/DEVELOPMENT_PLAN.md +++ b/DEVELOPMENT_PLAN.md @@ -1,113 +1,81 @@ -# Multi-Platform Chat Overlay Development Plan (v2) +# Multi-Platform Chat Overlay Development Plan (v3) -This document outlines the development plan for a multi-platform chat overlay and moderation toolset. +This document outlines the development plan for a multi-user, web-based chat overlay service. ## 1. Project Overview -The goal is to create a system that aggregates chat from multiple platforms (YouTube, Twitch), displays it in a customizable OBS overlay, and provides a suite of tools for both the streamer (host) and their moderators. Key features include highlighting messages and a system for moderators to queue important messages for the host to address. +The goal is to create a service where streamers can log in using their platform accounts (Twitch, YouTube), configure a personalized chat overlay, and use it in their streaming software (e.g., OBS). The service will aggregate chat from their connected accounts and provide moderation tools. ## 2. Architecture -The system will consist of one backend and four frontend components: +The system will be a web application with a Python backend and a web-based frontend. -1. **Python Backend:** A central server application responsible for: - * Connecting to and fetching chat messages, including moderator status, from YouTube and Twitch. - * Running a WebSocket server to broadcast chat messages and queue updates to all connected clients. - * Serving the various HTML/CSS/JS frontend applications. - * Providing an HTTP API for actions like highlighting, queuing, and managing the queue. - * Handling authentication for the Moderator and Host panels. +1. **Python Backend (FastAPI):** + * Manages user authentication (OAuth2 for Twitch and YouTube). + * Stores user data, configuration, and encrypted access tokens in a database (SQLite initially). + * Provides a REST API for the frontend to manage user settings. + * Dynamically starts, stops, and manages chat listener processes for active users. + * Runs a WebSocket server to broadcast chat messages to the correct user's overlay. -2. **Web Overlay:** The public-facing chat display, loaded as a Browser Source in OBS. It will display all chat messages and special indicators for highlighted messages. - -3. **Host Control Panel:** The streamer's main interface, loaded as a Browser Dock in OBS. It will display the full chat, allow for message highlighting, and show the queue of messages tagged by moderators. - -4. **Moderator Panel:** A separate, secure web page for channel moderators. It will display the chat feed and allow moderators to "tag" or "queue" a message for the host's attention. +2. **Frontend (HTML/CSS/JavaScript):** + * **Login Page:** Allows users to sign in with their Twitch or YouTube accounts. + * **Dashboard:** A secure area for users to manage their connected accounts, configure their overlay, and get their unique overlay URL. + * **Web Overlay:** The customizable chat display, loaded as a Browser Source in OBS. ## 3. Technology Stack * **Backend:** * **Language:** Python 3.9+ * **Web Framework:** FastAPI - * **WebSocket Server:** `websockets` library - * **YouTube Chat:** `pytchat` - * **Twitch Chat:** `TwitchIO` - * **Authentication:** A simple password-based auth for moderator/host panels initially. + * **Database:** SQLite with SQLAlchemy + * **Authentication:** OAuth2 (via `httpx` or a similar library) + * **Chat Listeners:** `pytchat` (YouTube), `TwitchIO` (Twitch) -* **Frontend (All Panels):** +* **Frontend:** * **Markup/Styling:** HTML5, CSS3 * **JavaScript:** Vanilla JavaScript - * **Communication:** Native WebSocket API, Fetch API + * **Communication:** Fetch API, WebSockets -## 4. Feature Breakdown +## 4. Implementation Roadmap -* **Core Chat:** - * Aggregate chat from YouTube and Twitch. - * Identify moderators from both platforms. - * Broadcast all messages via WebSockets. +### Phase 1: User Authentication & Database +1. **Database Setup:** + * Initialize a SQLite database. + * Define the database schema using SQLAlchemy for a `users` table (storing profile info, channel IDs, and encrypted OAuth tokens). +2. **Install Dependencies:** Add `SQLAlchemy` and an OAuth library to the project. +3. **OAuth2 for Twitch:** + * Implement the FastAPI backend routes for Twitch login (`/login/twitch`) and the callback (`/auth/twitch/callback`). + * Securely store user profile information and tokens in the database. +4. **Login Frontend:** Create a `login.html` page with a "Login with Twitch" button. +5. **Session Management:** Implement basic session management to keep users logged in. -* **Web Overlay:** - * Display combined chat feed. - * Visually distinguish highlighted messages. +### Phase 2: User Dashboard & Configuration +1. **Dashboard UI:** Create a `dashboard.html` page that is only accessible to logged-in users. +2. **Display User Data:** Show the user's connected Twitch account information. +3. **Configuration API:** Create backend API endpoints for users to submit and update their settings (e.g., which chat platforms to connect, overlay appearance settings). +4. **Configuration Form:** Add a form to the dashboard for users to manage these settings. +5. **Overlay URL:** Generate and display a unique, persistent overlay URL for the user (e.g., `/overlay/{user_id}`). -* **Host Control Panel:** - * Display combined chat feed. - * "Highlight" button for any message. - * Display the Moderator-curated message queue. - * "Dismiss" button to remove a message from the queue after it's been addressed. +### Phase 3: Dynamic Chat Listeners & Basic Overlay +1. **Listener Management:** + * Design a system to start and stop chat listener processes based on user activity (e.g., when a user is "live" or has the dashboard open). This may involve a background task manager. + * Refactor the existing `chat_listeners.py` to be controlled by this manager. +2. **User-Specific Broadcasting:** + * Update the WebSocket system to route messages from a specific listener to that user's overlay instance. +3. **Basic User Overlay:** + * When a user accesses their unique overlay URL, the backend serves the `index.html` overlay. + * The overlay connects to the WebSocket and receives only that user's chat messages. -* **Moderator Queuing System:** - * A separate, password-protected `moderator.html` panel. - * Display combined chat feed. - * "Queue" button next to each message, visible only to identified moderators. - * Pressing "Queue" sends the message to the backend to be added to the host's queue. +### Phase 4: YouTube Integration & Advanced Features +1. **OAuth2 for YouTube:** + * Implement the backend routes for YouTube login and callback. + * Update the database and dashboard to handle a second connected account. +2. **Moderator & Host Panels:** Re-introduce the concepts of the Host and Moderator panels from v2, but adapted for the multi-user model. This will involve secure access and user-specific controls. +3. **Advanced Overlay Customization:** Add more options for users to customize the look and feel of their overlay via the dashboard. -## 5. Implementation Roadmap - -### Phase 1: Core Backend & Basic Overlay -*(This phase remains the same)* -1. **Setup Project:** Initialize project, venv, and install dependencies. -2. **Develop Chat Listeners:** Create modules for `pytchat` and `TwitchIO`, ensuring they can identify moderator status for each message. -3. **Implement WebSocket Server:** Set up a server to broadcast all incoming chat messages. -4. **Create Basic Overlay:** Build a simple `index.html` that connects to the WebSocket and displays messages. -5. **Integrate with FastAPI:** Get the backend to serve the overlay page. - -### Phase 2: Host Control Panel & Highlighting -*(This phase remains the same)* -1. **Create Host Panel UI:** Build `host.html` which connects to the WebSocket. -2. **Develop Highlighting API:** Create a FastAPI endpoint (`/highlight-message`). -3. **Implement Highlighting Logic:** The backend broadcasts a "highlight" event via WebSocket when the API is called. -4. **Update Overlay:** The `index.html` overlay listens for the "highlight" event and applies a special style. - -### Phase 3: Moderator Queuing System -*(New phase incorporating the requested feature)* -1. **Backend Queue:** Implement an in-memory queue on the backend to hold tagged messages. -2. **Develop Queuing API:** Create a FastAPI endpoint (`/queue-message`) that adds a message to the queue. -3. **Create Moderator Panel:** Build a `moderator.html` page. It will show the chat feed. For users identified as moderators, a "Queue" button will appear next to messages. -4. **Implement Moderator Action:** The "Queue" button calls the `/queue-message` API. -5. **Update Host Panel:** Add a new section to `host.html` that displays the contents of the message queue in real-time. This will require the backend to send a "queue-updated" WebSocket event. -6. **Implement Dismissal:** Add a "Dismiss" button in the Host Panel's queue view. This will call a new API endpoint (e.g., `/dismiss-message`) to remove a message from the backend queue. - -### Phase 4: Configuration & Polish -*(Formerly Phase 3)* -1. **Create Configuration UI:** Build a `config.html` page for entering stream details. -2. **Refine CSS:** Improve the visual appearance of all four frontend components. -3. **Documentation:** Write a `README.md` with setup instructions for all parts of the system. - -### Phase 5: Subscription & Monetization (Future) -*(Formerly Phase 4)* -1. **Research & Integrate:** Investigate and implement webhook integration for services like Ko-fi. -2. **Develop Subscriber Features:** Build subscriber-only perks (e.g., on-screen alerts, special badges). - -## 6. Requirements for Completion (Initial Version) +## 5. Requirements for Completion (Initial Version) The project will be considered complete for its initial version when Phases 1, 2, and 3 are functional: -1. Chat is aggregated from YouTube and Twitch. -2. The Host can highlight messages via the Host Control Panel, and they appear styled in the OBS overlay. -3. Moderators can log into a separate panel and queue messages. -4. The Host can see the queued messages in their panel and dismiss them. - -## 7. Deployment & Development Workflow -*(This section remains the same)* - -## 8. Subscription & Monetization (Future) -*(This section is now covered in the roadmap)* +1. Users can log in with their Twitch account. +2. Users can see their unique overlay URL on a dashboard. +3. The overlay successfully connects to their Twitch chat and displays messages when opened in a browser source.