Greasy Fork is available in English.
下載高品質影片/音訊，還原消失的回复，以及更多 YouTube 和 YouTube Music 的 VIP 功能。
// ==UserScript== // @name YouTube Ultimate Tools // @name:vi Bộ Công Cụ YouTube Tối Ưu // @name:es Herramientas Definitivas de YouTube // @name:fr Outils Ultimes YouTube // @name:de Ultimative YouTube-Tools // @name:pt Ferramentas Definitivas do YouTube // @name:ru YouTube Ultimate Инструменты // @name:ja YouTube アルティメット ツール // @name:zh-CN YouTube 终极工具 // @name:zh-TW YouTube 終極工具 // @name:ko YouTube 얼티밋 도구 // @name:it Strumenti Definitivi per YouTube // @description Download high-quality video/audio, return dislikes, and more VIP features for YouTube and YouTube Music. // @description:vi Tải video/audio chất lượng cao, hiện nút dislike, và nhiều tính năng VIP khác cho YouTube và YouTube Music. // @description:es Descarga videos/audio de alta calidad, recupera dislikes y más funciones VIP para YouTube và YouTube Music. // @description:fr Téléchargez des vidéos/audio de haute qualità, récupérez les dislikes et plus de fonctionnalités VIP pour YouTube và YouTube Music. // @description:de Laden Sie hochwertige Videos/Audio herunter, stellen Sie Dislikes wieder her und weitere VIP-Funktionen für YouTube và YouTube Music. // @description:pt Baixe vídeos/áudio de alta qualidade, recupere dislikes e mais recursos VIP para YouTube và YouTube Music. // @description:ru Скачивайте видео/аудио высокого качества, возвращайте дизлайки и другие VIP-функции для YouTube и YouTube Music. // @description:ja 高品質なビデオ/オーディオのダウンロード、低評価の表示、YouTubeおよびYouTube Music向けのVIP機能。 // @description:zh-CN 下载高质量视频/音频，还原消失的回复，以及更多 YouTube 和 YouTube Music 的 VIP 功能。 // @description:zh-TW 下載高品質影片/音訊，還原消失的回复，以及更多 YouTube 和 YouTube Music 的 VIP 功能。 // @description:ko 고품질 비디오/오디오 다운로드, 싫어요 표시, YouTube 및 YouTube Music을 위한 더 많은 VIP 기능. // @description:it Scarica video/audio di alta qualità, ripristina i dislike e altre funzioni VIP per YouTube e YouTube Music. // @homepage https://greasyfork.org/users/1597067-nguyen-ngocanh // @version 0.0.6.0 // @author Akari, DeveloperMDCM // @contributor nvbangg // @match *://www.youtube.com/* // @match *://music.youtube.com/* // @match *://*.music.youtube.com/* // @icon https://www.google.com/s2/favicons?sz=64&domain=youtube.com // @grant GM_info // @grant GM_addStyle // @grant GM_setValue // @grant GM_getValue // @grant unsafeWindow // @run-at document-end // @grant GM_registerMenuCommand // @require https://cdn.jsdelivr.net/npm/[email protected]/dist/js/iziToast.min.js // @compatible chrome // @compatible firefox // @compatible opera // @compatible safari // @compatible edge // @license GPL-3.0 // @namespace https://greasyfork.org/users/1597067-nguyen-ngocanh // @keywords youtube, download, mp3, mp4, high quality, return dislikes, tools // ==/UserScript== (function () { 'use strict'; let validoUrl = document.location.href; const isYTMusic = location.hostname === 'music.youtube.com'; const SETTINGS_KEY = isYTMusic ? 'ytmSettingsMDCM' : 'ytSettingsMDCM'; const $e = (el) => document.querySelector(el); // any element const $id = (el) => document.getElementById(el); // element by id const $m = (el) => document.querySelectorAll(el); // multiple all elements const $cl = (el) => document.createElement(el); // create element const $sp = (el, pty) => document.documentElement.style.setProperty(el, pty); // set property variable css const $ap = (el) => document.body.appendChild(el); // append element const apiDislikes = "https://returnyoutubedislikeapi.com/Votes?videoId="; // Api dislikes const apiGoogleTranslate = "https://translate.googleapis.com/translate_a/t"; // Api google translate let selectedBgColor = "#252525"; // Background color menu default let selectedTextColor = "#ffffff"; // Text color menu default let selectedBgAccentColor = "#ff0000"; // Accent color menu default const urlSharedCode = "https://greasyfork.org/scripts/576162-youtube-ultimate-tools"; const API_URL_AUDIO_VIDEO = "https://p.savenow.to/ajax/download.php?copyright=0&allow_extended_duration=1&" // API URL AUDIO VIDEO const API_KEY_DEVELOPERMDCM = 'dfcb6d76f2f6a9894gjkege8a4ab232222'; // API KEY FOR DOWNLOAD AUDIO VIDEO // Download API fallbacks (region/session issues) const DOWNLOAD_API_FALLBACK_BASES = [ "https://p.savenow.to", "https://p.lbserver.xyz", ]; // Alternative provider fallback const DUBS_START_ENDPOINT = "https://dubs.io/wp-json/tools/v1/download-video"; const DUBS_STATUS_ENDPOINT = "https://dubs.io/wp-json/tools/v1/status-video"; // for translate comments video const languagesTranslate = { "vi": "Vietnamese", "en": "English", "es": "Spanish", "fr": "French", "ja": "Japanese", "zh-CN": "Chinese (Simplified)", "ko": "Korean", "ru": "Russian", "de": "German", "pt": "Portuguese", "zh-TW": "Chinese (Traditional)", "it": "Italian" }; // var for wave let currentVideo = null; let waveStyle = 'dinamica'; let audioCtx = null; let analyser = null; let source = null; let animationId = null; let canvas = null; let ctx = null; let controlPanel = null; let bufferLength = 0; let dataArray = null; let smoothedData = []; let isSetup = false; const smoothingFactor = 0.05; const canvasHeight = 240; const scale = canvasHeight / 90; const PROCESSED_FLAG = 'wave_visualizer_processed'; // ------------------------------ // PERF: runtime guards + dynamic style (avoid style/event/interval leaks) let validoBotones = true; // ------------------------------ const __ytToolsRuntime = { dynamicStyleEl: null, dynamicCssLast: '', settingsLoaded: false, bookmarkClickHandlerInitialized: false, bookmarksPanelOpen: false, continueWatching: { enabled: false, map: null, flushT: null, boundVideo: null, boundVideoId: null, lastSaveAt: 0, lastSavedTime: -1, lastKnownVideoId: null, navHandlerInitialized: false, panelOpen: false, clickHandlerInitialized: false, pagehideHandlerInitialized: false, handlers: null, }, shortsChannelName: { enabled: false, observer: null, io: null, scanT: null, cache: new Map(), // videoId -> channelName inflight: new Map(), // videoId -> Promise<string> fetchChain: Promise.resolve(), }, dislikesCache: { videoId: null, dislikes: null, ts: 0, }, downloadClickHandlerInitialized: false, shortsObserver: null, statsObserver: null, statsIntervalId: null, lockupCachedStatsObserver: null, lockupCachedStatsObserveTarget: null, lockupCachedStatsIntervalId: null, updateShortsViewsButton: function () { }, updateShortsRatingButton: function () { }, nonstopPlayback: { enabled: false, hiddenDescriptor: null, visibilityStateDescriptor: null, blockVisibilityEvent: null, keepAliveTimer: null, }, audioOnly: { enabled: false, lastArtUrl: '', refreshTimer: null, }, }; function setDynamicCss(cssText = '') { if (!__ytToolsRuntime.dynamicStyleEl) { const style = document.createElement('style'); style.id = 'yt-tools-mdcm-dynamic-style'; document.head.appendChild(style); __ytToolsRuntime.dynamicStyleEl = style; } if (__ytToolsRuntime.dynamicCssLast === cssText) return; __ytToolsRuntime.dynamicCssLast = cssText; __ytToolsRuntime.dynamicStyleEl.textContent = cssText; } function paramsVideoURL() { const parametrosURL = new URLSearchParams(window.location.search); return parametrosURL.get('v'); } function isWatchPage() { return window.location.href.includes('youtube.com/watch'); } function checkDarkModeActive() { const htmlElement = document.documentElement; const isDarkModeYT = htmlElement.hasAttribute('dark') || htmlElement.getAttribute('style')?.includes('color-scheme: dark'); const isDarkModeYTM = document.querySelector('ytmusic-app')?.hasAttribute('dark'); return !!(isDarkModeYT || isDarkModeYTM); } function FormatterNumber(num, digits) { const lookup = [ { value: 1, symbol: "" }, { value: 1e3, symbol: "k" }, { value: 1e6, symbol: "M" }, { value: 1e9, symbol: "G" }, { value: 1e12, symbol: "T" }, { value: 1e15, symbol: "P" }, { value: 1e18, symbol: "E" } ]; const rx = /\.0+$|(\.[0-9]*[1-9])0+$/; const item = lookup.slice().reverse().find(function (item) { return num >= item.value; }); return item ? (num / item.value).toFixed(digits).replace(rx, "$1") + item.symbol : "0"; } const scheduleApplySettings = (() => { let t = null; return () => { // Prevent overwriting saved config with defaults before loadSettings finishes. if (!__ytToolsRuntime.settingsLoaded) return; clearTimeout(t); t = setTimeout(() => { try { applySettings(); } catch (err) { console.error('applySettings error:', err); } }, 120); }; })(); // Create a Trusted Types policy let policy = null; try { const tt = (typeof unsafeWindow !== 'undefined' ? unsafeWindow.trustedTypes : window.trustedTypes); if (tt) { try { policy = tt.createPolicy('yt-tools-mdcm', { createHTML: (s) => s }); } catch (e) { policy = tt.defaultPolicy || null; } } } catch (e) { policy = null; } function safeHTML(str) { if (policy && typeof policy.createHTML === 'function') return policy.createHTML(str); return str; } // ------------------------------ // Feature helpers: videoId / channelId / storage // ------------------------------ const STORAGE_KEYS_MDCM = { BOOKMARKS: 'ytBookmarksMDCM', CONTINUE_WATCHING: 'ytContinueWatchingMDCM', SHORTS_CHANNEL_CACHE: 'ytShortsChannelCacheMDCM', LIKES_DISLIKES_CACHE: 'ytLikesDislikesCacheMDCM', VERSION_CHECK_LAST: 'ytVersionCheckLastMDCM', }; const UPDATE_META_URL = 'https://update.greasyfork.org/scripts/576162/YouTube%20Ultimate%20Tools.meta.js'; const VERSION_CHECK_INTERVAL_MS = 24 * 60 * 60 * 1000; // once per day const SHORTS_CHANNEL_TTL_MS = 7 * 24 * 60 * 60 * 1000; // 7 days const LIKES_DISLIKES_TTL_MS = 7 * 24 * 60 * 60 * 1000; // 7 days const PERSISTED_CACHE_MAX_ENTRIES = 500; function getShortsChannelFromPersistedCache(videoId) { try { const map = readJsonGM(STORAGE_KEYS_MDCM.SHORTS_CHANNEL_CACHE, {}); const entry = map?.[videoId]; if (!entry || typeof entry.channelName !== 'string') return null; const age = Date.now() - (Number(entry.ts) || 0); if (age > SHORTS_CHANNEL_TTL_MS) return null; return entry.channelName; } catch (e) { return null; } } function setShortsChannelToPersistedCache(videoId, channelName) { if (!videoId || typeof channelName !== 'string') return; try { const map = readJsonGM(STORAGE_KEYS_MDCM.SHORTS_CHANNEL_CACHE, {}); map[videoId] = { channelName, ts: Date.now() }; const entries = Object.entries(map).sort((a, b) => (Number(b[1]?.ts) || 0) - (Number(a[1]?.ts) || 0)); const pruned = Object.fromEntries(entries.slice(0, PERSISTED_CACHE_MAX_ENTRIES)); writeJsonGM(STORAGE_KEYS_MDCM.SHORTS_CHANNEL_CACHE, pruned); } catch (e) { } } function getLikesDislikesFromPersistedCache(videoId) { try { const map = readJsonGM(STORAGE_KEYS_MDCM.LIKES_DISLIKES_CACHE, {}); const entry = map?.[videoId]; if (!entry) return null; const age = Date.now() - (Number(entry.ts) || 0); if (age > LIKES_DISLIKES_TTL_MS) return null; const dislikes = Number(entry.dislikes); const likes = Number(entry.likes); const viewCount = Number(entry.viewCount); const rating = Number(entry.rating); return { likes: Number.isFinite(likes) ? likes : null, dislikes: Number.isFinite(dislikes) ? dislikes : null, viewCount: Number.isFinite(viewCount) ? viewCount : null, rating: Number.isFinite(rating) && rating >= 0 && rating <= 5 ? rating : null, }; } catch (e) { return null; } } function setLikesDislikesToPersistedCache(videoId, likes, dislikes, viewCount, rating) { if (!videoId) return; try { const map = readJsonGM(STORAGE_KEYS_MDCM.LIKES_DISLIKES_CACHE, {}); map[videoId] = { likes: likes ?? null, dislikes: dislikes ?? null, viewCount: viewCount ?? null, rating: rating ?? null, ts: Date.now() }; const entries = Object.entries(map).sort((a, b) => (Number(b[1]?.ts) || 0) - (Number(a[1]?.ts) || 0)); const pruned = Object.fromEntries(entries.slice(0, Math.min(PERSISTED_CACHE_MAX_ENTRIES, 300))); writeJsonGM(STORAGE_KEYS_MDCM.LIKES_DISLIKES_CACHE, pruned); } catch (e) { } } function getCurrentVideoId() { try { if (location.pathname.startsWith('/shorts/')) { const parts = location.pathname.split('/').filter(Boolean); return parts[1] || null; } if (location.href.includes('youtube.com/watch')) { return paramsVideoURL(); } return null; } catch (e) { return null; } } function readJsonGM(key, fallback) { try { const raw = GM_getValue(key, ''); if (!raw) return fallback; return JSON.parse(raw); } catch (e) { return fallback; } } function writeJsonGM(key, value) { try { GM_setValue(key, JSON.stringify(value)); } catch (e) { console.error('writeJsonGM error:', e); } } const AUDIO_ONLY_TAB_OVERRIDE_KEY = 'ytToolsAudioOnlyTabOverrideMDCM'; // Feature source/inspiration: // Nonstop & Audio Only for YouTube & YouTube Music // Author: nvbangg / Nguyen Van Bang // Repo: https://github.com/nvbangg/Nonstop_Audio_Only_for_Youtube_YTMusic // Greasy Fork: https://greasyfork.org/scripts/546130 // Source license: GPL-3.0. This userscript implements an independent adaptation of the behavior. function applyNonstopPlayback(enabled) { const rt = __ytToolsRuntime.nonstopPlayback; if (enabled && rt.enabled) return; if (!enabled && !rt.enabled) return; if (enabled) { rt.enabled = true; rt.hiddenDescriptor = Object.getOwnPropertyDescriptor(document, 'hidden') || null; rt.visibilityStateDescriptor = Object.getOwnPropertyDescriptor(document, 'visibilityState') || null; try { Object.defineProperties(document, { hidden: { configurable: true, get: () => false }, visibilityState: { configurable: true, get: () => 'visible' }, }); } catch (e) { console.warn('[YT Tools] Could not override visibility state:', e); } rt.blockVisibilityEvent = (event) => { event.stopImmediatePropagation(); }; document.addEventListener('visibilitychange', rt.blockVisibilityEvent, true); window.addEventListener('visibilitychange', rt.blockVisibilityEvent, true); const refreshActivity = () => { try { const pageWindow = typeof unsafeWindow !== 'undefined' ? unsafeWindow : window; if ('_lact' in pageWindow) pageWindow._lact = Date.now(); } catch (e) { } }; refreshActivity(); rt.keepAliveTimer = setInterval(refreshActivity, 60000); return; } rt.enabled = false; if (rt.blockVisibilityEvent) { document.removeEventListener('visibilitychange', rt.blockVisibilityEvent, true); window.removeEventListener('visibilitychange', rt.blockVisibilityEvent, true); rt.blockVisibilityEvent = null; } if (rt.keepAliveTimer) { clearInterval(rt.keepAliveTimer); rt.keepAliveTimer = null; } try { if (rt.hiddenDescriptor) Object.defineProperty(document, 'hidden', rt.hiddenDescriptor); else delete document.hidden; if (rt.visibilityStateDescriptor) Object.defineProperty(document, 'visibilityState', rt.visibilityStateDescriptor); else delete document.visibilityState; } catch (e) { } rt.hiddenDescriptor = null; rt.visibilityStateDescriptor = null; } function getAudioOnlyTabOverride() { const value = sessionStorage.getItem(AUDIO_ONLY_TAB_OVERRIDE_KEY); if (value === 'true') return true; if (value === 'false') return false; return null; } function setAudioOnlyTabOverride(enabled, defaultEnabled) { if (!!enabled === !!defaultEnabled) { sessionStorage.removeItem(AUDIO_ONLY_TAB_OVERRIDE_KEY); return; } sessionStorage.setItem(AUDIO_ONLY_TAB_OVERRIDE_KEY, enabled ? 'true' : 'false'); } function getEffectiveAudioOnly(settings) { const override = getAudioOnlyTabOverride(); return override === null ? !!settings?.audioOnly : override; } function syncAudioOnlyTabCheckbox(settings) { const tabToggle = $id('audio-only-tab-toggle'); if (!tabToggle) return; tabToggle.checked = getEffectiveAudioOnly(settings); tabToggle.title = getAudioOnlyTabOverride() === null ? 'Following the global Audio-only mode setting' : 'Audio-only override is active for this browser tab'; } function getActiveAudioOnlyVideo() { const videos = Array.from(document.querySelectorAll('video')); if (isYTMusic) return videos[0] || null; return videos.find((video) => { const rect = video.getBoundingClientRect(); return rect.width > 0 && rect.height > 0; }) || videos[0] || null; } async function getAudioOnlyThumbnailUrl() { try { const moviePlayer = document.getElementById('movie_player'); if (moviePlayer && typeof moviePlayer.getVideoData === 'function') { const data = moviePlayer.getVideoData(); if (data?.video_id) return `https://i.ytimg.com/vi/${data.video_id}/hqdefault.jpg`; } } catch (e) { } const videoId = getCurrentVideoId() || paramsVideoURL(); if (!videoId) return ''; const host = isYTMusic ? 'i1.ytimg.com' : 'img.youtube.com'; return `https://${host}/vi/${videoId}/hqdefault.jpg`; } async function applyAudioOnlyMode(enabled) { const rt = __ytToolsRuntime.audioOnly; rt.enabled = !!enabled; document.body.classList.toggle('yt-tools-audio-only-active', rt.enabled); document.querySelectorAll('.yt-tools-audio-only-video').forEach((el) => el.classList.remove('yt-tools-audio-only-video')); document.querySelectorAll('.yt-tools-audio-only-player').forEach((el) => el.classList.remove('yt-tools-audio-only-player')); if (!rt.enabled) { rt.lastArtUrl = ''; setAudioOnlyBackground(''); if (rt.refreshTimer) { clearInterval(rt.refreshTimer); rt.refreshTimer = null; } return; } const video = getActiveAudioOnlyVideo(); const player = video?.parentNode?.parentNode || video?.parentElement || null; if (video) video.classList.add('yt-tools-audio-only-video'); if (player) player.classList.add('yt-tools-audio-only-player'); const artUrl = await getAudioOnlyThumbnailUrl(); if (artUrl && artUrl !== rt.lastArtUrl) { rt.lastArtUrl = artUrl; setAudioOnlyBackground(artUrl); } if (!rt.refreshTimer) { rt.refreshTimer = setInterval(() => { if (document.visibilityState !== 'visible') return; const settings = JSON.parse(GM_getValue(SETTINGS_KEY, '{}')); applyAudioOnlyMode(getEffectiveAudioOnly(settings)); }, 3000); } } function setAudioOnlyBackground(url) { let style = $id('yt-tools-audio-only-style'); if (!style) { style = document.createElement('style'); style.id = 'yt-tools-audio-only-style'; document.documentElement.appendChild(style); } style.textContent = url ? `.yt-tools-audio-only-player{background-image:url("${url}")!important;}` : ''; } function isVersionNewer(latestStr, currentStr) { if (!latestStr || !currentStr) return false; const parse = (s) => String(s).trim().split('.').map((n) => parseInt(n, 10) || 0); const a = parse(latestStr); const b = parse(currentStr); const len = Math.max(a.length, b.length); for (let i = 0; i < len; i++) { const x = a[i] || 0; const y = b[i] || 0; if (x > y) return true; if (x < y) return false; } return false; } async function checkNewVersion() { try { const last = GM_getValue(STORAGE_KEYS_MDCM.VERSION_CHECK_LAST, 0); if (Date.now() - last < VERSION_CHECK_INTERVAL_MS) return; GM_setValue(STORAGE_KEYS_MDCM.VERSION_CHECK_LAST, Date.now()); const res = await fetch(UPDATE_META_URL, { cache: 'no-store' }); if (!res.ok) return; const text = await res.text(); const m = text.match(/@version\s+([\d.]+)/); if (!m) return; const latestVer = m[1].trim(); const currentVer = (typeof GM_info !== 'undefined' && GM_info.script && GM_info.script.version) ? String(GM_info.script.version).trim() : ''; if (!currentVer || !isVersionNewer(latestVer, currentVer)) return; const updateUrl = 'https://update.greasyfork.org/scripts/576162/YouTube%20Ultimate%20Tools.user.js'; iziToast.show({ title: 'New Update', message: 'A new version YoutubeTools is available.', buttons: [ ['<button>View Now</button>', function (instance, toast) { window.open(updateUrl, '_blank'); instance.hide({ transitionOut: 'fadeOut' }, toast, 'button'); }, true] // true = focus ] }); } catch (e) { // silent: network or parse error } } function formatTimeShort(sec) { const s = Math.max(0, Math.floor(Number(sec) || 0)); const h = Math.floor(s / 3600); const m = Math.floor((s % 3600) / 60); const r = s % 60; return h > 0 ? `${h}:${String(m).padStart(2, '0')}:${String(r).padStart(2, '0')}` : `${m}:${String(r).padStart(2, '0')}`; } // ------------------------------ // Feature: History / Continue watching (per video) // ------------------------------ function getMainVideoEl() { return ( document.querySelector('#movie_player video.video-stream.html5-main-video') || document.querySelector('ytd-player video.video-stream.html5-main-video') || document.querySelector('video.video-stream.html5-main-video') || document.querySelector('video') ); } function getCurrentVideoMeta() { try { // DOM first (updates earlier on SPA navigation) const domTitle = $e('ytd-watch-metadata h1 yt-formatted-string')?.textContent?.trim() || $e('h1.ytd-watch-metadata yt-formatted-string')?.textContent?.trim() || ''; const domAuthor = $e('#owner ytd-channel-name a, ytd-video-owner-renderer ytd-channel-name a, #text-container.ytd-channel-name a')?.textContent?.trim() || $e('#owner a[href^="/@"], #owner a[href^="/channel/"]')?.textContent?.trim() || ''; const titleFromDom = (domTitle || document.title || '').replace(/\s*-\s*YouTube\s*$/i, '').trim(); const authorFromDom = (domAuthor || '').trim(); const w = (typeof unsafeWindow !== 'undefined' && unsafeWindow) ? unsafeWindow : window; const pr = w?.ytInitialPlayerResponse || window.ytInitialPlayerResponse; const vd = pr?.videoDetails || null; const title = (titleFromDom || vd?.title || document.title || '').replace(/\s*-\s*YouTube\s*$/i, '').trim(); const author = (authorFromDom || vd?.author || '').trim(); const thumbs = vd?.thumbnail?.thumbnails; const thumb = Array.isArray(thumbs) ? (thumbs[thumbs.length - 1]?.url || '') : ''; return { title, author, thumb }; } catch (e) { return { title: '', author: '', thumb: '' }; } } function ensureContinueWatchingMapLoaded() { const rt = __ytToolsRuntime.continueWatching; if (!rt.map) rt.map = readJsonGM(STORAGE_KEYS_MDCM.CONTINUE_WATCHING, {}); if (typeof rt.map !== 'object' || !rt.map) rt.map = {}; return rt.map; } function pruneContinueWatchingMap(map, maxEntries = 200) { try { const entries = Object.entries(map || {}).filter(([, v]) => v && typeof v === 'object'); entries.sort((a, b) => (Number(b[1].updatedAt) || 0) - (Number(a[1].updatedAt) || 0)); const keep = entries.slice(0, maxEntries); const next = {}; for (const [k, v] of keep) next[k] = v; return next; } catch (e) { return map || {}; } } function scheduleContinueWatchingFlush() { const rt = __ytToolsRuntime.continueWatching; clearTimeout(rt.flushT); rt.flushT = setTimeout(() => { try { if (!rt.map) return; rt.map = pruneContinueWatchingMap(rt.map, 200); writeJsonGM(STORAGE_KEYS_MDCM.CONTINUE_WATCHING, rt.map); } catch (e) { } }, 800); } function clearContinueWatchingForVideo(videoId) { if (!videoId) return; const rt = __ytToolsRuntime.continueWatching; const map = ensureContinueWatchingMapLoaded(); if (map && Object.prototype.hasOwnProperty.call(map, videoId)) { delete map[videoId]; rt.map = map; scheduleContinueWatchingFlush(); } } function setContinueWatchingForVideo(videoId, seconds, durationSec) { if (!videoId) return; const rt = __ytToolsRuntime.continueWatching; const map = ensureContinueWatchingMapLoaded(); const t = Math.max(0, Math.floor(Number(seconds) || 0)); const d = Math.max(0, Math.floor(Number(durationSec) || 0)); const prev = map[videoId] && typeof map[videoId] === 'object' ? map[videoId] : {}; const meta = getCurrentVideoMeta(); map[videoId] = { t, d, updatedAt: Date.now(), title: meta.title || prev.title || '', author: meta.author || prev.author || '', thumb: meta.thumb || prev.thumb || '', }; rt.map = map; scheduleContinueWatchingFlush(); } function getContinueWatchingTime(videoId) { if (!videoId) return null; const map = ensureContinueWatchingMapLoaded(); const entry = map?.[videoId]; const t = Number(entry?.t); return Number.isFinite(t) ? t : null; } function updateContinueWatchingButton() { const rt = __ytToolsRuntime.continueWatching; const enabled = !!rt.enabled; if (!enabled || !isWatchPage()) return; const videoId = getCurrentVideoId(); if (!videoId) return; const v = getMainVideoEl(); const t = getContinueWatchingTime(videoId); const dur = Number(v?.duration); const hasDur = Number.isFinite(dur) && dur > 0; if (!t || t < 5) return; if (hasDur && t >= (dur - 5)) { clearContinueWatchingForVideo(videoId); return; } } function updateContinueWatchingHistoryUi() { const rt = __ytToolsRuntime.continueWatching; const btn = $id('yt-cw-history-toggle'); const panel = $id('yt-continue-watching-panel'); if (!btn || !panel) return; const enabled = !!rt.enabled; if (!enabled || !isWatchPage()) { btn.style.display = 'none'; panel.style.display = 'none'; return; } btn.style.display = 'inline-flex'; panel.style.display = rt.panelOpen ? 'block' : 'none'; } function cssEscapeLite(s) { const str = String(s || ''); if (typeof CSS !== 'undefined' && CSS.escape) return CSS.escape(str); // minimal escape for attribute selector return str.replace(/["\\]/g, '\\$&'); } function updateContinueWatchingPanelRow(videoId) { try { const rt = __ytToolsRuntime.continueWatching; if (!rt.enabled || !rt.panelOpen || !isWatchPage()) return false; const panel = $id('yt-continue-watching-panel'); if (!panel) return false; const key = cssEscapeLite(videoId); const row = panel.querySelector(`.yt-cw-item[data-video-id="${key}"]`); if (!row) return false; const entry = ensureContinueWatchingMapLoaded()?.[videoId]; const t = Number(entry?.t); if (!Number.isFinite(t)) return false; const meta = row.querySelector('.yt-cw-meta'); if (!meta) return false; const author = String(entry?.author || '').trim(); meta.textContent = `${formatTimeShort(t)}${author ? ` • ${author}` : ''}`; return true; } catch (e) { return false; } } function navigateToWatchSpa(videoId, seconds) { const t = Number(seconds); const url = `/watch?v=${encodeURIComponent(videoId)}${Number.isFinite(t) ? `&t=${Math.max(0, Math.floor(t))}s` : ''}`; try { const a = document.createElement('a'); a.href = url; a.target = '_self'; a.rel = 'noopener'; a.style.display = 'none'; document.body.appendChild(a); a.click(); a.remove(); return; } catch (e) { } location.href = url; } function renderContinueWatchingPanel() { const panel = $id('yt-continue-watching-panel'); if (!panel) return; const rt = __ytToolsRuntime.continueWatching; if (!rt.enabled || !rt.panelOpen || !isWatchPage()) { panel.style.display = 'none'; return; } const map = pruneContinueWatchingMap(ensureContinueWatchingMapLoaded(), 200); rt.map = map; const currentVid = getCurrentVideoId(); const entries = Object.entries(map) .map(([videoId, v]) => ({ videoId, ...v })) .filter((e) => e.videoId && Number.isFinite(Number(e.t)) && Number(e.t) >= 5) .sort((a, b) => (Number(b.updatedAt) || 0) - (Number(a.updatedAt) || 0)) .slice(0, 25); panel.replaceChildren(); const header = document.createElement('div'); header.className = 'yt-cw-header'; const hTitle = document.createElement('div'); hTitle.className = 'yt-cw-header-title'; hTitle.textContent = 'Continue watching'; const clearAll = document.createElement('button'); clearAll.type = 'button'; clearAll.className = 'yt-cw-clear'; clearAll.textContent = 'Clear'; clearAll.dataset.cwAction = 'clearAll'; header.appendChild(hTitle); header.appendChild(clearAll); panel.appendChild(header); if (!entries.length) { const empty = document.createElement('div'); empty.className = 'yt-cw-empty'; empty.textContent = 'No history yet. Watch a bit, then reopen any video.'; panel.appendChild(empty); return; } for (const e of entries) { const item = document.createElement('div'); item.className = 'yt-cw-item'; item.dataset.videoId = e.videoId; const thumbWrap = document.createElement('div'); thumbWrap.className = 'yt-cw-thumb-wrap'; const img = document.createElement('img'); img.className = 'yt-cw-thumb'; img.loading = 'lazy'; img.decoding = 'async'; img.alt = ''; const thumbSrc = (e.thumb || '').trim() || `https://i.ytimg.com/vi/${encodeURIComponent(e.videoId)}/hqdefault.jpg`; img.src = thumbSrc; thumbWrap.appendChild(img); const info = document.createElement('div'); info.className = 'yt-cw-info'; const title = document.createElement('div'); title.className = 'yt-cw-title'; const safeTitle = (e.title || '').trim(); title.textContent = safeTitle ? safeTitle : e.videoId; const meta = document.createElement('div'); meta.className = 'yt-cw-meta'; const author = (e.author || '').trim(); meta.textContent = `${formatTimeShort(e.t)}${author ? ` • ${author}` : ''}`; info.appendChild(title); info.appendChild(meta); const actions = document.createElement('div'); actions.className = 'yt-cw-actions'; const tSec = Math.max(0, Math.floor(Number(e.t) || 0)); let go = null; if (currentVid && currentVid === e.videoId) { const seek = document.createElement('button'); seek.type = 'button'; seek.className = 'yt-cw-go'; seek.textContent = 'Resume'; seek.dataset.cwAction = 'seek'; seek.dataset.t = String(tSec); go = seek; } else { const a = document.createElement('a'); a.className = 'yt-simple-endpoint yt-cw-go'; a.textContent = 'Resume'; a.href = `/watch?v=${encodeURIComponent(e.videoId)}&t=${tSec}s`; a.target = '_self'; a.rel = 'noopener'; go = a; } const del = document.createElement('button'); del.type = 'button'; del.className = 'yt-cw-del'; del.textContent = '✕'; del.title = 'Delete'; del.dataset.cwAction = 'del'; del.dataset.videoId = e.videoId; actions.appendChild(go); actions.appendChild(del); item.appendChild(thumbWrap); item.appendChild(info); item.appendChild(actions); panel.appendChild(item); } } function setupContinueWatchingFeature(enabled) { const rt = __ytToolsRuntime.continueWatching; rt.enabled = !!enabled; // Keep UI in sync across YouTube SPA navigations if (!rt.navHandlerInitialized) { rt.navHandlerInitialized = true; const onNav = () => { try { const vid = getCurrentVideoId(); if (rt.lastKnownVideoId !== vid) { rt.lastKnownVideoId = vid; // reset throttles so new video can save properly rt.lastSaveAt = 0; rt.lastSavedTime = -1; rt.boundVideoId = vid; updateContinueWatchingButton(); updateContinueWatchingHistoryUi(); if (rt.panelOpen) renderContinueWatchingPanel(); } else { updateContinueWatchingButton(); updateContinueWatchingHistoryUi(); if (rt.panelOpen) renderContinueWatchingPanel(); } } catch (e) { } }; window.addEventListener('yt-navigate-finish', onNav, true); window.addEventListener('popstate', onNav, true); window.addEventListener('hashchange', onNav, true); } // Ensure click handler only once if (!rt.clickHandlerInitialized) { rt.clickHandlerInitialized = true; document.addEventListener('click', (e) => { const target = e.target; if (!(target instanceof Element)) return; const historyBtn = target.closest('#yt-cw-history-toggle'); const cwActionBtn = target.closest('[data-cw-action]'); if (historyBtn) { e.preventDefault(); e.stopPropagation(); rt.panelOpen = !rt.panelOpen; updateContinueWatchingHistoryUi(); if (rt.panelOpen) renderContinueWatchingPanel(); // render only when opened return; } if (cwActionBtn) { const action = cwActionBtn.getAttribute('data-cw-action'); if (!action) return; e.preventDefault(); e.stopPropagation(); if (action === 'clearAll') { rt.map = {}; writeJsonGM(STORAGE_KEYS_MDCM.CONTINUE_WATCHING, {}); renderContinueWatchingPanel(); updateContinueWatchingButton(); try { Notify('success', 'History cleared'); } catch (e2) { } return; } if (action === 'del') { const vid = cwActionBtn.getAttribute('data-video-id') || ''; if (vid) clearContinueWatchingForVideo(vid); renderContinueWatchingPanel(); updateContinueWatchingButton(); return; } if (action === 'seek') { const t = Number(cwActionBtn.getAttribute('data-t')); const v = getMainVideoEl(); if (!v || !Number.isFinite(t)) return; v.currentTime = Math.max(0, t); v.play?.().catch(() => { }); try { Notify('success', `Resume: ${formatTimeShort(t)}`); } catch (e2) { } updateContinueWatchingButton(); return; } } }, true); } // Save on tab close / navigation (once) if (!rt.pagehideHandlerInitialized) { rt.pagehideHandlerInitialized = true; window.addEventListener('pagehide', () => { try { if (!rt.enabled) return; if (!isWatchPage()) return; const vid = getCurrentVideoId(); const v = getMainVideoEl(); if (!vid || !v) return; const t = Number(v.currentTime); const d = Number(v.duration); if (Number.isFinite(t) && t >= 5) setContinueWatchingForVideo(vid, t, d); // best-effort immediate flush if (rt.flushT) { clearTimeout(rt.flushT); rt.flushT = null; } if (rt.map) writeJsonGM(STORAGE_KEYS_MDCM.CONTINUE_WATCHING, pruneContinueWatchingMap(rt.map, 200)); } catch (e) { } }, { capture: true }); } const historyBtn = $id('yt-cw-history-toggle'); const panel = $id('yt-continue-watching-panel'); if (historyBtn && !rt.enabled) historyBtn.style.display = 'none'; if (panel && !rt.enabled) panel.style.display = 'none'; // Not on watch page: detach video listeners and hide if (!rt.enabled || !isWatchPage()) { try { if (rt.boundVideo && rt.handlers) { rt.boundVideo.removeEventListener('timeupdate', rt.handlers.timeupdate); rt.boundVideo.removeEventListener('pause', rt.handlers.pause); rt.boundVideo.removeEventListener('ended', rt.handlers.ended); rt.boundVideo.removeEventListener('loadedmetadata', rt.handlers.loadedmetadata); rt.boundVideo.removeEventListener('seeked', rt.handlers.seeked); } } catch (e) { } rt.boundVideo = null; rt.boundVideoId = null; rt.handlers = null; updateContinueWatchingButton(); updateContinueWatchingHistoryUi(); return; } const v = getMainVideoEl(); const videoId = getCurrentVideoId(); if (!v || !videoId) { updateContinueWatchingButton(); updateContinueWatchingHistoryUi(); return; } // VideoId can change while YouTube reuses the same <video> element if (rt.boundVideoId !== videoId) { rt.boundVideoId = videoId; rt.lastSaveAt = 0; rt.lastSavedTime = -1; } // If video element changed, rebind listeners (avoid leaks) if (rt.boundVideo && rt.boundVideo !== v && rt.handlers) { try { rt.boundVideo.removeEventListener('timeupdate', rt.handlers.timeupdate); rt.boundVideo.removeEventListener('pause', rt.handlers.pause); rt.boundVideo.removeEventListener('ended', rt.handlers.ended); rt.boundVideo.removeEventListener('loadedmetadata', rt.handlers.loadedmetadata); rt.boundVideo.removeEventListener('seeked', rt.handlers.seeked); } catch (e) { } rt.boundVideo = null; rt.boundVideoId = null; rt.handlers = null; } rt.boundVideo = v; rt.boundVideoId = videoId; if (!rt.handlers) { rt.handlers = { timeupdate: () => { try { if (!rt.enabled) return; const vid = getCurrentVideoId(); if (!vid) return; const now = Date.now(); if (now - rt.lastSaveAt < 5000) return; // throttle if (v.paused) return; const t = Number(v.currentTime); const d = Number(v.duration); if (!Number.isFinite(t)) return; if (Math.abs(t - rt.lastSavedTime) < 2) return; rt.lastSaveAt = now; rt.lastSavedTime = t; if (t < 5) return; setContinueWatchingForVideo(vid, t, d); updateContinueWatchingButton(); // Avoid re-rendering the whole panel every few seconds. // If panel is open and row exists, just update its text. if (rt.panelOpen) { if (!updateContinueWatchingPanelRow(vid)) renderContinueWatchingPanel(); } } catch (e) { } }, pause: () => { try { if (!rt.enabled) return; const vid = getCurrentVideoId(); if (!vid) return; const t = Number(v.currentTime); const d = Number(v.duration); if (!Number.isFinite(t)) return; if (t < 5) { clearContinueWatchingForVideo(vid); } else { setContinueWatchingForVideo(vid, t, d); } updateContinueWatchingButton(); if (rt.panelOpen) { if (!updateContinueWatchingPanelRow(vid)) renderContinueWatchingPanel(); } } catch (e) { } }, ended: () => { try { const vid = getCurrentVideoId(); if (vid) clearContinueWatchingForVideo(vid); updateContinueWatchingButton(); if (rt.panelOpen) renderContinueWatchingPanel(); } catch (e) { } }, loadedmetadata: () => { updateContinueWatchingButton(); if (rt.panelOpen) renderContinueWatchingPanel(); }, seeked: () => { updateContinueWatchingButton(); const vid = getCurrentVideoId(); if (rt.panelOpen && vid) updateContinueWatchingPanelRow(vid); }, }; v.addEventListener('timeupdate', rt.handlers.timeupdate, { passive: true }); v.addEventListener('pause', rt.handlers.pause, { passive: true }); v.addEventListener('ended', rt.handlers.ended, { passive: true }); v.addEventListener('loadedmetadata', rt.handlers.loadedmetadata, { passive: true }); v.addEventListener('seeked', rt.handlers.seeked, { passive: true }); } updateContinueWatchingButton(); updateContinueWatchingHistoryUi(); } // ------------------------------ // Feature: Show channel name on Shorts list (Home / feeds) // Adapted from: @𝖢𝖸 𝖥𝗎𝗇𝗀 // ------------------------------ function setupShortsChannelNameFeature(enabled) { __ytToolsRuntime.shortsChannelName.enabled = !!enabled; document.documentElement.dataset.mdcmShortsChannelName = enabled ? '1' : '0'; // Disable: stop observers to reduce overhead if (!enabled) { try { __ytToolsRuntime.shortsChannelName.observer?.disconnect?.(); } catch (e) { } try { __ytToolsRuntime.shortsChannelName.io?.disconnect?.(); } catch (e) { } __ytToolsRuntime.shortsChannelName.observer = null; __ytToolsRuntime.shortsChannelName.io = null; clearTimeout(__ytToolsRuntime.shortsChannelName.scanT); __ytToolsRuntime.shortsChannelName.scanT = null; return; } const rt = __ytToolsRuntime.shortsChannelName; const getShortsVideoIdFromItem = (item) => { const a = item.querySelector('a[href^="/shorts/"]'); const href = a?.getAttribute('href') || ''; const m = href.match(/\/shorts\/([^/?]+)/); return m?.[1] || null; }; const findSubhead = (item) => { return item.querySelector( '.ShortsLockupViewModelHostOutsideMetadataSubhead,' + ' .shortsLockupViewModelHostOutsideMetadataSubhead,' + ' .ShortsLockupViewModelHostMetadataSubhead,' + ' .shortsLockupViewModelHostMetadataSubhead' ); }; const ensureLabel = (subhead) => { const parent = subhead?.parentElement; if (!parent) return null; let el = parent.querySelector('.yt-tools-shorts-channel-name'); if (!el) { el = document.createElement('div'); el.className = 'yt-tools-shorts-channel-name'; el.textContent = ''; parent.insertBefore(el, subhead); } return el; }; const tryExtractChannelNameFromDom = (item) => { const a = item.querySelector('a[href^="/@"], a[href^="/channel/"]'); const name = (a?.textContent || a?.getAttribute('title') || '').trim(); return name || null; }; const fetchChannelNameFromWatch = (videoId) => { rt.fetchChain = rt.fetchChain.then(async () => { if (rt.cache.has(videoId)) return rt.cache.get(videoId); let res = null; try { res = await fetch(`/watch?v=${videoId}`, { method: 'GET', credentials: 'same-origin', cache: 'force-cache', }); } catch (e) { return ''; } if (!res?.ok) return ''; const html = await res.text(); const idx = html.indexOf('itemprop="author"'); if (idx < 0) return ''; const start = html.lastIndexOf('<span', idx); const end = html.indexOf('</span>', idx); if (start < 0 || end < 0) return ''; const chunk = html.slice(start, end + 7); const doc = new DOMParser().parseFromString(chunk, 'text/html'); const link = doc.querySelector('link[itemprop="name"]'); return (link?.getAttribute('content') || '').trim(); }); return rt.fetchChain; }; const getChannelName = (videoId, item) => { const cached = rt.cache.get(videoId); if (cached) return Promise.resolve(cached); const persisted = getShortsChannelFromPersistedCache(videoId); if (persisted) { rt.cache.set(videoId, persisted); return Promise.resolve(persisted); } const domName = tryExtractChannelNameFromDom(item); if (domName) { rt.cache.set(videoId, domName); setShortsChannelToPersistedCache(videoId, domName); return Promise.resolve(domName); } const inflight = rt.inflight.get(videoId); if (inflight) return inflight; const p = fetchChannelNameFromWatch(videoId) .then((name) => { const finalName = (name || '').trim(); if (finalName) { rt.cache.set(videoId, finalName); setShortsChannelToPersistedCache(videoId, finalName); } return finalName; }) .finally(() => { rt.inflight.delete(videoId); }); rt.inflight.set(videoId, p); return p; }; const processItem = (item) => { if (!(item instanceof Element)) return; if (item.dataset.ytToolsShortsChannelProcessed === '1') return; const subhead = findSubhead(item); if (!subhead) return; const videoId = getShortsVideoIdFromItem(item); if (!videoId) return; item.dataset.ytToolsShortsChannelProcessed = '1'; item.dataset.ytToolsShortsVideoId = videoId; const label = ensureLabel(subhead); if (!label) return; label.textContent = ''; rt.io?.observe(item); }; if (!rt.io) { rt.io = new IntersectionObserver((entries) => { for (const entry of entries) { if (!entry.isIntersecting) continue; const item = entry.target; const videoId = item?.dataset?.ytToolsShortsVideoId; const subhead = findSubhead(item); const label = subhead?.parentElement?.querySelector?.('.yt-tools-shorts-channel-name'); if (!videoId || !label) { rt.io.unobserve(item); continue; } getChannelName(videoId, item) .then((name) => { if (name) label.textContent = name; }) .finally(() => { rt.io.unobserve(item); }); } }, { threshold: 0.15 }); } const scan = () => { clearTimeout(rt.scanT); rt.scanT = setTimeout(() => { document .querySelectorAll('ytm-shorts-lockup-view-model, ytm-shorts-lockup-view-model-v2') .forEach(processItem); }, 120); }; if (!rt.observer) { rt.observer = new MutationObserver(scan); const observeTarget = document.querySelector('#page-manager') || document.body; rt.observer.observe(observeTarget, { childList: true, subtree: true }); } scan(); } // ------------------------------ // Feature: Show cached rating/likes/dislikes on video cards (watch related + home/search) // ------------------------------ function getVideoIdFromLockup(lockup) { const a = lockup.querySelector('a[href*="watch?v="]'); if (a) { const m = (a.getAttribute('href') || '').match(/[?&]v=([^&]+)/); if (m) return m[1]; } const el = lockup.querySelector('[class*="content-id-"]'); if (el) { const m = el.className.match(/content-id-([A-Za-z0-9_-]+)/); if (m) return m[1]; } return null; } function createSvgIconFromString(svgString, sizePx) { const div = document.createElement('div'); div.innerHTML = safeHTML(svgString.trim()); const svg = div.firstElementChild; if (!svg) return null; svg.setAttribute('width', String(sizePx || 14)); svg.setAttribute('height', String(sizePx || 14)); svg.style.display = 'inline-block'; svg.style.verticalAlign = 'middle'; svg.style.marginRight = '2px'; return svg; } const LOCKUP_RATING_SVG = '<svg xmlns="http://www.w3.org/2000/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-star"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873l-6.158 -3.245" /></svg>'; const LOCKUP_LIKE_SVG = '<svg xmlns="http://www.w3.org/2000/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-thumb-up"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M7 11v8a1 1 0 0 1 -1 1h-2a1 1 0 0 1 -1 -1v-7a1 1 0 0 1 1 -1h3a4 4 0 0 0 4 -4v-1a2 2 0 0 1 4 0v5h3a2 2 0 0 1 2 2l-1 5a2 3 0 0 1 -2 2h-7a3 3 0 0 1 -3 -3" /></svg>'; const LOCKUP_DISLIKE_SVG = '<svg xmlns="http://www.w3.org/2000/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-thumb-down"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M7 13v-8a1 1 0 0 0 -1 -1h-2a1 1 0 0 0 -1 1v7a1 1 0 0 0 1 1h3a4 4 0 0 1 4 4v1a2 2 0 0 0 4 0v-5h3a2 2 0 0 0 2 -2l-1 -5a2 3 0 0 0 -2 -2h-7a3 3 0 0 0 -3 3" /></svg>'; function injectLockupCachedStats() { if (!window.location.href.includes('youtube.com')) return; document.querySelectorAll('yt-lockup-view-model').forEach((lockup) => { if (lockup.hasAttribute('data-yt-tools-lockup-stats')) return; const videoId = getVideoIdFromLockup(lockup); if (!videoId) return; const cached = getLikesDislikesFromPersistedCache(videoId); if (!cached) return; const hasRating = cached.rating != null; const hasLikes = cached.likes != null; const hasDislikes = cached.dislikes != null; if (!hasRating && !hasLikes && !hasDislikes) return; const meta = lockup.querySelector('yt-content-metadata-view-model'); if (!meta) return; const row = document.createElement('div'); row.className = 'yt-content-metadata-view-model__metadata-row'; row.setAttribute('data-yt-tools-lockup-stats-row', '1'); const wrap = document.createElement('span'); wrap.className = 'yt-core-attributed-string yt-content-metadata-view-model__metadata-text yt-core-attributed-string--white-space-pre-wrap yt-core-attributed-string--link-inherit-color'; wrap.setAttribute('dir', 'auto'); wrap.setAttribute('role', 'text'); const sep = () => { const s = document.createTextNode(' · '); return s; }; if (hasRating) { const ratingIcon = createSvgIconFromString(LOCKUP_RATING_SVG, 14); if (ratingIcon) wrap.appendChild(ratingIcon); wrap.appendChild(document.createTextNode(' ' + cached.rating.toFixed(1))); if (hasLikes || hasDislikes) wrap.appendChild(sep()); } if (hasLikes) { const likeIcon = createSvgIconFromString(LOCKUP_LIKE_SVG, 14); if (likeIcon) wrap.appendChild(likeIcon); wrap.appendChild(document.createTextNode(' ' + FormatterNumber(cached.likes, 0))); if (hasDislikes) wrap.appendChild(sep()); } if (hasDislikes) { const dislikeIcon = createSvgIconFromString(LOCKUP_DISLIKE_SVG, 14); if (dislikeIcon) wrap.appendChild(dislikeIcon); wrap.appendChild(document.createTextNode(' ' + FormatterNumber(cached.dislikes, 0))); } row.appendChild(wrap); meta.appendChild(row); lockup.setAttribute('data-yt-tools-lockup-stats', videoId); }); } function getVideoIdFromShortsLockup(item) { if (item.dataset.ytToolsShortsVideoId) return item.dataset.ytToolsShortsVideoId; var a = item.querySelector('a[href^="/shorts/"]'); if (!a) return null; var m = (a.getAttribute('href') || '').match(/\/shorts\/([^/?]+)/); return m ? m[1] : null; } function injectShortsLockupCachedStats() { if (!window.location.href.includes('youtube.com')) return; // Process inner lockup (has metadata); v2 wraps it and would duplicate document.querySelectorAll('ytm-shorts-lockup-view-model').forEach(function (item) { if (item.hasAttribute('data-yt-tools-shorts-stats')) return; var videoId = getVideoIdFromShortsLockup(item); if (!videoId) return; var cached = getLikesDislikesFromPersistedCache(videoId); if (!cached) return; var hasLikes = cached.likes != null; var hasDislikes = cached.dislikes != null; if (!hasLikes && !hasDislikes) return; var subhead = item.querySelector( '.ShortsLockupViewModelHostOutsideMetadataSubhead,' + '.shortsLockupViewModelHostOutsideMetadataSubhead,' + '.ShortsLockupViewModelHostMetadataSubhead,' + '.shortsLockupViewModelHostMetadataSubhead' ); if (!subhead || !subhead.parentElement) return; var wrap = document.createElement('span'); wrap.className = 'yt-core-attributed-string yt-content-metadata-view-model__metadata-text yt-core-attributed-string--white-space-pre-wrap yt-core-attributed-string--link-inherit-color yt-tools-shorts-stats-row'; wrap.setAttribute('dir', 'auto'); wrap.setAttribute('role', 'text'); wrap.setAttribute('style', 'color: #aaa !important;'); var sep = function () { return document.createTextNode(' \u00b7 '); }; if (hasLikes) { var likeIcon = createSvgIconFromString(LOCKUP_LIKE_SVG, 12); if (likeIcon) { likeIcon.style.setProperty('color', '#aaa', 'important'); wrap.appendChild(likeIcon); } wrap.appendChild(document.createTextNode(' ' + FormatterNumber(cached.likes, 0))); if (hasDislikes) wrap.appendChild(sep()); } if (hasDislikes) { var dislikeIcon = createSvgIconFromString(LOCKUP_DISLIKE_SVG, 12); if (dislikeIcon) { dislikeIcon.style.setProperty('color', '#aaa', 'important'); wrap.appendChild(dislikeIcon); } wrap.appendChild(document.createTextNode(' ' + FormatterNumber(cached.dislikes, 0))); } var row = document.createElement('div'); row.className = 'yt-tools-shorts-stats-wrap'; row.setAttribute('style', 'color: #aaa !important;'); row.appendChild(wrap); subhead.parentElement.appendChild(row); item.setAttribute('data-yt-tools-shorts-stats', videoId); }); } function createLockupStatsObserver(target) { var lockupStatsDebounceT = null; var lockupStatsScheduled = false; var obs = new MutationObserver(function () { if (lockupStatsScheduled) return; lockupStatsScheduled = true; clearTimeout(lockupStatsDebounceT); lockupStatsDebounceT = setTimeout(function () { lockupStatsScheduled = false; if (!window.location.href.includes('youtube.com')) return; injectLockupCachedStats(); injectShortsLockupCachedStats(); // Single extra pass for late-rendered lockups (reduced from 3 passes) setTimeout(function () { if (!window.location.href.includes('youtube.com')) return; if (!hasUnprocessedLockups()) return; injectLockupCachedStats(); injectShortsLockupCachedStats(); }, 1200); }, 280); }); obs.observe(target, { childList: true, subtree: true }); return obs; } function retargetLockupStatsObserverIfNeeded() { if (!window.location.href.includes('youtube.com/watch')) return; var secondary = document.getElementById('secondary') || document.querySelector('ytd-watch-next-secondary-results-renderer'); if (!secondary || !secondary.parentNode) return; if (__ytToolsRuntime.lockupCachedStatsObserveTarget === secondary) return; var obs = __ytToolsRuntime.lockupCachedStatsObserver; if (!obs) return; obs.disconnect(); __ytToolsRuntime.lockupCachedStatsObserver = createLockupStatsObserver(secondary); __ytToolsRuntime.lockupCachedStatsObserveTarget = secondary; } function hasUnprocessedLockups() { var normal = document.querySelectorAll('yt-lockup-view-model:not([data-yt-tools-lockup-stats])').length > 0; var shorts = document.querySelectorAll('ytm-shorts-lockup-view-model:not([data-yt-tools-shorts-stats])').length > 0; return normal || shorts; } function runLockupCachedStatsCatchUp() { if (!window.location.href.includes('youtube.com')) return; if (document.visibilityState !== 'visible') return; if (!hasUnprocessedLockups()) return; injectLockupCachedStats(); injectShortsLockupCachedStats(); } function setupLockupCachedStats() { if (!window.location.href.includes('youtube.com')) return; injectLockupCachedStats(); injectShortsLockupCachedStats(); var secondary = document.getElementById('secondary') || document.querySelector('ytd-watch-next-secondary-results-renderer'); var observeTarget = secondary && secondary.parentNode ? secondary : document.body; if (__ytToolsRuntime.lockupCachedStatsObserver) { if (observeTarget !== __ytToolsRuntime.lockupCachedStatsObserveTarget) { __ytToolsRuntime.lockupCachedStatsObserver.disconnect(); __ytToolsRuntime.lockupCachedStatsObserver = createLockupStatsObserver(observeTarget); __ytToolsRuntime.lockupCachedStatsObserveTarget = observeTarget; } return; } __ytToolsRuntime.lockupCachedStatsObserver = createLockupStatsObserver(observeTarget); __ytToolsRuntime.lockupCachedStatsObserveTarget = observeTarget; // Catch-up interval: apply stats to any new cards (scroll, filters, SPA) every 1.8s when there are unprocessed lockups if (!__ytToolsRuntime.lockupCachedStatsIntervalId) { __ytToolsRuntime.lockupCachedStatsIntervalId = setInterval(runLockupCachedStatsCatchUp, 1800); } } // ------------------------------ // Feature: Bookmarks per video (persisted) // ------------------------------ function getBookmarksForVideo(videoId) { const all = readJsonGM(STORAGE_KEYS_MDCM.BOOKMARKS, {}); const list = Array.isArray(all[videoId]) ? all[videoId] : []; return { all, list }; } function saveBookmark(videoId, seconds, label) { const { all, list } = getBookmarksForVideo(videoId); const t = Math.max(0, Math.floor(Number(seconds) || 0)); const exists = list.some(b => b && b.t === t); const item = { t, label: (label || formatTimeShort(t)).trim(), createdAt: Date.now() }; const nextList = exists ? list.map(b => (b.t === t ? item : b)) : [...list, item]; nextList.sort((a, b) => a.t - b.t); all[videoId] = nextList; writeJsonGM(STORAGE_KEYS_MDCM.BOOKMARKS, all); } function deleteBookmark(videoId, seconds) { const { all, list } = getBookmarksForVideo(videoId); const t = Math.max(0, Math.floor(Number(seconds) || 0)); all[videoId] = list.filter(b => b && b.t !== t); writeJsonGM(STORAGE_KEYS_MDCM.BOOKMARKS, all); } function renderBookmarksPanel(videoId) { const panel = $id('yt-bookmarks-panel'); if (!panel) return; const { list } = getBookmarksForVideo(videoId); if (!list.length) { panel.innerHTML = safeHTML(`<div class="yt-bm-empty">No bookmarks yet. Click ★ to save one.</div>`); return; } panel.innerHTML = safeHTML(list .map((b) => { const time = formatTimeShort(b.t); const safeLabel = (b.label || time).replace(/</g, '<').replace(/>/g, '>'); return ` <div class="yt-bm-item"> <button type="button" class="yt-bm-go" data-action="go" data-t="${b.t}" title="Go to ${time}">${time}</button> <div class="yt-bm-label" title="${safeLabel}">${safeLabel}</div> <button type="button" class="yt-bm-del" data-action="del" data-t="${b.t}" title="Delete">✕</button> </div> `; }) .join('')); } function applyBookmarksIfEnabled(settings) { const addBtn = $id('yt-bookmark-add'); const toggleBtn = $id('yt-bookmark-toggle'); const panel = $id('yt-bookmarks-panel'); if (!addBtn || !toggleBtn || !panel) return; const enabled = !!settings?.bookmarks; addBtn.style.display = enabled ? 'inline-flex' : 'none'; toggleBtn.style.display = enabled ? 'inline-flex' : 'none'; panel.style.display = enabled && __ytToolsRuntime.bookmarksPanelOpen ? 'block' : 'none'; if (!enabled) return; const videoId = getCurrentVideoId(); if (!videoId) return; renderBookmarksPanel(videoId); if (__ytToolsRuntime.bookmarkClickHandlerInitialized) return; __ytToolsRuntime.bookmarkClickHandlerInitialized = true; document.addEventListener('click', (e) => { const target = e.target; if (!(target instanceof Element)) return; const add = target.closest('#yt-bookmark-add'); const tog = target.closest('#yt-bookmark-toggle'); const actionBtn = target.closest('[data-action][data-t]'); if (add) { e.preventDefault(); e.stopPropagation(); const v = $e('video'); const vid = getCurrentVideoId(); if (!v || !vid) return; const t = Math.floor(v.currentTime || 0); const defaultLabel = formatTimeShort(t); const label = prompt('Bookmark name (optional):', defaultLabel) || defaultLabel; saveBookmark(vid, t, label); __ytToolsRuntime.bookmarksPanelOpen = true; panel.style.display = 'block'; renderBookmarksPanel(vid); Notify('success', `Bookmark saved at ${defaultLabel}`); return; } if (tog) { e.preventDefault(); e.stopPropagation(); __ytToolsRuntime.bookmarksPanelOpen = !__ytToolsRuntime.bookmarksPanelOpen; panel.style.display = __ytToolsRuntime.bookmarksPanelOpen ? 'block' : 'none'; const vid = getCurrentVideoId(); if (vid && __ytToolsRuntime.bookmarksPanelOpen) renderBookmarksPanel(vid); return; } if (actionBtn) { e.preventDefault(); e.stopPropagation(); const action = actionBtn.getAttribute('data-action'); const t = Number(actionBtn.getAttribute('data-t')); const v = $e('video'); const vid = getCurrentVideoId(); if (!v || !vid) return; if (action === 'go') { v.currentTime = Math.max(0, t || 0); v.play?.().catch(() => { }); } else if (action === 'del') { deleteBookmark(vid, t); renderBookmarksPanel(vid); } } }); } // ------------------------------ // Feature: Like vs Dislike bar // ------------------------------ function parseCountText(text) { if (!text) return null; const s0 = String(text).trim().toLowerCase(); if (!s0) return null; let mult = 1; let s = s0.replace(/\s+/g, ''); if (s.includes('mil')) { mult = 1000; s = s.replace('mil', ''); } else if (s.includes('k')) { mult = 1000; s = s.replace('k', ''); } else if (s.includes('m')) { mult = 1000000; s = s.replace('m', ''); } // normalize decimal separators s = s.replace(/[^\d.,]/g, ''); if (!s) return null; // If both separators exist, assume last is decimal const lastDot = s.lastIndexOf('.'); const lastComma = s.lastIndexOf(','); let nStr = s; if (lastDot !== -1 && lastComma !== -1) { const dec = Math.max(lastDot, lastComma); const intPart = s.slice(0, dec).replace(/[.,]/g, ''); const decPart = s.slice(dec + 1); nStr = `${intPart}.${decPart}`; } else { // Use dot as decimal nStr = s.replace(',', '.'); } const num = Number.parseFloat(nStr); if (!Number.isFinite(num)) return null; return Math.round(num * mult); } async function ensureDislikesForCurrentVideo() { const videoId = getCurrentVideoId(); if (!videoId) return null; const now = Date.now(); if (__ytToolsRuntime.dislikesCache.videoId === videoId && __ytToolsRuntime.dislikesCache.dislikes != null && (now - __ytToolsRuntime.dislikesCache.ts) < 10 * 60 * 1000) { return __ytToolsRuntime.dislikesCache; } const persisted = getLikesDislikesFromPersistedCache(videoId); if (persisted && persisted.dislikes != null) { __ytToolsRuntime.dislikesCache = { videoId, likes: persisted.likes, dislikes: persisted.dislikes, viewCount: persisted.viewCount, rating: persisted.rating, ts: now }; return __ytToolsRuntime.dislikesCache; } try { const res = await fetch(`${apiDislikes}${videoId}`); const data = await res.json(); const dislikes = Number(data?.dislikes); const likes = Number(data?.likes); const viewCount = Number(data?.viewCount); const rating = Number(data?.rating); const now = Date.now(); if (Number.isFinite(dislikes)) { __ytToolsRuntime.dislikesCache = { videoId, likes: Number.isFinite(likes) ? likes : getLikesFromDom(), dislikes, viewCount, rating, ts: now }; setLikesDislikesToPersistedCache( videoId, __ytToolsRuntime.dislikesCache.likes, dislikes, Number.isFinite(viewCount) ? viewCount : undefined, (Number.isFinite(rating) && rating >= 0 && rating <= 5) ? rating : undefined ); return __ytToolsRuntime.dislikesCache; } } catch (e) { console.error('[YT Tools] Error fetching dislikes:', e); } return null; } function getLikesFromDom() { // Try grab visible like count (YouTube UI varies a lot) const likeBtn = $e('#top-level-buttons-computed like-button-view-model button-view-model button') || $e('#top-level-buttons-computed like-button-view-model button') || $e('#top-level-buttons-computed ytd-toggle-button-renderer:nth-child(1)') || $e('segmented-like-dislike-button-view-model like-button-view-model'); if (!likeBtn) return null; // Prefer visible counter first; aria-label can include locale thousands separators (17.606) that are ambiguous. const candidates = [ likeBtn.querySelector?.('.yt-spec-button-shape-next__button-text-content')?.textContent, likeBtn.textContent, likeBtn.getAttribute?.('aria-label'), ].filter(Boolean); for (const txt of candidates) { const n = parseCountText(txt); if (n != null) return n; } return null; } function updateLikeDislikeBar(likes, dislikes) { // Prefer placing it above the "copy description" button (as requested). const copyDesc = $id('button_copy_description'); const host = $e('#top-level-buttons-computed') || $e('ytd-watch-metadata #top-level-buttons-computed'); if (!host && !copyDesc) return; let bar = $id('yt-like-dislike-bar-mdcm'); if (!bar) { bar = document.createElement('div'); bar.id = 'yt-like-dislike-bar-mdcm'; bar.innerHTML = safeHTML(`<div class="like"></div><div class="dislike"></div>`); if (copyDesc) { copyDesc.insertAdjacentElement('beforebegin', bar); } else { host.appendChild(bar); } } else if (copyDesc && bar.previousElementSibling !== copyDesc) { // Keep it near the copy description area if the DOM changed try { copyDesc.insertAdjacentElement('beforebegin', bar); } catch (e) { } } if (!Number.isFinite(likes) || !Number.isFinite(dislikes) || likes + dislikes <= 0) { bar.style.display = 'none'; return; } const total = likes + dislikes; const likePct = Math.max(0, Math.min(100, (likes / total) * 100)); const dislikePct = 100 - likePct; bar.style.display = 'block'; const likeEl = bar.querySelector('.like'); const dislikeEl = bar.querySelector('.dislike'); likeEl.style.width = `${likePct}%`; dislikeEl.style.width = `${dislikePct}%`; bar.title = `Likes: ${likes.toLocaleString()} | Dislikes: ${dislikes.toLocaleString()}`; } async function applyLikeDislikeBarIfEnabled(settings) { if (!settings?.likeDislikeBar) { const existing = $id('yt-like-dislike-bar-mdcm'); if (existing) existing.style.display = 'none'; return; } if (!window.location.href.includes('youtube.com/watch')) return; const videoId = getCurrentVideoId(); if (!videoId) return; const data = await ensureDislikesForCurrentVideo(); if (!data || data.likes == null || data.dislikes == null) return; updateLikeDislikeBar(data.likes, data.dislikes); } // Retry helper (YT often renders likes late; keep it lightweight) function scheduleLikeBarUpdate(settings, attempts = 4) { if (!settings?.likeDislikeBar) return; let i = 0; const tick = async () => { i += 1; await applyLikeDislikeBarIfEnabled(settings); const bar = $id('yt-like-dislike-bar-mdcm'); if (bar && bar.style.display !== 'none') return; if (i < attempts) setTimeout(tick, 800); }; setTimeout(tick, 300); } // Dislikes video async function videoDislike() { if (isYTMusic) return; validoUrl = document.location.href; const validoVentana = $e('#below > ytd-watch-metadata > div'); if (validoVentana != undefined && document.location.href.split('?v=')[0].includes('youtube.com/watch')) { let localVideoId = paramsVideoURL(); if (!localVideoId) return; validoUrl = localVideoId; const data = await ensureDislikesForCurrentVideo(); if (!data || data.dislikes == null) return; const dislikes = data.dislikes; const dislikes_btn = $e('#top-level-buttons-computed > segmented-like-dislike-button-view-model > yt-smartimation > div > div > dislike-button-view-model > toggle-button-view-model > button-view-model > button'); if (dislikes_btn != null) { const settings = JSON.parse(GM_getValue(SETTINGS_KEY, '{}')); // Find or create our custom count element let textContent = dislikes_btn.querySelector('.yt-tools-dislike-count'); if (!textContent) { textContent = document.createElement('div'); textContent.className = 'ytSpecButtonShapeNextButtonTextContent yt-tools-dislike-count'; // Insert it after the icon container const iconDiv = dislikes_btn.querySelector('.ytSpecButtonShapeNextIcon'); if (iconDiv) { iconDiv.insertAdjacentElement('afterend', textContent); // Convert button style to icon+text layout dislikes_btn.classList.add('ytSpecButtonShapeNextIconLeading'); dislikes_btn.classList.remove('ytSpecButtonShapeNextIconButton'); } else { dislikes_btn.appendChild(textContent); } } if (settings.dislikes) { textContent.textContent = FormatterNumber(dislikes, 0); textContent.style.display = 'block'; showDislikes = true; } else { textContent.style.display = 'none'; showDislikes = false; } const likes_btn = $e('#top-level-buttons-computed like-button-view-model button-view-model button') || $e('#top-level-buttons-computed like-button-view-model button') || $e('#top-level-buttons-computed ytd-toggle-button-renderer:nth-child(1)') || $e('segmented-like-dislike-button-view-model like-button-view-model button'); // Capture current state as "initial" for this data load const currentIsPressed = dislikes_btn.getAttribute('aria-pressed') === 'true'; dislikes_btn.dataset.initialState = currentIsPressed; dislikes_btn.dataset.originalCount = dislikes; if (likes_btn) { likes_btn.dataset.initialState = likes_btn.getAttribute('aria-pressed') === 'true'; likes_btn.dataset.originalCount = data.likes || 0; } const updateCount = () => { // Dislikes calculation const isDislikePressed = dislikes_btn.getAttribute('aria-pressed') === 'true'; const wasDislikePressed = dislikes_btn.dataset.initialState === 'true'; const originalDislikes = Number(dislikes_btn.dataset.originalCount); let dislikeOffset = 0; if (!wasDislikePressed && isDislikePressed) dislikeOffset = 1; else if (wasDislikePressed && !isDislikePressed) dislikeOffset = -1; const newDislikes = Math.max(0, originalDislikes + dislikeOffset); // Likes calculation let newLikes = data.likes || 0; if (likes_btn) { const isLikePressed = likes_btn.getAttribute('aria-pressed') === 'true'; const wasLikePressed = likes_btn.dataset.initialState === 'true'; const originalLikes = Number(likes_btn.dataset.originalCount); let likeOffset = 0; if (!wasLikePressed && isLikePressed) likeOffset = 1; else if (wasLikePressed && !isLikePressed) likeOffset = -1; newLikes = Math.max(0, originalLikes + likeOffset); } // Update run-time cache if (__ytToolsRuntime.dislikesCache.videoId === localVideoId) { __ytToolsRuntime.dislikesCache.dislikes = newDislikes; __ytToolsRuntime.dislikesCache.likes = newLikes; // Also persist it so F5 uses the updated count as "original" setLikesDislikesToPersistedCache( localVideoId, newLikes, newDislikes, __ytToolsRuntime.dislikesCache.viewCount, __ytToolsRuntime.dislikesCache.rating ); } if (settings.dislikes && textContent) { textContent.textContent = FormatterNumber(newDislikes, 0); } // Sync the like/dislike bar immediately if (settings.likeDislikeBar) { updateLikeDislikeBar(newLikes, newDislikes); } }; // Initial update updateCount(); // Use MutationObserver for robust state tracking (handles Like button clicks too) if (!dislikes_btn.dataset.observerInitialized) { dislikes_btn.dataset.observerInitialized = 'true'; const observer = new MutationObserver((mutations) => { for (const mutation of mutations) { if (mutation.type === 'attributes' && mutation.attributeName === 'aria-pressed') { updateCount(); } } }); observer.observe(dislikes_btn, { attributes: true, attributeFilter: ['aria-pressed'] }); if (likes_btn) observer.observe(likes_btn, { attributes: true, attributeFilter: ['aria-pressed'] }); // Also handle direct clicks just in case dislikes_btn.addEventListener('click', () => { setTimeout(updateCount, 150); }); if (likes_btn) { likes_btn.addEventListener('click', () => { setTimeout(updateCount, 150); }); } } try { scheduleLikeBarUpdate(settings, 5); } catch (e) { } } } } // dislikes shorts + views button (viewCount from Return YouTube Dislike API) async function shortDislike() { validoUrl = document.location.href; const validoVentanaShort = $m( "#button-bar > reel-action-bar-view-model > dislike-button-view-model > toggle-button-view-model > button-view-model > label > div > span" ); if (validoVentanaShort != undefined && document.location.href.split('/')[3] === 'shorts') { validoUrl = document.location.href.split('/')[4]; let dislikes = null; let viewCount = null; let rating = null; const persisted = getLikesDislikesFromPersistedCache(validoUrl); if (persisted && persisted.dislikes != null) { dislikes = persisted.dislikes; viewCount = persisted.viewCount ?? null; rating = persisted.rating ?? null; } else { const urlShorts = `${apiDislikes}${validoUrl}`; try { const respuesta = await fetch(urlShorts); const datosShort = await respuesta.json(); dislikes = Number(datosShort?.dislikes); viewCount = Number(datosShort?.viewCount); rating = Number(datosShort?.rating); if (Number.isFinite(dislikes)) setLikesDislikesToPersistedCache(validoUrl, undefined, dislikes, Number.isFinite(viewCount) ? viewCount : undefined, (Number.isFinite(rating) && rating >= 0 && rating <= 5) ? rating : undefined); } catch (error) { console.log(error); } } if (dislikes != null) { const settings = JSON.parse(GM_getValue(SETTINGS_KEY, '{}')); for (let i = 0; i < validoVentanaShort.length; i++) { const el = validoVentanaShort[i]; if (settings.dislikes) { if (!el.dataset.originalLabel) el.dataset.originalLabel = el.textContent; el.textContent = `${FormatterNumber(dislikes, 0)}`; } else { if (el.dataset.originalLabel) { el.textContent = el.dataset.originalLabel; delete el.dataset.originalLabel; } } } } if (__ytToolsRuntime.updateShortsViewsButton) __ytToolsRuntime.updateShortsViewsButton(validoUrl, viewCount); if (__ytToolsRuntime.updateShortsRatingButton) __ytToolsRuntime.updateShortsRatingButton(validoUrl, rating); } } let showDislikes = false; window.addEventListener('yt-navigate-finish', () => { if (isYTMusic) return; // Dislikes UI not available on YTM const svgDislike = $e('.svg-dislike-ico'); if (!svgDislike && showDislikes) { setTimeout(async () => { await videoDislike(); await shortDislike(); }, 1500); } }); // Styles for our enhancement panel const thumbnailVideo = ` <button title="Image video" class="botones_div" type="button" id="imagen"> <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-photo-down" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"> <path stroke="none" d="M0 0h24v24H0z" fill="none"></path> <path d="M15 8h.01"></path> <path d="M12.5 21h-6.5a3 3 0 0 1 -3 -3v-12a3 3 0 0 1 3 -3h12a3 3 0 0 1 3 3v6.5"></path> <path d="M3 16l5 -5c.928 -.893 2.072 -.893 3 0l4 4"></path> <path d="M14 14l1 -1c.653 -.629 1.413 -.815 2.13 -.559"></path> <path d="M19 16v6"></path> <path d="M22 19l-3 3l-3 -3"></path> </svg> </button> `; const repeatVideo = ` <button title="Repeat video" class="botones_div" type="button" id="repeatvideo"> <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-repeat" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"> <path stroke="none" d="M0 0h24v24H0z" fill="none"></path> <path d="M4 12v-3a3 3 0 0 1 3 -3h13m-3 -3l3 3l-3 3"></path> <path d="M20 12v3a3 3 0 0 1 -3 3h-13m3 3l-3 -3l3 -3"></path> </svg> </button> `; const downloadMP4Mp3 = ` <button title="MP4" type="button" class="btn1 botones_div"> <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-file-download" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"> <path stroke="none" d="M0 0h24v24H0z" fill="none"></path> <path d="M14 3v4a1 1 0 0 0 1 1h4"></path> <path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z"></path> <path d="M12 17v-6"></path> <path d="M9.5 14.5l2.5 2.5l2.5 -2.5"></path> </svg> </button> <button title="MP3" type="button" class="btn2 botones_div"> <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-file-music" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"> <path stroke="none" d="M0 0h24v24H0z" fill="none"></path> <path d="M14 3v4a1 1 0 0 0 1 1h4"></path> <path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z"></path> <path d="M11 16m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path> <path d="M12 16l0 -5l2 1"></path> </svg> </button> <button title="Close" type="button" class="btn3 botones_div"> <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-circle-x" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"> <path stroke="none" d="M0 0h24v24H0z" fill="none"></path> <path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path> <path d="M10 10l4 4m0 -4l-4 4"></path> </svg> </button> `; const pictureToPicture = ` <button title="Picture to picture" type="button" class="video_picture_to_picture botones_div"> <svg width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M11 19h-6a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v4" /><path d="M14 14m0 1a1 1 0 0 1 1 -1h5a1 1 0 0 1 1 1v3a1 1 0 0 1 -1 1h-5a1 1 0 0 1 -1 -1z" /></svg> </button> `; const screenShot = ` <button title="Screenshot video" type="button" class="screenshot_video botones_div"> <svg width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M15 8h.01" /><path d="M6 13l2.644 -2.644a1.21 1.21 0 0 1 1.712 0l3.644 3.644" /><path d="M13 13l1.644 -1.644a1.21 1.21 0 0 1 1.712 0l1.644 1.644" /><path d="M4 8v-2a2 2 0 0 1 2 -2h2" /><path d="M4 16v2a2 2 0 0 0 2 2h2" /><path d="M16 4h2a2 2 0 0 1 2 2v2" /><path d="M16 20h2a2 2 0 0 0 2 -2v-2" /></svg> </button> `; const bookmarkAddBtn = ` <button title="Add bookmark" type="button" id="yt-bookmark-add" class="botones_div"> <svg width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"> <path stroke="none" d="M0 0h24v24H0z" fill="none"/> <path d="M7 4h10a2 2 0 0 1 2 2v14l-7 -4l-7 4v-14a2 2 0 0 1 2 -2z" /> <path d="M12 7v6" /> <path d="M9 10h6" /> </svg> </button> `; const bookmarkToggleBtn = ` <button title="Show bookmarks" type="button" id="yt-bookmark-toggle" class="botones_div"> <svg width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"> <path stroke="none" d="M0 0h24v24H0z" fill="none"/> <path d="M9 6h11" /> <path d="M9 12h11" /> <path d="M9 18h11" /> <path d="M5 6h.01" /> <path d="M5 12h.01" /> <path d="M5 18h.01" /> </svg> </button> `; const continueWatchingHistoryBtn = ` <button title="History" type="button" id="yt-cw-history-toggle" class="botones_div" style="display:none;"> <svg width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"> <path stroke="none" d="M0 0h24v24H0z" fill="none"/> <path d="M12 8v4l3 3" /> <path d="M3 12a9 9 0 1 0 3 -6.7" /> <path d="M3 4v4h4" /> </svg> </button> `; const menuBotones = ` <main class="yt-tools-container"> <div class="container"> <form> <div class="containerButtons"> ${thumbnailVideo} ${!isYTMusic ? repeatVideo : ''} ${bookmarkAddBtn} ${bookmarkToggleBtn} ${continueWatchingHistoryBtn} ${downloadMP4Mp3} ${pictureToPicture} ${screenShot} </div> <div id="yt-bookmarks-panel" class="yt-bookmarks-panel" style="display:none;"></div> <div id="yt-continue-watching-panel" class="yt-continue-watching-panel" style="display:none;"></div> <div> </div> </form> </div> <div class="content_collapsible_colors" style="margin-top: 10px"> <form class="formulariodescarga ocultarframe" action=""> <div class="containerall"> <select class="selectcalidades ocultarframe" required> <option selected disabled>Video Quality</option> <option value="144">144p MP4</option> <option value="240">240p MP4</option> <option value="360">360p MP4</option> <option value="480">480p MP4</option> <option value="720">720p HD MP4 Default</option> <option value="1080">1080p FULL HD MP4</option> <option value="1440">1440p 2K WEBM</option> <option value="4k">2160p 4K WEBM</option> <option value="8k">4320p 8K WEBM</option> </select> <div id="descargando" class="download-container ocultarframe"> <button class="progress-retry-btn" title="Retry" style="display: none;"> <i class="fa-solid fa-rotate-right"></i> </button> <button class="download-again-btn" title="Download again" style="display: none;"> <i class="fa-solid fa-download"></i> </button> <div class="download-info"> <span class="download-text">Download Video And Please Wait...</span> <span class="download-quality"></span> </div> <div class="download-actions"> <button class="download-btn video-btn">Download</button> <button class="retry-btn" style="display: none;">Retry</button> </div> <div class="progress-container" style="display: none;"> <div class="progress-bar"> <div class="progress-fill"></div> </div> <span class="progress-text">0%</span> </div> <div class="download-footer"> <a href="https://github.com/akari310/" target="_blank"> <i class="fa-brands fa-github"></i> by: Akari</a> </div> <h1 class="text-description-download"> <span >Enable pop-ups on YouTube to download audio or video</span> </h1> </div> </div> </form> <form class="formulariodescargaaudio ocultarframe" action=""> <div class="containerall"> <select class="selectcalidadesaudio ocultarframeaudio" required> <option selected disabled>Audio Quality</option> <option value="flac">Audio FLAC UHQ</option> <option value="wav">Audio WAV UHQ</option> <option value="webm">Audio WEBM UHQ</option> <option value="mp3">Audio MP3 Default</option> <option value="m4a">Audio M4A</option> <option value="aac">Audio AAC</option> <option value="opus">Audio OPUS</option> <option value="ogg">Audio OGG</option> </select> <div id="descargandomp3" class="download-container ocultarframeaudio"> <button class="progress-retry-btn" title="Retry" style="display: none;"> <i class="fa-solid fa-rotate-right"></i> </button> <button class="download-again-btn" title="Download again" style="display: none;"> <i class="fa-solid fa-download"></i> </button> <div class="download-info"> <span class="download-text">Download Audio And Please Wait...</span> <span class="download-quality"></span> </div> <div class="download-actions"> <button class="download-btn audio-btn">Download</button> <button class="retry-btn" style="display: none;">Retry</button> </div> <div class="progress-container" style="display: none;"> <div class="progress-bar"> <div class="progress-fill"></div> </div> <span class="progress-text">0%</span> </div> <div class="download-footer"> <a href="https://github.com/akari310/" target="_blank"><i class="fa-brands fa-github"></i> by: Akari</a> </div> <h1 class="text-description-download"> <span >Enable pop-ups on YouTube to download audio or video</span> </h1> </div> </div> </form> </main> `; function Notify(type = 'info', message = '', title = '') { const defaultTitles = { success: 'Success', error: 'Error', info: 'Information', warning: 'Warning', }; if (isYTMusic || (window.trustedTypes && window.trustedTypes.defaultPolicy === null)) { // Avoid iziToast due to innerHTML TrustedTypes violation on strict environments let toast = document.getElementById('yt-tools-custom-toast'); if (!toast) { toast = document.createElement('div'); toast.id = 'yt-tools-custom-toast'; toast.style.cssText = 'position:fixed;bottom:20px;left:20px;background:rgba(30,30,30,0.9);color:#fff;padding:12px 20px;border-radius:8px;z-index:99999;font-family:sans-serif;font-size:14px;box-shadow:0 4px 12px rgba(0,0,0,0.3);border-left:4px solid #ff0000;transition:opacity 0.3s;opacity:0;pointer-events:none;'; document.body.appendChild(toast); } toast.textContent = (title || defaultTitles[type] || 'Notification') + ': ' + message; if (type === 'success') toast.style.borderLeftColor = '#22c55e'; else if (type === 'error') toast.style.borderLeftColor = '#ef4444'; else if (type === 'warning') toast.style.borderLeftColor = '#f59e0b'; else toast.style.borderLeftColor = '#3b82f6'; toast.style.opacity = '1'; if (toast._timer) clearTimeout(toast._timer); toast._timer = setTimeout(() => { toast.style.opacity = '0'; }, 3000); return; } try { iziToast[type]({ title: title || defaultTitles[type] || 'Notification', message: message, position: 'bottomLeft', }); } catch (e) { console.warn('[yt-tools] iziToast failed:', e); } } // Helper: create SVG icon using DOM API (no innerHTML needed) function createSvgIcon(pathsData, size) { const sz = size || 24; const svgNS = 'http://www.w3.org/2000/svg'; const svg = document.createElementNS(svgNS, 'svg'); svg.setAttribute('width', String(sz)); svg.setAttribute('height', String(sz)); svg.setAttribute('viewBox', '0 0 24 24'); svg.setAttribute('stroke-width', '2'); svg.setAttribute('stroke', 'currentColor'); svg.setAttribute('fill', 'none'); svg.setAttribute('stroke-linecap', 'round'); svg.setAttribute('stroke-linejoin', 'round'); pathsData.forEach(d => { const p = document.createElementNS(svgNS, 'path'); p.setAttribute('d', d); if (d === 'M0 0h24v24H0z') p.setAttribute('fill', 'none'); svg.appendChild(p); }); return svg; } // Helper: create a toolbar button with SVG icon function makeToolBtn(title, id, className, paths) { const btn = document.createElement('button'); btn.title = title; btn.type = 'button'; if (id) btn.id = id; btn.className = (className ? className + ' ' : '') + 'botones_div'; btn.appendChild(createSvgIcon(paths)); return btn; } GM_addStyle(` @import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"); @import url("https://cdn.jsdelivr.net/npm/[email protected]/dist/css/iziToast.min.css"); :root { --primary-custom: #ff0000 !important; --bg-dark-custom: #1a1a1a !important; --bg-card-custom: #252525 !important; --text-custom: #ffffff !important; --text-custom-secondary: #9e9e9e !important; --accent-custom: #ff4444 !important; } #panel-overlay { display: none; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0, 0, 0, 0.3); z-index: 9998; backdrop-filter: blur(2px); } #yt-enhancement-panel { z-index: 9999 !important; } body .container-mdcm { font-family: "Inter", -apple-system, sans-serif; color: var(--yt-enhance-menu-text, var(--text-custom)); } #toggle-button:hover { background-color: rgba(255,255,255,0.1); border-radius: 50%; opacity: 1 !important; } .container-mdcm { width: 420px; max-width: 420px; background: rgba(30, 30, 30, 0.6) !important; border-radius: 16px 16px 0 0; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(255, 255, 255, 0.1); display: flex; flex-direction: column; max-height: 80vh; overflow-y: auto; overflow-x: hidden; height: auto; } #shareDropdown { display: none; position: absolute; top: 50px; right: 100px; background-color: var(--yt-enhance-menu-bg, #252525); border-radius: 6px; padding: 10px; box-shadow: rgba(0, 0, 0, 0.2) 0px 4px 12px; z-index: 11; } #shareDropdown a { color: var(--text-custom); text-decoration: none; line-height: 2; font-size: 14px; } #shareDropdown a:hover { color: var(--primary-custom); } .header-mdcm { padding: 12px 16px; border-bottom: 1px solid rgba(255,255,255,0.1); position: sticky; top: 0; background-color: var(--yt-enhance-menu-bg, #252525); border-radius: 16px 16px 0 0; z-index: 10; display: flex; justify-content: space-between; align-items: center; } .header-mdcm h1 { font-size: 16px; margin: 0; font-weight: 600; display: flex; align-items: center; gap: 8px; } .header-mdcm i { color: var(--primary-custom) } .icons-mdcm { display: flex; gap: 4px; } .icons-mdcm i { color: var(--yt-enhance-menu-accent, var(--text-custom)); } .icon-btn-mdcm { background: rgba(255,255,255,0.1); border: none; color: var(--text-custom); width: 28px; height: 28px; border-radius: 6px; cursor: pointer; transition: all 0.3s; } .icon-btn-mdcm:hover { background: rgba(255,255,255,0.2); transform: translateY(-2px); } .icon-btn-mdcm i { color: var(--text-custom); outline: none; text-decoration: none; } .tabs-mdcm { padding: 10px 12px; margin: 10px 0; position: sticky; top: 50px; background-color: var(--yt-enhance-menu-bg, #252525); z-index: 10; display: flex; gap: 8px; -ms-overflow-style: none; padding-bottom: 8px; } .tabs-mdcm::-webkit-scrollbar { height: 0px; background-color: transparent; } .tabs-mdcm:hover::-webkit-scrollbar { height: 6px; } .tabs-mdcm::-webkit-scrollbar-thumb { background-color: rgba(255, 0, 0, 0.5); border-radius: 3px; } .tabs-mdcm::-webkit-scrollbar-track { background-color: transparent; } .tab-mdcm { padding: 6px 10px; border: none; background: rgba(255,255,255,0.05); cursor: pointer; font-size: 12px; color: var(--text-custom-secondary); border-radius: 6px; transition: all 0.3s; flex: 1; display: flex; align-items: center; gap: 6px; flex-shrink: 0; justify-content: center; white-space: nowrap; } .tab-mdcm svg { width: 14px; height: 14px; fill: currentColor; } .tab-mdcm.active { background: var(--yt-enhance-menu-accent, var(--primary-custom)) !important; color: var(--text-custom); font-weight: 500; box-shadow: 0 4px 12px rgba(255,0,0,0.2); } .tab-mdcm:hover:not(.active) { background: rgba(255,255,255,0.1); transform: translateY(-1px); } .options-mdcm { flex: 1; overflow-y: auto; padding: 0 16px 0; scrollbar-width: thin; scrollbar-color: var(--primary-custom) var(--bg-dark-custom); max-height: 300px; display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 8px; } .options-settings-mdcm { flex: 1; overflow-y: auto; padding: 0 16px 0; scrollbar-width: thin; scrollbar-color: var(--primary-custom) var(--bg-dark-custom); max-height: 300px; display: grid; gap: 8px; } .card-items-end { display: flex; justify-content: space-between; align-items: center; width: 175px; } .radio-mdcm { width: 14px; height: 14px; accent-color: var(--primary-custom); } .color-picker-mdcm { width: 50px; height: 24px; border: 1px solid rgba(255, 255, 255, 0.2); background: rgba(255, 255, 255, 0.1); border-radius: 4px; cursor: pointer; transition: all 0.3s; } .color-picker-mdcm:hover { background: rgba(255, 255, 255, 0.2); } .options-mdcm::-webkit-scrollbar, .options-settings-mdcm::-webkit-scrollbar { width: 6px; } .options-mdcm::-webkit-scrollbar-track, .options-settings-mdcm::-webkit-scrollbar-track { background: var(--bg-dark-custom); border-radius: 3px; } .options-mdcm::-webkit-scrollbar-thumb, .options-settings-mdcm::-webkit-scrollbar-thumb { background: var(--primary-custom); border-radius: 3px; } .options-mdcm::-webkit-scrollbar-thumb:hover, .options-settings-mdcm::-webkit-scrollbar-thumb:hover { background: var(--accent-custom); } .options-mdcm::after, .options-settings-mdcm::after { content: ''; display: block; } .option-mdcm { display: grid; grid-template-columns: auto 1fr; align-items: center; margin-bottom: 0; padding: 5px; background: rgba(255,255,255,0.05); border-radius: 6px; transition: all 0.3s; border: 1px solid rgba(255,255,255,0.05); color: var(--text-custom); gap: 6px; } .option-mdcm:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.1); } .option-settings-mdcm { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0; padding: 6px; background: rgba(255, 255, 255, 0.05); border-radius: 6px; transition: all 0.3s; border: 1px solid rgba(255, 255, 255, 0.05); gap: 6px; } .option-settings-mdcm:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.1); } /* Themes Grid 2 Columns */ .themes-grid-mdcm { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 8px !important; } .themes-grid-mdcm .theme-option { margin-bottom: 0 !important; } .tab-content { display: none; } .tab-content.active { display: block; margin-bottom: 10px; } .checkbox-mdcm { width: 14px; height: 14px; accent-color: var(--yt-enhance-menu-accent, var(--primary-custom)) !important; } .yt-tools-audio-only-player { background-color: #000 !important; background-repeat: no-repeat !important; background-position: center !important; background-size: cover !important; } .yt-tools-audio-only-video { opacity: 0 !important; } label { font-size: 12px; color: var(--text-custom); } .slider-container-mdcm { background: rgba(255,255,255,0.05); padding: 10px; border-radius: 6px; } .slider-mdcm { width: 100%; height: 3px; accent-color: var(--yt-enhance-menu-accent, var(--primary-custom)) !important; margin: 10px 0; } .reset-btn-mdcm { padding: 5px 10px; border: 1px solid rgba(255,255,255,0.2); background: rgba(255,255,255,0.1); color: var(--text-custom); border-radius: 4px; cursor: pointer; font-size: 11px; transition: all 0.3s; } .reset-btn-mdcm:hover { background: rgba(255,255,255,0.2); } .quality-selector-mdcm select { position: relative; padding: 3px; outline: none; border-radius: 4px; border: 1px solid rgba(255,255,255,0.2); background: var(--yt-enhance-menu-accent, var(--primary-custom)) !important; color: var(--text-custom); width: fit-content; appearance: none; cursor: pointer; font-size: 11px; } .quality-selector-mdcm { background: rgba(255,255,255,0.05); padding: 10px; border-radius: 6px; } .select-wrapper-mdcm { position: relative; display: inline-block; } .select-wrapper-mdcm select { -webkit-appearance: auto; -moz-appearance: auto; } .actions-mdcm { position: sticky; top: 0; padding: 12px 16px; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); background: rgba(30, 30, 30, 0.6) !important; border-bottom: 1px solid rgba(255, 255, 255, 0.1); display: flex; gap: 6px; width: 390px; border-radius: 0 0 16px 16px; justify-content: space-between; align-items: center; } .action-buttons-mdcm { display: flex; gap: 6px; } .action-btn-mdcm { flex: 1; padding: 8px; border: none; border-radius: 6px; background: var(--primary-custom); color: var(--text-custom); cursor: pointer; font-size: 12px; font-weight: 500; transition: all 0.3s; display: flex; align-items: center; justify-content: center; gap: 4px; box-shadow: 0 4px 12px rgba(255,0,0,0.2); } .action-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(255,0,0,0.3); } textarea.textarea-mdcm { width: 100%; height: 50px; margin-top: 10px; margin-bottom: 12px; padding: 8px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); border-radius: 6px; color: var(--text-custom); font-size: 11px; resize: none; transition: all 0.3s; } textarea.textarea-mdcm:focus { outline: none; border-color: var(--primary-custom); background: rgba(255,255,255,0.08); } @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .container-mdcm { animation: fadeIn 0.3s ease-out; } .developer-mdcm { font-size: 10px; color: var(--text-custom-secondary); } .developer-mdcm a { color: var(--primary-custom); text-decoration: none; } /* Styles for the import/export area */ #importExportArea { display: none; padding: 16px; margin: 0px; background-color: var(--yt-enhance-menu-bg, #252525); border-radius: 16px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); } #importExportArea.active { display: block; margin-top: 10px; } /* Style the textarea */ #importExportArea textarea { width: 370px; height: 20px; margin-bottom: 10px; padding: 8px; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 6px; background-color: rgba(255, 255, 255, 0.05); color: var(--text-custom); font-size: 12px; resize: vertical; } /* Style the buttons */ #importExportArea .action-buttons-mdcm { display: flex; justify-content: space-between; gap: 10px; } #importExportArea .action-btn-mdcm { flex: 1; padding: 10px 16px; border: none; border-radius: 6px; background-color: var(--primary-custom); color: var(--text-custom); font-size: 14px; font-weight: 500; cursor: pointer; transition: background-color 0.3s ease; } #importExportArea .action-btn-mdcm:hover { background-color: var(--accent-custom); } .ocultarframe, .ocultarframeaudio { display: none !important; } .yt-tools-container { width: 100% !important; display: flex !important; justify-content: center !important; margin: 0 !important; } .yt-tools-inner-container { width: 100% !important; display: flex !important; flex-direction: column !important; align-items: center !important; } /* Layout & Alignment Fixes */ .yt-tools-form { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; width: 100% !important; gap: 2px !important; } .containerButtons { display: flex !important; justify-content: center !important; align-items: center !important; gap: 12px !important; width: 100% !important; flex-wrap: wrap !important; } .selectcalidades, .selectcalidadesaudio { background: rgba(30, 30, 30, 0.9) !important; backdrop-filter: blur(12px) !important; -webkit-backdrop-filter: blur(12px) !important; border: 1px solid rgba(255, 255, 255, 0.1) !important; color: #ffffff !important; padding: 0 20px !important; height: 40px !important; line-height: 40px !important; border-radius: 10px !important; font-family: "Inter", -apple-system, sans-serif !important; font-size: 14px !important; font-weight: 600 !important; cursor: pointer !important; outline: none !important; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4) !important; transition: all 0.3s ease !important; margin: 0 auto !important; display: block !important; min-width: 280px !important; max-width: 350px !important; appearance: none !important; -webkit-appearance: none !important; text-align: center !important; text-align-last: center !important; /* Support for some browsers */ position: relative; } .selectcalidades:hover, .selectcalidadesaudio:hover { border-color: #ff0000 !important; background: rgba(45, 45, 45, 0.95) !important; transform: translateY(-2px); box-shadow: 0 12px 40px rgba(255, 0, 0, 0.15) !important; } .selectcalidades option, .selectcalidadesaudio option { background: #1e1e1e !important; color: #ffffff !important; padding: 12px !important; text-align: center !important; } .formulariodescarga, .formulariodescargaaudio { width: 100% !important; margin: 0 !important; display: none !important; /* Hidden by default */ justify-content: center !important; align-items: center !important; } .containerall { width: 100% !important; display: flex !important; flex-direction: column !important; align-items: center !important; gap: 2px !important; } /* Regular YouTube specific spacing (VIP) */ ytd-watch-metadata .yt-tools-inner-container { gap: 10px !important; } ytd-watch-metadata .containerall { gap: 0px !important; padding-bottom: 0 !important; } ytd-watch-metadata .yt-tools-container { margin-bottom: -8px !important; } ytd-watch-metadata .content_collapsible_colors { margin-top: 0 !important; } ytd-watch-metadata .download-container { width: 90% !important; max-width: 450px !important; padding: 7px !important; border-radius: 12px !important; margin: 5px auto !important; display: flex !important; flex-direction: column !important; transition: all 0.3s ease; position: relative; } #yt-stats { position: fixed; top: 60px; right: 20px; background: #1a1a1a; color: white; padding: 15px; border-radius: 10px; width: 320px; box-shadow: 0 4px 12px rgba(0,0,0,0.4); font-family: Arial, sans-serif; display: none; } #yt-stats-toggle { font-size: 12px; color: #fff; padding: 12px 20px; border-radius: 5px; cursor: pointer; } .stat-row { margin: 15px 0; } .progress { height: 6px; overflow: hidden; background: #333; border-radius: 3px; margin: 8px 0; } .progress-bar { height: 100%; transition: width 0.3s; } .total-bar { background: #44aaff !important; } .video-bar { background: #00ff88 !important; } .shorts-bar { background: #ff4444 !important; } #cinematics { position: absolute !important; width: 90vw !important; height: 100vh ; } #cinematics div { position: fixed; inset: 0px; pointer-events: none; transform: scale(1.5, 2); } #cinematics > div > div > canvas:nth-child(1), #cinematics > div > div > canvas:nth-child(2) { position: absolute !important; width: 90vw !important; height: 100vh ; } /* .html5-video-player.unstarted-mode { background-image: url('https://avatars.githubusercontent.com/u/54366580?v=4'); background-repeat: no-repeat; background-position: 50% 50%; display: flex; justify-content: center; align-items: center; } */ #yt-enhancement-panel { position: fixed; top: 60px; right: 20px; z-index: 9999; } .color-picker { width: 100%; margin: 0; padding: 0; border: none; background: none; } .slider { width: 100%; } #toggle-panel { z-index: 10000; color: white; padding: 5px; border: none; cursor: pointer; display: flex; justify-content: center; transition: all 0.5s ease; width: 43px; border-radius: 100px; } #icon-menu-settings { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 7px; font-size: 20px; color: var(--yt-spec-icon-inactive); cursor: pointer; user-select: none; filter: drop-shadow(2px 4px 6px black); } .theme-option { margin-bottom: 15px; } .theme-option label { display: flex; align-items: center; } .theme-option { position: relative; width: auto; margin-bottom: 10px; padding: 10px; border-radius: 4px; cursor: pointer; } .theme-preview { position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-radius: 10px; border: 1px solid #000; z-index: 1; } .theme-option input[type="radio"] { position: relative; z-index: 2; margin-right: 10px; cursor: pointer; } .theme-name { position: relative; z-index: 2; font-size: 15px; color: #fff; } .theme-option label { display: flex; align-items: center; width: 100%; position: relative; z-index: 2; } .buttons-tranlate, .select-traductor { background: #000; font-size: 10px; border: none; color: #fbf4f4 !important; padding: 3px 0; margin-left: 10px; width: 70px; border-radius: 10px; } .buttons-tranlate:hover { cursor: pointer; background-color: #6b6b6b; } button.botones_div { margin: 0; padding: 0; } button.botones_div:hover { cursor: pointer; color: #6b6b6b !important; } .tab-button:hover { background-color: #ec3203 !important; color: #ffffff !important; cursor: pointer; } .traductor-container { display: inline-block; align-items: center; gap: 8px; margin-top: 4px; } #eyes { opacity: 0; position: absolute; height: 24px; left: 0; width: 24px; } /* width */ .container-mdcm ::-webkit-scrollbar { width: 4px; height: 10px; } /* Track */ .container-mdcm ::-webkit-scrollbar-track { background: #d5d5d5; } /* Handle */ .container-mdcm ::-webkit-scrollbar-thumb { background: #000; } .color-boxes { display: flex; gap: 8px; } .color-box { width: 20px; height: 20px; border: 1px solid rgb(221 221 221 / 60%); border-radius: 4px; cursor: pointer; } .color-box.selected { border: 2px solid var(--primary-custom); filter: drop-shadow(0px 1px 6px red); } .containerButtons { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 10px; } .containerButtons > button:hover { cursor: pointer; } /* Download Container Styles */ .download-container { width: 90% !important; max-width: 450px !important; padding: 16px !important; border-radius: 12px !important; margin: 10px auto !important; display: flex !important; flex-direction: column !important; transition: all 0.3s ease; position: relative; } .download-container.video { background: linear-gradient(135deg, #ff4444, #cc0000); color: white; } .download-container.audio { background: linear-gradient(135deg, #00cc44, #009933); color: white; } .download-info { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; } .download-text { font-weight: 600; font-size: 14px; } .download-quality { font-size: 12px; opacity: 0.9; } .progress-container { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; } .progress-bar { flex: 1; height: 6px; background: rgba(255, 255, 255, 0.3); border-radius: 3px; overflow: hidden; } .progress-fill { height: 100%; background: rgba(255, 255, 255, 0.8); border-radius: 3px; width: 0%; transition: width 0.3s ease; } .progress-text { font-size: 12px; font-weight: 500; min-width: 30px; } .download-footer { font-size: 10px; opacity: 0.7; text-align: center; } .download-footer a { text-decoration: none; color: #fff; } .download-container.completed { color: #fff; background: linear-gradient(135deg, #00cc44, #009933) !important; } .download-container.completed .download-text { font-weight: 700; } /* Bookmarks panel (under video buttons) */ .yt-bookmarks-panel { margin-top: 10px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); border-radius: 10px; padding: 8px; } .yt-bm-empty { font-size: 12px; color: var(--text-custom-secondary); } .yt-bm-item { display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: center; padding: 6px; border-radius: 8px; } .yt-bm-item:hover { background: rgba(255,255,255,0.06); } .yt-bm-go { border: none; border-radius: 6px; padding: 4px 8px; background: rgba(34,197,94,0.2); color: #fff; cursor: pointer; font-size: 12px; white-space: nowrap; } .yt-bm-label { font-size: 12px; color: var(--text-custom); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .yt-bm-del { border: none; border-radius: 6px; padding: 4px 8px; background: rgba(239,68,68,0.2); color: #fff; cursor: pointer; font-size: 12px; } /* Continue watching panel (under video buttons) */ .yt-continue-watching-panel { margin-top: 10px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); border-radius: 10px; padding: 8px; } .yt-cw-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; } .yt-cw-header-title { font-size: 12px; font-weight: 600; color: var(--text-custom, #fff); } .yt-cw-clear { border: none; border-radius: 6px; padding: 4px 8px; background: rgba(239,68,68,0.18); color: #fff; cursor: pointer; font-size: 12px; } .yt-cw-empty { font-size: 12px; color: var(--text-custom-secondary, #aaa); } .yt-cw-item { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; padding: 8px; border-radius: 10px; } .yt-cw-item:hover { background: rgba(255,255,255,0.06); } .yt-cw-thumb-wrap { width: 72px; height: 40px; border-radius: 8px; overflow: hidden; background: rgba(255,255,255,0.08); flex: none; } .yt-cw-thumb { width: 100%; height: 100%; object-fit: cover; display: block; } .yt-cw-title { font-size: 12px; font-weight: 600; color: var(--text-custom, #fff); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 520px; } .yt-cw-meta { font-size: 12px; color: var(--text-custom-secondary, #aaa); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .yt-cw-actions { display: flex; align-items: center; gap: 8px; } .yt-cw-go { border: none; border-radius: 6px; padding: 4px 8px; background: rgba(34,197,94,0.2); color: #fff; cursor: pointer; font-size: 12px; white-space: nowrap; } .yt-cw-del { border: none; border-radius: 6px; padding: 4px 8px; background: rgba(239,68,68,0.2); color: #fff; cursor: pointer; font-size: 12px; } /* Shorts channel name label (Home/feed Shorts lockups) */ html:not([data-mdcm-shorts-channel-name="1"]) .yt-tools-shorts-channel-name { display: none !important; } .yt-tools-shorts-channel-name { font-size: 12px; line-height: 1.2; color: var(--yt-spec-text-secondary, #aaa); margin-bottom: 2px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .yt-tools-shorts-stats-wrap { margin-top: 4px; font-size: 11px; line-height: 1.2; color: var(--yt-spec-text-secondary, #aaa); } .yt-tools-shorts-stats-wrap .yt-tools-shorts-stats-row { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 2px; } /* Like vs dislike bar (under likes/dislikes) */ #yt-like-dislike-bar-mdcm { height: 6px; border-radius: 999px; overflow: hidden; margin-top: 6px; background: rgba(255,255,255,0.12); max-width: 305px; } #yt-like-dislike-bar-mdcm .like { height: 100%; background: #22c55e; float: left; } #yt-like-dislike-bar-mdcm .dislike { height: 100%; background: #ef4444; float: left; } .progress-retry-btn { position: absolute; top: 8px; left: 8px; right: auto; width: 24px; height: 24px; border: none; border-radius: 50%; background: rgba(255, 255, 255, 0.2); color: white; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 12px; transition: all 0.3s ease; } .progress-retry-btn:hover { background: rgba(255, 255, 255, 0.3); transform: scale(1.1); } .download-again-btn { position: absolute; top: 8px; left: 8px; right: auto; width: 24px; height: 24px; border: none; border-radius: 50%; background: rgba(34, 197, 94, 0.35); color: white; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 12px; transition: all 0.3s ease; } .download-again-btn:hover { background: rgba(34, 197, 94, 0.5); transform: scale(1.1); } .download-container { position: relative; } .download-actions { display: flex; gap: 8px; margin-bottom: 8px; } .download-btn { flex: 1; padding: 8px 16px; border: none; border-radius: 4px; font-weight: 600; font-size: 12px; cursor: pointer; transition: all 0.3s ease; color: white; } .download-btn.video-btn { background: linear-gradient(135deg, #ff6666, #ff4444); } .download-btn.audio-btn { background: linear-gradient(135deg, #00dd55, #00cc44); } .download-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 8px rgba(0,0,0,0.2); } .download-info { padding-left: 28px !important; /* Space for buttons on the left */ } .download-btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none; } .retry-btn { padding: 8px 16px; border: none; border-radius: 4px; font-weight: 600; font-size: 12px; cursor: pointer; transition: all 0.3s ease; background: linear-gradient(135deg, #ffaa00, #ff8800); color: white; } .retry-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 8px rgba(0,0,0,0.2); } body { padding: 0; margin: 0; overflow-y: scroll; overflow-x: hidden; } .style-scope.ytd-comments { overflow-y: auto; overflow-x: hidden; height: auto; } ytd-comment-view-model[is-reply] #author-thumbnail.ytd-comment-view-model yt-img-shadow.ytd-comment-view-model, ytd-comment-view-model[is-creator-reply] #author-thumbnail.ytd-comment-view-model yt-img-shadow.ytd-comment-view-model { width: 40px; height: 40px; border-radius: 50%; } #author-thumbnail img.yt-img-shadow { border-radius: 50% !important; } #author-thumbnail.ytd-comment-view-model yt-img-shadow.ytd-comment-view-model { width: 40px; height: 40px; border-radius: 50%; overflow: visible; } ytd-item-section-renderer.ytd-watch-next-secondary-results-renderer { --ytd-item-section-item-margin: 8px; overflow-y: auto; overflow-x: hidden; height: auto; } .right-section.ytcp-header { display: flex; flex: 1; align-items: center; gap: 45px; justify-content: end; } #meta.ytd-playlist-panel-video-renderer { min-width: 0; padding: 0 8px; /* display: flexbox; */ display: flex; flex-direction: column-reverse; flex: 1; flex-basis: 0.000000001px; } .containerall { display: flex; align-items: center; justify-content: center; flex-direction: column; padding-bottom: 30px; max-width: 800px; margin: auto; } .container .botoncalidades { margin: 3px 2px; width: 24.6%; } .botoncalidades:first-child { background-color: #0af; } .botoncalidades:last-child { background-color: red; width: 100px; } .selectcalidades, .botoncalidades, .selectcalidadesaudio { width: 50%; height: 27.8px; background-color: #fff; color: #000; font-size: 25px; text-align: center; border: 1px solid black; border-radius: 10px; border: none; font-size: 20px; margin: 2px 2px; } .botoncalidades { width: 70px; height: 30px; background-color: rgb(4, 156, 22); border: 0px solid #000; color: #fff; font-size: 20px; border-radius: 10px; margin: 2px 2px; } .botoncalidades:hover, .bntcontainer:hover { cursor: pointer; } .ocultarframe, .ocultarframeaudio { display: none; } .checked_updates { cursor: pointer; } #export-config, #import-config { width: 100%; display: flex; align-items: center; justify-content: center; gap: 10px; background-color: var(--yt-enhance-menu-accent, var(--primary-custom)) !important; color: #ffffff; border: none; padding: 5px; } #export-config:hover, #import-config:hover { background-color: #ff0000; color: #ffffff; cursor: pointer; } .yt-image-avatar-download { position: absolute; bottom: -10px; right: -14px; border: none; z-index: 1000; background: transparent; filter: drop-shadow(1px 0 6px red); color: var(--ytcp-text-primary); cursor: pointer; } .custom-classic-btn { display: flex; align-items: center; justify-content: center; background-color: rgba(255,255,255,0.1); border-radius: 50%; border: none; width: 48px; height: 48px; color: var(--yt-spec-icon-inactive); font-size: 24px; margin: 0px 8px; cursor: pointer; } .custom-classic-btn:hover { background-color: rgba(255,255,255,0.2); } .background-image-container { display: flex; flex-direction: column; align-items: center; gap: 8px; margin: 10px 0; } .background-image-preview { width: 160px; height: 90px; border-radius: 10px; background-size: cover; background-position: center; border: 2px solid #444; position: relative; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: box-shadow 0.2s; box-shadow: 0 2px 8px rgba(0,0,0,0.08); overflow: hidden; } .background-image-preview:hover .background-image-overlay { opacity: 1; } .background-image-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #fff; background: rgba(0,0,0,0.35); font-size: 18px; opacity: 0; transition: opacity 0.2s; pointer-events: none; } .background-image-preview:hover .background-image-overlay, .background-image-preview:focus .background-image-overlay { opacity: 1; } .background-image-overlay i { font-size: 28px; margin-bottom: 4px; } .background-image-text { font-size: 13px; font-weight: 500; text-shadow: 0 1px 4px #000; } .remove-background-image { position: absolute; top: 6px; right: 6px; background: #e74c3c; color: #fff; border: none; border-radius: 50%; width: 26px; height: 26px; font-size: 18px; cursor: pointer; z-index: 2; display: none; align-items: center; justify-content: center; padding: 0; line-height: 1; box-shadow: 0 2px 8px rgba(0,0,0,0.15); transition: background 0.2s; } .remove-background-image:hover { background: #c0392b; } .background-image-preview.has-image .remove-background-image { display: flex; } ytd-feed-filter-chip-bar-renderer[not-sticky] #chips-wrapper.ytd-feed-filter-chip-bar-renderer { padding: 10px; } .text-description-download { font-size: 12px; text-align: center; margin-top: 10px; } /* === FIX: Căn giữa thanh công cụ khi bật Cinematic Mode === */ ytd-watch-flexy[cinematic-container-initialized] #primary-inner { display: flex; flex-direction: column; align-items: center; } ytd-watch-flexy[cinematic-container-initialized] .yt-tools-container { /* Đảm bảo thanh công cụ không bị quá rộng so với video */ width: 100%; max-width: var(--ytd-watch-flexy-max-player-width, 1280px); } /* === YouTube Music specific styles === */ #ytm-side-panel-wrapper { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; width: 100% !important; margin: 0 0 12px 0 !important; padding: 4px 0 !important; box-sizing: border-box !important; overflow: hidden !important; border-radius: 16px !important; } ytmusic-player-page #side-panel { margin-left: 16px !important; margin-bottom: 24px !important; padding: 0 !important; background: transparent !important; border: none !important; box-shadow: none !important; } .ytm-side-panel-divider { width: 92%; height: 1px; background: rgba(255, 255, 255, 0.1); margin: 4px 0; } /* Blur Mode (Standard with subtle blur) */ body.ytm-style-blur #ytm-side-panel-wrapper, body.ytm-style-blur ytmusic-player-page #side-panel ytmusic-tab-renderer { background: rgba(20, 20, 20, 0.6) !important; backdrop-filter: blur(20px) !important; -webkit-backdrop-filter: blur(20px) !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4) !important; border-radius: 16px !important; } /* Liquid Mode (Fixed Apple Style) */ body.ytm-style-liquid #ytm-side-panel-wrapper, body.ytm-style-liquid ytmusic-player-page #side-panel ytmusic-tab-renderer { background: rgba(25, 25, 25, 0.45) !important; backdrop-filter: blur(24px) saturate(180%) !important; -webkit-backdrop-filter: blur(24px) saturate(180%) !important; border: 1px solid rgba(255, 255, 255, 0.15) !important; border-top: 1px solid rgba(255, 255, 255, 0.25) !important; box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.4), inset 0 1px 1px rgba(255, 255, 255, 0.1) !important; border-radius: 16px !important; } /* Transparent Mode */ body.ytm-style-transparent #ytm-side-panel-wrapper, body.ytm-style-transparent ytmusic-player-page #side-panel ytmusic-tab-renderer { background: transparent !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border: none !important; box-shadow: none !important; } /* YouTube watch playlist panel: reuse the same 3 style choices as YTM. */ body.ytm-style-blur ytd-watch-flexy ytd-playlist-panel-renderer#playlist { background: rgba(20, 20, 20, 0.62) !important; backdrop-filter: blur(20px) saturate(140%) !important; -webkit-backdrop-filter: blur(20px) saturate(140%) !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.38) !important; border-radius: 16px !important; overflow: hidden !important; } body.ytm-style-liquid ytd-watch-flexy ytd-playlist-panel-renderer#playlist { background: rgba(25, 25, 25, 0.45) !important; backdrop-filter: blur(24px) saturate(180%) !important; -webkit-backdrop-filter: blur(24px) saturate(180%) !important; border: 1px solid rgba(255, 255, 255, 0.15) !important; border-top-color: rgba(255, 255, 255, 0.25) !important; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), inset 0 1px 1px rgba(255, 255, 255, 0.1) !important; border-radius: 16px !important; overflow: hidden !important; } body.ytm-style-transparent ytd-watch-flexy ytd-playlist-panel-renderer#playlist { background: transparent !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border: none !important; box-shadow: none !important; } body.ytm-style-blur ytd-watch-flexy ytd-playlist-panel-renderer#playlist > #container, body.ytm-style-liquid ytd-watch-flexy ytd-playlist-panel-renderer#playlist > #container, body.ytm-style-transparent ytd-watch-flexy ytd-playlist-panel-renderer#playlist > #container, body.ytm-style-blur ytd-watch-flexy ytd-playlist-panel-renderer#playlist #items, body.ytm-style-liquid ytd-watch-flexy ytd-playlist-panel-renderer#playlist #items, body.ytm-style-transparent ytd-watch-flexy ytd-playlist-panel-renderer#playlist #items { background: transparent !important; } body.ytm-style-blur ytd-watch-flexy ytd-playlist-panel-renderer#playlist .header, body.ytm-style-liquid ytd-watch-flexy ytd-playlist-panel-renderer#playlist .header { background: rgba(255, 255, 255, 0.04) !important; border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important; } body.ytm-style-transparent ytd-watch-flexy ytd-playlist-panel-renderer#playlist .header { background: transparent !important; border-bottom: none !important; } body.ytm-style-blur ytd-watch-flexy ytd-playlist-panel-renderer#playlist ytd-playlist-panel-video-renderer, body.ytm-style-liquid ytd-watch-flexy ytd-playlist-panel-renderer#playlist ytd-playlist-panel-video-renderer { background: transparent !important; } body.ytm-style-blur ytd-watch-flexy ytd-playlist-panel-renderer#playlist ytd-playlist-panel-video-renderer:hover #container, body.ytm-style-liquid ytd-watch-flexy ytd-playlist-panel-renderer#playlist ytd-playlist-panel-video-renderer:hover #container { background: rgba(255, 255, 255, 0.08) !important; } body.ytm-style-blur ytd-watch-flexy ytd-playlist-panel-renderer#playlist ytd-thumbnail, body.ytm-style-liquid ytd-watch-flexy ytd-playlist-panel-renderer#playlist ytd-thumbnail { border-radius: 8px !important; overflow: hidden !important; } body.ytm-style-blur ytd-watch-flexy ytd-playlist-panel-renderer#playlist #meta, body.ytm-style-liquid ytd-watch-flexy ytd-playlist-panel-renderer#playlist #meta, body.ytm-style-transparent ytd-watch-flexy ytd-playlist-panel-renderer#playlist #meta { min-width: 0 !important; } /* Inner Container Resets */ html[dark] .yt-tools-container, ytmusic-app .yt-tools-container, ytmusic-app #side-panel ytmusic-tab-renderer, ytmusic-app ytmusic-search-box, ytmusic-app #side-panel > .tab-header-container, tp-yt-paper-tabs.tab-header-container, #tabsContainer.tp-yt-paper-tabs, tp-yt-paper-tab.tab-header, .tab-content.tp-yt-paper-tab { background: transparent !important; background-color: transparent !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border: none !important; box-shadow: none !important; margin: 0 !important; } .yt-tools-container { width: 100% !important; display: flex !important; align-items: center !important; justify-content: center !important; padding: 0 !important; } .tab-header-container { width: 100% !important; display: flex !important; align-items: center !important; justify-content: center !important; padding: 4px 0 !important; } /* Fix YTM side-panel queue layout */ ytmusic-app #side-panel { padding: 8px 12px; box-sizing: border-box; } ytmusic-app #side-panel ytmusic-queue-header-renderer .container-name { padding: 0 8px; } ytmusic-app #side-panel ytmusic-player-queue-item .song-info { padding-right: 4px; } ytmusic-app #side-panel ytmusic-tab-renderer { border-radius: 16px !important; overflow-x: hidden !important; overflow-y: auto !important; width: 100% !important; box-sizing: border-box !important; padding: 12px 0 12px 12px !important; margin-bottom: 12px !important; } /* Make the YTM Search Box premium and glassmorphic (Feature requested by user) */ ytmusic-app ytmusic-search-box { border-radius: 16px !important; } html[dark] ytmusic-app ytmusic-search-box #input-box, ytmusic-app ytmusic-search-box #input-box { background: transparent !important; } /* Tab headers — rounded corners & spacing */ ytmusic-app #side-panel > .tab-header-container { border-radius: 16px !important; overflow: hidden !important; padding: 4px 8px; margin: 0 0 8px 0 !important; width: 100% !important; box-sizing: border-box !important; } /* Compact button layout for narrow YTM side panel */ ytmusic-app .containerButtons { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 4px; } ytmusic-app .botones_div { background: rgba(255, 255, 255, 0.08) !important; border: 1px solid rgba(255, 255, 255, 0.12) !important; color: #fff !important; border-radius: 6px !important; padding: 5px 7px !important; transition: all 0.2s ease !important; line-height: 1 !important; } ytmusic-app .botones_div svg { width: 18px !important; height: 18px !important; } ytmusic-app .botones_div:hover { background: rgba(255, 0, 0, 0.25) !important; border-color: rgba(255, 0, 0, 0.4) !important; transform: translateY(-1px); } ytmusic-player-page #side-panel select, ytmusic-player-page #side-panel select option { background: #282828 !important; color: #fff !important; border: 1px solid rgba(255, 255, 255, 0.1) !important; } ytmusic-app .selectcalidades, ytmusic-app .selectcalidadesaudio { background: rgba(255, 255, 255, 0.1) !important; color: #fff !important; border: 1px solid rgba(255, 255, 255, 0.2) !important; border-radius: 6px !important; padding: 8px 8px 6px !important; /* Asymmetric padding for vertical centering */ font-size: 12px !important; width: 100% !important; cursor: pointer !important; outline: none !important; height: 32px !important; line-height: normal !important; } ytmusic-app .download-container { width: 100% !important; background: rgba(0, 0, 0, 0.3) !important; border-radius: 6px !important; position: relative !important; /* Fix absolute positioned buttons (Retry/Again) */ padding: 10px !important; box-sizing: border-box !important; margin-bottom: 0 !important; } ytmusic-app .content_collapsible_colors { margin-top: 8px !important; } .ytm-side-panel-divider { margin: 0 !important; border-bottom: 1px solid rgba(255, 255, 255, 0.1); height: 0; width: 100%; } ytmusic-app .containerall { padding-bottom: 10px !important; } ytmusic-app #toggle-button { display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 8px; margin-right: 4px; } ytmusic-app #icon-menu-settings { color: #fff; font-size: 20px; transition: transform 0.3s ease; } ytmusic-app #icon-menu-settings:hover { transform: rotate(90deg); color: #ff4444; } `); function buildYTMToolbar() { const main = document.createElement('main'); main.className = 'yt-tools-container'; const container = document.createElement('div'); container.className = 'yt-tools-inner-container'; const form = document.createElement('form'); form.className = 'yt-tools-form'; const btnsDiv = document.createElement('div'); btnsDiv.className = 'containerButtons'; // Thumbnail (Image download) btnsDiv.appendChild(makeToolBtn('Image video', 'imagen', '', [ 'M0 0h24v24H0z', 'M15 8h.01', 'M12.5 21h-6.5a3 3 0 0 1 -3 -3v-12a3 3 0 0 1 3 -3h12a3 3 0 0 1 3 3v6.5', 'M3 16l5 -5c.928 -.893 2.072 -.893 3 0l4 4', 'M14 14l1 -1c.653 -.629 1.413 -.815 2.13 -.559', 'M19 16v6', 'M22 19l-3 3l-3 -3' ])); // Repeat if (!isYTMusic) { btnsDiv.appendChild(makeToolBtn('Repeat video', 'repeatvideo', '', [ 'M0 0h24v24H0z', 'M4 12v-3a3 3 0 0 1 3 -3h13m-3 -3l3 3l-3 3', 'M20 12v3a3 3 0 0 1 -3 3h-13m3 3l-3 -3l3 -3' ])); } // Download MP4 btnsDiv.appendChild(makeToolBtn('MP4', null, 'btn1', [ 'M0 0h24v24H0z', 'M14 3v4a1 1 0 0 0 1 1h4', 'M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z', 'M12 17v-6', 'M9.5 14.5l2.5 2.5l2.5 -2.5' ])); // Download MP3 btnsDiv.appendChild(makeToolBtn('MP3', null, 'btn2', [ 'M0 0h24v24H0z', 'M14 3v4a1 1 0 0 0 1 1h4', 'M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z', 'M11 16m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0', 'M12 16l0 -5l2 1' ])); // Close btnsDiv.appendChild(makeToolBtn('Close', null, 'btn3', [ 'M0 0h24v24H0z', 'M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0', 'M10 10l4 4m0 -4l-4 4' ])); if (!isYTMusic) { // Add Bookmark btnsDiv.appendChild(makeToolBtn('Add bookmark', 'yt-bookmark-add', '', [ 'M0 0h24v24H0z', 'M7 4h10a2 2 0 0 1 2 2v14l-7 -4l-7 4v-14a2 2 0 0 1 2 -2z', 'M12 7v6', 'M9 10h6' ])); // Show Bookmarks btnsDiv.appendChild(makeToolBtn('Show bookmarks', 'yt-bookmark-toggle', '', [ 'M0 0h24v24H0z', 'M9 6h11', 'M9 12h11', 'M9 18h11', 'M5 6h.01', 'M5 12h.01', 'M5 18h.01' ])); // History (Continue Watching) btnsDiv.appendChild(makeToolBtn('History', 'yt-cw-history-toggle', '', [ 'M0 0h24v24H0z', 'M12 8v4l3 3', 'M3 12a9 9 0 1 0 3 -6.7', 'M3 4v4h4' ])); } // Picture-in-Picture btnsDiv.appendChild(makeToolBtn('Picture to picture', null, 'video_picture_to_picture', [ 'M0 0h24v24H0z', 'M11 19h-6a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v4', 'M14 14m0 1a1 1 0 0 1 1 -1h5a1 1 0 0 1 1 1v3a1 1 0 0 1 -1 1h-5a1 1 0 0 1 -1 -1z' ])); // Screenshot btnsDiv.appendChild(makeToolBtn('Screenshot video', null, 'screenshot_video', [ 'M0 0h24v24H0z', 'M15 8h.01', 'M6 13l2.644 -2.644a1.21 1.21 0 0 1 1.712 0l3.644 3.644', 'M13 13l1.644 -1.644a1.21 1.21 0 0 1 1.712 0l1.644 1.644', 'M4 8v-2a2 2 0 0 1 2 -2h2', 'M4 16v2a2 2 0 0 0 2 2h2', 'M16 4h2a2 2 0 0 1 2 2v2', 'M16 20h2a2 2 0 0 0 2 -2v-2' ])); form.appendChild(btnsDiv); if (!isYTMusic) { const bookmarksPanel = document.createElement('div'); bookmarksPanel.id = 'yt-bookmarks-panel'; bookmarksPanel.className = 'yt-bookmarks-panel'; bookmarksPanel.style.display = 'none'; form.appendChild(bookmarksPanel); const historyPanel = document.createElement('div'); historyPanel.id = 'yt-continue-watching-panel'; historyPanel.className = 'yt-continue-watching-panel'; historyPanel.style.display = 'none'; form.appendChild(historyPanel); } // Download video quality select const videoForm = document.createElement('form'); videoForm.className = 'formulariodescarga ocultarframe'; const videoSelectDiv = document.createElement('div'); videoSelectDiv.className = 'containerall'; const videoSelect = document.createElement('select'); videoSelect.className = 'selectcalidades ocultarframe'; videoSelect.required = true; [['', 'Video Quality', true], ['144', '144p MP4'], ['240', '240p MP4'], ['360', '360p MP4'], ['480', '480p MP4'], ['720', '720p HD MP4 Default'], ['1080', '1080p FULL HD MP4'], ['1440', '1440p 2K WEBM'], ['4k', '2160p 4K WEBM'], ['8k', '4320p 8K WEBM'] ].forEach(([val, text, dis]) => { const opt = document.createElement('option'); opt.value = val; opt.textContent = text; if (dis) { opt.selected = true; opt.disabled = true; } videoSelect.appendChild(opt); }); videoSelectDiv.appendChild(videoSelect); // Download video container const dlVideoContainer = document.createElement('div'); dlVideoContainer.id = 'descargando'; dlVideoContainer.className = 'download-container ocultarframe'; const dlInfo = document.createElement('div'); dlInfo.className = 'download-info'; const dlText = document.createElement('span'); dlText.className = 'download-text'; dlText.textContent = 'Download Video And Please Wait...'; const dlQuality = document.createElement('span'); dlQuality.className = 'download-quality'; dlInfo.appendChild(dlText); dlInfo.appendChild(dlQuality); const dlActions = document.createElement('div'); dlActions.className = 'download-actions'; const dlBtn = document.createElement('button'); dlBtn.className = 'download-btn video-btn'; dlBtn.textContent = 'Download'; const retryBtn = document.createElement('button'); retryBtn.className = 'retry-btn'; retryBtn.style.display = 'none'; retryBtn.textContent = 'Retry'; dlActions.appendChild(dlBtn); dlActions.appendChild(retryBtn); const progressC = document.createElement('div'); progressC.className = 'progress-container'; progressC.style.display = 'none'; const progressBar = document.createElement('div'); progressBar.className = 'progress-bar'; const progressFill = document.createElement('div'); progressFill.className = 'progress-fill'; progressBar.appendChild(progressFill); const progressText = document.createElement('span'); progressText.className = 'progress-text'; progressText.textContent = '0%'; progressC.appendChild(progressBar); progressC.appendChild(progressText); // progress-retry-btn and download-again-btn (required by startDownloadVideoOrAudio) const progRetryBtn = document.createElement('button'); progRetryBtn.className = 'progress-retry-btn'; progRetryBtn.title = 'Retry'; progRetryBtn.style.display = 'none'; progRetryBtn.textContent = '↻'; const dlAgainBtn = document.createElement('button'); dlAgainBtn.className = 'download-again-btn'; dlAgainBtn.title = 'Download again'; dlAgainBtn.style.display = 'none'; dlAgainBtn.textContent = '⬇'; dlVideoContainer.appendChild(progRetryBtn); dlVideoContainer.appendChild(dlAgainBtn); dlVideoContainer.appendChild(dlInfo); dlVideoContainer.appendChild(dlActions); dlVideoContainer.appendChild(progressC); videoSelectDiv.appendChild(dlVideoContainer); videoForm.appendChild(videoSelectDiv); // Download audio quality select const audioForm = document.createElement('form'); audioForm.className = 'formulariodescargaaudio ocultarframe'; const audioSelectDiv = document.createElement('div'); audioSelectDiv.className = 'containerall'; const audioSelect = document.createElement('select'); audioSelect.className = 'selectcalidadesaudio ocultarframeaudio'; audioSelect.required = true; [['', 'Audio Quality', true], ['flac', 'Audio FLAC UHQ'], ['wav', 'Audio WAV UHQ'], ['webm', 'Audio WEBM UHQ'], ['mp3', 'Audio MP3 Default'], ['m4a', 'Audio M4A'], ['aac', 'Audio AAC'], ['opus', 'Audio OPUS'], ['ogg', 'Audio OGG'] ].forEach(([val, text, dis]) => { const opt = document.createElement('option'); opt.value = val; opt.textContent = text; if (dis) { opt.selected = true; opt.disabled = true; } audioSelect.appendChild(opt); }); audioSelectDiv.appendChild(audioSelect); // Download audio container const dlAudioContainer = document.createElement('div'); dlAudioContainer.id = 'descargandomp3'; dlAudioContainer.className = 'download-container ocultarframeaudio'; const dlInfoA = document.createElement('div'); dlInfoA.className = 'download-info'; const dlTextA = document.createElement('span'); dlTextA.className = 'download-text'; dlTextA.textContent = 'Download Audio And Please Wait...'; const dlQualityA = document.createElement('span'); dlQualityA.className = 'download-quality'; dlInfoA.appendChild(dlTextA); dlInfoA.appendChild(dlQualityA); const dlActionsA = document.createElement('div'); dlActionsA.className = 'download-actions'; const dlBtnA = document.createElement('button'); dlBtnA.className = 'download-btn audio-btn'; dlBtnA.textContent = 'Download'; const retryBtnA = document.createElement('button'); retryBtnA.className = 'retry-btn'; retryBtnA.style.display = 'none'; retryBtnA.textContent = 'Retry'; dlActionsA.appendChild(dlBtnA); dlActionsA.appendChild(retryBtnA); const progressCA = document.createElement('div'); progressCA.className = 'progress-container'; progressCA.style.display = 'none'; const progressBarA = document.createElement('div'); progressBarA.className = 'progress-bar'; const progressFillA = document.createElement('div'); progressFillA.className = 'progress-fill'; progressBarA.appendChild(progressFillA); const progressTextA = document.createElement('span'); progressTextA.className = 'progress-text'; progressTextA.textContent = '0%'; progressCA.appendChild(progressBarA); progressCA.appendChild(progressTextA); // progress-retry-btn and download-again-btn for audio const progRetryBtnA = document.createElement('button'); progRetryBtnA.className = 'progress-retry-btn'; progRetryBtnA.title = 'Retry'; progRetryBtnA.style.display = 'none'; progRetryBtnA.textContent = '↻'; const dlAgainBtnA = document.createElement('button'); dlAgainBtnA.className = 'download-again-btn'; dlAgainBtnA.title = 'Download again'; dlAgainBtnA.style.display = 'none'; dlAgainBtnA.textContent = '⬇'; dlAudioContainer.appendChild(progRetryBtnA); dlAudioContainer.appendChild(dlAgainBtnA); dlAudioContainer.appendChild(dlInfoA); dlAudioContainer.appendChild(dlActionsA); dlAudioContainer.appendChild(progressCA); audioSelectDiv.appendChild(dlAudioContainer); audioForm.appendChild(audioSelectDiv); const collapsible = document.createElement('div'); collapsible.className = 'content_collapsible_colors'; collapsible.style.marginTop = '2px'; collapsible.appendChild(videoForm); collapsible.appendChild(audioForm); container.appendChild(form); container.appendChild(collapsible); main.appendChild(container); return main; } function renderizarButtons() { if (isYTMusic) { // YouTube Music: inject ABOVE the tab header container (Tiếp theo/Lời nhạc/Liên quan) const sidePanel = document.querySelector('#player-page #side-panel'); const tabHeaders = sidePanel && sidePanel.querySelector('.tab-header-container'); const addButton = tabHeaders || document.querySelector('#tab-renderer'); // YTM loads lazily - if element not found, retry if (!addButton && validoBotones) { if (!renderizarButtons._ytmRetries) renderizarButtons._ytmRetries = 0; if (renderizarButtons._ytmRetries < 30) { renderizarButtons._ytmRetries++; setTimeout(renderizarButtons, 500); } return; } renderizarButtons._ytmRetries = 0; if (addButton && validoBotones) { validoBotones = false; const sidePanel = document.querySelector('ytmusic-player-page #side-panel'); if (sidePanel) { // CREATE A COMMON WRAPPER FOR TOOLS AND TAB HEADERS (Top Box) let sideWrapper = $id('ytm-side-panel-wrapper'); if (!sideWrapper) { sideWrapper = document.createElement('div'); sideWrapper.id = 'ytm-side-panel-wrapper'; sidePanel.insertBefore(sideWrapper, addButton); } const toolbar = buildYTMToolbar(); sideWrapper.appendChild(toolbar); // ADD A LINE SEPARATOR const line = document.createElement('div'); line.className = 'ytm-side-panel-divider'; sideWrapper.appendChild(line); // MOVE THE TAB HEADER INTO THE TOP BOX sideWrapper.appendChild(addButton); } } } else { // Regular YouTube const addButton = document.querySelector('.style-scope .ytd-watch-metadata'); const addButton2 = document.querySelector('#contents'); if (addButton && validoBotones) { const isVisible = addButton.offsetParent !== null; if (isVisible || addButton2) { validoBotones = false; const toolbar = buildYTMToolbar(); // Insert before metadata to be above descriptions/comments addButton.parentNode.insertBefore(toolbar, addButton); } } } const formulariodescarga = $e('.formulariodescarga'); const formulariodescargaaudio = $e('.formulariodescargaaudio'); const btn1mp4 = $e('.btn1'); const btn2mp3 = $e('.btn2'); const btn3cancel = $e('.btn3'); const selectcalidades = $e('.selectcalidades'); const selectcalidadesaudio = $e('.selectcalidadesaudio'); [formulariodescarga, formulariodescargaaudio].forEach(form => { if (!form) return; if (form.dataset.ytToolsPreventDefault === '1') return; form.addEventListener('click', e => e.preventDefault()); form.dataset.ytToolsPreventDefault = '1'; }); if (selectcalidades && selectcalidades.dataset.ytToolsBound !== '1') { selectcalidades.dataset.ytToolsBound = '1'; selectcalidades.addEventListener('change', e => { const quality = e.target.value; if (!quality) return; // Don't proceed if no quality selected const downloadContainer = $id('descargando'); const downloadText = downloadContainer.querySelector('.download-text'); const downloadQuality = downloadContainer.querySelector('.download-quality'); const downloadBtn = downloadContainer.querySelector('.download-btn'); const retryBtn = downloadContainer.querySelector('.retry-btn'); const progressContainer = downloadContainer.querySelector('.progress-container'); // Update UI downloadContainer.classList.add('video'); downloadContainer.classList.remove('ocultarframe'); downloadText.textContent = `Download ${quality.toUpperCase()} And Please Wait...`; downloadQuality.textContent = `${quality}p`; // Show download button, hide progress downloadBtn.style.display = 'block'; retryBtn.style.display = 'none'; progressContainer.style.display = 'none'; // Store quality for later use downloadContainer.dataset.quality = quality; downloadContainer.dataset.type = 'video'; }); } if (selectcalidadesaudio && selectcalidadesaudio.dataset.ytToolsBound !== '1') { selectcalidadesaudio.dataset.ytToolsBound = '1'; selectcalidadesaudio.addEventListener('change', e => { const format = e.target.value; if (!format) return; // Don't proceed if no format selected const downloadContainer = $id('descargandomp3'); const downloadText = downloadContainer.querySelector('.download-text'); const downloadQuality = downloadContainer.querySelector('.download-quality'); const downloadBtn = downloadContainer.querySelector('.download-btn'); const retryBtn = downloadContainer.querySelector('.retry-btn'); const progressContainer = downloadContainer.querySelector('.progress-container'); // Update UI downloadContainer.classList.add('audio'); downloadContainer.classList.remove('ocultarframeaudio'); downloadText.textContent = `Download ${format.toUpperCase()} And Please Wait...`; downloadQuality.textContent = format.toUpperCase(); // Show download button, hide progress downloadBtn.style.display = 'block'; retryBtn.style.display = 'none'; progressContainer.style.display = 'none'; // Store format for later use downloadContainer.dataset.quality = format; downloadContainer.dataset.type = 'audio'; }); } if (btn3cancel && btn3cancel.dataset.ytToolsBound !== '1') { btn3cancel.dataset.ytToolsBound = '1'; btn3cancel.addEventListener('click', () => { // Hide all selects selectcalidades?.classList.add('ocultarframe'); selectcalidadesaudio?.classList.add('ocultarframeaudio'); // Hide all download containers const videoContainer = $id('descargando'); const audioContainer = $id('descargandomp3'); if (videoContainer) { videoContainer.classList.add('ocultarframe'); videoContainer.classList.remove('video', 'audio', 'completed'); videoContainer.removeAttribute('data-quality'); videoContainer.removeAttribute('data-type'); videoContainer.removeAttribute('data-downloading'); videoContainer.removeAttribute('data-url-opened'); videoContainer.removeAttribute('data-last-download-url'); videoContainer.querySelector?.('.download-again-btn')?.style && (videoContainer.querySelector('.download-again-btn').style.display = 'none'); } if (audioContainer) { audioContainer.classList.add('ocultarframeaudio'); audioContainer.classList.remove('video', 'audio', 'completed'); audioContainer.removeAttribute('data-quality'); audioContainer.removeAttribute('data-type'); audioContainer.removeAttribute('data-downloading'); audioContainer.removeAttribute('data-url-opened'); audioContainer.removeAttribute('data-last-download-url'); audioContainer.querySelector?.('.download-again-btn')?.style && (audioContainer.querySelector('.download-again-btn').style.display = 'none'); } // Hide all forms if (formulariodescarga) formulariodescarga.style.setProperty('display', 'none', 'important'); if (formulariodescargaaudio) formulariodescargaaudio.style.setProperty('display', 'none', 'important'); // Reset forms formulariodescarga?.reset(); formulariodescargaaudio?.reset(); }); } // Add event listeners for download buttons (only once) if (!__ytToolsRuntime.downloadClickHandlerInitialized) { __ytToolsRuntime.downloadClickHandlerInitialized = true; document.addEventListener('click', (e) => { const target = e.target; if (!(target instanceof Element)) return; const clicked = target.closest('.download-btn') || target.closest('.retry-btn') || target.closest('.progress-retry-btn') || target.closest('.download-again-btn'); if (!clicked) return; const container = clicked.closest('.download-container'); if (!container) return; const quality = container.dataset.quality; const type = container.dataset.type; // download-again just re-opens the last URL (no restart) if (clicked.classList.contains('download-again-btn')) { const url = container.dataset.lastDownloadUrl; if (url) window.open(url); return; } if (!quality || !type) return; if (clicked.classList.contains('progress-retry-btn')) { container.dataset.downloading = 'false'; container.dataset.urlOpened = 'false'; container.dataset.lastDownloadUrl = ''; container.querySelector?.('.download-again-btn')?.style && (container.querySelector('.download-again-btn').style.display = 'none'); } startDownloadVideoOrAudio(quality, container); }); } if (btn1mp4 && btn1mp4.dataset.ytToolsBound !== '1') { btn1mp4.dataset.ytToolsBound = '1'; btn1mp4.addEventListener('click', () => { // Show video select, hide audio select selectcalidades?.classList.remove('ocultarframe'); selectcalidadesaudio?.classList.add('ocultarframeaudio'); // Hide all download containers const videoContainer = $id('descargando'); const audioContainer = $id('descargandomp3'); if (videoContainer) { videoContainer.classList.add('ocultarframe'); videoContainer.classList.remove('video', 'audio', 'completed'); videoContainer.removeAttribute('data-quality'); videoContainer.removeAttribute('data-type'); videoContainer.removeAttribute('data-downloading'); videoContainer.removeAttribute('data-url-opened'); } if (audioContainer) { audioContainer.classList.add('ocultarframeaudio'); audioContainer.classList.remove('video', 'audio', 'completed'); audioContainer.removeAttribute('data-quality'); audioContainer.removeAttribute('data-type'); audioContainer.removeAttribute('data-downloading'); audioContainer.removeAttribute('data-url-opened'); } // Show video form, hide audio form if (formulariodescarga) formulariodescarga.style.setProperty('display', 'flex', 'important'); if (formulariodescargaaudio) formulariodescargaaudio.style.setProperty('display', 'none', 'important'); // Reset forms formulariodescarga?.reset(); formulariodescargaaudio?.reset(); // On YTM: auto-select 720p and show download button immediately if (isYTMusic && selectcalidades) { selectcalidades.value = '720'; selectcalidades.dispatchEvent(new Event('change', { bubbles: true })); } }); } if (btn2mp3 && btn2mp3.dataset.ytToolsBound !== '1') { btn2mp3.dataset.ytToolsBound = '1'; btn2mp3.addEventListener('click', () => { // Show audio select, hide video select selectcalidadesaudio?.classList.remove('ocultarframeaudio'); selectcalidades?.classList.add('ocultarframe'); // Hide all download containers const videoContainer = $id('descargando'); const audioContainer = $id('descargandomp3'); if (videoContainer) { videoContainer.classList.add('ocultarframe'); videoContainer.classList.remove('video', 'audio', 'completed'); videoContainer.removeAttribute('data-quality'); videoContainer.removeAttribute('data-type'); videoContainer.removeAttribute('data-downloading'); videoContainer.removeAttribute('data-url-opened'); } if (audioContainer) { audioContainer.classList.add('ocultarframeaudio'); audioContainer.classList.remove('video', 'audio', 'completed'); audioContainer.removeAttribute('data-quality'); audioContainer.removeAttribute('data-type'); audioContainer.removeAttribute('data-downloading'); audioContainer.removeAttribute('data-url-opened'); } // Show audio form, hide video form if (formulariodescargaaudio) formulariodescargaaudio.style.setProperty('display', 'flex', 'important'); if (formulariodescarga) formulariodescarga.style.setProperty('display', 'none', 'important'); // Reset forms formulariodescargaaudio?.reset(); formulariodescarga?.reset(); // On YTM: auto-select MP3 and show download button immediately if (isYTMusic && selectcalidadesaudio) { selectcalidadesaudio.value = 'mp3'; selectcalidadesaudio.dispatchEvent(new Event('change', { bubbles: true })); } }); } // Invertir contenido const btnImagen = $e('#imagen'); // valido modo oscuro y venta de video // Repeat video button let countRepeat = 0; // count const repeat = $e('#repeatvideo'); // Repeat button const videoFull = isYTMusic ? $e('video') : $e('#movie_player > div.html5-video-container > video'); if (repeat != undefined) { repeat.onclick = () => { if ( (isYTMusic ? videoFull : $e('#cinematics > div')) != undefined || videoFull != undefined ) { countRepeat += 1; switch (countRepeat) { case 1: const videoEl = isYTMusic ? $e('video') : document .querySelector('#movie_player > div.html5-video-container > video'); videoEl?.setAttribute('loop', 'true'); if (isYTMusic) { // On YTM, replace SVG icon using DOM API const newSvg = createSvgIcon([ 'M0 0h24v24H0z', 'M4 12v-3c0 -1.336 .873 -2.468 2.08 -2.856m3.92 -.144h10m-3 -3l3 3l-3 3', 'M20 12v3a3 3 0 0 1 -.133 .886m-1.99 1.984a3 3 0 0 1 -.877 .13h-13m3 3l-3 -3l3 -3', 'M3 3l18 18' ]); repeat.replaceChildren(newSvg); } else { const imarepeat = $e('.icon-tabler-repeat'); if (imarepeat) imarepeat.innerHTML = safeHTML(` <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-repeat-off" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"> <path stroke="none" d="M0 0h24v24H0z" fill="none"></path> <path d="M4 12v-3c0 -1.336 .873 -2.468 2.08 -2.856m3.92 -.144h10m-3 -3l3 3l-3 3"></path> <path d="M20 12v3a3 3 0 0 1 -.133 .886m-1.99 1.984a3 3 0 0 1 -.877 .13h-13m3 3l-3 -3l3 -3"></path> <path d="M3 3l18 18"></path> </svg> `); } break; case 2: countRepeat = 0; const videoEl2 = isYTMusic ? $e('video') : document .querySelector('#movie_player > div.html5-video-container > video'); videoEl2?.removeAttribute('loop'); if (isYTMusic) { const newSvg2 = createSvgIcon([ 'M0 0h24v24H0z', 'M4 12v-3a3 3 0 0 1 3 -3h13m-3 -3l3 3l-3 3', 'M20 12v3a3 3 0 0 1 -3 3h-13m3 3l-3 -3l3 -3' ]); repeat.replaceChildren(newSvg2); } else { const imarepeat2 = $e('.icon-tabler-repeat'); if (imarepeat2) imarepeat2.innerHTML = safeHTML(` <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-repeat" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"> <path stroke="none" d="M0 0h24v24H0z" fill="none"></path> <path d="M4 12v-3a3 3 0 0 1 3 -3h13m-3 -3l3 3l-3 3"></path> <path d="M20 12v3a3 3 0 0 1 -3 3h-13m3 3l-3 -3l3 -3"></path> </svg>`); } break; } } } } // Background transparent const cinematica = $e('#cinematics > div'); if (cinematica != undefined) { cinematica.style.cssText = 'position: fixed; inset: 0px; pointer-events: none; transform: scale(1.5, 2)'; } if (btnImagen != undefined) { btnImagen.onclick = () => { if ( $e('#cinematics > div') != undefined || videoFull != undefined ) { const parametrosURL = new URLSearchParams(window.location.search); let enlace = parametrosURL.get('v'); const imageUrl = `https://i.ytimg.com/vi/${enlace}/maxresdefault.jpg`; fetch(imageUrl) .then((response) => { if (!response.ok) { throw new Error(`HTTP error! Status: ${response.status}`); } return response.blob(); }) .then((blob) => { const imageSizeKB = blob.size / 1024; if (imageSizeKB >= 20) { window.open( `https://i.ytimg.com/vi/${enlace}/maxresdefault.jpg`, 'popUpWindow', 'height=500,width=400,left=100,top=100,resizable=yes,scrollbars=yes,toolbar=yes,menubar=no,location=no,directories=no, status=yes' ); const imageUrlObject = URL.createObjectURL(blob); const enlaceDescarga = $cl('a'); enlaceDescarga.href = imageUrlObject; const titleVideo = isYTMusic ? ($e('ytmusic-player-bar .title')?.textContent?.trim() || 'YouTube Music') : ($e('h1.style-scope.ytd-watch-metadata')?.innerText || 'video'); enlaceDescarga.download = `${titleVideo}_maxresdefault.jpg`; enlaceDescarga.click(); URL.revokeObjectURL(imageUrlObject); } else { console.log( 'La imagen no excede los 20 KB. No se descargará.' ); } }) .catch((error) => { alert('No found image'); console.error('Error al obtener la imagen:', error); }); } }; } // [REMOVED] Duplicate background image handler — handled at end of script (line ~6648+). const viewPictureToPicture = $e( '.video_picture_to_picture' ); if (viewPictureToPicture != undefined) { viewPictureToPicture.onclick = () => { const video = $e('video'); if ('pictureInPictureEnabled' in document) { if (!document.pictureInPictureElement) { video .requestPictureInPicture() .then(() => { }) .catch((error) => { console.error( 'Error al activar el modo Picture-in-Picture:', error ); }); } else { // video picture } } else { alert('Picture-in-Picture not supported'); } }; } const screenShotVideo = $e('.screenshot_video'); if (screenShotVideo != undefined) { screenShotVideo.onclick = () => { const video = $e('video'); const canvas = $cl('canvas'); canvas.width = video.videoWidth; canvas.height = video.videoHeight; const context = canvas.getContext('2d'); context.drawImage(video, 0, 0, canvas.width, canvas.height); const imagenURL = canvas.toDataURL('image/png'); const enlaceDescarga = $cl('a'); enlaceDescarga.href = imagenURL; const titleVideo = isYTMusic ? ($e('ytmusic-player-bar .title')?.textContent?.trim() || 'YouTube Music') : ($e('h1.style-scope.ytd-watch-metadata')?.innerText || 'video'); enlaceDescarga.download = `${video.currentTime.toFixed( 0 )}s_${titleVideo}.png`; enlaceDescarga.click(); }; } else { const containerButtons = $e('.containerButtons'); if (containerButtons != undefined) { containerButtons.innerHTML = safeHTML(''); } } // [REMOVED] clearInterval(renderizarButtons) — was passing a function, not an interval ID. } function hideCanvas() { const canvas = $id('wave-visualizer-canvas'); if (canvas) { canvas.style.opacity = '0'; if (controlPanel) { controlPanel.style.opacity = '0'; } } } function showCanvas() { const canvas = $id('wave-visualizer-canvas'); if (audioCtx && audioCtx.state === 'suspended') { audioCtx.resume(); } if (canvas) { canvas.style.opacity = '1'; if (controlPanel) controlPanel.style.opacity = '1'; } } async function startDownloadVideoOrAudio(format, container) { const videoURL = window.location.href; // Notify('info', 'Starting download...'); // Check if already downloading if (container.dataset.downloading === 'true') { return; } // Stop any previous poller (avoid leaks on retry) try { if (container.__ytDownloadPoll) { clearInterval(container.__ytDownloadPoll); container.__ytDownloadPoll = null; } } catch (e) { } // Get UI elements from the container const downloadBtn = container.querySelector('.download-btn'); const retryBtn = container.querySelector('.retry-btn'); const progressRetryBtn = container.querySelector('.progress-retry-btn'); const downloadAgainBtn = container.querySelector('.download-again-btn'); const progressContainer = container.querySelector('.progress-container'); const progressFill = container.querySelector('.progress-fill'); const progressText = container.querySelector('.progress-text'); const downloadText = container.querySelector('.download-text'); // Set downloading flag container.dataset.downloading = 'true'; container.dataset.urlOpened = 'false'; container.dataset.lastDownloadUrl = ''; // Update UI to show progress downloadBtn.style.display = 'none'; retryBtn.style.display = 'none'; progressRetryBtn.style.display = 'block'; if (downloadAgainBtn) downloadAgainBtn.style.display = 'none'; progressContainer.style.display = 'flex'; progressFill.style.width = '0%'; progressText.textContent = '0%'; const fetchJsonWithTimeout = async (url, timeoutMs = 20000) => { const ctrl = new AbortController(); const t = setTimeout(() => ctrl.abort(), timeoutMs); try { const res = await fetch(url, { signal: ctrl.signal }); if (!res.ok) throw new Error(`HTTP ${res.status}`); return await res.json(); } finally { clearTimeout(t); } }; const setErrorState = () => { retryBtn.style.display = 'block'; progressContainer.style.display = 'none'; progressRetryBtn.style.display = 'none'; if (downloadAgainBtn) downloadAgainBtn.style.display = 'none'; container.dataset.downloading = 'false'; container.dataset.urlOpened = 'false'; container.dataset.lastDownloadUrl = ''; }; const markCompleteAndOpen = (downloadUrl) => { if (!downloadUrl) { setErrorState(); return; } // Save for the \"download again\" button container.dataset.lastDownloadUrl = String(downloadUrl); // Check if URL was already opened if (container.dataset.urlOpened === 'true') return; // Mark URL as opened container.dataset.urlOpened = 'true'; // Update UI to show completion container.classList.add('completed'); container.classList.remove('video', 'audio'); downloadText.textContent = 'Download Complete!'; progressFill.style.width = '100%'; progressText.textContent = '100%'; progressRetryBtn.style.display = 'none'; if (downloadAgainBtn) downloadAgainBtn.style.display = 'flex'; container.dataset.downloading = 'false'; try { window.open(downloadUrl); } catch (e) { console.warn('Could not open download URL:', e); } }; const pollProgressUrl = (progressURL) => { container.__ytDownloadPoll = setInterval(async () => { try { const progressData = await fetchJsonWithTimeout(progressURL, 15000); const progress = Math.min((Number(progressData.progress) || 0) / 10, 100); progressFill.style.width = `${progress}%`; progressText.textContent = `${Math.round(progress)}%`; if (Number(progressData.progress) >= 1000 && progressData.download_url) { clearInterval(container.__ytDownloadPoll); container.__ytDownloadPoll = null; markCompleteAndOpen(progressData.download_url); } } catch (e) { console.error('Error in progress:', e); clearInterval(container.__ytDownloadPoll); container.__ytDownloadPoll = null; setErrorState(); } }, 3000); }; const trySaveNowProvider = async (baseUrl) => { const url = new URL('/ajax/download.php', baseUrl); url.searchParams.set('copyright', '0'); url.searchParams.set('allow_extended_duration', '1'); url.searchParams.set('format', String(format)); url.searchParams.set('url', videoURL); url.searchParams.set('api', API_KEY_DEVELOPERMDCM); const data = await fetchJsonWithTimeout(url.toString(), 25000); if (!data?.success || !data?.progress_url) { throw new Error('SaveNow provider did not return success/progress_url'); } return data; }; const tryDubsProvider = async () => { const videoId = paramsVideoURL(); if (!videoId) throw new Error('Missing videoId'); const startUrl = new URL(DUBS_START_ENDPOINT); startUrl.searchParams.set('id', videoId); startUrl.searchParams.set('format', String(format)); const startData = await fetchJsonWithTimeout(startUrl.toString(), 25000); if (!startData?.success || !startData?.progressId) { throw new Error('Dubs provider did not return success/progressId'); } const statusUrl = new URL(DUBS_STATUS_ENDPOINT); statusUrl.searchParams.set('id', startData.progressId); container.__ytDownloadPoll = setInterval(async () => { try { const st = await fetchJsonWithTimeout(statusUrl.toString(), 20000); const rawProgress = Number(st?.progress) || 0; // 0..1000 const progress = Math.min(rawProgress / 10, 100); progressFill.style.width = `${progress}%`; progressText.textContent = `${Math.round(progress)}%`; if (st?.finished && st?.downloadUrl) { clearInterval(container.__ytDownloadPoll); container.__ytDownloadPoll = null; markCompleteAndOpen(st.downloadUrl); } } catch (e) { console.error('❌ Error polling dubs status:', e); clearInterval(container.__ytDownloadPoll); container.__ytDownloadPoll = null; setErrorState(); } }, 3000); }; try { let started = null; let lastErr = null; for (const base of DOWNLOAD_API_FALLBACK_BASES) { try { started = await trySaveNowProvider(base); break; } catch (e) { lastErr = e; } } if (started?.success && started?.progress_url) { pollProgressUrl(started.progress_url); return; } console.warn('SaveNow providers failed, falling back to dubs.io', lastErr); await tryDubsProvider(); } catch (error) { setErrorState(); console.error('❌ Error starting download:', error); } } // Define themes const themes = [{ name: 'Default / Reload', gradient: '', textColor: '', raised: '', btnTranslate: '', CurrentProgressVideo: '', videoDuration: '', colorIcons: '', textLogo: '', primaryColor: '', secondaryColor: '', }, { name: 'Midnight Blue', gradient: 'linear-gradient(135deg, #1e3a8a, #3b82f6)', textColor: '#ffffff', raised: '#1e3a8a', btnTranslate: '#000', CurrentProgressVideo: '#0f0', videoDuration: '#fff', colorIcons: '#fff', textLogo: '#f00', }, { name: 'Forest Green', gradient: 'linear-gradient(135deg, #14532d, #22c55e)', textColor: '#ffffff', raised: '#14532d', btnTranslate: '#000', CurrentProgressVideo: '#0f0', videoDuration: '#fff', colorIcons: '#fff', textLogo: '#f00', }, { name: 'Sunset Orange', gradient: 'linear-gradient(135deg, #7c2d12, #f97316)', textColor: '#ffffff', raised: '#7c2d12', btnTranslate: '#000', CurrentProgressVideo: '#0f0', videoDuration: '#fff', colorIcons: '#fff', textLogo: '#f00', }, { name: 'Royal Purple', gradient: 'linear-gradient(135deg, #2e1065, #4c1d95)', textColor: '#ffffff', raised: '#4c1d95', btnTranslate: '#000', CurrentProgressVideo: '#0f0', videoDuration: '#fff', colorIcons: '#fff', textLogo: '#f00', }, { name: 'Cherry Blossom', gradient: 'linear-gradient(135deg, #a9005c, #fc008f)', textColor: '#ffffff', raised: '#fc008f', btnTranslate: '#000', CurrentProgressVideo: '#0f0', videoDuration: '#fff', colorIcons: '#fff', textLogo: '#f00', }, { name: 'Red Dark', gradient: 'linear-gradient(135deg, #790909, #f70131)', textColor: '#ffffff', raised: '#790909', btnTranslate: '#000', CurrentProgressVideo: '#0f0', videoDuration: '#fff', colorIcons: '#fff', textLogo: '#f00', }, { name: 'Raind ', gradient: 'linear-gradient(90deg, #3f5efb 0%, #fc466b 100%)', textColor: '#ffffff', raised: '#3f5efb', btnTranslate: '#000', CurrentProgressVideo: '#0f0', videoDuration: '#fff', colorIcons: '#fff', textLogo: '#f00', }, { name: 'Neon', gradient: 'linear-gradient(273deg, #ee49fd 0%, #6175ff 100%)', textColor: '#ffffff', raised: '#ee49fd', btnTranslate: '#000', CurrentProgressVideo: '#0f0', videoDuration: '#fff', colorIcons: '#fff', textLogo: '#f00', }, { name: 'Azure', gradient: 'linear-gradient(273deg, #0172af 0%, #74febd 100%)', textColor: '#ffffff', raised: '#0172af', btnTranslate: '#000', CurrentProgressVideo: '#0f0', videoDuration: '#fff', colorIcons: '#fff', textLogo: '#f00', }, { name: 'Butterfly', gradient: 'linear-gradient(273deg, #ff4060 0%, #fff16a 100%)', textColor: '#ffffff', raised: '#ff4060', btnTranslate: '#000', CurrentProgressVideo: '#0f0', videoDuration: '#fff', colorIcons: '#fff', textLogo: '#f00', }, { name: 'Colombia', gradient: 'linear-gradient(174deg, #fbf63f 0%, #0000bb 45%, #ff0000 99%)', textColor: '#ffffff', raised: '#0000bb', btnTranslate: '#000', CurrentProgressVideo: '#0f0', videoDuration: '#fff', colorIcons: '#fff', textLogo: '#f00', },]; // Create our enhancement panel const panel = $cl('div'); panel.id = 'yt-enhancement-panel'; const panelOverlay = $cl('div'); panelOverlay.id = 'panel-overlay'; $ap(panelOverlay); // Generate theme options HTML const themeOptionsHTML = themes .map( (theme, index) => ` <label > <div class="theme-option"> <div class="theme-preview" style="background: ${theme.gradient};"></div> <input type="radio" name="theme" value="${index}" ${index === 0 ? 'checked' : '' }> <span style="${theme.name === 'Default / Reload Page' ? 'color: red; ' : ''}" class="theme-name">${theme.name}</span> </div> </label> ` ) .join(''); const languageOptionsHTML = Object.entries(languagesTranslate) .map(([code, name]) => { const selected = code === 'en' ? 'selected' : ''; return `<option value="${code}" ${selected}>${name}</option>`; }) .join(''); function checkDarkModeActive() { // YTM is always dark mode if (isYTMusic) return 'dark'; const prefCookie = document.cookie.split('; ').find(c => c.startsWith('PREF=')); if (!prefCookie) return 'light'; const prefValue = prefCookie.substring(5); const params = new URLSearchParams(prefValue); const f6Value = params.get('f6'); const darkModes = ['400', '4000000', '40000400', '40000000']; return darkModes.includes(f6Value) ? 'dark' : 'light'; } let isDarkModeActive = checkDarkModeActive(); // Use Trusted Types to set innerHTML const menuHTML = ` <div class="container-mdcm"> <div class="header-mdcm"> <h1> <i class="fa-brands fa-youtube"></i> YouTube Tools</h1> <div class="icons-mdcm"> <a href="https://update.greasyfork.org/scripts/576162/YouTube%20Ultimate%20Tools.user.js" target="_blank"> <button class="icon-btn-mdcm"> <i class="fa-solid fa-arrows-rotate"></i> </button> </a> <a href="https://github.com/akari310" target="_blank"> <button class="icon-btn-mdcm"> <i class="fa-brands fa-github"></i> </button> </a> <button class="icon-btn-mdcm" id="shareBtn-mdcm"> <i class="fa-solid fa-share-alt"></i> </button> <button class="icon-btn-mdcm" id="importExportBtn"> <i class="fa-solid fa-file-import"></i> </button> <button id="menu-settings-icon" class="icon-btn-mdcm tab-mdcm" data-tab="menu-settings"> <i class="fa-solid fa-gear"></i> </button> <button class="icon-btn-mdcm close_menu_settings"> <i class="fa-solid fa-xmark"></i> </button> </div> </div> <div class="tabs-mdcm"> <button class="tab-mdcm active" data-tab="general"> <i class="fa-solid fa-shield-halved"></i> General </button> <button class="tab-mdcm" data-tab="themes"> <i class="fa-solid fa-palette"></i> Themes </button> <button class="tab-mdcm" data-tab="stats"> <i class="fa-solid fa-square-poll-vertical"></i> Stats </button> <button class="tab-mdcm" data-tab="headers"> <i class="fa-regular fa-newspaper"></i> Header </button> </div> <div id="general" class="tab-content active"> <div class="options-mdcm"> <label ${isYTMusic ? 'style="display:none"' : ''}> <div class="option-mdcm"> <input type="checkbox" class="checkbox-mdcm" id="hide-comments-toggle"> Hide Comments </div> </label> <label ${isYTMusic ? 'style="display:none"' : ''}> <div class="option-mdcm"> <input type="checkbox" class="checkbox-mdcm" id="hide-sidebar-toggle"> Hide Sidebar </div> </label> <label ${isYTMusic ? 'style="display:none"' : ''}> <div class="option-mdcm"> <input type="checkbox" class="checkbox-mdcm" id="autoplay-toggle"> Disable Autoplay </div> </label> <label ${isYTMusic ? 'style="display:none"' : ''}> <div class="option-mdcm"> <input type="checkbox" class="checkbox-mdcm" id="subtitles-toggle"> Disable Subtitles </div> </label> <label ${isYTMusic ? 'style="display:none"' : ''}> <div class="option-mdcm"> <input type="checkbox" class="checkbox-mdcm" checked id="dislikes-toggle"> Show Dislikes </div> </label> <label ${isYTMusic ? 'style="display:none"' : ''}> <div class="option-mdcm"> <input type="checkbox" class="checkbox-mdcm" id="like-dislike-bar-toggle"> Like vs Dislike bar </div> </label> <label ${isYTMusic ? 'style="display:none"' : ''}> <div class="option-mdcm"> <input type="checkbox" class="checkbox-mdcm" id="bookmarks-toggle"> Bookmarks (timestamps) </div> </label> <label ${isYTMusic ? 'style="display:none"' : ''}> <div class="option-mdcm"> <input type="checkbox" class="checkbox-mdcm" id="continue-watching-toggle"> Continue watching </div> </label> <label ${isYTMusic ? 'style="display:none"' : ''}> <div class="option-mdcm"> <input type="checkbox" class="checkbox-mdcm" id="shorts-channel-name-toggle"> Shorts: show channel name </div> </label> <label> <div class="option-mdcm"> <input type="checkbox" class="checkbox-mdcm" checked id="nonstop-playback-toggle"> Nonstop playback </div> </label> <label> <div class="option-mdcm"> <input type="checkbox" class="checkbox-mdcm" id="audio-only-toggle"> Audio-only mode </div> </label> <label> <div class="option-mdcm"> <input type="checkbox" class="checkbox-mdcm" id="audio-only-tab-toggle"> Audio-only this tab </div> </label> <label> <div class="option-mdcm"> <input type="checkbox" class="checkbox-mdcm" id="themes-toggle"> Active Themes </div> </label> <label ${isYTMusic ? 'style="display:none"' : ''}> <div class="option-mdcm"> <input type="checkbox" class="checkbox-mdcm" id="translation-toggle"> Translate comments </div> </label> <label ${isYTMusic ? 'style="display:none"' : ''}> <div class="option-mdcm"> <input type="checkbox" class="checkbox-mdcm" id="avatars-toggle"> Download avatars </div> </label> <label ${isYTMusic ? 'style="display:none"' : ''}> <div class="option-mdcm"> <input type="checkbox" class="checkbox-mdcm" id="reverse-mode-toggle"> Reverse mode </div> </label> <label> <div class="option-mdcm"> <input type="checkbox" class="checkbox-mdcm" id="cinematic-lighting-toggle"> ${isYTMusic ? 'Ambient Mode' : 'Cinematic Mode'} </div> </label> <label> <div class="option-mdcm"> <input type="checkbox" class="checkbox-mdcm" checked id="wave-visualizer-toggle"> Wave visualizer Beta </div> </label> <label ${!isYTMusic ? 'style="display:none"' : ''}> <div class="option-mdcm"> <input type="checkbox" class="checkbox-mdcm" id="custom-timeline-color-toggle"> Royal Purple Timeline </div> </label> <label ${isYTMusic ? 'style="display:none"' : ''}> <div class="option-mdcm"> <input type="checkbox" class="checkbox-mdcm" id="sync-cinematic-toggle"> Sync Ambient Mode YT </div> </label> <div class="quality-selector-mdcm" style="grid-column: span 2;"> <div class="select-wrapper-mdcm"> <label>Side/Playlist Panel Style: <select class="tab-button-active" id="side-panel-style-select"> <option value="blur">Blur</option> <option value="liquid">Liquid Glass</option> <option value="transparent">Transparent</option> </select> </label> </div> </div> <div class="quality-selector-mdcm" style="grid-column: span 2;"> <div class="select-wrapper-mdcm"> <label>Effect wave visualizer: <select class="tab-button-active" id="select-wave-visualizer-select"> <option value="linea">Line smooth</option> <option value="barras">Vertical bars</option> <option value="curva">Curved</option> <option value="picos">Smooth peaks</option> <option value="solida">Solid wave</option> <option value="dinamica">Dynamic wave</option> <option value="montana">Smooth mountain</option> </select> </label> </div> </div> <div class="quality-selector-mdcm" style="grid-column: span 2;${isYTMusic ? ' display:none;' : ''}"> <div class="select-wrapper-mdcm"> <label>Default video player quality: <select class="tab-button-active" id="select-video-qualitys-select"> <option value="user">User Default</option> <option value="">Auto</option> <option value="144">144</option> <option value="240">240</option> <option value="360">360</option> <option value="480">480</option> <option value="720">720</option> <option value="1080">1080</option> <option value="1440">1440</option> <option value="2160">2160</option> <option value="4320">4320</option> </select> </label> </div> </div> <div class="quality-selector-mdcm" style="grid-column: span 2;${isYTMusic ? ' display:none;' : ''}"> <div class="select-wrapper-mdcm"> <label>Language for translate comments: <select class="tab-button-active" id="select-languages-comments-select"> ${languageOptionsHTML} </select> </label> </div> </div> <div class="slider-container-mdcm" style="grid-column: span 2;"> <label>Video Player Size: <span id="player-size-value">100</span>%</label> <input type="range" id="player-size-slider" class="slider-mdcm" min="50" max="150" value="100"> <button class="reset-btn-mdcm" id="reset-player-size">Reset video size</button> </div> </div> </div> <div id="themes" class="tab-content"> <div id="background-image-container" class="background-image-container"> <h4>Background Image</h4> <input type="file" id="background_image" accept="image/png, image/jpeg" style="display:none;" /> <div id="background-image-preview" class="background-image-preview"> <span class="background-image-overlay"> <i class="fa fa-camera"></i> <span class="background-image-text">Select image</span> </span> <button id="remove-background-image" class="remove-background-image" title="Quitar fondo">×</button> </div> </div> <div class="themes-hidden"> <div class="options-mdcm" style="margin-bottom: 10px;"> <div> <h4>Choose a Theme</h4> <p>Disable Mode Cinematic on General</p> ${isDarkModeActive === 'dark' ? '' : '<p style="color: red; margin: 10px 0;font-size: 11px;">Activate dark mode to use this option</p>'} </div> </div> <div class="options-mdcm"> <label> <div class="theme-option option-mdcm"> <input type="radio" class="radio-mdcm" name="theme" value="custom" checked> <span class="theme-name">Custom</span> </div> </label> <label> <div class="theme-option option-mdcm theme-selected-normal"> <input type="radio" class="radio-mdcm" name="theme" value="normal"> <span class="theme-name">Selected Themes</span> </div> </label> </div> <div class="themes-options"> <div class="options-mdcm themes-grid-mdcm"> ${themeOptionsHTML} </div> </div> <div class="theme-custom-options"> <div class="options-mdcm"> <div class="option-mdcm"> <div class="card-items-end"> <label>Progressbar Video:</label> <input type="color" id="progressbar-color-picker" class="color-picker-mdcm" value="#ff0000"> </div> </div> <div class="option-mdcm"> <div class="card-items-end"> <label>Background Color:</label> <input type="color" id="bg-color-picker" class="color-picker-mdcm" value="#000000"> </div> </div> <div class="option-mdcm"> <div class="card-items-end"> <label>Primary Color:</label> <input type="color" id="primary-color-picker" class="color-picker-mdcm" value="#ffffff"> </div> </div> <div class="option-mdcm"> <div class="card-items-end"> <label>Secondary Color:</label> <input type="color" id="secondary-color-picker" class="color-picker-mdcm" value="#ffffff"> </div> </div> <div class="option-mdcm"> <div class="card-items-end"> <label>Header Color:</label> <input type="color" id="header-color-picker" class="color-picker-mdcm" value="#000000"> </div> </div> <div class="option-mdcm"> <div class="card-items-end"> <label>Icons Color:</label> <input type="color" id="icons-color-picker" class="color-picker-mdcm" value="#ffffff"> </div> </div> <div class="option-mdcm"> <div class="card-items-end"> <label>Menu Color:</label> <input type="color" id="menu-color-picker" class="color-picker-mdcm" value="#000000"> </div> </div> <div class="option-mdcm"> <div class="card-items-end"> <label>Line Color Preview:</label> <input type="color" id="line-color-picker" class="color-picker-mdcm" value="#ff0000"> </div> </div> <div class="option-mdcm"> <div class="card-items-end"> <label>Time Color Preview:</label> <input type="color" id="time-color-picker" class="color-picker-mdcm" value="#ffffff"> </div> </div> </div> </div> </div> </div> <div id="stats" class="tab-content"> <div id="yt-stats-toggle"> <div class="stat-row"> <div>Foreground Time</div> <div class="progress"> <div class="progress-bar total-bar" id="usage-bar"></div> </div> <div id="total-time">0h 0m 0s</div> </div> <div class="stat-row"> <div>Video Time</div> <div class="progress"> <div class="progress-bar video-bar" id="video-bar"></div> </div> <div id="video-time">0h 0m 0s</div> </div> <div class="stat-row"> <div>Shorts Time</div> <div class="progress"> <div class="progress-bar shorts-bar" id="shorts-bar"></div> </div> <div id="shorts-time">0h 0m 0s</div> </div> </div> </div> <div id="headers" class="tab-content"> <div class="options-mdcm"> <label>Available in next update</label> </div> </div> <div id="menu-settings" class="tab-content"> <div class="options-mdcm"> <h4 style="margin: 10px 0">Menu Appearance</h4> </div> <div class="options-settings-mdcm"> <div class="option-settings-mdcm"> <label>Backgrounds:</label> <div class="color-boxes" id="bg-color-options"> <div class="color-box" data-type="bg" data-value="#252525" style="background-color: #252525;"></div> <div class="color-box" data-type="bg" data-value="#1e1e1e" style="background-color: #1e1e1e;"></div> <div class="color-box" data-type="bg" data-value="#3a3a3a" style="background-color: #3a3a3a;"></div> <div class="color-box" data-type="bg" data-value="#4a4a4a" style="background-color: #4a4a4a;"></div> <div class="color-box" data-type="bg" data-value="#000000" style="background-color: #000000;"></div> <div class="color-box" data-type="bg" data-value="#00000000" style="background-color: #00000000;"></div> <div class="color-box" data-type="bg" data-value="#2d2d2d" style="background-color: #2d2d2d;"></div> <div class="color-box" data-type="bg" data-value="#444" style="background-color: #444;"></div> </div> </div> <div class="option-settings-mdcm"> <label>Accent Colors:</label> <div class="color-boxes" id="bg-accent-color-options"> <div class="color-box" data-type="accent" data-value="#ff0000" style="background-color: #ff0000;"></div> <div class="color-box" data-type="accent" data-value="#000000" style="background-color: #000000;"></div> <div class="color-box" data-type="accent" data-value="#009c37 " style="background-color: #009c37 ;"></div> <div class="color-box" data-type="accent" data-value="#0c02a0 " style="background-color: #0c02a0 ;"></div> </div> </div> <div class="option-settings-mdcm"> <label>Titles Colors:</label> <div class="color-boxes" id="text-color-options"> <div class="color-box" data-type="color" data-value="#ffffff" style="background-color: #ffffff;"></div> <div class="color-box" data-type="color" data-value="#cccccc" style="background-color: #cccccc;"></div> <div class="color-box" data-type="color" data-value="#b3b3b3" style="background-color: #b3b3b3;"></div> <div class="color-box" data-type="color" data-value="#00ffff" style="background-color: #00ffff;"></div> <div class="color-box" data-type="color" data-value="#00ff00" style="background-color: #00ff00;"></div> <div class="color-box" data-type="color" data-value="#ffff00" style="background-color: #ffff00;"></div> <div class="color-box" data-type="color" data-value="#ffcc00" style="background-color: #ffcc00;"></div> <div class="color-box" data-type="color" data-value="#ff66cc" style="background-color: #ff66cc;"></div> </div> </div> </div> </div> <div id="importExportArea"> <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px;"> <h3>Import / Export Settings</h3> <button class="icon-btn-mdcm" id="closeImportExportBtn"> <i class="fa-solid fa-xmark"></i> </button> </div> <textarea id="config-data" placeholder="Paste configuration here to import"></textarea> <div class="action-buttons-mdcm"> <button id="export-config" class="action-btn-mdcm">Export</button> <button id="import-config" class="action-btn-mdcm">Import</button> </div> </div> <div id="shareDropdown"> <a href="https://www.facebook.com/sharer/sharer.php?u=${urlSharedCode}" target="_blank" data-network="facebook" class="share-link"><i class="fa-brands fa-facebook"></i> Facebook</a><br> <a href="https://twitter.com/intent/tweet?url=${urlSharedCode}" target="_blank" data-network="twitter" class="share-link"><i class="fa-brands fa-twitter"></i> Twitter</a><br> <a href="https://api.whatsapp.com/send?text=${urlSharedCode}" target="_blank" data-network="whatsapp" class="share-link"><i class="fa-brands fa-whatsapp"></i> WhatsApp</a><br> <a href="https://www.linkedin.com/sharing/share-offsite/?url=${urlSharedCode}" target="_blank" data-network="linkedin" class="share-link"><i class="fa-brands fa-linkedin"></i> LinkedIn</a><br> </div> </div> <div class="actions-mdcm"> <div class="developer-mdcm"> <div style="font-size: 11px; opacity: 0.9; margin-top: 10px; border-top: 1px solid rgba(255,255,255,0.1); padding-top: 8px; line-height: 1.6;"> Developed by <a href="https://github.com/akari310" target="_blank" style="color: #ff4444; text-decoration: none;"><i class="fa-brands fa-github"></i> Akari</a>. Base by <a href="https://github.com/DeveloperMDCM" target="_blank" style="color: #00aaff; text-decoration: none;"><i class="fa-brands fa-github"></i> MDCM</a>. Features from <a href="https://github.com/nvbangg" target="_blank" style="color: #00ffaa; text-decoration: none;"><i class="fa-brands fa-github"></i> nvbangg</a>. </div> </div> <span style="color: #fff" ;>v${GM_info.script.version}</span> </div> `; panel.innerHTML = safeHTML(menuHTML); $ap(panel); let headerObserver = null; function setupHeaderObserver() { if (headerObserver) return; const target = $e('#masthead-container') || $e('ytd-masthead') || document.body; headerObserver = new MutationObserver(() => { const icon = $id('icon-menu-settings'); if (!icon || !document.body.contains(icon)) { addIcon(); } }); headerObserver.observe(target, { childList: true, subtree: true }); } function addIcon() { const existing = $id('icon-menu-settings'); if (existing && document.body.contains(existing)) return; if (existing) existing.closest('#toggle-button')?.remove(); let anchor; if (isYTMusic) { anchor = $e('#right-content'); } else { anchor = $e('ytd-topbar-menu-button-renderer') || $e('#buttons') || $e('#end'); } if (!anchor) return; const toggleButton = $cl('div'); toggleButton.id = 'toggle-button'; toggleButton.style.display = 'flex'; toggleButton.style.alignItems = 'center'; toggleButton.style.justifyContent = 'center'; toggleButton.style.cursor = 'pointer'; toggleButton.style.marginRight = '8px'; const icon = $cl('i'); icon.id = 'icon-menu-settings'; icon.classList.add('fa-solid', 'fa-gear'); icon.style.fontSize = '20px'; toggleButton.appendChild(icon); if (isYTMusic) { anchor.insertBefore(toggleButton, anchor.firstChild); } else { anchor.parentElement.insertBefore(toggleButton, anchor); } toggleButton.addEventListener('click', (e) => { e.stopPropagation(); toggleMenu(); }); setupHeaderObserver(); } let openMenu = false; function toggleMenu() { openMenu = !openMenu; panel.style.display = openMenu ? 'block' : 'none'; panelOverlay.style.display = openMenu ? 'block' : 'none'; } // Close panel when clicking the overlay panelOverlay.addEventListener('click', () => { if (openMenu) { toggleMenu(); } }); addIcon(); const close_menu_settings = $e('.close_menu_settings'); if (close_menu_settings) { close_menu_settings.addEventListener('click', () => { toggleMenu(); }); } // $ap(toggleButton); // Add change listener to the entire panel to save/apply settings immediately panel.addEventListener('change', (e) => { if (e.target.classList.contains('checkbox-mdcm') || e.target.tagName === 'SELECT' || e.target.tagName === 'INPUT') { saveSettings(); if (typeof applySettings === 'function') { applySettings(); } } }); // Specific listeners for live updates of certain features $id('dislikes-toggle')?.addEventListener('change', () => { const st = JSON.parse(GM_getValue(SETTINGS_KEY, '{}')); if (!st.dislikes) { // Hide dislikes if turned off const dislikes_content = $e('#top-level-buttons-computed > segmented-like-dislike-button-view-model > yt-smartimation > div > div > dislike-button-view-model > toggle-button-view-model > button-view-model > button'); if (dislikes_content) { // We don't have the original SVG easily, but we can at least hide our custom one or clear it // For now, let's just trigger a reload message or try to refresh the component // Actually, the user just wants it to go away. dislikes_content.style.width = ''; // We'll let applySettings handle the bar, but for the button, we might need a refresh or more complex logic. // But let's try to at least call applySettings. } } }); // Tab functionality const tabButtons = $m('.tab-mdcm'); const tabContents = $m('.tab-content'); tabButtons.forEach((button) => { button.addEventListener('click', () => { const tabName = button.getAttribute('data-tab'); tabButtons.forEach((btn) => btn.classList.remove('active')); tabContents.forEach((content) => content.classList.remove('active')); button.classList.add('active'); $id(tabName).classList.add('active'); }); }); // Function to save settings function saveSettings() { const settings = { theme: $e('input[name="theme"]:checked').value, bgColorPicker: $id('bg-color-picker').value, progressbarColorPicker: $id('progressbar-color-picker').value, primaryColorPicker: $id('primary-color-picker').value, secondaryColorPicker: $id('secondary-color-picker').value, headerColorPicker: $id('header-color-picker').value, iconsColorPicker: $id('icons-color-picker').value, menuColorPicker: $id('menu-color-picker').value, lineColorPicker: $id('line-color-picker').value, timeColorPicker: $id('time-color-picker').value, dislikes: $id('dislikes-toggle').checked, likeDislikeBar: $id('like-dislike-bar-toggle').checked, bookmarks: $id('bookmarks-toggle').checked, continueWatching: $id('continue-watching-toggle').checked, shortsChannelName: $id('shorts-channel-name-toggle').checked, nonstopPlayback: $id('nonstop-playback-toggle') ? $id('nonstop-playback-toggle').checked : true, audioOnly: $id('audio-only-toggle') ? $id('audio-only-toggle').checked : false, themes: $id('themes-toggle').checked, translation: $id('translation-toggle').checked, avatars: $id('avatars-toggle').checked, reverseMode: $id('reverse-mode-toggle').checked, waveVisualizer: $id('wave-visualizer-toggle').checked, waveVisualizerSelected: $id('select-wave-visualizer-select').value, hideComments: $id('hide-comments-toggle').checked, hideSidebar: $id('hide-sidebar-toggle').checked, disableAutoplay: $id('autoplay-toggle').checked, cinematicLighting: $id('cinematic-lighting-toggle').checked, syncCinematic: $id('sync-cinematic-toggle') ? $id('sync-cinematic-toggle').checked : false, // NUEVO SETTING sidePanelStyle: $id('side-panel-style-select') ? $id('side-panel-style-select').value : 'normal', customTimelineColor: $id('custom-timeline-color-toggle') ? $id('custom-timeline-color-toggle').checked : false, disableSubtitles: $id('subtitles-toggle') ? $id('subtitles-toggle').checked : false, // fontSize: $id('font-size-slider').value, playerSize: $id('player-size-slider').value, selectVideoQuality: $id('select-video-qualitys-select').value, languagesComments: $id('select-languages-comments-select').value, // menuBgColor: $id('menu-bg-color-picker').value, // menuTextColor: $id('menu-text-color-picker').value, menu_akari: { bg: selectedBgColor, color: selectedTextColor, accent: selectedBgAccentColor } // menuFontSize: $id('menu-font-size-slider').value, }; GM_setValue(SETTINGS_KEY, JSON.stringify(settings)); } // Function to load settings function loadSettings() { const settings = JSON.parse(GM_getValue(SETTINGS_KEY, '{}')); // Mark as loaded early so applySettings/saveSettings don't overwrite persisted values with defaults. __ytToolsRuntime.settingsLoaded = true; if (settings.theme) { $e(`input[name="theme"][value="${settings.theme}"]`).checked = true; } const menuData = settings.menu_akari || settings.menu_developermdcm || { bg: "#252525", color: "#ffffff", accent: "#ff0000" }; $id('bg-color-picker').value = settings.bgColorPicker || '#000000'; $id('progressbar-color-picker').value = settings.progressbarColorPicker || '#ff0000'; $id('primary-color-picker').value = settings.primaryColorPicker || '#ffffff'; $id('secondary-color-picker').value = settings.secondaryColorPicker || '#ffffff'; $id('header-color-picker').value = settings.headerColorPicker || '#000'; $id('icons-color-picker').value = settings.iconsColorPicker || '#ffffff'; $id('menu-color-picker').value = settings.menuColorPicker || '#000'; $id('line-color-picker').value = settings.lineColorPicker || '#ff0000'; $id('time-color-picker').value = settings.timeColorPicker || '#ffffff'; $id('dislikes-toggle').checked = settings.dislikes || false; $id('like-dislike-bar-toggle').checked = settings.likeDislikeBar || false; $id('bookmarks-toggle').checked = settings.bookmarks || false; $id('continue-watching-toggle').checked = settings.continueWatching || false; $id('shorts-channel-name-toggle').checked = settings.shortsChannelName || false; if ($id('nonstop-playback-toggle')) $id('nonstop-playback-toggle').checked = settings.nonstopPlayback !== false; if ($id('audio-only-toggle')) $id('audio-only-toggle').checked = settings.audioOnly || false; syncAudioOnlyTabCheckbox(settings); $id('themes-toggle').checked = settings.themes || false; $id('translation-toggle').checked = settings.translation || false; $id('avatars-toggle').checked = settings.avatars || false; $id('reverse-mode-toggle').checked = settings.reverseMode || false; $id('wave-visualizer-toggle').checked = settings.waveVisualizer || false; $id('select-wave-visualizer-select').value = settings.waveVisualizerSelected || 'dinamica'; $id('hide-comments-toggle').checked = settings.hideComments || false; $id('hide-sidebar-toggle').checked = settings.hideSidebar || false; $id('autoplay-toggle').checked = settings.disableAutoplay || false; $id('cinematic-lighting-toggle').checked = settings.cinematicLighting || false; if ($id('sync-cinematic-toggle')) $id('sync-cinematic-toggle').checked = settings.syncCinematic || false; if ($id('side-panel-style-select')) $id('side-panel-style-select').value = settings.sidePanelStyle || 'blur'; if ($id('custom-timeline-color-toggle')) $id('custom-timeline-color-toggle').checked = settings.customTimelineColor || false; if ($id('subtitles-toggle')) $id('subtitles-toggle').checked = settings.disableSubtitles || false; $id('player-size-slider').value = settings.playerSize || 100; $id('select-video-qualitys-select').value = settings.selectVideoQuality || 'user'; $id('select-languages-comments-select').value = settings.languagesComments || 'en'; selectedBgColor = menuData.bg; selectedTextColor = menuData.color; selectedBgAccentColor = menuData.accent; $m('#bg-color-options .color-box').forEach(el => { el.classList.toggle('selected', el.dataset.value === selectedBgColor); }); $m('#text-color-options .color-box').forEach(el => { el.classList.toggle('selected', el.dataset.value === selectedTextColor); }); $m('#bg-accent-color-options .color-box').forEach(el => { el.classList.toggle('selected', el.dataset.value === selectedBgAccentColor); }); // Apply menu colors $sp('--yt-enhance-menu-bg', selectedBgColor); $sp('--yt-enhance-menu-text', selectedTextColor); $sp('--yt-enhance-menu-accent', selectedBgAccentColor); updateSliderValues(); setTimeout(() => { applySettings(); if (settings.dislikes && !isYTMusic) { videoDislike(); shortDislike(); showDislikes = true; } if (!isYTMusic && window.location.href.includes('youtube.com/watch?v=')) { detectInitialCinematicState(); } }, 500); } // Check if the video is in cinematic mode async function detectInitialCinematicState() { return new Promise((resolve) => { const waitForVideo = () => { const video = $e('video'); const cinematicDiv = $id('cinematics'); if (!video || !cinematicDiv || isNaN(video.duration) || video.duration === 0) { setTimeout(waitForVideo, 500); return; } const settings = JSON.parse(GM_getValue(SETTINGS_KEY, '{}')); if (!settings.syncCinematic) { // apply cinematic toggle const cinematicToggle = $id('cinematic-lighting-toggle'); if (cinematicToggle && cinematicDiv) { cinematicDiv.style.display = cinematicToggle.checked ? 'block' : 'none'; } resolve(false); return; } const startTime = video.currentTime; const checkPlayback = () => { if (video.currentTime >= startTime + 1) { const isActive = isCinematicActive(); const cinematicToggle = $id('cinematic-lighting-toggle'); if (cinematicToggle && cinematicToggle.checked !== isActive) { cinematicToggle.checked = isActive; saveSettings(); } resolve(isActive); } else { setTimeout(checkPlayback, 300); } }; checkPlayback(); }; waitForVideo(); }); } $m('.color-box').forEach(box => { box.addEventListener('click', () => { const type = box.dataset.type; const value = box.dataset.value; if (type === 'bg') { selectedBgColor = value; $sp('--yt-enhance-menu-bg', value); $m('#bg-color-options .color-box').forEach(el => { el.classList.remove('selected'); }); box.classList.add('selected'); } else if (type === 'color') { selectedTextColor = value; $sp('--yt-enhance-menu-text', value); $m('#text-color-options .color-box').forEach(el => { el.classList.remove('selected'); }); box.classList.add('selected'); } else if (type === 'accent') { selectedBgAccentColor = value; $sp('--yt-enhance-menu-accent', value); $m('#bg-accent-color-options .color-box').forEach(el => { el.classList.remove('selected'); }); box.classList.add('selected'); } saveSettings(); }); }); function updateSliderValues() { $id('player-size-value').textContent = $id('player-size-slider').value; } $id('reset-player-size').addEventListener('click', () => { $id('player-size-slider').value = 100; updateSliderValues(); applySettings(); }); // Initialize header buttons once function initializeHeaderButtons() { const shareBtn = $id('shareBtn-mdcm'); const importExportBtn = $id('importExportBtn'); const closeImportExportBtn = $id('closeImportExportBtn'); if (shareBtn && !shareBtn.dataset.initialized) { shareBtn.dataset.initialized = 'true'; shareBtn.addEventListener('click', function (event) { event.stopPropagation(); const dropdown = $id('shareDropdown'); if (dropdown) { dropdown.style.display = dropdown.style.display === 'block' ? 'none' : 'block'; } }); } if (importExportBtn && !importExportBtn.dataset.initialized) { importExportBtn.dataset.initialized = 'true'; importExportBtn.addEventListener('click', function () { const importExportArea = $id('importExportArea'); if (importExportArea) { importExportArea.classList.toggle('active'); } }); } if (closeImportExportBtn && !closeImportExportBtn.dataset.initialized) { closeImportExportBtn.dataset.initialized = 'true'; closeImportExportBtn.addEventListener('click', function () { const importExportArea = $id('importExportArea'); if (importExportArea) { importExportArea.classList.remove('active'); } }); } } // Persistent check to ensure the gear icon survives YouTube's dynamic UI updates // setupHeaderObserver() is now called inside addIcon() // ------------------------------ // YTM Ambient Mode — CSS background-image blur approach // Uses album art or video poster as a blurred full-screen background glow // Elements stay persistent for smooth transitions — only .active class toggles // ------------------------------ const ytmAmbientMode = { active: false, _initialized: false, // true once DOM elements are created glowEl: null, styleEl: null, videoEl: null, _lastSrc: '', _pollId: null, // Find album art image URL from YTM player page _getArtUrl() { // 1. Rock-solid way: Get from YouTube Player API directly try { const mp = document.getElementById('movie_player'); if (mp && typeof mp.getVideoData === 'function') { const vData = mp.getVideoData(); if (vData && vData.video_id) { return `https://i.ytimg.com/vi/${vData.video_id}/sddefault.jpg`; } } } catch (e) { } // 2. Fallbacks const selectors = [ '#song-image yt-img-shadow img', '#song-image img', 'ytmusic-player-page #thumbnail img', '#player-page .thumbnail img', 'ytmusic-player-bar .image img', 'ytmusic-player-bar img' ]; for (const sel of selectors) { const img = document.querySelector(sel); if (img && img.src && img.src.startsWith('http')) { return img.src.replace(/=w\d+-h\d+/, '=w640-h640').replace(/=s\d+/, '=s640'); } } const video = $e('video'); if (video && video.poster) return video.poster; return null; }, // Create DOM elements once (called only once, persists across show/hide) _ensureInit() { if (this._initialized) return; this._initialized = true; // Create the glow div this.glowEl = document.createElement('div'); this.glowEl.id = 'ytm-ambient-glow'; document.body.appendChild(this.glowEl); // Create the custom sidebar divider that perfectly fits the top/bottom bars this.dividerEl = document.createElement('div'); this.dividerEl.id = 'ytm-custom-divider'; document.body.appendChild(this.dividerEl); // Create style element this.styleEl = document.createElement('style'); this.styleEl.id = 'ytm-ambient-style'; this.styleEl.textContent = ` #ytm-ambient-glow { position: fixed; top: -200px; left: -200px; width: calc(100vw + 400px); height: calc(100vh + 400px); pointer-events: none; z-index: -1; opacity: 0; background-size: cover; background-position: center; background-repeat: no-repeat; filter: blur(140px) saturate(2.2) brightness(0.9); transition: opacity 1.2s ease; } #ytm-ambient-glow.active { opacity: 0.7; } #ytm-custom-divider { position: fixed; width: 1px; background: rgba(255, 255, 255, 0.15); pointer-events: none; z-index: 2000; opacity: 0; transition: opacity 0.3s ease; } body.ytm-ambient-active #ytm-custom-divider.active { opacity: 1; } /* Make player page backgrounds transparent so glow shows through */ body.ytm-ambient-active ytmusic-app, body.ytm-ambient-active ytmusic-app-layout, body.ytm-ambient-active #layout { background-color: transparent !important; background: transparent !important; transition: background-color 0.6s ease; } body.ytm-ambient-active ytmusic-player-page, body.ytm-ambient-active #player-page, body.ytm-ambient-active ytmusic-player-page #main-panel, body.ytm-ambient-active .background-gradient { background-color: transparent !important; background: transparent !important; background-image: none !important; } /* Make nav bar, player bar, and side drawer transparent so the aura blends behind them smoothly */ body.ytm-ambient-active #nav-bar-background, body.ytm-ambient-active #player-bar-background, body.ytm-ambient-active ytmusic-nav-bar, body.ytm-ambient-active ytmusic-player-bar, body.ytm-ambient-active tp-yt-app-drawer, body.ytm-ambient-active tp-yt-app-drawer #contentContainer, body.ytm-ambient-active #guide-wrapper, body.ytm-ambient-active #guide-content, body.ytm-ambient-active ytmusic-guide-renderer, body.ytm-ambient-active #mini-guide-background, body.ytm-ambient-active #mini-guide { background: transparent !important; background-color: transparent !important; background-image: none !important; } /* Remove borders that piece through the player bar when transparent */ body.ytm-ambient-active tp-yt-app-drawer, body.ytm-ambient-active tp-yt-app-drawer #contentContainer, body.ytm-ambient-active #guide-wrapper, body.ytm-ambient-active #guide-content, body.ytm-ambient-active ytmusic-guide-renderer, body.ytm-ambient-active #mini-guide-background { border: none !important; border-right: none !important; box-shadow: none !important; } /* Hide home/browse pages when player is open so they don't bleed through or block the glow */ body.ytm-ambient-active ytmusic-browse-response { visibility: hidden !important; opacity: 0 !important; } `; document.head.appendChild(this.styleEl); }, // Show ambient (fast — just toggle class + update art) show() { if (!isYTMusic) return; if (this.active) return; if (!window.location.href.includes('/watch')) return; this._ensureInit(); this.active = true; // Update video reference this.videoEl = document.querySelector('video'); if (this.glowEl) { this.glowEl.classList.add('active'); document.body.classList.add('ytm-ambient-active'); } this._updateArt(); this._startPoll(); this._startTracker(); // Listen for play events (for art updates on song change) if (this.videoEl) { this.videoEl.removeEventListener('play', this._onPlay); this.videoEl.addEventListener('play', this._onPlay); } }, // Hide ambient (fast — just toggle class, keep elements) hide() { this.active = false; if (this._pollId) { clearInterval(this._pollId); this._pollId = null; } if (this._trackerId) { cancelAnimationFrame(this._trackerId); this._trackerId = null; } if (this.glowEl) { this.glowEl.classList.remove('active'); document.body.classList.remove('ytm-ambient-active'); } if (this.dividerEl) { this.dividerEl.classList.remove('active'); } if (this.videoEl) { this.videoEl.removeEventListener('play', this._onPlay); this.videoEl = null; } }, // Full cleanup — remove all DOM elements (only when disabling feature) destroy() { this.hide(); this._lastSrc = ''; this._initialized = false; if (this.glowEl) { if (this.glowEl.parentNode) this.glowEl.parentNode.removeChild(this.glowEl); this.glowEl = null; } if (this.dividerEl) { if (this.dividerEl.parentNode) this.dividerEl.parentNode.removeChild(this.dividerEl); this.dividerEl = null; } if (this.styleEl) { if (this.styleEl.parentNode) this.styleEl.parentNode.removeChild(this.styleEl); this.styleEl = null; } }, _startTracker() { if (this._trackerId) cancelAnimationFrame(this._trackerId); const self = this; function track() { if (!self.active) { self._trackerId = null; return; } const nav = document.querySelector('ytmusic-nav-bar'); const player = document.querySelector('ytmusic-player-bar'); const drawer = document.querySelector('tp-yt-app-drawer'); const wrapper = document.querySelector('#guide-wrapper') || document.querySelector('#mini-guide-background'); if (nav && player && drawer && wrapper && self.dividerEl) { const navRect = nav.getBoundingClientRect(); const playerRect = player.getBoundingClientRect(); const wrapperRect = wrapper.getBoundingClientRect(); let leftPos = wrapperRect.right; // Minor correction if right bound goes missing if (leftPos <= 0 || !leftPos) leftPos = drawer.hasAttribute('opened') ? 240 : 72; self.dividerEl.style.top = navRect.bottom + 'px'; self.dividerEl.style.height = (playerRect.top - navRect.bottom) + 'px'; self.dividerEl.style.left = leftPos + 'px'; self.dividerEl.classList.add('active'); } self._trackerId = requestAnimationFrame(track); } this._trackerId = requestAnimationFrame(track); }, // Legacy aliases for compatibility setup() { this.show(); }, cleanup() { this.hide(); }, _updateArt() { const url = this._getArtUrl(); if (url && url !== this._lastSrc) { this._lastSrc = url; if (this.glowEl) { this.glowEl.style.backgroundImage = `url("${url}")`; } } }, _startPoll() { if (this._pollId) clearInterval(this._pollId); const self = this; this._pollId = setInterval(() => { if (!self.active) { clearInterval(self._pollId); self._pollId = null; return; } if (!window.location.href.includes('/watch')) { self.hide(); return; } self._updateArt(); }, 2000); }, _onPlay: function () { if (!window.location.href.includes('/watch')) return; const g = document.getElementById('ytm-ambient-glow'); if (g) { g.classList.add('active'); document.body.classList.add('ytm-ambient-active'); } ytmAmbientMode._updateArt(); }, }; // Persistent ambient watcher — fast URL monitoring for smooth transitions if (isYTMusic) { let _ambientWatcherId = null; function startAmbientWatcher() { if (_ambientWatcherId) return; _ambientWatcherId = setInterval(() => { if (document.visibilityState !== 'visible') return; const s = JSON.parse(GM_getValue(SETTINGS_KEY, '{}')); const onWatch = window.location.href.includes('/watch'); if (!s.cinematicLighting) { if (ytmAmbientMode.active) ytmAmbientMode.hide(); return; } if (onWatch && !ytmAmbientMode.active) { ytmAmbientMode.show(); } else if (!onWatch && ytmAmbientMode.active) { ytmAmbientMode.hide(); } }, 1500); // Reduced frequency from 800ms to 1500ms } setTimeout(startAmbientWatcher, 1500); // Also respond to YTM-specific events immediately document.addEventListener('yt-page-data-updated', () => { const settings = JSON.parse(GM_getValue(SETTINGS_KEY, '{}')); if (!settings.cinematicLighting) return; if (window.location.href.includes('/watch')) { if (!ytmAmbientMode.active) ytmAmbientMode.show(); else ytmAmbientMode._updateArt(); // might be a new song } else if (ytmAmbientMode.active) { ytmAmbientMode.hide(); } }); } // Cinematic Lighting Control Functions function isWatchPage() { return window.location.href.includes('youtube.com/watch'); } function isCinematicActive() { const cinematicDiv = document.getElementById('cinematics'); if (!cinematicDiv) { return false; } const hasContent = cinematicDiv.innerHTML.trim() !== ''; const hasCanvas = cinematicDiv.querySelector('canvas') !== null; const hasChildren = cinematicDiv.children.length > 0; const hasCinematicElements = cinematicDiv.querySelector('div[style*="position: fixed"]') !== null; return hasContent || hasCanvas || hasChildren || hasCinematicElements; } function toggleCinematicLighting() { const settingsButton = $e('.ytp-button.ytp-settings-button'); if (!settingsButton) { console.log('[YT Tools] Settings button not found'); return; } settingsButton.click(); // Cinematic/ambient keywords in multiple languages for robust detection const cinematicKeywords = [ 'cinematic', 'lighting', 'cinema', 'ambient', 'ch\u1EBF \u0111\u1ED9 \u0111i\u1EC7n \u1EA3nh', // Vietnamese: Chế độ điện ảnh '\u0111i\u1EC7n \u1EA3nh', // Vietnamese: điện ảnh 'atmosph', 'ambiante', 'cin\u00E9ma', // French '\u30A2\u30F3\u30D3\u30A8\u30F3\u30C8', // Japanese '\uC2DC\uB124\uB9C8\uD2F1', // Korean ]; const findAndClickCinematic = () => { const menuItems = $m('.ytp-menuitem'); if (!menuItems || menuItems.length === 0) return false; for (let item of menuItems) { // Method 1: Look for toggle checkbox (cinematic is the only toggle-type menu item) const toggleCheckbox = item.querySelector('.ytp-menuitem-toggle-checkbox'); if (toggleCheckbox) { console.log('[YT Tools] Found cinematic/ambient toggle item (by checkbox)'); item.click(); return true; } } // Method 2: Match by localized text keywords for (let item of menuItems) { const text = (item.textContent || '').toLowerCase(); for (const kw of cinematicKeywords) { if (text.includes(kw)) { console.log('[YT Tools] Found cinematic option by keyword:', kw); item.click(); return true; } } } // Method 3: Match by SVG icon path for (let item of menuItems) { const icon = item.querySelector('.ytp-menuitem-icon svg path'); if (icon && (icon.getAttribute('d')?.includes('M21 7v10H3V7') || icon.getAttribute('d')?.includes('M12 2C6.48 2 2 6.48 2 12'))) { console.log('[YT Tools] Found cinematic option by SVG path'); item.click(); return true; } } return false; }; const closeMenu = () => { const menu = $e('.ytp-settings-menu'); if (menu) document.body.click(); }; // Use polling instead of MutationObserver for more reliable detection let attempts = 0; const maxAttempts = 20; const pollInterval = setInterval(() => { attempts++; if (findAndClickCinematic()) { clearInterval(pollInterval); setTimeout(closeMenu, 150); return; } if (attempts >= maxAttempts) { clearInterval(pollInterval); console.warn('[YT Tools] Could not find cinematic/ambient toggle after', maxAttempts, 'attempts'); closeMenu(); } }, 200); } // Function to apply settings function applySettings() { const formulariodescarga = $e('.formulariodescarga'); const formulariodescargaaudio = $e('.formulariodescargaaudio'); if (formulariodescarga != undefined) { formulariodescarga.classList.add('ocultarframe'); formulariodescargaaudio.classList.add('ocultarframe'); } const settings = { theme: $e('input[name="theme"]:checked').value, bgColorPicker: $id('bg-color-picker').value, progressbarColorPicker: $id('progressbar-color-picker').value, primaryColorPicker: $id('primary-color-picker').value, secondaryColorPicker: $id('secondary-color-picker').value, headerColorPicker: $id('header-color-picker').value, iconsColorPicker: $id('icons-color-picker').value, menuColorPicker: $id('menu-color-picker').value, lineColorPicker: $id('line-color-picker').value, timeColorPicker: $id('time-color-picker').value, dislikes: $id('dislikes-toggle').checked, likeDislikeBar: $id('like-dislike-bar-toggle').checked, bookmarks: $id('bookmarks-toggle').checked, continueWatching: $id('continue-watching-toggle').checked, shortsChannelName: $id('shorts-channel-name-toggle').checked, nonstopPlayback: $id('nonstop-playback-toggle') ? $id('nonstop-playback-toggle').checked : true, audioOnly: $id('audio-only-toggle') ? $id('audio-only-toggle').checked : false, themes: $id('themes-toggle').checked, translation: $id('translation-toggle').checked, avatars: $id('avatars-toggle').checked, reverseMode: $id('reverse-mode-toggle').checked, waveVisualizer: $id('wave-visualizer-toggle').checked, waveVisualizerSelected: $id('select-wave-visualizer-select').value, hideComments: $id('hide-comments-toggle').checked, hideSidebar: $id('hide-sidebar-toggle').checked, disableAutoplay: $id('autoplay-toggle').checked, cinematicLighting: $id('cinematic-lighting-toggle') ? $id('cinematic-lighting-toggle').checked : false, syncCinematic: $id('sync-cinematic-toggle') ? $id('sync-cinematic-toggle').checked : false, // NUEVO SETTING sidePanelStyle: $id('side-panel-style-select') ? $id('side-panel-style-select').value : 'blur', customTimelineColor: $id('custom-timeline-color-toggle') ? $id('custom-timeline-color-toggle').checked : false, disableSubtitles: $id('subtitles-toggle') ? $id('subtitles-toggle').checked : false, // fontSize: $id('font-size-slider').value, playerSize: $id('player-size-slider').value, selectVideoQuality: $id('select-video-qualitys-select').value, languagesComments: $id('select-languages-comments-select').value, // menuBgColor: $id('menu-bg-color-picker').value, // menuTextColor: $id('menu-text-color-picker').value, menu_developermdcm: { bg: selectedBgColor, color: selectedTextColor, accent: selectedBgAccentColor } // menuFontSize: $id('menu-font-size-slider').value, }; $sp('--yt-enhance-menu-bg', settings.menu_developermdcm.bg); $sp('--yt-enhance-menu-text', settings.menu_developermdcm.color); $sp('--yt-enhance-menu-accent', settings.menu_developermdcm.accent); renderizarButtons(); applyNonstopPlayback(settings.nonstopPlayback); syncAudioOnlyTabCheckbox(settings); applyAudioOnlyMode(getEffectiveAudioOnly(settings)); // Handle Side Panel Style classes document.body.classList.remove('ytm-style-blur', 'ytm-style-liquid', 'ytm-style-transparent'); if (settings.sidePanelStyle === 'liquid') { document.body.classList.add('ytm-style-liquid'); } else if (settings.sidePanelStyle === 'transparent') { document.body.classList.add('ytm-style-transparent'); } else { document.body.classList.add('ytm-style-blur'); } // Initialize header buttons initializeHeaderButtons(); // Hide comments (YT only) if (!isYTMusic) { const commentsSection = $id('comments'); if (commentsSection) { commentsSection.style.display = settings.hideComments ? 'none' : 'block'; } // Like vs Dislike Bar (YT only) if (typeof applyLikeDislikeBarIfEnabled === 'function') { applyLikeDislikeBarIfEnabled(settings); } // Show Dislikes count (YT only) if (typeof videoDislike === 'function') videoDislike(); if (typeof shortDislike === 'function') shortDislike(); showDislikes = !!settings.dislikes; } // Active inactive Themes const themesMenuSection = $e('.themes-hidden'); if (themesMenuSection) { themesMenuSection.style.display = settings.themes ? 'block' : 'none'; } // Hide sidebar (YT only) if (!isYTMusic) { const sidebarSection = $e('#secondary > #secondary-inner'); if (sidebarSection) { sidebarSection.classList.add('side-moi'); const sidebarSection2 = $e('.side-moi'); sidebarSection2.style.display = settings.hideSidebar ? 'none' : 'block'; } } // Disable autoplay (YT only - uses .ytp-autonav-toggle-button) if (!isYTMusic) { const autoplayToggle = $e('.ytp-autonav-toggle-button'); if (autoplayToggle) { const isCurrentlyOn = autoplayToggle.getAttribute('aria-checked') === 'true'; if (settings.disableAutoplay && isCurrentlyOn) { autoplayToggle.click(); } else if (!settings.disableAutoplay && !isCurrentlyOn) { autoplayToggle.click(); } } } // Disable subtitles (YT only - uses .ytp-subtitles-button) if (!isYTMusic) { const subtitleToggle = $e('.ytp-subtitles-button'); if (subtitleToggle) { const isCurrentlyOn = subtitleToggle.getAttribute('aria-pressed') === 'true'; if (settings.disableSubtitles && isCurrentlyOn) { subtitleToggle.click(); } else if (!settings.disableSubtitles && !isCurrentlyOn) { subtitleToggle.click(); } } } // Apply cinematic/ambient lighting setting if (isYTMusic) { // YTM: custom ambient mode if (settings.cinematicLighting && isWatchPage()) { setTimeout(() => { ytmAmbientMode.setup(); }, 800); } else { ytmAmbientMode.cleanup(); } } else if (isWatchPage()) { setTimeout(() => { const isCurrentlyActive = isCinematicActive(); if (settings.syncCinematic) { if (settings.cinematicLighting && !isCurrentlyActive) { toggleCinematicLighting(); } else if (!settings.cinematicLighting && isCurrentlyActive) { toggleCinematicLighting(); } } else { const cinematicDiv = $id('cinematics'); if (cinematicDiv) { cinematicDiv.style.display = settings.cinematicLighting ? 'block' : 'none'; } } }, 1000); } // Adjust font size // $e('body').style.fontSize = `${settings.fontSize}px`; // Adjust player size const player = $e('video'); if (player) { player.style.transform = `scale(${settings.playerSize / 100})`; } // selected video quality (YT only - uses div#movie_player) if (!isYTMusic) { const video = $e('div#movie_player'); let ytPlayerQuality = localStorage.getItem('yt-player-quality'); if (video != undefined && settings.selectVideoQuality !== "user") { if (ytPlayerQuality) { let qualitySettings = JSON.parse(ytPlayerQuality); qualitySettings.data = JSON.stringify({ quality: settings.selectVideoQuality, previousQuality: 240 }); localStorage.setItem('yt-player-quality', JSON.stringify(qualitySettings)); } else { let defaultQualitySettings = { data: JSON.stringify({ quality: 720, previousQuality: 240 }), expiration: Date.now() + (365 * 24 * 60 * 60 * 1000), creation: Date.now() }; localStorage.setItem('yt-player-quality', JSON.stringify(defaultQualitySettings)); } } } // Apply menu appearance settings // $sp('--yt-enhance-menu-bg', settings.menuBgColor); // $sp('--yt-enhance-menu-text', settings.menuTextColor); // $sp('--yt-enhance-menu-font-size', `${settings.menuFontSize}px`); // Apply theme const selectedTheme = themes[settings.theme] || themes[0] || {}; const isThemeCustom = $e(`input[name="theme"][value="custom"]`).checked; const isThemeNormal = $e(`input[name="theme"][value="normal"]`).checked; const themeCustomOptions = $e('.theme-custom-options'); const themeNormal = $e('.theme-selected-normal'); // Tối ưu: Dùng mảng để gom CSS, chỉ tiêm vào trang 1 lần duy nhất ở cuối let dynamicCssArray = []; const addDynamicCss = (css) => { if (css) dynamicCssArray.push(css); }; // CHANGE DEFAULT TIMELINE TO ROYAL PURPLE AESTHETIC if (settings.customTimelineColor) { addDynamicCss(` .ytp-swatch-background-color { background: linear-gradient(135deg, #4c1d95, #8b5cf6) !important; } `); if (isYTMusic) { addDynamicCss(` #progress-bar { --paper-slider-active-color: #8b5cf6 !important; --paper-slider-knob-color: #8b5cf6 !important; --paper-slider-secondary-color: #8b5cf680 !important; } `); } } if (isThemeCustom) { themeNormal.style.display = "flex" themeCustomOptions.style.display = "flex"; $e('.themes-options').style.display = "none"; } if (isThemeNormal) { $e(`input[name="theme"][value="custom"]`).checked = false; } // Helper: apply YTM-specific CSS variables for theming function applyYTMThemeVars(bgColor, textColor, secondaryText, menuBg, iconColor, raisedBg, progressColor, progressSecondary) { // YTM-specific variables $sp('--ytmusic-general-background', bgColor); $sp('--ytmusic-background', bgColor); $sp('--ytmusic-color-white1', textColor); $sp('--ytmusic-color-white2', secondaryText || textColor); $sp('--ytmusic-color-white3', secondaryText || textColor); $sp('--ytmusic-color-white4', secondaryText || textColor); $sp('--ytmusic-player-bar-background', raisedBg || bgColor); $sp('--ytmusic-nav-bar-background', bgColor); $sp('--ytmusic-nav-bar', bgColor); $sp('--ytmusic-search-background', menuBg || bgColor); // Shared YT/YTM variables $sp('--yt-spec-general-background-a', bgColor); $sp('--yt-spec-general-background-b', bgColor); $sp('--yt-spec-general-background-c', bgColor); // YTM Slider Progress bar if (progressColor) { $sp('--paper-slider-active-color', progressColor); $sp('--paper-slider-knob-color', progressColor); $sp('--paper-progress-active-color', progressColor); } if (progressSecondary) { $sp('--paper-slider-secondary-color', progressSecondary); $sp('--paper-progress-secondary-color', progressSecondary); } // Force colors via CSS to prevent YTM's native ambient mode from overriding the variables // Only add this if not cleared (bgColor is truthy) if (bgColor) { addDynamicCss(` #nav-bar-background.ytmusic-app-layout { background: ${bgColor} !important; background-image: ${bgColor.includes('gradient') ? bgColor : 'none'} !important; } ytmusic-app-layout.content-scrolled #nav-bar-background.ytmusic-app-layout { background: ${bgColor} !important; } #player-bar-background.ytmusic-app-layout { background: ${raisedBg || bgColor} !important; background-image: ${(raisedBg || bgColor).includes('gradient') ? (raisedBg || bgColor) : 'none'} !important; } `); } } if (isYTMusic) { initYTMHeaderScroll(); } function checkDarkMode() { if (settings.themes) { if (isDarkModeActive === 'dark' && !isThemeCustom) { // Apply theme const themesOpts = $e('.themes-options'); if (themesOpts) themesOpts.style.display = "block"; if (themeNormal) themeNormal.style.display = "none"; if (themeCustomOptions) themeCustomOptions.style.display = "none"; if (settings.theme === '0') { // Clean up CSS vars from previous theme const props = [ '--ytmusic-general-background', '--ytmusic-background', '--ytmusic-color-white1', '--ytmusic-color-white2', '--ytmusic-color-white3', '--ytmusic-color-white4', '--ytmusic-player-bar-background', '--ytmusic-nav-bar-background', '--ytmusic-search-background', '--yt-spec-general-background-a', '--yt-spec-general-background-b', '--yt-spec-general-background-c', '--yt-spec-base-background', '--yt-spec-text-primary', '--yt-spec-text-secondary', '--yt-spec-menu-background', '--yt-spec-icon-inactive', '--yt-spec-brand-icon-inactive', '--yt-spec-brand-icon-active', '--yt-spec-static-brand-red', '--yt-spec-raised-background', '--yt-spec-static-brand-white', '--ytd-searchbox-background', '--ytd-searchbox-text-color', '--ytcp-text-primary', '--ytmusic-nav-bar', '--paper-slider-active-color', '--paper-slider-knob-color', '--paper-progress-active-color', '--paper-slider-secondary-color', '--paper-progress-secondary-color' ]; props.forEach(p => document.documentElement.style.removeProperty(p)); addDynamicCss(` .botones_div { background-color: transparent; border: none; color: #ccc !important; user-select: none; } `); if (localStorage.getItem('backgroundImage')) { applyPageBackground(localStorage.getItem('backgroundImage'), null); } else { applyPageBackground(null); } return; } // Standard YT CSS variables $sp('--yt-spec-base-background', selectedTheme.gradient); $sp('--yt-spec-text-primary', selectedTheme.textColor); $sp('--yt-spec-text-secondary', selectedTheme.textColor); $sp('--yt-spec-menu-background', selectedTheme.gradient); $sp('--yt-spec-icon-inactive', selectedTheme.textColor); $sp('--yt-spec-brand-icon-inactive', selectedTheme.textColor); $sp('--yt-spec-brand-icon-active', selectedTheme.gradient); $sp('--yt-spec-static-brand-red', selectedTheme.gradient); // line current time $sp('--yt-spec-raised-background', selectedTheme.raised); $sp('--yt-spec-static-brand-red', selectedTheme.CurrentProgressVideo); $sp('--yt-spec-static-brand-white', selectedTheme.textColor); $sp('--ytd-searchbox-background', selectedTheme.gradient); $sp('--ytd-searchbox-text-color', selectedTheme.textColor); $sp('--ytcp-text-primary', selectedTheme.textColor); // YTM-specific CSS variables let ytmSliderSolidColor = selectedTheme.CurrentProgressVideo; if (selectedTheme.gradient) { let colors = selectedTheme.gradient.match(/#[0-9a-fA-F]{3,6}/g); if (colors && colors.length > 0) { ytmSliderSolidColor = colors[colors.length - 1]; // Use the most vibrant gradient color } } if (isYTMusic) { applyYTMThemeVars( selectedTheme.gradient, selectedTheme.textColor, selectedTheme.textColor, selectedTheme.gradient, selectedTheme.colorIcons || selectedTheme.textColor, selectedTheme.raised === '#303131' ? selectedTheme.gradient : selectedTheme.raised, ytmSliderSolidColor, ytmSliderSolidColor + '80' // Add 50% opacity in hex for secondary 'buffer' slider ); } addDynamicCss(` .botones_div { background-color: transparent; border: none; color: #999999; user-select: none; } .ytp-menuitem[aria-checked=true] .ytp-menuitem-toggle-checkbox { background: ${selectedTheme.gradient} !important; } #background.ytd-masthead { background: ${selectedTheme.gradient} !important; } .ytp-swatch-background-color { background: ${selectedTheme.gradient} !important; } html, body { background-color: #0f0f0f !important; } `); /* Apply background image with theme overlay if exists */ if (localStorage.getItem('backgroundImage')) { applyPageBackground(localStorage.getItem('backgroundImage'), selectedTheme.gradient); } else { // Apply only theme gradient addDynamicCss(` html, body { background-image: ${selectedTheme.gradient} !important; background-size: cover !important; background-position: center !important; background-attachment: fixed !important; } `); } /* Minimal transparency to allow background to show */ addDynamicCss(` ytd-app, #content.ytd-app, #page-manager.ytd-app, ytd-browse, ytd-watch-flexy, ytd-two-column-browse-results-renderer, #primary.ytd-two-column-browse-results-renderer, #secondary.ytd-two-column-browse-results-renderer, ytd-rich-grid-renderer, #contents.ytd-rich-grid-renderer, ytd-item-section-renderer, ytd-comments-header-renderer, ytd-comment-simplebox-renderer, ytd-comment-thread-renderer, ytd-comment-renderer, #header.ytd-item-section-renderer, #body.ytd-comment-renderer, #author-thumbnail.ytd-comment-simplebox-renderer, #cinematic-shorts-scrim.ytd-shorts, ytd-comment-view-model, ytd-comment-engagement-bar, ytd-comment-replies-renderer, #anchored-panel.ytd-shorts, #cinematic-container.ytd-reel-video-renderer, #shorts-cinematic-container, .short-video-container.ytd-reel-video-renderer, ytd-reel-video-renderer, .navigation-container.ytd-shorts, .navigation-button.ytd-shorts { background: transparent !important; } /* Completely hide the cinematic glow in shorts if it's causing black blocks */ #cinematic-container.ytd-reel-video-renderer, #shorts-cinematic-container, #cinematic-shorts-scrim.ytd-shorts { display: none !important; opacity: 0 !important; visibility: hidden !important; } /* Use theme colors on major components without breaking layout */ #masthead-container.ytd-app, #background.ytd-masthead { background: ${selectedTheme.gradient} !important; } /* Revert chip bar to near-native but themed */ #header.ytd-rich-grid-renderer, ytd-feed-filter-chip-bar-renderer, #chips-wrapper.ytd-feed-filter-chip-bar-renderer { background: transparent !important; } /* Improve Shorts Navigation: Center 'Next' button if it's the first Short */ ytd-shorts[is-watch-while-mode] .navigation-container.ytd-shorts, .navigation-container.ytd-shorts { display: flex !important; flex-direction: column !important; justify-content: center !important; gap: 12px !important; height: 100% !important; top: 0 !important; bottom: 0 !important; margin: 0 !important; background: transparent !important; background-color: transparent !important; } .navigation-button.ytd-shorts { margin: 0 !important; } /* Ensure hidden buttons don't take up space in the flex container */ #navigation-button-up[aria-hidden="true"], #navigation-button-up[aria-hidden=""], #navigation-button-up[hidden], #navigation-button-down[aria-hidden="true"], #navigation-button-down[aria-hidden=""], #navigation-button-down[hidden] { display: none !important; } /* Restore the 'frosted-glass' look but with the theme gradient */ #frosted-glass.ytd-app { background: ${selectedTheme.gradient} !important; opacity: 0.8 !important; } ytd-engagement-panel-section-list-renderer { background: ${selectedTheme.gradient} !important; backdrop-filter: blur(12px) !important; } ytd-engagement-panel-title-header-renderer[shorts-panel] #header.ytd-engagement-panel-title-header-renderer { background: ${selectedTheme.gradient} !important;} .buttons-tranlate { background: ${selectedTheme.btnTranslate} !important; } .badge-shape-wiz--thumbnail-default { color: ${selectedTheme.videoDuration} !important; background: ${selectedTheme.gradient} !important; } #logo-icon { color: ${selectedTheme.textLogo} !important; } .yt-spec-button-shape-next--overlay.yt-spec-button-shape-next--text { color: ${selectedTheme.colorIcons} !important; } .ytd-topbar-menu-button-renderer #button.ytd-topbar-menu-button-renderer { color: ${selectedTheme.colorIcons} !important; } .yt-spec-icon-badge-shape--style-overlay .yt-spec-icon-badge-shape__icon { color: ${selectedTheme.colorIcons} !important; } .ytp-svg-fill { fill: ${selectedTheme.colorIcons} !important; } #ytp-id-30,#ytp-id-17,#ytp-id-19,#ytp-id-20{ fill: ${selectedTheme.colorIcons} !important; } `); // YTM-specific element selectors if (isYTMusic) { addDynamicCss(` html, body, ytmusic-app { background-color: ${localStorage.getItem('backgroundImage') ? 'transparent' : '#030303'} !important; background-image: ${localStorage.getItem('backgroundImage') ? 'none' : selectedTheme.gradient} !important; background-size: cover !important; background-position: center !important; background-attachment: fixed !important; } ytmusic-player-bar { background: ${localStorage.getItem('backgroundImage') ? 'transparent' : selectedTheme.gradient} !important; ${localStorage.getItem('backgroundImage') ? 'backdrop-filter: blur(20px) !important; -webkit-backdrop-filter: blur(20px) !important;' : ''} } ytmusic-nav-bar { background: transparent !important; transition: background 0.4s ease-in-out !important; } ytmusic-nav-bar.scrolled, ytmusic-nav-bar[opened], body[player-page-open] ytmusic-nav-bar { background: ${selectedTheme.gradient} !important; ${localStorage.getItem('backgroundImage') ? 'backdrop-filter: blur(20px) !important; -webkit-backdrop-filter: blur(20px) !important;' : ''} } ytmusic-search-box #input-box { background: ${selectedTheme.gradient} !important; } ytmusic-browse-response, ytmusic-header-renderer, ytmusic-tabbed-browse-renderer, ytmusic-detail-header-renderer, ytmusic-section-list-renderer, ytmusic-carousel-shelf-renderer, ytmusic-grid-renderer, ytmusic-item-section-renderer, #content.ytmusic-app, #shorts-container, ytd-shorts, #shorts-inner-container, ytd-reel-player-overlay, #overlay.ytd-reel-video-renderer, ytmusic-app-layout, #mini-guide-background, #guide-wrapper.ytmusic-app-layout, ytmusic-browse-response #background, ytmusic-browse-response .background, ytmusic-app-layout #background, ytmusic-immersive-header-renderer, ytmusic-card-shelf-renderer, ytmusic-chip-cloud-chip-renderer, ytmusic-chip-cloud-renderer, ytmusic-player-page, ytmusic-player-page #background { background: transparent !important; } /* Neutralize default YTM gradients */ ytmusic-browse-response #background, ytmusic-header-renderer #background, ytmusic-tabbed-browse-renderer #background, ytmusic-player-page #background, ytmusic-player-page .background, .background-gradient.ytmusic-browse-response, #background.style-scope.ytmusic-browse-response, #header.style-scope.ytmusic-browse-response, ytmusic-browse-response [id="background"], ytmusic-header-renderer [id="background"], #mini-guide-background, #guide-spacer, .immersive-background, ytmusic-fullbleed-thumbnail-renderer[is-background] { background: transparent !important; background-image: none !important; } .immersive-background, ytmusic-fullbleed-thumbnail-renderer[is-background] { display: none !important; } #layout { background: transparent !important; } .content.ytmusic-player-page { background: transparent !important; } ytmusic-player-bar .title, ytmusic-player-bar .byline { color: ${selectedTheme.textColor} !important; } .ytmusic-player-bar .yt-spec-icon-shape, .ytmusic-player-bar svg { color: ${selectedTheme.colorIcons || selectedTheme.textColor} !important; fill: ${selectedTheme.colorIcons || selectedTheme.textColor} !important; } #progress-bar { --paper-slider-active-color: ${ytmSliderSolidColor} !important; --paper-slider-knob-color: ${ytmSliderSolidColor} !important; --paper-slider-secondary-color: ${ytmSliderSolidColor}80 !important; } `); initYTMHeaderScroll(); } } else if (isDarkModeActive === 'dark' && isThemeCustom) { $sp('--yt-spec-base-background', settings.bgColorPicker); $sp('--yt-spec-text-primary', settings.primaryColorPicker); $sp('--yt-spec-text-secondary', settings.secondaryColorPicker); $sp('--yt-spec-menu-background', settings.menuColorPicker); $sp('--yt-spec-icon-inactive', settings.iconsColorPicker); $sp('--yt-spec-brand-icon-inactive', settings.primaryColorPicker); $sp('--yt-spec-brand-icon-active', settings.primaryColorPicker); $sp('--yt-spec-raised-background', settings.headerColorPicker); $sp('--yt-spec-static-brand-red', settings.lineColorPicker); $sp('--yt-spec-static-brand-white', settings.timeColorPicker); $sp('--ytd-searchbox-background', settings.primaryColorPicker); $sp('--ytd-searchbox-text-color', settings.secondaryColorPicker); $sp('--ytcp-text-primary', settings.primaryColorPicker); // YTM-specific CSS variables for custom theme if (isYTMusic) { applyYTMThemeVars( settings.bgColorPicker, settings.primaryColorPicker, settings.secondaryColorPicker, settings.menuColorPicker, settings.iconsColorPicker, settings.headerColorPicker, settings.progressbarColorPicker, settings.progressbarColorPicker + '80' // Add 50% opacity in hex ); addDynamicCss(` #progress-bar { --paper-slider-active-color: ${settings.progressbarColorPicker} !important; --paper-slider-knob-color: ${settings.progressbarColorPicker} !important; --paper-slider-secondary-color: ${settings.progressbarColorPicker}80 !important; } `); } addDynamicCss(` .html5-video-player { color: ${settings.primaryColorPicker} !important; } .ytProgressBarLineProgressBarPlayed { background: linear-gradient(to right, ${settings.progressbarColorPicker} 80%, ${settings.progressbarColorPicker} 100%); } .ytp-menuitem .ytp-menuitem-icon svg path{ fill: ${settings.iconsColorPicker} !important; } .ytThumbnailOverlayProgressBarHostWatchedProgressBarSegment { background: linear-gradient(to right, ${settings.lineColorPicker} 80%, ${settings.lineColorPicker} 100%) !important; } .yt-badge-shape--thumbnail-default { color: ${settings.timeColorPicker} !important; } a svg > path, .ytp-button svg path { fill: ${settings.iconsColorPicker} !important; } svg.path{ fill: ${settings.iconsColorPicker} !important; } svg { color: ${settings.iconsColorPicker} !important; } .ytp-volume-slider-handle:before, .ytp-volume-slider-handle, .ytp-tooltip.ytp-preview:not(.ytp-text-detail) { background-color: ${settings.iconsColorPicker} !important; } .ytp-autonav-toggle-button[aria-checked=true] { background-color: ${settings.iconsColorPicker} !important; } .tp-yt-iron-icon { fill: ${settings.iconsColorPicker} !important; } .botones_div { background-color: transparent; border: none; color: ${settings.iconsColorPicker} !important; user-select: none; } #container.ytd-searchbox { color: red !important; } .ytp-menuitem[aria-checked=true] .ytp-menuitem-toggle-checkbox { background: ${settings.primaryColorPicker} !important; } .yt-spec-icon-shape { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; color: ${settings.iconsColorPicker} !important; } .ytp-time-current, .ytp-time-separator, .ytp-time-duration { color: ${settings.iconsColorPicker} !important; } #background.ytd-masthead { background: ${settings.headerColorPicker} !important; } .ytp-swatch-background-color { background: ${settings.progressbarColorPicker } !important; } #shorts-container, ytd-shorts, #shorts-inner-container, #page-manager.ytd-app, #cinematic-container.ytd-reel-video-renderer, #shorts-cinematic-container, .short-video-container.ytd-reel-video-renderer, ytd-reel-video-renderer, ytd-reel-player-overlay, #overlay.ytd-reel-video-renderer { background: transparent !important; } #cinematic-container.ytd-reel-video-renderer, #shorts-cinematic-container, #cinematic-shorts-scrim.ytd-shorts { display: none !important; opacity: 0 !important; visibility: hidden !important; } ytd-engagement-panel-title-header-renderer[shorts-panel] #header.ytd-engagement-panel-title-header-renderer { background: ${settings.bgColorPicker} !important;} .badge-shape-wiz--thumbnail-default { color: ${settings.timeColorPicker} !important; background: ${settings.secondaryColorPicker} !important; } #logo-icon { color: ${settings.primaryColorPicker} !important; } .yt-spec-button-shape-next--overlay.yt-spec-button-shape-next--text { color: ${settings.iconsColorPicker} !important; } .ytd-topbar-menu-button-renderer #button.ytd-topbar-menu-button-renderer { color: ${settings.iconsColorPicker} !important; } .yt-spec-icon-badge-shape--style-overlay .yt-spec-icon-badge-shape__icon { color: ${settings.iconsColorPicker} !important; } .ytp-svg-fill { fill: ${settings.iconsColorPicker} !important; } #ytp-id-30,#ytp-id-17,#ytp-id-19,#ytp-id-20{ fill: ${settings.iconsColorPicker} !important; } `); // YTM-specific element selectors for custom theme if (isYTMusic) { addDynamicCss(` html, body, ytmusic-app { background-image: none !important; background-color: ${localStorage.getItem('backgroundImage') ? 'transparent' : settings.bgColorPicker} !important; background-size: cover !important; background-position: center !important; background-attachment: fixed !important; } ytmusic-player-bar { background: ${localStorage.getItem('backgroundImage') ? 'transparent' : (settings.headerColorPicker || settings.bgColorPicker)} !important; ${localStorage.getItem('backgroundImage') ? 'backdrop-filter: blur(20px) !important; -webkit-backdrop-filter: blur(20px) !important;' : ''} } ytmusic-nav-bar { background: transparent !important; transition: background 0.4s ease-in-out !important; } ytmusic-nav-bar.scrolled, ytmusic-nav-bar[opened], body[player-page-open] ytmusic-nav-bar { background: ${(settings.headerColorPicker || settings.bgColorPicker)} !important; ${localStorage.getItem('backgroundImage') ? 'backdrop-filter: blur(20px) !important; -webkit-backdrop-filter: blur(20px) !important;' : ''} } ytmusic-search-box #input-box { background: ${settings.menuColorPicker || settings.bgColorPicker} !important; } ytmusic-browse-response, ytmusic-header-renderer, ytmusic-tabbed-browse-renderer, ytmusic-detail-header-renderer, ytmusic-section-list-renderer, ytmusic-carousel-shelf-renderer, ytmusic-grid-renderer, ytmusic-item-section-renderer, #content.ytmusic-app, #shorts-container, ytd-shorts, #shorts-inner-container, ytd-reel-player-overlay, #overlay.ytd-reel-video-renderer, ytmusic-app-layout, ytmusic-app-layout.content-scrolled, #mini-guide-background, #guide-wrapper.ytmusic-app-layout, ytmusic-browse-response #background, ytmusic-browse-response .background, ytmusic-app-layout #background, ytmusic-app-layout #guide-background, ytmusic-app-layout #nav-bar-background, ytmusic-app-layout #player-bar-background, tp-yt-app-drawer, tp-yt-app-drawer #contentContainer, #mini-guide, #mini-guide-renderer, ytmusic-guide-renderer, #guide-wrapper, #guide-content, #guide-spacer, ytmusic-guide-section-renderer, ytmusic-guide-entry-renderer, tp-yt-paper-item.ytmusic-guide-entry-renderer, ytmusic-immersive-header-renderer, ytmusic-card-shelf-renderer, ytmusic-chip-cloud-chip-renderer, ytmusic-chip-cloud-renderer, ytmusic-player-page, ytmusic-player-page #background { background: transparent !important; --ytmusic-guide-background: transparent !important; --iron-drawer-background-color: transparent !important; } /* Neutralize default YTM gradients */ ytmusic-browse-response #background, ytmusic-header-renderer #background, ytmusic-tabbed-browse-renderer #background, ytmusic-player-page #background, ytmusic-player-page .background, .background-gradient.ytmusic-browse-response, #background.style-scope.ytmusic-browse-response, #header.style-scope.ytmusic-browse-response, ytmusic-browse-response [id="background"], ytmusic-header-renderer [id="background"], #mini-guide-background, #guide-spacer, .immersive-background, ytmusic-fullbleed-thumbnail-renderer[is-background] { background: transparent !important; background-image: none !important; } body:not(.ytm-ambient-active) #mini-guide-background, .immersive-background, ytmusic-fullbleed-thumbnail-renderer[is-background] { opacity: 0 !important; pointer-events: none !important; } #layout { background: transparent !important; } .content.ytmusic-player-page { background: transparent !important; } ytmusic-player-bar .title, ytmusic-player-bar .byline { color: ${settings.primaryColorPicker} !important; } .ytmusic-player-bar .yt-spec-icon-shape, .ytmusic-player-bar svg { color: ${settings.iconsColorPicker} !important; fill: ${settings.iconsColorPicker} !important; } `); initYTMHeaderScroll(); } } else { addDynamicCss(` .botones_div { background-color: transparent; border: none; color: #000 !important; user-select: none; } `); } } else { if (localStorage.getItem('backgroundImage')) { applyPageBackground(localStorage.getItem('backgroundImage'), null); } else { applyPageBackground(null); } // Cleanup theme vars when toggled off to fix stuck colors on side-panel const props = [ '--ytmusic-general-background', '--ytmusic-background', '--ytmusic-color-white1', '--ytmusic-color-white2', '--ytmusic-color-white3', '--ytmusic-color-white4', '--ytmusic-player-bar-background', '--ytmusic-search-background', '--yt-spec-general-background-a', '--yt-spec-general-background-b', '--yt-spec-general-background-c', '--yt-spec-base-background', '--yt-spec-text-primary', '--yt-spec-text-secondary', '--yt-spec-menu-background', '--yt-spec-icon-inactive', '--yt-spec-brand-icon-inactive', '--yt-spec-brand-icon-active', '--yt-spec-static-brand-red', '--yt-spec-raised-background', '--yt-spec-static-brand-white', '--ytd-searchbox-background', '--ytd-searchbox-text-color', '--ytcp-text-primary', '--ytmusic-nav-bar', '--ytmusic-nav-bar-background', '--paper-slider-active-color', '--paper-slider-knob-color', '--paper-progress-active-color', '--paper-slider-secondary-color', '--paper-progress-secondary-color' ]; props.forEach(p => document.documentElement.style.removeProperty(p)); // Restore YTM native defaults instead of leaving vars undefined if (isYTMusic) { const hasBgImage = !!localStorage.getItem('backgroundImage'); if (hasBgImage) { // When bgImage is active, force transparent vars so YTM CSS doesn't override our blur document.documentElement.style.setProperty('--ytmusic-nav-bar-background', 'transparent'); document.documentElement.style.setProperty('--ytmusic-player-bar-background', 'transparent'); } else { // No bgImage → restore YTM native defaults completely document.documentElement.style.removeProperty('--ytmusic-nav-bar-background'); document.documentElement.style.removeProperty('--ytmusic-player-bar-background'); document.documentElement.style.removeProperty('--ytmusic-nav-bar'); } // Cleanup carousel/container backgrounds that were made transparent by theme // But DON'T reset nav-bar/player-bar when backgroundImage is active (applyPageBackground handles those) addDynamicCss(` ytmusic-carousel-shelf-renderer, ytmusic-section-list-renderer, ytmusic-grid-renderer, ytmusic-card-shelf-renderer, ytmusic-chip-cloud-renderer, ytmusic-chip-cloud-chip-renderer, ytmusic-header-renderer, ytmusic-tabbed-browse-renderer, ytmusic-detail-header-renderer, ytmusic-item-section-renderer, ytmusic-immersive-header-renderer { background: ${hasBgImage ? 'transparent' : 'initial'} !important; } .immersive-background, ytmusic-fullbleed-thumbnail-renderer[is-background] { display: initial !important; } ${hasBgImage ? ` /* Theme OFF + bgImage: nav-bar/player-bar need blur background */ #nav-bar-background.ytmusic-app-layout { background: transparent !important; transition: background 0.3s ease, backdrop-filter 0.3s ease !important; } /* High specificity transparency for YTM Guide/Sidebar */ tp-yt-app-drawer, tp-yt-app-drawer #contentContainer, tp-yt-app-drawer #contentContainer.tp-yt-app-drawer, #guide-wrapper.ytmusic-app, #guide-content.ytmusic-app, #guide-spacer.ytmusic-app, #guide-renderer.ytmusic-app, ytmusic-guide-renderer, #sections.ytmusic-guide-renderer, ytmusic-guide-section-renderer, #items.ytmusic-guide-section-renderer, #divider.ytmusic-guide-section-renderer, ytmusic-app-layout.content-scrolled, ytmusic-app-layout #background, ytmusic-app-layout #guide-background, ytmusic-app-layout #player-bar-background, ytmusic-app-layout #nav-bar-background:not(.scrolled) { background: transparent !important; background-color: transparent !important; --ytmusic-guide-background: transparent !important; --iron-drawer-background-color: transparent !important; } ytmusic-nav-bar, #nav-bar-divider { background: transparent !important; border: none !important; } /* High specificity rules for scrolled state - targeting both to ensure coverage */ ytmusic-nav-bar.scrolled, #nav-bar-background.scrolled, ytmusic-nav-bar[opened], body[player-page-open] ytmusic-nav-bar, body[player-page-open] #nav-bar-background { background: rgba(10, 10, 10, 0.4) !important; backdrop-filter: blur(25px) !important; -webkit-backdrop-filter: blur(25px) !important; } ytmusic-player-bar { background: rgba(0, 0, 0, 0.2) !important; backdrop-filter: blur(30px) !important; -webkit-backdrop-filter: blur(30px) !important; border-top: 1px solid rgba(255, 255, 255, 0.05) !important; } /* Standardized YTM Glass Buttons (Edit, Menu, Play, etc.) */ button.ytSpecButtonShapeNextHost, yt-button-shape button, yt-icon-button#guide-button #button, .history-button #button { background: rgba(255, 255, 255, 0.15) !important; backdrop-filter: blur(12px) !important; -webkit-backdrop-filter: blur(12px) !important; color: #fff !important; } /* Play button specific fixes */ ytmusic-play-button-renderer { background: transparent !important; --ytmusic-play-button-background-color: transparent !important; --ytmusic-play-button-active-background-color: rgba(255, 255, 255, 0.25) !important; } ytmusic-play-button-renderer .content-wrapper { background: rgba(255, 255, 255, 0.15) !important; backdrop-filter: blur(12px) !important; -webkit-backdrop-filter: blur(12px) !important; border-radius: 50% !important; } ytmusic-play-button-renderer yt-icon, ytmusic-play-button-renderer #icon, ytmusic-play-button-renderer .icon { background: transparent !important; background-color: transparent !important; color: #fff !important; --ytmusic-play-button-icon-color: #fff !important; } /* Ensure SVGs inside are visible */ ytmusic-play-button-renderer svg { fill: #fff !important; } ` : ''} `); } else { // Remove nav-bar var only on YT (not relevant there anyway) document.documentElement.style.removeProperty('--ytmusic-nav-bar-background'); } addDynamicCss(` .botones_div { background-color: transparent; border: none; color: #ccc !important; user-select: none; } `); } } // Reverse mode and sidebar CSS (YT only selectors) if (!isYTMusic) { addDynamicCss(` #columns.style-scope.ytd-watch-flexy { flex-direction: ${settings.reverseMode ? 'row-reverse' : 'row'} !important; padding-left: ${settings.reverseMode ? '20px' : '0'} !important; } #secondary.style-scope.ytd-watch-flexy {display: ${settings.hideSidebar ? 'none' : 'block'} !important;} `); } addDynamicCss(` #icon-menu-settings { color: ${settings.iconsColorPicker} !important; } `); checkDarkMode(); // Apply dynamic CSS once per settings update setDynamicCss(dynamicCssArray.join('\n')); // Gộp tất cả CSS trong mảng và tiêm vào trang // Apply new features (safe, no heavy loops) applyBookmarksIfEnabled(settings); setupContinueWatchingFeature(settings.continueWatching); if (!isYTMusic) { scheduleLikeBarUpdate(settings, 5); setupShortsChannelNameFeature(settings.shortsChannelName); setupLockupCachedStats(); } checkForVideo(); downloadDescriptionVideo(); traductor(); function checkForVideo() { if (!settings.waveVisualizer) { cleanup(true); // Limpieza completa return; } const video = $e('video'); const miniPlayer = $e('.ytp-miniplayer-ui'); if ((video && document.location.href.includes('watch')) || miniPlayer) { // Solo si el video cambió o no está configurado if (video !== currentVideo || !isSetup) { cleanup(true); // Limpieza completa antes de crear uno nuevo setupAudioAnalyzer(video); } else if (controlPanel && video.paused === false) { showCanvas(); } } } function downloadDescriptionVideo() { if (isYTMusic) return; // YTM has no description row if (!window.location.href.includes('youtube.com/watch')) return; if ($e('#button_copy_description')) return; const containerDescription = $e('#bottom-row.style-scope.ytd-watch-metadata'); if (!containerDescription) return; const buttomHTML = ` <div id="button_copy_description" style="display: flex; justify-content: end; align-items: center;margin-top: 10px;" > <button id="copy-description" title="Copy description" class="botones_div" type="button" style="cursor: pointer;"> <i style="font-size: 20px;" class="fa-solid fa-copy"></i> </button> </div> `; containerDescription.insertAdjacentHTML('beforebegin', safeHTML(buttomHTML)); $id('copy-description').addEventListener('click', () => { const ldJson = [...$m('script[type="application/ld+json"]')]; for (let script of ldJson) { try { const data = JSON.parse(script.innerText); if (data['@type'] === 'VideoObject') { const description = `📅 Date published: ${data.uploadDate || 'No disponible'}\n` + `Author: ${data.author || 'No disponible'}\n` + `🎬 Name video: ${data.name || 'No disponible'}\n` + `🖼️ Thumbnail: ${Array.isArray(data.thumbnailUrl) ? data.thumbnailUrl.join(', ') : data.thumbnailUrl || 'No disponible'}\n` + `📝 Description: ${data.description || 'No disponible'}\n\n\n` + `🎭 Category: ${data.genre || 'No disponible'}\n`; navigator.clipboard.writeText(description); Notify('success', 'Description copied'); } } catch (e) { Notify('error', 'Error parsing JSON-LD'); } } }); } // Biến cờ phải nằm ngoài hàm để không bị reset let translatorEventBound = false; function traductor() { // Chỉ quét những comment chưa có nút dịch (dùng thuộc tính data-translated) const texts = document.querySelectorAll('#content-text:not([data-translated])'); if (texts.length === 0) return; const languages = languagesTranslate; const idiomaDestino = $id('select-languages-comments-select').value; // Tạo sẵn HTML cho dropdown ngôn ngữ để dùng chung const optionsHTML = Object.entries(languages) .map(([code, name]) => `<option value="${code}" ${code === idiomaDestino ? 'selected' : ''}>${name}</option>`) .join(''); // Gắn nút dịch vào các comment mới texts.forEach((texto) => { texto.setAttribute('data-translated', 'true'); // Đánh dấu là đã gắn nút const controlsHTML = ` <div class="traductor-container"> <button class="buttons-tranlate" data-action="translate-comment"> Translate <i class="fa-solid fa-language"></i></button> <select class="select-traductor"> ${optionsHTML} </select> </div> `; texto.insertAdjacentHTML('afterend', safeHTML(controlsHTML)); }); // Áp dụng Event Delegation: Chỉ gắn sự kiện click 1 lần duy nhất lên document if (!translatorEventBound) { translatorEventBound = true; document.addEventListener('click', (e) => { const btn = e.target.closest('.buttons-tranlate[data-action="translate-comment"]'); if (!btn) return; const container = btn.closest('.traductor-container'); const selectLang = container.querySelector('.select-traductor'); const textNode = container.previousElementSibling; // Thẻ #content-text if (!textNode || !selectLang) return; const urlLista = `?client=dict-chrome-ex&sl=auto&tl=${selectLang.value}&q=` + encodeURIComponent(textNode.textContent); btn.innerHTML = safeHTML('Translating... <i class="fa-solid fa-spinner fa-spin"></i>'); fetch(apiGoogleTranslate + urlLista) .then((response) => response.json()) .then((datos) => { textNode.textContent = datos[0][0]; btn.textContent = 'Translated'; }) .catch((err) => { console.error('Error en la traducción:', err); btn.textContent = 'Error'; }); }); } } function limpiarHTML(selector) { $m(selector).forEach((button) => button.remove()); } // === CODE TỐI ƯU MỚI THAY THẾ CHO SCROLL EVENT === (YT only) if (!isYTMusic) { let _commentIO = null; let _commentMO = null; function initSmartCommentObserver() { const commentsContainer = document.querySelector('#comments'); if (!commentsContainer) return; // Disconnect previous observers to avoid duplicates if (_commentIO) { try { _commentIO.disconnect(); } catch (e) { } _commentIO = null; } if (_commentMO) { try { _commentMO.disconnect(); } catch (e) { } _commentMO = null; } _commentIO = new IntersectionObserver((entries) => { if (entries[0].isIntersecting) { _commentMO = new MutationObserver((mutations) => { let shouldUpdate = false; for (let m of mutations) { if (m.addedNodes.length > 0) { shouldUpdate = true; break; } } if (shouldUpdate) { window.requestAnimationFrame(() => { if (settings.avatars) agregarBotonesDescarga(); if (settings.translation) traductor(); }); } }); const commentContents = document.querySelector('ytd-comments #contents'); if (commentContents) { _commentMO.observe(commentContents, { childList: true, subtree: true }); } _commentIO.disconnect(); } }); _commentIO.observe(commentsContainer); } if (!window.__ytToolsCommentNavBound) { window.__ytToolsCommentNavBound = true; document.addEventListener('yt-navigate-finish', () => { setTimeout(initSmartCommentObserver, 1500); }); } initSmartCommentObserver(); } // end if (!isYTMusic) // === KẾT THÚC CODE TỐI ƯU === // Shorts DOM observer (YT only) – guarded via __ytToolsRuntime.shortsObserver if (!isYTMusic) { const contentScrollable = $e('.anchored-panel.style-scope.ytd-shorts #contents.style-scope.ytd-item-section-renderer.style-scope.ytd-item-section-renderer'); if (contentScrollable) { // Disconnect previous Shorts observer if it exists if (__ytToolsRuntime.shortsObserver) { try { __ytToolsRuntime.shortsObserver.disconnect(); } catch (e) { } __ytToolsRuntime.shortsObserver = null; } let domTimeout; __ytToolsRuntime.shortsObserver = new MutationObserver(() => { if (domTimeout) clearTimeout(domTimeout); domTimeout = setTimeout(() => { insertButtons(); addIcon(); }, 300); }); __ytToolsRuntime.shortsObserver.observe(contentScrollable, { childList: true, subtree: true }); } } // end if (!isYTMusic) shorts observer function agregarBotonesDescarga() { const avatars = $m('#author-thumbnail-button #img.style-scope.yt-img-shadow'); avatars.forEach((img) => { if (img.parentElement.querySelector('.yt-image-avatar-download')) return; const button = $cl('button'); button.innerHTML = safeHTML('<i class="fa fa-download"></i>'); button.classList.add('yt-image-avatar-download'); button.onclick = async function () { try { const imageUrl = img.src.split('=')[0]; const response = await fetch(imageUrl); const blob = await response.blob(); const blobUrl = URL.createObjectURL(blob); const parentComment = img.closest('ytd-comment-thread-renderer, ytd-comment-renderer'); const nameElement = parentComment?.querySelector('#author-text'); let authorName = nameElement ? nameElement.textContent.trim() : 'avatar'; authorName = authorName.replace(/[\/\\:*?"<>|]/g, ''); const link = $cl('a'); link.href = blobUrl; link.download = `${authorName}_avatar.jpg` || 'avatar.jpg'; document.body.appendChild(link); link.click(); document.body.removeChild(link); setTimeout(() => URL.revokeObjectURL(blobUrl), 1000); // Đợi 1s cho trình duyệt bắt đầu tải } catch (error) { console.error('Error al descargar la imagen:', error); } }; img.parentElement.style.position = 'relative'; img.parentElement.appendChild(button); }); } const redirectToClassic = () => { const videoId = window.location.pathname.split('/').pop(); const classicUrl = `https://www.youtube.com/watch?v=${videoId}`; window.open(classicUrl, '_blank'); $e('video.video-stream.html5-main-video').pause(); }; // Update the Shorts "views" button label (same bar as Classic). Call with viewCount from API/cache. function updateShortsViewsButton(videoId, viewCount) { const bar = $e('reel-action-bar-view-model'); if (!bar) return; const viewsWrap = bar.querySelector('[data-yt-tools-shorts-views]'); if (!viewsWrap) return; const labelSpan = viewsWrap.querySelector('.yt-spec-button-shape-with-label__label span, [role="text"]'); if (!labelSpan) return; labelSpan.textContent = Number.isFinite(viewCount) && viewCount >= 0 ? FormatterNumber(viewCount, 0) : '—'; } // Update the Shorts "rating" button label (rating 0–5 from API/cache, shown as e.g. "4.9"). function updateShortsRatingButton(videoId, rating) { const bar = $e('reel-action-bar-view-model'); if (!bar) return; const ratingWrap = bar.querySelector('[data-yt-tools-shorts-rating]'); if (!ratingWrap) return; const labelSpan = ratingWrap.querySelector('.yt-spec-button-shape-with-label__label span, [role="text"]'); if (!labelSpan) return; labelSpan.textContent = (Number.isFinite(rating) && rating >= 0 && rating <= 5) ? rating.toFixed(1) : '—'; } // Build one YT-style button for the reel action bar using pure DOM API (Trusted Types safe). function createReelBarButton(opts) { const wrap = document.createElement('div'); wrap.className = 'button-view-model ytSpecButtonViewModelHost'; if (opts.dataAttr) wrap.setAttribute(opts.dataAttr, '1'); const label = document.createElement('label'); label.className = 'yt-spec-button-shape-with-label ytSpecButtonShapeWithLabelHost'; const button = document.createElement('button'); button.type = 'button'; button.className = 'yt-spec-button-shape-next yt-spec-button-shape-next--tonal yt-spec-button-shape-next--mono yt-spec-button-shape-next--size-l yt-spec-button-shape-next--icon-button ytSpecButtonShapeNextHost ytSpecButtonShapeNextTonal ytSpecButtonShapeNextMono ytSpecButtonShapeNextSizeL ytSpecButtonShapeNextIconButton'; button.title = opts.title || ''; button.setAttribute('aria-label', opts.ariaLabel || ''); const iconDiv = document.createElement('div'); iconDiv.className = 'yt-spec-button-shape-next__icon'; iconDiv.setAttribute('aria-hidden', 'true'); const iconSpan = document.createElement('span'); iconSpan.className = 'yt-icon-shape ytSpecIconShapeHost'; // Use safeHTML + temp div to parse SVG (works with Trusted Types) if (opts.iconSvg) { try { const tempDiv = document.createElement('div'); tempDiv.innerHTML = safeHTML(opts.iconSvg); while (tempDiv.firstChild) { iconSpan.appendChild(tempDiv.firstChild); } } catch (e) { console.warn('[YT Tools] SVG parse error:', e); } } iconDiv.appendChild(iconSpan); button.appendChild(iconDiv); const labelDiv = document.createElement('div'); labelDiv.className = 'yt-spec-button-shape-with-label__label'; labelDiv.setAttribute('aria-hidden', 'false'); const labelSpan = document.createElement('span'); labelSpan.className = 'yt-core-attributed-string yt-core-attributed-string--white-space-pre-wrap yt-core-attributed-string--text-alignment-center yt-core-attributed-string--word-wrapping'; labelSpan.setAttribute('role', 'text'); labelSpan.textContent = opts.labelText || ''; labelDiv.appendChild(labelSpan); label.appendChild(button); label.appendChild(labelDiv); wrap.appendChild(label); if (opts.onclick) button.addEventListener('click', opts.onclick); return wrap; } const eyeIconSvg = '<svg xmlns="http://www.w3.org/2000/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-eye"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M10 12a2 2 0 1 0 4 0a2 2 0 0 0 -4 0" /><path d="M21 12c-2.4 4 -5.4 6 -9 6c-3.6 0 -6.6 -2 -9 -6c2.4 -4 5.4 -6 9 -6c3.6 0 6.6 2 9 6" /></svg>'; const classicIconSvg = '<svg xmlns="http://www.w3.org/2000/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-device-tv"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M3 9a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v9a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2l0 -9" /><path d="M16 3l-4 4l-4 -4" /></svg>'; const starIconSvg = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" stroke="none"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg>'; function insertReelBarButtons() { const isShortsPage = document.location.pathname.startsWith('/shorts'); const bar = $e('reel-action-bar-view-model'); if (!isShortsPage || !bar) { document.querySelectorAll('[data-yt-tools-shorts-classic], [data-yt-tools-shorts-views], [data-yt-tools-shorts-rating]').forEach(el => el.remove()); return; } if (bar.querySelector('[data-yt-tools-shorts-classic]')) return; const classicBtn = createReelBarButton({ dataAttr: 'data-yt-tools-shorts-classic', title: 'Classic mode', ariaLabel: 'Chế độ cổ điển', iconSvg: classicIconSvg, labelText: '', onclick: redirectToClassic, }); const viewsBtn = createReelBarButton({ dataAttr: 'data-yt-tools-shorts-views', title: 'Vistas', ariaLabel: 'Vistas', iconSvg: eyeIconSvg, labelText: '—', onclick: function () { }, }); const ratingBtn = createReelBarButton({ dataAttr: 'data-yt-tools-shorts-rating', title: 'Rating (likes/dislikes)', ariaLabel: 'Rating', iconSvg: starIconSvg, labelText: '—', onclick: function () { }, }); bar.insertBefore(ratingBtn, bar.firstChild); bar.insertBefore(viewsBtn, bar.firstChild); bar.insertBefore(classicBtn, bar.firstChild); const videoId = (document.location.pathname.split('/').filter(Boolean))[1]; if (videoId) { const persisted = getLikesDislikesFromPersistedCache(videoId); if (persisted && persisted.viewCount != null) updateShortsViewsButton(videoId, persisted.viewCount); if (persisted && persisted.rating != null) updateShortsRatingButton(videoId, persisted.rating); } __ytToolsRuntime.updateShortsViewsButton = updateShortsViewsButton; __ytToolsRuntime.updateShortsRatingButton = updateShortsRatingButton; } const insertButtons = () => { insertReelBarButtons(); }; const targetNode = $e('body'); if (targetNode != undefined && !isYTMusic) { const element = $e('ytd-item-section-renderer[static-comments-header] #contents'); if (element != undefined && settings.theme !== 'custom') { const observerElementDom = (elem) => { const observer = new IntersectionObserver(entries => { if (entries[0].isIntersecting) { element.style.background = `${selectedTheme.gradient ?? ''}`; } else { return } }) return observer.observe($e(`${elem}`)) } observerElementDom('ytd-item-section-renderer[static-comments-header] #contents') } } // Stats function formatTime(seconds) { if (isNaN(seconds)) return '0h 0m 0s'; seconds = Math.floor(seconds); const h = Math.floor(seconds / 3600); const m = Math.floor((seconds % 3600) / 60); const s = seconds % 60; return `${h}h ${m}m ${s}s`; } function updateUI() { $id('total-time').textContent = formatTime(usageTime); $id('video-time').textContent = formatTime(videoTime); $id('shorts-time').textContent = formatTime(shortsTime); const maxTime = 86400; // 24 hours $id('usage-bar').style.width = `${(usageTime / maxTime) * 100}%`; $id('video-bar').style.width = `${(videoTime / maxTime) * 100}%`; $id('shorts-bar').style.width = `${(shortsTime / maxTime) * 100}%`; } function detectContentType(videoElement) { if (/\/shorts\//.test(window.location.pathname)) return 'shorts'; let parent = videoElement; while ((parent = parent.parentElement) !== null) { if (parent.classList.contains('shorts-container') || parent.classList.contains('reel-video') || parent.tagName === 'YTD-REEL-VIDEO-RENDERER') { return 'shorts'; } } if (videoElement.closest('ytd-watch-flexy') || videoElement.closest('#primary-inner')) { return 'video'; } if (videoElement.closest('ytd-thumbnail') || videoElement.closest('ytd-rich-item-renderer')) { return 'video'; } return null; } function findActiveVideo() { const videos = $m('video'); for (const video of videos) { if (!video.paused && !video.ended && video.readyState > 2) { return video; } } return null; } function updateCanvasSize() { if (canvas) { canvas.width = window.innerWidth; canvas.height = canvasHeight; } } function onWaveStyleChange(e) { waveStyle = e.target.value; const selectAppend = $id('select-wave-visualizer-select'); if (selectAppend) selectAppend.value = e.target.value; saveSettings(); } function cleanup(fullCleanup = false) { if (fullCleanup && animationId) { cancelAnimationFrame(animationId); animationId = null; } if (currentVideo) { currentVideo.removeEventListener('play', showCanvas); currentVideo.removeEventListener('pause', hideCanvas); currentVideo.removeEventListener('ended', hideCanvas); } if (fullCleanup) { if (canvas && canvas.parentNode) { canvas.parentNode.removeChild(canvas); canvas = null; ctx = null; } if (controlPanel && controlPanel.parentNode) { controlPanel.parentNode.removeChild(controlPanel); controlPanel = null; } if (source) { try { source.disconnect(); // Reconnect source directly to destination to keep audio playing // (createMediaElementSource routes ALL audio through Web Audio API) if (audioCtx && audioCtx.state !== 'closed') { source.connect(audioCtx.destination); } } catch (err) { } // Don't null source — cached on video.__ytToolsAudioSource for reuse } // Keep audioCtx running — source is connected to destination for audio passthrough if (currentVideo && currentVideo[PROCESSED_FLAG]) { delete currentVideo[PROCESSED_FLAG]; } currentVideo = null; isSetup = false; window.removeEventListener('resize', updateCanvasSize); const selectAppend = $id('select-wave-visualizer-select'); if (selectAppend) selectAppend.removeEventListener('change', onWaveStyleChange); } else { if (canvas) canvas.style.opacity = '0'; if (controlPanel) controlPanel.style.opacity = '0'; } } function createCanvasOverlay() { if (canvas) return; const parent = document.body; canvas = document.createElement('canvas'); canvas.id = 'wave-visualizer-canvas'; canvas.width = window.innerWidth; canvas.height = canvasHeight; canvas.style.position = 'fixed'; canvas.style.left = '0'; canvas.style.top = '0'; canvas.style.width = '100%'; canvas.style.pointerEvents = 'none'; canvas.style.backgroundColor = 'transparent'; canvas.style.zIndex = '10000'; canvas.style.opacity = '0'; canvas.style.transition = 'opacity 0.3s'; parent.appendChild(canvas); ctx = canvas.getContext('2d'); } function createControlPanelWave() { if (controlPanel) return; controlPanel = $cl('div'); controlPanel.id = 'wave-visualizer-control'; const selectAppend = $id('select-wave-visualizer-select'); waveStyle = settings.waveVisualizerSelected; if (selectAppend) { selectAppend.removeEventListener('change', onWaveStyleChange); selectAppend.addEventListener('change', onWaveStyleChange); } } // setting Audio y Analyser function setupAudioAnalyzer(video) { if (!video || video[PROCESSED_FLAG]) return; video[PROCESSED_FLAG] = true; cleanup(false); currentVideo = video; createCanvasOverlay(); createControlPanelWave(); // Reuse existing AudioContext if possible (suspend/resume pattern) if (!audioCtx || audioCtx.state === 'closed') { const AudioContext = window.AudioContext || window.webkitAudioContext; audioCtx = new AudioContext(); } else if (audioCtx.state === 'suspended') { audioCtx.resume(); } analyser = audioCtx.createAnalyser(); analyser.fftSize = 2048; analyser.smoothingTimeConstant = 0.85; bufferLength = analyser.fftSize; dataArray = new Uint8Array(bufferLength); smoothedData = new Array(bufferLength).fill(128); try { // Reuse cached source if video already has one (createMediaElementSource is one-shot per element) if (video.__ytToolsAudioSource) { source = video.__ytToolsAudioSource; try { source.disconnect(); } catch (e) { } } else { source = audioCtx.createMediaElementSource(video); video.__ytToolsAudioSource = source; } source.connect(analyser); analyser.connect(audioCtx.destination); } catch (e) { Notify('error', "MediaElementSource or error:", e); cleanup(true); return; } video.removeEventListener('play', showCanvas); video.removeEventListener('pause', hideCanvas); video.removeEventListener('ended', hideCanvas); video.addEventListener('play', showCanvas); video.addEventListener('pause', hideCanvas); video.addEventListener('ended', hideCanvas); window.removeEventListener('resize', updateCanvasSize); window.addEventListener('resize', updateCanvasSize); draw(); isSetup = true; } function draw() { animationId = requestAnimationFrame(draw); if (parseFloat(canvas.style.opacity) <= 0) return; analyser.getByteTimeDomainData(dataArray); for (let i = 0; i < bufferLength; i++) { smoothedData[i] += smoothingFactor * (dataArray[i] - smoothedData[i]); } ctx.clearRect(0, 0, canvas.width, canvas.height); let sliceWidth = canvas.width / bufferLength; switch (waveStyle) { case 'linea': { ctx.lineWidth = 2; ctx.strokeStyle = 'lime'; ctx.beginPath(); let x = 0; for (let i = 0; i < bufferLength; i++) { let amplitude = Math.max(0, smoothedData[i] - 128) * scale; if (i === 0) ctx.moveTo(x, amplitude); else ctx.lineTo(x, amplitude); x += sliceWidth; } ctx.stroke(); break; } case 'barras': { let x = 0; for (let i = 0; i < bufferLength; i += 5) { let amplitude = Math.max(0, smoothedData[i] - 128) * scale; ctx.fillStyle = 'cyan'; ctx.fillRect(x, 0, sliceWidth * 4, amplitude); x += sliceWidth * 5; } break; } case 'curva': { ctx.lineWidth = 2; ctx.strokeStyle = 'yellow'; ctx.beginPath(); ctx.moveTo(0, Math.max(0, smoothedData[0] - 128) * scale); for (let i = 0; i < bufferLength - 1; i++) { let x0 = i * sliceWidth; let x1 = (i + 1) * sliceWidth; let y0 = Math.max(0, smoothedData[i] - 128) * scale; let y1 = Math.max(0, smoothedData[i + 1] - 128) * scale; let cp1x = x0 + sliceWidth / 3; let cp1y = y0; let cp2x = x1 - sliceWidth / 3; let cp2y = y1; ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x1, y1); } ctx.stroke(); break; } case 'picos': { ctx.fillStyle = 'magenta'; let x = 0; for (let i = 0; i < bufferLength; i += 5) { let amplitude = Math.max(0, smoothedData[i] - 128) * scale; ctx.beginPath(); ctx.arc(x, amplitude, 2, 0, Math.PI * 2); ctx.fill(); x += sliceWidth * 5; } break; } case 'solida': { ctx.beginPath(); let x = 0; ctx.moveTo(0, 0); for (let i = 0; i < bufferLength; i++) { let amplitude = Math.max(0, smoothedData[i] - 128) * scale; ctx.lineTo(x, amplitude); x += sliceWidth; } ctx.lineTo(canvas.width, 0); ctx.closePath(); ctx.fillStyle = 'rgba(0,255,0,0.3)'; ctx.fill(); break; } case 'dinamica': { let gradient = ctx.createLinearGradient(0, 0, canvas.width, 0); gradient.addColorStop(0, 'red'); gradient.addColorStop(0.5, 'purple'); gradient.addColorStop(1, 'blue'); ctx.lineWidth = 3; ctx.strokeStyle = gradient; ctx.beginPath(); let x = 0; for (let i = 0; i < bufferLength; i++) { let amplitude = Math.max(0, smoothedData[i] - 128) * scale; if (i === 0) ctx.moveTo(x, amplitude); else ctx.lineTo(x, amplitude); x += sliceWidth; } ctx.stroke(); break; } case 'montana': { ctx.beginPath(); let x = 0; ctx.moveTo(0, 0); for (let i = 0; i < bufferLength; i++) { let amp = (smoothedData[i] - 128) * scale * 0.8; ctx.lineTo(x, amp); x += sliceWidth; } ctx.lineTo(canvas.width, 0); ctx.closePath(); ctx.fillStyle = 'rgba(128,128,255,0.4)'; ctx.fill(); break; } default: break; } } // Sử dụng các API sự kiện có sẵn của YouTube để tránh dùng MutationObserver // (chỉ gắn 1 lần, tránh leak khi applySettings chạy lại) if (!window.__ytToolsPageDataBound && !isYTMusic) { window.__ytToolsPageDataBound = true; document.addEventListener('yt-page-data-updated', () => { requestAnimationFrame(() => { if (window.location.pathname.startsWith('/shorts')) { insertButtons(); } addIcon(); }); }); } // Cập nhật thống kê thời gian xem định kỳ mà không cần MutationObserver // GM_setValue chỉ gọi mỗi 30 giây để giảm I/O, UI vẫn cập nhật mỗi 1 giây if (!__ytToolsRuntime.statsIntervalId) { let __lastStatsSave = 0; __ytToolsRuntime.statsIntervalId = setInterval(() => { const now = Date.now(); const delta = (now - lastUpdate) / 1000; const isVisible = document.visibilityState === 'visible'; if (isVisible) { usageTime += delta; } // Only do DOM query when tab is visible if (isVisible) { const activeVideoEl = document.querySelector('video.video-stream'); if (activeVideoEl && !activeVideoEl.paused && !activeVideoEl.ended) { const type = window.location.pathname.startsWith('/shorts') ? 'shorts' : 'video'; if (type === 'video') videoTime += delta; else shortsTime += delta; } } lastUpdate = now; // Chỉ lưu vào GM storage mỗi 30 giây để giảm I/O if (now - __lastStatsSave >= 30000) { __lastStatsSave = now; GM_setValue(STORAGE.USAGE, usageTime); GM_setValue(STORAGE.VIDEO, videoTime); GM_setValue(STORAGE.SHORTS, shortsTime); } if (isVisible && $id('stats')?.classList?.contains('active')) updateUI(); }, 2000); // Reduced from 1s to 2s — UI still feels responsive // Lưu ngay khi user rời trang window.addEventListener('pagehide', () => { GM_setValue(STORAGE.USAGE, usageTime); GM_setValue(STORAGE.VIDEO, videoTime); GM_setValue(STORAGE.SHORTS, shortsTime); }, { capture: true }); } // Chạy lần đầu tiên cho Shorts nếu đang ở trang Shorts if (!isYTMusic && window.location.pathname.startsWith('/shorts')) { insertButtons(); } // --- KẾT THÚC GLOBAL OBSERVER --- checkForVideo(); // retry: video element may not exist at first call (line ~5228) // [REMOVED] Duplicate stats interval was here — already handled above (line ~5924). updateUI(); // end stats if (__ytToolsRuntime.settingsLoaded) { saveSettings(); } } // Build YTM toolbar using pure DOM API (bypasses Trusted Types) const UPDATE_INTERVAL = 1000; const STORAGE = { USAGE: 'YT_TOTAL_USAGE', VIDEO: 'YT_VIDEO_TIME', SHORTS: 'YT_SHORTS_TIME' }; let usageTime = GM_getValue(STORAGE.USAGE, 0); let videoTime = GM_getValue(STORAGE.VIDEO, 0); let shortsTime = GM_getValue(STORAGE.SHORTS, 0); let lastUpdate = Date.now(); let activeVideo = null; let activeType = null; // Inicializar almacenamiento GM_setValue(STORAGE.USAGE, usageTime); GM_setValue(STORAGE.VIDEO, videoTime); GM_setValue(STORAGE.SHORTS, shortsTime); console.log('Script en ejecución by: Akari'); const HEADER_STYLE = 'color: #F00; font-size: 24px; font-family: sans-serif;'; const MESSAGE_STYLE = 'color: #00aaff; font-size: 16px; font-family: sans-serif;'; const CODE_STYLE = 'font-size: 14px; font-family: monospace;'; console.log( `%cYoutube Ultimate Tools (v${GM_info.script.version})\n` + '%cDeveloped by Akari\n' + '%c(Based on MDCM & nvbangg)', HEADER_STYLE, CODE_STYLE, MESSAGE_STYLE ); const currentVersion = GM_info.script.version; if (!localStorage.getItem('notification-Akari-' + currentVersion)) { Notify('info', 'Youtube Ultimate Tools by: Akari (v' + currentVersion + ')'); localStorage.setItem('notification-Akari-' + currentVersion, true); } // Add event listeners to all inputs const inputs = panel.querySelectorAll('input'); inputs.forEach((input) => { input.addEventListener('change', () => { try { saveSettings(); } catch (e) { console.error('saveSettings error:', e); } scheduleApplySettings(); }); if (input.type === 'range') { input.addEventListener('input', () => { updateSliderValues(); }); } }); // Some settings are controlled by <select> elements; ensure they persist and apply without duplicating listeners. function bindSelectOnce(id) { const el = $id(id); if (!el) return; if (el.dataset.ytToolsBound === '1') return; el.dataset.ytToolsBound = '1'; el.addEventListener('change', () => { // Persist immediately try { saveSettings(); } catch (e) { console.error('saveSettings error:', e); } // Apply with debounce scheduleApplySettings(); }); } bindSelectOnce('select-video-qualitys-select'); bindSelectOnce('select-languages-comments-select'); bindSelectOnce('select-wave-visualizer-select'); // Export configuration // Settings saved // const settings = GM_getValue(SETTINGS_KEY, '{}'); // $id('config-data').value = settings; $id('export-config').addEventListener('click', () => { const settings = GM_getValue(SETTINGS_KEY, '{}'); $id('config-data').value = settings; const configData = settings; try { JSON.parse(configData); // Validate JSON GM_setValue(SETTINGS_KEY, configData); setTimeout(() => { Notify('success', 'Configuration export successfully!'); }, 1000); } catch (e) { Notify('error', 'Invalid configuration data. Please check and try again.'); } }); // Import configuration $id('import-config').addEventListener('click', () => { const configData = $id('config-data').value; try { JSON.parse(configData); // Validate JSON GM_setValue(SETTINGS_KEY, configData); setTimeout(() => { Notify('success', 'Configuration imported successfully!'); window.location.reload(); }, 1000); // window.location.reload(); // removed: duplicate (setTimeout above already reloads) } catch (e) { Notify('error', 'Invalid configuration data. Please check and try again.'); } }); panel.style.display = 'none'; // var for wave // Load saved settings // Visible element DOM function checkElement(selector, callback, maxAttempts = 100) { let attempts = 0; const interval = setInterval(() => { if ($e(selector)) { clearInterval(interval); callback(); } else { attempts++; if (attempts >= maxAttempts) { clearInterval(interval); console.warn(`[Youtube Tools] Không tìm thấy element: ${selector}`); } } }, 100); } const checkActiveWave = $id('wave-visualizer-toggle'); if (checkActiveWave) { checkActiveWave.addEventListener('change', () => { const waveVisualizer = $e('#wave-visualizer-toggle'); if (waveVisualizer.checked) { Notify('success', 'Wave visualizer enabled'); saveSettings(); scheduleApplySettings(); } else { // Soft cleanup: hide canvas + stop animation, but keep AudioContext alive // (createMediaElementSource can only bind once per video element) if (animationId) { cancelAnimationFrame(animationId); animationId = null; } hideCanvas(); saveSettings(); Notify('success', 'Wave visualizer disabled'); } }); } const checkAudioOnlyTabToggle = $id('audio-only-tab-toggle'); if (checkAudioOnlyTabToggle) { checkAudioOnlyTabToggle.addEventListener('change', () => { const defaultEnabled = $id('audio-only-toggle') ? $id('audio-only-toggle').checked : false; setAudioOnlyTabOverride(checkAudioOnlyTabToggle.checked, defaultEnabled); const settings = JSON.parse(GM_getValue(SETTINGS_KEY, '{}')); syncAudioOnlyTabCheckbox({ ...settings, audioOnly: defaultEnabled }); Notify('success', checkAudioOnlyTabToggle.checked ? 'Audio-only enabled for this tab' : 'Audio-only disabled for this tab'); scheduleApplySettings(); }); } const checkAudioOnlyToggle = $id('audio-only-toggle'); if (checkAudioOnlyToggle) { checkAudioOnlyToggle.addEventListener('change', () => { const settings = JSON.parse(GM_getValue(SETTINGS_KEY, '{}')); syncAudioOnlyTabCheckbox({ ...settings, audioOnly: checkAudioOnlyToggle.checked }); Notify('success', checkAudioOnlyToggle.checked ? 'Audio-only mode enabled' : 'Audio-only mode disabled'); }); } const checkNonstopPlaybackToggle = $id('nonstop-playback-toggle'); if (checkNonstopPlaybackToggle) { checkNonstopPlaybackToggle.addEventListener('change', () => { Notify('success', checkNonstopPlaybackToggle.checked ? 'Nonstop playback enabled' : 'Nonstop playback disabled'); }); } // Themes toggle event listener (auto-disable ambient in YTM if themes are turned on) const checkThemesToggle = $id('themes-toggle'); if (checkThemesToggle) { checkThemesToggle.addEventListener('change', () => { if (isYTMusic && checkThemesToggle.checked) { const cinematicToggle = $id('cinematic-lighting-toggle'); if (cinematicToggle && cinematicToggle.checked) { cinematicToggle.checked = false; try { saveSettings(); } catch (e) { } scheduleApplySettings(); } } }); } // Cinematic/Ambient lighting toggle event listener const checkCinematicLighting = $id('cinematic-lighting-toggle'); if (checkCinematicLighting) { checkCinematicLighting.addEventListener('change', () => { const cinematicToggle = $e('#cinematic-lighting-toggle'); const syncToggle = $e('#sync-cinematic-toggle'); const cinematicDiv = $id('cinematics'); if (cinematicToggle.checked) { Notify('success', isYTMusic ? 'Ambient mode enabled' : 'Cinematic mode enabled'); } else { Notify('success', isYTMusic ? 'Ambient mode disabled' : 'Cinematic mode disabled'); } if (isYTMusic) { // YTM: use custom ambient mode if (cinematicToggle.checked) { // Auto-disable theme when ambient is ON (they conflict) const themesToggle = $id('themes-toggle'); if (themesToggle && themesToggle.checked) { themesToggle.checked = false; try { saveSettings(); } catch (e) { } scheduleApplySettings(); } ytmAmbientMode.show(); } else { ytmAmbientMode.destroy(); } } else { // YT: use cinematic lighting if (syncToggle.checked) { setTimeout(() => { toggleCinematicLighting(); }, 300); } else { if (cinematicDiv) { cinematicDiv.style.display = cinematicToggle.checked ? 'block' : 'none'; } } } }); } // Sync cinematic toggle event listener const checkSyncCinematic = $id('sync-cinematic-toggle'); if (checkSyncCinematic) { checkSyncCinematic.addEventListener('change', () => { const syncToggle = $e('#sync-cinematic-toggle'); const cinematicToggle = $e('#cinematic-lighting-toggle'); const cinematicDiv = $id('cinematics'); if (syncToggle.checked) { Notify('success', 'Sync with YouTube enabled'); // Si se activa la sincronización y el modo cinematic está activado, sincronizar con YouTube if (cinematicToggle.checked) { setTimeout(() => { toggleCinematicLighting(); }, 500); } } else { Notify('success', 'Sync with YouTube disabled'); // Si se desactiva la sincronización, aplicar inmediatamente el estado del toggle if (cinematicDiv) { cinematicDiv.style.display = cinematicToggle.checked ? 'block' : 'none'; } } }); } // Side Panel Style listener const checkSidePanelStyle = $id('side-panel-style-select'); if (checkSidePanelStyle) { checkSidePanelStyle.addEventListener('change', () => { saveSettings(); scheduleApplySettings(); }); } // Custom Timeline Color listener const checkCustomTimeline = $id('custom-timeline-color-toggle'); if (checkCustomTimeline) { checkCustomTimeline.addEventListener('change', () => { saveSettings(); scheduleApplySettings(); }); } // Use the correct selector depending on YouTube vs YouTube Music const topBarSelector = isYTMusic ? '#right-content' : 'ytd-topbar-menu-button-renderer'; checkElement(topBarSelector, () => { addIcon(); // ensure gear icon is created now that topbar exists loadSettings(); initializeHeaderButtons(); setTimeout(checkNewVersion, 3000); }); // validate change url SPA youtube document.addEventListener('fullscreenchange', () => { if (document.fullscreenElement !== null) { hideCanvas(); } else { showCanvas(); } }); // Wave retry: poll for <video> element after SPA navigation to a watch page function retryWaveSetupAfterNav() { const settings = JSON.parse(GM_getValue(SETTINGS_KEY, '{}')); if (!settings.waveVisualizer) return; if (!document.location.href.includes('watch')) return; let waveRetries = 0; const maxWaveRetries = 20; // up to 10 seconds const waveRetryInterval = setInterval(() => { waveRetries++; const video = $e('video'); if (video && !video.paused) { clearInterval(waveRetryInterval); // Only set up if not already set up for this video if (video !== currentVideo || !isSetup) { if (typeof cleanup === 'function') { // cleanup is scoped inside applySettings, so call scheduleApplySettings // which will trigger checkForVideo scheduleApplySettings(); } } return; } if (video && video.paused) { // Wait for play event const onPlay = () => { video.removeEventListener('play', onPlay); clearInterval(waveRetryInterval); if (video !== currentVideo || !isSetup) { scheduleApplySettings(); } }; video.addEventListener('play', onPlay, { once: true }); clearInterval(waveRetryInterval); return; } if (waveRetries >= maxWaveRetries) { clearInterval(waveRetryInterval); } }, 500); } document.addEventListener('yt-navigate-finish', () => { // Re-inject gear icon if it was lost during navigation if (typeof addIcon === 'function') { addIcon(); } if (!document.location.href.includes('watch')) { hideCanvas(); } scheduleApplySettings(); // Retry wave setup after SPA navigation (video may not be ready yet) retryWaveSetupAfterNav(); const isYTSite = document.location.href.includes('youtube.com'); if (!isYTSite) return; if (isYTMusic) { // On YTM, re-enable button injection when navigating to a new song if (document.location.href.includes('watch')) { const existingContainer = $e('.yt-tools-container'); if (existingContainer) existingContainer.remove(); validoBotones = true; setTimeout(() => renderizarButtons(), 500); // Re-initialize ambient mode for the new video (if enabled) const savedSettings = JSON.parse(GM_getValue(SETTINGS_KEY, '{}')); if (savedSettings.cinematicLighting) { ytmAmbientMode.cleanup(); setTimeout(() => ytmAmbientMode.setup(), 1000); } } else { // Not on a watch page, cleanup ambient mode ytmAmbientMode.cleanup(); } } else { // Re-inject lockup stats (reduced passes to save CPU) if (document.location.href.includes('youtube.com/watch')) { [400, 1500].forEach((ms) => setTimeout(() => { injectLockupCachedStats(); injectShortsLockupCachedStats(); retargetLockupStatsObserverIfNeeded(); }, ms)); } else { // Re-inject when landing on home [400, 1800].forEach((ms) => setTimeout(() => { injectLockupCachedStats(); injectShortsLockupCachedStats(); }, ms)); } } }); GM_registerMenuCommand('Update Script by: Akari', function () { window.open('https://update.greasyfork.org/scripts/576162/YouTube%20Ultimate%20Tools.user.js', '_blank'); }); // apis for download // https://video-download-api.com // 4kdownload let ytmScrollListenerInited = false; let ytmScrollInitAttempts = 0; function initYTMHeaderScroll() { if (!isYTMusic || ytmScrollListenerInited) return; const navBar = document.querySelector('ytmusic-nav-bar'); if (!navBar) { if (ytmScrollInitAttempts < 10) { ytmScrollInitAttempts++; setTimeout(initYTMHeaderScroll, 500); } return; } ytmScrollListenerInited = true; const updateHeader = () => { const isScrolled = window.scrollY > 10; const isWatchPage = window.location.pathname.startsWith('/watch'); const isPlayerOpen = document.body.hasAttribute('player-page-open') || navBar.hasAttribute('opened') || isWatchPage; const navBarBg = document.querySelector('#nav-bar-background'); if (isScrolled || isPlayerOpen) { navBar.classList.add('scrolled'); if (navBarBg) navBarBg.classList.add('scrolled'); } else { navBar.classList.remove('scrolled'); if (navBarBg) navBarBg.classList.remove('scrolled'); } }; window.addEventListener('scroll', updateHeader, { passive: true }); window.addEventListener('popstate', updateHeader); // Initial checks to ensure it catches the state on load/refresh updateHeader(); setTimeout(updateHeader, 500); setTimeout(updateHeader, 2000); // Observe state changes const observer = new MutationObserver(updateHeader); observer.observe(document.body, { attributes: true, attributeFilter: ['player-page-open'] }); observer.observe(navBar, { attributes: true, attributeFilter: ['opened'] }); } function applyPageBackground(url, themeColor = null) { const isYTMusic = window.location.hostname === 'music.youtube.com'; const selector = isYTMusic ? 'body, ytmusic-app' : 'ytd-app, body'; const styleId = 'yt-tools-page-background'; let styleEl = $id(styleId); if (!styleEl) { styleEl = document.createElement('style'); styleEl.id = styleId; document.head.appendChild(styleEl); } if (url) { const overlayColor = themeColor || 'rgba(0,0,0,0.5)'; styleEl.textContent = ` ${selector} { background: transparent !important; background-color: transparent !important; } /* Layer 1: Blurred Background Image */ body::before { content: "" !important; position: fixed !important; top: -10px !important; left: -10px !important; width: calc(100% + 20px) !important; height: calc(100% + 20px) !important; background-image: url("${url}") !important; background-size: cover !important; background-position: center !important; background-attachment: fixed !important; background-repeat: no-repeat !important; filter: blur(8px) brightness(0.8) !important; z-index: -3 !important; pointer-events: none !important; } /* Layer 2: Theme Overlay (Semi-transparent) */ body::after { content: "" !important; position: fixed !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; background: ${themeColor ? themeColor : 'rgba(0,0,0,0.5)'} !important; opacity: ${themeColor ? '0.6' : '1'} !important; z-index: -2 !important; pointer-events: none !important; } ${isYTMusic ? ` /* YTM: Elevate content above blur layers */ ytmusic-app { position: relative !important; z-index: 3 !important; } ` : ''} #content.ytmusic-app, #page-manager.ytd-app, #columns.ytd-watch-flexy, ytd-browse, ytmusic-browse-response, ytmusic-section-list-renderer, ytmusic-shelf-renderer, ytmusic-grid-renderer, ytmusic-player-page, ytmusic-app-layout, ytmusic-guide-renderer, tp-yt-app-drawer, tp-yt-app-drawer #contentContainer, tp-yt-app-drawer #contentContainer.tp-yt-app-drawer, #mini-guide, #mini-guide-renderer, #guide-wrapper, #guide-content, #guide-spacer, #guide-renderer, #sections.ytmusic-guide-renderer, ytmusic-guide-section-renderer, ytmusic-guide-entry-renderer, tp-yt-paper-item.ytmusic-guide-entry-renderer, #items.ytmusic-guide-section-renderer, #divider.ytmusic-guide-section-renderer, ytmusic-app-layout.content-scrolled, ytmusic-app-layout #background, ytmusic-app-layout #guide-background, ytmusic-app-layout #player-bar-background, ytmusic-app-layout #nav-bar-background, #contents.ytmusic-section-list-renderer, #header.ytmusic-browse-response, #guide-wrapper.ytmusic-guide-renderer, ytmusic-responsive-header-renderer, .background-gradient.ytmusic-browse-response, #content-wrapper.ytmusic-browse-response, ytmusic-carousel-shelf-renderer, .ytmusic-shelf, ytmusic-chip-cloud-renderer, ytmusic-carousel-shelf-basic-header-renderer, ytmusic-header-renderer, ytmusic-tabbed-browse-renderer, ytmusic-detail-header-renderer, ytmusic-item-section-renderer, ytmusic-immersive-header-renderer, ytmusic-card-shelf-renderer { background: transparent !important; background-color: transparent !important; background-image: none !important; --ytmusic-background: transparent !important; --ytmusic-general-background: transparent !important; --ytmusic-guide-background: transparent !important; --iron-drawer-background-color: transparent !important; --yt-spec-general-background-a: transparent !important; --yt-spec-general-background-b: transparent !important; --yt-spec-general-background-c: transparent !important; --yt-spec-menu-background: transparent !important; } ${isYTMusic ? ` /* YTM Nav Bar: transparent at top, dark blurred when scrolled */ body.ytm-style-transparent #nav-bar-background.ytmusic-app-layout, body.ytm-ambient-active #nav-bar-background.ytmusic-app-layout { background: transparent !important; transition: background 0.3s ease, backdrop-filter 0.3s ease !important; } body.ytm-style-transparent ytmusic-nav-bar, body.ytm-ambient-active ytmusic-nav-bar, body.ytm-style-transparent #nav-bar-divider, body.ytm-ambient-active #nav-bar-divider { background: transparent !important; border: none !important; transition: background 0.3s ease !important; } body.ytm-style-transparent ytmusic-nav-bar.scrolled, body.ytm-ambient-active ytmusic-nav-bar.scrolled, body.ytm-style-transparent #nav-bar-background.scrolled, body.ytm-ambient-active #nav-bar-background.scrolled, body.ytm-style-transparent ytmusic-nav-bar[opened], body.ytm-ambient-active ytmusic-nav-bar[opened], body.ytm-style-transparent[player-page-open] ytmusic-nav-bar, body.ytm-ambient-active[player-page-open] ytmusic-nav-bar, body.ytm-style-transparent[player-page-open] #nav-bar-background, body.ytm-ambient-active[player-page-open] #nav-bar-background { background: rgba(10, 10, 10, 0.4) !important; backdrop-filter: blur(25px) !important; -webkit-backdrop-filter: blur(25px) !important; } body.ytm-ambient-active[player-page-open] ytmusic-nav-bar, body.ytm-ambient-active[player-page-open] #nav-bar-background { background: transparent !important; } /* YTM Player Bar: semi-transparent with blur - respect ambient */ body.ytm-style-transparent ytmusic-player-bar, body.ytm-ambient-active ytmusic-player-bar { background: rgba(0, 0, 0, 0.2) !important; backdrop-filter: blur(30px) !important; -webkit-backdrop-filter: blur(30px) !important; border-top: 1px solid rgba(255, 255, 255, 0.05) !important; } body.ytm-ambient-active ytmusic-player-bar { background: transparent !important; border-top: 1px solid rgba(255, 255, 255, 0.1) !important; } /* YTM Sidebar (Expanded & Collapsed): Glass with separator line - respect ambient */ body.ytm-style-transparent tp-yt-app-drawer #contentContainer, body.ytm-style-transparent #mini-guide, body.ytm-style-transparent #mini-guide-renderer, body.ytm-ambient-active tp-yt-app-drawer #contentContainer, body.ytm-ambient-active #mini-guide, body.ytm-ambient-active #mini-guide-renderer { background: rgba(0, 0, 0, 0.1) !important; backdrop-filter: blur(25px) !important; -webkit-backdrop-filter: blur(25px) !important; border-right: 1px solid rgba(255, 255, 255, 0.1) !important; } body.ytm-ambient-active tp-yt-app-drawer #contentContainer, body.ytm-ambient-active #mini-guide, body.ytm-ambient-active #mini-guide-renderer { background: transparent !important; } /* Standardized YTM Glass Buttons (Edit, Menu, Play, etc.) */ body.ytm-style-transparent button.ytSpecButtonShapeNextHost, body.ytm-style-transparent yt-button-shape button, body.ytm-style-transparent .history-button #button, body.ytm-ambient-active button.ytSpecButtonShapeNextHost, body.ytm-ambient-active yt-button-shape button, body.ytm-ambient-active .history-button #button { background: rgba(255, 255, 255, 0.15) !important; backdrop-filter: blur(12px) !important; -webkit-backdrop-filter: blur(12px) !important; color: #fff !important; } /* Clean Guide Button */ yt-icon-button#guide-button, yt-icon-button#guide-button *, #guide-button, #guide-button #button, #guide-button #interaction, #guide-button yt-icon, #guide-button .yt-interaction, #guide-button .stroke.yt-interaction, #guide-button .fill.yt-interaction { background: transparent !important; background-color: transparent !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border: none !important; box-shadow: none !important; --yt-spec-touch-response: transparent !important; --yt-spec-touch-response-inverse: transparent !important; --yt-sys-color-baseline--touch-response-inverse: transparent !important; } /* Play button specific fixes */ ytmusic-play-button-renderer { background: transparent !important; --ytmusic-play-button-background-color: transparent !important; --ytmusic-play-button-active-background-color: rgba(255, 255, 255, 0.25) !important; } ytmusic-play-button-renderer .content-wrapper { background: rgba(255, 255, 255, 0.2) !important; backdrop-filter: blur(15px) !important; -webkit-backdrop-filter: blur(15px) !important; border-radius: 50% !important; box-shadow: 0 0 10px rgba(0,0,0,0.3) !important; } ytmusic-play-button-renderer:hover .content-wrapper { background: rgba(255, 255, 255, 0.3) !important; } ytmusic-play-button-renderer yt-icon, ytmusic-play-button-renderer #icon, ytmusic-play-button-renderer .icon, ytmusic-play-button-renderer .icon.ytmusic-play-button-renderer, ytmusic-play-button-renderer yt-icon.ytmusic-play-button-renderer { background: transparent !important; background-color: transparent !important; color: #fff !important; --ytmusic-play-button-icon-color: #fff !important; opacity: 1 !important; visibility: visible !important; } /* Ensure SVGs inside are visible */ ytmusic-play-button-renderer svg { fill: #fff !important; } ` : ''} /* Engagement panels: Solid on regular YT, but NOT on Shorts */ ytd-watch-flexy ytd-engagement-panel-section-list-renderer, ytd-watch-flexy ytd-engagement-panel-section-list-renderer #content, ytd-watch-flexy ytd-engagement-panel-section-list-renderer #header, ytd-watch-flexy ytd-engagement-panel-title-header-renderer, ytd-watch-flexy ytd-engagement-panel-title-header-renderer #header, ytd-watch-flexy ytd-section-list-renderer[engagement-panel] { background: #212121 !important; background-color: #212121 !important; } /* Nuclear transparency for Shorts engagement panels to reveal theme background */ ytd-shorts #shorts-panel-container, ytd-shorts #anchored-panel, ytd-shorts ytd-engagement-panel-section-list-renderer, ytd-shorts ytd-engagement-panel-section-list-renderer #content, ytd-shorts ytd-engagement-panel-section-list-renderer #header, /* Highly specific YouTube selectors identified during debugging */ ytd-shorts ytd-engagement-panel-section-list-renderer[match-content-theme] #content, ytd-shorts ytd-engagement-panel-section-list-renderer[match-content-theme] #content.ytd-engagement-panel-section-list-renderer, ytd-shorts ytd-engagement-panel-section-list-renderer[target-id="engagement-panel-comments-section"] #content, ytd-shorts ytd-engagement-panel-section-list-renderer[target-id="engagement-panel-comments-section"] #header, ytd-shorts ytd-engagement-panel-title-header-renderer, ytd-shorts ytd-engagement-panel-title-header-renderer #header, ytd-shorts ytd-comments-header-renderer, ytd-shorts ytd-comment-thread-renderer, ytd-shorts ytd-comment-view-model, ytd-shorts ytd-item-section-renderer, ytd-shorts #sections.ytd-item-section-renderer, ytd-shorts #contents.ytd-item-section-renderer, ytd-shorts ytd-comment-simplebox-renderer { background: transparent !important; background-color: transparent !important; } /* Search button - restore default YT gray */ ytd-searchbox #search-icon-legacy, button.ytSearchboxComponentSearchButton, button.ytSearchboxComponentSearchButtonDark { background-color: #222222 !important; border: none !important; } /* Voice search button - add blur backdrop for visibility */ #voice-search-button .ytSpecButtonShapeNextHost, #voice-search-button button { background: rgba(255, 255, 255, 0.15) !important; backdrop-filter: blur(12px) !important; -webkit-backdrop-filter: blur(12px) !important; border-radius: 50% !important; } /* Hide YTM native background elements when custom background is set */ body:not(.ytm-ambient-active) #mini-guide-background, ytmusic-browse-response #background.immersive-background, ytmusic-fullbleed-thumbnail-renderer[is-background], ytmusic-player-page #background.immersive-background, #background.ytmusic-browse-response { opacity: 0 !important; pointer-events: none !important; visibility: hidden !important; } /* Hide Shorts cinematic black blocks */ #cinematic-container.ytd-reel-video-renderer, #shorts-cinematic-container, #cinematic-shorts-scrim.ytd-shorts { display: none !important; opacity: 0 !important; visibility: hidden !important; } /* Remove dark gradient overlays from Shorts */ .overlay.ytd-reel-video-renderer, ytd-reel-player-overlay-renderer, ytd-reel-player-overlay-renderer #overlay, .overlay-container.ytd-reel-player-overlay-renderer { background: transparent !important; background-image: none !important; } `; } else { styleEl.textContent = ''; } } // --- Background Image Customization --- const inputFile = $id('background_image'); const preview = $id('background-image-preview'); const removeBtn = $id('remove-background-image'); if (inputFile && preview) { // show preview const storedImage = localStorage.getItem('backgroundImage'); if (storedImage) { preview.style.backgroundImage = `url(${storedImage})`; preview.classList.add('has-image'); if (removeBtn) removeBtn.style.display = 'flex'; applyPageBackground(storedImage); } else { preview.style.backgroundImage = ''; preview.classList.remove('has-image'); if (removeBtn) removeBtn.style.display = 'none'; applyPageBackground(null); } preview.addEventListener('click', (e) => { if (e.target === removeBtn) return; inputFile.click(); }); // add background image (bind once) inputFile.addEventListener('change', (e) => { const file = e.target.files[0]; if (!file) return; const reader = new FileReader(); reader.onload = function (ev) { const dataUrl = ev.target.result; preview.style.backgroundImage = `url(${dataUrl})`; preview.classList.add('has-image'); localStorage.setItem('backgroundImage', dataUrl); if (removeBtn) removeBtn.style.display = 'flex'; applyPageBackground(dataUrl); }; reader.readAsDataURL(file); }); // Remove background image (bind once) if (removeBtn && removeBtn.dataset.ytToolsBound !== '1') { removeBtn.dataset.ytToolsBound = '1'; removeBtn.addEventListener('click', (e) => { e.preventDefault(); e.stopPropagation(); // Only allow real user click to remove stored background if (e.isTrusted === false) return; preview.style.backgroundImage = ''; preview.classList.remove('has-image'); localStorage.removeItem('backgroundImage'); removeBtn.style.display = 'none'; applyPageBackground(null); // Force theme refresh to remove image from dynamic CSS if (typeof scheduleApplySettings === 'function') { scheduleApplySettings(); } }); } } // Nuclear fix for persistent black cinematic blocks in Shorts function nukeShortsCinematic() { if (isYTMusic) return; // 1. Remove from regular DOM const selector = '#cinematic-container.ytd-reel-video-renderer, #shorts-cinematic-container, #cinematic-shorts-scrim'; document.querySelectorAll(selector).forEach(el => el.remove()); // 2. Remove from Shadow DOMs of all reel renderers document.querySelectorAll('ytd-reel-video-renderer').forEach(reel => { if (reel.shadowRoot) { const cinematic = reel.shadowRoot.querySelector('#cinematic-container'); if (cinematic) cinematic.remove(); } }); // 3. Force transparency on engagement panels in Shorts document.querySelectorAll('ytd-engagement-panel-section-list-renderer[shorts-panel], ytd-shorts ytd-engagement-panel-section-list-renderer').forEach(panel => { const content = panel.querySelector('#content'); const header = panel.querySelector('#header'); if (content) { content.style.setProperty('background', 'transparent', 'important'); content.style.setProperty('background-color', 'transparent', 'important'); } if (header) { header.style.setProperty('background', 'transparent', 'important'); header.style.setProperty('background-color', 'transparent', 'important'); } panel.style.setProperty('background', 'transparent', 'important'); panel.style.setProperty('background-color', 'transparent', 'important'); }); // 4. Force transparency on navigation container in Shorts document.querySelectorAll('.navigation-container.ytd-shorts').forEach(nav => { nav.style.setProperty('background', 'transparent', 'important'); nav.style.setProperty('background-color', 'transparent', 'important'); }); } // Run periodically during Shorts browsing - only once if (!window.__ytToolsShortsNukeInterval) { window.__ytToolsShortsNukeInterval = setInterval(() => { if (window.location.pathname.startsWith('/shorts/')) { nukeShortsCinematic(); } }, 1500); } })();
