# YouTube Live Chat Overlay

This project provides a customizable web-based overlay for displaying live chat messages from YouTube streams. It consists of a Python backend that scrapes chat data and a simple HTML/CSS/JavaScript frontend for rendering the overlay.

## Features

*   Real-time display of YouTube Live Chat messages.
*   Automatic assignment of unique, persistent colors to chat participants.
*   Conversion of common text-based emotes to Unicode emojis.
*   Rich text markup for emotes (e.g., colored text).
*   Designed for use with streaming software like OBS Studio as a "Browser Source".

## Installation and Usage

### Prerequisites

*   Python 3.8+
*   `pip` (Python package installer)

### Setup

1.  **Navigate to the project directory:**
    ```bash
    cd /home/joe/Cloud9/Documents/Obisdian/projects/Overlays/youtube-chat-overlay
    ```

2.  **Create and activate a Python virtual environment:**
    ```bash
    python3 -m venv venv
    source venv/bin/activate # For Bash/Zsh
    # or source venv/bin/activate.fish # For Fish Shell
    ```

3.  **Install required Python packages:**
    ```bash
    pip install Flask Flask-Cors pytchat rich
    ```

### Running the Overlay

1.  **Start the Backend Server:**
    Open your terminal, navigate to the project directory, activate your virtual environment, and run the `backend.py` script:
    ```bash
    python overlay_backend.py
    ```
    The script will prompt you to "Enter the YouTube Live Stream Video ID for the overlay:". Provide the 11-character ID of the live stream you wish to monitor and press Enter. The Flask server will start, typically on `http://127.0.0.1:5000`.

2.  **Open the Web Overlay:**
    *   **In a Web Browser:** Open your preferred web browser and navigate to the `index.html` file located at `/home/joe/Cloud9/Documents/Obisdian/projects/Overlays/youtube-chat-overlay/index.html`. You can usually drag and drop the file into your browser, or type the full `file://` path in the address bar.
    *   **In OBS Studio (as a Browser Source):**
        1.  In OBS Studio, add a new "Browser" source.
        2.  Check "Local file" and browse to select the `index.html` file.
        3.  Set the width and height as desired (e.g., 1920x1080 or a custom size for your chat box).
        4.  Ensure "Refresh browser when scene becomes active" is checked.

## Development and Future Plans

For more detailed information on the project's current status, known issues, and future development ideas, please refer to the `DEVELOPMENT_PLAN.md` file in this directory.