feat: add support for multiple concurrent players (#30)

- Enable simultaneous usage of multiple player instances
- Implement independent instance management for each player
- Support concurrent playback without interference

Author: saseungmin

.changeset/itchy-rooms-crash.md

@@ -0,0 +1,9 @@
+---
+"react-native-vimeo-bridge": minor
+---
+
+feat: add support for multiple concurrent players
+
+- Enable simultaneous usage of multiple player instances
+- Implement independent instance management for each player
+- Support concurrent playback without interference

README-ko_kr.md

@@ -16,6 +16,7 @@ React Native에서 Vimeo 플레이어를 사용하기 위해 복잡한 설정과
 - ✅ **풍부한 API** - Vimeo Player JS API의 모든 핵심 기능 지원
 - ✅ **React Native 개발** - Expo의 Hook 기반 방식처럼, 직관적이고 사용하기 쉬운 API를 제공
 - ✅ **Expo 호환** - Expo 프로젝트에서도 바로 사용 가능
+- ✅ **다중 인스턴스 지원** - 여러 플레이어를 독립적으로 관리 가능
 
 ## 빠른 시작
 
@@ -142,6 +143,27 @@ function App() {
 }
 ```
 
+### 다중 플레이어 지원
+
+여러 플레이어를 동시에 사용할 수 있습니다.   
+각 플레이어는 독립적인 인스턴스로 관리되며, 컴포넌트 unmount 시 자동으로 정리됩니다.
+
+```tsx
+import { useVimeoPlayer, VimeoView } from 'react-native-vimeo-bridge';
+
+function App() {
+ const player1 = useVimeoPlayer(vimeoUrl1);
+ const player2 = useVimeoPlayer(vimeoUrl2);
+
+ return (
+   <View>
+     <VimeoView player={player1} />
+     <VimeoView player={player2} />
+   </View>
+ );
+}
+```
+
 ### 임베드 옵션 설정
 
 Vimeo Player의 [임베드 옵션](https://developer.vimeo.com/player/sdk/embed)을 통해 초기 설정을 커스터마이징할 수 있습니다.

README.md

@@ -16,6 +16,7 @@ With the lack of actively maintained Vimeo player libraries for React Native, `r
 - ✅ **Rich API Support** - Access to all core Vimeo Player JS API features
 - ✅ **React Native Development** - Provides an intuitive, easy-to-use Hook-based API, much like Expo's approach
 - ✅ **Expo Compatible** - Ready to use in Expo projects
+- ✅ **Multiple instance support** - manage multiple players independently
 
 ## Quick Start
 
@@ -142,6 +143,27 @@ function App() {
 }
 ```
 
+### Multiple Player Support
+
+Multiple players can be used simultaneously.   
+Each player is managed as an independent instance and automatically cleaned up when the component unmounts.
+
+```tsx
+import { useVimeoPlayer, VimeoView } from 'react-native-vimeo-bridge';
+
+function App() {
+ const player1 = useVimeoPlayer(vimeoUrl1);
+ const player2 = useVimeoPlayer(vimeoUrl2);
+
+ return (
+   <View>
+     <VimeoView player={player1} />
+     <VimeoView player={player2} />
+   </View>
+ );
+}
+```
+
 ### Embed Options
 
 Customize initial settings through Vimeo Player [embed options](https://developer.vimeo.com/player/sdk/embed).

src/VimeoView.tsx

@@ -213,7 +213,7 @@ function VimeoView({ player, height = 200, width = screenWidth, style, webViewPr
 
   useEffect(() => {
     if (isReady && webViewRef.current) {
-      const controller = WebviewVimeoPlayerController.getInstance(webViewRef);
+      const controller = WebviewVimeoPlayerController.createInstance(webViewRef);
 
       playerRef.current = controller;
 

src/VimeoView.web.tsx

@@ -16,15 +16,15 @@ function VimeoView({ player, height = 200, width, style, iframeStyle }: VimeoVie
   useEffect(() => {
     WebVimeoPlayerController.initialize().then(() => {
       setIsInitialized(true);
-      playerRef.current = WebVimeoPlayerController.getInstance();
+      playerRef.current = WebVimeoPlayerController.createInstance();
     });
   }, []);
 
   useEffect(() => {
     const source = player.getSource();
 
     if (isInitialized && containerRef.current && source) {
-      const containerId = `vimeo-player`;
+      const containerId = `vimeo-player-${Math.random().toString(36).substring(2, 15)}`;
       containerRef.current.id = containerId;
       const options = player.getOptions();
 

src/module/WebVimeoPlayerController.ts

@@ -2,14 +2,9 @@ import type { EmbedOptions, EventCallback, VimeoPlayer } from '../types/vimeo';
 
 class WebVimeoPlayerController {
   private player: VimeoPlayer | null = null;
-  private static instance: WebVimeoPlayerController | null = null;
 
-  static getInstance(): WebVimeoPlayerController {
-    if (!WebVimeoPlayerController.instance) {
-      WebVimeoPlayerController.instance = new WebVimeoPlayerController();
-    }
-
-    return WebVimeoPlayerController.instance;
+  static createInstance(): WebVimeoPlayerController {
+    return new WebVimeoPlayerController();
   }
 
   static initialize(): Promise<void> {
@@ -165,8 +160,6 @@ class WebVimeoPlayerController {
       }
       this.player = null;
     }
-
-    WebVimeoPlayerController.instance = null;
   }
 }
 

src/module/WebviewVimeoPlayerController.ts

@@ -5,20 +5,13 @@ class WebviewVimeoPlayerController {
   private webViewRef: React.RefObject<WebView | null>;
   private commandId: number = 0;
   private pendingCommands: Map<string, (result: unknown) => void> = new Map();
-  private static instance: WebviewVimeoPlayerController | null = null;
 
   constructor(webViewRef: React.RefObject<WebView | null>) {
     this.webViewRef = webViewRef;
   }
 
-  static getInstance(webViewRef: React.RefObject<WebView | null>): WebviewVimeoPlayerController {
-    if (!WebviewVimeoPlayerController.instance) {
-      WebviewVimeoPlayerController.instance = new WebviewVimeoPlayerController(webViewRef);
-    } else {
-      WebviewVimeoPlayerController.instance.webViewRef = webViewRef;
-    }
-
-    return WebviewVimeoPlayerController.instance;
+  static createInstance(webViewRef: React.RefObject<WebView | null>): WebviewVimeoPlayerController {
+    return new WebviewVimeoPlayerController(webViewRef);
   }
 
   getPendingCommands(): Map<string, (result: unknown) => void> {
@@ -148,8 +141,6 @@ class WebviewVimeoPlayerController {
   dispose(): void {
     this.pendingCommands.clear();
     this.destroy();
-
-    WebviewVimeoPlayerController.instance = null;
   }
 }