Skip to content
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

Add Seeking With Slider For tvOS #49

Open
esegebart opened this issue Feb 2, 2023 · 57 comments
Open

Add Seeking With Slider For tvOS #49

esegebart opened this issue Feb 2, 2023 · 57 comments
Labels
enhancement New feature or request

Comments

@esegebart
Copy link
Contributor

esegebart commented Feb 2, 2023

Hello!

I wanted to add a suggestion to be able to seek using the slider bar with tvOS and remote. I didn't see it in the latest releases.
Could this be added in the future?

*Also - can you tell me how to grab this project and how to PR? I would like to try and do the seekbar thing, not sure if I can figure it out, but I can try!

Thank you!

@LunatiqueCoder
Copy link
Owner

LunatiqueCoder commented Feb 2, 2023

Hello @esegebart

🙈 I'm so sorry but I didn't really have time to work on any tvOS support even though I promised so 🥺

Here are are the steps I do to contribute to the project:

  1. Fork the project react-native-media-console. Your fork will be called esegebart/react-native-media-console.
  2. Run yarn in esegebart/react-native-media-console to install the packages.
  3. Make your changes.

In order to test them:

  1. Run yarn prepare in esegebart/react-native-media-console to build the code. Since it's built with TypeScript, plain JS projects also have to be able understand them.

  2. Delete node_modules from esegebart/react-native-media-console, else you will end up with two instances of React and React Native and your project will break. You can use rm -rf node_modules for that.

  3. Copy the path of esegebart/react-native-media-console, and run yarn [path to esegebart/react-native-media-console] in your project to install it. Basically, at this step, you replace my original react-native-media-console with your fork called esegebart/react-native-media-console which contains your changes. You can do this either in your tvOS project at work, or in any repo you want to test your esegebart/react-native-media-console

  4. yarn start --reset-cache and refresh your app! (I don't think you need to rebuild your app since it only contains JS code.)

Please let me know if you stumble on anything so I can improve those instructions!

Thank you very much and once again I am so sorry!

@LunatiqueCoder LunatiqueCoder added the enhancement New feature or request label Feb 2, 2023
@poojan010
Copy link

Hey @criszz77 can you add this contributing info in Readme file

@esegebart
Copy link
Contributor Author

esegebart commented Feb 6, 2023

@criszz77 It is totally okay! This will be a good chance for me to contribute! So do I need to have a separate example project to see the changes run? And that is the yarn path-to-fork? Ok I think I understand now.

@LunatiqueCoder
Copy link
Owner

@esegebart I updated my original post, I hope it's better now and didn't add to any confusion. Let me know how it goes! I will answer you ASAP.

@esegebart
Copy link
Contributor Author

esegebart commented Feb 6, 2023

@criszz77 Thank you! That makes more sense now! Going to try some changes and see how it goes! So these are a couple things I was thinking about:

  1. The seeking forward by 15 seconds maybe be good for shorter videos, but not for longer videos. We have 12 hour broadcasts and their starting spot may be 8 hours into it and will be hard to get to with the 15 seconds or even 5 or 10 minutes, then they lose the granular control to get to their starting spot. So I want to try and do a progressive rewind / fast forward where if they navigate to the seekbar - and hold the right/left arrow it will rw/ff automatically start skipping forward at 2x, 4x - or if they press it once it will do the 15 seconds. Haven't quite figures out exactly what I want it to look like but something maybe similar to other streaming apps like YouTube where the focus is automatically on the seekbar when the controls pops up - and leave the play button for play/pause. Youtube animates the play and pause button when you press the enter button so its there but just hidden until you hit the enter button to play/pause.
  2. Instead of the gradient background, have the full screen the dark gray see through color - on a lighter background the play and pause buttons are hard to see when they are in focus since they dim instead of highlight when they are focused.
  3. Invert the color focus of the play/pause and control buttons - when it goes into focus have it be opaque white and when out of focus do the half opacity.

If these things sound ok to you, I will be happy to try working on them. :)

@LunatiqueCoder
Copy link
Owner

LunatiqueCoder commented Feb 6, 2023

@esegebart

  1. That actually sounds good! Any tvOS support is welcomed, unfortunately I don't have the time to invest too much time in this, but I can give a helping hand if you have something in mind and actually manage to come up with a POC or something. Funny but I really don't use TV at all? So I also don't have a great idea of how user experience should be.

  2. There was also this PR: Add Overlay component #43. It aimed to solve the issue of buttons on white background. Should be available with the newest version. Isn't this good enough? Do you have a better suggestion?

  3. Hmm, I noticed a bunch of work at react-native-tvOS regarding the focus but I'm still not familiar with tvOS environment

To conclude, we also need to make it work with or without tvOS, so importing useTVEventHandler in plain react-native projects might crash the app. I guess we can look into it to improve it once we have something working. Here's how I implemented some platform specific logic:

https://github.com/criszz77/react-native-media-console/blob/master/src/OSSupport/PlatformSupport.tsx

@esegebart
Copy link
Contributor Author

esegebart commented Feb 6, 2023 via email

@LunatiqueCoder
Copy link
Owner

Of course, don't worry. Give it a try, see what you're able to do and if you got something working I'll step in and help you finish.

Oh POC just stands for Proof Of Concept :D

@esegebart
Copy link
Contributor Author

Okay, great! I will see what I can do. :)

@esegebart
Copy link
Contributor Author

esegebart commented Feb 7, 2023 via email

@esegebart
Copy link
Contributor Author

esegebart commented Feb 9, 2023

Hello @esegebart

🙈 I'm so sorry but I didn't really have time to work on any tvOS support even though I promised so 🥺

Here are are the steps I do to contribute to the project:

  1. Fork the project react-native-media-console. Your fork will be called esegebart/react-native-media-console.
  2. Run yarn in esegebart/react-native-media-console to install the packages.
  3. Make your changes.

In order to test them:

  1. Run yarn prepare in esegebart/react-native-media-console to build the code. Since it's built with TypeScript, plain JS projects also have to be able understand them.
  2. Delete node_modules from esegebart/react-native-media-console, else you will end up with two instances of React and React Native and your project will break. You can use rm -rf node_modules for that.
  3. Copy the path of esegebart/react-native-media-console, and run yarn add [path to esegebart/react-native-media-console] in your project to install it. Basically, at this step, you replace my original react-native-media-console with your fork called esegebart/react-native-media-console which contains your changes. You can do this either in your tvOS project at work, or in any repo you want to test your esegebart/react-native-media-console
  4. yarn start --reset-cache and refresh your app! (I don't think you need to rebuild your app since it only contains JS code.)

Please let me know if you stumble on anything so I can improve those instructions!

Thank you very much and once again I am so sorry!

@criszz77 Okay so I followed these steps - ran yarn prepare in react-native-media-console, deleted the node_modules from the react-native-media-console project and then ran yarn [path-to-esegebart/react-native-media-console] on my local machine. And I get an error that the project is not found. I tried the absolute path and the relative path. Is there something I am doing wrong? I do use yarn.

@LunatiqueCoder
Copy link
Owner

LunatiqueCoder commented Feb 9, 2023

I'm sorry, I guess it's yarn add [path to the esegebart/react-native-media-console] in the project that you want to test the new changes.

@esegebart
Copy link
Contributor Author

Okay perfect! :) I will try that now.

@esegebart
Copy link
Contributor Author

@criszz77 Ahh! I test my first changes! This is soooo exciting!

@LunatiqueCoder
Copy link
Owner

@esegebart So happy to hear that! Let me know if I can help you with anything else! Hope you'll have fun

@esegebart
Copy link
Contributor Author

esegebart commented Feb 9, 2023

@criszz77 Okay I have the small change for the opacity being darker on the overlay. I sent over a pull request to you.

@esegebart
Copy link
Contributor Author

esegebart commented Feb 24, 2023

@criszz77 I have the idea sorted out kind of for this feature. The only thing I can't really figure out is how to get it to continuously skip at that seeking interval until the user either pushes the button again to go faster, or pushes play to stop where they are. And also still need to update the button to have 2x, 3x, 4x on the arrow button.

Right now I have it skipping at the proper intervals.. for example, I press it once and it does the default rewindTime. I push it twice and it calculates a percentage of the video (1%) and subtracts from current time. 3rd press is 3% of the video. 4th press is 5% of the video.

Could you maybe check it out and tell me what I might need to do to get it to repeat the skipping interval until either the user presses play or hits the button again and tell me which way to go?

NOTE: This only works for rewind time button currently, so you have move the slider to the middle and then start pushing the rewind button. I added in some console logs to show the time and the calculations too to see what it is doing *

@LunatiqueCoder
Copy link
Owner

@esegebart Yeah, sure, I was planning to spend some time on this module this weekend and/or the next one. Have you got a fork prepared?

@esegebart
Copy link
Contributor Author

esegebart commented Feb 24, 2023

@criszz77 I have it committed to my branch! Do I have to do anything special? It's also not cleaned up yet, just trying to get it working

@LunatiqueCoder
Copy link
Owner

@esegebart Open a pull request. Thank you so much for your time! I really appreciate it!

@esegebart
Copy link
Contributor Author

@criszz77 Woohoo! :) Yes absolutely, this was a very interesting problem and I thank you for letting me be a part of it!

@esegebart
Copy link
Contributor Author

@criszz77 By the way, the updated react native tvos has long presses for the arrow keys but I couldn't figure out how to get them to register. I updated to the new version that has them - but just another option to look at if you need it. I think the button presses will be just fine. :)

@LunatiqueCoder
Copy link
Owner

LunatiqueCoder commented Feb 24, 2023

@esegebart Ohh, all right. I'll have to catch up with the tvOS environment, as I don't have any experience, but sure it will be fun! Anything else I should know before you go off on the weekend?

@esegebart
Copy link
Contributor Author

esegebart commented Feb 24, 2023

@criszz77 All I'm trying to accomplish is for them to push the button one time to skip 15 sec, push it twice and it will keep skipping at 1% of video length, push a third time and it will skip 3%, push it 4 times and it skips 5%. When they push it a 5th time it just goes back to playing. I thought maybe having 2x, 3x and 4x on the buttons will be a nice indicator of what's happening. And if they push play it will stop the skipping.

Here's the link to where I asked Doug about the long presses:

react-native-tvos/react-native-tvos#409

And then here is where it was added:

react-native-tvos/react-native-tvos@1f1f338

Pressing and holding right or left arrow key on the rewind/FF button for it to keep skipping would be great if it progressively speeds up after like 2sec of it being held it kicks into 2x after 5sec it kicks into 3x and 7sec kicks into 4x speed. That would be more familiar for user, but the button pressing is also good.

I just don't think there is a way to focus the seekbar with tvos so using the rewind and fast forward buttons is good. But you are much better at React Native than I so there may be is a way but I couldn't solve it 😎

Thank you so much!!!

@esegebart
Copy link
Contributor Author

@criszz77 Hi! Just wondering if you had a chance to look at this and can maybe give me some direction to continue working on it, or if you had worked on it yourself? :)

@LunatiqueCoder
Copy link
Owner

Hey @esegebart

Is this linked to #59 ?

I am so sorry but I was so busy lately 🙈 I was hoping I could take a look this weekend, but the odds are against me. 🥺

@esegebart
Copy link
Contributor Author

@criszz77 Yes, linked to #59 - and okay, I understand. :) Was just asking, I will see if I can keep picking away at it. I just got stuck trying to figure out how to continuously repeat the same interval until user does something else. I will research some more.

@esegebart
Copy link
Contributor Author

@LunatiqueCoder It is hereeeeee - https://www.npmjs.com/package/react-native-tvos/v/0.69.8-0rc3

I can't wait to try and see if it does what I expect it to! :)

@LunatiqueCoder
Copy link
Owner

Hey @esegebart

I just tried it out and the problems seems to be the same :( I will try again, maybe it's an issue on my side.

@esegebart
Copy link
Contributor Author

@LunatiqueCoder Oh no, that is a bummer to hear.

@esegebart
Copy link
Contributor Author

@LunatiqueCoder Did you find out if it is still on the react native tvos side?

@LunatiqueCoder
Copy link
Owner

Hey @esegebart, I'm sorry I'm moving so hard but I also got involved with other projects 🙈

I'll try again this weekend hopefully. :) 🙏

@esegebart
Copy link
Contributor Author

@LunatiqueCoder Okay! I was just checking in with you, I appreciate all of your help with this. I know you are a busy person!! :)

@esegebart
Copy link
Contributor Author

@LunatiqueCoder I saw this comment a few days ago

react-native-tvos/react-native-tvos#409 (comment)

Saying it was continuing to spawn the same event and didn't know when the key was being released.

And Doug said this in the comment below him:
you may want to turn on ReactFeatureFlags.enableKeyDownEvents. This will send a separate key up and key down event for each normal button press, and should send a key up at the end of the long press.

could this be what we needed??

@LunatiqueCoder
Copy link
Owner

LunatiqueCoder commented Apr 10, 2023

Hey @esegebart

That could be something :)

I'm finally finishing with one of my projects so I will have more time starting this week. I really hope to release a new version this weekend if everything goes well. 🙏 Thanks for the patience!

@esegebart
Copy link
Contributor Author

@LunatiqueCoder

So exciting! I just wanted to try and stay involved and keep track of what was happening with the tvOS repo. :) Congrats on your project! I look forward to seeing if this helps for the slider! ❤️

@LunatiqueCoder
Copy link
Owner

@esegebart I had a look and indeed, it gets better, but it's still not perfect. We still need to handle onPressOut somehow:

Source: https://reactnative.dev/docs/pressable#how-it-works
image

However, with a few workarounds, I think you can achieve this without changing react-native-media-console, at least too much. Unfortunately I don't have the time to go that deep, but I'll try again whenever I have time.

@esegebart
Copy link
Contributor Author

@LunatiqueCoder Then that's what I will have to do! You are so awesome 😎 And thank you so much for the diagram and resources. You have been so great to work with and I cannot thank you enough for teaching me open source! I'll be back to contribute more!

@esegebart
Copy link
Contributor Author

@LunatiqueCoder So the longRight is now firing before the button is released, I am circling back to this and am going to finish it up. I just wanted to ask you again so I can refresh my memory, will the onPressOut handling code be inside react-native-media-console?

I am thinking about longRight/longLeft - I will start seeking at 1x, after 2 second increase to 2x, after 2 seconds increase to 4x. And then I handle the onPressOut to resume playing. Is that where I would put this code is in PlayPause? Since I will be using the rewind and fast forward buttons? Thanks!

@LunatiqueCoder
Copy link
Owner

Hello @esegebart

Yeah I can see they improved it. 🤔 I'll take a look sometime this weekend and come back with a response.

@esegebart
Copy link
Contributor Author

@esegebart Ok! I am going to keep working on it in the meantime. I am using the 0.68.8-0 and tested the longRight and it fires promptly, and not after the button is released! Woohoo!

@esegebart
Copy link
Contributor Author

esegebart commented Jul 31, 2023

@LunatiqueCoder OMGSH I JUST ABOUT HAVE IT. I am skipping forward when the right arrow is pressed, it updates the current time, and now I just need it to stop at the spot when I push play again bc it is currently going back to the original spot.

EDIT: I GOT IT!!!!! It is skipping forward in progressive speed with the button presses! :) :)

@LunatiqueCoder
Copy link
Owner

@esegebart Really? I'm so happy for you haha! Did you make any changes to react-native-media-console, or all of the logic can live outside of it?

@esegebart
Copy link
Contributor Author

esegebart commented Jul 31, 2023

@LunatiqueCoder I wrote the logic inside react-native-media-console VideoPlayer because I couldn't figure out how to get the remote events to pick up outside of it and interacting with the components was easier. I didn't have to change any of your code in the components to make it work except for what happens when onPressRewind is pressed- the logic is all separate to what happening in VideoPlayer. I might actually change that part so if its tvOS it calls my function otherwise do the logic you had and my logic can all live in the useEffect I am using for the pressCount. Not sure quite yet how I wanna do that but I just got it working and am going to do some refactoring and cleaning it up. I can show you if you would like and you can diff it to see what is different. :)

@LunatiqueCoder
Copy link
Owner

@esegebart Yeah I would like to see that. I think that we can pass props to each button if you want by changing the project so you would just pass onPressRewind while your tvOS logic lives out of the react-native-media-console.

@esegebart
Copy link
Contributor Author

esegebart commented Aug 1, 2023 via email

@esegebart
Copy link
Contributor Author

esegebart commented Aug 1, 2023

@LunatiqueCoder OKAY sooo I had another great idea! I saw you have a prop to disable seek bar controls. Do you think I could read the remote events on my video player end and add my own slider that pops open when the overlay pops open? Idk just spitballing here as a plan B.
Something like :

import React, { useState, useEffect, useRef } from 'react';
import { View, TouchableOpacity } from 'react-native';
import Video from 'react-native-video';
import Slider from '@react-native-community/slider';
import { useTVEventHandler } from "react-native-tvos";

const VideoPlayer = () => {
  const [duration, setDuration] = useState(0.0);
  const [currentTime, setCurrentTime] = useState(0.0);
  const [isPaused, setIsPaused] = useState(false);
  const videoPlayer = useRef(null);

  const tvEventHandler = useTVEventHandler((evt) => {
    if (evt.eventType === 'right') {
      setCurrentTime(currentTime + 5);
      videoPlayer.current.seek(currentTime);
    }
    if (evt.eventType === 'left') {
      setCurrentTime(currentTime - 5);
      videoPlayer.current.seek(currentTime);
    }
  });

  const onLoad = (data) => {
    setDuration(data.duration);
  };

  const onProgress = (data) => {
    setCurrentTime(data.currentTime);
  };

  return (
    <View>
      <MediaPlayer
        ref={videoPlayer}
        source={{uri: 'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4'}}
        style={{height: 200, width: 300}}
        paused={isPaused}
        onLoad={onLoad}
        onProgress={onProgress}
        repeat={true}
        ...etc
      />

      <TouchableOpacity activeOpacity={1} onPress={() => setIsPaused(!isPaused)}>
        <Slider
          style={{width: 300, height: 40}}
          minimumValue={0}
          maximumValue={duration}
          value={currentTime}
          onValueChange={(value) => {
            setCurrentTime(value);
            videoPlayer.current.seek(value);
          }}
          minimumTrackTintColor="#FFFFFF"
          maximumTrackTintColor="#000000"
        />
      </TouchableOpacity>
    </View>
  );
};

export default VideoPlayer;

@LunatiqueCoder
Copy link
Owner

I believe you shouldnbe able to do it, yes.

@esegebart
Copy link
Contributor Author

@LunatiqueCoder Nice, okay. Well I am pretty happy with how things look with what I've been working on. I will get with you tomorrow and should have something ready then. :) Thanks Ovidiu!

@LunatiqueCoder
Copy link
Owner

Oh don’t worry, take your time. No pressure, this is open source 👌

@esegebart
Copy link
Contributor Author

@LunatiqueCoder Okay, I pushed my changes to my react-native-media-console repo under the seekbar-controls-feature branch. It's not pretty or cleaned up yet, but it works, :D. It continuously skips forward and continuously skips backwards up to 4x speed, until play/pause is pressed to stop it. You will see the skip time increases each time its pressed. If its pushed a 5th time it will resume playing as well. Let me know what you think. Can the use effects and logic live outside the video player on my end, could this be of benefit to anyone, or can I use the controls like this out of my forked repo? I would like to add like 2x, 3x, 4x icons to show that the speed increases as they press. Anywho, I am pretty excited about this! :)

@esegebart
Copy link
Contributor Author

esegebart commented Aug 8, 2023

@LunatiqueCoder Scratch that - I made it even better. I added skip buttons in addition to rewind / fastforward so one can skip only 15 seconds like you previously had it but using diff icons and then the rewind fast forward icons move the seek bar continously. It is pushed to my branch so check it out when you have time! And this worked on Android too so this could def benefit everyone! :) Here is a clip, let me know what you think!!! 😄

screen-capture.6.webm

@esegebart
Copy link
Contributor Author

esegebart commented Aug 8, 2023

@LunatiqueCoder I forgot to add white to the icons and remove an error I had in the local repo! I just pushed those changes, but I just want to pull request the last commit I just did. Is that possible?

@esegebart
Copy link
Contributor Author

@LunatiqueCoder I think I might have been looking at an old one from February ! Lol.

@LunatiqueCoder
Copy link
Owner

@esegebart I believe if you are familiar with rebasing, yes, that should be possible. But it can be tricky if it's the first time. I can do it for you, but here are some relevant links:

https://www.w3docs.com/snippets/git/how-to-combine-multiple-commits-into-one-with-3-steps.html
https://stackoverflow.com/questions/45548100/how-to-start-typing-when-entering-vim-during-git-rebase

@esegebart
Copy link
Contributor Author

@LunatiqueCoder Thanks! I actually think I was mistaken and looking at an old pull request. I am closed that one and am sending over a new one so you can test out my new stuff. :)

@esegebart
Copy link
Contributor Author

esegebart commented Aug 8, 2023

@LunatiqueCoder Woohoo, I was also seeing the commits in reverse order so I thought I was missing my commits. Nope! Just me, looking at it wrong 🤦 😆 I made a new pull request so phew! What a good day :) Excited to hear your thoughts. The white on the icons is fixed now.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
Status: Todo
Development

No branches or pull requests

3 participants