davidohayon669 / react-native-youtube Goto Github PK
View Code? Open in Web Editor NEWA <YouTube/> component for React Native.
License: MIT License
A <YouTube/> component for React Native.
License: MIT License
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 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
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 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:
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";
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.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.