mirror of
https://github.com/SoPat712/videospeed.git
synced 2026-04-21 04:42:35 -04:00
951 lines
41 KiB
HTML
951 lines
41 KiB
HTML
<!doctype html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<title>Speeder Settings</title>
|
|
<link rel="stylesheet" href="options.css" />
|
|
<script src="shared/controller-utils.js"></script>
|
|
<script src="shared/key-bindings.js"></script>
|
|
<script src="shared/popup-controls.js"></script>
|
|
<script src="ui-icons.js"></script>
|
|
<script src="lucide-client.js"></script>
|
|
<script src="options.js"></script>
|
|
<script src="shared/import-export.js"></script>
|
|
<script src="importExport.js"></script>
|
|
</head>
|
|
<body>
|
|
<div class="page-shell">
|
|
<header class="page-header">
|
|
<div class="title-row">
|
|
<div class="title-block">
|
|
<h1>Speeder settings</h1>
|
|
<p class="page-subtitle">Shortcuts, defaults, and site rules.</p>
|
|
</div>
|
|
<div class="version">v<span id="app-version"></span></div>
|
|
</div>
|
|
<div class="support-cta" role="region" aria-label="Support Speeder">
|
|
<p class="support-cta-text">
|
|
If Speeder has been useful, please consider supporting its development!
|
|
</p>
|
|
<div class="support-cta-links">
|
|
<a
|
|
class="support-cta-link support-cta-link--kofi"
|
|
href="https://ko-fi.com/joshpatra"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
aria-label="Support on Ko-fi (opens in new tab)"
|
|
>
|
|
<img
|
|
class="support-cta-kofi-img"
|
|
src="images/kofi_symbol.svg"
|
|
width="241"
|
|
height="194"
|
|
alt=""
|
|
decoding="async"
|
|
/>
|
|
</a>
|
|
<a
|
|
class="support-cta-link support-cta-link--github"
|
|
href="https://github.com/sponsors/SoPat712"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
aria-label="Sponsor on GitHub (opens in new tab)"
|
|
>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
viewBox="0 0 24 24"
|
|
width="24"
|
|
height="24"
|
|
aria-hidden="true"
|
|
focusable="false"
|
|
>
|
|
<path
|
|
fill="currentColor"
|
|
d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"
|
|
/>
|
|
</svg>
|
|
</a>
|
|
<a
|
|
class="support-cta-link support-cta-link--bmc"
|
|
href="https://buymeacoffee.com/treeman183"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
aria-label="Support on Buy Me a Coffee (opens in new tab)"
|
|
>
|
|
<svg
|
|
role="img"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
viewBox="0 0 24 24"
|
|
width="24"
|
|
height="24"
|
|
aria-hidden="true"
|
|
focusable="false"
|
|
>
|
|
<path
|
|
fill="currentColor"
|
|
d="M20.216 6.415l-.132-.666c-.119-.598-.388-1.163-1.001-1.379-.197-.069-.42-.098-.57-.241-.152-.143-.196-.366-.231-.572-.065-.378-.125-.756-.192-1.133-.057-.325-.102-.69-.25-.987-.195-.4-.597-.634-.996-.788a5.723 5.723 0 00-.626-.194c-1-.263-2.05-.36-3.077-.416a25.834 25.834 0 00-3.7.062c-.915.083-1.88.184-2.75.5-.318.116-.646.256-.888.501-.297.302-.393.77-.177 1.146.154.267.415.456.692.58.36.162.737.284 1.123.366 1.075.238 2.189.331 3.287.37 1.218.05 2.437.01 3.65-.118.299-.033.598-.073.896-.119.352-.054.578-.513.474-.834-.124-.383-.457-.531-.834-.473-.466.074-.96.108-1.382.146-1.177.08-2.358.082-3.536.006a22.228 22.228 0 01-1.157-.107c-.086-.01-.18-.025-.258-.036-.243-.036-.484-.08-.724-.13-.111-.027-.111-.185 0-.212h.005c.277-.06.557-.108.838-.147h.002c.131-.009.263-.032.394-.048a25.076 25.076 0 013.426-.12c.674.019 1.347.067 2.017.144l.228.031c.267.04.533.088.798.145.392.085.895.113 1.07.542.055.137.08.288.111.431l.319 1.484a.237.237 0 01-.199.284h-.003c-.037.006-.075.01-.112.015a36.704 36.704 0 01-4.743.295 37.059 37.059 0 01-4.699-.304c-.14-.017-.293-.042-.417-.06-.326-.048-.649-.108-.973-.161-.393-.065-.768-.032-1.123.161-.29.16-.527.404-.675.701-.154.316-.199.66-.267 1-.069.34-.176.707-.135 1.056.087.753.613 1.365 1.37 1.502a39.69 39.69 0 0011.343.376.483.483 0 01.535.53l-.071.697-1.018 9.907c-.041.41-.047.832-.125 1.237-.122.637-.553 1.028-1.182 1.171-.577.131-1.165.2-1.756.205-.656.004-1.31-.025-1.966-.022-.699.004-1.556-.06-2.095-.58-.475-.458-.54-1.174-.605-1.793l-.731-7.013-.322-3.094c-.037-.351-.286-.695-.678-.678-.336.015-.718.3-.678.679l.228 2.185.949 9.112c.147 1.344 1.174 2.068 2.446 2.272.742.12 1.503.144 2.257.156.966.016 1.942.053 2.892-.122 1.408-.258 2.465-1.198 2.616-2.657.34-3.332.683-6.663 1.024-9.995l.215-2.087a.484.484 0 01.39-.426c.402-.078.787-.212 1.074-.518.455-.488.546-1.124.385-1.766zm-1.478.772c-.145.137-.363.201-.578.233-2.416.359-4.866.54-7.308.46-1.748-.06-3.477-.254-5.207-.498-.17-.024-.353-.055-.47-.18-.22-.236-.111-.71-.054-.995.052-.26.152-.609.463-.646.484-.057 1.046.148 1.526.22.577.088 1.156.159 1.737.212 2.48.226 5.002.19 7.472-.14.45-.06.899-.13 1.345-.21.399-.072.84-.206 1.08.206.166.281.188.657.162.974a.544.544 0 01-.169.364zm-6.159 3.9c-.862.37-1.84.788-3.109.788a5.884 5.884 0 01-1.569-.217l.877 9.004c.065.78.717 1.38 1.5 1.38 0 0 1.243.065 1.658.065.447 0 1.786-.065 1.786-.065.783 0 1.434-.6 1.499-1.38l.94-9.95a3.996 3.996 0 00-1.322-.238c-.826 0-1.491.284-2.26.613z"
|
|
/>
|
|
</svg>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<main class="settings-stack">
|
|
<section id="customs" class="settings-card">
|
|
<div class="section-heading">
|
|
<h3>Shortcuts</h3>
|
|
<p class="section-intro">
|
|
Backspace clears a key. Escape disables optional shortcuts. If a site
|
|
steals a shortcut, use a site rule with Override shortcuts (and
|
|
per-key blocking) for that URL.
|
|
</p>
|
|
</div>
|
|
<div class="shortcuts-grid">
|
|
<div class="shortcut-row" id="display" data-action="display">
|
|
<div class="shortcut-label">Show/hide controller</div>
|
|
<input
|
|
class="customKey"
|
|
type="text"
|
|
value=""
|
|
placeholder="press a key"
|
|
/>
|
|
<input
|
|
class="customValue"
|
|
type="text"
|
|
placeholder="value"
|
|
value="N/A"
|
|
disabled
|
|
/>
|
|
</div>
|
|
<div class="shortcut-row" id="move" data-action="move">
|
|
<div class="shortcut-label">Move controller</div>
|
|
<input
|
|
class="customKey"
|
|
type="text"
|
|
value=""
|
|
placeholder="press a key"
|
|
/>
|
|
<input
|
|
class="customValue"
|
|
type="text"
|
|
placeholder="value"
|
|
value="N/A"
|
|
disabled
|
|
/>
|
|
</div>
|
|
<div class="shortcut-row" id="slower" data-action="slower">
|
|
<div class="shortcut-label">
|
|
Decrease speed
|
|
<em>Required: Speeder needs a key for this action.</em>
|
|
</div>
|
|
<input
|
|
class="customKey"
|
|
type="text"
|
|
value=""
|
|
placeholder="press a key"
|
|
/>
|
|
<input
|
|
class="customValue"
|
|
type="text"
|
|
placeholder="value (0.10)"
|
|
/>
|
|
</div>
|
|
<div class="shortcut-row" id="faster" data-action="faster">
|
|
<div class="shortcut-label">
|
|
Increase speed
|
|
<em>Required: Speeder needs a key for this action.</em>
|
|
</div>
|
|
<input
|
|
class="customKey"
|
|
type="text"
|
|
value=""
|
|
placeholder="press a key"
|
|
/>
|
|
<input
|
|
class="customValue"
|
|
type="text"
|
|
placeholder="value (0.10)"
|
|
/>
|
|
</div>
|
|
<div class="shortcut-row" id="rewind" data-action="rewind">
|
|
<div class="shortcut-label">Rewind</div>
|
|
<input
|
|
class="customKey"
|
|
type="text"
|
|
value=""
|
|
placeholder="press a key"
|
|
/>
|
|
<input
|
|
class="customValue"
|
|
type="text"
|
|
placeholder="value (10)"
|
|
/>
|
|
</div>
|
|
<div class="shortcut-row" id="advance" data-action="advance">
|
|
<div class="shortcut-label">Advance</div>
|
|
<input
|
|
class="customKey"
|
|
type="text"
|
|
value=""
|
|
placeholder="press a key"
|
|
/>
|
|
<input
|
|
class="customValue"
|
|
type="text"
|
|
placeholder="value (10)"
|
|
/>
|
|
</div>
|
|
<div class="shortcut-row" id="reset" data-action="reset">
|
|
<div class="shortcut-label">Reset speed</div>
|
|
<input
|
|
class="customKey"
|
|
type="text"
|
|
value=""
|
|
placeholder="press a key"
|
|
/>
|
|
<input
|
|
class="customValue"
|
|
type="text"
|
|
placeholder="value"
|
|
value="N/A"
|
|
disabled
|
|
/>
|
|
</div>
|
|
<div class="shortcut-row" id="fast" data-action="fast">
|
|
<div class="shortcut-label">Preferred speed</div>
|
|
<input
|
|
class="customKey"
|
|
type="text"
|
|
value=""
|
|
placeholder="press a key"
|
|
/>
|
|
<input
|
|
class="customValue"
|
|
type="text"
|
|
placeholder="value (1.80)"
|
|
/>
|
|
</div>
|
|
<div
|
|
class="shortcut-row"
|
|
id="toggleSubtitleNudge"
|
|
data-action="toggleSubtitleNudge"
|
|
>
|
|
<div class="shortcut-label">Toggle subtitle nudge</div>
|
|
<input
|
|
class="customKey"
|
|
type="text"
|
|
value=""
|
|
placeholder="press a key"
|
|
/>
|
|
<input
|
|
class="customValue"
|
|
type="text"
|
|
placeholder="value"
|
|
value="N/A"
|
|
disabled
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<select id="addShortcutSelector">
|
|
<option value="">Add shortcut…</option>
|
|
</select>
|
|
</section>
|
|
|
|
<section id="generalSettings" class="settings-card">
|
|
<div class="section-heading">
|
|
<h3>Defaults</h3>
|
|
<p class="section-intro">Used unless a site rule overrides it.</p>
|
|
</div>
|
|
|
|
<h4 class="defaults-sub-heading">General</h4>
|
|
|
|
<div class="row row-checkbox">
|
|
<label for="enabled"
|
|
>Enable<br />
|
|
<em
|
|
>On: site rules can block sites (blacklist). Off: only matched rules keep Speeder on (whitelist).</em
|
|
>
|
|
</label>
|
|
<input id="enabled" type="checkbox" />
|
|
</div>
|
|
<div class="row row-checkbox">
|
|
<label for="audioBoolean"
|
|
>Work on audio<br />
|
|
<em
|
|
>Also controls plain HTML5 audio (not just video). Turn off if
|
|
you only want Speeder on video players.</em
|
|
>
|
|
</label>
|
|
<input id="audioBoolean" type="checkbox" />
|
|
</div>
|
|
|
|
<div class="defaults-divider"></div>
|
|
<h4 class="defaults-sub-heading">Playback</h4>
|
|
|
|
<div class="row row-checkbox">
|
|
<label for="rememberSpeed"
|
|
>Remember playback speed<br />
|
|
<em
|
|
>Stores speed per source so revisiting the same media can restore
|
|
it. Separate from “Force last saved speed,” which
|
|
fights players that reset rate.</em
|
|
>
|
|
</label>
|
|
<input id="rememberSpeed" type="checkbox" />
|
|
</div>
|
|
<div class="row row-checkbox">
|
|
<label for="forceLastSavedSpeed"
|
|
>Force last saved speed<br />
|
|
<em
|
|
>Useful when a video player tries to override the speed you set
|
|
in Speeder.</em
|
|
>
|
|
</label>
|
|
<input id="forceLastSavedSpeed" type="checkbox" />
|
|
</div>
|
|
|
|
<div class="defaults-divider"></div>
|
|
<h4 class="defaults-sub-heading">Controller</h4>
|
|
|
|
<div class="row row-checkbox">
|
|
<label for="startHidden"
|
|
>Hide controller by default<br />
|
|
<em
|
|
>Starts with the overlay hidden; use shortcuts (show/hide,
|
|
move) or site behavior to reveal it.</em
|
|
>
|
|
</label>
|
|
<input id="startHidden" type="checkbox" />
|
|
</div>
|
|
<div class="row">
|
|
<label for="controllerLocation"
|
|
>Default controller location<br />
|
|
<em
|
|
>Corner or edge anchor for the hover bar. Site rules can override
|
|
this for specific URLs.</em
|
|
>
|
|
</label>
|
|
<select id="controllerLocation">
|
|
<option value="top-left">Top left</option>
|
|
<option value="top-center">Top center</option>
|
|
<option value="top-right">Top right</option>
|
|
<option value="middle-right">Middle right</option>
|
|
<option value="bottom-right">Bottom right</option>
|
|
<option value="bottom-center">Bottom center</option>
|
|
<option value="bottom-left">Bottom left</option>
|
|
<option value="middle-left">Middle left</option>
|
|
</select>
|
|
</div>
|
|
<div class="row">
|
|
<label for="controllerOpacity"
|
|
>Controller opacity<br />
|
|
<em
|
|
>0–1 (decimals). Lower is more transparent. Applies to the
|
|
in-page controller only.</em
|
|
>
|
|
</label>
|
|
<input id="controllerOpacity" type="text" value="" />
|
|
</div>
|
|
<div class="row row-controller-margin">
|
|
<label for="controllerMarginTop"
|
|
>Controller margin (px)<br />
|
|
<em
|
|
>Shifts the whole control from its preset position (CSS
|
|
margins). Top and bottom. 0–200.</em
|
|
>
|
|
</label>
|
|
<div class="controller-margin-inputs" aria-label="Controller margin in pixels">
|
|
<div class="margin-pad-cell">
|
|
<span class="margin-pad-mini">Top</span>
|
|
<input id="controllerMarginTop" type="text" inputmode="numeric" placeholder="0" />
|
|
</div>
|
|
<div class="margin-pad-cell">
|
|
<span class="margin-pad-mini">Bottom</span>
|
|
<input id="controllerMarginBottom" type="text" inputmode="numeric" placeholder="0" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row row-checkbox">
|
|
<label for="hideWithControls"
|
|
>Hide with controls<br />
|
|
<em
|
|
>Fade the controller in and out with the video interface:
|
|
perfect sync on YouTube, idle-based elsewhere.</em
|
|
>
|
|
</label>
|
|
<input id="hideWithControls" type="checkbox" />
|
|
</div>
|
|
<div class="row">
|
|
<label for="hideWithControlsTimer"
|
|
>Auto-hide timer (seconds)<br />
|
|
<em
|
|
>Seconds of inactivity before hiding: 0.1–15 for
|
|
non-YouTube sites.</em
|
|
>
|
|
</label>
|
|
<input id="hideWithControlsTimer" type="text" placeholder="2" />
|
|
</div>
|
|
<div class="defaults-divider"></div>
|
|
<h4 class="defaults-sub-heading">Subtitle sync</h4>
|
|
|
|
<div class="row row-checkbox">
|
|
<label for="enableSubtitleNudge"
|
|
>Enable subtitle nudge<br /><em
|
|
>Makes tiny playback changes to help keep subtitles aligned.</em
|
|
>
|
|
</label>
|
|
<input id="enableSubtitleNudge" type="checkbox" />
|
|
</div>
|
|
<div class="row">
|
|
<label for="subtitleNudgeInterval"
|
|
>Nudge interval (milliseconds)<br /><em
|
|
>How often to nudge: 10–1000. Smaller values are more
|
|
frequent. Default: 50.</em
|
|
>
|
|
</label>
|
|
<input
|
|
id="subtitleNudgeInterval"
|
|
type="text"
|
|
value=""
|
|
placeholder="50"
|
|
/>
|
|
</div>
|
|
</section>
|
|
|
|
<section
|
|
id="controlBarsGroup"
|
|
class="settings-card control-bars-group"
|
|
aria-labelledby="controlBarsGroupHeading"
|
|
>
|
|
<div class="section-heading section-heading-major">
|
|
<h2 id="controlBarsGroupHeading">Control bars</h2>
|
|
<p class="section-intro">
|
|
In-page hover bar, extension popup bar, and Lucide icons for
|
|
buttons.
|
|
</p>
|
|
</div>
|
|
<div class="control-bars-inner">
|
|
<section id="controlBarSettings" class="settings-card settings-card-nested">
|
|
<div class="section-heading">
|
|
<h3>Hover control bar</h3>
|
|
<p class="section-intro">
|
|
Drag blocks to reorder. Move between Active and Available to
|
|
show or hide buttons.
|
|
</p>
|
|
</div>
|
|
<div class="cb-editor">
|
|
<div class="cb-zone">
|
|
<div class="cb-zone-label">Active</div>
|
|
<div
|
|
id="controlBarActive"
|
|
class="cb-dropzone cb-active-zone"
|
|
></div>
|
|
</div>
|
|
<div class="cb-zone">
|
|
<div class="cb-zone-label">Available</div>
|
|
<div
|
|
id="controlBarAvailable"
|
|
class="cb-dropzone cb-available-zone"
|
|
></div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="popupControlBarSettings" class="settings-card settings-card-nested">
|
|
<div class="section-heading">
|
|
<h3>Popup control bar</h3>
|
|
<p class="section-intro">
|
|
Configure which buttons appear in the browser popup control bar.
|
|
</p>
|
|
</div>
|
|
<div class="row row-checkbox">
|
|
<label for="showPopupControlBar"
|
|
>Show popup control bar<br />
|
|
<em
|
|
>Shows buttons in the extension popup (toolbar icon). Can be
|
|
overridden per site in site rules.</em
|
|
>
|
|
</label>
|
|
<input id="showPopupControlBar" type="checkbox" />
|
|
</div>
|
|
<div class="row row-checkbox">
|
|
<label for="popupMatchHoverControls"
|
|
>Match hover controls<br />
|
|
<em
|
|
>When on, the popup copies the hover bar’s buttons and
|
|
order. When off, customize the popup layout below.</em
|
|
>
|
|
</label>
|
|
<input id="popupMatchHoverControls" type="checkbox" />
|
|
</div>
|
|
<div id="popupCbEditorWrap" class="cb-editor cb-editor-disabled">
|
|
<div class="cb-zone">
|
|
<div class="cb-zone-label">Active</div>
|
|
<div
|
|
id="popupControlBarActive"
|
|
class="cb-dropzone cb-active-zone"
|
|
></div>
|
|
</div>
|
|
<div class="cb-zone">
|
|
<div class="cb-zone-label">Available</div>
|
|
<div
|
|
id="popupControlBarAvailable"
|
|
class="cb-dropzone cb-available-zone"
|
|
></div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="lucideIconSettings" class="settings-card settings-card-nested">
|
|
<div class="section-heading">
|
|
<h3>Button icons (Lucide)</h3>
|
|
<p class="section-intro">
|
|
Search icons from the
|
|
<a
|
|
href="https://lucide.dev"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
>Lucide</a
|
|
>
|
|
set (fetched from jsDelivr). Custom icons are cached in local
|
|
storage and included when you export settings. Subtitle nudge
|
|
icons use two menu entries (enabled and disabled), not the bar
|
|
block id
|
|
<code>nudge</code>.
|
|
</p>
|
|
</div>
|
|
<div class="row row-lucide-pair">
|
|
<label for="lucideIconActionSelect">Controller action</label>
|
|
<select id="lucideIconActionSelect"></select>
|
|
</div>
|
|
<div class="row row-lucide-search-row">
|
|
<label for="lucideIconSearch" class="lucide-search-label"
|
|
>Search icons</label
|
|
>
|
|
<div class="lucide-search-field">
|
|
<span class="lucide-search-icon" aria-hidden="true">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="18"
|
|
height="18"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
>
|
|
<circle cx="11" cy="11" r="8" />
|
|
<path d="m21 21-4.3-4.3" />
|
|
</svg>
|
|
</span>
|
|
<input
|
|
type="search"
|
|
id="lucideIconSearch"
|
|
class="lucide-search-input"
|
|
placeholder="Search by name or tag (e.g. star, arrow, media)…"
|
|
autocomplete="off"
|
|
spellcheck="false"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div
|
|
id="lucideIconResults"
|
|
class="lucide-icon-results"
|
|
role="listbox"
|
|
aria-label="Matching Lucide icons"
|
|
></div>
|
|
<p id="lucideIconStatus" class="lucide-icon-status" aria-live="polite"></p>
|
|
<div class="lucide-icon-preview-row">
|
|
<div
|
|
id="lucideIconPreview"
|
|
class="lucide-icon-preview"
|
|
aria-live="polite"
|
|
></div>
|
|
<div class="lucide-icon-actions">
|
|
<button type="button" id="lucideIconApply" class="lucide-apply">
|
|
Apply to action
|
|
</button>
|
|
<button type="button" id="lucideIconClearAction" class="secondary">
|
|
Clear this action
|
|
</button>
|
|
<button type="button" id="lucideIconClearAll" class="secondary">
|
|
Clear all custom icons
|
|
</button>
|
|
<button type="button" id="lucideIconReloadTags" class="secondary">
|
|
Refresh icon list from network
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="siteRules" class="settings-card">
|
|
<div class="section-heading">
|
|
<h3>Site rules</h3>
|
|
<p class="section-intro">
|
|
Use plain domains or
|
|
<a
|
|
href="https://www.regexpal.com/"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
>Regex</a
|
|
>
|
|
patterns like <code>/(.+)youtube\.com(\/*)$/gi</code>. Turn on a
|
|
row only when you want that group to override the general defaults
|
|
above.
|
|
</p>
|
|
</div>
|
|
<div id="siteRulesContainer"></div>
|
|
<button id="addSiteRule" type="button">Add Site Rule</button>
|
|
</section>
|
|
|
|
<template id="siteRuleTemplate">
|
|
<div class="site-rule">
|
|
<div class="site-rule-header">
|
|
<button
|
|
type="button"
|
|
class="toggle-site-rule"
|
|
title="Expand site rule"
|
|
aria-label="Expand site rule"
|
|
aria-expanded="false"
|
|
>
|
|
<span class="site-rule-toggle-icon" aria-hidden="true">…</span>
|
|
</button>
|
|
<input
|
|
type="text"
|
|
class="site-pattern"
|
|
placeholder="e.g., youtube.com or /regex/gi"
|
|
/>
|
|
<button type="button" class="remove-site-rule">Remove</button>
|
|
</div>
|
|
<div class="site-rule-body">
|
|
<div class="site-rule-option site-rule-option-checkbox">
|
|
<label class="site-rule-split-label">
|
|
<span
|
|
>Enable Speeder on this site<br /><em
|
|
>For this URL pattern only: off blocks when global Speeder
|
|
is on (blacklist); on allows when global is off
|
|
(whitelist)—same pairing as Defaults →
|
|
Enable.</em
|
|
></span
|
|
>
|
|
<input type="checkbox" class="site-enabled" />
|
|
</label>
|
|
</div>
|
|
<div class="site-rule-content">
|
|
<div class="site-rule-override-section">
|
|
<label class="site-override-lead">
|
|
<span
|
|
>Override placement for this site<br /><em
|
|
>When on, location and margin below replace general
|
|
defaults for matching URLs.</em
|
|
></span
|
|
>
|
|
<input type="checkbox" class="override-placement" />
|
|
</label>
|
|
<div class="site-placement-container">
|
|
<div class="site-rule-option site-rule-option-field">
|
|
<label
|
|
>Default controller location:<br /><em
|
|
>Corner or edge anchor for the hover bar. Replaces the
|
|
general default for matching URLs only.</em
|
|
></label
|
|
>
|
|
<select class="site-controllerLocation">
|
|
<option value="top-left">Top left</option>
|
|
<option value="top-center">Top center</option>
|
|
<option value="top-right">Top right</option>
|
|
<option value="middle-right">Middle right</option>
|
|
<option value="bottom-right">Bottom right</option>
|
|
<option value="bottom-center">Bottom center</option>
|
|
<option value="bottom-left">Bottom left</option>
|
|
<option value="middle-left">Middle left</option>
|
|
</select>
|
|
</div>
|
|
<div class="site-rule-option site-rule-margin-option">
|
|
<label
|
|
>Controller margin (px):<br /><em
|
|
>Shifts the whole control from its preset position (CSS
|
|
margins). Top and bottom. 0–200.</em
|
|
></label
|
|
>
|
|
<div class="controller-margin-inputs">
|
|
<div class="margin-pad-cell">
|
|
<span class="margin-pad-mini">T</span>
|
|
<input type="text" class="site-controllerMarginTop" inputmode="numeric" placeholder="0" />
|
|
</div>
|
|
<div class="margin-pad-cell">
|
|
<span class="margin-pad-mini">B</span>
|
|
<input type="text" class="site-controllerMarginBottom" inputmode="numeric" placeholder="0" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="site-rule-override-section">
|
|
<label class="site-override-lead">
|
|
<span
|
|
>Override hide-by-default for this site<br /><em
|
|
>When on, the hide-by-default toggle below replaces the
|
|
general default for matching URLs.</em
|
|
></span
|
|
>
|
|
<input type="checkbox" class="override-visibility" />
|
|
</label>
|
|
<div class="site-visibility-container">
|
|
<div class="site-rule-option site-rule-option-checkbox">
|
|
<label
|
|
>Hide controller by default:<br /><em
|
|
>Starts with the overlay hidden; use shortcuts
|
|
(show/hide, move) or site behavior to reveal it.</em
|
|
></label
|
|
>
|
|
<input type="checkbox" class="site-startHidden" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="site-rule-override-section">
|
|
<label class="site-override-lead">
|
|
<span
|
|
>Override auto-hide for this site<br /><em
|
|
>When on, hide-with-controls and timer below replace
|
|
general defaults for matching URLs.</em
|
|
></span
|
|
>
|
|
<input type="checkbox" class="override-autohide" />
|
|
</label>
|
|
<div class="site-autohide-container">
|
|
<div class="site-rule-option site-rule-option-checkbox">
|
|
<label class="site-rule-split-label">
|
|
<span
|
|
>Hide with controls (idle-based)<br /><em
|
|
>Fade the controller in and out with the video
|
|
interface: perfect sync on YouTube, idle-based
|
|
elsewhere.</em
|
|
></span
|
|
>
|
|
<input type="checkbox" class="site-hideWithControls" />
|
|
</label>
|
|
</div>
|
|
<div class="site-rule-option site-rule-option-field">
|
|
<label
|
|
>Auto-hide timer (0.1–15s):<br /><em
|
|
>Seconds of inactivity before hiding: 0.1–15 for
|
|
non-YouTube sites.</em
|
|
></label
|
|
>
|
|
<input type="text" class="site-hideWithControlsTimer" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="site-rule-override-section">
|
|
<label class="site-override-lead">
|
|
<span
|
|
>Override playback for this site<br /><em
|
|
>When on, remember speed / force / audio below replace
|
|
general defaults for matching URLs.</em
|
|
></span
|
|
>
|
|
<input type="checkbox" class="override-playback" />
|
|
</label>
|
|
<div class="site-playback-container">
|
|
<div class="site-rule-option site-rule-option-checkbox">
|
|
<label
|
|
>Remember playback speed:<br /><em
|
|
>Stores speed per source so revisiting the same media
|
|
can restore it. Separate from “Force last saved
|
|
speed,” which fights players that reset
|
|
rate.</em
|
|
></label
|
|
>
|
|
<input type="checkbox" class="site-rememberSpeed" />
|
|
</div>
|
|
<div class="site-rule-option site-rule-option-checkbox">
|
|
<label
|
|
>Force last saved speed:<br /><em
|
|
>Useful when a video player tries to override the speed
|
|
you set in Speeder.</em
|
|
></label
|
|
>
|
|
<input type="checkbox" class="site-forceLastSavedSpeed" />
|
|
</div>
|
|
<div class="site-rule-option site-rule-option-checkbox">
|
|
<label
|
|
>Work on audio:<br /><em
|
|
>Also controls plain HTML5 audio (not just video). Turn
|
|
off if you only want Speeder on video players.</em
|
|
></label
|
|
>
|
|
<input type="checkbox" class="site-audioBoolean" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="site-rule-override-section">
|
|
<label class="site-override-lead">
|
|
<span
|
|
>Override opacity for this site<br /><em
|
|
>When on, opacity below replaces the general default for
|
|
matching URLs.</em
|
|
></span
|
|
>
|
|
<input type="checkbox" class="override-opacity" />
|
|
</label>
|
|
<div class="site-opacity-container">
|
|
<div class="site-rule-option site-rule-option-field">
|
|
<label
|
|
>Controller opacity:<br /><em
|
|
>0–1 (decimals). Lower is more transparent.
|
|
Applies to the in-page controller only.</em
|
|
></label
|
|
>
|
|
<input type="text" class="site-controllerOpacity" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="site-rule-override-section">
|
|
<label class="site-override-lead">
|
|
<span
|
|
>Override subtitle nudge for this site<br /><em
|
|
>When on, nudge options below replace general defaults for
|
|
matching URLs.</em
|
|
></span
|
|
>
|
|
<input type="checkbox" class="override-subtitleNudge" />
|
|
</label>
|
|
<div class="site-subtitleNudge-container">
|
|
<div class="site-rule-option site-rule-option-checkbox">
|
|
<label
|
|
>Enable subtitle nudge:<br /><em
|
|
>Makes tiny playback changes to help keep subtitles
|
|
aligned.</em
|
|
></label
|
|
>
|
|
<input type="checkbox" class="site-enableSubtitleNudge" />
|
|
</div>
|
|
<div class="site-rule-option site-rule-option-field">
|
|
<label
|
|
>Nudge interval (10–1000ms):<br /><em
|
|
>How often to nudge: 10–1000. Smaller values are
|
|
more frequent. Default: 50.</em
|
|
></label
|
|
>
|
|
<input type="text" class="site-subtitleNudgeInterval" placeholder="50" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="site-rule-controlbar">
|
|
<label class="site-override-lead">
|
|
<span
|
|
>Override in-player control bar for this site<br /><em
|
|
>Same idea as Hover control bar: drag blocks between
|
|
Active and Available for matching URLs only.</em
|
|
></span
|
|
>
|
|
<input type="checkbox" class="override-controlbar" />
|
|
</label>
|
|
<div class="site-controlbar-container">
|
|
<div class="cb-editor">
|
|
<div class="cb-zone">
|
|
<div class="cb-zone-label">Active</div>
|
|
<div class="cb-dropzone cb-active-zone site-cb-active"></div>
|
|
</div>
|
|
<div class="cb-zone">
|
|
<div class="cb-zone-label">Available</div>
|
|
<div class="cb-dropzone cb-available-zone site-cb-available"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="site-rule-controlbar">
|
|
<label class="site-override-lead">
|
|
<span
|
|
>Override extension popup for this site<br /><em
|
|
>Popup layout for matching URLs; mirrors the global Popup
|
|
control bar when you customize it here.</em
|
|
></span
|
|
>
|
|
<input type="checkbox" class="override-popup-controlbar" />
|
|
</label>
|
|
<div class="site-popup-controlbar-container">
|
|
<div class="site-rule-option site-rule-option-checkbox">
|
|
<label
|
|
>Show popup control bar<br /><em
|
|
>Shows buttons in the extension popup (toolbar icon).
|
|
Replaces the general default for this pattern.</em
|
|
></label
|
|
>
|
|
<input type="checkbox" class="site-showPopupControlBar" />
|
|
</div>
|
|
<div class="cb-editor">
|
|
<div class="cb-zone">
|
|
<div class="cb-zone-label">Active</div>
|
|
<div class="cb-dropzone cb-active-zone site-popup-cb-active"></div>
|
|
</div>
|
|
<div class="cb-zone">
|
|
<div class="cb-zone-label">Available</div>
|
|
<div class="cb-dropzone cb-available-zone site-popup-cb-available"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="site-rule-shortcuts">
|
|
<label class="site-override-lead">
|
|
<span
|
|
>Override shortcuts for this site<br /><em
|
|
>Add shortcuts from the menu; none by default. Leave off
|
|
to use global Shortcuts.</em
|
|
></span
|
|
>
|
|
<input type="checkbox" class="override-shortcuts" />
|
|
</label>
|
|
<div class="site-shortcuts-container">
|
|
<div class="site-shortcuts-rows"></div>
|
|
<select
|
|
class="site-add-shortcut-selector"
|
|
aria-label="Add shortcut for this site"
|
|
>
|
|
<option value="">Add shortcut…</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<section class="settings-card action-card">
|
|
<div class="section-heading">
|
|
<h3>Actions</h3>
|
|
<p class="section-intro">Save, restore, export, or import settings.</p>
|
|
</div>
|
|
<div class="action-row">
|
|
<button id="save">Save Changes</button>
|
|
<button id="restore">Restore Defaults</button>
|
|
<button id="exportSettings">Export Settings</button>
|
|
<button id="importSettings">Import Settings</button>
|
|
</div>
|
|
|
|
<div id="status" role="status" aria-live="polite"></div>
|
|
</section>
|
|
|
|
<section id="faq" class="settings-card info-card">
|
|
<h4>Extension controls not appearing?</h4>
|
|
<p>
|
|
This extension only works with HTML5 audio and video. If the
|
|
controls never appear, you may be looking at Flash content instead.
|
|
Right-click the player to check: if the menu mentions Flash, that
|
|
is the issue. Most sites will fall back to HTML5 when Flash is not
|
|
available, so disabling Flash in the browser can help.
|
|
</p>
|
|
</section>
|
|
|
|
</main>
|
|
</div>
|
|
</body>
|
|
</html>
|