From 726250507ac6ad1d4a135760f1d267f7e97a7faa Mon Sep 17 00:00:00 2001
From: dwindown <dwinx.ramz@gmail.com>
Date: Thu, 1 Jan 2026 01:07:52 +0700
Subject: [PATCH] Fix Plyr controls and site_settings permissions
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## 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>
---
 src/components/VideoPlayerWithChapters.tsx    | 36 ++++++++++---------
 .../20251231000001_public_site_settings.sql   | 10 ++++++
 2 files changed, 29 insertions(+), 17 deletions(-)
 create mode 100644 supabase/migrations/20251231000001_public_site_settings.sql

diff --git a/src/components/VideoPlayerWithChapters.tsx b/src/components/VideoPlayerWithChapters.tsx
index b2dda63..5d56565 100644
--- a/src/components/VideoPlayerWithChapters.tsx
+++ b/src/components/VideoPlayerWithChapters.tsx
@@ -192,29 +192,31 @@ export const VideoPlayerWithChapters = forwardRef<VideoPlayerRef, VideoPlayerWit
   const youtubeId = effectiveVideoUrl ? getYouTubeId(effectiveVideoUrl) : null;
 
   return (
-    <div className={`relative ${className}`}>
-      {/* CSS Overlay to block YouTube UI interactions */}
-      <div
-        className="absolute inset-0 z-10 pointer-events-auto"
-        style={{ background: 'transparent' }}
-        onClick={(e) => {
-          // Allow clicks to pass through to Plyr controls
-          const plyrControls = (e.currentTarget.parentElement as HTMLElement)?.querySelector('.plyr__controls');
-          if (plyrControls && plyrControls.contains(e.target as Node)) {
-            e.stopPropagation();
-          }
-        }}
-      />
-      <div ref={wrapperRef} className={`plyr__video-embed`}>
-        {youtubeId && (
+    <div ref={wrapperRef} className={`plyr__video-embed relative ${className}`}>
+      {youtubeId && (
+        <>
+          {/* CSS Overlay to block YouTube UI interactions - only covers iframe */}
+          <div
+            className="absolute inset-0 z-10 pointer-events-auto"
+            style={{ background: 'transparent' }}
+            onClick={(e) => {
+              // Allow clicks to pass through to Plyr controls
+              const plyrControls = (e.currentTarget.parentElement as HTMLElement)?.querySelector('.plyr__controls');
+              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();
+              }
+            }}
+          />
           <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`}
             allowFullScreen
             allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
             className="pointer-events-none"
           />
-        )}
-      </div>
+        </>
+      )}
     </div>
   );
 });
diff --git a/supabase/migrations/20251231000001_public_site_settings.sql b/supabase/migrations/20251231000001_public_site_settings.sql
new file mode 100644
index 0000000..968ecc8
--- /dev/null
+++ b/supabase/migrations/20251231000001_public_site_settings.sql
@@ -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);