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

A new start

Browse Source
This commit is contained in:
Valknar XXX
2025-10-25 22:04:41 +02:00
commit be0fc11a5c
193 changed files with 25076 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
packages/frontend/src/routes/videos/+page.server.ts Normal file
View File

@@ -0,0 +1,6 @@
import { getVideos } from "$lib/services";
export async function load({ fetch }) {
return {
videos: await getVideos(fetch),
};
}

350
packages/frontend/src/routes/videos/+page.svelte Normal file
View File

@@ -0,0 +1,350 @@
<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";
const timeAgo = new TimeAgo("en");
let searchQuery = $state("");
let sortBy = $state("trending");
let categoryFilter = $state("all");
let durationFilter = $state("all");
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.duration < 10 * 60) ||
(durationFilter === "medium" &&
video.movie.duration >= 10 * 60 &&
video.movie.duration < 20 * 60) ||
(durationFilter === "long" && video.movie.duration >= 20 * 60);
return matchesSearch && matchesCategory && matchesDuration;
})
.sort((a, b) => {
// if (sortBy === "trending")
// return (
// parseInt(b.views.replace(/[^\d]/g, "")) -
// parseInt(a.views.replace(/[^\d]/g, ""))
// );
if (sortBy === "recent")
return (
new Date(b.upload_date).getTime() - new Date(a.upload_date).getTime()
);
// if (sortBy === "popular")
// return (
// parseInt(b.likes.replace(/[^\d]/g, "")) -
// parseInt(a.likes.replace(/[^\d]/g, ""))
// );
if (sortBy === "duration") return b.movie.duration - a.movie.duration;
return a.title.localeCompare(b.title);
});
});
</script>
<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"
>
<!-- 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="absolute inset-0 bg-gradient-to-br from-primary/10 via-accent/5 to-background"
></div>
<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"
>
{$_('videos.title')}
</h1>
<p
class="text-xl md:text-2xl text-muted-foreground mb-10 leading-relaxed max-w-4xl mx-auto"
>
{$_('videos.description')}
</p>
<!-- Filters -->
<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')}
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 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')}
</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
>
</SelectContent>
</Select>
<!-- Duration Filter -->
<Select type="single" bind:value={durationFilter}>
<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>
{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>
</SelectContent>
</Select>
<!-- Sort -->
<Select type="single" bind:value={sortBy}>
<SelectTrigger
class="w-full lg:w-48 bg-background/50 border-primary/20 focus:border-primary"
>
{sortBy === 'trending'
? $_('videos.sort.trending')
: sortBy === 'recent'
? $_('videos.sort.recent')
: sortBy === 'popular'
? $_('videos.sort.popular')
: sortBy === 'duration'
? $_('videos.sort.duration')
: $_('videos.sort.name')}
</SelectTrigger>
<SelectContent>
<SelectItem value="trending"
>{$_('videos.sort.trending')}</SelectItem
>
<SelectItem value="recent">{$_('videos.sort.recent')}</SelectItem>
<SelectItem value="popular"
>{$_('videos.sort.popular')}</SelectItem
>
<SelectItem value="duration"
>{$_('videos.sort.duration')}</SelectItem
>
<SelectItem value="name">{$_('videos.sort.name')}</SelectItem>
</SelectContent>
</Select>
</div>
</div>
</div>
</section>
<!-- Videos 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 filteredVideos() as video}
<Card
class="p-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(video.image, 'preview')}
alt={video.title}
class="w-full h-48 object-cover group-hover:scale-105 transition-transform duration-300"
/>
<!-- 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"
>
{formatVideoDuration(video.movie.duration)}
</div>
<!-- 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}
<!-- Views -->
<!-- <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"
>
<EyeIcon class="w-3 h-3" />
{video.views}
</div> -->
<!-- Play Overlay -->
<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')}
>
<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>
</a>
<!-- Model Info -->
<!-- <div class="absolute bottom-3 right-3 text-white text-sm">
<button
onclick={() => onNavigate("model")}
class="hover:text-primary transition-colors"
>
{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">
<div class="flex items-center gap-1">
<EyeIcon class="w-4 h-4" />
{video.views}
</div>
<div class="flex items-center gap-1">
<HeartIcon class="w-4 h-4" />
{video.likes}
</div>
</div> -->
<!-- <span
class="capitalize bg-primary/10 text-primary px-2 py-1 rounded-full text-xs"
>
{video.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={`/videos/${video.slug}`}
>
<span class="icon-[ri--play-large-fill] w-4 h-4 mr-2"></span>
{$_('videos.watch')}
</Button>
<!-- <Button
variant="ghost"
size="sm"
class="px-3 hover:bg-primary/10"
>
<HeartIcon class="w-4 h-4" />
</Button> -->
</div>
</CardContent>
</Card>
{/each}
</div>
{#if filteredVideos().length === 0}
<div class="text-center py-12">
<p class="text-muted-foreground text-lg mb-4">
{$_('videos.no_results')}
</p>
<Button
variant="outline"
onclick={() => {
searchQuery = '';
categoryFilter = 'all';
durationFilter = 'all';
}}
class="border-primary/20 hover:bg-primary/10"
>
{$_('videos.clear_filters')}
</Button>
</div>
{/if}
</div>
</div>

11
packages/frontend/src/routes/videos/[slug]/+page.server.ts Normal file
View File

@@ -0,0 +1,11 @@
import { error } from "@sveltejs/kit";
import { getCommentsForVideo, getVideoBySlug } from "$lib/services.js";
export async function load({ fetch, params, locals }) {
const video = await getVideoBySlug(params.slug, fetch);
const comments = await getCommentsForVideo(video.id, fetch);
try {
return { video, comments, authStatus: locals.authStatus };
} catch {
error(404, "Video not found");
}
}

491
packages/frontend/src/routes/videos/[slug]/+page.svelte Normal file
View File

@@ -0,0 +1,491 @@
<script lang="ts">
import { _ } from "svelte-i18n";
import { Button } from "$lib/components/ui/button";
import { Card, CardContent } from "$lib/components/ui/card";
import "media-chrome";
import { getAssetUrl } from "$lib/directus";
import TimeAgo from "javascript-time-ago";
import { page } from "$app/state";
import PeonyBackground from "$lib/components/background/peony-background.svelte";
import Meta from "$lib/components/meta/meta.svelte";
import * as Alert from "$lib/components/ui/alert";
import Textarea from "$lib/components/ui/textarea/textarea.svelte";
import Avatar from "$lib/components/ui/avatar/avatar.svelte";
import { AvatarFallback, AvatarImage } from "$lib/components/ui/avatar";
import { formatVideoDuration, getUserInitials } from "$lib/utils";
import { invalidateAll } from "$app/navigation";
import { toast } from "svelte-sonner";
import { createCommentForVideo } from "$lib/services";
import NewsletterSignup from "$lib/components/newsletter-signup/newsletter-signup-widget.svelte";
import SharingPopupButton from "$lib/components/sharing-popup/sharing-popup-button.svelte";
const timeAgo = new TimeAgo("en");
let isLiked = $state(false);
let isBookmarked = $state(false);
let newComment = $state("");
let showComments = $state(true);
let isCommentLoading = $state(false);
let isCommentError = $state(false);
let commentError = $state();
const relatedVideos = [
{
id: 2,
title: "Sunset Dreams",
thumbnail: "/placeholder.svg?size=wide",
duration: "8:45",
views: "1.8M",
model: "Luna Belle",
},
{
id: 3,
title: "Intimate Moments",
thumbnail: "/placeholder.svg?size=wide",
duration: "15:22",
views: "3.2M",
model: "Aria Divine",
},
{
id: 4,
title: "Morning Light",
thumbnail: "/placeholder.svg?size=wide",
duration: "10:15",
views: "956K",
model: "Maya Starlight",
},
{
id: 5,
title: "Passionate Dance",
thumbnail: "/placeholder.svg?size=wide",
duration: "7:33",
views: "1.4M",
model: "Zara Moon",
},
];
function handleLike() {
isLiked = !isLiked;
}
function handleBookmark() {
isBookmarked = !isBookmarked;
}
async function handleComment(e: Event) {
e.preventDefault();
try {
isCommentLoading = true;
isCommentError = false;
commentError = "";
await createCommentForVideo(data.video.id, newComment);
toast.success($_("videos.toast_comment"));
invalidateAll();
newComment = "";
showComments = true;
} catch (err: any) {
commentError = err.message;
isCommentError = true;
} finally {
isCommentLoading = false;
}
}
let showPlayer = $state(false);
const { data } = $props();
</script>
<Meta
title={data.video.title}
description={data.video.description}
image={getAssetUrl(data.video.image, 'medium')!}
/>
<div
class="relative min-h-screen bg-gradient-to-br from-background via-primary/5 to-accent/5 overflow-hidden"
>
<PeonyBackground />
<div class="container mx-auto px-4 py-8">
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
<!-- Main Video Section -->
<div class="lg:col-span-2 space-y-6">
<!-- Video Player -->
<Card
class="p-0 overflow-hidden bg-gradient-to-br from-card to-card/50"
>
<div class="relative aspect-video bg-black">
{#if showPlayer}
<media-controller>
<video
slot="media"
src={getAssetUrl(data.video.movie.id)}
poster={getAssetUrl(data.video.image, 'preview')}
autoplay
class="inline"
>
<track kind="captions" />
</video>
<media-control-bar>
<media-play-button></media-play-button>
<media-mute-button></media-mute-button>
<media-volume-range></media-volume-range>
<media-time-range></media-time-range>
<media-pip-button></media-pip-button>
<media-fullscreen-button></media-fullscreen-button>
</media-control-bar>
</media-controller>
{:else}
<img
src={getAssetUrl(data.video.image, 'medium')}
alt={data.video.title}
class="w-full h-full object-cover"
/>
<div
class="absolute inset-0 bg-black/20 flex items-center justify-center"
>
<button
class="cursor-pointer w-20 h-20 bg-primary/90 hover:bg-primary rounded-full flex flex-col items-center justify-center transition-colors shadow-2xl"
aria-label={data.video.title}
data-umami-event="play-video"
data-umami-event-title={data.video.title}
data-umami-event-id={data.video.movie.id}
onclick={() => (showPlayer = true)}
>
<span class="icon-[ri--play-large-fill] w-10 h-10 text-white"
></span>
</button>
</div>
<div
class="absolute bottom-4 left-4 bg-black/70 text-white px-3 py-1 rounded font-medium"
>
{formatVideoDuration(data.video.movie.duration)}
</div>
{#if data.video.premium}
<div
class="absolute top-4 left-4 bg-gradient-to-r from-primary to-accent text-white px-3 py-1 rounded-full font-medium"
>
{$_('videos.premium')}
</div>
{/if}
{/if}
</div>
</Card>
<!-- Video Info -->
<div class="space-y-4">
<div>
<h1 class="text-2xl md:text-3xl font-bold mb-2">
{data.video.title}
</h1>
<div
class="flex flex-wrap items-center gap-4 text-sm text-muted-foreground"
>
<!-- <div class="flex items-center gap-1">
<EyeIcon class="w-4 h-4" />
{data.video.views} views
</div> -->
<div class="flex items-center gap-1">
<span class="icon-[ri--calendar-line] w-4 h-4"></span>
{timeAgo.format(new Date(data.video.upload_date))}
</div>
<!-- <span class="bg-primary/10 text-primary px-2 py-1 rounded-full">
{data.video.category}
</span> -->
</div>
</div>
<!-- Action Buttons -->
<div class="flex flex-wrap gap-3">
<!-- <Button
variant={isLiked ? "default" : "outline"}
onclick={handleLike}
class="flex items-center gap-2 {isLiked
? 'bg-gradient-to-r from-primary to-accent'
: 'border-primary/20 hover:bg-primary/10'}"
>
<ThumbsUpIcon class="w-4 h-4 {isLiked ? 'fill-current' : ''}" />
{data.video.likes}
</Button> -->
<SharingPopupButton
content={{
title: data.video.title,
description: data.video.description,
url: page.url.href,
type: 'video' as const
}}
/>
<!-- <Button
variant={isBookmarked ? "default" : "outline"}
onclick={handleBookmark}
class="flex items-center gap-2 {isBookmarked
? 'bg-gradient-to-r from-primary to-accent'
: 'border-primary/20 hover:bg-primary/10'}"
>
<BookmarkIcon
class="w-4 h-4 {isBookmarked ? 'fill-current' : ''}"
/>
Save
</Button> -->
</div>
<!-- Model Info -->
<div class="grid grid-cols-1 gap-4">
{#each data.video.models as model}
<div class="flex items-center justify-between">
<div class="flex items-center gap-4">
<a href={`/models/${model.slug}`}>
<img
src={getAssetUrl(model.avatar as string, 'thumbnail')}
alt={model.artist_name}
class="w-12 h-12 rounded-full object-cover ring-2 ring-primary/20 hover:ring-primary/40 transition-all"
/>
</a>
<div>
<a
href={`/models/${model.slug}`}
class="font-semibold hover:text-primary transition-colors flex items-center gap-2"
>
{model.artist_name}
<div
class="w-4 h-4 bg-primary rounded-full flex items-center justify-center"
>
<svg
class="w-2.5 h-2.5 text-white"
fill="currentColor"
viewBox="0 0 20 20"
>
<path
fill-rule="evenodd"
d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
clip-rule="evenodd"
/>
</svg>
</div>
</a>
<!-- <p class="text-sm text-muted-foreground">
{data.video.model.subscribers} subscribers
</p> -->
</div>
</div>
<!-- <Button
class="bg-gradient-to-r from-primary to-accent hover:from-primary/90 hover:to-accent/90"
>Subscribe</Button
> -->
</div>
{/each}
</div>
<!-- Description -->
<Card class="p-0 bg-card/50">
<CardContent class="p-4">
<p class="text-muted-foreground mb-4">{data.video.description}</p>
<div class="flex flex-wrap gap-2">
{#each data.video.tags as tag}
<a
class="text-xs bg-primary/10 text-primary px-2 py-1 rounded-full"
href="/tags/{tag}"
>
#{tag}
</a>
{/each}
</div>
</CardContent>
</Card>
<!-- Comments Section -->
<Card class="p-0 bg-card/50">
<CardContent class="p-4">
<div class="flex items-center justify-between mb-4">
<h3 class="font-semibold flex items-center gap-2">
<span class="icon-[ri--message-line] w-5 h-5"></span>
{$_('videos.comments', {
values: {
comments: data.comments.length
}
})}
</h3>
{#if data.comments.length > 0}
<Button
variant="link"
size="sm"
class="cursor-pointer"
onclick={() => (showComments = !showComments)}
>
{showComments ? $_('videos.hide') : $_('videos.show')}
</Button>
{/if}
</div>
<!-- Add Comment -->
{#if data.authStatus.authenticated}
<div class="flex gap-3 mb-6">
<Avatar
class="h-8 w-8 ring-2 ring-accent/20 transition-all duration-200"
>
<AvatarImage
src={getAssetUrl(data.authStatus.user!.avatar.id, 'mini')}
alt={data.authStatus.user!.artist_name}
/>
<AvatarFallback
class="bg-gradient-to-br from-primary to-accent text-primary-foreground text-xs font-semibold transition-all duration-200"
>
{getUserInitials(data.authStatus.user!.artist_name)}
</AvatarFallback>
</Avatar>
<form class="flex-1 space-y-4" onsubmit={handleComment}>
<div class="space-y-2">
<Textarea
placeholder={$_('videos.add_comment_placeholder')}
bind:value={newComment}
class="bg-background/50 border-primary/20 focus:border-primary resize-none"
rows={2}
></Textarea>
</div>
{#if isCommentError}
<div class="grid w-full max-w-xl items-start gap-4">
<Alert.Root variant="destructive">
<Alert.Title class="items-center flex"
><span
class="icon-[ri--alert-line] inline-block w-4 h-4 mr-1"
></span>{$_('videos.error')}</Alert.Title
>
<Alert.Description>{commentError}</Alert.Description>
</Alert.Root>
</div>
{/if}
<div class="flex justify-end space">
<Button
size="sm"
class="cursor-pointer bg-gradient-to-r from-primary to-accent hover:from-primary/90 hover:to-accent/90"
disabled={!newComment.trim() || isCommentLoading}
type="submit"
>
{#if isCommentLoading}
<div
class="w-4 h-4 border-2 border-white/30 border-t-white rounded-full animate-spin mr-2"
></div>
{$_('videos.commenting')}
{:else}
{$_('videos.comment')}
{/if}
</Button>
</div>
</form>
</div>
{/if}
{#if showComments}
<!-- Comments List -->
<div class="space-y-4">
{#each data.comments as comment}
<div class="flex gap-3">
<Avatar
class="h-8 w-8 ring-2 ring-accent/20 transition-all duration-200"
>
<AvatarImage
src={getAssetUrl(
comment.user_created.avatar as string,
'mini'
)}
alt={comment.user_created.artist_name}
/>
<AvatarFallback
class="bg-gradient-to-br from-primary to-accent text-primary-foreground text-xs font-semibold transition-all duration-200"
>
{getUserInitials(data.authStatus.user!.artist_name)}
</AvatarFallback>
</Avatar>
<div class="flex-1">
<div class="flex items-center gap-2 mb-1">
<span class="font-medium text-sm"
>{comment.user_created.artist_name}</span
>
<span class="text-xs text-muted-foreground"
>{timeAgo.format(
new Date(comment.date_created)
)}</span
>
</div>
<p class="text-sm mb-2">{comment.comment}</p>
<div
class="flex items-center gap-4 text-xs text-muted-foreground"
>
<!-- <button
class="flex items-center gap-1 hover:text-primary transition-colors"
>
<ThumbsUpIcon class="w-3 h-3" />
{comment.likes}
</button> -->
<!-- {#if comment.replies > 0}
<button
class="hover:text-primary transition-colors"
>
{comment.replies} replies
</button>
{/if} -->
</div>
</div>
</div>
{/each}
</div>
{/if}
</CardContent>
</Card>
</div>
</div>
<!-- Sidebar -->
<div class="space-y-6">
<!-- Related Videos -->
<!-- <Card class="bg-card/50">
<CardContent class="p-4">
<h3 class="font-semibold mb-4">Related Videos</h3>
<div class="space-y-4">
{#each relatedVideos as relatedVideo}
<button
onclick={() => onNavigate('video')}
class="flex gap-3 w-full text-left hover:bg-primary/5 p-2 rounded-lg transition-colors"
>
<div class="relative">
<img
src={relatedData.video.thumbnail}
alt={relatedData.video.title}
class="w-24 h-16 object-cover rounded"
/>
<div
class="absolute bottom-1 right-1 bg-black/70 text-white text-xs px-1 rounded"
>
{relatedData.video.duration}
</div>
</div>
<div class="flex-1 min-w-0">
<h4 class="font-medium text-sm line-clamp-2 mb-1">
{relatedData.video.title}
</h4>
<p class="text-xs text-muted-foreground">
{relatedData.video.model}
</p>
<p class="text-xs text-muted-foreground">
{relatedData.video.views} views
</p>
</div>
</button>
{/each}
</div>
</CardContent>
</Card> -->
<!-- <NewsletterSignup /> -->
<!-- Back to Videos -->
<Button
variant="outline"
href="/videos"
class="w-full border-primary/20 hover:bg-primary/10"
><span class="icon-[ri--arrow-left-long-line] w-4 h-4 mr-1"
></span>{$_('videos.back')}</Button
>
</div>
</div>
</div>
</div>