1027 lines
35 KiB
HTML
1027 lines
35 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Discord Moderation Watcher</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=Archivo+Black&family=JetBrains+Mono:wght@400;600;700&family=Manrope:wght@500;700;800&display=swap" rel="stylesheet">
|
|
<style>
|
|
:root {
|
|
--bg: #080a0f;
|
|
--panel: rgba(18, 22, 32, 0.86);
|
|
--panel-strong: #121720;
|
|
--line: rgba(255, 255, 255, 0.12);
|
|
--text: #edf4ff;
|
|
--muted: #91a0b6;
|
|
--faint: #536176;
|
|
--cyan: #00e5ff;
|
|
--green: #39ff88;
|
|
--yellow: #ffe45e;
|
|
--red: #ff4f6d;
|
|
--blue: #6275ff;
|
|
--shadow: 0 24px 70px rgba(0, 0, 0, 0.46);
|
|
}
|
|
|
|
* { box-sizing: border-box; }
|
|
|
|
body {
|
|
margin: 0;
|
|
min-height: 100vh;
|
|
color: var(--text);
|
|
font-family: Manrope, sans-serif;
|
|
background:
|
|
radial-gradient(circle at 12% 8%, rgba(0, 229, 255, 0.18), transparent 32rem),
|
|
radial-gradient(circle at 88% 0%, rgba(98, 117, 255, 0.2), transparent 28rem),
|
|
linear-gradient(145deg, #05060a, var(--bg));
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
body::before {
|
|
content: "";
|
|
position: fixed;
|
|
inset: 0;
|
|
pointer-events: none;
|
|
background-image:
|
|
linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
|
|
linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px);
|
|
background-size: 42px 42px;
|
|
mask-image: linear-gradient(to bottom, black, transparent 84%);
|
|
}
|
|
|
|
button, select { font: inherit; }
|
|
|
|
.shell {
|
|
width: min(1440px, calc(100% - 32px));
|
|
margin: 0 auto;
|
|
padding: 28px 0 44px;
|
|
}
|
|
|
|
.hero {
|
|
display: grid;
|
|
grid-template-columns: 1.2fr 0.8fr;
|
|
gap: 18px;
|
|
align-items: stretch;
|
|
margin-bottom: 18px;
|
|
}
|
|
|
|
.brand-card,
|
|
.status-card,
|
|
.tab-panel,
|
|
.content-card {
|
|
border: 1px solid var(--line);
|
|
background: var(--panel);
|
|
backdrop-filter: blur(18px);
|
|
box-shadow: var(--shadow);
|
|
}
|
|
|
|
.brand-card {
|
|
position: relative;
|
|
padding: 28px;
|
|
border-radius: 28px;
|
|
overflow: hidden;
|
|
min-height: 190px;
|
|
}
|
|
|
|
.brand-card::after {
|
|
content: "WATCHER";
|
|
position: absolute;
|
|
right: -14px;
|
|
bottom: -20px;
|
|
font-family: "Archivo Black", sans-serif;
|
|
font-size: clamp(58px, 9vw, 132px);
|
|
letter-spacing: -0.08em;
|
|
color: rgba(255,255,255,0.035);
|
|
line-height: 0.78;
|
|
}
|
|
|
|
.eyebrow {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
margin-bottom: 18px;
|
|
color: var(--cyan);
|
|
font: 700 12px/1 "JetBrains Mono", monospace;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.18em;
|
|
}
|
|
|
|
.pulse {
|
|
width: 9px;
|
|
height: 9px;
|
|
border-radius: 999px;
|
|
background: var(--green);
|
|
box-shadow: 0 0 20px var(--green);
|
|
}
|
|
|
|
h1 {
|
|
margin: 0;
|
|
max-width: 840px;
|
|
font-family: "Archivo Black", sans-serif;
|
|
font-size: clamp(40px, 6vw, 82px);
|
|
line-height: 0.88;
|
|
letter-spacing: -0.06em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.subtitle {
|
|
margin: 18px 0 0;
|
|
max-width: 720px;
|
|
color: var(--muted);
|
|
font-size: 15px;
|
|
line-height: 1.7;
|
|
}
|
|
|
|
.status-card {
|
|
border-radius: 28px;
|
|
padding: 24px;
|
|
display: grid;
|
|
gap: 14px;
|
|
}
|
|
|
|
.status-row {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 12px;
|
|
padding: 14px 0;
|
|
border-bottom: 1px solid var(--line);
|
|
}
|
|
|
|
.status-row:last-child { border-bottom: 0; }
|
|
|
|
.status-label {
|
|
color: var(--muted);
|
|
font: 700 12px/1 "JetBrains Mono", monospace;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.12em;
|
|
}
|
|
|
|
.status-value {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
color: var(--text);
|
|
font: 700 13px/1 "JetBrains Mono", monospace;
|
|
}
|
|
|
|
.dot {
|
|
width: 9px;
|
|
height: 9px;
|
|
border-radius: 99px;
|
|
background: var(--faint);
|
|
}
|
|
|
|
.dot.on { background: var(--green); box-shadow: 0 0 16px var(--green); }
|
|
.dot.warn { background: var(--yellow); box-shadow: 0 0 16px var(--yellow); }
|
|
|
|
.tab-panel {
|
|
position: sticky;
|
|
top: 14px;
|
|
z-index: 5;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 12px;
|
|
padding: 12px;
|
|
border-radius: 24px;
|
|
margin-bottom: 18px;
|
|
}
|
|
|
|
.tabs {
|
|
display: flex;
|
|
gap: 8px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.tab-btn {
|
|
border: 1px solid transparent;
|
|
color: var(--muted);
|
|
background: transparent;
|
|
border-radius: 16px;
|
|
padding: 12px 16px;
|
|
cursor: pointer;
|
|
font-weight: 800;
|
|
transition: 160ms ease;
|
|
}
|
|
|
|
.tab-btn:hover { color: var(--text); background: rgba(255,255,255,0.06); }
|
|
.tab-btn.active {
|
|
color: #061014;
|
|
background: linear-gradient(135deg, var(--cyan), var(--green));
|
|
box-shadow: 0 12px 28px rgba(0,229,255,0.18);
|
|
}
|
|
|
|
.filter-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
color: var(--muted);
|
|
font-size: 13px;
|
|
}
|
|
|
|
select {
|
|
min-width: 240px;
|
|
color: var(--text);
|
|
background: rgba(5,8,14,0.78);
|
|
border: 1px solid var(--line);
|
|
border-radius: 14px;
|
|
padding: 11px 14px;
|
|
outline: none;
|
|
}
|
|
|
|
.grid {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr);
|
|
gap: 18px;
|
|
}
|
|
|
|
.tab-content { display: none; }
|
|
.tab-content.active { display: block; }
|
|
|
|
.voice-layout {
|
|
display: grid;
|
|
grid-template-columns: 380px 1fr;
|
|
gap: 18px;
|
|
}
|
|
|
|
.content-card {
|
|
border-radius: 28px;
|
|
padding: 22px;
|
|
}
|
|
|
|
.card-title {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 12px;
|
|
margin-bottom: 18px;
|
|
}
|
|
|
|
.card-title h2 {
|
|
margin: 0;
|
|
font-family: "Archivo Black", sans-serif;
|
|
font-size: 26px;
|
|
letter-spacing: -0.04em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.mini {
|
|
color: var(--faint);
|
|
font: 700 11px/1 "JetBrains Mono", monospace;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.12em;
|
|
}
|
|
|
|
.field-group { display: grid; gap: 8px; margin-bottom: 14px; }
|
|
.field-group label { color: var(--muted); font-size: 13px; font-weight: 800; }
|
|
|
|
.button-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
|
|
|
|
.btn {
|
|
border: 0;
|
|
border-radius: 16px;
|
|
padding: 13px 16px;
|
|
color: #061014;
|
|
cursor: pointer;
|
|
font-weight: 900;
|
|
transition: transform 140ms ease, filter 140ms ease;
|
|
}
|
|
|
|
.btn:hover { transform: translateY(-1px); filter: brightness(1.08); }
|
|
.btn-primary { background: linear-gradient(135deg, var(--cyan), var(--blue)); color: white; }
|
|
.btn-success { background: linear-gradient(135deg, var(--green), var(--cyan)); }
|
|
.btn-danger { background: linear-gradient(135deg, var(--red), #ff9a6b); color: white; }
|
|
|
|
.voice-status { color: var(--muted); font-size: 13px; margin-top: 12px; min-height: 20px; }
|
|
|
|
.visualizer {
|
|
display: flex;
|
|
align-items: flex-end;
|
|
gap: 5px;
|
|
height: 130px;
|
|
padding: 16px;
|
|
border: 1px solid var(--line);
|
|
border-radius: 20px;
|
|
background: rgba(0,0,0,0.22);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.bar {
|
|
flex: 1;
|
|
min-width: 5px;
|
|
border-radius: 999px;
|
|
height: 3px;
|
|
background: linear-gradient(to top, var(--blue), var(--cyan), var(--green));
|
|
box-shadow: 0 0 18px rgba(0,229,255,0.16);
|
|
}
|
|
|
|
.participants {
|
|
display: grid;
|
|
gap: 10px;
|
|
}
|
|
|
|
.user-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
padding: 12px;
|
|
border: 1px solid var(--line);
|
|
border-radius: 18px;
|
|
background: rgba(255,255,255,0.035);
|
|
}
|
|
|
|
.user-item.speaking { border-color: rgba(57,255,136,0.55); background: rgba(57,255,136,0.08); }
|
|
.user-item img { width: 34px; height: 34px; border-radius: 999px; }
|
|
|
|
.feed {
|
|
display: grid;
|
|
gap: 12px;
|
|
}
|
|
|
|
.event-card {
|
|
display: grid;
|
|
gap: 10px;
|
|
padding: 16px;
|
|
border: 1px solid var(--line);
|
|
border-radius: 20px;
|
|
background: rgba(255,255,255,0.035);
|
|
}
|
|
|
|
.event-head {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 12px;
|
|
}
|
|
|
|
.author {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
min-width: 0;
|
|
}
|
|
|
|
.avatar {
|
|
width: 34px;
|
|
height: 34px;
|
|
border-radius: 999px;
|
|
background: linear-gradient(135deg, var(--blue), var(--cyan));
|
|
flex: 0 0 auto;
|
|
}
|
|
|
|
.avatar img { width: 100%; height: 100%; border-radius: inherit; object-fit: cover; }
|
|
|
|
.name { font-weight: 900; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
.time { color: var(--faint); font: 600 11px/1 "JetBrains Mono", monospace; white-space: nowrap; }
|
|
.message-text { color: #dbe6f7; line-height: 1.6; white-space: pre-wrap; word-break: break-word; }
|
|
|
|
.sticker-strip, .attachment-strip { display: flex; gap: 10px; flex-wrap: wrap; }
|
|
.sticker-img { width: 96px; height: 96px; object-fit: contain; border-radius: 16px; background: rgba(0,0,0,0.22); border: 1px solid var(--line); padding: 8px; }
|
|
.attachment-chip { color: var(--cyan); text-decoration: none; border: 1px solid var(--line); border-radius: 14px; padding: 8px 10px; font: 700 12px/1 "JetBrains Mono", monospace; background: rgba(0,229,255,0.06); }
|
|
.embed-card { border-left: 4px solid var(--blue); border-radius: 16px; padding: 12px; background: rgba(98,117,255,0.08); display: grid; gap: 8px; }
|
|
.embed-title { font-weight: 900; color: var(--text); }
|
|
.embed-description { color: var(--muted); line-height: 1.5; white-space: pre-wrap; }
|
|
.embed-image { max-width: 360px; width: 100%; border-radius: 14px; border: 1px solid var(--line); }
|
|
|
|
.badges { display: flex; gap: 8px; flex-wrap: wrap; }
|
|
.badge {
|
|
border: 1px solid var(--line);
|
|
border-radius: 999px;
|
|
padding: 5px 9px;
|
|
color: var(--muted);
|
|
font: 700 10px/1 "JetBrains Mono", monospace;
|
|
text-transform: uppercase;
|
|
}
|
|
.badge.edit { color: var(--yellow); border-color: rgba(255,228,94,0.36); }
|
|
.badge.delete { color: var(--red); border-color: rgba(255,79,109,0.42); }
|
|
|
|
.image-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
|
|
gap: 14px;
|
|
}
|
|
|
|
.image-card {
|
|
overflow: hidden;
|
|
border: 1px solid var(--line);
|
|
border-radius: 22px;
|
|
background: rgba(255,255,255,0.035);
|
|
}
|
|
|
|
.image-preview {
|
|
height: 180px;
|
|
display: grid;
|
|
place-items: center;
|
|
background: #05070b;
|
|
color: var(--faint);
|
|
font: 700 12px/1 "JetBrains Mono", monospace;
|
|
}
|
|
|
|
.image-preview img { width: 100%; height: 100%; object-fit: cover; }
|
|
.image-meta { padding: 14px; display: grid; gap: 8px; }
|
|
.filename { font-size: 13px; font-weight: 900; word-break: break-word; }
|
|
.link { color: var(--cyan); text-decoration: none; font-weight: 900; }
|
|
.link:hover { text-decoration: underline; }
|
|
|
|
.empty {
|
|
padding: 34px;
|
|
text-align: center;
|
|
color: var(--faint);
|
|
border: 1px dashed var(--line);
|
|
border-radius: 22px;
|
|
}
|
|
|
|
.error {
|
|
display: none;
|
|
margin-bottom: 14px;
|
|
padding: 12px 14px;
|
|
color: #ffd8df;
|
|
border: 1px solid rgba(255,79,109,0.5);
|
|
border-radius: 16px;
|
|
background: rgba(255,79,109,0.12);
|
|
}
|
|
|
|
@media (max-width: 980px) {
|
|
.hero, .voice-layout { grid-template-columns: 1fr; }
|
|
.tab-panel { align-items: stretch; flex-direction: column; }
|
|
.filter-row { align-items: stretch; flex-direction: column; }
|
|
select { width: 100%; min-width: 0; }
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<main class="shell">
|
|
<section class="hero">
|
|
<div class="brand-card">
|
|
<div class="eyebrow"><span class="pulse"></span> Discord moderation command center</div>
|
|
<h1>Voice. Text. Image. One Watch Floor.</h1>
|
|
<p class="subtitle">Single-page watcher for live voice bridge, captured messages, and uploaded image evidence. Built for dense moderation review without jumping between pages.</p>
|
|
</div>
|
|
<div class="status-card">
|
|
<div class="status-row"><span class="status-label">WebSocket</span><span class="status-value"><span id="wsDot" class="dot"></span><span id="wsStatusText">Connecting</span></span></div>
|
|
<div class="status-row"><span class="status-label">Voice Link</span><span id="voiceStatusText" class="status-value">Not connected</span></div>
|
|
<div class="status-row"><span class="status-label">Active Tab</span><span id="activeTabLabel" class="status-value">Voice</span></div>
|
|
</div>
|
|
</section>
|
|
|
|
<nav class="tab-panel">
|
|
<div class="tabs">
|
|
<button class="tab-btn active" data-tab="voice">Voice</button>
|
|
<button class="tab-btn" data-tab="text">Text</button>
|
|
<button class="tab-btn" data-tab="images">Images</button>
|
|
</div>
|
|
<div class="filter-row">
|
|
<span>Channel / Thread</span>
|
|
<select id="channelFilter"><option value="">Select channel</option></select>
|
|
</div>
|
|
</nav>
|
|
|
|
<div id="errorBox" class="error"></div>
|
|
|
|
<section id="voice" class="tab-content active">
|
|
<div class="voice-layout">
|
|
<div class="content-card">
|
|
<div class="card-title"><h2>Voice Control</h2><span class="mini">bridge</span></div>
|
|
<div class="field-group">
|
|
<label for="guildSelect">Guild</label>
|
|
<select id="guildSelect"></select>
|
|
</div>
|
|
<div class="field-group">
|
|
<label for="channelSelect">Voice Channel</label>
|
|
<select id="channelSelect"></select>
|
|
</div>
|
|
<div class="button-row">
|
|
<button id="joinVoiceBtn" class="btn btn-success">Join</button>
|
|
<button id="disconnectVoiceBtn" class="btn btn-danger">Disconnect</button>
|
|
</div>
|
|
<div class="voice-status" id="voiceStatusNote">Idle</div>
|
|
</div>
|
|
|
|
<div class="content-card">
|
|
<div class="card-title"><h2>Live Audio</h2><span class="mini" id="listenStatus">speaker off</span></div>
|
|
<div style="display:grid; gap:12px; grid-template-columns: 1fr 1fr; margin-bottom:14px;">
|
|
<button id="toggleBtn" class="btn btn-primary">Start Transmitting</button>
|
|
<button id="listenBtn" class="btn btn-success">Join Listen Channel</button>
|
|
</div>
|
|
<div class="visualizer" id="visualizer"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="content-card" style="margin-top:18px;">
|
|
<div class="card-title"><h2>Participants</h2><span class="mini">speaking now</span></div>
|
|
<div id="userList" class="participants"></div>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="text" class="tab-content">
|
|
<div class="content-card">
|
|
<div class="card-title"><h2>Text Watch</h2><span class="mini">create / edit / delete</span></div>
|
|
<div id="textList" class="feed"></div>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="images" class="tab-content">
|
|
<div class="content-card">
|
|
<div class="card-title"><h2>Image Watch</h2><span class="mini">picser raw commit</span></div>
|
|
<div id="imageGrid" class="image-grid"></div>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
<script>
|
|
const state = {
|
|
socket: null,
|
|
activeTab: 'voice',
|
|
selectedChannel: '',
|
|
text: [],
|
|
images: [],
|
|
isStreaming: false,
|
|
isListening: false,
|
|
audioContextTransmit: null,
|
|
audioContextListen: null,
|
|
processor: null,
|
|
nextStartTime: 0,
|
|
noiseGateHold: 0,
|
|
};
|
|
|
|
const SAMPLE_RATE = 24000;
|
|
const NOISE_GATE_THRESHOLD = 0.01;
|
|
const NOISE_GATE_HOLD_FRAMES = 3;
|
|
|
|
const el = {
|
|
wsDot: document.getElementById('wsDot'),
|
|
wsStatusText: document.getElementById('wsStatusText'),
|
|
activeTabLabel: document.getElementById('activeTabLabel'),
|
|
errorBox: document.getElementById('errorBox'),
|
|
guildSelect: document.getElementById('guildSelect'),
|
|
channelSelect: document.getElementById('channelSelect'),
|
|
channelFilter: document.getElementById('channelFilter'),
|
|
joinVoiceBtn: document.getElementById('joinVoiceBtn'),
|
|
disconnectVoiceBtn: document.getElementById('disconnectVoiceBtn'),
|
|
voiceStatusText: document.getElementById('voiceStatusText'),
|
|
voiceStatusNote: document.getElementById('voiceStatusNote'),
|
|
toggleBtn: document.getElementById('toggleBtn'),
|
|
listenBtn: document.getElementById('listenBtn'),
|
|
listenStatus: document.getElementById('listenStatus'),
|
|
visualizer: document.getElementById('visualizer'),
|
|
userList: document.getElementById('userList'),
|
|
textList: document.getElementById('textList'),
|
|
imageGrid: document.getElementById('imageGrid'),
|
|
};
|
|
|
|
for (let i = 0; i < 32; i++) {
|
|
const bar = document.createElement('div');
|
|
bar.className = 'bar';
|
|
el.visualizer.appendChild(bar);
|
|
}
|
|
const bars = [...document.querySelectorAll('.bar')];
|
|
|
|
async function apiRequest(url, options = {}) {
|
|
const response = await fetch(url, {
|
|
headers: { 'Content-Type': 'application/json', ...(options.headers || {}) },
|
|
...options,
|
|
});
|
|
if (!response.ok) {
|
|
const error = await response.json().catch(() => ({ message: response.statusText }));
|
|
throw new Error(error.message || response.statusText);
|
|
}
|
|
return response.json();
|
|
}
|
|
|
|
function showError(message) {
|
|
el.errorBox.textContent = message;
|
|
el.errorBox.style.display = 'block';
|
|
setTimeout(() => { el.errorBox.style.display = 'none'; }, 4500);
|
|
}
|
|
|
|
function renderOptions(select, items, placeholder) {
|
|
select.replaceChildren();
|
|
const first = document.createElement('option');
|
|
first.value = '';
|
|
first.textContent = placeholder;
|
|
select.appendChild(first);
|
|
for (const item of items) {
|
|
const option = document.createElement('option');
|
|
option.value = item.id;
|
|
option.textContent = item.name;
|
|
select.appendChild(option);
|
|
}
|
|
}
|
|
|
|
async function loadGuilds() {
|
|
const guilds = await apiRequest('/api/guilds');
|
|
renderOptions(el.guildSelect, guilds, 'Select guild');
|
|
if (guilds.length > 0) {
|
|
el.guildSelect.value = guilds[0].id;
|
|
await loadChannels(guilds[0].id);
|
|
}
|
|
}
|
|
|
|
async function loadChannels(guildId) {
|
|
const [voiceChannels, watchChannels] = await Promise.all([
|
|
apiRequest(`/api/guilds/${guildId}/voice-channels`),
|
|
apiRequest(`/api/guilds/${guildId}/channels`),
|
|
]);
|
|
renderOptions(el.channelSelect, voiceChannels, 'Select voice channel');
|
|
renderOptions(el.channelFilter, watchChannels, 'Select channel or thread');
|
|
}
|
|
|
|
async function refreshStatus() {
|
|
try {
|
|
const status = await apiRequest('/api/status');
|
|
el.voiceStatusText.textContent = status.connected ? status.activeChannelName || 'Connected' : 'Not connected';
|
|
el.voiceStatusNote.textContent = status.connected ? `Connected to ${status.activeChannelName}` : 'Idle';
|
|
} catch (error) {
|
|
showError(error.message);
|
|
}
|
|
}
|
|
|
|
async function connectVoice() {
|
|
const guildId = el.guildSelect.value;
|
|
const channelId = el.channelSelect.value;
|
|
if (!guildId || !channelId) return showError('Select guild and voice channel first');
|
|
const status = await apiRequest('/api/connect', { method: 'POST', body: JSON.stringify({ guildId, channelId }) });
|
|
el.voiceStatusText.textContent = status.activeChannelName || 'Connected';
|
|
el.voiceStatusNote.textContent = `Connected to ${status.activeChannelName}`;
|
|
}
|
|
|
|
async function disconnectVoice() {
|
|
await apiRequest('/api/disconnect', { method: 'POST' });
|
|
await refreshStatus();
|
|
}
|
|
|
|
function connectWebSocket() {
|
|
const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
|
|
state.socket = new WebSocket(`${protocol}//${window.location.host}/ws`);
|
|
state.socket.binaryType = 'arraybuffer';
|
|
|
|
state.socket.onopen = () => {
|
|
el.wsDot.classList.add('on');
|
|
el.wsStatusText.textContent = 'Connected';
|
|
};
|
|
|
|
state.socket.onclose = () => {
|
|
el.wsDot.classList.remove('on');
|
|
el.wsStatusText.textContent = 'Reconnecting';
|
|
setTimeout(connectWebSocket, 2500);
|
|
};
|
|
|
|
state.socket.onerror = () => {
|
|
el.wsDot.classList.remove('on');
|
|
el.wsDot.classList.add('warn');
|
|
el.wsStatusText.textContent = 'Socket error';
|
|
};
|
|
|
|
state.socket.onmessage = (event) => {
|
|
if (typeof event.data === 'string') {
|
|
handleJsonEvent(event.data);
|
|
return;
|
|
}
|
|
if (state.isListening) playPcm(event.data);
|
|
};
|
|
}
|
|
|
|
function handleJsonEvent(raw) {
|
|
const message = JSON.parse(raw);
|
|
if (message.type === 'user_state') return renderUsers(message.users || []);
|
|
if (message.type === 'message_created') {
|
|
state.text.unshift(message.data);
|
|
renderText();
|
|
}
|
|
if (message.type === 'message_updated') {
|
|
const item = state.text.find((entry) => entry.id === message.data.id);
|
|
if (item) Object.assign(item, { edited_content: message.data.edited_content, edited_at: message.data.edited_at, type: 'edited' });
|
|
renderText();
|
|
}
|
|
if (message.type === 'message_deleted') {
|
|
const item = state.text.find((entry) => entry.id === message.data.id);
|
|
if (item) Object.assign(item, { deleted_at: message.data.deleted_at, type: 'deleted' });
|
|
renderText();
|
|
}
|
|
if (message.type === 'attachment_uploaded') fetchImages();
|
|
}
|
|
|
|
function renderUsers(users) {
|
|
el.userList.replaceChildren();
|
|
if (users.length === 0) {
|
|
const empty = document.createElement('div');
|
|
empty.className = 'empty';
|
|
empty.textContent = 'No active speakers';
|
|
el.userList.appendChild(empty);
|
|
return;
|
|
}
|
|
for (const user of users) {
|
|
const row = document.createElement('div');
|
|
row.className = `user-item${user.speaking ? ' speaking' : ''}`;
|
|
const img = document.createElement('img');
|
|
img.src = user.avatar || '';
|
|
img.alt = '';
|
|
const name = document.createElement('span');
|
|
name.textContent = user.username;
|
|
row.append(img, name);
|
|
el.userList.appendChild(row);
|
|
}
|
|
}
|
|
|
|
async function fetchText() {
|
|
if (!state.selectedChannel) return renderText();
|
|
const result = await apiRequest(`/api/messages?channel=${encodeURIComponent(state.selectedChannel)}&type=text&limit=80`);
|
|
state.text = result.data || [];
|
|
renderText();
|
|
}
|
|
|
|
async function fetchImages() {
|
|
if (!state.selectedChannel) return renderImages();
|
|
const result = await apiRequest(`/api/messages?channel=${encodeURIComponent(state.selectedChannel)}&type=image&limit=80`);
|
|
state.images = result.data || [];
|
|
renderImages();
|
|
}
|
|
|
|
function parseMetadata(value) {
|
|
if (!value) return {};
|
|
try { return JSON.parse(value); } catch { return {}; }
|
|
}
|
|
|
|
function renderText() {
|
|
el.textList.replaceChildren();
|
|
if (!state.selectedChannel) return appendEmpty(el.textList, 'Select channel to view text captures');
|
|
if (state.text.length === 0) return appendEmpty(el.textList, 'No text captures yet');
|
|
for (const msg of state.text) {
|
|
const metadata = parseMetadata(msg.metadata);
|
|
const card = document.createElement('article');
|
|
card.className = 'event-card';
|
|
const head = document.createElement('div');
|
|
head.className = 'event-head';
|
|
const author = document.createElement('div');
|
|
author.className = 'author';
|
|
const avatar = document.createElement('div');
|
|
avatar.className = 'avatar';
|
|
if (msg.avatar_url) {
|
|
const img = document.createElement('img');
|
|
img.src = msg.avatar_url;
|
|
img.alt = '';
|
|
avatar.appendChild(img);
|
|
}
|
|
const name = document.createElement('div');
|
|
name.className = 'name';
|
|
name.textContent = msg.username || msg.user_id;
|
|
author.append(avatar, name);
|
|
const time = document.createElement('div');
|
|
time.className = 'time';
|
|
time.textContent = new Date(msg.created_at).toLocaleString();
|
|
head.append(author, time);
|
|
const text = document.createElement('div');
|
|
text.className = 'message-text';
|
|
text.textContent = msg.edited_content || msg.content || '(empty message)';
|
|
const stickers = renderStickers(metadata.stickers || []);
|
|
const embeds = renderEmbeds(metadata.embeds || []);
|
|
const attachments = renderAttachments(metadata.attachments || []);
|
|
const badges = document.createElement('div');
|
|
badges.className = 'badges';
|
|
if (metadata.reference?.messageId) appendBadge(badges, 'reply', '');
|
|
if (msg.thread_id) appendBadge(badges, metadata.channel?.threadName ? `thread: ${metadata.channel.threadName}` : 'thread', '');
|
|
if (msg.edited_at) appendBadge(badges, 'edited', 'edit');
|
|
if (msg.deleted_at) appendBadge(badges, 'deleted', 'delete');
|
|
card.append(head, text);
|
|
if (stickers.childElementCount > 0) card.appendChild(stickers);
|
|
if (embeds.childElementCount > 0) card.appendChild(embeds);
|
|
if (attachments.childElementCount > 0) card.appendChild(attachments);
|
|
card.appendChild(badges);
|
|
el.textList.appendChild(card);
|
|
}
|
|
}
|
|
|
|
function renderStickers(stickers) {
|
|
const wrap = document.createElement('div');
|
|
wrap.className = 'sticker-strip';
|
|
for (const sticker of stickers) {
|
|
const img = document.createElement('img');
|
|
img.className = 'sticker-img';
|
|
img.src = sticker.url;
|
|
img.alt = sticker.name;
|
|
wrap.appendChild(img);
|
|
}
|
|
return wrap;
|
|
}
|
|
|
|
function renderEmbeds(embeds) {
|
|
const wrap = document.createElement('div');
|
|
wrap.className = 'feed';
|
|
for (const embed of embeds) {
|
|
const card = document.createElement('div');
|
|
card.className = 'embed-card';
|
|
if (embed.title) {
|
|
const title = document.createElement(embed.url ? 'a' : 'div');
|
|
title.className = 'embed-title';
|
|
title.textContent = embed.title;
|
|
if (embed.url) {
|
|
title.href = embed.url;
|
|
title.target = '_blank';
|
|
title.rel = 'noreferrer';
|
|
}
|
|
card.appendChild(title);
|
|
}
|
|
if (embed.description) {
|
|
const desc = document.createElement('div');
|
|
desc.className = 'embed-description';
|
|
desc.textContent = embed.description;
|
|
card.appendChild(desc);
|
|
}
|
|
for (const field of embed.fields || []) {
|
|
const fieldNode = document.createElement('div');
|
|
fieldNode.className = 'embed-description';
|
|
fieldNode.textContent = `${field.name}: ${field.value}`;
|
|
card.appendChild(fieldNode);
|
|
}
|
|
if (embed.image || embed.thumbnail) {
|
|
const img = document.createElement('img');
|
|
img.className = 'embed-image';
|
|
img.src = embed.image || embed.thumbnail;
|
|
img.alt = embed.title || 'embed image';
|
|
card.appendChild(img);
|
|
}
|
|
wrap.appendChild(card);
|
|
}
|
|
return wrap;
|
|
}
|
|
|
|
function renderAttachments(attachments) {
|
|
const wrap = document.createElement('div');
|
|
wrap.className = 'attachment-strip';
|
|
for (const attachment of attachments) {
|
|
const link = document.createElement('a');
|
|
link.className = 'attachment-chip';
|
|
link.href = attachment.url;
|
|
link.target = '_blank';
|
|
link.rel = 'noreferrer';
|
|
link.textContent = `${attachment.name} (${(attachment.size / 1024).toFixed(1)}KB)`;
|
|
wrap.appendChild(link);
|
|
}
|
|
return wrap;
|
|
}
|
|
|
|
function renderImages() {
|
|
el.imageGrid.replaceChildren();
|
|
if (!state.selectedChannel) return appendEmpty(el.imageGrid, 'Select channel to view image captures');
|
|
if (state.images.length === 0) return appendEmpty(el.imageGrid, 'No image captures yet');
|
|
for (const image of state.images) {
|
|
const card = document.createElement('article');
|
|
card.className = 'image-card';
|
|
const preview = document.createElement('div');
|
|
preview.className = 'image-preview';
|
|
if (image.uploaded_url) {
|
|
const img = document.createElement('img');
|
|
img.src = image.uploaded_url;
|
|
img.alt = image.filename;
|
|
preview.appendChild(img);
|
|
} else {
|
|
preview.textContent = image.upload_status || 'pending';
|
|
}
|
|
const meta = document.createElement('div');
|
|
meta.className = 'image-meta';
|
|
const filename = document.createElement('div');
|
|
filename.className = 'filename';
|
|
filename.textContent = image.filename;
|
|
const info = document.createElement('div');
|
|
info.className = 'time';
|
|
info.textContent = `${(image.size / 1024).toFixed(1)}KB • ${image.upload_status}${image.thread_id ? ' • thread' : ''}`;
|
|
meta.append(filename, info);
|
|
if (image.uploaded_url) {
|
|
const link = document.createElement('a');
|
|
link.className = 'link';
|
|
link.href = image.uploaded_url;
|
|
link.target = '_blank';
|
|
link.rel = 'noreferrer';
|
|
link.textContent = 'open raw commit';
|
|
meta.appendChild(link);
|
|
}
|
|
card.append(preview, meta);
|
|
el.imageGrid.appendChild(card);
|
|
}
|
|
}
|
|
|
|
function appendBadge(parent, label, className) {
|
|
const badge = document.createElement('span');
|
|
badge.className = `badge ${className}`;
|
|
badge.textContent = label;
|
|
parent.appendChild(badge);
|
|
}
|
|
|
|
function appendEmpty(parent, message) {
|
|
const empty = document.createElement('div');
|
|
empty.className = 'empty';
|
|
empty.textContent = message;
|
|
parent.appendChild(empty);
|
|
}
|
|
|
|
async function startStreaming() {
|
|
try {
|
|
const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
|
|
state.audioContextTransmit = new AudioContext({ sampleRate: SAMPLE_RATE });
|
|
const source = state.audioContextTransmit.createMediaStreamSource(stream);
|
|
state.processor = state.audioContextTransmit.createScriptProcessor(2048, 1, 1);
|
|
source.connect(state.processor);
|
|
state.processor.connect(state.audioContextTransmit.destination);
|
|
state.processor.onaudioprocess = (event) => {
|
|
if (!state.isStreaming || state.socket?.readyState !== WebSocket.OPEN) return;
|
|
const input = event.inputBuffer.getChannelData(0);
|
|
let sum = 0;
|
|
for (let i = 0; i < input.length; i++) sum += input[i] * input[i];
|
|
const rms = Math.sqrt(sum / input.length);
|
|
if (rms < NOISE_GATE_THRESHOLD && state.noiseGateHold <= 0) return;
|
|
state.noiseGateHold = rms >= NOISE_GATE_THRESHOLD ? NOISE_GATE_HOLD_FRAMES : state.noiseGateHold - 1;
|
|
const pcm = new Int16Array(input.length);
|
|
for (let i = 0; i < input.length; i++) pcm[i] = Math.max(-1, Math.min(1, input[i])) * 32767;
|
|
state.socket.send(pcm.buffer);
|
|
updateVisualizer(rms);
|
|
};
|
|
state.isStreaming = true;
|
|
el.toggleBtn.textContent = 'Stop Transmitting';
|
|
} catch (error) {
|
|
showError(`Microphone error: ${error.message}`);
|
|
}
|
|
}
|
|
|
|
function stopStreaming() {
|
|
state.isStreaming = false;
|
|
state.processor?.disconnect();
|
|
state.audioContextTransmit?.close();
|
|
state.processor = null;
|
|
state.audioContextTransmit = null;
|
|
el.toggleBtn.textContent = 'Start Transmitting';
|
|
updateVisualizer(0);
|
|
}
|
|
|
|
function toggleListen() {
|
|
state.isListening = !state.isListening;
|
|
if (state.isListening) {
|
|
state.audioContextListen = new AudioContext({ sampleRate: 24000 });
|
|
state.nextStartTime = state.audioContextListen.currentTime;
|
|
el.listenBtn.textContent = 'Leave Listen Channel';
|
|
el.listenStatus.textContent = 'speaker on';
|
|
} else {
|
|
state.audioContextListen?.close();
|
|
state.audioContextListen = null;
|
|
el.listenBtn.textContent = 'Join Listen Channel';
|
|
el.listenStatus.textContent = 'speaker off';
|
|
}
|
|
}
|
|
|
|
function playPcm(arrayBuffer) {
|
|
if (!state.audioContextListen) return;
|
|
const bytes = new Uint8Array(arrayBuffer);
|
|
if (bytes.byteLength <= 4) return;
|
|
const pcm = new Int16Array(bytes.buffer, bytes.byteOffset + 4, (bytes.byteLength - 4) / 2);
|
|
const audioBuffer = state.audioContextListen.createBuffer(1, pcm.length, 24000);
|
|
const channel = audioBuffer.getChannelData(0);
|
|
for (let i = 0; i < pcm.length; i++) channel[i] = pcm[i] / 32768;
|
|
const source = state.audioContextListen.createBufferSource();
|
|
source.buffer = audioBuffer;
|
|
source.connect(state.audioContextListen.destination);
|
|
const startAt = Math.max(state.nextStartTime, state.audioContextListen.currentTime);
|
|
source.start(startAt);
|
|
state.nextStartTime = startAt + audioBuffer.duration;
|
|
}
|
|
|
|
function updateVisualizer(level) {
|
|
bars.forEach((bar, index) => {
|
|
const wave = Math.sin(index * 0.55 + Date.now() / 140) * 0.35 + 0.65;
|
|
bar.style.height = `${Math.max(3, level * 190 * wave)}px`;
|
|
});
|
|
}
|
|
|
|
document.querySelectorAll('.tab-btn').forEach((button) => {
|
|
button.addEventListener('click', async () => {
|
|
document.querySelectorAll('.tab-btn').forEach((item) => item.classList.remove('active'));
|
|
document.querySelectorAll('.tab-content').forEach((item) => item.classList.remove('active'));
|
|
button.classList.add('active');
|
|
state.activeTab = button.dataset.tab;
|
|
document.getElementById(state.activeTab).classList.add('active');
|
|
el.activeTabLabel.textContent = button.textContent;
|
|
if (state.activeTab === 'text') await fetchText();
|
|
if (state.activeTab === 'images') await fetchImages();
|
|
});
|
|
});
|
|
|
|
el.guildSelect.addEventListener('change', () => loadChannels(el.guildSelect.value).catch((error) => showError(error.message)));
|
|
el.joinVoiceBtn.addEventListener('click', () => connectVoice().catch((error) => showError(error.message)));
|
|
el.disconnectVoiceBtn.addEventListener('click', () => disconnectVoice().catch((error) => showError(error.message)));
|
|
el.toggleBtn.addEventListener('click', () => state.isStreaming ? stopStreaming() : startStreaming());
|
|
el.listenBtn.addEventListener('click', toggleListen);
|
|
el.channelFilter.addEventListener('change', async () => {
|
|
state.selectedChannel = el.channelFilter.value;
|
|
await Promise.all([fetchText(), fetchImages()]).catch((error) => showError(error.message));
|
|
});
|
|
|
|
connectWebSocket();
|
|
loadGuilds().then(refreshStatus).catch((error) => showError(error.message));
|
|
setInterval(() => {
|
|
if (state.activeTab === 'text') fetchText().catch(() => {});
|
|
if (state.activeTab === 'images') fetchImages().catch(() => {});
|
|
}, 7000);
|
|
</script>
|
|
</body>
|
|
</html>
|