{"action":"created","issue":{"url":"https://api.github.com/repos/facebook/react-vr/issues/213","repository_url":"https://api.github.com/repos/facebook/react-vr","labels_url":"https://api.github.com/repos/facebook/react-vr/issues/213/labels{/name}","comments_url":"https://api.github.com/repos/facebook/react-vr/issues/213/comments","events_url":"https://api.github.com/repos/facebook/react-vr/issues/213/events","html_url":"https://github.com/facebook/react-vr/issues/213","id":232996585,"number":213,"title":"Video Component on iOS not visible / no rendering","user":{"login":"rawbknalb","id":12865864,"avatar_url":"https://avatars1.githubusercontent.com/u/12865864?v=3","gravatar_id":"","url":"https://api.github.com/users/rawbknalb","html_url":"https://github.com/rawbknalb","followers_url":"https://api.github.com/users/rawbknalb/followers","following_url":"https://api.github.com/users/rawbknalb/following{/other_user}","gists_url":"https://api.github.com/users/rawbknalb/gists{/gist_id}","starred_url":"https://api.github.com/users/rawbknalb/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/rawbknalb/subscriptions","organizations_url":"https://api.github.com/users/rawbknalb/orgs","repos_url":"https://api.github.com/users/rawbknalb/repos","events_url":"https://api.github.com/users/rawbknalb/events{/privacy}","received_events_url":"https://api.github.com/users/rawbknalb/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":{"login":"amberroy","id":1117692,"avatar_url":"https://avatars2.githubusercontent.com/u/1117692?v=3","gravatar_id":"","url":"https://api.github.com/users/amberroy","html_url":"https://github.com/amberroy","followers_url":"https://api.github.com/users/amberroy/followers","following_url":"https://api.github.com/users/amberroy/following{/other_user}","gists_url":"https://api.github.com/users/amberroy/gists{/gist_id}","starred_url":"https://api.github.com/users/amberroy/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/amberroy/subscriptions","organizations_url":"https://api.github.com/users/amberroy/orgs","repos_url":"https://api.github.com/users/amberroy/repos","events_url":"https://api.github.com/users/amberroy/events{/privacy}","received_events_url":"https://api.github.com/users/amberroy/received_events","type":"User","site_admin":false},"assignees":[{"login":"amberroy","id":1117692,"avatar_url":"https://avatars2.githubusercontent.com/u/1117692?v=3","gravatar_id":"","url":"https://api.github.com/users/amberroy","html_url":"https://github.com/amberroy","followers_url":"https://api.github.com/users/amberroy/followers","following_url":"https://api.github.com/users/amberroy/following{/other_user}","gists_url":"https://api.github.com/users/amberroy/gists{/gist_id}","starred_url":"https://api.github.com/users/amberroy/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/amberroy/subscriptions","organizations_url":"https://api.github.com/users/amberroy/orgs","repos_url":"https://api.github.com/users/amberroy/repos","events_url":"https://api.github.com/users/amberroy/events{/privacy}","received_events_url":"https://api.github.com/users/amberroy/received_events","type":"User","site_admin":false}],"milestone":null,"comments":6,"created_at":"2017-06-01T20:12:16Z","updated_at":"2017-06-01T20:38:04Z","closed_at":null,"body":"### Description\r\n\r\n[FILL THIS OUT: Bug or Feature Request? For a Bug please explain what you did, what you expected to happen, and what actually happens. Sections below]\r\nBug: Video with VideoControl and MediaPlayerState does not render on Chrome / Safari for iOS (10.3.2 (14F89))\r\n\r\n#### Expected behavior\r\nVideo Component should render on mobile browsers. \r\n#### Actual behavior\r\nVideo Component does not get rendered. No Video Component visible on the screen. But VideoControl Component is rendered as expected\r\n### Reproduction\r\n\r\nReproduction on Safari and Chrome (58.0.3029.113) for iOS (iPad Pro 9.7)\r\n\r\n[[Imgur](http://i.imgur.com/jVwINvY.jpg)]([Imgur](http://i.imgur.com/jVwINvY.jpg))\r\n\r\n### Solution\r\n\r\nMy VideoPanel Component\r\n```import React from \"react\";\r\nimport {\r\n  View,\r\n  Text,\r\n  Video,\r\n  VideoControl,\r\n  Animated,\r\n  MediaPlayerState\r\n} from \"react-vr\";\r\n\r\nclass VideoPanel extends React.Component {\r\n  constructor(props) {\r\n    super(props);\r\n    this.state = {\r\n      videoPosition: {\r\n        translateY: 2,\r\n        translateZ: new Animated.Value(-10)\r\n      },\r\n      playerState: new MediaPlayerState({ autoPlay: false, muted: false }) // init with muted, autoPlay\r\n    };\r\n  }\r\n\r\n  animateAfterEnd() {\r\n    Animated.spring(this.state.videoPosition.translateZ, {\r\n      toValue: -15,\r\n      spring: 2\r\n    }).start();\r\n  }\r\n\r\n  render() {\r\n    const videoWidth = 8;\r\n\r\n    return (\r\n      <Animated.View style={this.videoContainerStyle()}>\r\n        <Text\r\n          style={{\r\n            fontSize: 0.6,\r\n            fontWeight: \"200\",\r\n            paddingLeft: 0.2,\r\n            paddingRight: 0.2,\r\n            textAlign: \"center\",\r\n            textAlignVertical: \"center\"\r\n            //transform: [{ translate: [0, 5, -12] }]\r\n          }}\r\n        >\r\n          Headline\r\n        </Text>\r\n        <Video\r\n          style={{ height: 4.5, width: videoWidth }}\r\n          source={{ uri: \"../../static_assets/VisualVest_vid.webm\" }}\r\n          playerState={this.state.playerState}\r\n          onEnded={() => this.animateAfterEnd()}\r\n        />\r\n        <VideoControl\r\n          style={{ height: 0.3, width: videoWidth }}\r\n          playerState={this.state.playerState}\r\n        />\r\n      </Animated.View>\r\n    );\r\n  }\r\n\r\n  videoContainerStyle = () => ({\r\n    alignItems: \"center\",\r\n    layoutOrigin: [0.5, 0.5, 0],\r\n    transform: [\r\n      { translateX: -8 },\r\n      { translateY: this.state.videoPosition.translateY },\r\n      { translateZ: this.state.videoPosition.translateZ },\r\n      { rotateY: 30 }\r\n    ]\r\n  });\r\n}\r\n\r\nexport default VideoPanel;\r\n```\r\n\r\n"},"comment":{"url":"https://api.github.com/repos/facebook/react-vr/issues/comments/305613202","html_url":"https://github.com/facebook/react-vr/issues/213#issuecomment-305613202","issue_url":"https://api.github.com/repos/facebook/react-vr/issues/213","id":305613202,"user":{"login":"andrewimm","id":494043,"avatar_url":"https://avatars1.githubusercontent.com/u/494043?v=3","gravatar_id":"","url":"https://api.github.com/users/andrewimm","html_url":"https://github.com/andrewimm","followers_url":"https://api.github.com/users/andrewimm/followers","following_url":"https://api.github.com/users/andrewimm/following{/other_user}","gists_url":"https://api.github.com/users/andrewimm/gists{/gist_id}","starred_url":"https://api.github.com/users/andrewimm/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/andrewimm/subscriptions","organizations_url":"https://api.github.com/users/andrewimm/orgs","repos_url":"https://api.github.com/users/andrewimm/repos","events_url":"https://api.github.com/users/andrewimm/events{/privacy}","received_events_url":"https://api.github.com/users/andrewimm/received_events","type":"User","site_admin":false},"created_at":"2017-06-01T20:38:04Z","updated_at":"2017-06-01T20:38:04Z","body":"Sure. Please provide as much reproduction info as you can."}}
{"actor":{"display_login":"andrewimm"}}