From 2e4429545753ed40bd45271ebccf0c381e99b28b Mon Sep 17 00:00:00 2001 From: sebastjanartic <45803536-sebastjanartic@users.noreply.replit.com> Date: Wed, 17 Sep 2025 11:16:34 +0000 Subject: [PATCH] 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 | 2 +- client/src/pages/FolxStadlPage.tsx | 6 ++-- client/src/pages/GeschichteLiedPage.tsx | 6 ++-- client/src/pages/GipfelstammtischPage.tsx | 4 +-- client/src/pages/VideoPage.tsx | 34 +++++++++++++++++++++-- 5 files changed, 40 insertions(+), 12 deletions(-) diff --git a/.replit b/.replit index 11b60bb..9e04d65 100644 --- a/.replit +++ b/.replit @@ -16,7 +16,7 @@ localPort = 5000 externalPort = 80 [[ports]] -localPort = 40259 +localPort = 33273 externalPort = 3000 [env] diff --git a/client/src/pages/FolxStadlPage.tsx b/client/src/pages/FolxStadlPage.tsx index 021d40a..62ced0e 100644 --- a/client/src/pages/FolxStadlPage.tsx +++ b/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 - setSelectedVideo(video); - setIsModalOpen(true); + // Navigate to individual video page with show context + const shortId = video.id.replace(/-/g, '').substring(0, 8); + setLocation(`/video/${shortId}?show=folx-stadl`); }; const handleCloseModal = () => { diff --git a/client/src/pages/GeschichteLiedPage.tsx b/client/src/pages/GeschichteLiedPage.tsx index 6649c42..8844202 100644 --- a/client/src/pages/GeschichteLiedPage.tsx +++ b/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 - setSelectedVideo(video); - setIsModalOpen(true); + // Navigate to individual video page with show context + const shortId = video.id.replace(/-/g, '').substring(0, 8); + setLocation(`/video/${shortId}?show=geschichte-lied`); }; const handleCloseModal = () => { diff --git a/client/src/pages/GipfelstammtischPage.tsx b/client/src/pages/GipfelstammtischPage.tsx index d96c5f1..64ea892 100644 --- a/client/src/pages/GipfelstammtischPage.tsx +++ b/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 = () => { diff --git a/client/src/pages/VideoPage.tsx b/client/src/pages/VideoPage.tsx index d3f577b..2522008 100644 --- a/client/src/pages/VideoPage.tsx +++ b/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}`); } };