sexy/packages/frontend/src/routes/videos/[slug]/+page.svelte

<script lang="ts">
  import { untrack } from "svelte";
  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/api";
  import TimeAgo from "javascript-time-ago";
  import { page } from "$app/state";
  import SexyBackground from "$lib/components/background/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,
    deleteComment,
    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(untrack(() => data.likeStatus.liked));
  let likesCount = $state(untrack(() => data.video.likes_count || 0));
  $effect(() => {
    isLiked = data.likeStatus.liked;
    likesCount = data.video.likes_count || 0;
  });
  let isLikeLoading = $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);

  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) {
      toast.error((error instanceof Error ? error.message : null) || "Failed to update like");
    } finally {
      isLikeLoading = false;
    }
  }

  async function handleDeleteComment(id: number) {
    try {
      await deleteComment(id);
      toast.success($_("videos.comment_deleted"));
      invalidateAll();
    } catch {
      toast.error($_("videos.comment_delete_error"));
    }
  }

  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) {
      commentError = err instanceof Error ? err.message : "Unknown error";
      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"
>
  <SexyBackground />
  <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 class="absolute inset-0 w-full h-full">
                <video
                  slot="media"
                  src={getAssetUrl(data.video.movie)}
                  poster={getAssetUrl(data.video.image, "preview")}
                  autoplay
                  ontimeupdate={handleTimeUpdate}
                  class="block w-full"
                >
                  <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}
                  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}
                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"
              >
                {#if data.video.movie_file?.duration}{formatVideoDuration(
                    data.video.movie_file.duration,
                  )}{/if}
              </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,
              }}
            />
          </div>

          <!-- Model Info -->
          <div class="grid grid-cols-1 gap-4">
            {#each data.video.models as model (model.slug)}
              <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>
                  </div>
                </div>
              </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 (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, "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 (comment.id)}
                    <div class="flex gap-3">
                      <a href="/users/{comment.user?.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?.avatar, "mini")}
                            alt={comment.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(comment.user?.artist_name)}
                          </AvatarFallback>
                        </Avatar>
                      </a>
                      <div class="flex-1">
                        <div class="flex items-center mb-1">
                          <a
                            href="/users/{comment.user?.id}"
                            class="font-medium text-sm hover:text-primary transition-colors"
                            >{comment.user?.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>
                        {#if data.authStatus.user?.id === comment.user_id || data.authStatus.user?.is_admin}
                          <button
                            class="text-xs text-muted-foreground hover:text-destructive transition-colors"
                            onclick={() => handleDeleteComment(comment.id)}
                          >
                            {$_("common.delete")}
                          </button>
                        {/if}
                      </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>