refactor: 调整代码结构

Author: xiaosongxiaosong

package.json

@@ -0,0 +1,55 @@
+{
+  "name": "reactjs-player",
+  "version": "1.2.1",
+  "description": "基于 react hooks 的 video 播放组件，结构简单，代码简洁，扩展方便。",
+  "keywords": [
+    "react",
+    "media",
+    "player",
+    "video",
+    "hls.js",
+    "flv.js",
+    "react-hooks"
+  ],
+  "author": "xiaosong <[email protected]>",
+  "homepage": "https://github.com/goblin-laboratory/reactjs-player/blob/master/packages/reactjs-player/README.md",
+  "license": "MIT",
+  "browser": "dist/index.umd.js",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/goblin-laboratory/reactjs-player.git"
+  },
+  "scripts": {
+    "lint": "eslint .",
+    "start": "rollup -c ./scripts/rollup.config.dev.js -w",
+    "build": "rollup -c ./scripts/rollup.config.prod.js",
+    "predeploy": "cd example && yarn install && yarn run build",
+    "deploy": "gh-pages -d example/build",
+    "nrm": "nrm use taobao"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.15.8",
+    "@rollup/plugin-babel": "^5.3.0",
+    "@rollup/plugin-commonjs": "^21.0.0",
+    "@rollup/plugin-node-resolve": "^13.0.5",
+    "@rollup/plugin-url": "^6.1.0",
+    "@svgr/rollup": "^5.5.0",
+    "gh-pages": "^3.2.3",
+    "less": "^4.1.2",
+    "postcss": "^8.3.9",
+    "rollup": "^2.58.0",
+    "rollup-plugin-filesize": "^9.1.1",
+    "rollup-plugin-peer-deps-external": "^2.2.4",
+    "rollup-plugin-postcss": "^4.0.1",
+    "rollup-plugin-uglify": "^6.0.4"
+  },
+  "peerDependencies": {
+    "@ant-design/icons": "^4.7.0",
+    "antd": "^4.16.13",
+    "fbemitter": "^3.0.0",
+    "numeral": "^2.0.6",
+    "prop-types": "^15.7.2",
+    "react": "^17.0.2",
+    "react-swf": "^1.0.7"
+  }
+}

scripts/rollup.config.dev.js

@@ -0,0 +1,5 @@
+import config from './rollup.config';
+
+process.env.NODE_ENV = 'development';
+
+export default config;

scripts/rollup.config.js

@@ -0,0 +1,63 @@
+// import resolve from '@rollup/plugin-node-resolve';
+import { nodeResolve } from "@rollup/plugin-node-resolve";
+import commonjs from "@rollup/plugin-commonjs";
+import { babel } from "@rollup/plugin-babel";
+import external from "rollup-plugin-peer-deps-external";
+import postcss from "rollup-plugin-postcss";
+import url from "@rollup/plugin-url";
+import svgr from "@svgr/rollup";
+import filesize from "rollup-plugin-filesize";
+
+import pkg from "../package.json";
+
+export default {
+  input: "src/index.js",
+  output: [
+    {
+      file: pkg.browser,
+      name: pkg.name,
+      format: "umd",
+      sourcemap: true,
+      globals: {
+        react: "React",
+        "prop-types": "PropTypes",
+        "numeral": "numeral",
+        "antd": "antd",
+        "@ant-design/icons": "@ant-design/icons",
+        "react-swf": "ReactSWF",
+        "fbemitter": "fbemitter",
+      },
+    },
+  ],
+  plugins: [
+    external(),
+    postcss({
+      modules: true,
+    }),
+    url(),
+    url({
+      limit: 0,
+      include: ["**/*.swf"],
+      emitFiles: true,
+      fileName: "[name][extname]",
+    }),
+    svgr(),
+    babel({
+      babelrc: false,
+      exclude: "node_modules/**",
+      babelHelpers: "bundled",
+      presets: [
+        [
+          "@babel/preset-env",
+          {
+            modules: false,
+          },
+        ],
+        "@babel/preset-react",
+      ],
+    }),
+    nodeResolve(),
+    commonjs(),
+    filesize(),
+  ],
+};

scripts/rollup.config.prod.js

@@ -0,0 +1,5 @@
+import config from './rollup.config';
+
+process.env.NODE_ENV = 'production';
+
+export default config;

src/Flvjs/index.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import useFlvjs from '../hooks/useFlvjs';
+
+const Flvjs = (props) => {
+  useFlvjs(props);
+  return null;
+};
+
+Flvjs.propTypes = {
+  getVideoElement: PropTypes.func.isRequired,
+  src: PropTypes.string,
+  config: PropTypes.object,
+  onMsgChange: PropTypes.func.isRequired,
+};
+
+Flvjs.defaultProps = {
+  src: '',
+  config: null,
+};
+
+export default React.memo(Flvjs);

src/GrindPlayer/GrindPlayer.js

@@ -0,0 +1,121 @@
+import { EventEmitter } from 'fbemitter';
+
+let emitter = null;
+let index = 0;
+
+class GrindPlayer {
+  /**
+   * 创建 GrindPlayer 实例
+   */
+  constructor(id) {
+    this.id = id;
+    this.el = null;
+    this.emitter = new EventEmitter();
+    this.tokenList = [];
+    this.eventMap = [];
+
+    this.addListener();
+  }
+
+  addListener() {
+    if (!emitter) {
+      emitter = new EventEmitter();
+    }
+
+    this.tokenList = [
+      emitter.addListener(`${this.id}.onJavaScriptBridgeCreated`, () => {
+        this.el = document.getElementById(this.id);
+        // this.el.addEventListener('mediaError', () => );
+      }),
+      emitter.addListener(`${this.id}.mediaSize`, data => {
+        if (0 === data.videoHeight && 0 === data.videoWidth) {
+          this.emitter.emit('canplay');
+        } else {
+          this.emitter.emit('canplaythrough');
+        }
+      }),
+      emitter.addListener(`${this.id}.paused`, () => this.emitter.emit('pause')),
+      emitter.addListener(`${this.id}.playing`, () => this.emitter.emit('playing')),
+      emitter.addListener(`${this.id}.seeking`, () => this.emitter.emit('seeking')),
+      emitter.addListener(`${this.id}.seeked`, () => this.emitter.emit('seeked')),
+      emitter.addListener(`${this.id}.complete`, () => this.emitter.emit('ended')),
+      emitter.addListener(`${this.id}.buffering`, () => this.emitter.emit('waiting')),
+
+      emitter.addListener(`${this.id}.durationChange`, e => this.emitter.emit('durationchange', e)),
+      emitter.addListener(`${this.id}.timeChange`, e => this.emitter.emit('timeupdate', e)),
+      emitter.addListener(`${this.id}.progress`, e => this.emitter.emit('progress', e)),
+
+      emitter.addListener(`${this.id}.volumeChange`, e => this.emitter.emit('volumechange', e)),
+    ];
+  }
+
+  invoker(methodName, ...args) {
+    if (!this.el) {
+      return;
+    }
+    this.el[methodName](...args);
+  }
+
+  addEventListener(event, fn) {
+    if (!this.eventMap) {
+      return;
+    }
+    const token = this.emitter.addListener(event, fn);
+    this.eventMap.push({ token, event, fn });
+  }
+
+  removeEventListener(event, fn) {
+    if (!this.eventMap) {
+      return;
+    }
+    this.eventMap = this.eventMap.filter(it => {
+      if (it.event !== event) {
+        return true;
+      }
+      if (!fn && it.fn !== fn) {
+        return true;
+      }
+      it.token.remove();
+      return false;
+    });
+  }
+
+  destroy() {
+    if (this.eventMap) {
+      this.eventMap.map(it => it.token.remove());
+      delete this.eventMap;
+    }
+
+    if (this.tokenList) {
+      this.tokenList.map(it => it.remove());
+      delete this.tokenList;
+    }
+
+    if (this.emitter) {
+      this.emitter.removeAllListeners();
+    }
+    delete this.emitter;
+
+    delete this.id;
+    delete this.el;
+  }
+}
+
+const onJSBridge = (playerId, event, data) => {
+  if (!emitter) {
+    emitter = new EventEmitter();
+  }
+  console.log(`${event}: ${JSON.stringify(data)}`);
+  emitter.emit(`${playerId}.${event}`, data);
+};
+
+export default {
+  getPlayerId: () => `grindPlayer${index++}`,
+
+  getGrindPlayer: (id, javascriptCallbackFunction) => {
+    if (!global[javascriptCallbackFunction]) {
+      global[javascriptCallbackFunction] = onJSBridge;
+    }
+    return new GrindPlayer(id);
+  },
+};

src/GrindPlayer/GrindPlayer.swf

@@ -0,0 +1,70 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import ReactSWF from 'react-swf';
+import './GrindPlayer.swf';
+import './flashlsOSMF.swf';
+import ReactPlayerContext from '../ReactPlayerContext';
+import useGrindPlayer from './useGrindPlayer';
+import useState from './useState';
+import useTime from './useTime';
+import useVolume from './useVolume';
+import styles from './index.module.less';
+
+const GrindPlayer = ({ live, src, type, grindPlayerSwf, flashlsOSMFSwf }) => {
+  const { ref, dispatch, id, javascriptCallbackFunction, ...state } = useGrindPlayer({ src });
+
+  const stateProps = useState({ ref, dispatch });
+  const timeProps = useTime({ ref, dispatch });
+  const volumeProps = useVolume({ ref, dispatch });
+
+  return (
+    <div className={styles.grindPlayer}>
+      {src && (
+        <ReactSWF
+          id={id}
+          src={grindPlayerSwf}
+          width="100%"
+          height="100%"
+          wmode="opaque"
+          allowFullScreen
+          allowScriptAccess="always"
+          bgcolor="#000000"
+          flashVars={{
+            src,
+            autoPlay: true,
+            bufferTime: 0.5,
+            streamType: live ? 'live' : 'recorded',
+            plugin_hls: 'application/x-mpegURL' === type ? flashlsOSMFSwf : undefined,
+            javascriptCallbackFunction,
+          }}
+        />
+      )}
+      <ReactPlayerContext.Provider
+        value={{
+          live,
+          src,
+          ...state,
+          ...stateProps,
+          ...timeProps,
+          ...volumeProps,
+        }}
+      />
+    </div>
+  );
+};
+
+GrindPlayer.propTypes = {
+  live: PropTypes.bool,
+  src: PropTypes.string.isRequired,
+  type: PropTypes.string.isRequired,
+  grindPlayerSwf: PropTypes.string,
+  flashlsOSMFSwf: PropTypes.string,
+};
+
+GrindPlayer.defaultProps = {
+  live: true,
+  grindPlayerSwf: 'http://unpkg.com/reactjs-player/dist/GrindPlayer.swf',
+  flashlsOSMFSwf: 'http://unpkg.com/reactjs-player/dist/flashlsOSMF.swf',
+};
+
+export default React.memo(GrindPlayer);

src/GrindPlayer/GrindPlayer_logging.swf

@@ -0,0 +1,11 @@
+.grindPlayer {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
+  min-width: 400px;
+  min-height: 300px;
+  overflow: hidden;
+  background: #000;
+}