From d0d487601eb2da669be9a83cc8201d94998ec334 Mon Sep 17 00:00:00 2001
From: Christian Pillsbury <cpillsbury@mux.com>
Date: Fri, 12 Sep 2025 07:35:10 -0700
Subject: [PATCH] fix(icons): add currentColor fill to fullscreen icons for
 proper theming
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The fullscreen enter/exit SVG icons were missing fill="currentColor"
attributes, causing them to render as black/invisible against dark
button backgrounds. This fix ensures proper theming support.

Also integrates fullscreen button into React default skin with
MediaContainer wrapper for complete out-of-the-box functionality.

- Fix fullscreen-enter.svg and fullscreen-exit.svg with currentColor fill
- Add MediaContainer wrapper to React MediaSkinDefault
- Add FullscreenButton to React control bar with proper icon states
- Add CSS for fullscreen button icon state management

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

Co-Authored-By: Claude <noreply@anthropic.com>
---
 packages/core/icons/assets/fullscreen-enter.svg |  4 ++--
 packages/core/icons/assets/fullscreen-exit.svg  |  4 ++--
 .../react/react/src/skins/MediaSkinDefault.tsx  | 17 +++++++++++++++--
 .../react/react/src/skins/styles.module.css     |  6 ++++++
 4 files changed, 25 insertions(+), 6 deletions(-)

diff --git a/packages/core/icons/assets/fullscreen-enter.svg b/packages/core/icons/assets/fullscreen-enter.svg
index 9b0785f7..1c0fc111 100644
--- a/packages/core/icons/assets/fullscreen-enter.svg
+++ b/packages/core/icons/assets/fullscreen-enter.svg
@@ -1,3 +1,3 @@
-<svg aria-hidden="true" viewBox="0 0 26 24">
-  <path d="M16 3v2.5h3.5V9H22V3h-6ZM4 9h2.5V5.5H10V3H4v6Zm15.5 9.5H16V21h6v-6h-2.5v3.5ZM6.5 15H4v6h6v-2.5H6.5V15Z"/>
+<svg aria-hidden="true" viewBox="0 0 26 24" fill="currentColor">
+  <path d="M16 3v2.5h3.5V9H22V3h-6ZM4 9h2.5V5.5H10V3H4v6Zm15.5 9.5H16V21h6v-6h-2.5v3.5ZM6.5 15H4v6h6v-2.5H6.5V15Z" fill="currentColor"/>
 </svg>
\ No newline at end of file
diff --git a/packages/core/icons/assets/fullscreen-exit.svg b/packages/core/icons/assets/fullscreen-exit.svg
index d2288894..ec3a285e 100644
--- a/packages/core/icons/assets/fullscreen-exit.svg
+++ b/packages/core/icons/assets/fullscreen-exit.svg
@@ -1,3 +1,3 @@
-<svg aria-hidden="true" viewBox="0 0 26 24">
-  <path d="M18.5 6.5V3H16v6h6V6.5h-3.5ZM16 21h2.5v-3.5H22V15h-6v6ZM4 17.5h3.5V21H10v-6H4v2.5Zm3.5-11H4V9h6V3H7.5v3.5Z"/>
+<svg aria-hidden="true" viewBox="0 0 26 24" fill="currentColor">
+  <path d="M18.5 6.5V3H16v6h6V6.5h-3.5ZM16 21h2.5v-3.5H22V15h-6v6ZM4 17.5h3.5V21H10v-6H4v2.5Zm3.5-11H4V9h6V3H7.5v3.5Z" fill="currentColor"/>
 </svg>
\ No newline at end of file
diff --git a/packages/react/react/src/skins/MediaSkinDefault.tsx b/packages/react/react/src/skins/MediaSkinDefault.tsx
index e2c0d8a6..20a2a019 100644
--- a/packages/react/react/src/skins/MediaSkinDefault.tsx
+++ b/packages/react/react/src/skins/MediaSkinDefault.tsx
@@ -4,10 +4,14 @@ import PlayButton from '../components/PlayButton';
 import MuteButton from '../components/MuteButton';
 import { VolumeRange } from '../components/VolumeRange';
 import { TimeRange } from '../components/TimeRange';
+import { FullscreenButton } from '../components/FullscreenButton';
+import { MediaContainer } from '../components/MediaContainer';
 import {
   VolumeHighIcon,
   VolumeLowIcon,
   VolumeOffIcon,
+  FullscreenEnterIcon,
+  FullscreenExitIcon,
 } from '@vjs-10/react-icons';
 import styles from './styles.module.css';
 
@@ -15,7 +19,7 @@ export const MediaSkinDefault: React.FC<{ children: React.ReactNode }> = ({
   children,
 }) => {
   return (
-    <div className={styles.Container}>
+    <MediaContainer className={styles.Container}>
       {children}
       <div className={styles.Overlay}>
         <div className={styles.Spacer}></div>
@@ -39,8 +43,17 @@ export const MediaSkinDefault: React.FC<{ children: React.ReactNode }> = ({
             ></VolumeOffIcon>
           </MuteButton>
           <VolumeRange className={styles.VolumeRange} />
+          {/* @ts-ignore */}
+          <FullscreenButton className={`${styles.Button} ${styles.MediaFullscreenButton}`}>
+            <FullscreenEnterIcon
+              className={`${styles.Icon} ${styles.FullscreenEnterIcon}`}
+            ></FullscreenEnterIcon>
+            <FullscreenExitIcon
+              className={`${styles.Icon} ${styles.FullscreenExitIcon}`}
+            ></FullscreenExitIcon>
+          </FullscreenButton>
         </div>
       </div>
-    </div>
+    </MediaContainer>
   );
 };
diff --git a/packages/react/react/src/skins/styles.module.css b/packages/react/react/src/skins/styles.module.css
index c2e2a270..00c25c45 100644
--- a/packages/react/react/src/skins/styles.module.css
+++ b/packages/react/react/src/skins/styles.module.css
@@ -55,6 +55,12 @@
   display: inline-block;
 }
 
+/* Fullscreen button icon states */
+.MediaFullscreenButton:not([data-fullscreen]) .FullscreenEnterIcon,
+.MediaFullscreenButton[data-fullscreen] .FullscreenExitIcon {
+  display: inline-block;
+}
+
 /* Media Control Bar UI/Styles */
 .ControlBar {
   display: flex;