[update] update testcase of fullscreen

what: why: how:
Chimeejs · Jul 28, 2017 · 53b13d0 · 53b13d0
1 parent a6d459a
commit 53b13d0
Show file tree

Hide file tree

Showing 3 changed files with 94 additions and 0 deletions.
diff --git a/__tests__/index.js b/__tests__/index.js
@@ -598,3 +598,46 @@ describe('Chimee', () => {
     expect(player.fullScreen()).toBe(false);
   });
 });
+
+describe('isFullScreen and fullScreenElement', () => {
+  let player;
+  beforeEach(() => {
+    player = new Chimee(document.createElement('div'));
+  });
+  test('default to be false', () => {
+    expect(player.isFullScreen).toBe(false);
+    expect(player.fullScreenElement).toBe();
+  });
+  test('wrapper', () => {
+    const target = player.__dispatcher.dom.wrapper;
+    document.fullscreenElement = target;
+    document.dispatchEvent(new Event('fullscreenchange'));
+    expect(player.isFullScreen).toBe(true);
+    expect(player.__dispatcher.dom[player.fullScreenElement]).toBe(target);
+  });
+  test('container', () => {
+    const target = player.__dispatcher.dom.container;
+    document.fullscreenElement = target;
+    document.dispatchEvent(new Event('fullscreenchange'));
+    expect(player.isFullScreen).toBe(true);
+    expect(player.__dispatcher.dom[player.fullScreenElement]).toBe(target);
+  });
+  test('video', () => {
+    const target = player.__dispatcher.dom.videoElement;
+    document.fullscreenElement = target;
+    document.dispatchEvent(new Event('fullscreenchange'));
+    expect(player.isFullScreen).toBe(true);
+    expect(player.__dispatcher.dom[player.fullScreenElement + 'Element']).toBe(target);
+  });
+  test('plugin', () => {
+    const player = new Chimee({
+      wrapper: document.createElement('div'),
+      plugin: ['stopFullScreen']
+    });
+    const target = player.stopFullScreen.$dom;
+    document.fullscreenElement = target;
+    document.dispatchEvent(new Event('fullscreenchange'));
+    expect(player.isFullScreen).toBe(true);
+    expect(player.fullScreenElement).toBe(target);
+  });
+});
diff --git a/src/dispatcher/dom.js b/src/dispatcher/dom.js
@@ -24,6 +24,8 @@ export default class Dom {
   container: Element;
   originHTML: string;
   plugins: {[string]: Element};
+  isFullScreen: boolean | string;
+  fullScreenElement: HTMLElement | string | void;
   __dispatcher: Dispatcher;
   __domEventHandlerList: {|[string]: Array<Function>|};
   __mouseInVideo: boolean;
@@ -80,6 +82,8 @@ export default class Dom {
    */
   __mouseInVideo = false;
   __videoExtendedNodes = [];
+  isFullScreen = false;
+  fullScreenElement = undefined;
   constructor (wrapper: string | Element, dispatcher: Dispatcher) {
     this.__dispatcher = dispatcher;
     if(!isElement(wrapper) && !isString(wrapper)) throw new TypeError('Illegal wrapper');
@@ -110,6 +114,7 @@ export default class Dom {
       this.videoDomEventHandlerList.push(fn);
       addEvent(this.videoElement, key, fn);
     });
+    this._bindFullScreen();
   }
   installVideo (videoElement: HTMLVideoElement): HTMLVideoElement {
     this.__videoExtendedNodes.push(videoElement);
@@ -331,6 +336,7 @@ export default class Dom {
       removeEvent(this.container, key, this.containerDomEventHandlerList[index]);
       removeEvent(this.wrapper, key, this.wrapperDomEventHandlerList[index]);
     });
+    this._bindFullScreen(true);
     this.wrapper.innerHTML = this.originHTML;
     delete this.wrapper;
     delete this.plugins;
@@ -346,6 +352,43 @@ export default class Dom {
     isFunction(this.videoElement.focus) && this.videoElement.focus();
     window.scrollTo(x, y);
   }
+  @autobind
+  _fullScreenMonitor () {
+    const element = [
+      'fullscreenElement',
+      'webkitFullscreenElement',
+      'mozFullScreenElement',
+      'msFullscreenElement'
+    ].reduce((element, key) => {
+      // $FlowFixMe: support computed element on document
+      return element || document[key];
+    }, null);
+    if(!element || (!isPosterityNode(this.wrapper, element) && element !== this.wrapper)) {
+      this.isFullScreen = false;
+      this.fullScreenElement = undefined;
+      return;
+    }
+    this.isFullScreen = true;
+    this.fullScreenElement = this.wrapper === element
+      ? 'wrapper'
+      : this.container === element
+        ? 'container'
+        : this.videoElement === element
+          ? 'video'
+          : element;
+  }
+  _bindFullScreen (remove?: boolean) {
+    if(!remove) this._fullScreenMonitor();
+    [
+      'webkitfullscreenchange',
+      'mozfullscreenchange',
+      'msfullscreenchange',
+      'fullscreenchange'
+    ].forEach(key => {
+      // $FlowFixMe: support computed element on document
+      document[(remove ? 'remove' : 'add') + 'EventListener'](key, this._fullScreenMonitor);
+    });
+  }
   /**
    * get the event handler for dom to bind
    */

diff --git a/src/dispatcher/video-wrapper.js b/src/dispatcher/video-wrapper.js
@@ -288,6 +288,14 @@ export default @autobindClass() class VideoWrapper {
     return this.__dispatcher.order;
   }
 
+  get isFullScreen (): boolean | string {
+    return this.__dispatcher.dom.isFullScreen;
+  }
+
+  get fullScreenElement (): HTMLElement | string | void {
+    return this.__dispatcher.dom.fullScreenElement;
+  }
+
   __addEvents (key: string, fn: Function) {
     this.__events[key] = this.__events[key] || [];
     this.__events[key].push(fn);