Seekbar Does Not Show On Bottom of Video Screen

[esegebart]

I got the media controls to appear on my video and when I use the Android TV emulator, it has the seekbar. When I load it onto an Android phone, the seekbar sits below the time/duration and I think it is off of the screen.

Is there a way to control the size/height of the media controls layout so the seekbar shows up on the screen?

Here you can see the time but no seekbar below it.

Here you can see the Android TV Emulator has a seek bar below the time which is why I think it is there on the phone, but just off the screen.

Also, if I add the prop "showHours", it will add a little "a" in the current time running.

[esegebart]

P.S. I will make a separate thing for the showHours thing.

[LunatiqueCoder]

I'm so excited to see it on a TV! Nice!

I think if you make the container height something like 90% might work or maybe some padding/margin? Currently you can't pass styles or custom icons for the controls (but should be in plan) 🤔

[esegebart]

@criszz77 Doesn't it look amazing?! Your React Native is so advanced, I am looking at the code in media console like WOW. Good work.

I did try the container height! I might try it on the parent container.

I am sad to say I have no way of accessing the media console on TV right now. I played the video on my firestick and I can't get the screen to pop up by pushing Enter or up or any other button. I am sooooo sad because this would be perfect.

[LunatiqueCoder]

Thank you! I appreciate it!

Hmm, don't be sad, I'm sure we can make it work. I'll want to read a bit about react native tvOS as I'm not familiar with it, I only know that it's possible haha.

But I believe we can add something like useTVEventHandler internally.

[esegebart]

@criszz77 Okay! Yes it will need a way to pop the controls up, focus on each button on the controls to use it, like netflix has - the onFocus and onPress are modified in react-native-tvos to be able to receive the remote presses.

https://github.com/react-native-tvos/react-native-tvos

Here is the repo to it! :)

[LunatiqueCoder]

@esegebart Ok, I'm running it on android TV and I can reproduce it as well. I already have a clue of what's wrong, but I can't promise it will be fixed fast... :( Probably over the weekend I will have more time to look into it.

[esegebart]

Totally okay! :) I am glad you were able to reproduce. Thank you!!!

[esegebart]

@criszz77 Update on the seekbar - it definitely shows up on Firestick TV app. Just not on android mobile device! :)

[LunatiqueCoder]

All right, well, probably some platform specific styling can do the trick? For fullscreen mode, I always had to do different things for Android to make it work.

[esegebart]

@criszz77 Sounds good! I will tinker around with that and if the solution looks good maybe it can be added to next release!

Yes Android always wants to be a rebel 🤦‍♀️

[LunatiqueCoder]

@esegebart I moved this to discussions, as I don’t think there’s an issue with the library. Maybe we can sort it out here.

How do you handle full screen?

[esegebart]

@criszz77 This was resolved. I used Dimensions to get the window height and width and that sent it off the screen. I changed it to use the screen height and width and now the seekBar is on the screen as expected.

const HEIGHT = Dimensions.get('screen').height;
const WIDTH = Dimensions.get('screen').width;