[PLAYER-19] keybinding (post refacto dialog)

.eslintrc.json

@@ -24,7 +24,7 @@
         "no-console": "warn",
         "no-extra-parens": "off",
         "no-loss-of-precision": "error",
-        "no-promise-executor-return": "error",
+        "no-promise-executor-return": "off",
         "no-template-curly-in-string": "error",
         "no-unreachable-loop": "error",
         "require-atomic-updates": "error",

README.md

@@ -24,7 +24,10 @@ For more information about Genymotion devices, please visit [genymotion website]
     1. [With NPM/Yarn](#with-npmyarn)
     2. [With CDN](#with-cdn)
 3. [Usage](#usage)
+3. [Player API](#player-api)
 4. [Features & options](#features--options)
+5. [Features notes](#features-notes)
+    1. [Key mapping](#keymapping-notes)
 
 ## Requirements
 
@@ -118,33 +121,123 @@ or check the [PaaS documentation](https://docs.genymotion.com/paas/01_Requiremen
 
 ## Player API
 
-Plugin options and websocket communication can be handled through the API object returned by the `setupRenderer` function.
+The Player API provides functionality for managing plugin options and websocket communication. These operations are handled through the API (categorized) object returned by the `setupRenderer` function.
 
-Built-in exposed functions are
+### `VM_communication`
 
-### `getRegisteredFunctions`
+- #### `disconnect`
+    Disconnects the player from the virtual machine (VM) and cleans up the memory listener.
 
-which returns the list of available functions with an optional description
+- #### `addEventListener`
+    Registers a listener for messages emitted from the VM.
 
-### `disconnect`
+    - Parameters:
+        - event (string): The name of the event to listen for. Example events include 'fingerprint', 'gps', and 'BATTERY_LEVEL'...
+        - callback (function): The function to call when the event is emitted. The message from the VM will be passed as an argument to the callback function.
 
-which disconnects the player from the VM and cleanups the memory listener
+    - Example Usage
+    ```js
+    addEventListener('fingerprint', (msg)=>{ console.log(msg) })
+    ```
 
-### `addEventListener`
-
-used to listen to messages emitted from the VM such as 'fingerprint', 'gps', 'BATTERY_LEVEL'
-
-```html
-addEventListener('fingerprint', (msg)=>{ console.log(msg) })
+- #### `sendData`
+    Sends messages to the VM.
+    - Parameters:
+        - `data` (object): An object containing the channel and the messages to be sent.
+            - `channel` (string): The channel to send the messages to.
+            - `messages` (array): An array of messages to be sent.
+    - Example Usage
+```js
+sendData({ 
+    channel: 'battery',
+    messages: ['set state level 10', 'set state status true'], 
+    })
 ```
 
-### `sendData`
-
-used to send messages to the VM.
-
-```html
-sendData({ channel: 'battery', messages: ['set state level 10', 'set state status true'], })
-```
+### `utils`
+- #### `getRegisteredFunctions`
+    Returns a list of available functions with optional descriptions.
+
+### `keymapping`
+- #### `setConfig`
+    supply a config for keymapping
+    ```js
+    {
+        dpad:[{
+            keys: {
+                z: {
+                    initialX: 20,
+                    initialY: 80,
+                    distanceX: 0,
+                    distanceY: -10,
+                    description: 'move up',
+                },
+                s: {
+                    initialX: 20,
+                    initialY: 80,
+                    distanceX: 0,
+                    distanceY: 10,
+                    description: 'move down',
+                },
+                q: {
+                    initialX: 20,
+                    initialY: 80,
+                    distanceX: -10,
+                    distanceY: 0,
+                    description: 'move left',
+                },
+                d: {
+                    initialX: 20,
+                    initialY: 80,
+                    distanceX: 10,
+                    distanceY: 0,
+                    description: 'move right',
+                },
+            },
+            name: 'character movement',
+            description: 'left joystick used to move the character',
+        }],
+        tap:[{
+            keys: {
+                p: {
+                    initialX: 50,
+                    initialY: 50,
+                },
+            }
+            name:'Fire'
+        }],
+        swipe: [{
+            keys: {
+                u: {
+                    initialX: 50,
+                    initialY: 50,
+                    distanceX: -10,
+                    distanceY: 0,
+                    description: 'swipe left',
+                },
+            }
+            name:'Left dodge'
+            description: 'Dodge on the left'
+        }]
+    }
+    ```
+- #### `activeKeyMappingDebug`
+    helper to create the config mapping
+    - Parameters:
+        - `isTraceActivate` (boolean) : when true all click on video stream will print x and y coord over the video
+        - `isGridActivate` (boolean): when true display a grid over the video stream. Row and column have both a size of 10%.
+
+- #### `enable`
+    - Parameters:
+        - `isActive` (boolean) : **Optionnal** parameter to activate or desactivate keymapping, **default false**
+
+### `media`
+- #### `mute`
+- #### `unmute`
+
+### `video`
+- #### `fullsreen`
+Need to be call from an user action, in accordance with browser security rules
 
 ## Features & options
 
@@ -251,6 +344,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:** `true`
+-   **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,10 +53,7 @@ module.exports = class DeviceRenderer {
         this.initialized = false;
         this.reconnecting = false;
 
-        // Enabled features
-        this.keyboardEventsEnabled = false;
         this.touchEventsEnabled = false;
-        this.mouseEventsEnabled = false;
         this.gamepadEventsEnabled = false;
 
         // Websocket
@@ -88,17 +86,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 +106,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,
@@ -482,14 +470,6 @@ module.exports = class DeviceRenderer {
                 this.touchEvents.addTouchCallbacks();
             }
 
-            if (this.mouseEventsEnabled) {
-                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: true,
     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.