Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add Dislike Information Panel #564

Draft
wants to merge 5 commits into
base: main
Choose a base branch
from
+120 −2
Draft

Add Dislike Information Panel #564

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
237997c
FAQ - improve accuracy of count && minor typo fix
sy-b Apr 16, 2022
4ded89c
Remove unnecessary escape character, failing check
sy-b Apr 16, 2022
23b1c04
Update faq.vue
sy-b Apr 16, 2022
8c5c505
typo fixed in faq.vue
sy-b Apr 16, 2022
da227e2
Add Dislike Information Panel
sy-b Apr 24, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
113 changes: 113 additions & 0 deletions Extensions/combined/ryd.content-script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -69,3 +69,116 @@ document.addEventListener("yt-navigate-finish", function (event) {
});

setTimeout(() => sendVideoIds(), 2500);

function initializeInfoPanelButton() {
let ytpRightControls = document.querySelector("#movie_player > div.ytp-chrome-bottom > div.ytp-chrome-controls > div.ytp-right-controls");
let RYDInfoPanelButton = document.createElement("button");
RYDInfoPanelButton.setAttribute("id", "RYDInfoPanelButton");
RYDInfoPanelButton.setAttribute("class", "ytp-button");
RYDInfoPanelButton.innerHTML = '<svg height="100%" viewBox="0 -9 36 36" width="100%"><use class="ytp-svg-shadow"></use><path d="M5 0h8.9c1.1 0 2 .9 2.1 2v9.9c0 .5-.2 1-.6 1.4l-6.5 6.6-1.1-1.1c-.4-.4-.5-.9-.4-1.4l.9-4.5H2c-1.1 0-2-.9-2-2v-2c0-.2 0-.4.1-.7l3-7C3.4.5 4.1 0 5 0Zm13.4 12.8h2.9c.4 0 .7-.4.7-.8V.9c0-.4-.3-.7-.7-.7h-2.9c-.4 0-.7.3-.7.7v11.2c0 .4.3.7.7.7Zm-6.3-6.2L7 9.5V3.7l5.1 2.9Z" fill="#fff"></path></svg>';
ytpRightControls.firstElementChild.insertAdjacentElement('beforebegin', RYDInfoPanelButton);
document.getElementById("RYDInfoPanelButton").addEventListener('click', showRYDInfoPanel);
}

function showRYDInfoPanel() {
if (document.getElementById("RYDInfoPanel")) { document.getElementById("RYDInfoPanel").remove(); return; }
console.log("qwerty");
let YTPageRightSide = document.querySelector("#secondary");
let RYDInfoPanel = document.createElement("div");
RYDInfoPanel.setAttribute("id", "RYDInfoPanel");
RYDInfoPanel.setAttribute("style", "color: white; background-color: rgb(68, 68, 68); border-radius: 2rem; padding: 2rem; box-shadow: 0.5em 1em 2em 0.5rem rgba(0,0,0,0.2);");

// expected API response
let response = {
"id": "swLyst02ZK4",
"dateCreated": "2022-04-24T07:14:29.808647Z",
"likes": 105696,
"dislikes": 180,
"rating": 4.993199591975518,
"viewCount": 2016789,
"deleted": false,
"extensionUsersLikeCount": 10569,
"extensionUsersDislikeCount": 18,
"extensionUsersVotes": 10600
};

RYDInfoPanel.innerHTML = `
<p style="text-align: center; font-size: 3rem;">
<svg style="align: start;" width="1em" height="0.7em" viewBox="0 0 22 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill="red" fill-rule="evenodd" clip-rule="evenodd" d="M5 0h8.9c1.1 0 2 .9 2.1 2v9.9c0 .5-.2 1-.6 1.4l-6.5 6.6-1.1-1.1c-.4-.4-.5-.9-.4-1.4l.9-4.5H2c-1.1 0-2-.9-2-2v-2c0-.2 0-.4.1-.7l3-7C3.4.5 4.1 0 5 0Zm13.4 12.8h2.9c.4 0 .7-.4.7-.8V.9c0-.4-.3-.7-.7-.7h-2.9c-.4 0-.7.3-.7.7v11.2c0 .4.3.7.7.7Zm-6.3-6.2L7 9.5V3.7l5.1 2.9Z" fill="#fff"/>
</svg>
Return YouTube Dislike
</p>

<br><br>

<div id="RYDInfoPanel_GeneralInfo" style="border-radius:1.5rem; padding: 1rem; box-shadow: 0.5rem 0.25rem 0.5rem 0.9rem rgba(0, 0, 0, 0.3);">
<h2 style="text-align: center;">General Stats</h2><br>
<table style="width:100%; color: white;">
<tr>
<th>Likes:</th>
<td>${response.likes}</td>
</tr>
<tr>
<th>Dislikes:</th>
<td>${response.dislikes}</td>
</tr>
<tr>
<th>Views:</th>
<td>${response.viewCount}</td>
</tr>
<tr>
<th>Rating: </th>
<td>${response.rating}</td>
</tr>
<tr>
<th>Entry Created on: </th>
<td>${response.dateCreated}</td>
</tr>
</table>
</div>

<br><br>

<div id="RYDInfoPanel_ExtensionUsersInfo" style="border-radius:1.5rem; padding: 1rem; box-shadow: 0.5rem 0.25rem 0.5rem 0.9rem rgba(0,0,0,0.3);">
<h2 style="text-align: center;">Extension Users' Stats</h2><br>

<table style="width:100%; color: white;">
<tr>
<th>Likes:</th>
<td>${response.extensionUsersLikeCount}</td>
</tr>
<tr>
<th>Dislikes:</th>
<td>${response.extensionUsersDislikeCount}</td>
</tr>
<tr>
<th>Neutral Votes:</th>
<td>${response.extensionUsersVotes - response.extensionUsersDislikeCount - response.extensionUsersLikeCount}</td>
</tr>
<tr>
<th>Rating:</th>
<td>${response.extensionUsersLikeCount / (response.extensionUsersLikeCount + response.extensionUsersDislikeCount)}</td>
</tr>
<tr>
<th>Votes: </th>
<td>${response.extensionUsersVotes}</td>
</tr>
<tr>
<th>User Percentage: </th>
<td>${(response.extensionUsersVotes / (response.likes + response.dislikes))*100}%</td>
</tr>
</table>

</div>
<br>
`;

YTPageRightSide.firstElementChild.insertAdjacentElement('beforebegin', RYDInfoPanel);

let brTag = document.createElement('div');
brTag.innerHTML = '<br><br>';
document.getElementById('RYDInfoPanel').insertAdjacentElement('afterend', brTag);
}

initializeInfoPanelButton();
7 changes: 6 additions & 1 deletion Website/pages/faq.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,13 +36,18 @@ export default {
{
question: "Where does the extension get its data?",
answer:
"A combination of archived data from before the offical YouTube dislike API shut down, and extrapolated extension user behavior.",
"A combination of archived data from before the official YouTube dislike API shut down, and extrapolated extension user behavior.",
},
{
question: "Why isn't the dislike count updating?",
answer:
"Right now video dislikes are cached and they aren't updated very frequently. It varies depending on a video's popularity but can take anywhere between a few hours and a few days to update.",
},
{
question: "Why is the dislike count on my videos inaccurate?",
answer:
"Extrapolated data tends to get better with the increase in diversity and the quantity of voters. \nTo ensure and increase the accuracy of the extrapolated vote data for your videos, you can encourage your viewers to use this extension (or any app that submits votes to returnyoutubedislikeapi.com) ",
},
{
question: "How does this work?",
answer:
Expand Down
2 changes: 1 addition & 1 deletion Website/pages/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -123,7 +123,7 @@ export default {
};
},
mounted() {
const YOUTUBE_REGEX = /(?:http:|https:)*?\/\/(?:www\.|)(?:youtube\.com|m\.youtube\.com|youtu\.|youtube-nocookie\.com).*(?:v=|v%3D|v\/|(?:a|p)\/(?:a|u)\/\d.*\/|watch\?|vi(?:=|\/)|\/embed\/|oembed\?|be\/|e\/)([^&?%#\/\n]*)/;
const YOUTUBE_REGEX = /(?:http:|https:)*?\/\/(?:www\.|)(?:youtube\.com|m\.youtube\.com|youtu\.|youtube-nocookie\.com).*(?:v=|v%3D|v\/|(?:a|p)\/(?:a|u)\/\d.*\/|watch\?|vi(?:=|\/)|\/embed\/|oembed\?|be\/|e\/)([^&?%#/\n]*)/;
let lastVideoId = "";
window.oninput = (e) => {
const videoId = (e.target.value.match(YOUTUBE_REGEX) || {})[1] || e.target.value;
Expand Down