Welcome to mirror list, hosted at ThFree Co, Russian Federation.

github.com/Anarios/return-youtube-dislike.git - Unnamed repository; edit this file 'description' to name the repository.
summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--.github/ISSUE_TEMPLATE/bug.yml11
-rw-r--r--.github/ISSUE_TEMPLATE/feature-request.yml10
-rw-r--r--.github/workflows/commentCommands.yml54
-rw-r--r--Docs/FAQ.md32
-rw-r--r--Extensions/UserScript/Return Youtube Dislike.user.js87
-rw-r--r--Extensions/combined/popup.css61
-rw-r--r--Extensions/combined/popup.html20
-rw-r--r--Extensions/combined/popup.js47
-rw-r--r--Extensions/combined/ryd.background.js41
-rw-r--r--Extensions/combined/src/bar.js113
-rw-r--r--Extensions/combined/src/events.js13
-rw-r--r--Extensions/combined/src/starRating.js101
-rw-r--r--Extensions/combined/src/state.js30
-rw-r--r--Extensions/combined/src/utils.js46
-rw-r--r--README.md2
-rw-r--r--READMEes.md2
-rw-r--r--READMEja.md99
-rw-r--r--READMEru.md2
-rw-r--r--READMEtr.md2
-rw-r--r--Website/_locales/tr.ts2
20 files changed, 674 insertions, 101 deletions
diff --git a/.github/ISSUE_TEMPLATE/bug.yml b/.github/ISSUE_TEMPLATE/bug.yml
index 2bf949b..177632e 100644
--- a/.github/ISSUE_TEMPLATE/bug.yml
+++ b/.github/ISSUE_TEMPLATE/bug.yml
@@ -1,6 +1,6 @@
name: Bug Report
description: File a bug report!
-title: "(Bug): "
+# title: "(Bug): "
labels: ["bug"]
body:
- type: input
@@ -55,4 +55,13 @@ body:
value: "Tell us how it happened with detailed steps for us."
validations:
required: true
+- type: dropdown
+ attributes:
+ label: "Will you be available for follow-up questions to help developers diagnose & fix the issue?"
+ options:
+ - "Yes"
+ - "No"
+ validations:
+ required: true
+
diff --git a/.github/ISSUE_TEMPLATE/feature-request.yml b/.github/ISSUE_TEMPLATE/feature-request.yml
index b9a15d6..123d9d0 100644
--- a/.github/ISSUE_TEMPLATE/feature-request.yml
+++ b/.github/ISSUE_TEMPLATE/feature-request.yml
@@ -1,6 +1,6 @@
name: Feature Request
description: Request or suggest a new feature!
-title: "(Feature Request): "
+# title: "(Feature Request): "
labels: ["enhancement"]
body:
- type: dropdown
@@ -28,4 +28,12 @@ body:
options:
- label: "Yes"
- label: "No"
+- type: dropdown
+ attributes:
+ label: "Will you be available for follow-up questions to help developers implement this?"
+ options:
+ - "Yes"
+ - "No"
+ validations:
+ required: true
diff --git a/.github/workflows/commentCommands.yml b/.github/workflows/commentCommands.yml
new file mode 100644
index 0000000..fbf4aad
--- /dev/null
+++ b/.github/workflows/commentCommands.yml
@@ -0,0 +1,54 @@
+name: commentCommands
+
+on:
+ issue_comment:
+ types: created
+
+jobs:
+
+ assign-commenter:
+ runs-on: ubuntu-latest
+ if: |
+ contains(github.event.comment.body, '/assignme') ||
+ contains(github.event.comment.body, '/assign me')
+ steps:
+ - name: Assigning to commenter
+ run: |
+ curl \
+ -X POST \
+ -H "Accept: application/vnd.github+json" \
+ -H "Authorization: token ${{ secrets.GITHUB_TOKEN }}" \
+ https://api.github.com/repos/${{ github.repository }}/issues/${{ github.event.issue.number }}/assignees \
+ -d '{"assignees":["${{ github.event.comment.user.login }}"]}'
+ request-issue-framing-improvement:
+ runs-on: ubuntu-latest
+ if: |
+ contains(github.event.comment.body,'/improve') && (
+ github.event.comment.author_association == 'OWNER' ||
+ github.event.comment.author_association == 'COLLABORATOR' ||
+ github.event.comment.author_association == 'CONTRIBUTOR' )
+ steps:
+ - name: request-issue-framing-improvement
+ run: |
+ curl \
+ -X POST \
+ -H "Accept: application/vnd.github+json" \
+ -H "Authorization: token ${{ secrets.GITHUB_TOKEN }}" \
+ https://api.github.com/repos/${{ github.repository }}/issues/${{ github.event.issue.number }}/comments \
+ -d '{"body":"This issue is put on hold due to low quality. No reviews or fixes will be performed at this time. Eventually, it will be closed. While we appreciate your effort writing, we are not able to further investigate it. Please improve it by writing a better title or providing more details, and you may re-open it."}'
+ add-label-duplicate:
+ runs-on: ubuntu-latest
+ if: |
+ contains(github.event.comment.body, '/duplicate') && (
+ github.event.comment.author_association == 'OWNER' ||
+ github.event.comment.author_association == 'COLLABORATOR' ||
+ github.event.comment.author_association != 'CONTRIBUTOR' )
+ steps:
+ - name: add-label-duplicate
+ run: |
+ curl \
+ -X POST \
+ -H "Accept: application/vnd.github+json" \
+ -H "Authorization: token ${{ secrets.GITHUB_TOKEN }}" \
+ https://api.github.com/repos/${{ github.repository }}/issues/${{ github.event.issue.number }}/labels \
+ -d '{"labels":["duplicate"]}'
diff --git a/Docs/FAQ.md b/Docs/FAQ.md
index 02336f4..4a47957 100644
--- a/Docs/FAQ.md
+++ b/Docs/FAQ.md
@@ -1,21 +1,53 @@
# Frequently Asked Questions
## Before asking a question on GitHub or Discord, please refer to this.
+<br>
+
### **1. Where does this extension get the data?**
A Combination of Google APIs and scraped data.
We save all available data to our DB for it to be available after Google shuts down dislike counts in their API.
+<br>
+
### **2. Video dislike count doesn't update**
Right now video dislikes are cached, and aren't updated very frequenly. Once every 2-3 days, not more often.
Yeah, it's not ideal, but it is what it is. Working on improving how often we can update them.
+<br>
+
### **3. How does this work?**
The extension collects the video id of the video you are watching, fetches the dislike (and other fields like views, likes etc) using our API, if this is the first time the video was fetched by our API, it will use the YouTube API to get the data, then stores the data in a database for caching (cached for around 2-3 days) and archiving purposes and returns it to you. The extension then displays the dislikes to you.
+<br>
+
### **4. What will happen after the YouTube API stops returning the dislike count?**
The backend will switch to using a combination of archived dislike stats, estimates extrapolated from extension user data and estimates based on view/like ratios for videos whose dislikes weren't archived and for outdated dislike archives.
+<br>
+
+### **5. How is the dislike count calculated?**
+
+RYD uses the votes from it's users to extrapolate the dislike count.
+
+- If the video was uploaded after the API was shut down:
+
+ $$ \textup{RYD Dislike Count} = \left( \frac{\textup{RYD Users Like Count}}{\textup{RYD Users Dislike Count}} \right) \times \textup{Public Like Count} $$
+
+- If the RYD database somehow had the actual like and dislike count (provided by the uploader or from the archive), the dislike count will be calculated based on both - the users' votes and the archived value. The archived value will have less influence on the final count as it ages.
+
+<br>
+
+---
+
+This in video form
+
+[![IReturn YouTube Dislike Explained](https://yt-embed.herokuapp.com/embed?v=GSmmtv-0yYQ)](https://www.youtube.com/watch?v=GSmmtv-0yYQ)
+
+---
+
+<br>
+
## I have security / privacy concerns
See [this page](SECURITY-FAQ.md) for more info.
diff --git a/Extensions/UserScript/Return Youtube Dislike.user.js b/Extensions/UserScript/Return Youtube Dislike.user.js
index 476561b..bbbbd45 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
};
@@ -203,10 +204,10 @@ 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;
+ return false;
}
let likesStr = getLikeButton()
- .querySelector("button")
+ .querySelector("yt-formatted-string#text")
.getAttribute("aria-label")
.replace(/\D/g, "");
return likesStr.length > 0 ? parseInt(likesStr) : false;
@@ -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()}&nbsp;/&nbsp;${dislikes.toLocaleString()}&nbsp;&nbsp;-&nbsp;&nbsp;${likePercentage}%`
+ break;
+ case "dash_dislike":
+ tooltipInnerHTML = `${likes.toLocaleString()}&nbsp;/&nbsp;${dislikes.toLocaleString()}&nbsp;&nbsp;-&nbsp;&nbsp;${dislikePercentage}%`
+ break;
+ case "both":
+ tooltipInnerHTML = `${likePercentage}%&nbsp;/&nbsp;${dislikePercentage}%`
+ break;
+ case "only_like":
+ tooltipInnerHTML = `${likePercentage}%`
+ break;
+ case "only_dislike":
+ tooltipInnerHTML = `${dislikePercentage}%`
+ break;
+ default:
+ tooltipInnerHTML = `${likes.toLocaleString()}&nbsp;/&nbsp;${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()}&nbsp;/&nbsp;${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()}&nbsp;/&nbsp;${dislikes.toLocaleString()}`;
-
+ ).innerHTML = tooltipInnerHTML;
+
if (extConfig.coloredBar) {
document.getElementById("return-youtube-dislike-bar-container").style.backgroundColor =
getColorFromTheme(false);
@@ -372,6 +399,12 @@ function likeClicked() {
createRateBar(likesvalue, dislikesvalue);
previousState = 1;
}
+ if (extConfig.numberDisplayReformatLikes === true) {
+ const nativeLikes = getLikeCountFromButton();
+ if (nativeLikes !== false) {
+ setLikes(numberFormat(nativeLikes));
+ }
+ }
}
}
@@ -393,6 +426,12 @@ function dislikeClicked() {
setDislikes(numberFormat(dislikesvalue));
createRateBar(likesvalue, dislikesvalue);
previousState = 2;
+ if (extConfig.numberDisplayReformatLikes === true) {
+ const nativeLikes = getLikeCountFromButton();
+ if (nativeLikes !== false) {
+ setLikes(numberFormat(nativeLikes));
+ }
+ }
}
}
}
@@ -434,32 +473,38 @@ function roundDown(num) {
}
function numberFormat(numberState) {
- let userLocales;
- try {
- userLocales = new URL(
- Array.from(document.querySelectorAll("head > link[rel='search']"))
- ?.find((n) => n?.getAttribute("href")?.includes("?locale="))
- ?.getAttribute("href")
- )?.searchParams?.get("locale");
- } catch {
- userLocales = document.documentElement.lang;
- }
-
let numberDisplay;
if (extConfig.numberDisplayRoundDown === false) {
numberDisplay = numberState;
} else {
numberDisplay = roundDown(numberState);
}
- return getNumberFormatter(extConfig.numberDisplayFormat, userLocales).format(
+ return getNumberFormatter(extConfig.numberDisplayFormat).format(
numberDisplay
);
}
-function getNumberFormatter(optionSelect, userLocales) {
+function getNumberFormatter(optionSelect) {
+ let userLocales;
+ if (document.documentElement.lang) {
+ userLocales = document.documentElement.lang;
+ } else if (navigator.language) {
+ userLocales = navigator.language;
+ } else {
+ try {
+ userLocales = new URL(
+ Array.from(document.querySelectorAll("head > link[rel='search']"))
+ ?.find((n) => n?.getAttribute("href")?.includes("?locale="))
+ ?.getAttribute("href")
+ )?.searchParams?.get("locale");
+ } catch {
+ cLog('Cannot find browser locale. Use en as default for number formatting.');
+ userLocales = 'en';
+ }
+ }
+
let formatterNotation;
let formatterCompactDisplay;
-
switch (optionSelect) {
case "compactLong":
formatterNotation = "compact";
@@ -476,7 +521,7 @@ function getNumberFormatter(optionSelect, userLocales) {
}
const formatter = Intl.NumberFormat(
- document.documentElement.lang || userLocales || navigator.language,
+ userLocales,
{
notation: formatterNotation,
compactDisplay: formatterCompactDisplay,
diff --git a/Extensions/combined/popup.css b/Extensions/combined/popup.css
index dfe94cb..c317102 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;
@@ -68,9 +69,11 @@ button:hover {
border-radius: 0.25rem;
}
-.switch:before {
+.switch:before, .label-with-hover-tip:before {
content: attr(data-hover);
visibility: hidden;
+ opacity: 0;
+ transition: visibility 0.1s linear, opacity 0.1s linear;
width: 250px;
background-color: var(--secondary);
border-radius: 0.5rem;
@@ -82,8 +85,26 @@ button:hover {
top: 160%;
}
-.switch:hover:before {
+.switch:hover:before, .label-with-hover-tip:hover:before {
visibility: visible;
+ opacity: 1;
+}
+
+.fade-in {
+ opacity: 1;
+ animation-name: fadeInOpacity;
+ animation-iteration-count: 1;
+ animation-timing-function: ease-in;
+ animation-duration: 2s;
+}
+
+@keyframes fadeInOpacity {
+ 0% {
+ opacity: 0;
+ }
+ 100% {
+ opacity: 1;
+ }
}
#advancedToggle {
@@ -123,6 +144,32 @@ button:hover {
border: 2px solid var(--secondary);
border-radius: 0.5rem;
padding: 1rem;
+ overflow-y: auto;
+ overflow-x: hidden;
+}
+
+::-webkit-scrollbar {
+ width: 1rem;
+}
+
+::-webkit-scrollbar-track {
+ background: #111; /* color of the tracking area */
+}
+
+::-webkit-scrollbar-thumb {
+ background-color: #333; /* color of the scroll thumb */
+ border-radius: 1rem 0 0 1rem; /* roundness of the scroll thumb */
+ border-bottom: 0.25rem solid #111; /* creates padding around scroll thumb */
+ border-left: 0.25rem solid #111; /* creates padding around scroll thumb */
+ border-top: 0.25rem solid #111; /* creates padding around scroll thumb */
+}
+
+::-webkit-scrollbar-thumb:hover {
+ background-color: #f22; /* color of the scroll thumb */
+ border-radius: 1rem 0 0 1rem; /* roundness of the scroll thumb */
+ border-bottom: 0.25rem solid #111; /* creates padding around scroll thumb */
+ border-left: 0.25rem solid #111; /* creates padding around scroll thumb */
+ border-top: 0.25rem solid #111; /* creates padding around scroll thumb */
}
#advancedLegend {
@@ -142,6 +189,14 @@ button:hover {
margin-bottom: 1rem;
}
+.label-with-hover-tip {
+ position: relative;
+ display: inline-block;
+ width: 80px;
+ height: 17px;
+ margin-bottom: 1rem;
+}
+
.switch:last-of-type {
margin-bottom: 0;
}
diff --git a/Extensions/combined/popup.html b/Extensions/combined/popup.html
index 7d39246..3e9b9c0 100644
--- a/Extensions/combined/popup.html
+++ b/Extensions/combined/popup.html
@@ -108,7 +108,7 @@
<span class="switchLabel">Show rounded down numbers</span>
</label>
<br/>
- <label class="switch" data-hover="Make likes and dislikes format consistent">
+ <label class="switch" data-hover="Make likes and dislikes format consistent (does not work on Shorts)">
<input type="checkbox" id="number_reformat_likes"/>
<span class="slider"/>
<span class="switchLabel">Re-format like numbers</span>
@@ -137,7 +137,7 @@
</label>
<br/>
<div class="custom-select">
- <label for="color_theme">Color theme:</label>
+ <label for="color_theme" class="label-with-hover-tip" data-hover="">Color theme:</label>
<select name="color_theme" id="color_theme">
<option value="classic" id="color_theme_classic">Classic</option>
<option value="accessible" id="color_theme_accessible">
@@ -166,6 +166,22 @@
>&nbsp;</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&nbsp;/&nbsp;10&nbsp;&nbsp;-&nbsp;&nbsp;95%</option>
+ <option value="dash_dislike" id="tooltip_percentage_mode_dash_dislike">190&nbsp;/&nbsp;10&nbsp;&nbsp;-&nbsp;&nbsp;5%</option>
+ <option value="both" id="tooltip_percentage_mode_both">95%&nbsp;/&nbsp;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 75f22ae..b6b6b67 100644
--- a/Extensions/combined/ryd.background.js
+++ b/Extensions/combined/ryd.background.js
@@ -77,6 +77,8 @@ api.runtime.onInstalled.addListener((details) => {
if (
// No need to show changelog if its was a browser update (and not extension update)
details.reason === "browser_update" ||
+ // Chromium (e.g., Google Chrome Cannary) uses this name instead of the one above for some reason
+ details.reason === "chrome_update" ||
// No need to show changelog if developer just reloaded the extension
details.reason === "update"
)
@@ -277,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) {
@@ -292,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;
}
@@ -333,6 +352,8 @@ function initExtConfig() {
initializeNumberDisplayFormat();
initializeNumberDisplayRoundDown();
initializeNumberDisplayReformatLikes();
+ initializeTooltipPercentage();
+ initializeTooltipPercentageMode();
}
function initializeDisableVoteSubmission() {
@@ -396,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()}&nbsp;/&nbsp;${dislikes.toLocaleString()}
- </tp-yt-paper-tooltip>
- </div>
- `
- );
+ if (extConfig.showTooltipPercentage) {
+ var tooltipInnerHTML;
+ switch (extConfig.tooltipPercentageMode) {
+ case "dash_dislike":
+ tooltipInnerHTML = `${likes.toLocaleString()}&nbsp;/&nbsp;${dislikes.toLocaleString()}&nbsp;&nbsp;-&nbsp;&nbsp;${dislikePercentage}%`
+ break;
+ case "both":
+ tooltipInnerHTML = `${likePercentage}%&nbsp;/&nbsp;${dislikePercentage}%`
+ break;
+ case "only_like":
+ tooltipInnerHTML = `${likePercentage}%`
+ break;
+ case "only_dislike":
+ tooltipInnerHTML = `${dislikePercentage}%`
+ break;
+ default: // dash_like
+ tooltipInnerHTML = `${likes.toLocaleString()}&nbsp;/&nbsp;${dislikes.toLocaleString()}&nbsp;&nbsp;-&nbsp;&nbsp;${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()}&nbsp;/&nbsp;${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()}&nbsp;/&nbsp;${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/events.js b/Extensions/combined/src/events.js
index 99c7d14..019f166 100644
--- a/Extensions/combined/src/events.js
+++ b/Extensions/combined/src/events.js
@@ -8,6 +8,7 @@ import {
extConfig,
storedData,
setLikes,
+ getLikeCountFromButton,
} from "./state";
import { createRateBar } from "./bar";
@@ -41,6 +42,12 @@ function likeClicked() {
createRateBar(storedData.likes, storedData.dislikes);
storedData.previousState = NEUTRAL_STATE;
}
+ if (extConfig.numberDisplayReformatLikes === true) {
+ const nativeLikes = getLikeCountFromButton();
+ if (nativeLikes !== false) {
+ setLikes(numberFormat(nativeLikes));
+ }
+ }
}
}
@@ -65,6 +72,12 @@ function dislikeClicked() {
setDislikes(numberFormat(storedData.dislikes));
createRateBar(storedData.likes, storedData.dislikes);
storedData.previousState = DISLIKED_STATE;
+ if (extConfig.numberDisplayReformatLikes === true) {
+ const nativeLikes = getLikeCountFromButton();
+ if (nativeLikes !== false) {
+ setLikes(numberFormat(nativeLikes));
+ }
+ }
}
}
}
diff --git a/Extensions/combined/src/starRating.js b/Extensions/combined/src/starRating.js
new file mode 100644
index 0000000..5d98814
--- /dev/null
+++ b/Extensions/combined/src/starRating.js
@@ -0,0 +1,101 @@
+import { cLog } from "./utils";
+
+function createStarRating(rating, isMobile) {
+ let starRating = document.createElement('label');
+
+ let starSlider = document.createElement("input");
+ starSlider.setAttribute("class", "rating");
+ starSlider.setAttribute("max", "5");
+ starSlider.setAttribute("readonly", "");
+ starSlider.setAttribute("style", `--fill:rgb(255, 215, 0);--value:${rating.toString()};};background-color: transparent;`);
+ starSlider.setAttribute("type", "range");
+
+ starRating.appendChild(starSlider);
+
+ let YTLikeButton;
+
+ if (isMobile){
+ YTLikeButton = document.querySelector('#app > div.page-container > ytm-watch > ytm-single-column-watch-next-results-renderer > ytm-slim-video-metadata-section-renderer > ytm-slim-video-action-bar-renderer > div > ytm-slim-metadata-toggle-button-renderer:nth-child(1)');
+ } else {
+ YTLikeButton = document.querySelector('#top-level-buttons-computed > ytd-toggle-button-renderer:nth-child(1)');
+ }
+
+ YTLikeButton.insertAdjacentElement('afterend', starRating);
+
+ try {
+ let YTBar = document.querySelector('#ryd-bar-container');
+ YTBar.setAttribute("style", "width: 190%; height: 2px;");
+ }
+ catch(err) {
+ cLog("RateBar Not Present");
+ }
+
+
+
+ let style = `<style>
+
+.rating {
+ --dir: right;
+ --fill: gold;
+ --fillbg: rgba(100, 100, 100, 0.15);
+ --star: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 17.25l-6.188 3.75 1.641-7.031-5.438-4.734 7.172-0.609 2.813-6.609 2.813 6.609 7.172 0.609-5.438 4.734 1.641 7.031z"/></svg>');
+ --stars: 5;
+ --starSize: 2.8rem;
+ --symbol: var(--star);
+ --value: 1;
+ --w: calc(var(--stars) * var(--starSize));
+ --x: calc(100% * (var(--value) / var(--stars)));
+ block-size: var(--starSize);
+ inline-size: var(--w);
+ position: relative;
+ touch-action: manipulation;
+ -webkit-appearance: none;
+}
+
+[dir="rtl"] .rating {
+ --dir: left;
+}
+
+.rating::-moz-range-track {
+ background: linear-gradient(to var(--dir), var(--fill) 0 var(--x), var(--fillbg) 0 var(--x));
+ block-size: 100%;
+ mask: repeat left center/var(--starSize) var(--symbol);
+}
+
+.rating::-webkit-slider-runnable-track {
+ background: linear-gradient(to var(--dir), var(--fill) 0 var(--x), var(--fillbg) 0 var(--x));
+ block-size: 100%;
+ mask: repeat left center/var(--starSize) var(--symbol);
+ -webkit-mask: repeat left center/var(--starSize) var(--symbol);
+}
+
+.rating::-moz-range-thumb {
+ height: var(--starSize);
+ opacity: 0;
+ width: var(--starSize);
+}
+
+.rating::-webkit-slider-thumb {
+ height: var(--starSize);
+ opacity: 0;
+ width: var(--starSize);
+ -webkit-appearance: none;
+}
+
+.rating,
+.rating-label {
+ display: block;
+ font-family: ui-sans-serif, system-ui, sans-serif;
+}
+
+.rating-label {
+ margin-block-end: 1rem;
+}
+
+</style>`;
+
+document.head.insertAdjacentHTML("beforeend", style);
+
+ }
+
+ export { createStarRating };
diff --git a/Extensions/combined/src/state.js b/Extensions/combined/src/state.js
index df9d561..52f68d4 100644
--- a/Extensions/combined/src/state.js
+++ b/Extensions/combined/src/state.js
@@ -8,6 +8,7 @@ import {
getColorFromTheme,
} from "./utils";
import { localize } from "./utils";
+import { createStarRating } from "./starRating";
//TODO: Do not duplicate here and in ryd.background.js
const apiUrl = "https://returnyoutubedislikeapi.com";
@@ -22,6 +23,8 @@ let extConfig = {
colorTheme: "classic",
numberDisplayFormat: "compactShort",
numberDisplayRoundDown: true,
+ showTooltipPercentage: false,
+ tooltipPercentageMode: "dash_like",
numberDisplayReformatLikes: false,
};
@@ -150,10 +153,10 @@ 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;
+ return false;
}
let likesStr = getLikeButton()
- .querySelector("button")
+ .querySelector("yt-formatted-string#text")
.getAttribute("aria-label")
.replace(/\D/g, "");
return likesStr.length > 0 ? parseInt(likesStr) : false;
@@ -199,6 +202,7 @@ function processResponse(response, storedData) {
getDislikeButton().style.color = getColorFromTheme(false);
}
}
+ createStarRating(response.rating, isMobile());
}
// Tells the user if the API is down
@@ -252,6 +256,8 @@ function initExtConfig() {
initializeColorTheme();
initializeNumberDisplayFormat();
initializeNumberDisplayRoundDown();
+ initializeTooltipPercentage();
+ initializeTooltipPercentageMode();
initializeNumberDisplayReformatLikes();
}
@@ -315,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) {
diff --git a/Extensions/combined/src/utils.js b/Extensions/combined/src/utils.js
index a3fe790..53a84d0 100644
--- a/Extensions/combined/src/utils.js
+++ b/Extensions/combined/src/utils.js
@@ -9,15 +9,6 @@ function roundDown(num) {
}
function numberFormat(numberState) {
- let userLocales;
- try {
- userLocales = new URL(
- Array.from(document.querySelectorAll("head > link[rel='search']"))
- ?.find((n) => n?.getAttribute("href")?.includes("?locale="))
- ?.getAttribute("href")
- )?.searchParams?.get("locale");
- } catch {}
-
let numberDisplay;
if (extConfig.numberDisplayRoundDown === false) {
numberDisplay = numberState;
@@ -29,22 +20,27 @@ function numberFormat(numberState) {
);
}
-function localize(localeString) {
- return chrome.i18n.getMessage(localeString);
-}
-
function getNumberFormatter(optionSelect) {
- let formatterNotation;
- let formatterCompactDisplay;
let userLocales;
- try {
- userLocales = new URL(
- Array.from(document.querySelectorAll("head > link[rel='search']"))
- ?.find((n) => n?.getAttribute("href")?.includes("?locale="))
- ?.getAttribute("href")
- )?.searchParams?.get("locale");
- } catch {}
+ if (document.documentElement.lang) {
+ userLocales = document.documentElement.lang;
+ } else if (navigator.language) {
+ userLocales = navigator.language;
+ } else {
+ try {
+ userLocales = new URL(
+ Array.from(document.querySelectorAll("head > link[rel='search']"))
+ ?.find((n) => n?.getAttribute("href")?.includes("?locale="))
+ ?.getAttribute("href")
+ )?.searchParams?.get("locale");
+ } catch {
+ cLog('Cannot find browser locale. Use en as default for number formatting.');
+ userLocales = 'en';
+ }
+ }
+ let formatterNotation;
+ let formatterCompactDisplay;
switch (optionSelect) {
case "compactLong":
formatterNotation = "compact";
@@ -61,7 +57,7 @@ function getNumberFormatter(optionSelect) {
}
const formatter = Intl.NumberFormat(
- document.documentElement.lang || userLocales || navigator.language,
+ userLocales,
{
notation: formatterNotation,
compactDisplay: formatterCompactDisplay,
@@ -70,6 +66,10 @@ function getNumberFormatter(optionSelect) {
return formatter;
}
+function localize(localeString) {
+ return chrome.i18n.getMessage(localeString);
+}
+
function getBrowser() {
if (typeof chrome !== "undefined" && typeof chrome.runtime !== "undefined") {
return chrome;
diff --git a/README.md b/README.md
index 3143e67..dba308d 100644
--- a/README.md
+++ b/README.md
@@ -7,7 +7,7 @@
[![Discord](https://img.shields.io/discord/909435648170160229?label=Discord&style=flat&logo=discord)](https://discord.gg/UMxyMmCgfF)
[![License](https://img.shields.io/badge/License-GPLv3-blue.svg?style=flat)](https://github.com/Anarios/return-youtube-dislike/blob/main/LICENSE)
-Read this in other languages: [Español](READMEes.md), [русский](READMEru.md), [Türkçe](READMEtr.md)
+Read this in other languages: [Español](READMEes.md), [русский](READMEru.md), [日本語](READMEja.md), [Türkçe](READMEtr.md)
# Return YouTube Dislike
diff --git a/READMEes.md b/READMEes.md
index 18a706a..cb6a2ac 100644
--- a/READMEes.md
+++ b/READMEes.md
@@ -7,7 +7,7 @@
[![Discord](https://img.shields.io/discord/909435648170160229?label=Discord&style=flat&logo=discord)](https://discord.gg/UMxyMmCgfF)
[![License](https://img.shields.io/badge/License-GPLv3-blue.svg?style=flat)](https://github.com/Anarios/return-youtube-dislike/blob/main/LICENSE)
-Leer en otros idiomas: [English](README.md), [русский](READMEru.md), [Türkçe](READMEtr.md)
+Leer en otros idiomas: [English](README.md), [русский](READMEru.md), [日本語](READMEja.md), [Türkçe](READMEtr.md)
# Return YouTube Dislike
diff --git a/READMEja.md b/READMEja.md
new file mode 100644
index 0000000..f10b0fa
--- /dev/null
+++ b/READMEja.md
@@ -0,0 +1,99 @@
+[![Chrome Web Store](https://img.shields.io/chrome-web-store/stars/gebbhagfogifgggkldgodflihgfeippi?label=Chrome%20Rating&style=flat&logo=google)](https://chrome.google.com/webstore/detail/youtube-dislike-button/gebbhagfogifgggkldgodflihgfeippi/)
+[![Chrome Web Store Users](https://img.shields.io/chrome-web-store/users/gebbhagfogifgggkldgodflihgfeippi?label=Chrome%20Users&style=flat&logo=google)](https://chrome.google.com/webstore/detail/youtube-dislike-button/gebbhagfogifgggkldgodflihgfeippi/)
+[![Mozilla rating](https://img.shields.io/amo/stars/return-youtube-dislikes?label=Firefox%20Rating&style=flat&logo=firefox)](https://addons.mozilla.org/en-US/firefox/addon/return-youtube-dislikes/)
+[![Mozilla downloads](https://img.shields.io/amo/users/return-youtube-dislikes?label=Firefox%20Users&style=flat&logo=firefox)](https://addons.mozilla.org/en-US/firefox/addon/return-youtube-dislikes/)
+[![Commit rate](https://img.shields.io/github/commit-activity/m/Anarios/return-youtube-dislike?label=Commits&style=flat)](https://github.com/Anarios/return-youtube-dislike/commits/main)
+[![Issues](https://img.shields.io/github/issues/Anarios/return-youtube-dislike?style=flat&label=Issues)](https://github.com/Anarios/return-youtube-dislike/issues)
+[![Discord](https://img.shields.io/discord/909435648170160229?label=Discord&style=flat&logo=discord)](https://discord.gg/UMxyMmCgfF)
+[![License](https://img.shields.io/badge/License-GPLv3-blue.svg?style=flat)](https://github.com/Anarios/return-youtube-dislike/blob/main/LICENSE)
+
+別の言語: [English](README.md), [Español](READMEes.md), [русский](READMEru.md), [Türkçe](READMEtr.md)
+
+# Return YouTube Dislike
+
+<p align="center">
+ <b>Return YouTube DislikeはYouTubeの低評価を表示するためのオープンソースな拡張機能です。</b><br>
+ ChromeとFireFoxで拡張機能を利用可能です。<br>
+ また、他のブラウザでもJS Userscriptを利用できます。<br><br>
+ <img width="400px" src="https://user-images.githubusercontent.com/18729296/141743755-2be73297-250e-4cd1-ac93-8978c5a39d10.png"/>
+</p>
+
+## これまでの経緯
+
+2021年10月10日、GoogleはYouTubeの低評価を非表示にすると[発表しました](https://blog.youtube/news-and-events/update-to-youtube/)。
+
+そして2021年12月13日、YouTube APIからも低評価が[削除]((https://support.google.com/youtube/thread/134791097/update-to-youtube-dislike-counts))され、動画のクオリティを判断する手段がなくなってしまいました。
+
+## What it Does
+
+<!-- この部分の翻訳が微妙? -->
+
+YouTube APIから低評価が削除されたことにより、バックエンドは拡張機能のユーザーをもとにスクレイピングされたデータと組み合わせて表示するように切り替わりました
+
+[FAQ](https://github.com/Anarios/return-youtube-dislike/blob/main/Docs/FAQ.md)
+
+## 低評価が重要な理由
+
+ウェブサイトに詳細が書かれています: [returnyoutubedislike.com](https://www.returnyoutubedislike.com/)
+
+## API ドキュメント
+
+サードパーティは以下の制限のもとでAPIを利用できます:
+
+- **帰属**: [returnyoutubedislike.com](https://returnyoutubedislike.com/) へのリンクを明確に表記してください。
+- **レート制限**: クライアントごとに1分あたり100回、1日あたり10000回という制限があります。制限に達すると*429*コードが返されます。
+
+APIは以下のBase URLでアクセスできます:
+https://returnyoutubedislikeapi.com
+
+利用可能なエンドポイントはこちらを参照してください:
+https://returnyoutubedislikeapi.com/swagger/index.html
+
+### 評価を取得
+APIを利用してYouTube video IDから評価を取得する例です:
+`/votes?videoId=kxOuG8jMIgI`
+
+```json
+{
+ "id": "kxOuG8jMIgI",
+ "dateCreated": "2021-12-20T12:25:54.418014Z",
+ "likes": 27326,
+ "dislikes": 498153,
+ "rating": 1.212014408444885,
+ "viewCount": 3149885,
+ "deleted": false
+}
+```
+
+
+存在しないYouTube IDの場合 *404* "Not Found" が返されます。
+不正なフォーマットのYouTube IDの場合 *400* "Bad Request"が返されます。
+
+
+
+<!---
+## API ドキュメント
+
+APIの完全なドキュメントは公式サイトを参照してください。
+[https://returnyoutubedislike.com/documentation/](https://returnyoutubedislike.com/documentation/) -->
+
+
+## 貢献する
+
+こちらの[contribution guide](https://github.com/Anarios/return-youtube-dislike/blob/main/CONTRIBUTING.md)を読んでください。
+
+## プロジェクトを支援!
+
+以下のリンクに寄付をしてこのプロジェクトを支援できます:
+
+[寄付](https://returnyoutubedislike.com/donate)
+
+## スポンサー
+[Piepacker](https://piepacker.com)
+
+[Seed4.Me VPN](https://www.seed4.me/users/register?gift=ReturnYoutubeDislike)
+
+[PocketTube](https://yousub.info/?utm_source=returnyoutubedislike)
+
+[Become our sponsor](https://www.patreon.com/join/returnyoutubedislike/checkout?rid=8008601)
+
diff --git a/READMEru.md b/READMEru.md
index 16dd25f..2325060 100644
--- a/READMEru.md
+++ b/READMEru.md
@@ -7,7 +7,7 @@
[![Discord](https://img.shields.io/discord/909435648170160229?label=Discord&style=flat&logo=discord)](https://discord.gg/UMxyMmCgfF)
[![License](https://img.shields.io/badge/License-GPLv3-blue.svg?style=flat)](https://github.com/Anarios/return-youtube-dislike/blob/main/LICENSE)
-Прочитать на других языках: [English](README.md), [Español](READMEes.md), [Türkçe](READMEtr.md)
+Прочитать на других языках: [English](README.md), [Español](READMEes.md), [日本語](READMEja.md), [Türkçe](READMEtr.md)
# Return YouTube Dislike
diff --git a/READMEtr.md b/READMEtr.md
index db27a37..9d370e5 100644
--- a/READMEtr.md
+++ b/READMEtr.md
@@ -7,7 +7,7 @@
[![Discord](https://img.shields.io/discord/909435648170160229?label=Discord&style=flat&logo=discord)](https://discord.gg/UMxyMmCgfF)
[![Lisans](https://img.shields.io/badge/License-GPLv3-blue.svg?style=flat)](https://github.com/Anarios/return-youtube-dislike/blob/main/LICENSE)
-Bunu diğer dillerde okuyun: [English](README.md), [Español](READMEes.md), [русский](READMEru.md)
+Bunu diğer dillerde okuyun: [English](README.md), [Español](READMEes.md), [русский](READMEru.md), [日本語](READMEja.md)
# YouTube Dislike Sayısını Geri Getir
diff --git a/Website/_locales/tr.ts b/Website/_locales/tr.ts
index c5986c1..f064e10 100644
--- a/Website/_locales/tr.ts
+++ b/Website/_locales/tr.ts
@@ -81,7 +81,7 @@ export default {
bullet4: 'Dislike sayımı sizinle paylaşabilir miyim?',
bullet4text: 'Çok yakında evet. İçerik üreticilerinin dislike sayıları için doğrulanabilirliğini paylaşabilmeleri amacıyla Oauth ya da sınırlı bir kapsamda farklı bir salt okunur API kullanmayı düşünüyoruz.',
bullet5: 'Hangi verileri topluyorsunuz ve bunlar nasıl işleniyor?',
- bullet5text: 'Uzantı, yalnızca izlediğiniz videonun IP adresi veya videonun ID\'si gibi düzgün çalışması için kesinlikle gerekli olan verileri toplar. Verileriniz asla 3. taraflara satılmayacaktır. Güvenliği ve gizliliği nasıl ele aldığımız hakkında daha fazla bilgi için <a href="https://github.com/Anarios/return-youtube-dislike/blob/main/Docs/SECURITY-FAQ.md">security FAQ</a>'ya gidin.',
+ bullet5text: 'Uzantı, yalnızca izlediğiniz videonun IP adresi veya videonun ID\'si gibi düzgün çalışması için kesinlikle gerekli olan verileri toplar. Verileriniz asla 3. taraflara satılmayacaktır. Güvenliği ve gizliliği nasıl ele aldığımız hakkında daha fazla bilgi için <a href="https://github.com/Anarios/return-youtube-dislike/blob/main/Docs/SECURITY-FAQ.md">security FAQ</a>\'ya gidin.',
bullet6: 'API/Yazılım(Backend) nasıl çalışıyor?',
bullet6text: 'Yazılım, YouTube API\'sinin dislike sayısını ve uzantı kullanıcılarının like/dislike sayısı sonuçların genişletilmesinin döndürmeye devam ettiği zamana ait arşivlenmiş verileri kullanır. Yakın zamanda içerik üreticilerin dislike sayısını kolay ve güvenli bir şekilde göndermelerine izin vereceğiz ve ArchiveTeam\'in arşivlenmiş verilerini (4,56 milyar video) veri tabanımıza ekleyeceğiz. Ayrıca konu ile ilgili videoyu da izleyebilirsiniz.',
bullet7: 'Dislike sayısı neden \'DISLIKES DISABLED\'(DISLIKE\'LAR AKTİF DEĞİL) olarak gözüküyor?',