react-native-youtube - npm Package Compare versions

Comparing version 0.8.0 to 0.8.1

package.json

 {
   "name": "react-native-youtube",
-  "version": "0.8.0",
+  "version": "0.8.1",
   "description": "A <YouTube/> component for React Native.",
@@ -5,0 +5,0 @@ "main": "main.js",

README.md

@@ -36,6 +36,7 @@ # react-native-youtube [![react-native-youtube](http://img.shields.io/npm/dm/react-native-youtube.svg)](https://www.npmjs.org/package/react-native-youtube) [![npm version](https://badge.fury.io/js/react-native-youtube.svg)](http://badge.fury.io/js/react-native-youtube) [![Dependency Status](https://david-dm.org/inProgress-team/react-native-youtube.svg)](https://david-dm.org/inProgress-team/react-native-youtube)
 
-* `videoID`: The YouTube video ID to play, can be changed to change the video playing.
+* `videoId`: The YouTube video ID to play, can be changed to change the video playing.
 * `play`: Controls playback of video with `true`/`false`. Setting it as `true` in the beginning itself makes the video autoplay on loading.
 * `hidden`: Controls the `view.hidden` native property. For example, use this to hide player while it loads.
-* `playsInline`: Controls whether the video should play inline, or in full screen.
+* `playsInline`: Controls whether the video should play inline, or in full screen. Default `false`.
+* `fs`: Controls whether the full screen button is shown. Default `true`.
 * `rel`: Hides related videos at the end of the video. Default `false`.
@@ -56,2 +57,4 @@ * `loop`: Loops the video. Default `false`.
 * `onProgress`: Sends any time progress made on `e.currentTime` and `e.duration`.
+* `onFullScreenEnter` (ios only): This function is called when the video player enters full screen mode.
+* `onFullScreenExit` (ios only): This function is called when the video player exits full screen mode.
 
@@ -71,2 +74,10 @@ ## Methods
 
+##### OPTIONAL : Activated sound when phone is on vibrate mode
+
+Open AppDelegate.m and add :
+
+* `#import <AVFoundation/AVFoundation.h>`
+
+* `[[AVAudioSession sharedInstance] setCategory:AVAudioSessionCategoryPlayback error: nil];` in your didFinishLaunchingWithOptions method
+
 ##### Android : rnpm is not working yet !!
@@ -83,3 +94,3 @@
  ```
-In build.gradle :
+In build.gradle : ( The one inside android/app . **NOT** android/build.gradle )
 
@@ -110,10 +121,2 @@ ```
 
-##### OPTIONAL : Activated sound when phone is on vibrate mode
-
-Open AppDelegate.m and add :
-
-* `#import <AVFoundation/AVFoundation.h>`
-
-* `[[AVAudioSession sharedInstance] setCategory:AVAudioSessionCategoryPlayback error: nil];` in your didFinishLaunchingWithOptions method
-
 ## Example
@@ -120,0 +123,0 @@ Try the included `RCTYouTubeExample`:

YouTube.android.js

@@ -9,3 +9,3 @@ /**
 import React, { Component, PropTypes } from 'react';
-import ReactNative, {
+import {
   View,
@@ -18,11 +18,2 @@ StyleSheet,
 
-const RCTYouTube = requireNativeComponent('ReactYouTube', YouTube,
-{
-  nativeOnly: {onError:true,
-              onReady:true,
-              onChangeState:true,
-              onChangeQuality:true
-              }
-});
-
 export default class YouTube extends Component {
@@ -40,2 +31,3 @@ static propTypes = {
     rel: PropTypes.bool,
+    fs: PropTypes.bool,
     hidden: PropTypes.bool,
@@ -46,14 +38,29 @@ onReady: PropTypes.func,
     onError: PropTypes.func,
+    // TODO: Make this work on android, the native player doesn't support it right now...
+    onProgress: PropTypes.func,
     loop: PropTypes.bool,
+     ...View.propTypes,
   };
 
   static defaultProps = {
-    loop: false
+    loop: false,
   };
 
+  _root: any;
+
   constructor(props) {
     super(props);
     this._exportedProps = NativeModules.YouTubeManager && NativeModules.YouTubeManager.exportedProps;
+
+    this._onReady = this._onReady.bind(this);
+    this._onChangeState = this._onChangeState.bind(this);
+    this._onChangeQuality = this._onChangeQuality.bind(this);
+    this._onError = this._onError.bind(this);
+    this._onProgress = this._onProgress.bind(this);
   }
 
+  setNativeProps(nativeProps: any) {
+    this._root.setNativeProps(nativeProps);
+  }
+
   _onReady(event) {
@@ -78,7 +85,6 @@ return this.props.onReady && this.props.onReady(event.nativeEvent);
   _onProgress(event){
-      return this.props.onProgress && this.props.onProgress(event.nativeEvent);
+    return this.props.onProgress && this.props.onProgress(event.nativeEvent);
   }
   seekTo(seconds){
-    NativeModules.YouTubeModule.seekTo(parseInt(seconds, 10));
-    //this.refs.youtubePlayer.seekTo(ReactNative.findNodeHandle(this), parseInt(seconds, 10));
+    this.refs.youtubePlayer.seekTo(parseInt(seconds, 10));
   }
@@ -90,7 +96,2 @@
     nativeProps.style = style;
-    nativeProps.onYoutubeVideoReady = this._onReady.bind(this);
-    nativeProps.onYoutubeVideoChangeState = this._onChangeState.bind(this);
-    nativeProps.onYoutubeVideoChangeQuality = this._onChangeQuality.bind(this);
-    nativeProps.onYoutubeVideoError = this._onError.bind(this);
-    nativeProps.onYoutubeProgress = this._onProgress.bind(this);
 
@@ -111,3 +112,3 @@ /*
         if (this.props.playsInline) {
-          nativeProps.playerParams.playerVars.playsinline = 1;
+          nativeProps.playerParams.playerVars.playsInline = 1;
           delete nativeProps.playsInline;
@@ -136,16 +137,33 @@ };
         };
+        if (this.props.fs!==undefined) {
+          nativeProps.playerParams.playerVars.fs = this.props.fs ? 1 : 0;
+          delete nativeProps.fs;
+        };
       };
-    } else {
-      /*
-       * For compatibility issues with an older version where setting both
-       * `playsInline` and `videoId` in quick succession would cause the video
-       * to sometimes not play.
-       */
-      delete nativeProps.playsInline;
     }
 
-    return <RCTYouTube {... nativeProps} />;
+    return <RCTYouTube
+      ref={component => { this._root = component; }}
+      onReady={this._onReady}
+      {...nativeProps}
+      // These override and delegate to the this.props functions
+      onYoutubeVideoReady={this._onReady}
+      onYoutubeVideoChangeState={this._onChangeState}
+      onYoutubeVideoChangeQuality={this._onChangeQuality}
+      onYoutubeVideoError={this._onError}
+      onYoutubeVideoProgress={this._onProgress}
+      />;
   }
 }
 
+const RCTYouTube = requireNativeComponent('ReactYouTube', YouTube,
+{
+  nativeOnly: {onYoutubeVideoError:true,
+              onYoutubeVideoReady:true,
+              onYoutubeVideoChangeState:true,
+              onYoutubeVideoChangeQuality:true,
+              onYoutubeVideoProgress:true,
+              }
+});
+
 const styles = StyleSheet.create({
@@ -152,0 +170,0 @@ base: {

YouTube.ios.js

@@ -14,3 +14,4 @@ /**
   NativeModules,
-  NativeMethodsMixin
+  NativeMethodsMixin,
+  NativeAppEventEmitter
 } from 'react-native';
@@ -20,2 +21,10 @@
 
+let changeEvent = null;
+let changeQualityEvent = null;
+let readyEvent = null;
+let progressEvent = null;
+let errorEvent = null;
+let enterFullScreen = null;
+let exitFullScreen = null;
+
 export default class YouTube extends Component {
@@ -38,2 +47,5 @@ static propTypes = {
     loop: PropTypes.bool,
+    fs: PropTypes.bool,
+    onFullScreenEnter: PropTypes.func,
+    onFullScreenExit: PropTypes.func
   };
@@ -45,3 +57,7 @@
 
-  constructor(props) {
+  _root: any;
+
+  _exportedProps: any;
+
+  constructor(props: any) {
     super(props);
@@ -51,92 +67,125 @@ this._exportedProps = NativeModules.YouTubeManager && NativeModules.YouTubeManager.exportedProps;
 
-  _onReady(event) {
-    return this.props.onReady && this.props.onReady(event.nativeEvent);
+  setNativeProps(nativeProps: any) {
+    this._root.setNativeProps(nativeProps);
   }
 
-  _onChangeState(event) {
-    if(event.nativeEvent.state == 'ended' && this.props.loop) {
-      this.seekTo(0);
-    }
-    return this.props.onChangeState && this.props.onChangeState(event.nativeEvent);
+  stopVideo() {
+    NativeModules.YouTubeManager.stopVideo(ReactNative.findNodeHandle(this));
   }
-
-  _onChangeQuality(event) {
-    return this.props.onChangeQuality && this.props.onChangeQuality(event.nativeEvent);
+  pauseVideo() {
+    NativeModules.YouTubeManager.pauseVideo(ReactNative.findNodeHandle(this));
   }
-
-  _onError(event) {
-    return this.props.onError && this.props.onError(event.nativeEvent);
+  seekTo(seconds: number){
+    NativeModules.YouTubeManager.seekTo(ReactNative.findNodeHandle(this), parseInt(seconds, 10));
   }
-  _onProgress(event){
-      return this.props.onProgress && this.props.onProgress(event.nativeEvent);
+  componentWillMount() {
+    changeEvent = NativeAppEventEmitter.addListener(
+      'youtubeVideoChangeState',
+      (event) => {
+        if (event.state === 'ended' && this.props.loop) {
+          this.seekTo(0);
+        }
+        return this.props.onChangeState && this.props.onChangeState(event);
+      }
+    );
+    changeQualityEvent = NativeAppEventEmitter.addListener(
+      'youtubeVideoChangeQuality',
+      (event) => this.props.onChangeQuality && this.props.onChangeQuality(event)
+    );
+    readyEvent = NativeAppEventEmitter.addListener(
+      'youtubeVideoReady',
+      (event) => this.props.onReady && this.props.onReady()
+    );
+    progressEvent = NativeAppEventEmitter.addListener(
+      'youtubeProgress',
+      (event) => this.props.onProgress && this.props.onProgress(event)
+    );
+    errorEvent = NativeAppEventEmitter.addListener(
+      'youtubeVideoError',
+      (event) => this.props.onError && this.props.onError(event)
+    );
+    enterFullScreen = NativeAppEventEmitter.addListener(
+      'youtubeVideoEnterFullScreen',
+      (event) => this.props.onFullScreenEnter && this.props.onFullScreenEnter()
+    );
+    exitFullScreen = NativeAppEventEmitter.addListener(
+      'youtubeVideoExitFullScreen',
+      (event) => this.props.onFullScreenExit && this.props.onFullScreenExit()
+    );
   }
-  seekTo(seconds){
-    NativeModules.YouTubeManager.seekTo(ReactNative.findNodeHandle(this), parseInt(seconds, 10));
+
+  componentWillUnmount() {
+    changeEvent.remove();
+    changeQualityEvent.remove();
+    readyEvent.remove();
+    progressEvent.remove();
+    errorEvent.remove();
+    enterFullScreen.remove();
+    exitFullScreen.remove();
   }
-  render() {
-    var style = [styles.base, this.props.style];
-    var nativeProps = Object.assign({}, this.props);
-    nativeProps.style = style;
-    nativeProps.onYoutubeVideoReady = this._onReady.bind(this);
-    nativeProps.onYoutubeVideoChangeState = this._onChangeState.bind(this);
-    nativeProps.onYoutubeVideoChangeQuality = this._onChangeQuality.bind(this);
-    nativeProps.onYoutubeVideoError = this._onError.bind(this);
-    nativeProps.onYoutubeProgress = this._onProgress.bind(this);
+    render() {
+        var style = [styles.base, this.props.style];
+        var nativeProps = Object.assign({}, this.props);
+        nativeProps.style = style;
 
-    /*
-     * Try to use `playerParams` instead of settings `playsInline` and
-     * `videoId` individually.
-     */
-    if (this._exportedProps) {
-      if (this._exportedProps.playerParams) {
-        nativeProps.playerParams = {
-          videoId: this.props.videoId,
-        };
-        delete nativeProps.videoId;
+        /*
+         * Try to use `playerParams` instead of settings `playsInline` and
+         * `videoId` individually.
+         */
+        if (this._exportedProps) {
+            if (this._exportedProps.playerParams) {
+                nativeProps.playerParams = {
+                    videoId: this.props.videoId,
+                };
+                delete nativeProps.videoId;
 
-        nativeProps.playerParams.playerVars = {};
+                nativeProps.playerParams.playerVars = {};
 
-        if (this.props.playsInline) {
-          nativeProps.playerParams.playerVars.playsinline = 1;
-          delete nativeProps.playsInline;
-        };
-        if (this.props.modestbranding) {
-          nativeProps.playerParams.playerVars.modestbranding = 1;
-          delete nativeProps.modestbranding;
-        };
+                if (this.props.playsInline) {
+                    nativeProps.playerParams.playerVars.playsinline = 1;
+                    delete nativeProps.playsInline;
+                };
+                if (this.props.modestbranding) {
+                    nativeProps.playerParams.playerVars.modestbranding = 1;
+                    delete nativeProps.modestbranding;
+                };
 
-        if (this.props.showinfo!==undefined) {
-          nativeProps.playerParams.playerVars.showinfo = this.props.showinfo ? 1 : 0;
-          delete nativeProps.showinfo;
-        };
-        if (this.props.controls!==undefined) {
-          nativeProps.playerParams.playerVars.controls = this.props.controls;
-          delete nativeProps.controls;
-        };
-        if (this.props.origin!==undefined) {
-          nativeProps.playerParams.playerVars.origin = this.props.origin;
-          delete nativeProps.origin;
-        };
-        if (this.props.rel!==undefined) {
-          nativeProps.playerParams.playerVars.rel = this.props.rel ? 1 : 0;
-          delete nativeProps.rel;
-        };
-      };
-    } else {
-      /*
-       * For compatibility issues with an older version where setting both
-       * `playsInline` and `videoId` in quick succession would cause the video
-       * to sometimes not play.
-       */
-      delete nativeProps.playsInline;
+                if (this.props.showinfo!==undefined) {
+                    nativeProps.playerParams.playerVars.showinfo = this.props.showinfo ? 1 : 0;
+                    delete nativeProps.showinfo;
+                };
+                if (this.props.controls!==undefined) {
+                    nativeProps.playerParams.playerVars.controls = this.props.controls;
+                    delete nativeProps.controls;
+                };
+                if (this.props.origin!==undefined) {
+                    nativeProps.playerParams.playerVars.origin = this.props.origin;
+                    delete nativeProps.origin;
+                };
+                if (this.props.rel!==undefined) {
+                    nativeProps.playerParams.playerVars.rel = this.props.rel ? 1 : 0;
+                    delete nativeProps.rel;
+                };
+                if (this.props.fs!==undefined) {
+                    nativeProps.playerParams.playerVars.fs = this.props.fs ? 1 : 0;
+                    delete nativeProps.fs;
+                };
+            };
+        } else {
+            /*
+             * For compatibility issues with an older version where setting both
+             * `playsInline` and `videoId` in quick succession would cause the video
+             * to sometimes not play.
+             */
+            delete nativeProps.playsInline;
+        }
+
+        return <RCTYouTube {... nativeProps} />;
     }
-
-    return <RCTYouTube {... nativeProps} />;
-  }
 }
 
 const styles = StyleSheet.create({
-  base: {
-    overflow: 'hidden',
-  },
+    base: {
+        overflow: 'hidden',
+    },
 });

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

462792

increased by1.63%

Lines of code

315

increased by24.51%

Number of lines in readme file

134

increased by2.29%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Number of package files

31

decreased by-3.12%

No dependency changes