MultiChatOverlay/DEVELOPMENT_PLAN.md

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

• Team Communications: Discord and Nextcloud, primarily. This can change. There's a list of links in the README.md
• Backend: Python 3.13+ (FastAPI)
• Database: SQLite (for initial development) with SQLAlchemy ORM
• Frontend: Vanilla HTML, CSS, and JavaScript
• Chat Listeners: twitchio (Twitch), pytchat (YouTube)

3. Implementation Roadmap

Phase 1: User Authentication & Database (FastAPI)

1. Project Skeleton: Establish the core FastAPI application structure, dependencies, and version control.
2. Database Schema: Define the data models for users and settings using SQLAlchemy.
3. Twitch OAuth2: Implement the server-side OAuth2 flow within FastAPI to authenticate users and securely store encrypted tokens in the database.
4. Session Management: Create a system to manage logged-in user sessions.
5. Basic Frontend: Develop a simple login page.

Phase 2: User Dashboard & Configuration

1. Dashboard UI: Create a dashboard page accessible only to authenticated users.
2. Settings API: Build API endpoints for users to save and retrieve their overlay settings (e.g., custom CSS).
3. Overlay URL Generation: Display a unique, persistent overlay URL for each user on their dashboard.

Phase 3: Dynamic Listeners & Basic Overlay

1. Dynamic Listener Manager: Design and build a background service that starts and stops chat listener processes (twitchio, pytchat) based on user activity.
2. Real-time Message Broadcasting: Implement a WebSocket system within FastAPI to push chat messages to the correct user's overlay in real-time.
3. Basic Overlay UI: Create the overlay.html page that connects to the WebSocket and renders incoming chat messages.

Phase 4: Integration & Refinement

1. YouTube Integration: Implement the full YouTube OAuth2 flow and integrate the pytchat listener into the dynamic listener manager.
2. Advanced Overlay Customization: Add more features for users to customize their overlay's appearance and behavior.

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.