ramforth/MultiChatOverlay
3
2
Fork 0
Code Issues 7 Pull Requests Actions Packages Projects Releases Wiki Activity

Phase 2: User experience enhancements to templates handling, dashboard and overlays.

Browse Source
This commit is contained in:
ramforth
2025-11-17 11:55:53 +01:00
parent 6010666dcf
commit 6af58808ad
10 changed files with 368 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
DEVELOPMENT_PLAN.md
View File

@@ -17,6 +17,8 @@ The goal is to create a service where streamers can log in using their platform
## 3. Implementation Roadmap
### Phase 1: User Authentication & Database (FastAPI)
**Status: ✔️ Complete**
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.
@@ -24,16 +26,22 @@ The goal is to create a service where streamers can log in using their platform
5. **Basic Frontend:** Develop a simple login page.
### Phase 2: User Dashboard & Configuration
**Status: 🚀 In Progress**
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
**Status: ⏳ Not Started**
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
**Status: ⏳ Not Started**
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.
3. **Twitch Chat Writeback:** Re-introduce the `chat:write` scope during authentication to allow the service (and potentially moderators, as per Issue #2) to send messages to the user's Twitch chat.

2
README.md
View File

@@ -2,7 +2,7 @@
MultiChatOverlay is a web-based, multi-platform chat overlay service designed for streamers. The goal is to create a "SaaS" (Software as a Service) project where users can log in with their platform accounts (Twitch, YouTube, etc.) and get a single, unified, and customizable chat overlay for their stream.
This project is currently in **Phase 1: Initial Development**.
This project is currently in **Phase 2: User Dashboard & Configuration**.
## 🚀 Project Goal

3
TASKS.md
View File

@@ -35,8 +35,7 @@ If you want to use emojis for visibility, here's some I have used:
## ⏳ Phase 2: User Dashboard & Configuration
* **Goal:** Allow logged-in users to see a dashboard, get their overlay URL, and save settings.
* *(All tasks for this phase are on hold until Phase 1 is complete)*
* **Goal:** Allow logged-in users to see a dashboard, get their overlay URL, and save settings. Now that Phase 1 is done, these tasks are ready to be worked on.
### To Do
* `[ ]` **2.0: CSS Refactor & Styling:** Improve the general look and feel of the application pages.

10
main.py
View File

@@ -44,8 +44,8 @@ app.include_router(auth.router)
app.add_middleware(SessionMiddleware, secret_key=settings.ENCRYPTION_KEY)
@app.get("/")
async def read_root():
return FileResponse(os.path.join(STATIC_DIR, "login.html"))
async def read_root(request: Request):
return templates.TemplateResponse("login.html", {"request": request})
@app.get("/dashboard")
async def read_dashboard(request: Request, db: Session = Depends(auth.get_db)):
@@ -72,12 +72,16 @@ async def logout(request: Request):
return RedirectResponse(url="/")
@app.get("/overlay/{user_id}")
async def read_overlay(request: Request, user_id: int, db: Session = Depends(auth.get_db)):
async def read_overlay(request: Request, user_id: int, theme_override: str = None, db: Session = Depends(auth.get_db)):
# This endpoint serves the overlay page.
user = db.query(models.User).filter(models.User.id == user_id).first()
if not user:
raise HTTPException(status_code=404, detail="User not found")
# The theme can be forced by a query parameter for previewing
if theme_override:
theme = theme_override
else:
theme = "dark-purple" # Default theme
if user.settings and user.settings.overlay_theme:
theme = user.settings.overlay_theme

2
schemas.py
View File

@@ -2,4 +2,4 @@ from pydantic import BaseModel
from typing import Literal
class SettingsUpdate(BaseModel):
overlay_theme: Literal['dark-purple', 'bright-green']
overlay_theme: Literal['dark-purple', 'bright-green', 'minimal-light', 'hacker-green']

51
templates/base.html Normal file
View File

@@ -0,0 +1,51 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{% block title %}MultiChat Overlay{% endblock %}</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="{{ url_for('static', path='/css/main.css') }}">
</head>
<body>
<div class="container">
<header class="main-header">
<a href="/" class="logo"><h1>MultiChat Overlay</h1></a>
<div class="header-actions">
<button id="theme-toggle" class="theme-btn" title="Toggle theme">
<svg class="sun-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" width="24" height="24"><path d="M12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zM2 13h2c.55 0 1-.45 1-1s-.45-1-1-1H2c-.55 0-1 .45-1 1s.45 1 1 1zm18 0h2c.55 0 1-.45 1-1s-.45-1-1-1h-2c-.55 0-1 .45-1 1s.45 1 1 1zM11 2v2c0 .55.45 1 1 1s1-.45 1-1V2c0-.55-.45-1-1-1s-1 .45-1 1zm0 18v2c0 .55.45 1 1 1s1-.45 1-1v-2c0-.55-.45-1-1-1s-1 .45-1 1zM5.64 5.64c-.39-.39-1.02-.39-1.41 0-.39.39-.39 1.02 0 1.41l1.06 1.06c.39.39 1.02.39 1.41 0s.39-1.02 0-1.41L5.64 5.64zm12.72 12.72c-.39-.39-1.02-.39-1.41 0-.39.39-.39 1.02 0 1.41l1.06 1.06c.39.39 1.02.39 1.41 0 .39-.39.39-1.02 0-1.41l-1.06-1.06zM5.64 18.36l-1.06-1.06c-.39-.39-.39-1.02 0-1.41s1.02-.39 1.41 0l1.06 1.06c.39.39.39 1.02 0 1.41s-1.02.39-1.41 0zm12.72-12.72l-1.06-1.06c-.39-.39-.39-1.02 0-1.41s1.02-.39 1.41 0l1.06 1.06c.39.39.39 1.02 0 1.41-.39.39-1.02.39-1.41 0z"></path></svg>
<svg class="moon-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" width="24" height="24"><path d="M9.37 5.51A7.35 7.35 0 0 0 9 6c0 4.42 3.58 8 8 8 .36 0 .72-.02 1.08-.06A7.5 7.5 0 0 1 9.37 5.51zM12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10A9.96 9.96 0 0 0 12 2z"></path></svg>
</button>
</div>
</header>
{% block content %}{% endblock %}
</div>
<script>
(function() {
const themeToggle = document.getElementById('theme-toggle');
const getTheme = () => {
const storedTheme = localStorage.getItem('theme');
if (storedTheme) return storedTheme;
return window.matchMedia('(prefers-color-scheme: light)').matches ? 'light' : 'dark';
};
const setTheme = (theme) => {
document.documentElement.setAttribute('data-theme', theme);
localStorage.setItem('theme', theme);
};
themeToggle.addEventListener('click', () => {
const currentTheme = document.documentElement.getAttribute('data-theme');
const newTheme = currentTheme === 'light' ? 'dark' : 'light';
setTheme(newTheme);
});
// Set initial theme on page load
setTheme(getTheme());
})();
</script>
</body>
</html>

170
templates/dashboard.html
View File

@@ -1,53 +1,143 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dashboard - MultiChatOverlay</title>
{% extends "base.html" %}
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800&display=swap" rel="stylesheet">
{% block title %}Dashboard - {{ super() }}{% endblock %}
<link rel="stylesheet" href="/static/style.css">
</head>
<body>
<div class="container">
<h1>Dashboard</h1>
<p>Welcome, <strong>{{ user.username }}</strong>! You are successfully logged in.</p>
{% block content %}
<div class="card">
<h2>Welcome, {{ user.username }}!</h2>
<p>This is your personal dashboard. Here you can manage your overlay settings and find your unique URL.</p>
</div>
<div class="overlay-url-container">
<p>Your unique overlay URL:</p>
<code>{{ overlay_url }}</code>
<div class="card">
<h2>Your Overlay URL</h2>
<p>Copy this URL and add it as a "Browser Source" in your streaming software (e.g., OBS, Streamlabs).</p>
<div class="url-box">
<input type="text" id="overlayUrl" value="{{ overlay_url }}" readonly>
<button id="copyButton" class="btn">Copy</button>
</div>
</div>
<div class="settings-container">
<h3>Overlay Theme</h3>
<form id="theme-form">
<select name="overlay_theme" id="overlay_theme">
<div class="card">
<h2>Overlay Theme</h2>
<p>Choose a theme for your chat overlay. Your selection will be saved automatically.</p>
<div class="theme-selector-container">
<div class="theme-options">
<label for="theme-select">Select a theme:</label>
<select id="theme-select" name="theme">
<option value="dark-purple" {% if current_theme == 'dark-purple' %}selected{% endif %}>Dark Purple</option>
<option value="bright-green" {% if current_theme == 'bright-green' %}selected{% endif %}>Bright Green</option>
<option value="minimal-light" {% if current_theme == 'minimal-light' %}selected{% endif %}>Minimal Light</option>
<option value="hacker-green" {% if current_theme == 'hacker-green' %}selected{% endif %}>Hacker Green</option>
</select>
<button type="submit">Save Theme</button>
</form>
<p id="save-status"></p>
</div>
<p><a href="/logout">Logout</a></p>
<div class="theme-preview">
<h3>Preview</h3>
<iframe id="theme-preview-frame" src="" frameborder="0" scrolling="no"></iframe>
</div>
</div>
</div>
<script>
document.getElementById('theme-form').addEventListener('submit', async (e) => {
e.preventDefault();
const theme = document.getElementById('overlay_theme').value;
const response = await fetch('/api/settings', {
<a href="/logout" class="btn logout-btn">Logout</a>
<style>
.url-box {
display: flex;
gap: 10px;
}
.url-box input {
flex-grow: 1;
padding: 10px;
border: 1px solid var(--border-color);
background-color: var(--background-color);
color: var(--text-color);
border-radius: 6px;
font-family: monospace;
}
.logout-btn {
margin-top: 1rem;
background-color: #c72c41;
}
.logout-btn:hover {
background-color: #a62636;
}
.theme-selector-container {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2rem;
align-items: start;
}
.theme-options select {
width: 100%;
padding: 10px;
border-radius: 6px;
border: 1px solid var(--border-color);
background-color: var(--surface-color);
color: var(--text-color);
font-size: 1rem;
}
.theme-preview {
border: 1px solid var(--border-color);
border-radius: 8px;
background-color: var(--background-color);
}
.theme-preview h3 {
margin: 0;
padding: 0.75rem 1rem;
font-size: 1rem;
border-bottom: 1px solid var(--border-color);
}
#theme-preview-frame {
width: 100%;
height: 150px;
border-radius: 0 0 8px 8px;
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function() {
// --- Copy URL Logic ---
const copyButton = document.getElementById('copyButton');
const overlayUrlInput = document.getElementById('overlayUrl');
copyButton.addEventListener('click', () => {
overlayUrlInput.select();
document.execCommand('copy');
copyButton.textContent = 'Copied!';
setTimeout(() => { copyButton.textContent = 'Copy'; }, 2000);
});
// --- Theme Selector Logic ---
const themeSelect = document.getElementById('theme-select');
const previewFrame = document.getElementById('theme-preview-frame');
const baseUrl = "{{ settings.APP_BASE_URL }}";
const userId = "{{ user.id }}";
// Function to update preview and save settings
function updateTheme(selectedTheme) {
// Update iframe preview
previewFrame.src = `${baseUrl}/overlay/${userId}?theme_override=${selectedTheme}`;
// Save the setting to the backend
fetch('/api/settings', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ overlay_theme: theme })
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({ overlay_theme: selectedTheme }),
})
.then(response => response.json())
.then(data => {
console.log('Settings saved:', data.message);
})
.catch(error => console.error('Error saving settings:', error));
}
// Event listener for dropdown change
themeSelect.addEventListener('change', (event) => {
updateTheme(event.target.value);
});
const result = await response.json();
document.getElementById('save-status').textContent = result.message;
});
</script>
</body>
</html>
// Set initial preview on page load
updateTheme(themeSelect.value);
});
</script>
{% endblock %}

79
templates/main.css Normal file
View File

@@ -0,0 +1,79 @@
:root {
--background-color: #121212;
--surface-color: #1e1e1e;
--primary-color: #9146FF; /* Twitch Purple */
--on-primary-color: #FFFFFF;
--text-color: #E0E0E0;
--text-secondary-color: #A0A0A0;
--border-color: #333333;
--font-family: 'Inter', sans-serif;
}
body {
background-color: var(--background-color);
color: var(--text-color);
font-family: var(--font-family);
margin: 0;
padding: 2rem;
display: flex;
justify-content: center;
align-items: flex-start;
min-height: 100vh;
}
.container {
width: 100%;
max-width: 800px;
text-align: center;
}
.main-header {
margin-bottom: 3rem;
border-bottom: 1px solid var(--border-color);
padding-bottom: 1rem;
}
.main-header h1 {
margin: 0;
font-weight: 700;
}
.card {
background-color: var(--surface-color);
border: 1px solid var(--border-color);
border-radius: 8px;
padding: 2rem;
margin-bottom: 1.5rem;
text-align: left;
}
.card h2 {
margin-top: 0;
border-bottom: 1px solid var(--border-color);
padding-bottom: 0.5rem;
margin-bottom: 1rem;
}
.btn {
display: inline-block;
background-color: var(--primary-color);
color: var(--on-primary-color);
padding: 12px 24px;
border-radius: 6px;
text-decoration: none;
font-weight: 500;
border: none;
cursor: pointer;
transition: background-color 0.2s ease-in-out;
}
.btn:hover {
background-color: #7a3ad9; /* Darker purple */
}
.btn-twitch {
display: flex;
align-items: center;
gap: 10px;
font-size: 1.1rem;
}

41
templates/overlay-hacker-green.html Normal file
View File

@@ -0,0 +1,41 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hacker Green Overlay</title>
<style>
body {
background-color: rgba(0, 0, 0, 0);
color: #00FF41;
font-family: 'Courier New', Courier, monospace;
font-size: 18px;
text-shadow: 0 0 5px #00FF41, 0 0 10px #00FF41;
margin: 0;
padding: 10px;
overflow: hidden;
}
.chat-message {
margin-bottom: 8px;
animation: fadeIn 0.5s ease-in-out;
}
.username {
font-weight: bold;
}
.username::after {
content: ':~$ ';
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
</style>
</head>
<body>
<!-- Example Message -->
<div class="chat-message">
<span class="username">system</span>
<span class="message">Hacker Green Theme Initialized.</span>
</div>
</body>
</html>

38
templates/overlay-minimal-light.html Normal file
View File

@@ -0,0 +1,38 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Minimal Light Overlay</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap');
body {
background-color: rgba(0, 0, 0, 0);
color: #111827;
font-family: 'Inter', sans-serif;
font-size: 16px;
margin: 0;
padding: 10px;
overflow: hidden;
}
.chat-message {
background-color: rgba(255, 255, 255, 0.8);
border-radius: 8px;
padding: 8px 12px;
margin-bottom: 8px;
backdrop-filter: blur(4px);
box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
.username {
font-weight: 600;
}
</style>
</head>
<body>
<!-- Example Message -->
<div class="chat-message">
<span class="username">User:</span>
<span class="message">This is the minimal light theme.</span>
</div>
</body>
</html>