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

format files

Browse Source
This commit is contained in:
maxDorninger
2025-08-11 21:40:02 +02:00
parent dfa58b8f71
commit b2973cf2f2
15 changed files with 112 additions and 117 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
web/src/lib/hooks/is-mobile.svelte.ts
View File

@@ -1,4 +1,4 @@
import { MediaQuery } from "svelte/reactivity";
import { MediaQuery } from 'svelte/reactivity';
const MOBILE_BREAKPOINT = 768;

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

@@ -5,13 +5,12 @@ import { goto } from '$app/navigation';
import { base } from '$app/paths';
import { toast } from 'svelte-sonner';
// eslint-disable-next-line @typescript-eslint/no-explicit-any
export type WithoutChild<T> = T extends { child?: any } ? Omit<T, "child"> : T;
export type WithoutChild<T> = T extends { child?: any } ? Omit<T, 'child'> : T;
// eslint-disable-next-line @typescript-eslint/no-explicit-any
export type WithoutChildren<T> = T extends { children?: any } ? Omit<T, "children"> : T;
export type WithoutChildren<T> = T extends { children?: any } ? Omit<T, 'children'> : T;
export type WithoutChildrenOrChild<T> = WithoutChildren<WithoutChild<T>>;
export type WithElementRef<T, U extends HTMLElement = HTMLElement> = T & { ref?: U | null };
const apiUrl = env.PUBLIC_API_URL;
export const qualityMap: { [key: number]: string } = {

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

@@ -33,15 +33,15 @@
</div>
</header>
<main class="mx-auto flex w-full flex-1 flex-col gap-4 items-center p-4 md:max-w-[80em]">
<main class="mx-auto flex w-full flex-1 flex-col items-center gap-4 p-4 md:max-w-[80em]">
<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 mt-10 max-w-2xl text-center text-lg">
<p class="mt-10 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.
Built for simplicity and modernity, it helps you keep track of your favorite shows and movies and
explore trending content—all in one place.
</p>
<p class="mb-2 text-sm text-muted-foreground">
<p class="text-muted-foreground mb-2 text-sm">
Version: v{PUBLIC_VERSION}
</p>
<h2
@@ -80,7 +80,7 @@
Metadata sources of MediaManager
</h2>
<div class="my-6 mb-6 flex items-center gap-2 text-sm text-muted-foreground sm:w-1/2 lg:w-1/3">
<div class="text-muted-foreground my-6 mb-6 flex items-center gap-2 text-sm 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"
@@ -92,7 +92,7 @@
>
</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">
<div class="text-muted-foreground my-6 mb-6 flex items-center gap-2 text-sm 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"

4
web/src/routes/dashboard/movies/[movieId=uuid]/+page.svelte
View File

@@ -59,12 +59,12 @@
</h1>
<main class="mx-auto flex w-full flex-1 flex-col gap-4 p-4 md:max-w-[80em]">
<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">
<div class="bg-muted/50 w-full overflow-hidden rounded-xl md:w-1/3 md:max-w-sm">
{#if movie.id}
<MediaPicture media={movie} />
{:else}
<div
class="aspect-9/16 flex h-auto w-full items-center justify-center rounded-lg bg-gray-200 text-gray-500"
class="flex aspect-9/16 h-auto w-full items-center justify-center rounded-lg bg-gray-200 text-gray-500"
>
<ImageOff size={48} />
</div>

2
web/src/routes/dashboard/movies/add-movie/+page.svelte
View File

@@ -105,7 +105,7 @@
<section>
<Label for="search-box">Movie Name</Label>
<Input bind:value={searchTerm} id="search-box" placeholder="Show Name" type="text" />
<p class="text-sm text-muted-foreground">Search for a Movie to add.</p>
<p class="text-muted-foreground text-sm">Search for a Movie to add.</p>
</section>
<section>
<Collapsible.Root class="w-full space-y-1">

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

@@ -96,12 +96,12 @@
</h1>
<main class="mx-auto flex w-full flex-1 flex-col gap-4 p-4 md:max-w-[80em]">
<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">
<div class="bg-muted/50 w-full overflow-hidden rounded-xl md:w-1/3 md:max-w-sm">
{#if show().id}
<MediaPicture media={show()} />
{:else}
<div
class="aspect-9/16 flex h-auto w-full items-center justify-center rounded-lg bg-gray-200 text-gray-500"
class="flex aspect-9/16 h-auto w-full items-center justify-center rounded-lg bg-gray-200 text-gray-500"
>
<ImageOff size={48} />
</div>

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

@@ -66,7 +66,7 @@
</h1>
<main class="mx-auto flex w-full flex-1 flex-col gap-4 p-4 md:max-w-[80em]">
<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">
<div class="bg-muted/50 w-full overflow-hidden rounded-xl md:w-1/3 md:max-w-sm">
<MediaPicture media={show()} />
</div>
<div class="h-full w-full flex-auto rounded-xl md:w-1/4">

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

@@ -105,7 +105,7 @@
<section>
<Label for="search-box">Show Name</Label>
<Input bind:value={searchTerm} id="search-box" placeholder="Show Name" type="text" />
<p class="text-sm text-muted-foreground">Search for a Show to add.</p>
<p class="text-muted-foreground text-sm">Search for a Show to add.</p>
</section>
<section>
<Collapsible.Root class="w-full space-y-1">

115
web/src/routes/login/+layout.svelte
View File

@@ -1,60 +1,69 @@
<script lang="ts">
import logo from "$lib/images/logo.svg";
import { Separator } from "$lib/components/ui/separator/index.js";
import logo from '$lib/images/logo.svg';
import { Separator } from '$lib/components/ui/separator/index.js';
import background from '$lib/images/pawel-czerwinski-NTYYL9Eb9y8-unsplash.jpg?enhanced';
import { PUBLIC_VERSION } from '$env/static/public';
import { base } from '$app/paths';
import { page } from '$app/state';
import {setContext} from "svelte";
import background from '$lib/images/pawel-czerwinski-NTYYL9Eb9y8-unsplash.jpg?enhanced';
import { PUBLIC_VERSION } from '$env/static/public';
import { base } from '$app/paths';
import { page } from '$app/state';
import { setContext } from 'svelte';
setContext("oauthProvider", () => page.data.oauthProvider)
let { children } = $props();
setContext('oauthProvider', () => page.data.oauthProvider);
let { children } = $props();
</script>
<div class="grid min-h-svh lg:grid-cols-2">
<div class="flex flex-col gap-4 p-6 md:p-10">
<header class="flex justify-center gap-2 md:justify-start">
<a class="flex items-center gap-2 " href="{base}/">
<div class="flex size-16 items-center justify-center rounded-md text-primary-foreground">
<img alt="MediaManager Logo" class="size-12" src={logo} />
</div>
<div>
<h1 class="text-2xl font-bold">Media Manager</h1>
<span class="truncate text-xs">{PUBLIC_VERSION}</span>
</div>
</a>
</header>
<main class="flex flex-1 items-center justify-center">
<div class="w-full max-w-[90vw]">
{@render children()}
</div>
</main>
<div class="flex flex-col items-center justify-center gap-3 text-center">
<a target="_blank" class="underline" href="https://maxdorninger.github.io/MediaManager/troubleshooting.html">
Trouble logging in?
</a>
<footer
class="flex flex-wrap items-center justify-center gap-x-3 gap-y-1 text-sm text-muted-foreground"
>
<a target="_blank" class="underline" href="https://github.com/maxdorninger/MediaManager">GitHub</a>
<Separator class="h-4" orientation="vertical" />
<a target="_blank" class="underline" href="https://github.com/sponsors/maxdorninger">Donate</a>
<Separator class="h-4" orientation="vertical" />
<a target="_blank"
class="underline"
href="https://unsplash.com/photos/blue-white-and-red-abstract-painting-NTYYL9Eb9y8"
>
Image Credit
</a>
</footer>
</div>
</div>
<div class="relative hidden lg:block">
<enhanced:img
src={background}
alt="background"
class="absolute inset-0 h-full w-full rounded-l-3xl object-cover dark:brightness-[0.8]"
/>
</div>
<div class="flex flex-col gap-4 p-6 md:p-10">
<header class="flex justify-center gap-2 md:justify-start">
<a class="flex items-center gap-2" href="{base}/">
<div class="text-primary-foreground flex size-16 items-center justify-center rounded-md">
<img alt="MediaManager Logo" class="size-12" src={logo} />
</div>
<div>
<h1 class="text-2xl font-bold">Media Manager</h1>
<span class="truncate text-xs">{PUBLIC_VERSION}</span>
</div>
</a>
</header>
<main class="flex flex-1 items-center justify-center">
<div class="w-full max-w-[90vw]">
{@render children()}
</div>
</main>
<div class="flex flex-col items-center justify-center gap-3 text-center">
<a
target="_blank"
class="underline"
href="https://maxdorninger.github.io/MediaManager/troubleshooting.html"
>
Trouble logging in?
</a>
<footer
class="text-muted-foreground flex flex-wrap items-center justify-center gap-x-3 gap-y-1 text-sm"
>
<a target="_blank" class="underline" href="https://github.com/maxdorninger/MediaManager"
>GitHub</a
>
<Separator class="h-4" orientation="vertical" />
<a target="_blank" class="underline" href="https://github.com/sponsors/maxdorninger"
>Donate</a
>
<Separator class="h-4" orientation="vertical" />
<a
target="_blank"
class="underline"
href="https://unsplash.com/photos/blue-white-and-red-abstract-painting-NTYYL9Eb9y8"
>
Image Credit
</a>
</footer>
</div>
</div>
<div class="relative hidden lg:block">
<enhanced:img
src={background}
alt="background"
class="absolute inset-0 h-full w-full rounded-l-3xl object-cover dark:brightness-[0.8]"
/>
</div>
</div>

24
web/src/routes/login/+layout.ts
View File

@@ -1,16 +1,16 @@
import type {LayoutLoad} from './$types';
import {env} from '$env/dynamic/public';
import type { LayoutLoad } from './$types';
import { env } from '$env/dynamic/public';
const apiUrl = env.PUBLIC_API_URL;
export const load: LayoutLoad = async ({fetch}) => {
const response = await fetch(apiUrl + '/auth/metadata', {
method: 'GET',
headers: {
'Content-Type': 'application/json'
},
credentials: 'include'
});
export const load: LayoutLoad = async ({ fetch }) => {
const response = await fetch(apiUrl + '/auth/metadata', {
method: 'GET',
headers: {
'Content-Type': 'application/json'
},
credentials: 'include'
});
return {oauthProvider: await response.json()};
};
return { oauthProvider: await response.json() };
};

6
web/src/routes/login/+page.svelte
View File

@@ -1,8 +1,8 @@
<script lang="ts">
import LoginCard from '$lib/components/login-card.svelte';
import {getContext} from "svelte";
import { getContext } from 'svelte';
let oauthProvider: () => {oauth_name: string} = getContext("oauthProvider");
let oauthProvider: () => { oauth_name: string } = getContext('oauthProvider');
</script>
<svelte:head>
@@ -15,4 +15,4 @@
<main>
<LoginCard oauthProvider={oauthProvider()} />
</main>
</main>

13
web/src/routes/login/forgot-password/+page.svelte
View File

@@ -70,10 +70,9 @@
<CardTitle class="text-2xl">Forgot Password</CardTitle>
<CardDescription>
{#if isSuccess}
We've sent a password reset link to your email address if a SMTP server is
configured. Check your inbox and follow the instructions to reset your password. If
you didn't receive an email, please contact an administrator, the reset link will be
in the logs of MediaManager.
We've sent a password reset link to your email address if a SMTP server is configured. Check
your inbox and follow the instructions to reset your password. If you didn't receive an
email, please contact an administrator, the reset link will be in the logs of MediaManager.
{:else}
Enter your email address and we'll send you a link to reset your password.
{/if}
@@ -87,7 +86,7 @@
Password reset email sent successfully!
</p>
</div>
<div class="text-center text-sm text-muted-foreground">
<div class="text-muted-foreground text-center text-sm">
<p>Didn't receive the email? Check your spam folder or</p>
<button
class="text-primary hover:underline"
@@ -123,9 +122,7 @@
</form>
{/if}
<div class="mt-4 text-center text-sm">
<a href="{base}/login" class="font-semibold text-primary hover:underline">
Back to Login
</a>
<a href="{base}/login" class="text-primary font-semibold hover:underline"> Back to Login </a>
</div>
</CardContent>
</Card>

12
web/src/routes/login/reset-password/+page.svelte
View File

@@ -110,11 +110,7 @@
minlength={1}
/>
</div>
<Button
type="submit"
class="w-full"
disabled={isLoading || !newPassword || !confirmPassword}
>
<Button type="submit" class="w-full" disabled={isLoading || !newPassword || !confirmPassword}>
{#if isLoading}
Resetting Password...
{:else}
@@ -123,10 +119,8 @@
</Button>
</form>
<div class="mt-4 text-center text-sm">
<a href="{base}/login" class="font-semibold text-primary hover:underline">
Back to Login
</a>
<span class="mx-2 text-muted-foreground">•</span>
<a href="{base}/login" class="text-primary font-semibold hover:underline"> Back to Login </a>
<span class="text-muted-foreground mx-2">•</span>
<a href="{base}/login/forgot-password" class="text-primary hover:underline">
Request New Reset Link
</a>

15
web/src/routes/login/signup/+page.svelte
View File

@@ -1,16 +1,13 @@
<script lang="ts">
import SignupCard from "$lib/components/signup-card.svelte";
import {getContext} from "svelte";
import SignupCard from '$lib/components/signup-card.svelte';
import { getContext } from 'svelte';
let oauthProvider: () => {oauth_name: string} = getContext("oauthProvider");
let oauthProvider: () => { oauth_name: string } = getContext('oauthProvider');
</script>
<svelte:head>
<title>Login - MediaManager</title>
<meta
content="Signup - MediaManager"
name="description"
/>
<title>Login - MediaManager</title>
<meta content="Signup - MediaManager" name="description" />
</svelte:head>
<SignupCard oauthProvider={oauthProvider()}/>
<SignupCard oauthProvider={oauthProvider()} />

13
web/src/routes/login/verify/+page.svelte
View File

@@ -10,27 +10,26 @@
<meta content="Verify your MediaManager account to complete registration" name="description" />
</svelte:head>
<div class="absolute right-4 top-4">
<div class="absolute top-4 right-4">
<Button onclick={() => handleLogout()} variant="outline">Logout</Button>
</div>
<div class="mx-auto w-full max-w-md text-center">
<div class="mb-6">
<UserCheck class="mx-auto h-16 w-16 text-primary" />
<UserCheck class="text-primary mx-auto h-16 w-16" />
</div>
<h1 class="mt-4 text-3xl font-bold tracking-tight text-foreground sm:text-4xl">
<h1 class="text-foreground mt-4 text-3xl font-bold tracking-tight sm:text-4xl">
Account Pending Activation
</h1>
<p class="mt-4 text-lg text-muted-foreground">
<p class="text-muted-foreground mt-4 text-lg">
Your account has been successfully created, but activation by an administrator is required.
</p>
<div class="mt-8">
<Button href="{base}/dashboard">Go to Dashboard</Button>
</div>
<p class="mt-10 text-sm text-muted-foreground">
<p class="text-muted-foreground mt-10 text-sm">
The above button will only work once your account is verified.
</p>
<p class="end mt-10 text-sm text-muted-foreground">
<p class="end text-muted-foreground mt-10 text-sm">
If you have any questions, please contact an administrator.
</p>
</div>