sebastjan/videofolxtv
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Navigate to individual video pages instead of using modals

Browse Source 
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
This commit is contained in:
sebastjanartic 2025-09-17 11:16:34 +00:00
parent 48720d4932
commit 2e44295457
5 changed files with 40 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.replit
View File

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

6
client/src/pages/FolxStadlPage.tsx
View File

@ -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 = () => {

6
client/src/pages/GeschichteLiedPage.tsx
View File

@ -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 = () => {

4
client/src/pages/GipfelstammtischPage.tsx
View File

@ -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 = () => {

34
client/src/pages/VideoPage.tsx
View File

@ -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}`);
}
};