|
1 | 1 | // ==UserScript== |
2 | 2 | // @name YouTube™ Classic 📺 — (Remove rounded design + Return YouTube dislikes) |
3 | | -// @version 2026.1.17.34 |
| 3 | +// @version 2026.1.17.35 |
4 | 4 | // @author Adam Lui, Magma_Craft, Anarios, JRWR, Fuim & hoothin |
5 | 5 | // @namespace https://github.com/adamlui |
6 | 6 | // @description Reverts YouTube to its classic design (before all the rounded corners & hidden dislikes) + redirects YouTube Shorts |
|
1362 | 1362 | } |
1363 | 1363 |
|
1364 | 1364 | function createRateBar(likes, dislikes) { |
1365 | | - if (isMobile) { return } |
1366 | | - const rateBar = document.getElementById('return-youtube-dislike-bar-container'), |
1367 | | - widthPx = getBtns().children[0].clientWidth + getBtns().children[1].clientWidth +8, |
1368 | | - widthPercent = likes + dislikes > 0 ? (likes / (likes + dislikes)) *100 : 50, |
1369 | | - likePercent = parseFloat(widthPercent.toFixed(1)).toLocaleString(), |
1370 | | - dislikePercent = (100 - likePercent).toLocaleString() |
1371 | | - let tooltipInnerHTML |
1372 | | - switch (extConfig.tooltipPercentageMode) { |
1373 | | - case 'dash_like': |
1374 | | - tooltipInnerHTML = `${likes.toLocaleString()} / ${dislikes.toLocaleString()} - ${likePercent}%` |
1375 | | - break |
1376 | | - case 'dash_dislike': |
1377 | | - tooltipInnerHTML = `${likes.toLocaleString()} / ${dislikes.toLocaleString()} - ${dislikePercent}%` |
1378 | | - break |
1379 | | - case 'both': |
1380 | | - tooltipInnerHTML = `${likePercent}% / ${dislikePercent}%` |
1381 | | - break |
1382 | | - case 'only_like': |
1383 | | - tooltipInnerHTML = `${likePercent}%` |
1384 | | - break |
1385 | | - case 'only_dislike': |
1386 | | - tooltipInnerHTML = `${dislikePercent}%` |
1387 | | - break |
1388 | | - default: |
1389 | | - tooltipInnerHTML = `${likes.toLocaleString()} / ${dislikes.toLocaleString()}` |
1390 | | - } |
| 1365 | + if (isMobile) return |
| 1366 | + const rateBar = document.getElementById('return-youtube-dislike-bar-container') |
| 1367 | + const widthPx = getBtns().children[0].clientWidth + getBtns().children[1].clientWidth +8 |
| 1368 | + const widthPercent = likes + dislikes > 0 ? (likes / (likes + dislikes)) *100 : 50 |
| 1369 | + const likePercent = parseFloat(widthPercent.toFixed(1)).toLocaleString() |
| 1370 | + const dislikePercent = (100 - likePercent).toLocaleString() |
| 1371 | + const tooltipInnerHTML = { |
| 1372 | + dash_like: `${likes.toLocaleString()} / ${ |
| 1373 | + dislikes.toLocaleString()} - ${likePercent}%`, |
| 1374 | + dash_dislike: `${likes.toLocaleString()} / ${ |
| 1375 | + dislikes.toLocaleString()} - ${dislikePercent}%`, |
| 1376 | + both: `${likePercent}% / ${dislikePercent}%`, |
| 1377 | + only_like: `${likePercent}%`, |
| 1378 | + only_dislike: `${dislikePercent}%` |
| 1379 | + }[extConfig.tooltipPercentageMode] || `${likes.toLocaleString()} / ${dislikes.toLocaleString()}` |
1391 | 1380 | if (!rateBar && !isMobile) { |
1392 | | - let colorDislikeStyle = '' |
1393 | | - if (extConfig.coloredBar) |
1394 | | - colorDislikeStyle = '; background-color: ' + getColorFromTheme(false) |
1395 | | - document.getElementById('menu-container').insertAdjacentHTML( |
1396 | | - 'beforeend', |
1397 | | - ` |
1398 | | - <div class="ryd-tooltip" style="width: ${widthPx}px"> |
1399 | | - <div class="ryd-tooltip-bar-container"> |
| 1381 | + const colorDislikeStyle = extConfig.coloredBar ? `; background-color: ${getColorFromTheme(false)}` : '' |
| 1382 | + document.getElementById('menu-container').insertAdjacentHTML('beforeend', ` |
| 1383 | + <div class="ryd-tooltip" style="width: ${widthPx}px"> |
| 1384 | + <div class="ryd-tooltip-bar-container"> |
| 1385 | + <div |
| 1386 | + id="return-youtube-dislike-bar-container" |
| 1387 | + style="width: 100%; height: 2px;${colorDislikeStyle}" |
| 1388 | + > |
1400 | 1389 | <div |
1401 | | - id="return-youtube-dislike-bar-container" |
1402 | | - style="width: 100%; height: 2px;${colorDislikeStyle}" |
1403 | | - > |
1404 | | - <div |
1405 | | - id="return-youtube-dislike-bar" |
1406 | | - style="width: ${widthPercent}%; height: 100%${colorDislikeStyle}" |
1407 | | - ></div> |
1408 | | - </div> |
| 1390 | + id="return-youtube-dislike-bar" |
| 1391 | + style="width: ${widthPercent}%; height: 100%${colorDislikeStyle}" |
| 1392 | + ></div> |
1409 | 1393 | </div> |
1410 | | - <tp-yt-paper-tooltip position="top" id="ryd-dislike-tooltip" class="style-scope ytd-sentiment-bar-renderer" role="tooltip" tabindex="-1"> |
1411 | | - <!--css-build:shady-->${tooltipInnerHTML} |
1412 | | - </tp-yt-paper-tooltip> |
1413 | | - </div>` |
1414 | | - ) |
| 1394 | + </div> |
| 1395 | + <tp-yt-paper-tooltip position="top" id="ryd-dislike-tooltip" class="style-scope ytd-sentiment-bar-renderer" role="tooltip" tabindex="-1"> |
| 1396 | + <!--css-build:shady-->${tooltipInnerHTML} |
| 1397 | + </tp-yt-paper-tooltip> |
| 1398 | + </div> |
| 1399 | + `) |
1415 | 1400 | } else { |
1416 | | - document.getElementById( |
1417 | | - 'return-youtube-dislike-bar-container' |
1418 | | - ).style.width = widthPx + 'px' |
1419 | | - document.getElementById('return-youtube-dislike-bar').style.width = |
1420 | | - widthPercent + '%' |
1421 | | - document.querySelector('#ryd-dislike-tooltip > #tooltip').innerHTML = |
1422 | | - tooltipInnerHTML |
| 1401 | + const rydBar = document.getElementById('return-youtube-dislike-bar'), |
| 1402 | + rydBarContainer = document.getElementById('return-youtube-dislike-bar-container'), |
| 1403 | + rydTooltip = document.querySelector('#ryd-dislike-tooltip > #tooltip') |
| 1404 | + rydBar.style.width = `${widthPercent}%` ; rydBarContainer.style.width = `${widthPx}px` |
| 1405 | + rydTooltip.innerHTML = tooltipInnerHTML |
1423 | 1406 | if (extConfig.coloredBar) { |
1424 | | - document.getElementById( |
1425 | | - 'return-youtube-dislike-bar-container' |
1426 | | - ).style.backgroundColor = getColorFromTheme(false) |
1427 | | - document.getElementById( |
1428 | | - 'return-youtube-dislike-bar' |
1429 | | - ).style.backgroundColor = getColorFromTheme(true) |
| 1407 | + rydBarContainer.style.backgroundColor = getColorFromTheme(false) |
| 1408 | + rydBar.style.backgroundColor = getColorFromTheme(true) |
1430 | 1409 | } |
1431 | 1410 | } |
1432 | 1411 | } |
|
0 commit comments