Improve UI organization and spacing
This commit is contained in:
TwistedUmbrellaX
parent
de61329140
commit
f670e76744
@ -9,6 +9,19 @@
|
|||||||
<div id="TemplateConfigPage" data-role="page" class="page type-interior pluginConfigurationPage"
|
<div id="TemplateConfigPage" data-role="page" class="page type-interior pluginConfigurationPage"
|
||||||
data-require="emby-input,emby-button,emby-select,emby-checkbox">
|
data-require="emby-input,emby-button,emby-select,emby-checkbox">
|
||||||
<div data-role="content">
|
<div data-role="content">
|
||||||
|
<style>
|
||||||
|
summary {
|
||||||
|
cursor: pointer;
|
||||||
|
padding: 10px;
|
||||||
|
width: inherit;
|
||||||
|
margin: auto;
|
||||||
|
border: none;
|
||||||
|
text-align: center;
|
||||||
|
outline: none;
|
||||||
|
font-size: 1.0em;
|
||||||
|
outline: 2px solid rgba(155, 155, 155, 0.5);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
<div class="content-primary">
|
<div class="content-primary">
|
||||||
<form id="FingerprintConfigForm">
|
<form id="FingerprintConfigForm">
|
||||||
<fieldset class="verticalSection-extrabottompadding">
|
<fieldset class="verticalSection-extrabottompadding">
|
||||||
@ -61,6 +74,7 @@
|
|||||||
<details id="edl">
|
<details id="edl">
|
||||||
<summary>EDL file generation</summary>
|
<summary>EDL file generation</summary>
|
||||||
|
|
||||||
|
<br />
|
||||||
<div class="selectContainer">
|
<div class="selectContainer">
|
||||||
<label class="selectLabel" for="EdlAction">EDL Action</label>
|
<label class="selectLabel" for="EdlAction">EDL Action</label>
|
||||||
<select is="emby-select" id="EdlAction" class="emby-select-withcolor emby-select">
|
<select is="emby-select" id="EdlAction" class="emby-select-withcolor emby-select">
|
||||||
@ -115,6 +129,7 @@
|
|||||||
<details id="intro_reqs">
|
<details id="intro_reqs">
|
||||||
<summary>Modify introduction requirements</summary>
|
<summary>Modify introduction requirements</summary>
|
||||||
|
|
||||||
|
<br />
|
||||||
<div class="inputContainer">
|
<div class="inputContainer">
|
||||||
<label class="inputLabel inputLabelUnfocused" for="AnalysisPercent">
|
<label class="inputLabel inputLabelUnfocused" for="AnalysisPercent">
|
||||||
Percent of audio to analyze
|
Percent of audio to analyze
|
||||||
@ -179,6 +194,7 @@
|
|||||||
<details id="silence">
|
<details id="silence">
|
||||||
<summary>Silence detection options</summary>
|
<summary>Silence detection options</summary>
|
||||||
|
|
||||||
|
<br />
|
||||||
<div class="inputContainer">
|
<div class="inputContainer">
|
||||||
<label class="inputLabel inputLabelUnfocused" for="SilenceDetectionMaximumNoise">
|
<label class="inputLabel inputLabelUnfocused" for="SilenceDetectionMaximumNoise">
|
||||||
Noise tolerance
|
Noise tolerance
|
||||||
@ -287,6 +303,7 @@
|
|||||||
<details>
|
<details>
|
||||||
<summary>User Interface Customization</summary>
|
<summary>User Interface Customization</summary>
|
||||||
|
|
||||||
|
<br />
|
||||||
<div class="inputContainer">
|
<div class="inputContainer">
|
||||||
<label class="inputLabel" for="SkipButtonIntroText">
|
<label class="inputLabel" for="SkipButtonIntroText">
|
||||||
Skip intro button text
|
Skip intro button text
|
||||||
@ -325,116 +342,121 @@
|
|||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
|
<br />
|
||||||
|
|
||||||
|
<fieldset class="verticalSection-extrabottompadding">
|
||||||
|
<legend>Advanced</legend>
|
||||||
|
|
||||||
|
<details id="support">
|
||||||
|
<summary>Support Bundle</summary>
|
||||||
|
|
||||||
|
<textarea id="supportBundle" rows="20" cols="75" readonly></textarea>
|
||||||
|
</details>
|
||||||
|
|
||||||
|
<details id="visualizer">
|
||||||
|
<summary>Fingerprint Editor</summary>
|
||||||
|
|
||||||
|
<br />
|
||||||
|
<h3 style="margin:0">Select episodes to manage</h3>
|
||||||
|
<br />
|
||||||
|
<select id="troubleshooterShow"></select>
|
||||||
|
<select id="troubleshooterSeason"></select>
|
||||||
|
<br />
|
||||||
|
|
||||||
|
<select id="troubleshooterEpisode1"></select>
|
||||||
|
<select id="troubleshooterEpisode2"></select>
|
||||||
|
<br />
|
||||||
|
<br />
|
||||||
|
|
||||||
|
<div id="timestampEditor" style="display:none">
|
||||||
|
<h3 style="margin:0">Introduction timestamp editor</h3>
|
||||||
|
<p style="margin:0">All times are in seconds.</p>
|
||||||
|
|
||||||
|
<p id="editLeftEpisodeTitle" style="margin-bottom:0"></p>
|
||||||
|
<input style="width:4em" type="number" min="0" id="editLeftEpisodeStart"> to
|
||||||
|
<input style="width:4em;margin-bottom:10px" type="number" min="0" id="editLeftEpisodeEnd">
|
||||||
|
|
||||||
|
<p id="editRightEpisodeTitle" style="margin-top:0;margin-bottom:0"></p>
|
||||||
|
<input style="width:4em" type="number" min="0" id="editRightEpisodeStart"> to
|
||||||
|
<input style="width:4em;margin-bottom:10px" type="number" min="0" id="editRightEpisodeEnd">
|
||||||
|
<br />
|
||||||
|
|
||||||
|
<button id="btnUpdateTimestamps" type="button">
|
||||||
|
Update timestamps
|
||||||
|
</button>
|
||||||
|
<br />
|
||||||
|
<br />
|
||||||
|
|
||||||
|
<button id="btnEraseSeasonTimestamps" type="button">
|
||||||
|
Erase all timestamps for this season
|
||||||
|
</button>
|
||||||
|
<hr />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button id="btnEraseIntroTimestamps">
|
||||||
|
Erase all introduction timestamps (globally)
|
||||||
|
</button>
|
||||||
|
<br />
|
||||||
|
|
||||||
|
<button id="btnEraseCreditTimestamps">
|
||||||
|
Erase all end credits timestamps (globally)
|
||||||
|
</button>
|
||||||
|
<br />
|
||||||
|
<br />
|
||||||
|
|
||||||
|
<h3>Fingerprint Visualizer</h3>
|
||||||
|
<p>
|
||||||
|
Interactively compare the audio fingerprints of two episodes. <br />
|
||||||
|
The blue and red bar to the right of the fingerprint diff turns blue
|
||||||
|
when the corresponding fingerprint points are at least 80% similar.
|
||||||
|
</p>
|
||||||
|
<table>
|
||||||
|
<thead>
|
||||||
|
<td style="min-width: 100px; font-weight: bold">Key</td>
|
||||||
|
<td style="font-weight: bold">Function</td>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td>Up arrow</td>
|
||||||
|
<td>
|
||||||
|
Shift the left episode up by 0.128 seconds.
|
||||||
|
Holding control will shift the episode by 10 seconds.
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Down arrow</td>
|
||||||
|
<td>
|
||||||
|
Shift the left episode down by 0.128 seconds.
|
||||||
|
Holding control will shift the episode by 10 seconds.
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Right arrow</td>
|
||||||
|
<td>Advance to the next pair of episodes.</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Left arrow</td>
|
||||||
|
<td>Go back to the previous pair of episodes.</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
<br />
|
||||||
|
|
||||||
|
<span>Shift amount:</span>
|
||||||
|
<input type="number" min="-3000" max="3000" value="0" id="offset">
|
||||||
|
<br />
|
||||||
|
<span id="suggestedShifts">Suggested shifts:</span>
|
||||||
|
<br />
|
||||||
|
<br />
|
||||||
|
|
||||||
|
<canvas id="troubleshooter"></canvas>
|
||||||
|
<span id="timestampContainer">
|
||||||
|
<span id="timestamps"></span> <br />
|
||||||
|
<span id="intros"></span>
|
||||||
|
</span>
|
||||||
|
</details>
|
||||||
|
</fieldset>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<details id="support">
|
|
||||||
<summary>Support Bundle</summary>
|
|
||||||
|
|
||||||
<textarea id="supportBundle" rows="20" cols="75" readonly></textarea>
|
|
||||||
</details>
|
|
||||||
<br />
|
|
||||||
|
|
||||||
<details id="visualizer">
|
|
||||||
<summary>Advanced</summary>
|
|
||||||
|
|
||||||
<h3 style="margin:0">Select episodes to manage</h3>
|
|
||||||
<select id="troubleshooterShow"></select>
|
|
||||||
<select id="troubleshooterSeason"></select>
|
|
||||||
<br />
|
|
||||||
|
|
||||||
<select id="troubleshooterEpisode1"></select>
|
|
||||||
<select id="troubleshooterEpisode2"></select>
|
|
||||||
<br />
|
|
||||||
<br />
|
|
||||||
|
|
||||||
<div id="timestampEditor" style="display:none">
|
|
||||||
<h3 style="margin:0">Introduction timestamp editor</h3>
|
|
||||||
<p style="margin:0">All times are in seconds.</p>
|
|
||||||
|
|
||||||
<p id="editLeftEpisodeTitle" style="margin-bottom:0"></p>
|
|
||||||
<input style="width:4em" type="number" min="0" id="editLeftEpisodeStart"> to
|
|
||||||
<input style="width:4em;margin-bottom:10px" type="number" min="0" id="editLeftEpisodeEnd">
|
|
||||||
|
|
||||||
<p id="editRightEpisodeTitle" style="margin-top:0;margin-bottom:0"></p>
|
|
||||||
<input style="width:4em" type="number" min="0" id="editRightEpisodeStart"> to
|
|
||||||
<input style="width:4em;margin-bottom:10px" type="number" min="0" id="editRightEpisodeEnd">
|
|
||||||
<br />
|
|
||||||
|
|
||||||
<button id="btnUpdateTimestamps" type="button">
|
|
||||||
Update timestamps
|
|
||||||
</button>
|
|
||||||
<br />
|
|
||||||
<br />
|
|
||||||
|
|
||||||
<button id="btnEraseSeasonTimestamps" type="button">
|
|
||||||
Erase all timestamps for this season
|
|
||||||
</button>
|
|
||||||
<hr />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<button id="btnEraseIntroTimestamps">
|
|
||||||
Erase all introduction timestamps (globally)
|
|
||||||
</button>
|
|
||||||
<br />
|
|
||||||
|
|
||||||
<button id="btnEraseCreditTimestamps">
|
|
||||||
Erase all end credits timestamps (globally)
|
|
||||||
</button>
|
|
||||||
<br />
|
|
||||||
<br />
|
|
||||||
|
|
||||||
<h3>Fingerprint Visualizer</h3>
|
|
||||||
<p>
|
|
||||||
Interactively compare the audio fingerprints of two episodes. <br />
|
|
||||||
The blue and red bar to the right of the fingerprint diff turns blue
|
|
||||||
when the corresponding fingerprint points are at least 80% similar.
|
|
||||||
</p>
|
|
||||||
<table>
|
|
||||||
<thead>
|
|
||||||
<td style="min-width: 100px; font-weight: bold">Key</td>
|
|
||||||
<td style="font-weight: bold">Function</td>
|
|
||||||
</thead>
|
|
||||||
<tbody>
|
|
||||||
<tr>
|
|
||||||
<td>Up arrow</td>
|
|
||||||
<td>
|
|
||||||
Shift the left episode up by 0.128 seconds.
|
|
||||||
Holding control will shift the episode by 10 seconds.
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>Down arrow</td>
|
|
||||||
<td>
|
|
||||||
Shift the left episode down by 0.128 seconds.
|
|
||||||
Holding control will shift the episode by 10 seconds.
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>Right arrow</td>
|
|
||||||
<td>Advance to the next pair of episodes.</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>Left arrow</td>
|
|
||||||
<td>Go back to the previous pair of episodes.</td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
<br />
|
|
||||||
|
|
||||||
<span>Shift amount:</span>
|
|
||||||
<input type="number" min="-3000" max="3000" value="0" id="offset">
|
|
||||||
<br />
|
|
||||||
<span id="suggestedShifts">Suggested shifts:</span>
|
|
||||||
<br />
|
|
||||||
<br />
|
|
||||||
|
|
||||||
<canvas id="troubleshooter"></canvas>
|
|
||||||
<span id="timestampContainer">
|
|
||||||
<span id="timestamps"></span> <br />
|
|
||||||
<span id="intros"></span>
|
|
||||||
</span>
|
|
||||||
</details>
|
|
||||||
<br />
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<script src="configurationpage?name=visualizer.js"></script>
|
<script src="configurationpage?name=visualizer.js"></script>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user