feat(focus-screen): adding focus-screen component

src/core/default-modules.ts

@@ -21,6 +21,7 @@ import KeyboardControls from '../modules/keyboard-control/keyboard-control';
 import DebugPanel from '../modules/ui/debug-panel/debug-panel';
 
 import Screen, { IScreenAPI } from '../modules/ui/screen/screen';
+import FocusScreen from '../modules/ui/focus-screen/focus-screen';
 import InteractionIndicator from '../modules/ui/interaction-indicator/interaction-indicator';
 
 import Overlay, { IOverlayAPI } from '../modules/ui/overlay/overlay';
@@ -99,6 +100,7 @@ export const modules: { [id: string]: any } = {
   DebugPanel,
 
   Screen,
+  FocusScreen,
   InteractionIndicator,
 
   Overlay,

src/modules/keyboard-control/keyboard-control.ts

@@ -14,15 +14,15 @@ import { IEventEmitter } from '../event-emitter/types';
 import { IPlaybackEngine } from '../playback-engine/types';
 import { IPlayerConfig } from '../../core/config';
 import { IKeyboardControl } from './types';
-import { IRootContainer } from '../root-container/types';
 import { ListenerFn } from 'eventemitter3';
+import { IFocusScreen } from '../ui/focus-screen/types';
 
 export const AMOUNT_TO_SKIP_SECONDS = 5;
 export const AMOUNT_TO_CHANGE_VOLUME = 10;
 
 export default class KeyboardControl implements IKeyboardControl {
   static moduleName = 'keyboardControl';
-  static dependencies = ['engine', 'eventEmitter', 'rootContainer', 'config'];
+  static dependencies = ['engine', 'eventEmitter', 'focusScreen', 'config'];
 
   private _isEnabled: boolean;
   private _eventEmitter: IEventEmitter;
@@ -32,12 +32,12 @@ export default class KeyboardControl implements IKeyboardControl {
   constructor({
     config,
     eventEmitter,
-    rootContainer,
+    focusScreen,
     engine,
   }: {
     config: IPlayerConfig;
     eventEmitter: IEventEmitter;
-    rootContainer: IRootContainer;
+    focusScreen: IFocusScreen;
     engine: IPlaybackEngine;
   }) {
     this._eventEmitter = eventEmitter;
@@ -49,7 +49,7 @@ export default class KeyboardControl implements IKeyboardControl {
       this._isEnabled = config.disableControlWithKeyboard !== false;
     }
 
-    this._initInterceptor(rootContainer.getElement());
+    this._initInterceptor(focusScreen.getElement());
   }
 
   private _initInterceptor(rootElement: HTMLElement) {

src/modules/root-container/templates/container.dot

@@ -2,6 +2,5 @@
   data-playable-hook="player-container"
   dir="ltr"
   data-playable-dir="${props.direction}"
-  tabindex="0"
   class="${props.styles.container}">
 </div>

src/modules/ui/focus-screen/focus-screen.scss

@@ -0,0 +1,25 @@
+@import '../shared';
+
+.focusScreen {
+  position: absolute;
+  z-index: 51;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+
+  display: flex;
+  flex-direction: column;
+
+  width: 100%;
+  height: 100%;
+
+  opacity: 1;
+
+  justify-content: center;
+  align-items: center;
+
+  &.hiddenCursor {
+    cursor: none;
+  }
+}

src/modules/ui/focus-screen/focus-screen.spec.ts

@@ -0,0 +1,118 @@
+import 'jsdom-global/register';
+import { expect } from 'chai';
+import * as sinon from 'sinon';
+
+import { EngineState } from '../../../constants';
+
+import createPlayerTestkit from '../../../testkit';
+
+import FocusScreen from './focus-screen';
+class FullScreenManagerMock {
+  enterFullScreen = (_: any) => _;
+  exitFullScreen = (_: any) => _;
+  isInFullScreen = false;
+  isEnabled = true;
+  _config = {};
+}
+
+describe('Loader', () => {
+  let testkit: any;
+  let screen: any;
+  let engine: any;
+  let fullScreenManager: any;
+
+  beforeEach(() => {
+    testkit = createPlayerTestkit();
+    testkit.registerModuleAsSingleton(
+      'fullScreenManager',
+      FullScreenManagerMock,
+    );
+    testkit.registerModule('focus-screen', FocusScreen);
+    engine = testkit.getModule('engine');
+    fullScreenManager = testkit.getModule('fullScreenManager');
+    screen = testkit.getModule('focus-screen');
+  });
+
+  describe('constructor', () => {
+    it('should create instance ', () => {
+      expect(screen).to.exist;
+      expect(screen.view).to.exist;
+    });
+  });
+
+  describe('instance callbacks', () => {
+    it('should trigger _toggleVideoPlayback on node click', () => {
+      const processClickSpy = sinon.spy(screen, '_processClick');
+      screen._bindCallbacks();
+      screen._initUI();
+
+      screen.view.getElement().dispatchEvent(new Event('click'));
+      expect(processClickSpy.called).to.be.true;
+    });
+
+    it('should remove timeout of delayed playback change on _processClick and call _toggleFullScreen on _processDblClick', () => {
+      const timeoutClearSpy = sinon.spy<Window, 'clearTimeout'>(
+        window,
+        'clearTimeout',
+      );
+      const toggleFullScreenSpy = sinon.spy(screen, '_toggleFullScreen');
+      const id = window.setTimeout(() => {}, 0);
+      screen._delayedToggleVideoPlaybackTimeout = id;
+
+      screen._processClick();
+      expect(timeoutClearSpy.calledWith(id)).to.be.true;
+      screen._processDblClick();
+      expect(toggleFullScreenSpy.called).to.be.true;
+
+      timeoutClearSpy.restore();
+    });
+
+    it('should add native controls if config passed', () => {
+      testkit.setConfig({
+        nativeBrowserControls: true,
+      });
+
+      const video: any = document.createElement('video');
+
+      video.setAttribute = sinon.spy();
+
+      engine.getElement = () => video;
+
+      screen = testkit.getModule('screen');
+
+      expect(video.setAttribute.calledWith('controls', 'true')).to.be.true;
+    });
+
+    it('should emit ui event on enter full screen', () => {
+      const spy = sinon.spy(fullScreenManager, 'enterFullScreen');
+      fullScreenManager.isInFullScreen = false;
+
+      screen._toggleFullScreen();
+
+      expect(spy.called).to.be.true;
+      fullScreenManager.enterFullScreen.restore();
+    });
+
+    it('should emit ui event on exit full screen', () => {
+      const spy = sinon.spy(fullScreenManager, 'exitFullScreen');
+      fullScreenManager.isInFullScreen = true;
+
+      screen._toggleFullScreen();
+
+      expect(spy.called).to.be.true;
+      fullScreenManager.exitFullScreen.restore();
+    });
+
+    it('should have method for toggling playback', () => {
+      const playSpy = sinon.spy();
+      const pauseSpy = sinon.spy();
+      screen._engine = {
+        getCurrentState: () => EngineState.PLAYING,
+        play: playSpy,
+        pause: pauseSpy,
+      };
+      screen._toggleVideoPlayback();
+      expect(pauseSpy.called).to.be.true;
+    });
+  });
+});