We'll need to call it inside of our handleMainButtonTouch, otherwise when if we don't, when we press this, we still pressed it, and it still hid. Now, we need to go add in when we interact with anything other than the video itself, we'll need to call the triggerShowHide function. However, when we press on the video and interact with it, they pop up and then disappear in 1,500 milliseconds. Now, when we refresh, we can see that our controls are gone. We can apply that to our wrapping view, which is wrapped around our video as well as our controls. If we look, we've already specified a video container style with overflow hidden.

However, it is not hiding, because we need to control the overflow hidden on our video container. Now, if we refresh, we can see that we've paused the video, and it hides. We'll then pass in the controlHideStyles, so we can use an array to specify multiple styles on a particular view. We'll say animated here, and then also animated right here. We'll now need to go switch our ntrols over to use an animated view so that we can use our animations. We'll just pass in our interpolated controls interpolated. In our case, it'll be a translate Y, which will translate up and down. We'll then set up our const controlHideStyle, and set up our transform, which is an array of transforms. It will start 48 pixels translated away, and then once it animates to 1, it will be 0, so it will be visible. The first thing we'll do is say const interpolatedControls is equal to, which takes an object configuration of an input range, which we'll say zero to one.

Now, we'll need to set up our interpolation and our style so that this can animate out of the way. It will never hide until we stop interacting with the video. If we continue to interact with the video, this will continually just be cleared out. That means that this timeout will not be called if we interact or if this function is called again. Then we'll also have to call clearTimeout, this.hideTimeout. We will set our setTimeout duration to 1,500 seconds of not being interacted with. They'll be hidden for the duration of 300 milliseconds, which we then also have to call start on this. Then we will animate them away, so animated.timing, this.animated, to value zero. Then we'll say this.hideTimeout is equal to setTimeout, which will take a function. This means that every time the video is interacted with, we will quickly animate the controls to the value of one in 100 milliseconds. We'll first say animated.timing, this.animated to value of one for the duration of 100 milliseconds. Our handleVideoPress will just call iggerShowAndHide. One we'll call triggerShowAndHide, and the other will be our handleVideoPress. However, because there are going to be other times where we want to continue showing the controls, like when play is pressed or pause is pressed, we will separate this into two functions. Now, we'll go create our handleVideoPress function. We'll need to know when the video is interacted with, so in our render function, we will wrap our video with a touchable without feedback, and on press, we'll say this.handleVideoPress. I'll first set up animated is equal to a new animated value, and we'll set it to zero. There may be times where you want the controls to show and hide depending on whether or not the video has been interacted with.

Fileloupe hide video controls