Adding full screen listener.

doc/readme.md

@@ -13,6 +13,7 @@
   onReady={() => console.log("ready")}
   onError={e => console.log(e)}
   onPlaybackQualityChange={q => console.log(q)}
+  onFullScreenChange={isFullScreen => console.log(isFullScreen)}
   volume={50}
   playbackRate={1}
   initialPlayerParams={{
@@ -38,6 +39,7 @@
 - [onReady](#onReady)
 - [onError](#onError)
 - [onPlaybackQualityChange](#onPlaybackQualityChange)
+- [onFullScreenChange](#onFullScreenChange)
 - [mute](#mute)
 - [volume](#volume)
 - [playbackRate](#playbackRate)
@@ -53,6 +55,7 @@
 - [getDuration](#getDuration)
 - [getCurrentTime](#getCurrentTime)
 - [isMuted](#isMuted)
+- [isFullScreen](#isFullScreen)
 - [getVolume](#getVolume)
 - [getPlaybackRate](#getPlaybackRate)
 - [getAvailablePlaybackRates](#getAvailablePlaybackRates)
@@ -190,6 +193,12 @@ The data value that the API passes to the event listener function will be a stri
 | hd1080  |
 | highres |
 
+## onFullScreenChange
+
+**_function(isFullScreen: boolean)_**
+
+This event fires whenever the video enters or leaves full screen.
+
 ## mute
 
 **_Boolean_**
@@ -275,6 +284,8 @@ const App = () => {
 
           playerRef.current.isMuted().then(isMuted => console.log({isMuted}));
 
+          playerRef.current.isFullScreen().then(isFullScreen => console.log({isFullScreen}));
+
           playerRef.current.getVolume().then(getVolume => console.log({getVolume}));
 
           playerRef.current.getPlaybackRate().then(getPlaybackRate => console.log({getPlaybackRate}));
@@ -304,6 +315,10 @@ returns a promise that resolves to the elapsed time in seconds since the video s
 
 returns a promise that resolves to true if the video is muted, false if not.
 
+## isFullScreen
+
+returns a promise that resolves to true if the video is running in full screen, false if not.
+
 ## getVolume
 
 returns a promise that resolves to the player's current volume, an integer between 0 and 100. Note that `getVolume()` will return the volume even if the player is muted.

index.d.ts

@@ -100,6 +100,10 @@ export interface YoutubeIframeProps {
    * callback for when the video playback rate changes.
    */
   onPlaybackRateChange?: (event: String) => void;
+    /**
+   * callback for when the video player enters or leaves full screen
+   */
+  onFullScreenChange?: (quality: Boolean) => void;
   /**
    * Flag to decide whether or not a user can zoom the video webview.
    */

readme.md

@@ -55,6 +55,7 @@ const [playing, setPlaying] = useState(true);
   onReady={() => console.log("ready")}
   onError={e => console.log(e)}
   onPlaybackQualityChange={q => console.log(q)}
+  onFullScreenChange={isFullScreen => console.log(isFullScreen)}
   volume={50}
   playbackRate={1}
   initialPlayerParams={{
@@ -80,6 +81,7 @@ list of available APIs -
 - onReady
 - onError
 - onPlaybackQualityChange
+- onFullScreenChange
 - mute
 - volume
 - playbackRate
@@ -94,6 +96,7 @@ list of available APIs -
 - getDuration
 - getCurrentTime
 - isMuted
+- isFullScreen
 - getVolume
 - getPlaybackRate
 - getAvailablePlaybackRates

src/PlayerScripts.js

@@ -10,6 +10,10 @@ true;
   isMutedScript: `
 window.ReactNativeWebView.postMessage(JSON.stringify({eventType: 'isMuted', data: player.isMuted()}));
 true;
+`,
+  isFullScreenScript: `
+window.ReactNativeWebView.postMessage(JSON.stringify({eventType: 'isFullScreen', data: !!(document.fullscreenElement && document.fullscreenElement.id === 'player')}));
+true;
 `,
   getVolumeScript: `
 window.ReactNativeWebView.postMessage(JSON.stringify({eventType: 'getVolume', data: player.getVolume()}));
@@ -130,6 +134,19 @@ export const MAIN_SCRIPT = (
             'onPlaybackRateChange': onPlaybackRateChange,
           }
         });
+
+        // document.addEventListener('fullscreenchange', onFullScreenChange)
+        // document.addEventListener('msfullscreenchange', onFullScreenChange)
+        // document.addEventListener('mozfullscreenchange', onFullScreenChange)
+        document.addEventListener('webkitfullscreenchange', onFullScreenChange)
+      }
+
+      function onFullScreenChange(event) {
+        if (document.fullscreenElement && document.fullscreenElement.id === 'player') {
+          window.ReactNativeWebView.postMessage(JSON.stringify({eventType: 'playerFullScreenChange', data: true}))
+        } else {
+          window.ReactNativeWebView.postMessage(JSON.stringify({eventType: 'playerFullScreenChange', data: false}))
+        }
       }
 
       function onPlayerError(event) {

src/YoutubeIframe.js

@@ -31,6 +31,7 @@ const YoutubeIframe = (
     allowWebViewZoom = false,
     forceAndroidAutoplay = false,
     onChangeState = _event => {},
+    onFullScreenChange = _isFullScreen => {},
     onPlaybackQualityChange = _quality => {},
     onPlaybackRateChange = _playbackRate => {},
   },
@@ -61,6 +62,14 @@ const YoutubeIframe = (
           eventEmitter.current.once('isMuted', resolve);
         });
       },
+      isFullScreen: () => {
+        webViewRef.current.injectJavaScript(
+          PLAYER_FUNCTIONS.isFullScreenScript,
+        );
+        return new Promise(resolve => {
+          eventEmitter.current.once('isFullScreen', resolve);
+        });
+      },
       getVolume: () => {
         webViewRef.current.injectJavaScript(PLAYER_FUNCTIONS.getVolumeScript);
         return new Promise(resolve => {
@@ -142,6 +151,9 @@ const YoutubeIframe = (
           case 'playbackRateChange':
             onPlaybackRateChange(message.data);
             break;
+          case 'playerFullScreenChange':
+            onFullScreenChange(message.data);
+            break;
           default:
             eventEmitter.current.emit(message.eventType, message.data);
             break;
@@ -156,6 +168,7 @@ const YoutubeIframe = (
       onPlaybackQualityChange,
       onError,
       onPlaybackRateChange,
+      onFullScreenChange,
       playListStartIndex,
       playList,
       play,