style: apply prettier formatting to all files
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -1,6 +1,6 @@
|
||||
import { getModels } from "$lib/services";
|
||||
export async function load({ fetch }) {
|
||||
return {
|
||||
models: await getModels(fetch),
|
||||
};
|
||||
return {
|
||||
models: await getModels(fetch),
|
||||
};
|
||||
}
|
||||
|
||||
@@ -1,162 +1,148 @@
|
||||
<script lang="ts">
|
||||
import { _ } from "svelte-i18n";
|
||||
import { Button } from "$lib/components/ui/button";
|
||||
import { Card, CardContent } from "$lib/components/ui/card";
|
||||
import { Input } from "$lib/components/ui/input";
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
} from "$lib/components/ui/select";
|
||||
import { getAssetUrl } from "$lib/directus";
|
||||
import Meta from "$lib/components/meta/meta.svelte";
|
||||
import { _ } from "svelte-i18n";
|
||||
import { Button } from "$lib/components/ui/button";
|
||||
import { Card, CardContent } from "$lib/components/ui/card";
|
||||
import { Input } from "$lib/components/ui/input";
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger } from "$lib/components/ui/select";
|
||||
import { getAssetUrl } from "$lib/directus";
|
||||
import Meta from "$lib/components/meta/meta.svelte";
|
||||
|
||||
let searchQuery = $state("");
|
||||
let sortBy = $state("popular");
|
||||
let categoryFilter = $state("all");
|
||||
let searchQuery = $state("");
|
||||
let sortBy = $state("popular");
|
||||
let categoryFilter = $state("all");
|
||||
|
||||
const { data } = $props();
|
||||
const { data } = $props();
|
||||
|
||||
const filteredModels = $derived(() => {
|
||||
return data.models
|
||||
.filter((model) => {
|
||||
const matchesSearch =
|
||||
searchQuery === "" ||
|
||||
model.artist_name.toLowerCase().includes(searchQuery.toLowerCase()) ||
|
||||
model.tags.some((tag) =>
|
||||
tag.toLowerCase().includes(searchQuery.toLowerCase()),
|
||||
);
|
||||
const matchesCategory =
|
||||
categoryFilter === "all" || model.category === categoryFilter;
|
||||
return matchesSearch && matchesCategory;
|
||||
})
|
||||
.sort((a, b) => {
|
||||
// if (sortBy === "popular") {
|
||||
// const aNum = parseInt(a.subscribers.replace(/[^\d]/g, ""));
|
||||
// const bNum = parseInt(b.subscribers.replace(/[^\d]/g, ""));
|
||||
// return bNum - aNum;
|
||||
// }
|
||||
// if (sortBy === "rating") return b.rating - a.rating;
|
||||
// if (sortBy === "videos") return b.videos - a.videos;
|
||||
return a.artist_name.localeCompare(b.artist_name);
|
||||
});
|
||||
});
|
||||
const filteredModels = $derived(() => {
|
||||
return data.models
|
||||
.filter((model) => {
|
||||
const matchesSearch =
|
||||
searchQuery === "" ||
|
||||
model.artist_name.toLowerCase().includes(searchQuery.toLowerCase()) ||
|
||||
model.tags.some((tag) => tag.toLowerCase().includes(searchQuery.toLowerCase()));
|
||||
const matchesCategory = categoryFilter === "all" || model.category === categoryFilter;
|
||||
return matchesSearch && matchesCategory;
|
||||
})
|
||||
.sort((a, b) => {
|
||||
// if (sortBy === "popular") {
|
||||
// const aNum = parseInt(a.subscribers.replace(/[^\d]/g, ""));
|
||||
// const bNum = parseInt(b.subscribers.replace(/[^\d]/g, ""));
|
||||
// return bNum - aNum;
|
||||
// }
|
||||
// if (sortBy === "rating") return b.rating - a.rating;
|
||||
// if (sortBy === "videos") return b.videos - a.videos;
|
||||
return a.artist_name.localeCompare(b.artist_name);
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<Meta title={$_("models.title")} description={$_("models.description")} />
|
||||
|
||||
<div
|
||||
class="relative min-h-screen bg-gradient-to-br from-background via-primary/5 to-accent/5 overflow-hidden"
|
||||
class="relative min-h-screen bg-gradient-to-br from-background via-primary/5 to-accent/5 overflow-hidden"
|
||||
>
|
||||
<!-- Global Plasma Background -->
|
||||
<div class="absolute inset-0 pointer-events-none">
|
||||
<div
|
||||
class="absolute top-40 left-1/4 w-80 h-80 bg-gradient-to-r from-primary/16 via-accent/20 to-primary/12 rounded-full blur-3xl animate-blob-slow"
|
||||
></div>
|
||||
<div
|
||||
class="absolute bottom-40 right-1/4 w-96 h-96 bg-gradient-to-r from-accent/16 via-primary/20 to-accent/12 rounded-full blur-3xl animate-blob-slow animation-delay-5000"
|
||||
></div>
|
||||
<div
|
||||
class="absolute top-1/3 right-1/3 w-64 h-64 bg-gradient-to-r from-primary/14 via-accent/18 to-primary/10 rounded-full blur-2xl animate-blob-reverse animation-delay-2500"
|
||||
></div>
|
||||
</div>
|
||||
<!-- Global Plasma Background -->
|
||||
<div class="absolute inset-0 pointer-events-none">
|
||||
<div
|
||||
class="absolute top-40 left-1/4 w-80 h-80 bg-gradient-to-r from-primary/16 via-accent/20 to-primary/12 rounded-full blur-3xl animate-blob-slow"
|
||||
></div>
|
||||
<div
|
||||
class="absolute bottom-40 right-1/4 w-96 h-96 bg-gradient-to-r from-accent/16 via-primary/20 to-accent/12 rounded-full blur-3xl animate-blob-slow animation-delay-5000"
|
||||
></div>
|
||||
<div
|
||||
class="absolute top-1/3 right-1/3 w-64 h-64 bg-gradient-to-r from-primary/14 via-accent/18 to-primary/10 rounded-full blur-2xl animate-blob-reverse animation-delay-2500"
|
||||
></div>
|
||||
</div>
|
||||
|
||||
<section class="relative py-20 overflow-hidden">
|
||||
<div class="relative container mx-auto px-4 text-center">
|
||||
<div class="max-w-5xl mx-auto">
|
||||
<h1
|
||||
class="text-5xl md:text-7xl font-bold mb-8 bg-gradient-to-r from-primary via-accent to-primary bg-clip-text text-transparent"
|
||||
>
|
||||
{$_("models.title")}
|
||||
</h1>
|
||||
<p
|
||||
class="text-xl md:text-2xl text-muted-foreground mb-10 leading-relaxed max-w-4xl mx-auto"
|
||||
>
|
||||
{$_("models.description")}
|
||||
</p>
|
||||
<!-- Filters -->
|
||||
<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")}
|
||||
bind:value={searchQuery}
|
||||
class="pl-10 bg-background/50 border-primary/20 focus:border-primary"
|
||||
/>
|
||||
</div>
|
||||
<section class="relative py-20 overflow-hidden">
|
||||
<div class="relative container mx-auto px-4 text-center">
|
||||
<div class="max-w-5xl mx-auto">
|
||||
<h1
|
||||
class="text-5xl md:text-7xl font-bold mb-8 bg-gradient-to-r from-primary via-accent to-primary bg-clip-text text-transparent"
|
||||
>
|
||||
{$_("models.title")}
|
||||
</h1>
|
||||
<p
|
||||
class="text-xl md:text-2xl text-muted-foreground mb-10 leading-relaxed max-w-4xl mx-auto"
|
||||
>
|
||||
{$_("models.description")}
|
||||
</p>
|
||||
<!-- Filters -->
|
||||
<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")}
|
||||
bind:value={searchQuery}
|
||||
class="pl-10 bg-background/50 border-primary/20 focus:border-primary"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Category Filter -->
|
||||
<Select type="single" bind:value={categoryFilter}>
|
||||
<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"
|
||||
? $_("models.categories.all")
|
||||
: categoryFilter === "romantic"
|
||||
? $_("models.categories.romantic")
|
||||
: categoryFilter === "artistic"
|
||||
? $_("models.categories.artistic")
|
||||
: $_("models.categories.intimate")}
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="all">{$_("models.categories.all")}</SelectItem>
|
||||
<SelectItem value="romantic"
|
||||
>{$_("models.categories.romantic")}</SelectItem
|
||||
>
|
||||
<SelectItem value="artistic"
|
||||
>{$_("models.categories.artistic")}</SelectItem
|
||||
>
|
||||
<SelectItem value="intimate"
|
||||
>{$_("models.categories.intimate")}</SelectItem
|
||||
>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<!-- Category Filter -->
|
||||
<Select type="single" bind:value={categoryFilter}>
|
||||
<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"
|
||||
? $_("models.categories.all")
|
||||
: categoryFilter === "romantic"
|
||||
? $_("models.categories.romantic")
|
||||
: categoryFilter === "artistic"
|
||||
? $_("models.categories.artistic")
|
||||
: $_("models.categories.intimate")}
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="all">{$_("models.categories.all")}</SelectItem>
|
||||
<SelectItem value="romantic">{$_("models.categories.romantic")}</SelectItem>
|
||||
<SelectItem value="artistic">{$_("models.categories.artistic")}</SelectItem>
|
||||
<SelectItem value="intimate">{$_("models.categories.intimate")}</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
|
||||
<!-- Sort -->
|
||||
<Select type="single" bind:value={sortBy}>
|
||||
<SelectTrigger
|
||||
class="w-full md:w-48 bg-background/50 border-primary/20 focus:border-primary"
|
||||
>
|
||||
{sortBy === "popular"
|
||||
? $_("models.sort.popular")
|
||||
: sortBy === "rating"
|
||||
? $_("models.sort.rating")
|
||||
: sortBy === "videos"
|
||||
? $_("models.sort.videos")
|
||||
: $_("models.sort.name")}
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="popular">{$_("models.sort.popular")}</SelectItem>
|
||||
<SelectItem value="rating">{$_("models.sort.rating")}</SelectItem>
|
||||
<SelectItem value="videos">{$_("models.sort.videos")}</SelectItem>
|
||||
<SelectItem value="name">{$_("models.sort.name")}</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Sort -->
|
||||
<Select type="single" bind:value={sortBy}>
|
||||
<SelectTrigger
|
||||
class="w-full md:w-48 bg-background/50 border-primary/20 focus:border-primary"
|
||||
>
|
||||
{sortBy === "popular"
|
||||
? $_("models.sort.popular")
|
||||
: sortBy === "rating"
|
||||
? $_("models.sort.rating")
|
||||
: sortBy === "videos"
|
||||
? $_("models.sort.videos")
|
||||
: $_("models.sort.name")}
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="popular">{$_("models.sort.popular")}</SelectItem>
|
||||
<SelectItem value="rating">{$_("models.sort.rating")}</SelectItem>
|
||||
<SelectItem value="videos">{$_("models.sort.videos")}</SelectItem>
|
||||
<SelectItem value="name">{$_("models.sort.name")}</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Models Grid -->
|
||||
<div class="container mx-auto px-4 py-12">
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||
{#each filteredModels() as model (model.slug)}
|
||||
<Card
|
||||
class="py-0 group 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"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Models Grid -->
|
||||
<div class="container mx-auto px-4 py-12">
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||
{#each filteredModels() as model (model.slug)}
|
||||
<Card
|
||||
class="py-0 group 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"
|
||||
/>
|
||||
|
||||
<!-- 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"
|
||||
>
|
||||
@@ -165,8 +151,8 @@ const filteredModels = $derived(() => {
|
||||
</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
|
||||
@@ -174,30 +160,25 @@ const filteredModels = $derived(() => {
|
||||
/>
|
||||
</button> -->
|
||||
|
||||
<!-- Play Overlay -->
|
||||
<a
|
||||
href="/models/{model.slug}"
|
||||
aria-label={model.artist_name}
|
||||
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>
|
||||
</a>
|
||||
</div>
|
||||
<!-- Play Overlay -->
|
||||
<a
|
||||
href="/models/{model.slug}"
|
||||
aria-label={model.artist_name}
|
||||
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>
|
||||
</a>
|
||||
</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">
|
||||
@@ -206,62 +187,60 @@ const filteredModels = $derived(() => {
|
||||
</div>
|
||||
<div>{model.subscribers} followers</div>
|
||||
</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> -->
|
||||
<span class="capitalize">{model.category}</span>
|
||||
</div>
|
||||
<!-- Stats -->
|
||||
<div class="flex items-center justify-between text-sm text-muted-foreground mb-4">
|
||||
<!-- <span>{model.videos} videos</span> -->
|
||||
<span class="capitalize">{model.category}</span>
|
||||
</div>
|
||||
|
||||
<!-- Action Buttons -->
|
||||
<div class="flex gap-2">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
class="flex-1 border-primary/20 hover:bg-primary/10"
|
||||
href="/models/{model.slug}">{$_("models.view_profile")}</Button
|
||||
>
|
||||
<!-- <Button
|
||||
<!-- Action Buttons -->
|
||||
<div class="flex gap-2">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
class="flex-1 border-primary/20 hover:bg-primary/10"
|
||||
href="/models/{model.slug}">{$_("models.view_profile")}</Button
|
||||
>
|
||||
<!-- <Button
|
||||
size="sm"
|
||||
class="flex-1 bg-gradient-to-r from-primary to-accent hover:from-primary/90 hover:to-accent/90"
|
||||
>{$_("models.follow")}</Button
|
||||
> -->
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
{#if filteredModels().length === 0}
|
||||
<div class="text-center py-12">
|
||||
<p class="text-muted-foreground text-lg">{$_("models.no_results")}</p>
|
||||
<Button
|
||||
variant="outline"
|
||||
onclick={() => {
|
||||
searchQuery = "";
|
||||
categoryFilter = "all";
|
||||
}}
|
||||
class="mt-4"
|
||||
>
|
||||
{$_("models.clear_filters")}
|
||||
</Button>
|
||||
</div>
|
||||
{/if}
|
||||
</CardContent>
|
||||
</Card>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
{#if filteredModels().length === 0}
|
||||
<div class="text-center py-12">
|
||||
<p class="text-muted-foreground text-lg">{$_("models.no_results")}</p>
|
||||
<Button
|
||||
variant="outline"
|
||||
onclick={() => {
|
||||
searchQuery = "";
|
||||
categoryFilter = "all";
|
||||
}}
|
||||
class="mt-4"
|
||||
>
|
||||
{$_("models.clear_filters")}
|
||||
</Button>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,17 +1,13 @@
|
||||
import { error } from "@sveltejs/kit";
|
||||
import {
|
||||
countCommentsForModel,
|
||||
getModelBySlug,
|
||||
getVideosForModel,
|
||||
} from "$lib/services.js";
|
||||
import { countCommentsForModel, getModelBySlug, getVideosForModel } from "$lib/services.js";
|
||||
export async function load({ fetch, params }) {
|
||||
try {
|
||||
const model = await getModelBySlug(params.slug, fetch);
|
||||
const commentsCount = await countCommentsForModel(model.id, fetch);
|
||||
const videos = await getVideosForModel(model.id, fetch);
|
||||
return { model, commentsCount, videos };
|
||||
} catch (e) {
|
||||
console.log(e);
|
||||
error(404, "Model not found");
|
||||
}
|
||||
try {
|
||||
const model = await getModelBySlug(params.slug, fetch);
|
||||
const commentsCount = await countCommentsForModel(model.id, fetch);
|
||||
const videos = await getVideosForModel(model.id, fetch);
|
||||
return { model, commentsCount, videos };
|
||||
} catch (e) {
|
||||
console.log(e);
|
||||
error(404, "Model not found");
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,46 +1,37 @@
|
||||
<script lang="ts">
|
||||
import { _, locale } from "svelte-i18n";
|
||||
import { Button } from "$lib/components/ui/button";
|
||||
import { Card, CardContent } from "$lib/components/ui/card";
|
||||
import {
|
||||
Tabs,
|
||||
TabsContent,
|
||||
TabsList,
|
||||
TabsTrigger,
|
||||
} from "$lib/components/ui/tabs";
|
||||
import { getAssetUrl } from "$lib/directus";
|
||||
import Meta from "$lib/components/meta/meta.svelte";
|
||||
import PeonyBackground from "$lib/components/background/peony-background.svelte";
|
||||
import SharingPopupButton from "$lib/components/sharing-popup/sharing-popup-button.svelte";
|
||||
import { page } from "$app/state";
|
||||
import ImageViewer from "$lib/components/image-viewer/image-viewer.svelte";
|
||||
import { formatVideoDuration } from "$lib/utils.js";
|
||||
import { _, locale } from "svelte-i18n";
|
||||
import { Button } from "$lib/components/ui/button";
|
||||
import { Card, CardContent } from "$lib/components/ui/card";
|
||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from "$lib/components/ui/tabs";
|
||||
import { getAssetUrl } from "$lib/directus";
|
||||
import Meta from "$lib/components/meta/meta.svelte";
|
||||
import PeonyBackground from "$lib/components/background/peony-background.svelte";
|
||||
import SharingPopupButton from "$lib/components/sharing-popup/sharing-popup-button.svelte";
|
||||
import { page } from "$app/state";
|
||||
import ImageViewer from "$lib/components/image-viewer/image-viewer.svelte";
|
||||
import { formatVideoDuration } from "$lib/utils.js";
|
||||
|
||||
let activeTab = $state("videos");
|
||||
let activeTab = $state("videos");
|
||||
|
||||
const { data } = $props();
|
||||
const { data } = $props();
|
||||
|
||||
let images = $derived(
|
||||
data.model.photos.map((p) => ({
|
||||
...p,
|
||||
url: getAssetUrl(p.id),
|
||||
thumbnail: getAssetUrl(p.id, "thumbnail"),
|
||||
})),
|
||||
);
|
||||
let images = $derived(
|
||||
data.model.photos.map((p) => ({
|
||||
...p,
|
||||
url: getAssetUrl(p.id),
|
||||
thumbnail: getAssetUrl(p.id, "thumbnail"),
|
||||
})),
|
||||
);
|
||||
|
||||
// Calculate total likes and plays from all videos
|
||||
let totalLikes = $derived(
|
||||
data.videos.reduce((sum, video) => sum + (video.likes_count || 0), 0)
|
||||
);
|
||||
let totalPlays = $derived(
|
||||
data.videos.reduce((sum, video) => sum + (video.plays_count || 0), 0)
|
||||
);
|
||||
// Calculate total likes and plays from all videos
|
||||
let totalLikes = $derived(data.videos.reduce((sum, video) => sum + (video.likes_count || 0), 0));
|
||||
let totalPlays = $derived(data.videos.reduce((sum, video) => sum + (video.plays_count || 0), 0));
|
||||
</script>
|
||||
|
||||
<Meta
|
||||
title={data.model.artist_name}
|
||||
description={data.model.description}
|
||||
image={getAssetUrl(data.model.avatar, 'medium')!}
|
||||
image={getAssetUrl(data.model.avatar, "medium")!}
|
||||
/>
|
||||
|
||||
<div
|
||||
@@ -65,22 +56,18 @@ let totalPlays = $derived(
|
||||
variant="ghost"
|
||||
class="absolute top-4 left-4 bg-black/50 hover:bg-black/70 text-white"
|
||||
href="/models"
|
||||
><span class="icon-[ri--arrow-left-long-line] w-4 h-4 mr-1"></span>{$_(
|
||||
'models.back'
|
||||
)}</Button
|
||||
><span class="icon-[ri--arrow-left-long-line] w-4 h-4 mr-1"></span>{$_("models.back")}</Button
|
||||
>
|
||||
</div>
|
||||
|
||||
<!-- Profile Header -->
|
||||
<div class="container mx-auto px-4 -mt-20 relative z-10">
|
||||
<div
|
||||
class="bg-card/90 backdrop-blur-sm rounded-2xl border border-border/50 p-6 shadow-2xl"
|
||||
>
|
||||
<div class="bg-card/90 backdrop-blur-sm rounded-2xl border border-border/50 p-6 shadow-2xl">
|
||||
<div class="flex flex-col md:flex-row gap-6">
|
||||
<!-- Profile Image -->
|
||||
<div class="relative">
|
||||
<img
|
||||
src={getAssetUrl(data.model.avatar, 'thumbnail')}
|
||||
src={getAssetUrl(data.model.avatar, "thumbnail")}
|
||||
alt="${data.model.artist_name}"
|
||||
class="w-32 h-32 rounded-2xl object-cover ring-4 ring-primary/20"
|
||||
/>
|
||||
@@ -96,9 +83,7 @@ let totalPlays = $derived(
|
||||
|
||||
<!-- Profile Info -->
|
||||
<div class="flex-1">
|
||||
<div
|
||||
class="flex flex-col md:flex-row md:items-start md:justify-between gap-4"
|
||||
>
|
||||
<div class="flex flex-col md:flex-row md:items-start md:justify-between gap-4">
|
||||
<div>
|
||||
<h1 class="text-3xl font-bold mb-2">{data.model.artist_name}</h1>
|
||||
<div class="flex items-center gap-4 text-muted-foreground mb-3">
|
||||
@@ -112,16 +97,14 @@ let totalPlays = $derived(
|
||||
</div> -->
|
||||
<div class="flex items-center gap-1">
|
||||
<span class="icon-[ri--calendar-line] w-4 h-4"></span>
|
||||
{$_('models.joined', {
|
||||
{$_("models.joined", {
|
||||
values: {
|
||||
join_date: new Date(
|
||||
data.model.date_created
|
||||
).toLocaleDateString($locale!, {
|
||||
day: 'numeric',
|
||||
month: 'long',
|
||||
year: 'numeric'
|
||||
})
|
||||
}
|
||||
join_date: new Date(data.model.date_created).toLocaleDateString($locale!, {
|
||||
day: "numeric",
|
||||
month: "long",
|
||||
year: "numeric",
|
||||
}),
|
||||
},
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
@@ -169,7 +152,7 @@ let totalPlays = $derived(
|
||||
title: data.model.artist_name,
|
||||
description: data.model.description,
|
||||
url: page.url,
|
||||
type: 'model'
|
||||
type: "model",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
@@ -178,14 +161,12 @@ let totalPlays = $derived(
|
||||
</div>
|
||||
|
||||
<!-- Stats -->
|
||||
<div
|
||||
class="grid grid-cols-2 md:grid-cols-4 gap-4 mt-6 pt-6 border-t border-border/50"
|
||||
>
|
||||
<div class="grid grid-cols-2 md:grid-cols-4 gap-4 mt-6 pt-6 border-t border-border/50">
|
||||
<div class="text-center">
|
||||
<div class="text-2xl font-bold text-primary">
|
||||
{data.videos.length}
|
||||
</div>
|
||||
<div class="text-sm text-muted-foreground">{$_('models.videos')}</div>
|
||||
<div class="text-sm text-muted-foreground">{$_("models.videos")}</div>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<div class="text-2xl font-bold text-primary">
|
||||
@@ -204,7 +185,7 @@ let totalPlays = $derived(
|
||||
{data.commentsCount}
|
||||
</div>
|
||||
<div class="text-sm text-muted-foreground">
|
||||
{$_('models.comments')}
|
||||
{$_("models.comments")}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -217,11 +198,11 @@ let totalPlays = $derived(
|
||||
<TabsList class="grid w-full grid-cols-2 max-w-md mx-auto mb-8">
|
||||
<TabsTrigger value="videos" class="flex items-center gap-2">
|
||||
<span class="icon-[ri--play-large-fill] w-4 h-4"></span>
|
||||
{$_('models.videos')}
|
||||
{$_("models.videos")}
|
||||
</TabsTrigger>
|
||||
<TabsTrigger value="photos" class="flex items-center gap-2">
|
||||
<span class="icon-[ri--camera-fill] w-4 h-4"></span>
|
||||
{$_('models.photos')}
|
||||
{$_("models.photos")}
|
||||
</TabsTrigger>
|
||||
</TabsList>
|
||||
|
||||
@@ -233,17 +214,17 @@ let totalPlays = $derived(
|
||||
>
|
||||
<div class="relative">
|
||||
<img
|
||||
src={getAssetUrl(video.image, 'preview')}
|
||||
src={getAssetUrl(video.image, "preview")}
|
||||
alt={video.title}
|
||||
class="w-full h-48 object-cover group-hover:scale-105 transition-transform duration-300"
|
||||
/>
|
||||
<div
|
||||
class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent transition-transform group-hover:scale-105 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}
|
||||
<div class="absolute bottom-2 left-2 text-white text-sm font-medium">
|
||||
{#if video.movie_file?.duration}{formatVideoDuration(
|
||||
video.movie_file.duration,
|
||||
)}{/if}
|
||||
</div>
|
||||
<!-- <div
|
||||
class="absolute top-2 right-2 bg-black/50 text-white text-xs px-2 py-1 rounded-full"
|
||||
@@ -258,20 +239,15 @@ let totalPlays = $derived(
|
||||
<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>
|
||||
<span class="icon-[ri--play-large-fill] w-8 h-8 text-white"></span>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<CardContent class="px-4 pb-4 pt-0">
|
||||
<h3
|
||||
class="font-semibold mb-2 group-hover:text-primary transition-colors"
|
||||
>
|
||||
<h3 class="font-semibold mb-2 group-hover:text-primary transition-colors">
|
||||
{video.title}
|
||||
</h3>
|
||||
<div
|
||||
class="flex items-center justify-between text-sm text-muted-foreground"
|
||||
>
|
||||
<div class="flex items-center justify-between text-sm text-muted-foreground">
|
||||
<div class="flex items-center gap-1">
|
||||
<span class="icon-[ri--play-fill] w-4 h-4"></span>
|
||||
{video.plays_count || 0}
|
||||
@@ -287,10 +263,9 @@ let totalPlays = $derived(
|
||||
</div>
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="photos">
|
||||
<TabsContent value="photos">
|
||||
<ImageViewer {images} />
|
||||
</TabsContent>
|
||||
|
||||
</Tabs>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user