Skip to content

Commit b630adb

Browse files
DeveloperMDCMDeveloperMDCM
committed
feat: add option for avatar download, update styles for header and fixed button apend header-top
1 parent 387843a commit b630adb

File tree

1 file changed

+64
-50
lines changed

1 file changed

+64
-50
lines changed

‎youtube_script_new_ui.js

Lines changed: 64 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -275,9 +275,6 @@
275275
width: 100%;
276276
}
277277
#toggle-panel {
278-
position: fixed;
279-
top: 10px;
280-
right: 115px;
281278
z-index: 10000;
282279
color: white;
283280
padding: 5px;
@@ -289,14 +286,16 @@
289286
width: 43px;
290287
border-radius: 100px;
291288
}
292-
#toggle-panel:hover {
293-
background-color: #fff;
294-
border-radius: 100px;
289+
#toggle-button:hover {
290+
background-color: rgba(255,255,255,0.1);
291+
border-radius: 50%;
295292
opacity: 1 !important;
296293
}
297294
#icon-menu-settings {
298295
width: 24px;
299296
height: 24px;
297+
padding: 7px;
298+
margin-right: 5px;
300299
cursor: pointer;
301300
user-select: none;
302301
}
@@ -451,15 +450,7 @@
451450
.containerButtons > button:hover {
452451
cursor: pointer;
453452
}
454-
#container.ytd-masthead {
455-
height: 56px;
456-
padding: 0 16px;
457-
display: flexbox;
458-
display: flex;
459-
flex-direction: row;
460-
align-items: center;
461-
justify-content: start;
462-
}
453+
463454
body {
464455
padding: 0;
465456
margin: 0;
@@ -1054,6 +1045,11 @@
10541045
<label>
10551046
<input type="checkbox" id="translation-toggle"> Translate comments / Reload page
10561047
</label>
1048+
</div>
1049+
<div class="enhancement-option">
1050+
<label>
1051+
<input type="checkbox" id="avatars-toggle"> Download avatars / Reload page
1052+
</label>
10571053
</div>
10581054
<div class="enhancement-option">
10591055
<label>
@@ -1226,6 +1222,11 @@
12261222
<label>
12271223
<input type="checkbox" id="translation-toggle"> Translate comments / Reload page
12281224
</label>
1225+
</div>
1226+
<div class="enhancement-option">
1227+
<label>
1228+
<input type="checkbox" id="avatars-toggle"> Download avatars / Reload page
1229+
</label>
12291230
</div>
12301231
<div class="enhancement-option">
12311232
<label>
@@ -1349,35 +1350,47 @@
13491350

13501351
panel.innerHTML = panelHTML;
13511352
$ap(panel);
1352-
// Create toggle button
1353-
const toggleButton = $cl('div');
1354-
toggleButton.id = 'toggle-panel';
1355-
const icon = $cl('img');
1356-
icon.id = 'icon-menu-settings';
1357-
icon.src =
1358-
'https://cdn.iconscout.com/icon/premium/png-512-thumb/settings-782-1095915.png?f=webp&w=256';
13591353

1360-
toggleButton.appendChild(icon);
13611354

1362-
// Add panel and toggle button to the page
1363-
$ap(panel);
1364-
$ap(toggleButton);
1355+
function addIcon() {
1356+
const topBar = $e('ytd-topbar-menu-button-renderer');
1357+
if (!topBar || $id('icon-menu-settings')) return;
1358+
1359+
const toggleButton = $cl('div');
1360+
toggleButton.id = 'toggle-button';
1361+
1362+
const icon = $cl('img');
1363+
icon.id = 'icon-menu-settings';
1364+
icon.src = 'https://cdn.iconscout.com/icon/premium/png-512-thumb/settings-782-1095915.png?f=webp&w=100';
1365+
1366+
toggleButton.appendChild(icon);
1367+
topBar.parentElement.insertBefore(toggleButton, topBar);
1368+
// Toggle panel visibility
1369+
let openMenu = false;
1370+
toggleButton.addEventListener('click', () => {
1371+
openMenu = !openMenu;
1372+
// openMenu
1373+
// ? (toggleButton.style.backgroundColor = '#f00')
1374+
// : (toggleButton.style.backgroundColor = 'transparent');
1375+
panel.style.display = panel.style.display === 'none' ? 'block' : 'none';
1376+
});
1377+
1378+
1379+
}
13651380

1366-
// Toggle panel visibility
1381+
1382+
addIcon();
13671383
let openMenu = false;
1368-
toggleButton.addEventListener('click', () => {
1369-
openMenu = !openMenu;
1370-
// openMenu
1371-
// ? (toggleButton.style.backgroundColor = '#f00')
1372-
// : (toggleButton.style.backgroundColor = 'transparent');
1373-
panel.style.display = panel.style.display === 'none' ? 'block' : 'none';
1374-
});
13751384

13761385
const close_menu_settings = $e('.close_menu_settings');
1377-
close_menu_settings.addEventListener('click', () => {
1378-
openMenu = !openMenu;
1379-
panel.style.display = panel.style.display === 'none' ? 'block' : 'none';
1380-
});
1386+
close_menu_settings.addEventListener('click', () => {
1387+
openMenu = !openMenu;
1388+
panel.style.display = panel.style.display === 'none' ? 'block' : 'none';
1389+
});
1390+
1391+
// $ap(toggleButton);
1392+
1393+
13811394

13821395

13831396
// Tab functionality
@@ -1417,6 +1430,7 @@
14171430
dislikes: $id('dislikes-toggle').checked,
14181431
themes: $id('themes-toggle').checked,
14191432
translation: $id('translation-toggle').checked,
1433+
avatars: $id('avatars-toggle').checked,
14201434
reverseMode: $id('reverse-mode-toggle').checked,
14211435
hideComments: $id('hide-comments-toggle').checked,
14221436
hideSidebar: $id('hide-sidebar-toggle').checked,
@@ -1455,6 +1469,7 @@
14551469
$id('dislikes-toggle').checked = settings.dislikes || true;
14561470
$id('themes-toggle').checked = settings.themes || false;
14571471
$id('translation-toggle').checked = settings.translation || false;
1472+
$id('avatars-toggle').checked = settings.avatars || false;
14581473
$id('reverse-mode-toggle').checked = settings.reverseMode || false;
14591474
$id('hide-comments-toggle').checked = settings.hideComments || false;
14601475
$id('hide-sidebar-toggle').checked = settings.hideSidebar || false;
@@ -1513,6 +1528,7 @@
15131528
dislikes: $id('dislikes-toggle').checked,
15141529
themes: $id('themes-toggle').checked,
15151530
translation: $id('translation-toggle').checked,
1531+
avatars: $id('avatars-toggle').checked,
15161532
reverseMode: $id('reverse-mode-toggle').checked,
15171533
hideComments: $id('hide-comments-toggle').checked,
15181534
hideSidebar: $id('hide-sidebar-toggle').checked,
@@ -1889,7 +1905,7 @@
18891905
function checkScroll () {
18901906
const avatars = $m('#author-thumbnail-button #img.style-scope.yt-img-shadow');
18911907

1892-
if (avatars.length > 0) {
1908+
if (avatars.length > 0 && settings.avatars) {
18931909
limpiarHTML('.yt-image-avatar-download');
18941910
agregarBotonesDescarga();
18951911
}
@@ -1978,18 +1994,14 @@
19781994

19791995
window.open(classicUrl, '_blank');
19801996

1981-
const videoElement = document.querySelector('video');
1982-
if (videoElement) {
1983-
videoElement.pause();
1984-
} else {
1985-
console.warn('No se encontró el elemento de video');
1986-
}
1997+
$e('video.video-stream.html5-main-video').pause();
1998+
19871999
};
19882000

19892001

19902002

19912003
const createButton = () => {
1992-
const button = document.createElement('button');
2004+
const button = $cl('button');
19932005
button.classList.add(BUTTON_CLASS);
19942006
button.innerHTML = '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-screen-share"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M21 12v3a1 1 0 0 1 -1 1h-16a1 1 0 0 1 -1 -1v-10a1 1 0 0 1 1 -1h9" /><path d="M7 20l10 0" /><path d="M9 16l0 4" /><path d="M15 16l0 4" /><path d="M17 4h4v4" /><path d="M16 9l5 -5" /></svg>';
19952007
button.title = 'Classic mode';
@@ -2001,19 +2013,21 @@
20012013
const isShortsPage = document.location.pathname.startsWith('/shorts');
20022014

20032015
if (isShortsPage) {
2004-
document.querySelectorAll('#actions').forEach(actionsContainer => {
2016+
$m('#actions').forEach(actionsContainer => {
20052017
if (!actionsContainer.querySelector(`.${BUTTON_CLASS}`)) {
20062018
actionsContainer.prepend(createButton());
20072019
}
20082020
});
20092021
} else {
2010-
document.querySelectorAll(`.${BUTTON_CLASS}`).forEach(button => button.remove());
2022+
$m(`.${BUTTON_CLASS}`).forEach(button => button.remove());
20112023
}
20122024
};
20132025

20142026
const observeDOM = () => {
20152027
const observer = new MutationObserver(() => {
20162028
insertButtons();
2029+
addIcon();
2030+
// obs.disconnect();
20172031
});
20182032
observer.observe(document.body, {
20192033
childList: true,
@@ -2151,7 +2165,7 @@
21512165
// Evita duplicar el evento
21522166
if (!bufferVideo.dataset.listenerAdded) {
21532167
bufferVideo.addEventListener("click", () => {
2154-
const video = document.querySelector("video");
2168+
const video = $e("video.video-stream.html5-main-video");
21552169

21562170
if (!video) {
21572171
console.log("No se encontró el video en la página.");
@@ -2167,7 +2181,7 @@
21672181
video.dispatchEvent(event);
21682182

21692183
setTimeout(() => {
2170-
const option = document.querySelector("body > div.ytp-popup.ytp-contextmenu > div > div > div:nth-child(7)");
2184+
const option = $e("body > div.ytp-popup.ytp-contextmenu > div > div > div:nth-child(7)");
21712185
if (option) {
21722186
option.click();
21732187
} else {

0 commit comments

Comments
 (0)