From 20d96f160070c0f976b8b5af9462f7d9a0807548 Mon Sep 17 00:00:00 2001 From: AliRezaBeigy Date: Fri, 4 Apr 2025 14:53:38 +0330 Subject: [PATCH 1/2] feat: add webViewRef --- index.d.ts | 6 +++++- src/YoutubeIframe.js | 5 ++++- 2 files changed, 9 insertions(+), 2 deletions(-) diff --git a/index.d.ts b/index.d.ts index 5e00e80..ebc7b11 100644 --- a/index.d.ts +++ b/index.d.ts @@ -1,6 +1,6 @@ import React from 'react'; import {StyleProp, ViewStyle} from 'react-native'; -import {WebViewProps} from 'react-native-webview'; +import WebView, {WebViewProps} from 'react-native-webview'; export enum PLAYER_STATES { ENDED = 'ended', @@ -100,6 +100,10 @@ export interface YoutubeIframeProps { * Props that are supplied to the underlying webview (react-native-webview). A full list of props can be found [here](https://github.com/react-native-community/react-native-webview/blob/master/docs/Reference.md#props-index) */ webViewProps?: WebViewProps; + /** + * A React ref object that provides direct access to the underlying WebView instance. + */ + webViewRef?: React.RefObject; /** * This sets the suggested playback rate for the current video. If the playback rate changes, it will only change for the video that is already cued or being played. */ diff --git a/src/YoutubeIframe.js b/src/YoutubeIframe.js index 4bbf487..f195790 100644 --- a/src/YoutubeIframe.js +++ b/src/YoutubeIframe.js @@ -29,6 +29,7 @@ const YoutubeIframe = (props, ref) => { mute = false, volume = 100, viewContainerStyle, + webViewRef, webViewStyle, webViewProps, useLocalHTML, @@ -52,9 +53,11 @@ const YoutubeIframe = (props, ref) => { const lastPlayListRef = useRef(playList); const initialPlayerParamsRef = useRef(initialPlayerParams || {}); - const webViewRef = useRef(null); + const internalWebViewRef = useRef(null); const eventEmitter = useRef(new EventEmitter()); + webViewRef ||= internalWebViewRef; + const sendPostMessage = useCallback( (eventName, meta) => { if (!playerReady) { From 4c6cb40e503f8e64ee32dd3c412578a72128baa5 Mon Sep 17 00:00:00 2001 From: AliRezaBeigy Date: Wed, 9 Apr 2025 03:43:36 +0330 Subject: [PATCH 2/2] fix: readonly param --- src/YoutubeIframe.js | 26 +++++++++++++------------- 1 file changed, 13 insertions(+), 13 deletions(-) diff --git a/src/YoutubeIframe.js b/src/YoutubeIframe.js index f195790..1e22f15 100644 --- a/src/YoutubeIframe.js +++ b/src/YoutubeIframe.js @@ -56,7 +56,7 @@ const YoutubeIframe = (props, ref) => { const internalWebViewRef = useRef(null); const eventEmitter = useRef(new EventEmitter()); - webViewRef ||= internalWebViewRef; + const wbRef = webViewRef || internalWebViewRef; const sendPostMessage = useCallback( (eventName, meta) => { @@ -65,7 +65,7 @@ const YoutubeIframe = (props, ref) => { } const message = JSON.stringify({eventName, meta}); - webViewRef.current.postMessage(message); + wbRef.current.postMessage(message); }, [playerReady], ); @@ -74,37 +74,37 @@ const YoutubeIframe = (props, ref) => { ref, () => ({ getVideoUrl: () => { - webViewRef.current.injectJavaScript(PLAYER_FUNCTIONS.getVideoUrlScript); + wbRef.current.injectJavaScript(PLAYER_FUNCTIONS.getVideoUrlScript); return new Promise(resolve => { eventEmitter.current.once('getVideoUrl', resolve); }); }, getDuration: () => { - webViewRef.current.injectJavaScript(PLAYER_FUNCTIONS.durationScript); + wbRef.current.injectJavaScript(PLAYER_FUNCTIONS.durationScript); return new Promise(resolve => { eventEmitter.current.once('getDuration', resolve); }); }, getCurrentTime: () => { - webViewRef.current.injectJavaScript(PLAYER_FUNCTIONS.currentTimeScript); + wbRef.current.injectJavaScript(PLAYER_FUNCTIONS.currentTimeScript); return new Promise(resolve => { eventEmitter.current.once('getCurrentTime', resolve); }); }, isMuted: () => { - webViewRef.current.injectJavaScript(PLAYER_FUNCTIONS.isMutedScript); + wbRef.current.injectJavaScript(PLAYER_FUNCTIONS.isMutedScript); return new Promise(resolve => { eventEmitter.current.once('isMuted', resolve); }); }, getVolume: () => { - webViewRef.current.injectJavaScript(PLAYER_FUNCTIONS.getVolumeScript); + wbRef.current.injectJavaScript(PLAYER_FUNCTIONS.getVolumeScript); return new Promise(resolve => { eventEmitter.current.once('getVolume', resolve); }); }, getPlaybackRate: () => { - webViewRef.current.injectJavaScript( + wbRef.current.injectJavaScript( PLAYER_FUNCTIONS.getPlaybackRateScript, ); return new Promise(resolve => { @@ -112,7 +112,7 @@ const YoutubeIframe = (props, ref) => { }); }, getAvailablePlaybackRates: () => { - webViewRef.current.injectJavaScript( + wbRef.current.injectJavaScript( PLAYER_FUNCTIONS.getAvailablePlaybackRatesScript, ); return new Promise(resolve => { @@ -120,7 +120,7 @@ const YoutubeIframe = (props, ref) => { }); }, seekTo: (seconds, allowSeekAhead) => { - webViewRef.current.injectJavaScript( + wbRef.current.injectJavaScript( PLAYER_FUNCTIONS.seekToScript(seconds, allowSeekAhead), ); }, @@ -161,7 +161,7 @@ const YoutubeIframe = (props, ref) => { lastVideoIdRef.current = videoId; - webViewRef.current.injectJavaScript( + wbRef.current.injectJavaScript( PLAYER_FUNCTIONS.loadVideoById(videoId, play), ); }, [videoId, play, playerReady]); @@ -180,7 +180,7 @@ const YoutubeIframe = (props, ref) => { lastPlayListRef.current = playList; - webViewRef.current.injectJavaScript( + wbRef.current.injectJavaScript( PLAYER_FUNCTIONS.loadPlaylist(playList, playListStartIndex, play), ); }, [playList, play, playListStartIndex, playerReady]); @@ -303,7 +303,7 @@ const YoutubeIframe = (props, ref) => { // add props that should not be allowed to be overridden below source={source} - ref={webViewRef} + ref={wbRef} onMessage={onWebMessage} />