From 91ff6868a554c4930fd5fda6ba8044dbd56c8374 Mon Sep 17 00:00:00 2001
From: Mark Oswald <markoswald123@gmail.com>
Date: Wed, 13 Jul 2016 03:54:38 -0700
Subject: [PATCH] Use HTTP range requests (responses) to serve mp4 from assets

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 https://github.com/facebook/react-native/pull/8219

Reviewed By: davidaurelio

Differential Revision: D3542485

Pulled By: frantic

fbshipit-source-id: e4f2e4d3aaafa8445e965259bf04ad107dba8a4f
---
 package.json                                  |  3 ++-
 .../src/Server/__tests__/Server-test.js       | 13 +++++++++++
 packager/react-packager/src/Server/index.js   | 23 ++++++++++++++++++-
 3 files changed, 37 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index 4a326705c024b9..1ccaf4bc679395 100644
--- a/package.json
+++ b/package.json
@@ -188,7 +188,8 @@
     "xmldoc": "^0.4.0",
     "yargs": "^3.24.0",
     "yeoman-environment": "~1.2.7",
-    "yeoman-generator": "^0.20.3"
+    "yeoman-generator": "^0.20.3",
+    "mime-types": "2.1.11"
   },
   "devDependencies": {
     "babel-eslint": "^6.0.0",
diff --git a/packager/react-packager/src/Server/__tests__/Server-test.js b/packager/react-packager/src/Server/__tests__/Server-test.js
index c54e503d171e21..8e62cea078c947 100644
--- a/packager/react-packager/src/Server/__tests__/Server-test.js
+++ b/packager/react-packager/src/Server/__tests__/Server-test.js
@@ -349,6 +349,19 @@ describe('processRequest', () => {
       expect(AssetServer.prototype.get).toBeCalledWith('imgs/a.png', 'ios');
       expect(res.end).toBeCalledWith('i am image');
     });
+
+    it('should serve range request', () => {
+      const req = {url: '/assets/imgs/a.png?platform=ios', headers: {range: 'bytes=0-3'}};
+      const res = {end: jest.fn(), writeHead: jest.fn()};
+      const mockData = 'i am image';
+
+      AssetServer.prototype.get.mockImpl(() => Promise.resolve(mockData));
+
+      server.processRequest(req, res);
+      jest.runAllTimers();
+      expect(AssetServer.prototype.get).toBeCalledWith('imgs/a.png', 'ios');
+      expect(res.end).toBeCalledWith(mockData.slice(0, 3));
+    });
   });
 
   describe('buildbundle(options)', () => {
diff --git a/packager/react-packager/src/Server/index.js b/packager/react-packager/src/Server/index.js
index dadc7379c532cc..41febf63a5eb5e 100644
--- a/packager/react-packager/src/Server/index.js
+++ b/packager/react-packager/src/Server/index.js
@@ -19,6 +19,7 @@ const SourceMapConsumer = require('source-map').SourceMapConsumer;
 const declareOpts = require('../lib/declareOpts');
 const path = require('path');
 const url = require('url');
+const mime = require('mime-types');
 
 function debounce(fn, delay) {
   var timeout;
@@ -396,13 +397,33 @@ class Server {
     });
   }
 
+  _rangeRequestMiddleware(req, res, data, assetPath) {
+    if (req.headers && req.headers.range) {
+      const [rangeStart, rangeEnd] = req.headers.range.replace(/bytes=/, '').split('-');
+      const dataStart = parseInt(rangeStart, 10);
+      const dataEnd = rangeEnd ? parseInt(rangeEnd, 10) : data.length - 1;
+      const chunksize = (dataEnd - dataStart) + 1;
+
+      res.writeHead(206, {
+        'Accept-Ranges': 'bytes',
+        'Content-Length': chunksize,
+        'Content-Range': `bytes ${dataStart}-${dataEnd}/${data.length}`,
+        'Content-Type': mime.lookup(path.basename(assetPath[1]))
+      });
+
+      return data.slice(dataStart, dataEnd);
+    }
+
+    return data;
+  }
+
   _processAssetsRequest(req, res) {
     const urlObj = url.parse(req.url, true);
     const assetPath = urlObj.pathname.match(/^\/assets\/(.+)$/);
     const assetEvent = Activity.startEvent(`processing asset request ${assetPath[1]}`);
     this._assetServer.get(assetPath[1], urlObj.query.platform)
       .then(
-        data => res.end(data),
+        data => res.end(this._rangeRequestMiddleware(req, res, data, assetPath)),
         error => {
           console.error(error.stack);
           res.writeHead('404');