// ==UserScript== // @name YouTube Playlist Organizer // @description Organize and categorize your YouTube playlists with custom tags, search, and filtering // @version 1.0.1 // @match https://*.youtube.com/* // @icon https://www.youtube.com/s/desktop/bbe055b3/img/favicon_32x32.png // ==/UserScript== (function() { 'use strict'; console.log('YouTube Playlist Organizer initialized'); // Utility function to debounce function debounce(func, wait) { let timeout; return function executedFunction(...args) { const later = () => { clearTimeout(timeout); func(...args); }; clearTimeout(timeout); timeout = setTimeout(later, wait); }; } // Main initialization function async function init() { console.log('Starting YouTube Playlist Organizer...'); // Wait for the page to be ready if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', setupOrganizer); } else { setupOrganizer(); } } async function setupOrganizer() { // Check if we're on a playlist page const isPlaylistPage = window.location.href.includes('/playlist?list='); if (!isPlaylistPage) { console.log('Not on a playlist page, waiting for navigation...'); observeNavigation(); return; } console.log('On playlist page, setting up organizer...'); // Wait for playlist content to load await waitForElement('ytd-playlist-video-list-renderer'); // Create the organizer UI createOrganizerUI(); } function waitForElement(selector, timeout = 10000) { return new Promise((resolve, reject) => { if (document.querySelector(selector)) { return resolve(document.querySelector(selector)); } const observer = new MutationObserver((mutations) => { if (document.querySelector(selector)) { observer.disconnect(); resolve(document.querySelector(selector)); } }); observer.observe(document.body, { childList: true, subtree: true }); setTimeout(() => { observer.disconnect(); reject(new Error(`Element ${selector} not found within ${timeout}ms`)); }, timeout); }); } function observeNavigation() { // Watch for URL changes (YouTube is a SPA) let lastUrl = location.href; new MutationObserver(() => { const url = location.href; if (url !== lastUrl) { lastUrl = url; console.log('URL changed to:', url); setupOrganizer(); } }).observe(document, { subtree: true, childList: true }); } async function createOrganizerUI() { // Check if organizer already exists if (document.getElementById('yt-playlist-organizer')) { console.log('Organizer already exists'); return; } // Find the playlist header const playlistHeader = document.querySelector('ytd-playlist-header-renderer'); if (!playlistHeader) { console.log('Playlist header not found'); return; } // Create organizer container const organizerContainer = document.createElement('div'); organizerContainer.id = 'yt-playlist-organizer'; organizerContainer.style.cssText = ` background: #0f0f0f; border: 1px solid #3f3f3f; border-radius: 12px; padding: 20px; margin: 20px 0; box-shadow: 0 4px 12px rgba(0,0,0,0.3); `; // Create header const header = document.createElement('div'); header.style.cssText = ` display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; `; header.innerHTML = `

📋 Playlist Organizer

`; // Create content area const contentArea = document.createElement('div'); contentArea.id = 'organizer-content'; contentArea.style.cssText = 'display: block;'; // Create search and filter section const searchSection = document.createElement('div'); searchSection.style.cssText = ` display: flex; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; `; searchSection.innerHTML = ` `; // Create category management section const categorySection = document.createElement('div'); categorySection.style.cssText = ` background: #1a1a1a; border-radius: 8px; padding: 16px; margin-bottom: 16px; `; categorySection.innerHTML = `

`; // Create stats section const statsSection = document.createElement('div'); statsSection.id = 'organizer-stats'; statsSection.style.cssText = ` display: flex; gap: 16px; padding: 12px; background: #1a1a1a; border-radius: 8px; margin-bottom: 16px; flex-wrap: wrap; `; statsSection.innerHTML = `

Total Videos

Categorized

Categories

`; // Create action buttons section const actionsSection = document.createElement('div'); actionsSection.style.cssText = ` display: flex; gap: 8px; flex-wrap: wrap; `; actionsSection.innerHTML = ` `; // Assemble the UI contentArea.appendChild(searchSection); contentArea.appendChild(categorySection); contentArea.appendChild(statsSection); contentArea.appendChild(actionsSection); organizerContainer.appendChild(header); organizerContainer.appendChild(contentArea); // Insert after playlist header playlistHeader.parentNode.insertBefore(organizerContainer, playlistHeader.nextSibling); // Initialize functionality await initializeOrganizer(); } async function initializeOrganizer() { console.log('Initializing organizer functionality...'); // Load saved data const categories = await GM.getValue('yt_organizer_categories', []); const videoCategories = await GM.getValue('yt_organizer_video_categories', {}); // Populate categories updateCategoriesList(categories); updateCategoryFilter(categories); // Add event listeners setupEventListeners(categories, videoCategories); // Enhance video items enhanceVideoItems(categories, videoCategories); // Update stats updateStats(categories, videoCategories); // Observe for new videos observePlaylistChanges(categories, videoCategories); } function updateCategoriesList(categories) { const categoriesList = document.getElementById('categories-list'); if (!categoriesList) return; categoriesList.innerHTML = ''; if (categories.length === 0) { categoriesList.innerHTML = '

No categories yet. Add one above!

'; return; } categories.forEach((category, index) => { const categoryTag = document.createElement('div'); categoryTag.style.cssText = ` background: ${category.color || '#3ea6ff'}; color: #fff; padding: 6px 12px; border-radius: 16px; font-size: 12px; font-weight: 500; display: flex; align-items: center; gap: 6px; `; categoryTag.innerHTML = ` ${category.name} `; categoriesList.appendChild(categoryTag); }); } function updateCategoryFilter(categories) { const categoryFilter = document.getElementById('category-filter'); if (!categoryFilter) return; // Keep "All Categories" option categoryFilter.innerHTML = ''; categories.forEach((category, index) => { const option = document.createElement('option'); option.value = index; option.textContent = category.name; categoryFilter.appendChild(option); }); } function setupEventListeners(categories, videoCategories) { // Toggle organizer const toggleBtn = document.getElementById('toggle-organizer'); const content = document.getElementById('organizer-content'); if (toggleBtn && content) { toggleBtn.addEventListener('click', () => { const isVisible = content.style.display !== 'none'; content.style.display = isVisible ? 'none' : 'block'; toggleBtn.textContent = isVisible ? 'Expand' : 'Collapse'; }); } // Add category const addCategoryBtn = document.getElementById('add-category'); const newCategoryInput = document.getElementById('new-category'); if (addCategoryBtn && newCategoryInput) { addCategoryBtn.addEventListener('click', async () => { const categoryName = newCategoryInput.value.trim(); if (!categoryName) return; const colors = ['#3ea6ff', '#f1c40f', '#e74c3c', '#2ecc71', '#9b59b6', '#e67e22', '#1abc9c', '#34495e']; const newCategory = { name: categoryName, color: colors[Math.floor(Math.random() * colors.length)] }; categories.push(newCategory); await GM.setValue('yt_organizer_categories', categories); updateCategoriesList(categories); updateCategoryFilter(categories); newCategoryInput.value = ''; // Re-enhance videos with new category enhanceVideoItems(categories, videoCategories); updateStats(categories, videoCategories); }); newCategoryInput.addEventListener('keypress', (e) => { if (e.key === 'Enter') { addCategoryBtn.click(); } }); } // Delete category document.addEventListener('click', async (e) => { if (e.target.classList.contains('delete-category')) { const index = parseInt(e.target.dataset.index); if (confirm(`Delete category "${categories[index].name}"?`)) { categories.splice(index, 1); await GM.setValue('yt_organizer_categories', categories); updateCategoriesList(categories); updateCategoryFilter(categories); enhanceVideoItems(categories, videoCategories); updateStats(categories, videoCategories); } } }); // Search videos const searchInput = document.getElementById('video-search'); if (searchInput) { searchInput.addEventListener('input', debounce((e) => { filterVideos(e.target.value, categories, videoCategories); }, 300)); } // Filter by category const categoryFilter = document.getElementById('category-filter'); if (categoryFilter) { categoryFilter.addEventListener('change', (e) => { filterByCategory(e.target.value, categories, videoCategories); }); } // Sort videos const sortSelect = document.getElementById('sort-videos'); if (sortSelect) { sortSelect.addEventListener('change', (e) => { sortVideos(e.target.value); }); } // Export data const exportBtn = document.getElementById('export-data'); if (exportBtn) { exportBtn.addEventListener('click', async () => { const data = { categories: await GM.getValue('yt_organizer_categories', []), videoCategories: await GM.getValue('yt_organizer_video_categories', {}) }; const blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' }); const url = URL.createObjectURL(blob); const a = document.createElement('a'); a.href = url; a.download = 'youtube-organizer-data.json'; a.click(); URL.revokeObjectURL(url); }); } // Import data const importBtn = document.getElementById('import-data'); if (importBtn) { importBtn.addEventListener('click', () => { const input = document.createElement('input'); input.type = 'file'; input.accept = 'application/json'; input.onchange = async (e) => { const file = e.target.files[0]; const text = await file.text(); const data = JSON.parse(text); await GM.setValue('yt_organizer_categories', data.categories || []); await GM.setValue('yt_organizer_video_categories', data.videoCategories || {}); location.reload(); }; input.click(); }); } // Clear all const clearBtn = document.getElementById('clear-all'); if (clearBtn) { clearBtn.addEventListener('click', async () => { if (confirm('Clear all categories and data? This cannot be undone.')) { await GM.setValue('yt_organizer_categories', []); await GM.setValue('yt_organizer_video_categories', {}); location.reload(); } }); } } async function enhanceVideoItems(categories, videoCategories) { const videoItems = document.querySelectorAll('ytd-playlist-video-renderer'); console.log(`Found ${videoItems.length} video items to enhance`); videoItems.forEach((videoItem) => { // Skip if already enhanced if (videoItem.querySelector('.organizer-controls')) { return; } const videoId = extractVideoId(videoItem); if (!videoId) return; // Create controls container const controlsContainer = document.createElement('div'); controlsContainer.className = 'organizer-controls'; controlsContainer.style.cssText = ` display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; align-items: center; `; // Add category selector const categorySelect = document.createElement('select'); categorySelect.style.cssText = ` background: #272727; border: 1px solid #3f3f3f; color: #fff; padding: 4px 8px; border-radius: 4px; font-size: 12px; cursor: pointer; `; categorySelect.innerHTML = ''; categories.forEach((category, index) => { const option = document.createElement('option'); option.value = index; option.textContent = category.name; categorySelect.appendChild(option); }); categorySelect.addEventListener('change', async (e) => { const categoryIndex = e.target.value; if (categoryIndex === '') return; if (!videoCategories[videoId]) { videoCategories[videoId] = []; } if (!videoCategories[videoId].includes(parseInt(categoryIndex))) { videoCategories[videoId].push(parseInt(categoryIndex)); await GM.setValue('yt_organizer_video_categories', videoCategories); // Update display updateVideoTags(videoItem, videoId, categories, videoCategories); updateStats(categories, videoCategories); } e.target.value = ''; }); // Create tags container const tagsContainer = document.createElement('div'); tagsContainer.className = 'video-tags'; tagsContainer.style.cssText = ` display: flex; gap: 4px; flex-wrap: wrap; `; controlsContainer.appendChild(categorySelect); controlsContainer.appendChild(tagsContainer); // Insert controls const metadataLine = videoItem.querySelector('#metadata-line'); if (metadataLine) { metadataLine.appendChild(controlsContainer); } // Update tags updateVideoTags(videoItem, videoId, categories, videoCategories); }); } function updateVideoTags(videoItem, videoId, categories, videoCategories) { const tagsContainer = videoItem.querySelector('.video-tags'); if (!tagsContainer) return; tagsContainer.innerHTML = ''; const videoCats = videoCategories[videoId] || []; videoCats.forEach((catIndex) => { const category = categories[catIndex]; if (!category) return; const tag = document.createElement('div'); tag.style.cssText = ` background: ${category.color}; color: #fff; padding: 3px 8px; border-radius: 10px; font-size: 11px; font-weight: 500; display: flex; align-items: center; gap: 4px; `; tag.innerHTML = ` ${category.name} `; tagsContainer.appendChild(tag); }); // Add remove tag listeners tagsContainer.querySelectorAll('.remove-tag').forEach(btn => { btn.addEventListener('click', async (e) => { e.stopPropagation(); const videoId = btn.dataset.videoId; const catIndex = parseInt(btn.dataset.categoryIndex); if (videoCategories[videoId]) { videoCategories[videoId] = videoCategories[videoId].filter(c => c !== catIndex); if (videoCategories[videoId].length === 0) { delete videoCategories[videoId]; } await GM.setValue('yt_organizer_video_categories', videoCategories); updateVideoTags(videoItem, videoId, categories, videoCategories); updateStats(categories, videoCategories); } }); }); } function extractVideoId(videoItem) { const link = videoItem.querySelector('a#thumbnail'); if (!link) return null; const href = link.getAttribute('href'); const match = href.match(/[?&]v=([^&]+)/); return match ? match[1] : null; } function filterVideos(searchTerm, categories, videoCategories) { const videoItems = document.querySelectorAll('ytd-playlist-video-renderer'); const term = searchTerm.toLowerCase(); videoItems.forEach((videoItem) => { const title = videoItem.querySelector('#video-title')?.textContent?.toLowerCase() || ''; const channel = videoItem.querySelector('#channel-name')?.textContent?.toLowerCase() || ''; const matches = title.includes(term) || channel.includes(term); videoItem.style.display = matches ? '' : 'none'; }); } function filterByCategory(categoryIndex, categories, videoCategories) { const videoItems = document.querySelectorAll('ytd-playlist-video-renderer'); if (categoryIndex === 'all') { videoItems.forEach(item => item.style.display = ''); return; } const catIndex = parseInt(categoryIndex); videoItems.forEach((videoItem) => { const videoId = extractVideoId(videoItem); const videoCats = videoCategories[videoId] || []; const hasCategory = videoCats.includes(catIndex); videoItem.style.display = hasCategory ? '' : 'none'; }); } function sortVideos(sortType) { const container = document.querySelector('ytd-playlist-video-list-renderer #contents'); if (!container) return; const videoItems = Array.from(container.querySelectorAll('ytd-playlist-video-renderer')); videoItems.sort((a, b) => { switch (sortType) { case 'title-asc': return getVideoTitle(a).localeCompare(getVideoTitle(b)); case 'title-desc': return getVideoTitle(b).localeCompare(getVideoTitle(a)); case 'duration-asc': return getVideoDuration(a) - getVideoDuration(b); case 'duration-desc': return getVideoDuration(b) - getVideoDuration(a); default: return 0; } }); videoItems.forEach(item => container.appendChild(item)); } function getVideoTitle(videoItem) { return videoItem.querySelector('#video-title')?.textContent?.trim() || ''; } function getVideoDuration(videoItem) { const durationText = videoItem.querySelector('.ytd-thumbnail-overlay-time-status-renderer')?.textContent?.trim() || '0:00'; const parts = durationText.split(':').map(Number); if (parts.length === 2) return parts[0] * 60 + parts[1]; if (parts.length === 3) return parts[0] * 3600 + parts[1] * 60 + parts[2]; return 0; } async function updateStats(categories, videoCategories) { const totalVideos = document.querySelectorAll('ytd-playlist-video-renderer').length; const categorizedVideos = Object.keys(videoCategories).length; const totalCategories = categories.length; const totalEl = document.getElementById('total-videos'); const categorizedEl = document.getElementById('categorized-videos'); const categoriesEl = document.getElementById('total-categories'); if (totalEl) totalEl.textContent = totalVideos; if (categorizedEl) categorizedEl.textContent = categorizedVideos; if (categoriesEl) categoriesEl.textContent = totalCategories; } function observePlaylistChanges(categories, videoCategories) { const container = document.querySelector('ytd-playlist-video-list-renderer #contents'); if (!container) return; const observer = new MutationObserver(debounce(() => { console.log('Playlist changed, re-enhancing videos...'); enhanceVideoItems(categories, videoCategories); updateStats(categories, videoCategories); }, 1000)); observer.observe(container, { childList: true, subtree: true }); } // Start the extension init(); })();

YouTube Playlist Organizer

About