UNAUTHORIZED_OVERLAY Android bug

[abbasfreestyle]

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?

[hu9osaez]

Same error using the branch v1. Just work when rotate the device.

RN: 0.44.0 react-native-youtube: 1.0.0-alpha.3

[binkkatal]

https://stackoverflow.com/questions/31638871/video-pausing-with-error-unauthorized-overlay

the developer must look a solution for this in the above link

[bethqiang]

Has anyone found a solution to this? The rotating works for me, but it's not necessarily what I'd call preferable. 😅

[asgvard]

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.

[tafelito]

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?

[tafelito]

Ok I actually was able to hide the status bar using StatusBar from react-native, but the problem persists, still same error

[reyhaan]

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.

[hu9osaez]

@reyhaan Where you subtract the px? I tried directly in the styles and doesn't work.

[ben54260]

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 }}

[tafelito]

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).

[abbasfreestyle]

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

[davidohayon669]

@abbasfreestyle The Android module really is pretty sensitive

[tafelito]

@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?

[reyhaan]

@tafelito can you try making those value 1 i.e. top:1, bottom: 1, right:1, left: 1 ? I am just guessing though!

[tafelito]

@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

[tafelito]

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

[jm555jm]

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. =(

[davidohayon669]

@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

[tafelito]

thanks @davidohayon669 that would be great!

[DeviousM]

@davidohayon669 did you manage to push it already? It's kinda killing purpose of the app I'm creating at the moment 😛

[davidohayon669]

@DeviousM @tafelito try alpha.6

[DeviousM]

@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..

[davidohayon669]

@DeviousM are you sure it isn't covered in any way? what do you get when you try the example in this repo?

[chrisbendel]

@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

[DeviousM]

@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.

[chrisbendel]

@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>

[chrisbendel]

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

[chrisbendel]

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>
    );

[tafelito]

@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

[abbasfreestyle]

Exactly the same with me. It worked for me on the deprecated navigation. But It doesnt work with react-native-navigation

[tafelito]

Yeah and this is the error is giving

YouTube video playback stopped due to unauthorized overlay on top of player. The YouTubePlayerView is obscured by com.reactnativenavigation.views.SnackbarAndFabContainer{80e301 V.E...... ........ 0,0-1440,2464}. YouTubePlayerView is completely covered, with the distance in px between each edge of the obscuring view and the YouTubePlayerView being: left: 2, top: 419, right: 2, bottom: 1239..

I'm trying to find a way to solve this

@davidohayon669 Any ideas?

[davidohayon669]

@tafelito @abbasfreestyle you must think of any view that might be blocking the youtube view or even just too close to it. If the example in the repo works for you than the problem must be in your app's view heirarchy

[tafelito]

@davidohayon669 I think the problem with react-native-navigation and probably other navigation libraries that uses the same logic, is that all the content is put inside a parent layout, where then you get access to the FAB or the snackbar or even the drawer. So the relative layout that the player uses, ends up within the main layout, hence it complains being covered.

I'm not completely sure about the internals of react-navigation because I haven't used it yet, but I'll give it a try and see how it goes.

[natour]

This not working, even using the sample example. I was never able to get the video running (One sec then it pauses again) giving UNAUTHORIZED_OVERLAY I took out all other components, nothing else except the Youtube. Tried to adjust margins as well; but still same result.

[chrisbendel]

@davidohayon669 going back to my examples and issues, it ended up working but then when I try to use any of the callback methods (onChange, onReady) to use the seekTo(time) method the error comes back (android). Could there be something happening under the hood where when we target the player by it's ref it changes the layout of the android youtube player? it works without trying seekto, but as soon as seekTo comes into the mix it gives the same unauthorized_overlay error

[davidohayon669]

@chrissbendel @natour @tafelito I've tried to elaborate on the issue here with what I know so far. Please make an effort and try the example app so you can eliminate at least some causes before we discuss them here.

[tafelito]

@davidohayon669 I tried the example app and it works fine for me. I also added react-navigation to the sample app and it also works ok.

As I said before, the problem seems to be having some of views or layouts on top of the RelativeLlayout that RNY uses. At least that's what I see it's happening with react-native-navigation

The difference is that RN it's a pure JS library, so I don't think there would any problem with it.

[tafelito]

Ok I take back what I just said. It does work with react-navigation, but not always.

If I start the video below the NavBar, it plays fine. Then if I scroll while playing and the video ends up behind the NavBar, it stops, giving the same error.

Some screenshots

[davidohayon669]

@tafelito This was always the same. The minute the player is covered it stops playing. It is unhackable AFAIK

[tafelito]

you are right @davidohayon669, jus tested with an Android project using the native YouTubePlayer sdk and it does the same thing.

[nimabk82]

I test the example with react native navigation , problem persist.

[davidohayon669]

@nimamyscreen gather as much relevant information you can

[nimabk82]

In logcat I get this warning when I push the screen by navigator

06-29 17:44:53.747 27195-27195/com.reduxtemplate W/YouTubeAndroidPlayerAPI: Forcefully created overlay:wjs@b2e6f2a helper:Lazy@d20511b view:null status: ...... {...}
06-29 17:44:56.117 27195-27195/com.reduxtemplate W/YouTubeAndroidPlayerAPI: YouTube video playback stopped due to unauthorized overlay on top of player. The YouTubePlayerView is obscured by com.reactnativenavigation.views.SnackbarAndFabContainer{4d7fccf V.E...... ........ 0,0-1080,1680}. YouTubePlayerView is completely covered, with the distance in px between each edge of the obscuring view and the YouTubePlayerView being: left: 1, top: 345, right: 1, bottom: 729

when I try to open the youtube component inside a modal, the app completely crash and exit. I get this error in logcat

06-29 18:33:29.887 22196-22196/com.reduxtemplate W/ResourceType: No package identifier when getting name for resource number 0x000001f1
06-29 18:33:29.887 22196-22196/com.reduxtemplate D/AndroidRuntime: Shutting down VM
06-29 18:33:29.897 22196-22196/com.reduxtemplate E/AndroidRuntime: FATAL EXCEPTION: main
                                                                   Process: com.reduxtemplate, PID: 22196
                                                                   android.content.res.Resources$NotFoundException: Unable to find resource ID #0x1f1
                                                                       at android.content.res.Resources.getResourceName(Resources.java:3749)
                                                                       at android.app.FragmentManagerImpl.moveToState(FragmentManager.java:976)
                                                                       at android.app.FragmentManagerImpl.moveToState(FragmentManager.java:1164)
                                                                       at android.app.BackStackRecord.run(BackStackRecord.java:793)
                                                                       at android.app.FragmentManagerImpl.execPendingActions(FragmentManager.java:1557)
                                                                       at android.app.FragmentManagerImpl$1.run(FragmentManager.java:488)
                                                                       at android.os.Handler.handleCallback(Handler.java:739)
                                                                       at android.os.Handler.dispatchMessage(Handler.java:95)
                                                                       at android.os.Looper.loop(Looper.java:148)
                                                                       at android.app.ActivityThread.main(ActivityThread.java:7326)
                                                                       at java.lang.reflect.Method.invoke(Native Method)
                                                                       at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:1230)
                                                                       at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:1120)

I even removed drawer but problem persist.

"dependencies": { "axios": "^0.16.1", "react": "16.0.0-alpha.6", "react-native": "0.44.0", "react-native-youtube": "^1.0.0-alpha.6", "react-native-navigation": "^1.1.54", "react-redux": "^5.0.4", "redux": "^3.6.0", "redux-thunk": "^2.2.0" },

[davidohayon669]

@nimamyscreen try delaying the mounting of the <YouTube /> to after the navigation ended. Maybe the animation of the navigation disrupts the native component.

I would try to find some event to attach to, or just try 500-1000ms delay just to test if the problem got anything to do with the navigation event

[johnckendall]

FWIW, After trying the above to no avail, I removed all navigation by creating a single page with just the youtube component on it and I still get these errors. See my comment on #131 My belief is there is some bug in the underlying Android Native youtube player that will need to be addressed.

[karan101292]

any update on this?

[davidohayon669]

@karan101292 This issue is not fully addressable. There is no way to cover the native component without making the video stop. If you have any problem that you think shouldn't occur please describe it more specifically

[zhouxuemeng1988]

Same problem！ When some other view on top of "Youtube View", this may case "UNAUTHORIZED_OVERLAY ". Youtube View needs to be on the top zIndex of the screen. I reslove this bug : move the "Youtube View" to top of you views.

@abbasfreestyle "Youtube View" can not be blocked by other views

[abbasfreestyle]

@zhouxuemeng1988

Could you explain what you mean by moving the youtube view to the top of your views? When you say it needs to be at the top of the zIndex screen, is this involving position: 'absolute' ?

[zhouxuemeng1988]

@abbasfreestyle
I find youtube api. https://developers.google.com/youtube/android/player/reference/com/google/android/youtube/player/YouTubePlayer.ErrorReason

YouTubePlayer.ErrorReason.UNAUTHORIZED_OVERLAY | Playback has been stopped due to a view overlaying the player.