Music Bot: URL Theme Engine + Overlay WebAudio Visualizer + Configurable Max Song Duration Gate#269
Merged
Loggableim merged 5 commits intoApr 16, 2026
Conversation
Agent-Logs-Url: https://github.com/Loggableim/ltth_desktop2/sessions/b12e1019-5500-4aac-814d-eb10b3bb81d5 Co-authored-by: Loggableim <160679982+Loggableim@users.noreply.github.com>
Agent-Logs-Url: https://github.com/Loggableim/ltth_desktop2/sessions/b12e1019-5500-4aac-814d-eb10b3bb81d5 Co-authored-by: Loggableim <160679982+Loggableim@users.noreply.github.com>
…alidation Agent-Logs-Url: https://github.com/Loggableim/ltth_desktop2/sessions/b12e1019-5500-4aac-814d-eb10b3bb81d5 Co-authored-by: Loggableim <160679982+Loggableim@users.noreply.github.com>
Copilot
AI
changed the title
[WIP] Implement features for Music Bot plugin: Theme engine and audio visualizer
Music Bot: URL Theme Engine + Overlay WebAudio Visualizer + Configurable Max Song Duration Gate
Apr 16, 2026
Owner
|
@copilot resolve the merge conflicts in this pull request |
Co-authored-by: Loggableim <160679982+Loggableim@users.noreply.github.com>
Contributor
Author
Merge-Konflikte sind aufgelöst und als Merge-Commit |
Copilot stopped work on behalf of
Loggableim due to an error
April 16, 2026 12:58
There was a problem hiding this comment.
Pull request overview
This PR extends the Music Bot plugin with (1) URL-driven overlay theming, (2) a Web Audio API canvas visualizer in the overlay, and (3) a configurable maximum song duration gate enforced in queue logic, with accompanying UI and Jest tests.
Changes:
- Add max song duration config (default 360s) with dashboard input + QueueManager validation + Jest coverage.
- Implement overlay theme engine via URL params (with legacy theme alias mapping) and add new theme variable sets.
- Add overlay visualizer wiring (AnalyserNode +
requestAnimationFrame) and basic HTML-level tests.
Reviewed changes
Copilot reviewed 8 out of 8 changed files in this pull request and generated 4 comments.
Show a summary per file
| File | Description |
|---|---|
| app/plugins/music-bot/lib/queue-manager.js | Enforces max duration + minimum threshold; rejects missing duration metadata. |
| app/plugins/music-bot/main.js | Updates default queue duration limit to 360s. |
| app/plugins/music-bot/ui.html | Adds dashboard field for max song duration; updates theme dropdown options. |
| app/plugins/music-bot/assets/ui.js | Persists duration limit setting; updates overlay URL builder default theme. |
| app/plugins/music-bot/overlay.html | Adds theme variables/aliases and a canvas visualizer loop. |
| app/test/music-bot-queue-duration-limit.test.js | Tests duration gate (missing metadata, over limit, clamp behavior). |
| app/test/music-bot-overlay-theme-visualizer.test.js | Smoke-tests overlay HTML for theme/visualizer wiring strings. |
| app/CHANGELOG.md | Documents the new overlay theme/visualizer and duration limit. |
Comment on lines
+278
to
+286
| if (!Number.isFinite(duration) || duration <= 0) { | ||
| return { | ||
| success: false, | ||
| error: 'Songdauer konnte nicht ermittelt werden. Bitte einen anderen Song wählen.' | ||
| }; | ||
| } | ||
| if (duration > maxSongDurationSeconds) { | ||
| return { | ||
| success: false, |
Comment on lines
+1119
to
+1127
| function findVisualizerMediaElement() { | ||
| // Optional extension point: external scripts may set window.musicBotVisualizerAudio | ||
| // to a HTMLMediaElement that carries the overlay audio source. | ||
| if (window.musicBotVisualizerAudio && window.musicBotVisualizerAudio instanceof HTMLMediaElement) { | ||
| return window.musicBotVisualizerAudio; | ||
| } | ||
| return document.querySelector('audio[data-musicbot-visualizer], video[data-musicbot-visualizer], audio, video'); | ||
| } | ||
|
|
Comment on lines
+1155
to
+1160
| const gradient = visualizerCtx.createLinearGradient(0, y, 0, height); | ||
| gradient.addColorStop(0, visualizerAccentColor); | ||
| gradient.addColorStop(1, visualizerAccentStrongColor); | ||
| visualizerCtx.fillStyle = gradient; | ||
| visualizerCtx.fillRect(x, y, barWidth, barHeight); | ||
| } |
Comment on lines
+1128
to
+1167
| function startVisualizerLoop() { | ||
| if (visualizerAnimationFrame) cancelAnimationFrame(visualizerAnimationFrame); | ||
| const draw = () => { | ||
| visualizerAnimationFrame = requestAnimationFrame(draw); | ||
| if (!visualizerCtx || !visualizerAnalyser || !visualizerData) return; | ||
| const width = visualizerCanvas.clientWidth || visualizerCanvas.width; | ||
| const height = visualizerCanvas.clientHeight || visualizerCanvas.height; | ||
| if (visualizerCanvas.width !== width || visualizerCanvas.height !== height) { | ||
| visualizerCanvas.width = width; | ||
| visualizerCanvas.height = height; | ||
| } | ||
|
|
||
| visualizerAnalyser.getByteFrequencyData(visualizerData); | ||
| visualizerCtx.clearRect(0, 0, width, height); | ||
| const barCount = VISUALIZER_BAR_COUNT; | ||
| const gap = VISUALIZER_BAR_GAP; | ||
| const barWidth = Math.max(2, (width - (barCount - 1) * gap) / barCount); | ||
| const active = state === 'playing' && visualizerCanvas.classList.contains('active'); | ||
|
|
||
| for (let i = 0; i < barCount; i += 1) { | ||
| const idx = Math.floor((i / barCount) * visualizerData.length); | ||
| const value = visualizerData[idx] / 255; | ||
| const eased = Math.pow(value, VISUALIZER_EASING_EXPONENT); | ||
| const minHeight = active ? 2 : 1; | ||
| const barHeight = active ? Math.max(minHeight, eased * (height - 6)) : minHeight; | ||
| const x = i * (barWidth + gap); | ||
| const y = height - barHeight; | ||
| const gradient = visualizerCtx.createLinearGradient(0, y, 0, height); | ||
| gradient.addColorStop(0, visualizerAccentColor); | ||
| gradient.addColorStop(1, visualizerAccentStrongColor); | ||
| visualizerCtx.fillStyle = gradient; | ||
| visualizerCtx.fillRect(x, y, barWidth, barHeight); | ||
| } | ||
| }; | ||
| draw(); | ||
| } | ||
|
|
||
| function setVisualizerActive(isActive) { | ||
| if (!visualizerCanvas) return; | ||
| visualizerCanvas.classList.toggle('active', Boolean(isActive && visualizerAnalyser)); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
origin/mainreproduziert und analysiertapp/CHANGELOG.mdaufgelöst (beide Changelog-Blöcke beibehalten)app/plugins/music-bot/overlay.htmlaufgelöst (Visualizer + Up-Next Variablen konsolidiert)mainzusammengeführt istmusic-bot-overlay-theme-visualizer,music-bot-queue-duration-limit)Original prompt
Implementiere die folgenden 3 Features (Theme-Engine, Audio-Visualizer und Songlängen-Limit) für das Music Bot Plugin im
ltth_desktop2Ökosystem als Pull Request. Achte auf eine absolut produktionsreife, fehlerfreie und vollständige Umsetzung ohne Platzhalter oder gekürzten Code.Anforderungen im Detail:
Theme-Engine (Feature 37):
http://localhost:port/plugins/musicbot/overlay.html?theme=cyberpunk).default,cyberpunk,minimal,neon).Visualizer via Web Audio API (Feature 32):
AnalyserNode), um die Audiodaten des aktuellen HTML5 Audio-Elements oder Streams auszulesen und in ein<canvas>zu rendern.Maximale Songlänge (Feature 43):
!sr) zur Queue hinzugefügt wird, muss die Metadaten-Länge geprüft werden.this.api.setConfig()/getConfig()geladen werden.Technischer Kontext & Architektur-Regeln:
requestAnimationFrame) und ressourcenschonend für OBS.The following is the prior conversation context from the user's chat exploration (may be truncated):
User: Music Bot verbessern, wie? mach vorschläge. 50 mind.
Assistant: Hier sind 53 professionelle, produktionstaugliche und technische Vorschläge zur Verbesserung und Skalierung eines Music Bot Plugins für das LTTH-Ökosystem (TikTok LIVE Connector, Node.js, SQLite, Websockets, OBS Overlays).
Die Liste ist in Architektur, Audio-Engine, Interaktion, UI/Overlays und Moderation unterteilt.
1. Core Audio-Engine & Playback
spawn) für ressourcenschonendes Decoding von Audiostreams.this.api.getPluginDataDir(), um Ladezeiten oder Aussetzer bei Netzwerkschwankungen zu verhindern.2. Quellen & API-Integrationen
yt-dlpals Child-Process mit automatischem Fallback auf alternative Instanzen (z. B. Invidious API) bei Rate-Limits.This pull request was created from Copilot chat.