Mirror/SponsorBlock
1
0
Fork 0
mirror of https://github.com/ajayyy/SponsorBlock.git synced 2025-12-08 20:47:11 +03:00
Code Issues Packages Projects Releases Wiki Activity

group settings into tabs

Browse Source
This commit is contained in:
Áron Hegymegi-Kiss
2021-12-12 23:31:09 +01:00
parent 7186829bc3
commit dface28c84
5 changed files with 721 additions and 637 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
public/_locales/en/messages.json
View File

@@ -845,5 +845,33 @@
"hourAbbreviation": { "hourAbbreviation": {
"message": "h", "message": "h",
"description": "100h" "description": "100h"
},
"optionsTabCategories" : {
"message": "Categories",
"description": "Appears in Options as a tab header for setting up categories."
},
"optionsTabBehavior" : {
"message": "Behavior",
"description": "Appears in Options as a tab header for options related to the general behavior of the extension."
},
"optionsTabInterface" : {
"message": "Interface",
"description": "Appears in Options as a tab header for options related to GUI and sounds"
},
"optionsTabKeyBinds" : {
"message": "Key Bindings",
"description": "Appears in Options as a tab header for keybinds"
},
"optionsTabPrivacy" : {
"message": "Privacy",
"description": "Appears in Options as a tab header for options related to privacy (data stored/sent to server)"
},
"optionsTabBackup" : {
"message": "Backup/Restore",
"description": "Appears in Options as a tab header for options related to saving/restoring your settings"
},
"optionsTabAdvanced" : {
"message": "Advanced",
"description": "Appears in Options as a tab header for advanced/niche options"
} }
} }

249
public/options/options.css
View File

@@ -1,10 +1,138 @@
/* Options page CSS */ /* Options page CSS */
/* Dark mode CSS, this is the default if unsupported */
html { html {
color-scheme: dark; color-scheme: dark;
} }
body { body {
background-color: #333333;
}
#navigation {
background-color: #181818;
color: white;
}
.tab-heading {
background-color: #242424;
color: white;
}
.tab-heading:hover {
outline: 3px solid white;
}
.medium-description, .switch-container, .text-label-container, .categoryTableElement {
color: white;
}
.small-description, p,li {
color: #dfdfdf;
}
.option-button.disabled {
background-color: #520000;
color: grey;
}
.slider {
background-color: #707070;
}
h1,h2,h3,h4,h5,h6 {
color: #dad8d8;
}
.option-group > div {
border-bottom: 1px solid #484848;
border-image: linear-gradient(to right, #484848, #00000000 80%) 1;
}
.categoryTableElement td {
border-top: 1px solid #484848;
}
/* Light mode, if requested */
@media only screen and (prefers-color-scheme: light) {
html {
color-scheme: light;
}
body {
background-color: #f9f9f9;
}
#navigation {
background-color: #dbdbdb;
color: #212121;
}
.tab-heading {
background-color: #ababab;
color: black;
}
.tab-heading:hover {
outline: 3px solid #2e2e2e;
}
.medium-description, .switch-container, .text-label-container, .categoryTableElement {
color: black;
}
.small-description, p,li {
color: #262626;
}
.option-button.disabled {
background-color: #ffcaca;
color: grey;
}
.slider {
background-color: #bfbebe;
}
h1,h2,h3,h4,h5,h6 {
color: #707070;
}
.option-group > div {
border-bottom: 1px solid #d9d9d9;
border-image: linear-gradient(to right, #d9d9d9, #00000000 80%) 1;
}
.categoryTableElement td {
border-top: 1px solid #d9d9d9;
}
}
html, body {
font-family: sans-serif; font-family: sans-serif;
margin: 0;
}
* {
box-sizing: border-box;
}
#options-container {
display: flex;
justify-content: space-between;
}
#navigation {
display: flex;
flex-direction: column;
gap: 20px;
flex-basis: 20%;
min-width: 300px;
max-width: 600px;
border-radius: 15px;
margin: 15px;
}
.tab-heading {
font-size: 18px;
height: 50px;
line-height: 50px;
width: 80%;
margin: 0 auto;
border-radius: 15px;
cursor: pointer;
}
.tab-heading.selected {
background-color: #c00000;
color: white;
}
.option-group > div {
min-height: 50px;
padding: 20px 0;
}
.option-group > div:last-child {
border-bottom: inherit;
} }
.center { .center {
@@ -27,13 +155,20 @@ body {
display: inline; display: inline;
} }
.small-description { .small-description{
color: white;
font-size: 13px; font-size: 13px;
padding: 15px 0 0 20px;
}
.small-description td {
padding: 10px 0 20px 20px;
}
.categoryTableElement td {
padding-top: 10px;
} }
.medium-description { .medium-description {
color: white;
font-size: 15px; font-size: 15px;
} }
@@ -53,21 +188,23 @@ body {
width: max-content; width: max-content;
} }
.option-button:hover { .option-button:hover:not(.disabled) {
background-color: #fc0303; background-color: #fc0303;
} }
.option-button.disabled { .option-button.disabled {
cursor: default; cursor: default;
background-color: #520000;
color: grey;
} }
#options { #options {
max-width: 60%; height: 100vh;
flex-basis: 80%;
overflow: auto;
text-align: left; text-align: left;
display: inline-block; padding: 80px 15px 0 3%;
box-sizing: border-box;
transition: padding 0.3s;
} }
#options.embed { #options.embed {
@@ -76,13 +213,15 @@ body {
display: inline-block; display: inline-block;
} }
#title .profilepic {
height: 60px;
}
.switch-container { .switch-container {
content: attr(label-name); content: attr(label-name);
position: absolute;
width: max-content; width: max-content;
font-size: 14px; font-size: 14px;
color: white;
display: table; display: table;
} }
@@ -96,7 +235,6 @@ body {
.text-label-container { .text-label-container {
font-size: 14px; font-size: 14px;
color: white;
} }
.switch { .switch {
@@ -119,7 +257,6 @@ body {
left: 0; left: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
background-color: #707070;
} }
.animated * { .animated * {
@@ -162,11 +299,8 @@ input:checked + .slider:before {
} }
/* Boilerplate CSS from https://ajay.app */
body { /* Boilerplate CSS from https://ajay.app (edited) */
background-color: #333333;
}
.projectPreview { .projectPreview {
position: relative; position: relative;
@@ -196,29 +330,21 @@ body {
transform: translateY(-50%); transform: translateY(-50%);
} }
.createdBy { #createdBy {
font-size: 14px; font-size: 14px;
text-align: center; text-align: center;
padding-top: 0px; margin-top: auto;
padding-bottom: 0px;
display: inline-block;
} }
#title { #title {
background-color: #636363;
text-align: center; text-align: center;
vertical-align: middle; vertical-align: middle;
font-size: 50px; font-size: 40px;
color: #212121;
padding: 20px; padding: 20px;
text-decoration: none; text-decoration: none;
transition: font-size 1s;
} }
.subtitle { .subtitle {
@@ -237,7 +363,6 @@ body {
} }
.profilepic { .profilepic {
background-color: #636363 !important;
vertical-align: middle; vertical-align: middle;
} }
@@ -281,21 +406,9 @@ a {
p,li { p,li {
font-size: 20px; font-size: 20px;
color: #c4c4c4;
padding: 10px; padding: 10px;
} }
@media screen and (orientation:portrait) {
#options {
max-width: 100%;
}
.previewColorOption {
display: none;
}
}
.previewImage { .previewImage {
max-height: 200px; max-height: 200px;
} }
@@ -316,10 +429,6 @@ img {
color: #dad8d8; color: #dad8d8;
} }
h1,h2,h3,h4,h5,h6 {
color: #dad8d8;
}
svg { svg {
text-decoration: none; text-decoration: none;
} }
@@ -337,8 +446,6 @@ svg {
.categoryTableElement { .categoryTableElement {
font-size: 16px; font-size: 16px;
color: white;
} }
.categoryTableElement > * { .categoryTableElement > * {
@@ -369,3 +476,49 @@ svg {
#sbDonate { #sbDonate {
font-size: 10px; font-size: 10px;
} }
/* Handle smaller screensizes */
@media only screen and (max-height: 770px), only screen and (max-width: 1200px) {
#options-container {
flex-direction: column;
}
#navigation {
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
align-items: center;
gap: 8px;
min-width: unset;
max-width: unset;
padding: 8px;
}
#options {
padding: 0 50px;
}
.tab-heading {
width: unset;
min-width: 150px;
height: 40px;
line-height: 40px;
margin: 0;
flex-grow: 1;
}
#title {
width: 100%;
font-size: 30px;
}
#title .profilepic {
height: 40px;
}
#createdBy {
margin: unset;
width: 100%;
}
}
@media only screen and (max-width: 800px) {
#options {
padding: 0 15px;
}
}

685
public/options/options.html
View File

@@ -13,29 +13,66 @@
<body class="sponsorBlockPageBody"> <body class="sponsorBlockPageBody">
<div id="options-container">
<div id="navigation" class="center">
<div id="title" class="titleBar"> <div id="title" class="titleBar">
<img src="../icons/LogoSponsorBlocker256px.png" height="80" class="profilepic"/> <img src="../icons/LogoSponsorBlocker256px.png" class="profilepic" alt="SponsorBlock logo"/>
SponsorBlock SponsorBlock
</div> </div>
<div class="center"> <div class="tab-heading selected" data-for="segment-options">
<p class="createdBy titleBar"> __MSG_optionsTabCategories__
<img src="../icons/newprofilepic.jpg" height="30" class="profilepiccircle"/> </div>
<div class="tab-heading" data-for="logic-options">
__MSG_optionsTabBehavior__
</div>
<div class="tab-heading" data-for="interface-options">
__MSG_optionsTabInterface__
</div>
<div class="tab-heading" data-for="keybind-options">
__MSG_optionsTabKeyBinds__
</div>
<div class="tab-heading" data-for="privacy-options">
__MSG_optionsTabPrivacy__
</div>
<div class="tab-heading" data-for="import-options">
__MSG_optionsTabBackup__
</div>
<div class="tab-heading" data-for="advanced-options">
__MSG_optionsTabAdvanced__
</div>
<p id="createdBy" class="titleBar">
<img src="../icons/newprofilepic.jpg" height="30" class="profilepiccircle" alt="profile picture of creator"/>
__MSG_createdBy__ __MSG_createdBy__
<a href="https://ajay.app">Ajay Ramachandran</a> <a href="https://ajay.app">Ajay Ramachandran</a>
<a href="https://sponsor.ajay.app/donate" target="_blank" rel="noopener" id="sbDonate">(__MSG_Donate__)</a> <a href="https://sponsor.ajay.app/donate" target="_blank" rel="noopener" id="sbDonate">(__MSG_Donate__)</a>
</p> </p>
<h1>__MSG_Options__</h1> </div>
<div id="options" class="hidden"> <div id="options">
<div id="category-type" option-type="react-CategoryChooserComponent"> <div id="segment-options" class="option-group">
<div id="category-type" data-type="react-CategoryChooserComponent">
</div> </div>
<div option-type="toggle" sync-option="autoSkipOnMusicVideos"> </div>
<label class="switch-container">
<div id="logic-options" class="option-group hidden">
<div data-type="toggle" data-sync="autoSkipOnMusicVideos">
<div class="switch-container">
<label class="switch"> <label class="switch">
<input type="checkbox" checked> <input type="checkbox" checked>
<span class="slider round"></span> <span class="slider round"></span>
@@ -43,15 +80,11 @@
<div class="switch-label"> <div class="switch-label">
__MSG_autoSkipOnMusicVideos__ __MSG_autoSkipOnMusicVideos__
</div> </div>
</label> </div>
<br/>
<br/>
<br/>
</div> </div>
<div option-type="toggle" sync-option="muteSegments"> <div data-type="toggle" data-sync="muteSegments">
<label class="switch-container"> <div class="switch-container">
<label class="switch"> <label class="switch">
<input type="checkbox" checked> <input type="checkbox" checked>
<span class="slider round"></span> <span class="slider round"></span>
@@ -59,84 +92,203 @@
<div class="switch-label"> <div class="switch-label">
__MSG_muteSegments__ __MSG_muteSegments__
</div> </div>
</label> </div>
<br/>
<br/>
<br/>
</div> </div>
<br/> <div data-type="number-change" data-sync="minDuration">
<br/> <label class="number-container">
<input type="number" step="0.1" min="0">
</label>
<div id="support-invidious" option-type="toggle" sync-option="supportInvidious" no-safari="true"> <div class="small-description">__MSG_minDurationDescription__</div>
<label class="switch-container"> </div>
<div data-type="toggle" data-sync="forceChannelCheck">
<div class="switch-container">
<label class="switch"> <label class="switch">
<input type="checkbox"> <input type="checkbox" checked>
<span class="slider round"></span> <span class="slider round"></span>
</label> </label>
<div class="switch-label"> <div class="switch-label">
__MSG_supportOtherSites__ __MSG_forceChannelCheck__
</div> </div>
</div>
<div class="small-description">__MSG_whatForceChannelCheck__</div>
</div>
<div data-type="toggle" data-sync="refetchWhenNotFound">
<div class="switch-container">
<label class="switch">
<input type="checkbox" checked>
<span class="slider round"></span>
</label>
<div class="switch-label">
__MSG_enableRefetchWhenNotFound__
</div>
</div>
<div class="small-description">__MSG_whatRefetchWhenNotFound__</div>
</div>
</div>
<div id="interface-options" class="option-group hidden">
<div data-type="number-change" data-sync="skipNoticeDuration">
<label class="number-container">
<input type="number" step="1" min="1">
</label> </label>
<br/> <div class="small-description">__MSG_skipNoticeDurationDescription__</div>
<br/>
<br/>
<div class="small-description">(__MSG_supportedSites__ Invidious, CloudTube)</div>
<br/>
<span class="small-description">__MSG_supportOtherSitesDescription__ </span>
<br/>
<br/>
<br/>
</div> </div>
<div option-type="private-text-change" sync-option="invidiousInstances" no-safari="true"> <div data-type="toggle" data-toggle-type="reverse" data-sync="dontShowNotice">
<div class="option-button trigger-button"> <div class="switch-container">
__MSG_addInvidiousInstance__ <label class="switch">
<input type="checkbox" checked>
<span class="slider round"></span>
</label>
<div class="switch-label">
__MSG_showSkipNotice__
</div>
</div>
</div> </div>
<br/> <div data-type="selector" data-sync="noticeVisibilityMode">
<select class="selector-element optionsSelector" >
<div class="small-description">__MSG_addInvidiousInstanceDescription__</div> <option value="0">__MSG_noticeVisibilityMode0__</option>
<option value="1">__MSG_noticeVisibilityMode1__</option>
<div class="option-hidden-section hidden"> <option value="2">__MSG_noticeVisibilityMode2__</option>
<br/> <option value="3">__MSG_noticeVisibilityMode3__</option>
<option value="4">__MSG_noticeVisibilityMode4__</option>
<input class="option-text-box" type="text"> </select>
<br/>
<br/>
<div class="option-button text-change-set inline">
__MSG_add__
</div> </div>
<div class="option-button invidious-instance-reset inline"> <div data-type="toggle" data-toggle-type="reverse" data-sync="hideVideoPlayerControls">
__MSG_resetInvidiousInstance__ <div class="switch-container">
<label class="switch">
<input type="checkbox" checked>
<span class="slider round"></span>
</label>
<div class="switch-label">
__MSG_showButtons__
</div>
</div> </div>
<br/> <div class="small-description">__MSG_hideButtonsDescription__</div>
<br/>
<span class="small-description">__MSG_currentInstances__</span>
<span class="small-description" option-type="display" sync-option="invidiousInstances"></span>
</div> </div>
<br/> <div data-type="toggle" data-toggle-type="reverse" data-sync="hideSkipButtonPlayerControls">
<br/> <div class="switch-container">
<label class="switch">
<input type="checkbox" checked>
<span class="slider round"></span>
</label>
<div class="switch-label">
__MSG_showSkipButton__
</div>
</div>
</div> </div>
<div option-type="keybind-change" sync-option="skipKeybind"> <div data-type="toggle" data-toggle-type="reverse" data-sync="hideInfoButtonPlayerControls">
<div class="switch-container">
<label class="switch">
<input type="checkbox" checked>
<span class="slider round"></span>
</label>
<div class="switch-label">
__MSG_showInfoButton__
</div>
</div>
</div>
<div data-type="toggle" data-sync="autoHideInfoButton" data-dependent-on="hideInfoButtonPlayerControls">
<div class="switch-container">
<label class="switch">
<input type="checkbox" checked>
<span class="slider round"></span>
</label>
<div class="switch-label">
__MSG_autoHideInfoButton__
</div>
</div>
</div>
<div data-type="toggle" data-toggle-type="reverse" data-sync="hideDeleteButtonPlayerControls">
<div class="switch-container">
<label class="switch">
<input type="checkbox" checked>
<span class="slider round"></span>
</label>
<div class="switch-label">
__MSG_showDeleteButton__
</div>
</div>
</div>
<div data-type="toggle" data-toggle-type="reverse" data-sync="hideUploadButtonPlayerControls">
<div class="switch-container">
<label class="switch">
<input type="checkbox" checked>
<span class="slider round"></span>
</label>
<div class="switch-label">
__MSG_showUploadButton__
</div>
</div>
</div>
<div data-type="toggle" data-sync="audioNotificationOnSkip">
<div class="switch-container">
<label class="switch">
<input type="checkbox" checked>
<span class="slider round"></span>
</label>
<div class="switch-label">
__MSG_audioNotification__
</div>
</div>
<div class="small-description">__MSG_audioNotificationDescription__</div>
</div>
<div data-type="toggle" data-sync="showTimeWithSkips">
<div class="switch-container">
<label class="switch">
<input type="checkbox" checked>
<span class="slider round"></span>
</label>
<div class="switch-label">
__MSG_showTimeWithSkips__
</div>
</div>
<div class="small-description">__MSG_showTimeWithSkipsDescription__</div>
</div>
<div data-type="toggle" data-toggle-type="reverse" data-sync="showDonationLink" data-no-safari="true">
<div class="switch-container">
<label class="switch">
<input type="checkbox" checked>
<span class="slider round"></span>
</label>
<div class="switch-label">
__MSG_hideDonationLink__
</div>
</div>
</div>
</div>
<div id="keybind-options" class="option-group hidden">
<div data-type="keybind-change" data-sync="skipKeybind">
<div class="option-button trigger-button"> <div class="option-button trigger-button">
__MSG_setSkipShortcut__ __MSG_setSkipShortcut__
</div> </div>
<div class="option-hidden-section hidden"> <div class="option-hidden-section hidden">
<br/>
<div class="medium-description keybind-status"> <div class="medium-description keybind-status">
__MSG_keybindDescription__ __MSG_keybindDescription__
</div> </div>
@@ -147,10 +299,7 @@
</div> </div>
</div> </div>
<br/> <div data-type="keybind-change" data-sync="startSponsorKeybind">
<br/>
<div option-type="keybind-change" sync-option="startSponsorKeybind">
<div class="option-button trigger-button"> <div class="option-button trigger-button">
__MSG_setStartSponsorShortcut__ __MSG_setStartSponsorShortcut__
</div> </div>
@@ -168,17 +317,12 @@
</div> </div>
</div> </div>
<br/> <div data-type="keybind-change" data-sync="submitKeybind">
<br/>
<div option-type="keybind-change" sync-option="submitKeybind">
<div class="option-button trigger-button"> <div class="option-button trigger-button">
__MSG_setSubmitKeybind__ __MSG_setSubmitKeybind__
</div> </div>
<div class="option-hidden-section hidden"> <div class="option-hidden-section hidden">
<br/>
<div class="medium-description keybind-status"> <div class="medium-description keybind-status">
__MSG_keybindDescription__ __MSG_keybindDescription__
</div> </div>
@@ -189,232 +333,12 @@
</div> </div>
</div> </div>
<br/>
<br/>
<div option-type="number-change" sync-option="skipNoticeDuration">
<label class="number-container">
<input type="number" step="1" min="1">
</label>
<br/>
<br/>
<div class="small-description">__MSG_skipNoticeDurationDescription__</div>
</div> </div>
<br/> <div id="privacy-options" class="option-group hidden">
<br/>
<div option-type="number-change" sync-option="minDuration"> <div data-type="toggle" data-sync="trackViewCount">
<label class="number-container"> <div class="switch-container">
<input type="number" step="0.1" min="0">
</label>
<br/>
<br/>
<div class="small-description">__MSG_minDurationDescription__</div>
</div>
<br/>
<br/>
<div option-type="toggle" toggle-type="reverse" sync-option="dontShowNotice">
<label class="switch-container">
<label class="switch">
<input type="checkbox" checked>
<span class="slider round"></span>
</label>
<div class="switch-label">
__MSG_showSkipNotice__
</div>
</label>
</div>
<br/>
<br/>
<br/>
<div option-type="selector" sync-option="noticeVisibilityMode">
<select class="selector-element optionsSelector" >
<option value="0">__MSG_noticeVisibilityMode0__</option>
<option value="1">__MSG_noticeVisibilityMode1__</option>
<option value="2">__MSG_noticeVisibilityMode2__</option>
<option value="3">__MSG_noticeVisibilityMode3__</option>
<option value="4">__MSG_noticeVisibilityMode4__</option>
</select>
</div>
<br/>
<br/>
<div option-type="toggle" sync-option="forceChannelCheck">
<label class="switch-container">
<label class="switch">
<input type="checkbox" checked>
<span class="slider round"></span>
</label>
<div class="switch-label">
__MSG_forceChannelCheck__
</div>
</label>
<br/>
<br/>
<br/>
<div class="small-description">__MSG_whatForceChannelCheck__</div>
</div>
<br/>
<br/>
<div option-type="toggle" toggle-type="reverse" sync-option="hideVideoPlayerControls">
<label class="switch-container">
<label class="switch">
<input type="checkbox" checked>
<span class="slider round"></span>
</label>
<div class="switch-label">
__MSG_showButtons__
</div>
</label>
<br/>
<br/>
<br/>
<div class="small-description">__MSG_hideButtonsDescription__</div>
</div>
<br/>
<div option-type="toggle" toggle-type="reverse" sync-option="hideSkipButtonPlayerControls">
<label class="switch-container">
<label class="switch">
<input type="checkbox" checked>
<span class="slider round"></span>
</label>
<div class="switch-label">
__MSG_showSkipButton__
</div>
</label>
</div>
<br/>
<br/>
<br/>
<div option-type="toggle" toggle-type="reverse" sync-option="hideInfoButtonPlayerControls">
<label class="switch-container">
<label class="switch">
<input type="checkbox" checked>
<span class="slider round"></span>
</label>
<div class="switch-label">
__MSG_showInfoButton__
</div>
</label>
</div>
<br/>
<br/>
<br/>
<div option-type="toggle" sync-option="autoHideInfoButton" if-false="hideInfoButtonPlayerControls">
<label class="switch-container">
<label class="switch">
<input type="checkbox" checked>
<span class="slider round"></span>
</label>
<div class="switch-label">
__MSG_autoHideInfoButton__
</div>
</label>
</div>
<br/>
<br/>
<br/>
<div option-type="toggle" toggle-type="reverse" sync-option="hideDeleteButtonPlayerControls">
<label class="switch-container">
<label class="switch">
<input type="checkbox" checked>
<span class="slider round"></span>
</label>
<div class="switch-label">
__MSG_showDeleteButton__
</div>
</label>
</div>
<br/>
<br/>
<br/>
<div option-type="toggle" toggle-type="reverse" sync-option="hideUploadButtonPlayerControls">
<label class="switch-container">
<label class="switch">
<input type="checkbox" checked>
<span class="slider round"></span>
</label>
<div class="switch-label">
__MSG_showUploadButton__
</div>
</label>
</div>
<br/>
<br/>
<br/>
<br/>
<div option-type="toggle" sync-option="audioNotificationOnSkip">
<label class="switch-container">
<label class="switch">
<input type="checkbox" checked>
<span class="slider round"></span>
</label>
<div class="switch-label">
__MSG_audioNotification__
</div>
</label>
<br/>
<br/>
<br/>
<div class="small-description">__MSG_audioNotificationDescription__</div>
</div>
<br/>
<br/>
<div option-type="toggle" sync-option="showTimeWithSkips">
<label class="switch-container">
<label class="switch">
<input type="checkbox" checked>
<span class="slider round"></span>
</label>
<div class="switch-label">
__MSG_showTimeWithSkips__
</div>
</label>
<br/>
<br/>
<br/>
<div class="small-description">__MSG_showTimeWithSkipsDescription__</div>
</div>
<br/>
<br/>
<div option-type="toggle" sync-option="trackViewCount">
<label class="switch-container">
<label class="switch"> <label class="switch">
<input type="checkbox" checked> <input type="checkbox" checked>
<span class="slider round"></span> <span class="slider round"></span>
@@ -422,20 +346,13 @@
<div class="switch-label"> <div class="switch-label">
__MSG_enableViewTracking__ __MSG_enableViewTracking__
</div> </div>
</label> </div>
<br/>
<br/>
<br/>
<div class="small-description">__MSG_whatViewTracking__</div> <div class="small-description">__MSG_whatViewTracking__</div>
</div> </div>
<br/> <div data-type="toggle" data-sync="trackViewCountInPrivate" data-private-only="true">
<br/> <div class="switch-container">
<div option-type="toggle" sync-option="trackViewCountInPrivate" private-mode-only="true">
<label class="switch-container">
<label class="switch"> <label class="switch">
<input type="checkbox" checked> <input type="checkbox" checked>
<span class="slider round"></span> <span class="slider round"></span>
@@ -443,120 +360,102 @@
<div class="switch-label"> <div class="switch-label">
__MSG_enableViewTrackingInPrivate__ __MSG_enableViewTrackingInPrivate__
</div> </div>
</label>
<br/>
<br/>
<br/>
<br/>
</div> </div>
<div option-type="toggle" sync-option="refetchWhenNotFound">
<label class="switch-container">
<label class="switch">
<input type="checkbox" checked>
<span class="slider round"></span>
</label>
<div class="switch-label">
__MSG_enableRefetchWhenNotFound__
</div> </div>
</label>
<br/>
<br/>
<br/>
<div class="small-description">__MSG_whatRefetchWhenNotFound__</div>
</div>
<br/>
<br/>
<div option-type="toggle" toggle-type="reverse" sync-option="showDonationLink" no-safari="true">
<label class="switch-container">
<label class="switch">
<input type="checkbox" checked>
<span class="slider round"></span>
</label>
<div class="switch-label">
__MSG_hideDonationLink__
</div>
</label>
</div> </div>
<br/> <div id="import-options" class="option-group hidden">
<br/>
<br/>
<br/>
<div option-type="private-text-change" sync-option="userID" confirm-message="userIDChangeWarning"> <div data-type="private-text-change" data-sync="userID" data-confirm-message="userIDChangeWarning">
<div class="option-button trigger-button"> <div class="option-button trigger-button">
__MSG_changeUserID__ __MSG_changeUserID__
</div> </div>
<br/>
<div class="small-description">__MSG_whatChangeUserID__</div> <div class="small-description">__MSG_whatChangeUserID__</div>
<div class="option-hidden-section hidden"> <div class="option-hidden-section hidden">
<br/>
<input class="option-text-box" type="text"> <input class="option-text-box" type="text">
<br/>
<br/>
<div class="option-button text-change-set"> <div class="option-button text-change-set">
__MSG_setUserID__ __MSG_setUserID__
</div> </div>
</div> </div>
</div> </div>
<br/> <div data-type="private-text-change" data-sync="*" data-confirm-message="exportOptionsWarning">
<br/>
<div option-type="private-text-change" sync-option="*" confirm-message="exportOptionsWarning">
<div class="option-button trigger-button"> <div class="option-button trigger-button">
__MSG_exportOptions__ __MSG_exportOptions__
</div> </div>
<br/>
<div class="small-description">__MSG_whatExportOptions__</div> <div class="small-description">__MSG_whatExportOptions__</div>
<div class="option-hidden-section hidden"> <div class="option-hidden-section hidden">
<br/>
<input class="option-text-box" type="text"> <input class="option-text-box" type="text">
<br/>
<br/>
<div class="option-button text-change-set"> <div class="option-button text-change-set">
__MSG_setOptions__ __MSG_setOptions__
</div> </div>
</div> </div>
</div> </div>
<br/> </div>
<br/>
<div option-type="button-press" sync-option="copyDebugInformation" confirm-message="copyDebugInformation"> <div id="advanced-options" class="option-group hidden">
<div id="support-invidious" data-type="toggle" data-sync="supportInvidious" data-no-safari="true">
<div class="switch-container">
<label class="switch">
<input type="checkbox">
<span class="slider round"></span>
</label>
<div class="switch-label">
__MSG_supportOtherSites__
</div>
</div>
<div class="small-description">(__MSG_supportedSites__ Invidious, CloudTube)</div>
<br/>
<span class="small-description">__MSG_supportOtherSitesDescription__ </span>
</div>
<div data-type="private-text-change" data-sync="invidiousInstances" data-no-safari="true">
<div class="option-button trigger-button">
__MSG_addInvidiousInstance__
</div>
<div class="small-description">__MSG_addInvidiousInstanceDescription__</div>
<div class="option-hidden-section hidden">
<input class="option-text-box" type="text">
<div>
<div class="option-button text-change-set inline">
__MSG_add__
</div>
<div class="option-button invidious-instance-reset inline">
__MSG_resetInvidiousInstance__
</div>
</div>
<div>
<span class="small-description">__MSG_currentInstances__</span>
<span class="small-description" data-type="display" data-sync="invidiousInstances"></span>
</div>
</div>
</div>
<div data-type="button-press" data-sync="copyDebugInformation" data-confirm-message="copyDebugInformation">
<div class="option-button trigger-button"> <div class="option-button trigger-button">
__MSG_copyDebugInformation__ __MSG_copyDebugInformation__
</div> </div>
<br/>
<div class="small-description">__MSG_copyDebugInformationOptions__</div> <div class="small-description">__MSG_copyDebugInformationOptions__</div>
</div> </div>
<br/> <div data-type="toggle" data-sync="testingServer" data-confirm-message="testingServerWarning" data-no-safari="true">
<br/> <div class="switch-container">
<div option-type="toggle" sync-option="testingServer" confirm-message="testingServerWarning" no-safari="true">
<label class="switch-container">
<label class="switch"> <label class="switch">
<input type="checkbox"> <input type="checkbox">
<span class="slider round"></span> <span class="slider round"></span>
@@ -564,25 +463,17 @@
<div class="switch-label"> <div class="switch-label">
__MSG_enableTestingServer__ __MSG_enableTestingServer__
</div> </div>
</label>
<br/>
<br/>
<br/>
<div class="small-description">__MSG_whatEnableTestingServer__</div>
<br/>
<br/>
<br/>
</div> </div>
<div option-type="text-change" sync-option="serverAddress"> <div class="small-description">__MSG_whatEnableTestingServer__</div>
<label class="text-label-container"> </div>
<div data-type="text-change" data-sync="serverAddress">
<div class="text-label-container inline">
<div>__MSG_customServerAddress__</div> <div>__MSG_customServerAddress__</div>
<input class="option-text-box" type="text"> <input class="option-text-box" type="text">
</label> </div>
<div class="option-button text-change-set inline"> <div class="option-button text-change-set inline">
__MSG_save__ __MSG_save__
@@ -592,13 +483,13 @@
__MSG_reset__ __MSG_reset__
</div> </div>
<br/>
<br/>
<div class="small-description">__MSG_customServerAddressDescription__</div> <div class="small-description">__MSG_customServerAddressDescription__</div>
</div> </div>
</div> </div>
</div>
</div> </div>
</body> </body>

16
src/components/CategoryChooserComponent.tsx
View File

@@ -31,24 +31,24 @@ class CategoryChooserComponent extends React.Component<CategoryChooserProps, Cat
{/* Headers */} {/* Headers */}
<tr id={"CategoryOptionsRow"} <tr id={"CategoryOptionsRow"}
className="categoryTableElement categoryTableHeader"> className="categoryTableElement categoryTableHeader">
<td id={"CategoryOptionName"}> <th id={"CategoryOptionName"}>
{chrome.i18n.getMessage("category")} {chrome.i18n.getMessage("category")}
</td> </th>
<td id={"CategorySkipOption"} <th id={"CategorySkipOption"}
className="skipOption"> className="skipOption">
{chrome.i18n.getMessage("skipOption")} {chrome.i18n.getMessage("skipOption")}
</td> </th>
<td id={"CategoryColorOption"} <th id={"CategoryColorOption"}
className="colorOption"> className="colorOption">
{chrome.i18n.getMessage("seekBarColor")} {chrome.i18n.getMessage("seekBarColor")}
</td> </th>
<td id={"CategoryPreviewColorOption"} <th id={"CategoryPreviewColorOption"}
className="previewColorOption"> className="previewColorOption">
{chrome.i18n.getMessage("previewColor")} {chrome.i18n.getMessage("previewColor")}
</td> </th>
</tr> </tr>
{this.getCategorySkipOptions()} {this.getCategorySkipOptions()}

46
src/options.ts
View File

@@ -38,23 +38,23 @@ async function init() {
const optionsElements = optionsContainer.querySelectorAll("*"); const optionsElements = optionsContainer.querySelectorAll("*");
for (let i = 0; i < optionsElements.length; i++) { for (let i = 0; i < optionsElements.length; i++) {
if ((optionsElements[i].getAttribute("private-mode-only") === "true" && !(await isIncognitoAllowed())) if ((optionsElements[i].getAttribute("data-private-only") === "true" && !(await isIncognitoAllowed()))
|| (optionsElements[i].getAttribute("no-safari") === "true" && navigator.vendor === "Apple Computer, Inc.") || (optionsElements[i].getAttribute("data-no-safari") === "true" && navigator.vendor === "Apple Computer, Inc.")
|| (optionsElements[i].getAttribute("if-false") && Config.config[optionsElements[i].getAttribute("if-false")])) { || (optionsElements[i].getAttribute("data-dependent-on") && Config.config[optionsElements[i].getAttribute("data-dependent-on")])) {
optionsElements[i].classList.add("hidden"); optionsElements[i].classList.add("hidden");
continue; continue;
} }
const option = optionsElements[i].getAttribute("sync-option"); const option = optionsElements[i].getAttribute("data-sync");
switch (optionsElements[i].getAttribute("option-type")) { switch (optionsElements[i].getAttribute("data-type")) {
case "toggle": { case "toggle": {
const optionResult = Config.config[option]; const optionResult = Config.config[option];
const checkbox = optionsElements[i].querySelector("input"); const checkbox = optionsElements[i].querySelector("input");
const reverse = optionsElements[i].getAttribute("toggle-type") === "reverse"; const reverse = optionsElements[i].getAttribute("data-toggle-type") === "reverse";
const confirmMessage = optionsElements[i].getAttribute("confirm-message"); const confirmMessage = optionsElements[i].getAttribute("data-confirm-message");
if (optionResult != undefined) { if (optionResult != undefined) {
checkbox.checked = optionResult; checkbox.checked = optionResult;
@@ -91,7 +91,7 @@ async function init() {
// Enable the notice // Enable the notice
Config.config["dontShowNotice"] = false; Config.config["dontShowNotice"] = false;
const showNoticeSwitch = <HTMLInputElement> document.querySelector("[sync-option='dontShowNotice'] > label > label > input"); const showNoticeSwitch = <HTMLInputElement> document.querySelector("[data-sync='dontShowNotice'] > div > label > input");
showNoticeSwitch.checked = true; showNoticeSwitch.checked = true;
} }
@@ -154,7 +154,7 @@ async function init() {
const button = optionsElements[i].querySelector(".trigger-button"); const button = optionsElements[i].querySelector(".trigger-button");
button.addEventListener("click", () => activatePrivateTextChange(<HTMLElement> optionsElements[i])); button.addEventListener("click", () => activatePrivateTextChange(<HTMLElement> optionsElements[i]));
const privateTextChangeOption = optionsElements[i].getAttribute("sync-option"); const privateTextChangeOption = optionsElements[i].getAttribute("data-sync");
// See if anything extra must be done // See if anything extra must be done
switch (privateTextChangeOption) { switch (privateTextChangeOption) {
case "invidiousInstances": case "invidiousInstances":
@@ -166,7 +166,7 @@ async function init() {
case "button-press": { case "button-press": {
const actionButton = optionsElements[i].querySelector(".trigger-button"); const actionButton = optionsElements[i].querySelector(".trigger-button");
switch(optionsElements[i].getAttribute("sync-option")) { switch(optionsElements[i].getAttribute("data-sync")) {
case "copyDebugInformation": case "copyDebugInformation":
actionButton.addEventListener("click", copyDebugOutputToClipboard); actionButton.addEventListener("click", copyDebugOutputToClipboard);
break; break;
@@ -219,6 +219,18 @@ async function init() {
} }
} }
// Tab interaction
const tabElements = document.getElementsByClassName("tab-heading");
for (let i = 0; i < tabElements.length; i++) {
tabElements[i].addEventListener("click", () => {
document.querySelectorAll(".tab-heading").forEach(element => { element.classList.remove("selected"); });
optionsContainer.querySelectorAll(".option-group").forEach(element => { element.classList.add("hidden"); });
tabElements[i].classList.add("selected");
document.getElementById(tabElements[i].getAttribute("data-for")).classList.remove("hidden");
});
}
optionsContainer.classList.remove("hidden"); optionsContainer.classList.remove("hidden");
optionsContainer.classList.add("animated"); optionsContainer.classList.add("animated");
} }
@@ -233,7 +245,7 @@ function optionsConfigUpdateListener() {
const optionsElements = optionsContainer.querySelectorAll("*"); const optionsElements = optionsContainer.querySelectorAll("*");
for (let i = 0; i < optionsElements.length; i++) { for (let i = 0; i < optionsElements.length; i++) {
switch (optionsElements[i].getAttribute("option-type")) { switch (optionsElements[i].getAttribute("data-type")) {
case "display": case "display":
updateDisplayElement(<HTMLElement> optionsElements[i]) updateDisplayElement(<HTMLElement> optionsElements[i])
} }
@@ -246,7 +258,7 @@ function optionsConfigUpdateListener() {
* @param element * @param element
*/ */
function updateDisplayElement(element: HTMLElement) { function updateDisplayElement(element: HTMLElement) {
const displayOption = element.getAttribute("sync-option") const displayOption = element.getAttribute("data-sync")
const displayText = Config.config[displayOption]; const displayText = Config.config[displayOption];
element.innerText = displayText; element.innerText = displayText;
@@ -361,7 +373,7 @@ function activateKeybindChange(element: HTMLElement) {
button.classList.add("disabled"); button.classList.add("disabled");
const option = element.getAttribute("sync-option"); const option = element.getAttribute("data-sync");
const currentlySet = Config.config[option] !== null ? chrome.i18n.getMessage("keybindCurrentlySet") : ""; const currentlySet = Config.config[option] !== null ? chrome.i18n.getMessage("keybindCurrentlySet") : "";
@@ -393,7 +405,7 @@ function keybindKeyPressed(element: HTMLElement, e: KeyboardEvent) {
document.addEventListener("keydown", (e) => keybindKeyPressed(element, e), {once: true}); document.addEventListener("keydown", (e) => keybindKeyPressed(element, e), {once: true});
} else { } else {
const button: HTMLElement = element.querySelector(".trigger-button"); const button: HTMLElement = element.querySelector(".trigger-button");
const option = element.getAttribute("sync-option"); const option = element.getAttribute("data-sync");
// Make sure keybind isn't used by the other listener // Make sure keybind isn't used by the other listener
// TODO: If other keybindings are going to be added, we need a better way to find the other keys used. // TODO: If other keybindings are going to be added, we need a better way to find the other keys used.
@@ -447,7 +459,7 @@ function activatePrivateTextChange(element: HTMLElement) {
button.classList.add("disabled"); button.classList.add("disabled");
const textBox = <HTMLInputElement> element.querySelector(".option-text-box"); const textBox = <HTMLInputElement> element.querySelector(".option-text-box");
const option = element.getAttribute("sync-option"); const option = element.getAttribute("data-sync");
// See if anything extra must be done // See if anything extra must be done
switch (option) { switch (option) {
@@ -475,7 +487,7 @@ function activatePrivateTextChange(element: HTMLElement) {
const setButton = element.querySelector(".text-change-set"); const setButton = element.querySelector(".text-change-set");
setButton.addEventListener("click", async () => { setButton.addEventListener("click", async () => {
const confirmMessage = element.getAttribute("confirm-message"); const confirmMessage = element.getAttribute("data-confirm-message");
if (confirmMessage === null || confirm(chrome.i18n.getMessage(confirmMessage))) { if (confirmMessage === null || confirm(chrome.i18n.getMessage(confirmMessage))) {
@@ -490,7 +502,7 @@ function activatePrivateTextChange(element: HTMLElement) {
Config.convertJSON(); Config.convertJSON();
if (newConfig.supportInvidious) { if (newConfig.supportInvidious) {
const checkbox = <HTMLInputElement> document.querySelector("#support-invidious > label > label > input"); const checkbox = <HTMLInputElement> document.querySelector("#support-invidious > div > label > input");
checkbox.checked = true; checkbox.checked = true;
await invidiousOnClick(checkbox, "supportInvidious"); await invidiousOnClick(checkbox, "supportInvidious");