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

Enable swipe gestures for video navigation on two pages

Browse Source 
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
This commit is contained in:
sebastjanartic 2025-09-01 21:46:47 +00:00
parent a9cd118f50
commit 72414f8dc9
2 changed files with 68 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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">

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

@ -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">