widget draggable and toolbar position

Genymobile · Feb 10, 2025 · 189adeb · 189adeb
1 parent bc07a45
commit 189adeb
Show file tree

Hide file tree

Showing 13 changed files with 648 additions and 346 deletions.
diff --git a/README.md b/README.md
@@ -326,6 +326,13 @@ A device renderer instance can be configured using the `options` argument (objec
 -   **Details:**
     Adds a mobile-style frame around the video to mimic the appearance of a smartphone screen.
 
+### `toolbarPosition`
+
+-   **Type:** `String`
+-   **Default:** `right`
+-   **Details:**
+    Position of the toolbar
+
 #### `connectionFailedURL`
 
 -   **Type:** `String`

diff --git a/src/DeviceRendererFactory.js b/src/DeviceRendererFactory.js
@@ -24,6 +24,7 @@ const defaultOptions = {
         'ButtonsEvents_BACK',
         'ButtonsEvents_POWER',
     ],
+    toolbarPosition: 'right',
     touch: true,
     mouse: true,
     volume: true,
@@ -86,6 +87,7 @@ module.exports = class DeviceRendererFactory {
      * @param  {string}             webRTCUrl                      WebRTC URL of the instance.
      * @param  {Object}             options                        Various configuration options.
      * @param  {boolean}            options.showPhoneBorder        Show phone border. Default: false.
+     * @param  {string}             options.toolbarPosition        Toolbar position. Default: 'right'.
      * @param  {boolean}            options.toolbarOrder           Toolbar buttons order. Default: see defaultOptions.
      * @param  {boolean}            options.touch                  Touch support activated. Default: true.
      * @param  {boolean}            options.mouse                  Mouse support activated. Default: true.
@@ -177,10 +179,10 @@ module.exports = class DeviceRendererFactory {
      */
     loadTemplate(dom, options) {
         dom.innerHTML = `
-        <div class="gm-wrapper waitingForStream ${options.showPhoneBorder ? 'phoneBorder' : ''}">
+        <div class="gm-wrapper waitingForStream ${options.showPhoneBorder ? 'phoneBorder' : ''} 
+        toolbarPosition-${options.toolbarPosition}">
             <div class="gm-video-wrapper">
-                <video class="gm-video" autoplay preload="none">Your browser does not support the VIDEO tag
-                </video>
+                <video class="gm-video" autoplay preload="none">Your browser does not support the VIDEO tag</video>
                 ${options.showPhoneBorder ? '<div class="gm-phone-button"></div>' : ''}
             </div>
             <div class="gm-toolbar-wrapper">

diff --git a/src/plugins/KeyboardEvents.js b/src/plugins/KeyboardEvents.js
@@ -214,8 +214,6 @@ module.exports = class KeyboardEvents {
      * Bind all event listener callback.
      */
     addKeyboardCallbacks() {
-        this.instance.root.tabIndex = 0;
-
         if (!this.isListenerAdded) {
             // This avoid having continuously pressed keys because of alt+tab or any other command that blur from tab
             this.removeBlurListener = this.instance.addListener(window, 'blur', this.cancelAllPressedKeys.bind(this));
@@ -225,11 +223,20 @@ module.exports = class KeyboardEvents {
                     {event: 'keypress', handler: this.onKeyPress.bind(this), removeListener: null},
                     {event: 'keydown', handler: this.onKeyDown.bind(this), removeListener: null},
                     {event: 'keyup', handler: this.onKeyUp.bind(this), removeListener: null},
+                    {
+                        event: 'click',
+                        handler: () => {
+                            // need to be able to capture key events on the video element when it is clicked
+                            this.instance.video.tabIndex = 0;
+                            this.instance.video.focus();
+                        },
+                        removeListener: null,
+                    },
                 ];
             }
             this.instance.root.focus();
             this.keyboardCallbacks.forEach((item, index, array) => {
-                array[index].removeListener = this.instance.addListener(this.instance.root, item.event, item.handler);
+                array[index].removeListener = this.instance.addListener(this.instance.video, item.event, item.handler);
             });
             this.isListenerAdded = true;
         }

diff --git a/src/plugins/MouseEvents.js b/src/plugins/MouseEvents.js
@@ -199,7 +199,7 @@ module.exports = class MouseEvents {
 
             this.mouseCallbacks.forEach((item, index, array) => {
                 array[index].removeListener = this.instance.addListener(
-                    this.instance.videoWrapper,
+                    this.instance.video,
                     item.event,
                     item.handler,
                     item.options,

diff --git a/src/plugins/Phone.js b/src/plugins/Phone.js
@@ -50,7 +50,7 @@ module.exports = class Phone extends OverlayPlugin {
         // Create elements
         const {modal, container} = this.createTemplateModal({
             title: this.i18n.PHONE_TITLE || 'Phone',
-            classes: 'gm-phone',
+            classes: 'gm-phone-plugin',
         });
 
         // TODO delete this line in the PR which will refacto this plugin, keep for css compatibility