1233 lines
No EOL
38 KiB
JavaScript
1233 lines
No EOL
38 KiB
JavaScript
/******/ (() => { // webpackBootstrap
|
|
/******/ "use strict";
|
|
var __webpack_exports__ = {};
|
|
|
|
;// CONCATENATED MODULE: ./Extensions/combined/src/buttons.js
|
|
|
|
|
|
|
|
function buttons_getButtons() {
|
|
//--- If Watching Youtube Shorts: ---//
|
|
if (isShorts()) {
|
|
let elements = document.querySelectorAll(
|
|
isMobile()
|
|
? "ytm-like-button-renderer"
|
|
: "#like-button > ytd-like-button-renderer"
|
|
);
|
|
for (let element of elements) {
|
|
//Youtube Shorts can have multiple like/dislike buttons when scrolling through videos
|
|
//However, only one of them should be visible (no matter how you zoom)
|
|
if (isInViewport(element)) {
|
|
return element;
|
|
}
|
|
}
|
|
}
|
|
//--- If Watching On Mobile: ---//
|
|
if (isMobile()) {
|
|
return document.querySelector(".slim-video-action-bar-actions");
|
|
}
|
|
//--- If Menu Element Is Displayed: ---//
|
|
if (document.getElementById("menu-container")?.offsetParent === null) {
|
|
return document.querySelector("ytd-menu-renderer.ytd-watch-metadata > div");
|
|
//--- If Menu Element Isnt Displayed: ---//
|
|
} else {
|
|
return document
|
|
.getElementById("menu-container")
|
|
?.querySelector("#top-level-buttons-computed");
|
|
}
|
|
}
|
|
|
|
function buttons_getLikeButton() {
|
|
return buttons_getButtons().children[0].tagName ===
|
|
"YTD-SEGMENTED-LIKE-DISLIKE-BUTTON-RENDERER"
|
|
? buttons_getButtons().children[0].children[0]
|
|
: buttons_getButtons().children[0];
|
|
}
|
|
|
|
function buttons_getLikeTextContainer() {
|
|
return (
|
|
buttons_getLikeButton().querySelector("#text") ??
|
|
buttons_getLikeButton().getElementsByTagName("yt-formatted-string")[0]
|
|
);
|
|
}
|
|
|
|
function buttons_getDislikeButton() {
|
|
return buttons_getButtons().children[0].tagName ===
|
|
"YTD-SEGMENTED-LIKE-DISLIKE-BUTTON-RENDERER"
|
|
? buttons_getButtons().children[0].children[1]
|
|
: buttons_getButtons().children[1];
|
|
}
|
|
|
|
function buttons_getDislikeTextContainer() {
|
|
let result =
|
|
buttons_getDislikeButton().querySelector("#text") ??
|
|
buttons_getDislikeButton().getElementsByTagName("yt-formatted-string")[0] ??
|
|
buttons_getDislikeButton().querySelector("span[role='text']");
|
|
if (result == null) {
|
|
let textSpan = document.createElement("span");
|
|
textSpan.id = "text";
|
|
buttons_getDislikeButton().querySelector("button").appendChild(textSpan);
|
|
buttons_getDislikeButton().querySelector("button").style.width = "auto";
|
|
result = buttons_getDislikeButton().querySelector("#text");
|
|
}
|
|
return result;
|
|
}
|
|
|
|
function checkForSignInButton() {
|
|
if (
|
|
document.querySelector(
|
|
"a[href^='https://accounts.google.com/ServiceLogin']"
|
|
)
|
|
) {
|
|
return true;
|
|
} else {
|
|
return false;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
;// CONCATENATED MODULE: ./Extensions/combined/src/bar.js
|
|
|
|
|
|
|
|
|
|
function bar_createRateBar(likes, dislikes) {
|
|
if (!isLikesDisabled()) {
|
|
let rateBar = document.getElementById("ryd-bar-container");
|
|
|
|
const widthPx =
|
|
getLikeButton().clientWidth +
|
|
getDislikeButton().clientWidth +
|
|
8;
|
|
|
|
const widthPercent =
|
|
likes + dislikes > 0 ? (likes / (likes + dislikes)) * 100 : 50;
|
|
|
|
var likePercentage = parseFloat(widthPercent.toFixed(1));
|
|
const dislikePercentage = (100 - likePercentage).toLocaleString();
|
|
likePercentage = likePercentage.toLocaleString();
|
|
|
|
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 {
|
|
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(
|
|
isNewDesign() ? "actions-inner" : "menu-container"
|
|
) || document.querySelector("ytm-slim-video-action-bar-renderer")
|
|
).insertAdjacentHTML(
|
|
"beforeend",
|
|
`
|
|
<div class="ryd-tooltip" style="width: ${widthPx}px${
|
|
isNewDesign() ? "; margin-bottom: -2px" : ""
|
|
}">
|
|
<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>
|
|
`
|
|
);
|
|
|
|
// Add border between info and comments
|
|
if (isNewDesign()) {
|
|
let descriptionAndActionsElement = document.getElementById("top-row");
|
|
descriptionAndActionsElement.style.borderBottom =
|
|
"1px solid var(--yt-spec-10-percent-layer)";
|
|
descriptionAndActionsElement.style.paddingBottom = "10px";
|
|
}
|
|
} 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 {
|
|
cLog("removing bar");
|
|
let ratebar = document.getElementById("ryd-bar-container");
|
|
if (ratebar) {
|
|
ratebar.parentNode.removeChild(ratebar);
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
|
|
;// CONCATENATED MODULE: ./Extensions/combined/src/starRating.js
|
|
|
|
|
|
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);
|
|
}
|
|
|
|
|
|
|
|
;// CONCATENATED MODULE: ./Extensions/combined/src/state.js
|
|
|
|
|
|
|
|
|
|
|
|
|
|
//TODO: Do not duplicate here and in ryd.background.js
|
|
const apiUrl = "https://returnyoutubedislikeapi.com";
|
|
const LIKED_STATE = "LIKED_STATE";
|
|
const DISLIKED_STATE = "DISLIKED_STATE";
|
|
const NEUTRAL_STATE = "NEUTRAL_STATE";
|
|
|
|
let state_extConfig = {
|
|
disableVoteSubmission: false,
|
|
coloredThumbs: false,
|
|
coloredBar: false,
|
|
colorTheme: "classic",
|
|
numberDisplayFormat: "compactShort",
|
|
showTooltipPercentage: false,
|
|
tooltipPercentageMode: "dash_like",
|
|
numberDisplayReformatLikes: false,
|
|
};
|
|
|
|
let storedData = {
|
|
likes: 0,
|
|
dislikes: 0,
|
|
previousState: NEUTRAL_STATE,
|
|
};
|
|
|
|
function state_isMobile() {
|
|
return location.hostname == "m.youtube.com";
|
|
}
|
|
|
|
function state_isShorts() {
|
|
return location.pathname.startsWith("/shorts");
|
|
}
|
|
|
|
function state_isNewDesign() {
|
|
return document.getElementById("comment-teaser") !== null;
|
|
}
|
|
|
|
let mutationObserver = new Object();
|
|
|
|
if (state_isShorts() && mutationObserver.exists !== true) {
|
|
utils_cLog("initializing mutation observer");
|
|
mutationObserver.options = {
|
|
childList: false,
|
|
attributes: true,
|
|
subtree: false,
|
|
};
|
|
mutationObserver.exists = true;
|
|
mutationObserver.observer = new MutationObserver(function (
|
|
mutationList,
|
|
observer
|
|
) {
|
|
mutationList.forEach((mutation) => {
|
|
if (
|
|
mutation.type === "attributes" &&
|
|
mutation.target.nodeName === "TP-YT-PAPER-BUTTON" &&
|
|
mutation.target.id === "button"
|
|
) {
|
|
// cLog('Short thumb button status changed');
|
|
if (mutation.target.getAttribute("aria-pressed") === "true") {
|
|
mutation.target.style.color =
|
|
mutation.target.parentElement.parentElement.id === "like-button"
|
|
? utils_getColorFromTheme(true)
|
|
: utils_getColorFromTheme(false);
|
|
} else {
|
|
mutation.target.style.color = "unset";
|
|
}
|
|
return;
|
|
}
|
|
utils_cLog(
|
|
"unexpected mutation observer event: " + mutation.target + mutation.type
|
|
);
|
|
});
|
|
});
|
|
}
|
|
|
|
function state_isLikesDisabled() {
|
|
// return true if the like button's text doesn't contain any number
|
|
if (state_isMobile()) {
|
|
return /^\D*$/.test(
|
|
getButtons().children[0].querySelector(".button-renderer-text").innerText
|
|
);
|
|
}
|
|
return /^\D*$/.test(
|
|
getButtons().children[0].innerText
|
|
);
|
|
}
|
|
|
|
function isVideoLiked() {
|
|
if (state_isMobile()) {
|
|
return (
|
|
getLikeButton().querySelector("button").getAttribute("aria-label") ==
|
|
"true"
|
|
);
|
|
}
|
|
return getLikeButton().classList.contains("style-default-active");
|
|
}
|
|
|
|
function isVideoDisliked() {
|
|
if (state_isMobile()) {
|
|
return (
|
|
getDislikeButton().querySelector("button").getAttribute("aria-label") ==
|
|
"true"
|
|
);
|
|
}
|
|
return getDislikeButton().classList.contains("style-default-active");
|
|
}
|
|
|
|
function getState(storedData) {
|
|
if (isVideoLiked()) {
|
|
return { current: LIKED_STATE, previous: storedData.previousState };
|
|
}
|
|
if (isVideoDisliked()) {
|
|
return { current: DISLIKED_STATE, previous: storedData.previousState };
|
|
}
|
|
return { current: NEUTRAL_STATE, previous: storedData.previousState };
|
|
}
|
|
|
|
//--- Sets The Likes And Dislikes Values ---//
|
|
function setLikes(likesCount) {
|
|
getLikeTextContainer().innerText = likesCount;
|
|
}
|
|
|
|
function setDislikes(dislikesCount) {
|
|
getDislikeTextContainer()?.removeAttribute('is-empty');
|
|
if (!state_isLikesDisabled()) {
|
|
if (state_isMobile()) {
|
|
getButtons().children[1].querySelector(
|
|
".button-renderer-text"
|
|
).innerText = dislikesCount;
|
|
return;
|
|
}
|
|
getDislikeTextContainer().innerText = dislikesCount;
|
|
} else {
|
|
cLog("likes count disabled by creator");
|
|
if (state_isMobile()) {
|
|
getButtons().children[1].querySelector(
|
|
".button-renderer-text"
|
|
).innerText = localize("TextLikesDisabled");
|
|
return;
|
|
}
|
|
getDislikeTextContainer().innerText = localize("TextLikesDisabled");
|
|
}
|
|
}
|
|
|
|
function getLikeCountFromButton() {
|
|
try {
|
|
if (state_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 false;
|
|
}
|
|
let likesStr = getLikeButton()
|
|
.querySelector("yt-formatted-string#text")
|
|
.getAttribute("aria-label")
|
|
.replace(/\D/g, "");
|
|
return likesStr.length > 0 ? parseInt(likesStr) : false;
|
|
}
|
|
catch {
|
|
return false;
|
|
}
|
|
|
|
}
|
|
|
|
function processResponse(response, storedData) {
|
|
const formattedDislike = numberFormat(response.dislikes);
|
|
setDislikes(formattedDislike);
|
|
if (state_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);
|
|
if (state_extConfig.coloredThumbs === true) {
|
|
if (state_isShorts()) {
|
|
// for shorts, leave deactived buttons in default color
|
|
let shortLikeButton = getLikeButton().querySelector(
|
|
"tp-yt-paper-button#button"
|
|
);
|
|
let shortDislikeButton = getDislikeButton().querySelector(
|
|
"tp-yt-paper-button#button"
|
|
);
|
|
if (shortLikeButton.getAttribute("aria-pressed") === "true") {
|
|
shortLikeButton.style.color = getColorFromTheme(true);
|
|
}
|
|
if (shortDislikeButton.getAttribute("aria-pressed") === "true") {
|
|
shortDislikeButton.style.color = getColorFromTheme(false);
|
|
}
|
|
mutationObserver.observer.observe(
|
|
shortLikeButton,
|
|
mutationObserver.options
|
|
);
|
|
mutationObserver.observer.observe(
|
|
shortDislikeButton,
|
|
mutationObserver.options
|
|
);
|
|
} else {
|
|
getLikeButton().style.color = getColorFromTheme(true);
|
|
getDislikeButton().style.color = getColorFromTheme(false);
|
|
}
|
|
}
|
|
//Temporary disabling this - it breaks all places where getButtons()[1] is used
|
|
// createStarRating(response.rating, isMobile());
|
|
}
|
|
|
|
// Tells the user if the API is down
|
|
function displayError(error) {
|
|
getButtons().children[1].querySelector("#text").innerText = localize(
|
|
"textTempUnavailable"
|
|
);
|
|
}
|
|
|
|
async function setState(storedData) {
|
|
storedData.previousState = isVideoDisliked()
|
|
? DISLIKED_STATE
|
|
: isVideoLiked()
|
|
? LIKED_STATE
|
|
: NEUTRAL_STATE;
|
|
let statsSet = false;
|
|
|
|
let videoId = getVideoId(window.location.href);
|
|
let likeCount = getLikeCountFromButton() || null;
|
|
|
|
let response = await fetch(
|
|
`${apiUrl}/votes?videoId=${videoId}&likeCount=${likeCount || ""}`,
|
|
{
|
|
method: "GET",
|
|
headers: {
|
|
Accept: "application/json",
|
|
},
|
|
}
|
|
)
|
|
.then((response) => {
|
|
if (!response.ok) displayError(response.error);
|
|
return response;
|
|
})
|
|
.then((response) => response.json())
|
|
.catch(displayError);
|
|
cLog("response from api:");
|
|
cLog(JSON.stringify(response));
|
|
if (response !== undefined && !("traceId" in response) && !statsSet) {
|
|
processResponse(response, storedData);
|
|
}
|
|
}
|
|
|
|
function setInitialState() {
|
|
setState(storedData);
|
|
}
|
|
|
|
function initExtConfig() {
|
|
initializeDisableVoteSubmission();
|
|
initializeColoredThumbs();
|
|
initializeColoredBar();
|
|
initializeColorTheme();
|
|
initializeNumberDisplayFormat();
|
|
initializeTooltipPercentage();
|
|
initializeTooltipPercentageMode();
|
|
initializeNumberDisplayReformatLikes();
|
|
}
|
|
|
|
function initializeDisableVoteSubmission() {
|
|
getBrowser().storage.sync.get(["disableVoteSubmission"], (res) => {
|
|
if (res.disableVoteSubmission === undefined) {
|
|
getBrowser().storage.sync.set({ disableVoteSubmission: false });
|
|
} else {
|
|
state_extConfig.disableVoteSubmission = res.disableVoteSubmission;
|
|
}
|
|
});
|
|
}
|
|
|
|
function initializeColoredThumbs() {
|
|
getBrowser().storage.sync.get(["coloredThumbs"], (res) => {
|
|
if (res.coloredThumbs === undefined) {
|
|
getBrowser().storage.sync.set({ coloredThumbs: false });
|
|
} else {
|
|
state_extConfig.coloredThumbs = res.coloredThumbs;
|
|
}
|
|
});
|
|
}
|
|
|
|
function initializeColoredBar() {
|
|
getBrowser().storage.sync.get(["coloredBar"], (res) => {
|
|
if (res.coloredBar === undefined) {
|
|
getBrowser().storage.sync.set({ coloredBar: false });
|
|
} else {
|
|
state_extConfig.coloredBar = res.coloredBar;
|
|
}
|
|
});
|
|
}
|
|
|
|
function initializeColorTheme() {
|
|
getBrowser().storage.sync.get(["colorTheme"], (res) => {
|
|
if (res.colorTheme === undefined) {
|
|
getBrowser().storage.sync.set({ colorTheme: false });
|
|
} else {
|
|
state_extConfig.colorTheme = res.colorTheme;
|
|
}
|
|
});
|
|
}
|
|
|
|
function initializeNumberDisplayFormat() {
|
|
getBrowser().storage.sync.get(["numberDisplayFormat"], (res) => {
|
|
if (res.numberDisplayFormat === undefined) {
|
|
getBrowser().storage.sync.set({ numberDisplayFormat: "compactShort" });
|
|
} else {
|
|
state_extConfig.numberDisplayFormat = res.numberDisplayFormat;
|
|
}
|
|
});
|
|
}
|
|
|
|
function initializeTooltipPercentage() {
|
|
getBrowser().storage.sync.get(["showTooltipPercentage"], (res) => {
|
|
if (res.showTooltipPercentage === undefined) {
|
|
getBrowser().storage.sync.set({ showTooltipPercentage: false });
|
|
} else {
|
|
state_extConfig.showTooltipPercentage = res.showTooltipPercentage;
|
|
}
|
|
});
|
|
}
|
|
|
|
function initializeTooltipPercentageMode() {
|
|
getBrowser().storage.sync.get(["tooltipPercentageMode"], (res) => {
|
|
if (res.tooltipPercentageMode === undefined) {
|
|
getBrowser().storage.sync.set({ tooltipPercentageMode: "dash_like" });
|
|
} else {
|
|
state_extConfig.tooltipPercentageMode = res.tooltipPercentageMode;
|
|
}
|
|
});
|
|
}
|
|
|
|
function initializeNumberDisplayReformatLikes() {
|
|
getBrowser().storage.sync.get(["numberDisplayReformatLikes"], (res) => {
|
|
if (res.numberDisplayReformatLikes === undefined) {
|
|
getBrowser().storage.sync.set({ numberDisplayReformatLikes: false });
|
|
} else {
|
|
state_extConfig.numberDisplayReformatLikes = res.numberDisplayReformatLikes;
|
|
}
|
|
});
|
|
}
|
|
|
|
|
|
|
|
;// CONCATENATED MODULE: ./Extensions/combined/src/utils.js
|
|
|
|
|
|
function utils_numberFormat(numberState) {
|
|
return getNumberFormatter(extConfig.numberDisplayFormat).format(
|
|
numberState
|
|
);
|
|
}
|
|
|
|
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 {
|
|
utils_cLog(
|
|
"Cannot find browser locale. Use en as default for number formatting."
|
|
);
|
|
userLocales = "en";
|
|
}
|
|
}
|
|
|
|
let formatterNotation;
|
|
let formatterCompactDisplay;
|
|
switch (optionSelect) {
|
|
case "compactLong":
|
|
formatterNotation = "compact";
|
|
formatterCompactDisplay = "long";
|
|
break;
|
|
case "standard":
|
|
formatterNotation = "standard";
|
|
formatterCompactDisplay = "short";
|
|
break;
|
|
case "compactShort":
|
|
default:
|
|
formatterNotation = "compact";
|
|
formatterCompactDisplay = "short";
|
|
}
|
|
|
|
const formatter = Intl.NumberFormat(userLocales, {
|
|
notation: formatterNotation,
|
|
compactDisplay: formatterCompactDisplay,
|
|
});
|
|
return formatter;
|
|
}
|
|
|
|
function utils_localize(localeString) {
|
|
return chrome.i18n.getMessage(localeString);
|
|
}
|
|
|
|
function utils_getBrowser() {
|
|
if (typeof chrome !== "undefined" && typeof chrome.runtime !== "undefined") {
|
|
return chrome;
|
|
} else if (
|
|
typeof browser !== "undefined" &&
|
|
typeof browser.runtime !== "undefined"
|
|
) {
|
|
return browser;
|
|
} else {
|
|
console.log("browser is not supported");
|
|
return false;
|
|
}
|
|
}
|
|
|
|
function utils_getVideoId(url) {
|
|
const urlObject = new URL(url);
|
|
const pathname = urlObject.pathname;
|
|
if (pathname.startsWith("/clip")) {
|
|
return document.querySelector("meta[itemprop='videoId']").content;
|
|
} else {
|
|
if (pathname.startsWith("/shorts")) {
|
|
return pathname.slice(8);
|
|
}
|
|
return urlObject.searchParams.get("v");
|
|
}
|
|
}
|
|
|
|
function utils_isInViewport(element) {
|
|
const rect = element.getBoundingClientRect();
|
|
const height = innerHeight || document.documentElement.clientHeight;
|
|
const width = innerWidth || document.documentElement.clientWidth;
|
|
return (
|
|
// When short (channel) is ignored, the element (like/dislike AND short itself) is
|
|
// hidden with a 0 DOMRect. In this case, consider it outside of Viewport
|
|
!(rect.top == 0 && rect.left == 0 && rect.bottom == 0 && rect.right == 0) &&
|
|
rect.top >= 0 &&
|
|
rect.left >= 0 &&
|
|
rect.bottom <= height &&
|
|
rect.right <= width
|
|
);
|
|
}
|
|
|
|
function isVideoLoaded() {
|
|
const videoId = utils_getVideoId(window.location.href);
|
|
return (
|
|
document.querySelector(`ytd-watch-flexy[video-id='${videoId}']`) !== null ||
|
|
// mobile: no video-id attribute
|
|
document.querySelector('#player[loading="false"]:not([hidden])') !== null
|
|
);
|
|
}
|
|
|
|
function utils_cLog(message, writer) {
|
|
message = `[return youtube dislike]: ${message}`;
|
|
if (writer) {
|
|
writer(message);
|
|
} else {
|
|
console.log(message);
|
|
}
|
|
}
|
|
|
|
function utils_getColorFromTheme(voteIsLike) {
|
|
let colorString;
|
|
switch (state_extConfig.colorTheme) {
|
|
case "accessible":
|
|
if (voteIsLike === true) {
|
|
colorString = "dodgerblue";
|
|
} else {
|
|
colorString = "gold";
|
|
}
|
|
break;
|
|
case "neon":
|
|
if (voteIsLike === true) {
|
|
colorString = "aqua";
|
|
} else {
|
|
colorString = "magenta";
|
|
}
|
|
break;
|
|
case "classic":
|
|
default:
|
|
if (voteIsLike === true) {
|
|
colorString = "lime";
|
|
} else {
|
|
colorString = "red";
|
|
}
|
|
}
|
|
return colorString;
|
|
}
|
|
|
|
|
|
|
|
;// CONCATENATED MODULE: ./Extensions/combined/popup.js
|
|
|
|
|
|
/* Config */
|
|
const config = {
|
|
advanced: false,
|
|
disableVoteSubmission: false,
|
|
coloredThumbs: false,
|
|
coloredBar: false,
|
|
colorTheme: "classic",
|
|
numberDisplayFormat: "compactShort",
|
|
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:
|
|
'<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="currentColor"><path d="M0 0h24v24H0V0z" fill="none" opacity=".87"/><path d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm4.3 14.3c-.39.39-1.02.39-1.41 0L12 13.41 9.11 16.3c-.39.39-1.02.39-1.41 0-.39-.39-.39-1.02 0-1.41L10.59 12 7.7 9.11c-.39-.39-.39-1.02 0-1.41.39-.39 1.02-.39 1.41 0L12 10.59l2.89-2.89c.39-.39 1.02-.39 1.41 0 .39.39.39 1.02 0 1.41L13.41 12l2.89 2.89c.38.38.38 1.02 0 1.41z"/></svg>',
|
|
|
|
links: {
|
|
website: "https://returnyoutubedislike.com",
|
|
github: "https://github.com/Anarios/return-youtube-dislike",
|
|
discord: "https://discord.gg/mYnESY4Md5",
|
|
donate: "https://returnyoutubedislike.com/donate",
|
|
faq: "https://returnyoutubedislike.com/faq",
|
|
help: "https://returnyoutubedislike.com/help",
|
|
changelog: "/changelog/3/changelog_3.0.html",
|
|
},
|
|
};
|
|
|
|
/* Change language */
|
|
function localizeHtmlPage() {
|
|
//Localize by replacing __MSG_***__ meta tags
|
|
var objects = document.getElementsByTagName("html");
|
|
for (var j = 0; j < objects.length; j++) {
|
|
var obj = objects[j];
|
|
|
|
var valStrH = obj.innerHTML.toString();
|
|
var valNewH = valStrH.replace(/__MSG_(\w+)__/g, function (match, v1) {
|
|
return v1 ? chrome.i18n.getMessage(v1) : "";
|
|
});
|
|
|
|
if (valNewH != valStrH) {
|
|
obj.innerHTML = valNewH;
|
|
}
|
|
}
|
|
}
|
|
|
|
localizeHtmlPage();
|
|
|
|
/* Links */
|
|
createLink(config.links.website, "link_website");
|
|
createLink(config.links.github, "link_github");
|
|
createLink(config.links.discord, "link_discord");
|
|
createLink(config.links.faq, "link_faq");
|
|
createLink(config.links.donate, "link_donate");
|
|
createLink(config.links.help, "link_help");
|
|
createLink(config.links.changelog, "link_changelog");
|
|
|
|
function createLink(url, id) {
|
|
document.getElementById(id).addEventListener("click", () => {
|
|
chrome.tabs.create({ url: url });
|
|
});
|
|
}
|
|
|
|
document
|
|
.getElementById("disable_vote_submission")
|
|
.addEventListener("click", (ev) => {
|
|
chrome.storage.sync.set({ disableVoteSubmission: ev.target.checked });
|
|
});
|
|
|
|
document.getElementById("colored_thumbs").addEventListener("click", (ev) => {
|
|
chrome.storage.sync.set({ coloredThumbs: ev.target.checked });
|
|
});
|
|
|
|
document.getElementById("colored_bar").addEventListener("click", (ev) => {
|
|
chrome.storage.sync.set({ coloredBar: ev.target.checked });
|
|
});
|
|
|
|
document.getElementById("color_theme").addEventListener("click", (ev) => {
|
|
chrome.storage.sync.set({ colorTheme: ev.target.value });
|
|
});
|
|
|
|
|
|
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 });
|
|
});
|
|
|
|
/* Advanced Toggle */
|
|
const advancedToggle = document.getElementById("advancedToggle");
|
|
advancedToggle.addEventListener("click", () => {
|
|
const adv = document.getElementById("advancedSettings");
|
|
if (config.advanced) {
|
|
adv.style.transform = "scale(1.1)";
|
|
adv.style.pointerEvents = "none";
|
|
adv.style.opacity = "0";
|
|
advancedToggle.innerHTML = config.showAdvancedMessage;
|
|
} else {
|
|
adv.style.transform = "scale(1)";
|
|
adv.style.pointerEvents = "auto";
|
|
adv.style.opacity = "1";
|
|
advancedToggle.innerHTML = config.hideAdvancedMessage;
|
|
}
|
|
config.advanced = !config.advanced;
|
|
});
|
|
|
|
initConfig();
|
|
|
|
function initConfig() {
|
|
popup_initializeDisableVoteSubmission();
|
|
initializeVersionNumber();
|
|
popup_initializeColoredThumbs();
|
|
popup_initializeColoredBar();
|
|
popup_initializeColorTheme();
|
|
popup_initializeNumberDisplayFormat();
|
|
popup_initializeTooltipPercentage();
|
|
popup_initializeTooltipPercentageMode();
|
|
popup_initializeNumberDisplayReformatLikes();
|
|
}
|
|
|
|
function initializeVersionNumber() {
|
|
const version = chrome.runtime.getManifest().version;
|
|
document.getElementById("ext-version").innerHTML = "v" + version;
|
|
|
|
fetch(
|
|
"https://raw.githubusercontent.com/Anarios/return-youtube-dislike/main/Extensions/combined/manifest-chrome.json"
|
|
)
|
|
.then((response) => response.json())
|
|
.then((json) => {
|
|
if (compareVersions(json.version, version)) {
|
|
document.getElementById("ext-update").innerHTML =
|
|
chrome.i18n.getMessage("textUpdate") + " v" + json.version;
|
|
document.getElementById("ext-update").style.padding = ".25rem .5rem";
|
|
}
|
|
});
|
|
// .catch(console.error);
|
|
}
|
|
|
|
// returns whether current < latest
|
|
function compareVersions(latestStr, currentStr) {
|
|
let latestarr = latestStr.split(".");
|
|
let currentarr = currentStr.split(".");
|
|
let outdated = false;
|
|
// goes through version numbers from left to right from greatest to least significant
|
|
for (let i = 0; i < Math.max(latestarr.length, currentarr.length); i++) {
|
|
let latest = i < latestarr.length ? parseInt(latestarr[i]) : 0;
|
|
let current = i < currentarr.length ? parseInt(currentarr[i]) : 0;
|
|
if (latest > current) {
|
|
outdated = true;
|
|
break;
|
|
} else if (latest < current) {
|
|
outdated = false;
|
|
break;
|
|
}
|
|
}
|
|
return outdated;
|
|
}
|
|
|
|
function popup_initializeDisableVoteSubmission() {
|
|
chrome.storage.sync.get(["disableVoteSubmission"], (res) => {
|
|
handleDisableVoteSubmissionChangeEvent(res.disableVoteSubmission);
|
|
});
|
|
}
|
|
|
|
function popup_initializeColoredThumbs() {
|
|
chrome.storage.sync.get(["coloredThumbs"], (res) => {
|
|
handleColoredThumbsChangeEvent(res.coloredThumbs);
|
|
});
|
|
}
|
|
|
|
function popup_initializeColoredBar() {
|
|
chrome.storage.sync.get(["coloredBar"], (res) => {
|
|
handleColoredBarChangeEvent(res.coloredBar);
|
|
});
|
|
}
|
|
|
|
function popup_initializeColorTheme() {
|
|
chrome.storage.sync.get(["colorTheme"], (res) => {
|
|
handleColorThemeChangeEvent(res.colorTheme);
|
|
});
|
|
}
|
|
|
|
|
|
function popup_initializeTooltipPercentage() {
|
|
chrome.storage.sync.get(["showTooltipPercentage"], (res) => {
|
|
handleShowTooltipPercentageChangeEvent(res.showTooltipPercentage);
|
|
});
|
|
}
|
|
|
|
function popup_initializeTooltipPercentageMode() {
|
|
chrome.storage.sync.get(["tooltipPercentageMode"], (res) => {
|
|
handleTooltipPercentageModeChangeEvent(res.tooltipPercentageMode);
|
|
});
|
|
}
|
|
|
|
function popup_initializeNumberDisplayFormat() {
|
|
chrome.storage.sync.get(["numberDisplayFormat"], (res) => {
|
|
handleNumberDisplayFormatChangeEvent(res.numberDisplayFormat);
|
|
});
|
|
updateNumberDisplayFormatContent();
|
|
}
|
|
|
|
function updateNumberDisplayFormatContent() {
|
|
let testValue = 123456;
|
|
document.getElementById("number_format_compactShort").innerHTML =
|
|
popup_getNumberFormatter("compactShort").format(testValue);
|
|
document.getElementById("number_format_compactLong").innerHTML =
|
|
popup_getNumberFormatter("compactLong").format(testValue);
|
|
document.getElementById("number_format_standard").innerHTML =
|
|
popup_getNumberFormatter("standard").format(testValue);
|
|
}
|
|
|
|
function popup_initializeNumberDisplayReformatLikes() {
|
|
chrome.storage.sync.get(["numberDisplayReformatLikes"], (res) => {
|
|
handleNumberDisplayReformatLikesChangeEvent(res.numberDisplayReformatLikes);
|
|
});
|
|
}
|
|
|
|
chrome.storage.onChanged.addListener(storageChangeHandler);
|
|
|
|
function storageChangeHandler(changes, area) {
|
|
if (changes.disableVoteSubmission !== undefined) {
|
|
handleDisableVoteSubmissionChangeEvent(
|
|
changes.disableVoteSubmission.newValue
|
|
);
|
|
}
|
|
if (changes.coloredThumbs !== undefined) {
|
|
handleColoredThumbsChangeEvent(changes.coloredThumbs.newValue);
|
|
}
|
|
if (changes.coloredBar !== undefined) {
|
|
handleColoredBarChangeEvent(changes.coloredBar.newValue);
|
|
}
|
|
if (changes.colorTheme !== undefined) {
|
|
handleColorThemeChangeEvent(changes.colorTheme.newValue);
|
|
}
|
|
if (changes.numberDisplayFormat !== undefined) {
|
|
handleNumberDisplayFormatChangeEvent(changes.numberDisplayFormat.newValue);
|
|
}
|
|
if (changes.showTooltipPercentage !== undefined) {
|
|
handleShowTooltipPercentageChangeEvent(
|
|
changes.showTooltipPercentage.newValue
|
|
);
|
|
}
|
|
if (changes.numberDisplayReformatLikes !== undefined) {
|
|
handleNumberDisplayReformatLikesChangeEvent(
|
|
changes.numberDisplayReformatLikes.newValue
|
|
);
|
|
}
|
|
}
|
|
|
|
function handleDisableVoteSubmissionChangeEvent(value) {
|
|
config.disableVoteSubmission = value;
|
|
document.getElementById("disable_vote_submission").checked = value;
|
|
}
|
|
|
|
function handleColoredThumbsChangeEvent(value) {
|
|
config.coloredThumbs = value;
|
|
document.getElementById("colored_thumbs").checked = value;
|
|
}
|
|
|
|
function handleColoredBarChangeEvent(value) {
|
|
config.coloredBar = value;
|
|
document.getElementById("colored_bar").checked = value;
|
|
}
|
|
|
|
function handleColorThemeChangeEvent(value) {
|
|
if (!value) {
|
|
value = "classic";
|
|
}
|
|
config.colorTheme = value;
|
|
document
|
|
.getElementById("color_theme")
|
|
.querySelector('option[value="' + value + '"]').selected = true;
|
|
updateColorThemePreviewContent(value);
|
|
}
|
|
|
|
function updateColorThemePreviewContent(themeName) {
|
|
document.getElementById("color_theme_example_like").style.backgroundColor =
|
|
popup_getColorFromTheme(themeName, true);
|
|
document.getElementById("color_theme_example_dislike").style.backgroundColor =
|
|
popup_getColorFromTheme(themeName, false);
|
|
}
|
|
|
|
|
|
|
|
function handleNumberDisplayFormatChangeEvent(value) {
|
|
config.numberDisplayFormat = value;
|
|
document
|
|
.getElementById("number_format")
|
|
.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;
|
|
}
|
|
|
|
function popup_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 {}
|
|
|
|
switch (optionSelect) {
|
|
case "compactLong":
|
|
formatterNotation = "compact";
|
|
formatterCompactDisplay = "long";
|
|
break;
|
|
case "standard":
|
|
formatterNotation = "standard";
|
|
formatterCompactDisplay = "short";
|
|
break;
|
|
case "compactShort":
|
|
default:
|
|
formatterNotation = "compact";
|
|
formatterCompactDisplay = "short";
|
|
}
|
|
const formatter = Intl.NumberFormat(
|
|
document.documentElement.lang || userLocales || navigator.language,
|
|
{
|
|
notation: formatterNotation,
|
|
compactDisplay: formatterCompactDisplay,
|
|
}
|
|
);
|
|
return formatter;
|
|
}
|
|
|
|
(async function getStatus() {
|
|
let status = document.getElementById("status");
|
|
let serverStatus = document.getElementById("server-status");
|
|
let resp = await fetch(
|
|
"https://returnyoutubedislikeapi.com/votes?videoId=YbJOTdZBX1g"
|
|
);
|
|
let result = await resp.status;
|
|
if (result === 200) {
|
|
status.innerText = "Online";
|
|
status.style.color = "green";
|
|
serverStatus.style.filter =
|
|
"invert(58%) sepia(81%) saturate(2618%) hue-rotate(81deg) brightness(119%) contrast(129%)";
|
|
} else {
|
|
status.innerText = "Offline";
|
|
status.style.color = "red";
|
|
serverStatus.style.filter =
|
|
"invert(11%) sepia(100%) saturate(6449%) hue-rotate(3deg) brightness(116%) contrast(115%)";
|
|
}
|
|
})();
|
|
|
|
function popup_getColorFromTheme(colorTheme, voteIsLike) {
|
|
let colorString;
|
|
switch (colorTheme) {
|
|
case "accessible":
|
|
if (voteIsLike === true) {
|
|
colorString = "dodgerblue";
|
|
} else {
|
|
colorString = "gold";
|
|
}
|
|
break;
|
|
case "neon":
|
|
if (voteIsLike === true) {
|
|
colorString = "aqua";
|
|
} else {
|
|
colorString = "magenta";
|
|
}
|
|
break;
|
|
case "classic":
|
|
default:
|
|
if (voteIsLike === true) {
|
|
colorString = "lime";
|
|
} else {
|
|
colorString = "red";
|
|
}
|
|
}
|
|
return colorString;
|
|
}
|
|
|
|
/* popup-script.js
|
|
document.querySelector('#login')
|
|
.addEventListener('click', function () {
|
|
chrome.runtime.sendMessage({ message: 'get_auth_token' });
|
|
});
|
|
|
|
|
|
document.querySelector("#log_off").addEventListener("click", function () {
|
|
chrome.runtime.sendMessage({ message: "log_off" });
|
|
});
|
|
*/
|
|
|
|
/******/ })()
|
|
; |