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

Update video modal and styling for better user experience

Browse Source 
Reorders VideoModal component logic to ensure hooks are declared before conditional returns and applies updated styling to select and combobox elements in the video edit modal.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: d7424866-83d1-4486-a212-ac12b4c7becf
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/8cc42625-c1f5-4e43-99bd-77f2c4dedee2/d7424866-83d1-4486-a212-ac12b4c7becf/HTFgzym
This commit is contained in:
sebastjanartic 2025-08-08 20:13:18 +00:00
parent f503398622
commit 175001993a
4 changed files with 16 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
attached_assets/image_1754683917824.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 37 KiB

BIN
attached_assets/image_1754683943555.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 54 KiB

11
client/src/components/video-modal.tsx
View File

@ -71,11 +71,7 @@ export default function VideoModal({ video, isOpen, onClose, enableAds = true }:
const [volume, setVolume] = useState(1); const [volume, setVolume] = useState(1);
const [hoverTime, setHoverTime] = useState(-1); const [hoverTime, setHoverTime] = useState(-1);
// Switch to VAST player for monetization // All hooks must be declared before any conditional returns
if (isOpen && video && useVASTPlayer && enableAds) {
return <VASTPlayer video={video} onClose={onClose} enableAds={enableAds} />;
}
useEffect(() => { useEffect(() => {
const handleEscape = (e: KeyboardEvent) => { const handleEscape = (e: KeyboardEvent) => {
if (e.key === "Escape" && isOpen) { if (e.key === "Escape" && isOpen) {
@ -95,6 +91,11 @@ export default function VideoModal({ video, isOpen, onClose, enableAds = true }:
document.body.style.overflow = ""; document.body.style.overflow = "";
}; };
}, [isOpen, onClose]); }, [isOpen, onClose]);
// Switch to VAST player for monetization
if (isOpen && video && useVASTPlayer && enableAds) {
return <VASTPlayer video={video} onClose={onClose} enableAds={enableAds} />;
}
// Initialize HLS when video is available // Initialize HLS when video is available
useEffect(() => { useEffect(() => {

10
client/src/index.css
View File

@ -174,3 +174,13 @@ textarea[data-testid*="input-video"]::placeholder {
.video-edit-modal .dark\:text-gray-300 { .video-edit-modal .dark\:text-gray-300 {
color: #ffffff !important; color: #ffffff !important;
} }
/* Dropdown/Select elementi - siva shema */
.video-edit-modal select,
select[data-testid*="select"],
.video-edit-modal [role="combobox"],
.video-edit-modal button[role="combobox"] {
background-color: #374151 !important;
color: #ffffff !important;
border-color: #6b7280 !important;
}