Skip to content

Commit 6f2cda3

Browse files
DeveloperMDCMDeveloperMDCM
committed
feat: update v2.3.0 - add reverse mode, buffer log video, translation option
1 parent 756fede commit 6f2cda3

File tree

1 file changed

+125
-41
lines changed

1 file changed

+125
-41
lines changed

‎youtube_script_new_ui.js

Lines changed: 125 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -70,7 +70,7 @@
7070
// @description:en Youtube Tools All in one local Download mp4, MP3 HIGT QUALITY
7171
// @description Youtube Tools All in one local Download mp4, MP3 HIGT QUALITY
7272
// @homepage https://github.com/DeveloperMDCM/
73-
// @version 2.2.92
73+
// @version 2.3.0
7474
// @author MDCM
7575
// @match https://*.youtube.com/*
7676
// @exclude *://music.youtube.com/*
@@ -240,6 +240,7 @@
240240
// justify-content: center;
241241
// align-items: center;
242242
// }
243+
243244
#yt-enhancement-panel {
244245
position: fixed;
245246
top: 60px;
@@ -276,7 +277,7 @@
276277
#toggle-panel {
277278
position: fixed;
278279
top: 10px;
279-
right: 180px;
280+
right: 115px;
280281
z-index: 10000;
281282
color: white;
282283
padding: 5px;
@@ -446,6 +447,44 @@
446447
align-items: center;
447448
flex-wrap: wrap;
448449
gap: 10px;
450+
}
451+
.containerButtons > button:hover {
452+
cursor: pointer;
453+
}
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+
}
463+
body {
464+
padding: 0;
465+
margin: 0;
466+
overflow-y: scroll;
467+
overflow-x: hidden;
468+
}
469+
.style-scope.ytd-comments {
470+
overflow-y: auto;
471+
overflow-x: hidden;
472+
height: auto;
473+
max-height: 100vh;
474+
}
475+
ytd-item-section-renderer.ytd-watch-next-secondary-results-renderer {
476+
--ytd-item-section-item-margin: 8px;
477+
overflow-y: auto;
478+
overflow-x: hidden;
479+
height: auto;
480+
max-height: 130vh;
481+
}
482+
.right-section.ytcp-header {
483+
display: flex;
484+
flex: 1;
485+
align-items: center;
486+
gap: 15px;
487+
justify-content: end;
449488
}
450489
#meta.ytd-playlist-panel-video-renderer {
451490
min-width: 0;
@@ -553,22 +592,7 @@
553592
</svg>
554593
</button>
555594
`;
556-
557-
const modeReverse = `
558-
<button title="Reverse" class="botones_div" type="button" id="invertir">
559-
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-arrows-diff" width="24"
560-
height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none"
561-
stroke-linecap="round" stroke-linejoin="round">
562-
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
563-
<path d="M11 16h10"></path>
564-
<path d="M11 16l4 4"></path>
565-
<path d="M11 16l4 -4"></path>
566-
<path d="M13 8h-10"></path>
567-
<path d="M13 8l-4 4"></path>
568-
<path d="M13 8l-4 -4"></path>
569-
</svg>
570-
</button>
571-
`;
595+
572596

573597
const filterEyes = `
574598
@@ -700,14 +724,20 @@
700724
</button>
701725
`;
702726

727+
const bufferVideo = `
728+
<button title="Buffer video" type="button" class="buffer_video botones_div">
729+
<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-align-box-right-stretch"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M15 17h2" /><path d="M3 5a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v14a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-14z" /><path d="M11 12h6" /><path d="M13 7h4" /></svg>
730+
</button>
731+
`;
732+
703733

704734
const menuBotones = `
705735
<main>
706736
<div class="container">
707737
<form>
708738
<div class="containerButtons">
709739
${thumbnailVideo}
710-
${modeReverse}
740+
${bufferVideo}
711741
${filterEyes}
712742
${resetButton}
713743
${repeatVideo}
@@ -984,6 +1014,11 @@
9841014
<input type="checkbox" id="translation-toggle"> Translate comments / Reload page
9851015
</label>
9861016
</div>
1017+
<div class="enhancement-option">
1018+
<label>
1019+
<input type="checkbox" id="reverse-mode-toggle"> Reverse mode
1020+
</label>
1021+
</div>
9871022
9881023
<div class="enhancement-option">
9891024
<label>Video Player Size: <span id="player-size-value">100</span>%</label> <button class="tab-button-active" id="reset-player-size">Reset video size</button>
@@ -1151,6 +1186,11 @@
11511186
<input type="checkbox" id="translation-toggle"> Translate comments / Reload page
11521187
</label>
11531188
</div>
1189+
<div class="enhancement-option">
1190+
<label>
1191+
<input type="checkbox" id="reverse-mode-toggle"> Reverse mode
1192+
</label>
1193+
</div>
11541194
11551195
<div class="enhancement-option">
11561196
<label>Video Player Size: <span id="player-size-value">100</span>%</label> <button class="tab-button-active" id="reset-player-size">Reset video size</button>
@@ -1336,6 +1376,7 @@
13361376
dislikes: $id('dislikes-toggle').checked,
13371377
themes: $id('themes-toggle').checked,
13381378
translation: $id('translation-toggle').checked,
1379+
reverseMode: $id('reverse-mode-toggle').checked,
13391380
hideComments: $id('hide-comments-toggle').checked,
13401381
hideSidebar: $id('hide-sidebar-toggle').checked,
13411382
disableAutoplay: $id('autoplay-toggle').checked,
@@ -1373,6 +1414,7 @@
13731414
$id('dislikes-toggle').checked = settings.dislikes || true;
13741415
$id('themes-toggle').checked = settings.themes || false;
13751416
$id('translation-toggle').checked = settings.translation || false;
1417+
$id('reverse-mode-toggle').checked = settings.reverseMode || false;
13761418
$id('hide-comments-toggle').checked = settings.hideComments || false;
13771419
$id('hide-sidebar-toggle').checked = settings.hideSidebar || false;
13781420
$id('autoplay-toggle').checked = settings.disableAutoplay || false;
@@ -1430,6 +1472,7 @@
14301472
dislikes: $id('dislikes-toggle').checked,
14311473
themes: $id('themes-toggle').checked,
14321474
translation: $id('translation-toggle').checked,
1475+
reverseMode: $id('reverse-mode-toggle').checked,
14331476
hideComments: $id('hide-comments-toggle').checked,
14341477
hideSidebar: $id('hide-sidebar-toggle').checked,
14351478
disableAutoplay: $id('autoplay-toggle').checked,
@@ -1596,7 +1639,7 @@
15961639
$sp('--yt-spec-static-brand-white', selectedTheme.textColor);
15971640
$sp('--ytd-searchbox-background', selectedTheme.gradient);
15981641
$sp('--ytd-searchbox-text-color', selectedTheme.textColor);
1599-
1642+
$sp('--ytcp-text-primary', settings.textColor);
16001643
GM_addStyle(`
16011644
16021645
.botones_div {
@@ -1662,9 +1705,24 @@
16621705
$sp('--yt-spec-static-brand-white', settings.timeColorPicker);
16631706
$sp('--ytd-searchbox-background', settings.primaryColorPicker);
16641707
$sp('--ytd-searchbox-text-color', settings.secondaryColorPicker);
1665-
1708+
$sp('--ytcp-text-primary', settings.primaryColorPicker);
16661709
GM_addStyle(`
1667-
1710+
.html5-video-player {
1711+
color: ${settings.primaryColorPicker} !important;
1712+
}
1713+
.ytp-volume-slider-handle:before, .ytp-volume-slider-handle, .ytp-tooltip.ytp-preview:not(.ytp-text-detail) {
1714+
background-color: ${settings.iconsColorPicker} !important;
1715+
}
1716+
.ytp-autonav-toggle-button[aria-checked=true] {
1717+
background-color: ${settings.iconsColorPicker} !important;
1718+
}
1719+
.tp-yt-iron-icon {
1720+
fill: ${settings.iconsColorPicker} !important;
1721+
}
1722+
1723+
#columns.style-scope.ytd-watch-flexy {
1724+
flex-direction: ${settings.reverseMode ? 'row-reverse' : 'row'} !important;
1725+
}
16681726
.botones_div {
16691727
background-color: transparent;
16701728
border: none;
@@ -1941,25 +1999,51 @@
19411999

19422000
const btnImagen = $e('#imagen');
19432001
const formularioButtons = $e('#eyes');
1944-
const invertirVista = $e('#invertir');
1945-
1946-
const reverse = $e('#columns');
1947-
1948-
let countViewRow = 0; // Count
1949-
if (invertirVista != undefined) {
1950-
invertirVista.onclick = () => {
1951-
countViewRow += 1;
1952-
switch (countViewRow) {
1953-
case 1:
1954-
reverse.style.flexDirection = 'row-reverse';
1955-
break;
1956-
case 2:
1957-
reverse.style.flexDirection = 'row';
1958-
countViewRow = 0;
1959-
break;
1960-
}
1961-
};
2002+
2003+
function initClickEvent() {
2004+
const bufferVideo = $e('.buffer_video');
2005+
2006+
if (!bufferVideo) {
2007+
console.log("Botón no encontrado, esperando...");
2008+
return;
2009+
}
2010+
2011+
// Evita duplicar el evento
2012+
if (!bufferVideo.dataset.listenerAdded) {
2013+
bufferVideo.addEventListener("click", () => {
2014+
const video = document.querySelector("video");
2015+
2016+
if (!video) {
2017+
console.log("No se encontró el video en la página.");
2018+
return;
2019+
}
2020+
2021+
// Simular clic derecho
2022+
const event = new MouseEvent("contextmenu", {
2023+
bubbles: true,
2024+
cancelable: true
2025+
});
2026+
2027+
video.dispatchEvent(event);
2028+
2029+
setTimeout(() => {
2030+
const option = document.querySelector("body > div.ytp-popup.ytp-contextmenu > div > div > div:nth-child(7)");
2031+
if (option) {
2032+
option.click();
2033+
} else {
2034+
console.log("Opción no encontrada, intenta aumentar el tiempo de espera.");
2035+
}
2036+
}, 1000);
2037+
});
2038+
2039+
bufferVideo.dataset.listenerAdded = "true";
2040+
console.log("Evento registrado con éxito.");
2041+
}
19622042
}
2043+
2044+
setInterval(initClickEvent, 2000);
2045+
2046+
19632047

19642048
// valido modo oscuro y venta de video
19652049
// Repeat video button
@@ -2237,7 +2321,7 @@
22372321

22382322
console.log(
22392323
'%cYoutube Tools Extension NEW UI\n' +
2240-
'%cRun %c(v2.2.92)\n' +
2324+
'%cRun %c(v2.3.0)\n' +
22412325
'By: DeveloperMDCM.',
22422326
HEADER_STYLE,
22432327
CODE_STYLE,

0 commit comments

Comments
 (0)