Add dedicated video pages and related content recommendations

Introduce a new route for individual video pages, enabling direct navigation to videos. The video cards now link to this new page. Additionally, a new `VideoPage` component is added to display video details, track plays, and show recommended videos similar to YouTube's interface.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: d7424866-83d1-4486-a212-ac12b4c7becf
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/8cc42625-c1f5-4e43-99bd-77f2c4dedee2/d7424866-83d1-4486-a212-ac12b4c7becf/gfjV9kW

client/src/components/video-card.tsx

@@ -49,7 +49,7 @@ export default function VideoCard({ video, onClick }: VideoCardProps) {
       {/* Simple thumbnail with fallback - no HLS loading until needed */}
       <div 
         className="relative bg-bunny-gray rounded-xl overflow-hidden mb-4 aspect-video cursor-pointer group"
-        onClick={() => onClick(video)}
+        onClick={() => window.location.href = `/video/${video.id}`}
       >
         <img
           src={video.thumbnailUrl}
@@ -85,7 +85,7 @@ export default function VideoCard({ video, onClick }: VideoCardProps) {
       <div className="space-y-2">
         <h3 
           className="font-semibold line-clamp-2 hover:text-bunny-blue transition-colors text-bunny-light cursor-pointer"
-          onClick={() => onClick(video)}
+          onClick={() => window.location.href = `/video/${video.id}`}
           data-testid={`text-title-${video.id}`}
         >
           {video.title}