mirror of
https://github.com/FeloDeck/Feishin-Plugin.git
synced 2026-11-01 17:33:29 +01:00
147 lines
6.6 KiB
HTML
147 lines
6.6 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
|
||
<head>
|
||
<meta charset="utf-8" />
|
||
<meta name="viewport" content="width=device-width,initial-scale=1" />
|
||
<title>Feishin</title>
|
||
<!-- sdpi-components v4 (https://sdpi-components.dev), bundled so the settings also work offline. -->
|
||
<script src="sdpi-components.js"></script>
|
||
<link rel="stylesheet" href="property-inspector.css" />
|
||
</head>
|
||
|
||
<body>
|
||
<!--
|
||
Connection status, filled in by property-inspector.js from the plugin's messages. "Change" opens the connection
|
||
settings right below it. They also open by themselves while Feishin can't be reached.
|
||
-->
|
||
<section id="status" class="status" data-status="checking" aria-live="polite">
|
||
<span class="status-dot" aria-hidden="true"></span>
|
||
<div class="status-text">
|
||
<span id="status-title" class="status-title" data-i18n="checking">Checking connection to Feishin…</span>
|
||
<span id="status-hint" class="status-hint"></span>
|
||
</div>
|
||
<button id="status-action" class="status-action" type="button" aria-expanded="false">Change</button>
|
||
</section>
|
||
|
||
<section id="connection" class="connection" hidden>
|
||
<div id="guide">
|
||
<div class="box-title" data-i18n="guide.title">How to connect Feishin</div>
|
||
<ol class="steps">
|
||
<li data-i18n-html="guide.step1">Open <b>Feishin</b> on this computer and go to <b>Settings → Window → Remote</b>.</li>
|
||
<li data-i18n-html="guide.step2">Turn on <b>Enable remote control server</b>.</li>
|
||
<li data-i18n-html="guide.step3">Set the username to <code>feishin</code> and the password to <code>streamdeck</code>. Already using other credentials? Enter them below instead.</li>
|
||
<li data-i18n-html="guide.step4">Keep the port at <code>4333</code>, or enter your port below.</li>
|
||
</ol>
|
||
<p class="note" data-i18n="guide.done">The status at the top turns green as soon as the connection works.</p>
|
||
</div>
|
||
<p class="note" data-i18n="connection.shared">These settings apply to all Feishin actions. Leave a field empty to use the default.</p>
|
||
<sdpi-item label="Host" data-i18n-label="connection.host">
|
||
<sdpi-textfield setting="host" global placeholder="localhost"></sdpi-textfield>
|
||
</sdpi-item>
|
||
<sdpi-item label="Port" data-i18n-label="connection.port">
|
||
<sdpi-textfield setting="port" global placeholder="4333" pattern="\d*" maxlength="5"></sdpi-textfield>
|
||
</sdpi-item>
|
||
<sdpi-item label="Username" data-i18n-label="connection.username">
|
||
<sdpi-textfield setting="username" global placeholder="feishin"></sdpi-textfield>
|
||
</sdpi-item>
|
||
<sdpi-item label="Password" data-i18n-label="connection.password">
|
||
<sdpi-password setting="password" global placeholder="streamdeck"></sdpi-password>
|
||
</sdpi-item>
|
||
<sdpi-item>
|
||
<sdpi-button id="reconnect" data-i18n="connection.reconnect">Reconnect</sdpi-button>
|
||
</sdpi-item>
|
||
</section>
|
||
|
||
<!--
|
||
Action specific settings, shown for the action UUIDs in data-actions. They are part of the page from the start (and
|
||
only hidden) because sdpi-components reads the saved settings once, when the property inspector connects. A section
|
||
without a visible part is hidden too.
|
||
-->
|
||
<div id="action-settings">
|
||
<div class="action-section" hidden data-actions="de.felitendo.feishin.volumeup de.felitendo.feishin.volumedown de.felitendo.feishin.mute de.felitendo.feishin.volumedial">
|
||
<p id="volume-unknown" class="hint" hidden data-i18n="volume.unknown">Feishin hasn't reported its volume yet – it only does that when the volume changes. Change the volume in Feishin once and these controls will work (only needed once).</p>
|
||
</div>
|
||
|
||
<!-- What a press or a turn does. -->
|
||
<details class="section" open>
|
||
<summary class="heading" data-i18n="section.controls">Controls</summary>
|
||
|
||
<div class="action-section" hidden data-actions="de.felitendo.feishin.volumeup de.felitendo.feishin.volumedown">
|
||
<sdpi-item label="Step" data-i18n-label="settings.volumeStep">
|
||
<select class="choice" data-setting="step" data-default="5" hidden>
|
||
<option value="1">1 %</option>
|
||
<option value="2">2 %</option>
|
||
<option value="5">5 %</option>
|
||
<option value="10">10 %</option>
|
||
<option value="20">20 %</option>
|
||
</select>
|
||
</sdpi-item>
|
||
</div>
|
||
|
||
<div class="action-section" hidden data-actions="de.felitendo.feishin.forward de.felitendo.feishin.rewind">
|
||
<sdpi-item label="Jump by" data-i18n-label="settings.seekStep">
|
||
<select class="choice" data-setting="seconds" data-default="10" hidden>
|
||
<option value="5">5 s</option>
|
||
<option value="10">10 s</option>
|
||
<option value="15">15 s</option>
|
||
<option value="30">30 s</option>
|
||
<option value="60">60 s</option>
|
||
</select>
|
||
</sdpi-item>
|
||
</div>
|
||
|
||
<div class="action-section" hidden data-actions="de.felitendo.feishin.volumedial">
|
||
<sdpi-item label="Step per tick" data-i18n-label="settings.dialStep">
|
||
<select class="choice" data-setting="tickStep" data-default="2" hidden>
|
||
<option value="1">1 %</option>
|
||
<option value="2">2 %</option>
|
||
<option value="5">5 %</option>
|
||
<option value="10">10 %</option>
|
||
</select>
|
||
</sdpi-item>
|
||
</div>
|
||
|
||
<div class="action-section" hidden data-actions="de.felitendo.feishin.seekdial">
|
||
<sdpi-item label="Seek per tick" data-i18n-label="settings.dialSeek">
|
||
<select class="choice" data-setting="tickSeconds" data-default="5" hidden>
|
||
<option value="1">1 s</option>
|
||
<option value="2">2 s</option>
|
||
<option value="5">5 s</option>
|
||
<option value="10">10 s</option>
|
||
<option value="15">15 s</option>
|
||
<option value="30">30 s</option>
|
||
</select>
|
||
</sdpi-item>
|
||
</div>
|
||
</details>
|
||
|
||
<!-- How the key looks. The tiles show the key with each choice. -->
|
||
<details class="section" open>
|
||
<summary class="heading" data-i18n="section.look">On the key</summary>
|
||
|
||
<div class="action-section" hidden data-actions="de.felitendo.feishin.volumeup de.felitendo.feishin.volumedown de.felitendo.feishin.mute">
|
||
<sdpi-item label="Volume" data-i18n-label="settings.volume">
|
||
<div id="volume-tiles" class="tiles" role="radiogroup"></div>
|
||
</sdpi-item>
|
||
</div>
|
||
|
||
<div class="action-section" hidden data-actions="de.felitendo.feishin.playpause">
|
||
<sdpi-item label="Picture" data-i18n-label="settings.picture">
|
||
<div id="picture" class="segmented" role="radiogroup"></div>
|
||
</sdpi-item>
|
||
<sdpi-item label="Time" data-i18n-label="settings.time">
|
||
<div id="time-tiles" class="tiles" role="radiogroup"></div>
|
||
</sdpi-item>
|
||
<sdpi-item id="time-shows-row" label="Shows" data-i18n-label="settings.timeShows">
|
||
<div id="time-shows" class="segmented" role="radiogroup"></div>
|
||
</sdpi-item>
|
||
</div>
|
||
</details>
|
||
</div>
|
||
|
||
<script src="property-inspector.js"></script>
|
||
</body>
|
||
|
||
</html>
|