${str_tabs}
${icon}
${label}
`;
}
function createBasicIcon() {
return `
`;
}
function createAdvancedIcon() {
return `
`;
}
function createExperimentalIcon() {
return `
`;
}
function createReportIcon() {
return `
`;
}
function createAboutIcon() {
return `
`;
}
function createSettingsItem(label, description, setting, checked) {
return `
${description}
${name}
${description}
${controls}
` : ''}
${createSettingsItem(t('speedControl'), t('speedControlDesc'), 'enableSpeedControl', settings.enableSpeedControl)}
${createSettingsItem(t('screenshotButton'), t('screenshotButtonDesc'), 'enableScreenshot', settings.enableScreenshot)}
${createSettingsItem(t('downloadButton'), t('downloadButtonDesc'), 'enableDownload', settings.enableDownload)}
${createDownloadSubmenu(settings, t)}
`;
}
function createAboutSection() {
return `
`;
}
function createMainContent(settings, t) {
return `
${createBasicSettingsSection(settings, t)}
${createAboutSection()}
${helpers.createSettingsSidebar(t)}${helpers.createMainContent(this.settings, t)}
`;
let dirty = false;
const saveIconBtn = modal.querySelector('#ytp-plus-save-settings-icon');
if (saveIconBtn) saveIconBtn.style.display = 'none';
const markDirty = () => {
if (dirty) return;
dirty = true;
if (saveIconBtn) saveIconBtn.style.display = '';
};
const context = {
settings: this.settings,
getElement: this.getElement.bind(this),
addDownloadButton: this.addDownloadButton.bind(this),
addSpeedControlButton: this.addSpeedControlButton.bind(this),
refreshDownloadButton: this.refreshDownloadButton.bind(this),
updatePageBasedOnSettings: this.updatePageBasedOnSettings.bind(this),
};
const handleModalClick = e => {
const { target } = (e);
if (target === modal) {
modal.remove();
return;
}
if (
target.id === 'ytp-plus-close-settings' ||
target.id === 'ytp-plus-close-settings-icon' ||
target.classList.contains('ytp-plus-settings-close') ||
target.closest('.ytp-plus-settings-close') ||
target.closest('#ytp-plus-close-settings') ||
target.closest('#ytp-plus-close-settings-icon')
) {
modal.remove();
return;
}
if (target.id === 'open-ytdl-github' || target.closest('#open-ytdl-github')) {
window.open('https://github.com/diorhc/YTDL', '_blank');
return;
}
this.handleModalClickActions(target, modal, handlers, markDirty, context, t);
};
modal.addEventListener('click', handleModalClick);
modal.addEventListener('input', e => {
const { target } = (e);
if (target.classList.contains('download-site-input')) {
const { dataset } = (target);
const { site, field } = dataset;
if (!site || !field) return;
handlers.handleDownloadSiteInput(target, site, field, this.settings, markDirty, t);
}
});
try {
if (
typeof window !== 'undefined' &&
(window).youtubePlusReport &&
typeof ( (window).youtubePlusReport.render) === 'function'
) {
try {
(window).youtubePlusReport.render(modal);
} catch (e) {
YouTubeUtils.logError('Report', 'report.render failed', e);
}
}
} catch (e) {
YouTubeUtils.logError('Report', 'Failed to initialize report section', e);
}
return modal;
},
openSettingsModal() {
const existingModal = this.getElement('.ytp-plus-settings-modal', false);
if (existingModal) existingModal.remove();
document.body.appendChild(this.createSettingsModal());
},
waitForElement(selector, timeout = 5000) {
return YouTubeUtils.waitForElement(selector, timeout);
},
addCustomButtons() {
const controls = this.getElement('.ytp-right-controls');
if (!controls) return;
if (!this.getElement('.ytp-screenshot-button')) this.addScreenshotButton(controls);
if (!this.getElement('.ytp-download-button')) this.addDownloadButton(controls);
if (!this.getElement('.speed-control-btn')) this.addSpeedControlButton(controls);
if (!document.getElementById('speed-indicator')) {
const indicator = document.createElement('div');
indicator.id = 'speed-indicator';
const player = document.getElementById('movie_player');
if (player) player.appendChild(indicator);
}
this.handleFullscreenChange();
},
addScreenshotButton(controls) {
const button = document.createElement('button');
button.className = 'ytp-button ytp-screenshot-button';
button.setAttribute('title', t('takeScreenshot'));
button.innerHTML = `
`;
button.addEventListener('click', this.captureFrame.bind(this));
controls.insertBefore(button, controls.firstChild);
},
addDownloadButton(controls) {
if (typeof window !== 'undefined' && window.YouTubePlusDownloadButton) {
const manager = window.YouTubePlusDownloadButton.createDownloadButtonManager({
settings: this.settings,
t,
getElement: this.getElement.bind(this),
YouTubeUtils,
});
manager.addDownloadButton(controls);
} else {
console.warn('[YouTube+] Download button module not loaded');
}
},
addSpeedControlButton(controls) {
if (!this.settings.enableSpeedControl) return;
const speedBtn = document.createElement('button');
speedBtn.type = 'button';
speedBtn.className = 'ytp-button speed-control-btn';
speedBtn.setAttribute('aria-label', t('speedControl'));
speedBtn.setAttribute('aria-haspopup', 'true');
speedBtn.setAttribute('aria-expanded', 'false');
speedBtn.innerHTML = `${this.speedControl.currentSpeed}×`;
const speedOptions = document.createElement('div');
speedOptions.className = 'speed-options';
speedOptions.setAttribute('role', 'menu');
const selectSpeed = speed => {
this.changeSpeed(speed);
hideDropdown();
};
[0.25, 0.5, 0.75, 1.0, 1.25, 1.5, 2.0, 3.0].forEach(speed => {
const option = document.createElement('div');
option.className = `speed-option-item${Number(speed) === this.speedControl.currentSpeed ? ' speed-option-active' : ''}`;
option.textContent = `${speed}x`;
option.dataset.speed = String(speed);
option.setAttribute('role', 'menuitem');
option.tabIndex = 0;
option.addEventListener('click', () => selectSpeed(speed));
option.addEventListener('keydown', event => {
if (event.key === 'Enter' || event.key === ' ') {
event.preventDefault();
selectSpeed(speed);
}
});
speedOptions.appendChild(option);
});
speedBtn.appendChild(speedOptions);
const existingSpeed = document.querySelector('.speed-options');
if (existingSpeed) existingSpeed.remove();
try {
document.body.appendChild(speedOptions);
} catch {
}
const positionDropdown = () => {
const rect = speedBtn.getBoundingClientRect();
speedOptions.style.left = `${rect.left + rect.width / 2}px`;
speedOptions.style.bottom = `${window.innerHeight - rect.top + 8}px`;
};
const hideDropdown = () => {
speedOptions.classList.remove('visible');
speedBtn.setAttribute('aria-expanded', 'false');
};
const showDropdown = () => {
positionDropdown();
speedOptions.classList.add('visible');
speedBtn.setAttribute('aria-expanded', 'true');
};
const toggleDropdown = () => {
if (speedOptions.classList.contains('visible')) {
hideDropdown();
} else {
showDropdown();
}
};
let documentClickKey;
const documentClickHandler = event => {
if (!speedBtn.isConnected) {
if (documentClickKey) {
YouTubeUtils.cleanupManager.unregisterListener(documentClickKey);
documentClickKey = undefined;
}
return;
}
if (!speedOptions.classList.contains('visible')) return;
if (
speedBtn.contains( (event.target)) ||
speedOptions.contains( (event.target))
) {
return;
}
hideDropdown();
};
const documentKeydownHandler = event => {
if (event.key === 'Escape' && speedOptions.classList.contains('visible')) {
hideDropdown();
speedBtn.focus();
}
};
documentClickKey = YouTubeUtils.cleanupManager.registerListener(
document,
'click',
documentClickHandler,
true
);
YouTubeUtils.cleanupManager.registerListener(
document,
'keydown',
documentKeydownHandler,
true
);
YouTubeUtils.cleanupManager.registerListener(window, 'resize', () => {
if (speedOptions.classList.contains('visible')) {
positionDropdown();
}
});
YouTubeUtils.cleanupManager.registerListener(
window,
'scroll',
() => {
if (speedOptions.classList.contains('visible')) {
positionDropdown();
}
},
true
);
let speedHideTimer;
speedBtn.addEventListener('mouseenter', () => {
clearTimeout(speedHideTimer);
showDropdown();
});
speedBtn.addEventListener('mouseleave', () => {
clearTimeout(speedHideTimer);
speedHideTimer = setTimeout(hideDropdown, 200);
});
speedOptions.addEventListener('mouseenter', () => {
clearTimeout(speedHideTimer);
showDropdown();
});
speedOptions.addEventListener('mouseleave', () => {
clearTimeout(speedHideTimer);
speedHideTimer = setTimeout(hideDropdown, 200);
});
speedBtn.addEventListener('keydown', event => {
if (event.key === 'Enter' || event.key === ' ') {
event.preventDefault();
toggleDropdown();
} else if (event.key === 'Escape') {
hideDropdown();
}
});
controls.insertBefore(speedBtn, controls.firstChild);
},
applyGuideVisibility() {
try {
const enabled = Boolean(YouTubeUtils.storage.get('ytplus.hideGuide', false));
document.documentElement.classList.toggle('ytp-hide-guide', enabled);
const btn = document.getElementById('ytplus-guide-toggle-btn');
if (btn) {
btn.setAttribute('aria-pressed', String(enabled));
btn.title = enabled ? 'Show side guide' : 'Hide side guide';
}
} catch (e) {
console.warn('[YouTube+] applyGuideVisibility failed:', e);
}
},
toggleSideGuide() {
try {
const current = Boolean(YouTubeUtils.storage.get('ytplus.hideGuide', false));
const next = !current;
YouTubeUtils.storage.set('ytplus.hideGuide', next);
this.applyGuideVisibility();
} catch (e) {
console.warn('[YouTube+] toggleSideGuide failed:', e);
}
},
createGuideToggleButton() {
try {
if (document.getElementById('ytplus-guide-toggle-btn')) return;
const btn = document.createElement('button');
btn.id = 'ytplus-guide-toggle-btn';
btn.type = 'button';
btn.style.cssText =
'position:fixed;right:12px;bottom:12px;z-index:100000;background:var(--yt-spec-call-to-action);color:#fff;border:none;border-radius:8px;padding:8px 10px;box-shadow:0 6px 18px rgba(0,0,0,0.3);cursor:pointer;opacity:0.95;font-size:13px;';
btn.setAttribute('aria-pressed', 'false');
btn.title = 'Hide side guide';
btn.textContent = 'Toggle Guide';
btn.addEventListener('click', e => {
e.preventDefault();
e.stopPropagation();
this.toggleSideGuide();
});
btn.addEventListener('keydown', e => {
if (e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
this.toggleSideGuide();
}
});
document.body.appendChild(btn);
this.applyGuideVisibility();
} catch (e) {
console.warn('[YouTube+] createGuideToggleButton failed:', e);
}
},
captureFrame() {
const video = this.getElement('video', false);
if (!video) return;
const canvas = document.createElement('canvas');
canvas.width = video.videoWidth;
canvas.height = video.videoHeight;
const ctx = canvas.getContext('2d');
ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
const videoTitle = document.title.replace(/\s-\sYouTube$/, '').trim();
const link = document.createElement('a');
link.href = canvas.toDataURL('image/png');
link.download = `${videoTitle}.png`;
link.click();
},
showNotification(message, duration = 2000) {
YouTubeUtils.NotificationManager.show(message, { duration, type: 'info' });
},
handleFullscreenChange() {
const isFullscreen = document.fullscreenElement || document.webkitFullscreenElement;
document.querySelectorAll('.ytp-screenshot-button, .ytp-cobalt-button').forEach(button => {
button.style.bottom = isFullscreen ? '0px' : '0px';
});
},
changeSpeed(speed) {
const numericSpeed = Number(speed);
this.speedControl.currentSpeed = numericSpeed;
localStorage.setItem(this.speedControl.storageKey, String(numericSpeed));
const speedBtn = this.getElement('.speed-control-btn span', false);
if (speedBtn) speedBtn.textContent = `${numericSpeed}×`;
document.querySelectorAll('.speed-option-item').forEach(option => {
option.classList.toggle(
'speed-option-active',
parseFloat(option.dataset.speed) === numericSpeed
);
});
this.applyCurrentSpeed();
this.showSpeedIndicator(numericSpeed);
},
applyCurrentSpeed() {
document.querySelectorAll('video').forEach(video => {
if (video && video.playbackRate !== this.speedControl.currentSpeed) {
video.playbackRate = this.speedControl.currentSpeed;
}
});
},
setupVideoObserver() {
if (this._speedInterval) clearInterval(this._speedInterval);
this._speedInterval = setInterval(() => this.applyCurrentSpeed(), 1000);
YouTubeUtils.cleanupManager.registerInterval(this._speedInterval);
},
setupNavigationObserver() {
let lastUrl = location.href;
document.addEventListener('fullscreenchange', this.handleFullscreenChange.bind(this));
document.addEventListener('yt-navigate-finish', () => {
if (location.href.includes('watch?v=')) this.setupCurrentPage();
this.addSettingsButtonToHeader();
});
const observer = new MutationObserver(() => {
if (lastUrl !== location.href) {
lastUrl = location.href;
if (location.href.includes('watch?v=')) {
setTimeout(() => this.setupCurrentPage(), 500);
}
this.addSettingsButtonToHeader();
}
});
YouTubeUtils.cleanupManager.registerObserver(observer);
if (document.body) {
observer.observe(document.body, { childList: true, subtree: true });
} else {
document.addEventListener('DOMContentLoaded', () => {
observer.observe(document.body, { childList: true, subtree: true });
});
}
},
showSpeedIndicator(speed) {
const indicator = document.getElementById('speed-indicator');
if (!indicator) return;
if (this.speedControl.activeAnimationId) {
cancelAnimationFrame(this.speedControl.activeAnimationId);
YouTubeUtils.cleanupManager.unregisterAnimationFrame(this.speedControl.activeAnimationId);
this.speedControl.activeAnimationId = null;
}
indicator.textContent = `${speed}×`;
indicator.style.display = 'block';
indicator.style.opacity = '0.8';
const startTime = performance.now();
const fadeOut = timestamp => {
const elapsed = timestamp - startTime;
const progress = Math.min(elapsed / 1500, 1);
indicator.style.opacity = String(0.8 * (1 - progress));
if (progress < 1) {
this.speedControl.activeAnimationId = YouTubeUtils.cleanupManager.registerAnimationFrame(
requestAnimationFrame(fadeOut)
);
} else {
indicator.style.display = 'none';
this.speedControl.activeAnimationId = null;
}
};
this.speedControl.activeAnimationId = YouTubeUtils.cleanupManager.registerAnimationFrame(
requestAnimationFrame(fadeOut)
);
},
};
const initFunction = YouTubeEnhancer.init.bind(YouTubeEnhancer);
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', initFunction);
} else {
initFunction();
}
})();
(function () {
'use strict';
if (typeof YouTubeUtils === 'undefined') {
logger.error('YouTubeUtils not found!');
return;
}
function createSubtitleSelect() {
const subtitleSelect = document.createElement('div');
subtitleSelect.setAttribute('role', 'listbox');
Object.assign(subtitleSelect.style, {
position: 'relative',
width: '100%',
marginBottom: '8px',
fontSize: '14px',
color: '#fff',
cursor: 'pointer',
});
const _ssDisplay = document.createElement('div');
Object.assign(_ssDisplay.style, {
padding: '10px 12px',
borderRadius: '10px',
background: 'linear-gradient(135deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02))',
border: '1px solid rgba(255,255,255,0.06)',
display: 'flex',
alignItems: 'center',
justifyContent: 'space-between',
gap: '8px',
backdropFilter: 'blur(6px)',
boxShadow: '0 4px 18px rgba(0,0,0,0.35) inset',
});
const _ssLabel = document.createElement('div');
_ssLabel.style.flex = '1';
_ssLabel.style.overflow = 'hidden';
_ssLabel.style.textOverflow = 'ellipsis';
_ssLabel.style.whiteSpace = 'nowrap';
_ssLabel.textContent = t('loading');
const _ssChevron = document.createElement('div');
_ssChevron.textContent = '▾';
_ssChevron.style.opacity = '0.8';
_ssDisplay.appendChild(_ssLabel);
_ssDisplay.appendChild(_ssChevron);
const _ssList = document.createElement('div');
Object.assign(_ssList.style, {
position: 'absolute',
top: 'calc(100% + 8px)',
left: '0',
right: '0',
maxHeight: '220px',
overflowY: 'auto',
borderRadius: '10px',
background: 'linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.02))',
border: '1px solid rgba(255,255,255,0.06)',
boxShadow: '0 8px 30px rgba(0,0,0,0.6)',
backdropFilter: 'blur(8px)',
zIndex: '9999',
display: 'none',
});
subtitleSelect.appendChild(_ssDisplay);
subtitleSelect.appendChild(_ssList);
subtitleSelect._options = [];
subtitleSelect._value = '';
subtitleSelect._disabled = false;
subtitleSelect.setPlaceholder = text => {
_ssLabel.textContent = text || '';
subtitleSelect._options = [];
_ssList.innerHTML = '';
subtitleSelect._value = '';
};
subtitleSelect.setOptions = options => {
subtitleSelect._options = options || [];
_ssList.innerHTML = '';
subtitleSelect._options.forEach(opt => {
const item = document.createElement('div');
item.textContent = opt.text;
item.dataset.value = String(opt.value);
Object.assign(item.style, {
padding: '10px 12px',
cursor: 'pointer',
borderBottom: '1px solid rgba(255,255,255,0.02)',
color: '#fff',
});
item.addEventListener('click', () => {
subtitleSelect.value = item.dataset.value;
_ssList.style.display = 'none';
});
item.addEventListener('mouseenter', () => {
item.style.background = 'rgba(255,255,255,0.02)';
});
item.addEventListener('mouseleave', () => {
item.style.background = 'transparent';
});
_ssList.appendChild(item);
});
if (subtitleSelect._options.length > 0) {
subtitleSelect.value = String(subtitleSelect._options[0].value);
} else {
subtitleSelect._value = '';
_ssLabel.textContent = t('noSubtitles');
}
};
Object.defineProperty(subtitleSelect, 'value', {
get() {
return subtitleSelect._value;
},
set(v) {
subtitleSelect._value = String(v);
const found = subtitleSelect._options.find(o => String(o.value) === subtitleSelect._value);
_ssLabel.textContent = found ? found.text : '';
},
});
Object.defineProperty(subtitleSelect, 'disabled', {
get() {
return subtitleSelect._disabled;
},
set(v) {
subtitleSelect._disabled = !!v;
_ssDisplay.style.opacity = subtitleSelect._disabled ? '0.5' : '1';
subtitleSelect.style.pointerEvents = subtitleSelect._disabled ? 'none' : 'auto';
},
});
_ssDisplay.addEventListener('click', () => {
if (subtitleSelect._disabled) return;
_ssList.style.display = _ssList.style.display === 'none' ? '' : 'none';
});
document.addEventListener('click', e => {
if (!subtitleSelect.contains(e.target)) _ssList.style.display = 'none';
});
return subtitleSelect;
}
const { NotificationManager } = YouTubeUtils;
const t =
typeof YouTubeUtils !== 'undefined' && typeof YouTubeUtils.t === 'function'
? YouTubeUtils.t
: key => key;
const logger =
typeof YouTubePlusLogger !== 'undefined' && YouTubePlusLogger
? YouTubePlusLogger.createLogger('Download')
: {
debug: () => {},
info: () => {},
warn: console.warn.bind(console),
error: console.error.bind(console),
};
const DownloadConfig = {
API: {
KEY_URL: 'https://cnv.cx/v2/sanity/key',
CONVERT_URL: 'https://cnv.cx/v2/converter',
},
HEADERS: {
'Content-Type': 'application/json',
Origin: 'https://mp3yt.is',
Accept: '*/*',
'User-Agent':
'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/142.0.0.0 Safari/537.36',
},
VIDEO_QUALITIES: ['144', '240', '360', '480', '720', '1080', '1440', '2160'],
AUDIO_BITRATES: ['64', '128', '192', '256', '320'],
DEFAULTS: {
format: 'video',
videoQuality: '1080',
audioBitrate: '320',
embedThumbnail: true,
},
};
function getVideoId() {
const params = new URLSearchParams(window.location.search);
return params.get('v') || null;
}
function getVideoUrl() {
const videoId = getVideoId();
return videoId ? `https://www.youtube.com/watch?v=${videoId}` : window.location.href;
}
function getVideoTitle() {
try {
const titleElement =
document.querySelector('h1.ytd-video-primary-info-renderer yt-formatted-string') ||
document.querySelector('h1.title yt-formatted-string') ||
document.querySelector('ytd-watch-metadata h1');
return titleElement ? titleElement.textContent.trim() : 'video';
} catch {
return 'video';
}
}
function sanitizeFilename(filename) {
return filename
.replace(/[<>:"/\\|?*]/g, '')
.replace(/\s+/g, ' ')
.trim()
.substring(0, 200);
}
function formatBytes(bytes) {
if (bytes === 0) return '0 B';
const k = 1024;
const sizes = ['B', 'KB', 'MB', 'GB'];
const i = Math.floor(Math.log(bytes) / Math.log(k));
return `${parseFloat((bytes / Math.pow(k, i)).toFixed(2))} ${sizes[i]}`;
}
function createGmRequestOptions(options, resolve, reject) {
return {
...options,
onload: response => {
if (options.onload) options.onload(response);
resolve(response);
},
onerror: error => {
if (options.onerror) options.onerror(error);
reject(error);
},
ontimeout: () => {
if (options.ontimeout) options.ontimeout();
reject(new Error('Request timeout'));
},
};
}
function buildResponseObject(resp) {
return {
status: resp.status,
statusText: resp.statusText,
finalUrl: resp.url,
headers: {},
responseText: null,
response: null,
};
}
async function extractResponseText(resp, responseLike) {
try {
responseLike.responseText = await resp.text();
} catch {
responseLike.responseText = null;
}
}
async function extractResponseBlob(resp, responseLike, responseType) {
if (responseType === 'blob') {
try {
responseLike.response = await resp.blob();
} catch {
responseLike.response = null;
}
}
}
async function executeFetchFallback(options) {
const fetchOpts = {
method: options.method || 'GET',
headers: options.headers || {},
body: options.data || options.body || undefined,
};
const resp = await fetch(options.url, fetchOpts);
const responseLike = buildResponseObject(resp);
await extractResponseText(resp, responseLike);
await extractResponseBlob(resp, responseLike, options.responseType);
if (options.onload) options.onload(responseLike);
return responseLike;
}
function gmXmlHttpRequest(options) {
return new Promise((resolve, reject) => {
if (typeof GM_xmlhttpRequest !== 'undefined') {
GM_xmlhttpRequest(createGmRequestOptions(options, resolve, reject));
return;
}
(async () => {
try {
const responseLike = await executeFetchFallback(options);
resolve(responseLike);
} catch (err) {
if (options.onerror) options.onerror(err);
reject(err);
}
})();
});
}
async function createSquareAlbumArt(thumbnailUrl) {
return new Promise((resolve, reject) => {
const img = document.createElement('img');
img.crossOrigin = 'anonymous';
img.onload = () => {
const canvas = document.createElement('canvas');
const size = Math.min(img.width, img.height);
canvas.width = size;
canvas.height = size;
const ctx = canvas.getContext('2d');
if (!ctx) {
reject(new Error('Failed to get canvas context'));
return;
}
const sx = (img.width - size) / 2;
const sy = (img.height - size) / 2;
ctx.drawImage(img, sx, sy, size, size, 0, 0, size, size);
canvas.toBlob(
blob => {
if (blob) resolve(blob);
else reject(new Error('Failed to create blob'));
},
'image/jpeg',
0.95
);
};
img.onerror = () => reject(new Error('Failed to load thumbnail'));
img.src = thumbnailUrl;
});
}
async function embedAlbumArtToMP3(mp3Blob, albumArtBlob, metadata) {
try {
if (typeof window.ID3Writer === 'undefined') {
logger.warn('ID3Writer not available, skipping album art embedding');
return mp3Blob;
}
const arrayBuffer = await mp3Blob.arrayBuffer();
const writer = new window.ID3Writer(arrayBuffer);
if (metadata.title) {
writer.setFrame('TIT2', metadata.title);
}
if (metadata.artist) {
writer.setFrame('TPE1', [metadata.artist]);
}
if (metadata.album) {
writer.setFrame('TALB', metadata.album);
}
if (albumArtBlob) {
const coverArrayBuffer = await albumArtBlob.arrayBuffer();
writer.setFrame('APIC', {
type: 3,
data: coverArrayBuffer,
description: 'Cover',
});
}
writer.addTag();
return new Blob([writer.arrayBuffer], { type: 'audio/mpeg' });
} catch (error) {
logger.error('Error embedding album art:', error);
return mp3Blob;
}
}
async function fetchPlayerData(videoId) {
const response = await gmXmlHttpRequest({
method: 'POST',
url: 'https://www.youtube.com/youtubei/v1/player',
headers: {
'Content-Type': 'application/json',
'User-Agent': DownloadConfig.HEADERS['User-Agent'],
},
data: JSON.stringify({
context: {
client: {
clientName: 'WEB',
clientVersion: '2.20240304.00.00',
},
},
videoId,
}),
});
if (response.status !== 200) {
throw new Error(`Failed to get player data: ${response.status}`);
}
return JSON.parse(response.responseText);
}
function buildSubtitleUrl(baseUrl) {
if (!baseUrl.includes('fmt=')) {
return `${baseUrl}&fmt=srv1`;
}
return baseUrl;
}
function parseCaptionTracks(captionTracks) {
return captionTracks.map(track => ({
name: track.name?.simpleText || track.languageCode,
languageCode: track.languageCode,
url: buildSubtitleUrl(track.baseUrl),
isAutoGenerated: track.kind === 'asr',
}));
}
function parseTranslationLanguages(translationLanguages, baseUrl) {
return translationLanguages.map(lang => ({
name: lang.languageName?.simpleText || lang.languageCode,
languageCode: lang.languageCode,
baseUrl: baseUrl || '',
isAutoGenerated: true,
}));
}
function createEmptySubtitleResult(videoId, videoTitle) {
return {
videoId,
videoTitle,
subtitles: [],
autoTransSubtitles: [],
};
}
async function getSubtitles(videoId) {
try {
const data = await fetchPlayerData(videoId);
const videoTitle = data.videoDetails?.title || 'video';
const captions = data.captions?.playerCaptionsTracklistRenderer;
if (!captions) {
return createEmptySubtitleResult(videoId, videoTitle);
}
const captionTracks = captions.captionTracks || [];
const translationLanguages = captions.translationLanguages || [];
const baseUrl = captionTracks[0]?.baseUrl || '';
return {
videoId,
videoTitle,
subtitles: parseCaptionTracks(captionTracks),
autoTransSubtitles: parseTranslationLanguages(translationLanguages, baseUrl),
};
} catch (error) {
logger.error('Error getting subtitles:', error);
return null;
}
}
function parseSubtitleXML(xml) {
const cues = [];
const textTagRegex = /${YouTubeUtils.t('endscreenHideDesc')}${state.removeCount ? ` (${state.removeCount} ${YouTubeUtils.t('removedSuffix').replace('{n}', '')?.trim() || 'removed'})` : ''}
Playlist emulator
It looks like YouTube is unable to handle this large playlist.
Playlist emulation is a limited fallback feature of ytp to enable you to watch even more content.
`;
playlistEmulator.setAttribute('data-list', list);
const playlistHost = document.querySelector(
'#secondary-inner > ytd-playlist-panel-renderer#playlist'
);
if (playlistHost instanceof HTMLElement) {
playlistHost.insertAdjacentElement('afterend', (playlistEmulator));
}
return playlistEmulator;
};
const loadPlaylistItems = list => {
getItems(list).then(response => {
if (response?.status === 'running') {
setTimeout(() => {
getItems(list).then(nextResponse => {
if (nextResponse && Array.isArray(nextResponse.items)) {
processItems(nextResponse.items);
}
});
}, 5000);
return;
}
if (response && Array.isArray(response.items)) {
processItems(response.items);
}
});
};
const setupNextButton = () => {
const nextButtonInterval = setInterval(() => {
const nextButton = document.querySelector(
'#ytd-player .ytp-next-button.ytp-button:not([ytp-emulation="applied"])'
);
if (nextButton) {
clearInterval(nextButtonInterval);
const newButton = document.createElement('span');
newButton.className = nextButton.className;
newButton.innerHTML = nextButton.innerHTML;
nextButton.replaceWith(newButton);
newButton.setAttribute('ytp-emulation', 'applied');
newButton.addEventListener('click', () => playNextEmulationItem());
}
}, 1000);
};
const setupKeyboardShortcuts = () => {
document.addEventListener(
'keydown',
event => {
if (event.shiftKey && event.key.toLowerCase() === 'n') {
event.stopImmediatePropagation();
event.preventDefault();
playNextEmulationItem();
}
},
true
);
};
const setupAutoAdvance = () => {
setInterval(() => {
const player = getPlayer();
if (!player || typeof player.getProgressState !== 'function') return;
const progressState = player.getProgressState();
if (!progressState) return;
if (!isAdPlaying()) {
const isNearEnd =
typeof progressState.current === 'number' &&
typeof progressState.duration === 'number' &&
progressState.current >= progressState.duration - 2;
if (isNearEnd) {
if (typeof player.pauseVideo === 'function') player.pauseVideo();
if (typeof player.seekTo === 'function') player.seekTo(0);
playNextEmulationItem();
}
}
}, 500);
};
const emulatePlaylist = () => {
const params = new URLSearchParams(window.location.search);
const list = params.get('list');
if (shouldSkipEmulation(params, list)) return;
const existingEmulator = document.querySelector('.ytp-playlist-emulator');
if (handleExistingEmulator(existingEmulator, list, params.get('v'))) return;
createPlaylistEmulator(list);
loadPlaylistItems(list);
setupNextButton();
setupKeyboardShortcuts();
setupAutoAdvance();
};
if (location.host === 'm.youtube.com') {
console.log('[YouTube+][Play All]', 'Mobile playlist emulation not yet supported');
} else {
window.addEventListener('yt-navigate-finish', () => setTimeout(emulatePlaylist, 1000));
}
})();
(() => {
if (location.host === 'm.youtube.com') {
return;
}
const urlParams = new URLSearchParams(window.location.search);
if (!urlParams.has('ytp-random') || urlParams.get('ytp-random') === '0') {
return;
}
const ytpRandomParam = urlParams.get('ytp-random');
const ytpRandom =
ytpRandomParam === 'prefer-newest' || ytpRandomParam === 'prefer-oldest'
? ytpRandomParam
: 'random';
const getStorageKey = () => `ytp-random-${urlParams.get('list')}`;
const getStorage = () => JSON.parse(localStorage.getItem(getStorageKey()) || '{}');
const isWatched = videoId => getStorage()[videoId] || false;
const markWatched = videoId => {
localStorage.setItem(getStorageKey(), JSON.stringify({ ...getStorage(), [videoId]: true }));
document
.querySelectorAll('#wc-endpoint[href*=zsA3X40nz9w]')
.forEach(element => element.parentElement.setAttribute('hidden', ''));
};
try {
if (Array.isArray(getStorage())) {
localStorage.removeItem(getStorageKey());
}
} catch {
localStorage.removeItem(getStorageKey());
}
const calculateVideoIndex = (videosLength, randomMode) => {
const preferredCount = Math.max(1, Math.min(Math.floor(videosLength * 0.2), 20));
let videoIndex;
switch (randomMode) {
case 'prefer-newest':
videoIndex = Math.floor(Math.random() * preferredCount);
break;
case 'prefer-oldest':
videoIndex = videosLength - preferredCount + Math.floor(Math.random() * preferredCount);
break;
default:
videoIndex = Math.floor(Math.random() * videosLength);
}
return Math.max(0, Math.min(videoIndex, videosLength - 1));
};
const reloadWithVideo = (videoId, params, randomMode) => {
params.set('v', videoId);
params.set('ytp-random', randomMode);
params.delete('t');
params.delete('index');
params.delete('ytp-random-initial');
window.location.href = `${window.location.pathname}?${params.toString()}`;
};
const manualRedirectFallback = (videoId, listId, randomMode) => {
const redirector = document.createElement('a');
redirector.className = 'yt-simple-endpoint style-scope ytd-playlist-panel-video-renderer';
redirector.setAttribute('hidden', '');
redirector.data = {
commandMetadata: {
webCommandMetadata: {
url: `/watch?v=${videoId}&list=${listId}&ytp-random=${randomMode}`,
webPageType: 'WEB_PAGE_TYPE_WATCH',
rootVe: 3832,
},
},
watchEndpoint: {
videoId,
playlistId: listId,
},
};
const listContainer = document.querySelector('ytd-playlist-panel-renderer #items');
if (listContainer instanceof HTMLElement) {
listContainer.append(redirector);
} else {
document.body.appendChild(redirector);
}
redirector.click();
};
const navigateToVideo = (videoId, params, randomMode) => {
try {
redirect(videoId, params.get('list'), randomMode);
} catch (error) {
console.error(
'[YouTube+][Play All]',
'Error using redirect(), falling back to manual redirect:',
error
);
manualRedirectFallback(videoId, params.get('list'), randomMode);
}
};
const playNextRandom = (reload = false) => {
const playerInstance = getPlayer();
if (playerInstance && typeof playerInstance.pauseVideo === 'function') {
playerInstance.pauseVideo();
}
const videos = Object.entries(getStorage()).filter(([_, watched]) => !watched);
if (videos.length === 0) return;
const params = new URLSearchParams(window.location.search);
const videoIndex = calculateVideoIndex(videos.length, ytpRandom);
const selectedVideoId = videos[videoIndex][0];
if (reload) {
reloadWithVideo(selectedVideoId, params, ytpRandom);
} else {
navigateToVideo(selectedVideoId, params, ytpRandom);
}
};
let isIntervalSet = false;
const addRandomPlayNotice = playlistContainer => {
const headerContainer = playlistContainer.querySelector('.header');
if (headerContainer) {
headerContainer.insertAdjacentHTML(
'afterend',
`
This playlist is using random play.
The videos will not be played in the order listed here.
`
);
}
};
const collectPlaylistAnchors = playlistContainer => {
const anchorSelectors = [
'#wc-endpoint',
'ytd-playlist-panel-video-renderer a#wc-endpoint',
'ytd-playlist-panel-video-renderer a',
'a#video-title',
'#secondary ytd-playlist-panel-renderer a[href*="/watch?"]',
];
const anchors = [];
anchorSelectors.forEach(sel => {
playlistContainer.querySelectorAll(sel).forEach(a => {
if (a instanceof Element && a.tagName === 'A') anchors.push( (a));
});
});
const uniq = [];
const seen = new Set();
anchors.forEach(a => {
const href = a.href || a.getAttribute('href') || '';
if (!seen.has(href)) {
seen.add(href);
uniq.push(a);
}
});
return uniq;
};
const processPlaylistAnchors = (anchors, storage) => {
const navigate = href => {
window.location.href = href;
};
anchors.forEach(element => {
let videoId = null;
try {
videoId = new URL(element.href, window.location.origin).searchParams.get('v');
} catch {
videoId = new URLSearchParams(element.search || '').get('v');
}
if (!videoId) return;
if (!isWatched(videoId)) {
storage[videoId] = false;
}
try {
const u = new URL(element.href, window.location.origin);
u.searchParams.set('ytp-random', ytpRandom);
element.href = u.toString();
} catch {
}
element.addEventListener('click', event => {
event.preventDefault();
navigate(element.href);
});
const entryKey = getVideoId(element.href);
if (isWatched(entryKey)) {
element.parentElement?.setAttribute('hidden', '');
}
});
};
const setupRandomPlayBadge = playlistContainer => {
const header = playlistContainer.querySelector('h3 a');
if (!header || header.tagName !== 'A') return;
const anchorHeader = ( (header));
anchorHeader.innerHTML += ` ${ytpRandom} ×`;
anchorHeader.href = 'javascript:void(0)';
const badge = anchorHeader.querySelector('.ytp-random-badge');
if (badge) {
badge.addEventListener('click', event => {
event.preventDefault();
localStorage.removeItem(getStorageKey());
const params = new URLSearchParams(location.search);
params.delete('ytp-random');
window.location.href = `${window.location.pathname}?${params.toString()}`;
});
}
};
const setupKeyboardShortcut = () => {
document.addEventListener(
'keydown',
event => {
if (event.shiftKey && event.key.toLowerCase() === 'n') {
event.stopImmediatePropagation();
event.preventDefault();
const videoId = getVideoId(location.href);
markWatched(videoId);
playNextRandom(true);
}
},
true
);
};
const updateUrlWithRandomParam = randomMode => {
const params = new URLSearchParams(location.search);
params.set('ytp-random', randomMode);
window.history.replaceState({}, '', `${window.location.pathname}?${params.toString()}`);
};
const isValidProgressState = progressState => {
return (
progressState &&
typeof progressState.current === 'number' &&
typeof progressState.duration === 'number'
);
};
const handleVideoProgress = (progressState, videoId, player) => {
if (isAdPlaying()) return;
if (progressState.current / progressState.duration >= 0.9) {
if (videoId) markWatched(videoId);
}
if (progressState.current >= progressState.duration - 2) {
if (typeof player.pauseVideo === 'function') player.pauseVideo();
if (typeof player.seekTo === 'function') player.seekTo(0);
playNextRandom();
}
};
const setupCustomNextButton = videoId => {
const nextButton = document.querySelector(
'#ytd-player .ytp-next-button.ytp-button:not([ytp-random="applied"])'
);
if (nextButton instanceof HTMLElement) {
const newButton = document.createElement('span');
newButton.className = nextButton.className;
newButton.innerHTML = nextButton.innerHTML;
nextButton.replaceWith(newButton);
newButton.setAttribute('ytp-random', 'applied');
newButton.addEventListener('click', () => {
if (videoId) markWatched(videoId);
playNextRandom();
});
}
};
const setupProgressMonitoring = () => {
setInterval(() => {
const videoId = getVideoId(location.href);
updateUrlWithRandomParam(ytpRandom);
const player = getPlayer();
if (!player || typeof player.getProgressState !== 'function') {
return;
}
const progressState = player.getProgressState();
if (!isValidProgressState(progressState)) {
return;
}
handleVideoProgress(progressState, videoId, player);
setupCustomNextButton(videoId);
}, 1000);
};
const applyRandomPlay = () => {
if (!window.location.pathname.endsWith('/watch')) {
return;
}
const playlistContainer = document.querySelector('#secondary ytd-playlist-panel-renderer');
if (!playlistContainer || playlistContainer.hasAttribute('ytp-random')) {
return;
}
playlistContainer.setAttribute('ytp-random', 'applied');
addRandomPlayNotice(playlistContainer);
const storage = getStorage();
const anchors = collectPlaylistAnchors(playlistContainer);
processPlaylistAnchors(anchors, storage);
localStorage.setItem(getStorageKey(), JSON.stringify(storage));
if (urlParams.get('ytp-random-initial') === '1' || isWatched(getVideoId(location.href))) {
playNextRandom();
return;
}
setupRandomPlayBadge(playlistContainer);
setupKeyboardShortcut();
if (!isIntervalSet) {
isIntervalSet = true;
setupProgressMonitoring();
}
};
setInterval(applyRandomPlay, 1000);
})();
})().catch(error =>
console.error(
'%cytp - YouTube Play All\n',
'color: #bf4bcc; font-size: 32px; font-weight: bold',
error
)
);
(function () {
'use strict';
const _globalI18n =
typeof window !== 'undefined' && window.YouTubePlusI18n ? window.YouTubePlusI18n : null;
const t = (key, params = {}) => {
try {
if (_globalI18n && typeof _globalI18n.t === 'function') return _globalI18n.t(key, params);
if (
typeof window !== 'undefined' &&
window.YouTubeUtils &&
typeof window.YouTubeUtils.t === 'function'
) {
return window.YouTubeUtils.t(key, params);
}
} catch {
}
if (!key || typeof key !== 'string') return '';
if (Object.keys(params).length === 0) return key;
let result = key;
for (const [k, v] of Object.entries(params)) result = result.split(`{${k}}`).join(String(v));
return result;
};
const AdBlocker = {
config: {
skipInterval: 500,
removeInterval: 1500,
enableLogging: false,
maxRetries: 2,
enabled: true,
storageKey: 'youtube_adblocker_settings',
},
state: {
isYouTubeShorts: false,
isYouTubeMusic: location.hostname === 'music.youtube.com',
lastSkipAttempt: 0,
retryCount: 0,
initialized: false,
},
cache: {
moviePlayer: null,
ytdPlayer: null,
lastCacheTime: 0,
cacheTimeout: 5000,
},
selectors: {
ads: '#player-ads,.ytp-ad-module,.ad-showing,.ytp-ad-timed-pie-countdown-container,.ytp-ad-survey-questions',
elements:
'#masthead-ad,ytd-merch-shelf-renderer,.yt-mealbar-promo-renderer,ytmusic-mealbar-promo-renderer,ytmusic-statement-banner-renderer,.ytp-featured-product',
video: 'video.html5-main-video',
removal: 'ytd-reel-video-renderer .ytd-ad-slot-renderer',
},
settings: {
load() {
try {
const saved = localStorage.getItem(AdBlocker.config.storageKey);
if (!saved) return;
const parsed = JSON.parse(saved);
if (typeof parsed !== 'object' || parsed === null) {
console.warn('[YouTube+][AdBlocker]', 'Invalid settings format');
return;
}
if (typeof parsed.enabled === 'boolean') {
AdBlocker.config.enabled = parsed.enabled;
} else {
AdBlocker.config.enabled = true;
}
if (typeof parsed.enableLogging === 'boolean') {
AdBlocker.config.enableLogging = parsed.enableLogging;
} else {
AdBlocker.config.enableLogging = false;
}
} catch (error) {
console.error('[YouTube+][AdBlocker]', 'Error loading settings:', error);
AdBlocker.config.enabled = true;
AdBlocker.config.enableLogging = false;
}
},
save() {
try {
const settingsToSave = {
enabled: AdBlocker.config.enabled,
enableLogging: AdBlocker.config.enableLogging,
};
localStorage.setItem(AdBlocker.config.storageKey, JSON.stringify(settingsToSave));
} catch (error) {
console.error('[YouTube+][AdBlocker]', 'Error saving settings:', error);
}
},
},
getPlayer() {
const now = Date.now();
if (now - AdBlocker.cache.lastCacheTime > AdBlocker.cache.cacheTimeout) {
AdBlocker.cache.moviePlayer = document.querySelector('#movie_player');
AdBlocker.cache.ytdPlayer = document.querySelector('#ytd-player');
AdBlocker.cache.lastCacheTime = now;
}
const playerEl = AdBlocker.cache.ytdPlayer;
return {
element: AdBlocker.cache.moviePlayer,
player: playerEl?.getPlayer?.() || playerEl,
};
},
skipAd() {
if (!AdBlocker.config.enabled) return;
const now = Date.now();
if (now - AdBlocker.state.lastSkipAttempt < 300) return;
AdBlocker.state.lastSkipAttempt = now;
if (location.pathname.startsWith('/shorts/')) return;
const adElement = document.querySelector(
'.ad-showing, .ytp-ad-timed-pie-countdown-container'
);
if (!adElement) {
AdBlocker.state.retryCount = 0;
return;
}
try {
const { player } = AdBlocker.getPlayer();
if (!player) return;
const video = document.querySelector(AdBlocker.selectors.video);
if (video) video.muted = true;
if (AdBlocker.state.isYouTubeMusic && video) {
(video).currentTime = video.duration || 999;
} else if (typeof player.getVideoData === 'function') {
const videoData = player.getVideoData();
if (videoData?.video_id) {
const currentTime = Math.floor(player.getCurrentTime?.() || 0);
if (typeof player.loadVideoById === 'function') {
player.loadVideoById(videoData.video_id, currentTime);
}
}
}
AdBlocker.state.retryCount = 0;
} catch {
if (AdBlocker.state.retryCount < AdBlocker.config.maxRetries) {
AdBlocker.state.retryCount++;
setTimeout(AdBlocker.skipAd, 800);
}
}
},
addCss() {
if (document.querySelector('#yt-ab-styles') || !AdBlocker.config.enabled) return;
const styles = `${AdBlocker.selectors.ads},${AdBlocker.selectors.elements}{display:none!important;}`;
YouTubeUtils.StyleManager.add('yt-ab-styles', styles);
},
removeCss() {
YouTubeUtils.StyleManager.remove('yt-ab-styles');
},
removeElements() {
if (!AdBlocker.config.enabled || AdBlocker.state.isYouTubeMusic) return;
const remove = () => {
const elements = document.querySelectorAll(AdBlocker.selectors.removal);
elements.forEach(el => el.closest('ytd-reel-video-renderer')?.remove());
};
if (window.requestIdleCallback) {
requestIdleCallback(remove, { timeout: 100 });
} else {
setTimeout(remove, 0);
}
},
addSettingsUI() {
const section = document.querySelector('.ytp-plus-settings-section[data-section="basic"]');
if (!section || section.querySelector('.ab-settings')) return;
try {
const item = document.createElement('div');
item.className = 'ytp-plus-settings-item ab-settings';
item.innerHTML = `
The videos will not be played in the order listed here.
${t('adBlockerDescription')}
${t('pipDescription')}
${t('pipShortcutDescription')}
+
`;
return shortcutItem;
};
const setupEnableCheckbox = shortcutItem => {
document.getElementById('pip-enable-checkbox').addEventListener('change', e => {
const { target } = (e);
const { checked } = (target);
pipSettings.enabled = checked;
shortcutItem.style.display = pipSettings.enabled ? 'flex' : 'none';
saveSettings();
});
};
const createModifierLabel = v => {
if (v === 'none') return t('none');
return v
.replace(/\+/g, '+')
.split('+')
.map(k => t(k.toLowerCase()))
.join('+')
.split('+')
.map(k => k.charAt(0).toUpperCase() + k.slice(1))
.join('+');
};
const setupModifierSelect = modifierValue => {
const native = document.getElementById('pip-modifier-combo');
if (!native) return;
const opts = [
'none',
'ctrl',
'alt',
'shift',
'ctrl+alt',
'ctrl+shift',
'alt+shift',
'ctrl+alt+shift',
];
const factory = window.YouTubePlusHelpers?.DOM?.createCustomSelect;
if (typeof factory !== 'function') return;
const custom = factory();
custom.setOptions(opts.map(v => ({ value: v, text: createModifierLabel(v) })));
custom.value = modifierValue;
try {
native.parentNode.replaceChild(custom, native);
} catch {
return;
}
custom.addEventListener('change', () => {
const value = custom.value || '';
pipSettings.shortcut.ctrlKey = value.includes('ctrl');
pipSettings.shortcut.altKey = value.includes('alt');
pipSettings.shortcut.shiftKey = value.includes('shift');
saveSettings();
});
};
const setupKeyInput = () => {
document.getElementById('pip-key').addEventListener('input', e => {
const { target } = (e);
const { value: val } = (target);
if (val) {
pipSettings.shortcut.key = val.toUpperCase();
saveSettings();
}
});
document.getElementById('pip-key').addEventListener('keydown', e => e.stopPropagation());
};
const addPipSettingsToModal = () => {
const advancedSection = YouTubeUtils.querySelector(
'.ytp-plus-settings-section[data-section="advanced"]'
);
if (!advancedSection || YouTubeUtils.querySelector('.pip-settings-item')) return;
initPipStyles();
const shortcutItem = createEnableToggle(advancedSection);
setupEnableCheckbox(shortcutItem);
setupModifierSelect(getModifierValue());
setupKeyInput();
};
loadSettings();
document.addEventListener('keydown', e => {
if (!pipSettings.enabled) return;
const { shiftKey, altKey, ctrlKey, key } = pipSettings.shortcut;
if (
e.shiftKey === shiftKey &&
e.altKey === altKey &&
e.ctrlKey === ctrlKey &&
e.key.toUpperCase() === key
) {
const video = getVideoElement();
if (video) {
togglePictureInPicture(video);
}
e.preventDefault();
}
});
window.addEventListener('storage', e => {
if (e.key === pipSettings.storageKey) {
loadSettings();
}
});
window.addEventListener('load', () => {
if (!pipSettings.enabled || !wasSessionActive() || document.pictureInPictureElement) {
return;
}
const resumePiP = () => {
const video = getVideoElement();
if (!video) return;
togglePictureInPicture(video).catch(() => {
setSessionActive(false);
});
};
const ensureCleanup = handler => {
if (!handler) return;
try {
document.removeEventListener('pointerdown', handler, true);
} catch {}
};
const cleanupListeners = () => {
ensureCleanup(pointerListener);
ensureCleanup(keyListener);
};
const pointerListener = () => {
cleanupListeners();
resumePiP();
};
const keyListener = () => {
cleanupListeners();
resumePiP();
};
document.addEventListener('pointerdown', pointerListener, { once: true, capture: true });
document.addEventListener('keydown', keyListener, { once: true, capture: true });
});
const observer = new MutationObserver(mutations => {
for (const mutation of mutations) {
for (const node of mutation.addedNodes) {
if (node instanceof Element && node.classList?.contains('ytp-plus-settings-modal')) {
setTimeout(addPipSettingsToModal, 100);
}
}
}
document.addEventListener('leavepictureinpicture', () => {
setSessionActive(false);
});
if (YouTubeUtils.querySelector('.ytp-plus-settings-nav-item[data-section="advanced"].active')) {
if (!YouTubeUtils.querySelector('.pip-settings-item')) {
setTimeout(addPipSettingsToModal, 50);
}
}
});
YouTubeUtils.cleanupManager.registerObserver(observer);
if (document.body) {
observer.observe(document.body, { childList: true, subtree: true });
} else {
document.addEventListener('DOMContentLoaded', () => {
observer.observe(document.body, { childList: true, subtree: true });
});
}
const clickHandler = e => {
const { target } = (e);
if (target?.classList && target.classList.contains('ytp-plus-settings-nav-item')) {
if (target.dataset?.section === 'advanced') {
setTimeout(addPipSettingsToModal, 50);
}
}
};
YouTubeUtils.cleanupManager.registerListener(document, 'click', clickHandler, true);
})();
(function () {
'use strict';
if (window.location.hostname !== 'www.youtube.com' || window.frameElement) {
return;
}
if (window._timecodeModuleInitialized) return;
window._timecodeModuleInitialized = true;
const _globalI18n =
typeof window !== 'undefined' && window.YouTubePlusI18n ? window.YouTubePlusI18n : null;
const t = (key, params = {}) => {
try {
if (_globalI18n && typeof _globalI18n.t === 'function') {
return _globalI18n.t(key, params);
}
if (
typeof window !== 'undefined' &&
window.YouTubeUtils &&
typeof window.YouTubeUtils.t === 'function'
) {
return window.YouTubeUtils.t(key, params);
}
} catch {
}
if (!key || typeof key !== 'string') return '';
if (Object.keys(params).length === 0) return key;
let result = key;
for (const [k, v] of Object.entries(params)) result = result.split(`{${k}}`).join(String(v));
return result;
};
const config = {
enabled: true,
autoDetect: true,
shortcut: { key: 'T', shiftKey: true, altKey: false, ctrlKey: false },
storageKey: 'youtube_timecode_settings',
autoSave: true,
autoTrackPlayback: true,
panelPosition: null,
export: true,
};
const state = {
timecodes: new Map(),
dom: {},
isReloading: false,
activeIndex: null,
trackingId: 0,
dragging: false,
editingIndex: null,
resizeListenerKey: null,
};
let initStarted = false;
const scheduleInitRetry = () => {
const timeoutId = setTimeout(init, 250);
YouTubeUtils.cleanupManager?.registerTimeout?.(timeoutId);
};
const applyBooleanSettings = parsed => {
const booleanFields = ['enabled', 'autoDetect', 'autoSave', 'autoTrackPlayback', 'export'];
booleanFields.forEach(field => {
const value = field === 'export' ? parsed.export : parsed[field];
if (typeof value === 'boolean') {
config[field] = value;
}
});
};
const applyShortcutSettings = shortcut => {
if (!shortcut || typeof shortcut !== 'object') return;
const shortcutFields = {
key: 'string',
shiftKey: 'boolean',
altKey: 'boolean',
ctrlKey: 'boolean',
};
Object.entries(shortcutFields).forEach(([field, expectedType]) => {
if (typeof shortcut[field] === expectedType) {
config.shortcut[field] = shortcut[field];
}
});
};
const isValidPanelPosition = (left, top) => {
return (
typeof left === 'number' &&
typeof top === 'number' &&
!isNaN(left) &&
!isNaN(top) &&
left >= 0 &&
top >= 0
);
};
const applyPanelPosition = panelPosition => {
if (!panelPosition || typeof panelPosition !== 'object') return;
const { left, top } = panelPosition;
if (isValidPanelPosition(left, top)) {
config.panelPosition = { left, top };
}
};
const loadSettings = () => {
try {
const saved = localStorage.getItem(config.storageKey);
if (!saved) return;
const parsed = JSON.parse(saved);
if (typeof parsed !== 'object' || parsed === null) {
console.warn('[YouTube+][Timecode]', 'Invalid settings format');
return;
}
applyBooleanSettings(parsed);
applyShortcutSettings(parsed.shortcut);
applyPanelPosition(parsed.panelPosition);
} catch (error) {
console.error('[YouTube+][Timecode]', 'Error loading settings:', error);
}
};
const saveSettings = () => {
try {
const settingsToSave = {
enabled: config.enabled,
autoDetect: config.autoDetect,
shortcut: config.shortcut,
autoSave: config.autoSave,
autoTrackPlayback: config.autoTrackPlayback,
panelPosition: config.panelPosition,
export: config.export,
};
localStorage.setItem(config.storageKey, JSON.stringify(settingsToSave));
} catch (error) {
console.error('[YouTube+][Timecode]', 'Error saving settings:', error);
}
};
const isValidPanel = panel => {
return panel && panel instanceof HTMLElement;
};
const areValidCoordinates = (left, top) => {
return typeof left === 'number' && typeof top === 'number' && !isNaN(left) && !isNaN(top);
};
const getPanelDimensions = panel => {
const rect = panel.getBoundingClientRect();
return {
width: rect.width || panel.offsetWidth || 0,
height: rect.height || panel.offsetHeight || 0,
};
};
const clamp = (value, min, max) => Math.min(Math.max(min, value), max);
const clampPanelPosition = (panel, left, top) => {
try {
if (!isValidPanel(panel)) {
console.warn('[YouTube+][Timecode]', 'Invalid panel element');
return { left: 0, top: 0 };
}
if (!areValidCoordinates(left, top)) {
console.warn('[YouTube+][Timecode]', 'Invalid position coordinates');
return { left: 0, top: 0 };
}
const { width, height } = getPanelDimensions(panel);
const maxLeft = Math.max(0, window.innerWidth - width);
const maxTop = Math.max(0, window.innerHeight - height);
return {
left: clamp(left, 0, maxLeft),
top: clamp(top, 0, maxTop),
};
} catch (error) {
console.error('[YouTube+][Timecode]', 'Error clamping panel position:', error);
return { left: 0, top: 0 };
}
};
const savePanelPosition = (left, top) => {
try {
if (typeof left !== 'number' || typeof top !== 'number' || isNaN(left) || isNaN(top)) {
console.warn('[YouTube+][Timecode]', 'Invalid position coordinates for saving');
return;
}
config.panelPosition = { left, top };
saveSettings();
} catch (error) {
console.error('[YouTube+][Timecode]', 'Error saving panel position:', error);
}
};
const applySavedPanelPosition = panel => {
if (!panel || !config.panelPosition) return;
requestAnimationFrame(() => {
const { left, top } = clampPanelPosition(
panel,
config.panelPosition.left,
config.panelPosition.top
);
panel.style.left = `${left}px`;
panel.style.top = `${top}px`;
panel.style.right = 'auto';
});
};
const showNotification = (message, duration = 2000, type = 'info') => {
YouTubeUtils.NotificationManager.show(message, { duration, type });
};
const formatTime = seconds => {
if (isNaN(seconds)) return '00:00';
const roundedSeconds = Math.round(seconds);
const h = Math.floor(roundedSeconds / 3600);
const m = Math.floor((roundedSeconds % 3600) / 60);
const s = roundedSeconds % 60;
return h > 0
? `${h}:${m.toString().padStart(2, '0')}:${s.toString().padStart(2, '0')}`
: `${m.toString().padStart(2, '0')}:${s.toString().padStart(2, '0')}`;
};
const parseTime = timeStr => {
try {
if (!timeStr || typeof timeStr !== 'string') return null;
const str = timeStr.trim();
if (str.length === 0 || str.length > 12) return null;
let match = str.match(/^(\d+):(\d{1,2}):(\d{2})$/);
if (match) {
const [, h, m, s] = match.map(Number);
if (isNaN(h) || isNaN(m) || isNaN(s)) return null;
if (m >= 60 || s >= 60 || h < 0 || m < 0 || s < 0) return null;
const total = h * 3600 + m * 60 + s;
return total <= 86400 ? total : null;
}
match = str.match(/^(\d{1,2}):(\d{2})$/);
if (match) {
const [, m, s] = match.map(Number);
if (isNaN(m) || isNaN(s)) return null;
if (m >= 60 || s >= 60 || m < 0 || s < 0) return null;
return m * 60 + s;
}
return null;
} catch (error) {
console.error('[YouTube+][Timecode]', 'Error parsing time:', error);
return null;
}
};
const extractTimecodes = text => {
try {
if (!text || typeof text !== 'string') return [];
let processedText = text;
if (processedText.length > 50000) {
console.warn('[YouTube+][Timecode]', 'Text too long, truncating');
processedText = processedText.substring(0, 50000);
}
const timecodes = [];
const seen = new Set();
const patterns = [
/(\d{1,2}:\d{2}(?::\d{2})?)\s*[-–—]\s*(.+?)$/gm,
/^(\d{1,2}:\d{2}(?::\d{2})?)\s+(.+?)$/gm,
/(\d{1,2}:\d{2}(?::\d{2})?)\s*[-–—:]\s*([^\n\r]{1,100}?)(?=\s*\d{1,2}:\d{2}|\s*$)/g,
/(\d{1,2}:\d{2}(?::\d{2})?)\s*[–—-]\s*([^\n]+)/gm,
/^(\d{1,2}:\d{2}(?::\d{2})?)\s*(.+)$/gm,
];
for (const pattern of patterns) {
let match;
let iterations = 0;
const maxIterations = 1000;
while ((match = pattern.exec(processedText)) !== null && iterations++ < maxIterations) {
const time = parseTime(match[1]);
if (time !== null && !seen.has(time)) {
seen.add(time);
let label = (match[2] || formatTime(time))
.trim()
.replace(/^\d+[\.\)]\s*/, '')
.substring(0, 100);
label = label.replace(/[<>\"']/g, '');
if (label) {
timecodes.push({ time, label, originalText: match[1] });
}
}
}
if (iterations >= maxIterations) {
console.warn('[YouTube+][Timecode]', 'Maximum iterations reached during extraction');
}
}
return timecodes.sort((a, b) => a.time - b.time);
} catch (error) {
console.error('[YouTube+][Timecode]', 'Error extracting timecodes:', error);
return [];
}
};
const DESCRIPTION_SELECTORS = [
'#description-inline-expander yt-attributed-string',
'#description-inline-expander yt-formatted-string',
'#description-inline-expander ytd-text-inline-expander',
'#description-inline-expander .yt-core-attributed-string',
'#description ytd-text-inline-expander',
'#description ytd-expandable-video-description-body-renderer',
'#description.ytd-watch-metadata yt-formatted-string',
'#description.ytd-watch-metadata #description-inline-expander',
'#tab-info ytd-expandable-video-description-body-renderer yt-formatted-string',
'#tab-info ytd-expandable-video-description-body-renderer yt-attributed-string',
'#structured-description ytd-text-inline-expander',
'#structured-description yt-formatted-string',
'ytd-engagement-panel-section-list-renderer[target-id="engagement-panel-macro-markers-description-chapters"] yt-formatted-string',
'ytd-engagement-panel-section-list-renderer[target-id="engagement-panel-macro-markers-description-chapters"] yt-attributed-string',
'ytd-watch-metadata #description',
'ytd-watch-metadata #description-inline-expander',
'#description',
];
const DESCRIPTION_SELECTOR_COMBINED = DESCRIPTION_SELECTORS.join(',');
const DESCRIPTION_EXPANDERS = [
'#description-inline-expander yt-button-shape button',
'#description-inline-expander tp-yt-paper-button#expand',
'#description-inline-expander tp-yt-paper-button[aria-label]',
'ytd-watch-metadata #description-inline-expander yt-button-shape button',
'ytd-text-inline-expander[collapsed] yt-button-shape button',
'ytd-text-inline-expander[collapsed] tp-yt-paper-button#expand',
'ytd-expandable-video-description-body-renderer #expand',
'ytd-engagement-panel-section-list-renderer[target-id="engagement-panel-macro-markers-description-chapters"] #expand',
];
const sleep = (ms = 250) => new Promise(resolve => setTimeout(resolve, ms));
const collectDescriptionText = () => {
const snippets = [];
DESCRIPTION_SELECTORS.forEach(selector => {
document.querySelectorAll(selector).forEach(node => {
const text = node?.textContent?.trim();
if (text) {
snippets.push(text);
}
});
});
return snippets.join('\n');
};
const isButtonExpanded = button => {
const ariaExpanded = button.getAttribute('aria-expanded');
if (ariaExpanded === 'true') return true;
const ariaLabel = button.getAttribute('aria-label')?.toLowerCase();
return ariaLabel && ariaLabel.includes('less');
};
const tryClickExpandButton = async button => {
if (button.offsetParent === null) return false;
try {
(button).click();
await sleep(400);
return true;
} catch (error) {
console.warn('[YouTube+][Timecode]', 'Failed to click expand button:', error);
return false;
}
};
const tryExpandInlineExpander = async () => {
const inlineExpander = document.querySelector('ytd-text-inline-expander[collapsed]');
if (!inlineExpander) return false;
try {
inlineExpander.removeAttribute('collapsed');
await sleep(300);
return true;
} catch (error) {
YouTubeUtils.logError('TimecodePanel', 'Failed to expand description', error);
return false;
}
};
const expandDescriptionIfNeeded = async () => {
for (const selector of DESCRIPTION_EXPANDERS) {
const button = document.querySelector(selector);
if (!button) continue;
if (isButtonExpanded(button)) return false;
const clicked = await tryClickExpandButton(button);
if (clicked) return true;
}
return await tryExpandInlineExpander();
};
const ensureDescriptionReady = async () => {
const initialText = collectDescriptionText();
if (initialText) return;
const maxAttempts = 3;
for (let attempt = 0; attempt < maxAttempts; attempt++) {
try {
await YouTubeUtils.waitForElement(DESCRIPTION_SELECTOR_COMBINED, 1500);
} catch {
}
await sleep(200);
const expanded = await expandDescriptionIfNeeded();
await sleep(expanded ? 500 : 200);
const text = collectDescriptionText();
if (text && text.length > initialText.length) {
return;
}
}
};
const getCurrentVideoId = () => new URLSearchParams(window.location.search).get('v');
const detectTimecodes = async (options = {}) => {
const { force = false } = options;
if (!config.enabled) return [];
if (!force && !config.autoDetect) return [];
const videoId = getCurrentVideoId();
if (!videoId) return [];
const cacheKey = `detect_${videoId}`;
if (!force && state.timecodes.has(cacheKey)) {
const cached = state.timecodes.get(cacheKey);
if (Array.isArray(cached) && cached.length) {
return cached;
}
state.timecodes.delete(cacheKey);
}
await ensureDescriptionReady();
const uniqueMap = new Map();
const descriptionText = collectDescriptionText();
if (descriptionText) {
const extracted = extractTimecodes(descriptionText);
extracted.forEach(tc => {
if (tc.time >= 0 && tc.label?.trim()) {
uniqueMap.set(tc.time.toString(), tc);
}
});
}
const chapters = getYouTubeChapters();
chapters.forEach(chapter => {
if (chapter.time >= 0 && chapter.label?.trim()) {
uniqueMap.set(chapter.time.toString(), chapter);
}
});
const result = Array.from(uniqueMap.values()).sort((a, b) => a.time - b.time);
const hadExistingItems = state.dom.list?.childElementCount > 0;
if (result.length > 0) {
updateTimecodePanel(result);
state.timecodes.set(cacheKey, result);
if (config.autoSave) saveTimecodesToStorage(result);
} else {
if (force || !hadExistingItems) {
updateTimecodePanel([]);
}
if (force) {
state.timecodes.delete(cacheKey);
}
}
return result;
};
const reloadTimecodes = async (buttonOverride = null) => {
const button =
buttonOverride || state.dom.reloadButton || document.getElementById('timecode-reload');
if (state.isReloading || !config.enabled) return;
state.isReloading = true;
if (button) {
button.disabled = true;
button.classList.add('loading');
}
try {
const result = await detectTimecodes({ force: true });
if (Array.isArray(result) && result.length) {
showNotification(t('foundTimecodes').replace('{count}', result.length));
} else {
updateTimecodePanel([]);
showNotification(t('noTimecodesFound'));
}
} catch (error) {
YouTubeUtils.logError('TimecodePanel', 'Reload failed', error);
showNotification(t('reloadError'));
} finally {
if (button) {
button.disabled = false;
button.classList.remove('loading');
}
state.isReloading = false;
}
};
const extractTextFromSelectors = (item, selectors) => {
for (const sel of selectors) {
const el = item.querySelector(sel);
if (el?.textContent) {
return el.textContent;
}
}
return null;
};
const createChapterObject = (timeText, titleText) => {
if (!timeText) return null;
const time = parseTime(timeText.trim());
if (time === null) return null;
const cleanTitle = titleText?.trim().replace(/\s+/g, ' ') || formatTime(time);
return {
time,
label: cleanTitle,
isChapter: true,
};
};
const getYouTubeChapters = () => {
const selectors = [
'ytd-macro-markers-list-item-renderer',
'ytd-chapter-renderer',
'ytd-engagement-panel-section-list-renderer[target-id*="description-chapters"] ytd-macro-markers-list-item-renderer',
'ytd-engagement-panel-section-list-renderer[target-id*="description-chapters"] #details',
'#structured-description ytd-horizontal-card-list-renderer ytd-macro-markers-list-item-renderer',
];
const items = document.querySelectorAll(selectors.join(', '));
const chapters = new Map();
const timeSelectors = ['.time-info', '.timestamp', '#time', 'span[id*="time"]'];
const titleSelectors = ['.marker-title', '.chapter-title', '#details', 'h4', '.title'];
items.forEach(item => {
const timeText = extractTextFromSelectors(item, timeSelectors);
const titleText = extractTextFromSelectors(item, titleSelectors);
const chapter = createChapterObject(timeText, titleText);
if (chapter) {
chapters.set(chapter.time.toString(), chapter);
}
});
return Array.from(chapters.values()).sort((a, b) => a.time - b.time);
};
const buildModifierParts = (ctrlKey, altKey, shiftKey) => {
const parts = [];
if (ctrlKey) parts.push('ctrl');
if (altKey) parts.push('alt');
if (shiftKey) parts.push('shift');
return parts;
};
const getModifierValue = () => {
const { ctrlKey, altKey, shiftKey } = config.shortcut;
const parts = buildModifierParts(ctrlKey, altKey, shiftKey);
return parts.length > 0 ? parts.join('+') : 'none';
};
const createEnableCheckbox = () => {
const enableDiv = document.createElement('div');
enableDiv.className = 'ytp-plus-settings-item timecode-settings-item';
enableDiv.innerHTML = `
${t('enableDescription')}
${t('shortcutDescription')}
+
`;
return shortcutDiv;
};
const setupEnableListener = (advancedSection, shortcutDiv) => {
advancedSection.addEventListener('change', e => {
const el = (e.target);
if (el.matches && el.matches('.ytp-plus-settings-checkbox[data-setting="enabled"]')) {
config.enabled = (el).checked;
shortcutDiv.style.display = config.enabled ? 'flex' : 'none';
toggleTimecodePanel(config.enabled);
saveSettings();
}
});
};
const createModifierLabel = value => {
if (value === 'none') return t('none');
return value
.split('+')
.map(k => k.charAt(0).toUpperCase() + k.slice(1))
.join('+');
};
const setupModifierSelect = modifierValue => {
const native = document.getElementById('timecode-modifier-combo');
if (!native) return;
const opts = [
'none',
'ctrl',
'alt',
'shift',
'ctrl+alt',
'ctrl+shift',
'alt+shift',
'ctrl+alt+shift',
];
const factory = window.YouTubePlusHelpers?.DOM?.createCustomSelect;
if (typeof factory !== 'function') return;
const custom = factory();
custom.setOptions(opts.map(v => ({ value: v, text: createModifierLabel(v) })));
custom.value = modifierValue;
try {
native.parentNode.replaceChild(custom, native);
} catch {
return;
}
custom.addEventListener('change', () => {
const value = custom.value || '';
config.shortcut.ctrlKey = value.includes('ctrl');
config.shortcut.altKey = value.includes('alt');
config.shortcut.shiftKey = value.includes('shift');
saveSettings();
});
};
const setupKeyInputListener = () => {
document.getElementById('timecode-key')?.addEventListener('input', e => {
const input = (e.target);
if (input.value) {
config.shortcut.key = input.value.toUpperCase();
saveSettings();
}
});
};
const addTimecodePanelSettings = () => {
const advancedSection = YouTubeUtils.querySelector(
'.ytp-plus-settings-section[data-section="advanced"]'
);
if (!advancedSection || YouTubeUtils.querySelector('.timecode-settings-item')) return;
const modifierValue = getModifierValue();
const enableDiv = createEnableCheckbox();
const shortcutDiv = createShortcutConfig();
advancedSection.append(enableDiv, shortcutDiv);
setupEnableListener(advancedSection, shortcutDiv);
setupModifierSelect(modifierValue);
setupKeyInputListener();
};
const insertTimecodeStyles = () => {
if (document.getElementById('timecode-panel-styles')) return;
const styles = `
:root{--tc-panel-bg:rgba(255,255,255,0.06);--tc-panel-border:rgba(255,255,255,0.12);--tc-panel-color:#fff}
html[dark],body[dark]{--tc-panel-bg:rgba(34,34,34,0.75);--tc-panel-border:rgba(255,255,255,0.12);--tc-panel-color:#fff}
html:not([dark]){--tc-panel-bg:rgba(255,255,255,0.95);--tc-panel-border:rgba(0,0,0,0.08);--tc-panel-color:#222}
#timecode-panel{position:fixed;right:20px;top:80px;background:var(--tc-panel-bg);border-radius:16px;box-shadow:0 12px 40px rgba(0,0,0,0.45);width:320px;max-height:70vh;z-index:10000;color:var(--tc-panel-color);backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%);border:1.5px solid var(--tc-panel-border);transition:transform .28s cubic-bezier(.4,0,.2,1),opacity .28s;overflow:hidden;display:flex;flex-direction:column}
#timecode-panel.hidden{transform:translateX(300px);opacity:0;pointer-events:none}
#timecode-panel.auto-tracking{box-shadow:0 12px 48px rgba(255,0,0,0.12);border-color:rgba(255,0,0,0.25)}
#timecode-header{display:flex;justify-content:space-between;align-items:center;padding:14px;border-bottom:1px solid rgba(255,255,255,0.04);background:linear-gradient(180deg, rgba(255,255,255,0.02), transparent);cursor:move}
#timecode-title{font-weight:600;margin:0;font-size:15px;user-select:none;display:flex;align-items:center;gap:8px}
#timecode-tracking-indicator{width:8px;height:8px;background:red;border-radius:50%;opacity:0;transition:opacity .3s}
#timecode-panel.auto-tracking #timecode-tracking-indicator{opacity:1}
#timecode-current-time{font-family:monospace;font-size:12px;padding:2px 6px;background:rgba(255,0,0,.3);border-radius:3px;margin-left:auto}
#timecode-header-controls{display:flex;align-items:center;gap:6px}
#timecode-reload,#timecode-close{background:transparent;border:none;color:inherit;cursor:pointer;width:28px;height:28px;padding:0;display:flex;align-items:center;justify-content:center;border-radius:6px;transition:background .18s,color .18s}
#timecode-reload:hover,#timecode-close:hover{background:rgba(255,255,255,0.04)}
#timecode-reload.loading{animation:timecode-spin .8s linear infinite}
#timecode-list{overflow-y:auto;padding:8px 0;max-height:calc(70vh - 80px);scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.3) transparent}
#timecode-list::-webkit-scrollbar{width:6px}
#timecode-list::-webkit-scrollbar-thumb{background:rgba(255,255,255,.3);border-radius:3px}
.timecode-item{padding:10px 14px;display:flex;align-items:center;cursor:pointer;transition:background-color .16s,transform .12s;border-left:3px solid transparent;position:relative;border-radius:8px;margin:6px 10px}
.timecode-item:hover{background:rgba(255,255,255,0.04);transform:translateY(-2px)}
.timecode-item:hover .timecode-actions{opacity:1}
.timecode-item.active{background:linear-gradient(90deg, rgba(255,68,68,0.12), rgba(255,68,68,0.04));border-left-color:#ff6666;box-shadow:inset 0 0 0 1px rgba(255,68,68,0.03)}
.timecode-item.active.pulse{animation:pulse .8s ease-out}
.timecode-item.editing{background:linear-gradient(90deg, rgba(255,170,0,0.08), rgba(255,170,0,0.03));border-left-color:#ffaa00}
.timecode-item.editing .timecode-actions{opacity:1}
@keyframes pulse{0%{transform:scale(1)}50%{transform:scale(1.02)}100%{transform:scale(1)}}
@keyframes timecode-spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
.timecode-time{font-family:monospace;margin-right:10px;color:rgba(255,255,255,.8);font-size:13px;min-width:45px}
.timecode-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px;flex:1}
.timecode-item.has-chapter .timecode-time{color:#ff4444}
.timecode-progress{width:0;height:2px;background:#ff4444;position:absolute;bottom:0;left:0;transition:width .3s;opacity:.8}
.timecode-actions{position:absolute;right:8px;top:50%;transform:translateY(-50%);display:flex;gap:4px;opacity:0;transition:opacity .2s;background:rgba(0,0,0,.8);border-radius:4px;padding:2px}
.timecode-action{background:none;border:none;color:rgba(255,255,255,.8);cursor:pointer;padding:4px;font-size:12px;border-radius:2px;transition:color .2s,background-color .2s}
.timecode-action:hover{color:#fff;background:rgba(255,255,255,.2)}
.timecode-action.edit:hover{color:#ffaa00}
.timecode-action.delete:hover{color:#ff4444}
#timecode-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px;text-align:center;color:rgba(255,255,255,.7);font-size:13px}
#timecode-form{padding:12px;border-top:1px solid rgba(255,255,255,.04);display:none}
#timecode-form.visible{display:block}
#timecode-form input{width:100%;margin-bottom:8px;padding:8px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);border-radius:4px;color:#fff;font-size:13px}
#timecode-form input::placeholder{color:rgba(255,255,255,.6)}
#timecode-form-buttons{display:flex;gap:8px;justify-content:flex-end}
#timecode-form-buttons button{padding:6px 12px;border:none;border-radius:4px;cursor:pointer;font-size:12px;transition:background-color .2s}
#timecode-form-cancel{background:rgba(255,255,255,.2);color:#fff}
#timecode-form-cancel:hover{background:rgba(255,255,255,.3)}
#timecode-form-save{background:#ff4444;color:#fff}
#timecode-form-save:hover{background:#ff6666}
#timecode-actions{padding:10px;border-top:1px solid rgba(255,255,255,.04);display:flex;gap:8px;background:linear-gradient(180deg,transparent,rgba(0,0,0,0.03))}
#timecode-actions button{padding:8px 12px;border:none;border-radius:8px;cursor:pointer;font-size:13px;transition:background .18s;color:inherit;background:rgba(255,255,255,0.02)}
#timecode-actions button:hover{background:rgba(255,255,255,0.04)}
#timecode-track-toggle.active{background:linear-gradient(90deg,#ff6b6b,#ff4444);color:#fff}
`;
YouTubeUtils.StyleManager.add('timecode-panel-styles', styles);
};
const createTimecodePanel = () => {
if (state.dom.panel) return state.dom.panel;
document.querySelectorAll('#timecode-panel').forEach(p => p.remove());
const panel = document.createElement('div');
panel.id = 'timecode-panel';
panel.className = config.enabled ? '' : 'hidden';
if (config.autoTrackPlayback) panel.classList.add('auto-tracking');
panel.innerHTML = `
${t('timecodes')}
${t('noTimecodesFound')}
${t('clickToAdd')}
${timeStr}
${label}
${
isEditable
? `
${t('keyboardShortcuts')}
${Object.entries(config.shortcuts)
.map(
([action, shortcut]) =>
`
`;
panel.querySelector('.help-close').onclick = () => helpPanel.hide();
panel.querySelector('.reset-all-shortcuts').onclick = () => {
if (confirm(t('resetAllConfirm'))) {
config.shortcuts = utils.getDefaultShortcuts();
utils.saveSettings();
feedback.show(t('shortcutsReset'));
render();
}
};
panel.querySelectorAll('kbd[data-action]:not(.non-editable)').forEach(kbd => {
kbd.onclick = () =>
editShortcut(kbd.dataset.action, config.shortcuts[kbd.dataset.action].key);
});
};
render();
document.body.appendChild(panel);
return panel;
};
return {
show: () => {
const p = create();
p.classList.add('visible');
state.helpVisible = true;
p.focus();
},
hide: () => {
if (panel) {
panel.classList.remove('visible');
state.helpVisible = false;
}
},
toggle: () => (state.helpVisible ? helpPanel.hide() : helpPanel.show()),
refresh: () => {
if (panel) {
panel.remove();
panel = null;
}
},
};
})();
const editShortcut = (actionKey, currentKey) => {
const dialog = document.createElement('div');
dialog.className = 'glass-modal shortcut-edit-dialog';
dialog.setAttribute('role', 'dialog');
dialog.setAttribute('aria-modal', 'true');
dialog.innerHTML = `
${shortcut.key === ' ' ? 'Space' : shortcut.key}
${shortcut.description}
`
)
.join('')}
${t('editShortcut')}: ${config.shortcuts[actionKey].description}
${t('pressAnyKey')}
${t('current')}: ${currentKey === ' ' ? 'Space' : currentKey}
${t(labelKey)}
${formatNumber(value)}
${(value || 0).toLocaleString()}
${showValue ? `
${displayVal}
` : ''}
${extraCards}
${leftHtml}${gridHtml}
`;
}
function renderPageFallback(container, pageStats, id) {
const cards = buildStatCards(pageStats);
const gridHtml = `${cards.join('')}
`;
const title = (pageStats && pageStats.title) || document.title || '';
const titleHtml = title ? `${title}
` : '';
const thumbUrl = getThumbnailUrl(id, pageStats);
const extras = getVideoExtras(null, pageStats, id);
if (thumbUrl) {
container.innerHTML = buildThumbnailLayout(titleHtml, thumbUrl, gridHtml, extras);
} else {
container.innerHTML = `${titleHtml}${gridHtml}`;
}
}
function formatNumber(num) {
if (!num || isNaN(num)) return '0';
const absNum = Math.abs(num);
if (absNum >= 1e9) {
return `${(num / 1e9).toFixed(1)}B`;
}
if (absNum >= 1e6) {
return `${(num / 1e6).toFixed(1)}M`;
}
if (absNum >= 1e3) {
return `${(num / 1e3).toFixed(1)}K`;
}
return num.toLocaleString();
}
function makeStatsCard(labelKey, value, exact, iconClass, iconSvg) {
const display = value == null ? t('unknown') : formatNumber(value);
const exactText = exact !== null && exact !== undefined ? exact.toLocaleString() : '—';
return `
${t(labelKey)}
${display}
${exactText}
${t('loadingStats')}
`; return loader; } function createStatsModalStructure(overlay) { const container = document.createElement('div'); container.className = 'stats-modal-container'; const content = document.createElement('div'); content.className = 'stats-modal-content'; const body = document.createElement('div'); body.className = 'stats-modal-body'; body.appendChild(createLoadingSpinner()); content.appendChild(body); const wrapper = document.createElement('div'); wrapper.className = 'thumbnail-modal-wrapper'; const actionsDiv = document.createElement('div'); actionsDiv.className = 'thumbnail-modal-actions'; actionsDiv.appendChild(createStatsModalCloseButton(overlay)); wrapper.appendChild(content); wrapper.appendChild(actionsDiv); container.appendChild(wrapper); return { body, container }; } function setupModalEventHandlers(overlay) { overlay.addEventListener('click', ({ target }) => { if (target === overlay) overlay.remove(); }); function escHandler(e) { if (e.key === 'Escape') { overlay.remove(); window.removeEventListener('keydown', escHandler, true); } } window.addEventListener('keydown', escHandler, true); } function renderErrorMessage(body, result) { const statusText = result?.status ? ` (${result.status})` : ''; const endpointHint = result?.url ? `${result.url}
`
: '';
body.innerHTML = `
${t('failedToLoadStats')}${statusText}
${endpointHint}${t('monetization')}
${extras.monetization}
${t('country')}
${countryCode}
${t('duration')}
${extras.duration}
${title}
` : '';
const defs = getVideoStatDefinitions(fields);
const parts = defs.map(d => makeStatsCard(d.label, d.value, d.exact, d.iconClass, d.iconSvg));
const liveViewerCard = createLiveViewerCard(liveViewer);
if (liveViewerCard) parts.push(liveViewerCard);
const gridHtml = `${parts.join('')}
`;
if (thumbUrl) {
const extras = getVideoExtras(stats, null);
const metaCardsHtml = buildMetaCardsHtml(stats, extras);
const metaExtrasHtml = metaCardsHtml
? `${metaCardsHtml}
`
: '';
const leftHtml = `${leftHtml}${gridHtml}
`;
} else {
container.innerHTML = `${titleHtml}${gridHtml}`;
}
}
function displayChannelStats(container, stats) {
const { liveSubscriber, liveViews, liveVideos } = stats;
container.innerHTML = `
${t('subscribers')}
${formatNumber(liveSubscriber)}
${(liveSubscriber || 0).toLocaleString()}
${t('totalViews')}
${formatNumber(liveViews)}
${(liveViews || 0).toLocaleString()}
${t('totalVideos')}
${formatNumber(liveVideos)}
${(liveVideos || 0).toLocaleString()}
${t('statisticsButtonDescription')}
${t('channelStatsDescription')}
${t('bulkDeleteDescription')}
${t('updateAvailableTitle')}
${t('version')} ${updateDetails.version} • ${updateDetails.description || t('newFeatures')}
${t('enhancedExperience')}
${t('currentVersion')}
${UPDATE_CONFIG.currentVersion}
${t('lastChecked')}: ${lastCheckTime}
${
updateState.lastVersion && updateState.lastVersion !== UPDATE_CONFIG.currentVersion
? `
${t('latestAvailable')}: ${updateState.lastVersion}` : '' }
${t('latestAvailable')}: ${updateState.lastVersion}` : '' }
${t('updateAvailable')}
${t('upToDate')}
`
}