Fix Plyr controls and site_settings permissions

## Changes

### Video Player CSS Overlay Fix
- Moved overlay inside plyr__video-embed container
- Added check for plyr__control--overlaid (play button)
- Now only blocks YouTube iframe, not Plyr controls
- Preserves full functionality of play button, progress bar, etc.

### Site Settings Permissions
- Added RLS policy to make site_settings publicly readable
- All authenticated users can now access brand_accent_color
- Fixes 404 error when members try to fetch accent color

## Technical Details
- Overlay now properly allows clicks through to Plyr controls
- Site settings now accessible via public RLS policy for authenticated users

🤖 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:07:52 +07:00
parent 1b13c7150e
commit 726250507a
2 changed files with 29 additions and 17 deletions

View File

@@ -192,29 +192,31 @@ export const VideoPlayerWithChapters = forwardRef<VideoPlayerRef, VideoPlayerWit
const youtubeId = effectiveVideoUrl ? getYouTubeId(effectiveVideoUrl) : null; const youtubeId = effectiveVideoUrl ? getYouTubeId(effectiveVideoUrl) : null;
return ( return (
<div className={`relative ${className}`}> <div ref={wrapperRef} className={`plyr__video-embed relative ${className}`}>
{/* CSS Overlay to block YouTube UI interactions */} {youtubeId && (
<>
{/* CSS Overlay to block YouTube UI interactions - only covers iframe */}
<div <div
className="absolute inset-0 z-10 pointer-events-auto" className="absolute inset-0 z-10 pointer-events-auto"
style={{ background: 'transparent' }} style={{ background: 'transparent' }}
onClick={(e) => { onClick={(e) => {
// Allow clicks to pass through to Plyr controls // Allow clicks to pass through to Plyr controls
const plyrControls = (e.currentTarget.parentElement as HTMLElement)?.querySelector('.plyr__controls'); const plyrControls = (e.currentTarget.parentElement as HTMLElement)?.querySelector('.plyr__controls');
if (plyrControls && plyrControls.contains(e.target as Node)) { const plyrOverlay = (e.currentTarget.parentElement as HTMLElement)?.querySelector('.plyr__control--overlaid');
if ((plyrControls && plyrControls.contains(e.target as Node)) ||
(plyrOverlay && plyrOverlay.contains(e.target as Node))) {
e.stopPropagation(); e.stopPropagation();
} }
}} }}
/> />
<div ref={wrapperRef} className={`plyr__video-embed`}>
{youtubeId && (
<iframe <iframe
src={`https://www.youtube-nocookie.com/embed/${youtubeId}?origin=${window.location.origin}&iv_load_policy=3&modestbranding=1&playsinline=1&rel=0&showinfo=0&controls=0&disablekb=1&fs=0`} src={`https://www.youtube-nocookie.com/embed/${youtubeId}?origin=${window.location.origin}&iv_load_policy=3&modestbranding=1&playsinline=1&rel=0&showinfo=0&controls=0&disablekb=1&fs=0`}
allowFullScreen allowFullScreen
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
className="pointer-events-none" className="pointer-events-none"
/> />
</>
)} )}
</div> </div>
</div>
); );
}); });

View File

@@ -0,0 +1,10 @@
-- Make site_settings publicly accessible for accent color
-- All users (authenticated) can read brand settings
DROP POLICY IF EXISTS "site_settings_public_select" ON site_settings;
CREATE POLICY "site_settings_public_select"
ON site_settings
FOR SELECT
TO authenticated
USING (true);