diff --git a/Extensions/combined/ryd.content-script.js b/Extensions/combined/ryd.content-script.js index acd06e3..37271f6 100644 --- a/Extensions/combined/ryd.content-script.js +++ b/Extensions/combined/ryd.content-script.js @@ -1,77 +1,62 @@ //--- Import Button Functions ---// import { getButtons, - getLikeButton, - getDislikeButton, - checkForSignInButton, + + + } from "./src/buttons"; //--- Import State Functions ---// import { - isMobile, isShorts, - isVideoDisliked, - isVideoLiked, - getState, - setState, setInitialState, - setLikes, - setDislikes, - getLikeCountFromButton, - LIKED_STATE, - DISLIKED_STATE, - NEUTRAL_STATE, initExtConfig, } from "./src/state"; //--- Import Video & Browser Functions ---// import { - numberFormat, getBrowser, - getVideoId, isVideoLoaded, cLog, } from "./src/utils"; import { createRateBar } from "./src/bar"; import { - sendVote, - likeClicked, - dislikeClicked, addLikeDislikeEventListener, storageChangeHandler, } from "./src/events"; -initExtConfig(); +await initExtConfig(); let jsInitChecktimer = null; let isSetInitialStateDone = false; -function setEventListeners(evt) { - function checkForJS_Finish() { +async function setEventListeners (evt) { + async function checkForJS_Finish () { try { if (isShorts() || (getButtons()?.offsetParent && isVideoLoaded())) { - addLikeDislikeEventListener(); - setInitialState(); - isSetInitialStateDone = true; - getBrowser().storage.onChanged.addListener(storageChangeHandler); clearInterval(jsInitChecktimer); jsInitChecktimer = null; - } - } catch(exception) { - if(!isSetInitialStateDone) { - setInitialState(); + addLikeDislikeEventListener(); + await setInitialState(); + isSetInitialStateDone = true; + getBrowser().storage.onChanged.addListener(storageChangeHandler); + } + } catch (exception) { + if (!isSetInitialStateDone) { + cLog("error"); + await setInitialState(); } } } - - jsInitChecktimer = setInterval(checkForJS_Finish, 111); + if (jsInitChecktimer !== null) clearInterval(jsInitChecktimer); + jsInitChecktimer = setInterval(await checkForJS_Finish, 111); } -setEventListeners(); +await setEventListeners(); -document.addEventListener("yt-navigate-finish", function (event) { +document.addEventListener("yt-navigate-finish", async function (event) { if (jsInitChecktimer !== null) clearInterval(jsInitChecktimer); window.returnDislikeButtonlistenersSet = false; - setEventListeners(); + await setEventListeners(); }); diff --git a/Extensions/combined/src/bar.js b/Extensions/combined/src/bar.js index 39030b5..6ad7e2a 100644 --- a/Extensions/combined/src/bar.js +++ b/Extensions/combined/src/bar.js @@ -60,7 +60,7 @@ function createRateBar(likes, dislikes) { colorLikeStyle = "; background-color: " + getColorFromTheme(true); colorDislikeStyle = "; background-color: " + getColorFromTheme(false); } - let actions = isNewDesign() && getButtons().id === "top-level-buttons-computed" + let actions = isNewDesign() && getButtons().id === "top-level-buttons-computed" ? getButtons() : document.getElementById("menu-container"); ( actions || document.querySelector("ytm-slim-video-action-bar-renderer") diff --git a/Extensions/combined/src/buttons.js b/Extensions/combined/src/buttons.js index 77cb0fe..d483b2a 100644 --- a/Extensions/combined/src/buttons.js +++ b/Extensions/combined/src/buttons.js @@ -1,16 +1,15 @@ -import { isMobile, isShorts } from "./state"; -import { isInViewport } from "./utils"; +import { isMobile, isShorts, extConfig } from "./state"; +import { isInViewport, querySelector, querySelectorAll } from './utils'; function getButtons() { //--- If Watching Youtube Shorts: ---// if (isShorts()) { - let elements = document.querySelectorAll( - isMobile() - ? "ytm-like-button-renderer" - : "#like-button > ytd-like-button-renderer" - ); + let elements = isMobile() + ? querySelectorAll(extConfig.selectors.buttons.shorts.mobile) + : querySelectorAll(extConfig.selectors.buttons.shorts.desktop); + for (let element of elements) { - //Youtube Shorts can have multiple like/dislike buttons when scrolling through videos + //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; @@ -19,48 +18,33 @@ function getButtons() { } //--- If Watching On Mobile: ---// if (isMobile()) { - return document.querySelector(".slim-video-action-bar-actions"); + return document.querySelector(extConfig.selectors.buttons.regular.mobile); } //--- If Menu Element Is Displayed: ---// - if (document.getElementById("menu-container")?.offsetParent === null) { - return document.querySelector("ytd-menu-renderer.ytd-watch-metadata > div"); + if (querySelector(extConfig.selectors.menuContainer)?.offsetParent === null) { + return querySelector(extConfig.selectors.buttons.regular.desktopMenu) //--- If Menu Element Isn't Displayed: ---// } else { - return document - .getElementById("menu-container") - ?.querySelector("#top-level-buttons-computed"); + return querySelector(extConfig.selectors.buttons.regular.desktopNoMenu); } } function getLikeButton() { return getButtons().children[0].tagName === - "YTD-SEGMENTED-LIKE-DISLIKE-BUTTON-RENDERER" - ? document.querySelector("#segmented-like-button") !== null ? document.querySelector("#segmented-like-button") : getButtons().children[0].children[0] - : getButtons().querySelector("like-button-view-model") ?? getButtons().children[0]; + 'YTD-SEGMENTED-LIKE-DISLIKE-BUTTON-RENDERER' + ? querySelector(extConfig.selectors.buttons.likeButton.segmented) ?? querySelector(extConfig.selectors.buttons.likeButton.segmentedGetButtons, getButtons()) + : querySelector(extConfig.selectors.buttons.likeButton.notSegmented, getButtons()) } function getLikeTextContainer() { - return ( - getLikeButton().querySelector("#text") ?? - getLikeButton().getElementsByTagName("yt-formatted-string")[0] ?? - getLikeButton().querySelector("span[role='text']") - ); + return querySelector(extConfig.selectors.likeTextContainer, getLikeButton()); } function getDislikeButton() { - if (getButtons().children[0].tagName === 'YTD-SEGMENTED-LIKE-DISLIKE-BUTTON-RENDERER') { - if (getButtons().children[0].children[1] === undefined) { - return document.querySelector('#segmented-dislike-button'); - } else { - return getButtons().children[0].children[1]; - } - } else { - if (getButtons().querySelector("dislike-button-view-model")) { - return getButtons().querySelector("dislike-button-view-model"); - } else { - return getButtons().children[1]; - } - } + return getButtons().children[0].tagName === + 'YTD-SEGMENTED-LIKE-DISLIKE-BUTTON-RENDERER' + ? querySelector(extConfig.selectors.buttons.dislikeButton.segmented) ?? querySelector(extConfig.selectors.buttons.dislikeButton.segmentedGetButtons, getButtons()) + : querySelector(extConfig.selectors.buttons.dislikeButton.notSegmented, getButtons()) } function createDislikeTextContainer() { @@ -82,10 +66,13 @@ function createDislikeTextContainer() { } function getDislikeTextContainer() { - let result = - getDislikeButton().querySelector("#text") ?? - getDislikeButton().getElementsByTagName("yt-formatted-string")[0] ?? - getDislikeButton().querySelector("span[role='text']"); + let result; + for (const selector of extConfig.selectors.dislikeTextContainer) { + result = getDislikeButton().querySelector(selector); + if (result !== null) { + break; + } + } if (result == null) { result = createDislikeTextContainer(); } diff --git a/Extensions/combined/src/state.js b/Extensions/combined/src/state.js index 8f113f3..76ee255 100644 --- a/Extensions/combined/src/state.js +++ b/Extensions/combined/src/state.js @@ -11,8 +11,8 @@ import { getVideoId, cLog, numberFormat, - getColorFromTheme, -} from "./utils"; + getColorFromTheme, querySelector +} from './utils'; import { localize } from "./utils"; import { createStarRating } from "./starRating"; @@ -31,6 +31,33 @@ let extConfig = { showTooltipPercentage: false, tooltipPercentageMode: "dash_like", numberDisplayReformatLikes: false, + selectors: { + dislikeTextContainer: [], + likeTextContainer: [], + buttons: { + shorts: { + mobile: [], + desktop: [], + }, + regular: { + mobile: [], + desktopMenu: [], + desktopNoMenu: [], + }, + likeButton: { + segmented: [], + segmentedGetButtons: [], + notSegmented: [] + }, + dislikeButton: { + segmented: [], + segmentedGetButtons: [], + notSegmented: [] + } + }, + menuContainer: [], + roundedDesign: [], + } }; let storedData = { @@ -52,7 +79,7 @@ function isNewDesign() { } function isRoundedDesign() { - return document.getElementById("segmented-like-button") !== null; + return querySelector(extConfig.selectors.roundedDesign) !== null; } let mutationObserver = new Object(); @@ -240,6 +267,7 @@ async function setState(storedData) { ? LIKED_STATE : NEUTRAL_STATE; let statsSet = false; + cLog("Video is loaded. Adding buttons..."); let videoId = getVideoId(window.location.href); let likeCount = getLikeCountFromButton() || null; @@ -266,11 +294,11 @@ async function setState(storedData) { } } -function setInitialState() { - setState(storedData); +async function setInitialState () { + await setState(storedData); } -function initExtConfig() { +async function initExtConfig () { initializeDisableVoteSubmission(); initializeColoredThumbs(); initializeColoredBar(); @@ -279,6 +307,19 @@ function initExtConfig() { initializeTooltipPercentage(); initializeTooltipPercentageMode(); initializeNumberDisplayReformatLikes(); + await initializeSelectors(); +} + +async function initializeSelectors () { + console.log("initializing selectors") + let result = await fetch(`${apiUrl}/configs/selectors`, { + method: "GET", + headers: { + Accept: "application/json", + } + }).then((response) => response.json()).catch((error) => {}); + extConfig.selectors = result ?? extConfig.selectors; + console.log(result) } function initializeDisableVoteSubmission() { diff --git a/Extensions/combined/src/utils.js b/Extensions/combined/src/utils.js index e789815..fc1c082 100644 --- a/Extensions/combined/src/utils.js +++ b/Extensions/combined/src/utils.js @@ -143,6 +143,27 @@ function getColorFromTheme(voteIsLike) { return colorString; } +function querySelector(selectors, element) { + let result; + for (const selector of selectors) { + result = (element ?? document).querySelector(selector); + if (result !== null) { + return result; + } + } +} + +function querySelectorAll(selectors) { + let result; + for (const selector of selectors) { + result = document.querySelectorAll(selector); + if (result.length !== 0) { + return result; + } + } + return result; +} + export { numberFormat, getBrowser, @@ -152,4 +173,6 @@ export { cLog, getColorFromTheme, localize, + querySelector, + querySelectorAll }; diff --git a/Website/pages/donate.vue b/Website/pages/donate.vue index ec63e14..1a24d47 100644 --- a/Website/pages/donate.vue +++ b/Website/pages/donate.vue @@ -10,10 +10,6 @@ mdi-patreon Patreon - - mdi-cash-multiple - Yoomoney - mdi-bitcoin Crypto @@ -34,7 +30,6 @@ export default { }, data: () => ({ patreonLink: "https://www.patreon.com/returnyoutubedislike", - yoomoneyLink: "/pay/yoomoney", cryptoLink: "/pay/crypto", }), }; diff --git a/Website/pages/index.vue b/Website/pages/index.vue index 745631f..b150473 100644 --- a/Website/pages/index.vue +++ b/Website/pages/index.vue @@ -69,7 +69,7 @@ -
+

mdi-heart {{ $vuetify.lang.t("$vuetify.home.sponsors") }} @@ -108,9 +108,8 @@ export default { githubLink: "https://github.com/Anarios/return-youtube-dislike", discordLink: "https://discord.gg/mYnESY4Md5", sponsors: [ - { name: "Piepacker", link: "https://piepacker.com/" }, { - name: "Become our sponsor", + name: "Become our sponsor and be listed here", link: "https://www.patreon.com/join/returnyoutubedislike/checkout?rid=8008601", }, ], diff --git a/Website/pages/pay/yoomoney.vue b/Website/pages/pay/yoomoney.vue deleted file mode 100644 index 95fccc0..0000000 --- a/Website/pages/pay/yoomoney.vue +++ /dev/null @@ -1,20 +0,0 @@ -