Mirror/SponsorBlock
1
0
Fork 0
mirror of https://github.com/ajayyy/SponsorBlock.git synced 2025-12-09 21:17:20 +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 { .tab-heading:hover {
outline: 3px solid white; outline: 3px solid white;
} }
.medium-description, .switch-container, .text-label-container, .categoryTableElement { .medium-description, .switch-container, .optionLabel, .categoryTableElement {
color: white; color: white;
} }
.small-description, p,li { .small-description, p,li {
@@ -61,7 +61,7 @@ h1,h2,h3,h4,h5,h6 {
.tab-heading:hover { .tab-heading:hover {
outline: 3px solid #2e2e2e; outline: 3px solid #2e2e2e;
} }
.medium-description, .switch-container, .text-label-container, .categoryTableElement { .medium-description, .switch-container, .optionLabel, .categoryTableElement {
color: black; color: black;
} }
.small-description, p,li { .small-description, p,li {
@@ -119,6 +119,9 @@ html, body {
margin: 0 auto; margin: 0 auto;
border-radius: 15px; border-radius: 15px;
cursor: pointer; cursor: pointer;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
} }
.tab-heading.selected { .tab-heading.selected {
@@ -135,7 +138,7 @@ html, body {
border-bottom: inherit; border-bottom: inherit;
} }
.optionLabel { .optionLabel, #version {
font-size: 14px; font-size: 14px;
} }
@@ -247,10 +250,6 @@ input[type='number'] {
padding: 4px; padding: 4px;
} }
.text-label-container {
font-size: 14px;
}
.switch { .switch {
position: relative; position: relative;
display: inline-block; display: inline-block;
@@ -529,6 +528,9 @@ svg {
margin: unset; margin: unset;
width: 100%; width: 100%;
} }
#version {
font-size: 10px;
}
} }
@media only screen and (max-width: 800px) { @media only screen and (max-width: 800px) {

125
public/options/options.html
View File

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

27
src/options.ts
View File

@@ -44,9 +44,7 @@ async function init() {
if (dependentOn) if (dependentOn)
isDependentOnReversed = dependentOn.getAttribute("data-toggle-type") === "reverse" || optionsElements[i].getAttribute("data-dependent-on-inverted") === "true"; 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())) if (await shouldHideOption(optionsElements[i]) || (dependentOn && (isDependentOnReversed ? Config.config[dependentOnName] : !Config.config[dependentOnName]))) {
|| (optionsElements[i].getAttribute("data-no-safari") === "true" && navigator.vendor === "Apple Computer, Inc.")
|| (dependentOn && (isDependentOnReversed ? Config.config[dependentOnName] : !Config.config[dependentOnName]))) {
optionsElements[i].classList.add("hidden"); optionsElements[i].classList.add("hidden");
if (!dependentOn) if (!dependentOn)
continue; continue;
@@ -74,7 +72,7 @@ async function init() {
} }
// Add click listener // Add click listener
checkbox.addEventListener("click", () => { checkbox.addEventListener("click", async () => {
// Confirm if required // Confirm if required
if (checkbox.checked && confirmMessage && !confirm(chrome.i18n.getMessage(confirmMessage))){ if (checkbox.checked && confirmMessage && !confirm(chrome.i18n.getMessage(confirmMessage))){
checkbox.checked = false; checkbox.checked = false;
@@ -105,18 +103,13 @@ async function init() {
break; 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}']`); const dependents = optionsContainer.querySelectorAll(`[data-dependent-on='${option}']`);
for (let j = 0; j < dependents.length; j++) { 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"; 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"); dependents[j].classList.remove("hidden");
} else { } 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"); 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.remove("hidden");
optionsContainer.classList.add("animated"); 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 * Called when the config is updated
* *