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:
@@ -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(() => {
|
||||
|
||||
@@ -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(() => {
|
||||
|
||||
Reference in New Issue
Block a user