ramforth/MultiChatOverlay
3
2
Fork 0
Code Issues 7 Pull Requests Actions Packages Projects Releases Wiki Activity

Revise development plan for multi-user service

Browse Source
This commit is contained in:
Jo Eskil
2025-11-13 16:19:15 +01:00
parent b00dbbe5c2
commit 930910985c
1 changed files with 55 additions and 87 deletions
Download Patch File Download Diff File Expand all files Collapse all files

142
DEVELOPMENT_PLAN.md
View File

@@ -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.