使用 React 为 Chimee 开发插件

Chimee¹ 是由奇舞团开源的一套可扩展的H5组件化播放器框架。由于前段时间业务有视频播放的需求所以使用了它，并基于它提供的插件系统之上开发了一系列的插件，其中最复杂的是控制条插件。由于默认的样式无（实）法（在）满（是）足（太）设（难）计（看）需（了）求（！），所以我们重新开发了一套 lizheing/chimee-plugin-controlbar² 并总结一些心得，希望对大家有帮助。

const plugin = {
  // 插件名为 controller
  name: 'controller',
  // 插件实体为按钮
  el: '<button>play</button>',
  data: {
    text: 'play'
  },
  methods: {
    changeVideoStatus () {
      this[this.text]();
    },
    changeButtonText (text) {
      this.text = text;
      this.$dom.innerText = this.text;
    }
  },
  // 在插件创建的阶段，我们为插件绑定事件。
  create () {
    this.$dom.addEventListener('click', this.changeVideoStatus);
  },
  // 插件会在播放暂停操作发生后改变自己的文案及相应的行为
  events: {
    pause () {
      this.changeButtonText('play');
    },
    play () {
      this.changeButtonText('pause');
    }
  }
};

// 安装插件
Chimee.install(plugin);
const player = new Chimee({
  // 播放地址
  src: 'http://cdn.toxicjohann.com/lostStar.mp4',
  // dom容器
  wrapper: '#wrapper',
  // 使用插件
  plugin: ['controller'],
});

通过以上示例代码我们可以发现 Chimee 的插件的规则主要有以下几点：

• 插件需要暴露一个对象，并带有 name 属性用来标记插件名称，方便后续实例化的时候指定。
• HTML 模板相关的内容需要放在el 属性中，在其它方法中可以通过 this.$dom 访问到 DOM 对象。
• data属性用来存放数据，methods属性可以用来存放方法。两个属性中的数据可以直接通过this.xx 的形式访问到。
• events() 属性可以放置一些播放器的事件回调，Chimee 会自动做事件的绑定。

• data 虽然能存放数据，但是数据无法直接映射到 el 的 HTML 模板中，导致还是需要回归原本的 DOM 操作。
• 事件绑定需要等待 DOM 生成后在生命周期中进行手动的绑定，又回到了 DOM 操作时一堆 addEventListener 的年代了。

由于我们的业务是使用 React 开发的，所以就想是否可以通过引入 React 来解决上述 DOM 操作的问题。

import React from 'react';
import ReactDOM from 'react-dom';

import App from './App';
import Context from './Context';

export default {
  Context,
  name: 'plugin-demo',
  el: `<div class="plugin"></div>`,
  create() {
    ReactDOM.render(
      <Context.Provider value={this}>
        <App />
      </Context.Provider>,
      this.$dom
    );
  }
};

import React, { useContext, useState, useEffect } from 'react';
import Context from '../Context';

export default function () {
  const ctx = useContext(Context);
  const [cur, setCur] = useState(0);
  useEffect(() => {
    ctx.$on('timeupdate', () => setCur(ctx.currentTime));
  }, []);

  return (
    <div className="play--time">{cur}</div>
  )
}

回到具体的业务场景上，我们有一个需求是控制条需要显示下一条视频的标题和封面图，而这个数据是在业务代码中通过接口获取得到的，所以在最开始实例化播放器的时候我们是没办法传入该数据。最后我们决定用事件监听的方式解决该问题，通过自定义事件进行跨组件层级的数据传递。

import React, {useEffect} from 'react';
import Context from './context';

export default function() {
  const ctx = useContext(Context);

  useEffect(() => {
    const onEnded = event => {
      if(event === 'manual') {
        return true;
      }

      setTimeout(() => ctx.$emit('ended', 'manual'), 10000);
      return false;
    };

    ctx.$on('ended', onEnded);
    return () => ctx.$off('ended', onEnded);
  });

  return (<div>推迟10秒后结束</div>);
}

Chimee 的插件系统可扩展性比较强，如果对其比较感兴趣的可以看看官方的这篇《为什么要将 Chimee 设计成一个组件化框架？》⁴。使用 React 开发插件解决了事件和数据绑定的问题，该开发模式下基本上就是废弃了官方自己提供的 data, methods 和 events 三个属性，前两者自然是由 React 内部的state 和方法提供，后者则是自行在组件内部使用 ctx.$on 的形式手动监听。