diff options
author | Dmitrii Selivanov <selivano.d@gmail.com> | 2022-04-26 20:00:16 +0300 |
---|---|---|
committer | GitHub <noreply@github.com> | 2022-04-26 20:00:16 +0300 |
commit | 15fa6efaae9afb605c4aff7f9190840fc295b1eb (patch) | |
tree | 728467f67c678b7d2528b4536f1a9506b8933e8d | |
parent | 8bb6ef73fb7ff7516136dcf65fb70a63b8c70bfb (diff) | |
parent | 43380c83c3b62f25cdeb1a68e503aa9de4dff905 (diff) |
Merge pull request #549 from cyrildtm/extOptionFormatLikes
Add user option to re-format likes
-rw-r--r-- | Extensions/UserScript/Return Youtube Dislike.user.js | 20 | ||||
-rw-r--r-- | Extensions/combined/popup.html | 6 | ||||
-rw-r--r-- | Extensions/combined/popup.js | 20 | ||||
-rw-r--r-- | Extensions/combined/ryd.background.js | 41 | ||||
-rw-r--r-- | Extensions/combined/src/events.js | 7 | ||||
-rw-r--r-- | Extensions/combined/src/state.js | 18 |
6 files changed, 100 insertions, 12 deletions
diff --git a/Extensions/UserScript/Return Youtube Dislike.user.js b/Extensions/UserScript/Return Youtube Dislike.user.js index 8ee7dcf..3056e6f 100644 --- a/Extensions/UserScript/Return Youtube Dislike.user.js +++ b/Extensions/UserScript/Return Youtube Dislike.user.js @@ -33,6 +33,7 @@ const extConfig = { colorTheme: "classic", // [classic*, accessible, neon] Color theme (red/green, blue/yellow, pink/cyan) numberDisplayFormat: "compactShort", // [compactShort*, compactLong, standard] Number format (For non-English locale users, you may be able to improve appearance with a different option. Please file a feature request if your locale is not covered) numberDisplayRoundDown: true, // [true*, false] Round down numbers (Show rounded down numbers) + numberDisplayReformatLikes: false, // [true, false*] Re-format like numbers (Make likes and dislikes format consistent) // END USER OPTIONS }; @@ -198,6 +199,19 @@ function setDislikes(dislikesCount) { getButtons().children[1].querySelector("#text").innerText = dislikesCount; } +function getLikeCountFromButton() { + 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; + } + let likesStr = getLikeButton() + .querySelector("button") + .getAttribute("aria-label") + .replace(/\D/g, ""); + return likesStr.length > 0 ? parseInt(likesStr) : false; +} + (typeof GM_addStyle != "undefined" ? GM_addStyle : (styles) => { @@ -311,6 +325,12 @@ function setState() { likesvalue = likes; dislikesvalue = dislikes; setDislikes(numberFormat(dislikes)); + if (extConfig.numberDisplayReformatLikes === true) { + const nativeLikes = getLikeCountFromButton(); + if (nativeLikes !== false) { + setLikes(numberFormat(nativeLikes)); + } + } createRateBar(likes, dislikes); if (extConfig.coloredThumbs === true) { if (isShorts()) { // for shorts, leave deactived buttons in default color diff --git a/Extensions/combined/popup.html b/Extensions/combined/popup.html index aeaba4c..7d39246 100644 --- a/Extensions/combined/popup.html +++ b/Extensions/combined/popup.html @@ -108,6 +108,12 @@ <span class="switchLabel">Show rounded down numbers</span> </label> <br/> + <label class="switch" data-hover="Make likes and dislikes format consistent"> + <input type="checkbox" id="number_reformat_likes"/> + <span class="slider"/> + <span class="switchLabel">Re-format like numbers</span> + </label> + <br/> <div class="custom-select"> <label for="number_format">Number format:</label> <select name="number_format" id="number_format"> diff --git a/Extensions/combined/popup.js b/Extensions/combined/popup.js index 53eb179..2fb0db7 100644 --- a/Extensions/combined/popup.js +++ b/Extensions/combined/popup.js @@ -7,6 +7,7 @@ const config = { colorTheme: "classic", numberDisplayFormat: "compactShort", numberDisplayRoundDown: true, + numberDisplayReformatLikes: false, 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: @@ -85,6 +86,10 @@ document.getElementById("number_format").addEventListener("change", (ev) => { chrome.storage.sync.set({ numberDisplayFormat: ev.target.value }); }); +document.getElementById("number_reformat_likes").addEventListener("click", (ev) => { + chrome.storage.sync.set({ numberDisplayReformatLikes: ev.target.checked }); +}); + /* Advanced Toggle */ const advancedToggle = document.getElementById("advancedToggle"); advancedToggle.addEventListener("click", () => { @@ -114,6 +119,7 @@ function initConfig() { initializeColorTheme(); initializeNumberDisplayFormat(); initializeNumberDisplayRoundDown(); + initializeNumberDisplayReformatLikes(); } function initializeVersionNumber() { @@ -206,6 +212,12 @@ function updateNumberDisplayFormatContent(roundDown) { getNumberFormatter("standard").format(testValue); } +function initializeNumberDisplayReformatLikes() { + chrome.storage.sync.get(["numberDisplayReformatLikes"], (res) => { + handleNumberDisplayReformatLikesChangeEvent(res.numberDisplayReformatLikes); + }); +} + chrome.storage.onChanged.addListener(storageChangeHandler); function storageChangeHandler(changes, area) { @@ -231,6 +243,9 @@ function storageChangeHandler(changes, area) { if (changes.numberDisplayFormat !== undefined) { handleNumberDisplayFormatChangeEvent(changes.numberDisplayFormat.newValue); } + if (changes.numberDisplayReformatLikes !== undefined) { + handleNumberDisplayReformatLikesChangeEvent(changes.numberDisplayReformatLikes.newValue); + } } function handleDisableVoteSubmissionChangeEvent(value) { @@ -278,6 +293,11 @@ function handleNumberDisplayFormatChangeEvent(value) { .querySelector('option[value="' + value + '"]').selected = true; } +function handleNumberDisplayReformatLikesChangeEvent(value) { + config.numberDisplayReformatLikes = value; + document.getElementById("number_reformat_likes").checked = value; +} + function getNumberFormatter(optionSelect) { let formatterNotation; let formatterCompactDisplay; diff --git a/Extensions/combined/ryd.background.js b/Extensions/combined/ryd.background.js index 08f6afa..10b08d2 100644 --- a/Extensions/combined/ryd.background.js +++ b/Extensions/combined/ryd.background.js @@ -9,10 +9,9 @@ let extConfig = { coloredThumbs: false, coloredBar: false, colorTheme: "classic", // classic, accessible, neon - // coloredThumbs: false, - // coloredBar: false, numberDisplayFormat: "compactShort", // compactShort, compactLong, standard numberDisplayRoundDown: true, // locale 'de' shows exact numbers by default + numberDisplayReformatLikes: false, // use existing (native) likes number }; if (isChrome()) api = chrome; @@ -74,16 +73,16 @@ api.runtime.onMessage.addListener((request, sender, sendResponse) => { } }); - api.storage.sync.get(['lastShowChangelogVersion'], (details) => { - if (extConfig.showUpdatePopup === true && - details.lastShowChangelogVersion !== chrome.runtime.getManifest().version - ) { - // keep it inside get to avoid race condition - api.storage.sync.set({'lastShowChangelogVersion ': chrome.runtime.getManifest().version}); - // wait until async get runs & don't steal tab focus - api.tabs.create({url: api.runtime.getURL("/changelog/3/changelog_3.0.html"), active: false}); - } - }); +api.storage.sync.get(['lastShowChangelogVersion'], (details) => { + if (extConfig.showUpdatePopup === true && + details.lastShowChangelogVersion !== chrome.runtime.getManifest().version + ) { + // keep it inside get to avoid race condition + api.storage.sync.set({'lastShowChangelogVersion ': chrome.runtime.getManifest().version}); + // wait until async get runs & don't steal tab focus + api.tabs.create({url: api.runtime.getURL("/changelog/3/changelog_3.0.html"), active: false}); + } +}); async function sendVote(videoId, vote) { api.storage.sync.get(null, async (storageResult) => { @@ -270,6 +269,9 @@ function storageChangeHandler(changes, area) { if (changes.numberDisplayFormat !== undefined) { handleNumberDisplayFormatChangeEvent(changes.numberDisplayFormat.newValue); } + if (changes.numberDisplayReformatLikes !== undefined) { + handleNumberDisplayReformatLikesChangeEvent(changes.numberDisplayReformatLikes.newValue); + } } function handleDisableVoteSubmissionChangeEvent(value) { @@ -312,6 +314,10 @@ function handleColorThemeChangeEvent(value) { extConfig.colorTheme = value; } +function handleNumberDisplayReformatLikesChangeEvent(value) { + extConfig.numberDisplayReformatLikes = value; +} + api.storage.onChanged.addListener(storageChangeHandler); function initExtConfig() { @@ -321,6 +327,7 @@ function initExtConfig() { initializeColorTheme(); initializeNumberDisplayFormat(); initializeNumberDisplayRoundDown(); + initializeNumberDisplayReformatLikes(); } function initializeDisableVoteSubmission() { @@ -384,6 +391,16 @@ function initializeNumberDisplayFormat() { }); } +function initializeNumberDisplayReformatLikes() { + api.storage.sync.get(["numberDisplayReformatLikes"], (res) => { + if (res.numberDisplayReformatLikes === undefined) { + api.storage.sync.set({ numberDisplayReformatLikes: false }); + } else { + extConfig.numberDisplayReformatLikes = res.numberDisplayReformatLikes; + } + }); +} + function isChrome() { return typeof chrome !== "undefined" && typeof chrome.runtime !== "undefined"; } diff --git a/Extensions/combined/src/events.js b/Extensions/combined/src/events.js index 5b663d5..b56b142 100644 --- a/Extensions/combined/src/events.js +++ b/Extensions/combined/src/events.js @@ -130,6 +130,9 @@ function storageChangeHandler(changes, area) { if (changes.numberDisplayFormat !== undefined) { handleNumberDisplayFormatChangeEvent(changes.numberDisplayFormat.newValue); } + if (changes.numberDisplayReformatLikes !== undefined) { + handleNumberDisplayReformatLikesChangeEvent(changes.numberDisplayReformatLikes.newValue); + } } function handleDisableVoteSubmissionChangeEvent(value) { @@ -157,6 +160,10 @@ function handleNumberDisplayRoundDownChangeEvent(value) { extConfig.numberDisplayRoundDown = value; } +function handleNumberDisplayReformatLikesChangeEvent(value) { + extConfig.numberDisplayReformatLikes = value; +} + export { sendVote, sendVideoIds, diff --git a/Extensions/combined/src/state.js b/Extensions/combined/src/state.js index 1ec2af5..87b3b06 100644 --- a/Extensions/combined/src/state.js +++ b/Extensions/combined/src/state.js @@ -23,6 +23,7 @@ let extConfig = { colorTheme: "classic", numberDisplayFormat: "compactShort", numberDisplayRoundDown: true, + numberDisplayReformatLikes: false, }; let storedData = { @@ -153,6 +154,12 @@ function getLikeCountFromButton() { function processResponse(response, storedData) { const formattedDislike = numberFormat(response.dislikes); setDislikes(formattedDislike); + if (extConfig.numberDisplayReformatLikes === true) { + const nativeLikes = getLikeCountFromButton(); + if (nativeLikes !== false) { + setLikes(numberFormat(nativeLikes)); + } + } storedData.dislikes = parseInt(response.dislikes); storedData.likes = getLikeCountFromButton() || parseInt(response.likes); createRateBar(storedData.likes, storedData.dislikes); @@ -229,6 +236,7 @@ function initExtConfig() { initializeColorTheme(); initializeNumberDisplayFormat(); initializeNumberDisplayRoundDown(); + initializeNumberDisplayReformatLikes(); } function initializeDisableVoteSubmission() { @@ -291,6 +299,16 @@ function initializeNumberDisplayFormat() { }); } +function initializeNumberDisplayReformatLikes() { + getBrowser().storage.sync.get(["numberDisplayReformatLikes"], (res) => { + if (res.numberDisplayReformatLikes === undefined) { + getBrowser().storage.sync.set({ numberDisplayReformatLikes: false }); + } else { + extConfig.numberDisplayReformatLikes = res.numberDisplayReformatLikes; + } + }); +} + export { isMobile, isShorts, |