fix(styling): replace CSS file with inline iframe styling (#11)

- Remove CSS file dependency causing webpack parse errors
- Apply width/height styles directly via JavaScript after iframe loads
- Improves package compatibility without requiring CSS loaders

Author: saseungmin

.changeset/poor-baths-shave.md

@@ -0,0 +1,10 @@
+---
+"react-native-vimeo-bridge": patch
+---
+
+fix(styling): replace CSS file with inline iframe styling
+
+- Remove CSS file dependency causing webpack parse errors
+- Apply width/height styles directly via JavaScript after iframe loads
+- Improves package compatibility without requiring CSS loaders
+- Breaking Changes: The removal of `width`, `height`, `maxwidth`, `maxheight`, and `responsive` from VimeoPlayerOptions (https://github.com/vimeo/player.js/issues/38#issuecomment-242462979)

example/src/App.tsx

@@ -66,7 +66,7 @@ function App() {
     [player],
   );
 
-  const getPlayerInfo = async () => {
+  const getPlayerInfo = useCallback(async () => {
     try {
       const [videoId, title, url, width, height] = await Promise.all([
         player.getVideoId(),
@@ -93,7 +93,7 @@ function App() {
     } catch (error) {
       console.error('Error getting player info:', error);
     }
-  };
+  }, [player]);
 
   useVimeoEvent(player, 'playing', (data) => {
     console.log('playing', data);

src/VimeoPlayer.tsx

@@ -146,7 +146,15 @@ const VimeoPlayer = ({
                   player.on('bufferstart', sendMessage('bufferstart'));
                   player.on('bufferend', sendMessage('bufferend'));
                   player.on('error', sendMessage('error'));
-                  player.on('loaded', sendMessage('loaded'));
+                  player.on('loaded', (data) => {
+                    sendMessage('loaded')(data);
+                    
+                    const iframe = document.querySelector('iframe');
+                    if (iframe) {
+                      iframe.style.width = '100%';
+                      iframe.style.height = '100%';
+                    }
+                  });
                   player.on('durationchange', sendMessage('durationchange'));
                   player.on('fullscreenchange', sendMessage('fullscreenchange'));
                   player.on('qualitychange', sendMessage('qualitychange'));

src/VimeoPlayer.web.tsx

@@ -1,12 +1,10 @@
 import { useEffect, useRef, useState } from 'react';
 import { useWindowDimensions } from 'react-native';
 import WebVimeoPlayerController from './module/WebVimeoPlayerController';
+import { INTERNAL_SET_CONTROLLER_INSTANCE } from './symbol';
 import type { VimeoPlayerProps } from './types';
 import VimeoPlayerWrapper from './VimeoPlayerWrapper';
 
-import './styles.css';
-import { INTERNAL_SET_CONTROLLER_INSTANCE } from './symbol';
-
 const VimeoPlayer = ({ player, height = 200, width, style, iframeStyle }: VimeoPlayerProps) => {
   const containerRef = useRef<HTMLDivElement>(null);
   const [isInitialized, setIsInitialized] = useState(false);

src/module/WebVimeoPlayerController.ts

@@ -77,6 +77,17 @@ class WebVimeoPlayerController {
 
     this.player = new window.Vimeo.Player(containerId, options);
 
+    if (this.player) {
+      this.player.on('loaded', () => {
+        const iframe = container.querySelector('iframe');
+
+        if (iframe) {
+          iframe.style.width = '100%';
+          iframe.style.height = '100%';
+        }
+      });
+    }
+
     return this.player;
   }
 

src/styles.css

@@ -115,23 +115,25 @@ export interface VimeoPlayerOptions {
   color?: string | undefined;
   controls?: boolean | undefined;
   dnt?: boolean | undefined;
-  height?: number | undefined;
   interactive_params?: string | undefined;
   keyboard?: boolean | undefined;
   loop?: boolean | undefined;
-  maxheight?: number | undefined;
-  maxwidth?: number | undefined;
   muted?: boolean | undefined;
   pip?: boolean | undefined;
   playsinline?: boolean | undefined;
   portrait?: boolean | undefined;
-  responsive?: boolean | undefined;
   speed?: boolean | undefined;
   quality?: VimeoVideoQuality | undefined;
   texttrack?: string | undefined;
   title?: boolean | undefined;
   transparent?: boolean | undefined;
-  width?: number | undefined;
+
+  // NOTE - https://github.com/vimeo/player.js/issues/38#issuecomment-242462979
+  // maxheight?: number | undefined;
+  // maxwidth?: number | undefined;
+  // responsive?: boolean | undefined;
+  // width?: number | undefined;
+  // height?: number | undefined;
 }
 
 export interface VimeoPlayerEventMap {