66 lines
4.7 KiB
Markdown
66 lines
4.7 KiB
Markdown
# Multi-Platform Chat Overlay Development Plan (v4 - Simplified Stack)
|
|
|
|
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. Technology Stack
|
|
|
|
* **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
|
|
|
|
## 3. Implementation Roadmap
|
|
|
|
### 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.
|
|
|
|
### 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.
|
|
|
|
### 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.
|
|
|
|
### 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. This will be implemented after the core Twitch functionality is stable.
|
|
3. **Advanced Overlay Customization:** Implement options for users to customize their overlay.
|
|
|
|
## 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.
|
|
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.
|
|
|
|
## 6. Future Enhancements from Gitea Issues
|
|
|
|
These are enhancement suggestions gathered from the project's Gitea issues, representing potential future features or considerations:
|
|
|
|
* **Issue #1: Multi select chat display order**
|
|
* Allow streamer to click on messages that appear whilst discussing chat message already on screen. This will enable quick progress through important messages without having to scroll back up chat.
|
|
* **Issue #2: Moderator chat assistance with streamer over ride**
|
|
* Moderators can select messages on their end, marking them for discussion, freeing up the streamer to simply stream. The streamer would have override to reject messages as the stream owner.
|
|
* **Issue #3: Chat Speed toggle for busier chat streams**
|
|
* Implement a toggle to adjust the display speed of chat messages, useful for very active streams.
|
|
* **Issue #4: Auto add YT Superchats to Highlights**
|
|
* Add a setting to automatically include YouTube Superchats in the highlighted messages.
|
|
* **Issue #5: Donations page somewhere**
|
|
* Consider integrating a donations page or feature within the service.
|