diff --git a/web/package-lock.json b/web/package-lock.json index b5a48b8..89d047d 100644 --- a/web/package-lock.json +++ b/web/package-lock.json @@ -46,7 +46,7 @@ "svelte-check": "^4.0.0", "svelte-sonner": "^0.3.28", "tailwind-merge": "^3.2.0", - "tailwind-variants": "^1.0.0", + "tailwind-variants": "^0.2.1", "tailwindcss": "^3.4.17", "tailwindcss-animate": "^1.0.7", "typescript": "^5.0.0", @@ -6081,12 +6081,13 @@ } }, "node_modules/tailwind-variants": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/tailwind-variants/-/tailwind-variants-1.0.0.tgz", - "integrity": "sha512-2WSbv4ulEEyuBKomOunut65D8UZwxrHoRfYnxGcQNnHqlSCp2+B7Yz2W+yrNDrxRodOXtGD/1oCcKGNBnUqMqA==", + "version": "0.2.1", + "resolved": "https://registry.npmjs.org/tailwind-variants/-/tailwind-variants-0.2.1.tgz", + "integrity": "sha512-2xmhAf4UIc3PijOUcJPA1LP4AbxhpcHuHM2C26xM0k81r0maAO6uoUSHl3APmvHZcY5cZCY/bYuJdfFa4eGoaw==", "dev": true, + "license": "MIT", "dependencies": { - "tailwind-merge": "3.0.2" + "tailwind-merge": "^2.2.0" }, "engines": { "node": ">=16.x", @@ -6097,10 +6098,11 @@ } }, "node_modules/tailwind-variants/node_modules/tailwind-merge": { - "version": "3.0.2", - "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-3.0.2.tgz", - "integrity": "sha512-l7z+OYZ7mu3DTqrL88RiKrKIqO3NcpEO8V/Od04bNpvk0kiIFndGEoqfuzvj4yuhRkHKjRkII2z+KS2HfPcSxw==", + "version": "2.6.0", + "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-2.6.0.tgz", + "integrity": "sha512-P+Vu1qXfzediirmHOC3xKGAYeZtPcV9g76X+xg2FD4tYgR71ewMA35Y3sCz3zhiN/dwefRpJX0yBcgwi1fXNQA==", "dev": true, + "license": "MIT", "funding": { "type": "github", "url": "https://github.com/sponsors/dcastil" diff --git a/web/package.json b/web/package.json index 53fa0b0..aa04992 100644 --- a/web/package.json +++ b/web/package.json @@ -41,7 +41,7 @@ "svelte-check": "^4.0.0", "svelte-sonner": "^0.3.28", "tailwind-merge": "^3.2.0", - "tailwind-variants": "^1.0.0", + "tailwind-variants": "^0.2.1", "tailwindcss": "^3.4.17", "tailwindcss-animate": "^1.0.7", "typescript": "^5.0.0", diff --git a/web/src/lib/components/recommended-media-carousel.svelte b/web/src/lib/components/recommended-media-carousel.svelte index 19fcf75..e657e32 100644 --- a/web/src/lib/components/recommended-media-carousel.svelte +++ b/web/src/lib/components/recommended-media-carousel.svelte @@ -3,14 +3,39 @@ import * as Carousel from '$lib/components/ui/carousel/index.js'; import type {MetaDataProviderShowSearchResult} from '$lib/types'; import AddMediaCard from '$lib/components/add-media-card.svelte'; + import {Skeleton} from "$lib/components/ui/skeleton"; + import {Button} from "$lib/components/ui/button"; + import {ChevronDown, ChevronRight} from "lucide-svelte"; - let {media, isShow}: { media: MetaDataProviderShowSearchResult[], isShow: boolean } = $props(); + let {media, isShow, isLoading}: { + media: MetaDataProviderShowSearchResult[], + isShow: boolean, + isLoading: boolean + } = $props();
- {#each media.slice(0, 3) as mediaItem} - - {/each} + {#if isLoading} + + + + + {:else } + {#each media.slice(0, 3) as mediaItem} + + {/each} + {/if} + {#if isShow} + + {:else } + + {/if}
diff --git a/web/src/lib/components/season-requests-table.svelte b/web/src/lib/components/season-requests-table.svelte index 62afd13..2b77515 100644 --- a/web/src/lib/components/season-requests-table.svelte +++ b/web/src/lib/components/season-requests-table.svelte @@ -1,5 +1,5 @@ @@ -15,7 +15,9 @@ Name - Seasons + {#if isShow} + Seasons + {/if} Download Status Quality File Path Suffix @@ -30,11 +32,13 @@ {torrent.torrent_title} - - - {convertTorrentSeasonRangeToIntegerRange(torrent)} - - + {#if isShow} + + + {convertTorrentSeasonRangeToIntegerRange(torrent)} + + + {/if} {getTorrentStatusString(torrent.status)} diff --git a/web/src/lib/components/ui/badge/badge.svelte b/web/src/lib/components/ui/badge/badge.svelte new file mode 100644 index 0000000..7e49bb3 --- /dev/null +++ b/web/src/lib/components/ui/badge/badge.svelte @@ -0,0 +1,50 @@ + + + + + + {@render children?.()} + diff --git a/web/src/lib/components/ui/badge/index.ts b/web/src/lib/components/ui/badge/index.ts new file mode 100644 index 0000000..d332eb4 --- /dev/null +++ b/web/src/lib/components/ui/badge/index.ts @@ -0,0 +1,2 @@ +export {default as Badge} from "./badge.svelte"; +export {badgeVariants, type BadgeVariant} from "./badge.svelte"; diff --git a/web/src/lib/components/ui/skeleton/index.ts b/web/src/lib/components/ui/skeleton/index.ts index 7913720..c2d39f6 100644 --- a/web/src/lib/components/ui/skeleton/index.ts +++ b/web/src/lib/components/ui/skeleton/index.ts @@ -1,7 +1,7 @@ -import Root from './skeleton.svelte'; +import Root from "./skeleton.svelte"; export { Root, // - Root as Skeleton + Root as Skeleton, }; diff --git a/web/src/lib/components/ui/skeleton/skeleton.svelte b/web/src/lib/components/ui/skeleton/skeleton.svelte index 345802d..46139f0 100644 --- a/web/src/lib/components/ui/skeleton/skeleton.svelte +++ b/web/src/lib/components/ui/skeleton/skeleton.svelte @@ -1,7 +1,7 @@ @@ -33,11 +34,17 @@ {#snippet loadingbar()} -
-
- -
-
+ + + + + + + + + + + {/snippet}

@@ -56,11 +63,11 @@ - {getFullyQualifiedShowName(show)} + {getFullyQualifiedMediaName(show)} {show.overview} - + diff --git a/web/src/routes/dashboard/tv/[showId=uuid]/+page.svelte b/web/src/routes/dashboard/tv/[showId=uuid]/+page.svelte index f6ce763..2168967 100644 --- a/web/src/routes/dashboard/tv/[showId=uuid]/+page.svelte +++ b/web/src/routes/dashboard/tv/[showId=uuid]/+page.svelte @@ -8,13 +8,13 @@ import * as Table from '$lib/components/ui/table/index.js'; import {getContext} from 'svelte'; import type {RichShowTorrent, Show, User} from '$lib/types.js'; - import {getFullyQualifiedShowName} from '$lib/utils'; + import {getFullyQualifiedMediaName} from '$lib/utils'; import DownloadSeasonDialog from '$lib/components/download-season-dialog.svelte'; import CheckmarkX from '$lib/components/checkmark-x.svelte'; import {page} from '$app/state'; import TorrentTable from '$lib/components/torrent-table.svelte'; import RequestSeasonDialog from '$lib/components/request-season-dialog.svelte'; - import ShowPicture from '$lib/components/show-picture.svelte'; + import MediaPicture from '$lib/components/media-picture.svelte'; import {Checkbox} from '$lib/components/ui/checkbox/index.js'; import {toast} from 'svelte-sonner'; import {Label} from '$lib/components/ui/label'; @@ -66,20 +66,20 @@

- {getFullyQualifiedShowName(show())} + {getFullyQualifiedMediaName(show())}

{#if show().id} - + {:else}

- {getFullyQualifiedShowName(show())} Season {season.number} + {getFullyQualifiedMediaName(show())} Season {season.number}

- +

diff --git a/web/src/routes/dashboard/tv/requests/+page.svelte b/web/src/routes/dashboard/tv/requests/+page.svelte index df98af8..f2d87da 100644 --- a/web/src/routes/dashboard/tv/requests/+page.svelte +++ b/web/src/routes/dashboard/tv/requests/+page.svelte @@ -28,7 +28,7 @@