starred/MediaManager
1
0
Fork 0
mirror of https://github.com/maxdorninger/MediaManager.git synced 2026-04-19 06:54:54 +02:00
Code Issues Packages Projects Releases Wiki Activity

format frontend code

Browse Source
This commit is contained in:
maxDorninger
2025-06-22 18:05:21 +02:00
parent e5a69dd466
commit 8c84eb2b4e
41 changed files with 568 additions and 608 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
web/src/lib/components/add-show-card.svelte
View File

@@ -7,7 +7,7 @@
import {base} from '$app/paths';
import type {MetaDataProviderShowSearchResult} from '$lib/types.js';
const apiUrl = env.PUBLIC_API_URL
const apiUrl = env.PUBLIC_API_URL;
let loading = $state(false);
let errorMessage = $state(null);
let {result}: { result: MetaDataProviderShowSearchResult } = $props();
@@ -33,7 +33,7 @@
}
</script>
<Card.Root class="h-full overflow-x-hidden col-span-full sm:col-span-1">
<Card.Root class="col-span-full h-full overflow-x-hidden sm:col-span-1">
<Card.Header>
<Card.Title class="flex h-12 items-center leading-tight">
{result.name}

20
web/src/lib/components/app-sidebar.svelte
View File

@@ -1,6 +1,6 @@
<script lang="ts" module>
import {Home, Info, LifeBuoy, Send, Settings, TvIcon} from 'lucide-svelte';
import {PUBLIC_VERSION} from '$env/static/public';
import {Home, Info, LifeBuoy, Send, Settings, TvIcon} from 'lucide-svelte';
import {PUBLIC_VERSION} from '$env/static/public';
const data = {
navMain: [
@@ -62,11 +62,11 @@
import NavSecondary from '$lib/components/nav-secondary.svelte';
import NavUser from '$lib/components/nav-user.svelte';
import * as Sidebar from '$lib/components/ui/sidebar/index.js';
import type {ComponentProps} from 'svelte';
import type {ComponentProps} from 'svelte';
import logo from '$lib/images/logo.svg';
import {base} from '$app/paths';
import {base} from '$app/paths';
let {ref = $bindable(null), ...restProps}: ComponentProps<typeof Sidebar.Root> = $props();
let {ref = $bindable(null), ...restProps}: ComponentProps<typeof Sidebar.Root> = $props();
</script>
<Sidebar.Root {...restProps} bind:ref variant="inset">
@@ -74,9 +74,9 @@
<Sidebar.Menu>
<Sidebar.MenuItem>
<Sidebar.MenuButton size="lg">
{#snippet child({props})}
{#snippet child({props})}
<a href="{base}/dashboard" {...props}>
<img class="size-12" src={logo} alt="Media Manager Logo"/>
<img class="size-12" src={logo} alt="Media Manager Logo"/>
<div class="grid flex-1 text-left text-sm leading-tight">
<span class="truncate font-semibold">Media Manager</span>
<span class="truncate text-xs">v{PUBLIC_VERSION}</span>
@@ -88,11 +88,11 @@
</Sidebar.Menu>
</Sidebar.Header>
<Sidebar.Content>
<NavMain items={data.navMain}/>
<NavMain items={data.navMain}/>
<!-- <NavProjects projects={data.projects}/> -->
<NavSecondary class="mt-auto" items={data.navSecondary}/>
<NavSecondary class="mt-auto" items={data.navSecondary}/>
</Sidebar.Content>
<Sidebar.Footer>
<NavUser/>
<NavUser/>
</Sidebar.Footer>
</Sidebar.Root>

2
web/src/lib/components/download-season-dialog.svelte
View File

@@ -13,7 +13,7 @@
import * as Select from '$lib/components/ui/select/index.js';
import * as Table from '$lib/components/ui/table/index.js';
const apiUrl = env.PUBLIC_API_URL
const apiUrl = env.PUBLIC_API_URL;
let {show} = $props();
let dialogueState = $state(false);
let selectedSeasonNumber: number = $state(1);

480
web/src/lib/components/login-form.svelte
View File

@@ -1,267 +1,265 @@
<script lang="ts">
import {Button} from '$lib/components/ui/button/index.js';
import * as Card from '$lib/components/ui/card/index.js';
import {Input} from '$lib/components/ui/input/index.js';
import {Label} from '$lib/components/ui/label/index.js';
import {goto} from '$app/navigation';
import {env} from '$env/dynamic/public';
import * as Tabs from '$lib/components/ui/tabs/index.js';
import {toast} from 'svelte-sonner';
import LoadingBar from '$lib/components/loading-bar.svelte';
import {browser} from "$app/environment";
import {Button} from '$lib/components/ui/button/index.js';
import * as Card from '$lib/components/ui/card/index.js';
import {Input} from '$lib/components/ui/input/index.js';
import {Label} from '$lib/components/ui/label/index.js';
import {goto} from '$app/navigation';
import {env} from '$env/dynamic/public';
import * as Tabs from '$lib/components/ui/tabs/index.js';
import {toast} from 'svelte-sonner';
import LoadingBar from '$lib/components/loading-bar.svelte';
const apiUrl = env.PUBLIC_API_URL
const apiUrl = env.PUBLIC_API_URL;
let {oauthProvider} = $props();
let oauthProviderName = $derived(oauthProvider.oauth_name);
let {oauthProvider} = $props();
let oauthProviderName = $derived(oauthProvider.oauth_name);
let email = $state('');
let password = $state('');
let errorMessage = $state('');
let isLoading = $state(false);
let tabValue = $state('login');
let email = $state('');
let password = $state('');
let errorMessage = $state('');
let isLoading = $state(false);
let tabValue = $state('login');
async function handleLogin(event: Event) {
event.preventDefault();
async function handleLogin(event: Event) {
event.preventDefault();
isLoading = true;
errorMessage = '';
isLoading = true;
errorMessage = '';
const formData = new URLSearchParams();
formData.append('username', email);
formData.append('password', password);
try {
const response = await fetch(apiUrl + '/auth/cookie/login', {
method: 'POST',
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
},
body: formData.toString(),
credentials: 'include'
});
const formData = new URLSearchParams();
formData.append('username', email);
formData.append('password', password);
try {
const response = await fetch(apiUrl + '/auth/cookie/login', {
method: 'POST',
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
},
body: formData.toString(),
credentials: 'include'
});
if (response.ok) {
console.log('Login successful!');
console.log('Received User Data: ', response);
errorMessage = 'Login successful! Redirecting...';
toast.success(errorMessage);
goto('/dashboard');
} else {
let errorText = await response.text();
try {
const errorData = JSON.parse(errorText);
errorMessage = errorData.message || 'Login failed. Please check your credentials.';
} catch {
errorMessage = errorText || 'Login failed. Please check your credentials.';
}
toast.error(errorMessage);
console.error('Login failed:', response.status, errorText);
}
} catch (error) {
console.error('Login request failed:', error);
errorMessage = 'An error occurred during the login request.';
toast.error(errorMessage);
} finally {
isLoading = false;
}
}
if (response.ok) {
console.log('Login successful!');
console.log('Received User Data: ', response);
errorMessage = 'Login successful! Redirecting...';
toast.success(errorMessage);
goto('/dashboard');
} else {
let errorText = await response.text();
try {
const errorData = JSON.parse(errorText);
errorMessage = errorData.message || 'Login failed. Please check your credentials.';
} catch {
errorMessage = errorText || 'Login failed. Please check your credentials.';
}
toast.error(errorMessage);
console.error('Login failed:', response.status, errorText);
}
} catch (error) {
console.error('Login request failed:', error);
errorMessage = 'An error occurred during the login request.';
toast.error(errorMessage);
} finally {
isLoading = false;
}
}
async function handleSignup(event: Event) {
event.preventDefault();
async function handleSignup(event: Event) {
event.preventDefault();
isLoading = true;
errorMessage = '';
isLoading = true;
errorMessage = '';
try {
const response = await fetch(apiUrl + '/auth/register', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
email: email,
password: password
}),
credentials: 'include'
});
try {
const response = await fetch(apiUrl + '/auth/register', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
email: email,
password: password
}),
credentials: 'include'
});
if (response.ok) {
console.log('Registration successful!');
console.log('Received User Data: ', response);
tabValue = 'login'; // Switch to login tab after successful registration
errorMessage = 'Registration successful! Please login.';
toast.success(errorMessage);
} else {
let errorText = await response.text();
try {
const errorData = JSON.parse(errorText);
errorMessage = errorData.message || 'Registration failed. Please check your credentials.';
} catch {
errorMessage = errorText || 'Registration failed. Please check your credentials.';
}
toast.error(errorMessage);
console.error('Registration failed:', response.status, errorText);
}
} catch (error) {
console.error('Registration request failed:', error);
errorMessage = 'An error occurred during the Registration request.';
toast.error(errorMessage);
} finally {
isLoading = false;
}
}
if (response.ok) {
console.log('Registration successful!');
console.log('Received User Data: ', response);
tabValue = 'login'; // Switch to login tab after successful registration
errorMessage = 'Registration successful! Please login.';
toast.success(errorMessage);
} else {
let errorText = await response.text();
try {
const errorData = JSON.parse(errorText);
errorMessage = errorData.message || 'Registration failed. Please check your credentials.';
} catch {
errorMessage = errorText || 'Registration failed. Please check your credentials.';
}
toast.error(errorMessage);
console.error('Registration failed:', response.status, errorText);
}
} catch (error) {
console.error('Registration request failed:', error);
errorMessage = 'An error occurred during the Registration request.';
toast.error(errorMessage);
} finally {
isLoading = false;
}
}
async function handleOauth() {
try {
const response = await fetch(
apiUrl + '/auth/cookie/' + oauthProviderName + '/authorize?scopes=email',
{
method: 'GET',
headers: {
'Content-Type': 'application/json'
}
}
);
if (response.ok) {
let result = await response.json();
console.log(
'Redirecting to OAuth provider:',
oauthProviderName,
'url: ',
result.authorization_url
);
toast.success('Redirecting to ' + oauthProviderName + ' for authentication...');
window.location = result.authorization_url;
} else {
let errorText = await response.text();
toast.error(errorMessage);
console.error('Login failed:', response.status, errorText);
}
} catch (error) {
console.error('Login request failed:', error);
errorMessage = 'An error occurred during the login request.';
toast.error(errorMessage);
}
}
async function handleOauth() {
try {
const response = await fetch(
apiUrl + '/auth/cookie/' + oauthProviderName + '/authorize?scopes=email',
{
method: 'GET',
headers: {
'Content-Type': 'application/json'
}
}
);
if (response.ok) {
let result = await response.json();
console.log(
'Redirecting to OAuth provider:',
oauthProviderName,
'url: ',
result.authorization_url
);
toast.success('Redirecting to ' + oauthProviderName + ' for authentication...');
window.location = result.authorization_url;
} else {
let errorText = await response.text();
toast.error(errorMessage);
console.error('Login failed:', response.status, errorText);
}
} catch (error) {
console.error('Login request failed:', error);
errorMessage = 'An error occurred during the login request.';
toast.error(errorMessage);
}
}
</script>
{#snippet oauthLogin()}
{#await oauthProvider}
<LoadingBar/>
{:then result}
{#if result.oauth_name != null}
<div
class="after:border-border relative mt-2 text-center text-sm after:absolute after:inset-0 after:top-1/2 after:z-0 after:flex after:items-center after:border-t"
>
<span class="bg-background text-muted-foreground relative z-10 px-2">
Or continue with
</span>
</div>
<Button class="mt-2 w-full" onclick={() => handleOauth()} variant="outline"
>Login with {result.oauth_name}</Button
>
{/if}
{/await}
{#await oauthProvider}
<LoadingBar/>
{:then result}
{#if result.oauth_name != null}
<div
class="relative mt-2 text-center text-sm after:absolute after:inset-0 after:top-1/2 after:z-0 after:flex after:items-center after:border-t after:border-border"
>
<span class="relative z-10 bg-background px-2 text-muted-foreground">
Or continue with
</span>
</div>
<Button class="mt-2 w-full" onclick={() => handleOauth()} variant="outline"
>Login with {result.oauth_name}</Button
>
{/if}
{/await}
{/snippet}
<Tabs.Root value={tabValue}>
<Tabs.Content value="login">
<Card.Root class="mx-auto max-w-sm">
<Card.Header>
<Card.Title class="text-2xl">Login</Card.Title>
<Card.Description>Enter your email below to login to your account</Card.Description>
</Card.Header>
<Card.Content>
<form class="grid gap-4" onsubmit={handleLogin}>
<div class="grid gap-2">
<Label for="email">Email</Label>
<Input
bind:value={email}
id="email"
placeholder="m@example.com"
required
type="email"
/>
</div>
<div class="grid gap-2">
<div class="flex items-center">
<Label for="password">Password</Label>
<!-- TODO: add link to relevant documentation -->
<a class="ml-auto inline-block text-sm underline" href="##">
Forgot your password?
</a>
</div>
<Input bind:value={password} id="password" required type="password"/>
</div>
<Tabs.Content value="login">
<Card.Root class="mx-auto max-w-sm">
<Card.Header>
<Card.Title class="text-2xl">Login</Card.Title>
<Card.Description>Enter your email below to login to your account</Card.Description>
</Card.Header>
<Card.Content>
<form class="grid gap-4" onsubmit={handleLogin}>
<div class="grid gap-2">
<Label for="email">Email</Label>
<Input
bind:value={email}
id="email"
placeholder="m@example.com"
required
type="email"
/>
</div>
<div class="grid gap-2">
<div class="flex items-center">
<Label for="password">Password</Label>
<!-- TODO: add link to relevant documentation -->
<a class="ml-auto inline-block text-sm underline" href="##">
Forgot your password?
</a>
</div>
<Input bind:value={password} id="password" required type="password"/>
</div>
{#if errorMessage}
<p class="text-sm text-red-500">{errorMessage}</p>
{/if}
{#if errorMessage}
<p class="text-sm text-red-500">{errorMessage}</p>
{/if}
<Button class="w-full" disabled={isLoading} type="submit">
{#if isLoading}
Logging in...
{:else}
Login
{/if}
</Button>
</form>
<Button class="w-full" disabled={isLoading} type="submit">
{#if isLoading}
Logging in...
{:else}
Login
{/if}
</Button>
</form>
{@render oauthLogin()}
{@render oauthLogin()}
<div class="mt-4 text-center text-sm">
<Button onclick={() => (tabValue = 'register')} variant="link">
Don't have an account? Sign up
</Button>
</div>
</Card.Content>
</Card.Root>
</Tabs.Content>
<Tabs.Content value="register">
<Card.Root class="mx-auto max-w-sm">
<Card.Header>
<Card.Title class="text-2xl">Sign up</Card.Title>
<Card.Description>Enter your email and password below to sign up.</Card.Description>
</Card.Header>
<Card.Content>
<form class="grid gap-4" onsubmit={handleSignup}>
<div class="grid gap-2">
<Label for="email2">Email</Label>
<Input
bind:value={email}
id="email2"
placeholder="m@example.com"
required
type="email"
/>
</div>
<div class="grid gap-2">
<div class="flex items-center">
<Label for="password2">Password</Label>
</div>
<Input bind:value={password} id="password2" required type="password"/>
</div>
<div class="mt-4 text-center text-sm">
<Button onclick={() => (tabValue = 'register')} variant="link">
Don't have an account? Sign up
</Button>
</div>
</Card.Content>
</Card.Root>
</Tabs.Content>
<Tabs.Content value="register">
<Card.Root class="mx-auto max-w-sm">
<Card.Header>
<Card.Title class="text-2xl">Sign up</Card.Title>
<Card.Description>Enter your email and password below to sign up.</Card.Description>
</Card.Header>
<Card.Content>
<form class="grid gap-4" onsubmit={handleSignup}>
<div class="grid gap-2">
<Label for="email2">Email</Label>
<Input
bind:value={email}
id="email2"
placeholder="m@example.com"
required
type="email"
/>
</div>
<div class="grid gap-2">
<div class="flex items-center">
<Label for="password2">Password</Label>
</div>
<Input bind:value={password} id="password2" required type="password"/>
</div>
{#if errorMessage}
<p class="text-sm text-red-500">{errorMessage}</p>
{/if}
{#if errorMessage}
<p class="text-sm text-red-500">{errorMessage}</p>
{/if}
<Button class="w-full" disabled={isLoading} type="submit">
{#if isLoading}
Signing up...
{:else}
Sign up
{/if}
</Button>
</form>
{@render oauthLogin()}
<Button class="w-full" disabled={isLoading} type="submit">
{#if isLoading}
Signing up...
{:else}
Sign up
{/if}
</Button>
</form>
{@render oauthLogin()}
<div class="mt-4 text-center text-sm">
<Button onclick={() => (tabValue = 'login')} variant="link"
>Already have an account? Login
</Button>
</div>
</Card.Content>
</Card.Root>
</Tabs.Content>
<div class="mt-4 text-center text-sm">
<Button onclick={() => (tabValue = 'login')} variant="link"
>Already have an account? Login
</Button>
</div>
</Card.Content>
</Card.Root>
</Tabs.Content>
</Tabs.Root>

10
web/src/lib/components/nav-main.svelte
View File

@@ -26,24 +26,24 @@
<Sidebar.Menu>
{#each items as mainItem (mainItem.title)}
<Collapsible.Root open={mainItem.isActive}>
{#snippet child({props})}
{#snippet child({props})}
<Sidebar.MenuItem {...props}>
<Sidebar.MenuButton>
{#snippet tooltipContent()}
{mainItem.title}
{/snippet}
{#snippet child({props})}
{#snippet child({props})}
<a href={mainItem.url} {...props}>
<mainItem.icon/>
<mainItem.icon/>
<span>{mainItem.title}</span>
</a>
{/snippet}
</Sidebar.MenuButton>
{#if mainItem.items?.length}
<Collapsible.Trigger>
{#snippet child({props})}
{#snippet child({props})}
<Sidebar.MenuAction {...props} class="data-[state=open]:rotate-90">
<ChevronRight/>
<ChevronRight/>
<span class="sr-only">Toggle</span>
</Sidebar.MenuAction>
{/snippet}

24
web/src/lib/components/nav-projects.svelte
View File

@@ -1,7 +1,7 @@
<script lang="ts">
import * as DropdownMenu from '$lib/components/ui/dropdown-menu/index.js';
import * as Sidebar from '$lib/components/ui/sidebar/index.js';
import {useSidebar} from '$lib/components/ui/sidebar/index.js';
import {useSidebar} from '$lib/components/ui/sidebar/index.js';
import Ellipsis from '@lucide/svelte/icons/ellipsis';
import Folder from '@lucide/svelte/icons/folder';
import Share from '@lucide/svelte/icons/share';
@@ -28,38 +28,38 @@
{#each projects as item (item.name)}
<Sidebar.MenuItem>
<Sidebar.MenuButton>
{#snippet child({props})}
{#snippet child({props})}
<a href={item.url} {...props}>
<item.icon/>
<item.icon/>
<span>{item.name}</span>
</a>
{/snippet}
</Sidebar.MenuButton>
<DropdownMenu.Root>
<DropdownMenu.Trigger>
{#snippet child({props})}
{#snippet child({props})}
<Sidebar.MenuAction showOnHover {...props}>
<Ellipsis/>
<Ellipsis/>
<span class="sr-only">More</span>
</Sidebar.MenuAction>
{/snippet}
</DropdownMenu.Trigger>
<DropdownMenu.Content
class="w-48"
side={sidebar.isMobile ? 'bottom' : 'right'}
align={sidebar.isMobile ? 'end' : 'start'}
class="w-48"
side={sidebar.isMobile ? 'bottom' : 'right'}
align={sidebar.isMobile ? 'end' : 'start'}
>
<DropdownMenu.Item>
<Folder class="text-muted-foreground"/>
<Folder class="text-muted-foreground"/>
<span>View Project</span>
</DropdownMenu.Item>
<DropdownMenu.Item>
<Share class="text-muted-foreground"/>
<Share class="text-muted-foreground"/>
<span>Share Project</span>
</DropdownMenu.Item>
<DropdownMenu.Separator/>
<DropdownMenu.Separator/>
<DropdownMenu.Item>
<Trash2 class="text-muted-foreground"/>
<Trash2 class="text-muted-foreground"/>
<span>Delete Project</span>
</DropdownMenu.Item>
</DropdownMenu.Content>

40
web/src/lib/components/nav-user.svelte
View File

@@ -5,12 +5,12 @@
import * as Avatar from '$lib/components/ui/avatar/index.js';
import * as DropdownMenu from '$lib/components/ui/dropdown-menu/index.js';
import * as Sidebar from '$lib/components/ui/sidebar/index.js';
import {useSidebar} from '$lib/components/ui/sidebar/index.js';
import {useSidebar} from '$lib/components/ui/sidebar/index.js';
import UserDetails from './user-details.svelte';
import UserRound from '@lucide/svelte/icons/user-round';
import {handleLogout} from '$lib/utils.ts';
import {goto} from '$app/navigation';
import {base} from '$app/paths';
import {handleLogout} from '$lib/utils.ts';
import {goto} from '$app/navigation';
import {base} from '$app/paths';
const sidebar = useSidebar();
</script>
@@ -18,51 +18,51 @@
<Sidebar.MenuItem>
<DropdownMenu.Root>
<DropdownMenu.Trigger>
{#snippet child({props})}
{#snippet child({props})}
<Sidebar.MenuButton
{...props}
size="lg"
class="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
{...props}
size="lg"
class="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
>
<Avatar.Root class="h-8 w-8 rounded-lg">
<!--<Avatar.Image src={user.avatar} alt={user.name} />-->
<Avatar.Fallback class="rounded-lg">
<UserRound/>
<UserRound/>
</Avatar.Fallback>
</Avatar.Root>
<div class="grid flex-1 text-left text-sm leading-tight">
<UserDetails/>
<UserDetails/>
</div>
<ChevronsUpDown class="ml-auto size-4"/>
<ChevronsUpDown class="ml-auto size-4"/>
</Sidebar.MenuButton>
{/snippet}
</DropdownMenu.Trigger>
<DropdownMenu.Content
align="end"
class="w-[var(--bits-dropdown-menu-anchor-width)] min-w-56 rounded-lg"
side={sidebar.isMobile ? 'bottom' : 'right'}
sideOffset={4}
align="end"
class="w-[var(--bits-dropdown-menu-anchor-width)] min-w-56 rounded-lg"
side={sidebar.isMobile ? 'bottom' : 'right'}
sideOffset={4}
>
<DropdownMenu.Label class="p-0 font-normal">
<div class="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
<Avatar.Root class="h-8 w-8 rounded-lg">
<!--<Avatar.Image src={user.avatar} alt={user.name} />-->
<Avatar.Fallback class="rounded-lg">
<UserRound/>
<UserRound/>
</Avatar.Fallback>
</Avatar.Root>
<div class="grid flex-1 text-left text-sm leading-tight">
<UserDetails/>
<UserDetails/>
</div>
</div>
</DropdownMenu.Label>
<DropdownMenu.Separator/>
<DropdownMenu.Separator/>
<DropdownMenu.Item onclick={() => goto(base + '/dashboard/settings#me')}>
My Account
</DropdownMenu.Item>
<DropdownMenu.Separator/>
<DropdownMenu.Separator/>
<DropdownMenu.Item onclick={() => handleLogout()}>
<LogOut/>
<LogOut/>
Log out
</DropdownMenu.Item>
</DropdownMenu.Content>

3
web/src/lib/components/request-season-dialog.svelte
View File

@@ -8,9 +8,8 @@
import type {CreateSeasonRequest, PublicShow, Quality} from '$lib/types.js';
import {getFullyQualifiedShowName, getTorrentQualityString} from '$lib/utils.js';
import {toast} from 'svelte-sonner';
import {browser} from "$app/environment";
const apiUrl = env.PUBLIC_API_URL
const apiUrl = env.PUBLIC_API_URL;
let {show}: { show: PublicShow } = $props();
let dialogOpen = $state(false);

10
web/src/lib/components/season-requests-table.svelte
View File

@@ -10,7 +10,7 @@
import {goto} from '$app/navigation';
import {base} from '$app/paths';
const apiUrl = env.PUBLIC_API_URL
const apiUrl = env.PUBLIC_API_URL;
let {
requests,
filter = () => {
@@ -124,7 +124,7 @@
{request.authorized_by?.email ?? 'N/A'}
</Table.Cell>
<!-- TODO: ADD DIALOGUE TO MODIFY REQUEST -->
<Table.Cell class="flex flex-col max-w-[150px] gap-1">
<Table.Cell class="flex max-w-[150px] flex-col gap-1">
{#if user().is_superuser}
<Button
class=""
@@ -150,11 +150,9 @@
</Table.Cell>
</Table.Row>
{/if}
{:else }
{:else}
<Table.Row>
<Table.Cell colspan="8" class="text-center">
There are currently no requests.
</Table.Cell>
<Table.Cell colspan="8" class="text-center">There are currently no requests.</Table.Cell>
</Table.Row>
{/each}
</Table.Body>

17
web/src/lib/components/show-picture.svelte
View File

@@ -1,24 +1,17 @@
<script>
import {getFullyQualifiedShowName} from "$lib/utils.js";
import logo from "$lib/images/svelte-logo.svg";
import {env} from "$env/dynamic/public";
import {getFullyQualifiedShowName} from '$lib/utils.js';
import {env} from '$env/dynamic/public';
const apiUrl = env.PUBLIC_API_URL;
let {show} = $props();
</script>
<picture>
<source
srcset="{apiUrl}/static/image/{show.id}.avif"
type="image/avif"
/>
<source
srcset="{apiUrl}/static/image/{show.id}.webp"
type="image/webp"
/>
<source srcset="{apiUrl}/static/image/{show.id}.avif" type="image/avif"/>
<source srcset="{apiUrl}/static/image/{show.id}.webp" type="image/webp"/>
<img
alt="{getFullyQualifiedShowName(show)}'s Poster Image"
class="aspect-9/16 center h-auto w-full rounded-lg object-cover"
src="{apiUrl}/static/image/{show.id}.jpeg"
/>
</picture>
</picture>

26
web/src/lib/components/ui/button/button.svelte
View File

@@ -1,7 +1,7 @@
<script lang="ts" module>
import type {WithElementRef} from 'bits-ui';
import type {HTMLAnchorAttributes, HTMLButtonAttributes} from 'svelte/elements';
import {type VariantProps, tv} from 'tailwind-variants';
import type {WithElementRef} from 'bits-ui';
import type {HTMLAnchorAttributes, HTMLButtonAttributes} from 'svelte/elements';
import {type VariantProps, tv} from 'tailwind-variants';
export const buttonVariants = tv({
base: 'focus-visible:ring-ring inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
@@ -10,7 +10,7 @@
default: 'bg-primary text-primary-foreground hover:bg-primary/90 shadow',
destructive: 'bg-destructive text-destructive-foreground hover:bg-destructive/90 shadow-sm',
outline:
'border-input bg-background hover:bg-accent hover:text-accent-foreground border shadow-sm',
'border-input bg-background hover:bg-accent hover:text-accent-foreground border shadow-sm',
secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80 shadow-sm',
ghost: 'hover:bg-accent hover:text-accent-foreground',
link: 'text-primary underline-offset-4 hover:underline'
@@ -32,14 +32,14 @@
export type ButtonSize = VariantProps<typeof buttonVariants>['size'];
export type ButtonProps = WithElementRef<HTMLButtonAttributes> &
WithElementRef<HTMLAnchorAttributes> & {
variant?: ButtonVariant;
size?: ButtonSize;
};
WithElementRef<HTMLAnchorAttributes> & {
variant?: ButtonVariant;
size?: ButtonSize;
};
</script>
<script lang="ts">
import {cn} from '$lib/utils.js';
import {cn} from '$lib/utils.js';
let {
class: className,
@@ -59,10 +59,10 @@
</a>
{:else}
<button
bind:this={ref}
class={cn(buttonVariants({ variant, size }), className)}
{type}
{...restProps}
bind:this={ref}
class={cn(buttonVariants({ variant, size }), className)}
{type}
{...restProps}
>
{@render children?.()}
</button>

40
web/src/lib/components/ui/checkbox/checkbox.svelte
View File

@@ -1,35 +1,35 @@
<script lang="ts">
import {Checkbox as CheckboxPrimitive, type WithoutChildrenOrChild} from "bits-ui";
import Check from "@lucide/svelte/icons/check";
import Minus from "@lucide/svelte/icons/minus";
import {cn} from "$lib/utils.js";
import {Checkbox as CheckboxPrimitive, type WithoutChildrenOrChild} from 'bits-ui';
import Check from '@lucide/svelte/icons/check';
import Minus from '@lucide/svelte/icons/minus';
import {cn} from '$lib/utils.js';
let {
ref = $bindable(null),
class: className,
checked = $bindable(false),
indeterminate = $bindable(false),
...restProps
}: WithoutChildrenOrChild<CheckboxPrimitive.RootProps> = $props();
let {
ref = $bindable(null),
class: className,
checked = $bindable(false),
indeterminate = $bindable(false),
...restProps
}: WithoutChildrenOrChild<CheckboxPrimitive.RootProps> = $props();
</script>
<CheckboxPrimitive.Root
{...restProps}
bind:checked
bind:indeterminate
bind:ref
class={cn(
"border-primary focus-visible:ring-ring data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground peer box-content size-4 shrink-0 rounded-sm border shadow focus-visible:outline-none focus-visible:ring-1 disabled:cursor-not-allowed disabled:opacity-50 data-[disabled=true]:cursor-not-allowed data-[disabled=true]:opacity-50",
{...restProps}
bind:checked
bind:indeterminate
bind:ref
class={cn(
'peer box-content size-4 shrink-0 rounded-sm border border-primary shadow focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[disabled=true]:cursor-not-allowed data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground data-[disabled=true]:opacity-50',
className
)}
>
{#snippet children({checked, indeterminate})}
{#snippet children({checked, indeterminate})}
<span class="flex items-center justify-center text-current">
{#if indeterminate}
<Minus class="size-4"/>
{:else}
<Check class={cn("size-4", !checked && "text-transparent")}/>
<Check class={cn('size-4', !checked && 'text-transparent')}/>
{/if}
</span>
{/snippet}
{/snippet}
</CheckboxPrimitive.Root>

4
web/src/lib/components/ui/checkbox/index.ts
View File

@@ -1,7 +1,7 @@
import Root from "./checkbox.svelte";
import Root from './checkbox.svelte';
export {
Root,
//
Root as Checkbox,
Root as Checkbox
};

12
web/src/lib/components/ui/tooltip/tooltip-content.svelte
View File

@@ -1,6 +1,6 @@
<script lang="ts">
import {Tooltip as TooltipPrimitive} from 'bits-ui';
import {cn} from '$lib/utils.js';
import {Tooltip as TooltipPrimitive} from 'bits-ui';
import {cn} from '$lib/utils.js';
let {
ref = $bindable(null),
@@ -11,11 +11,11 @@
</script>
<TooltipPrimitive.Content
{...restProps}
bind:ref
class={cn(
{...restProps}
bind:ref
class={cn(
'z-50 overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
className
)}
{sideOffset}
{sideOffset}
/>

3
web/src/lib/components/user-data-table.svelte
View File

@@ -9,9 +9,8 @@
import {Label} from '$lib/components/ui/label/index.js';
import * as RadioGroup from '$lib/components/ui/radio-group/index.js';
import {Input} from '$lib/components/ui/input/index.js';
import {browser} from "$app/environment";
const apiUrl = env.PUBLIC_API_URL
const apiUrl = env.PUBLIC_API_URL;
let {users}: { users: User[] } = $props();
let sortedUsers = $derived(users.sort((a, b) => a.email.localeCompare(b.email)));
let selectedUser: User | null = $state(null);

4
web/src/lib/components/user-details.svelte
View File

@@ -1,6 +1,6 @@
<script lang="ts">
import {getContext} from 'svelte';
import type {User} from '$lib/types';
import {getContext} from 'svelte';
import type {User} from '$lib/types';
const user: () => User = getContext('user');
</script>

3
web/src/lib/components/user-settings.svelte
View File

@@ -5,9 +5,8 @@
import * as Dialog from '$lib/components/ui/dialog/index.js';
import {Label} from '$lib/components/ui/label/index.js';
import {Input} from '$lib/components/ui/input/index.js';
import {browser} from "$app/environment";
const apiUrl = env.PUBLIC_API_URL
const apiUrl = env.PUBLIC_API_URL;
let newPassword: string = $state('');
let newEmail: string = $state('');
let dialogOpen = $state(false);

2
web/src/lib/types.ts
View File

@@ -105,7 +105,6 @@ export interface Show {
id: string; // type: string, format: uuid
continuous_download: boolean;
ended: boolean;
}
export interface PublicShow {
@@ -118,7 +117,6 @@ export interface PublicShow {
id: string; // type: string, format: uuid
continuous_download: boolean;
ended: boolean;
}
export interface Torrent {

1
web/src/lib/utils.ts
View File

@@ -4,7 +4,6 @@ import {env} from '$env/dynamic/public';
import {goto} from '$app/navigation';
import {base} from '$app/paths';
import {toast} from 'svelte-sonner';
import {browser} from "$app/environment";
const apiUrl = env.PUBLIC_API_URL;

2
web/src/routes/+layout.ts
View File

@@ -1 +1 @@
export const ssr = false;
export const ssr = false;

18
web/src/routes/+page.svelte
View File

@@ -1,19 +1,15 @@
<script lang="ts">
import {goto} from '$app/navigation';
import {base} from '$app/paths';
import {onMount} from 'svelte';
import {browser} from "$app/environment";
import {redirect} from "@sveltejs/kit";
if (browser)
goto(base + '/dashboard');
else
throw redirect(307, '/login');
import {goto} from '$app/navigation';
import {base} from '$app/paths';
import {browser} from '$app/environment';
import {redirect} from '@sveltejs/kit';
if (browser) goto(base + '/dashboard');
else throw redirect(307, '/login');
</script>
<svelte:head>
<title>Home</title>
<meta content="Svelte demo app" name="description"/>
<meta content="Svelte demo app" name="description"/>
</svelte:head>
<h1>Servas</h1>

4
web/src/routes/dashboard/+layout.ts
View File

@@ -2,7 +2,7 @@ import {env} from '$env/dynamic/public';
import type {LayoutLoad} from './$types';
import {redirect} from '@sveltejs/kit';
import {base} from '$app/paths';
import {browser} from "$app/environment";
import {browser} from '$app/environment';
import {goto} from '$app/navigation';
const apiUrl = env.PUBLIC_API_URL;
@@ -23,5 +23,5 @@ export const load: LayoutLoad = async ({fetch}) => {
throw redirect(303, base + '/login');
}
}
return {user: await response.json()};
return {user: await response.json()};
};

22
web/src/routes/dashboard/+page.svelte
View File

@@ -1,26 +1,26 @@
<script lang="ts">
import {Separator} from '$lib/components/ui/separator/index.js';
import {Separator} from '$lib/components/ui/separator/index.js';
import * as Sidebar from '$lib/components/ui/sidebar/index.js';
import * as Breadcrumb from '$lib/components/ui/breadcrumb/index.js';
import RecommendedShowsCarousel from '$lib/components/recommended-shows-carousel.svelte';
import LoadingBar from '$lib/components/loading-bar.svelte';
import {base} from '$app/paths';
import {page} from '$app/state';
import type {MetaDataProviderShowSearchResult} from '$lib/types';
import {base} from '$app/paths';
import {page} from '$app/state';
import type {MetaDataProviderShowSearchResult} from '$lib/types';
let recommendedShows: Promise<MetaDataProviderShowSearchResult[]> = page.data.tvRecommendations;
</script>
<header class="flex h-16 shrink-0 items-center gap-2">
<div class="flex items-center gap-2 px-4">
<Sidebar.Trigger class="-ml-1"/>
<Separator class="mr-2 h-4" orientation="vertical"/>
<Sidebar.Trigger class="-ml-1"/>
<Separator class="mr-2 h-4" orientation="vertical"/>
<Breadcrumb.Root>
<Breadcrumb.List>
<Breadcrumb.Item class="hidden md:block">
<Breadcrumb.Link href="{base}/dashboard">MediaManager</Breadcrumb.Link>
</Breadcrumb.Item>
<Breadcrumb.Separator class="hidden md:block"/>
<Breadcrumb.Separator class="hidden md:block"/>
<Breadcrumb.Item>
<Breadcrumb.Page>Home</Breadcrumb.Page>
</Breadcrumb.Item>
@@ -33,14 +33,16 @@
Dashboard
</h1>
<div class="min-h-[100vh] flex-1 items-center justify-center rounded-xl p-4 md:min-h-min">
<div class="mx-auto max-w-[80vw] sm:max-w-[200px] md:max-w-[500px] lg:max-w-[750px] xl:max-w-[1200px]">
<div
class="mx-auto max-w-[80vw] sm:max-w-[200px] md:max-w-[500px] lg:max-w-[750px] xl:max-w-[1200px]"
>
<h3 class="my-4 scroll-m-20 text-center text-2xl font-semibold tracking-tight">
Trending Shows
</h3>
{#await recommendedShows}
<LoadingBar/>
<LoadingBar/>
{:then recommendations}
<RecommendedShowsCarousel shows={recommendations}/>
<RecommendedShowsCarousel shows={recommendations}/>
{/await}
</div>
</div>

3
web/src/routes/dashboard/+page.ts
View File

@@ -1,6 +1,5 @@
import {env} from '$env/dynamic/public';
import type {PageLoad} from './$types';
import {browser} from "$app/environment";
const apiUrl = env.PUBLIC_API_URL;
@@ -13,5 +12,5 @@ export const load: PageLoad = async ({fetch}) => {
credentials: 'include'
});
return {tvRecommendations: await response.json()};
return {tvRecommendations: await response.json()};
};

30
web/src/routes/dashboard/about/+page.svelte
View File

@@ -1,22 +1,22 @@
<script lang="ts">
import {Separator} from '$lib/components/ui/separator/index.js';
import {Separator} from '$lib/components/ui/separator/index.js';
import * as Sidebar from '$lib/components/ui/sidebar/index.js';
import * as Breadcrumb from '$lib/components/ui/breadcrumb/index.js';
import {base} from '$app/paths';
import {base} from '$app/paths';
import logo from '$lib/images/logo.svg';
import {PUBLIC_VERSION} from '$env/static/public';
import {PUBLIC_VERSION} from '$env/static/public';
</script>
<header class="flex h-16 shrink-0 items-center gap-2">
<div class="flex items-center gap-2 px-4">
<Sidebar.Trigger class="-ml-1"/>
<Separator class="mr-2 h-4" orientation="vertical"/>
<Sidebar.Trigger class="-ml-1"/>
<Separator class="mr-2 h-4" orientation="vertical"/>
<Breadcrumb.Root>
<Breadcrumb.List>
<Breadcrumb.Item class="hidden md:block">
<Breadcrumb.Link href="{base}/dashboard">MediaManager</Breadcrumb.Link>
</Breadcrumb.Item>
<Breadcrumb.Separator class="hidden md:block"/>
<Breadcrumb.Separator class="hidden md:block"/>
<Breadcrumb.Item>
<Breadcrumb.Page>About</Breadcrumb.Page>
</Breadcrumb.Item>
@@ -26,7 +26,7 @@
</header>
<div class="flex w-full flex-col items-center justify-center px-4 py-12">
<img alt="Media Manager Logo" class="mb-4 h-24 w-24" src={logo}/>
<img alt="Media Manager Logo" class="mb-4 h-24 w-24" src={logo}/>
<h1 class="mb-2 text-4xl font-bold">About Media Manager</h1>
<p class="mb-6 max-w-2xl text-center text-lg">
<strong>Media Manager</strong> is an all-in-one solution for organizing and building your media library.
@@ -39,24 +39,24 @@
<div class="my-6 mb-6 flex items-center gap-2 text-sm text-muted-foreground sm:w-1/2 lg:w-1/3">
<a class="flex items-center gap-2" href="https://www.themoviedb.org/" target="_blank">
<img
alt="TMDB Logo"
class="h-auto w-20"
src="https://www.themoviedb.org/assets/2/v4/logos/v2/blue_square_2-d537fb228cf3ded904ef09b136fe3fec72548ebc1fea3fbbd1ad9e36364db38b.svg"
alt="TMDB Logo"
class="h-auto w-20"
src="https://www.themoviedb.org/assets/2/v4/logos/v2/blue_square_2-d537fb228cf3ded904ef09b136fe3fec72548ebc1fea3fbbd1ad9e36364db38b.svg"
/>
<span
>Metadata provided by TMDB. Please consider adding missing information or subscribing.</span
>Metadata provided by TMDB. Please consider adding missing information or subscribing.</span
>
</a>
</div>
<div class="my-6 mb-6 flex items-center gap-2 text-sm text-muted-foreground sm:w-1/2 lg:w-1/3">
<a class="flex items-center gap-2" href="https://thetvdb.com/subscribe" target="_blank">
<img
alt="TheTVDB Logo"
class="h-auto w-20"
src="https://www.thetvdb.com/images/attribution/logo2.png"
alt="TheTVDB Logo"
class="h-auto w-20"
src="https://www.thetvdb.com/images/attribution/logo2.png"
/>
<span
>Metadata provided by TheTVDB. Please consider adding missing information or subscribing.</span
>Metadata provided by TheTVDB. Please consider adding missing information or subscribing.</span
>
</a>
</div>

18
web/src/routes/dashboard/settings/+page.svelte
View File

@@ -1,13 +1,13 @@
<script lang="ts">
import UserTable from '$lib/components/user-data-table.svelte';
import {page} from '$app/state';
import {page} from '$app/state';
import * as Card from '$lib/components/ui/card/index.js';
import {getContext} from 'svelte';
import {getContext} from 'svelte';
import UserSettings from '$lib/components/user-settings.svelte';
import {Separator} from '$lib/components/ui/separator';
import {Separator} from '$lib/components/ui/separator';
import * as Sidebar from '$lib/components/ui/sidebar/index.js';
import * as Breadcrumb from '$lib/components/ui/breadcrumb/index.js';
import {base} from '$app/paths';
import {base} from '$app/paths';
let currentUser = getContext('user');
let users = page.data.users;
@@ -15,14 +15,14 @@
<header class="flex h-16 shrink-0 items-center gap-2">
<div class="flex items-center gap-2 px-4">
<Sidebar.Trigger class="-ml-1"/>
<Separator class="mr-2 h-4" orientation="vertical"/>
<Sidebar.Trigger class="-ml-1"/>
<Separator class="mr-2 h-4" orientation="vertical"/>
<Breadcrumb.Root>
<Breadcrumb.List>
<Breadcrumb.Item class="hidden md:block">
<Breadcrumb.Link href="{base}/dashboard">MediaManager</Breadcrumb.Link>
</Breadcrumb.Item>
<Breadcrumb.Separator class="hidden md:block"/>
<Breadcrumb.Separator class="hidden md:block"/>
<Breadcrumb.Item>
<Breadcrumb.Page>Settings</Breadcrumb.Page>
</Breadcrumb.Item>
@@ -41,7 +41,7 @@
<Card.Description>Change your email or password</Card.Description>
</Card.Header>
<Card.Content>
<UserSettings/>
<UserSettings/>
</Card.Content>
</Card.Root>
{#if currentUser().is_superuser}
@@ -51,7 +51,7 @@
<Card.Description>Edit or delete users</Card.Description>
</Card.Header>
<Card.Content>
<UserTable bind:users/>
<UserTable bind:users/>
</Card.Content>
</Card.Root>
{/if}

1
web/src/routes/dashboard/settings/+page.ts
View File

@@ -1,6 +1,5 @@
import {env} from '$env/dynamic/public';
import type {PageLoad} from './$types';
import {browser} from "$app/environment";
const apiUrl = env.PUBLIC_API_URL;
export const load: PageLoad = async ({fetch}) => {

12
web/src/routes/dashboard/tv/+page.svelte
View File

@@ -1,16 +1,13 @@
<script lang="ts">
import {page} from '$app/state';
import * as Card from '$lib/components/ui/card/index.js';
import {env} from '$env/dynamic/public';
import {Separator} from '$lib/components/ui/separator/index.js';
import * as Sidebar from '$lib/components/ui/sidebar/index.js';
import * as Breadcrumb from '$lib/components/ui/breadcrumb/index.js';
import {getFullyQualifiedShowName} from '$lib/utils';
import logo from '$lib/images/svelte-logo.svg';
import LoadingBar from '$lib/components/loading-bar.svelte';
import ShowPicture from "$lib/components/show-picture.svelte";
import ShowPicture from '$lib/components/show-picture.svelte';
const apiUrl = env.PUBLIC_API_URL
let tvShowsPromise = page.data.tvShows;
</script>
@@ -63,15 +60,12 @@
<Card.Description class="truncate">{show.overview}</Card.Description>
</Card.Header>
<Card.Content>
<ShowPicture show={show}/>
<ShowPicture {show}/>
</Card.Content>
</Card.Root>
</a>
{:else}
<div class="col-span-full text-center text-muted-foreground">
No TV shows added yet.
</div>
<div class="col-span-full text-center text-muted-foreground">No TV shows added yet.</div>
{/each}
{/await}
{/await}

2
web/src/routes/dashboard/tv/+page.ts
View File

@@ -12,5 +12,5 @@ export const load: PageLoad = async ({fetch}) => {
credentials: 'include'
});
return {tvShows: response};
return {tvShows: response};
};

6
web/src/routes/dashboard/tv/[showId=uuid]/+layout.svelte
View File

@@ -1,8 +1,8 @@
<script lang="ts">
import {setContext} from 'svelte';
import type {LayoutProps} from './$types';
import {setContext} from 'svelte';
import type {LayoutProps} from './$types';
let {data, children}: LayoutProps = $props();
let {data, children}: LayoutProps = $props();
const showData = $derived(data.showData);
setContext('show', () => showData);

1
web/src/routes/dashboard/tv/[showId=uuid]/+layout.ts
View File

@@ -1,6 +1,5 @@
import {env} from '$env/dynamic/public';
import type {LayoutLoad} from './$types';
import {browser} from "$app/environment";
const apiUrl = env.PUBLIC_API_URL;
export const load: LayoutLoad = async ({params, fetch}) => {

298
web/src/routes/dashboard/tv/[showId=uuid]/+page.svelte
View File

@@ -1,159 +1,159 @@
<script lang="ts">
import {env} from '$env/dynamic/public';
import {Separator} from '$lib/components/ui/separator/index.js';
import * as Sidebar from '$lib/components/ui/sidebar/index.js';
import * as Breadcrumb from '$lib/components/ui/breadcrumb/index.js';
import {goto} from '$app/navigation';
import {ImageOff} from 'lucide-svelte';
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 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 {browser} from "$app/environment";
import ShowPicture from "$lib/components/show-picture.svelte";
import {Checkbox} from "$lib/components/ui/checkbox/index.js";
import {toast} from 'svelte-sonner';
import {Label} from "$lib/components/ui/label";
import {env} from '$env/dynamic/public';
import {Separator} from '$lib/components/ui/separator/index.js';
import * as Sidebar from '$lib/components/ui/sidebar/index.js';
import * as Breadcrumb from '$lib/components/ui/breadcrumb/index.js';
import {goto} from '$app/navigation';
import {ImageOff} from 'lucide-svelte';
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 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 {Checkbox} from '$lib/components/ui/checkbox/index.js';
import {toast} from 'svelte-sonner';
import {Label} from '$lib/components/ui/label';
const apiUrl = env.PUBLIC_API_URL
let show: () => Show = getContext('show');
let user: () => User = getContext('user');
let torrents: RichShowTorrent = page.data.torrentsData;
const apiUrl = env.PUBLIC_API_URL;
let show: () => Show = getContext('show');
let user: () => User = getContext('user');
let torrents: RichShowTorrent = page.data.torrentsData;
async function toggle_continuous_download() {
let url = new URL(apiUrl + "/tv/shows/" + show().id + "/continuousDownload");
url.searchParams.append('continuous_download', !show().continuous_download);
console.log("Toggling continuous download for show", show().name, "to", !show().continuous_download);
const response = await fetch(url, {
method: 'POST',
credentials: 'include'
});
if (!response.ok) {
const errorText = await response.text();
toast.error("Failed to toggle continuous download: " + errorText);
} else {
show().continuous_download = !show().continuous_download;
toast.success("Continuous download toggled successfully.");
}
}
async function toggle_continuous_download() {
let url = new URL(apiUrl + '/tv/shows/' + show().id + '/continuousDownload');
url.searchParams.append('continuous_download', !show().continuous_download);
console.log(
'Toggling continuous download for show',
show().name,
'to',
!show().continuous_download
);
const response = await fetch(url, {
method: 'POST',
credentials: 'include'
});
if (!response.ok) {
const errorText = await response.text();
toast.error('Failed to toggle continuous download: ' + errorText);
} else {
show().continuous_download = !show().continuous_download;
toast.success('Continuous download toggled successfully.');
}
}
</script>
<header class="flex h-16 shrink-0 items-center gap-2">
<div class="flex items-center gap-2 px-4">
<Sidebar.Trigger class="-ml-1"/>
<Separator class="mr-2 h-4" orientation="vertical"/>
<Breadcrumb.Root>
<Breadcrumb.List>
<Breadcrumb.Item class="hidden md:block">
<Breadcrumb.Link href="/dashboard">MediaManager</Breadcrumb.Link>
</Breadcrumb.Item>
<Breadcrumb.Separator class="hidden md:block"/>
<Breadcrumb.Item>
<Breadcrumb.Link href="/dashboard">Home</Breadcrumb.Link>
</Breadcrumb.Item>
<Breadcrumb.Separator class="hidden md:block"/>
<Breadcrumb.Item>
<Breadcrumb.Link href="/dashboard/tv">Shows</Breadcrumb.Link>
</Breadcrumb.Item>
<Breadcrumb.Separator class="hidden md:block"/>
<Breadcrumb.Item>
<Breadcrumb.Page>{getFullyQualifiedShowName(show())}</Breadcrumb.Page>
</Breadcrumb.Item>
</Breadcrumb.List>
</Breadcrumb.Root>
</div>
<div class="flex items-center gap-2 px-4">
<Sidebar.Trigger class="-ml-1"/>
<Separator class="mr-2 h-4" orientation="vertical"/>
<Breadcrumb.Root>
<Breadcrumb.List>
<Breadcrumb.Item class="hidden md:block">
<Breadcrumb.Link href="/dashboard">MediaManager</Breadcrumb.Link>
</Breadcrumb.Item>
<Breadcrumb.Separator class="hidden md:block"/>
<Breadcrumb.Item>
<Breadcrumb.Link href="/dashboard">Home</Breadcrumb.Link>
</Breadcrumb.Item>
<Breadcrumb.Separator class="hidden md:block"/>
<Breadcrumb.Item>
<Breadcrumb.Link href="/dashboard/tv">Shows</Breadcrumb.Link>
</Breadcrumb.Item>
<Breadcrumb.Separator class="hidden md:block"/>
<Breadcrumb.Item>
<Breadcrumb.Page>{getFullyQualifiedShowName(show())}</Breadcrumb.Page>
</Breadcrumb.Item>
</Breadcrumb.List>
</Breadcrumb.Root>
</div>
</header>
<h1 class="scroll-m-20 text-center text-4xl font-extrabold tracking-tight lg:text-5xl">
{getFullyQualifiedShowName(show())}
{getFullyQualifiedShowName(show())}
</h1>
<div class="flex flex-1 w-full flex-col gap-4 p-4">
<div class="flex flex-col md:flex-row md:items-stretch gap-4">
<div class="w-full md:w-1/3 md:max-w-sm rounded-xl bg-muted/50 overflow-hidden">
{#if show().id}
<ShowPicture show={show()}/>
{:else}
<div
class="aspect-9/16 flex h-auto w-full items-center justify-center rounded-lg bg-gray-200 text-gray-500"
>
<ImageOff size={48}/>
</div>
{/if}
</div>
<div class="w-full md:w-1/4 flex-auto rounded-xl bg-muted/50 p-4">
<p class="leading-7 [&:not(:first-child)]:mt-6">
{show().overview}
</p>
</div>
<div
class="w-full md:w-1/3 flex-auto rounded-xl bg-muted/50 p-4"
>
{#if user().is_superuser}
{#if !show().ended}
<div class="my-2 mx-1 block">
<Checkbox
checked={show().continuous_download}
onCheckedChange={() => {
toggle_continuous_download()
}}
id="continuous-download-checkbox"
/>
<Label for="continuous-download-checkbox">
Enable automatic download of future seasons
</Label>
<hr>
</div>
{/if}
<DownloadSeasonDialog show={show()}/>
{/if}
<RequestSeasonDialog show={show()}/>
</div>
</div>
<div class="flex-1 rounded-xl bg-muted/50 p-4">
<div class="w-full overflow-x-auto">
<Table.Root>
<Table.Caption>A list of all seasons.</Table.Caption>
<Table.Header>
<Table.Row>
<Table.Head>Number</Table.Head>
<Table.Head>Exists on file</Table.Head>
<Table.Head>Title</Table.Head>
<Table.Head>Overview</Table.Head>
</Table.Row>
</Table.Header>
<Table.Body>
{#if show().seasons.length > 0}
{#each show().seasons as season (season.id)}
<Table.Row
link={true}
onclick={() => goto('/dashboard/tv/' + show().id + '/' + season.id)}
>
<Table.Cell class="min-w-[10px] font-medium">{season.number}</Table.Cell>
<Table.Cell class="min-w-[10px] font-medium">
<CheckmarkX state={season.downloaded}/>
</Table.Cell>
<Table.Cell class="min-w-[50px]">{season.name}</Table.Cell>
<Table.Cell class="max-w-[300px] truncate">{season.overview}</Table.Cell>
</Table.Row>
{/each}
{:else}
<Table.Row>
<Table.Cell colspan="3" class="text-center">No season data available.</Table.Cell>
</Table.Row>
{/if}
</Table.Body>
</Table.Root>
</div>
</div>
<div class="flex-1 rounded-xl bg-muted/50 p-4">
<div class="w-full overflow-x-auto">
<TorrentTable torrents={torrents.torrents}/>
</div>
</div>
<div class="flex w-full flex-1 flex-col gap-4 p-4">
<div class="flex flex-col gap-4 md:flex-row md:items-stretch">
<div class="w-full overflow-hidden rounded-xl bg-muted/50 md:w-1/3 md:max-w-sm">
{#if show().id}
<ShowPicture show={show()}/>
{:else}
<div
class="aspect-9/16 flex h-auto w-full items-center justify-center rounded-lg bg-gray-200 text-gray-500"
>
<ImageOff size={48}/>
</div>
{/if}
</div>
<div class="w-full flex-auto rounded-xl bg-muted/50 p-4 md:w-1/4">
<p class="leading-7 [&:not(:first-child)]:mt-6">
{show().overview}
</p>
</div>
<div class="w-full flex-auto rounded-xl bg-muted/50 p-4 md:w-1/3">
{#if user().is_superuser}
{#if !show().ended}
<div class="mx-1 my-2 block">
<Checkbox
checked={show().continuous_download}
onCheckedChange={() => {
toggle_continuous_download();
}}
id="continuous-download-checkbox"
/>
<Label for="continuous-download-checkbox">
Enable automatic download of future seasons
</Label>
<hr/>
</div>
{/if}
<DownloadSeasonDialog show={show()}/>
{/if}
<RequestSeasonDialog show={show()}/>
</div>
</div>
<div class="flex-1 rounded-xl bg-muted/50 p-4">
<div class="w-full overflow-x-auto">
<Table.Root>
<Table.Caption>A list of all seasons.</Table.Caption>
<Table.Header>
<Table.Row>
<Table.Head>Number</Table.Head>
<Table.Head>Exists on file</Table.Head>
<Table.Head>Title</Table.Head>
<Table.Head>Overview</Table.Head>
</Table.Row>
</Table.Header>
<Table.Body>
{#if show().seasons.length > 0}
{#each show().seasons as season (season.id)}
<Table.Row
link={true}
onclick={() => goto('/dashboard/tv/' + show().id + '/' + season.id)}
>
<Table.Cell class="min-w-[10px] font-medium">{season.number}</Table.Cell>
<Table.Cell class="min-w-[10px] font-medium">
<CheckmarkX state={season.downloaded}/>
</Table.Cell>
<Table.Cell class="min-w-[50px]">{season.name}</Table.Cell>
<Table.Cell class="max-w-[300px] truncate">{season.overview}</Table.Cell>
</Table.Row>
{/each}
{:else}
<Table.Row>
<Table.Cell colspan="3" class="text-center">No season data available.</Table.Cell>
</Table.Row>
{/if}
</Table.Body>
</Table.Root>
</div>
</div>
<div class="flex-1 rounded-xl bg-muted/50 p-4">
<div class="w-full overflow-x-auto">
<TorrentTable torrents={torrents.torrents}/>
</div>
</div>
</div>

12
web/src/routes/dashboard/tv/[showId=uuid]/[SeasonId=uuid]/+page.svelte
View File

@@ -8,10 +8,8 @@
import type {PublicSeasonFile, Season, Show} from '$lib/types';
import CheckmarkX from '$lib/components/checkmark-x.svelte';
import {getFullyQualifiedShowName, getTorrentQualityString} from '$lib/utils';
import {env} from "$env/dynamic/public";
import ShowPicture from "$lib/components/show-picture.svelte";
import ShowPicture from '$lib/components/show-picture.svelte';
const apiUrl = env.PUBLIC_API_URL
let seasonFiles: PublicSeasonFile[] = $state(page.data.files);
let season: Season = $state(page.data.season);
let show: Show = getContext('show');
@@ -55,16 +53,16 @@
{getFullyQualifiedShowName(show())} Season {season.number}
</h1>
<div class="flex flex-1 flex-col gap-4 p-4">
<div class="flex flex-col md:flex-row md:items-stretch gap-4">
<div class="w-full md:w-1/3 md:max-w-sm rounded-xl bg-muted/50 overflow-hidden">
<div class="flex flex-col gap-4 md:flex-row md:items-stretch">
<div class="w-full overflow-hidden rounded-xl bg-muted/50 md:w-1/3 md:max-w-sm">
<ShowPicture show={show()}/>
</div>
<div class="w-full md:w-1/4 flex-auto rounded-xl bg-muted/50 p-4">
<div class="w-full flex-auto rounded-xl bg-muted/50 p-4 md:w-1/4">
<p class="leading-7 [&:not(:first-child)]:mt-6">
{show().overview}
</p>
</div>
<div class="w-full md:w-1/3 flex-auto rounded-xl bg-muted/50 p-4">
<div class="w-full flex-auto rounded-xl bg-muted/50 p-4 md:w-1/3">
<Table.Root>
<Table.Caption>A list of all downloaded/downloading versions of this season.</Table.Caption>
<Table.Header>

3
web/src/routes/dashboard/tv/[showId=uuid]/[SeasonId=uuid]/+page.ts
View File

@@ -1,6 +1,5 @@
import {env} from '$env/dynamic/public';
import type {PageLoad} from './$types';
import {browser} from "$app/environment";
const apiUrl = env.PUBLIC_API_URL;
@@ -8,7 +7,6 @@ export const load: PageLoad = async ({fetch, params}) => {
const url = `${apiUrl}/tv/seasons/${params.SeasonId}/files`;
const url2 = `${apiUrl}/tv/seasons/${params.SeasonId}`;
try {
console.log(`Fetching data from: ${url} and ${url2}`);
const response = await fetch(url, {
@@ -30,7 +28,6 @@ export const load: PageLoad = async ({fetch, params}) => {
console.error(`API request failed with status ${response.status}: ${errorText}`);
}
const filesData = await response.json();
const seasonData = await response2.json();
console.log('received season_files data: ', filesData);

5
web/src/routes/dashboard/tv/add-show/+page.svelte
View File

@@ -12,9 +12,8 @@
import * as RadioGroup from '$lib/components/ui/radio-group/index.js';
import AddShowCard from '$lib/components/add-show-card.svelte';
import {toast} from 'svelte-sonner';
import {browser} from "$app/environment";
const apiUrl = env.PUBLIC_API_URL
const apiUrl = env.PUBLIC_API_URL;
let searchTerm: string = $state('');
let metadataProvider: string = $state('tmdb');
let results: MetaDataProviderShowSearchResult[] | null = $state(null);
@@ -80,7 +79,7 @@
</div>
</header>
<div class="flex w-full flex-1 max-w-[90vw] flex-col items-center gap-4 p-4 pt-0">
<div class="flex w-full max-w-[90vw] flex-1 flex-col items-center gap-4 p-4 pt-0">
<div class="grid w-full max-w-sm items-center gap-12">
<h1 class="scroll-m-20 text-center text-4xl font-extrabold tracking-tight lg:text-5xl">
Add a show

1
web/src/routes/dashboard/tv/requests/+layout.ts
View File

@@ -1,6 +1,5 @@
import {env} from '$env/dynamic/public';
import type {LayoutLoad} from './$types';
import {browser} from "$app/environment";
const apiUrl = env.PUBLIC_API_URL;
export const load: LayoutLoad = async ({fetch}) => {

24
web/src/routes/dashboard/tv/torrents/+page.svelte
View File

@@ -1,10 +1,10 @@
<script lang="ts">
import {page} from '$app/state';
import {Separator} from '$lib/components/ui/separator/index.js';
import {page} from '$app/state';
import {Separator} from '$lib/components/ui/separator/index.js';
import * as Sidebar from '$lib/components/ui/sidebar/index.js';
import * as Breadcrumb from '$lib/components/ui/breadcrumb/index.js';
import type {RichShowTorrent} from '$lib/types';
import {getFullyQualifiedShowName} from '$lib/utils';
import type {RichShowTorrent} from '$lib/types';
import {getFullyQualifiedShowName} from '$lib/utils';
import * as Accordion from '$lib/components/ui/accordion/index.js';
import * as Card from '$lib/components/ui/card/index.js';
import TorrentTable from '$lib/components/torrent-table.svelte';
@@ -14,22 +14,22 @@
<header class="flex h-16 shrink-0 items-center gap-2">
<div class="flex items-center gap-2 px-4">
<Sidebar.Trigger class="-ml-1"/>
<Separator class="mr-2 h-4" orientation="vertical"/>
<Sidebar.Trigger class="-ml-1"/>
<Separator class="mr-2 h-4" orientation="vertical"/>
<Breadcrumb.Root>
<Breadcrumb.List>
<Breadcrumb.Item class="hidden md:block">
<Breadcrumb.Link href="/dashboard">MediaManager</Breadcrumb.Link>
</Breadcrumb.Item>
<Breadcrumb.Separator class="hidden md:block"/>
<Breadcrumb.Separator class="hidden md:block"/>
<Breadcrumb.Item>
<Breadcrumb.Link href="/dashboard">Home</Breadcrumb.Link>
</Breadcrumb.Item>
<Breadcrumb.Separator class="hidden md:block"/>
<Breadcrumb.Separator class="hidden md:block"/>
<Breadcrumb.Item>
<Breadcrumb.Link href="/dashboard/tv">Shows</Breadcrumb.Link>
</Breadcrumb.Item>
<Breadcrumb.Separator class="hidden md:block"/>
<Breadcrumb.Separator class="hidden md:block"/>
<Breadcrumb.Item>
<Breadcrumb.Page>TV Torrents</Breadcrumb.Page>
</Breadcrumb.Item>
@@ -55,14 +55,12 @@
</Card.Title>
</Card.Header>
<Card.Content>
<TorrentTable torrents={show.torrents}/>
<TorrentTable torrents={show.torrents}/>
</Card.Content>
</Card.Root>
</div>
{:else}
<div class="col-span-full text-center text-muted-foreground">
No Torrents added yet.
</div>
<div class="col-span-full text-center text-muted-foreground">No Torrents added yet.</div>
{/each}
</Accordion.Root>
{/await}

3
web/src/routes/dashboard/tv/torrents/+page.ts
View File

@@ -1,6 +1,5 @@
import {env} from '$env/dynamic/public';
import type {PageLoad} from './$types';
import {browser} from "$app/environment";
const apiUrl = env.PUBLIC_API_URL;
@@ -9,5 +8,5 @@ export const load: PageLoad = async ({fetch}) => {
method: 'GET',
credentials: 'include'
});
return {shows: response.json()};
return {shows: response.json()};
};

1
web/src/routes/login/+page.ts
View File

@@ -1,6 +1,5 @@
import {env} from '$env/dynamic/public';
import type {PageLoad} from './$types';
import {browser} from "$app/environment";
const apiUrl = env.PUBLIC_API_URL;