82 lines
4.7 KiB
Markdown
82 lines
4.7 KiB
Markdown
# Multi-Platform Chat Overlay Development Plan (v3)
|
|
|
|
This document outlines the development plan for a multi-user, web-based chat overlay service.
|
|
|
|
## 1. Project Overview
|
|
|
|
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 be a web application with a Python backend and a web-based frontend.
|
|
|
|
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. **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
|
|
* **Database:** SQLite with SQLAlchemy
|
|
* **Authentication:** OAuth2 (via `httpx` or a similar library)
|
|
* **Chat Listeners:** `pytchat` (YouTube), `TwitchIO` (Twitch)
|
|
|
|
* **Frontend:**
|
|
* **Markup/Styling:** HTML5, CSS3
|
|
* **JavaScript:** Vanilla JavaScript
|
|
* **Communication:** Fetch API, WebSockets
|
|
|
|
## 4. Implementation Roadmap
|
|
|
|
### 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.
|
|
|
|
### 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}`).
|
|
|
|
### 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.
|
|
|
|
### 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. Requirements for Completion (Initial Version)
|
|
|
|
The project will be considered complete for its initial version when Phases 1, 2, and 3 are functional:
|
|
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.
|