diff options
author | Dmitrii Selivanov <selivano.d@gmail.com> | 2022-03-20 23:40:46 +0300 |
---|---|---|
committer | Dmitrii Selivanov <selivano.d@gmail.com> | 2022-03-20 23:40:46 +0300 |
commit | b7029ce426471dd29155005631259d2ecd1291b5 (patch) | |
tree | 6d737f7fc281dcce550ebf4ffc03e3320946abe3 | |
parent | 6894a706aa7e88e5c25244c1fca5d2b483411c56 (diff) |
Merge issues fixed, core reformatted with prettier
-rw-r--r-- | Extensions/UserScript/Return Youtube Dislike.user.js | 51 | ||||
-rw-r--r-- | Extensions/combined/manifest-chrome.json | 2 | ||||
-rw-r--r-- | Extensions/combined/manifest-firefox.json | 2 | ||||
-rw-r--r-- | Extensions/combined/popup.css | 12 | ||||
-rw-r--r-- | Extensions/combined/popup.html | 46 | ||||
-rw-r--r-- | Extensions/combined/popup.js | 176 | ||||
-rw-r--r-- | Extensions/combined/readme.md | 3 | ||||
-rw-r--r-- | Extensions/combined/ryd.background.js | 73 | ||||
-rw-r--r-- | Extensions/combined/ryd.content-script.js | 22 | ||||
-rw-r--r-- | Extensions/combined/src/bar.js | 60 | ||||
-rw-r--r-- | Extensions/combined/src/buttons.js | 12 | ||||
-rw-r--r-- | Extensions/combined/src/events.js | 18 | ||||
-rw-r--r-- | Extensions/combined/src/state.js | 45 | ||||
-rw-r--r-- | Extensions/combined/src/utils.js | 74 |
14 files changed, 318 insertions, 278 deletions
diff --git a/Extensions/UserScript/Return Youtube Dislike.user.js b/Extensions/UserScript/Return Youtube Dislike.user.js index c5d03a9..f64ca11 100644 --- a/Extensions/UserScript/Return Youtube Dislike.user.js +++ b/Extensions/UserScript/Return Youtube Dislike.user.js @@ -30,7 +30,7 @@ let likesvalue = 0; let dislikesvalue = 0; let isMobile = location.hostname == "m.youtube.com"; -let isShorts = () => location.pathname.startsWith("/shorts") +let isShorts = () => location.pathname.startsWith("/shorts"); let mobileDislikes = 0; function cLog(text, subtext = "") { subtext = subtext.trim() === "" ? "" : `(${subtext})`; @@ -42,18 +42,22 @@ function isInViewport(element) { const height = innerHeight || document.documentElement.clientHeight; const width = innerWidth || document.documentElement.clientWidth; return ( - rect.top >= 0 && - rect.left >= 0 && - rect.bottom <= height && - rect.right <= width + rect.top >= 0 && + rect.left >= 0 && + rect.bottom <= height && + rect.right <= width ); } function getButtons() { - if(isShorts()) { - let elements=document.querySelectorAll(isMobile ? "ytm-like-button-renderer" : "#like-button > ytd-like-button-renderer"); - for(let element of elements) { - if(isInViewport(element)) { + if (isShorts()) { + let elements = document.querySelectorAll( + isMobile + ? "ytm-like-button-renderer" + : "#like-button > ytd-like-button-renderer" + ); + for (let element of elements) { + if (isInViewport(element)) { return element; } } @@ -116,10 +120,10 @@ function checkForUserAvatarButton() { if (isMobile) { return; } - if (document.querySelector('#avatar-btn')) { - return true + if (document.querySelector("#avatar-btn")) { + return true; } else { - return false + return false; } } @@ -235,7 +239,6 @@ function createRateBar(likes, dislikes) { } } - function setState() { cLog("Fetching votes..."); let statsSet = false; @@ -262,17 +265,17 @@ function likeClicked() { likesvalue--; createRateBar(likesvalue, dislikesvalue); setDislikes(numberFormat(dislikesvalue)); - previousState = 3 + previousState = 3; } else if (previousState == 2) { likesvalue++; dislikesvalue--; - setDislikes(numberFormat(dislikesvalue)) + setDislikes(numberFormat(dislikesvalue)); createRateBar(likesvalue, dislikesvalue); - previousState = 1 + previousState = 1; } else if (previousState == 3) { likesvalue++; - createRateBar(likesvalue, dislikesvalue) - previousState = 1 + createRateBar(likesvalue, dislikesvalue); + previousState = 1; } } } @@ -283,18 +286,18 @@ function dislikeClicked() { dislikesvalue++; setDislikes(numberFormat(dislikesvalue)); createRateBar(likesvalue, dislikesvalue); - previousState = 2 + previousState = 2; } else if (previousState == 2) { dislikesvalue--; setDislikes(numberFormat(dislikesvalue)); createRateBar(likesvalue, dislikesvalue); - previousState = 3 + previousState = 3; } else if (previousState == 1) { likesvalue--; dislikesvalue++; setDislikes(numberFormat(dislikesvalue)); createRateBar(likesvalue, dislikesvalue); - previousState = 2 + previousState = 2; } } } @@ -359,7 +362,7 @@ function setEventListeners(evt) { function checkForJS_Finish(check) { console.log(); - if (isShorts() || getButtons()?.offsetParent && isVideoLoaded()) { + if (isShorts() || (getButtons()?.offsetParent && isVideoLoaded())) { const buttons = getButtons(); if (!window.returnDislikeButtonlistenersSet) { @@ -369,7 +372,9 @@ function setEventListeners(evt) { buttons.children[1].addEventListener("click", dislikeClicked); buttons.children[0].addEventListener("touchstart", likeClicked); buttons.children[1].addEventListener("touchstart", dislikeClicked); - } catch { return } //Don't spam errors into the console + } catch { + return; + } //Don't spam errors into the console window.returnDislikeButtonlistenersSet = true; } setInitialState(); diff --git a/Extensions/combined/manifest-chrome.json b/Extensions/combined/manifest-chrome.json index 867e688..1f0b953 100644 --- a/Extensions/combined/manifest-chrome.json +++ b/Extensions/combined/manifest-chrome.json @@ -2,7 +2,7 @@ "name": "__MSG_extensionName__", "description": "__MSG_extensionDesc__", "default_locale": "en", - "version": "2.1.0.4", + "version": "2.1.0.3", "manifest_version": 3, "background": { "service_worker": "ryd.background.js" diff --git a/Extensions/combined/manifest-firefox.json b/Extensions/combined/manifest-firefox.json index 818efa2..54989be 100644 --- a/Extensions/combined/manifest-firefox.json +++ b/Extensions/combined/manifest-firefox.json @@ -2,7 +2,7 @@ "name": "__MSG_extensionName__", "description": "__MSG_extensionDesc__", "default_locale": "en", - "version": "2.1.0.4", + "version": "2.1.0.3", "manifest_version": 2, "background": { "scripts": ["ryd.background.js"] diff --git a/Extensions/combined/popup.css b/Extensions/combined/popup.css index 5bb11d0..b14ee41 100644 --- a/Extensions/combined/popup.css +++ b/Extensions/combined/popup.css @@ -43,7 +43,7 @@ button:hover { } #ext-version { - padding: .25rem .5rem; + padding: 0.25rem 0.5rem; } #ext-update { @@ -51,21 +51,21 @@ button:hover { color: var(--white); text-decoration: none; background: var(--primary); - border-radius: .25rem; + border-radius: 0.25rem; } #ext-update:hover { text-decoration: underline; } #ext { - padding: .25rem 0; + padding: 0.25rem 0; z-index: 69; position: fixed; background: var(--secondary); margin: 0; bottom: 1.15rem; right: 1.15rem; - border-radius: .25rem; + border-radius: 0.25rem; } .switch:before { @@ -73,8 +73,8 @@ button:hover { visibility: hidden; width: 250px; background-color: var(--secondary); - border-radius: .5rem; - padding: .5rem; + border-radius: 0.5rem; + padding: 0.5rem; position: absolute; z-index: 1; diff --git a/Extensions/combined/popup.html b/Extensions/combined/popup.html index 8baa07b..ae71cc6 100644 --- a/Extensions/combined/popup.html +++ b/Extensions/combined/popup.html @@ -20,16 +20,32 @@ /> <path d="m8 12.5 5.1-2.9L8 6.7v5.8z" fill="#fff" /> </svg> - <h1 style="margin-bottom: 0.75rem" title="__MSG_extensionName__">__MSG_extensionName__</h1> - <p style="color: var(--lightGrey)" title="__MSG_textDeveloper__">__MSG_textDeveloper__</p> + <h1 style="margin-bottom: 0.75rem" title="__MSG_extensionName__"> + __MSG_extensionName__ + </h1> + <p style="color: var(--lightGrey)" title="__MSG_textDeveloper__"> + __MSG_textDeveloper__ + </p> - <button id="link_website" title="__MSG_linkWebsite__">__MSG_linkWebsite__</button> - <button id="link_github" >GitHub</button> + <button id="link_website" title="__MSG_linkWebsite__"> + __MSG_linkWebsite__ + </button> + <button id="link_github">GitHub</button> <button id="link_discord">Discord</button> <br /> - <button style="margin-top: 0.3rem" id="link_faq" title="__MSG_linkFAQ__">__MSG_linkFAQ__</button> - <button style="margin-top: 0.3em" id="link_donate" title="__MSG_linkDonate__">__MSG_linkDonate__</button> - <button style="margin-top: 0.3em" id="link_help" title="__MSG_linkHelp__">__MSG_linkHelp__</button> + <button style="margin-top: 0.3rem" id="link_faq" title="__MSG_linkFAQ__"> + __MSG_linkFAQ__ + </button> + <button + style="margin-top: 0.3em" + id="link_donate" + title="__MSG_linkDonate__" + > + __MSG_linkDonate__ + </button> + <button style="margin-top: 0.3em" id="link_help" title="__MSG_linkHelp__"> + __MSG_linkHelp__ + </button> <br /> <br /> @@ -64,18 +80,26 @@ <!-- bottom-right --> <div id="ext"> - <a href="https://returnyoutubedislike.com/install" target="_blank" id="ext-update"></a> + <a + href="https://returnyoutubedislike.com/install" + target="_blank" + id="ext-update" + ></a> <span id="ext-version"></span> </div> <!-- dialog box --> <fieldset id="advancedSettings"> - <legend id="advancedLegend" title="__MSG_legendSettings__">__MSG_legendSettings__</legend> + <legend id="advancedLegend" title="__MSG_legendSettings__"> + __MSG_legendSettings__ + </legend> <label class="switch" data-hover="__MSG_textSettingsHover__"> <input type="checkbox" id="disable_vote_submission" /> <span class="slider" /> - <span class="switchLabel" title="__MSG_textSettings__">__MSG_textSettings__</span> + <span class="switchLabel" title="__MSG_textSettings__" + >__MSG_textSettings__</span + > </label> <br /> <label class="switch" data-hover="Use custom colors in new pages."> @@ -119,7 +143,7 @@ <span id="color_theme_example_like" style="display: inline-block; vertical-align: text-top; width: 1em; height: 1em;"> </span> <span id="color_theme_example_dislike" style="display: inline-block; vertical-align: text-top; width: 1em; height: 1em;"> </span> </div> - + <!-- <br /> <label class="switch"> <input type="checkbox" id="star_ratio" /> diff --git a/Extensions/combined/popup.js b/Extensions/combined/popup.js index 965ca59..e229dad 100644 --- a/Extensions/combined/popup.js +++ b/Extensions/combined/popup.js @@ -5,10 +5,12 @@ const config = { coloredThumbs: false, coloredBar: false, colorTheme: "classic", - numberDisplayFormat: 'compactShort', + numberDisplayFormat: "compactShort", numberDisplayRoundDown: true, - showAdvancedMessage: '<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="currentColor"><rect fill="none" height="24" width="24"/><path d="M19.5,12c0-0.23-0.01-0.45-0.03-0.68l1.86-1.41c0.4-0.3,0.51-0.86,0.26-1.3l-1.87-3.23c-0.25-0.44-0.79-0.62-1.25-0.42 l-2.15,0.91c-0.37-0.26-0.76-0.49-1.17-0.68l-0.29-2.31C14.8,2.38,14.37,2,13.87,2h-3.73C9.63,2,9.2,2.38,9.14,2.88L8.85,5.19 c-0.41,0.19-0.8,0.42-1.17,0.68L5.53,4.96c-0.46-0.2-1-0.02-1.25,0.42L2.41,8.62c-0.25,0.44-0.14,0.99,0.26,1.3l1.86,1.41 C4.51,11.55,4.5,11.77,4.5,12s0.01,0.45,0.03,0.68l-1.86,1.41c-0.4,0.3-0.51,0.86-0.26,1.3l1.87,3.23c0.25,0.44,0.79,0.62,1.25,0.42 l2.15-0.91c0.37,0.26,0.76,0.49,1.17,0.68l0.29,2.31C9.2,21.62,9.63,22,10.13,22h3.73c0.5,0,0.93-0.38,0.99-0.88l0.29-2.31 c0.41-0.19,0.8-0.42,1.17-0.68l2.15,0.91c0.46,0.2,1,0.02,1.25-0.42l1.87-3.23c0.25-0.44,0.14-0.99-0.26-1.3l-1.86-1.41 C19.49,12.45,19.5,12.23,19.5,12z M12.04,15.5c-1.93,0-3.5-1.57-3.5-3.5s1.57-3.5,3.5-3.5s3.5,1.57,3.5,3.5S13.97,15.5,12.04,15.5z"/></svg>', - hideAdvancedMessage: '<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="currentColor"><path d="M0 0h24v24H0V0z" fill="none" opacity=".87"/><path d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm4.3 14.3c-.39.39-1.02.39-1.41 0L12 13.41 9.11 16.3c-.39.39-1.02.39-1.41 0-.39-.39-.39-1.02 0-1.41L10.59 12 7.7 9.11c-.39-.39-.39-1.02 0-1.41.39-.39 1.02-.39 1.41 0L12 10.59l2.89-2.89c.39-.39 1.02-.39 1.41 0 .39.39.39 1.02 0 1.41L13.41 12l2.89 2.89c.38.38.38 1.02 0 1.41z"/></svg>', + showAdvancedMessage: + '<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="currentColor"><rect fill="none" height="24" width="24"/><path d="M19.5,12c0-0.23-0.01-0.45-0.03-0.68l1.86-1.41c0.4-0.3,0.51-0.86,0.26-1.3l-1.87-3.23c-0.25-0.44-0.79-0.62-1.25-0.42 l-2.15,0.91c-0.37-0.26-0.76-0.49-1.17-0.68l-0.29-2.31C14.8,2.38,14.37,2,13.87,2h-3.73C9.63,2,9.2,2.38,9.14,2.88L8.85,5.19 c-0.41,0.19-0.8,0.42-1.17,0.68L5.53,4.96c-0.46-0.2-1-0.02-1.25,0.42L2.41,8.62c-0.25,0.44-0.14,0.99,0.26,1.3l1.86,1.41 C4.51,11.55,4.5,11.77,4.5,12s0.01,0.45,0.03,0.68l-1.86,1.41c-0.4,0.3-0.51,0.86-0.26,1.3l1.87,3.23c0.25,0.44,0.79,0.62,1.25,0.42 l2.15-0.91c0.37,0.26,0.76,0.49,1.17,0.68l0.29,2.31C9.2,21.62,9.63,22,10.13,22h3.73c0.5,0,0.93-0.38,0.99-0.88l0.29-2.31 c0.41-0.19,0.8-0.42,1.17-0.68l2.15,0.91c0.46,0.2,1,0.02,1.25-0.42l1.87-3.23c0.25-0.44,0.14-0.99-0.26-1.3l-1.86-1.41 C19.49,12.45,19.5,12.23,19.5,12z M12.04,15.5c-1.93,0-3.5-1.57-3.5-3.5s1.57-3.5,3.5-3.5s3.5,1.57,3.5,3.5S13.97,15.5,12.04,15.5z"/></svg>', + hideAdvancedMessage: + '<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="currentColor"><path d="M0 0h24v24H0V0z" fill="none" opacity=".87"/><path d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm4.3 14.3c-.39.39-1.02.39-1.41 0L12 13.41 9.11 16.3c-.39.39-1.02.39-1.41 0-.39-.39-.39-1.02 0-1.41L10.59 12 7.7 9.11c-.39-.39-.39-1.02 0-1.41.39-.39 1.02-.39 1.41 0L12 10.59l2.89-2.89c.39-.39 1.02-.39 1.41 0 .39.39.39 1.02 0 1.41L13.41 12l2.89 2.89c.38.38.38 1.02 0 1.41z"/></svg>', links: { website: "https://returnyoutubedislike.com", @@ -16,67 +18,57 @@ const config = { discord: "https://discord.gg/mYnESY4Md5", donate: "https://returnyoutubedislike.com/donate", faq: "https://returnyoutubedislike.com/faq", - help: "https://returnyoutubedislike.com/help" + help: "https://returnyoutubedislike.com/help", }, }; /* Change language */ -function localizeHtmlPage() -{ - //Localize by replacing __MSG_***__ meta tags - var objects = document.getElementsByTagName('html'); - for (var j = 0; j < objects.length; j++) - { - var obj = objects[j]; - - var valStrH = obj.innerHTML.toString(); - var valNewH = valStrH.replace(/__MSG_(\w+)__/g, function(match, v1) - { - return v1 ? chrome.i18n.getMessage(v1) : ""; - }); - - if(valNewH != valStrH) - { - obj.innerHTML = valNewH; - } +function localizeHtmlPage() { + //Localize by replacing __MSG_***__ meta tags + var objects = document.getElementsByTagName("html"); + for (var j = 0; j < objects.length; j++) { + var obj = objects[j]; + + var valStrH = obj.innerHTML.toString(); + var valNewH = valStrH.replace(/__MSG_(\w+)__/g, function (match, v1) { + return v1 ? chrome.i18n.getMessage(v1) : ""; + }); + + if (valNewH != valStrH) { + obj.innerHTML = valNewH; } + } } localizeHtmlPage(); /* Links */ -createLink(config.links.website,"link_website") -createLink(config.links.github,"link_github") -createLink(config.links.discord,"link_discord") -createLink(config.links.faq,"link_faq") -createLink(config.links.donate,"link_donate") -createLink(config.links.help,"link_help") - -function createLink(url,id) { - document.getElementById(id).addEventListener("click",()=>{ - chrome.tabs.create({ url: url}) - }) +createLink(config.links.website, "link_website"); +createLink(config.links.github, "link_github"); +createLink(config.links.discord, "link_discord"); +createLink(config.links.faq, "link_faq"); +createLink(config.links.donate, "link_donate"); +createLink(config.links.help, "link_help"); + +function createLink(url, id) { + document.getElementById(id).addEventListener("click", () => { + chrome.tabs.create({ url: url }); + }); } document .getElementById("disable_vote_submission") .addEventListener("click", (ev) => { chrome.storage.sync.set({ disableVoteSubmission: ev.target.checked }); }); -document - .getElementById("colored_thumbs") - .addEventListener("click", (ev) => { - chrome.storage.sync.set({ coloredThumbs: ev.target.checked }); - }); -document - .getElementById("colored_bar") - .addEventListener("click", (ev) => { - chrome.storage.sync.set({ coloredBar: ev.target.checked }); - }); -document - .getElementById("color_theme") - .addEventListener("click", (ev) => { - chrome.storage.sync.set({ colorTheme: ev.target.value }); - }); +document.getElementById("colored_thumbs").addEventListener("click", (ev) => { + chrome.storage.sync.set({ coloredThumbs: ev.target.checked }); +}); +document.getElementById("colored_bar").addEventListener("click", (ev) => { + chrome.storage.sync.set({ coloredBar: ev.target.checked }); +}); +document.getElementById("color_theme").addEventListener("click", (ev) => { + chrome.storage.sync.set({ colorTheme: ev.target.value }); +}); document.getElementById("number_round_down").addEventListener("click", (ev) => { chrome.storage.sync.set({ numberDisplayRoundDown: ev.target.checked }); @@ -120,7 +112,7 @@ function initConfig() { function initializeVersionNumber() { const version = chrome.runtime.getManifest().version; - document.getElementById('ext-version').innerHTML = 'v' + version; + document.getElementById("ext-version").innerHTML = "v" + version; fetch( "https://raw.githubusercontent.com/Anarios/return-youtube-dislike/main/Extensions/combined/manifest-chrome.json" @@ -128,12 +120,12 @@ function initializeVersionNumber() { .then((response) => response.json()) .then((json) => { if (version !== json.version) { - document.getElementById('ext-update').innerHTML = chrome.i18n.getMessage("textUpdate") +' v' + json.version; - document.getElementById('ext-update').style.padding = '.25rem .5rem'; + document.getElementById("ext-update").innerHTML = + chrome.i18n.getMessage("textUpdate") + " v" + json.version; + document.getElementById("ext-update").style.padding = ".25rem .5rem"; } }); // .catch(console.error); - } function initializeDisableVoteSubmission() { @@ -142,7 +134,6 @@ function initializeDisableVoteSubmission() { }); } - function initializeColoredThumbs() { chrome.storage.sync.get(["coloredThumbs"], (res) => { handleColoredThumbsChangeEvent(res.coloredThumbs); @@ -159,7 +150,8 @@ function initializeColorTheme() { chrome.storage.sync.get(["colorTheme"], (res) => { handleColorThemeChangeEvent(res.colorTheme); }); - +} + function initializeNumberDisplayRoundDown() { chrome.storage.sync.get(["numberDisplayRoundDown"], (res) => { handleNumberDisplayRoundDownChangeEvent(res.numberDisplayRoundDown); @@ -180,12 +172,12 @@ function updateNumberDisplayFormatContent(roundDown) { } else { testValue = 123456; } - document.getElementById('number_format_compactShort').innerHTML = - getNumberFormatter('compactShort').format(testValue); - document.getElementById('number_format_compactLong').innerHTML = - getNumberFormatter('compactLong').format(testValue); - document.getElementById('number_format_standard').innerHTML = - getNumberFormatter('standard').format(testValue); + document.getElementById("number_format_compactShort").innerHTML = + getNumberFormatter("compactShort").format(testValue); + document.getElementById("number_format_compactLong").innerHTML = + getNumberFormatter("compactLong").format(testValue); + document.getElementById("number_format_standard").innerHTML = + getNumberFormatter("standard").format(testValue); } chrome.storage.onChanged.addListener(storageChangeHandler); @@ -197,19 +189,14 @@ function storageChangeHandler(changes, area) { ); } if (changes.coloredThumbs !== undefined) { - handleColoredThumbsChangeEvent( - changes.coloredThumbs.newValue - ); + handleColoredThumbsChangeEvent(changes.coloredThumbs.newValue); } if (changes.coloredBar !== undefined) { - handleColoredBarChangeEvent( - changes.coloredBar.newValue - ); + handleColoredBarChangeEvent(changes.coloredBar.newValue); } if (changes.colorTheme !== undefined) { - handleColorThemeChangeEvent( - changes.colorTheme.newValue - ); + handleColorThemeChangeEvent(changes.colorTheme.newValue); + } if (changes.numberDisplayRoundDown !== undefined) { handleNumberDisplayRoundDownChangeEvent( changes.numberDisplayRoundDown.newValue @@ -225,7 +212,6 @@ function handleDisableVoteSubmissionChangeEvent(value) { document.getElementById("disable_vote_submission").checked = value; } - function handleColoredThumbsChangeEvent(value) { config.coloredThumbs = value; document.getElementById("colored_thumbs").checked = value; @@ -245,8 +231,11 @@ function handleColorThemeChangeEvent(value) { } function updateColorThemePreviewContent(themeName) { - document.getElementById("color_theme_example_like").style.backgroundColor = getColorFromTheme(themeName, true); - document.getElementById("color_theme_example_dislike").style.backgroundColor = getColorFromTheme(themeName, false); + document.getElementById("color_theme_example_like").style.backgroundColor = + getColorFromTheme(themeName, true); + document.getElementById("color_theme_example_dislike").style.backgroundColor = + getColorFromTheme(themeName, false); +} function handleNumberDisplayRoundDownChangeEvent(value) { config.numberDisplayRoundDown = value; document.getElementById("number_round_down").checked = value; @@ -262,20 +251,20 @@ function handleNumberDisplayFormatChangeEvent(value) { function getNumberFormatter(optionSelect) { let formatterNotation; let formatterCompactDisplay; - + switch (optionSelect) { - case 'compactLong': - formatterNotation = 'compact'; - formatterCompactDisplay = 'long'; + case "compactLong": + formatterNotation = "compact"; + formatterCompactDisplay = "long"; break; - case 'standard': - formatterNotation = 'standard'; - formatterCompactDisplay = 'short'; + case "standard": + formatterNotation = "standard"; + formatterCompactDisplay = "short"; break; - case 'compactShort': + case "compactShort": default: - formatterNotation = 'compact'; - formatterCompactDisplay = 'short'; + formatterNotation = "compact"; + formatterCompactDisplay = "short"; } const formatter = Intl.NumberFormat( document.documentElement.lang || userLocales || navigator.language, @@ -307,37 +296,34 @@ function getNumberFormatter(optionSelect) { } })(); - function getColorFromTheme(colorTheme, voteIsLike) { let colorString; - switch(colorTheme) { - case 'accessible': + switch (colorTheme) { + case "accessible": if (voteIsLike === true) { - colorString = 'dodgerblue'; + colorString = "dodgerblue"; } else { - colorString = 'gold'; + colorString = "gold"; } break; - case 'neon': + case "neon": if (voteIsLike === true) { - colorString = 'aqua'; + colorString = "aqua"; } else { - colorString = 'magenta'; + colorString = "magenta"; } break; - case 'classic': + case "classic": default: if (voteIsLike === true) { - colorString = 'lime'; + colorString = "lime"; } else { - colorString = 'red'; + colorString = "red"; } } return colorString; } - - /* popup-script.js document.querySelector('#login') .addEventListener('click', function () { diff --git a/Extensions/combined/readme.md b/Extensions/combined/readme.md index ee827c0..0818eb3 100644 --- a/Extensions/combined/readme.md +++ b/Extensions/combined/readme.md @@ -1,7 +1,9 @@ # Extension Source + ## Guide to Compiling ## Compiling to Development (Testing) + <ol> <li>Go to the root directory of the project</li> <li>Run <code>npm i</code> to install all project dependancies (if not done so already)</li> @@ -9,6 +11,7 @@ </ol> ## Compiling to Production (Final Release) + <ol> <li>Go to the root directory of the project</li> <li>Run <code>npm i</code> to install all project dependancies (if not done so already)</li> diff --git a/Extensions/combined/ryd.background.js b/Extensions/combined/ryd.background.js index c6770d6..7c46316 100644 --- a/Extensions/combined/ryd.background.js +++ b/Extensions/combined/ryd.background.js @@ -1,6 +1,6 @@ const apiUrl = "https://returnyoutubedislikeapi.com"; -const voteDisabledIconName = 'icon_hold128.png'; -const defaultIconName = 'icon128.png'; +const voteDisabledIconName = "icon_hold128.png"; +const defaultIconName = "icon128.png"; let api; /** stores extension's global config */ @@ -11,14 +11,14 @@ let extConfig = { colorTheme: "classic", // classic, accessible, neon // coloredThumbs: false, // coloredBar: false, - numberDisplayFormat: 'compactShort', // compactShort, compactLong, standard + numberDisplayFormat: "compactShort", // compactShort, compactLong, standard numberDisplayRoundDown: true, // locale 'de' shows exact numbers by default }; if (isChrome()) api = chrome; else if (isFirefox()) api = browser; -initExtConfig() +initExtConfig(); api.runtime.onMessage.addListener((request, sender, sendResponse) => { if (request.message === "get_auth_token") { @@ -97,7 +97,7 @@ async function sendVote(videoId, vote) { await sendVote(videoId, vote); return; } - return response.json() + return response.json(); }) .then((response) => { solvePuzzle(response).then((solvedPuzzle) => { @@ -238,7 +238,9 @@ function generateUserID(length = 36) { function storageChangeHandler(changes, area) { if (changes.disableVoteSubmission !== undefined) { - handleDisableVoteSubmissionChangeEvent(changes.disableVoteSubmission.newValue); + handleDisableVoteSubmissionChangeEvent( + changes.disableVoteSubmission.newValue + ); } if (changes.coloredThumbs !== undefined) { handleColoredThumbsChangeEvent(changes.coloredThumbs.newValue); @@ -248,10 +250,11 @@ function storageChangeHandler(changes, area) { } if (changes.colorTheme !== undefined) { handleColorThemeChangeEvent(changes.colorTheme.newValue); + } if (changes.numberDisplayRoundDown !== undefined) { handleNumberDisplayRoundDownChangeEvent( changes.numberDisplayRoundDown.newValue - ); + ); } if (changes.numberDisplayFormat !== undefined) { handleNumberDisplayFormatChangeEvent(changes.numberDisplayFormat.newValue); @@ -276,9 +279,11 @@ function handleNumberDisplayRoundDownChangeEvent(value) { } function changeIcon(iconName) { - if (api.action !== undefined) api.action.setIcon({path: "/icons/" + iconName}); - else if (api.browserAction !== undefined) api.browserAction.setIcon({path: "/icons/" + iconName}); - else console.log('changing icon is not supported'); + if (api.action !== undefined) + api.action.setIcon({ path: "/icons/" + iconName }); + else if (api.browserAction !== undefined) + api.browserAction.setIcon({ path: "/icons/" + iconName }); + else console.log("changing icon is not supported"); } function handleColoredThumbsChangeEvent(value) { @@ -305,61 +310,59 @@ function initExtConfig() { } function initializeDisableVoteSubmission() { - api.storage.sync.get(['disableVoteSubmission'], (res) => { + api.storage.sync.get(["disableVoteSubmission"], (res) => { if (res.disableVoteSubmission === undefined) { - api.storage.sync.set({disableVoteSubmission: false}); - } - else { + api.storage.sync.set({ disableVoteSubmission: false }); + } else { extConfig.disableVoteSubmission = res.disableVoteSubmission; if (res.disableVoteSubmission) changeIcon(voteDisabledIconName); } }); } - function initializeColoredThumbs() { - api.storage.sync.get(['coloredThumbs'], (res) => { + api.storage.sync.get(["coloredThumbs"], (res) => { if (res.coloredThumbs === undefined) { - api.storage.sync.set({coloredThumbs: false}); - } - else { + api.storage.sync.set({ coloredThumbs: false }); + } else { extConfig.coloredThumbs = res.coloredThumbs; } - + }); +} + function initializeNumberDisplayRoundDown() { - api.storage.sync.get(['numberDisplayRoundDown'], (res) => { + api.storage.sync.get(["numberDisplayRoundDown"], (res) => { if (res.numberDisplayRoundDown === undefined) { - api.storage.sync.set({numberDisplayRoundDown: true}); + api.storage.sync.set({ numberDisplayRoundDown: true }); } else { extConfig.numberDisplayRoundDown = res.numberDisplayRoundDown; } }); } - function initializeColoredBar() { - api.storage.sync.get(['coloredBar'], (res) => { + api.storage.sync.get(["coloredBar"], (res) => { if (res.coloredBar === undefined) { - api.storage.sync.set({coloredBar: false}); - } - else { + api.storage.sync.set({ coloredBar: false }); + } else { extConfig.coloredBar = res.coloredBar; } }); } function initializeColorTheme() { - api.storage.sync.get(['colorTheme'], (res) => { + api.storage.sync.get(["colorTheme"], (res) => { if (res.colorTheme === undefined) { - api.storage.sync.set({colorTheme: false}); - } - else { + api.storage.sync.set({ colorTheme: false }); + } else { extConfig.colorTheme = res.colorTheme; } + }); +} function initializeNumberDisplayFormat() { - api.storage.sync.get(['numberDisplayFormat'], (res) => { + api.storage.sync.get(["numberDisplayFormat"], (res) => { if (res.numberDisplayFormat === undefined) { - api.storage.sync.set({ numberDisplayFormat: 'compactShort' }); + api.storage.sync.set({ numberDisplayFormat: "compactShort" }); } else { extConfig.numberDisplayFormat = res.numberDisplayFormat; } @@ -371,5 +374,7 @@ function isChrome() { } function isFirefox() { - return typeof browser !== "undefined" && typeof browser.runtime !== "undefined"; + return ( + typeof browser !== "undefined" && typeof browser.runtime !== "undefined" + ); } diff --git a/Extensions/combined/ryd.content-script.js b/Extensions/combined/ryd.content-script.js index 72d2dea..02370ed 100644 --- a/Extensions/combined/ryd.content-script.js +++ b/Extensions/combined/ryd.content-script.js @@ -25,18 +25,30 @@ import { } from "./src/state"; //--- Import Video & Browser Functions ---// -import { numberFormat, getBrowser, getVideoId, isVideoLoaded, cLog } from "./src/utils"; +import { + numberFormat, + getBrowser, + getVideoId, + isVideoLoaded, + cLog, +} from "./src/utils"; import { createRateBar } from "./src/bar"; -import { sendVideoIds, sendVote, likeClicked, dislikeClicked, addLikeDislikeEventListener, storageChangeHandler } from "./src/events" - +import { + sendVideoIds, + sendVote, + likeClicked, + dislikeClicked, + addLikeDislikeEventListener, + storageChangeHandler, +} from "./src/events"; -initExtConfig() +initExtConfig(); let jsInitChecktimer = null; function setEventListeners(evt) { function checkForJS_Finish() { - if (isShorts() || getButtons()?.offsetParent && isVideoLoaded()) { + if (isShorts() || (getButtons()?.offsetParent && isVideoLoaded())) { addLikeDislikeEventListener(); setInitialState(); getBrowser().storage.onChanged.addListener(storageChangeHandler); diff --git a/Extensions/combined/src/bar.js b/Extensions/combined/src/bar.js index 9391c45..4e8369b 100644 --- a/Extensions/combined/src/bar.js +++ b/Extensions/combined/src/bar.js @@ -1,9 +1,6 @@ import { getButtons } from "./buttons"; import { likesDisabledState, extConfig } from "./state"; -import { - cLog, - getColorFromTheme, -} from "./utils"; +import { cLog, getColorFromTheme } from "./utils"; import { isMobile, likesDisabledState } from "./state"; import { cLog } from "./utils"; function createRateBar(likes, dislikes) { @@ -18,22 +15,21 @@ function createRateBar(likes, dislikes) { const widthPercent = likes + dislikes > 0 ? (likes / (likes + dislikes)) * 100 : 50; - if (!rateBar) { - let colorLikeStyle = ''; - let colorDislikeStyle = ''; + let colorLikeStyle = ""; + let colorDislikeStyle = ""; if (extConfig.coloredBar) { - colorLikeStyle = '; background-color: ' + getColorFromTheme(true); - colorDislikeStyle = '; background-color: ' + getColorFromTheme(false); + colorLikeStyle = "; background-color: " + getColorFromTheme(true); + colorDislikeStyle = "; background-color: " + getColorFromTheme(false); } - if (!rateBar && !isMobile()) { - ( - document.getElementById("menu-container") || - document.querySelector("ytm-slim-video-action-bar-renderer") - ).insertAdjacentHTML( - "beforeend", - ` + if (!rateBar && !isMobile()) { + ( + document.getElementById("menu-container") || + document.querySelector("ytm-slim-video-action-bar-renderer") + ).insertAdjacentHTML( + "beforeend", + ` <div class="ryd-tooltip" style="width: ${widthPx}px"> <div class="ryd-tooltip-bar-container"> <div @@ -51,22 +47,26 @@ function createRateBar(likes, dislikes) { </tp-yt-paper-tooltip> </div> ` - ); - } else { - document.getElementById("ryd-bar-container").style.width = widthPx + "px"; - document.getElementById("ryd-bar").style.width = widthPercent + "%"; - document.querySelector( - "#ryd-dislike-tooltip > #tooltip" - ).innerHTML = `${likes.toLocaleString()} / ${dislikes.toLocaleString()}`; - if (extConfig.coloredBar) { - document.getElementById("ryd-bar-container").style.backgroundColor = getColorFromTheme(false); - document.getElementById("ryd-bar").style.backgroundColor = getColorFromTheme(true); + ); + } else { + document.getElementById("ryd-bar-container").style.width = + widthPx + "px"; + document.getElementById("ryd-bar").style.width = widthPercent + "%"; + document.querySelector( + "#ryd-dislike-tooltip > #tooltip" + ).innerHTML = `${likes.toLocaleString()} / ${dislikes.toLocaleString()}`; + if (extConfig.coloredBar) { + document.getElementById("ryd-bar-container").style.backgroundColor = + getColorFromTheme(false); + document.getElementById("ryd-bar").style.backgroundColor = + getColorFromTheme(true); + } } + } else { + cLog("removing bar"); + let ratebar = document.getElementById("ryd-bar-container"); + ratebar.parentNode.removeChild(ratebar); } - } else { - cLog("removing bar"); - let ratebar = document.getElementById("ryd-bar-container"); - ratebar.parentNode.removeChild(ratebar); } } diff --git a/Extensions/combined/src/buttons.js b/Extensions/combined/src/buttons.js index 4362b24..95ba1c6 100644 --- a/Extensions/combined/src/buttons.js +++ b/Extensions/combined/src/buttons.js @@ -3,12 +3,16 @@ import { isInViewport } from "./utils"; function getButtons() { //--- If Watching Youtube Shorts: ---// - if(isShorts()) { - let elements=document.querySelectorAll(isMobile() ? "ytm-like-button-renderer" : "#like-button > ytd-like-button-renderer"); - for(let element of elements) { + if (isShorts()) { + let elements = document.querySelectorAll( + isMobile() + ? "ytm-like-button-renderer" + : "#like-button > ytd-like-button-renderer" + ); + for (let element of elements) { //Youtube Shorts can have multiple like/dislike buttons when scrolling through videos //However, only one of them should be visible (no matter how you zoom) - if(isInViewport(element)) { + if (isInViewport(element)) { return element; } } diff --git a/Extensions/combined/src/events.js b/Extensions/combined/src/events.js index ea2e5e3..ccd46b2 100644 --- a/Extensions/combined/src/events.js +++ b/Extensions/combined/src/events.js @@ -111,20 +111,17 @@ function storageChangeHandler(changes, area) { handleDisableVoteSubmissionChangeEvent( changes.disableVoteSubmission.newValue ); + } if (changes.coloredThumbs !== undefined) { - handleColoredThumbsChangeEvent( - changes.coloredThumbs.newValue - ); + handleColoredThumbsChangeEvent(changes.coloredThumbs.newValue); } if (changes.coloredBar !== undefined) { - handleColoredBarChangeEvent( - changes.coloredBar.newValue - ); + handleColoredBarChangeEvent(changes.coloredBar.newValue); } if (changes.colorTheme !== undefined) { - handleColorThemeChangeEvent( - changes.colorTheme.newValue - ); + handleColorThemeChangeEvent(changes.colorTheme.newValue); + } + if (changes.numberDisplayRoundDown !== undefined) { handleNumberDisplayRoundDownChangeEvent( changes.numberDisplayRoundDown.newValue @@ -139,7 +136,6 @@ function handleDisableVoteSubmissionChangeEvent(value) { extConfig.disableVoteSubmission = value; } - function handleColoredThumbsChangeEvent(value) { extConfig.coloredThumbs = value; } @@ -151,7 +147,7 @@ function handleColoredBarChangeEvent(value) { function handleColorThemeChangeEvent(value) { extConfig.colorTheme = value; } - + function handleNumberDisplayFormatChangeEvent(value) { extConfig.numberDisplayFormat = value; } diff --git a/Extensions/combined/src/state.js b/Extensions/combined/src/state.js index 931cf86..6a85e8c 100644 --- a/Extensions/combined/src/state.js +++ b/Extensions/combined/src/state.js @@ -1,6 +1,6 @@ import { getLikeButton, getDislikeButton, getButtons } from "./buttons"; import { createRateBar } from "./bar"; -import { +import { getBrowser, getVideoId, cLog, @@ -22,7 +22,7 @@ let extConfig = { coloredThumbs: false, coloredBar: false, colorTheme: "classic", - numberDisplayFormat: 'compactShort', + numberDisplayFormat: "compactShort", numberDisplayRoundDown: true, }; @@ -39,7 +39,7 @@ function isMobile() { } function isShorts() { - return location.pathname.startsWith("/shorts") + return location.pathname.startsWith("/shorts"); } function isVideoLiked() { @@ -100,7 +100,7 @@ function setDislikes(dislikesCount) { } function getLikeCountFromButton() { - if(isShorts()) { + if (isShorts()) { //Youtube Shorts don't work with this query. It's not nessecary; we can skip it and still see the results. //It should be possible to fix this function, but it's not critical to showing the dislike count. return 0; @@ -183,26 +183,26 @@ function initializeDisableVoteSubmission() { }); } - function initializeColoredThumbs() { - getBrowser().storage.sync.get(['coloredThumbs'], (res) => { + getBrowser().storage.sync.get(["coloredThumbs"], (res) => { if (res.coloredThumbs === undefined) { - getBrowser().storage.sync.set({coloredThumbs: false}); - } - else { + getBrowser().storage.sync.set({ coloredThumbs: false }); + } else { extConfig.coloredThumbs = res.coloredThumbs; } }); } function initializeColoredBar() { - getBrowser().storage.sync.get(['coloredBar'], (res) => { + getBrowser().storage.sync.get(["coloredBar"], (res) => { if (res.coloredBar === undefined) { - getBrowser().storage.sync.set({coloredBar: false}); - } - else { + getBrowser().storage.sync.set({ coloredBar: false }); + } else { extConfig.coloredBar = res.coloredBar; } + }); +} + function initializeNumberDisplayRoundDown() { getBrowser().storage.sync.get(["numberDisplayRoundDown"], (res) => { if (res.numberDisplayRoundDown === undefined) { @@ -213,22 +213,21 @@ function initializeNumberDisplayRoundDown() { }); } - function initializeColorTheme() { - getBrowser().storage.sync.get(['colorTheme'], (res) => { + getBrowser().storage.sync.get(["colorTheme"], (res) => { if (res.colorTheme === undefined) { - getBrowser().storage.sync.set({colorTheme: false}); - } - else { + getBrowser().storage.sync.set({ colorTheme: false }); + } else { extConfig.colorTheme = res.colorTheme; } - } + }); +} + function initializeNumberDisplayFormat() { - getBrowser().storage.sync.get(['numberDisplayFormat'], (res) => { + getBrowser().storage.sync.get(["numberDisplayFormat"], (res) => { if (res.numberDisplayFormat === undefined) { - getBrowser().storage.sync.set({ numberDisplayFormat: 'compactShort' }); - } - else { + getBrowser().storage.sync.set({ numberDisplayFormat: "compactShort" }); + } else { extConfig.numberDisplayFormat = res.numberDisplayFormat; } }); diff --git a/Extensions/combined/src/utils.js b/Extensions/combined/src/utils.js index 60c3372..8fc32b8 100644 --- a/Extensions/combined/src/utils.js +++ b/Extensions/combined/src/utils.js @@ -1,6 +1,4 @@ -import { - extConfig, -} from "./state"; +import { extConfig } from "./state"; function roundDown(num) { if (num < 1000) return num; @@ -19,35 +17,37 @@ function numberFormat(numberState) { ?.getAttribute("href") )?.searchParams?.get("locale"); } catch {} - + let numberDisplay; if (extConfig.numberDisplayRoundDown === false) { numberDisplay = numberState; } else { numberDisplay = roundDown(numberState); } - return getNumberFormatter(extConfig.numberDisplayFormat).format(numberDisplay); + return getNumberFormatter(extConfig.numberDisplayFormat).format( + numberDisplay + ); } function getNumberFormatter(optionSelect) { let formatterNotation; let formatterCompactDisplay; - - switch(optionSelect) { - case 'compactLong': - formatterNotation = 'compact'; - formatterCompactDisplay = 'long'; + + switch (optionSelect) { + case "compactLong": + formatterNotation = "compact"; + formatterCompactDisplay = "long"; break; - case 'standard': - formatterNotation = 'standard'; - formatterCompactDisplay = 'short'; + case "standard": + formatterNotation = "standard"; + formatterCompactDisplay = "short"; break; - case 'compactShort': + case "compactShort": default: - formatterNotation = 'compact'; - formatterCompactDisplay = 'short'; + formatterNotation = "compact"; + formatterCompactDisplay = "short"; } - + const formatter = Intl.NumberFormat( document.documentElement.lang || userLocales || navigator.language, { @@ -90,10 +90,10 @@ function isInViewport(element) { const height = innerHeight || document.documentElement.clientHeight; const width = innerWidth || document.documentElement.clientWidth; return ( - rect.top >= 0 && - rect.left >= 0 && - rect.bottom <= height && - rect.right <= width + rect.top >= 0 && + rect.left >= 0 && + rect.bottom <= height && + rect.right <= width ); } @@ -115,30 +115,29 @@ function cLog(message, writer) { } } - function getColorFromTheme(voteIsLike) { let colorString; - switch(extConfig.colorTheme) { - case 'accessible': + switch (extConfig.colorTheme) { + case "accessible": if (voteIsLike === true) { - colorString = 'dodgerblue'; + colorString = "dodgerblue"; } else { - colorString = 'gold'; + colorString = "gold"; } break; - case 'neon': + case "neon": if (voteIsLike === true) { - colorString = 'aqua'; + colorString = "aqua"; } else { - colorString = 'magenta'; + colorString = "magenta"; } break; - case 'classic': + case "classic": default: if (voteIsLike === true) { - colorString = 'lime'; + colorString = "lime"; } else { - colorString = 'red'; + colorString = "red"; } } return colorString; @@ -151,5 +150,12 @@ export { isVideoLoaded, cLog, getColorFromTheme, -} -export { numberFormat, getBrowser, getVideoId, isInViewport, isVideoLoaded, cLog } +}; +export { + numberFormat, + getBrowser, + getVideoId, + isInViewport, + isVideoLoaded, + cLog, +}; |