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

Update video player to use native HTML5 controls

Browse Source 
Replace iframe-based video player with native HTML5 video element and update player controls logic.

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/ODcEkiW
This commit is contained in:
sebastjanartic 2025-08-28 20:54:06 +00:00
parent b18e25e4c9
commit d782a732b2
1 changed files with 15 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -53,9 +53,6 @@ function formatDate(date: Date | string): string {
export default function BunnyVideoModal({ video, isOpen, onClose, onEdit, videos = [], onVideoChange }: BunnyVideoModalProps) {
const [showShareMenu, setShowShareMenu] = useState(false);
const [showControls, setShowControls] = useState(false);
const [controlsTimeout, setControlsTimeout] = useState<NodeJS.Timeout | null>(null);
const [showPlayButton, setShowPlayButton] = useState(true);
// Navigation functions
const getCurrentVideoIndex = () => {
@ -80,33 +77,6 @@ export default function BunnyVideoModal({ video, isOpen, onClose, onEdit, videos
}
};
// Controls visibility logic
const showControlsTemporarily = () => {
setShowControls(true);
if (controlsTimeout) {
clearTimeout(controlsTimeout);
}
const timeout = setTimeout(() => {
setShowControls(false);
}, 4000); // Hide after 4 seconds
setControlsTimeout(timeout);
};
const handleVideoClick = (e: React.MouseEvent) => {
e.stopPropagation();
showControlsTemporarily();
setShowPlayButton(false); // Hide play button when clicked
};
const handlePlayButtonClick = (e: React.MouseEvent) => {
e.stopPropagation();
setShowPlayButton(false);
// Try to trigger video play via postMessage to iframe
const iframe = document.querySelector('iframe');
if (iframe && iframe.contentWindow) {
iframe.contentWindow.postMessage('{"method":"play"}', '*');
}
};
useEffect(() => {
const handleEscape = (e: KeyboardEvent) => {
@ -288,37 +258,27 @@ export default function BunnyVideoModal({ video, isOpen, onClose, onEdit, videos
<div className="flex-1 flex flex-col lg:flex-row gap-4 min-h-0">
{/* Main video player */}
<div className="flex-1">
<div
className="relative w-full h-0 pb-[56.25%] bg-black rounded-lg overflow-hidden"
>
{video.videoUrlIframe ? (
<iframe
src={video.videoUrlIframe}
className="absolute inset-0 w-full h-full"
frameBorder="0"
allowFullScreen
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
onLoad={handleVideoPlay}
title={video.title}
/>
<div className="relative w-full aspect-video bg-black rounded-lg overflow-hidden">
{video.videoUrl ? (
<video
className="w-full h-full object-contain"
controls
preload="metadata"
poster={video.thumbnailUrl}
onPlay={handleVideoPlay}
>
<source src={video.videoUrl} type="video/mp4" />
<source src={video.videoUrl.replace('.mp4', '.webm')} type="video/webm" />
<source src={video.videoUrl.replace('.mp4', '.m3u8')} type="application/x-mpegURL" />
Vaš brskalnik ne podpira video predvajanja.
</video>
) : (
<div className="absolute inset-0 flex items-center justify-center text-white">
<p>Video ni na voljo</p>
</div>
)}
{/* Central play button */}
{showPlayButton && (
<Button
onClick={handlePlayButtonClick}
className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-black bg-opacity-60 hover:bg-opacity-80 text-white border-none p-4 rounded-full z-40 transition-all duration-300"
size="lg"
>
<Play className="w-8 h-8 fill-white" />
</Button>
)}
{/* Navigation buttons - show/hide with controls */}
{/* Navigation buttons - always visible */}
{videos.length > 1 && (
<>
<Button
@ -337,8 +297,6 @@ export default function BunnyVideoModal({ video, isOpen, onClose, onEdit, videos
>
<ChevronRight className="w-6 h-6" />
</Button>
</>
)}
</div>