Slider working incorrect when rotate View!!!

[dungle27]

Hello!
Currently I have issue:
when rotate parent View (Video & MediaControls) use transform: [{ rotate: '90deg' }]
Slider working incorrect...
please help me fix this problem!

====================
<View style={isFullScreen ? styles.video_player : {}}>
<Video
onEnd={onEnd}
onLoad={onLoad}
onLoadStart={onLoadStart}
onProgress={onProgress}
paused={paused}
ref={ref => (videoRef.current = ref)}
resizeMode="contain"
onFullScreen={isFullScreen}
source={{ uri: mainUrl }}
repeat={true}
style={isFullScreen ? styles.video_land : styles.video_poirt}

                                    />
                                    <MediaControls
                                        isFullScreen={isFullScreen}
                                        duration={duration}
                                        isLoading={isLoading}
                                        mainColor="black"
                                        onFullScreen={noop}
                                        onPaused={onPaused}
                                        onReplay={onReplay}
                                        onSeek={onSeek}
                                        onSeeking={onSeeking}
                                        playerState={playerState}
                                        progress={currentTime}
                                    >
                                   
                                    </MediaControls>

                                </View>

==========================
const styles = {
video_player: { width: heightDevice - 2 * HEIGHT_STATUSBAR, height: widthDevice, transform: [{ rotate: '-90deg' }] },
video_poirt: { width: widthDevice - 6, height: (isTab ? 360 : 280) },
video_land: { width: heightDevice - 2 * HEIGHT_STATUSBAR, height: widthDevice }
}

[Charlie]

could you give me more details? Working incorrectly is pretty vague. What is the behavior that you see? Any video / image to follow up?

[dungle27]

Thanks to reply!
In image 1:slider working perfect and smooth but when I click fullVideo button it will render a screen (please refer image 2)
In Image 2, when I drag slider then slider working incorrect. It can't drag smooth.
Code in comment above...please help me fix this problem. Is it relate vertical slider??

==============

[Charlie]

Could you give me more details? From the pictures, I can see it renders correctly. what is failing? Is it slow?

Also, in which OS is working differently? iOS, Android, or both?

[dungle27]

yes, render view is correct but when drag slider it not smooth
Sometime, I dragged the slider to the left but it moved to the right.
I tested on android.
You can try it with my code.

[Charlie]

@dungle27, please notice that this library is just a UI overlay on top of any player. That means that I don't control how the controls behave, that's on your end. I don't handle any video player state, I just got the props based on what the events that you use.

I added more cases in the example project (PR -> #32) that may help you to debug your case.

Eg, in this issue your mention that the controls don't loop. If you enable the repeat option, that means you don't need the state ENDED, as you will never reach it. Based on that, I just removed that line in the onEnd event.

About the rotating issue, what you may do instead of rotating the components by yourself, you might change the orientation of the device. In the past I used https://github.com/yamill/react-native-orientation to change to landscape when the user taps on the fullscreen button.