style: apply prettier formatting to all files

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

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

@@ -1,151 +1,157 @@
 <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";
+  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 { 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 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",
-	},
-];
+  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;
-	}
+  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;
-	}
-}
+    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;
-}
+  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 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);
-	}
-}
+  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);
+  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);
-	}
-}
+    // 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);
+  let showPlayer = $state(false);
 </script>
 
 <Meta
   title={data.video.title}
   description={data.video.description}
-  image={getAssetUrl(data.video.image, 'medium')!}
+  image={getAssetUrl(data.video.image, "medium")!}
 />
 
 <div
@@ -157,16 +163,14 @@ let showPlayer = $state(false);
       <!-- 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"
-        >
+        <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')}
+                  poster={getAssetUrl(data.video.image, "preview")}
                   autoplay
                   ontimeupdate={handleTimeUpdate}
                   class="block w-full"
@@ -184,13 +188,11 @@ let showPlayer = $state(false);
               </media-controller>
             {:else}
               <img
-                src={getAssetUrl(data.video.image, 'medium')}
+                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"
-              >
+              <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}
@@ -199,8 +201,7 @@ let showPlayer = $state(false);
                   data-umami-event-id={data.video.movie}
                   onclick={() => (showPlayer = true)}
                 >
-                  <span class="icon-[ri--play-large-fill] w-10 h-10 text-white"
-                  ></span>
+                  <span class="icon-[ri--play-large-fill] w-10 h-10 text-white"></span>
                 </button>
               </div>
               <button
@@ -214,20 +215,21 @@ let showPlayer = $state(false);
                 <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>
+                  <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}
+                {#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')}
+                  {$_("videos.premium")}
                 </div>
               {/if}
             {/if}
@@ -240,13 +242,12 @@ let showPlayer = $state(false);
             <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 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'}
+                  {data.video.plays_count}
+                  {data.video.plays_count === 1 ? "play" : "plays"}
                 </div>
               {/if}
               <div class="flex items-center gap-1">
@@ -274,7 +275,7 @@ let showPlayer = $state(false);
                 title: data.video.title,
                 description: data.video.description,
                 url: page.url.href,
-                type: 'video' as const
+                type: "video" as const,
               }}
             />
             <!-- <Button
@@ -296,7 +297,7 @@ let showPlayer = $state(false);
                 <div class="flex items-center gap-4">
                   <a href={`/models/${model.slug}`}>
                     <img
-                      src={getAssetUrl(model.avatar as string, 'thumbnail')}
+                      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"
                     />
@@ -307,14 +308,8 @@ let showPlayer = $state(false);
                       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"
-                        >
+                      <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"
@@ -359,10 +354,10 @@ let showPlayer = $state(false);
               <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', {
+                  {$_("videos.comments", {
                     values: {
-                      comments: data.comments.length
-                    }
+                      comments: data.comments.length,
+                    },
                   })}
                 </h3>
                 {#if data.comments.length > 0}
@@ -372,7 +367,7 @@ let showPlayer = $state(false);
                     class="cursor-pointer"
                     onclick={() => (showComments = !showComments)}
                   >
-                    {showComments ? $_('videos.hide') : $_('videos.show')}
+                    {showComments ? $_("videos.hide") : $_("videos.show")}
                   </Button>
                 {/if}
               </div>
@@ -380,11 +375,9 @@ let showPlayer = $state(false);
               <!-- 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"
-                  >
+                  <Avatar class="h-8 w-8 ring-2 ring-accent/20 transition-all duration-200">
                     <AvatarImage
-                      src={getAssetUrl(data.authStatus.user!.avatar.id, 'mini')}
+                      src={getAssetUrl(data.authStatus.user!.avatar.id, "mini")}
                       alt={data.authStatus.user!.artist_name}
                     />
                     <AvatarFallback
@@ -396,7 +389,7 @@ let showPlayer = $state(false);
                   <form class="flex-1 space-y-4" onsubmit={handleComment}>
                     <div class="space-y-2">
                       <Textarea
-                        placeholder={$_('videos.add_comment_placeholder')}
+                        placeholder={$_("videos.add_comment_placeholder")}
                         bind:value={newComment}
                         class="bg-background/50 border-primary/20 focus:border-primary resize-none"
                         rows={2}
@@ -406,9 +399,8 @@ let showPlayer = $state(false);
                       <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
+                            ><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>
@@ -425,9 +417,9 @@ let showPlayer = $state(false);
                           <div
                             class="w-4 h-4 border-2 border-white/30 border-t-white rounded-full animate-spin mr-2"
                           ></div>
-                          {$_('videos.commenting')}
+                          {$_("videos.commenting")}
                         {:else}
-                          {$_('videos.comment')}
+                          {$_("videos.comment")}
                         {/if}
                       </Button>
                     </div>
@@ -445,10 +437,7 @@ let showPlayer = $state(false);
                           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'
-                            )}
+                            src={getAssetUrl(comment.user_created.avatar as string, "mini")}
                             alt={comment.user_created.artist_name}
                           />
                           <AvatarFallback
@@ -460,19 +449,17 @@ let showPlayer = $state(false);
                       </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"
+                          <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
+                            >{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"
-                        >
+                        <div class="flex items-center gap-4 text-xs text-muted-foreground">
                           <!-- <button
                             class="flex items-center gap-1 hover:text-primary transition-colors"
                           >
@@ -543,8 +530,9 @@ let showPlayer = $state(false);
           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
+          ><span class="icon-[ri--arrow-left-long-line] w-4 h-4 mr-1"></span>{$_(
+            "videos.back",
+          )}</Button
         >
       </div>
     </div>