Skip to content

feat: add connections configuration panel with support for multiple streaming platforms #21

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
DrakoMichael merged 1 commit into from
Feb 7, 2026
Merged

feat: add connections configuration panel with support for multiple streaming platforms #21

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file modified docs/displaygif.gif
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
28 changes: 14 additions & 14 deletions modules/gateway/app.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,16 +7,18 @@ const app = express();
/* =========
Middleware de auth (antes do proxy)
========= */
function auth(req, res, next) {
const token = req.headers.authorization;
function auth(req, res, next) {
//jwt não necessário por enquanto em módulos internos
//const token = req.headers.authorization;
//console.log("Token recebido:", token);

// if (!token) {
// return res.status(401).json({ error: "Sem token" });
// }

// valida JWT aqui
// jwt.verify(token, SECRET)
// if (!token) {
// return res.status(401).json({ error: "Sem token" });
// }

// valida JWT aqui
// jwt.verify(token, SECRET)

next();
}
Expand All @@ -29,16 +31,14 @@ const websocketService = createProxyMiddleware({
}
});

const config= createProxyMiddleware({
target: "http://localhost:3232/config", // serviço interno
const configProxy = createProxyMiddleware({
target: "http://localhost:3232/config",
changeOrigin: true,
pathRewrite: {
"^/config": ""
}
pathRewrite: { "^/config": "" }
});

app.use("/config", auth, configProxy);
app.use("/", auth, websocketService);
app.use("/config", auth, config);


/* =========
Expand Down Expand Up @@ -68,7 +68,7 @@ const server = http.createServer(app);
//server.on("upgrade", chatProxy.upgrade);

server.listen(3000, () => {
console.log("Gateway rodando na 3000");
console.log("Gateway rodando em 3000");
});

export default app;
1 change: 1 addition & 0 deletions modules/middleware/app.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
//todo
2 changes: 1 addition & 1 deletion src/config.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@
"database": {
"enable_database": false,
"enable_in_disk_db": true,
"enable_in_memory_db": true,
"enable_in_memory_db": false,
"indisk_db_name": "streamchatrelay_data"
},
"data_control": {
Expand Down
20 changes: 20 additions & 0 deletions src/public/chart.min.js
View file
Open in desktop

Large diffs are not rendered by default.

21 changes: 14 additions & 7 deletions src/public/config.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,14 +9,18 @@
<link rel="stylesheet" href="monolithic-basalt.css">
</head>
<body>
<div class="viewport">
<header>
<span class="system-id">Stream Chat Relay // Config Panel</span>
<h1>Configuração do Sistema</h1>
<p class="subtitle">Ajuste os parâmetros de execução e conectividade</p>
<div class="viewport header-wrapper">
<header class="viewport-header">
<div class="header-inner-content">
<div>
<span class="system-id">Stream Chat Relay // Config Panel</span>
<h1>Configuração do Sistema</h1>
<p class="subtitle">Ajuste os parâmetros de execução e conectividade</p>
</div>
</div>
</header>

<div id="alert" class="alert"></div>
<div class="viewport-content">
<div id="alert" class="alert"></div>

<form id="configForm">
<!-- Configurações Gerais -->
Expand Down Expand Up @@ -322,9 +326,12 @@ <h2 class="section-title">Análise de Dados</h2>

<div class="spacer"></div>
</form>
</div>
</div>

<div class="btn-container">
<button type="button" class="btn" id="backBtn">← Voltar</button>
<button type="button" class="btn" id="connectionsBtn">🔗 Conexões</button>
<button type="button" class="btn" id="reloadBtn">Descartar</button>
<button type="submit" form="configForm" class="btn btn-primary">Salvar Alterações</button>
</div>
Expand Down
16 changes: 16 additions & 0 deletions src/public/config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,10 +5,26 @@
const form = document.getElementById('configForm');
const alertDiv = document.getElementById('alert');
const reloadBtn = document.getElementById('reloadBtn');
const backBtn = document.getElementById('backBtn');
const connectionsBtn = document.getElementById('connectionsBtn');
const typeAmbienceSelect = document.getElementById('type_ambience');
const devSection = document.getElementById('dev_section');
const prodSection = document.getElementById('prod_section');

// Back button handler
if (backBtn) {
backBtn.addEventListener('click', () => {
window.location.href = '/';
});
}

// Connections button handler
if (connectionsBtn) {
connectionsBtn.addEventListener('click', () => {
window.location.href = '/connections.html';
});
}

// Show/hide sections based on environment type
function toggleSections() {
const isDev = typeAmbienceSelect.value === 'dev';
Expand Down
242 changes: 242 additions & 0 deletions src/public/connections.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,242 @@
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Conexões | Stream Chat Relay</title>

<!-- Monolithic Basalt Design System -->
<link rel="stylesheet" href="monolithic-basalt.css">
</head>
<body>
<div class="viewport">
<header>
<span class="system-id">Stream Chat Relay // Connections Panel</span>
<h1>Configuração de Conexões</h1>
<p class="subtitle">Configure suas contas de streaming</p>
</header>

<div id="alert" class="alert"></div>

<form id="connectionsForm">
<!-- Twitch Configuration -->
<section class="section">
<h2 class="section-title">🎮 Twitch</h2>
<div class="config-group">
<div class="row">
<div class="row-meta">
<span class="row-title">Ativar Twitch</span>
<span class="row-desc">Conectar e receber mensagens da Twitch</span>
</div>
<div class="row-control">
<label class="switch">
<input type="checkbox" id="twitch_enabled" name="twitch_enabled">
<span class="slider"></span>
</label>
</div>
</div>
<div class="row">
<div class="row-meta">
<span class="row-title">Token OAuth</span>
<span class="row-desc">Token de autenticação da Twitch</span>
</div>
<div class="row-control">
<input type="password" id="twitch_token" name="twitch_token" placeholder="oauth:xxxxxxxxxxxxx">
</div>
</div>
<div class="row">
<div class="row-meta">
<span class="row-title">Canal</span>
<span class="row-desc">Nome do canal Twitch</span>
</div>
<div class="row-control">
<input type="text" id="twitch_channel" name="twitch_channel" placeholder="seu_canal">
</div>
</div>
<div class="row">
<div class="row-meta">
<span class="row-title">Nome de Usuário (Bot)</span>
<span class="row-desc">Nickname do bot na Twitch</span>
</div>
<div class="row-control">
<input type="text" id="twitch_username" name="twitch_username" placeholder="seu_bot_username">
</div>
</div>
</div>
</section>

<!-- YouTube Configuration -->
<section class="section">
<h2 class="section-title">📺 YouTube</h2>
<div class="config-group">
<div class="row">
<div class="row-meta">
<span class="row-title">Ativar YouTube</span>
<span class="row-desc">Conectar e receber mensagens do YouTube</span>
</div>
<div class="row-control">
<label class="switch">
<input type="checkbox" id="youtube_enabled" name="youtube_enabled">
<span class="slider"></span>
</label>
</div>
</div>
<div class="row">
<div class="row-meta">
<span class="row-title">API Key</span>
<span class="row-desc">Chave de API do YouTube Data API</span>
</div>
<div class="row-control">
<input type="password" id="youtube_api_key" name="youtube_api_key" placeholder="AIzaSy...">
</div>
</div>
<div class="row">
<div class="row-meta">
<span class="row-title">ID do Canal</span>
<span class="row-desc">ID único do seu canal YouTube</span>
</div>
<div class="row-control">
<input type="text" id="youtube_channel_id" name="youtube_channel_id" placeholder="UCxxxxxxxxxxxxxxxx">
</div>
</div>
<div class="row">
<div class="row-meta">
<span class="row-title">ID da Transmissão ao Vivo</span>
<span class="row-desc">ID da live atual (mude quando iniciar nova transmissão)</span>
</div>
<div class="row-control">
<input type="text" id="youtube_live_id" name="youtube_live_id" placeholder="xxxxxxxxxxxxx">
</div>
</div>
</div>
</section>

<!-- Rumble Configuration -->
<section class="section">
<h2 class="section-title">🎪 Rumble</h2>
<div class="config-group">
<div class="row">
<div class="row-meta">
<span class="row-title">Ativar Rumble</span>
<span class="row-desc">Conectar e receber mensagens do Rumble</span>
</div>
<div class="row-control">
<label class="switch">
<input type="checkbox" id="rumble_enabled" name="rumble_enabled">
<span class="slider"></span>
</label>
</div>
</div>
<div class="row">
<div class="row-meta">
<span class="row-title">Token/Chave de API</span>
<span class="row-desc">Token de autenticação do Rumble</span>
</div>
<div class="row-control">
<input type="password" id="rumble_token" name="rumble_token" placeholder="sua_chave_api">
</div>
</div>
<div class="row">
<div class="row-meta">
<span class="row-title">Canal/ID da Transmissão</span>
<span class="row-desc">Identificador do seu canal ou transmissão</span>
</div>
<div class="row-control">
<input type="text" id="rumble_channel" name="rumble_channel" placeholder="seu_canal_rumble">
</div>
</div>
</div>
</section>

<!-- Kick Configuration -->
<section class="section">
<h2 class="section-title">🦶 Kick</h2>
<div class="config-group">
<div class="row">
<div class="row-meta">
<span class="row-title">Ativar Kick</span>
<span class="row-desc">Conectar e receber mensagens do Kick</span>
</div>
<div class="row-control">
<label class="switch">
<input type="checkbox" id="kick_enabled" name="kick_enabled">
<span class="slider"></span>
</label>
</div>
</div>
<div class="row">
<div class="row-meta">
<span class="row-title">Token/Chave de API</span>
<span class="row-desc">Chave de autenticação do Kick</span>
</div>
<div class="row-control">
<input type="password" id="kick_token" name="kick_token" placeholder="sua_chave_kick">
</div>
</div>
<div class="row">
<div class="row-meta">
<span class="row-title">Canal</span>
<span class="row-desc">Nome do seu canal Kick</span>
</div>
<div class="row-control">
<input type="text" id="kick_channel" name="kick_channel" placeholder="seu_canal_kick">
</div>
</div>
</div>
</section>

<!-- TikTok Live Configuration -->
<section class="section">
<h2 class="section-title">🎵 TikTok Live</h2>
<div class="config-group">
<div class="row">
<div class="row-meta">
<span class="row-title">Ativar TikTok Live</span>
<span class="row-desc">Conectar e receber mensagens do TikTok Live</span>
</div>
<div class="row-control">
<label class="switch">
<input type="checkbox" id="tiktok_enabled" name="tiktok_enabled">
<span class="slider"></span>
</label>
</div>
</div>
<div class="row">
<div class="row-meta">
<span class="row-title">Nome de Usuário</span>
<span class="row-desc">Seu username do TikTok</span>
</div>
<div class="row-control">
<input type="text" id="tiktok_username" name="tiktok_username" placeholder="seu_username_tiktok">
</div>
</div>
<div class="row">
<div class="row-meta">
<span class="row-title">Session ID</span>
<span class="row-desc">ID da sessão para autenticação</span>
</div>
<div class="row-control">
<input type="password" id="tiktok_session" name="tiktok_session" placeholder="session_token">
</div>
</div>
</div>
</section>

<div class="spacer"></div>
</form>
</div>

<div class="btn-container">
<button type="button" class="btn" id="backBtn">← Voltar</button>
<button type="button" class="btn" id="configBtn">⚙ Configurações</button>
<button type="button" class="btn" id="reloadBtn">Descartar</button>
<button type="submit" form="connectionsForm" class="btn btn-primary">Salvar Conexões</button>
</div>

<!-- Monolithic Basalt Design System JavaScript -->
<script src="monolithic-basalt.js"></script>

<!-- Application Specific Logic -->
<script src="connections.js"></script>
</body>
</html>
Loading
Loading