Navigate to individual video pages instead of using modals

Update video click handlers to navigate to dedicated video pages and pass show context via URL parameters. Modify video page to correctly filter recommended videos based on the show context.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 45a1dcfc-f8a2-475a-a6b9-96fbb841dc27
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/60d372ff-2c10-46c7-b01b-10c3435136b0/45a1dcfc-f8a2-475a-a6b9-96fbb841dc27/CdguB3F

.replit

@@ -16,7 +16,7 @@ localPort = 5000
 externalPort = 80
 
 [[ports]]
-localPort = 40259
+localPort = 33273
 externalPort = 3000
 
 [env]

client/src/pages/FolxStadlPage.tsx

@@ -40,9 +40,9 @@ export default function FolxStadlPage() {
   const currentVideos = folxStadlVideos.slice(startIndex, endIndex);
 
   const handleVideoClick = (video: Video) => {
-    // Open modal with navigation controls for all FOLX STADL videos
+    // Navigate to individual video page with show context
-    setSelectedVideo(video);
+    const shortId = video.id.replace(/-/g, '').substring(0, 8);
-    setIsModalOpen(true);
+    setLocation(`/video/${shortId}?show=folx-stadl`);
   };
 
   const handleCloseModal = () => {

client/src/pages/GeschichteLiedPage.tsx

@@ -42,9 +42,9 @@ export default function GeschichteLiedPage() {
   const currentVideos = geschichteVideos.slice(startIndex, endIndex);
 
   const handleVideoClick = (video: Video) => {
-    // Open modal with navigation controls for all Geschichte des Liedes videos
+    // Navigate to individual video page with show context
-    setSelectedVideo(video);
+    const shortId = video.id.replace(/-/g, '').substring(0, 8);
-    setIsModalOpen(true);
+    setLocation(`/video/${shortId}?show=geschichte-lied`);
   };
 
   const handleCloseModal = () => {

client/src/pages/GipfelstammtischPage.tsx

@@ -42,9 +42,9 @@ export default function GipfelstammtischPage() {
   const currentVideos = gipfelVideos.slice(startIndex, endIndex);
 
   const handleVideoClick = (video: Video) => {
-    // Navigate to individual video page instead of modal
+    // Navigate to individual video page with show context
     const shortId = video.id.replace(/-/g, '').substring(0, 8);
-    setLocation(`/video/${shortId}`);
+    setLocation(`/video/${shortId}?show=gipfelstammtisch`);
   };
 
   const handleCloseModal = () => {

client/src/pages/VideoPage.tsx

@@ -55,6 +55,10 @@ export default function VideoPage() {
   const [, params] = useRoute("/video/:id");
   const [, setLocation] = useLocation();
   const videoId = params?.id;
+  
+  // Get URL search params to determine show context
+  const urlParams = new URLSearchParams(window.location.search);
+  const showContext = urlParams.get('show');
   const [showShareMenu, setShowShareMenu] = useState(false);
   const [touchStart, setTouchStart] = useState(0);
   const [touchEnd, setTouchEnd] = useState(0);
@@ -91,13 +95,35 @@ export default function VideoPage() {
 
   const recommendedVideos = recommendedResponse?.videos?.filter(v => v.id !== currentVideo?.id) || [];
   
-  // Filter videos based on current video category for navigation
+  // Filter videos based on show context or current video category for navigation
   const getFilteredVideosForNavigation = () => {
     const allVideos = recommendedResponse?.videos || [];
     if (!currentVideo) return allVideos;
     
+    // Check show context from URL parameter first
+    if (showContext === 'folx-stadl') {
+      return allVideos.filter(video => 
+        video.title?.includes("FOLX STADL") || video.title?.includes("FOLXSTADL")
+      );
+    }
     
-    // Check if current video belongs to a specific category
+    if (showContext === 'geschichte-lied') {
+      return allVideos.filter(video => 
+        video.title?.includes("Die Geschichte des Liedes") || 
+        video.title?.includes("Geschichte des Liedes") ||
+        video.title?.includes("GESCHICHTE DES LIEDES")
+      );
+    }
+    
+    if (showContext === 'gipfelstammtisch') {
+      return allVideos.filter(video => 
+        video.title?.includes("Gipfelstammtisch") || 
+        video.title?.includes("GIPFELSTAMMTISCH") ||
+        video.title?.includes("Gipfel Stammtisch")
+      );
+    }
+    
+    // Fallback to checking video title if no show context
     const videoTitle = currentVideo.title || '';
     
     if (videoTitle.includes("FOLX STADL") || videoTitle.includes("FOLXSTADL")) {
@@ -159,7 +185,9 @@ export default function VideoPage() {
     if (newVideo) {
       // Generate short ID for navigation
       const shortId = newVideo.id.replace(/-/g, '').substring(0, 8);
-      setLocation(`/video/${shortId}`);
+      // Preserve show context in URL when navigating
+      const showParam = showContext ? `?show=${showContext}` : '';
+      setLocation(`/video/${shortId}${showParam}`);
     }
   };