Merge pull request #56 from LonelyCpp/fs-callback

Full screen callback on android

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)
@@ -192,6 +194,16 @@ 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)_**
+
+**note: android only, see `issue #45` for work on ios support**
+
+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

@@ -102,6 +102,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,7 +98,6 @@ export const MAIN_SCRIPT = (
       var firstScriptTag = document.getElementsByTagName('script')[0];
       firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
 
-
       var player;
       function onYouTubeIframeAPIReady() {
         player = new YT.Player('player', {
@@ -152,6 +151,17 @@ export const MAIN_SCRIPT = (
       function onPlayerStateChange(event) {
         window.ReactNativeWebView.postMessage(JSON.stringify({eventType: 'playerStateChange', data: event.data}))
       }
+
+      var isFullScreen = false;
+      function onFullScreenChange() {
+        isFullScreen = document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement || document.msFullscreenElement;
+        window.ReactNativeWebView.postMessage(JSON.stringify({eventType: 'fullScreenChange', data: Boolean(isFullScreen)}));
+      }
+
+      document.addEventListener('fullscreenchange', onFullScreenChange)
+      document.addEventListener('mozfullscreenchange', onFullScreenChange)
+      document.addEventListener('msfullscreenchange', onFullScreenChange)
+      document.addEventListener('webkitfullscreenchange', onFullScreenChange)
     </script>
   </body>
 </html>`;

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;