From 72414f8dc99109d8df139e19a8644f86e965aa13 Mon Sep 17 00:00:00 2001
From: sebastjanartic <45803536-sebastjanartic@users.noreply.replit.com>
Date: Mon, 1 Sep 2025 21:46:47 +0000
Subject: [PATCH] Enable swipe gestures for video navigation on two pages

Adds touch event handlers for swipe navigation to the GeschichteLiedPage and GipfelstammtischPage components, enabling users to swipe left/right to change pages. Includes state management for touch start and end points and logic to handle swipe distance and page transitions.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 890577b1-c154-40a4-a177-a0c6d55320c3
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/8cc42625-c1f5-4e43-99bd-77f2c4dedee2/890577b1-c154-40a4-a177-a0c6d55320c3/DyHCx4q
---
 client/src/pages/GeschichteLiedPage.tsx   | 36 +++++++++++++++++++++--
 client/src/pages/GipfelstammtischPage.tsx | 36 +++++++++++++++++++++--
 2 files changed, 68 insertions(+), 4 deletions(-)

diff --git a/client/src/pages/GeschichteLiedPage.tsx b/client/src/pages/GeschichteLiedPage.tsx
index eb9c345..96701cf 100644
--- a/client/src/pages/GeschichteLiedPage.tsx
+++ b/client/src/pages/GeschichteLiedPage.tsx
@@ -4,7 +4,7 @@ import { ArrowLeft, ChevronLeft, ChevronRight, Menu, X } from 'lucide-react';
 import VideoCard from '@/components/video-card';
 import BunnyVideoModal from '@/components/bunny-video-modal';
 import { Button } from '@/components/ui/button';
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 import type { Video } from '@shared/schema';
 import { Input } from '@/components/ui/input';
 import { Search } from 'lucide-react';
@@ -17,6 +17,8 @@ export default function GeschichteLiedPage() {
   const [searchQuery, setSearchQuery] = useState("");
   const [viewMode, setViewMode] = useState<"grid" | "list">("grid");
   const [, setLocation] = useLocation();
+  const [touchStart, setTouchStart] = useState<number>(0);
+  const [touchEnd, setTouchEnd] = useState<number>(0);
   const itemsPerPage = 10;
 
   const { data, isLoading } = useQuery<{videos: Video[], total: number}>({
@@ -49,6 +51,31 @@ export default function GeschichteLiedPage() {
     setSelectedVideo(null);
   };
 
+  // Touch handlers for swipe navigation
+  const handleTouchStart = (e: React.TouchEvent) => {
+    setTouchEnd(0);
+    setTouchStart(e.targetTouches[0].clientX);
+  };
+
+  const handleTouchMove = (e: React.TouchEvent) => {
+    setTouchEnd(e.targetTouches[0].clientX);
+  };
+
+  const handleTouchEnd = () => {
+    if (!touchStart || !touchEnd) return;
+    
+    const distance = touchStart - touchEnd;
+    const isLeftSwipe = distance > 50;
+    const isRightSwipe = distance < -50;
+
+    if (isLeftSwipe && currentPage < totalPages) {
+      setCurrentPage(currentPage + 1);
+    }
+    if (isRightSwipe && currentPage > 1) {
+      setCurrentPage(currentPage - 1);
+    }
+  };
+
   if (isLoading) {
     return (
       <div className="min-h-screen bg-bunny-dark flex items-center justify-center">
@@ -186,7 +213,12 @@ export default function GeschichteLiedPage() {
       </div>
 
       {/* Main Content */}
-      <div className="container pt-8 pb-8">
+      <div 
+        className="container pt-8 pb-8"
+        onTouchStart={handleTouchStart}
+        onTouchMove={handleTouchMove}
+        onTouchEnd={handleTouchEnd}
+      >
 
         {/* Video List with Descriptions */}
         <div className="space-y-6">
diff --git a/client/src/pages/GipfelstammtischPage.tsx b/client/src/pages/GipfelstammtischPage.tsx
index 9e53ba2..4df83f0 100644
--- a/client/src/pages/GipfelstammtischPage.tsx
+++ b/client/src/pages/GipfelstammtischPage.tsx
@@ -4,7 +4,7 @@ import { ArrowLeft, ChevronLeft, ChevronRight, Menu, X } from 'lucide-react';
 import VideoCard from '@/components/video-card';
 import BunnyVideoModal from '@/components/bunny-video-modal';
 import { Button } from '@/components/ui/button';
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 import type { Video } from '@shared/schema';
 import { Input } from '@/components/ui/input';
 import { Search } from 'lucide-react';
@@ -17,6 +17,8 @@ export default function GipfelstammtischPage() {
   const [searchQuery, setSearchQuery] = useState("");
   const [viewMode, setViewMode] = useState<"grid" | "list">("grid");
   const [, setLocation] = useLocation();
+  const [touchStart, setTouchStart] = useState<number>(0);
+  const [touchEnd, setTouchEnd] = useState<number>(0);
   const itemsPerPage = 10;
 
   const { data, isLoading } = useQuery<{videos: Video[], total: number}>({
@@ -49,6 +51,31 @@ export default function GipfelstammtischPage() {
     setSelectedVideo(null);
   };
 
+  // Touch handlers for swipe navigation
+  const handleTouchStart = (e: React.TouchEvent) => {
+    setTouchEnd(0);
+    setTouchStart(e.targetTouches[0].clientX);
+  };
+
+  const handleTouchMove = (e: React.TouchEvent) => {
+    setTouchEnd(e.targetTouches[0].clientX);
+  };
+
+  const handleTouchEnd = () => {
+    if (!touchStart || !touchEnd) return;
+    
+    const distance = touchStart - touchEnd;
+    const isLeftSwipe = distance > 50;
+    const isRightSwipe = distance < -50;
+
+    if (isLeftSwipe && currentPage < totalPages) {
+      setCurrentPage(currentPage + 1);
+    }
+    if (isRightSwipe && currentPage > 1) {
+      setCurrentPage(currentPage - 1);
+    }
+  };
+
   if (isLoading) {
     return (
       <div className="min-h-screen bg-bunny-dark flex items-center justify-center">
@@ -186,7 +213,12 @@ export default function GipfelstammtischPage() {
       </div>
 
       {/* Main Content */}
-      <div className="container pt-8 pb-8">
+      <div 
+        className="container pt-8 pb-8"
+        onTouchStart={handleTouchStart}
+        onTouchMove={handleTouchMove}
+        onTouchEnd={handleTouchEnd}
+      >
 
         {/* Video List with Descriptions */}
         <div className="space-y-6">