Shorten video URLs for improved sharing and user experience

Refactors video routing and client-side components to generate and utilize shortened, 8-character IDs derived from the full UUIDs. This change enhances the usability of shared video links by removing dashes and truncating the UUID. The backend now supports fetching videos by either the short or full ID, ensuring backward compatibility. Additionally, ad retrieval and view count updates correctly use the full video ID to maintain data integrity with Bunny.net and the database.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 2cd2c0bc-434c-4bc9-ad3f-b99d3897a0d1
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/8cc42625-c1f5-4e43-99bd-77f2c4dedee2/2cd2c0bc-434c-4bc9-ad3f-b99d3897a0d1/HCAS0JG

client/src/components/netflix-grid.tsx

@@ -22,8 +22,10 @@ export default function NetflixGrid({ videos, isLoading }: NetflixGridProps) {
   const [, setLocation] = useLocation();
 
   const handleVideoClick = (video: Video) => {
-    // Navigate to individual video page instead of modal
-    setLocation(`/video/${video.id}`);
+    // Generate short ID for cleaner URLs (first 8 chars without dashes)
+    const shortId = video.id.replace(/-/g, '').substring(0, 8);
+    // Navigate to individual video page with short ID
+    setLocation(`/video/${shortId}`);
   };
 
   const handleCloseModal = () => {

client/src/components/video-card.tsx

@@ -44,6 +44,8 @@ function formatDate(date: Date | string): string {
 }
 
 export default function VideoCard({ video, onClick, className = "", hideOverlay = false }: VideoCardProps) {
+  // Generate short ID for cleaner URLs (first 8 chars without dashes)
+  const shortId = video.id.replace(/-/g, '').substring(0, 8);
   const [isHovered, setIsHovered] = useState(false);
   const [showPreview, setShowPreview] = useState(false);
   const [isMuted, setIsMuted] = useState(true);
@@ -172,7 +174,7 @@ export default function VideoCard({ video, onClick, className = "", hideOverlay
 
   return (
     <div 
-      data-testid={`card-video-${video.id}`}
+      data-testid={`card-video-${shortId}`}
       className={`video-card transition-transform duration-200 ${isMobile ? '' : 'hover:scale-[1.02]'} ${className}`}
       onMouseEnter={() => !isMobile && setIsHovered(true)}
       onMouseLeave={() => !isMobile && setIsHovered(false)}
@@ -191,7 +193,7 @@ export default function VideoCard({ video, onClick, className = "", hideOverlay
             objectPosition: video.faceCenterPosition || 'center center',
             objectFit: 'cover'
           }}
-          data-testid={`img-thumbnail-${video.id}`}
+          data-testid={`img-thumbnail-${shortId}`}
           loading="lazy"
           decoding="async"
           onError={(e) => {