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

Remove automatic video playback and navigation features

Browse Source 
Removes the autoplay functionality and related timers from the video player component in VideoPage.tsx, as well as adjusts integrations in the .replit file.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 2cd2c0bc-434c-4bc9-ad3f-b99d3897a0d1
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/8cc42625-c1f5-4e43-99bd-77f2c4dedee2/2cd2c0bc-434c-4bc9-ad3f-b99d3897a0d1/gjpMN2A
This commit is contained in:
sebastjanartic 2025-09-03 17:44:20 +00:00
parent de11d2a297
commit b456b175ea
2 changed files with 3 additions and 90 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.replit
View File

@ -40,4 +40,4 @@ args = "npm run dev"
waitForPort = 5000
[agent]
integrations = ["javascript_google_analytics==1.0.0", "javascript_database==1.0.0"]
integrations = ["javascript_database==1.0.0", "javascript_google_analytics==1.0.0"]

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

@ -31,7 +31,7 @@ const formatDate = (date: Date | string): string => {
});
};
import { Button } from "@/components/ui/button";
import { Share2, X, Edit3, Menu, Search, ChevronLeft, ChevronRight, Play, Pause } from "lucide-react";
import { Share2, X, Edit3, Menu, Search, ChevronLeft, ChevronRight } from "lucide-react";
import { Input } from "@/components/ui/input";
import { Link } from "wouter";
import { apiRequest } from "@/lib/queryClient";
@ -61,8 +61,6 @@ export default function VideoPage() {
const [searchQuery, setSearchQuery] = useState("");
const [viewMode, setViewMode] = useState<"grid" | "list">("grid");
const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
const [autoplayEnabled, setAutoplayEnabled] = useState(true);
const [autoplayTimer, setAutoplayTimer] = useState<NodeJS.Timeout | null>(null);
// Fetch current video
const { data: currentVideo, isLoading: videoLoading, error: videoError } = useQuery<Video>({
@ -140,11 +138,6 @@ export default function VideoPage() {
const currentIndex = getCurrentVideoIndex();
if (currentIndex === -1) return;
// Clear any existing autoplay timer
if (autoplayTimer) {
clearTimeout(autoplayTimer);
setAutoplayTimer(null);
}
// Show direction feedback on dots
setActiveDot(direction === 'next' ? 'right' : 'left');
@ -169,28 +162,6 @@ export default function VideoPage() {
}
};
// Auto-advance to next video after a certain duration
const startAutoplayTimer = () => {
if (!autoplayEnabled || allVideos.length <= 1) return;
// Clear existing timer
if (autoplayTimer) {
clearTimeout(autoplayTimer);
}
// Estimate video duration or use default (most videos are 3-5 minutes)
const estimatedDuration = currentVideo?.duration || 240000; // 4 minutes default
const autoplayDelay = Math.max(estimatedDuration * 0.9, 180000); // 90% of video or min 3 minutes
console.log(`🎬 Autoplay timer set for ${Math.round(autoplayDelay / 1000)}s`);
const timer = setTimeout(() => {
console.log('🚀 Auto-advancing to next video...');
navigateToVideo('next');
}, autoplayDelay);
setAutoplayTimer(timer);
};
// Update page meta tags for social sharing
@ -300,42 +271,12 @@ export default function VideoPage() {
const shortId = currentVideo.id.replace(/-/g, '').substring(0, 8);
await apiRequest("POST", `/api/videos/${shortId}/view`);
// Start autoplay timer when video starts playing
if (autoplayEnabled) {
startAutoplayTimer();
}
} catch (error) {
console.error("Failed to track video view:", error);
}
}
};
// Initialize autoplay when video changes
useEffect(() => {
if (currentVideo && autoplayEnabled && allVideos.length > 1) {
// Delay the autoplay timer start to ensure iframe is loaded
setTimeout(() => {
startAutoplayTimer();
}, 2000); // 2 second delay for iframe loading
}
return () => {
// Cleanup timer when component unmounts or video changes
if (autoplayTimer) {
clearTimeout(autoplayTimer);
setAutoplayTimer(null);
}
};
}, [currentVideo?.id, autoplayEnabled]);
// Cleanup timer on component unmount
useEffect(() => {
return () => {
if (autoplayTimer) {
clearTimeout(autoplayTimer);
}
};
}, []);
const getShareUrl = () => {
if (!currentVideo?.id) return window.location.origin;
@ -732,35 +673,7 @@ export default function VideoPage() {
{currentVideo.title}
</h1>
<div className="flex gap-2">
{/* Autoplay toggle button */}
<Button
variant="ghost"
size="sm"
onClick={() => {
setAutoplayEnabled(!autoplayEnabled);
if (!autoplayEnabled && autoplayTimer) {
clearTimeout(autoplayTimer);
setAutoplayTimer(null);
}
}}
className={`text-white hover:bg-gray-700 ${autoplayEnabled ? 'bg-purple-600/30' : ''}`}
title={autoplayEnabled ? 'Autoplay ON - will advance to next video' : 'Autoplay OFF'}
>
{autoplayEnabled ? (
<>
<Play className="w-4 h-4 mr-2" />
Auto
</>
) : (
<>
<Pause className="w-4 h-4 mr-2" />
Manual
</>
)}
</Button>
<div className="relative">
<div className="relative">
<Button
variant="ghost"
size="sm"