122 lines
4.2 KiB
HTML
122 lines
4.2 KiB
HTML
<h1>PNGTube</h1>
|
|
<select id="instance" hidden></select>
|
|
<form name="new_instance" hidden>
|
|
<input type="text" name="instance_name" required>
|
|
<button type="submit">Create new instance</button>
|
|
</form>
|
|
<form name="instance_config" hidden>
|
|
<button type="button" id="remove_instance">Delete</button>
|
|
<br>
|
|
<table>
|
|
<tr>
|
|
<td>
|
|
<h2>Assets</h2>
|
|
<div id="asset_warning" hidden>
|
|
Possible missing assets:
|
|
<ul id="missing_assets"></ul>
|
|
Make sure all your assets have been added,
|
|
<br>
|
|
and their id's are set correctly below.
|
|
<br>
|
|
If you have already done so, ignore this warning.
|
|
<br><br>
|
|
</div>
|
|
<input type="file" id="asset_file_input" multiple>
|
|
<ul id="asset_list"></ul>
|
|
</td>
|
|
<td>
|
|
<h2>Activation</h2>
|
|
<div id="obs_config">
|
|
<span id="obs_status">Connecting to OBS...</span>
|
|
<input type="hidden" name="obs_token">
|
|
<button type="button" id="obs_auth">Get OBS Authorization</button>
|
|
</div>
|
|
<br>
|
|
<button type="button" id="add_source">Add Source</button>
|
|
<ul id="source_list"></ul>
|
|
</td>
|
|
<td id="instructions">
|
|
<h3>Adjusting Sensitivity</h3>
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<td colspan="2">Noise Gate Settings</td>
|
|
</tr>
|
|
</thead>
|
|
<tr>
|
|
<td>Close Threshold</td>
|
|
<td>Idle volume level</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Open Threshold</td>
|
|
<td>Active volume level</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Hold Time</td>
|
|
<td>How long to hold before switching back to idle</td>
|
|
</tr>
|
|
</table>
|
|
<br>
|
|
PNGTube will consider your audio sources 'active'
|
|
if there is any sound coming through at all.
|
|
The volume meters in OBS won't show sounds quieter than -60db,
|
|
so even if you think it's silent,
|
|
most audio devices have some static noise in them.
|
|
The "Adjust Sensitivity" button on the left will open the filter panel,
|
|
and add a noise gate if you don't have one already.
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
<div id="status">Loading...</div>
|
|
<button type="submit">Save & Download</button>
|
|
</form>
|
|
|
|
<datalist id="element_references"></datalist>
|
|
|
|
<datalist id="obs_sources"></datalist>
|
|
|
|
<span id="templates" hidden>
|
|
<li class="asset">
|
|
<form name="assets">
|
|
<button type="button" onclick="this.parentElement.parentElement.remove()">remove</button>
|
|
<input type="search" name="id" required pattern="[\w-]+" list="element_references">
|
|
<span id="filename"></span>
|
|
<input type="hidden" name="url">
|
|
</form>
|
|
</li>
|
|
<li class="source">
|
|
<button type="button" onclick="this.parentElement.remove()">remove</button>
|
|
<input type="search" name="sources" list="obs_sources" required pattern=".+">
|
|
<br>
|
|
<button type="button" class="sensitivity">Adjust Sensitivity</button>
|
|
</li>
|
|
</span>
|
|
|
|
<style>
|
|
* {
|
|
font-family: Inter, Roobert, Helvetica Neue, Helvetica, Arial, sans-serif;
|
|
}
|
|
form[name=new_instance]:not([hidden]),
|
|
form[name=instance_config]:not([hidden]){
|
|
display: inline;
|
|
}
|
|
td {
|
|
border: 1px solid lightgray;
|
|
vertical-align: top;
|
|
white-space: nowrap;
|
|
width: fit-content;
|
|
}
|
|
#instructions {
|
|
white-space: normal;
|
|
width: 20em;
|
|
}
|
|
input:invalid:required {
|
|
background-color: lightpink;
|
|
}
|
|
button#add_source,
|
|
button.sensitivity {
|
|
width: 100%;
|
|
}
|
|
</style>
|
|
<script type="module" src="index.js"></script>
|