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

Remove temporary video navigation controls

Browse Source 
Remove the auto-hiding and temporary display of video navigation controls, simplifying the modal interface.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 2eb1084e-b728-4449-9231-f1665924c8d5
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/8cc42625-c1f5-4e43-99bd-77f2c4dedee2/2eb1084e-b728-4449-9231-f1665924c8d5/toMVvyb
This commit is contained in:
sebastjanartic 2025-08-28 21:04:25 +00:00
parent 4e3be0fd3d
commit 6846cc333e
1 changed files with 7 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

60
client/src/components/bunny-video-modal.tsx
View File

@ -53,8 +53,6 @@ function formatDate(date: Date | string): string {
export default function BunnyVideoModal({ video, isOpen, onClose, onEdit, videos = [], onVideoChange }: BunnyVideoModalProps) { export default function BunnyVideoModal({ video, isOpen, onClose, onEdit, videos = [], onVideoChange }: BunnyVideoModalProps) {
const [showShareMenu, setShowShareMenu] = useState(false); const [showShareMenu, setShowShareMenu] = useState(false);
const [showNavigation, setShowNavigation] = useState(true);
const [navigationTimeout, setNavigationTimeout] = useState<NodeJS.Timeout | null>(null);
// Navigation functions // Navigation functions
const getCurrentVideoIndex = () => { const getCurrentVideoIndex = () => {
@ -76,65 +74,30 @@ export default function BunnyVideoModal({ video, isOpen, onClose, onEdit, videos
const newVideo = videos[newIndex]; const newVideo = videos[newIndex];
if (newVideo) { if (newVideo) {
onVideoChange(newVideo); onVideoChange(newVideo);
showNavigationTemporarily();
} }
}; };
const showNavigationTemporarily = () => {
setShowNavigation(true);
// Počisti prejšnji timeout
if (navigationTimeout) {
clearTimeout(navigationTimeout);
}
// Sakrij navigacijo po 6 sekundah (daljši čas)
const timeout = setTimeout(() => {
setShowNavigation(false);
}, 6000);
setNavigationTimeout(timeout);
};
useEffect(() => { useEffect(() => {
const handleKeyDown = (e: KeyboardEvent) => { const handleEscape = (e: KeyboardEvent) => {
if (e.key === "Escape" && isOpen) { if (e.key === "Escape" && isOpen) {
onClose(); onClose();
} else if (isOpen && (e.key === " " || e.key === "Enter" || e.key === "ArrowLeft" || e.key === "ArrowRight")) {
showNavigationTemporarily();
} }
}; };
if (isOpen) { if (isOpen) {
document.addEventListener("keydown", handleKeyDown); document.addEventListener("keydown", handleEscape);
document.body.style.overflow = "hidden"; document.body.style.overflow = "hidden";
// Prikaži kontrole ob odprtju modala
showNavigationTemporarily();
} else { } else {
document.body.style.overflow = ""; document.body.style.overflow = "";
} }
return () => { return () => {
document.removeEventListener("keydown", handleKeyDown); document.removeEventListener("keydown", handleEscape);
document.body.style.overflow = ""; document.body.style.overflow = "";
// Počisti timeout ob zaprtju
if (navigationTimeout) {
clearTimeout(navigationTimeout);
setNavigationTimeout(null);
}
}; };
}, [isOpen, onClose]); }, [isOpen, onClose]);
// Prikaži kontrole ob menjavi videa
useEffect(() => {
if (isOpen && video) {
showNavigationTemporarily();
}
}, [video?.id, isOpen]);
const handleVideoPlay = async () => { const handleVideoPlay = async () => {
if (video) { if (video) {
try { try {
@ -295,12 +258,7 @@ export default function BunnyVideoModal({ video, isOpen, onClose, onEdit, videos
<div className="flex-1 flex flex-col lg:flex-row gap-4 min-h-0"> <div className="flex-1 flex flex-col lg:flex-row gap-4 min-h-0">
{/* Main video player */} {/* Main video player */}
<div className="flex-1"> <div className="flex-1">
<div <div className="relative w-full aspect-video bg-black rounded-lg overflow-hidden">
className="relative w-full aspect-video bg-black rounded-lg overflow-hidden"
onMouseEnter={showNavigationTemporarily}
onMouseMove={showNavigationTemporarily}
onClick={showNavigationTemporarily}
>
{video.videoUrlIframe ? ( {video.videoUrlIframe ? (
<iframe <iframe
src={video.videoUrlIframe} src={video.videoUrlIframe}
@ -317,14 +275,12 @@ export default function BunnyVideoModal({ video, isOpen, onClose, onEdit, videos
</div> </div>
)} )}
{/* Navigation buttons - fade in/out */} {/* Navigation buttons - always visible */}
{videos.length > 1 && ( {videos.length > 1 && (
<> <>
<Button <Button
onClick={() => navigateToVideo('prev')} onClick={() => navigateToVideo('prev')}
className={`absolute left-4 top-1/2 transform -translate-y-1/2 bg-black bg-opacity-60 hover:bg-opacity-80 text-white border-none p-2 rounded-full z-20 transition-opacity duration-1500 ${ className="absolute left-4 top-1/2 transform -translate-y-1/2 bg-black bg-opacity-60 hover:bg-opacity-80 text-white border-none p-2 rounded-full z-20"
showNavigation ? 'opacity-100' : 'opacity-0 pointer-events-none'
}`}
size="sm" size="sm"
data-testid="button-prev-video" data-testid="button-prev-video"
> >
@ -332,9 +288,7 @@ export default function BunnyVideoModal({ video, isOpen, onClose, onEdit, videos
</Button> </Button>
<Button <Button
onClick={() => navigateToVideo('next')} onClick={() => navigateToVideo('next')}
className={`absolute right-4 top-1/2 transform -translate-y-1/2 bg-black bg-opacity-60 hover:bg-opacity-80 text-white border-none p-2 rounded-full z-20 transition-opacity duration-1500 ${ className="absolute right-4 top-1/2 transform -translate-y-1/2 bg-black bg-opacity-60 hover:bg-opacity-80 text-white border-none p-2 rounded-full z-20"
showNavigation ? 'opacity-100' : 'opacity-0 pointer-events-none'
}`}
size="sm" size="sm"
data-testid="button-next-video" data-testid="button-next-video"
> >