style: apply prettier formatting to all files

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

packages/frontend/src/routes/videos/+page.server.ts

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

packages/frontend/src/routes/videos/+page.svelte

@@ -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}

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

@@ -2,26 +2,26 @@ import { error } from "@sveltejs/kit";
 import { getCommentsForVideo, getVideoBySlug, getVideoLikeStatus } 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);
+  const video = await getVideoBySlug(params.slug, fetch);
+  const comments = await getCommentsForVideo(video.id, fetch);
 
-	let likeStatus = { liked: false };
-	if (locals.authStatus.authenticated) {
-		try {
-			likeStatus = await getVideoLikeStatus(video.id, fetch);
-		} catch (error) {
-			console.error("Failed to get like status:", error);
-		}
-	}
+  let likeStatus = { liked: false };
+  if (locals.authStatus.authenticated) {
+    try {
+      likeStatus = await getVideoLikeStatus(video.id, fetch);
+    } catch (error) {
+      console.error("Failed to get like status:", error);
+    }
+  }
 
-	try {
-		return {
-			video,
-			comments,
-			authStatus: locals.authStatus,
-			likeStatus
-		};
-	} catch {
-		error(404, "Video not found");
-	}
+  try {
+    return {
+      video,
+      comments,
+      authStatus: locals.authStatus,
+      likeStatus,
+    };
+  } catch {
+    error(404, "Video not found");
+  }
 }

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>