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

16
src/stores/analysis.ts
View File

@@ -29,7 +29,19 @@ export const useAnalysisStore = defineStore('analysis', () => {
function setAllEntries(selected: boolean) {
if (metadata.value && metadata.value.entries) {
metadata.value.entries.forEach((e: any) => e.selected = selected)
metadata.value.entries = metadata.value.entries.map((e: any) => ({
...e,
selected
}))
}
}
function invertSelection() {
if (metadata.value && metadata.value.entries) {
metadata.value.entries = metadata.value.entries.map((e: any) => ({
...e,
selected: !e.selected
}))
}
}
@@ -42,5 +54,5 @@ export const useAnalysisStore = defineStore('analysis', () => {
scanMix.value = false
}
return { url, loading, error, metadata, options, isMix, scanMix, toggleEntry, setAllEntries, reset }
return { url, loading, error, metadata, options, isMix, scanMix, toggleEntry, setAllEntries, invertSelection, reset }
})

33
src/views/Home.vue
View File

@@ -206,25 +206,31 @@ 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">
<!-- 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>
<!-- Right: Settings -->
<div class="flex items-center gap-6 w-full md:w-auto justify-end">
<!-- 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>
<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"
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
@@ -235,9 +241,9 @@ async function startDownload() {
</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">
<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"
@@ -247,6 +253,7 @@ async function startDownload() {
</div>
</div>
</div>
</div>
<!-- Video List (Playlist Mode) -->
<div v-if="analysisStore.metadata.entries" class="max-h-[500px] overflow-y-auto p-2 space-y-2 bg-gray-50/50 dark:bg-black/20">