-
-
Notifications
You must be signed in to change notification settings - Fork 2.9k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[Android] fullscreen video #2073
[Android] fullscreen video #2073
Conversation
This is great! Merged it into my local copy of react-native-video without any problems. Recommend it for merging. Quick question though: right now it seems when I come back from the fullscreen mode it triggers the react native AppState.addEventListener('change', () => func). On the iOS side, the full screen behavior doesn't trigger the AppState event listener. Is there a quick way to mirror that behavior on the android side too or should I be setting up an exception for my app state listener for this? |
Nice PR! I have noticed one problem. When I pause a video in fullscreen, I can't resume it unless I exit fullscreen mode. Edit: I have now tried it on a real device. And have noticed a pattern. When toggling fullscreen and press pause, it is not possible to start the video on the first press on the play icon. When I do a second press on the play icon the video starts playing and then the play/pause toggling works as expected until I toggle fullscreen again. Edit2: It works as expected if I apply this PR to 5.0.2. |
@anandhakumarpalanisamy did you add the controls property only, or you have to add the full screen control manually? |
@ilyausorov how does this works for you? If I use the branch r0b0t3d:feature/android-fullscreen (build is cleaned) still do not have fullscreen control and if I use the presentFullscreenPlayer still does not work. Can you help me what I miss? Currently with react-native 0.60+ there is no package that can have a control that present the video on fullscreen. |
@golya please try
|
@r0b0t3d thanks for the help!!! :) However as I wrote above I used this branch (and I add by yarn add https://github.com/r0b0t3d/react-native-video.git#feature/android-fullscreen) after that I cleaned the build, rebuild, and there is no fullscreen control and I can not set it to fullscreen by presentFullscreenPlayer. If I use your branch should I see the fullscreen control immediately? |
Yes, it should be there. You can check code in |
@r0b0t3d thanks! Then I try again, at least this is important information that I should see the control, so if I do not see then I am doing something wrong. :D How do you mean check code in node_modules/react-native-video? What kind of changes should I check there? Thanks for the help again!! :) |
At least, you can check if Please note that, this PR only for Important part: android/settings.gradle
|
@r0b0t3d It works!!! The android/settings.gradle what I missed, and by this way the README.me is little bit confusing because the android install part starts with "Linking is not required in React Native 0.60 and above." On the other hand the fullscreenAutorotate and the fullscreenOrientation does not work on my side, can you help me where I can find the related code in your branch and I will start to debug it. Thanks for the help!!! 👍 |
@golya Actually, if you are using default player, you no need to manual link. In case of using ExoPlayer, you will need to point to |
@r0b0t3d got it! :) |
If you want to activate fullscreen while rotating the device to landscape. you might need the help from react-native-orientation-locker |
@r0b0t3d And right, you need to update the MainApplication.java as well by: import com.brentvatne.react.ReactVideoPackage; packages.add(new ReactVideoPackage()); And this little bit different what you need to use in case of 0.60 < and what the README.me says. Thanks for everything @r0b0t3d, this helped me a lot!!! |
@r0b0t3d FYI: I got this fatal exception, I try to figure out why, but after the first video watch the app is crashing and the video works after I restart the app.
|
it seems this FATAL EXCEPTION is related to this: #1846 |
Thanks @r0b0t3d for this PR! Is there anything blocking this merge? @jenshandersson |
Can this be merged in? |
@hueniverse I am using it for my production apps. I think we can merge then if there is any issue, we can add a fix later |
@mehthabt do you have crash log? |
@jonra1993 which source are you using now? |
@r0b0t3d sorry for the late reply, let me check again! |
@r0b0t3d i tried with latest rn-video im getting Execution failed for task ':app:checkDebugAarMetadata'.
on building should i change it to 2.13.3 ? |
@mehthabt yes please |
I've install library from git - and have crash on android when press full screen button (Android Emulator, ExoPlayer) 2022-05-02 13:43:21.218 23389-23532/com.projectname E/ACodec: [OMX.google.h264.decoder] setPortMode on output to DynamicANWBuffer failed w/ err -1010
2022-05-02 13:43:27.409 23389-23468/com.projectname E/unknown:ReactEventEmitter: Unhandled SoftException
com.facebook.react.bridge.ReactNoCrashSoftException: Cannot find EventEmitter for receivedTouches: ReactTag[2131361942] UIManagerType[2] EventName[topTouchStart]
at com.facebook.react.uimanager.events.ReactEventEmitter.receiveTouches(ReactEventEmitter.java:87)
at com.facebook.react.uimanager.events.TouchesHelper.sendTouchEvent(TouchesHelper.java:106)
at com.facebook.react.uimanager.events.TouchEvent.dispatch(TouchEvent.java:191)
at com.facebook.react.uimanager.events.TouchEvent.dispatchModern(TouchEvent.java:201)
at com.facebook.react.uimanager.events.EventDispatcherImpl$DispatchEventsRunnable.run(EventDispatcherImpl.java:369)
at android.os.Handler.handleCallback(Handler.java:883)
at android.os.Handler.dispatchMessage(Handler.java:100)
at com.facebook.react.bridge.queue.MessageQueueThreadHandler.dispatchMessage(MessageQueueThreadHandler.java:27)
at android.os.Looper.loop(Looper.java:214)
at com.facebook.react.bridge.queue.MessageQueueThreadImpl$4.run(MessageQueueThreadImpl.java:226)
at java.lang.Thread.run(Thread.java:919)
--------- beginning of system
2022-05-02 13:43:27.496 23389-23468/com.projectname E/unknown:ReactEventEmitter: Unhandled SoftException
com.facebook.react.bridge.ReactNoCrashSoftException: Cannot find EventEmitter for receivedTouches: ReactTag[2131361942] UIManagerType[2] EventName[topTouchEnd]
at com.facebook.react.uimanager.events.ReactEventEmitter.receiveTouches(ReactEventEmitter.java:87)
at com.facebook.react.uimanager.events.TouchesHelper.sendTouchEvent(TouchesHelper.java:106)
at com.facebook.react.uimanager.events.TouchEvent.dispatch(TouchEvent.java:191)
at com.facebook.react.uimanager.events.TouchEvent.dispatchModern(TouchEvent.java:201)
at com.facebook.react.uimanager.events.EventDispatcherImpl$DispatchEventsRunnable.run(EventDispatcherImpl.java:369)
at android.os.Handler.handleCallback(Handler.java:883)
at android.os.Handler.dispatchMessage(Handler.java:100)
at com.facebook.react.bridge.queue.MessageQueueThreadHandler.dispatchMessage(MessageQueueThreadHandler.java:27)
at android.os.Looper.loop(Looper.java:214)
at com.facebook.react.bridge.queue.MessageQueueThreadImpl$4.run(MessageQueueThreadImpl.java:226)
at java.lang.Thread.run(Thread.java:919)
2022-05-02 13:43:27.553 23389-23389/com.projectname E/AndroidRuntime: FATAL EXCEPTION: main
Process: com.projectname, PID: 23389
java.lang.RuntimeException: Unable to start activity ComponentInfo{com.projectname/com.brentvatne.exoplayer.ExoPlayerFullscreenVideoActivity}: java.lang.IllegalStateException: You need to use a Theme.AppCompat theme (or descendant) with this activity.
at android.app.ActivityThread.performLaunchActivity(ActivityThread.java:3270)
at android.app.ActivityThread.handleLaunchActivity(ActivityThread.java:3409)
at android.app.servertransaction.LaunchActivityItem.execute(LaunchActivityItem.java:83)
at android.app.servertransaction.TransactionExecutor.executeCallbacks(TransactionExecutor.java:135)
at android.app.servertransaction.TransactionExecutor.execute(TransactionExecutor.java:95)
at android.app.ActivityThread$H.handleMessage(ActivityThread.java:2016)
at android.os.Handler.dispatchMessage(Handler.java:107)
at android.os.Looper.loop(Looper.java:214)
at android.app.ActivityThread.main(ActivityThread.java:7356)
at java.lang.reflect.Method.invoke(Native Method)
at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:492)
at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:930)
Caused by: java.lang.IllegalStateException: You need to use a Theme.AppCompat theme (or descendant) with this activity.
at androidx.appcompat.app.AppCompatDelegateImpl.createSubDecor(AppCompatDelegateImpl.java:846)
at androidx.appcompat.app.AppCompatDelegateImpl.ensureSubDecor(AppCompatDelegateImpl.java:809)
at androidx.appcompat.app.AppCompatDelegateImpl.setContentView(AppCompatDelegateImpl.java:696)
at androidx.appcompat.app.AppCompatActivity.setContentView(AppCompatActivity.java:195)
at com.brentvatne.exoplayer.ExoPlayerFullscreenVideoActivity.onCreate(ExoPlayerFullscreenVideoActivity.java:41)
at android.app.Activity.performCreate(Activity.java:7802)
at android.app.Activity.performCreate(Activity.java:7791)
at android.app.Instrumentation.callActivityOnCreate(Instrumentation.java:1299)
at android.app.ActivityThread.performLaunchActivity(ActivityThread.java:3245)
at android.app.ActivityThread.handleLaunchActivity(ActivityThread.java:3409)
at android.app.servertransaction.LaunchActivityItem.execute(LaunchActivityItem.java:83)
at android.app.servertransaction.TransactionExecutor.executeCallbacks(TransactionExecutor.java:135)
at android.app.servertransaction.TransactionExecutor.execute(TransactionExecutor.java:95)
at android.app.ActivityThread$H.handleMessage(ActivityThread.java:2016)
at android.os.Handler.dispatchMessage(Handler.java:107)
at android.os.Looper.loop(Looper.java:214)
at android.app.ActivityThread.main(ActivityThread.java:7356)
at java.lang.reflect.Method.invoke(Native Method)
at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:492)
at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:930) |
Just tried to run |
I just have a look, but on my branch, I don't have this code ...
but the style of the activity is not specified. where : class ExoPlayerFullscreenVideoActivity extends AppCompatActivity The log says: It means that the default style of the doesn't match android expectations @reinismu @osliver can you try to add the theme in declaration please ? or double check the default theme in your app ? |
This is how my theme looks now
I tried to change few things around it, but it didn't help |
@freeboub same for me, I'm using bootsplash for splash screen and according to bootsplash documentation in manifest file it have to be - android:theme="@style/BootTheme"> and style file below <resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.DayNight.NoActionBar">
<!-- Customize your theme here. -->
</style>
<!-- BootTheme should inherit from Theme.SplashScreen -->
<style name="BootTheme" parent="Theme.SplashScreen">
<item name="windowSplashScreenBackground">@color/bootsplash_background</item>
<item name="windowSplashScreenAnimatedIcon">@drawable/bootsplash_logo</item>
<item name="postSplashScreenTheme">@style/AppTheme</item>
</style>
</resources> |
@r0b0t3d I would prefer continuing this conversation here where we have context for it. If the issues are not resolved, we might have to roll this change back. |
@hueniverse I double check merged patch and I am not sure this change is valid ... I think events generate the : 'ReactEventEmitter: Unhandled SoftException' and than, other log, are just side effect of this initial issue. |
any updates on this? |
@osliver I will take a look this weekend. Thanks |
@osliver I tried with the latest code from master branch on my current app, all works well. The current example app can't run on my device arm64 simulator. So I will try to create new demo repo then let you know |
@r0b0t3d as I understand this issue only if react-native-bootsplash implemented |
Can you please try to move : android:theme="@style/BootTheme" inside your MainActivity instead of the whole app, It may fix the issue... @osliver @r0b0t3d do you use a custom UI to handle playback state outside of defautl controls ? @hueniverse according to: https://stackoverflow.com/questions/37188351/how-can-i-use-multiple-reactactivity-with-seperate-js-bundle a second activity can be a ReactActivity. It will allow custom UI implementation! can can also be usefull for pip implementation, but it need to bundle entry points (registerComponent) |
@freeboub <manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.projectname">
<uses-permission android:name="android.permission.INTERNET" />
<application
android:name=".MainApplication"
android:label="@string/app_name"
android:icon="@mipmap/ic_launcher"
android:roundIcon="@mipmap/ic_launcher_round"
android:allowBackup="false">
<activity
android:name=".MainActivity"
android:label="@string/app_name"
android:configChanges="keyboard|keyboardHidden|orientation|screenSize|screenLayout|smallestScreenSize|uiMode"
android:launchMode="singleTask"
android:exported="true"
android:screenOrientation="portrait"
android:windowSoftInputMode="adjustNothing"
android:theme="@style/BootTheme"> // moved here from <activity
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
</application>
</manifest> if go in this way - <manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.projectname">
<uses-permission android:name="android.permission.INTERNET" />
<application
android:name=".MainApplication"
android:label="@string/app_name"
android:icon="@mipmap/ic_launcher"
android:roundIcon="@mipmap/ic_launcher_round"
android:allowBackup="false"
android:theme="@style/AppTheme"> // return default theme
<activity
android:name=".MainActivity"
android:label="@string/app_name"
android:configChanges="keyboard|keyboardHidden|orientation|screenSize|screenLayout|smallestScreenSize|uiMode"
android:launchMode="singleTask"
android:exported="true"
android:screenOrientation="portrait"
android:windowSoftInputMode="adjustNothing"
android:theme="@style/BootTheme"> // and add bootsplash theme to activity
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
</application>
</manifest> it throw error in Logical but no crash - 2022-05-16 09:53:46.396 1449-1527/com.projectname E/unknown:ReactEventEmitter: Unhandled SoftException
com.facebook.react.bridge.ReactNoCrashSoftException: Cannot find EventEmitter for receivedTouches: ReactTag[2131361942] UIManagerType[2] EventName[topTouchStart]
at com.facebook.react.uimanager.events.ReactEventEmitter.receiveTouches(ReactEventEmitter.java:87)
at com.facebook.react.uimanager.events.TouchesHelper.sendTouchEvent(TouchesHelper.java:106)
at com.facebook.react.uimanager.events.TouchEvent.dispatch(TouchEvent.java:191)
at com.facebook.react.uimanager.events.TouchEvent.dispatchModern(TouchEvent.java:201)
at com.facebook.react.uimanager.events.EventDispatcherImpl$DispatchEventsRunnable.run(EventDispatcherImpl.java:369)
at android.os.Handler.handleCallback(Handler.java:883)
at android.os.Handler.dispatchMessage(Handler.java:100)
at com.facebook.react.bridge.queue.MessageQueueThreadHandler.dispatchMessage(MessageQueueThreadHandler.java:27)
at android.os.Looper.loop(Looper.java:214)
at com.facebook.react.bridge.queue.MessageQueueThreadImpl$4.run(MessageQueueThreadImpl.java:226)
at java.lang.Thread.run(Thread.java:919)
2022-05-16 09:53:46.511 1449-1527/com.projectname E/unknown:ReactEventEmitter: Unhandled SoftException
com.facebook.react.bridge.ReactNoCrashSoftException: Cannot find EventEmitter for receivedTouches: ReactTag[2131361942] UIManagerType[2] EventName[topTouchEnd]
at com.facebook.react.uimanager.events.ReactEventEmitter.receiveTouches(ReactEventEmitter.java:87)
at com.facebook.react.uimanager.events.TouchesHelper.sendTouchEvent(TouchesHelper.java:106)
at com.facebook.react.uimanager.events.TouchEvent.dispatch(TouchEvent.java:191)
at com.facebook.react.uimanager.events.TouchEvent.dispatchModern(TouchEvent.java:201)
at com.facebook.react.uimanager.events.EventDispatcherImpl$DispatchEventsRunnable.run(EventDispatcherImpl.java:369)
at android.os.Handler.handleCallback(Handler.java:883)
at android.os.Handler.dispatchMessage(Handler.java:100)
at com.facebook.react.bridge.queue.MessageQueueThreadHandler.dispatchMessage(MessageQueueThreadHandler.java:27)
at android.os.Looper.loop(Looper.java:214)
at com.facebook.react.bridge.queue.MessageQueueThreadImpl$4.run(MessageQueueThreadImpl.java:226)
at java.lang.Thread.run(Thread.java:919)
2022-05-16 09:53:46.864 1449-1817/com.projectname E/EGL_emulation: eglQueryContext 32c0 EGL_BAD_ATTRIBUTE
2022-05-16 09:53:46.864 1449-1817/com.projectname E/EGL_emulation: tid 1817: eglQueryContext(1902): error 0x3004 (EGL_BAD_ATTRIBUTE) |
Given the uncertainty around this change, I decided to revert it. Moving forward it will go through the new review process which wasn't in place when this was merged. |
…fullscreen [Android] fullscreen video
original PR: TheWidlarzGroup#2073 Removed ExoPlayerFullscreenVideoActivity PR: TheWidlarzGroup@daf5e59
Hi, there are PRs that tried to resolve the problem with displaying fullscreen on Android but seems not working well.
This PR aim to solve that problem.
Solution
I start a fullscreen activity in native side and reuse
player
instance fromReactExoPlayerView