feat: display play count on video detail page

- 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

@@ -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);

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>