fix(icons): add currentColor fill to fullscreen icons for proper theming

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

@@ -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>

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>

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>
   );
 };

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;