diff --git a/Extensions/combined/ryd.content-script.js b/Extensions/combined/ryd.content-script.js index 02370ede..3bb64656 100644 --- a/Extensions/combined/ryd.content-script.js +++ b/Extensions/combined/ryd.content-script.js @@ -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 = ''; + 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 = ` +

+ + + + Return YouTube Dislike +

+ +

+ +
+

General Stats


+ + + + + + + + + + + + + + + + + + + + + +
Likes:${response.likes}
Dislikes:${response.dislikes}
Views:${response.viewCount}
Rating: ${response.rating}
Entry Created on: ${response.dateCreated}
+
+ +

+ +
+

Extension Users' Stats


+ + + + + + + + + + + + + + + + + + + + + + + + + + +
Likes:${response.extensionUsersLikeCount}
Dislikes:${response.extensionUsersDislikeCount}
Neutral Votes:${response.extensionUsersVotes - response.extensionUsersDislikeCount - response.extensionUsersLikeCount}
Rating:${response.extensionUsersLikeCount / (response.extensionUsersLikeCount + response.extensionUsersDislikeCount)}
Votes: ${response.extensionUsersVotes}
User Percentage: ${(response.extensionUsersVotes / (response.likes + response.dislikes))*100}%
+ +
+
+ `; + + YTPageRightSide.firstElementChild.insertAdjacentElement('beforebegin', RYDInfoPanel); + + let brTag = document.createElement('div'); + brTag.innerHTML = '

'; + document.getElementById('RYDInfoPanel').insertAdjacentElement('afterend', brTag); +} + +initializeInfoPanelButton(); diff --git a/Website/pages/faq.vue b/Website/pages/faq.vue index 1df89001..af0741db 100644 --- a/Website/pages/faq.vue +++ b/Website/pages/faq.vue @@ -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: diff --git a/Website/pages/index.vue b/Website/pages/index.vue index 713cad46..f1a26a6f 100644 --- a/Website/pages/index.vue +++ b/Website/pages/index.vue @@ -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;