[PLAYER-19] keybinding (post refacto dialog)

README.md

@@ -251,6 +251,14 @@ A device renderer instance can be configured using the `options` argument (objec
 -   **Details:**
     Enables or disables the keyboard widget. This widget can be used to transmit keyboard key strokes to the Android virtual device.
 
+### `keyboardMapping`
+
+-   **Type:** `Boolean`
+-   **Default:** `false`
+-   **Compatibility:** `PaaS`, `SaaS`
+-   **Details:**
+    Enables or disables the keyboardMapping. This widget can be used to map key with command (i.e. tap, swipe-left, tilt, ...).
+
 ### `volume`
 
 <img align="right" src="./doc/assets/ic_sound_active_black.svg" alt="..."></img>

src/APIManager.js

@@ -6,61 +6,64 @@ module.exports = class APIManager {
         this.apiFunctions = {};
 
         // record fn to send data to instance
-        this.registerFunction(
-            'sendData',
-            (json) => {
+        this.registerFunction({
+            name: 'sendData',
+            category: 'VM_communication',
+            fn: (json) => {
                 this.instance.sendEvent(json);
             },
-            'send data to WS messages of player, must be a JSON object. Example: {type: "MOUSE_PRESS", x: 100, y: 100}',
-        );
+            description: `send data to WS messages of player, must be a JSON object. 
+                Example: {type: "MOUSE_PRESS", x: 100, y: 100}`,
+        });
 
         // record fn to get registered functions
-        this.registerFunction(
-            'getRegisteredFunctions',
-            () => this.getRegisteredFunctions(),
-            'list all registered functions',
-        );
+        this.registerFunction({
+            name: 'getRegisteredFunctions',
+            category: 'utils',
+            fn: () => this.getRegisteredFunctions(),
+            description: 'list all registered functions',
+        });
 
         // record fn to get registered functions
-        this.registerFunction(
-            'addEventListener',
-            (event, fn) => {
-                return this.addEventListener(event, fn);
+        this.registerFunction({
+            name: 'addEventListener',
+            category: 'VM_communication',
+            fn: (event, fn) => {
+                return this.instance.addEventListener(event, fn);
             },
-            'attach event listener to WS messages of player',
-        );
+            description: 'attach event listener to WS messages of player',
+        });
 
         // record fn to disconnect from the instance
-        this.registerFunction(
-            'disconnect',
-            () => {
+        this.registerFunction({
+            name: 'disconnect',
+            category: 'VM_communication',
+            fn: () => {
                 this.instance.disconnect();
             },
-            'disconnect from the instance',
-        );
+            description: 'disconnect from the instance',
+        });
     }
 
-    registerFunction(name, fn, description = '') {
-        if (this.apiFunctions[name]) {
-            throw new Error(`Function ${name} is already registered.`);
+    registerFunction({name, category = 'global', fn, description = ''}) {
+        if (this.apiFunctions[`${category}_${name}`]) {
+            throw new Error(`Function ${name} for category ${category} is already registered.`);
         }
-        this.apiFunctions[name] = {
+        this.apiFunctions[`${category}_${name}`] = {
             fn,
+            category,
             description,
+            name,
         };
     }
-    addEventListener(event, fn) {
-        // expose listener to ws instance
-        this.instance.registerEventCallback(event, fn);
-    }
 
     /**
      * Get exposed API description
      * @returns {Array} list of api description {apiName: string, apiDescription: string}
      */
     getRegisteredFunctions() {
         const exposedFunctionsDescription = Object.entries(this.apiFunctions).reduce((acc, val) => {
-            acc[val[0]] = val[1].description;
+            acc[val[1].name] = val[1].description;
             return acc;
         }, {});
         return exposedFunctionsDescription;
@@ -72,7 +75,12 @@ module.exports = class APIManager {
      */
     getExposedApiFunctions() {
         const exposedFunctions = Object.entries(this.apiFunctions).reduce((acc, val) => {
-            acc[val[0]] = val[1].fn;
+            const {name, category, fn} = val[1];
+
+            if (!acc[category]) {
+                acc[category] = {};
+            }
+            acc[category][name] = fn;
             return acc;
         }, {});
         return exposedFunctions;

src/DeviceRenderer.js

@@ -10,6 +10,7 @@ const Screencast = require('./plugins/Screencast');
 const StreamResolution = require('./plugins/StreamResolution');
 const CoordinateUtils = require('./plugins/CoordinateUtils');
 const KeyboardEvents = require('./plugins/KeyboardEvents');
+const KeyboardMapping = require('./plugins/KeyboardMapping');
 const MouseEvents = require('./plugins/MouseEvents');
 const PeerConnectionStats = require('./plugins/PeerConnectionStats');
 const Gamepad = require('./plugins/Gamepad');
@@ -52,8 +53,6 @@ module.exports = class DeviceRenderer {
         this.initialized = false;
         this.reconnecting = false;
 
-        // Enabled features
-        this.keyboardEventsEnabled = false;
         this.touchEventsEnabled = false;
         this.mouseEventsEnabled = false;
         this.gamepadEventsEnabled = false;
@@ -88,17 +87,6 @@ module.exports = class DeviceRenderer {
         // last accessed x/y position
         this.x = 0;
         this.y = 0;
-
-        this.clickHandlerCloseOverlay = (event) => {
-            if (
-                event.target.closest('.gm-overlay') === null &&
-                !event.target.classList.contains('gm-icon-button') &&
-                !event.target.classList.contains('gm-dont-close')
-            ) {
-                this.store.dispatch({type: 'OVERLAY_OPEN', payload: {toOpen: false}});
-            }
-        };
-        this.addListener(document, 'click', this.clickHandlerCloseOverlay);
     }
 
     /**
@@ -119,6 +107,7 @@ module.exports = class DeviceRenderer {
             {enabled: this.options.streamResolution, class: StreamResolution},
             {enabled: this.options.touch || this.options.mouse, class: CoordinateUtils},
             {enabled: this.options.keyboard, class: KeyboardEvents},
+            {enabled: this.options.keyboardMapping, class: KeyboardMapping},
             {enabled: this.options.mouse, class: MouseEvents},
             {
                 enabled: this.options.gamepad,
@@ -486,10 +475,6 @@ module.exports = class DeviceRenderer {
                 this.mouseEvents.addMouseCallbacks();
             }
 
-            if (this.keyboardEventsEnabled) {
-                this.keyboardEvents.addKeyboardCallbacks();
-            }
-
             if (this.gamepadEventsEnabled) {
                 this.gamepadManager.addGamepadCallbacks();
             }

src/DeviceRendererFactory.js

@@ -23,6 +23,7 @@ const defaultOptions = {
     navbar: true,
     power: true,
     keyboard: true,
+    keyboardMapping: false,
     fullscreen: true,
     camera: true,
     microphone: false,
@@ -87,6 +88,7 @@ module.exports = class DeviceRendererFactory {
      * @param  {boolean}            options.navbar                 Android navbar support activated. Default: true.
      * @param  {boolean}            options.power                  Power control support activated. Default: true.
      * @param  {boolean}            options.keyboard               Keyboad support activated. Default: true.
+     * @param  {boolean}            options.keyboardMapping        Keyboad mapping support activated. Default: true.
      * @param  {boolean}            options.fullscreen             Fullscreen support activated. Default: true.
      * @param  {boolean}            options.camera                 Camera support activated. Default: true.
      * @param  {boolean}            options.microphone             Microphone support activated. Default: false.

src/plugins/Clipboard.js

@@ -117,6 +117,8 @@ module.exports = class Clipboard extends OverlayPlugin {
         super.toggleWidget();
         if (this.instance.store.getters.isWidgetOpened(this.overlayID)) {
             this.clipboardInput.value = this.clipboard;
+            // put focus on the input field
+            this.clipboardInput.focus();
         }
     }
 

src/plugins/FingerPrint.js

@@ -127,7 +127,7 @@ module.exports = class FingerPrint extends OverlayPlugin {
 
         // register callback
         this.instance.registerEventCallback('fingerprint', (message) => this.handleFingerprintEvent(message));
-        if (this.instance.store.getState().isWebRTCConnectionReady) {
+        if (this.instance.store.state.isWebRTCConnectionReady) {
             this.sendDataToInstance(FINGERPRINT_MESSAGES.toSend.NOTIFY_ALL);
         } else {
             const unSubscribe = this.instance.store.subscribe(({isWebRTCConnectionReady}) => {

src/plugins/Fullscreen.js

@@ -20,6 +20,18 @@ module.exports = class Fullscreen {
             this.instance.addListener(document, 'fullscreenchange', this.onFullscreenEvent.bind(this), false);
         }
 
+        this.instance.apiManager.registerFunction({
+            name: 'fullsreen',
+            category: 'video',
+            fn: () => {
+                if (this.fullscreenEnabled()) {
+                    this.exitFullscreen();
+                } else {
+                    this.goFullscreen(this.instance.root);
+                }
+            },
+            description: 'toggle fullscreen mode',
+        });
         // Display widget
         this.renderToolbarButton();
     }

src/plugins/KeyboardEvents.js

@@ -54,15 +54,20 @@ module.exports = class KeyboardEvents {
 
         // Register plugin
         this.instance.keyboardEvents = this;
-        this.instance.keyboardEventsEnabled = true;
 
-        this.transmitKeys = this.instance.store.getState().isKeyboardEventsEnabled;
         this.isListenerAdded = false;
         this.currentlyPressedKeys = new Map();
 
         this.instance.store.subscribe(({isKeyboardEventsEnabled}) => {
-            this.transmitKeys = isKeyboardEventsEnabled;
+            if (isKeyboardEventsEnabled) {
+                this.addKeyboardCallbacks();
+            } else {
+                this.removeKeyboardCallbacks();
+            }
         });
+
+        // activate the plugin listening
+        this.instance.store.dispatch({type: 'KEYBOARD_EVENTS_ENABLED', payload: true});
     }
 
     /**
@@ -89,9 +94,6 @@ module.exports = class KeyboardEvents {
      * @param {Event} event Event.
      */
     onKeyPress(event) {
-        if (!this.transmitKeys) {
-            return;
-        }
         const key = event.charCode;
         let text = event.key || String.fromCharCode(key);
         if (text === 'Spacebar') {
@@ -118,10 +120,6 @@ module.exports = class KeyboardEvents {
      * @return {boolean}       Whether or not the event must continue propagation.
      */
     onKeyDown(event) {
-        if (!this.transmitKeys) {
-            return true;
-        }
-
         let key;
         /**
          * Convert invisible key or shortcut keys when ctrl/meta are pressed
@@ -176,10 +174,6 @@ module.exports = class KeyboardEvents {
      * @return {boolean}       Whether or not the event must continue propagation.
      */
     onKeyUp(event) {
-        if (!this.transmitKeys) {
-            return true;
-        }
-
         let key;
         /**
          * Convert invisible key or shortcut keys when ctrl/meta are pressed