Twitch stream event platform with OBS browser source overlay. Features: - Twitch OAuth login (streamer + mod access) - EventSub WebSocket for subs, gift subs, bits, channel points, follows, raids - Chat commands via tmi.js in the overlay - Gap audio — tone plays on new chat message after silence, volume/pitch scale with gap length - Self-hosted media library (upload sounds and videos) - Action configuration — map any event to sound, video, or alert - Per-action cooldowns, test button, enable/disable toggle - Multiple actions per event (all matching actions fire) - Activity log dashboard with EventSub connection status - Layout editor — iframe-based WYSIWYG with drag handles, live style preview - Custom CSS and custom JS injection into overlay - Custom DOM events (bashyoverlay:sub, bashyoverlay:raid, etc.) for custom JS hooks - deploy.sh — one-shot setup and launch script Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
65 lines
3.1 KiB
HTML
65 lines
3.1 KiB
HTML
{% extends "base.html" %}
|
|
{% block title %}Settings — BashyOverlay{% endblock %}
|
|
{% block content %}
|
|
<hgroup>
|
|
<h1>Settings</h1>
|
|
</hgroup>
|
|
|
|
{% if saved %}
|
|
<div class="notice-success">Settings saved.</div>
|
|
{% endif %}
|
|
|
|
<section>
|
|
<h2>OBS browser source URL</h2>
|
|
<p>Add this as a browser source in OBS:</p>
|
|
<input type="text" value="{{ overlay_url }}" readonly onclick="this.select()" class="url-input">
|
|
<small>Refresh the browser source in OBS after changing settings.</small>
|
|
</section>
|
|
|
|
<section>
|
|
<form method="post" action="/settings">
|
|
<h2>Channel</h2>
|
|
<label>
|
|
Twitch channel name
|
|
<input type="text" name="twitch_channel" value="{{ settings.twitch_channel }}" required placeholder="your_channel">
|
|
</label>
|
|
|
|
<h2>Gap audio thresholds</h2>
|
|
<p><small>A tone plays when a new message arrives after a silence. These control how the volume and pitch scale with the gap length.</small></p>
|
|
<div class="form-grid">
|
|
<label>
|
|
Silence threshold (seconds)
|
|
<input type="number" name="gap_silence_threshold" value="{{ settings.gap_silence_threshold }}" min="0">
|
|
<small>No sound if gap is shorter than this.</small>
|
|
</label>
|
|
<label>
|
|
Full volume at (seconds)
|
|
<input type="number" name="gap_scale_end" value="{{ settings.gap_scale_end }}" min="1">
|
|
<small>Volume reaches 100% at this gap length.</small>
|
|
</label>
|
|
<label>
|
|
Max pitch at (seconds)
|
|
<input type="number" name="gap_pitch_scale_end" value="{{ settings.gap_pitch_scale_end }}" min="1">
|
|
<small>Pitch stops scaling up after this gap length.</small>
|
|
</label>
|
|
</div>
|
|
|
|
<h2>Custom CSS</h2>
|
|
<p><small>Injected into the overlay after the default styles. Overrides anything. Use <code>#chat</code>, <code>.chat-msg</code>, <code>#alert</code>.</small></p>
|
|
<textarea name="custom_css" class="code-textarea" rows="10" placeholder="/* example */ #alert { border: 2px solid #9146ff; box-shadow: 0 0 20px #9146ff; } .chat-msg { border-left: 3px solid; }">{{ settings.custom_css }}</textarea>
|
|
|
|
<h2>Custom JS</h2>
|
|
<p><small>Injected after the overlay scripts. Hook into events with <code>document.addEventListener('bashyoverlay:sub', e => ...)</code>. Available events: <code>sub</code>, <code>gift_sub</code>, <code>bits</code>, <code>channel_points</code>, <code>command</code>, <code>follow</code>, <code>raid</code>.</small></p>
|
|
<textarea name="custom_js" class="code-textarea" rows="10" placeholder="// example document.addEventListener('bashyoverlay:raid', e => { console.log('Raid from', e.detail.alert_text); });">{{ settings.custom_js }}</textarea>
|
|
|
|
<button type="submit">Save settings</button>
|
|
</form>
|
|
</section>
|
|
|
|
<section>
|
|
<h2>EventSub</h2>
|
|
<form method="post" action="/settings/reconnect">
|
|
<button type="submit" class="outline">Reconnect EventSub</button>
|
|
</form>
|
|
</section>
|
|
{% endblock %}
|