mirror of
https://github.com/ajayyy/SponsorBlock.git
synced 2025-12-08 20:47:11 +03:00
group settings into tabs
This commit is contained in:
Áron Hegymegi-Kiss
@@ -845,5 +845,33 @@
|
||||
"hourAbbreviation": {
|
||||
"message": "h",
|
||||
"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"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,10 +1,138 @@
|
||||
/* Options page CSS */
|
||||
|
||||
/* Dark mode CSS, this is the default if unsupported */
|
||||
html {
|
||||
color-scheme: dark;
|
||||
}
|
||||
|
||||
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;
|
||||
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 {
|
||||
@@ -28,12 +156,19 @@ body {
|
||||
}
|
||||
|
||||
.small-description{
|
||||
color: white;
|
||||
font-size: 13px;
|
||||
padding: 15px 0 0 20px;
|
||||
}
|
||||
|
||||
.small-description td {
|
||||
padding: 10px 0 20px 20px;
|
||||
}
|
||||
|
||||
.categoryTableElement td {
|
||||
padding-top: 10px;
|
||||
}
|
||||
|
||||
.medium-description {
|
||||
color: white;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
@@ -53,21 +188,23 @@ body {
|
||||
width: max-content;
|
||||
}
|
||||
|
||||
.option-button:hover {
|
||||
.option-button:hover:not(.disabled) {
|
||||
background-color: #fc0303;
|
||||
}
|
||||
|
||||
.option-button.disabled {
|
||||
cursor: default;
|
||||
|
||||
background-color: #520000;
|
||||
color: grey;
|
||||
}
|
||||
|
||||
#options {
|
||||
max-width: 60%;
|
||||
height: 100vh;
|
||||
flex-basis: 80%;
|
||||
overflow: auto;
|
||||
text-align: left;
|
||||
display: inline-block;
|
||||
padding: 80px 15px 0 3%;
|
||||
box-sizing: border-box;
|
||||
|
||||
transition: padding 0.3s;
|
||||
}
|
||||
|
||||
#options.embed {
|
||||
@@ -76,13 +213,15 @@ body {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
#title .profilepic {
|
||||
height: 60px;
|
||||
}
|
||||
|
||||
.switch-container {
|
||||
content: attr(label-name);
|
||||
position: absolute;
|
||||
width: max-content;
|
||||
|
||||
font-size: 14px;
|
||||
color: white;
|
||||
|
||||
display: table;
|
||||
}
|
||||
@@ -96,7 +235,6 @@ body {
|
||||
|
||||
.text-label-container {
|
||||
font-size: 14px;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.switch {
|
||||
@@ -119,7 +257,6 @@ body {
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: #707070;
|
||||
}
|
||||
|
||||
.animated * {
|
||||
@@ -162,11 +299,8 @@ input:checked + .slider:before {
|
||||
}
|
||||
|
||||
|
||||
/* Boilerplate CSS from https://ajay.app */
|
||||
|
||||
body {
|
||||
background-color: #333333;
|
||||
}
|
||||
/* Boilerplate CSS from https://ajay.app (edited) */
|
||||
|
||||
.projectPreview {
|
||||
position: relative;
|
||||
@@ -196,29 +330,21 @@ body {
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
.createdBy {
|
||||
#createdBy {
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
padding-top: 0px;
|
||||
padding-bottom: 0px;
|
||||
|
||||
display: inline-block;
|
||||
margin-top: auto;
|
||||
}
|
||||
|
||||
#title {
|
||||
background-color: #636363;
|
||||
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
|
||||
font-size: 50px;
|
||||
color: #212121;
|
||||
font-size: 40px;
|
||||
|
||||
padding: 20px;
|
||||
|
||||
text-decoration: none;
|
||||
|
||||
transition: font-size 1s;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
@@ -237,7 +363,6 @@ body {
|
||||
}
|
||||
|
||||
.profilepic {
|
||||
background-color: #636363 !important;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
@@ -281,21 +406,9 @@ a {
|
||||
|
||||
p,li {
|
||||
font-size: 20px;
|
||||
color: #c4c4c4;
|
||||
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
@media screen and (orientation:portrait) {
|
||||
#options {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.previewColorOption {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.previewImage {
|
||||
max-height: 200px;
|
||||
}
|
||||
@@ -316,10 +429,6 @@ img {
|
||||
color: #dad8d8;
|
||||
}
|
||||
|
||||
h1,h2,h3,h4,h5,h6 {
|
||||
color: #dad8d8;
|
||||
}
|
||||
|
||||
svg {
|
||||
text-decoration: none;
|
||||
}
|
||||
@@ -337,8 +446,6 @@ svg {
|
||||
|
||||
.categoryTableElement {
|
||||
font-size: 16px;
|
||||
|
||||
color: white;
|
||||
}
|
||||
|
||||
.categoryTableElement > * {
|
||||
@@ -369,3 +476,49 @@ svg {
|
||||
#sbDonate {
|
||||
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;
|
||||
}
|
||||
}
|
||||
@@ -13,29 +13,66 @@
|
||||
|
||||
<body class="sponsorBlockPageBody">
|
||||
|
||||
<div id="options-container">
|
||||
|
||||
<div id="navigation" class="center">
|
||||
|
||||
<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
|
||||
</div>
|
||||
|
||||
<div class="center">
|
||||
<p class="createdBy titleBar">
|
||||
<img src="../icons/newprofilepic.jpg" height="30" class="profilepiccircle"/>
|
||||
<div class="tab-heading selected" data-for="segment-options">
|
||||
__MSG_optionsTabCategories__
|
||||
</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__
|
||||
<a href="https://ajay.app">Ajay Ramachandran</a>
|
||||
<a href="https://sponsor.ajay.app/donate" target="_blank" rel="noopener" id="sbDonate">(__MSG_Donate__)</a>
|
||||
</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 option-type="toggle" sync-option="autoSkipOnMusicVideos">
|
||||
<label class="switch-container">
|
||||
</div>
|
||||
|
||||
<div id="logic-options" class="option-group hidden">
|
||||
|
||||
<div data-type="toggle" data-sync="autoSkipOnMusicVideos">
|
||||
<div class="switch-container">
|
||||
<label class="switch">
|
||||
<input type="checkbox" checked>
|
||||
<span class="slider round"></span>
|
||||
@@ -43,15 +80,11 @@
|
||||
<div class="switch-label">
|
||||
__MSG_autoSkipOnMusicVideos__
|
||||
</div>
|
||||
</label>
|
||||
|
||||
<br/>
|
||||
<br/>
|
||||
<br/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div option-type="toggle" sync-option="muteSegments">
|
||||
<label class="switch-container">
|
||||
<div data-type="toggle" data-sync="muteSegments">
|
||||
<div class="switch-container">
|
||||
<label class="switch">
|
||||
<input type="checkbox" checked>
|
||||
<span class="slider round"></span>
|
||||
@@ -59,84 +92,203 @@
|
||||
<div class="switch-label">
|
||||
__MSG_muteSegments__
|
||||
</div>
|
||||
</label>
|
||||
|
||||
<br/>
|
||||
<br/>
|
||||
<br/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<br/>
|
||||
<br/>
|
||||
<div data-type="number-change" data-sync="minDuration">
|
||||
<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">
|
||||
<label class="switch-container">
|
||||
<div class="small-description">__MSG_minDurationDescription__</div>
|
||||
</div>
|
||||
|
||||
<div data-type="toggle" data-sync="forceChannelCheck">
|
||||
<div class="switch-container">
|
||||
<label class="switch">
|
||||
<input type="checkbox">
|
||||
<input type="checkbox" checked>
|
||||
<span class="slider round"></span>
|
||||
</label>
|
||||
<div class="switch-label">
|
||||
__MSG_supportOtherSites__
|
||||
__MSG_forceChannelCheck__
|
||||
</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>
|
||||
|
||||
<br/>
|
||||
<br/>
|
||||
<br/>
|
||||
|
||||
<div class="small-description">(__MSG_supportedSites__ Invidious, CloudTube)</div>
|
||||
<br/>
|
||||
<span class="small-description">__MSG_supportOtherSitesDescription__ </span>
|
||||
|
||||
<br/>
|
||||
<br/>
|
||||
<br/>
|
||||
<div class="small-description">__MSG_skipNoticeDurationDescription__</div>
|
||||
</div>
|
||||
|
||||
<div option-type="private-text-change" sync-option="invidiousInstances" no-safari="true">
|
||||
<div class="option-button trigger-button">
|
||||
__MSG_addInvidiousInstance__
|
||||
<div data-type="toggle" data-toggle-type="reverse" data-sync="dontShowNotice">
|
||||
<div class="switch-container">
|
||||
<label class="switch">
|
||||
<input type="checkbox" checked>
|
||||
<span class="slider round"></span>
|
||||
</label>
|
||||
<div class="switch-label">
|
||||
__MSG_showSkipNotice__
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<br/>
|
||||
|
||||
<div class="small-description">__MSG_addInvidiousInstanceDescription__</div>
|
||||
|
||||
<div class="option-hidden-section hidden">
|
||||
<br/>
|
||||
|
||||
<input class="option-text-box" type="text">
|
||||
|
||||
<br/>
|
||||
<br/>
|
||||
|
||||
<div class="option-button text-change-set inline">
|
||||
__MSG_add__
|
||||
<div data-type="selector" data-sync="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>
|
||||
|
||||
<div class="option-button invidious-instance-reset inline">
|
||||
__MSG_resetInvidiousInstance__
|
||||
<div data-type="toggle" data-toggle-type="reverse" data-sync="hideVideoPlayerControls">
|
||||
<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>
|
||||
|
||||
<br/>
|
||||
<br/>
|
||||
|
||||
<span class="small-description">__MSG_currentInstances__</span>
|
||||
<span class="small-description" option-type="display" sync-option="invidiousInstances"></span>
|
||||
<div class="small-description">__MSG_hideButtonsDescription__</div>
|
||||
</div>
|
||||
|
||||
<br/>
|
||||
<br/>
|
||||
<div data-type="toggle" data-toggle-type="reverse" data-sync="hideSkipButtonPlayerControls">
|
||||
<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 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">
|
||||
__MSG_setSkipShortcut__
|
||||
</div>
|
||||
|
||||
<div class="option-hidden-section hidden">
|
||||
<br/>
|
||||
|
||||
<div class="medium-description keybind-status">
|
||||
__MSG_keybindDescription__
|
||||
</div>
|
||||
@@ -147,10 +299,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<br/>
|
||||
<br/>
|
||||
|
||||
<div option-type="keybind-change" sync-option="startSponsorKeybind">
|
||||
<div data-type="keybind-change" data-sync="startSponsorKeybind">
|
||||
<div class="option-button trigger-button">
|
||||
__MSG_setStartSponsorShortcut__
|
||||
</div>
|
||||
@@ -168,17 +317,12 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<br/>
|
||||
<br/>
|
||||
|
||||
<div option-type="keybind-change" sync-option="submitKeybind">
|
||||
<div data-type="keybind-change" data-sync="submitKeybind">
|
||||
<div class="option-button trigger-button">
|
||||
__MSG_setSubmitKeybind__
|
||||
</div>
|
||||
|
||||
<div class="option-hidden-section hidden">
|
||||
<br/>
|
||||
|
||||
<div class="medium-description keybind-status">
|
||||
__MSG_keybindDescription__
|
||||
</div>
|
||||
@@ -189,232 +333,12 @@
|
||||
</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>
|
||||
|
||||
<br/>
|
||||
<br/>
|
||||
<div id="privacy-options" class="option-group hidden">
|
||||
|
||||
<div option-type="number-change" sync-option="minDuration">
|
||||
<label class="number-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">
|
||||
<div data-type="toggle" data-sync="trackViewCount">
|
||||
<div class="switch-container">
|
||||
<label class="switch">
|
||||
<input type="checkbox" checked>
|
||||
<span class="slider round"></span>
|
||||
@@ -422,20 +346,13 @@
|
||||
<div class="switch-label">
|
||||
__MSG_enableViewTracking__
|
||||
</div>
|
||||
</label>
|
||||
|
||||
<br/>
|
||||
<br/>
|
||||
<br/>
|
||||
</div>
|
||||
|
||||
<div class="small-description">__MSG_whatViewTracking__</div>
|
||||
</div>
|
||||
|
||||
<br/>
|
||||
<br/>
|
||||
|
||||
<div option-type="toggle" sync-option="trackViewCountInPrivate" private-mode-only="true">
|
||||
<label class="switch-container">
|
||||
<div data-type="toggle" data-sync="trackViewCountInPrivate" data-private-only="true">
|
||||
<div class="switch-container">
|
||||
<label class="switch">
|
||||
<input type="checkbox" checked>
|
||||
<span class="slider round"></span>
|
||||
@@ -443,120 +360,102 @@
|
||||
<div class="switch-label">
|
||||
__MSG_enableViewTrackingInPrivate__
|
||||
</div>
|
||||
</label>
|
||||
|
||||
<br/>
|
||||
<br/>
|
||||
<br/>
|
||||
<br/>
|
||||
</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>
|
||||
</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>
|
||||
|
||||
<br/>
|
||||
<br/>
|
||||
<br/>
|
||||
<br/>
|
||||
<div id="import-options" class="option-group hidden">
|
||||
|
||||
<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">
|
||||
__MSG_changeUserID__
|
||||
</div>
|
||||
|
||||
<br/>
|
||||
|
||||
<div class="small-description">__MSG_whatChangeUserID__</div>
|
||||
|
||||
<div class="option-hidden-section hidden">
|
||||
<br/>
|
||||
|
||||
<input class="option-text-box" type="text">
|
||||
|
||||
<br/>
|
||||
<br/>
|
||||
|
||||
<div class="option-button text-change-set">
|
||||
__MSG_setUserID__
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<br/>
|
||||
<br/>
|
||||
|
||||
<div option-type="private-text-change" sync-option="*" confirm-message="exportOptionsWarning">
|
||||
<div data-type="private-text-change" data-sync="*" data-confirm-message="exportOptionsWarning">
|
||||
<div class="option-button trigger-button">
|
||||
__MSG_exportOptions__
|
||||
</div>
|
||||
|
||||
<br/>
|
||||
|
||||
<div class="small-description">__MSG_whatExportOptions__</div>
|
||||
|
||||
<div class="option-hidden-section hidden">
|
||||
<br/>
|
||||
|
||||
<input class="option-text-box" type="text">
|
||||
|
||||
<br/>
|
||||
<br/>
|
||||
|
||||
<div class="option-button text-change-set">
|
||||
__MSG_setOptions__
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<br/>
|
||||
<br/>
|
||||
</div>
|
||||
|
||||
<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">
|
||||
__MSG_copyDebugInformation__
|
||||
</div>
|
||||
|
||||
<br/>
|
||||
|
||||
<div class="small-description">__MSG_copyDebugInformationOptions__</div>
|
||||
</div>
|
||||
|
||||
<br/>
|
||||
<br/>
|
||||
|
||||
<div option-type="toggle" sync-option="testingServer" confirm-message="testingServerWarning" no-safari="true">
|
||||
<label class="switch-container">
|
||||
<div data-type="toggle" data-sync="testingServer" data-confirm-message="testingServerWarning" data-no-safari="true">
|
||||
<div class="switch-container">
|
||||
<label class="switch">
|
||||
<input type="checkbox">
|
||||
<span class="slider round"></span>
|
||||
@@ -564,25 +463,17 @@
|
||||
<div class="switch-label">
|
||||
__MSG_enableTestingServer__
|
||||
</div>
|
||||
</label>
|
||||
|
||||
<br/>
|
||||
<br/>
|
||||
<br/>
|
||||
|
||||
<div class="small-description">__MSG_whatEnableTestingServer__</div>
|
||||
|
||||
<br/>
|
||||
<br/>
|
||||
<br/>
|
||||
</div>
|
||||
|
||||
<div option-type="text-change" sync-option="serverAddress">
|
||||
<label class="text-label-container">
|
||||
<div class="small-description">__MSG_whatEnableTestingServer__</div>
|
||||
</div>
|
||||
|
||||
<div data-type="text-change" data-sync="serverAddress">
|
||||
<div class="text-label-container inline">
|
||||
<div>__MSG_customServerAddress__</div>
|
||||
|
||||
<input class="option-text-box" type="text">
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="option-button text-change-set inline">
|
||||
__MSG_save__
|
||||
@@ -592,13 +483,13 @@
|
||||
__MSG_reset__
|
||||
</div>
|
||||
|
||||
<br/>
|
||||
<br/>
|
||||
|
||||
<div class="small-description">__MSG_customServerAddressDescription__</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
|
||||
@@ -31,24 +31,24 @@ class CategoryChooserComponent extends React.Component<CategoryChooserProps, Cat
|
||||
{/* Headers */}
|
||||
<tr id={"CategoryOptionsRow"}
|
||||
className="categoryTableElement categoryTableHeader">
|
||||
<td id={"CategoryOptionName"}>
|
||||
<th id={"CategoryOptionName"}>
|
||||
{chrome.i18n.getMessage("category")}
|
||||
</td>
|
||||
</th>
|
||||
|
||||
<td id={"CategorySkipOption"}
|
||||
<th id={"CategorySkipOption"}
|
||||
className="skipOption">
|
||||
{chrome.i18n.getMessage("skipOption")}
|
||||
</td>
|
||||
</th>
|
||||
|
||||
<td id={"CategoryColorOption"}
|
||||
<th id={"CategoryColorOption"}
|
||||
className="colorOption">
|
||||
{chrome.i18n.getMessage("seekBarColor")}
|
||||
</td>
|
||||
</th>
|
||||
|
||||
<td id={"CategoryPreviewColorOption"}
|
||||
<th id={"CategoryPreviewColorOption"}
|
||||
className="previewColorOption">
|
||||
{chrome.i18n.getMessage("previewColor")}
|
||||
</td>
|
||||
</th>
|
||||
</tr>
|
||||
|
||||
{this.getCategorySkipOptions()}
|
||||
|
||||
@@ -38,23 +38,23 @@ async function init() {
|
||||
const optionsElements = optionsContainer.querySelectorAll("*");
|
||||
|
||||
for (let i = 0; i < optionsElements.length; i++) {
|
||||
if ((optionsElements[i].getAttribute("private-mode-only") === "true" && !(await isIncognitoAllowed()))
|
||||
|| (optionsElements[i].getAttribute("no-safari") === "true" && navigator.vendor === "Apple Computer, Inc.")
|
||||
|| (optionsElements[i].getAttribute("if-false") && Config.config[optionsElements[i].getAttribute("if-false")])) {
|
||||
if ((optionsElements[i].getAttribute("data-private-only") === "true" && !(await isIncognitoAllowed()))
|
||||
|| (optionsElements[i].getAttribute("data-no-safari") === "true" && navigator.vendor === "Apple Computer, Inc.")
|
||||
|| (optionsElements[i].getAttribute("data-dependent-on") && Config.config[optionsElements[i].getAttribute("data-dependent-on")])) {
|
||||
optionsElements[i].classList.add("hidden");
|
||||
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": {
|
||||
const optionResult = Config.config[option];
|
||||
|
||||
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) {
|
||||
checkbox.checked = optionResult;
|
||||
@@ -91,7 +91,7 @@ async function init() {
|
||||
// Enable the notice
|
||||
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;
|
||||
}
|
||||
|
||||
@@ -154,7 +154,7 @@ async function init() {
|
||||
const button = optionsElements[i].querySelector(".trigger-button");
|
||||
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
|
||||
switch (privateTextChangeOption) {
|
||||
case "invidiousInstances":
|
||||
@@ -166,7 +166,7 @@ async function init() {
|
||||
case "button-press": {
|
||||
const actionButton = optionsElements[i].querySelector(".trigger-button");
|
||||
|
||||
switch(optionsElements[i].getAttribute("sync-option")) {
|
||||
switch(optionsElements[i].getAttribute("data-sync")) {
|
||||
case "copyDebugInformation":
|
||||
actionButton.addEventListener("click", copyDebugOutputToClipboard);
|
||||
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.add("animated");
|
||||
}
|
||||
@@ -233,7 +245,7 @@ function optionsConfigUpdateListener() {
|
||||
const optionsElements = optionsContainer.querySelectorAll("*");
|
||||
|
||||
for (let i = 0; i < optionsElements.length; i++) {
|
||||
switch (optionsElements[i].getAttribute("option-type")) {
|
||||
switch (optionsElements[i].getAttribute("data-type")) {
|
||||
case "display":
|
||||
updateDisplayElement(<HTMLElement> optionsElements[i])
|
||||
}
|
||||
@@ -246,7 +258,7 @@ function optionsConfigUpdateListener() {
|
||||
* @param element
|
||||
*/
|
||||
function updateDisplayElement(element: HTMLElement) {
|
||||
const displayOption = element.getAttribute("sync-option")
|
||||
const displayOption = element.getAttribute("data-sync")
|
||||
const displayText = Config.config[displayOption];
|
||||
element.innerText = displayText;
|
||||
|
||||
@@ -361,7 +373,7 @@ function activateKeybindChange(element: HTMLElement) {
|
||||
|
||||
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") : "";
|
||||
|
||||
@@ -393,7 +405,7 @@ function keybindKeyPressed(element: HTMLElement, e: KeyboardEvent) {
|
||||
document.addEventListener("keydown", (e) => keybindKeyPressed(element, e), {once: true});
|
||||
} else {
|
||||
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
|
||||
// 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");
|
||||
|
||||
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
|
||||
switch (option) {
|
||||
@@ -475,7 +487,7 @@ function activatePrivateTextChange(element: HTMLElement) {
|
||||
|
||||
const setButton = element.querySelector(".text-change-set");
|
||||
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))) {
|
||||
|
||||
@@ -490,7 +502,7 @@ function activatePrivateTextChange(element: HTMLElement) {
|
||||
Config.convertJSON();
|
||||
|
||||
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;
|
||||
await invidiousOnClick(checkbox, "supportInvidious");
|
||||
|
||||
Reference in New Issue
Block a user