buttons.js 3.0 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697
  1. import { isMobile, isShorts } from "./state";
  2. import { isInViewport } from "./utils";
  3. function getButtons() {
  4. //--- If Watching Youtube Shorts: ---//
  5. if (isShorts()) {
  6. let elements = document.querySelectorAll(
  7. isMobile()
  8. ? "ytm-like-button-renderer"
  9. : "#like-button > ytd-like-button-renderer"
  10. );
  11. for (let element of elements) {
  12. //Youtube Shorts can have multiple like/dislike buttons when scrolling through videos
  13. //However, only one of them should be visible (no matter how you zoom)
  14. if (isInViewport(element)) {
  15. return element;
  16. }
  17. }
  18. }
  19. //--- If Watching On Mobile: ---//
  20. if (isMobile()) {
  21. return document.querySelector(".slim-video-action-bar-actions");
  22. }
  23. //--- If Menu Element Is Displayed: ---//
  24. if (document.getElementById("menu-container")?.offsetParent === null) {
  25. return document.querySelector("ytd-menu-renderer.ytd-watch-metadata > div");
  26. //--- If Menu Element Isn't Displayed: ---//
  27. } else {
  28. return document
  29. .getElementById("menu-container")
  30. ?.querySelector("#top-level-buttons-computed");
  31. }
  32. }
  33. function getLikeButton() {
  34. return getButtons().children[0].tagName ===
  35. "YTD-SEGMENTED-LIKE-DISLIKE-BUTTON-RENDERER"
  36. ? getButtons().children[0].children[0]
  37. : getButtons().children[0];
  38. }
  39. function getLikeTextContainer() {
  40. return (
  41. getLikeButton().querySelector("#text") ??
  42. getLikeButton().getElementsByTagName("yt-formatted-string")[0] ??
  43. getLikeButton().querySelector("span[role='text']")
  44. );
  45. }
  46. function getDislikeButton() {
  47. return getButtons().children[0].tagName ===
  48. "YTD-SEGMENTED-LIKE-DISLIKE-BUTTON-RENDERER"
  49. ? getButtons().children[0].children[1]
  50. : getButtons().children[1];
  51. }
  52. function createDislikeTextContainer() {
  53. const textNodeClone = getLikeButton().querySelector("button > div[class*='cbox']").cloneNode(true);
  54. const insertPreChild = getDislikeButton().querySelector("yt-touch-feedback-shape");
  55. getDislikeButton().querySelector("button").insertBefore(textNodeClone, insertPreChild);
  56. getDislikeButton().querySelector("button").classList.remove("yt-spec-button-shape-next--icon-button");
  57. getDislikeButton().querySelector("button").classList.add("yt-spec-button-shape-next--icon-leading");
  58. textNodeClone.querySelector("span[role='text']").innerText = "";
  59. return textNodeClone.querySelector("span[role='text']");
  60. }
  61. function getDislikeTextContainer() {
  62. let result =
  63. getDislikeButton().querySelector("#text") ??
  64. getDislikeButton().getElementsByTagName("yt-formatted-string")[0] ??
  65. getDislikeButton().querySelector("span[role='text']");
  66. if (result == null) {
  67. result = createDislikeTextContainer();
  68. }
  69. return result;
  70. }
  71. function checkForSignInButton() {
  72. if (
  73. document.querySelector(
  74. "a[href^='https://accounts.google.com/ServiceLogin']"
  75. )
  76. ) {
  77. return true;
  78. } else {
  79. return false;
  80. }
  81. }
  82. export {
  83. getButtons,
  84. getLikeButton,
  85. getDislikeButton,
  86. getLikeTextContainer,
  87. getDislikeTextContainer,
  88. checkForSignInButton,
  89. };