react-native-youtube
react-native-youtube copied to clipboard
davidohayon669
UNAUTHORIZED_OVERLAY Android bug
Currently experiencing this issue on Android. iOS is working fine.
Running: react native: 0.44 react-native-youtube: 1.0.0-alpha-4 Device: Galaxy Note 5 (real device)
I always get UNAUTHORIZED_OVERLAY error when playing the video inline, it just shows a black screen, no controls whatsoever. If the video starts as fullscreen it works perfectly fine, as soon as it goes inline it complains.
I've used previous version on RN 0.39 and it all works fine, my coding appears to be fine too. It seems to be a bug with RN 0.44.
<YouTube videoId={videoId} play={true}
fullscreen={false} loop={false}
controls={1}
onReady={(e)=>{this.setState({ready:true})}}
apiKey={apiKey}
style={{width:300, height:150}}
onError={(e) => {this.YTerror(e)}}
/>
Any solutions?
Same error using the branch v1. Just work when rotate the device.
RN: 0.44.0 react-native-youtube: 1.0.0-alpha.3
https://stackoverflow.com/questions/31638871/video-pausing-with-error-unauthorized-overlay
the developer must look a solution for this in the above link
Has anyone found a solution to this? The rotating works for me, but it's not necessarily what I'd call preferable. 😅
I gave up to be honest, tried to remove <Text> in Youtube.android.js, because it seems to absolutely positioned, but it didn't solved an issue. There is also a comment here, but it doesn't seem to protect us anymore :) I even tried to inspect native Android UI hierarchy, and haven't found any view that is obviously covering the player, though in properties it says "overlayed" - true.
For now I've just embedded YT player in the WebView. As simple as this:
<WebView
style={props.style}
source={{uri: `https://www.youtube.com/embed/${props.videoId}?controls=0&showinfo=0`}}
/>
I know it's not a proper solution, but at least works on both iOS and Android with RN 0.44.3.
For iOS specifically it seems ridiculous to have react-native (which is kinda JS focused and encourages to unify the codebase) with the package, the adds native ObjC code, that creates webView with i-frame (which is JS-powered as well in that .html file that you have to include), just to expose that callbacks back to your JS...Ta-daaah!..I mean in RN it's rather easier to directly create i-frame right in WebView, and map the callbacks back if you really need them, with pure JS. There was a suggestion somewhere in the other Issues for this package to make a solution with WebView, I hope it will see the world someday :) But for simple "just play YT videos" use-case -
WebView + embed link as above would solve the problem.
The problem with this issue seems to be the status bar. I'm using react-native-navigation that supposedly allows you to hide the SB but its not working.
Anyone found any other solution yet?
Ok I actually was able to hide the status bar using StatusBar from react-native, but the problem persists, still same error
I think I might have found the reason for this error. I was running logcat and found this log that actually gave me a hint. So what I did was I just subtracted '2px' width from YouTube player and voila!!! Its working perfectly.
I am actually using react-native-drawer and inLine mode was not working at all.
@reyhaan Where you subtract the px? I tried directly in the styles and doesn't work.
I discover that Youtube view will show when change the orientation of screen, and no need to set fullscreen nor play.
So I solved this problem by change a bit of the height in the styles after onReady event be triggered. (initial height is 301)
onReady={e => this.setState({ height: 300 })}
style={{ alignSelf: 'stretch', height: this.state.height, backgroundColor: 'black', marginVertical: 10 }}
I run the example app as it is now and that one works, then I upgraded to the latest RN version, without doing any other change and then it stops working throwing that error. How could the height be different only by changing RN version?
Also I did a logcat and for me this is the error I'm getting
YouTubeAndroidPlayerAPI: YouTube video playback stopped due to unauthorized overlay on top of player. The YouTubePlayerView is obscured by com.facebook.react.views.text.ReactTextView{77856fa V.ED..... ........ 0,40-28,116 #6}. Right edge 26 px right of YouTubePlayerView's left edge. Top edge 1158 px above YouTubePlayerView's bottom edge. .
I removed all the components from RCTYouTubeExample and just left the YouTube component
EDIT:
Now I get a similar error if I don't change the height onReady
YouTubeAndroidPlayerAPI: YouTube video playback stopped due to unauthorized overlay on top of player. The YouTubePlayerView is not contained inside its ancestor android.widget.FrameLayout{dda59cb V.E...... ......I. 0,0-0,0}. The distances between the ancestor's edges and that of the YouTubePlayerView is: left: 0, top: 0, right: 0, bottom: 0 (these should all be positive).
Thank you @ben54260 !
This solved the problem, the videos are loading as expected and can toggle fullscreen with no issues. Strange why we need to do this, Android Youtube is a diva.
Closing
@abbasfreestyle How's this solved? I just tried what @ben54260 said in the example project running on RN 0.45 and I still have the same issue. Did you change anything else other than that? What version of RN are you using? Have you tried running the example?
@tafelito can you try making those value 1 i.e. top:1, bottom: 1, right:1, left: 1 ? I am just guessing though!
@reyhaan Same thing. It gives the error
YouTubeAndroidPlayerAPI: YouTube video playback stopped due to unauthorized overlay on top of player. The YouTubePlayerView is obscured by com.facebook.react.views.text.ReactTextView{312038a V.ED..... ........ 0,40-28,116 #6}. Right edge 26 px right of YouTubePlayerView's left edge. Top edge 1158 px above YouTubePlayerView's bottom edge. .
Not sure why it complains about a ReactTextView, cause I removed any extra view other than the YouTube player
Ok I found the issue. On the YouTube.android.js there is a TextView. I removed it and now it's working. Seems like that is not needed anymore, unless I'm missing anything
According to youtube SDK website:
It is not permitted to overlay this fragment's view with other views while a video is playing.
This rule make me crazy, too. =(
@tafelito There seems to be some change that cause a bug in Android on RN > 0.44 I already solved it and will probably push the next few days
@davidohayon669 did you manage to push it already? It's kinda killing purpose of the app I'm creating at the moment 😛
@davidohayon669 - unfortunately, problem persists. If this can help that's the output from logcat:
06-25 17:35:33.725 16783-16783/com.vloggerapp W/YouTubeAndroidPlayerAPI: YouTube video playback stopped due to unauthorized overlay on top of player. The YouTubePlayerView is obscured by com.facebook.react.views.view.ReactViewGroup{da778f3 V.E...... ........ 0,0-1080,1936 #22}. YouTubePlayerView is completely covered, with the distance in px between each edge of the obscuring view and the YouTubePlayerView being: left: 1, top: 319, right: 1, bottom: 929..
@DeviousM are you sure it isn't covered in any way? what do you get when you try the example in this repo?
@davidohayon669 I've been following this issue as it unfolds and also am having the same trouble. If you need more information I hope I could help at least a little bit.
Project is using nativebase layouts (Container as a main wrapper for each component). Video loads up fine and plays for half a second then immediately stops with the overlay error. Also i have installed and relinked the latest version (alpha 6) and am on RN v44). Project is also using react-native-router-flux with a drawer component but I wouldn't imagine that causing any issues.
This problem persists on both emulator && physical device
YouTubePlayerView is completely covered, with the distance in px between each edge of the obscuring view and the YouTubePlayerView being: left: 1, top: 789, right: 293, bottom: 15
code
return (
<View style={styles.playerContainer}>
<YouTube
ref="youtubePlayer"
videoId={song.songInfo.fkid}
play={true}
rel={false}
fullscreen={false}
showFullscreenButton={true}
showinfo={false}
controls={0}
apiKey={myKey}
origin={"https://www.youtube.com"}
style={styles.youtube}
/>
</View>
);
styles.playerContainer = {
alignItems: "center",
justifyContent: "center",
marginTop: 300,
marginLeft: 50
}
styles.youtube= {
alignSelf: "stretch",
height: 300,
width: 300
}
Edit1: trying a bunch of different configurations and it seems like it's got something to do with a view much higher up in the tree. RCTView is super fucky with it
@chrissbendel - I have exactly the same issue. Also using the NativeBase & react-native-router-flux & drawer component. Don't know if it has anything to do with it.
@DeviousM i was spending the entire day yesterday ripping my hair out in frustration. Seems like even loading JUST the youtube player with no other views/containers on top of it inside of a nested scene I get the overlay error with JUST ~150px for the top of the youtubeplayer container, but when i try to either move the player down with margin top, margin vertical, padding, or anything else, then the left, right, and bottom margin errors come in with totally random numbers (like 566px for the bottom, 27 px left and right).
Router and scene config looks like this for anyone interested. I'm wondering if it has to do with router flux and possibly the drawer.
Removing the wrapping Container also doesn't do anything at all for the youtube player. I am attempting to put the youtube player inside of the room component, so the only scenes wrapping it are main -> drawer -> root
<Container>
<Router>
<Scene key="main" type="reset">
<Scene key="drawer" open={false} ee={ee} component={DrawerNav}>
<Scene key="root" tabs={false} drawerIcon={<Icon name="menu" />}>
<Scene
key="Lobby"
ee={ee}
component={Lobby}
title="Lobby"
renderRightButton={() => {
if (this.state.room) {
return (
<TouchableOpacity
onPress={() => {
Actions.Room({
room: this.state.room,
title: this.state.room.name,
old: true
});
}}
>
<Icon name="musical-notes" />
</TouchableOpacity>
);
}
}}
/>
<Scene key="Room" ee={ee} component={Room} title="Room" />
<Scene
key="Messages"
ee={ee}
component={PrivateMessages}
title="Messages"
/>
<Scene
key="Conversation"
ee={ee}
component={Conversation}
title="Conversation"
/>
<Scene key="Login" ee={ee} component={Login} title="Log In" />
</Scene>
</Scene>
</Scene>
</Router>
</Container>
I can confirm this is being caused by the wrapping drawer component @DeviousM . After removing the drawer seems that things work just fine... now to figure out how to integrate it without it causing issues
Hey @DeviousM , I think i've found a solution (this bug doesn't seem to be on the react-native-youtube lib, but rather with the wrapping drawer). If we have a similar setup (with a drawer wrapping the entire content of the app and all nested scenes), try doing something like this to your tweenHandler prop in the Drawer (assuming you're using react-native-drawer).
The key thing that got it working for me was setting mainOverlay: width: 0. It seems as if the default main overlay of the drawer is covering the entire screen, so setting this to 0 seems to keep everything else working as is and not affect the video overlay. Definitely let me know if this workaround works for you too, thanks!
return (
<Drawer
ref={ref => (this._drawer = ref)}
open={state.open}
type="displace"
content={SideMenu}
tapToClose={true}
openDrawerOffset={0.5}
panOpenMask={0.2}
panCloseMask={0.4}
panThreshold={0.5}
negotiatePan={true}
// tweenHandler={Drawer.tweenPresets.parallax}
tweenHandler={ratio => ({
main: { opacity: Math.max(0.54, 1 - ratio) },
mainOverlay: { width: 0 }
})}
>
<DefaultRenderer
navigationState={children[0]}
onNavigate={this.props.onNavigate}
/>
</Drawer>
);
@davidohayon669 I just tried the example app with the alpha.6 and it's working fine for me. But I tried it within my app that uses react-native-navigation and it's not working. I'm trying to figure it out what the issue could be.
Thanks for the update anyway
Exactly the same with me. It worked for me on the deprecated navigation. But It doesnt work with react-native-navigation