fix: resolve vimeo player memory leak and unnecessary re-subscriptions (#28)

- Extract throttleMs from callbackOrThrottle to optimize useEffect dependencies
- Add controller.off() cleanup logic when last listener is removed
- Prevent memory leaks on component unmount

Author: saseungmin

.changeset/quiet-bees-happen.md

@@ -0,0 +1,9 @@
+---
+"react-native-vimeo-bridge": patch
+---
+
+fix: resolve vimeo player memory leak and unnecessary re-subscriptions
+
+- Extract `throttleMs` from `callbackOrThrottle` to optimize `useEffect` dependencies
+- Add `controller.off()` cleanup logic when last listener is removed
+- Prevent memory leaks on component unmount

src/VimeoView.tsx

@@ -173,7 +173,35 @@ function VimeoView({ player, height = 200, width = screenWidth, style, webViewPr
                     getVideoWidth: () => player.getVideoWidth(),
                     getVideoHeight: () => player.getVideoHeight(),
                     getVideoUrl: () => player.getVideoUrl(),
-                    destroy: () => player.destroy(),
+                    destroy: () => {
+                      player.off('play');
+                      player.off('playing');
+                      player.off('pause');
+                      player.off('ended');
+                      player.off('timeupdate');
+                      player.off('progress');
+                      player.off('seeking');
+                      player.off('seeked');
+                      player.off('texttrackchange');
+                      player.off('chapterchange');
+                      player.off('cuechange');
+                      player.off('cuepoint');
+                      player.off('volumechange');
+                      player.off('playbackratechange');
+                      player.off('bufferstart');
+                      player.off('bufferend');
+                      player.off('error');
+                      player.off('loaded');
+                      player.off('durationchange');
+                      player.off('fullscreenchange');
+                      player.off('qualitychange');
+                      player.off('camerachange');
+                      player.off('resize');
+                      player.off('enterpictureinpicture');
+                      player.off('leavepictureinpicture');
+                      player.destroy();
+                    },
+                    off: (event) => player.off(event),
                   }
                 }
               })();

src/hooks/useVimeoEvent.ts

@@ -53,6 +53,7 @@ function useVimeoEvent<T extends keyof VimeoPlayerEventMap>(
   deps?: React.DependencyList,
 ): VimeoPlayerEventMap[T] | null | undefined {
   const isCallback = typeof callbackOrThrottle === 'function';
+  const throttleMs = typeof callbackOrThrottle === 'number' ? callbackOrThrottle : undefined;
 
   const callbackRef = useRef<EventCallback<VimeoPlayerEventMap[T]> | null>(isCallback ? callbackOrThrottle : null);
 
@@ -73,8 +74,7 @@ function useVimeoEvent<T extends keyof VimeoPlayerEventMap>(
       }
 
       if (!isCallback) {
-        if (eventType === 'timeupdate' && typeof callbackOrThrottle === 'number') {
-          const throttleMs = callbackOrThrottle;
+        if (eventType === 'timeupdate' && throttleMs) {
           const now = Date.now();
           if (now - lastUpdateRef.current < throttleMs) {
             return;
@@ -87,7 +87,7 @@ function useVimeoEvent<T extends keyof VimeoPlayerEventMap>(
     });
 
     return unsubscribe;
-  }, [player, eventType, isCallback, callbackOrThrottle]);
+  }, [player, eventType, isCallback, throttleMs]);
 
   return isCallback ? undefined : data;
 }

src/module/VimeoPlayer.ts

@@ -46,6 +46,7 @@ class VimeoPlayer {
       eventSet?.delete(callback);
 
       if (eventSet?.size === 0) {
+        this.controller?.off(eventType);
         this.listeners.delete(eventType);
       }
     };

src/module/WebVimeoPlayerController.ts

@@ -1,4 +1,4 @@
-import type { EmbedOptions, VimeoPlayer } from '../types/vimeo';
+import type { EmbedOptions, EventCallback, VimeoPlayer } from '../types/vimeo';
 
 class WebVimeoPlayerController {
   private player: VimeoPlayer | null = null;
@@ -152,6 +152,10 @@ class WebVimeoPlayerController {
     return this.player?.getVideoUrl() ?? '';
   }
 
+  off(event: string, callback?: EventCallback): void {
+    this.player?.off(event, callback);
+  }
+
   dispose(): void {
     if (this.player) {
       try {

src/module/WebviewVimeoPlayerController.ts

@@ -1,4 +1,5 @@
 import type WebView from 'react-native-webview';
+import type { EventCallback } from '../types/vimeo';
 
 class WebviewVimeoPlayerController {
   private webViewRef: React.RefObject<WebView | null>;
@@ -96,6 +97,10 @@ class WebviewVimeoPlayerController {
     await this.executeCommand('destroy');
   }
 
+  async off(event: string, _callback?: EventCallback): Promise<void> {
+    await this.executeCommand('off', [event]);
+  }
+
   private executeCommand(
     command: string,
     args: (string | number | boolean | undefined)[] = [],