diff options
author | Dmitrii Selivanov <selivano.d@gmail.com> | 2022-07-20 01:01:10 +0300 |
---|---|---|
committer | GitHub <noreply@github.com> | 2022-07-20 01:01:10 +0300 |
commit | cb5f9474a2a5c0ae24637db4c6ff7845f00f2cd2 (patch) | |
tree | b2972ea85e49d273360f557806f131449aeb02dd | |
parent | d39a5e5e9f5f9c36e5d87cb6cc8466242afb68de (diff) | |
parent | a5375bae2acb2aa551a77f414b93e7aa1e005234 (diff) |
Merge pull request #560 from ErykDarnowski/main
Implemented option to show like/dislike percentage instead of full like/dislike count
-rw-r--r-- | Extensions/UserScript/Return Youtube Dislike.user.js | 35 | ||||
-rw-r--r-- | Extensions/combined/popup.css | 3 | ||||
-rw-r--r-- | Extensions/combined/popup.html | 16 | ||||
-rw-r--r-- | Extensions/combined/popup.js | 47 | ||||
-rw-r--r-- | Extensions/combined/ryd.background.js | 39 | ||||
-rw-r--r-- | Extensions/combined/src/bar.js | 113 | ||||
-rw-r--r-- | Extensions/combined/src/state.js | 24 |
7 files changed, 229 insertions, 48 deletions
diff --git a/Extensions/UserScript/Return Youtube Dislike.user.js b/Extensions/UserScript/Return Youtube Dislike.user.js index 476561b..906b350 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) + tooltipPercentageMode: "none", // [none*, dash_like, dash_dislike, both, only_like, only_dislike] Mode of showing percentage in like/dislike bar tooltip. numberDisplayReformatLikes: false, // [true, false*] Re-format like numbers (Make likes and dislikes format consistent) // END USER OPTIONS }; @@ -262,6 +263,32 @@ function createRateBar(likes, dislikes) { const widthPercent = likes + dislikes > 0 ? (likes / (likes + dislikes)) * 100 : 50; + var likePercentage = parseFloat(widthPercent.toFixed(1)); + const dislikePercentage = (100 - likePercentage).toLocaleString(); + likePercentage = likePercentage.toLocaleString(); + + var tooltipInnerHTML; + switch (extConfig.tooltipPercentageMode) { + case "dash_like": + tooltipInnerHTML = `${likes.toLocaleString()} / ${dislikes.toLocaleString()} - ${likePercentage}%` + break; + case "dash_dislike": + tooltipInnerHTML = `${likes.toLocaleString()} / ${dislikes.toLocaleString()} - ${dislikePercentage}%` + break; + case "both": + tooltipInnerHTML = `${likePercentage}% / ${dislikePercentage}%` + break; + case "only_like": + tooltipInnerHTML = `${likePercentage}%` + break; + case "only_dislike": + tooltipInnerHTML = `${dislikePercentage}%` + break; + default: + tooltipInnerHTML = `${likes.toLocaleString()} / ${dislikes.toLocaleString()}` + } + + if (!rateBar && !isMobile) { let colorLikeStyle = ""; let colorDislikeStyle = ""; @@ -269,7 +296,7 @@ function createRateBar(likes, dislikes) { colorLikeStyle = "; background-color: " + getColorFromTheme(true); colorDislikeStyle = "; background-color: " + getColorFromTheme(false); } - + document.getElementById("menu-container").insertAdjacentHTML( "beforeend", ` @@ -286,7 +313,7 @@ function createRateBar(likes, dislikes) { </div> </div> <tp-yt-paper-tooltip position="top" id="ryd-dislike-tooltip" class="style-scope ytd-sentiment-bar-renderer" role="tooltip" tabindex="-1"> - <!--css-build:shady-->${likes.toLocaleString()} / ${dislikes.toLocaleString()} + <!--css-build:shady-->${tooltipInnerHTML} </tp-yt-paper-tooltip> </div> ` @@ -300,8 +327,8 @@ function createRateBar(likes, dislikes) { document.querySelector( "#ryd-dislike-tooltip > #tooltip" - ).innerHTML = `${likes.toLocaleString()} / ${dislikes.toLocaleString()}`; - + ).innerHTML = tooltipInnerHTML; + if (extConfig.coloredBar) { document.getElementById("return-youtube-dislike-bar-container").style.backgroundColor = getColorFromTheme(false); diff --git a/Extensions/combined/popup.css b/Extensions/combined/popup.css index dfe94cb..5c51c9c 100644 --- a/Extensions/combined/popup.css +++ b/Extensions/combined/popup.css @@ -15,7 +15,8 @@ html, body { background-color: var(--background); color: var(--white); - min-width: 300px; + min-width: 310px; + min-height: 350px; padding: 0.5em; font-family: "Roboto", Arial, Helvetica, sans-serif; font-size: 14px; diff --git a/Extensions/combined/popup.html b/Extensions/combined/popup.html index 7d39246..1381dc9 100644 --- a/Extensions/combined/popup.html +++ b/Extensions/combined/popup.html @@ -166,6 +166,22 @@ > </span > </div> + <br/> + <label class="switch" data-hover="Display percentage in like/dislike bar tooltip."> + <input type="checkbox" id="show_tooltip_percentage"/> + <span class="slider"/> + <span class="switchLabel">Percentage in like/dislike bar tooltip.</span> + </label> + <div class="custom-select"> + <label for="tooltip_percentage_mode" data-hover="Use custom percentage display on hover.">Percent mode:</label> + <select name="tooltip_percentage_mode" id="tooltip_percentage_mode"> + <option value="dash_like" id="tooltip_percentage_mode_dash_like">190 / 10 - 95%</option> + <option value="dash_dislike" id="tooltip_percentage_mode_dash_dislike">190 / 10 - 5%</option> + <option value="both" id="tooltip_percentage_mode_both">95% / 5%</option> + <option value="only_like" id="tooltip_percentage_mode_only_like">95%</option> + <option value="only_dislike" id="tooltip_percentage_mode_only_dislike">5%</option> + </select> + </div> </fieldset> </body> <script src="popup.js"></script> diff --git a/Extensions/combined/popup.js b/Extensions/combined/popup.js index 2fb0db7..a307a47 100644 --- a/Extensions/combined/popup.js +++ b/Extensions/combined/popup.js @@ -1,3 +1,5 @@ +import { cLog } from "./src/utils"; + /* Config */ const config = { advanced: false, @@ -7,7 +9,9 @@ const config = { colorTheme: "classic", numberDisplayFormat: "compactShort", numberDisplayRoundDown: true, - numberDisplayReformatLikes: false, + showTooltipPercentage: false, + tooltipPercentageMode: "dash_like", + 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: @@ -86,6 +90,14 @@ document.getElementById("number_format").addEventListener("change", (ev) => { chrome.storage.sync.set({ numberDisplayFormat: ev.target.value }); }); +document.getElementById("show_tooltip_percentage").addEventListener("click", (ev) => { + chrome.storage.sync.set({ showTooltipPercentage: ev.target.checked }); +}); + +document.getElementById("tooltip_percentage_mode").addEventListener("change", (ev) => { + chrome.storage.sync.set({ tooltipPercentageMode: ev.target.value }); +}); + document.getElementById("number_reformat_likes").addEventListener("click", (ev) => { chrome.storage.sync.set({ numberDisplayReformatLikes: ev.target.checked }); }); @@ -119,6 +131,8 @@ function initConfig() { initializeColorTheme(); initializeNumberDisplayFormat(); initializeNumberDisplayRoundDown(); + initializeTooltipPercentage(); + initializeTooltipPercentageMode(); initializeNumberDisplayReformatLikes(); } @@ -190,6 +204,18 @@ function initializeNumberDisplayRoundDown() { }); } +function initializeTooltipPercentage(){ + chrome.storage.sync.get(["showTooltipPercentage"], (res) => { + handleShowTooltipPercentageChangeEvent(res.showTooltipPercentage); + }); +}; + +function initializeTooltipPercentageMode() { + chrome.storage.sync.get(["tooltipPercentageMode"], (res) => { + handleTooltipPercentageModeChangeEvent(res.tooltipPercentageMode); + }); +}; + function initializeNumberDisplayFormat() { chrome.storage.sync.get(["numberDisplayFormat"], (res) => { handleNumberDisplayFormatChangeEvent(res.numberDisplayFormat); @@ -243,6 +269,9 @@ function storageChangeHandler(changes, area) { if (changes.numberDisplayFormat !== undefined) { handleNumberDisplayFormatChangeEvent(changes.numberDisplayFormat.newValue); } + if (changes.showTooltipPercentage !== undefined) { + handleShowTooltipPercentageChangeEvent(changes.showTooltipPercentage.newValue); + } if (changes.numberDisplayReformatLikes !== undefined) { handleNumberDisplayReformatLikesChangeEvent(changes.numberDisplayReformatLikes.newValue); } @@ -293,6 +322,22 @@ function handleNumberDisplayFormatChangeEvent(value) { .querySelector('option[value="' + value + '"]').selected = true; } +function handleShowTooltipPercentageChangeEvent(value) { + config.showTooltipPercentage = value; + document.getElementById("show_tooltip_percentage").checked = value; +}; + +function handleTooltipPercentageModeChangeEvent(value) { + if (!value) { + value = "dash_like"; + } + config.tooltipPercentageMode = value; + + document + .getElementById("tooltip_percentage_mode") + .querySelector('option[value="' + value + '"]').selected = true; +}; + function handleNumberDisplayReformatLikesChangeEvent(value) { config.numberDisplayReformatLikes = value; document.getElementById("number_reformat_likes").checked = value; diff --git a/Extensions/combined/ryd.background.js b/Extensions/combined/ryd.background.js index 48f57d0..b6b6b67 100644 --- a/Extensions/combined/ryd.background.js +++ b/Extensions/combined/ryd.background.js @@ -279,6 +279,12 @@ function storageChangeHandler(changes, area) { changes.numberDisplayReformatLikes.newValue ); } + if (changes.showTooltipPercentage !== undefined) { + handleShowTooltipPercentageChangeEvent(changes.showTooltipPercentage.newValue); + } + if (changes.numberDisplayReformatLikes !== undefined) { + handleNumberDisplayReformatLikesChangeEvent(changes.numberDisplayReformatLikes.newValue); + } } function handleDisableVoteSubmissionChangeEvent(value) { @@ -294,6 +300,17 @@ function handleNumberDisplayFormatChangeEvent(value) { extConfig.numberDisplayFormat = value; } +function handleShowTooltipPercentageChangeEvent(value) { + extConfig.showTooltipPercentage = value; +}; + +function handleTooltipPercentageModeChangeEvent(value) { + if (!value) { + value = "dash_like"; + } + extConfig.tooltipPercentageMode = value; +}; + function handleNumberDisplayRoundDownChangeEvent(value) { extConfig.numberDisplayRoundDown = value; } @@ -335,6 +352,8 @@ function initExtConfig() { initializeNumberDisplayFormat(); initializeNumberDisplayRoundDown(); initializeNumberDisplayReformatLikes(); + initializeTooltipPercentage(); + initializeTooltipPercentageMode(); } function initializeDisableVoteSubmission() { @@ -398,6 +417,26 @@ function initializeNumberDisplayFormat() { }); } +function initializeTooltipPercentage() { + api.storage.sync.get(["showTooltipPercentage"], (res) => { + if (res.showTooltipPercentage === undefined) { + api.storage.sync.set({ showTooltipPercentage: false }); + } else { + extConfig.showTooltipPercentage = res.showTooltipPercentage; + } + }); +} + +function initializeTooltipPercentageMode() { + api.storage.sync.get(["tooltipPercentageMode"], (res) => { + if (res.tooltipPercentageMode === undefined) { + api.storage.sync.set({ tooltipPercentageMode: "dash_like" }); + } else { + extConfig.tooltipPercentageMode = res.tooltipPercentageMode; + } + }); +} + function initializeNumberDisplayReformatLikes() { api.storage.sync.get(["numberDisplayReformatLikes"], (res) => { if (res.numberDisplayReformatLikes === undefined) { diff --git a/Extensions/combined/src/bar.js b/Extensions/combined/src/bar.js index c56ab57..6267ce6 100644 --- a/Extensions/combined/src/bar.js +++ b/Extensions/combined/src/bar.js @@ -1,5 +1,5 @@ import { getButtons } from "./buttons"; -import { extConfig, isMobile, isLikesDisabled } from "./state"; +import { extConfig, isMobile, isLikesDisabled, isShorts } from "./state"; import { cLog, getColorFromTheme } from "./utils"; function createRateBar(likes, dislikes) { @@ -14,49 +14,78 @@ function createRateBar(likes, dislikes) { const widthPercent = likes + dislikes > 0 ? (likes / (likes + dislikes)) * 100 : 50; - if (!rateBar && !isMobile()) { - let colorLikeStyle = ""; - let colorDislikeStyle = ""; - if (extConfig.coloredBar) { - colorLikeStyle = "; background-color: " + getColorFromTheme(true); - colorDislikeStyle = "; background-color: " + getColorFromTheme(false); - } + var likePercentage = parseFloat(widthPercent.toFixed(1)); + const dislikePercentage = (100 - likePercentage).toLocaleString(); + likePercentage = likePercentage.toLocaleString(); - ( - 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 - id="ryd-bar-container" - style="width: 100%; height: 2px;${colorDislikeStyle}" - > - <div - id="ryd-bar" - style="width: ${widthPercent}%; height: 100%${colorLikeStyle}" - ></div> - </div> - </div> - <tp-yt-paper-tooltip position="top" id="ryd-dislike-tooltip" class="style-scope ytd-sentiment-bar-renderer" role="tooltip" tabindex="-1"> - <!--css-build:shady-->${likes.toLocaleString()} / ${dislikes.toLocaleString()} - </tp-yt-paper-tooltip> - </div> - ` - ); + if (extConfig.showTooltipPercentage) { + var tooltipInnerHTML; + switch (extConfig.tooltipPercentageMode) { + case "dash_dislike": + tooltipInnerHTML = `${likes.toLocaleString()} / ${dislikes.toLocaleString()} - ${dislikePercentage}%` + break; + case "both": + tooltipInnerHTML = `${likePercentage}% / ${dislikePercentage}%` + break; + case "only_like": + tooltipInnerHTML = `${likePercentage}%` + break; + case "only_dislike": + tooltipInnerHTML = `${dislikePercentage}%` + break; + default: // dash_like + tooltipInnerHTML = `${likes.toLocaleString()} / ${dislikes.toLocaleString()} - ${likePercentage}%` + } } 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); + tooltipInnerHTML = `${likes.toLocaleString()} / ${dislikes.toLocaleString()}` + } + + + if (!isShorts()) { + if (!rateBar && !isMobile()) { + let colorLikeStyle = ""; + let colorDislikeStyle = ""; + if (extConfig.coloredBar) { + colorLikeStyle = "; background-color: " + getColorFromTheme(true); + colorDislikeStyle = "; background-color: " + getColorFromTheme(false); + } + + ( + 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 + id="ryd-bar-container" + style="width: 100%; height: 2px;${colorDislikeStyle}" + > + <div + id="ryd-bar" + style="width: ${widthPercent}%; height: 100%${colorLikeStyle}" + ></div> + </div> + </div> + <tp-yt-paper-tooltip position="top" id="ryd-dislike-tooltip" class="style-scope ytd-sentiment-bar-renderer" role="tooltip" tabindex="-1"> + <!--css-build:shady-->${tooltipInnerHTML} + </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 = tooltipInnerHTML; + if (extConfig.coloredBar) { + document.getElementById("ryd-bar-container").style.backgroundColor = + getColorFromTheme(false); + document.getElementById("ryd-bar").style.backgroundColor = + getColorFromTheme(true); + } } } } else { diff --git a/Extensions/combined/src/state.js b/Extensions/combined/src/state.js index 7160903..34b15a1 100644 --- a/Extensions/combined/src/state.js +++ b/Extensions/combined/src/state.js @@ -23,6 +23,8 @@ let extConfig = { colorTheme: "classic", numberDisplayFormat: "compactShort", numberDisplayRoundDown: true, + showTooltipPercentage: false, + tooltipPercentageMode: "dash_like", numberDisplayReformatLikes: false, }; @@ -254,6 +256,8 @@ function initExtConfig() { initializeColorTheme(); initializeNumberDisplayFormat(); initializeNumberDisplayRoundDown(); + initializeTooltipPercentage(); + initializeTooltipPercentageMode(); initializeNumberDisplayReformatLikes(); } @@ -317,6 +321,26 @@ function initializeNumberDisplayFormat() { }); } +function initializeTooltipPercentage() { + getBrowser().storage.sync.get(["showTooltipPercentage"], (res) => { + if (res.showTooltipPercentage === undefined) { + getBrowser().storage.sync.set({ showTooltipPercentage: false }); + } else { + extConfig.showTooltipPercentage = res.showTooltipPercentage; + } + }); +} + +function initializeTooltipPercentageMode() { + getBrowser().storage.sync.get(["tooltipPercentageMode"], (res) => { + if (res.tooltipPercentageMode === undefined) { + getBrowser().storage.sync.set({ tooltipPercentageMode: "dash_like" }); + } else { + extConfig.tooltipPercentageMode = res.tooltipPercentageMode; + } + }); +} + function initializeNumberDisplayReformatLikes() { getBrowser().storage.sync.get(["numberDisplayReformatLikes"], (res) => { if (res.numberDisplayReformatLikes === undefined) { |