fix flv player bug

public/react/package-lock.json

@@ -5138,6 +5138,15 @@
         "readable-stream": "^2.3.6"
       }
     },
+    "flv.js": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npm.taobao.org/flv.js/download/flv.js-1.5.0.tgz",
+      "integrity": "sha1-+lm+1DkdcENc+odArEDsAHDvmK4=",
+      "requires": {
+        "es6-promise": "^4.2.5",
+        "webworkify": "^1.5.0"
+      }
+    },
     "fmin": {
       "version": "0.0.2",
       "resolved": "https://registry.npm.taobao.org/fmin/download/fmin-0.0.2.tgz",
@@ -14598,17 +14607,6 @@
         }
       }
     },
-    "react-flv-player": {
-      "version": "1.0.9",
-      "resolved": "https://registry.npm.taobao.org/react-flv-player/download/react-flv-player-1.0.9.tgz",
-      "integrity": "sha1-PYPwacfuoALt9rqlXB+JFZvHyWk=",
-      "requires": {
-        "babel-preset-react": "^6.24.1",
-        "object-assign": "^4.1.1",
-        "prop-types": "^15.6.0",
-        "react": "^16.8.6"
-      }
-    },
     "react-hot-loader": {
       "version": "4.8.3",
       "resolved": "http://registry.npm.taobao.org/react-hot-loader/download/react-hot-loader-4.8.3.tgz",
@@ -18422,6 +18420,11 @@
       "resolved": "http://registry.npm.taobao.org/websocket-extensions/download/websocket-extensions-0.1.3.tgz",
       "integrity": "sha1-XS/yKXcAPsaHpLhwc9+7rBRszyk="
     },
+    "webworkify": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npm.taobao.org/webworkify/download/webworkify-1.5.0.tgz",
+      "integrity": "sha1-c0rYendN5uvdVG4dPgJ9pbj0pCw="
+    },
     "whatwg-encoding": {
       "version": "1.0.5",
       "resolved": "http://registry.npm.taobao.org/whatwg-encoding/download/whatwg-encoding-1.0.5.tgz",

public/react/package.json

@@ -39,6 +39,7 @@
     "eslint-plugin-react": "7.4.0",
     "extract-text-webpack-plugin": "3.0.2",
     "file-loader": "1.1.5",
+    "flv.js": "^1.5.0",
     "fs-extra": "3.0.1",
     "html-webpack-plugin": "2.29.0",
     "immutability-helper": "^2.6.6",
@@ -78,7 +79,6 @@
     "react-cookies": "^0.1.1",
     "react-dev-utils": "^5.0.0",
     "react-dom": "^16.9.0",
-    "react-flv-player": "^1.0.9",
     "react-hot-loader": "^4.0.0",
     "react-infinite-scroller": "^1.2.4",
     "react-loadable": "^5.3.1",

public/react/src/modules/courses/Video/video-play/flv-player.jsx

@@ -0,0 +1,37 @@
+import React, { useEffect, useRef } from 'react'
+import Flv from 'flv.js'
+
+export default ({ url }) => {
+  const ref = useRef()
+
+  useEffect(() => {
+    let player = null
+    if (Flv.isSupported) {
+      player = Flv.createPlayer({
+        type: 'flv',
+        volume: 0.8,
+        url,
+        muted: false
+      })
+
+      if (ref.current) {
+        player.attachMediaElement(ref.current)
+        player.load()
+        player.play()
+      }
+    }
+    return () => {
+      if (player) {
+        player.unload()
+        player.pause()
+        player.destroy()
+        player = null
+      }
+    }
+
+  }, [url, ref.current])
+
+  return (
+    <video ref={ref} controls autoPlay={true} muted={false} className="flv-player"></video>
+  )
+}

public/react/src/modules/courses/Video/video-play/index.jsx

@@ -1,5 +1,5 @@
 import React, { Fragment } from 'react'
-import { ReactFlvPlayer } from 'react-flv-player'
+import ReactFlvPlayer from './flv-player'
 
 export default ({ src }) => {
   const suf = src.split('.').pop()