fix(binder): should bind on penetrate node whatevent plugin want to l…

…isten to event

related to #128

__tests__/situation/penetrate.js

@@ -0,0 +1,27 @@
+import Chimee from 'index';
+test('chimee penetrate event forward bug', () => {
+ const fn = jest.fn();
+ const plugin1 = {
+ name: 'plugin1',
+ penetrate: false,
+ inited() {
+ this.$on('click', fn);
+ },
+ };
+ const plugin2 = {
+ name: 'plugin2',
+ penetrate: true,
+ };
+ Chimee.install(plugin1);
+ Chimee.install(plugin2);
+ const player = new Chimee({
+ wrapper: document.createElement('div'),
+ plugins: [
+ plugin1.name,
+ plugin2.name,
+ ],
+ });
+ player.$plugins.plugin2.$dom.click();
+ expect(fn).toHaveBeenCalledTimes(1);
+ player.destroy();
+});

demo/chimee-plugin-controlbar/index.css

@@ -59,3 +59,12 @@ button:active {
  background-color: #36384A;
 }
 
+.my-plugin {
+ position: absolute;
+ width: 300px;
+ height: 300px;
+ top: 0;
+ right: 0;
+ background-color: #9D295A;
+}
+

demo/chimee-plugin-controlbar/index.js

@@ -1,21 +1,26 @@
 const Chimee = window.Chimee;
 const chimeePluginControlbar = window.chimeePluginControlbar;
+const myPlugin = {
+ name: 'my-plugin',
+ penetrate: true,
+ el: '<div class="my-plugin"></div>',
+ create() {},
+ events: {
+ // click(evt) {
+ // console.warn(evt);
+ // },
+ },
+};
 Chimee.install(chimeePluginControlbar);
+Chimee.install(myPlugin);
 const player = new Chimee({
  // 播放地址
- // src: 'http://cdn.toxicjohann.com/lostStar.mp4',
  src: 'http://cdn.toxicjohann.com/%E4%BA%8E%E6%98%AF.mp4',
- // src: 'http://yunxianchang.live.ujne7.com/vod-system-bj/TL1ce1196bce348070bfeef2116efbdea6.flv',
- // src: 'http://yunxianchang.live.ujne7.com/vod-system-bj/79_3041054cc65-ae8c-4b63-8937-5ccb05f79720.m3u8',
- // dom容器
  wrapper: '#wrapper',
- plugin: [ chimeePluginControlbar.name ],
- // preset: {
- // flv: window.chimeeKernelFlv,
- // hls: window.chimeeKernelHls
- // },
- // width: 60,
- // height: 90,
+ plugin: [
+ chimeePluginControlbar.name,
+ myPlugin.name,
+ ],
  autoplay: true,
  controls: true,
  muted: true,

package.json

@@ -74,7 +74,7 @@
  "core-js": "^2.5.7",
  "eslint": "^4.19.1",
  "eslint-config-egg": "^7.0.0",
- "eslint-plugin-flowtype": "^2.47.1",
+ "eslint-plugin-flowtype": "^2.48.0",
  "eslint-plugin-jest": "^21.17.0",
  "flow-bin": "^0.73.0",
  "husky": "^0.14.3",

src/dispatcher/binder.js

@@ -356,16 +356,8 @@ export default class Binder {
  fn = (...args) => this.trigger({ target, name, id: target }, ...args);
  this._addEventOnDom(targetDom, name, fn);
  } else if (target === 'video-dom') {
- if (!this.__dispatcher.plugins[id]) {
- // The plugin has not been created
- // We will be better to wait for it in order to check its penetrate
- this.needToCheckPendingVideoDomEventPlugins[id] = true;
- this.addPendingEvent(target, name, id);
- return;
- }
- const { $penetrate = false } = this.__dispatcher.plugins[id] || {};
  fn = (...args) => this.triggerSync({ target, name, id: target }, ...args);
- if ($penetrate) this.__dispatcher.dom.videoExtendedNodes.forEach(node => this._addEventOnDom(node, name, fn));
+ this.__dispatcher.dom.videoExtendedNodes.forEach(node => this._addEventOnDom(node, name, fn));
  this._addEventOnDom(targetDom, name, fn);
  }
  this.bindedEventNames[target].push(name);