bar.js 1.6 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849
  1. import { getButtons } from "./buttons";
  2. function createRateBar(likes, dislikes) {
  3. let rateBar = document.getElementById("ryd-bar-container");
  4. const widthPx =
  5. getButtons().children[0].clientWidth +
  6. getButtons().children[1].clientWidth +
  7. 8;
  8. const widthPercent =
  9. likes + dislikes > 0 ? (likes / (likes + dislikes)) * 100 : 50;
  10. if (!rateBar) {
  11. (
  12. document.getElementById("menu-container") ||
  13. document.querySelector("ytm-slim-video-action-bar-renderer")
  14. ).insertAdjacentHTML(
  15. "beforeend",
  16. `
  17. <div class="ryd-tooltip" style="width: ${widthPx}px">
  18. <div class="ryd-tooltip-bar-container">
  19. <div
  20. id="ryd-bar-container"
  21. style="width: 100%; height: 2px;"
  22. >
  23. <div
  24. id="ryd-bar"
  25. style="width: ${widthPercent}%; height: 100%"
  26. ></div>
  27. </div>
  28. </div>
  29. <tp-yt-paper-tooltip position="top" id="ryd-dislike-tooltip" class="style-scope ytd-sentiment-bar-renderer" role="tooltip" tabindex="-1">
  30. <!--css-build:shady-->${likes.toLocaleString()}&nbsp;/&nbsp;${dislikes.toLocaleString()}
  31. </tp-yt-paper-tooltip>
  32. </div>
  33. `
  34. );
  35. } else {
  36. document.getElementById("ryd-bar-container").style.width = widthPx + "px";
  37. document.getElementById("ryd-bar").style.width = widthPercent + "%";
  38. document.querySelector(
  39. "#ryd-dislike-tooltip > #tooltip"
  40. ).innerHTML = `${likes.toLocaleString()}&nbsp;/&nbsp;${dislikes.toLocaleString()}`;
  41. }
  42. }
  43. export { createRateBar };