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

show version + clickable labels

Browse Source
This commit is contained in:
Áron Hegymegi-Kiss
2021-12-13 12:14:51 +01:00
parent 4971824067
commit 9a9e564dbf
3 changed files with 88 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
public/options/options.css
View File

@@ -18,7 +18,7 @@ body {
.tab-heading:hover {
outline: 3px solid white;
}
.medium-description, .switch-container, .text-label-container, .categoryTableElement {
.medium-description, .switch-container, .optionLabel, .categoryTableElement {
color: white;
}
.small-description, p,li {
@@ -61,7 +61,7 @@ h1,h2,h3,h4,h5,h6 {
.tab-heading:hover {
outline: 3px solid #2e2e2e;
}
.medium-description, .switch-container, .text-label-container, .categoryTableElement {
.medium-description, .switch-container, .optionLabel, .categoryTableElement {
color: black;
}
.small-description, p,li {
@@ -119,6 +119,9 @@ html, body {
margin: 0 auto;
border-radius: 15px;
cursor: pointer;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.tab-heading.selected {
@@ -135,7 +138,7 @@ html, body {
border-bottom: inherit;
}
.optionLabel {
.optionLabel, #version {
font-size: 14px;
}
@@ -247,10 +250,6 @@ input[type='number'] {
padding: 4px;
}
.text-label-container {
font-size: 14px;
}
.switch {
position: relative;
display: inline-block;
@@ -529,6 +528,9 @@ svg {
margin: unset;
width: 100%;
}
#version {
font-size: 10px;
}
}
@media only screen and (max-width: 800px) {

125
public/options/options.html
View File

@@ -20,6 +20,7 @@
<div id="title" class="titleBar">
<img src="../icons/LogoSponsorBlocker256px.png" class="profilepic" alt="SponsorBlock logo"/>
SponsorBlock
<div id="version"></div>
</div>
<div class="tab-heading selected" data-for="segment-options">
@@ -59,7 +60,7 @@
</div>
<div id="options">
<div id="options" class="hidden">
<div id="segment-options" class="option-group">
@@ -74,31 +75,30 @@
<div data-type="toggle" data-sync="autoSkipOnMusicVideos">
<div class="switch-container">
<label class="switch">
<input type="checkbox" checked>
<input id="autoSkipOnMusicVideos" type="checkbox" checked>
<span class="slider round"></span>
</label>
<div class="switch-label">
<label class="switch-label" for="autoSkipOnMusicVideos">
__MSG_autoSkipOnMusicVideos__
</div>
</label>
</div>
</div>
<div data-type="toggle" data-sync="muteSegments">
<div class="switch-container">
<label class="switch">
<input type="checkbox" checked>
<input id="muteSegments" type="checkbox" checked>
<span class="slider round"></span>
</label>
<div class="switch-label">
<label class="switch-label" for="muteSegments">
__MSG_muteSegments__
</div>
</label>
</div>
</div>
<div data-type="number-change" data-sync="minDuration">
<span class="optionLabel">__MSG_minDuration__</span>
<label class="number-container">
<span class="optionLabel">__MSG_minDuration__</span>
<input type="number" step="0.1" min="0">
</label>
@@ -108,12 +108,12 @@
<div data-type="toggle" data-sync="forceChannelCheck">
<div class="switch-container">
<label class="switch">
<input type="checkbox" checked>
<input id="forceChannelCheck" type="checkbox" checked>
<span class="slider round"></span>
</label>
<div class="switch-label">
<label class="switch-label" for="forceChannelCheck">
__MSG_forceChannelCheck__
</div>
</label>
</div>
<div class="small-description">__MSG_whatForceChannelCheck__</div>
@@ -122,12 +122,12 @@
<div data-type="toggle" data-sync="refetchWhenNotFound">
<div class="switch-container">
<label class="switch">
<input type="checkbox" checked>
<input id="refetchWhenNotFound" type="checkbox" checked>
<span class="slider round"></span>
</label>
<div class="switch-label">
<label class="switch-label" for="refetchWhenNotFound">
__MSG_enableRefetchWhenNotFound__
</div>
</label>
</div>
<div class="small-description">__MSG_whatRefetchWhenNotFound__</div>
@@ -138,9 +138,8 @@
<div id="interface-options" class="option-group hidden">
<div data-type="number-change" data-sync="skipNoticeDuration">
<span class="optionLabel">__MSG_skipNoticeDuration__</span>
<label class="number-container">
<span class="optionLabel">__MSG_skipNoticeDuration__</span>
<input type="number" step="1" min="1">
</label>
@@ -150,19 +149,19 @@
<div data-type="toggle" data-toggle-type="reverse" data-sync="dontShowNotice">
<div class="switch-container">
<label class="switch">
<input type="checkbox" checked>
<input id="dontShowNotice" type="checkbox" checked>
<span class="slider round"></span>
</label>
<div class="switch-label">
<label class="switch-label" for="dontShowNotice">
__MSG_showSkipNotice__
</div>
</label>
</div>
</div>
<div data-type="selector" data-sync="noticeVisibilityMode">
<span class="optionLabel">__MSG_noticeVisibilityLabel__</span>
<label class="optionLabel" for="noticeVisibilityMode">__MSG_noticeVisibilityLabel__</label>
<select class="selector-element optionsSelector" >
<select id="noticeVisibilityMode" class="selector-element optionsSelector" >
<option value="0">__MSG_noticeVisibilityMode0__</option>
<option value="1">__MSG_noticeVisibilityMode1__</option>
<option value="2">__MSG_noticeVisibilityMode2__</option>
@@ -174,12 +173,12 @@
<div data-type="toggle" data-toggle-type="reverse" data-sync="hideVideoPlayerControls">
<div class="switch-container">
<label class="switch">
<input type="checkbox" checked>
<input id="hideVideoPlayerControls" type="checkbox" checked>
<span class="slider round"></span>
</label>
<div class="switch-label">
<label class="switch-label" for="hideVideoPlayerControls">
__MSG_showButtons__
</div>
</label>
</div>
<div class="small-description">__MSG_hideButtonsDescription__</div>
@@ -188,72 +187,72 @@
<div data-type="toggle" data-toggle-type="reverse" data-sync="hideDeleteButtonPlayerControls" data-dependent-on="hideVideoPlayerControls">
<div class="switch-container">
<label class="switch">
<input type="checkbox" checked>
<input id="hideDeleteButtonPlayerControls" type="checkbox" checked>
<span class="slider round"></span>
</label>
<div class="switch-label">
<label class="switch-label" for="hideDeleteButtonPlayerControls">
__MSG_showDeleteButton__
</div>
</label>
</div>
</div>
<div data-type="toggle" data-toggle-type="reverse" data-sync="hideUploadButtonPlayerControls" data-dependent-on="hideVideoPlayerControls">
<div class="switch-container">
<label class="switch">
<input type="checkbox" checked>
<input id="hideUploadButtonPlayerControls" type="checkbox" checked>
<span class="slider round"></span>
</label>
<div class="switch-label">
<label class="switch-label" for="hideUploadButtonPlayerControls">
__MSG_showUploadButton__
</div>
</label>
</div>
</div>
<div data-type="toggle" data-toggle-type="reverse" data-sync="hideSkipButtonPlayerControls">
<div class="switch-container">
<label class="switch">
<input type="checkbox" checked>
<input id="hideSkipButtonPlayerControls" type="checkbox" checked>
<span class="slider round"></span>
</label>
<div class="switch-label">
<label class="switch-label" for="hideSkipButtonPlayerControls">
__MSG_showSkipButton__
</div>
</label>
</div>
</div>
<div data-type="toggle" data-toggle-type="reverse" data-sync="hideInfoButtonPlayerControls">
<div class="switch-container">
<label class="switch">
<input type="checkbox" checked>
<input id="hideInfoButtonPlayerControls" type="checkbox" checked>
<span class="slider round"></span>
</label>
<div class="switch-label">
<label class="switch-label" for="hideInfoButtonPlayerControls">
__MSG_showInfoButton__
</div>
</label>
</div>
</div>
<div data-type="toggle" data-sync="autoHideInfoButton" data-dependent-on="hideInfoButtonPlayerControls">
<div class="switch-container">
<label class="switch">
<input type="checkbox" checked>
<input id="autoHideInfoButton" type="checkbox" checked>
<span class="slider round"></span>
</label>
<div class="switch-label">
<label class="switch-label" for="autoHideInfoButton">
__MSG_autoHideInfoButton__
</div>
</label>
</div>
</div>
<div data-type="toggle" data-sync="audioNotificationOnSkip">
<div class="switch-container">
<label class="switch">
<input type="checkbox" checked>
<input id="audioNotificationOnSkip" type="checkbox" checked>
<span class="slider round"></span>
</label>
<div class="switch-label">
<label class="switch-label" for="audioNotificationOnSkip">
__MSG_audioNotification__
</div>
</label>
</div>
<div class="small-description">__MSG_audioNotificationDescription__</div>
@@ -262,12 +261,12 @@
<div data-type="toggle" data-sync="showTimeWithSkips">
<div class="switch-container">
<label class="switch">
<input type="checkbox" checked>
<input id="showTimeWithSkips" type="checkbox" checked>
<span class="slider round"></span>
</label>
<div class="switch-label">
<label class="switch-label" for="showTimeWithSkips">
__MSG_showTimeWithSkips__
</div>
</label>
</div>
<div class="small-description">__MSG_showTimeWithSkipsDescription__</div>
@@ -276,12 +275,12 @@
<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>
<input id="showDonationLink" type="checkbox" checked>
<span class="slider round"></span>
</label>
<div class="switch-label">
<label class="switch-label" for="showDonationLink">
__MSG_hideDonationLink__
</div>
</label>
</div>
</div>
@@ -346,12 +345,12 @@
<div data-type="toggle" data-sync="trackViewCount">
<div class="switch-container">
<label class="switch">
<input type="checkbox" checked>
<input id="trackViewCount" type="checkbox" checked>
<span class="slider round"></span>
</label>
<div class="switch-label">
<label class="switch-label" for="trackViewCount">
__MSG_enableViewTracking__
</div>
</label>
</div>
<div class="small-description">__MSG_whatViewTracking__</div>
@@ -360,12 +359,12 @@
<div data-type="toggle" data-sync="trackViewCountInPrivate" data-dependent-on="trackViewCount" data-private-only="true">
<div class="switch-container">
<label class="switch">
<input type="checkbox" checked>
<input id="trackViewCountInPrivate" type="checkbox" checked>
<span class="slider round"></span>
</label>
<div class="switch-label">
<label class="switch-label" for="trackViewCountInPrivate">
__MSG_enableViewTrackingInPrivate__
</div>
</label>
</div>
</div>
@@ -412,12 +411,12 @@
<div id="support-invidious" data-type="toggle" data-sync="supportInvidious" data-no-safari="true">
<div class="switch-container">
<label class="switch">
<input type="checkbox">
<input id="supportInvidious" type="checkbox">
<span class="slider round"></span>
</label>
<div class="switch-label">
<label class="switch-label" for="supportInvidious">
__MSG_supportOtherSites__
</div>
</label>
</div>
<div class="small-description">(__MSG_supportedSites__ Invidious, CloudTube)</div>
@@ -463,23 +462,23 @@
<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">
<input id="testingServer" type="checkbox">
<span class="slider round"></span>
</label>
<div class="switch-label">
<label class="switch-label" for="testingServer">
__MSG_enableTestingServer__
</div>
</label>
</div>
<div class="small-description">__MSG_whatEnableTestingServer__</div>
</div>
<div data-type="text-change" data-sync="serverAddress" data-dependent-on="testingServer" data-dependent-on-inverted="true">
<div class="text-label-container inline">
<label class="optionLabel inline">
<span class="optionLabel">__MSG_customServerAddress__:</span>
<input class="option-text-box" type="text" style="margin-right:10px">
</div>
</label>
<div class="option-button text-change-set inline low-profile">
__MSG_save__

27
src/options.ts
View File

@@ -44,9 +44,7 @@ async function init() {
if (dependentOn)
isDependentOnReversed = dependentOn.getAttribute("data-toggle-type") === "reverse" || optionsElements[i].getAttribute("data-dependent-on-inverted") === "true";
if ((optionsElements[i].getAttribute("data-private-only") === "true" && !(await isIncognitoAllowed()))
|| (optionsElements[i].getAttribute("data-no-safari") === "true" && navigator.vendor === "Apple Computer, Inc.")
|| (dependentOn && (isDependentOnReversed ? Config.config[dependentOnName] : !Config.config[dependentOnName]))) {
if (await shouldHideOption(optionsElements[i]) || (dependentOn && (isDependentOnReversed ? Config.config[dependentOnName] : !Config.config[dependentOnName]))) {
optionsElements[i].classList.add("hidden");
if (!dependentOn)
continue;
@@ -74,7 +72,7 @@ async function init() {
}
// Add click listener
checkbox.addEventListener("click", () => {
checkbox.addEventListener("click", async () => {
// Confirm if required
if (checkbox.checked && confirmMessage && !confirm(chrome.i18n.getMessage(confirmMessage))){
checkbox.checked = false;
@@ -105,18 +103,13 @@ async function init() {
break;
}
// If other options depend on this, hide and disable them
// If other options depend on this, hide/show them
const dependents = optionsContainer.querySelectorAll(`[data-dependent-on='${option}']`);
for (let j = 0; j < dependents.length; j++) {
const isDependentReversed = dependents[j].getAttribute("data-toggle-type") === "reverse";
const disableWhenChecked = dependents[j].getAttribute("data-dependent-on-inverted") === "true";
if (!disableWhenChecked && checkbox.checked || disableWhenChecked && !checkbox.checked) {
if (!await shouldHideOption(dependents[j]) && (!disableWhenChecked && checkbox.checked || disableWhenChecked && !checkbox.checked)) {
dependents[j].classList.remove("hidden");
} else {
if (dependents[j].getAttribute("data-type") === "toggle") {
(dependents[j].querySelector("div > label > input") as HTMLInputElement).checked = false;
Config.config[dependents[j].getAttribute("data-sync")] = isDependentReversed;
}
dependents[j].classList.add("hidden");
}
}
@@ -254,10 +247,22 @@ async function init() {
});
}
document.getElementById("version").innerText = "v. " + chrome.runtime.getManifest().version;
optionsContainer.classList.remove("hidden");
optionsContainer.classList.add("animated");
}
/**
* Handle special cases where an option shouldn't show
*
* @param {String} element
*/
async function shouldHideOption(element: Element): Promise<boolean> {
return (element.getAttribute("data-private-only") === "true" && !(await isIncognitoAllowed()))
|| (element.getAttribute("data-no-safari") === "true" && navigator.vendor === "Apple Computer, Inc.");
}
/**
* Called when the config is updated
*