refactor: replace all explicit any types with proper TypeScript types
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:
@@ -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 } })}
|
||||
|
||||
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user