julian/stream-capture
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 2 Wiki Activity

fix playlist ui

Browse Source
This commit is contained in:
Julian Freeman
2025-12-08 09:04:32 -04:00
parent 091cf65dac
commit 7c1c9c6a2f
2 changed files with 51 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

67
src/views/Home.vue
View File

@@ -206,44 +206,51 @@ async function startDownload() {
<!-- Playlist Header / Global Controls -->
<div v-if="analysisStore.metadata.entries" class="p-6 border-b border-gray-200 dark:border-zinc-800">
<div class="flex items-start justify-between mb-6">
<div class="flex items-start justify-between mb-4">
<div>
<h2 class="text-xl font-bold text-zinc-900 dark:text-white">{{ analysisStore.metadata.title }}</h2>
<p class="text-blue-500 mt-1 font-medium">{{ analysisStore.metadata.entries.length }} videos found</p>
</div>
<div class="flex items-center gap-2">
<button @click="analysisStore.setAllEntries(true)" class="text-xs px-3 py-1.5 rounded-lg bg-gray-100 hover:bg-gray-200 dark:bg-zinc-800 dark:hover:bg-zinc-700 text-zinc-700 dark:text-gray-300 transition-colors">Select All</button>
<button @click="analysisStore.setAllEntries(false)" class="text-xs px-3 py-1.5 rounded-lg bg-gray-100 hover:bg-gray-200 dark:bg-zinc-800 dark:hover:bg-zinc-700 text-zinc-700 dark:text-gray-300 transition-colors">Select None</button>
</div>
</div>
<!-- Global Options -->
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 bg-gray-50 dark:bg-zinc-800/50 p-4 rounded-xl">
<!-- Audio Only Toggle -->
<div class="flex items-center justify-between">
<span class="font-medium text-sm text-zinc-700 dark:text-gray-300">Audio Only (All)</span>
<button
@click="analysisStore.options.is_audio_only = !analysisStore.options.is_audio_only"
class="w-10 h-5 rounded-full relative transition-colors duration-200 ease-in-out"
:class="analysisStore.options.is_audio_only ? 'bg-blue-600' : 'bg-gray-300 dark:bg-zinc-600'"
>
<span
class="absolute top-1 left-1 w-3 h-3 bg-white rounded-full transition-transform duration-200"
:class="analysisStore.options.is_audio_only ? 'translate-x-5' : 'translate-x-0'"
/>
</button>
<!-- Global Options Bar -->
<div class="flex flex-col md:flex-row items-center justify-between gap-4 bg-gray-50 dark:bg-zinc-800/50 p-4 rounded-xl">
<!-- Left: Selection Controls -->
<div class="flex items-center gap-2 w-full md:w-auto">
<button @click="analysisStore.setAllEntries(true)" class="text-xs font-medium px-3 py-1.5 rounded-lg bg-white dark:bg-zinc-700 hover:bg-gray-100 dark:hover:bg-zinc-600 text-zinc-700 dark:text-gray-200 border border-gray-200 dark:border-zinc-600 transition-colors shadow-sm">All</button>
<button @click="analysisStore.setAllEntries(false)" class="text-xs font-medium px-3 py-1.5 rounded-lg bg-white dark:bg-zinc-700 hover:bg-gray-100 dark:hover:bg-zinc-600 text-zinc-700 dark:text-gray-200 border border-gray-200 dark:border-zinc-600 transition-colors shadow-sm">None</button>
<button @click="analysisStore.invertSelection()" class="text-xs font-medium px-3 py-1.5 rounded-lg bg-white dark:bg-zinc-700 hover:bg-gray-100 dark:hover:bg-zinc-600 text-zinc-700 dark:text-gray-200 border border-gray-200 dark:border-zinc-600 transition-colors shadow-sm">Invert</button>
</div>
<!-- Quality Dropdown -->
<div class="flex items-center justify-between gap-4">
<span class="font-medium text-sm text-zinc-700 dark:text-gray-300">Quality (All)</span>
<div class="w-40">
<AppSelect
v-model="analysisStore.options.quality"
:options="qualityOptions"
:disabled="analysisStore.options.is_audio_only"
/>
</div>
<!-- Right: Settings -->
<div class="flex items-center gap-6 w-full md:w-auto justify-end">
<!-- Audio Only Toggle -->
<div class="flex items-center gap-3">
<span class="font-medium text-sm text-zinc-700 dark:text-gray-300">Audio Only</span>
<button
@click="analysisStore.options.is_audio_only = !analysisStore.options.is_audio_only"
class="w-10 h-5 rounded-full relative transition-colors duration-200 ease-in-out shrink-0"
:class="analysisStore.options.is_audio_only ? 'bg-blue-600' : 'bg-gray-300 dark:bg-zinc-600'"
>
<span
class="absolute top-1 left-1 w-3 h-3 bg-white rounded-full transition-transform duration-200"
:class="analysisStore.options.is_audio_only ? 'translate-x-5' : 'translate-x-0'"
/>
</button>
</div>
<!-- Quality Dropdown -->
<div class="flex items-center gap-3">
<span class="font-medium text-sm text-zinc-700 dark:text-gray-300">Quality</span>
<div class="w-44">
<AppSelect
v-model="analysisStore.options.quality"
:options="qualityOptions"
:disabled="analysisStore.options.is_audio_only"
/>
</div>
</div>
</div>
</div>
</div>