LunatiqueCoder / react-native-media-console

A React Native video player. Built with TypeScript ❤️
MIT License
184 stars 28 forks source link

Seekbar controls feature #59

Closed esegebart closed 11 months ago

esegebart commented 1 year ago

[+] REWIND ONLY [+] This will calculate the proper percentages of the video to skip at different intervals: 1st press is default rewind time, 2nd press is 1%, 3rd press is 3%, and 4th press is 5%.

LunatiqueCoder commented 1 year ago

Hey @esegebart !

I'm looking into it right now and I think we will need to replace TouchableHighlight the Pressable API from React Native. I suggest that if you keep the rewind button pressed, the rewinding time should increase. I believe this requires quite some work in order to pull it off and try not to introduce breaking changes. Perhaps we won't need useTVEventHandler at all?

I'll try to adjust this PR or open a new one, but I can't promise we'll finish it this weekend.

LunatiqueCoder commented 1 year ago

@esegebart I had even a better look, I was almost done finishing it, but I think we have a issue with the longSelect event from Android.

What I tried implementing is the following:

  1. I made the <VideoPlayer /> accept the buttons props on the controls, I was interested specifically in being able to pass an onPressOut prop to the buttons.
  2. I needed the onPressOut to clear an interval that should be triggered when a longSelect event would be detected.
  3. At an interval of 300ms (or whatever I need) I would increase the rewindTime little by little.
  4. Everything almost great, the only problem is that the longSelect event is triggered AFTER the onPressOut.

According to the Pressable API, the longSelect/onLongPress should be fired while you keep pressing the button, and onPressOut should be triggered after you release the button.

I believe we need to provide a reproduction repository to the react-native-tvos maintainers (I'm already working on one here) and only then we can finish this issue since we heavily rely on this (I believe this can be easily implemented on mobile, but not on tvOS).

I'm so sorry if you needed this very fast. This actually is an exciting feature and I do believe it's also useful for mobile.

Thank you for your time and effort for this!

esegebart commented 1 year ago

@esegebart Wow that's amazing! If we don't need TV event handler, that's even better and would be super useful for mobile and TV. :) Woohoo! I have other things I can work on while we figure this out too so no worries on the time, we can't help it if it takes a little time. Is there anything I can try and do to help with the reproduction repo or anything? :) I will take a look at everything tomorrow!

LunatiqueCoder commented 1 year ago

@esegebart Well, that's the thing 😥, I don't want to ruin your excitement but we will definitely need the TV event handler. The problem is how the TV event handler triggers the longSelect. It only tells you that it was a long select AFTER you finish the press.

So basically, you can have a button pressed for 5 minutes, you will only know it was a long press AFTER the user releases the button and that prevents you from actually doing something WHILE the user is pressing the button for a longer time.

esegebart commented 1 year ago

@LunatiqueCoder Good news! Doug from tvOS repo said this:

The next point release (0.69.6-4) will have this fix that makes longSelect, longLeft, etc., behave correctly and begin firing events while the button is still pressed, instead of waiting for the button to be released. https://github.com/react-native-tvos/react-native-tvos/pull/468

Woohoo!!!

LunatiqueCoder commented 1 year ago

@esegebart That’s actually very good news! Looking forward to implement this