{"action":"created","issue":{"url":"https://api.github.com/repos/react-native-community/react-native-video/issues/1197","repository_url":"https://api.github.com/repos/react-native-community/react-native-video","labels_url":"https://api.github.com/repos/react-native-community/react-native-video/issues/1197/labels{/name}","comments_url":"https://api.github.com/repos/react-native-community/react-native-video/issues/1197/comments","events_url":"https://api.github.com/repos/react-native-community/react-native-video/issues/1197/events","html_url":"https://github.com/react-native-community/react-native-video/issues/1197","id":353632120,"node_id":"MDU6SXNzdWUzNTM2MzIxMjA=","number":1197,"title":"Some issues on Android","user":{"login":"hoangvuanhdevelopervn","id":29293495,"node_id":"MDQ6VXNlcjI5MjkzNDk1","avatar_url":"https://avatars0.githubusercontent.com/u/29293495?v=4","gravatar_id":"","url":"https://api.github.com/users/hoangvuanhdevelopervn","html_url":"https://github.com/hoangvuanhdevelopervn","followers_url":"https://api.github.com/users/hoangvuanhdevelopervn/followers","following_url":"https://api.github.com/users/hoangvuanhdevelopervn/following{/other_user}","gists_url":"https://api.github.com/users/hoangvuanhdevelopervn/gists{/gist_id}","starred_url":"https://api.github.com/users/hoangvuanhdevelopervn/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/hoangvuanhdevelopervn/subscriptions","organizations_url":"https://api.github.com/users/hoangvuanhdevelopervn/orgs","repos_url":"https://api.github.com/users/hoangvuanhdevelopervn/repos","events_url":"https://api.github.com/users/hoangvuanhdevelopervn/events{/privacy}","received_events_url":"https://api.github.com/users/hoangvuanhdevelopervn/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":3,"created_at":"2018-08-24T03:35:48Z","updated_at":"2018-12-06T10:23:45Z","closed_at":null,"author_association":"NONE","body":"- Poster not disappear when video load done\r\n- I open video on Modal, the first is load fine, the second too but after that, video not run, it's not load just on Android, iOS work fine, so how to destroy loading when close modal, just set paused = true?\r\n- This is my code:\r\n\r\n```\r\nimport React, { PureComponent } from 'react';\r\nimport {\r\n  View,\r\n  Slider,\r\n  TouchableOpacity,\r\n  Modal,\r\n  BackHandler,\r\n  Image,\r\n  Alert,\r\n  Linking\r\n} from 'react-native';\r\nimport Video from 'react-native-video';\r\nimport Toast, { DURATION } from 'react-native-easy-toast';\r\n\r\nimport styled from 'styled-components';\r\nimport Icon from '../components/Icon';\r\nimport Toolbar, { ToolbarTouchIcon } from '../components/Toolbar';\r\nimport { screenHeight, screenWidth } from '../utils/device';\r\nimport { download, formatSecondToMinutes } from '../utils/utils';\r\nimport { t } from '../i18n';\r\nimport Text from './Text';\r\n\r\nexport default class VideoPlayer extends PureComponent {\r\n  constructor(props) {\r\n    super(props);\r\n    this.onLoad = this.onLoad.bind(this);\r\n    this.onProgress = this.onProgress.bind(this);\r\n    this.state = {\r\n      muted: true,\r\n      duration: 0.0,\r\n      currentTime: 0.0,\r\n      paused: true,\r\n      modalVisible: false\r\n    };\r\n    this.handleBackPress = this.handleBackPress.bind(this);\r\n  }\r\n\r\n  componentDidMount() {\r\n    BackHandler.addEventListener('hardwareBackPress', this.handleBackPress);\r\n  }\r\n\r\n  componentWillUnmount() {\r\n    BackHandler.removeEventListener('hardwareBackPress', this.handleBackPress);\r\n  }\r\n\r\n  handleBackPress() {\r\n    this.closeModal();\r\n    return true;\r\n  }\r\n\r\n  onLoad = data => {\r\n    this.setState({ duration: data.duration });\r\n  };\r\n\r\n  onProgress = data => {\r\n    this.setState({ currentTime: data.currentTime });\r\n  };\r\n\r\n  handleEndVideo = () => {\r\n    this.setState({\r\n      paused: true\r\n    });\r\n  };\r\n\r\n  closeModal() {\r\n    this.setState({\r\n      modalVisible: false,\r\n      paused: true\r\n    });\r\n  }\r\n\r\n  openModal() {\r\n    this.setState({\r\n      modalVisible: true,\r\n      paused: false\r\n    });\r\n  }\r\n\r\n  handleDragSlider = value => {\r\n    this.player.seek(value);\r\n  };\r\n\r\n  handleUrl = () => {\r\n    return this.props.url.replace(/\\s/g, '%20');\r\n  };\r\n\r\n  openBrowser = url => {\r\n    Linking.canOpenURL(url)\r\n      .then(supported => {\r\n        if (!supported) {\r\n          this.showToast(t('error_url_not_valid'), 2000);\r\n        } else {\r\n          return Linking.openURL(url);\r\n        }\r\n      })\r\n      .catch(err => this.showToast(t('an_error_occurred') + err, 2000));\r\n  };\r\n\r\n  showToast = (content, duration) => {\r\n    this.refs.toast.show(content, duration);\r\n  };\r\n\r\n  downloadVideo = () => {\r\n    Alert.alert(t('options'), '', [\r\n      {\r\n        text: t('open_browser'),\r\n        onPress: () => this.openBrowser(this.props.url)\r\n      },\r\n      {\r\n        text: t('download'),\r\n        onPress: () =>\r\n          download(this.state.url, '_Subiz/video_' + this.state.title)\r\n      },\r\n      {\r\n        text: t('close'),\r\n        onPress: () => BackHandler.removeEventListener(),\r\n        style: 'cancel'\r\n      }\r\n    ]);\r\n  };\r\n\r\n  render() {\r\n    return (\r\n      <TouchableOpacity onPress={() => this.openModal()}>\r\n        <StyledMainView>\r\n          <StyledModal\r\n            animationType=\"slide\"\r\n            transparent={true}\r\n            onRequestClose={() => {}}\r\n            visible={this.state.modalVisible}>\r\n            <StyledViewModalContent>\r\n              <Toast ref=\"toast\" style={{ borderRadius: 20 }}/>\r\n              <Toolbar\r\n                title={this.props.name}\r\n                left={[\r\n                  <ToolbarTouchIcon\r\n                    key=\"more-icon\"\r\n                    ml={-3}\r\n                    source={require('../assets/back.png')}\r\n                    onPress={() => this.closeModal()}\r\n                  />\r\n                ]}\r\n                right={[\r\n                  <ToolbarTouchIcon\r\n                    key=\"close-icon\"\r\n                    source={require('../assets/more.png')}\r\n                    onPress={this.downloadVideo}\r\n                  />\r\n                ]}\r\n              />\r\n              <StyledViewVideo>\r\n                <StyledVideoModal\r\n                  innerRef={ref => (this.player = ref)}\r\n                  source={{ uri: this.handleUrl() }}\r\n                  resizeMode=\"contain\"\r\n                  paused={this.state.paused}\r\n                  muted={this.state.muted}\r\n                  volume={1}\r\n                  onLoad={this.onLoad}\r\n                  onProgress={this.onProgress}\r\n                  ignoreSilentSwitch={'obey'}\r\n                  onEnd={() => this.handleEndVideo()}\r\n                  repeat={true}\r\n                />\r\n              </StyledViewVideo>\r\n\r\n              <StyledViewVideoController>\r\n                <TouchableOpacity\r\n                  onPress={() => {\r\n                    this.setState({\r\n                      paused: !this.state.paused\r\n                    });\r\n                  }}>\r\n                  <StyledIconPlay\r\n                    source={\r\n                      this.state.paused\r\n                        ? require('../assets/play.png')\r\n                        : require('../assets/pause.png')\r\n                    }\r\n                  />\r\n                </TouchableOpacity>\r\n\r\n                <StyleViewSlider>\r\n                  <StyledSlider\r\n                    minimumValue={0}\r\n                    maximumValue={this.state.duration}\r\n                    value={this.state.currentTime}\r\n                    maximumTrackTintColor=\"#d3d3d3\"\r\n                    minimumTrackTintColor=\"#1890ff\"\r\n                    thumbTintColor=\"#1890ff\"\r\n                    onValueChange={value => this.handleDragSlider(value)}\r\n                  />\r\n\r\n                  <StyleViewTime>\r\n                    <StyleText\r\n                      text={formatSecondToMinutes(this.state.currentTime)}\r\n                    />\r\n                    <StyleText\r\n                      text={formatSecondToMinutes(this.state.duration)}\r\n                    />\r\n                  </StyleViewTime>\r\n                </StyleViewSlider>\r\n\r\n                <TouchableOpacity\r\n                  onPress={() => {\r\n                    this.setState({\r\n                      muted: !this.state.muted\r\n                    });\r\n                  }}\r\n                >\r\n                  <StyledIconVolume\r\n                    source={\r\n                      this.state.muted\r\n                        ? require('../assets/volume-off.png')\r\n                        : require('../assets/volume-on.png')\r\n                    }\r\n                  />\r\n                </TouchableOpacity>\r\n              </StyledViewVideoController>\r\n            </StyledViewModalContent>\r\n          </StyledModal>\r\n\r\n          <StyleImageThumbnail\r\n            source={require('../assets/thumbnail.png')}\r\n            resizeMode={'center'}\r\n          />\r\n\r\n          <StyledBorderButton>\r\n            <StyledIcon source={require('../assets/play_icon.png')}/>\r\n          </StyledBorderButton>\r\n        </StyledMainView>\r\n      </TouchableOpacity>\r\n    );\r\n  }\r\n}\r\n\r\nconst StyledMainView = styled(View)`\r\n  border-radius: 5;\r\n  width: ${(screenWidth / 3) * 2};\r\n  height: 180px;\r\n  margin: 8px 8px 8px 8px;\r\n  background-color: rgb(200, 199, 204);\r\n  justify-content: center;\r\n  align-items: center;\r\n`;\r\nconst StyledBorderButton = styled(View)`\r\n  width: 50px;\r\n  height: 50px;\r\n  background-color: rgba(0, 0, 0, 0.6);\r\n  border-radius: 25px\r\n  justify-content: center;\r\n  align-items: center;\r\n  margin: 0px 0px 0px 0px;\r\n  position: absolute;\r\n`;\r\nconst StyledIcon = styled(Icon)`\r\n  width: 50px;\r\n  height: 50px;\r\n`;\r\nconst StyledIconPlay = styled(Icon)`\r\n  margin: 0px 8px 0px 8px;\r\n`;\r\nconst StyledIconVolume = styled(Icon)`\r\n  margin: 0px 8px 0px 8px;\r\n`;\r\nconst StyledModal = styled(Modal)``;\r\n\r\nconst StyledViewModalContent = styled(View)`\r\n  flex: 1;\r\n  background-color: black;\r\n`;\r\nconst StyledViewVideo = styled(View)`\r\n  flex: 90;\r\n  width: ${screenWidth};\r\n  height: ${screenHeight};\r\n  background-color: black;\r\n  justify-content: center;\r\n  align-items: center;\r\n`;\r\nconst StyledVideoModal = styled(Video)`\r\n  width: ${screenWidth};\r\n  height: ${screenHeight};\r\n  background-color: black;\r\n`;\r\nconst StyledViewVideoController = styled(View)`\r\n  flex: 10;\r\n  flex-direction: row;\r\n  background-color: black;\r\n  justify-content: space-between;\r\n  align-items: center;\r\n  padding: 8px 16px 0px 12px;\r\n`;\r\nconst StyledSlider = styled(Slider)``;\r\nconst StyleImageThumbnail = styled(Image)`\r\n  width: ${(screenWidth / 3) * 2};\r\n  height: 180px;\r\n  border-radius: 5;\r\n`;\r\nconst StyleText = styled(Text)`\r\n  color: white;\r\n  font-size: ${props => props.theme.fontSizeSmall};\r\n`;\r\nconst StyleViewSlider = styled(View)`\r\n  flex: 1;\r\n  background-color: black;\r\n`;\r\nconst StyleViewTime = styled(View)`\r\n  align-items: center;\r\n  justify-content: space-between;\r\n  flex-direction: row;\r\n`;\r\n\r\n```"},"comment":{"url":"https://api.github.com/repos/react-native-community/react-native-video/issues/comments/444823236","html_url":"https://github.com/react-native-community/react-native-video/issues/1197#issuecomment-444823236","issue_url":"https://api.github.com/repos/react-native-community/react-native-video/issues/1197","id":444823236,"node_id":"MDEyOklzc3VlQ29tbWVudDQ0NDgyMzIzNg==","user":{"login":"badpenguin","id":5000272,"node_id":"MDQ6VXNlcjUwMDAyNzI=","avatar_url":"https://avatars0.githubusercontent.com/u/5000272?v=4","gravatar_id":"","url":"https://api.github.com/users/badpenguin","html_url":"https://github.com/badpenguin","followers_url":"https://api.github.com/users/badpenguin/followers","following_url":"https://api.github.com/users/badpenguin/following{/other_user}","gists_url":"https://api.github.com/users/badpenguin/gists{/gist_id}","starred_url":"https://api.github.com/users/badpenguin/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/badpenguin/subscriptions","organizations_url":"https://api.github.com/users/badpenguin/orgs","repos_url":"https://api.github.com/users/badpenguin/repos","events_url":"https://api.github.com/users/badpenguin/events{/privacy}","received_events_url":"https://api.github.com/users/badpenguin/received_events","type":"User","site_admin":false},"created_at":"2018-12-06T10:23:45Z","updated_at":"2018-12-06T10:23:45Z","author_association":"NONE","body":"Temporary workaround, catch the onReadyfor display:\r\nref={(ref: Video) => {this.video = ref}}\r\nonReadyForDisplay={this.onVideoReady}\r\n\r\nAnd call:\r\nthis.video.setNativeProps({ seek: 0 });\r\n\r\n"}}
{"actor":{"display_login":"badpenguin"}}