MultiChatOverlay/DEVELOPMENT_PLAN.md

Multi-Platform Chat Overlay Development Plan (v2)

This document outlines the development plan for a multi-platform chat overlay and moderation toolset.

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.

2. Architecture

The system will consist of one backend and four frontend components:

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.

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.

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.

• Frontend (All Panels):

  • Markup/Styling: HTML5, CSS3
  • JavaScript: Vanilla JavaScript
  • Communication: Native WebSocket API, Fetch API

4. Feature Breakdown

• Core Chat:

  • Aggregate chat from YouTube and Twitch.
  • Identify moderators from both platforms.
  • Broadcast all messages via WebSockets.

• Web Overlay:

  • Display combined chat feed.
  • Visually distinguish highlighted messages.

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

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

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)

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)