12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849 |
- import { getButtons } from "./buttons";
- function createRateBar(likes, dislikes) {
- let rateBar = document.getElementById("ryd-bar-container");
- const widthPx =
- getButtons().children[0].clientWidth +
- getButtons().children[1].clientWidth +
- 8;
- const widthPercent =
- likes + dislikes > 0 ? (likes / (likes + dislikes)) * 100 : 50;
- if (!rateBar) {
- (
- document.getElementById("menu-container") ||
- document.querySelector("ytm-slim-video-action-bar-renderer")
- ).insertAdjacentHTML(
- "beforeend",
- `
- <div class="ryd-tooltip" style="width: ${widthPx}px">
- <div class="ryd-tooltip-bar-container">
- <div
- id="ryd-bar-container"
- style="width: 100%; height: 2px;"
- >
- <div
- id="ryd-bar"
- style="width: ${widthPercent}%; height: 100%"
- ></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-->${likes.toLocaleString()} / ${dislikes.toLocaleString()}
- </tp-yt-paper-tooltip>
- </div>
- `
- );
- } else {
- document.getElementById("ryd-bar-container").style.width = widthPx + "px";
- document.getElementById("ryd-bar").style.width = widthPercent + "%";
- document.querySelector(
- "#ryd-dislike-tooltip > #tooltip"
- ).innerHTML = `${likes.toLocaleString()} / ${dislikes.toLocaleString()}`;
- }
- }
- export { createRateBar };
|