TheWidlarzGroup / react-native-video

A <Video /> component for react-native
https://thewidlarzgroup.github.io/react-native-video/
MIT License
7.19k stars 2.9k forks source link

In full screen mode the video is cut of . How to solved it? please help me. #2035

Closed TechAsif closed 4 years ago

TechAsif commented 4 years ago

Bug

I am happy with that only one issues cut of my video when i click full screen

Platform

Android

Which player are you experiencing the problem on:

Library version: "react-native-video": "^4.4.5",

expected output:

Screenshot_1591267525

Current output

Screenshot_1591267606

How to achieve expected output when full screen.

code sample:

/*Example of React Native Video*/
import React, { Component } from 'react';
//Import React
import { Platform, StyleSheet, Text, View } from 'react-native';
//Import Basic React Native Component
import Video from 'react-native-video';
//Import React Native Video to play video
import MediaControls, { PLAYER_STATES } from 'react-native-media-controls';
//Media Controls to control Play/Pause/Seek and full screen

class TestScreenVideo extends Component {
  videoPlayer;

  state = {
    currentTime: 0,
    duration: 0,
    isFullScreen: false,
    isLoading: true,
    paused: false,
    playerState: PLAYER_STATES.PLAYING,
    screenType: 'contain',
  };

  onSeek = seek => {
    //Handler for change in seekbar
    this.videoPlayer.seek(seek);
  };

  onPaused = playerState => {
    //Handler for Video Pause
    this.setState({
      paused: !this.state.paused,
      playerState,
    });
  };

  onReplay = () => {
    //Handler for Replay 
    this.setState({ playerState: PLAYER_STATES.PLAYING });
    this.videoPlayer.seek(0);
  };

  onProgress = data => {
    const { isLoading, playerState } = this.state;
    // Video Player will continue progress even if the video already ended
    if (!isLoading && playerState !== PLAYER_STATES.ENDED) {
      this.setState({ currentTime: data.currentTime });
    }
  };

  onLoad = data => this.setState({ duration: data.duration, isLoading: false });

  onLoadStart = data => this.setState({ isLoading: true });

  onEnd = () => this.setState({ playerState: PLAYER_STATES.ENDED });

  onError = () => alert('Oh! ', error);

  exitFullScreen = () => {
    alert('Exit full screen');
  };

  enterFullScreen = () => { };

  onFullScreen = () => {
    if (this.state.screenType == 'contain'){
      this.setState({ screenType: 'cover' });
    }

    else{
      this.setState({ screenType: 'contain' });
    }

  };
  renderToolbar = () => (
    <View>
      <Text> toolbar </Text>
    </View>
  );
  onSeeking = currentTime => this.setState({ currentTime });

  render() {
    return (
      <View style={styles.container}>
        <Video
          onEnd={this.onEnd}
          onLoad={this.onLoad}
          onLoadStart={this.onLoadStart}
          onProgress={this.onProgress}
          paused={this.state.paused}
          ref={videoPlayer => (this.videoPlayer = videoPlayer)}
          resizeMode={this.state.screenType}
          onFullScreen={this.state.isFullScreen}
          // source={{ uri: 'http://clips.vorwaerts-gmbh.de/VfE_html5.mp4' }} 
          //local file 
          source={require('./big_buck_bunny.mp4')} // local file

          style={styles.mediaPlayer}
          volume={10}
        />
        <MediaControls
          duration={this.state.duration}
          isLoading={this.state.isLoading}
          mainColor="#333"
          onFullScreen={this.onFullScreen}
          onPaused={this.onPaused}
          onReplay={this.onReplay}
          onSeek={this.onSeek}
          onSeeking={this.onSeeking}
          playerState={this.state.playerState}
          progress={this.state.currentTime}
          toolbar={this.renderToolbar()}
        />
      </View>
    );
  }
}
const styles = StyleSheet.create({
  container: {
    flex: 1,

  },
  toolbar: {
    marginTop: 30,
    backgroundColor: 'white',
    padding: 10,
    borderRadius: 5,
  },
  mediaPlayer: {

    width:"100%",
    height:"100%",
    position: 'absolute',
    backgroundColor: 'black',
  },
});
jenshandersson commented 4 years ago

Closed by https://github.com/react-native-community/react-native-video/pull/2013 (removing the Android JS fullscreen feature as it was too buggy)

sanju280696 commented 3 years ago

Hey @TechAsif did you find any solution on it. bcz i'm facing same issue

TechAsif commented 3 years ago

I can not find On Nov 30, 2020 12:13 PM, "sanju280696" notifications@github.com wrote:

Hey @TechAsif https://github.com/TechAsif did you find any solution on it. bcz i'm facing same issue

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/react-native-video/react-native-video/issues/2035#issuecomment-735572328, or unsubscribe https://github.com/notifications/unsubscribe-auth/AJ4KEZZHWJOKGWELTWOLWNTSSMZX3ANCNFSM4NSQJ6XQ .

sanju280696 commented 3 years ago

I can not find On Nov 30, 2020 12:13 PM, "sanju280696" @.***> wrote: Hey @TechAsif https://github.com/TechAsif did you find any solution on it. bcz i'm facing same issue — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#2035 (comment)>, or unsubscribe https://github.com/notifications/unsubscribe-auth/AJ4KEZZHWJOKGWELTWOLWNTSSMZX3ANCNFSM4NSQJ6XQ .

Okay no problem! thanks for reply, I don't know why its happen !

TechAsif commented 3 years ago

Welcome brother, I think we should go in flutter now. On Nov 30, 2020 12:54 PM, "sanju280696" notifications@github.com wrote:

I can not find … <#m1381388679904065932> On Nov 30, 2020 12:13 PM, "sanju280696" @.***> wrote: Hey @TechAsif https://github.com/TechAsif https://github.com/TechAsif did you find any solution on it. bcz i'm facing same issue — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#2035 (comment) https://github.com/react-native-video/react-native-video/issues/2035#issuecomment-735572328>, or unsubscribe https://github.com/notifications/unsubscribe-auth/ AJ4KEZZHWJOKGWELTWOLWNTSSMZX3ANCNFSM4NSQJ6XQ .

Okay no problem! thanks for reply, I don't know why its happen !

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/react-native-video/react-native-video/issues/2035#issuecomment-735590466, or unsubscribe https://github.com/notifications/unsubscribe-auth/AJ4KEZZ3JIQNUUIYKE5TG73SSM6RNANCNFSM4NSQJ6XQ .

sanju280696 commented 3 years ago

Welcome brother, I think we should go in flutter now. On Nov 30, 2020 12:54 PM, "sanju280696" @.> wrote: I can not find … <#m1381388679904065932> On Nov 30, 2020 12:13 PM, "sanju280696" @.> wrote: Hey @TechAsif https://github.com/TechAsif https://github.com/TechAsif did you find any solution on it. bcz i'm facing same issue — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#2035 (comment) <#2035 (comment)>>, or unsubscribe https://github.com/notifications/unsubscribe-auth/ AJ4KEZZHWJOKGWELTWOLWNTSSMZX3ANCNFSM4NSQJ6XQ . Okay no problem! thanks for reply, I don't know why its happen ! — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#2035 (comment)>, or unsubscribe https://github.com/notifications/unsubscribe-auth/AJ4KEZZ3JIQNUUIYKE5TG73SSM6RNANCNFSM4NSQJ6XQ .

i also think so ! bro

TechAsif commented 3 years ago

Where are you from bro? On Nov 30, 2020 1:02 PM, "sanju280696" notifications@github.com wrote:

Welcome brother, I think we should go in flutter now. … <#m-4775240396839121926> On Nov 30, 2020 12:54 PM, "sanju280696" @.> wrote: I can not find … <#m1381388679904065932> On Nov 30, 2020 12:13 PM, "sanju280696" @.> wrote: Hey @TechAsif https://github.com/TechAsif https://github.com/TechAsif https://github.com/TechAsif did you find any solution on it. bcz i'm facing same issue — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#2035 https://github.com/react-native-video/react-native-video/issues/2035 (comment) <#2035 (comment) https://github.com/react-native-video/react-native-video/issues/2035#issuecomment-735572328>>, or unsubscribe https://github.com/notifications/unsubscribe-auth/ AJ4KEZZHWJOKGWELTWOLWNTSSMZX3ANCNFSM4NSQJ6XQ . Okay no problem! thanks for reply, I don't know why its happen ! — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#2035 (comment) https://github.com/react-native-video/react-native-video/issues/2035#issuecomment-735590466>, or unsubscribe https://github.com/notifications/unsubscribe-auth/ AJ4KEZZ3JIQNUUIYKE5TG73SSM6RNANCNFSM4NSQJ6XQ .

i also think so ! bro

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/react-native-video/react-native-video/issues/2035#issuecomment-735594338, or unsubscribe https://github.com/notifications/unsubscribe-auth/AJ4KEZ6BNAIZRBUHTI7JYV3SSM7RTANCNFSM4NSQJ6XQ .

sanju280696 commented 3 years ago

Where are you from bro? On Nov 30, 2020 1:02 PM, "sanju280696" @.**> wrote: Welcome brother, I think we should go in flutter now. … <#m-4775240396839121926> On Nov 30, 2020 12:54 PM, "sanju280696" @.> wrote: I can not find … <#m1381388679904065932> On Nov 30, 2020 12:13 PM, "sanju280696" @.*> wrote: Hey @TechAsif https://github.com/TechAsif https://github.com/TechAsif https://github.com/TechAsif did you find any solution on it. bcz i'm facing same issue — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#2035 <#2035> (comment) <#2035 (comment) <#2035 (comment)>>>, or unsubscribe https://github.com/notifications/unsubscribe-auth/ AJ4KEZZHWJOKGWELTWOLWNTSSMZX3ANCNFSM4NSQJ6XQ . Okay no problem! thanks for reply, I don't know why its happen ! — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#2035 (comment) <#2035 (comment)>>, or unsubscribe https://github.com/notifications/unsubscribe-auth/ AJ4KEZZ3JIQNUUIYKE5TG73SSM6RNANCNFSM4NSQJ6XQ . i also think so ! bro — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#2035 (comment)>, or unsubscribe https://github.com/notifications/unsubscribe-auth/AJ4KEZ6BNAIZRBUHTI7JYV3SSM7RTANCNFSM4NSQJ6XQ .

gujarat