From 4b922beeda467df081a45d13c5be4b3cab63c38b Mon Sep 17 00:00:00 2001
From: xiaoyuhen <xiaoyuhen1994@gmail.com>
Date: Wed, 3 Apr 2019 13:56:06 +0800
Subject: [PATCH 1/2] fix: use xhr instead of the fetch api

---
 packages/griffith-mp4/src/fetch.js | 38 +++++++++++++++++-------------
 1 file changed, 22 insertions(+), 16 deletions(-)

diff --git a/packages/griffith-mp4/src/fetch.js b/packages/griffith-mp4/src/fetch.js
index 4bddf989..aa640016 100644
--- a/packages/griffith-mp4/src/fetch.js
+++ b/packages/griffith-mp4/src/fetch.js
@@ -3,33 +3,39 @@ export default class FragmentFetch {
 
   constructor(url, start, end, callback) {
     this.start = start
-    this.controller = new AbortController()
     FragmentFetch.queue.push(this)
-    return fetch(url, {
-      headers: {
-        Range: `bytes=${start}-${end}`,
-      },
-      signal: this.controller.signal,
-    })
-      .then(res => {
-        callback(res.arrayBuffer())
-        this.remove()
-      })
-      .catch(() => {
-        this.remove()
-      })
+
+    const xhr = new XMLHttpRequest()
+    this.xhr = xhr
+    xhr.open('get', url)
+    xhr.responseType = 'arraybuffer'
+    xhr.setRequestHeader('Range', `bytes=${start}-${end}`)
+    xhr.onload = () => {
+      if (xhr.status === 200 || xhr.status === 206) {
+        callback(xhr.response)
+      }
+      this.remove()
+    }
+    xhr.send()
+
+    xhr.onerror = () => {
+      this.remove()
+    }
+    xhr.onabort = () => {
+      this.remove()
+    }
   }
 
   remove = () => {
     FragmentFetch.queue = FragmentFetch.queue.filter(
-      item => item.start !== this.statr
+      item => item.start !== this.start
     )
   }
 
   static clear() {
     while (FragmentFetch.queue.length) {
       const item = FragmentFetch.queue.shift()
-      item.controller.abort()
+      item.xhr.abort()
     }
   }
 }

From c5ee277ac57e9869fe042d4a01592c7246d01dd1 Mon Sep 17 00:00:00 2001
From: xiaoyuhen <xiaoyuhen1994@gmail.com>
Date: Wed, 3 Apr 2019 13:59:40 +0800
Subject: [PATCH 2/2] chore: remove whatwg-fetch

---
 example/fmp4/index.js   | 1 -
 example/hls/index.js    | 1 -
 example/inline/index.js | 1 -
 example/main/index.js   | 1 -
 example/mp4/index.js    | 1 -
 example/package.json    | 3 +--
 yarn.lock               | 2 +-
 7 files changed, 2 insertions(+), 8 deletions(-)

diff --git a/example/fmp4/index.js b/example/fmp4/index.js
index 259c5289..08fece29 100644
--- a/example/fmp4/index.js
+++ b/example/fmp4/index.js
@@ -1,7 +1,6 @@
 /* eslint-disable import/named */
 import '@babel/polyfill'
 import 'raf/polyfill'
-import 'whatwg-fetch'
 import React from 'react'
 import ReactDOM from 'react-dom'
 import App from './App'
diff --git a/example/hls/index.js b/example/hls/index.js
index 259c5289..08fece29 100644
--- a/example/hls/index.js
+++ b/example/hls/index.js
@@ -1,7 +1,6 @@
 /* eslint-disable import/named */
 import '@babel/polyfill'
 import 'raf/polyfill'
-import 'whatwg-fetch'
 import React from 'react'
 import ReactDOM from 'react-dom'
 import App from './App'
diff --git a/example/inline/index.js b/example/inline/index.js
index 259c5289..08fece29 100644
--- a/example/inline/index.js
+++ b/example/inline/index.js
@@ -1,7 +1,6 @@
 /* eslint-disable import/named */
 import '@babel/polyfill'
 import 'raf/polyfill'
-import 'whatwg-fetch'
 import React from 'react'
 import ReactDOM from 'react-dom'
 import App from './App'
diff --git a/example/main/index.js b/example/main/index.js
index 259c5289..08fece29 100644
--- a/example/main/index.js
+++ b/example/main/index.js
@@ -1,7 +1,6 @@
 /* eslint-disable import/named */
 import '@babel/polyfill'
 import 'raf/polyfill'
-import 'whatwg-fetch'
 import React from 'react'
 import ReactDOM from 'react-dom'
 import App from './App'
diff --git a/example/mp4/index.js b/example/mp4/index.js
index 259c5289..08fece29 100644
--- a/example/mp4/index.js
+++ b/example/mp4/index.js
@@ -1,7 +1,6 @@
 /* eslint-disable import/named */
 import '@babel/polyfill'
 import 'raf/polyfill'
-import 'whatwg-fetch'
 import React from 'react'
 import ReactDOM from 'react-dom'
 import App from './App'
diff --git a/example/package.json b/example/package.json
index 4d682a93..e84f60ca 100644
--- a/example/package.json
+++ b/example/package.json
@@ -14,8 +14,7 @@
     "raf": "^3.4.1",
     "react": "16.4.2",
     "react-dom": "16.4.2",
-    "react-hot-loader": "^4.3.12",
-    "whatwg-fetch": "^3.0.0"
+    "react-hot-loader": "^4.3.12"
   },
   "devDependencies": {
     "@zhihu/babel-preset": "^1.7.0",
diff --git a/yarn.lock b/yarn.lock
index f9868fbd..3d988b43 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -10366,7 +10366,7 @@ whatwg-encoding@^1.0.1, whatwg-encoding@^1.0.3:
   dependencies:
     iconv-lite "0.4.24"
 
-whatwg-fetch@>=0.10.0, whatwg-fetch@^3.0.0:
+whatwg-fetch@>=0.10.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/whatwg-fetch/-/whatwg-fetch-3.0.0.tgz#fc804e458cc460009b1a2b966bc8817d2578aefb"
   integrity sha512-9GSJUgz1D4MfyKU7KRqwOjXCXTqWdFNvEr7eUBYchQiVc744mqK/MzXPNR2WsPkmkOa4ywfg8C2n8h+13Bey1Q==