Use HTTP range requests (responses) to serve mp4 from assets #8219

mroswald · 2016-06-18T22:25:07Z

This PR solves a problem when video assets are used from third-party React Native components (e.g. react-native-video. The video will not work while the assets are served from the react native packager because the used video component (iOS) relies on HTTP range requests.

I added a small fix that allows ranged requests (e.g. mp4) to be served in ranges.

To test this:

make new react native project
add react-native-video to xcode project
add video component to your project

import Video from 'react-native-video';
var resolveAssetSource = require('react-native/Libraries/Image/resolveAssetSource');
/* ... /*
render() {
    let source = resolveAssetSource(require('./someVideoFile.mp4')) || {};
    return <Video /*....*/ source={source} />;
}

That should not work (if video is smaller than a few megabytes, open app a few times). Then add my fix, that should do the trick.

ghost · 2016-06-18T22:26:21Z

By analyzing the blame information on this pull request, we identified @frantic and @martinbigio to be potential reviewers.

mroswald · 2016-06-18T22:27:44Z

relates to TheWidlarzGroup/react-native-video#246

mroswald · 2016-06-29T09:16:54Z

updated to current master

mroswald · 2016-07-05T09:44:01Z

rebased to current master

frantic · 2016-07-05T16:07:49Z

packager/react-packager/src/Server/index.js

@@ -168,6 +169,8 @@ const dependencyOpts = declareOpts({
  },
 });

+const isRangeRequest = (req) => req.headers && req.headers.range;


why not inline it?

frantic · 2016-07-05T16:11:06Z

Great stuff, thank you!

I have a question and a request:

Is there already an npm package that solves this? Maybe it's easier to add "serves-content-with-ranges" middleware on higher level? This way anything that packager returns could be requested by range.
Mind writing a small unit test for your feature to make sure it doesn't break in the future?

mroswald · 2016-07-06T20:49:30Z

@frantic thanks for your valuable feedback! I checked some npm packages but didn't find anything that is small enough to fit into React Native's Server module. By the way - you know the reason why they did not simply use express?

anyway: I added a test and refactored the range serving to a small function which I named middleware :-) This is just a proposal, maybe you have a better idea

frantic · 2016-07-08T14:14:00Z

Looks good, thank you!

frantic · 2016-07-08T14:14:10Z

@facebook-github-bot import

frantic · 2016-07-11T12:29:54Z

@facebook-github-bot import

ghost · 2016-07-11T12:30:40Z

Thanks for importing. If you are an FB employee go to Phabricator to review.

Summary: #8219 adds range requests to the asset server, but there was an off-by-one-error that made responses end prematurely. This made (for example) react-native-video not work for video assets. This change fixes the off-by-one error and react-native-video works with assets. **Test plan (required)** Try the test in the original pull request for range requests: #8219 Closes #9254 Differential Revision: D3680070 fbshipit-source-id: 3f2a18ba9f35b45b340f4a1046bc099b8444eb7d

Summary: facebook#8219 adds range requests to the asset server, but there was an off-by-one-error that made responses end prematurely. This made (for example) react-native-video not work for video assets. This change fixes the off-by-one error and react-native-video works with assets. **Test plan (required)** Try the test in the original pull request for range requests: facebook#8219 Closes facebook#9254 Differential Revision: D3680070 fbshipit-source-id: 3f2a18ba9f35b45b340f4a1046bc099b8444eb7d

Summary: This PR solves a problem when video assets are used from third-party React Native components (e.g. [react-native-video](https://github.com/brentvatne/react-native-video). The video will not work while the assets are served from the react native packager because the used video component (iOS) relies on HTTP range requests. I added a small fix that allows ranged requests (e.g. mp4) to be served in ranges. To test this: 1. make new react native project 1. add [react-native-video](https://github.com/brentvatne/react-native-video) to xcode project 1. add video component to your project ``` import Video from 'react-native-video'; var resolveAssetSource = require('react-native/Libraries/Image/resolveAssetSource'); /* ... /* render() { let source = resolveAssetSource(require('./someVideoFile.mp4')) || {}; return <Video /*....*/ source={source} />; } ``` That should not work (if video is smaller than a few megabytes, open app a few times). Then add my fix, that should do the trick. Closes facebook#8219 Reviewed By: davidaurelio Differential Revision: D3542485 Pulled By: frantic fbshipit-source-id: e4f2e4d3aaafa8445e965259bf04ad107dba8a4f

Summary: facebook#8219 adds range requests to the asset server, but there was an off-by-one-error that made responses end prematurely. This made (for example) react-native-video not work for video assets. This change fixes the off-by-one error and react-native-video works with assets. **Test plan (required)** Try the test in the original pull request for range requests: facebook#8219 Closes facebook#9254 Differential Revision: D3680070 fbshipit-source-id: 3f2a18ba9f35b45b340f4a1046bc099b8444eb7d

Summary: This PR solves a problem when video assets are used from third-party React Native components (e.g. [react-native-video](https://github.com/brentvatne/react-native-video). The video will not work while the assets are served from the react native packager because the used video component (iOS) relies on HTTP range requests. I added a small fix that allows ranged requests (e.g. mp4) to be served in ranges. To test this: 1. make new react native project 1. add [react-native-video](https://github.com/brentvatne/react-native-video) to xcode project 1. add video component to your project ``` import Video from 'react-native-video'; var resolveAssetSource = require('react-native/Libraries/Image/resolveAssetSource'); /* ... /* render() { let source = resolveAssetSource(require('./someVideoFile.mp4')) || {}; return <Video /*....*/ source={source} />; } ``` That should not work (if video is smaller than a few megabytes, open app a few times). Then add my fix, that should do the trick. Closes facebook/react-native#8219 Reviewed By: davidaurelio Differential Revision: D3542485 Pulled By: frantic fbshipit-source-id: e4f2e4d3aaafa8445e965259bf04ad107dba8a4f

Summary: facebook/react-native#8219 adds range requests to the asset server, but there was an off-by-one-error that made responses end prematurely. This made (for example) react-native-video not work for video assets. This change fixes the off-by-one error and react-native-video works with assets. **Test plan (required)** Try the test in the original pull request for range requests: facebook/react-native#8219 Closes facebook/react-native#9254 Differential Revision: D3680070 fbshipit-source-id: 3f2a18ba9f35b45b340f4a1046bc099b8444eb7d

Summary: This PR solves a problem when video assets are used from third-party React Native components (e.g. [react-native-video](https://github.com/brentvatne/react-native-video). The video will not work while the assets are served from the react native packager because the used video component (iOS) relies on HTTP range requests. I added a small fix that allows ranged requests (e.g. mp4) to be served in ranges. To test this: 1. make new react native project 1. add [react-native-video](https://github.com/brentvatne/react-native-video) to xcode project 1. add video component to your project ``` import Video from 'react-native-video'; var resolveAssetSource = require('react-native/Libraries/Image/resolveAssetSource'); /* ... /* render() { let source = resolveAssetSource(require('./someVideoFile.mp4')) || {}; return <Video /*....*/ source={source} />; } ``` That should not work (if video is smaller than a few megabytes, open app a few times). Then add my fix, that should do the trick. Closes facebook/react-native#8219 Reviewed By: davidaurelio Differential Revision: D3542485 Pulled By: frantic fbshipit-source-id: e4f2e4d3aaafa8445e965259bf04ad107dba8a4f

ghost added GH Review: review-needed CLA Signed This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed. labels Jun 18, 2016

mroswald force-pushed the feat/stream-mp4-in-ranges branch 2 times, most recently from 4c64464 to 9a4bb8c Compare June 18, 2016 22:44

mroswald force-pushed the feat/stream-mp4-in-ranges branch from f946ed8 to 1281024 Compare June 29, 2016 09:16

mroswald force-pushed the feat/stream-mp4-in-ranges branch from 1281024 to 172da92 Compare July 5, 2016 09:43

frantic reviewed Jul 5, 2016
View reviewed changes

frantic self-assigned this Jul 5, 2016

frantic added GH Review: needs-revision and removed GH Review: review-needed labels Jul 5, 2016

ghost added GH Review: review-needed and removed GH Review: needs-revision labels Jul 6, 2016

mroswald added 2 commits July 7, 2016 12:57

feat(packager): serve mp4 files in ranges

f67c0b6

refactor as middleware function and add test

5d540fa

mroswald force-pushed the feat/stream-mp4-in-ranges branch from 58d7895 to 5d540fa Compare July 7, 2016 10:57

frantic added GH Review: accepted and removed GH Review: review-needed labels Jul 8, 2016

ghost added the CLA Signed This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed. label Jul 12, 2016

ghost closed this in 91ff686 Jul 13, 2016

nikki93 mentioned this pull request Aug 6, 2016

Fix off-by-one error in range requests #9254

Closed

This pull request was closed.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Use HTTP range requests (responses) to serve mp4 from assets #8219

Use HTTP range requests (responses) to serve mp4 from assets #8219

mroswald commented Jun 18, 2016 •

edited

Loading

ghost commented Jun 18, 2016

mroswald commented Jun 18, 2016

mroswald commented Jun 29, 2016

mroswald commented Jul 5, 2016

frantic Jul 5, 2016

frantic commented Jul 5, 2016

mroswald commented Jul 6, 2016 •

edited

Loading

frantic commented Jul 8, 2016

frantic commented Jul 8, 2016

frantic commented Jul 11, 2016

ghost commented Jul 11, 2016

Use HTTP range requests (responses) to serve mp4 from assets #8219

Use HTTP range requests (responses) to serve mp4 from assets #8219

Conversation

mroswald commented Jun 18, 2016 • edited Loading

ghost commented Jun 18, 2016

mroswald commented Jun 18, 2016

mroswald commented Jun 29, 2016

mroswald commented Jul 5, 2016

frantic Jul 5, 2016

Choose a reason for hiding this comment

frantic commented Jul 5, 2016

mroswald commented Jul 6, 2016 • edited Loading

frantic commented Jul 8, 2016

frantic commented Jul 8, 2016

frantic commented Jul 11, 2016

ghost commented Jul 11, 2016

mroswald commented Jun 18, 2016 •

edited

Loading

mroswald commented Jul 6, 2016 •

edited

Loading