Support for displaying controls in Android Exoplayer #1414

IbrahimSulai · 2019-01-04T10:25:05Z

Added support for displaying player controls in Android Exoplayer component using PlayerControlView
Utilised the existing boolean prop 'controls' to show/hide the native controls for the player.

Sample Usage

<Video
  source={
    {uri: 'https://www.w3schools.com/html/mov_bbb.mp4'}
  }
  controls={true}
/>

kcalmes · 2019-01-08T18:03:24Z

When will this pull request be accepted?

IbrahimSulai · 2019-01-08T19:16:45Z

@cobarx
could you help to review and merge.

IbrahimSulai · 2019-01-14T06:03:33Z

@n1ru4l @cobarx - Could you please help to review this pull request.

cobarx

Hi @IbrahimSulai, sorry for the delay in looking at this, I've been sick the last week so haven't gotten to put any time into the project.

Here are some minor changes that I saw by glancing over the PR. I still need to run the code and see how it works.

Thanks for putting this together! I had no idea that ExoPlayer included built-in controls so this makes it so much easier to implement this feature. Nice work!

Go ahead and make the changes, I will test this out in the next day or two.

README.md

android-exoplayer/src/main/java/com/brentvatne/exoplayer/ReactExoplayerView.java

IbrahimSulai · 2019-01-16T18:30:47Z

@cobarx - Thanks for your valuable review comments. I have resolved the same. Please review the changes.

I hope you are doing good regarding your health. Take care.

AndriiUhryn · 2019-01-21T20:23:11Z

Is there any news about this PR? @cobarx

mgezkaya · 2019-01-22T11:46:26Z

Hey @cobarx I have tried this PR on Android in my local and it's really works. It has some issues that needs to be solved although but I think it's still better than nothing. I hope you can merge it when you are available. And @IbrahimSulai thanks for your attention but can you apply a change for fullScreen on control, too? Because i couldn't see and i really need it. Thank you both.

FelipeSSantos1 · 2019-01-23T00:10:19Z

Please @cobarx merge it!!!!! 🎉🎉🎉 thank you @IbrahimSulai

cobarx · 2019-01-23T18:55:08Z

Ok I tested this and am seeing a weird behavior where when I press pause, the play button doesn't appear there is just a blank space. Any idea what's going on here? Here is a screenshot:

Also, if I start the video with controls={true} then change it to false, the controls don't disappear. I looked at the code and this should be possible, can you update it to handle this?

IbrahimSulai · 2019-01-24T05:51:27Z

@cobarx - I will look into the above UI issue and also will handle the controls props.

…p state

IbrahimSulai · 2019-01-25T10:28:40Z

Ok I tested this and am seeing a weird behavior where when I press pause, the play button doesn't appear there is just a blank space. Any idea what's going on here? Here is a screenshot:

Also, if I start the video with controls={true} then change it to false, the controls don't disappear. I looked at the code and this should be possible, can you update it to handle this?

@cobarx - I have fixed the UI player control UI issue. Also handled the controls prop state. Could you please review it.

mgezkaya · 2019-01-25T11:35:05Z

@IbrahimSulai Can you apply a button for fullscreen if you can, please?

IbrahimSulai · 2019-01-25T11:40:43Z

@IbrahimSulai Can you apply a button for fullscreen if you can, please?

@mgezkaya , Sure. Once @cobarx merge this, will add the full screen feature as a separate PR. Thanks.

mgezkaya · 2019-01-25T11:43:29Z

@IbrahimSulai Can you apply a button for fullscreen if you can, please?

@mgezkaya , Sure. Once @cobarx merge this, will add the full screen feature as a separate PR. Thanks.

Thanks for return

xstable · 2019-01-28T10:12:40Z

@IbrahimSulai didn't work for me on Android 9.
Play-Button still disappear after pressing Pause.

But if I put the App into background, and get it back to foreground, it autoplays the video, and "Pause" button is visible.
If I start the Video with "paused", I see the Play-Button. And If I press on it, the "pause"Button disappear.

Here is my patch-file: https://hastebin.com/jugowesova.diff

IbrahimSulai · 2019-01-28T13:39:11Z

@IbrahimSulai didn't work for me on Android 9.
Play-Button still disappear after pressing Pause.

But if I put the App into background, and get it back to foreground, it autoplays the video, and "Pause" button is visible.

Here is my patch-file: https://hastebin.com/ximupiwexe.diff

@xstable
I tested in Android version 9 and lower versions (Models: Google Pixel, OnePlus5T, and Nexus), the player works as expected. Can you share more details (like Device Model) on the issue you are facing?

I’m not sure about the patch package you are using, so can you also please try to use the changes AS IS from the PR instead of trying via any patch/patch packages.

PFB, the recording of the player.

xstable · 2019-01-29T07:41:29Z

@IbrahimSulai The Patch is my own one, I've created with patch-package. It contains the diff between default "react-native-video" and my changes.

My Device is: Xiaomi Mi A1 & Samsung S4

Maybe I've missed something, or have an Issue in my code, so here I've create a package of my changed source-code from android-explayer so that you can have a look inside.
android-exoplayer.tar.gz

IbrahimSulai · 2019-01-29T14:19:55Z

@xstable
I have tested the app in Samsung S4, it is working as expected. Do you have a specific scenario where this is happening since I am not able to reproduce this.

Could you please share your mail id. So, that we can communicate in person in the below slack channel to solve this.

https://ibrahim-6ic2441.slack.com/messages/CFS1PQ3HQ

IbrahimSulai · 2019-01-30T13:16:24Z

@IbrahimSulai The Patch is my own one, I've created with patch-package. It contains the diff between default "react-native-video" and my changes.

My Device is: Xiaomi Mi A1 & Samsung S4

Maybe I've missed something, or have an Issue in my code, so here I've create a package of my changed source-code from android-explayer so that you can have a look inside.
android-exoplayer.tar.gz

I can able to reproduce the issue with your patch file. I debugged the issue, the player states are working exactly fine. But, there is a UI glitch with the play/pause button. I am working on it to find the root cause for the same, will get back with the solution ASAP.

…r to align with player state

IbrahimSulai · 2019-02-05T22:07:37Z

@cobarx @n1ru4l

I have fixed the issue observed in the test harness.

Changed the execution order of initializePlayerControl method in order to align with the player state. Since the createView is executed before the "setControls" props method gets called. so the values of the playerControl are not aligned with the player state values.

Could you please review and merge the same.

cobarx · 2019-02-11T02:19:58Z

Very nice, this is working wonderfully for me in the test harness. I'm merging now. There are going to be a lot of happy people using this!

Adding the controls exposes a lot of new functionality that you could develop further (if you have the time and interest). If you want to do another PR, it would be great to have onPause & onPlay events so that the app can be notified that the play/pause state changed due a click within the controls. It might also be good to implement some kind of auto-hide behavior so the controls disappear after a certain amount of time, configurable by a prop.

Keep up the good work!

FelipeSSantos1 · 2019-02-11T02:34:48Z

Thank you guys! I was wanting this merge!

IbrahimSulai · 2019-02-11T06:44:19Z

Very nice, this is working wonderfully for me in the test harness. I'm merging now. There are going to be a lot of happy people using this!

Adding the controls exposes a lot of new functionality that you could develop further (if you have the time and interest). If you want to do another PR, it would be great to have onPause & onPlay events so that the app can be notified that the play/pause state changed due a click within the controls. It might also be good to implement some kind of auto-hide behavior so the controls disappear after a certain amount of time, configurable by a prop.

Keep up the good work!

Thank you @cobarx and others in the community who supported for this feature to get merged.
Sure, I will be focusing on the other key features related to this.

AndriiUhryn · 2019-02-11T10:10:10Z

@IbrahimSulai Is there an ability to make video fullScreen on Android?

IbrahimSulai · 2019-02-11T13:10:47Z

@IbrahimSulai Is there an ability to make video fullScreen on Android?

Will add the full-screen feature in upcoming PR.

xstable · 2019-02-26T09:44:05Z

@cobarx
Isn't that wrong... now after you've merged @IbrahimSulai commit... and as we can activate video-controls by a property now ?

As you don't have to create your own controls, but you are "able to do".
BTW: Because react-native-video-player is depending on react-native-video ^2.0.0 I would remove the suggestion to use it in the docs.

xstable · 2019-02-28T07:33:59Z

Because I hardly needed the fullscreen-functionality, I forked and upgraded react-native-video-player so that it now support react-native-video 4.4.0. Feel free to give it a try.

But I still looking forward to @IbrahimSulai Solution to have the whole functionality inside of react-native-video. So you can take my solution as temporary workaround, till @IbrahimSulai is done with it.

shaunsantacruz · 2019-03-14T17:15:54Z

Thank you so much for adding controls! Would it be possible to make them more accessible for dpad/keyboard users? My app is being rejected from the play store due to this.

IbrahimSulai · 2019-03-15T05:55:27Z

Thank you so much for adding controls! Would it be possible to make them more accessible for dpad/keyboard users? My app is being rejected from the play store due to this.

Currently working on the full-screen functionality for the Android Exoplayer. Once completed, will check on this. Thanks

- controls TheWidlarzGroup/react-native-video#1414 - PictureInPicture TheWidlarzGroup/react-native-video#1325 - minLoadRetryCount TheWidlarzGroup/react-native-video@420d88d

datzun · 2019-05-01T21:01:42Z

Thank you so much for adding controls! Would it be possible to make them more accessible for dpad/keyboard users? My app is being rejected from the play store due to this.

Currently working on the full-screen functionality for the Android Exoplayer. Once completed, will check on this. Thanks

@IbrahimSulai thanks for adding control support. Any updates on fullscreen functionality?

- controls TheWidlarzGroup/react-native-video#1414 - PictureInPicture TheWidlarzGroup/react-native-video#1325 - minLoadRetryCount TheWidlarzGroup/react-native-video@420d88d

shmagdy · 2019-06-17T18:47:53Z

@IbrahimSulai
thanks for adding control support. Any updates on fullscreen functionality?

jonathangreco · 2019-07-03T08:10:59Z

@IbrahimSulai hey is the fullscreen functionality coming ? So much waiting about this one :)

IbrahimSulai · 2019-07-26T07:34:55Z

@jonathangreco
There is a limitation in the android native bridge to change the size of the view. So we can't directly implement the full-screen functionality.

I am planning to control the full-screen functionality in the react-native layer based on the platform. Will let you know once it's done. Thanks

jonathangreco · 2019-08-14T13:47:37Z

@IbrahimSulai Hi thx for those news, Iknow that the fullscreen is a very complicated aspect on react native for videos, because on iOS it does not fully work either. I really hope that you work will do the job for all cases.

Keep up the good work and hope this will be released this year :)

IbrahimSulai · 2019-08-17T07:34:40Z

@jonathangreco - Thanks for your support and encouragement.

I will add this feature ASAP.

IbrahimSulai · 2019-08-28T12:32:49Z

@jonathangreco @datzun @shaunsantacruz @sherif-magdy @xstable @AndriiUhryn @mgezkaya

Sorry for the delay. No more wait. Here is the full-screen functionality.

Opened a PR (#1730) for full-screen support in Android Exoplayer.

Support for displaying controls in Android Exoplayer (rebased from commit e0fd69e)

Ibrahim Sulaiman added 2 commits January 4, 2019 14:58

Support for controls in android exoplayer

4cc9a4d

Updated README.

8cffd5b

This was referenced Jan 4, 2019

Controls doesn't appear on Android #1278

Closed

No controls on Android exoplayer #1277

Closed

Video controls not show in android device but in ios it's working perfect. why? #1358

Closed

cobarx suggested changes Jan 16, 2019

View reviewed changes

README.md Outdated Show resolved Hide resolved

android-exoplayer/src/main/java/com/brentvatne/exoplayer/ReactExoplayerView.java Outdated Show resolved Hide resolved

android-exoplayer/src/main/java/com/brentvatne/exoplayer/ReactExoplayerView.java Outdated Show resolved Hide resolved

Resolved the review comments

e05c1c3

xstable mentioned this pull request Jan 25, 2019

Displaying controls on Android (play, pause, progress bar) #1404

Closed

Resolved the playercontrol UI issue and also handled the controls pro…

debc0cb

…p state

xstable mentioned this pull request Jan 25, 2019

Change react-native-video to a peer dependency with any version required FaridSafi/react-native-gifted-chat#1070

Closed

Used default playerControlView's API to show and hide controls

c156550

Fix for play and pause button UI issue

1430dc7

Changed the execution order of initializePlayerControl method in orde…

bd8aa99

…r to align with player state

cobarx added 2 commits February 10, 2019 18:06

Cleanup controls comment

c361b79

Code formatting cleanups for controls

4080349

cobarx approved these changes Feb 11, 2019

View reviewed changes

cobarx merged commit e0fd69e into TheWidlarzGroup:master Feb 11, 2019

xstable mentioned this pull request Feb 28, 2019

Feature request: True FullScreen mode for Android with ExoPlayer #1251

Closed

xstable mentioned this pull request Feb 28, 2019

this.player.presentFullscreenPlayer() doesn't work on android #534

Closed

keisnet mentioned this pull request Mar 5, 2019

Add iOS and Android basic DRM support #1445

Merged

retyui added a commit to retyui/flow-typed that referenced this pull request May 1, 2019

Update prop types

5008608

- controls TheWidlarzGroup/react-native-video#1414 - PictureInPicture TheWidlarzGroup/react-native-video#1325 - minLoadRetryCount TheWidlarzGroup/react-native-video@420d88d

retyui mentioned this pull request May 1, 2019

[react-native-video_v4.x.x] Update types flow-typed/flow-typed#3296

Merged

IbrahimSulai mentioned this pull request Aug 28, 2019

Added the full screen support in Android Exoplayer #1730

Merged

beauner69 pushed a commit to beauner69/react-native-video that referenced this pull request Oct 10, 2019

Merge pull request TheWidlarzGroup#1414 from IbrahimSulai/master

463cf49

Support for displaying controls in Android Exoplayer (rebased from commit e0fd69e)

Support for displaying controls in Android Exoplayer #1414

Support for displaying controls in Android Exoplayer #1414

Conversation

IbrahimSulai commented Jan 4, 2019

kcalmes commented Jan 8, 2019

IbrahimSulai commented Jan 8, 2019

IbrahimSulai commented Jan 14, 2019

cobarx left a comment

Choose a reason for hiding this comment

IbrahimSulai commented Jan 16, 2019

AndriiUhryn commented Jan 21, 2019

mgezkaya commented Jan 22, 2019 • edited Loading

FelipeSSantos1 commented Jan 23, 2019

cobarx commented Jan 23, 2019 • edited Loading

IbrahimSulai commented Jan 24, 2019

IbrahimSulai commented Jan 25, 2019

mgezkaya commented Jan 25, 2019

IbrahimSulai commented Jan 25, 2019

mgezkaya commented Jan 25, 2019

xstable commented Jan 28, 2019 • edited Loading

IbrahimSulai commented Jan 28, 2019 • edited Loading

xstable commented Jan 29, 2019 • edited Loading

IbrahimSulai commented Jan 29, 2019

IbrahimSulai commented Jan 30, 2019

IbrahimSulai commented Feb 5, 2019

cobarx commented Feb 11, 2019

FelipeSSantos1 commented Feb 11, 2019

IbrahimSulai commented Feb 11, 2019 • edited Loading

AndriiUhryn commented Feb 11, 2019

IbrahimSulai commented Feb 11, 2019

xstable commented Feb 26, 2019

xstable commented Feb 28, 2019

shaunsantacruz commented Mar 14, 2019

IbrahimSulai commented Mar 15, 2019 • edited Loading

datzun commented May 1, 2019

shmagdy commented Jun 17, 2019

jonathangreco commented Jul 3, 2019

IbrahimSulai commented Jul 26, 2019 • edited Loading

jonathangreco commented Aug 14, 2019

IbrahimSulai commented Aug 17, 2019

IbrahimSulai commented Aug 28, 2019

mgezkaya commented Jan 22, 2019 •

edited

Loading

cobarx commented Jan 23, 2019 •

edited

Loading

xstable commented Jan 28, 2019 •

edited

Loading

IbrahimSulai commented Jan 28, 2019 •

edited

Loading

xstable commented Jan 29, 2019 •

edited

Loading

IbrahimSulai commented Feb 11, 2019 •

edited

Loading

IbrahimSulai commented Mar 15, 2019 •

edited

Loading

IbrahimSulai commented Jul 26, 2019 •

edited

Loading