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

Enable users to swipe between videos on mobile devices

Browse Source 
Implement touch event handlers for swipe gestures on the video player component to navigate between videos, and adjust navigation button visibility for mobile responsiveness.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 344ec1e0-1186-4058-bbff-2e9619a7b1e0
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/8cc42625-c1f5-4e43-99bd-77f2c4dedee2/344ec1e0-1186-4058-bbff-2e9619a7b1e0/FgaI1Sc
This commit is contained in:
sebastjanartic 2025-08-30 22:44:53 +00:00
parent c58677ab47
commit 5d783fc250
1 changed files with 38 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -54,6 +54,8 @@ export default function VideoPage() {
const [, params] = useRoute("/video/:id");
const videoId = params?.id;
const [showShareMenu, setShowShareMenu] = useState(false);
const [touchStart, setTouchStart] = useState(0);
const [touchEnd, setTouchEnd] = useState(0);
const [searchQuery, setSearchQuery] = useState("");
const [viewMode, setViewMode] = useState<"grid" | "list">("grid");
const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
@ -150,6 +152,31 @@ export default function VideoPage() {
// Track video view
// Handle touch swipe for 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) {
navigateToVideo('next');
}
if (isRightSwipe) {
navigateToVideo('prev');
}
};
const handleVideoPlay = async () => {
if (currentVideo) {
try {
@ -377,25 +404,30 @@ export default function VideoPage() {
{/* Main video section */}
<div className="flex-1">
{/* Video player */}
<div className="relative w-full h-0 pb-[56.25%] bg-black rounded-lg overflow-hidden mb-4">
{/* Navigation arrows */}
<div
className="relative w-full h-0 pb-[56.25%] bg-black rounded-lg overflow-hidden mb-4"
onTouchStart={handleTouchStart}
onTouchMove={handleTouchMove}
onTouchEnd={handleTouchEnd}
>
{/* Navigation arrows - hidden on mobile, visible on desktop */}
{allVideos.length > 1 && (
<>
<Button
onClick={() => navigateToVideo('prev')}
className="absolute left-1 top-1/2 transform -translate-y-1/2 bg-black/70 hover:bg-black/90 text-white border-none p-4 md:p-3 rounded-full z-20 shadow-lg touch-manipulation min-h-[48px] min-w-[48px] flex items-center justify-center"
className="absolute left-1 top-1/2 transform -translate-y-1/2 bg-black/70 hover:bg-black/90 text-white border-none p-3 rounded-full z-20 shadow-lg hidden md:flex items-center justify-center"
size="sm"
data-testid="button-prev-video"
>
<ChevronLeft className="w-6 h-6 md:w-5 md:h-5" />
<ChevronLeft className="w-5 h-5" />
</Button>
<Button
onClick={() => navigateToVideo('next')}
className="absolute right-1 top-1/2 transform -translate-y-1/2 bg-black/70 hover:bg-black/90 text-white border-none p-4 md:p-3 rounded-full z-20 shadow-lg touch-manipulation min-h-[48px] min-w-[48px] flex items-center justify-center"
className="absolute right-1 top-1/2 transform -translate-y-1/2 bg-black/70 hover:bg-black/90 text-white border-none p-3 rounded-full z-20 shadow-lg hidden md:flex items-center justify-center"
size="sm"
data-testid="button-next-video"
>
<ChevronRight className="w-6 h-6 md:w-5 md:h-5" />
<ChevronRight className="w-5 h-5" />
</Button>
</>
)}