Adding more settings and combining theme in the general page #80

This commit is contained in:
ManeraKai 2022-03-05 11:44:59 +03:00
parent a85f0defa6
commit 5619a96b4a
No known key found for this signature in database
GPG Key ID: 5ABC31FFD562E337
13 changed files with 222 additions and 156 deletions

View File

@ -9,6 +9,22 @@ function setAlwaysUsePreferred(val) {
console.log("alwaysUsePreferred: ", alwaysUsePreferred)
}
let theme;
const getTheme = () => theme;
function setTheme(val) {
theme = val
browser.storage.local.set({ theme });
console.log("theme: ", theme)
}
let applyThemeToSites;
const getApplyThemeToSites = () => applyThemeToSites;
function setApplyThemeToSites(val) {
applyThemeToSites = val;
browser.storage.local.set({ applyThemeToSites })
console.log("applyThemeToSites: ", applyThemeToSites)
}
let exceptions = {
"url": [],
"regex": [],
@ -36,11 +52,17 @@ async function init() {
resolve => browser.storage.local.get(
[
"exceptions",
"alwaysUsePreferred"
"alwaysUsePreferred",
"theme",
"applyThemeToSites",
],
r => { // r = result
if (r.exceptions) exceptions = r.exceptions;
alwaysUsePreferred = r.alwaysUsePreferred ?? false;
theme = r.them ?? "DEFAULT"
applyThemeToSites = r.applyThemeToSites ?? false;
resolve();
}
)
@ -54,6 +76,12 @@ export default {
getAlwaysUsePreferred,
setAlwaysUsePreferred,
getApplyThemeToSites,
setApplyThemeToSites,
getTheme,
setTheme,
isException,
init,
}

View File

@ -182,6 +182,35 @@ function changeInstance(url) {
return `${randomInstance}${url.pathname}${url.search}`;
}
function isNitter(url, type) {
let protocolHost = `${url.protocol}//${url.host}`;
if (type !== "main_frame" && type !== "sub_frame") return false;
return [
...redirects.nitter.normal,
...redirects.nitter.tor,
...nitterNormalCustomRedirects,
...nitterTorCustomRedirects,
].includes(protocolHost);
}
let theme;
let applyThemeToSites;
function initNitterCookies(url) {
let protocolHost = `${url.protocol}//${url.host}`;
let themeValue;
if (theme == 'light') themeValue = 'Twitter';
if (theme == 'dark') themeValue = 'Twitter Dark';
if (applyThemeToSites && themeValue != 'DEFAULT')
browser.cookies.set({
url: protocolHost,
name: "theme",
value: themeValue
})
}
async function init() {
return new Promise((resolve) => {
fetch('/instances/data.json').then(response => response.text()).then(data => {
@ -189,31 +218,42 @@ async function init() {
browser.storage.local.get(
[
"disableTwitter",
"twitterRedirects",
"theme",
"applyThemeToSites",
"nitterNormalRedirectsChecks",
"nitterNormalCustomRedirects",
"nitterTorRedirectsChecks",
"nitterTorCustomRedirects",
"twitterProtocol",
"alwaysUsePreferred",
],
(result) => {
disable = result.disableTwitter ?? false;
r => {
disable = r.disableTwitter ?? false;
protocol = result.twitterProtocol ?? "normal";
protocol = r.twitterProtocol ?? "normal";
bypassWatchOnTwitter = result.bypassWatchOnTwitter ?? true;
bypassWatchOnTwitter = r.bypassWatchOnTwitter ?? true;
alwaysUsePreferred = result.alwaysUsePreferred ?? true;
alwaysUsePreferred = r.alwaysUsePreferred ?? true;
theme = r.theme ?? 'DEFAULT';
applyThemeToSites = r.applyThemeToSites ?? false;
redirects.nitter = dataJson.nitter;
if (result.twitterRedirects) redirects = result.twitterRedirects;
if (r.twitterRedirects) redirects = r.twitterRedirects;
nitterNormalRedirectsChecks = result.nitterNormalRedirectsChecks ?? [...redirects.nitter.normal];
nitterNormalCustomRedirects = result.nitterNormalCustomRedirects ?? [];
nitterNormalRedirectsChecks = r.nitterNormalRedirectsChecks ?? [...redirects.nitter.normal];
nitterNormalCustomRedirects = r.nitterNormalCustomRedirects ?? [];
nitterTorRedirectsChecks = result.nitterTorRedirectsChecks ?? [...redirects.nitter.tor];
nitterTorCustomRedirects = result.nitterTorCustomRedirects ?? [];
nitterTorRedirectsChecks = r.nitterTorRedirectsChecks ?? [...redirects.nitter.tor];
nitterTorCustomRedirects = r.nitterTorCustomRedirects ?? [];
resolve();
}
@ -248,6 +288,9 @@ export default {
getProtocol,
setProtocol,
isNitter,
initNitterCookies,
redirect,
init,
changeInstance,

View File

@ -19,7 +19,7 @@ browser.storage.local.get(
"youtubeVolume",
"youtubeAutoplay",
"OnlyEmbeddedVideo",
"youtubeTheme",
"theme",
"invidiousVideoQuality",
], (result) => {
let prefs = getCookie();
@ -31,8 +31,8 @@ browser.storage.local.get(
if (result.invidiousVideoQuality !== undefined && prefs.quality !== result.invidiousVideoQuality)
prefs.quality = result.invidiousVideoQuality;
if (result.youtubeTheme !== undefined && prefs.dark_mode !== result.youtubeTheme)
prefs.dark_mode = result.youtubeTheme;
if (result.theme !== undefined && prefs.dark_mode !== result.theme)
prefs.dark_mode = result.theme;
if (result.youtubeVolume !== undefined && prefs.volume !== result.youtubeVolume)
prefs.volume = result.youtubeVolume;

View File

@ -2,28 +2,33 @@ window.browser = window.browser || window.chrome;
browser.storage.local.get(
[
"youtubeTheme",
"theme",
"applyThemeToSites",
"youtubeVolume",
"youtubeAutoplay"
],
res => {
if (
res.youtubeTheme != "DEFAULT" &&
localStorage.getItem("theme") != res.youtubeTheme
)
localStorage.setItem("theme", res.youtubeTheme);
r => {
let applyThemeToSites = r.applyThemeToSites ?? false;
if (
res.youtubeVolume != "--" &&
localStorage.getItem("volume") != res.youtubeVolume
applyThemeToSites &&
r.theme != "DEFAULT" &&
localStorage.getItem("theme") != r.theme
)
localStorage.setItem("volume", res.youtubeVolume / 100);
localStorage.setItem("theme", r.theme);
if (
res.youtubeAutoplay != "DEFAULT" &&
localStorage.getItem("playerAutoPlay") != res.youtubeAutoplay
r.youtubeVolume != "--" &&
localStorage.getItem("volume") != r.youtubeVolume
)
localStorage.setItem("playerAutoPlay", res.youtubeAutoplay);
localStorage.setItem("volume", r.youtubeVolume / 100);
if (
r.youtubeAutoplay != "DEFAULT" &&
localStorage.getItem("playerAutoPlay") != r.youtubeAutoplay
)
localStorage.setItem("playerAutoPlay", r.youtubeAutoplay);
}
)

View File

@ -2,7 +2,7 @@ window.browser = window.browser || window.chrome;
browser.storage.local.get(
[
"youtubeTheme",
"theme",
"youtubeAutoplay"
],
res => {
@ -13,8 +13,8 @@ browser.storage.local.get(
) ?? {};
let oldPrefs = { ...prefs };
if (res.youtubeTheme == 'dark') prefs.darkMode = true;
if (res.youtubeTheme == 'light') prefs.darkMode = false;
if (res.theme == 'dark') prefs.darkMode = true;
if (res.theme == 'light') prefs.darkMode = false;
if (res.youtubeAutoplay != "DEFAULT") prefs.playerAutoplay = res.youtubeAutoplay;

View File

@ -215,7 +215,7 @@ let theme;
const getTheme = () => theme;
function setTheme(val) {
theme = val;
browser.storage.local.set({ youtubeTheme: theme })
browser.storage.local.set({ theme: theme })
console.log("theme: ", theme)
}
@ -495,29 +495,10 @@ function changeInstance(url) {
return `${randomInstance}${url.pathname}${url.search}`;
}
function isPipedorInvidious(url, type) {
function isPipedorInvidious(url, type, frontend) {
let protocolHost = `${url.protocol}//${url.host}`;
return (type === "main_frame" || type === "sub_frame") && [
...redirects.invidious.normal,
...redirects.invidious.tor,
...invidiousNormalCustomRedirects,
...invidiousTorCustomRedirects,
...redirects.piped.normal,
...redirects.piped.tor,
...pipedNormalCustomRedirects,
...pipedTorCustomRedirects,
].includes(protocolHost);
}
function isUrlPipedorInvidious(url, frontend) {
try {
url = new URL(url);
}
catch (error) {
return
}
let protocolHost = `${url.protocol}//${url.host}`;
if (type !== "main_frame" && type !== "sub_frame") return false;
if (frontend == 'invidious')
return [
@ -556,10 +537,13 @@ function isUrlPipedorInvidious(url, frontend) {
].includes(protocolHost);
}
let applyThemeToSites;
function addUrlParams(url) {
let protocolHost = `${url.protocol}//${url.host}`;
let isChanged = false;
console.log("Adding URL Params", protocolHost);
console.log("searchParams", url.searchParams);
let oldParams = { ...url.searchParams };
if (
[
...redirects.invidious.normal,
@ -568,8 +552,10 @@ function addUrlParams(url) {
...invidiousTorCustomRedirects
].includes(protocolHost)
) {
if (!url.searchParams.has("dark_mode") && theme != "DEFAULT") {
url.searchParams.append("dark_mode", theme);
if (applyThemeToSites && !url.searchParams.has("dark_mode") && theme != 'DEFAULT') {
if (theme == 'dark') url.searchParams.append("dark_mode", true);
else if (theme == 'light') url.searchParams.append("dark_mode", false);
isChanged = true;
}
@ -602,8 +588,8 @@ function addUrlParams(url) {
url.searchParams.append("subtitles", invidiousSubtitles);
isChanged = true;
}
} else if (
}
else if (
[
...redirects.piped.normal,
...redirects.piped.tor,
@ -626,12 +612,13 @@ function addUrlParams(url) {
url.searchParams.append("playerAutoPlay", autoplay);
isChanged = true;
}
}
if (isChanged) return url.href;
else return;
}
function initPipedLocalStorage(tabId) {
browser.tabs.executeScript(
tabId,
@ -670,7 +657,8 @@ async function init() {
[
"invidiousAlwaysProxy",
"invidiousVideoQuality",
"youtubeTheme",
"theme",
"applyThemeToSites",
"persistInvidiousPrefs",
"disableYoutube",
"OnlyEmbeddedVideo",
@ -706,51 +694,53 @@ async function init() {
"youtubeEmbedExceptions",
"bypassWatchOnYoutube"
],
(result) => {
r => { // r = result
redirects.invidious = dataJson.invidious;
if (result.youtubeRedirects) redirects = result.youtubeRedirects;
if (r.youtubeRedirects) redirects = r.youtubeRedirects;
disable = result.disableYoutube ?? false;
protocol = result.youtubeProtocol ?? 'normal';
frontend = result.youtubeFrontend ?? 'invidious';
youtubeEmbedFrontend = result.youtubeEmbedFrontend ?? 'invidious';
disable = r.disableYoutube ?? false;
protocol = r.youtubeProtocol ?? 'normal';
frontend = r.youtubeFrontend ?? 'invidious';
youtubeEmbedFrontend = r.youtubeEmbedFrontend ?? 'invidious';
theme = result.youtubeTheme ?? 'DEFAULT';
volume = result.youtubeVolume ?? '--';
autoplay = result.youtubeAutoplay ?? 'DEFAULT';
theme = r.theme ?? 'DEFAULT';
applyThemeToSites = r.applyThemeToSites ?? false;
invidiousAlwaysProxy = result.invidiousAlwaysProxy ?? 'DEFAULT';
OnlyEmbeddedVideo = result.OnlyEmbeddedVideo ?? 'both';
invidiousVideoQuality = result.invidiousVideoQuality ?? 'DEFAULT';
invidiousPlayerStyle = result.invidiousPlayerStyle ?? 'DEFAULT';
invidiousSubtitles = result.invidiousSubtitles || '';
volume = r.youtubeVolume ?? '--';
autoplay = r.youtubeAutoplay ?? 'DEFAULT';
invidiousNormalRedirectsChecks = result.invidiousNormalRedirectsChecks ?? [...redirects.invidious.normal];
invidiousNormalCustomRedirects = result.invidiousNormalCustomRedirects ?? [];
invidiousAlwaysProxy = r.invidiousAlwaysProxy ?? 'DEFAULT';
OnlyEmbeddedVideo = r.OnlyEmbeddedVideo ?? 'both';
invidiousVideoQuality = r.invidiousVideoQuality ?? 'DEFAULT';
invidiousPlayerStyle = r.invidiousPlayerStyle ?? 'DEFAULT';
invidiousSubtitles = r.invidiousSubtitles || '';
invidiousTorRedirectsChecks = result.invidiousTorRedirectsChecks ?? [...redirects.invidious.tor];
invidiousTorCustomRedirects = result.invidiousTorCustomRedirects ?? [];
invidiousNormalRedirectsChecks = r.invidiousNormalRedirectsChecks ?? [...redirects.invidious.normal];
invidiousNormalCustomRedirects = r.invidiousNormalCustomRedirects ?? [];
pipedNormalRedirectsChecks = result.pipedNormalRedirectsChecks ?? [...redirects.piped.normal];
pipedNormalCustomRedirects = result.pipedNormalCustomRedirects ?? [];
invidiousTorRedirectsChecks = r.invidiousTorRedirectsChecks ?? [...redirects.invidious.tor];
invidiousTorCustomRedirects = r.invidiousTorCustomRedirects ?? [];
pipedTorRedirectsChecks = result.pipedTorRedirectsChecks ?? [...redirects.piped.tor];
pipedTorCustomRedirects = result.pipedTorCustomRedirects ?? [];
pipedNormalRedirectsChecks = r.pipedNormalRedirectsChecks ?? [...redirects.piped.normal];
pipedNormalCustomRedirects = r.pipedNormalCustomRedirects ?? [];
pipedTorRedirectsChecks = r.pipedTorRedirectsChecks ?? [...redirects.piped.tor];
pipedTorCustomRedirects = r.pipedTorCustomRedirects ?? [];
pipedMaterialNormalRedirectsChecks = result.pipedMaterialNormalRedirectsChecks ?? [...redirects.pipedMaterial.normal];
pipedMaterialNormalCustomRedirects = result.pipedMaterialNormalCustomRedirects ?? [];
pipedMaterialNormalRedirectsChecks = r.pipedMaterialNormalRedirectsChecks ?? [...redirects.pipedMaterial.normal];
pipedMaterialNormalCustomRedirects = r.pipedMaterialNormalCustomRedirects ?? [];
pipedMaterialTorRedirectsChecks = result.pipedMaterialTorRedirectsChecks ?? [...redirects.pipedMaterial.tor];
pipedMaterialTorCustomRedirects = result.pipedMaterialTorCustomRedirects ?? [];
pipedMaterialTorRedirectsChecks = r.pipedMaterialTorRedirectsChecks ?? [...redirects.pipedMaterial.tor];
pipedMaterialTorCustomRedirects = r.pipedMaterialTorCustomRedirects ?? [];
persistInvidiousPrefs = result.persistInvidiousPrefs ?? false;
persistInvidiousPrefs = r.persistInvidiousPrefs ?? false;
alwaysUsePreferred = result.alwaysUsePreferred ?? true;
alwaysUsePreferred = r.alwaysUsePreferred ?? true;
bypassWatchOnYoutube = result.bypassWatchOnYoutube ?? true;
bypassWatchOnYoutube = r.bypassWatchOnYoutube ?? true;
if (result.youtubeEmbedExceptions) exceptions = result.youtubeEmbedExceptions;
if (r.youtubeEmbedExceptions) exceptions = r.youtubeEmbedExceptions;
resolve();
});
@ -780,7 +770,6 @@ export default {
changeInstance,
isPipedorInvidious,
isUrlPipedorInvidious,
addUrlParams,
getDisable,
@ -859,4 +848,4 @@ export default {
isException,
init,
};
};

View File

@ -14,9 +14,10 @@
"128": "assets/images/libredirect-128.png"
},
"permissions": [
"storage",
"webRequest",
"webRequestBlocking",
"storage",
"cookies",
"<all_urls>"
],
"browser_action": {

View File

@ -39,7 +39,7 @@ browser.storage.onChanged.addListener(wholeInit);
let BYPASSTABs = [];
browser.webRequest.onBeforeRequest.addListener(
(details) => {
details => {
const url = new URL(details.url);
let initiator;
if (details.originUrl)
@ -50,7 +50,7 @@ browser.webRequest.onBeforeRequest.addListener(
var newUrl;
if (!newUrl) newUrl = youtubeHelper.redirect(url, details, initiator)
if (youtubeHelper.isPipedorInvidious(newUrl ?? url, details.type)) newUrl = youtubeHelper.addUrlParams(newUrl ?? url);
if (youtubeHelper.isPipedorInvidious(newUrl ?? url, details.type, 'invidious')) newUrl = youtubeHelper.addUrlParams(newUrl ?? url);
if (youtubeMusicHelper.isYoutubeMusic(url, initiator)) newUrl = youtubeMusicHelper.redirect(url, details.type)
if (!newUrl) newUrl = twitterHelper.redirect(url, initiator);
@ -77,6 +77,8 @@ browser.webRequest.onBeforeRequest.addListener(
if (BYPASSTABs.includes(details.tabId)) newUrl = null;
if (newUrl) {
if (newUrl == 'CANCEL') {
console.log(`Canceled ${url}`);
@ -109,7 +111,11 @@ browser.tabs.onRemoved.addListener((tabId) => {
browser.tabs.onUpdated.addListener(
(tabId, changeInfo, _) => {
if (changeInfo.url && youtubeHelper.isUrlPipedorInvidious(changeInfo.url, 'piped')) youtubeHelper.initPipedLocalStorage(tabId);
if (changeInfo.url && youtubeHelper.isUrlPipedorInvidious(changeInfo.url, 'pipedMaterial')) youtubeHelper.initPipedMaterialLocalStorage(tabId);
let url;
try { url = new URL(changeInfo.url); }
catch (_) { return }
if (youtubeHelper.isPipedorInvidious(url, 'main_frame', 'piped')) youtubeHelper.initPipedLocalStorage(tabId);
if (twitterHelper.isNitter(url, 'main_frame')) newUrl = twitterHelper.initNitterCookies(url);
// if (changeInfo.url && youtubeHelper.isPipedorInvidious(url, 'main_frame', 'pipedMaterial')) youtubeHelper.initPipedMaterialLocalStorage(tabId);
// if (changeInfo.url && youtubeHelper.isUrlPipedorInvidious(changeInfo.url, 'invidious')) youtubeHelper.initInvidiousCookies(tabId);
});

View File

@ -90,12 +90,17 @@
<div class="some-block option-block">
<h4>Theme</h4>
<select id="theme">
<option value="">System</option>
<option value="light-theme">Light</option>
<option value="dark-theme">Dark</option>
<option value="DEFAULT">System</option>
<option value="light">Light</option>
<option value="dark">Dark</option>
</select>
</div>
<div class="some-block option-block">
<h4>Apply Theme to sites</h4>
<input id="apply-theme-to-sites" type="checkbox" checked />
</div>
<div class="some-block option-block">
<h4>Always use Preferred Instances</h4>
<input id="always-use-preferred" type="checkbox" checked />

View File

@ -4,43 +4,33 @@ window.browser = window.browser || window.chrome;
import commonHelper from "../../../assets/javascripts/helpers/common.js";
import generalHelper from "../../../assets/javascripts/helpers/general.js";
let themeElement = document.getElementById("theme");
browser.storage.local.get(
["theme"],
(result) => {
themeElement.value = result.theme || "";
}
);
themeElement.addEventListener("change", (event) => {
const value = event.target.options[theme.selectedIndex].value;
browser.storage.local.set({ theme: value });
});
document.getElementById("update-instances").addEventListener("click", () => {
let oldHtml = document.getElementById("update-instances").innerHTML
document.getElementById("update-instances").innerHTML = '...';
let updateInstancesElement = document.getElementById("update-instances");
updateInstancesElement.addEventListener("click", () => {
let oldHtml = updateInstancesElement.innerHTML
updateInstancesElement.innerHTML = '...';
if (commonHelper.updateInstances()) {
document.getElementById("update-instances").innerHTML = 'Done!';
updateInstancesElement.innerHTML = 'Done!';
new Promise(resolve => setTimeout(resolve, 1500)).then( // sleep 1500ms
() => document.getElementById("update-instances").innerHTML = oldHtml
() => updateInstancesElement.innerHTML = oldHtml
)
}
else
document.getElementById("update-instances").innerHTML = 'Failed Miserabely';
updateInstancesElement.innerHTML = 'Failed Miserabely';
});
let exportSettingsElement = document.getElementById("export-settings");
function exportSettings() {
browser.storage.local.get(null, result => {
let resultString = JSON.stringify(result, null, ' ');
exportSettingsElement.href = 'data:application/json;base64,' + btoa(resultString);
exportSettingsElement.download = 'libredirect-settings.json';
});
browser.storage.local.get(
null,
result => {
let resultString = JSON.stringify(result, null, ' ');
exportSettingsElement.href = 'data:application/json;base64,' + btoa(resultString);
exportSettingsElement.download = 'libredirect-settings.json';
}
);
}
exportSettings();
@ -59,7 +49,6 @@ importSettingsElement.addEventListener("change",
);
let resetSettingsElement = document.getElementById("reset-settings");
resetSettingsElement.addEventListener("click",
() => {
console.log("reset");
@ -73,12 +62,24 @@ alwaysUsePreferredElement.addEventListener("change",
event => generalHelper.setAlwaysUsePreferred(event.target.checked)
);
let applyThemeToSitesElement = document.getElementById("apply-theme-to-sites")
applyThemeToSitesElement.addEventListener("change",
event => generalHelper.setApplyThemeToSites(event.target.checked)
);
let themeElement = document.getElementById("theme");
themeElement.addEventListener("change", event => {
const value = event.target.options[theme.selectedIndex].value;
generalHelper.setTheme(value);
})
let nameCustomInstanceInput = document.getElementById("exceptions-custom-instance");
let instanceTypeElement = document.getElementById("exceptions-custom-instance-type");
let instanceType = "url"
generalHelper.init().then(() => {
alwaysUsePreferredElement.checked = generalHelper.getAlwaysUsePreferred();
themeElement.value = generalHelper.getTheme();
applyThemeToSitesElement.checked = generalHelper.getApplyThemeToSites();
console.log("generalHelper.getAlwaysUsePreferred()");
instanceTypeElement.addEventListener("change",
(event) => {

View File

@ -1,27 +1,30 @@
window.browser = window.browser || window.chrome;
function changeTheme() {
browser.storage.local.get("theme", (result) => {
switch (result.theme) {
case "dark-theme":
document.body.classList.add("dark-theme");
document.body.classList.remove("light-theme");
break;
case "light-theme":
document.body.classList.add("light-theme");
document.body.classList.remove("dark-theme");
break;
default:
if (matchMedia("(prefers-color-scheme: light)").matches) {
document.body.classList.add("light-theme");
document.body.classList.remove("dark-theme");
} else {
browser.storage.local.get(
"theme",
result => {
switch (result.theme) {
case "dark":
document.body.classList.add("dark-theme");
document.body.classList.remove("light-theme");
}
break;
case "light":
document.body.classList.add("light-theme");
document.body.classList.remove("dark-theme");
break;
default:
if (matchMedia("(prefers-color-scheme: light)").matches) {
document.body.classList.add("light-theme");
document.body.classList.remove("dark-theme");
} else {
document.body.classList.add("dark-theme");
document.body.classList.remove("light-theme");
}
}
}
})
)
}
changeTheme()

View File

@ -155,15 +155,6 @@
</button>
</div>
<div class="some-block option-block">
<h4>Theme</h4>
<select id="invidious-theme">
<option value="DEFAULT">Default</option>
<option value="dark">Dark</option>
<option value="light">Light</option>
</select>
</div>
<div class="some-block option-block">
<h4>Autoplay Video</h4>
<select id="invidious-autoplay">

View File

@ -86,11 +86,6 @@ disableYoutubeElement.addEventListener("change",
event => youtubeHelper.setDisable(!event.target.checked)
);
let themeElement = document.getElementById("invidious-theme");
themeElement.addEventListener("change",
event => youtubeHelper.setTheme(event.target.options[themeElement.selectedIndex].value)
);
let volumeElement = document.getElementById("invidious-volume");
let volumeValueElement = document.getElementById("volume-value");
volumeElement.addEventListener("input",
@ -166,7 +161,6 @@ function changeProtocolSettings(protocol) {
youtubeHelper.init().then(() => {
disableYoutubeElement.checked = !youtubeHelper.getDisable();
themeElement.value = youtubeHelper.getTheme();
volumeElement.value = youtubeHelper.getVolume();
volumeValueElement.textContent = `${youtubeHelper.getVolume()}%`;
OnlyEmbeddedVideoElement.value = youtubeHelper.getOnlyEmbeddedVideo();