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

style: apply prettier formatting to all files
All checks were successful
Build and Push Backend Image / build (push) Successful in 46s
Details
Build and Push Frontend Image / build (push) Successful in 5m12s
Details

Browse Source 
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Sebastian Krüger
2026-03-04 22:27:54 +01:00
parent 18116072c9
commit efc7624ba3
184 changed files with 10327 additions and 10220 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,62 +1,52 @@
<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 TimeAgo from "javascript-time-ago";
import { formatVideoDuration } from "$lib/utils";
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 TimeAgo from "javascript-time-ago";
import { formatVideoDuration } from "$lib/utils";
const timeAgo = new TimeAgo("en");
const timeAgo = new TimeAgo("en");
let searchQuery = $state("");
let sortBy = $state("recent");
let categoryFilter = $state("all");
let durationFilter = $state("all");
let searchQuery = $state("");
let sortBy = $state("recent");
let categoryFilter = $state("all");
let durationFilter = $state("all");
const { data } = $props();
const { data } = $props();
const filteredVideos = $derived(() => {
return data.videos
.filter((video) => {
const matchesSearch = video.title
.toLowerCase()
.includes(searchQuery.toLowerCase());
// ||
// video.model.toLowerCase().includes(searchQuery.toLowerCase());
const matchesCategory = categoryFilter === "all";
const matchesDuration =
durationFilter === "all" ||
(durationFilter === "short" && (video.movie_file?.duration ?? 0) < 10 * 60) ||
(durationFilter === "medium" &&
(video.movie_file?.duration ?? 0) >= 10 * 60 &&
(video.movie_file?.duration ?? 0) < 20 * 60) ||
(durationFilter === "long" && (video.movie_file?.duration ?? 0) >= 20 * 60);
return matchesSearch && matchesCategory && matchesDuration;
})
.sort((a, b) => {
if (sortBy === "recent")
return (
new Date(b.upload_date).getTime() - new Date(a.upload_date).getTime()
);
if (sortBy === "most_liked")
return (b.likes_count || 0) - (a.likes_count || 0);
if (sortBy === "most_played")
return (b.plays_count || 0) - (a.plays_count || 0);
if (sortBy === "duration") return (b.movie_file?.duration ?? 0) - (a.movie_file?.duration ?? 0);
return a.title.localeCompare(b.title);
});
});
const filteredVideos = $derived(() => {
return data.videos
.filter((video) => {
const matchesSearch = video.title.toLowerCase().includes(searchQuery.toLowerCase());
// ||
// video.model.toLowerCase().includes(searchQuery.toLowerCase());
const matchesCategory = categoryFilter === "all";
const matchesDuration =
durationFilter === "all" ||
(durationFilter === "short" && (video.movie_file?.duration ?? 0) < 10 * 60) ||
(durationFilter === "medium" &&
(video.movie_file?.duration ?? 0) >= 10 * 60 &&
(video.movie_file?.duration ?? 0) < 20 * 60) ||
(durationFilter === "long" && (video.movie_file?.duration ?? 0) >= 20 * 60);
return matchesSearch && matchesCategory && matchesDuration;
})
.sort((a, b) => {
if (sortBy === "recent")
return new Date(b.upload_date).getTime() - new Date(a.upload_date).getTime();
if (sortBy === "most_liked") return (b.likes_count || 0) - (a.likes_count || 0);
if (sortBy === "most_played") return (b.plays_count || 0) - (a.plays_count || 0);
if (sortBy === "duration")
return (b.movie_file?.duration ?? 0) - (a.movie_file?.duration ?? 0);
return a.title.localeCompare(b.title);
});
});
</script>
<Meta title={$_('videos.title')} description={$_('videos.description')} />
<Meta title={$_("videos.title")} description={$_("videos.description")} />
<div
class="relative min-h-screen bg-gradient-to-br from-background via-primary/5 to-accent/5 overflow-hidden"
@@ -83,12 +73,12 @@ const filteredVideos = $derived(() => {
<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"
>
{$_('videos.title')}
{$_("videos.title")}
</h1>
<p
class="text-xl md:text-2xl text-muted-foreground mb-10 leading-relaxed max-w-4xl mx-auto"
>
{$_('videos.description')}
{$_("videos.description")}
</p>
<!-- Filters -->
@@ -99,7 +89,7 @@ const filteredVideos = $derived(() => {
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')}
placeholder={$_("videos.search_placeholder")}
bind:value={searchQuery}
class="pl-10 bg-background/50 border-primary/20 focus:border-primary"
/>
@@ -111,30 +101,22 @@ const filteredVideos = $derived(() => {
class="w-full lg: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'
? $_('videos.categories.all')
: categoryFilter === 'romantic'
? $_('videos.categories.romantic')
: categoryFilter === 'artistic'
? $_('videos.categories.artistic')
: categoryFilter === 'intimate'
? $_('videos.categories.intimate')
: $_('videos.categories.performance')}
{categoryFilter === "all"
? $_("videos.categories.all")
: categoryFilter === "romantic"
? $_("videos.categories.romantic")
: categoryFilter === "artistic"
? $_("videos.categories.artistic")
: categoryFilter === "intimate"
? $_("videos.categories.intimate")
: $_("videos.categories.performance")}
</SelectTrigger>
<SelectContent>
<SelectItem value="all">{$_('videos.categories.all')}</SelectItem>
<SelectItem value="romantic"
>{$_('videos.categories.romantic')}</SelectItem
>
<SelectItem value="artistic"
>{$_('videos.categories.artistic')}</SelectItem
>
<SelectItem value="intimate"
>{$_('videos.categories.intimate')}</SelectItem
>
<SelectItem value="performance"
>{$_('videos.categories.performance')}</SelectItem
>
<SelectItem value="all">{$_("videos.categories.all")}</SelectItem>
<SelectItem value="romantic">{$_("videos.categories.romantic")}</SelectItem>
<SelectItem value="artistic">{$_("videos.categories.artistic")}</SelectItem>
<SelectItem value="intimate">{$_("videos.categories.intimate")}</SelectItem>
<SelectItem value="performance">{$_("videos.categories.performance")}</SelectItem>
</SelectContent>
</Select>
@@ -144,23 +126,19 @@ const filteredVideos = $derived(() => {
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>
{durationFilter === 'all'
? $_('videos.duration.all')
: durationFilter === 'short'
? $_('videos.duration.short')
: durationFilter === 'medium'
? $_('videos.duration.medium')
: $_('videos.duration.long')}
{durationFilter === "all"
? $_("videos.duration.all")
: durationFilter === "short"
? $_("videos.duration.short")
: durationFilter === "medium"
? $_("videos.duration.medium")
: $_("videos.duration.long")}
</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>
<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>
@@ -169,28 +147,22 @@ const filteredVideos = $derived(() => {
<SelectTrigger
class="w-full lg:w-48 bg-background/50 border-primary/20 focus:border-primary"
>
{sortBy === 'recent'
? $_('videos.sort.recent')
: sortBy === 'most_liked'
? $_('videos.sort.most_liked')
: sortBy === 'most_played'
? $_('videos.sort.most_played')
: sortBy === 'duration'
? $_('videos.sort.duration')
: $_('videos.sort.name')}
{sortBy === "recent"
? $_("videos.sort.recent")
: sortBy === "most_liked"
? $_("videos.sort.most_liked")
: sortBy === "most_played"
? $_("videos.sort.most_played")
: sortBy === "duration"
? $_("videos.sort.duration")
: $_("videos.sort.name")}
</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="duration"
>{$_('videos.sort.duration')}</SelectItem
>
<SelectItem value="name">{$_('videos.sort.name')}</SelectItem>
<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="duration">{$_("videos.sort.duration")}</SelectItem>
<SelectItem value="name">{$_("videos.sort.name")}</SelectItem>
</SelectContent>
</Select>
</div>
@@ -206,7 +178,7 @@ const filteredVideos = $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"
/>
@@ -228,7 +200,7 @@ const filteredVideos = $derived(() => {
<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')}
{$_("videos.premium")}
</div>
{/if}
@@ -246,13 +218,12 @@ const filteredVideos = $derived(() => {
<a
class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity"
href={`/videos/${video.slug}`}
aria-label={$_('videos.watch')}
aria-label={$_("videos.watch")}
>
<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>
@@ -280,9 +251,7 @@ const filteredVideos = $derived(() => {
</div>
<!-- Stats -->
<div
class="flex items-center justify-between text-sm text-muted-foreground mb-4"
>
<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" />
@@ -309,7 +278,7 @@ const filteredVideos = $derived(() => {
href={`/videos/${video.slug}`}
>
<span class="icon-[ri--play-large-fill] w-4 h-4 mr-2"></span>
{$_('videos.watch')}
{$_("videos.watch")}
</Button>
<!-- <Button
variant="ghost"
@@ -327,18 +296,18 @@ const filteredVideos = $derived(() => {
{#if filteredVideos().length === 0}
<div class="text-center py-12">
<p class="text-muted-foreground text-lg mb-4">
{$_('videos.no_results')}
{$_("videos.no_results")}
</p>
<Button
variant="outline"
onclick={() => {
searchQuery = '';
categoryFilter = 'all';
durationFilter = 'all';
searchQuery = "";
categoryFilter = "all";
durationFilter = "all";
}}
class="border-primary/20 hover:bg-primary/10"
>
{$_('videos.clear_filters')}
{$_("videos.clear_filters")}
</Button>
</div>
{/if}