From 529d81649af803a1b25071271501a20d740bc051 Mon Sep 17 00:00:00 2001
From: sebastjanartic <45803536-sebastjanartic@users.noreply.replit.com>
Date: Wed, 3 Sep 2025 13:01:37 +0000
Subject: [PATCH] Create shorter, more manageable video links for sharing

Update video sharing URLs to use a truncated 8-character ID derived from the original UUID, impacting client-side routing and sharing components.

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/3dnI7Tc
---
 client/src/components/bunny-video-modal.tsx | 3 ++-
 client/src/components/video-modal.tsx       | 3 ++-
 client/src/pages/FolxStadlPage.tsx          | 3 ++-
 client/src/pages/GeschichteLiedPage.tsx     | 3 ++-
 client/src/pages/GipfelstammtischPage.tsx   | 3 ++-
 client/src/pages/VideoPage.tsx              | 5 ++++-
 6 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/client/src/components/bunny-video-modal.tsx b/client/src/components/bunny-video-modal.tsx
index e577968..796b248 100644
--- a/client/src/components/bunny-video-modal.tsx
+++ b/client/src/components/bunny-video-modal.tsx
@@ -115,7 +115,8 @@ export default function BunnyVideoModal({ video, isOpen, onClose, onEdit, videos
     if (!video?.id) return window.location.origin;
     // Use custom domain if set, otherwise current domain
     const baseUrl = import.meta.env.VITE_SHARE_DOMAIN || window.location.origin;
-    return `${baseUrl}/video/${video.id}`;
+    const shortId = video.id.replace(/-/g, '').substring(0, 8);
+    return `${baseUrl}/video/${shortId}`;
   };
 
   const copyToClipboard = async () => {
diff --git a/client/src/components/video-modal.tsx b/client/src/components/video-modal.tsx
index 8bebcc3..a4130ac 100644
--- a/client/src/components/video-modal.tsx
+++ b/client/src/components/video-modal.tsx
@@ -364,7 +364,8 @@ export default function VideoModal({ video, isOpen, onClose, enableAds = true }:
 
   const getShareUrl = () => {
     if (!video?.id) return window.location.origin;
-    return `${window.location.origin}?video=${video.id}`;
+    const shortId = video.id.replace(/-/g, '').substring(0, 8);
+    return `${window.location.origin}/video/${shortId}`;
   };
 
   const handleProgressClick = (e: React.MouseEvent<HTMLDivElement>) => {
diff --git a/client/src/pages/FolxStadlPage.tsx b/client/src/pages/FolxStadlPage.tsx
index 3bd9d80..67bed6e 100644
--- a/client/src/pages/FolxStadlPage.tsx
+++ b/client/src/pages/FolxStadlPage.tsx
@@ -41,7 +41,8 @@ export default function FolxStadlPage() {
 
   const handleVideoClick = (video: Video) => {
     // Navigate to individual video page instead of modal
-    setLocation(`/video/${video.id}`);
+    const shortId = video.id.replace(/-/g, '').substring(0, 8);
+    setLocation(`/video/${shortId}`);
   };
 
   const handleCloseModal = () => {
diff --git a/client/src/pages/GeschichteLiedPage.tsx b/client/src/pages/GeschichteLiedPage.tsx
index 22a8d13..8a081c7 100644
--- a/client/src/pages/GeschichteLiedPage.tsx
+++ b/client/src/pages/GeschichteLiedPage.tsx
@@ -43,7 +43,8 @@ export default function GeschichteLiedPage() {
 
   const handleVideoClick = (video: Video) => {
     // Navigate to individual video page instead of modal
-    setLocation(`/video/${video.id}`);
+    const shortId = video.id.replace(/-/g, '').substring(0, 8);
+    setLocation(`/video/${shortId}`);
   };
 
   const handleCloseModal = () => {
diff --git a/client/src/pages/GipfelstammtischPage.tsx b/client/src/pages/GipfelstammtischPage.tsx
index df58cd4..71c166e 100644
--- a/client/src/pages/GipfelstammtischPage.tsx
+++ b/client/src/pages/GipfelstammtischPage.tsx
@@ -43,7 +43,8 @@ export default function GipfelstammtischPage() {
 
   const handleVideoClick = (video: Video) => {
     // Navigate to individual video page instead of modal
-    setLocation(`/video/${video.id}`);
+    const shortId = video.id.replace(/-/g, '').substring(0, 8);
+    setLocation(`/video/${shortId}`);
   };
 
   const handleCloseModal = () => {
diff --git a/client/src/pages/VideoPage.tsx b/client/src/pages/VideoPage.tsx
index 899f9c1..7a18e94 100644
--- a/client/src/pages/VideoPage.tsx
+++ b/client/src/pages/VideoPage.tsx
@@ -735,7 +735,10 @@ export default function VideoPage() {
               {recommendedVideos.slice(0, 10).map((video) => (
                 <div
                   key={video.id}
-                  onClick={() => setLocation(`/video/${video.id}`)}
+                  onClick={() => {
+                    const shortId = video.id.replace(/-/g, '').substring(0, 8);
+                    setLocation(`/video/${shortId}`);
+                  }}
                   className="flex gap-3 p-2 bg-bunny-gray/30 hover:bg-bunny-gray/50 rounded-lg cursor-pointer transition-colors"
                 >
                   <div className="relative w-24 h-16 bg-gray-700 rounded overflow-hidden flex-shrink-0">