starred/reiverr
1
0
Fork 0
mirror of https://github.com/aleksilassila/reiverr.git synced 2026-04-21 08:15:12 +02:00
Code Issues Packages Projects Releases Wiki Activity

style: Redesign manage media ui

Browse Source
This commit is contained in:
Aleksi Lassila
2024-05-01 01:05:21 +03:00
parent 165f793a43
commit 0d05e3b530
11 changed files with 376 additions and 239 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/lib/components/MediaManager/FileList.svelte
View File

@@ -5,13 +5,12 @@
import { formatSize } from '../../utils.js';
import type { FileResource } from '../../apis/combined-types';
import { scrollIntoView } from '../../selectable';
import Container from '../../../Container.svelte';
export let files: Promise<FileResource[]>;
export let handleSelectFile: (file: FileResource) => void;
</script>
<Container class="flex flex-col -my-2">
<div class="flex flex-col -my-2">
{#await files}
{#each new Array(5) as _, index}
<div class="flex-1 my-2">
@@ -47,4 +46,4 @@
<div class="text-sm text-zinc-400">No local files found</div>
{/each}
{/await}
</Container>
</div>

19
src/lib/components/MediaManager/MMModal.svelte
View File

@@ -16,12 +16,19 @@
}}
focusOnMount
trapFocus
class={classNames('fixed inset-0 bg-stone-950/80 overflow-auto', {
'opacity-0': hidden
})}
class={classNames(
'fixed inset-0 overflow-x-hidden overflow-y-auto',
{
'opacity-0': hidden
},
// 'bg-[radial-gradient(169.40%_89.55%_at_94.76%_6.29%,rgba(0,0,0,0.40)_0%,rgba(255,255,255,0.00)_100%)]'
// 'bg-[radial-gradient(150%_50%_at_50%_-25%,_#DFAA2BF0_0%,_#073AFF00_100%),linear-gradient(0deg,_#1A1914FF_0%,_#1A1914FF_0%)]'
'bg-secondary-900'
)}
canFocusEmpty
>
<div class="mx-20 py-16">
<slot />
</div>
<div
class="absolute top-0 inset-x-0 h-screen -z-10 bg-[radial-gradient(150%_50%_at_50%_-25%,_#DFAA2Bcc_0%,_#00000000_100%)]"
/>
<slot />
</Container>

152
src/lib/components/MediaManager/ReleaseList.svelte
View File

@@ -2,13 +2,12 @@
import { type RadarrRelease } from '../../apis/radarr/radarr-api';
import classNames from 'classnames';
import { useRequest } from '../../stores/data.store';
import Button from '../Button.svelte';
import { ChevronRight, DotFilled } from 'radix-icons-svelte';
import { formatMinutesToTime, formatSize } from '../../utils';
import { derived } from 'svelte/store';
import ButtonGhost from '../Ghosts/ButtonGhost.svelte';
import type { SonarrRelease } from '../../apis/sonarr/sonarr-api';
import Container from '../../../Container.svelte';
import MMReleaseListRow from '../MediaManagerModal/MMReleaseListRow.svelte';
import AnimateScale from '../AnimateScale.svelte';
type Release = RadarrRelease | SonarrRelease;
@@ -34,7 +33,7 @@
});
</script>
<Container class="flex flex-col -my-2">
<table class="w-full border-spacing-y-2 border-spacing-x-2 border-separate -mx-8">
{#if $isLoading}
{#each new Array(5) as _, index}
<div class="flex-1 my-2">
@@ -42,81 +41,74 @@
</div>
{/each}
{:else}
{#each (showAll ? $releases : $filteredReleases)?.filter((r) => r.guid && r.indexerId) || [] as release, index}
<div class="flex-1 my-2">
<Button
on:clickOrSelect={() => selectRelease(release)}
let:hasFocus
focusOnMount={index === 0}
>
<div class="w-full flex">
<div class="flex-1 flex flex-col mr-2">
<div class="flex-1 flex items-center">
<div class="tracking-wide mr-2">{release.indexer}</div>
<div
class={classNames('mr-2', {
'text-zinc-400': !hasFocus,
'text-zinc-700': hasFocus
})}
>
{release?.quality?.quality?.name}
</div>
<div
class={classNames('mr-2', {
'text-zinc-400': !hasFocus,
'text-zinc-700': hasFocus
})}
>
{release.seeders} seeders
</div>
</div>
{#if hasFocus}
<div class="flex text-xs text-zinc-700 items-center flex-wrap mt-2">
<div>
{release.title}
</div>
<DotFilled size={15} />
<div>{formatMinutesToTime(release.ageMinutes || 0)} old</div>
<DotFilled size={15} />
<div><b>{release.seeders} seeders</b> / {release.leechers} leechers</div>
<DotFilled size={15} />
{#if release.seeders}
<div>
{formatSize((release.size || 0) / release.seeders)} per seeder
</div>
{/if}
</div>
{/if}
<thead>
<Container tag="tr" direction="horizontal">
<Container tag="th" let:hasFocus>
<AnimateScale {hasFocus} class="ml-8">
<div
class={classNames('float-left rounded-full px-3 py-1', {
'bg-primary-500 text-secondary-800': hasFocus
})}
>
Title
</div>
{#if hasFocus}
<div class="flex items-center">
<ChevronRight size={32} />
</div>
{:else}
<div
class={classNames({
'text-zinc-400': !hasFocus,
'text-zinc-700': hasFocus
})}
>
{formatSize(release?.size || 0)}
</div>
{/if}
</div>
</Button>
</div>
{/each}
{#if !showAll && $releases?.length}
<div class="my-1 w-full">
<Button on:clickOrSelect={() => (showAll = true)}
>Show all {$releases?.length} releases</Button
>
</div>
{:else if showAll}
<div class="my-1 w-full">
<Button on:clickOrSelect={() => (showAll = false)}>Show less</Button>
</div>
{/if}
</AnimateScale>
</Container>
<Container tag="th" let:hasFocus>
<AnimateScale {hasFocus}>
<div
class={classNames('float-left rounded-full px-3 py-1', {
'bg-primary-500 text-secondary-800': hasFocus
})}
>
Size
</div>
</AnimateScale>
</Container>
<Container tag="th" let:hasFocus>
<AnimateScale {hasFocus}>
<div
class={classNames('float-left rounded-full px-3 py-1', {
'bg-primary-500 text-secondary-800': hasFocus
})}
>
Peers
</div>
</AnimateScale>
</Container>
<Container tag="th" let:hasFocus>
<AnimateScale {hasFocus}>
<div
class={classNames('float-left rounded-full px-3 py-1', {
'bg-primary-500 text-secondary-800': hasFocus
})}
>
Quality
</div>
</AnimateScale>
</Container>
<th />
</Container>
</thead>
<Container focusOnMount tag="tbody" class="">
{#each $filteredReleases?.filter((r) => r.guid && r.indexerId) || [] as release, index}
<MMReleaseListRow {release} />
{/each}
</Container>
<h1 class="text-2xl font-semibold mb-4 mt-8 mx-8">All Releases</h1>
<tbody class="divide-y divide-zinc-500">
{#each $releases?.filter((r) => r.guid && r.indexerId) || [] as release, index}
<MMReleaseListRow {release} />
{/each}
</tbody>
{/if}
</Container>
</table>
<!--{#if !showAll && $releases?.length}-->
<!-- <div class="my-1 w-full">-->
<!-- <Button on:clickOrSelect={() => (showAll = true)}>Show all {$releases?.length} releases</Button>-->
<!-- </div>-->
<!--{:else if showAll}-->
<!-- <div class="my-1 w-full">-->
<!-- <Button on:clickOrSelect={() => (showAll = false)}>Show less</Button>-->
<!-- </div>-->
<!--{/if}-->