Add user option to re-format likes

fixes #543
This feature does not force-display likes when uploader has disabled like number display. Consult with other issues.
This commit is contained in:
Yvon Cui
2022-04-19 00:57:28 -05:00
parent a99410ae13
commit 09b29d7cab
5 changed files with 70 additions and 0 deletions
+6
View File
@@ -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">
+20
View File
@@ -7,6 +7,7 @@ const config = {
colorTheme: "classic",
numberDisplayFormat: "compactShort",
numberDisplayRoundDown: true,
numberDisplayFormatLikes: 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;
+19
View File
@@ -11,6 +11,7 @@ let extConfig = {
colorTheme: "classic", // classic, accessible, neon
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;
@@ -264,6 +265,9 @@ function storageChangeHandler(changes, area) {
if (changes.numberDisplayFormat !== undefined) {
handleNumberDisplayFormatChangeEvent(changes.numberDisplayFormat.newValue);
}
if (changes.numberDisplayReformatLikes !== undefined) {
handleNumberDisplayReformatLikesChangeEvent(changes.numberDisplayReformatLikes.newValue);
}
}
function handleDisableVoteSubmissionChangeEvent(value) {
@@ -306,6 +310,10 @@ function handleColorThemeChangeEvent(value) {
extConfig.colorTheme = value;
}
function handleNumberDisplayReformatLikesChangeEvent(value) {
extConfig.numberDisplayReformatLikes = value;
}
api.storage.onChanged.addListener(storageChangeHandler);
function initExtConfig() {
@@ -315,6 +323,7 @@ function initExtConfig() {
initializeColorTheme();
initializeNumberDisplayFormat();
initializeNumberDisplayRoundDown();
initializeNumberDisplayReformatLikes();
}
function initializeDisableVoteSubmission() {
@@ -378,6 +387,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";
}
+7
View File
@@ -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,
+18
View File
@@ -24,6 +24,7 @@ let extConfig = {
colorTheme: "classic",
numberDisplayFormat: "compactShort",
numberDisplayRoundDown: true,
numberDisplayReformatLikes: false,
};
let storedData = {
@@ -115,6 +116,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);
@@ -171,6 +178,7 @@ function initExtConfig() {
initializeColorTheme();
initializeNumberDisplayFormat();
initializeNumberDisplayRoundDown();
initializeNumberDisplayReformatLikes();
}
function initializeDisableVoteSubmission() {
@@ -233,6 +241,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,