From 8a18fb50906b3fd8ef85e9bddd15ed2ee3ccec8e Mon Sep 17 00:00:00 2001
From: toxic-johann <353904974@qq.com>
Date: Wed, 30 May 2018 23:30:51 +0800
Subject: [PATCH] fix(binder): should bind on penetrate node whatevent plugin
 want to listen to event

related to https://github.com/Chimeejs/chimee/issues/128
---
 __tests__/situation/penetrate.js        | 27 +++++++++++++++++++++++++
 demo/chimee-plugin-controlbar/index.css |  9 +++++++++
 demo/chimee-plugin-controlbar/index.js  | 27 +++++++++++++++----------
 package.json                            |  2 +-
 src/dispatcher/binder.js                | 10 +--------
 5 files changed, 54 insertions(+), 21 deletions(-)
 create mode 100644 __tests__/situation/penetrate.js

diff --git a/__tests__/situation/penetrate.js b/__tests__/situation/penetrate.js
new file mode 100644
index 00000000..3f75c78d
--- /dev/null
+++ b/__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();
+});
diff --git a/demo/chimee-plugin-controlbar/index.css b/demo/chimee-plugin-controlbar/index.css
index 38ba6222..b66e927f 100644
--- a/demo/chimee-plugin-controlbar/index.css
+++ b/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;
+}
+
diff --git a/demo/chimee-plugin-controlbar/index.js b/demo/chimee-plugin-controlbar/index.js
index 0f967614..dff68fc9 100644
--- a/demo/chimee-plugin-controlbar/index.js
+++ b/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,
diff --git a/package.json b/package.json
index 5e036e14..5501eeea 100644
--- a/package.json
+++ b/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",
diff --git a/src/dispatcher/binder.js b/src/dispatcher/binder.js
index e64e4700..fbdd9e3e 100644
--- a/src/dispatcher/binder.js
+++ b/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);