The simplest demo for Chimee with only one button
+
@@ -324,10 +324,16 @@ export default class Bus {
_eventProcessor (key: string, {sync}: {sync: boolean}, ...args: any) {
const isKernelMethod: boolean = kernelMethods.indexOf(key) > -1;
const isDomMethod: boolean = domMethods.indexOf(key) > -1;
- if(isKernelMethod || isDomMethod) {
- this.__dispatcher[isKernelMethod ? 'kernel' : 'dom'][key](...args);
+ const isDispatcherMethod: boolean = dispatcherMethods.indexOf(key) > -1;
+ if(isKernelMethod || isDomMethod || isDispatcherMethod) {
+ if(isDispatcherMethod) {
+ this.__dispatcher[key](...args);
+ } else {
+ this.__dispatcher[isKernelMethod ? 'kernel' : 'dom'][key](...args);
+ }
if(videoEvents.indexOf(key) > -1 ||
- domEvents.indexOf(key) > -1) return true;
+ domEvents.indexOf(key) > -1 ||
+ noTriggerEvents.indexOf(key) > -1) return true;
}
// $FlowFixMe: flow do not support computed sytax on classs, but it's ok here
return this[sync ? 'triggerSync' : 'trigger'](key, ...args);
diff --git a/src/dispatcher/plugin.js b/src/dispatcher/plugin.js
index 5eb8cf6..f48208a 100644
--- a/src/dispatcher/plugin.js
+++ b/src/dispatcher/plugin.js
@@ -1,8 +1,6 @@
// @flow
-import {isError, isString, isFunction, isEmpty, isObject, isBoolean, isInteger, isPromise, deepAssign, bind, isArray, Log} from 'chimee-helper';
-import {before, accessor, applyDecorators, frozen, autobindClass, nonenumerable, nonextendable} from 'toxic-decorators';
-import {eventBinderCheck, attrAndStyleCheck} from 'helper/checker';
-import {domEvents} from 'helper/const';
+import {isError, isString, isFunction, isEmpty, isObject, isBoolean, isInteger, isPromise, deepAssign, bind, Log} from 'chimee-helper';
+import {accessor, applyDecorators, frozen, autobindClass} from 'toxic-decorators';
import VideoWrapper from 'dispatcher/video-wrapper';
/**
@@ -24,7 +22,6 @@ export default @autobindClass() class Plugin extends VideoWrapper {
readySync: boolean;
destroyed: boolean;
$dom: HTMLElement;
- __events: PluginEvents;
$level: number;
__level: number;
$operable: boolean;
@@ -39,7 +36,6 @@ export default @autobindClass() class Plugin extends VideoWrapper {
destroyed = false;
VERSION = process.env.PLAYER_VERSION;
__operable = true;
- __events = {};
__level = 0;
/**
*
@@ -247,37 +243,7 @@ export default @autobindClass() class Plugin extends VideoWrapper {
});
return this.readySync || this.ready;
}
- /**
- * set style
- * @param {string} element optional, default to be video, you can choose from video | container | wrapper
- * @param {string} attribute the atrribue name
- * @param {any} value optional, when it's no offer, we consider you want to get the attribute's value. When it's offered, we consider you to set the attribute's value, if the value you passed is undefined, that means you want to remove the value;
- */
- @before(attrAndStyleCheck)
- $css (method: string, ...args: Array): string {
- return this.__dispatcher.dom[method + 'Style'](...args);
- }
- /**
- * set attr
- * @param {string} element optional, default to be video, you can choose from video | container | wrapper
- * @param {string} attribute the atrribue name
- * @param {any} value optional, when it's no offer, we consider you want to get the attribute's value. When it's offered, we consider you to set the attribute's value, if the value you passed is undefined, that means you want to remove the value;
- */
- @before(attrAndStyleCheck)
- $attr (method: string, ...args: Array): string {
- if(method === 'set' && /video/.test(args[0])) {
- if(!this.__dispatcher.videoConfigReady) {
- Log.warn('plugin', `Plugin ${this.__id} is tring to set attribute on video before video inited. Please wait until the inited event has benn trigger`);
- return args[2];
- }
- if(this.$videoConfig._realDomAttr.indexOf(args[1]) > -1) {
- const [, key, val] = args;
- this.$videoConfig[key] = val;
- return val;
- }
- }
- return this.__dispatcher.dom[method + 'Attr'](...args);
- }
+
/**
* call fullscreen api on some specific element
* @param {boolean} flag true means fullscreen and means exit fullscreen
@@ -293,63 +259,7 @@ export default @autobindClass() class Plugin extends VideoWrapper {
const topLevel = this.__dispatcher._getTopLevel(this.$inner);
this.$level = topLevel + 1;
}
- /**
- * bind event handler through this function
- * @param {string} key event's name
- * @param {Function} fn event's handler
- */
- @before(eventBinderCheck)
- $on (key: string, fn: Function) {
- this.__dispatcher.bus.on(this.__id, key, fn);
- // set on __events as mark so that i can destroy it when i destroy
- this.__addEvents(key, fn);
- }
- /**
- * remove event handler through this function
- * @param {string} key event's name
- * @param {Function} fn event's handler
- */
- @before(eventBinderCheck)
- $off (key: string, fn: Function) {
- this.__dispatcher.bus.off(this.__id, key, fn);
- this.__removeEvents(key, fn);
- }
- /**
- * bind one time event handler
- * @param {string} key event's name
- * @param {Function} fn event's handler
- */
- @before(eventBinderCheck)
- $once (key: string, fn: Function) {
- const self = this;
- const boundFn = function (...args) {
- bind(fn, this)(...args);
- self.__removeEvents(key, boundFn);
- };
- self.__addEvents(key, boundFn);
- this.__dispatcher.bus.once(this.__id, key, boundFn);
- }
- /**
- * emit an event
- * @param {string} key event's name
- * @param {...args} args
- */
- $emit (key: string, ...args: any) {
- if(!isString(key)) throw new TypeError('$emit key parameter must be String');
- if(domEvents.indexOf(key.replace(/^\w_/, '')) > -1) {
- Log.warn('plugin', `You are using $emit to emit ${key} event. As $emit is wrapped in Promise. It make you can't use event.preventDefault and event.stopPropagation. So we advice you to use $emitSync`);
- }
- this.__dispatcher.bus.emit(key, ...args);
- }
- /**
- * emit a sync event
- * @param {string} key event's name
- * @param {...args} args
- */
- $emitSync (key: string, ...args: any) {
- if(!isString(key)) throw new TypeError('$emitSync key parameter must be String');
- return this.__dispatcher.bus.emitSync(key, ...args);
- }
+
$throwError (error: Error | string) {
this.__dispatcher.throwError(error);
}
@@ -360,27 +270,11 @@ export default @autobindClass() class Plugin extends VideoWrapper {
$destroy () {
isFunction(this.destroy) && this.destroy();
super.__destroy();
- Object.keys(this.__events)
- .forEach(key => {
- if(!isArray(this.__events[key])) return;
- this.__events[key].forEach(fn => this.$off(key, fn));
- });
- delete this.__events;
this.__dispatcher.dom.removePlugin(this.__id);
delete this.__dispatcher;
delete this.$dom;
this.destroyed = true;
}
- @nonenumerable
- @nonextendable
- get $plugins (): plugins {
- return this.__dispatcher.plugins;
- }
- @nonenumerable
- @nonextendable
- get $pluginOrder (): Array {
- return this.__dispatcher.order;
- }
/**
* to tell us if the plugin can be operable, can be dynamic change
* @type {boolean}
@@ -405,15 +299,4 @@ export default @autobindClass() class Plugin extends VideoWrapper {
get $level (): number {
return this.__level;
}
- __addEvents (key: string, fn: Function) {
- this.__events[key] = this.__events[key] || [];
- this.__events[key].push(fn);
- }
- __removeEvents (key: string, fn: Function) {
- if(isEmpty(this.__events[key])) return;
- const index = this.__events[key].indexOf(fn);
- if(index < 0) return;
- this.__events[key].splice(index, 1);
- if(isEmpty(this.__events[key])) delete this.__events[key];
- }
};
diff --git a/src/dispatcher/video-wrapper.js b/src/dispatcher/video-wrapper.js
index 2db01c4..f7f3008 100644
--- a/src/dispatcher/video-wrapper.js
+++ b/src/dispatcher/video-wrapper.js
@@ -1,12 +1,15 @@
// @flow
-import {bind, isString, getDeepProperty, isArray, isObject, isFunction, Log} from 'chimee-helper';
-import {videoReadOnlyProperties, videoMethods, kernelMethods, domMethods} from 'helper/const';
-import {accessor, nonenumerable, applyDecorators, watch} from 'toxic-decorators';
+import {bind, isString, getDeepProperty, isArray, isObject, isFunction, Log, isEmpty} from 'chimee-helper';
+import {videoReadOnlyProperties, videoMethods, kernelMethods, domMethods, domEvents} from 'helper/const';
+import {attrAndStyleCheck, eventBinderCheck} from 'helper/checker';
+import {accessor, nonenumerable, applyDecorators, watch, alias, before, nonextendable, autobindClass} from 'toxic-decorators';
import VideoConfig from 'dispatcher/video-config';
-export default class VideoWrapper {
+export default @autobindClass() class VideoWrapper {
__id: string;
__dispatcher: Dispatcher;
__unwatchHandlers: Array;
+ __events: PluginEvents;
+ __events = {};
__unwatchHandlers = [];
__wrapAsVideo (videoConfig: VideoConfig) {
// bind video read only properties on instance, so that you can get info like buffered
@@ -148,7 +151,143 @@ export default class VideoWrapper {
obj.__del(property);
}
+ $silentLoad (...args: Array<*>) {
+
+ this.__dispatcher.silentLoad(...args);
+ }
+
+ /**
+ * emit an event
+ * @param {string} key event's name
+ * @param {...args} args
+ */
+ @alias('emit')
+ $emit (key: string, ...args: any) {
+ if(!isString(key)) throw new TypeError('emit key parameter must be String');
+ if(domEvents.indexOf(key.replace(/^\w_/, '')) > -1) {
+ Log.warn('plugin', `You are try to emit ${key} event. As emit is wrapped in Promise. It make you can't use event.preventDefault and event.stopPropagation. So we advice you to use emitSync`);
+ }
+ this.__dispatcher.bus.emit(key, ...args);
+ }
+
+ /**
+ * emit a sync event
+ * @param {string} key event's name
+ * @param {...args} args
+ */
+ @alias('emitSync')
+ $emitSync (key: string, ...args: any) {
+ if(!isString(key)) throw new TypeError('emitSync key parameter must be String');
+ return this.__dispatcher.bus.emitSync(key, ...args);
+ }
+
+ /**
+ * bind event handler through this function
+ * @param {string} key event's name
+ * @param {Function} fn event's handler
+ */
+ @alias('on')
+ @alias('addEventListener')
+ @before(eventBinderCheck)
+ $on (key: string, fn: Function) {
+ this.__dispatcher.bus.on(this.__id, key, fn);
+ // set on __events as mark so that i can destroy it when i destroy
+ this.__addEvents(key, fn);
+ }
+ /**
+ * remove event handler through this function
+ * @param {string} key event's name
+ * @param {Function} fn event's handler
+ */
+ @alias('off')
+ @alias('removeEventListener')
+ @before(eventBinderCheck)
+ $off (key: string, fn: Function) {
+ this.__dispatcher.bus.off(this.__id, key, fn);
+ this.__removeEvents(key, fn);
+ }
+ /**
+ * bind one time event handler
+ * @param {string} key event's name
+ * @param {Function} fn event's handler
+ */
+ @alias('once')
+ @before(eventBinderCheck)
+ $once (key: string, fn: Function) {
+ const self = this;
+ const boundFn = function (...args) {
+ bind(fn, this)(...args);
+ self.__removeEvents(key, boundFn);
+ };
+ self.__addEvents(key, boundFn);
+ this.__dispatcher.bus.once(this.__id, key, boundFn);
+ }
+
+ /**
+ * set style
+ * @param {string} element optional, default to be video, you can choose from video | container | wrapper
+ * @param {string} attribute the atrribue name
+ * @param {any} value optional, when it's no offer, we consider you want to get the attribute's value. When it's offered, we consider you to set the attribute's value, if the value you passed is undefined, that means you want to remove the value;
+ */
+ @alias('css')
+ @before(attrAndStyleCheck)
+ $css (method: string, ...args: Array): string {
+ return this.__dispatcher.dom[method + 'Style'](...args);
+ }
+
+ /**
+ * set attr
+ * @param {string} element optional, default to be video, you can choose from video | container | wrapper
+ * @param {string} attribute the atrribue nameß
+ * @param {any} value optional, when it's no offer, we consider you want to get the attribute's value. When it's offered, we consider you to set the attribute's value, if the value you passed is undefined, that means you want to remove the value;
+ */
+ @alias('attr')
+ @before(attrAndStyleCheck)
+ $attr (method: string, ...args: Array): string {
+ if(method === 'set' && /video/.test(args[0])) {
+ if(!this.__dispatcher.videoConfigReady) {
+ Log.warn('chimee', `${this.__id} is tring to set attribute on video before video inited. Please wait until the inited event has benn trigger`);
+ return args[2];
+ }
+ if(this.__dispatcher.videoConfig._realDomAttr.indexOf(args[1]) > -1) {
+ const [, key, val] = args;
+ this.__dispatcher.videoConfig[key] = val;
+ return val;
+ }
+ }
+ return this.__dispatcher.dom[method + 'Attr'](...args);
+ }
+
+ @nonenumerable
+ @nonextendable
+ get $plugins (): plugins {
+ return this.__dispatcher.plugins;
+ }
+ @nonenumerable
+ @nonextendable
+ get $pluginOrder (): Array {
+ return this.__dispatcher.order;
+ }
+
+ __addEvents (key: string, fn: Function) {
+ this.__events[key] = this.__events[key] || [];
+ this.__events[key].push(fn);
+ }
+ __removeEvents (key: string, fn: Function) {
+ if(isEmpty(this.__events[key])) return;
+ const index = this.__events[key].indexOf(fn);
+ if(index < 0) return;
+ this.__events[key].splice(index, 1);
+ if(isEmpty(this.__events[key])) delete this.__events[key];
+ }
+
__destroy () {
this.__unwatchHandlers.forEach(unwatcher => unwatcher());
+ Object.keys(this.__events)
+ .forEach(key => {
+ if(!isArray(this.__events[key])) return;
+ this.__events[key].forEach(fn => this.$off(key, fn));
+ });
+ delete this.__events;
}
}
diff --git a/src/helper/const.js b/src/helper/const.js
index 812fc71..894f6c1 100644
--- a/src/helper/const.js
+++ b/src/helper/const.js
@@ -70,6 +70,9 @@ export const domEvents = [
'msfullscreenchange',
'contextmenu'
];
+export const noTriggerEvents = [
+ 'silentLoad'
+];
export const kernelMethods = [
'play',
'pause',
diff --git a/src/index.js b/src/index.js
index 3108ba7..89defa2 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,10 +1,8 @@
// @flow
import Dispatcher from './dispatcher/index';
-import {isString, isFunction, isElement, isObject, Log} from 'chimee-helper';
+import {isString, isFunction, isElement, isObject} from 'chimee-helper';
import Plugin from './dispatcher/plugin';
-import {frozen, before, alias, autobindClass} from 'toxic-decorators';
-import {domEvents} from 'helper/const';
-import {eventBinderCheck, attrAndStyleCheck} from 'helper/checker';
+import {frozen, autobindClass} from 'toxic-decorators';
import VideoWrapper from 'dispatcher/video-wrapper';
import GlobalConfig from 'global/config';
@autobindClass()
@@ -72,91 +70,6 @@ export default class Chimee extends VideoWrapper {
unuse (name: string) {
this.__dispatcher.unuse(name);
}
- /**
- * bind event handler through this function
- * @param {string} key event's name
- * @param {Function} fn event's handler
- */
- @alias('addEventListener')
- @before(eventBinderCheck)
- on (key: string, fn: Function) {
- this.__dispatcher.bus.on('_vm', key, fn);
- return this;
- }
- /**
- * remove event handler through this function
- * @param {string} key event's name
- * @param {Function} fn event's handler
- */
- @before(eventBinderCheck)
- @alias('removeEventListener')
- off (key: string, fn: Function) {
- return this.__dispatcher.bus.off('_vm', key, fn);
- }
- /**
- * bind one time event handler
- * @param {string} key event's name
- * @param {Function} fn event's handler
- */
- @before(eventBinderCheck)
- once (key: string, fn: Function) {
- return this.__dispatcher.bus.once('_vm', key, fn);
- }
- /**
- * emit an event
- * @param {string} key event's name
- * @param {...args} args
- */
- emit (key: string, ...args: any) {
- if(!isString(key)) throw new TypeError('emit key parameter must be String');
- if(domEvents.indexOf(key.replace(/^\w_/, '')) > -1) {
- Log.warn('plugin', `You are using emit to emit ${key} event. As emit is wrapped in Promise. It make you can't use event.preventDefault and event.stopPropagation. So we advice you to use emitSync`);
- }
- return this.__dispatcher.bus.emit(key, ...args);
- }
- /**
- * emit a sync event
- * @param {string} key event's name
- * @param {...args} args
- */
- emitSync (key: string, ...args: any) {
- if(!isString(key)) throw new TypeError('emitSync key parameter must be String');
- return this.__dispatcher.bus.emitSync(key, ...args);
- }
- /**
- * set style
- * @param {string} element optional, default to be video, you can choose from video | container | wrapper
- * @param {string} attribute the atrribue name
- * @param {any} value optional, when it's no offer, we consider you want to get the attribute's value. When it's offered, we consider you to set the attribute's value, if the value you passed is undefined, that means you want to remove the value;
- */
- @before(attrAndStyleCheck)
- css (method: string, ...args: Array): string {
- // $FlowFixMe: we support this here
- return this.__dispatcher.dom[method + 'Style'](...args);
- }
- /**
- * set attr
- * @param {string} element optional, default to be video, you can choose from video | container | wrapper
- * @param {string} attribute the atrribue nameß
- * @param {any} value optional, when it's no offer, we consider you want to get the attribute's value. When it's offered, we consider you to set the attribute's value, if the value you passed is undefined, that means you want to remove the value;
- */
- @before(attrAndStyleCheck)
- attr (method: string, ...args: Array): string {
- if(method === 'set' && /video/.test(args[0])) {
- if(!this.__dispatcher.videoConfigReady) {
- Log.warn('plugin', 'You are tring to set attribute on video before video inited. Please wait until the inited event has benn trigger');
- return args[2];
- }
- if(this.__dispatcher.videoConfig._realDomAttr.indexOf(args[1]) > -1) {
- const [, key, val] = args;
- // $FlowFixMe: we have check the computed key
- this.__dispatcher.videoConfig[key] = val;
- return val;
- }
- }
- // $FlowFixMe: we support this here
- return this.__dispatcher.dom[method + 'Attr'](...args);
- }
__throwError (error: Error | string) {
if(isString(error)) error = new Error(error);
const errorHandler = this.config.errorHandler || Chimee.config.errorHandler;