davidohayon669 / react-native-youtube Goto Github PK

Those control ui don't align center when orientation change back and forth.

This doesn't happen when you are playing the video and those control ui are visible ( normally it disappear after couple of second right ). You change the orientation while thos control ui are visible they work fine as expected.

But if you let those control ui disappear and then change the orientation and tap on the screen again to make it visible then this kind of buggy layout happen.

I was able to make this one work, my idea was to get the current time of the video while it is playing. Here's how I did it:

on RCTYouTubeManager.m added the event onYoutubePlayTime

- (NSArray *)customDirectEventTypes
{
    return @[
        @"onYoutubeVideoReady",
        @"onYoutubeVideoChangeState",
        @"onYoutubeVideoChangeQuality",
        @"onYoutubeVideoError",
        @"onYoutubePlayTime"
     ];
}

on RCTYouTube.m added

- (void)playerView:(YTPlayerView *)playerView didPlayTime:(float)playTime {

    NSString *str = [NSString stringWithFormat:@"%f", playTime];
    NSString *videoDuration = [NSString stringWithFormat:@"%f", [self duration]];

    [_eventDispatcher sendInputEventWithName:RNYouTubeEventPlayTime
                                        body:@{
                                               @"playTime": str,
                                               @"duration":videoDuration,
                                               @"target": self.reactTag
                                               }];

}

on YouTube.ios.js added

 _onPlayTime:function(event){
    return this.props.onPlayTime && this.props.onPlayTime(event.nativeEvent);
  },

  render() {
    var style = flattenStyle([styles.base, this.props.style]);

    var nativeProps = merge(this.props, {
      style,
      onYoutubeVideoReady: this._onReady,
      onYoutubeVideoChangeState: this._onChangeState,
      onYoutubeVideoChangeQuality: this._onChangeQuality,
      onYoutubeVideoError: this._onError,
      onYoutubePlayTime:this._onPlayTime
    });

on my app component:

<YouTube
                videoId={this.state.entryUid} // The YouTube video ID
                play={this.state.isPlaying}           // control playback of video with true/false
                hidden={false}        // control visiblity of the entire view
                playsInline={true}    // control whether the video should play inline
                onReady={(e)=>{this.setState({isReady: true})}}
                onChangeState={(e)=>{this.setState({status: e.state})}}
                onChangeQuality={(e)=>{this.setState({quality: e.quality})}}
                onError={(e)=>{this.setState({error: e.error})}}
                onPlayTime={(e)=>{this.setState({playTime: e.playTime, progress:e.playTime/e.duration, duration:e.duration})}}
                style={styles.youtubePlayer}
                />

I wanted to use the same codebase for Android and iOS. I am using 2 different YouTube Players - this one for iOS and rn-youtube-android for Android.

However, using both in the same RN project shows a warning every time while running the Android version - even though the code never runs into those lines.

The problem becomes even more of an issue when you make Release Builds of the project where the Application just doesn't work - closes on launch because of the Warning that there's no native implementation of this git.

I'd suggest that the warning be removed by doing the following:

Change "main" the package.json to YouTube

{
  "name": "react-native-youtube",
  "version": "0.7.2",
  "description": "A <YouTube/> component for React Native.",
  **"main": "YouTube", /* instead of YouTube.ios.js */**
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },

And change the implementation of YouTube.android.js to not throw a warning.

This way both the gits can be in the same RN Project and not cause "Unfortunately the app has closed." errors in the release build apk.

I was playing around with this today, unfortunately I couldn't make it work.

// on the YTPlayerView.h

- (void)setVolume:(NSNumber *)volume;

// on the YTPlayerView.m

- (void)setVolume:(NSNumber *)volume{
    NSString *command = [NSString stringWithFormat:@"player.setVolume(%@);", volume];
    [self stringFromEvaluatingJavaScript:command];
}

// on the RCTYouTubeManager.m

RCT_EXPORT_METHOD(setVolume:(NSNumber *)reactTag volume:(NSNumber *)volume)
{
    [self.bridge.uiManager addUIBlock:
     ^(__unused RCTUIManager *uiManager, RCTSparseArray *viewRegistry){
         RCTYouTube *youtube = viewRegistry[reactTag];
         if ([youtube isKindOfClass:[RCTYouTube class]]) {
             [youtube setVolume:volume];
         } else {
             RCTLogError(@"Cannot seek: %@ (tag #%@) is not RCTYouTube", youtube, reactTag);
         }
     }];
}

// on react native component

setVolume(volume){
        NativeModules.YouTubeManager.setVolume(
            React.findNodeHandle(this.refs.youtubeplayer),
            volume * 100
        );  
    },

I'm not seeing any callback events fired. I am using React Native version "0.11.0-rc"

Any pointers or places to look first?

Hi,

How do we run an Android example? Seems to have instructions missing...

I am using the current module for react-native-youtube but for android. It works fine until I navigate from the component that plays the youtube video and then go back to it. I get the following:

Can I get any help regarding this issue?

Please mention the package to import in MainApplication.java in your docs

I want to exit youtube player whenever full screen is exited. However, for that I need to listen to onFullScreenExit event. Is there any way I could do it?

can you have multiple videos running on the same component?

Since React Native 0.7.0, I am seeing the error RCTYoutubeManager is returning nil for its methodQueue, which is not permitted:

The issue is basically the same as TheWidlarzGroup/react-native-video#69.

PR incoming.

After upgrading to "react-native": "0.14.2" this component stopped working. Now it just shows blank black screen and video doesn't play. Also, to mark it doesn't throw any error in runtime.

For example videos from VEVO (similar to slack) will not play on the player. This is somehow bypassed in apps like Discord. It might be possible to implement whatever discord has done to bypass this for a more seamless experience.

I will investigate further and try my best to offer a PR but wanted to open an issue to see if this is something that has already been brought up / addressed.

I tried to do npm install on the Example dir. It failed with the following log:

12 warnings and 14 errors generated.
make: *** [Release/obj.target/validation/src/validation.o] Error 1
gyp ERR! build error
gyp ERR! stack Error: make failed with exit code: 2
gyp ERR! stack at ChildProcess.onExit (/Users/16527/.nvm/versions/node/v6.2.1/lib/node_modules/npm/node_modules/node-gyp/lib/build.js:276:23)
gyp ERR! stack at emitTwo (events.js:106:13)
gyp ERR! stack at ChildProcess.emit (events.js:191:7)
gyp ERR! stack at Process.ChildProcess._handle.onexit (internal/child_process.js:204:12)
gyp ERR! System Darwin 15.4.0
gyp ERR! command "/Users/16527/.nvm/versions/node/v6.2.1/bin/node" "/Users/16527/.nvm/versions/node/v6.2.1/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js" "rebuild"
gyp ERR! cwd /Users/16527/ios/dir2/RCY2/react-native-youtube/Example/node_modules/utf-8-validate
gyp ERR! node -v v6.2.1
gyp ERR! node-gyp -v v3.4.0
gyp ERR! not ok
npm WARN install:[email protected] [email protected] install: node-gyp rebuild
npm WARN install:[email protected] Exit status 1

on latest RN - 0.14.1

This one is a tricky.

When I do resize my Youtube Video (ie to a bigger one), the quality is automatically switching to HD and the video stops as it loads the new quality.

I would like to make a smooth transition (the video should not be buffering).

I would be happy to make a PR to solve this, but do you know any clue ?

Hello, I'm facing a problem when my phone is on vibrate mode then the youtube component doesnt make sound though i raised the volume up, the sound was going up when i change to normal mode. But when i used official youtube application on vibrate mode its still produce sound. How to fix this?
Thanks

#64

setting this property doesn't seem to change anything. I tried camel case as specified in the readme, and also tried modestbranding all lowercase, neither hides the branding.

Thanks

Hi,

It would be nice to be able to add players parameters like controls, modestbranding and showinfo.

Would it be possible ?

Hello my friends, Im trying to play the videos at fullscreen by default without success.
Is there any workaround to make it?

Thank you so much!

I get this error when updating to the latest react-native V.0.10

'customDirectEventTypes must return an array, but RCTYouTubeManager returned __NSDictionaryI'

Hello,

On installing your library, I came up against this error - RCTViewManager.h file not found and my project is not able to build. Please what step of the installation process do you think I missed or what could be wrong? I am on v 0.8.0

Thanks.

Hi

I tried your plugin with RN 0.16. In most cases Xcode's build process failed silently as soon as I implemented this plugin as shown in the README. Furthermore I saw yo're using RCTSparseArray.h in the RCTYouTubeManager.m as I know this is replaced by NSDictionary in version 0.16.

Are you planing to upgrade your project or should I look for another solution?

Thanks for an Answer and your plugin 😏

Hi,

I just integrated react-native-youtube into my project and am seeing just a black background using the example snippet. I am using react-native 0.34.0. Is there something wrong with the snippet?

render() {
    return (
      <YouTube
        ref="youtubePlayer"
        videoId="CebcmJKutaQ" // The YouTube video ID
        play={true}           // control playback of video with true/false
        hidden={false}        // control visiblity of the entire view
        playsInline={true}    // control whether the video should play inline
        loop={false}          // control whether the video should loop when ended

        style={{alignSelf: 'stretch', height: 300, backgroundColor: 'black', marginVertical: 10}}
      />
    );
  }

Hi,

Is there any progression on Android support ?

I might start PR soon if not ;)

Returns signal SIGABRT termination.

2015-09-18 15:34:20.698 App[27540:1244610] *** Terminating app due to uncaught exception 'NSInternalInconsistencyException', reason: 'customDirectEventTypes must return an array, but RCTYouTubeManager returned __NSDictionaryI'

I'd like to add this feature, or perhaps it's something I do on top of the component. I'd assume you hide the controls, set it to inline. and then use the onProgress handler and seekTo method from your custom control bar. I don't see a play or pause method, but I assume I can access it at something like NativeModules.YouTubeManager.play/pause()?

It seems I could mostly implement this in client code, but I could also provide a pull request that makes it a built-in feature. I imagine adding a prop controlBar which allows developers to supply a custom control bar stylized however they want.

Any tips would be much appreciated.

Hi,

Great work on this plugin, it's brill! I'm about to attempt writing a similar React component (a wrapper for the OpenTok iOS SDK for video chat). I've been looking through your code as there are lots of similarities with what I'm trying to do, like async events, native UI needing to be exposed, and so on.

I was wondering, do you have any links to resources you used when developing this plugin? I've looked at the official React documentation for developing components that use native UI but it doesn't seem to address what I want to do.

Thanks!

Hey Param, thanks for an awesome package! Unfortunately I'm having some issues with adding the RCTYouTube.xcodeproj into my app's project.

I think I did all the things exactly as your readme says, I added the your project to the list of libraries and then added the library to the build phase list. But when I hit "Build" in xcode it falls out with the following error

The header file is totally in there, i just cloned your repo and connected the project directly from the clone

~/w/t/react-native-youtube master ls -l                                                                                                                                                                             
total 424
drwxr-xr-x   3 nikolay  admin     102 Oct 16 15:28 Assets
drwxr-xr-x  10 nikolay  admin     340 Oct 16 15:28 Example
-rw-r--r--   1 nikolay  admin    1082 Oct 16 15:28 LICENSE
-rw-r--r--   1 nikolay  admin     376 Oct 16 15:28 RCTYouTube.h
-rw-r--r--   1 nikolay  admin    6840 Oct 16 15:28 RCTYouTube.m
drwxr-xr-x   5 nikolay  admin     170 Oct 16 15:33 RCTYouTube.xcodeproj
-rw-r--r--   1 nikolay  admin     237 Oct 16 15:28 RCTYouTubeManager.h
-rw-r--r--   1 nikolay  admin    1838 Oct 16 15:28 RCTYouTubeManager.m
-rw-r--r--   1 nikolay  admin    3700 Oct 16 15:28 README.md
-rw-r--r--   1 nikolay  admin  172732 Oct 16 15:28 Screenshot.png
drwxr-xr-x   5 nikolay  admin     170 Oct 16 15:28 YTPlayerView
-rw-r--r--   1 nikolay  admin     215 Oct 16 15:28 YouTube.android.js
-rw-r--r--   1 nikolay  admin    3752 Oct 16 15:28 YouTube.ios.js
-rw-r--r--   1 nikolay  admin     630 Oct 16 15:28 package.json

I feel like there is some config or something that's missing. Maybe you could point me out to the issue?

Thanks

Is it possible to play video from VEVO? because i got this issue.. If i pass the origin property with "https://www.youtube.com/", it is still not working.. Any solutions? @paramaggarwal

I'm able to get a normal react-native project running, but when I attempt to load the example project Xcode escapes and highlights line 16 on main.m.

I used this module before with RN v0.24.1 & react-native-youtube v0.6.0.

But I recently updated to RN v0.31.0 & react-native-youtube v0.7.2 and I can't play YouTube Videos anymore in my app.

I'm not sure what I'm doing wrong. Please advice.

This is the warning Screenshot:

ExceptionsManager.js:76 Warning: React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components).

I followed the installation instructions exactly, and used took index.ios.js from the example. When I run the app everything renders, but onReady never fires. I'm using react-native 0.21.0. How can I troubleshoot this?

I've been trying to do this but still I haven't figured out how to make it work.

on my RCTYouTubeManager.m:

RCT_EXPORT_METHOD(seekTo:(NSString *)seconds) {

    float fseconds = [seconds floatValue];

   [[RCTYouTube alloc] seekToSeconds:fseconds allowSeekAhead:@YES];

}

on my react native file:

 seekToSeconds(fractionValue){

        console.log(fractionValue);

        var seconds = fractionValue * this.state.duration;

        console.log(seconds);
        console.log(NativeModules);

        NativeModules.YouTubeManager.seekTo(seconds);

    }

At the end of the playback, related content is shown.
Is there a way to disable it?

The application won't start due to the error, as in title:

This is because react native RCTImageViewManager already publishes an event onError, for discussion see: facebook/react-native#1952

I have a solution to this in my fork, will test it works and submit a PR to fix.

Such as rel, controls, etc...
https://developers.google.com/youtube/player_parameters?hl=en

I followed the instructions to enable the background audio:

1. project->capabilities->background mode to ON and Audio and Airplay
2. add code in AppDelegate.m:
   [[AVAudioSession sharedInstance] setCategory:AVAudioSessionCategoryPlayAndRecord error:&sessionError];
   reference: youtube/youtube-ios-player-helper#38

But when I press the home button, the sound stops when the app goes into background state.

Any ideas how to enable the Youtube video audio to still play when the app goes into the background state?

From reading the code: playerError = @"video_not)found";

With the following dependencies
"react": "^0.14.8",
"react-dom": "^15.3.1",
"react-native": "^0.32.0",

Hello! I've installed this component on my project and was unable to complete step 4 of the installation guide. After trying to run to the example project, it continued to fail. I tried opening the file from Xcode to see the directory but failed. Am I doing something wrong?

When i try to build with RN 0.31
I've got this issue

CSSLayout/CSSLayout.h' file not found with <angled> include; use "quotes" instead
CSSLayout.h:26:10: 'CSSLayout/CSSMacros.h' file not found with <angled> include; use "quotes" instead

I don't know what to do

Thanks

I would be glad to help to have a same port to android. @paramaggarwal Planning to start one?

Hi,

I just checked out the repo and tried to run through the example.
The first npm install finishes OK.
But when I open the Xcode project and try to run it webserver complains about missing dependencies.
So I tried npm install again and I got bunch of compilation errors the second time around.

Here are the first few errors:

CXX(target) Release/obj.target/validation/src/validation.o
In file included from ../src/validation.cc:15:
../node_modules/nan/nan.h:261:25: error: redefinition of '_NanEnsureLocal'
NAN_INLINE v8::Local _NanEnsureLocal(v8::Local val) {
^
../node_modules/nan/nan.h:256:25: note: previous definition is here
NAN_INLINE v8::Local _NanEnsureLocal(v8::Handle val) {
^

Any idea on how I can fix this?
Thank you.