refactor react-aplayer

Author: sabrinaluo

src/events.js

@@ -0,0 +1,43 @@
+export const audioEvents = [
+  'abort',
+  'canplay',
+  'canplaythrough',
+  'durationchange',
+  'emptied',
+  'ended',
+  'error',
+  'loadeddata',
+  'loadedmetadata',
+  'loadstart',
+  'mozaudioavailable',
+  'pause',
+  'play',
+  'playing',
+  'progress',
+  'ratechange',
+  'seeked',
+  'seeking',
+  'stalled',
+  'suspend',
+  'timeupdate',
+  'volumechange',
+  'waiting'
+];
+
+export const playerEvents = [
+  'listshow',
+  'listhide',
+  'listadd',
+  'listremove',
+  'listswitch',
+  'listclear',
+  'noticeshow',
+  'noticehide',
+  'destroy',
+  'lrcshow',
+  'lrchide'
+];
+
+const events = [...audioEvents, ...playerEvents];
+
+export default events;

src/react-aplayer.js

@@ -1,98 +1,93 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import APlayer from 'aplayer';
+import 'aplayer/dist/APlayer.min.css';
+import events from './events';
 
-const events = ['play', 'pause', 'playing', 'canplay', 'ended', 'error'];
 const capitalize = function(str) {
   return str[0].toUpperCase() + str.slice(1);
 };
 
-export default class ReactAplayer extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      control: null,
-    };
-  }
+const eventsPropTypes = events.reduce((acc, event) => {
+  acc[`on${capitalize(event)}`] = PropTypes.func;
+  return acc;
+}, {});
 
-  render() {
-    return (
-      <div
-        className="aplayer"
-        ref={el => {
-          this.el = el;
-        }}
-      />
-    );
-  }
+const audioItemShape = PropTypes.shape({
+  name: PropTypes.string,
+  artist: PropTypes.string,
+  url: PropTypes.string,
+  cover: PropTypes.string,
+  lrc: PropTypes.string,
+  theme: PropTypes.string,
+  type: PropTypes.string
+});
+
+class ReactAplayer extends React.Component {
+  static propTypes = {
+    onInit: PropTypes.func,
+    // belows are the same props with aplayer
+    fixed: PropTypes.bool,
+    mini: PropTypes.bool,
+    autoplay: PropTypes.bool,
+    theme: PropTypes.string,
+    loop: PropTypes.oneOf(['all', 'one', 'none']),
+    order: PropTypes.oneOf(['list', 'random']),
+    preload: PropTypes.oneOf(['auto', 'metadata', 'none']),
+    volume: PropTypes.number,
+    audio: PropTypes.oneOfType([
+      audioItemShape,
+      PropTypes.arrayOf(audioItemShape)
+    ]),
+    customAudioType: PropTypes.object,
+    mutex: PropTypes.bool,
+    lrcType: PropTypes.number,
+    listFolded: PropTypes.bool,
+    listMaxHeight: PropTypes.string,
+    storageName: PropTypes.string,
+    // belows are bind event listener
+    ...eventsPropTypes
+  };
+
+  static defaultProps = {
+    onInit() {},
+    fixed: false,
+    mini: false,
+    autoplay: false,
+    theme: '#b7daff',
+    loop: 'all',
+    order: 'list',
+    preload: 'auto',
+    volume: 0.7,
+    mutex: true,
+    lrcType: 0,
+    listFolded: false,
+    storageName: 'react-aplayer-setting'
+  };
 
   componentDidMount() {
-    let ap = (this.state.control = new APlayer({
-      element: this.el,
-      narrow: this.props.narrow,
-      autoplay: this.props.autoplay,
-      showlrc: this.props.showlrc,
-      mutex: this.props.mutex,
-      theme: this.props.theme,
-      preload: this.props.preload,
-      mode: this.props.mode,
-      listmaxheight: this.props.listmaxheight,
-      music: this.props.music,
-    }));
+    const { onInit, ...restProps } = this.props;
+
+    const control = new APlayer({
+      ...restProps,
+      container: this.container
+    });
 
     events.forEach(event => {
-      let funcName = 'on' + capitalize(event);
-      let callback = this.props[funcName];
+      const funcName = 'on' + capitalize(event);
+      const callback = this.props[funcName];
       if (callback) {
-        ap.on(event, callback);
+        control.on(event, callback);
       }
     });
-  }
-}
 
-ReactAplayer.propTypes = {
-  autoplay: PropTypes.bool,
-  listmaxheight: PropTypes.string,
-  mode: PropTypes.oneOf(['circulation', 'order', 'random', 'single']),
-  mutex: PropTypes.bool,
-  narrow: PropTypes.bool,
-  preload: PropTypes.oneOf(['auto', 'metadata', 'none']),
-  showlrc: PropTypes.number,
-  theme: PropTypes.string,
-  music(props, propName) {
-    const prop = props[propName];
-    let audios;
-    if (!prop) return new Error(propName + ' is required');
-
-    if (Object.prototype.toString.call(prop) === '[object Object]') {
-      audios = [prop];
-    } else if (Array.isArray(prop)) {
-      audios = prop;
-    } else {
-      return new Error(propName + ' should be Object / Array');
-    }
+    this.control = control;
+    onInit(control);
+  }
 
-    for (let i = 0; i < audios.length; i++) {
-      let item = audios[i];
-      if (!item.url) {
-        return new Error(`${propName} should have 'url' property`);
-      }
-    }
-  },
-  onCanplay: PropTypes.func,
-  onPlay: PropTypes.func,
-  onPause: PropTypes.func,
-  onPlaying: PropTypes.func,
-  onEnded: PropTypes.func,
-  onError: PropTypes.func,
-};
+  render() {
+    return <div ref={el => (this.container = el)} />;
+  }
+}
 
-ReactAplayer.defaultProps = {
-  autoplay: false,
-  mode: 'circulation',
-  mutex: false,
-  narrow: false,
-  preload: 'auto',
-  showlrc: 0,
-  theme: '#b7daff',
-};
+export default ReactAplayer;