mirror of
https://github.com/SoPat712/videospeed.git
synced 2026-04-21 04:42:35 -04:00
feat: settings update
This commit is contained in:
@@ -1715,13 +1715,13 @@ function applySiteRuleOverrides() {
|
||||
// Override general settings with site-specific overrides
|
||||
const siteSettings = [
|
||||
"startHidden",
|
||||
"hideWithControls",
|
||||
"hideWithControlsTimer",
|
||||
"controllerLocation",
|
||||
"rememberSpeed",
|
||||
"forceLastSavedSpeed",
|
||||
"audioBoolean",
|
||||
"controllerOpacity",
|
||||
"hideWithControls",
|
||||
"hideWithControlsTimer"
|
||||
"controllerOpacity"
|
||||
];
|
||||
|
||||
siteSettings.forEach((key) => {
|
||||
|
||||
+1
-1
@@ -1,7 +1,7 @@
|
||||
{
|
||||
"name": "Speeder",
|
||||
"short_name": "Speeder",
|
||||
"version": "4.3.2",
|
||||
"version": "4.3.4",
|
||||
"manifest_version": 2,
|
||||
"description": "Speed up, slow down, advance and rewind HTML5 audio/video with shortcuts (New and improved version of \"Video Speed Controller\")",
|
||||
"homepage_url": "https://github.com/SoPat712/speeder",
|
||||
|
||||
+433
-377
@@ -1,188 +1,425 @@
|
||||
:root {
|
||||
--bg: #f4f5f7;
|
||||
--panel: #ffffff;
|
||||
--panel-subtle: #fafbfc;
|
||||
--border: #e2e5e9;
|
||||
--border-strong: #d4d9e0;
|
||||
--text: #17191c;
|
||||
--muted: #626b76;
|
||||
--accent: #111827;
|
||||
--danger: #b42318;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html {
|
||||
min-height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
padding-left: 15px;
|
||||
padding-top: 80px;
|
||||
font-family: sans-serif;
|
||||
font-size: 12px;
|
||||
color: rgb(48, 57, 66);
|
||||
background-color: white;
|
||||
min-height: 100vh;
|
||||
padding: 24px 16px 40px;
|
||||
background: var(--bg);
|
||||
color: var(--text);
|
||||
font: 14px/1.45 "Avenir Next", "SF Pro Text", "Segoe UI", sans-serif;
|
||||
}
|
||||
|
||||
.page-shell {
|
||||
width: min(880px, 100%);
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.page-header {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.title-row {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.title-block {
|
||||
max-width: 560px;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3 {
|
||||
font-weight: normal;
|
||||
line-height: 1;
|
||||
user-select: none;
|
||||
cursor: default;
|
||||
}
|
||||
h1 {
|
||||
font-size: 1.5em;
|
||||
margin: 21px 0 6px;
|
||||
}
|
||||
.version {
|
||||
margin: 0 0 6px;
|
||||
color: #6b6b6b;
|
||||
font-size: 0.95em;
|
||||
}
|
||||
h3 {
|
||||
font-size: 1.2em;
|
||||
margin-bottom: 0.8em;
|
||||
color: black;
|
||||
}
|
||||
p {
|
||||
margin: 0.65em 0;
|
||||
h3,
|
||||
h4 {
|
||||
margin: 0;
|
||||
font-family: "Avenir Next", "SF Pro Display", "Segoe UI", sans-serif;
|
||||
font-weight: 600;
|
||||
letter-spacing: -0.01em;
|
||||
}
|
||||
|
||||
header {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 15px;
|
||||
right: 0;
|
||||
padding-bottom: 10px;
|
||||
background: white;
|
||||
z-index: 100;
|
||||
border-bottom: 1px solid #eee;
|
||||
h1 {
|
||||
font-size: 28px;
|
||||
line-height: 1.1;
|
||||
}
|
||||
header,
|
||||
section {
|
||||
min-width: 600px;
|
||||
max-width: 738px;
|
||||
|
||||
h3 {
|
||||
font-size: 16px;
|
||||
line-height: 1.25;
|
||||
}
|
||||
section {
|
||||
padding-left: 18px;
|
||||
margin-top: 8px;
|
||||
margin-bottom: 24px;
|
||||
|
||||
h4 {
|
||||
font-size: 15px;
|
||||
line-height: 1.3;
|
||||
}
|
||||
section h3 {
|
||||
margin-left: -18px;
|
||||
|
||||
.page-subtitle,
|
||||
.section-intro {
|
||||
margin: 6px 0 0;
|
||||
color: var(--muted);
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.version {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
min-height: 26px;
|
||||
padding: 0 9px;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 999px;
|
||||
background: var(--panel);
|
||||
color: var(--muted);
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.settings-stack {
|
||||
display: grid;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.settings-card {
|
||||
padding: 18px;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 12px;
|
||||
background: var(--panel);
|
||||
}
|
||||
|
||||
.section-heading {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0.75em 0;
|
||||
}
|
||||
|
||||
a,
|
||||
a:visited {
|
||||
color: var(--text);
|
||||
text-decoration-color: #c6ccd5;
|
||||
text-underline-offset: 0.14em;
|
||||
}
|
||||
|
||||
a:hover,
|
||||
a:focus {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
code {
|
||||
padding: 0.08em 0.38em;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 6px;
|
||||
background: var(--panel-subtle);
|
||||
font-family: "SFMono-Regular", Menlo, Consolas, monospace;
|
||||
font-size: 0.92em;
|
||||
}
|
||||
|
||||
button,
|
||||
input,
|
||||
select,
|
||||
textarea {
|
||||
font: inherit;
|
||||
}
|
||||
|
||||
button {
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
position: relative;
|
||||
|
||||
margin: 0 1px 0 0;
|
||||
padding: 0 10px;
|
||||
min-width: 4em;
|
||||
min-height: 2em;
|
||||
|
||||
background-image: linear-gradient(#ededed, #ededed 38%, #dedede);
|
||||
border: 1px solid rgba(0, 0, 0, 0.25);
|
||||
border-radius: 2px;
|
||||
outline: none;
|
||||
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08),
|
||||
inset 0 1px 2px rgba(255, 255, 255, 0.75);
|
||||
color: #444;
|
||||
text-shadow: 0 1px 0 rgb(240, 240, 240);
|
||||
font: inherit;
|
||||
|
||||
user-select: none;
|
||||
min-height: 36px;
|
||||
padding: 0 14px;
|
||||
border: 1px solid var(--border-strong);
|
||||
border-radius: 10px;
|
||||
background: var(--panel);
|
||||
color: var(--text);
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: background-color 120ms ease, border-color 120ms ease;
|
||||
}
|
||||
|
||||
#exportSettings,
|
||||
#importSettings {
|
||||
background-image: linear-gradient(#e3f2fd, #e3f2fd 38%, #bbdefb);
|
||||
border-color: rgba(33, 150, 243, 0.4);
|
||||
color: #1976d2;
|
||||
button:hover {
|
||||
background: #f8f9fb;
|
||||
border-color: #c5ccd5;
|
||||
}
|
||||
|
||||
input[type="text"] {
|
||||
width: 75px;
|
||||
text-align: center;
|
||||
button:active {
|
||||
background: #f1f3f5;
|
||||
}
|
||||
|
||||
.row {
|
||||
margin: 5px 0px;
|
||||
button:focus-visible,
|
||||
input[type="text"]:focus,
|
||||
select:focus,
|
||||
textarea:focus {
|
||||
outline: 2px solid rgba(17, 24, 39, 0.14);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
#save {
|
||||
background: var(--accent);
|
||||
border-color: var(--accent);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
#save:hover {
|
||||
background: #1f2937;
|
||||
border-color: #1f2937;
|
||||
}
|
||||
|
||||
input[type="text"],
|
||||
select,
|
||||
textarea {
|
||||
width: 100%;
|
||||
min-height: 36px;
|
||||
padding: 8px 10px;
|
||||
border: 1px solid var(--border-strong);
|
||||
border-radius: 10px;
|
||||
background: var(--panel);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
input[type="text"]:focus,
|
||||
select:focus,
|
||||
textarea:focus {
|
||||
border-color: #9ca3af;
|
||||
}
|
||||
|
||||
input[type="checkbox"] {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin: 2px 0 0;
|
||||
accent-color: var(--accent);
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
}
|
||||
|
||||
label em {
|
||||
display: block;
|
||||
margin-top: 4px;
|
||||
color: var(--muted);
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.shortcuts-grid {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 5px;
|
||||
}
|
||||
|
||||
.shortcut-row {
|
||||
display: flex;
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) 120px 120px;
|
||||
gap: 12px;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
padding: 10px 0;
|
||||
border-top: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.shortcuts-grid .shortcut-row:first-child {
|
||||
padding-top: 0;
|
||||
border-top: 0;
|
||||
}
|
||||
|
||||
.shortcut-row.customs {
|
||||
grid-template-columns: minmax(0, 1fr) 120px 120px 38px;
|
||||
}
|
||||
|
||||
.shortcut-label {
|
||||
display: inline-block;
|
||||
width: 170px;
|
||||
padding: 4px 8px;
|
||||
background-color: #f5f5f5;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 2px;
|
||||
box-sizing: border-box;
|
||||
font-size: 12px;
|
||||
line-height: normal;
|
||||
min-height: 26px;
|
||||
color: var(--text);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.shortcut-row input[type="text"] {
|
||||
height: 26px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.removeParent {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
min-width: 20px;
|
||||
border-radius: 50%;
|
||||
padding: 0;
|
||||
display: flex !important;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 10px;
|
||||
font-weight: bold;
|
||||
line-height: 1;
|
||||
background-color: #fff;
|
||||
border: 1px solid #ff4444;
|
||||
color: #ff4444;
|
||||
cursor: pointer;
|
||||
margin-left: 5px;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.removeParent:hover {
|
||||
background-color: #ffeeee;
|
||||
color: #cc0000;
|
||||
border-color: #cc0000;
|
||||
box-shadow: 0 0 3px rgba(255, 68, 68, 0.3);
|
||||
.customKey,
|
||||
.customValue {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#addShortcutSelector {
|
||||
margin-top: 15px;
|
||||
padding: 4px;
|
||||
width: 200px;
|
||||
width: min(220px, 100%);
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
label {
|
||||
display: inline-block;
|
||||
width: 170px;
|
||||
vertical-align: top;
|
||||
.removeParent,
|
||||
.toggle-site-rule {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 36px;
|
||||
min-width: 36px;
|
||||
height: 36px;
|
||||
padding: 0;
|
||||
font-size: 18px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.removeParent {
|
||||
color: var(--danger);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.toggle-site-rule {
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.row {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) 160px;
|
||||
gap: 16px;
|
||||
align-items: start;
|
||||
padding: 10px 0;
|
||||
border-top: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.settings-card .row:first-of-type {
|
||||
padding-top: 0;
|
||||
border-top: 0;
|
||||
}
|
||||
|
||||
#siteRulesContainer {
|
||||
display: grid;
|
||||
gap: 12px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.site-rule {
|
||||
padding: 12px;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 12px;
|
||||
background: var(--panel-subtle);
|
||||
}
|
||||
|
||||
.site-rule-header {
|
||||
display: grid;
|
||||
grid-template-columns: 36px minmax(0, 1fr) auto;
|
||||
gap: 10px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.site-pattern {
|
||||
min-width: 0;
|
||||
font-family: "SFMono-Regular", Menlo, Consolas, monospace;
|
||||
}
|
||||
|
||||
.site-rule-body {
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.site-rule-content.disabled-rule {
|
||||
opacity: 0.55;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.site-rule-option {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) 150px;
|
||||
gap: 16px;
|
||||
align-items: start;
|
||||
padding: 8px 0;
|
||||
border-top: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.site-rule-body > .site-rule-option:first-child,
|
||||
.site-rule-content > .site-rule-option:first-child {
|
||||
padding-top: 0;
|
||||
border-top: 0;
|
||||
}
|
||||
|
||||
.site-rule-option label {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 10px;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.site-rule-shortcuts {
|
||||
margin-top: 12px;
|
||||
padding-top: 12px;
|
||||
border-top: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.site-rule-shortcuts > label {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 10px;
|
||||
width: auto;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.site-shortcuts-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.site-shortcuts-container .shortcut-row {
|
||||
grid-template-columns: minmax(0, 1fr) 110px 110px minmax(0, 1fr);
|
||||
padding: 8px 0;
|
||||
border-top: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.site-shortcuts-container .shortcut-row:first-child {
|
||||
padding-top: 0;
|
||||
border-top: 0;
|
||||
}
|
||||
|
||||
.force-label {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 8px;
|
||||
width: auto;
|
||||
margin: 0;
|
||||
color: var(--muted);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.force-label input {
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.action-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
#status {
|
||||
color: #9d9d9d;
|
||||
display: inline-block;
|
||||
margin-left: 50px;
|
||||
min-height: 1.3em;
|
||||
margin-top: 10px;
|
||||
color: var(--muted);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
#faq {
|
||||
margin-top: 2em;
|
||||
#status:empty {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#faq hr {
|
||||
height: 1px;
|
||||
margin: 0 0 14px;
|
||||
border: 0;
|
||||
background: var(--border);
|
||||
}
|
||||
|
||||
.support-footer {
|
||||
min-width: 600px;
|
||||
max-width: 738px;
|
||||
margin: 28px 0 24px;
|
||||
padding-left: 18px;
|
||||
color: #6b6b6b;
|
||||
font-size: 0.95em;
|
||||
padding: 16px 20px;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.support-footer p {
|
||||
@@ -190,268 +427,87 @@ label {
|
||||
}
|
||||
|
||||
.support-footer a {
|
||||
color: #2f5ca8;
|
||||
text-decoration: none;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.support-footer a:hover,
|
||||
.support-footer a:focus {
|
||||
text-decoration: underline;
|
||||
@media (max-width: 720px) {
|
||||
.shortcut-row,
|
||||
.shortcut-row.customs,
|
||||
.row,
|
||||
.site-rule-option,
|
||||
.site-shortcuts-container .shortcut-row {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.action-row button,
|
||||
#addShortcutSelector {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.site-rule-header {
|
||||
grid-template-columns: 36px minmax(0, 1fr);
|
||||
}
|
||||
|
||||
.remove-site-rule {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
}
|
||||
|
||||
select {
|
||||
width: 170px;
|
||||
}
|
||||
|
||||
.customKey {
|
||||
color: transparent;
|
||||
text-shadow: 0 0 0 #000000;
|
||||
}
|
||||
|
||||
/* Dark mode styles */
|
||||
@media (prefers-color-scheme: dark) {
|
||||
@media (max-width: 520px) {
|
||||
body {
|
||||
background-color: #1a1a1a;
|
||||
color: #e0e0e0;
|
||||
padding: 16px 12px 28px;
|
||||
}
|
||||
|
||||
h3 {
|
||||
color: #ffffff;
|
||||
h1 {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.version {
|
||||
color: #a8a8a8;
|
||||
.settings-card {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
header {
|
||||
border-bottom: 1px solid #333;
|
||||
background: linear-gradient(#1a1a1a, #1a1a1a 40%, rgba(26, 26, 26, 0.92));
|
||||
.site-rule-header {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--bg: #111315;
|
||||
--panel: #171a1d;
|
||||
--panel-subtle: #1b1f23;
|
||||
--border: #2b3138;
|
||||
--border-strong: #3a414a;
|
||||
--text: #f2f4f6;
|
||||
--muted: #a0a8b2;
|
||||
--accent: #f2f4f6;
|
||||
--danger: #ff8a80;
|
||||
}
|
||||
|
||||
button {
|
||||
background-image: linear-gradient(#404040, #404040 38%, #353535);
|
||||
border: 1px solid rgba(255, 255, 255, 0.25);
|
||||
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08),
|
||||
inset 0 1px 2px rgba(0, 0, 0, 0.75);
|
||||
color: #e0e0e0;
|
||||
text-shadow: 0 1px 0 rgb(20, 20, 20);
|
||||
body {
|
||||
color-scheme: dark;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background-image: linear-gradient(#4a4a4a, #4a4a4a 38%, #3f3f3f);
|
||||
a,
|
||||
a:visited {
|
||||
color: #f2f4f6;
|
||||
text-decoration-color: #4b5563;
|
||||
}
|
||||
|
||||
#exportSettings,
|
||||
#importSettings {
|
||||
background-image: linear-gradient(#1e3a5f, #1e3a5f 38%, #152d47);
|
||||
border-color: rgba(100, 181, 246, 0.4);
|
||||
color: #90caf9;
|
||||
#save {
|
||||
background: #f2f4f6;
|
||||
border-color: #f2f4f6;
|
||||
color: #111315;
|
||||
}
|
||||
|
||||
input[type="text"],
|
||||
input[type="checkbox"],
|
||||
select,
|
||||
textarea {
|
||||
background-color: #2a2a2a;
|
||||
color: #e0e0e0;
|
||||
border: 1px solid #555;
|
||||
#save:hover {
|
||||
background: #dfe3e8;
|
||||
border-color: #dfe3e8;
|
||||
}
|
||||
|
||||
input[type="text"]:focus,
|
||||
select:focus,
|
||||
textarea:focus {
|
||||
background-color: #333;
|
||||
border-color: #777;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
select option {
|
||||
background-color: #2a2a2a;
|
||||
color: #e0e0e0;
|
||||
}
|
||||
|
||||
.customKey {
|
||||
color: transparent;
|
||||
text-shadow: 0 0 0 #e0e0e0;
|
||||
}
|
||||
|
||||
.shortcut-label {
|
||||
background-color: #2a2a2a;
|
||||
border-color: #555;
|
||||
}
|
||||
|
||||
#status {
|
||||
color: #888;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #66b3ff;
|
||||
}
|
||||
|
||||
a:visited {
|
||||
color: #cc99ff;
|
||||
}
|
||||
|
||||
.support-footer {
|
||||
color: #a8a8a8;
|
||||
}
|
||||
|
||||
.support-footer a,
|
||||
.support-footer a:visited {
|
||||
color: #8bb8ff;
|
||||
}
|
||||
|
||||
hr {
|
||||
border-color: #333;
|
||||
}
|
||||
}
|
||||
|
||||
/* Site Rules Styles */
|
||||
#siteRulesContainer {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.site-rule {
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 4px;
|
||||
padding: 12px;
|
||||
margin-bottom: 12px;
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
|
||||
.site-rule-header {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
margin-bottom: 12px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.site-rule.collapsed .site-rule-header {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.toggle-site-rule {
|
||||
min-width: auto;
|
||||
padding: 0 8px;
|
||||
font-size: 12px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.site-pattern {
|
||||
flex: 1;
|
||||
min-width: 300px;
|
||||
padding: 6px;
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
.remove-site-rule {
|
||||
min-width: auto;
|
||||
padding: 0 12px;
|
||||
}
|
||||
|
||||
.site-rule-body {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.site-rule-content.disabled-rule {
|
||||
opacity: 0.5;
|
||||
pointer-events: none;
|
||||
filter: grayscale(1);
|
||||
}
|
||||
|
||||
.site-rule-option {
|
||||
margin: 10px 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
max-width: 450px;
|
||||
}
|
||||
|
||||
.site-rule-option label {
|
||||
width: auto;
|
||||
line-height: normal;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.site-rule-option input[type="text"],
|
||||
.site-rule-option select {
|
||||
width: 150px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.site-rule-shortcuts {
|
||||
margin-top: 12px;
|
||||
padding-top: 12px;
|
||||
padding-bottom: 8px;
|
||||
border-top: 1px solid #ddd;
|
||||
}
|
||||
|
||||
.site-rule-shortcuts > label {
|
||||
display: block;
|
||||
margin-bottom: 8px;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.site-shortcuts-container {
|
||||
margin-left: 20px;
|
||||
margin-top: 10px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.site-shortcuts-container .shortcut-row {
|
||||
margin: 6px 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
}
|
||||
|
||||
.site-shortcuts-container .customKey {
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
.site-shortcuts-container .customValue {
|
||||
width: 80px;
|
||||
}
|
||||
|
||||
.site-shortcuts-container .customDo {
|
||||
width: 180px;
|
||||
}
|
||||
|
||||
.site-shortcuts-container .customForce {
|
||||
width: auto;
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
.site-shortcuts-container .force-label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
margin-left: 8px;
|
||||
width: auto;
|
||||
font-size: 11px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.site-shortcuts-container .force-text {
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
/* Dark mode for site rules */
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.site-rule {
|
||||
border-color: #444;
|
||||
background-color: #252525;
|
||||
}
|
||||
|
||||
.site-pattern {
|
||||
background-color: #2a2a2a;
|
||||
color: #e0e0e0;
|
||||
border: 1px solid #555;
|
||||
}
|
||||
|
||||
.site-rule-shortcuts {
|
||||
border-top-color: #444;
|
||||
border-color: #6b7280;
|
||||
}
|
||||
}
|
||||
|
||||
+392
-322
@@ -1,346 +1,416 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Video Speed Controller: Options</title>
|
||||
<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="options.js"></script>
|
||||
<script src="importExport.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>Video Speed Controller</h1>
|
||||
<div class="version">Version <span id="app-version"></span></div>
|
||||
</header>
|
||||
<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>
|
||||
</header>
|
||||
|
||||
<section id="customs">
|
||||
<h3>Shortcuts</h3>
|
||||
<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</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</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>
|
||||
<main class="settings-stack">
|
||||
<section id="customs" class="settings-card">
|
||||
<div class="section-heading">
|
||||
<h3>Shortcuts</h3>
|
||||
<p class="section-intro">Backspace clears a shortcut. Escape disables it.</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</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</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>
|
||||
<select id="addShortcutSelector">
|
||||
<option value="">Add shortcut…</option>
|
||||
</select>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h3>Other</h3>
|
||||
<div class="row">
|
||||
<label for="enabled">Enable</label>
|
||||
<input id="enabled" type="checkbox" />
|
||||
</div>
|
||||
<div class="row">
|
||||
<label for="startHidden">Hide controller by default</label>
|
||||
<input id="startHidden" type="checkbox" />
|
||||
</div>
|
||||
<div class="row">
|
||||
<label for="hideWithControls">Hide with controls (All sites)<br />
|
||||
<em>Fade controller in/out with 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). Used for non-YouTube sites.</em>
|
||||
</label>
|
||||
<input id="hideWithControlsTimer" type="text" placeholder="2" />
|
||||
</div>
|
||||
<div class="row">
|
||||
<label for="controllerLocation">Default controller location</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="rememberSpeed">Remember playback speed</label>
|
||||
<input id="rememberSpeed" type="checkbox" />
|
||||
</div>
|
||||
<div class="row">
|
||||
<label for="forceLastSavedSpeed"
|
||||
>Force last saved speed<br />
|
||||
<em
|
||||
>Useful for video players that override the speeds set by
|
||||
VideoSpeed</em
|
||||
></label
|
||||
>
|
||||
<input id="forceLastSavedSpeed" type="checkbox" />
|
||||
</div>
|
||||
<div class="row">
|
||||
<label for="audioBoolean">Work on audio</label>
|
||||
<input id="audioBoolean" type="checkbox" />
|
||||
</div>
|
||||
<div class="row">
|
||||
<label for="controllerOpacity">Controller opacity</label>
|
||||
<input id="controllerOpacity" type="text" value="" />
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="siteRules">
|
||||
<h3>Site-Specific Settings</h3>
|
||||
<p>
|
||||
<em
|
||||
>Override default settings for specific websites. Supports
|
||||
<a href="https://www.regexpal.com/">Regex</a> patterns (e.g.,
|
||||
/(.+)youtube\.com(\/*)$/gi).</em
|
||||
>
|
||||
</p>
|
||||
<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/Collapse">+</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">
|
||||
<label>
|
||||
<input type="checkbox" class="site-enabled" />
|
||||
Enable Video Speed Controller on this site
|
||||
<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>
|
||||
<div class="row">
|
||||
<label for="enabled">Enable</label>
|
||||
<input id="enabled" type="checkbox" />
|
||||
</div>
|
||||
<div class="row">
|
||||
<label for="startHidden">Hide controller by default</label>
|
||||
<input id="startHidden" type="checkbox" />
|
||||
</div>
|
||||
<div class="row">
|
||||
<label for="hideWithControls"
|
||||
>Hide with controls (all sites)<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="site-rule-content">
|
||||
<div class="site-rule-option">
|
||||
<label>Hide controller by default:</label>
|
||||
<input type="checkbox" class="site-startHidden" />
|
||||
<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="row">
|
||||
<label for="controllerLocation">Default controller location</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="rememberSpeed">Remember playback speed</label>
|
||||
<input id="rememberSpeed" type="checkbox" />
|
||||
</div>
|
||||
<div class="row">
|
||||
<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="row">
|
||||
<label for="audioBoolean">Work on audio</label>
|
||||
<input id="audioBoolean" type="checkbox" />
|
||||
</div>
|
||||
<div class="row">
|
||||
<label for="controllerOpacity">Controller opacity</label>
|
||||
<input id="controllerOpacity" type="text" value="" />
|
||||
</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>.
|
||||
</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/Collapse">+</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-option">
|
||||
<label>Default controller location:</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">
|
||||
<label>Remember playback speed:</label>
|
||||
<input type="checkbox" class="site-rememberSpeed" />
|
||||
</div>
|
||||
<div class="site-rule-option">
|
||||
<label>Force last saved speed:</label>
|
||||
<input type="checkbox" class="site-forceLastSavedSpeed" />
|
||||
</div>
|
||||
<div class="site-rule-option">
|
||||
<label>Work on audio:</label>
|
||||
<input type="checkbox" class="site-audioBoolean" />
|
||||
</div>
|
||||
<div class="site-rule-option">
|
||||
<label>Controller opacity:</label>
|
||||
<input type="text" class="site-controllerOpacity" />
|
||||
</div>
|
||||
<div class="site-rule-option">
|
||||
<label>
|
||||
<input type="checkbox" class="site-hideWithControls" />
|
||||
Hide with controls (idle-based)
|
||||
</label>
|
||||
</div>
|
||||
<div class="site-rule-option">
|
||||
<label>Auto-hide timer (0.1 - 15s):</label>
|
||||
<input type="text" class="site-hideWithControlsTimer" />
|
||||
</div>
|
||||
<div class="site-rule-shortcuts">
|
||||
<label>
|
||||
<input type="checkbox" class="override-shortcuts" />
|
||||
Custom shortcuts for this site
|
||||
</label>
|
||||
<div class="site-shortcuts-container" style="display: none"></div>
|
||||
<div class="site-rule-body">
|
||||
<div class="site-rule-option">
|
||||
<label>
|
||||
<input type="checkbox" class="site-enabled" />
|
||||
Enable Speeder on this site
|
||||
</label>
|
||||
</div>
|
||||
<div class="site-rule-content">
|
||||
<div class="site-rule-option">
|
||||
<label>Hide controller by default:</label>
|
||||
<input type="checkbox" class="site-startHidden" />
|
||||
</div>
|
||||
<div class="site-rule-option">
|
||||
<label>
|
||||
<input type="checkbox" class="site-hideWithControls" />
|
||||
Hide with controls (idle-based)
|
||||
</label>
|
||||
</div>
|
||||
<div class="site-rule-option">
|
||||
<label>Auto-hide timer (0.1–15s):</label>
|
||||
<input type="text" class="site-hideWithControlsTimer" />
|
||||
</div>
|
||||
<div class="site-rule-option">
|
||||
<label>Default controller location:</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">
|
||||
<label>Remember playback speed:</label>
|
||||
<input type="checkbox" class="site-rememberSpeed" />
|
||||
</div>
|
||||
<div class="site-rule-option">
|
||||
<label>Force last saved speed:</label>
|
||||
<input type="checkbox" class="site-forceLastSavedSpeed" />
|
||||
</div>
|
||||
<div class="site-rule-option">
|
||||
<label>Work on audio:</label>
|
||||
<input type="checkbox" class="site-audioBoolean" />
|
||||
</div>
|
||||
<div class="site-rule-option">
|
||||
<label>Controller opacity:</label>
|
||||
<input type="text" class="site-controllerOpacity" />
|
||||
</div>
|
||||
<div class="site-rule-shortcuts">
|
||||
<label>
|
||||
<input type="checkbox" class="override-shortcuts" />
|
||||
Custom shortcuts for this site
|
||||
</label>
|
||||
<div class="site-shortcuts-container" style="display: none"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
<section id="nudgeSettings">
|
||||
<h3>Subtitle Nudge Settings</h3>
|
||||
<div class="row">
|
||||
<label for="enableSubtitleNudge"
|
||||
>Enable Subtitle Nudge <br /><em
|
||||
>Periodically 'nudges' video speed by a tiny amount to help keep
|
||||
subtitles in sync on some sites (e.g. YouTube).</em
|
||||
>
|
||||
</label>
|
||||
<input id="enableSubtitleNudge" type="checkbox" />
|
||||
</div>
|
||||
<div class="row">
|
||||
<label for="subtitleNudgeInterval"
|
||||
>Nudge Interval (milliseconds) <br /><em
|
||||
>How often to nudge (e.g., 10-1000). Smaller values are more
|
||||
frequent. Default: 50.</em
|
||||
>
|
||||
</label>
|
||||
<input
|
||||
id="subtitleNudgeInterval"
|
||||
type="text"
|
||||
value=""
|
||||
placeholder="50"
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
<section id="nudgeSettings" class="settings-card">
|
||||
<div class="section-heading">
|
||||
<h3>Subtitle sync</h3>
|
||||
<p class="section-intro">Use small speed nudges if subtitles drift.</p>
|
||||
</div>
|
||||
<div class="row">
|
||||
<label for="enableSubtitleNudge"
|
||||
>Enable subtitle nudge<br /><em
|
||||
>Makes tiny playback changes to help keep subtitles aligned on
|
||||
some sites, especially YouTube.</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>
|
||||
|
||||
<button id="save">Save</button>
|
||||
<button id="restore">Restore Defaults</button>
|
||||
<button id="exportSettings">Export Settings</button>
|
||||
<button id="importSettings">Import Settings</button>
|
||||
<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"></div>
|
||||
<div id="status" role="status" aria-live="polite"></div>
|
||||
</section>
|
||||
|
||||
<div id="faq">
|
||||
<hr />
|
||||
<section id="faq" class="settings-card info-card">
|
||||
<hr />
|
||||
|
||||
<h4>Extension controls not appearing?</h4>
|
||||
<p>
|
||||
This extension is only compatible with HTML5 audio and video. If you
|
||||
don't see the controls showing up, chances are you are viewing a Flash
|
||||
content. If you want to confirm, try right-clicking on the content and
|
||||
inspect the menu: if it mentions flash, then that's the issue. That
|
||||
said, <b>most sites will fallback to HTML5</b> if they detect that Flash
|
||||
is not available. You can try manually disabling Flash from the browser.
|
||||
</p>
|
||||
<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>
|
||||
|
||||
<footer class="support-footer settings-card">
|
||||
<p>
|
||||
If Speeder has been useful, consider supporting its development via
|
||||
<a
|
||||
href="https://github.com/sponsors/SoPat712"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>GitHub Sponsor</a
|
||||
>
|
||||
or
|
||||
<a
|
||||
href="https://ko-fi.com/joshpatra"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>Ko-Fi</a
|
||||
>.
|
||||
</p>
|
||||
</footer>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<footer class="support-footer">
|
||||
<p>
|
||||
If Speeder has been useful, consider supporting its development via
|
||||
<a
|
||||
href="https://github.com/sponsors/SoPat712"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>GitHub Sponsor</a
|
||||
>
|
||||
or
|
||||
<a
|
||||
href="https://ko-fi.com/joshpatra"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>Ko-Fi</a
|
||||
>.
|
||||
</p>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
+10
-10
@@ -239,7 +239,7 @@ function refreshAddShortcutSelector() {
|
||||
selector.options[0].text = "All shortcuts added";
|
||||
} else {
|
||||
selector.disabled = false;
|
||||
selector.options[0].text = "Add shortcut...";
|
||||
selector.options[0].text = "Add shortcut\u2026";
|
||||
}
|
||||
}
|
||||
|
||||
@@ -477,7 +477,7 @@ function add_shortcut(action, value) {
|
||||
var removeButton = document.createElement("button");
|
||||
removeButton.className = "removeParent";
|
||||
removeButton.type = "button";
|
||||
removeButton.textContent = "X";
|
||||
removeButton.textContent = "\u00d7";
|
||||
|
||||
div.appendChild(actionLabel);
|
||||
div.appendChild(keyInput);
|
||||
@@ -622,13 +622,13 @@ function save_options() {
|
||||
// Handle other site settings
|
||||
const siteSettings = [
|
||||
{ key: "startHidden", type: "checkbox" },
|
||||
{ key: "hideWithControls", type: "checkbox" },
|
||||
{ key: "hideWithControlsTimer", type: "text" },
|
||||
{ key: "controllerLocation", type: "select" },
|
||||
{ key: "rememberSpeed", type: "checkbox" },
|
||||
{ key: "forceLastSavedSpeed", type: "checkbox" },
|
||||
{ key: "audioBoolean", type: "checkbox" },
|
||||
{ key: "controllerOpacity", type: "text" },
|
||||
{ key: "hideWithControls", type: "checkbox" },
|
||||
{ key: "hideWithControlsTimer", type: "text" }
|
||||
{ key: "controllerOpacity", type: "text" }
|
||||
];
|
||||
|
||||
siteSettings.forEach((s) => {
|
||||
@@ -838,13 +838,13 @@ function createSiteRule(rule) {
|
||||
|
||||
const settings = [
|
||||
{ key: "startHidden", type: "checkbox" },
|
||||
{ key: "hideWithControls", type: "checkbox" },
|
||||
{ key: "hideWithControlsTimer", type: "text" },
|
||||
{ key: "controllerLocation", type: "select" },
|
||||
{ key: "rememberSpeed", type: "checkbox" },
|
||||
{ key: "forceLastSavedSpeed", type: "checkbox" },
|
||||
{ key: "audioBoolean", type: "checkbox" },
|
||||
{ key: "controllerOpacity", type: "text" },
|
||||
{ key: "hideWithControls", type: "checkbox" },
|
||||
{ key: "hideWithControlsTimer", type: "text" }
|
||||
{ key: "controllerOpacity", type: "text" }
|
||||
];
|
||||
|
||||
settings.forEach((s) => {
|
||||
@@ -1062,11 +1062,11 @@ document.addEventListener("DOMContentLoaded", function () {
|
||||
if (isCollapsed) {
|
||||
ruleBody.style.display = "block";
|
||||
ruleEl.classList.remove("collapsed");
|
||||
event.target.textContent = "-";
|
||||
event.target.textContent = "\u2212";
|
||||
} else {
|
||||
ruleBody.style.display = "none";
|
||||
ruleEl.classList.add("collapsed");
|
||||
event.target.textContent = "+";
|
||||
event.target.textContent = "\u002b";
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user