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:
@@ -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>
|
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
|
|||||||
10
supabase/migrations/20251231000001_public_site_settings.sql
Normal file
10
supabase/migrations/20251231000001_public_site_settings.sql
Normal 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);
|
||||||
Reference in New Issue
Block a user