Skip to content

Commit 950f690

Browse files
committed
Condensed createRateBar() ↞ [auto-sync from https://github.com/adamlui/youtube-classic]
1 parent 9d45d61 commit 950f690

1 file changed

Lines changed: 40 additions & 61 deletions

File tree

youtube-classic/youtube-classic.user.js

Lines changed: 40 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
// ==UserScript==
22
// @name YouTube™ Classic 📺 — (Remove rounded design + Return YouTube dislikes)
3-
// @version 2026.1.17.34
3+
// @version 2026.1.17.35
44
// @author Adam Lui, Magma_Craft, Anarios, JRWR, Fuim & hoothin
55
// @namespace https://github.com/adamlui
66
// @description Reverts YouTube to its classic design (before all the rounded corners & hidden dislikes) + redirects YouTube Shorts
@@ -1362,71 +1362,50 @@
13621362
}
13631363

13641364
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()}`
13911380
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+
>
14001389
<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>
14091393
</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+
`)
14151400
} 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
14231406
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)
14301409
}
14311410
}
14321411
}

0 commit comments

Comments
 (0)