valknar/sexy
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: replace all explicit any types with proper TypeScript types

Browse Source 
Backend resolvers: typed enrichArticle/enrichVideo/enrichModel with DB
and $inferSelect types, SQL<unknown>[] for conditions arrays, proper
enum casts for status/role fields, $inferInsert for .set() updates,
typed raw SQL result rows in gamification, ReplyLike interface for
ctx.reply in auth. Frontend: typed catch blocks with Error/interface
casts, isActiveLink param, adminGetUser response, tags filter callback.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Sebastian Krüger
2026-03-07 19:25:04 +01:00
parent 8313664d70
commit e236ced12a
30 changed files with 392 additions and 375 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
packages/frontend/src/lib/components/header/header.svelte
View File

@@ -38,7 +38,7 @@
isMobileMenuOpen = false;
}
function isActiveLink(link: any) {
function isActiveLink(link: { name: string; href: string }) {
return (
(page.url.pathname === "/" && link === navLinks[0]) ||
(page.url.pathname.startsWith(link.href) && link !== navLinks[0])

4
packages/frontend/src/lib/components/page-hero/page-hero.svelte
View File

@@ -20,7 +20,9 @@
{title}
</h1>
{#if description}
<p class="text-xl md:text-2xl text-muted-foreground mb-10 leading-relaxed max-w-4xl mx-auto">
<p
class="text-xl md:text-2xl text-muted-foreground mb-10 leading-relaxed max-w-4xl mx-auto"
>
{description}
</p>
{/if}

2
packages/frontend/src/lib/components/recording-card/recording-card.svelte
View File

@@ -26,7 +26,7 @@
return "text-green-400 bg-green-400/20";
case "draft":
return "text-yellow-400 bg-yellow-400/20";
default:
default:
return "text-gray-400 bg-gray-400/20";
}
}

4
packages/frontend/src/lib/services.ts
View File

@@ -1245,7 +1245,9 @@ export async function adminGetUser(userId: string, token?: string) {
"adminGetUser",
async () => {
const client = token ? getAuthClient(token) : getGraphQLClient();
const data = await client.request<{ adminGetUser: any }>(ADMIN_GET_USER_QUERY, { userId });
const data = await client.request<{
adminGetUser: User & { photos: Array<{ id: string; filename: string }> };
}>(ADMIN_GET_USER_QUERY, { userId });
return data.adminGetUser;
},
{ userId },

8
packages/frontend/src/routes/+page.svelte
View File

@@ -75,7 +75,9 @@
class="w-24 h-24 rounded-full mx-auto object-cover ring-4 ring-primary/20 group-hover:ring-primary/40 transition-all bg-muted"
/>
</div>
<h3 class="font-semibold text-lg group-hover:text-primary transition-colors">{model.artist_name}</h3>
<h3 class="font-semibold text-lg group-hover:text-primary transition-colors">
{model.artist_name}
</h3>
</CardContent>
</Card>
</a>
@@ -110,7 +112,9 @@
class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent group-hover:scale-105 transition-transform duration-300"
></div>
<div class="absolute bottom-2 left-2 text-white text-sm font-medium">
{#if video.movie_file?.duration}{formatVideoDuration(video.movie_file.duration)}{/if}
{#if video.movie_file?.duration}{formatVideoDuration(
video.movie_file.duration,
)}{/if}
</div>
<div
class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity"

4
packages/frontend/src/routes/admin/articles/[id]/+page.svelte
View File

@@ -66,8 +66,8 @@
});
toast.success($_("admin.article_form.update_success"));
goto("/admin/articles");
} catch (e: any) {
toast.error(e?.message ?? $_("admin.article_form.update_error"));
} catch (e) {
toast.error((e instanceof Error ? e.message : null) ?? $_("admin.article_form.update_error"));
} finally {
saving = false;
}

4
packages/frontend/src/routes/admin/articles/new/+page.svelte
View File

@@ -67,8 +67,8 @@
});
toast.success($_("admin.article_form.create_success"));
goto("/admin/articles");
} catch (e: any) {
toast.error(e?.message ?? $_("admin.article_form.create_error"));
} catch (e) {
toast.error((e instanceof Error ? e.message : null) ?? $_("admin.article_form.create_error"));
} finally {
saving = false;
}

4
packages/frontend/src/routes/admin/users/[id]/+page.svelte
View File

@@ -91,8 +91,8 @@
isAdmin,
});
toast.success($_("admin.user_edit.save_success"));
} catch (e: any) {
toast.error(e?.message ?? $_("admin.user_edit.save_error"));
} catch (e) {
toast.error((e instanceof Error ? e.message : null) ?? $_("admin.user_edit.save_error"));
} finally {
saving = false;
}

4
packages/frontend/src/routes/admin/videos/[id]/+page.svelte
View File

@@ -77,8 +77,8 @@
await setVideoModels(data.video.id, selectedModelIds);
toast.success($_("admin.video_form.update_success"));
goto("/admin/videos");
} catch (e: any) {
toast.error(e?.message ?? $_("admin.video_form.update_error"));
} catch (e) {
toast.error((e instanceof Error ? e.message : null) ?? $_("admin.video_form.update_error"));
} finally {
saving = false;
}

4
packages/frontend/src/routes/admin/videos/new/+page.svelte
View File

@@ -89,8 +89,8 @@
}
toast.success($_("admin.video_form.create_success"));
goto("/admin/videos");
} catch (e: any) {
toast.error(e?.message ?? $_("admin.video_form.create_error"));
} catch (e) {
toast.error((e instanceof Error ? e.message : null) ?? $_("admin.video_form.create_error"));
} finally {
saving = false;
}

5
packages/frontend/src/routes/login/+page.svelte
View File

@@ -32,8 +32,9 @@
isLoading = true;
await login(email, password);
goto("/videos", { invalidateAll: true });
} catch (err: any) {
const raw = err.response?.errors?.[0]?.message ?? err.message;
} catch (err) {
const e = err as { response?: { errors?: Array<{ message: string }> }; message?: string };
const raw = e.response?.errors?.[0]?.message ?? e.message;
error = raw === "Invalid credentials" ? $_("auth.login.error_invalid_credentials") : raw;
isError = true;
} finally {

12
packages/frontend/src/routes/magazine/+page.svelte
View File

@@ -315,8 +315,8 @@
size="sm"
disabled={data.page <= 1}
onclick={() => goToPage(data.page - 1)}
class="border-primary/20 hover:bg-primary/10"
>{$_("common.previous")}</Button>
class="border-primary/20 hover:bg-primary/10">{$_("common.previous")}</Button
>
{#each pageNumbers() as p, i (i)}
{#if p === -1}
<span class="px-2 text-muted-foreground select-none">…</span>
@@ -327,8 +327,8 @@
onclick={() => goToPage(p)}
class={p === data.page
? "bg-gradient-to-r from-primary to-accent min-w-9"
: "border-primary/20 hover:bg-primary/10 min-w-9"}
>{p}</Button>
: "border-primary/20 hover:bg-primary/10 min-w-9"}>{p}</Button
>
{/if}
{/each}
<Button
@@ -336,8 +336,8 @@
size="sm"
disabled={data.page >= totalPages}
onclick={() => goToPage(data.page + 1)}
class="border-primary/20 hover:bg-primary/10"
>{$_("common.next")}</Button>
class="border-primary/20 hover:bg-primary/10">{$_("common.next")}</Button
>
</div>
<p class="text-sm text-muted-foreground">
{$_("common.total_results", { values: { total: data.total } })}

9
packages/frontend/src/routes/magazine/[slug]/+page.svelte
View File

@@ -153,10 +153,15 @@
<div class="flex-1">
<h3 class="font-semibold text-lg mb-1">About {author.artist_name}</h3>
{#if author.description}
<p class="text-sm text-muted-foreground mb-3 leading-relaxed">{author.description}</p>
<p class="text-sm text-muted-foreground mb-3 leading-relaxed">
{author.description}
</p>
{/if}
{#if author.slug}
<a href="/models/{author.slug}" class="inline-flex items-center gap-1 text-sm text-primary hover:underline">
<a
href="/models/{author.slug}"
class="inline-flex items-center gap-1 text-sm text-primary hover:underline"
>
View profile
<span class="icon-[ri--arrow-right-line] w-3.5 h-3.5"></span>
</a>

14
packages/frontend/src/routes/me/+page.svelte
View File

@@ -90,8 +90,9 @@
});
toast.success($_("me.settings.toast_update"));
invalidateAll();
} catch (err: any) {
profileError = err.response?.errors?.[0]?.message ?? err.message;
} catch (err) {
const e = err as { response?: { errors?: Array<{ message: string }> }; message?: string };
profileError = e.response?.errors?.[0]?.message ?? e.message ?? "Unknown error";
isProfileError = true;
} finally {
isProfileLoading = false;
@@ -114,8 +115,9 @@
toast.success($_("me.settings.toast_update"));
invalidateAll();
password = confirmPassword = "";
} catch (err: any) {
securityError = err.response?.errors?.[0]?.message ?? err.message;
} catch (err) {
const e = err as { response?: { errors?: Array<{ message: string }> }; message?: string };
securityError = e.response?.errors?.[0]?.message ?? e.message ?? "Unknown error";
isSecurityError = true;
} finally {
isSecurityLoading = false;
@@ -290,9 +292,7 @@
</div>
</FileDropZone>
<div class="flex flex-col gap-1">
<p class="text-sm text-muted-foreground">
JPG, PNG · max 2 MB
</p>
<p class="text-sm text-muted-foreground">JPG, PNG · max 2 MB</p>
<p class="text-xs text-muted-foreground/70">
Click or drop to {avatar ? "change" : "upload"}
</p>

161
packages/frontend/src/routes/models/+page.svelte
View File

@@ -70,34 +70,34 @@
<PageHero title={$_("models.title")} description={$_("models.description")}>
<div class="flex flex-col md:flex-row gap-4 max-w-4xl mx-auto">
<!-- Search -->
<div class="relative flex-1">
<span
class="icon-[ri--search-line] absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground"
></span>
<Input
placeholder={$_("models.search_placeholder")}
value={searchValue}
oninput={(e) => {
searchValue = (e.target as HTMLInputElement).value;
debounceSearch(searchValue);
}}
class="pl-10 bg-background/50 border-primary/20 focus:border-primary"
/>
</div>
<!-- Search -->
<div class="relative flex-1">
<span
class="icon-[ri--search-line] absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground"
></span>
<Input
placeholder={$_("models.search_placeholder")}
value={searchValue}
oninput={(e) => {
searchValue = (e.target as HTMLInputElement).value;
debounceSearch(searchValue);
}}
class="pl-10 bg-background/50 border-primary/20 focus:border-primary"
/>
</div>
<!-- Sort -->
<Select type="single" value={data.sort} onValueChange={(v) => v && setParam("sort", v)}>
<SelectTrigger
class="w-full md:w-48 bg-background/50 border-primary/20 focus:border-primary"
>
{data.sort === "recent" ? $_("models.sort.recent") : $_("models.sort.name")}
</SelectTrigger>
<SelectContent>
<SelectItem value="name">{$_("models.sort.name")}</SelectItem>
<SelectItem value="recent">{$_("models.sort.recent")}</SelectItem>
</SelectContent>
</Select>
<!-- Sort -->
<Select type="single" value={data.sort} onValueChange={(v) => v && setParam("sort", v)}>
<SelectTrigger
class="w-full md:w-48 bg-background/50 border-primary/20 focus:border-primary"
>
{data.sort === "recent" ? $_("models.sort.recent") : $_("models.sort.name")}
</SelectTrigger>
<SelectContent>
<SelectItem value="name">{$_("models.sort.name")}</SelectItem>
<SelectItem value="recent">{$_("models.sort.recent")}</SelectItem>
</SelectContent>
</Select>
</div>
</PageHero>
<!-- Models Grid -->
@@ -105,18 +105,18 @@
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
{#each data.items as model (model.slug)}
<a href="/models/{model.slug}" class="block group">
<Card
class="py-0 h-full hover:shadow-2xl hover:shadow-primary/25 transition-all duration-500 hover:-translate-y-3 bg-gradient-to-br from-card/90 via-card/95 to-card/85 backdrop-blur-xl shadow-lg shadow-primary/10 overflow-hidden"
>
<div class="relative">
<img
src={getAssetUrl(model.avatar, "preview")}
alt={model.artist_name}
class="w-full aspect-square object-cover group-hover:scale-105 transition-transform duration-300 bg-muted"
/>
<Card
class="py-0 h-full hover:shadow-2xl hover:shadow-primary/25 transition-all duration-500 hover:-translate-y-3 bg-gradient-to-br from-card/90 via-card/95 to-card/85 backdrop-blur-xl shadow-lg shadow-primary/10 overflow-hidden"
>
<div class="relative">
<img
src={getAssetUrl(model.avatar, "preview")}
alt={model.artist_name}
class="w-full aspect-square object-cover group-hover:scale-105 transition-transform duration-300 bg-muted"
/>
<!-- Online Status -->
<!-- {#if model.isOnline}
<!-- Online Status -->
<!-- {#if model.isOnline}
<div
class="absolute top-3 left-3 bg-green-500 text-white text-xs px-2 py-1 rounded-full flex items-center gap-1"
>
@@ -125,8 +125,8 @@
</div>
{/if} -->
<!-- Heart Button -->
<!-- <button
<!-- Heart Button -->
<!-- <button
class="absolute top-3 right-3 w-10 h-10 bg-black/50 hover:bg-primary/80 rounded-full flex items-center justify-center transition-colors group/heart"
>
<HeartIcon
@@ -134,24 +134,24 @@
/>
</button> -->
<!-- Hover Overlay -->
<div
aria-hidden="true"
class="absolute inset-0 group-hover:scale-105 transition bg-gradient-to-t from-black/60 via-transparent to-transparent opacity-0 group-hover:opacity-100 flex items-center justify-center"
>
<div class="w-16 h-16 bg-primary/90 rounded-full flex items-center justify-center">
<span class="icon-[ri--play-large-fill] w-8 h-8 text-white ml-1"></span>
<!-- Hover Overlay -->
<div
aria-hidden="true"
class="absolute inset-0 group-hover:scale-105 transition bg-gradient-to-t from-black/60 via-transparent to-transparent opacity-0 group-hover:opacity-100 flex items-center justify-center"
>
<div class="w-16 h-16 bg-primary/90 rounded-full flex items-center justify-center">
<span class="icon-[ri--play-large-fill] w-8 h-8 text-white ml-1"></span>
</div>
</div>
</div>
</div>
<CardContent class="p-6">
<div class="flex items-start justify-between mb-3">
<div>
<h3 class="font-semibold text-lg mb-1 group-hover:text-primary transition-colors">
{model.artist_name}
</h3>
<!-- <div
<CardContent class="p-6">
<div class="flex items-start justify-between mb-3">
<div>
<h3 class="font-semibold text-lg mb-1 group-hover:text-primary transition-colors">
{model.artist_name}
</h3>
<!-- <div
class="flex items-center gap-4 text-sm text-muted-foreground"
>
<div class="flex items-center gap-1">
@@ -160,29 +160,28 @@
</div>
<div>{model.subscribers} followers</div>
</div> -->
</div>
</div>
</div>
<!-- Tags -->
<div class="flex flex-wrap gap-2 mb-4">
{#each model.tags as tag (tag)}
<a
class="text-xs bg-primary/10 text-primary px-2 py-1 rounded-full"
href="/tags/{tag}"
>
{tag}
</a>
{/each}
</div>
<!-- Tags -->
<div class="flex flex-wrap gap-2 mb-4">
{#each model.tags as tag (tag)}
<a
class="text-xs bg-primary/10 text-primary px-2 py-1 rounded-full"
href="/tags/{tag}"
>
{tag}
</a>
{/each}
</div>
<!-- Stats -->
<div class="flex items-center justify-between text-sm text-muted-foreground mb-4">
<!-- <span>{model.videos} videos</span> -->
<!-- category not available -->
</div>
</CardContent>
</Card>
<!-- Stats -->
<div class="flex items-center justify-between text-sm text-muted-foreground mb-4">
<!-- <span>{model.videos} videos</span> -->
<!-- category not available -->
</div>
</CardContent>
</Card>
</a>
{/each}
</div>
@@ -205,8 +204,8 @@
size="sm"
disabled={data.page <= 1}
onclick={() => goToPage(data.page - 1)}
class="border-primary/20 hover:bg-primary/10"
>{$_("common.previous")}</Button>
class="border-primary/20 hover:bg-primary/10">{$_("common.previous")}</Button
>
{#each pageNumbers() as p, i (i)}
{#if p === -1}
<span class="px-2 text-muted-foreground select-none">…</span>
@@ -217,8 +216,8 @@
onclick={() => goToPage(p)}
class={p === data.page
? "bg-gradient-to-r from-primary to-accent min-w-9"
: "border-primary/20 hover:bg-primary/10 min-w-9"}
>{p}</Button>
: "border-primary/20 hover:bg-primary/10 min-w-9"}>{p}</Button
>
{/if}
{/each}
<Button
@@ -226,8 +225,8 @@
size="sm"
disabled={data.page >= totalPages}
onclick={() => goToPage(data.page + 1)}
class="border-primary/20 hover:bg-primary/10"
>{$_("common.next")}</Button>
class="border-primary/20 hover:bg-primary/10">{$_("common.next")}</Button
>
</div>
<p class="text-sm text-muted-foreground">
{$_("common.total_results", { values: { total: data.total } })}

5
packages/frontend/src/routes/password/+page.svelte
View File

@@ -30,8 +30,9 @@
await requestPassword(email);
toast.success($_("auth.password_request.toast_request", { values: { email } }));
goto("/login");
} catch (err: any) {
error = err.response?.errors?.[0]?.message ?? err.message;
} catch (err) {
const e = err as { response?: { errors?: Array<{ message: string }> }; message?: string };
error = e.response?.errors?.[0]?.message ?? e.message ?? "Unknown error";
isError = true;
} finally {
isLoading = false;

5
packages/frontend/src/routes/password/reset/+page.svelte
View File

@@ -39,8 +39,9 @@
await resetPassword(data.token, password);
toast.success($_("auth.password_reset.toast_reset"));
goto("/login");
} catch (err: any) {
const raw = err.response?.errors?.[0]?.message ?? err.message;
} catch (err) {
const e = err as { response?: { errors?: Array<{ message: string }> }; message?: string };
const raw = e.response?.errors?.[0]?.message ?? e.message;
const tokenErrors = ["Invalid or expired reset token", "Reset token expired"];
error = tokenErrors.includes(raw) ? $_("auth.password_reset.error_invalid_token") : raw;
isError = true;

5
packages/frontend/src/routes/signup/+page.svelte
View File

@@ -47,8 +47,9 @@
await register(email, password, firstName, lastName);
toast.success($_("auth.signup.toast_register", { values: { email } }));
goto("/login");
} catch (err: any) {
const raw = err.response?.errors?.[0]?.message ?? err.message;
} catch (err) {
const e = err as { response?: { errors?: Array<{ message: string }> }; message?: string };
const raw = e.response?.errors?.[0]?.message ?? e.message;
error = raw === "Email already registered" ? $_("auth.signup.error_email_taken") : raw;
isError = true;
} finally {

78
packages/frontend/src/routes/tags/[tag]/+page.svelte
View File

@@ -27,7 +27,7 @@
const filteredItems = $derived(() => {
return data.items
.filter((item: any) => {
.filter((item) => {
const matchesSearch =
searchQuery === "" || item.title.toLowerCase().includes(searchQuery.toLowerCase());
const matchesCategory = categoryFilter === "all" || item.category === categoryFilter;
@@ -72,7 +72,9 @@
/>
</div>
<Select type="single" bind:value={categoryFilter}>
<SelectTrigger class="w-full md:w-48 bg-background/50 border-primary/20 focus:border-primary">
<SelectTrigger
class="w-full md:w-48 bg-background/50 border-primary/20 focus:border-primary"
>
<span class="icon-[ri--filter-line] w-4 h-4 mr-2"></span>
{categoryFilter === "all"
? $_("tags.categories.all")
@@ -96,46 +98,46 @@
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
{#each filteredItems() as item (item.slug)}
<a href={getUrlForItem(item)} class="block group">
<Card
class="py-0 h-full hover:shadow-2xl hover:shadow-primary/25 transition-all duration-300 hover:-translate-y-3 bg-gradient-to-br from-card/90 via-card/95 to-card/85 backdrop-blur-xl shadow-lg shadow-primary/10 overflow-hidden"
>
<div class="relative">
<img
src={getAssetUrl(item["image"] || item["avatar"], "preview")}
alt={item.title}
class="w-full h-64 object-cover group-hover:scale-105 transition-transform duration-300"
/>
<div
class="absolute group-hover:scale-105 transition-transform inset-0 bg-gradient-to-t from-black/40 to-transparent duration-300"
></div>
<Card
class="py-0 h-full hover:shadow-2xl hover:shadow-primary/25 transition-all duration-300 hover:-translate-y-3 bg-gradient-to-br from-card/90 via-card/95 to-card/85 backdrop-blur-xl shadow-lg shadow-primary/10 overflow-hidden"
>
<div class="relative">
<img
src={getAssetUrl(item["image"] || item["avatar"], "preview")}
alt={item.title}
class="w-full h-64 object-cover group-hover:scale-105 transition-transform duration-300"
/>
<div
class="absolute group-hover:scale-105 transition-transform inset-0 bg-gradient-to-t from-black/40 to-transparent duration-300"
></div>
<!-- Category Badge -->
<div
class="absolute top-3 left-3 bg-primary/90 text-white text-xs px-2 py-1 rounded-full capitalize"
>
{item.category}
</div>
</div>
<CardContent class="p-6">
<div class="flex items-start justify-between mb-3">
<div>
<h3 class="font-semibold text-lg mb-1 group-hover:text-primary transition-colors">
{item.title}
</h3>
<!-- Category Badge -->
<div
class="absolute top-3 left-3 bg-primary/90 text-white text-xs px-2 py-1 rounded-full capitalize"
>
{item.category}
</div>
</div>
<!-- Tags -->
<div class="flex flex-wrap gap-2">
{#each item.tags as tag (tag)}
<span class="text-xs bg-primary/10 text-primary px-2 py-1 rounded-full">
{tag}
</span>
{/each}
</div>
</CardContent>
</Card>
<CardContent class="p-6">
<div class="flex items-start justify-between mb-3">
<div>
<h3 class="font-semibold text-lg mb-1 group-hover:text-primary transition-colors">
{item.title}
</h3>
</div>
</div>
<!-- Tags -->
<div class="flex flex-wrap gap-2">
{#each item.tags as tag (tag)}
<span class="text-xs bg-primary/10 text-primary px-2 py-1 rounded-full">
{tag}
</span>
{/each}
</div>
</CardContent>
</Card>
</a>
{/each}
</div>

261
packages/frontend/src/routes/videos/+page.svelte
View File

@@ -73,68 +73,68 @@
<PageHero title={$_("videos.title")} description={$_("videos.description")}>
<div class="flex flex-col lg:flex-row gap-4 max-w-6xl mx-auto">
<!-- Search -->
<div class="relative flex-1">
<span
class="icon-[ri--search-line] absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground"
></span>
<Input
placeholder={$_("videos.search_placeholder")}
value={searchValue}
oninput={(e) => {
searchValue = (e.target as HTMLInputElement).value;
debounceSearch(searchValue);
}}
class="pl-10 bg-background/50 border-primary/20 focus:border-primary"
/>
</div>
<!-- Search -->
<div class="relative flex-1">
<span
class="icon-[ri--search-line] absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground"
></span>
<Input
placeholder={$_("videos.search_placeholder")}
value={searchValue}
oninput={(e) => {
searchValue = (e.target as HTMLInputElement).value;
debounceSearch(searchValue);
}}
class="pl-10 bg-background/50 border-primary/20 focus:border-primary"
/>
</div>
<!-- Duration Filter -->
<Select
type="single"
value={data.duration}
onValueChange={(v) => v && setParam("duration", v)}
>
<SelectTrigger
class="w-full lg:w-48 bg-background/50 border-primary/20 focus:border-primary"
>
<span class="icon-[ri--timer-2-line] w-4 h-4 mr-2"></span>
{data.duration === "short"
? $_("videos.duration.short")
: data.duration === "medium"
? $_("videos.duration.medium")
: data.duration === "long"
? $_("videos.duration.long")
: $_("videos.duration.all")}
</SelectTrigger>
<SelectContent>
<SelectItem value="all">{$_("videos.duration.all")}</SelectItem>
<SelectItem value="short">{$_("videos.duration.short")}</SelectItem>
<SelectItem value="medium">{$_("videos.duration.medium")}</SelectItem>
<SelectItem value="long">{$_("videos.duration.long")}</SelectItem>
</SelectContent>
</Select>
<!-- Duration Filter -->
<Select
type="single"
value={data.duration}
onValueChange={(v) => v && setParam("duration", v)}
>
<SelectTrigger
class="w-full lg:w-48 bg-background/50 border-primary/20 focus:border-primary"
>
<span class="icon-[ri--timer-2-line] w-4 h-4 mr-2"></span>
{data.duration === "short"
? $_("videos.duration.short")
: data.duration === "medium"
? $_("videos.duration.medium")
: data.duration === "long"
? $_("videos.duration.long")
: $_("videos.duration.all")}
</SelectTrigger>
<SelectContent>
<SelectItem value="all">{$_("videos.duration.all")}</SelectItem>
<SelectItem value="short">{$_("videos.duration.short")}</SelectItem>
<SelectItem value="medium">{$_("videos.duration.medium")}</SelectItem>
<SelectItem value="long">{$_("videos.duration.long")}</SelectItem>
</SelectContent>
</Select>
<!-- Sort -->
<Select type="single" value={data.sort} onValueChange={(v) => v && setParam("sort", v)}>
<SelectTrigger
class="w-full lg:w-48 bg-background/50 border-primary/20 focus:border-primary"
>
{data.sort === "most_liked"
? $_("videos.sort.most_liked")
: data.sort === "most_played"
? $_("videos.sort.most_played")
: data.sort === "name"
? $_("videos.sort.name")
: $_("videos.sort.recent")}
</SelectTrigger>
<SelectContent>
<SelectItem value="recent">{$_("videos.sort.recent")}</SelectItem>
<SelectItem value="most_liked">{$_("videos.sort.most_liked")}</SelectItem>
<SelectItem value="most_played">{$_("videos.sort.most_played")}</SelectItem>
<SelectItem value="name">{$_("videos.sort.name")}</SelectItem>
</SelectContent>
</Select>
<!-- Sort -->
<Select type="single" value={data.sort} onValueChange={(v) => v && setParam("sort", v)}>
<SelectTrigger
class="w-full lg:w-48 bg-background/50 border-primary/20 focus:border-primary"
>
{data.sort === "most_liked"
? $_("videos.sort.most_liked")
: data.sort === "most_played"
? $_("videos.sort.most_played")
: data.sort === "name"
? $_("videos.sort.name")
: $_("videos.sort.recent")}
</SelectTrigger>
<SelectContent>
<SelectItem value="recent">{$_("videos.sort.recent")}</SelectItem>
<SelectItem value="most_liked">{$_("videos.sort.most_liked")}</SelectItem>
<SelectItem value="most_played">{$_("videos.sort.most_played")}</SelectItem>
<SelectItem value="name">{$_("videos.sort.name")}</SelectItem>
</SelectContent>
</Select>
</div>
</PageHero>
<!-- Videos Grid -->
@@ -142,61 +142,63 @@
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
{#each data.items as video (video.slug)}
<a href={`/videos/${video.slug}`} class="block group">
<Card
class="p-0 h-full hover:shadow-2xl hover:shadow-primary/25 transition-all duration-500 hover:-translate-y-3 bg-gradient-to-br from-card/90 via-card/95 to-card/85 backdrop-blur-xl shadow-lg shadow-primary/10 overflow-hidden"
>
<div class="relative">
<img
src={getAssetUrl(video.image, "preview")}
alt={video.title}
class="w-full h-48 object-cover group-hover:scale-105 transition-transform duration-300 bg-muted"
/>
<Card
class="p-0 h-full hover:shadow-2xl hover:shadow-primary/25 transition-all duration-500 hover:-translate-y-3 bg-gradient-to-br from-card/90 via-card/95 to-card/85 backdrop-blur-xl shadow-lg shadow-primary/10 overflow-hidden"
>
<div class="relative">
<img
src={getAssetUrl(video.image, "preview")}
alt={video.title}
class="w-full h-48 object-cover group-hover:scale-105 transition-transform duration-300 bg-muted"
/>
<!-- Overlay Gradient -->
<div
class="absolute inset-0 group-hover:scale-105 bg-gradient-to-t from-black/60 via-transparent to-black/20 duration-300"
></div>
<!-- Duration -->
<div
class="absolute bottom-3 left-3 bg-black/70 text-white text-sm px-2 py-1 rounded font-medium"
>
{#if video.movie_file?.duration}{formatVideoDuration(video.movie_file.duration)}{/if}
</div>
<!-- Premium Badge -->
{#if video.premium}
<!-- Overlay Gradient -->
<div
class="absolute top-3 left-3 bg-gradient-to-r from-primary to-accent text-white text-xs px-2 py-1 rounded-full font-medium"
>
{$_("videos.premium")}
</div>
{/if}
class="absolute inset-0 group-hover:scale-105 bg-gradient-to-t from-black/60 via-transparent to-black/20 duration-300"
></div>
<!-- Play Count -->
{#if video.plays_count}
<!-- Duration -->
<div
class="absolute top-3 right-3 bg-black/70 text-white text-xs px-2 py-1 rounded-full flex items-center gap-1"
class="absolute bottom-3 left-3 bg-black/70 text-white text-sm px-2 py-1 rounded font-medium"
>
<span class="icon-[ri--play-fill] w-3 h-3"></span>
{video.plays_count}
{#if video.movie_file?.duration}{formatVideoDuration(
video.movie_file.duration,
)}{/if}
</div>
{/if}
<!-- Play Overlay -->
<div
class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity"
aria-hidden="true"
>
<!-- Premium Badge -->
{#if video.premium}
<div
class="absolute top-3 left-3 bg-gradient-to-r from-primary to-accent text-white text-xs px-2 py-1 rounded-full font-medium"
>
{$_("videos.premium")}
</div>
{/if}
<!-- Play Count -->
{#if video.plays_count}
<div
class="absolute top-3 right-3 bg-black/70 text-white text-xs px-2 py-1 rounded-full flex items-center gap-1"
>
<span class="icon-[ri--play-fill] w-3 h-3"></span>
{video.plays_count}
</div>
{/if}
<!-- Play Overlay -->
<div
class="w-16 h-16 bg-primary/90 rounded-full flex flex-col items-center justify-center shadow-2xl"
class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity"
aria-hidden="true"
>
<span class="icon-[ri--play-large-fill] w-8 h-8 text-white"></span>
<div
class="w-16 h-16 bg-primary/90 rounded-full flex flex-col items-center justify-center shadow-2xl"
>
<span class="icon-[ri--play-large-fill] w-8 h-8 text-white"></span>
</div>
</div>
</div>
<!-- Model Info -->
<!-- <div class="absolute bottom-3 right-3 text-white text-sm">
<!-- Model Info -->
<!-- <div class="absolute bottom-3 right-3 text-white text-sm">
<button
onclick={() => onNavigate("model")}
class="hover:text-primary transition-colors"
@@ -204,23 +206,23 @@
{video.model}
</button>
</div> -->
</div>
<CardContent class="p-6">
<div class="mb-3">
<h3
class="font-semibold text-lg mb-2 group-hover:text-primary transition-colors line-clamp-2"
>
{video.title}
</h3>
<p class="text-sm text-muted-foreground">
{timeAgo.format(new Date(video.upload_date))}
</p>
</div>
<!-- Stats -->
<div class="flex items-center justify-between text-sm text-muted-foreground mb-4">
<!-- <div class="flex items-center gap-4">
<CardContent class="p-6">
<div class="mb-3">
<h3
class="font-semibold text-lg mb-2 group-hover:text-primary transition-colors line-clamp-2"
>
{video.title}
</h3>
<p class="text-sm text-muted-foreground">
{timeAgo.format(new Date(video.upload_date))}
</p>
</div>
<!-- Stats -->
<div class="flex items-center justify-between text-sm text-muted-foreground mb-4">
<!-- <div class="flex items-center gap-4">
<div class="flex items-center gap-1">
<EyeIcon class="w-4 h-4" />
{video.views}
@@ -230,15 +232,14 @@
{video.likes}
</div>
</div> -->
<!-- <span
<!-- <span
class="capitalize bg-primary/10 text-primary px-2 py-1 rounded-full text-xs"
>
{video.category}
</span> -->
</div>
</CardContent>
</Card>
</div>
</CardContent>
</Card>
</a>
{/each}
</div>
@@ -263,8 +264,8 @@
size="sm"
disabled={data.page <= 1}
onclick={() => goToPage(data.page - 1)}
class="border-primary/20 hover:bg-primary/10"
>{$_("common.previous")}</Button>
class="border-primary/20 hover:bg-primary/10">{$_("common.previous")}</Button
>
{#each pageNumbers() as p, i (i)}
{#if p === -1}
<span class="px-2 text-muted-foreground select-none">…</span>
@@ -275,8 +276,8 @@
onclick={() => goToPage(p)}
class={p === data.page
? "bg-gradient-to-r from-primary to-accent min-w-9"
: "border-primary/20 hover:bg-primary/10 min-w-9"}
>{p}</Button>
: "border-primary/20 hover:bg-primary/10 min-w-9"}>{p}</Button
>
{/if}
{/each}
<Button
@@ -284,8 +285,8 @@
size="sm"
disabled={data.page >= totalPages}
onclick={() => goToPage(data.page + 1)}
class="border-primary/20 hover:bg-primary/10"
>{$_("common.next")}</Button>
class="border-primary/20 hover:bg-primary/10">{$_("common.next")}</Button
>
</div>
<p class="text-sm text-muted-foreground">
{$_("common.total_results", { values: { total: data.total } })}

8
packages/frontend/src/routes/videos/[slug]/+page.svelte
View File

@@ -58,8 +58,8 @@
isLiked = true;
toast.success("Added to liked videos");
}
} catch (error: any) {
toast.error(error.message || "Failed to update like");
} catch (error) {
toast.error((error instanceof Error ? error.message : null) || "Failed to update like");
} finally {
isLikeLoading = false;
}
@@ -86,8 +86,8 @@
invalidateAll();
newComment = "";
showComments = true;
} catch (err: any) {
commentError = err.message;
} catch (err) {
commentError = err instanceof Error ? err.message : "Unknown error";
isCommentError = true;
} finally {
isCommentLoading = false;