|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>yt-dlp Command Templates Wiki</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<script> |
|
|
tailwind.config = { |
|
|
theme: { |
|
|
extend: { |
|
|
colors: { |
|
|
primary: '#0f172a', |
|
|
secondary: '#1e293b', |
|
|
accent: '#10b981', |
|
|
'accent-dark': '#059669', |
|
|
'gray-custom': '#64748b', |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
</script> |
|
|
<style> |
|
|
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); |
|
|
|
|
|
* { |
|
|
font-family: 'Inter', sans-serif; |
|
|
} |
|
|
|
|
|
.command-box pre { |
|
|
white-space: pre-wrap; |
|
|
word-break: break-word; |
|
|
} |
|
|
|
|
|
.sidebar-active { |
|
|
transform: translateX(0); |
|
|
} |
|
|
|
|
|
@media (max-width: 768px) { |
|
|
.floating-sidebar { |
|
|
transform: translateX(-100%); |
|
|
} |
|
|
} |
|
|
|
|
|
.scrollbar-thin::-webkit-scrollbar { |
|
|
width: 6px; |
|
|
} |
|
|
|
|
|
.scrollbar-thin::-webkit-scrollbar-track { |
|
|
background: #1e293b; |
|
|
} |
|
|
|
|
|
.scrollbar-thin::-webkit-scrollbar-thumb { |
|
|
background: #10b981; |
|
|
border-radius: 3px; |
|
|
} |
|
|
|
|
|
.scrollbar-thin::-webkit-scrollbar-thumb:hover { |
|
|
background: #059669; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900 text-slate-100 min-h-screen"> |
|
|
|
|
|
|
|
|
<button id="mobileMenuBtn" class="md:hidden fixed top-4 left-4 z-50 bg-accent hover:bg-accent-dark text-white p-3 rounded-lg shadow-lg transition-all"> |
|
|
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"> |
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/> |
|
|
</svg> |
|
|
</button> |
|
|
|
|
|
|
|
|
<aside id="sidebar" class="floating-sidebar fixed left-0 top-0 h-full w-64 bg-secondary border-r border-slate-700 shadow-2xl z-40 overflow-y-auto scrollbar-thin transition-transform duration-300 md:translate-x-0"> |
|
|
<div class="p-6"> |
|
|
<div class="mb-8"> |
|
|
<h2 class="text-xl font-bold text-white mb-1">yt-dlp Wiki</h2> |
|
|
<p class="text-sm text-gray-custom">Command Templates</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="mb-6"> |
|
|
<div class="relative"> |
|
|
<input |
|
|
type="text" |
|
|
id="searchBox" |
|
|
placeholder="Search commands..." |
|
|
class="w-full bg-primary text-slate-100 placeholder-gray-custom border border-slate-700 rounded-lg px-4 py-2.5 pl-10 focus:outline-none focus:ring-2 focus:ring-accent focus:border-transparent transition-all text-sm" |
|
|
> |
|
|
<svg class="w-5 h-5 absolute left-3 top-3 text-gray-custom" fill="none" stroke="currentColor" viewBox="0 0 24 24"> |
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/> |
|
|
</svg> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<nav class="space-y-1"> |
|
|
<a href="#channels" class="nav-link flex items-center px-3 py-2.5 text-sm font-medium text-slate-300 hover:text-white hover:bg-primary rounded-lg transition-all group"> |
|
|
<svg class="w-5 h-5 mr-3 text-gray-custom group-hover:text-accent transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24"> |
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"/> |
|
|
</svg> |
|
|
Channels |
|
|
</a> |
|
|
<a href="#playlists" class="nav-link flex items-center px-3 py-2.5 text-sm font-medium text-slate-300 hover:text-white hover:bg-primary rounded-lg transition-all group"> |
|
|
<svg class="w-5 h-5 mr-3 text-gray-custom group-hover:text-accent transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24"> |
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/> |
|
|
</svg> |
|
|
Playlists |
|
|
</a> |
|
|
<a href="#videos" class="nav-link flex items-center px-3 py-2.5 text-sm font-medium text-slate-300 hover:text-white hover:bg-primary rounded-lg transition-all group"> |
|
|
<svg class="w-5 h-5 mr-3 text-gray-custom group-hover:text-accent transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24"> |
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z"/> |
|
|
</svg> |
|
|
Videos |
|
|
</a> |
|
|
<a href="#shorts" class="nav-link flex items-center px-3 py-2.5 text-sm font-medium text-slate-300 hover:text-white hover:bg-primary rounded-lg transition-all group"> |
|
|
<svg class="w-5 h-5 mr-3 text-gray-custom group-hover:text-accent transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24"> |
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 18h.01M8 21h8a2 2 0 002-2V5a2 2 0 00-2-2H8a2 2 0 00-2 2v14a2 2 0 002 2z"/> |
|
|
</svg> |
|
|
Shorts |
|
|
</a> |
|
|
<a href="#lives" class="nav-link flex items-center px-3 py-2.5 text-sm font-medium text-slate-300 hover:text-white hover:bg-primary rounded-lg transition-all group"> |
|
|
<svg class="w-5 h-5 mr-3 text-gray-custom group-hover:text-accent transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24"> |
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5.636 18.364a9 9 0 010-12.728m12.728 0a9 9 0 010 12.728m-9.9-2.829a5 5 0 010-7.07m7.072 0a5 5 0 010 7.07M13 12a1 1 0 11-2 0 1 1 0 012 0z"/> |
|
|
</svg> |
|
|
Lives |
|
|
</a> |
|
|
<a href="#utility" class="nav-link flex items-center px-3 py-2.5 text-sm font-medium text-slate-300 hover:text-white hover:bg-primary rounded-lg transition-all group"> |
|
|
<svg class="w-5 h-5 mr-3 text-gray-custom group-hover:text-accent transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24"> |
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/> |
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/> |
|
|
</svg> |
|
|
Utility |
|
|
</a> |
|
|
</nav> |
|
|
|
|
|
|
|
|
<div class="mt-8 p-4 bg-primary rounded-lg border border-slate-700"> |
|
|
<p class="text-xs text-gray-custom mb-2">Total Commands</p> |
|
|
<p class="text-2xl font-bold text-accent">59</p> |
|
|
</div> |
|
|
</div> |
|
|
</aside> |
|
|
|
|
|
|
|
|
<main class="md:ml-64 min-h-screen"> |
|
|
|
|
|
<header class="bg-secondary border-b border-slate-700 sticky top-0 z-30 backdrop-blur-sm bg-opacity-95"> |
|
|
<div class="max-w-6xl mx-auto px-6 py-6"> |
|
|
<div class="flex items-center justify-between"> |
|
|
<div> |
|
|
<h1 class="text-3xl font-bold text-white mb-2">yt-dlp Command Templates</h1> |
|
|
<p class="text-gray-custom">Comprehensive collection of download commands with one-click copy</p> |
|
|
</div> |
|
|
<button id="toggleConfig" class="px-4 py-2 bg-accent hover:bg-accent-dark text-white rounded-lg transition-all flex items-center gap-2"> |
|
|
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"> |
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4"/> |
|
|
</svg> |
|
|
Configure |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
|
|
|
<div id="configPanel" class="hidden fixed inset-0 bg-black bg-opacity-50 z-50 overflow-y-auto"> |
|
|
<div class="min-h-screen px-4 py-8 flex items-start justify-center"> |
|
|
<div class="bg-secondary rounded-xl border border-slate-700 max-w-4xl w-full shadow-2xl"> |
|
|
|
|
|
<div class="flex items-center justify-between p-6 border-b border-slate-700"> |
|
|
<div> |
|
|
<h2 class="text-2xl font-bold text-white">Command Configuration</h2> |
|
|
<p class="text-gray-custom mt-1">Customize parameters that will be applied to all commands</p> |
|
|
</div> |
|
|
<button id="closeConfig" class="text-gray-custom hover:text-white transition-colors"> |
|
|
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"> |
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/> |
|
|
</svg> |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="p-6 space-y-6"> |
|
|
|
|
|
<div> |
|
|
<label class="block text-sm font-medium text-white mb-2">Config File Path</label> |
|
|
<input type="text" id="configPath" |
|
|
value="/Users/bibbler/Downloads/_VIDEOS_/_Admin_/config_local/yt-channel-thumbs-v2.conf" |
|
|
class="w-full bg-primary text-slate-100 border border-slate-700 rounded-lg px-4 py-2.5 focus:outline-none focus:ring-2 focus:ring-accent focus:border-transparent transition-all"> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="grid md:grid-cols-2 gap-6"> |
|
|
<div> |
|
|
<label class="block text-sm font-medium text-white mb-2">Channel URL/Handle</label> |
|
|
<input type="text" id="channelUrl" |
|
|
value="https://www.youtube.com/@ChannelName" |
|
|
placeholder="@ChannelName or full URL" |
|
|
class="w-full bg-primary text-slate-100 border border-slate-700 rounded-lg px-4 py-2.5 focus:outline-none focus:ring-2 focus:ring-accent focus:border-transparent transition-all"> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<label class="block text-sm font-medium text-white mb-2">Playlist ID</label> |
|
|
<input type="text" id="playlistId" |
|
|
value="PLAYLIST_ID" |
|
|
placeholder="Enter playlist ID" |
|
|
class="w-full bg-primary text-slate-100 border border-slate-700 rounded-lg px-4 py-2.5 focus:outline-none focus:ring-2 focus:ring-accent focus:border-transparent transition-all"> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="grid md:grid-cols-3 gap-6"> |
|
|
<div> |
|
|
<label class="block text-sm font-medium text-white mb-2">Video ID</label> |
|
|
<input type="text" id="videoId" |
|
|
value="VIDEO_ID" |
|
|
placeholder="Enter video ID" |
|
|
class="w-full bg-primary text-slate-100 border border-slate-700 rounded-lg px-4 py-2.5 focus:outline-none focus:ring-2 focus:ring-accent focus:border-transparent transition-all"> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<label class="block text-sm font-medium text-white mb-2">Short ID</label> |
|
|
<input type="text" id="shortId" |
|
|
value="SHORT_ID" |
|
|
placeholder="Enter short ID" |
|
|
class="w-full bg-primary text-slate-100 border border-slate-700 rounded-lg px-4 py-2.5 focus:outline-none focus:ring-2 focus:ring-accent focus:border-transparent transition-all"> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<label class="block text-sm font-medium text-white mb-2">Live ID</label> |
|
|
<input type="text" id="liveId" |
|
|
value="LIVE_ID" |
|
|
placeholder="Enter live ID" |
|
|
class="w-full bg-primary text-slate-100 border border-slate-700 rounded-lg px-4 py-2.5 focus:outline-none focus:ring-2 focus:ring-accent focus:border-transparent transition-all"> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="grid md:grid-cols-2 gap-6"> |
|
|
<div> |
|
|
<label class="block text-sm font-medium text-white mb-2">Date After (YYYYMMDD)</label> |
|
|
<input type="text" id="dateAfter" |
|
|
value="20240101" |
|
|
placeholder="e.g., 20240101" |
|
|
class="w-full bg-primary text-slate-100 border border-slate-700 rounded-lg px-4 py-2.5 focus:outline-none focus:ring-2 focus:ring-accent focus:border-transparent transition-all"> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<label class="block text-sm font-medium text-white mb-2">Date Before (YYYYMMDD)</label> |
|
|
<input type="text" id="dateBefore" |
|
|
value="20241231" |
|
|
placeholder="e.g., 20241231" |
|
|
class="w-full bg-primary text-slate-100 border border-slate-700 rounded-lg px-4 py-2.5 focus:outline-none focus:ring-2 focus:ring-accent focus:border-transparent transition-all"> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="grid md:grid-cols-2 gap-6"> |
|
|
<div> |
|
|
<label class="block text-sm font-medium text-white mb-2">Playlist End (Max Videos)</label> |
|
|
<input type="number" id="playlistEnd" |
|
|
value="100" |
|
|
min="1" |
|
|
class="w-full bg-primary text-slate-100 border border-slate-700 rounded-lg px-4 py-2.5 focus:outline-none focus:ring-2 focus:ring-accent focus:border-transparent transition-all"> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<label class="block text-sm font-medium text-white mb-2">Output Base Path</label> |
|
|
<input type="text" id="outputPath" |
|
|
value="~/Downloads/_VIDEOS_/Youtube" |
|
|
class="w-full bg-primary text-slate-100 border border-slate-700 rounded-lg px-4 py-2.5 focus:outline-none focus:ring-2 focus:ring-accent focus:border-transparent transition-all"> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="flex items-center justify-between pt-4 border-t border-slate-700"> |
|
|
<button id="resetConfig" class="px-4 py-2 text-gray-custom hover:text-white transition-colors"> |
|
|
Reset to Defaults |
|
|
</button> |
|
|
<div class="flex gap-3"> |
|
|
<button id="cancelConfig" class="px-6 py-2 bg-slate-700 hover:bg-slate-600 text-white rounded-lg transition-all"> |
|
|
Cancel |
|
|
</button> |
|
|
<button id="applyConfig" class="px-6 py-2 bg-accent hover:bg-accent-dark text-white rounded-lg transition-all"> |
|
|
Apply Changes |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="max-w-6xl mx-auto px-6 py-8 space-y-8"> |
|
|
|
|
|
|
|
|
<section id="channels" class="scroll-mt-40"> |
|
|
<div class="sticky top-[104px] z-20 py-4 bg-gradient-to-r from-slate-800 to-slate-900 backdrop-blur-sm bg-opacity-95 -mx-6 px-6 border-b border-slate-700"> |
|
|
<div class="flex items-center justify-between"> |
|
|
<div class="flex items-center"> |
|
|
<div class="h-10 w-1 bg-accent rounded-full mr-4"></div> |
|
|
<h2 class="text-2xl font-bold text-white">Channels</h2> |
|
|
</div> |
|
|
<button onclick="toggleTOC('channels')" class="flex items-center gap-2 text-gray-custom hover:text-white transition-colors text-sm"> |
|
|
<span>Quick Jump</span> |
|
|
<svg id="channels-arrow" class="w-4 h-4 transform transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24"> |
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/> |
|
|
</svg> |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="channels-toc" class="hidden mt-4 pt-4 border-t border-slate-700"> |
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-4"> |
|
|
|
|
|
<div> |
|
|
<h4 class="text-xs font-semibold text-accent uppercase tracking-wider mb-2">Metadata & Info</h4> |
|
|
<div class="space-y-1"> |
|
|
<a href="#channels-1" class="block text-sm text-gray-custom hover:text-white transition-colors">1. Thumbnails Only</a> |
|
|
<a href="#channels-2" class="block text-sm text-gray-custom hover:text-white transition-colors">2. + Descriptions</a> |
|
|
<a href="#channels-3" class="block text-sm text-gray-custom hover:text-white transition-colors">3. + Metadata JSON</a> |
|
|
<a href="#channels-4" class="block text-sm text-gray-custom hover:text-white transition-colors">4. + Desc + JSON</a> |
|
|
<a href="#channels-5" class="block text-sm text-gray-custom hover:text-white transition-colors">5. + Subtitles</a> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div> |
|
|
<h4 class="text-xs font-semibold text-orange-500 uppercase tracking-wider mb-2">Audio Downloads</h4> |
|
|
<div class="space-y-1"> |
|
|
<a href="#channels-6" class="block text-sm text-gray-custom hover:text-white transition-colors">6. + Audio (Best)</a> |
|
|
<a href="#channels-7" class="block text-sm text-gray-custom hover:text-white transition-colors">7. + Audio (MP3)</a> |
|
|
<a href="#channels-8" class="block text-sm text-gray-custom hover:text-white transition-colors">8. + Audio (M4A)</a> |
|
|
<a href="#channels-9" class="block text-sm text-gray-custom hover:text-white transition-colors">9. + Audio (WebM)</a> |
|
|
<a href="#channels-10" class="block text-sm text-gray-custom hover:text-white transition-colors">10. + Audio (WAV)</a> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div> |
|
|
<h4 class="text-xs font-semibold text-blue-400 uppercase tracking-wider mb-2">Video Downloads</h4> |
|
|
<div class="space-y-1"> |
|
|
<a href="#channels-11" class="block text-sm text-gray-custom hover:text-white transition-colors">11. + Video (Best)</a> |
|
|
<a href="#channels-12" class="block text-sm text-gray-custom hover:text-white transition-colors">12. + Video (1080p)</a> |
|
|
<a href="#channels-13" class="block text-sm text-gray-custom hover:text-white transition-colors">13. + Video (720p)</a> |
|
|
<a href="#channels-14" class="block text-sm text-gray-custom hover:text-white transition-colors">14. + Video (480p)</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="space-y-6"> |
|
|
|
|
|
<div id="channels-1" class="command-group bg-secondary border border-slate-700 rounded-xl overflow-hidden hover:border-accent transition-all scroll-mt-48"> |
|
|
<div class="p-5 border-b border-slate-700"> |
|
|
<h3 class="text-lg font-semibold text-white">1. Thumbnails Only (100 most recent)</h3> |
|
|
</div> |
|
|
|
|
|
<div class="p-5 space-y-4"> |
|
|
|
|
|
<div class="command-box bg-primary border border-slate-700 rounded-lg overflow-hidden hover:border-accent transition-all"> |
|
|
<div class="flex items-center justify-between p-3 bg-gradient-to-r from-accent/10 to-transparent border-b border-slate-700"> |
|
|
<span class="text-xs font-semibold text-accent uppercase tracking-wider">With Config File</span> |
|
|
<button onclick="copyToClipboard(this)" class="copy-btn px-3 py-1.5 bg-accent hover:bg-accent-dark text-white text-xs font-medium rounded transition-all"> |
|
|
Copy |
|
|
</button> |
|
|
</div> |
|
|
<pre class="p-4 text-sm text-slate-300 overflow-x-auto">yt-dlp --config-location /Users/bibbler/Downloads/_VIDEOS_/_Admin_/config_local/yt-channel-thumbs-v2.conf "https://www.youtube.com/@ChannelName"</pre> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="command-box bg-primary border border-slate-700 rounded-lg overflow-hidden hover:border-orange-500 transition-all"> |
|
|
<div class="flex items-center justify-between p-3 bg-gradient-to-r from-orange-500/10 to-transparent border-b border-slate-700"> |
|
|
<span class="text-xs font-semibold text-orange-500 uppercase tracking-wider">Without Config File</span> |
|
|
<button onclick="copyToClipboard(this)" class="copy-btn px-3 py-1.5 bg-orange-500 hover:bg-orange-600 text-white text-xs font-medium rounded transition-all"> |
|
|
Copy |
|
|
</button> |
|
|
</div> |
|
|
<pre class="p-4 text-sm text-slate-300 overflow-x-auto">yt-dlp --write-thumbnail --skip-download --playlist-end 100 --output "~/Downloads/_VIDEOS_/Youtube/Thumbs/%(uploader)s/%(playlist_title)s/%(upload_date)s - %(id)s - %(title)s.%(ext)s" "https://www.youtube.com/@ChannelName"</pre> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<div id="loading" class="text-center py-8"> |
|
|
<div class="inline-block animate-spin rounded-full h-8 w-8 border-4 border-accent border-t-transparent"></div> |
|
|
<p class="mt-4 text-gray-custom">Loading remaining commands...</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<button id="backToTop" class="fixed bottom-6 right-6 bg-accent hover:bg-accent-dark text-white p-3 rounded-full shadow-lg transition-all opacity-0 pointer-events-none"> |
|
|
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"> |
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 10l7-7m0 0l7 7m-7-7v18"/> |
|
|
</svg> |
|
|
</button> |
|
|
</main> |
|
|
|
|
|
<script src="yt-dlp-commands-complete.js"></script> |
|
|
<script> |
|
|
|
|
|
function toggleTOC(sectionId) { |
|
|
const toc = document.getElementById(`${sectionId}-toc`); |
|
|
const arrow = document.getElementById(`${sectionId}-arrow`); |
|
|
|
|
|
if (toc.classList.contains('hidden')) { |
|
|
toc.classList.remove('hidden'); |
|
|
arrow.classList.add('rotate-180'); |
|
|
} else { |
|
|
toc.classList.add('hidden'); |
|
|
arrow.classList.remove('rotate-180'); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
let config = { |
|
|
configPath: '/Users/bibbler/Downloads/_VIDEOS_/_Admin_/config_local/yt-channel-thumbs-v2.conf', |
|
|
channelUrl: 'https://www.youtube.com/@ChannelName', |
|
|
playlistId: 'PLAYLIST_ID', |
|
|
videoId: 'VIDEO_ID', |
|
|
shortId: 'SHORT_ID', |
|
|
liveId: 'LIVE_ID', |
|
|
dateAfter: '20240101', |
|
|
dateBefore: '20241231', |
|
|
playlistEnd: '100', |
|
|
outputPath: '~/Downloads/_VIDEOS_/Youtube' |
|
|
}; |
|
|
|
|
|
const defaults = {...config}; |
|
|
|
|
|
|
|
|
function applySubstitutions(text) { |
|
|
return text |
|
|
.replace(/\/Users\/bibbler\/Downloads\/_VIDEOS_\/_Admin_\/config_local\/yt-channel-thumbs-v2\.conf/g, config.configPath) |
|
|
.replace(/https:\/\/www\.youtube\.com\/@ChannelName/g, config.channelUrl) |
|
|
.replace(/"@ChannelName"/g, `"${config.channelUrl}"`) |
|
|
.replace(/playlist\?list=PLAYLIST_ID/g, `playlist?list=${config.playlistId}`) |
|
|
.replace(/watch\?v=VIDEO_ID/g, `watch?v=${config.videoId}`) |
|
|
.replace(/shorts\/SHORT_ID/g, `shorts/${config.shortId}`) |
|
|
.replace(/watch\?v=LIVE_ID/g, `watch?v=${config.liveId}`) |
|
|
.replace(/--dateafter 20240101/g, `--dateafter ${config.dateAfter}`) |
|
|
.replace(/--datebefore 20241231/g, `--datebefore ${config.dateBefore}`) |
|
|
.replace(/--playlist-end 100/g, `--playlist-end ${config.playlistEnd}`) |
|
|
.replace(/~\/Downloads\/_VIDEOS_\/Youtube/g, config.outputPath); |
|
|
} |
|
|
|
|
|
|
|
|
function updateAllCommands() { |
|
|
document.querySelectorAll('.command-box pre').forEach(pre => { |
|
|
const original = pre.getAttribute('data-original') || pre.textContent; |
|
|
if (!pre.getAttribute('data-original')) { |
|
|
pre.setAttribute('data-original', original); |
|
|
} |
|
|
pre.textContent = applySubstitutions(original); |
|
|
}); |
|
|
} |
|
|
|
|
|
|
|
|
function copyToClipboard(button) { |
|
|
const commandBox = button.closest('.command-box'); |
|
|
const pre = commandBox.querySelector('pre'); |
|
|
const text = pre.textContent; |
|
|
|
|
|
navigator.clipboard.writeText(text).then(() => { |
|
|
const originalText = button.textContent; |
|
|
button.textContent = 'Copied!'; |
|
|
button.classList.add('bg-green-600'); |
|
|
setTimeout(() => { |
|
|
button.textContent = originalText; |
|
|
button.classList.remove('bg-green-600'); |
|
|
}, 2000); |
|
|
}).catch(err => { |
|
|
console.error('Failed to copy: ', err); |
|
|
}); |
|
|
} |
|
|
|
|
|
|
|
|
document.getElementById('toggleConfig').addEventListener('click', () => { |
|
|
document.getElementById('configPanel').classList.remove('hidden'); |
|
|
}); |
|
|
|
|
|
document.getElementById('closeConfig').addEventListener('click', () => { |
|
|
document.getElementById('configPanel').classList.add('hidden'); |
|
|
}); |
|
|
|
|
|
document.getElementById('cancelConfig').addEventListener('click', () => { |
|
|
document.getElementById('configPanel').classList.add('hidden'); |
|
|
}); |
|
|
|
|
|
document.getElementById('applyConfig').addEventListener('click', () => { |
|
|
|
|
|
config.configPath = document.getElementById('configPath').value; |
|
|
config.channelUrl = document.getElementById('channelUrl').value; |
|
|
config.playlistId = document.getElementById('playlistId').value; |
|
|
config.videoId = document.getElementById('videoId').value; |
|
|
config.shortId = document.getElementById('shortId').value; |
|
|
config.liveId = document.getElementById('liveId').value; |
|
|
config.dateAfter = document.getElementById('dateAfter').value; |
|
|
config.dateBefore = document.getElementById('dateBefore').value; |
|
|
config.playlistEnd = document.getElementById('playlistEnd').value; |
|
|
config.outputPath = document.getElementById('outputPath').value; |
|
|
|
|
|
|
|
|
updateAllCommands(); |
|
|
|
|
|
|
|
|
document.getElementById('configPanel').classList.add('hidden'); |
|
|
|
|
|
|
|
|
const button = document.getElementById('toggleConfig'); |
|
|
const originalHTML = button.innerHTML; |
|
|
button.innerHTML = '<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg> Applied!'; |
|
|
setTimeout(() => { |
|
|
button.innerHTML = originalHTML; |
|
|
}, 2000); |
|
|
}); |
|
|
|
|
|
document.getElementById('resetConfig').addEventListener('click', () => { |
|
|
|
|
|
document.getElementById('configPath').value = defaults.configPath; |
|
|
document.getElementById('channelUrl').value = defaults.channelUrl; |
|
|
document.getElementById('playlistId').value = defaults.playlistId; |
|
|
document.getElementById('videoId').value = defaults.videoId; |
|
|
document.getElementById('shortId').value = defaults.shortId; |
|
|
document.getElementById('liveId').value = defaults.liveId; |
|
|
document.getElementById('dateAfter').value = defaults.dateAfter; |
|
|
document.getElementById('dateBefore').value = defaults.dateBefore; |
|
|
document.getElementById('playlistEnd').value = defaults.playlistEnd; |
|
|
document.getElementById('outputPath').value = defaults.outputPath; |
|
|
}); |
|
|
|
|
|
|
|
|
document.getElementById('configPanel').addEventListener('click', (e) => { |
|
|
if (e.target.id === 'configPanel') { |
|
|
document.getElementById('configPanel').classList.add('hidden'); |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
const mobileMenuBtn = document.getElementById('mobileMenuBtn'); |
|
|
const sidebar = document.getElementById('sidebar'); |
|
|
|
|
|
mobileMenuBtn.addEventListener('click', () => { |
|
|
sidebar.classList.toggle('sidebar-active'); |
|
|
}); |
|
|
|
|
|
|
|
|
document.addEventListener('click', (e) => { |
|
|
if (window.innerWidth < 768) { |
|
|
if (!sidebar.contains(e.target) && !mobileMenuBtn.contains(e.target)) { |
|
|
sidebar.classList.remove('sidebar-active'); |
|
|
} |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
document.querySelectorAll('.nav-link').forEach(link => { |
|
|
link.addEventListener('click', () => { |
|
|
if (window.innerWidth < 768) { |
|
|
sidebar.classList.remove('sidebar-active'); |
|
|
} |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
document.getElementById('searchBox').addEventListener('input', function(e) { |
|
|
const searchTerm = e.target.value.toLowerCase(); |
|
|
const commandGroups = document.querySelectorAll('.command-group'); |
|
|
|
|
|
commandGroups.forEach(group => { |
|
|
const text = group.textContent.toLowerCase(); |
|
|
if (text.includes(searchTerm) || searchTerm === '') { |
|
|
group.style.display = 'block'; |
|
|
} else { |
|
|
group.style.display = 'none'; |
|
|
} |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
const backToTop = document.getElementById('backToTop'); |
|
|
|
|
|
window.addEventListener('scroll', () => { |
|
|
if (window.pageYOffset > 300) { |
|
|
backToTop.classList.remove('opacity-0', 'pointer-events-none'); |
|
|
backToTop.classList.add('opacity-100'); |
|
|
} else { |
|
|
backToTop.classList.add('opacity-0', 'pointer-events-none'); |
|
|
backToTop.classList.remove('opacity-100'); |
|
|
} |
|
|
}); |
|
|
|
|
|
backToTop.addEventListener('click', () => { |
|
|
window.scrollTo({ |
|
|
top: 0, |
|
|
behavior: 'smooth' |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
document.querySelectorAll('a[href^="#"]').forEach(anchor => { |
|
|
anchor.addEventListener('click', function (e) { |
|
|
e.preventDefault(); |
|
|
const target = document.querySelector(this.getAttribute('href')); |
|
|
if (target) { |
|
|
target.scrollIntoView({ |
|
|
behavior: 'smooth', |
|
|
block: 'start' |
|
|
}); |
|
|
} |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
function updateActiveNav() { |
|
|
const sections = document.querySelectorAll('section[id]'); |
|
|
const navLinks = document.querySelectorAll('.nav-link'); |
|
|
|
|
|
let currentSection = ''; |
|
|
|
|
|
sections.forEach(section => { |
|
|
const sectionTop = section.offsetTop; |
|
|
const sectionHeight = section.clientHeight; |
|
|
|
|
|
if (window.pageYOffset >= sectionTop - 200) { |
|
|
currentSection = section.getAttribute('id'); |
|
|
} |
|
|
}); |
|
|
|
|
|
navLinks.forEach(link => { |
|
|
link.classList.remove('bg-primary', 'text-white', 'border-l-4', 'border-accent'); |
|
|
const href = link.getAttribute('href').substring(1); |
|
|
|
|
|
if (href === currentSection) { |
|
|
link.classList.add('bg-primary', 'text-white', 'border-l-4', 'border-accent'); |
|
|
} |
|
|
}); |
|
|
} |
|
|
|
|
|
|
|
|
window.addEventListener('scroll', updateActiveNav); |
|
|
|
|
|
|
|
|
window.addEventListener('load', updateActiveNav); |
|
|
|
|
|
|
|
|
function generateCommandGroup(number, title, withConfigCmd, withoutConfigCmd, sectionId = '') { |
|
|
const commandId = sectionId ? `${sectionId}-${number}` : ''; |
|
|
return ` |
|
|
<div id="${commandId}" class="command-group bg-secondary border border-slate-700 rounded-xl overflow-hidden hover:border-accent transition-all scroll-mt-48"> |
|
|
<div class="p-5 border-b border-slate-700"> |
|
|
<h3 class="text-lg font-semibold text-white">${number}. ${title}</h3> |
|
|
</div> |
|
|
|
|
|
<div class="p-5 space-y-4"> |
|
|
<div class="command-box bg-primary border border-slate-700 rounded-lg overflow-hidden hover:border-accent transition-all"> |
|
|
<div class="flex items-center justify-between p-3 bg-gradient-to-r from-accent/10 to-transparent border-b border-slate-700"> |
|
|
<span class="text-xs font-semibold text-accent uppercase tracking-wider">With Config File</span> |
|
|
<button onclick="copyToClipboard(this)" class="copy-btn px-3 py-1.5 bg-accent hover:bg-accent-dark text-white text-xs font-medium rounded transition-all"> |
|
|
Copy |
|
|
</button> |
|
|
</div> |
|
|
<pre class="p-4 text-sm text-slate-300 overflow-x-auto">${withConfigCmd}</pre> |
|
|
</div> |
|
|
|
|
|
<div class="command-box bg-primary border border-slate-700 rounded-lg overflow-hidden hover:border-orange-500 transition-all"> |
|
|
<div class="flex items-center justify-between p-3 bg-gradient-to-r from-orange-500/10 to-transparent border-b border-slate-700"> |
|
|
<span class="text-xs font-semibold text-orange-500 uppercase tracking-wider">Without Config File</span> |
|
|
<button onclick="copyToClipboard(this)" class="copy-btn px-3 py-1.5 bg-orange-500 hover:bg-orange-600 text-white text-xs font-medium rounded transition-all"> |
|
|
Copy |
|
|
</button> |
|
|
</div> |
|
|
<pre class="p-4 text-sm text-slate-300 overflow-x-auto">${withoutConfigCmd}</pre> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
`; |
|
|
} |
|
|
|
|
|
|
|
|
const commands = { |
|
|
channels: [ |
|
|
{title: 'Thumbnails + Descriptions (100 most recent)', |
|
|
withConfig: 'yt-dlp --config-location /Users/bibbler/Downloads/_VIDEOS_/_Admin_/config_local/yt-channel-thumbs-v2.conf --write-description "https://www.youtube.com/@ChannelName"', |
|
|
withoutConfig: 'yt-dlp --write-thumbnail --write-description --skip-download --playlist-end 100 --output "~/Downloads/_VIDEOS_/Youtube/Thumbs/%(uploader)s/%(playlist_title)s/%(upload_date)s - %(id)s - %(title)s.%(ext)s" "https://www.youtube.com/@ChannelName"'}, |
|
|
|
|
|
{title: 'Thumbnails + Metadata JSON (100 most recent)', |
|
|
withConfig: 'yt-dlp --config-location /Users/bibbler/Downloads/_VIDEOS_/_Admin_/config_local/yt-channel-thumbs-v2.conf --write-info-json "https://www.youtube.com/@ChannelName"', |
|
|
withoutConfig: 'yt-dlp --write-thumbnail --write-info-json --skip-download --playlist-end 100 --output "~/Downloads/_VIDEOS_/Youtube/Thumbs/%(uploader)s/%(playlist_title)s/%(upload_date)s - %(id)s - %(title)s.%(ext)s" "https://www.youtube.com/@ChannelName"'}, |
|
|
|
|
|
{title: 'Thumbnails + Descriptions + Metadata JSON (100 most recent)', |
|
|
withConfig: 'yt-dlp --config-location /Users/bibbler/Downloads/_VIDEOS_/_Admin_/config_local/yt-channel-thumbs-v2.conf --write-description --write-info-json "https://www.youtube.com/@ChannelName"', |
|
|
withoutConfig: 'yt-dlp --write-thumbnail --write-description --write-info-json --skip-download --playlist-end 100 --output "~/Downloads/_VIDEOS_/Youtube/Thumbs/%(uploader)s/%(playlist_title)s/%(upload_date)s - %(id)s - %(title)s.%(ext)s" "https://www.youtube.com/@ChannelName"'}, |
|
|
|
|
|
{title: 'Thumbnails + Descriptions + Metadata JSON + Subtitles (100 most recent)', |
|
|
withConfig: 'yt-dlp --config-location /Users/bibbler/Downloads/_VIDEOS_/_Admin_/config_local/yt-channel-thumbs-v2.conf --write-description --write-info-json --write-subs --write-auto-subs --sub-langs "en" "https://www.youtube.com/@ChannelName"', |
|
|
withoutConfig: 'yt-dlp --write-thumbnail --write-description --write-info-json --write-subs --write-auto-subs --sub-langs "en" --skip-download --playlist-end 100 --output "~/Downloads/_VIDEOS_/Youtube/Thumbs/%(uploader)s/%(playlist_title)s/%(upload_date)s - %(id)s - %(title)s.%(ext)s" "https://www.youtube.com/@ChannelName"'}, |
|
|
|
|
|
{title: 'Thumbnails + Descriptions + Metadata JSON + Audio (Best) (100 most recent)', |
|
|
withConfig: 'yt-dlp --config-location /Users/bibbler/Downloads/_VIDEOS_/_Admin_/config_local/yt-channel-thumbs-v2.conf --write-description --write-info-json --extract-audio --audio-format best --playlist-end 100 "https://www.youtube.com/@ChannelName"', |
|
|
withoutConfig: 'yt-dlp --write-thumbnail --write-description --write-info-json --extract-audio --audio-format best --playlist-end 100 --output "~/Downloads/_VIDEOS_/Youtube/Audio/%(uploader)s/%(playlist_title)s/%(upload_date)s - %(id)s - %(title)s.%(ext)s" "https://www.youtube.com/@ChannelName"'}, |
|
|
|
|
|
{title: 'Thumbnails + Descriptions + Metadata JSON + Audio (MP3) (100 most recent)', |
|
|
withConfig: 'yt-dlp --config-location /Users/bibbler/Downloads/_VIDEOS_/_Admin_/config_local/yt-channel-thumbs-v2.conf --write-description --write-info-json --extract-audio --audio-format mp3 --playlist-end 100 "https://www.youtube.com/@ChannelName"', |
|
|
withoutConfig: 'yt-dlp --write-thumbnail --write-description --write-info-json --extract-audio --audio-format mp3 --playlist-end 100 --output "~/Downloads/_VIDEOS_/Youtube/Audio/%(uploader)s/%(playlist_title)s/%(upload_date)s - %(id)s - %(title)s.%(ext)s" "https://www.youtube.com/@ChannelName"'}, |
|
|
|
|
|
{title: 'Thumbnails + Descriptions + Metadata JSON + Audio (M4A) (100 most recent)', |
|
|
withConfig: 'yt-dlp --config-location /Users/bibbler/Downloads/_VIDEOS_/_Admin_/config_local/yt-channel-thumbs-v2.conf --write-description --write-info-json --extract-audio --audio-format m4a --playlist-end 100 "https://www.youtube.com/@ChannelName"', |
|
|
withoutConfig: 'yt-dlp --write-thumbnail --write-description --write-info-json --extract-audio --audio-format m4a --playlist-end 100 --output "~/Downloads/_VIDEOS_/Youtube/Audio/%(uploader)s/%(playlist_title)s/%(upload_date)s - %(id)s - %(title)s.%(ext)s" "https://www.youtube.com/@ChannelName"'}, |
|
|
|
|
|
{title: 'Thumbnails + Descriptions + Metadata JSON + Audio (WebM) (100 most recent)', |
|
|
withConfig: 'yt-dlp --config-location /Users/bibbler/Downloads/_VIDEOS_/_Admin_/config_local/yt-channel-thumbs-v2.conf --write-description --write-info-json --extract-audio --audio-format webm --playlist-end 100 "https://www.youtube.com/@ChannelName"', |
|
|
withoutConfig: 'yt-dlp --write-thumbnail --write-description --write-info-json --extract-audio --audio-format webm --playlist-end 100 --output "~/Downloads/_VIDEOS_/Youtube/Audio/%(uploader)s/%(playlist_title)s/%(upload_date)s - %(id)s - %(title)s.%(ext)s" "https://www.youtube.com/@ChannelName"'}, |
|
|
|
|
|
{title: 'Thumbnails + Descriptions + Metadata JSON + Audio (WAV) (100 most recent)', |
|
|
withConfig: 'yt-dlp --config-location /Users/bibbler/Downloads/_VIDEOS_/_Admin_/config_local/yt-channel-thumbs-v2.conf --write-description --write-info-json --extract-audio --audio-format wav --playlist-end 100 "https://www.youtube.com/@ChannelName"', |
|
|
withoutConfig: 'yt-dlp --write-thumbnail --write-description --write-info-json --extract-audio --audio-format wav --playlist-end 100 --output "~/Downloads/_VIDEOS_/Youtube/Audio/%(uploader)s/%(playlist_title)s/%(upload_date)s - %(id)s - %(title)s.%(ext)s" "https://www.youtube.com/@ChannelName"'}, |
|
|
|
|
|
{title: 'Thumbnails + Descriptions + Metadata JSON + Video (Best) (100 most recent)', |
|
|
withConfig: 'yt-dlp --config-location /Users/bibbler/Downloads/_VIDEOS_/_Admin_/config_local/yt-channel-thumbs-v2.conf --write-description --write-info-json --format "best" --playlist-end 100 "https://www.youtube.com/@ChannelName"', |
|
|
withoutConfig: 'yt-dlp --write-thumbnail --write-description --write-info-json --format "best" --playlist-end 100 --output "~/Downloads/_VIDEOS_/Youtube/Videos/%(uploader)s/%(playlist_title)s/%(upload_date)s - %(id)s - %(title)s.%(ext)s" "https://www.youtube.com/@ChannelName"'}, |
|
|
|
|
|
{title: 'Thumbnails + Descriptions + Metadata JSON + Video (1080p) (100 most recent)', |
|
|
withConfig: 'yt-dlp --config-location /Users/bibbler/Downloads/_VIDEOS_/_Admin_/config_local/yt-channel-thumbs-v2.conf --write-description --write-info-json --format "best[height<=1080]" --playlist-end 100 "https://www.youtube.com/@ChannelName"', |
|
|
withoutConfig: 'yt-dlp --write-thumbnail --write-description --write-info-json --format "best[height<=1080]" --playlist-end 100 --output "~/Downloads/_VIDEOS_/Youtube/Videos/%(uploader)s/%(playlist_title)s/%(upload_date)s - %(id)s - %(title)s.%(ext)s" "https://www.youtube.com/@ChannelName"'}, |
|
|
|
|
|
{title: 'Thumbnails + Descriptions + Metadata JSON + Video (720p) (100 most recent)', |
|
|
withConfig: 'yt-dlp --config-location /Users/bibbler/Downloads/_VIDEOS_/_Admin_/config_local/yt-channel-thumbs-v2.conf --write-description --write-info-json --format "best[height<=720]" --playlist-end 100 "https://www.youtube.com/@ChannelName"', |
|
|
withoutConfig: 'yt-dlp --write-thumbnail --write-description --write-info-json --format "best[height<=720]" --playlist-end 100 --output "~/Downloads/_VIDEOS_/Youtube/Videos/%(uploader)s/%(playlist_title)s/%(upload_date)s - %(id)s - %(title)s.%(ext)s" "https://www.youtube.com/@ChannelName"'}, |
|
|
|
|
|
{title: 'Thumbnails + Descriptions + Metadata JSON + Video (480p) (100 most recent)', |
|
|
withConfig: 'yt-dlp --config-location /Users/bibbler/Downloads/_VIDEOS_/_Admin_/config_local/yt-channel-thumbs-v2.conf --write-description --write-info-json --format "best[height<=480]" --playlist-end 100 "https://www.youtube.com/@ChannelName"', |
|
|
withoutConfig: 'yt-dlp --write-thumbnail --write-description --write-info-json --format "best[height<=480]" --playlist-end 100 --output "~/Downloads/_VIDEOS_/Youtube/Videos/%(uploader)s/%(playlist_title)s/%(upload_date)s - %(id)s - %(title)s.%(ext)s" "https://www.youtube.com/@ChannelName"'} |
|
|
] |
|
|
}; |
|
|
|
|
|
|
|
|
function categorizeCommands(commands, sectionId) { |
|
|
const metadata = []; |
|
|
const audio = []; |
|
|
const video = []; |
|
|
const utility = []; |
|
|
const dates = []; |
|
|
|
|
|
commands.forEach((cmd, index) => { |
|
|
const title = cmd.title.toLowerCase(); |
|
|
const num = index + 1; |
|
|
const link = `<a href="#${sectionId}-${num}" class="block text-sm text-gray-custom hover:text-white transition-colors">${num}. ${cmd.title}</a>`; |
|
|
|
|
|
if (title.includes('audio')) { |
|
|
audio.push(link); |
|
|
} else if (title.includes('video') || title.includes('1080p') || title.includes('720p') || title.includes('480p')) { |
|
|
video.push(link); |
|
|
} else if (title.includes('date') || title.includes('before') || title.includes('after')) { |
|
|
dates.push(link); |
|
|
} else if (title.includes('csv') || title.includes('list')) { |
|
|
utility.push(link); |
|
|
} else { |
|
|
metadata.push(link); |
|
|
} |
|
|
}); |
|
|
|
|
|
return { metadata, audio, video, utility, dates }; |
|
|
} |
|
|
|
|
|
|
|
|
function generateSection(sectionId, title, commands) { |
|
|
const categories = categorizeCommands(commands, sectionId); |
|
|
|
|
|
let tocHtml = ` |
|
|
<div id="${sectionId}-toc" class="hidden mt-4 pt-4 border-t border-slate-700"> |
|
|
<div class="grid grid-cols-1 md:grid-cols-${categories.dates.length > 0 ? '4' : '3'} gap-4"> |
|
|
`; |
|
|
|
|
|
|
|
|
if (categories.metadata.length > 0) { |
|
|
tocHtml += ` |
|
|
<div> |
|
|
<h4 class="text-xs font-semibold text-accent uppercase tracking-wider mb-2">Metadata & Info</h4> |
|
|
<div class="space-y-1"> |
|
|
${categories.metadata.join('')} |
|
|
</div> |
|
|
</div> |
|
|
`; |
|
|
} |
|
|
|
|
|
|
|
|
if (categories.audio.length > 0) { |
|
|
tocHtml += ` |
|
|
<div> |
|
|
<h4 class="text-xs font-semibold text-orange-500 uppercase tracking-wider mb-2">Audio Downloads</h4> |
|
|
<div class="space-y-1"> |
|
|
${categories.audio.join('')} |
|
|
</div> |
|
|
</div> |
|
|
`; |
|
|
} |
|
|
|
|
|
|
|
|
if (categories.video.length > 0) { |
|
|
tocHtml += ` |
|
|
<div> |
|
|
<h4 class="text-xs font-semibold text-blue-400 uppercase tracking-wider mb-2">Video Downloads</h4> |
|
|
<div class="space-y-1"> |
|
|
${categories.video.join('')} |
|
|
</div> |
|
|
</div> |
|
|
`; |
|
|
} |
|
|
|
|
|
|
|
|
if (categories.dates.length > 0) { |
|
|
tocHtml += ` |
|
|
<div> |
|
|
<h4 class="text-xs font-semibold text-purple-400 uppercase tracking-wider mb-2">Date Filters</h4> |
|
|
<div class="space-y-1"> |
|
|
${categories.dates.join('')} |
|
|
</div> |
|
|
</div> |
|
|
`; |
|
|
} |
|
|
|
|
|
|
|
|
if (categories.utility.length > 0) { |
|
|
tocHtml += ` |
|
|
<div> |
|
|
<h4 class="text-xs font-semibold text-yellow-400 uppercase tracking-wider mb-2">Utility</h4> |
|
|
<div class="space-y-1"> |
|
|
${categories.utility.join('')} |
|
|
</div> |
|
|
</div> |
|
|
`; |
|
|
} |
|
|
|
|
|
tocHtml += ` |
|
|
</div> |
|
|
</div> |
|
|
`; |
|
|
|
|
|
let html = ` |
|
|
<section id="${sectionId}" class="scroll-mt-40"> |
|
|
<div class="sticky top-[104px] z-20 py-4 bg-gradient-to-r from-slate-800 to-slate-900 backdrop-blur-sm bg-opacity-95 -mx-6 px-6 border-b border-slate-700"> |
|
|
<div class="flex items-center justify-between"> |
|
|
<div class="flex items-center"> |
|
|
<div class="h-10 w-1 bg-accent rounded-full mr-4"></div> |
|
|
<h2 class="text-2xl font-bold text-white">${title}</h2> |
|
|
</div> |
|
|
<button onclick="toggleTOC('${sectionId}')" class="flex items-center gap-2 text-gray-custom hover:text-white transition-colors text-sm"> |
|
|
<span>Quick Jump</span> |
|
|
<svg id="${sectionId}-arrow" class="w-4 h-4 transform transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24"> |
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/> |
|
|
</svg> |
|
|
</button> |
|
|
</div> |
|
|
${tocHtml} |
|
|
</div> |
|
|
|
|
|
<div class="space-y-6"> |
|
|
`; |
|
|
|
|
|
commands.forEach((cmd, index) => { |
|
|
html += generateCommandGroup(index + 1, cmd.title, cmd.withConfig, cmd.withoutConfig, sectionId); |
|
|
}); |
|
|
|
|
|
html += ` |
|
|
</div> |
|
|
</section> |
|
|
`; |
|
|
|
|
|
return html; |
|
|
} |
|
|
|
|
|
|
|
|
document.addEventListener('DOMContentLoaded', () => { |
|
|
setTimeout(() => { |
|
|
const channelsSection = document.querySelector('#channels .space-y-6'); |
|
|
commands.channels.forEach((cmd, index) => { |
|
|
channelsSection.insertAdjacentHTML('beforeend', generateCommandGroup(index + 2, cmd.title, cmd.withConfig, cmd.withoutConfig, 'channels')); |
|
|
}); |
|
|
|
|
|
|
|
|
if (typeof allCommands !== 'undefined') { |
|
|
const contentArea = document.querySelector('main .max-w-6xl'); |
|
|
const loadingIndicator = document.getElementById('loading'); |
|
|
|
|
|
|
|
|
loadingIndicator.insertAdjacentHTML('beforebegin', generateSection('playlists', 'Playlists', allCommands.playlists)); |
|
|
loadingIndicator.insertAdjacentHTML('beforebegin', generateSection('videos', 'Videos', allCommands.videos)); |
|
|
loadingIndicator.insertAdjacentHTML('beforebegin', generateSection('shorts', 'Shorts', allCommands.shorts)); |
|
|
loadingIndicator.insertAdjacentHTML('beforebegin', generateSection('lives', 'Lives', allCommands.lives)); |
|
|
loadingIndicator.insertAdjacentHTML('beforebegin', generateSection('utility', 'Utility', allCommands.utility)); |
|
|
} |
|
|
|
|
|
|
|
|
document.getElementById('loading').style.display = 'none'; |
|
|
}, 100); |
|
|
}); |
|
|
</script> |
|
|
</body> |
|
|
</html> |
