Fix video player chapters, time format, and access control

## Changes

### Chapter Time Format Support
- Added HH:MM:SS format support in addition to MM:SS
- Updated time parsing to handle variable-length inputs
- Updated time display formatter to show hours when > 0
- Updated input placeholder and validation pattern
- Updated help text to mention both formats

### Video Player Improvements
- Added fullscreen button to Plyr controls
- Added quality/settings control to Plyr controls
- Fixed accent color theming with !important CSS rules
- Removed hardcoded default accent color (#f97316)
- Updated Bootcamp and WebinarRecording pages to use empty string initial state

### Access Control & Security
- Added transparent CSS overlay to block YouTube UI interactions
- Disabled YouTube native controls (controls=0, disablekb=1, fs=0)
- Set iframe pointer-events-none to prevent direct interaction
- Prevents members from copying/sharing YouTube URLs directly
- Preserves Plyr controls functionality through click handler

### Files Modified
- src/components/admin/ChaptersEditor.tsx: Time format HH:MM:SS support
- src/components/VideoPlayerWithChapters.tsx: Security overlay & theming fixes
- src/pages/Bootcamp.tsx: Accent color initialization fix
- src/pages/WebinarRecording.tsx: Accent color initialization fix

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This commit is contained in:
dwindown
2026-01-01 01:01:41 +07:00
parent 95fd4d3859
commit cd7cbfe13b
4 changed files with 57 additions and 20 deletions

View File

@@ -77,7 +77,7 @@ export default function Bootcamp() {
const [userReview, setUserReview] = useState<UserReview | null>(null);
const [reviewModalOpen, setReviewModalOpen] = useState(false);
const [currentTime, setCurrentTime] = useState(0);
const [accentColor, setAccentColor] = useState('#f97316');
const [accentColor, setAccentColor] = useState<string>('');
const playerRef = useRef<VideoPlayerRef>(null);
useEffect(() => {

View File

@@ -33,7 +33,7 @@ export default function WebinarRecording() {
const [product, setProduct] = useState<Product | null>(null);
const [loading, setLoading] = useState(true);
const [currentTime, setCurrentTime] = useState(0);
const [accentColor, setAccentColor] = useState('#f97316');
const [accentColor, setAccentColor] = useState<string>('');
const playerRef = useRef<VideoPlayerRef>(null);
useEffect(() => {