LunatiqueCoder/react-native-media-console

tvOS support

LunatiqueCoder opened this issue · 9 comments

LunatiqueCoder commented

@esegebart I've got good news!

I managed to play around with the source code and the tvOS here: https://github.com/criszz77/tvOSWithTypeScript

What I'm still fighting with? Seekbar and volume bar don't seem to work. But other than that, everything seems good so far.

LunatiqueCoder commented

@esegebart You can try yarn add react-native-media-console@next, it should better work for tvOS now, but it's still a lot to work on.

esegebart commented

@criszz77 Omgsh! You are amazing!!! I will try it out on my project on Monday! ❤️ How long have you been doing react native? And how did you learn to do it so well? I need to level up my react native skills!

LunatiqueCoder commented

@esegebart

Omgsh! You are amazing!!! I will try it out on my project on Monday! ❤️

Hey, thank you! I'm really passionate, but I don't feel I'm that good, there are much better people here on GitHub.

How long have you been doing react native? And how did you learn to do it so well?

I have been working for like 6-7 years now with different technologies, but when I came across React Native I fell in love instantly. The idea of building multi platform apps with React Native got my attention and since then I spend a lot of my spare time investigating it.

I need to level up my react native skills!

I can honestly say that I've learned the best from open source. And of course, I'm always happy to share the knowledge and help other enthusiasts, so feel free to give me a sign on any matter, not just the video player. I guess our time zones are pretty different, but I usually respond very fast.

... speaking of multi platform apps... I'm really interested in making this library work with tvOS, and I would love to learn more about the project you're working on and understand your requirements better.

So far I've got a few questions:

  • Do you need the volume bar? I believe you can control the volume from the Firestick/remote control, so you wouldn't need a volume bar (can be disabled with disableVolume prop).
  • Do you need to interact with the seekbar? You have the rewind/forward buttons and you can customize the time for them with rewindTime prop. Currently you can't interact with it at all, it's just visible and doing its job.
  • When the controls appear on the screen, I believe the play button should always be focused?
  • What other requirements or issues do you think we might have?

Other than that, I guess I'll wait for you to try it on Monday, and we'll see then what more comes up.

Have a nice weekend! ⭐️

esegebart commented

Amazing! I, too, fell in love with React Native and want to be really good at it so I will try and get into open source projects more (this one too!). I mean of course there is always someone better at a language - but I am just super impressed by you just taking a fork of something and making it your own! 🤯 And I haven't learned much about typescript either yet. I just migrated away from Expo about 6 months ago so it's been like drinking water out of a firehouse getting a bare react native project figured out LOL.

But I can let you know the requirements!

  1. I do not need volume. I am using the disable volume.
  2. I do not need Fullscreen which I use the disable Fullscreen prop also.
  3. I need the rewind/fast forward time (probably 15s would be good).
  4. There are two different streams this could be: an archived video which I feed the video player a uri and it plays or it could be a live video and that's where I would disable the seekbar and show a LIVE icon in the bottom of the screen, but would need to be able to pause it which I am sure would work the same.
  5. Yes the play button having preferred focus would be perfect!
  6. Being able to pop up the controls with a button press, interact with controls with remote, and autohide after 3-5 seconds would be great!

Play/pause, rewind/fast-forward, seekbar, time duration and time elapsed, and hide controls, are about all I need! :)

This would really be the first repo that I have seen that would be able to seamlessly interact with react-native-tvos as controls without having to custom build them. 😍

Super exciting!!!!

LunatiqueCoder commented

@esegebart You can now try yarn add react-native-media-console@next. I'll also test it better on a non tvOS project to be sure I didn't break anything for mobile only.

  • I do not need volume. I am using the disable volume.

  • I do not need Fullscreen which I use the disable Fullscreen prop also.

  • I need the rewind/fast forward time (probably 15s would be good).

    • Customizable with rewindTime

  • There are two different streams this could be: an archived video which I feed the video player a uri and it plays or it could be a live video and that's where I would disable the seekbar and show a LIVE icon in the bottom of the screen, but would need to be able to pause it which I am sure would work the same.

    • Yep, streaming video is part of react-native-video library, while you can use disableSeekbar and show your LIVE icon with absolute positioning. Of course, the playPause functionality I believe you are already familiar with it.

  • Yes the play button having preferred focus would be perfect!

  • Being able to pop up the controls with a button press, interact with controls with remote, and autohide after 3-5 seconds would be great!

    • Controls will now be shown on any TV handler event and the playPause button will be focused. There's the controlTimeoutDelay prop to hide controls after X amount of time in milliseconds (default to 15 seconds).
esegebart commented

@criszz77 I am speechless! I wish I knew how to just whip something up like that! Soooo cool! Can't wait to try it tomorrow! :)

esegebart commented

@criszz77 You are literally a genius. Amazing how quickly you were able to whip this up! Confirmed tested AND working on Firestick TV app. Timeout delay, rewind, fast forward, play/pause, all working. Will be testing on Android TV and tvOS in the near future!!! THANK YOU!!!

If you have some issues I could try and tinker on, I would love to do so or help with documentation! I noticed this uses typescript - what is a good resource to learn more about typescript?

LunatiqueCoder commented

@esegebart

You are literally a genius. Amazing how quickly you were able to whip this up! Confirmed tested AND working on Firestick TV app. Timeout delay, rewind, fast forward, play/pause, all working. Will be testing on Android TV and tvOS in the near future!!! THANK YOU!!!

Thank you! I really enjoyed playing around with react-native-tvOS and I think that the project you're working on is very interesting. On Android TV Simulator seems to be working fine. It wasn't that hard actually! You'll see when I open the PR, I'll add you as a reviewer.

If you have some issues I could try and tinker on, I would love to do so or help with documentation!

Well, again, if you have some suggestions or requirements, I can guide you to do the changes yourself. For instance, I'm thinking that you should be able to pass your own icons/images for the controls. Even styles and props? But, if I don't need them - I don't feel like doing them :(

I noticed this uses typescript - what is a good resource to learn more about typescript?

Well,I will never go back to JS. TypeScript is just a super set of JavaScript, it's basically JavaScript behind the scenes. TypeScript adds type checking. , for example if you declare a const as a string, assigning a number will throw you an error in TypeScript, but not in JavaScript.

Depending on how you like to learn, there are multiple resources.

I also have a repository where I keep all the interesting links that I don't want to lose: https://github.com/criszz77/react-js-links

And some videos from youtube to start:
Short Intro: https://www.youtube.com/watch?v=ahCwqrYpIuM
Deep Dive: https://www.youtube.com/watch?v=BwuLxPH8IDs

I will create a PR and a release today or tomorrow. Have fun!

esegebart commented

Woohoo!!! I think this pretty much covers all of the basics and the icons look really nice and accessible. I prefer the rewind fast forward buttons, but I wonder if people will try to use the seekBar to rewind and fast forward like you are able to on Netflix? This is definitely not a requirement - but could be something I can play around with for fun!

And thank you for the resources! Definitely excited to learn more about typescript. :)

I appreciate your repo! Thank you! I will be blasting it all over the internet 💯