diff --git a/DEVELOPMENT_PLAN.md b/DEVELOPMENT_PLAN.md index 0b81afc..067f197 100644 --- a/DEVELOPMENT_PLAN.md +++ b/DEVELOPMENT_PLAN.md @@ -1,79 +1,48 @@ -# Multi-Platform Chat Overlay Development Plan (v3) +# Multi-Platform Chat Overlay Development Plan (v4 - Simplified Stack) -This document outlines the development plan for a multi-user, web-based chat overlay service. +This document outlines the development plan for a multi-user, web-based chat overlay service using a simplified technology stack. ## 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 +## 2. Technology Stack -The system will be a web application with a Python backend and a web-based frontend. +* **Backend (API & Chat Listeners):** Python (for Twitch/YouTube chat listeners), Node.js (for WebSocket server and potentially other APIs), PHP (for user management and web serving). +* **Database:** MySQL +* **Frontend:** HTML, CSS, JavaScript -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. +## 3. Implementation Roadmap -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. +### Phase 1: Basic Setup & Twitch Chat Listener (Python) +1. **Project Structure:** Establish a clear directory structure for PHP, Python, Node.js, and static assets. +2. **Python Environment:** Set up a Python virtual environment and install `twitchio`. +3. **Twitch Chat Listener (Python Script):** Create a standalone Python script that connects to Twitch chat, listens for messages, and prints them to standard output. This script will be run as a background process. +4. **Twitch OAuth2 (Python):** Implement a simple Python script or a PHP endpoint to handle Twitch OAuth2 to obtain user access tokens. Store these securely in MySQL. -## 3. Technology Stack +### Phase 2: MySQL Database & User Management (PHP) +1. **MySQL Setup:** Set up a MySQL database and create a `users` table to store user information (Twitch ID, username, access token, refresh token). +2. **PHP Web Server:** Configure a basic PHP web server. +3. **User Registration/Login (PHP):** Implement PHP scripts for user registration and login, integrating with the MySQL database. +4. **Dashboard (PHP/HTML):** Create a basic dashboard where logged-in users can see their Twitch connection status and their unique overlay URL. -* **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) +### Phase 3: WebSocket Server (Node.js) & Overlay (HTML/CSS/JS) +1. **Node.js Environment:** Set up a Node.js environment and install `ws` (WebSocket library). +2. **WebSocket Server (Node.js):** Create a Node.js WebSocket server that: + * Accepts connections from overlay clients. + * Receives chat messages from the Python Twitch listener (via a simple inter-process communication mechanism, e.g., writing to a file or a local socket). + * Broadcasts messages to connected overlay clients. +3. **Overlay Frontend (HTML/CSS/JS):** Create a basic `overlay.html` that: + * Connects to the Node.js WebSocket server. + * Displays incoming chat messages. +4. **Inter-process Communication:** Implement a mechanism for the Python Twitch listener to send messages to the Node.js WebSocket server. -* **Frontend:** - * **Markup/Styling:** HTML5, CSS3 - * **JavaScript:** Vanilla JavaScript - * **Communication:** Fetch API, WebSockets +### Phase 4: Integration & Refinement +1. **Dynamic Listener Management:** Develop a system (e.g., a PHP script or a Node.js API) to start and stop Python Twitch listener processes based on user activity. +2. **YouTube Integration:** Add YouTube chat listening capabilities (Python `pytchat`) and integrate with the existing system. +3. **Advanced Overlay Customization:** Implement options for users to customize their overlay. -## 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) +## 4. 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.