Merge pull request #28 from GomesLuis479/master

Support for fullscreen change events

Author: LonelyCpp

doc/readme.md

@@ -12,6 +12,7 @@
   onChangeState={event => console.log(event)}
   onReady={() => console.log("ready")}
   onError={e => console.log(e)}
+  onFullScreenChange={status => console.log(status)}
   onPlaybackQualityChange={q => console.log(q)}
   volume={50}
   playbackRate={1}
@@ -37,6 +38,7 @@
 - [onChangeState](#onChangeState)
 - [onReady](#onReady)
 - [onError](#onError)
+- [onFullScreenChange](#onFullScreenChange)
 - [onPlaybackQualityChange](#onPlaybackQualityChange)
 - [mute](#mute)
 - [volume](#volume)
@@ -173,6 +175,14 @@ Possible values are:
 | video_not_found   | The video requested was not found. This error occurs when a video has been removed (for any reason) or has been marked as private.                                                                                                   |
 | embed_not_allowed | The owner of the requested video does not allow it to be played in embedded players.                                                                                                                                                 |
 
+## onFullScreenChange
+
+**_function(status: boolean)_**
+
+This event fires whenever the fullscreen option is clicked in the player.
+
+The data value that the API passes to the event listener function will be a boolean that identifies the new fullscreen status.
+
 ## onPlaybackQualityChange
 
 **_function(quality: string)_**

index.d.ts

@@ -92,6 +92,10 @@ export interface YoutubeIframeProps {
    * callback for when the player's state changes.
    */
   onChangeState?: (event: String) => void;
+  /**
+   * callback for when the fullscreen option is clicked in the player. It signals the new fullscreen state of the player.
+   */
+  onFullScreenChange?: (status: Boolean) => void;
   /**
    * callback for when the video playback quality changes. It might signal a change in the viewer's playback environment.
    */

readme.md

@@ -54,6 +54,7 @@ const [playing, setPlaying] = useState(true);
   onChangeState={event => console.log(event)}
   onReady={() => console.log("ready")}
   onError={e => console.log(e)}
+  onFullScreenChange={status => console.log(status)}
   onPlaybackQualityChange={q => console.log(q)}
   volume={50}
   playbackRate={1}
@@ -79,6 +80,7 @@ list of available APIs -
 - onChangeState
 - onReady
 - onError
+- onFullScreenChange
 - onPlaybackQualityChange
 - mute
 - volume

src/PlayerScripts.js

@@ -98,6 +98,11 @@ export const MAIN_SCRIPT = (
       var firstScriptTag = document.getElementsByTagName('script')[0];
       firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
 
+      var isFullScreen = false;
+      function onFullScreenChange() {
+        isFullScreen = !isFullScreen;
+        window.ReactNativeWebView.postMessage(JSON.stringify({eventType: 'fullScreenChange', data: isFullScreen}));
+      }
 
       var player;
       function onYouTubeIframeAPIReady() {
@@ -130,6 +135,8 @@ export const MAIN_SCRIPT = (
             'onPlaybackRateChange': onPlaybackRateChange,
           }
         });
+
+        document.getElementById('player').addEventListener('webkitfullscreenchange', onFullScreenChange);
       }
 
       function onPlayerError(event) {

src/YoutubeIframe.js

@@ -31,6 +31,7 @@ const YoutubeIframe = (
     allowWebViewZoom = false,
     forceAndroidAutoplay = false,
     onChangeState = _event => {},
+    onFullScreenChange = _status => {},
     onPlaybackQualityChange = _quality => {},
     onPlaybackRateChange = _playbackRate => {},
   },
@@ -117,6 +118,9 @@ const YoutubeIframe = (
       const message = JSON.parse(event.nativeEvent.data);
       try {
         switch (message.eventType) {
+          case 'fullScreenChange':
+            onFullScreenChange(message.data);
+            break;
           case 'playerStateChange':
             onChangeState(PLAYER_STATES[message.data]);
             break;