heystreamer/templates/settings.html
Bashy 6ad661c220 Initial commit — BashyOverlay v1
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>
2026-04-22 23:48:35 +03:00

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 */&#10;#alert { border: 2px solid #9146ff; box-shadow: 0 0 20px #9146ff; }&#10;.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&#10;document.addEventListener('bashyoverlay:raid', e => {&#10; console.log('Raid from', e.detail.alert_text);&#10;});">{{ 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 %}