553 lines
21 KiB
Svelte
553 lines
21 KiB
Svelte
<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, likeVideo, unlikeVideo, recordVideoPlay, updateVideoPlay } from "$lib/services";
|
|
import SharingPopupButton from "$lib/components/sharing-popup/sharing-popup-button.svelte";
|
|
|
|
const { data } = $props();
|
|
|
|
const timeAgo = new TimeAgo("en");
|
|
let isLiked = $state(data.likeStatus.liked);
|
|
let likesCount = $state(data.video.likes_count || 0);
|
|
let isLikeLoading = $state(false);
|
|
let isBookmarked = $state(false);
|
|
let newComment = $state("");
|
|
let showComments = $state(true);
|
|
let isCommentLoading = $state(false);
|
|
let isCommentError = $state(false);
|
|
let commentError = $state();
|
|
let currentPlayId = $state<string | null>(null);
|
|
let lastTrackedTime = $state(0);
|
|
|
|
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",
|
|
},
|
|
];
|
|
|
|
async function handleLike() {
|
|
if (!data.authStatus.authenticated) {
|
|
toast.error("Please sign in to like videos");
|
|
return;
|
|
}
|
|
|
|
try {
|
|
isLikeLoading = true;
|
|
if (isLiked) {
|
|
const result = await unlikeVideo(data.video.id);
|
|
likesCount = result.likes_count;
|
|
isLiked = false;
|
|
toast.success("Removed from liked videos");
|
|
} else {
|
|
const result = await likeVideo(data.video.id);
|
|
likesCount = result.likes_count;
|
|
isLiked = true;
|
|
toast.success("Added to liked videos");
|
|
}
|
|
} catch (error: any) {
|
|
toast.error(error.message || "Failed to update like");
|
|
} finally {
|
|
isLikeLoading = false;
|
|
}
|
|
}
|
|
|
|
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;
|
|
}
|
|
}
|
|
|
|
async function handlePlay() {
|
|
showPlayer = true;
|
|
try {
|
|
const result = await recordVideoPlay(data.video.id);
|
|
currentPlayId = result.play_id;
|
|
} catch (error) {
|
|
console.error("Failed to record play:", error);
|
|
}
|
|
}
|
|
|
|
function handleTimeUpdate(e: Event) {
|
|
const video = e.target as HTMLVideoElement;
|
|
const currentTime = Math.floor(video.currentTime);
|
|
|
|
// Update every 10 seconds
|
|
if (currentPlayId && currentTime - lastTrackedTime >= 10) {
|
|
lastTrackedTime = currentTime;
|
|
const completed = video.currentTime >= video.duration * 0.9; // 90% watched = completed
|
|
updateVideoPlay(data.video.id, currentPlayId, currentTime, completed).catch(console.error);
|
|
}
|
|
}
|
|
|
|
let showPlayer = $state(false);
|
|
</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
|
|
ontimeupdate={handleTimeUpdate}
|
|
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>
|
|
<button
|
|
class="cursor-pointer absolute inset-0 bg-black/20 flex items-center justify-center"
|
|
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={handlePlay}
|
|
>
|
|
<div
|
|
class="w-20 h-20 bg-primary/90 hover:bg-primary rounded-full flex flex-col items-center justify-center transition-colors shadow-2xl"
|
|
>
|
|
<span class="icon-[ri--play-large-fill] w-10 h-10 text-white"
|
|
></span>
|
|
</div>
|
|
</button>
|
|
<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"
|
|
>
|
|
{#if data.video.plays_count}
|
|
<div class="flex items-center gap-1">
|
|
<span class="icon-[ri--play-fill] w-4 h-4"></span>
|
|
{data.video.plays_count} {data.video.plays_count === 1 ? 'play' : 'plays'}
|
|
</div>
|
|
{/if}
|
|
<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>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Action Buttons -->
|
|
<div class="flex flex-wrap gap-3">
|
|
<Button
|
|
variant={isLiked ? "default" : "outline"}
|
|
onclick={handleLike}
|
|
disabled={isLikeLoading}
|
|
class="flex items-center gap-2 cursor-pointer {isLiked
|
|
? 'bg-gradient-to-r from-primary to-accent'
|
|
: 'border-primary/20 hover:bg-primary/10'}"
|
|
>
|
|
<span class="icon-[ri--heart-{isLiked ? 'fill' : 'line'}] w-4 h-4"></span>
|
|
{likesCount}
|
|
</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'}"
|
|
>
|
|
<span class="icon-[ri--bookmark-{isBookmarked ? 'fill' : 'line'}] w-4 h-4"></span>
|
|
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">
|
|
<a href="/users/{comment.user_created.id}" class="flex-shrink-0">
|
|
<Avatar
|
|
class="h-8 w-8 ring-2 ring-accent/20 hover:ring-primary/40 transition-all duration-200 cursor-pointer"
|
|
>
|
|
<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(comment.user_created.artist_name)}
|
|
</AvatarFallback>
|
|
</Avatar>
|
|
</a>
|
|
<div class="flex-1">
|
|
<div class="flex items-center gap-2 mb-1">
|
|
<a href="/users/{comment.user_created.id}" class="font-medium text-sm hover:text-primary transition-colors"
|
|
>{comment.user_created.artist_name}</a
|
|
>
|
|
<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> -->
|
|
|
|
<!-- 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>
|