From fed2dd65e55eb5402a901cc7d33ecca2ec0a4422 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Kr=C3=BCger?= <valknar@pivoine.art>
Date: Thu, 20 Nov 2025 19:23:36 +0100
Subject: [PATCH] feat: display play count on video detail page
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Add play count display below video title with play icon
- Query actual plays count from sexy_video_plays table for accuracy
- Apply same pattern as likes_count for consistency
- Show singular/plural ("play" vs "plays") based on count

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 packages/bundle/src/endpoint/index.ts          | 18 ++++++++++++++++++
 .../src/routes/videos/[slug]/+page.svelte      | 13 ++++++-------
 2 files changed, 24 insertions(+), 7 deletions(-)

diff --git a/packages/bundle/src/endpoint/index.ts b/packages/bundle/src/endpoint/index.ts
index 095b804..a5b59d9 100644
--- a/packages/bundle/src/endpoint/index.ts
+++ b/packages/bundle/src/endpoint/index.ts
@@ -204,6 +204,15 @@ export default {
 						.first();
 
 					video.likes_count = parseInt(likesCount?.count || 0);
+
+					// Count actual plays from database
+					const playsCount = await database
+						.count("* as count")
+						.from("sexy_video_plays")
+						.where("video_id", video.id)
+						.first();
+
+					video.plays_count = parseInt(playsCount?.count || 0);
 				}
 
 				res.json(videos);
@@ -257,6 +266,15 @@ export default {
 
 				video.likes_count = parseInt(likesCount?.count || 0);
 
+				// Count actual plays from database
+				const playsCount = await database
+					.count("* as count")
+					.from("sexy_video_plays")
+					.where("video_id", video.id)
+					.first();
+
+				video.plays_count = parseInt(playsCount?.count || 0);
+
 				res.json(video);
 			} catch (error: any) {
 				console.error("Video by slug error:", error);
diff --git a/packages/frontend/src/routes/videos/[slug]/+page.svelte b/packages/frontend/src/routes/videos/[slug]/+page.svelte
index b7a5a11..5aec13e 100644
--- a/packages/frontend/src/routes/videos/[slug]/+page.svelte
+++ b/packages/frontend/src/routes/videos/[slug]/+page.svelte
@@ -244,17 +244,16 @@ let showPlayer = $state(false);
             <div
               class="flex flex-wrap items-center gap-4 text-sm text-muted-foreground"
             >
-              <!-- <div class="flex items-center gap-1">
-                <EyeIcon class="w-4 h-4" />
-                {data.video.views} views
-              </div> -->
+              {#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>
-              <!-- <span class="bg-primary/10 text-primary px-2 py-1 rounded-full">
-                {data.video.category}
-              </span> -->
             </div>
           </div>