Merge pull request #60 from Genymobile/beta-v3

Beta v3 to main

.github/workflows/integration.yml

@@ -7,7 +7,6 @@ on:
   push:
     branches: [ main ]
   pull_request:
-    branches: [ main ]
 
 jobs:
   build:

README.md

@@ -1,11 +1,11 @@
-# Genymotion device web player
+# Genymotion device web renderer
 
 ![npm](https://img.shields.io/npm/v/@genymotion/device-web-player)
 ![GitHub](https://img.shields.io/github/license/Genymobile/genymotion-device-web-player)
 
 <img align="right" src="./doc/assets/screenshot.png" height="500"></img>
 
-This repository contains the Genymotion device web player JavaScript SDK.
+This repository contains the Genymotion device web renderer JavaScript SDK.
 It provides an easy way to integrate **Genymotion devices** running in the cloud into any web application. You will be able to display an emulator screen and interact with the device.
 
 It focuses on:
@@ -53,25 +53,25 @@ npm install @genymotion/device-web-player
 Package import (commonJS):
 
 ```js
-const GenymotionManager = require('genymotion/device-web-player');
+const {DeviceRendererFactory} = require('genymotion/device-web-player');
 ```
 
 ```html
 <style lang="scss">
-    @import "genymotion-device-web-player/dist/css/gm-player.min.css";
+    @import "genymotion-device-web-renderer/dist/css/device-renderer.min.css";
 </style>
 ```
 
 ### With CDN
 
 ```html
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@genymotion/device-web-player@2.1.3/dist/css/gm-player.min.css">
-<script src="https://cdn.jsdelivr.net/npm/@genymotion/device-web-player@2.1.3/dist/js/gm-player.min.js"></script>
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@genymotion/device-web-player@3.1.0/dist/css/device-renderer.min.css">
+<script src="https://cdn.jsdelivr.net/npm/@genymotion/device-web-player@3.1.0/dist/js/device-renderer.min.js"></script>
 ```
 
 ## Usage
 
-Use `GenymotionManager` to instanciate one or more Genymotion device player.
+Use `DeviceRendererFactory` to instanciate one or more device renderer.
 All you need is an HTML element to use as a container. See example below.
 To find your instance WebRTC address, use the [SaaS API](https://developer.genymotion.com/saas/#operation/getInstance)
 or check the [PaaS documentation](https://docs.genymotion.com/paas/01_Requirements/), based on your device provider.
@@ -91,36 +91,37 @@ or check the [PaaS documentation](https://docs.genymotion.com/paas/01_Requiremen
 
     // See "Features & options" section for more details about options
     const options = {
-        template: "player",    // template defines how player is displayed
+        template: "renderer",    // template defines how renderer is displayed
         token: 'i-XXXXXXXXXX', // token is the shared secret to connect to your VM
         fileUpload: false      // requires fileUploadUrl
     };
 
-    // Device player instanciation
-    const genymotion = new GenymotionManager();
-    const instance = genymotion.setupInstance(container,     // the container element or element ID to use
+    // Device renderer instanciation
+    const { DeviceRendererFactory } = window.index
+    const deviceRendererFactory = new DeviceRendererFactory();
+    const renderer = deviceRendererFactory.setupRenderer(container,     // the container element or element ID to use
                                               webrtcAddress, // the websocket address of your instance connector
                                               options        // options object to enable or disable features
     );
 
-    // Disconnect the device player, closing any open data channels.
+    // Disconnect the device renderer, closing any open data channels.
     window.addEventListener('beforeunload', function() {
-        instance.disconnect();
+        renderer.disconnect();
     });
 </script>
 ```
 
 ## Features & options
 
-A device player instance can be configured using the `options` argument (object). Possible configuration key / value are described below.
+A device renderer instance can be configured using the `options` argument (object). Possible configuration key / value are described below.
 
 ### `template`
 
 - **Type:** `String`
-- **Default:** `player`
+- **Default:** `renderer`
 - **Compatibility:** `PaaS`, `SaaS`
 - **Details:**
-Defines the layout of the player. Can be one of the following: `bootstrap`, `fullscreen`, `fullwindow`, `player`, `player_minimal`, `player_no_toolbar`, `player_partial`.
+Defines the layout of the renderer. Can be one of the following: `bootstrap`, `fullscreen`, `fullwindow`, `renderer`, `renderer_minimal`, `renderer_no_toolbar`, `renderer_partial`.
 
 ### `token`
 
@@ -136,7 +137,7 @@ Instance access token, the shared secret used to connect to the device. For Geny
 - **Default:** `{}`
 - **Compatibility:** `PaaS`, `SaaS`
 - **Details:**
-Alternative translation for the player UI.
+Alternative translation for the renderer UI.
 
 ### `stun`
 
@@ -266,7 +267,7 @@ Enables or disables the power widget. This widget can be used to poweroff or reb
 - **Default:** `true`
 - **Compatibility:** `PaaS`, `SaaS`
 - **Details:**
-Enables or disables the fullscreen widget. This widget can be used to make the player go fullscreen.
+Enables or disables the fullscreen widget. This widget can be used to make the renderer go fullscreen.
 
 ### `camera`
 
@@ -276,7 +277,8 @@ Enables or disables the fullscreen widget. This widget can be used to make the p
 - **Default:** `true`
 - **Compatibility:** `PaaS`, `SaaS`
 - **Details:**
-Enables or disables the camera widget. This widget can be used to forward local webcam to the Android virtual device.
+Enables or disables the camera widget. This widget can be used to forward local webcam video to the Android virtual device.
+By default, if the `microphone` property is also true, then the default audio input will be used as well.
 
 ### `microphone`
 
@@ -286,9 +288,7 @@ Enables or disables the camera widget. This widget can be used to forward local
 - **Default:** `false`
 - **Compatibility:** `PaaS`
 - **Details:**
-Enables or disables microphone injection. This can be used to forward local microphone to the Android virtual device.
-This option is only taken into account when `options.camera` is `true`. In this case, the camera widget enables
-both camera and microphone injection.
+Enables or disables microphone injection. This can be used to forward local microphone (or webcam audio) to the Android virtual device.
 
 ### `fileUpload`
 
@@ -415,6 +415,21 @@ Enable or disable baseband (MMC/MNC) widget.
 - **Details:**
 Enables or disables the diskIO widget. This widget can be used to modify Disk IO (throttling) of the Android virtual device.
 
+### `gamepad`
+
+- **Type:** `Boolean`
+- **Default:** `false`
+- **Compatibility:** `SaaS`, `PaaS`
+- **Details:**
+Enable or disable experimental gamepad support & widget
+
+### `biometrics`
+
+- **Type:** `Boolean`
+- **Default:** `true`
+- **Compatibility:** `SaaS`, `PaaS`
+- **Details:**
+Enable or disable fingerprints widget. This widget can be used to manage fingerprint reading requests. Available for Android 9 and above
 
 ### `translateHomeKey`
 
@@ -433,6 +448,14 @@ Translate home key to `META` + `ENTER`
 - **Details:**
 Redirection page in case of connection error.
 
+### `giveFeedbackLink`
+
+- **Type:** `String`
+- **Default:** `giveFeedbackLink`
+- **Compatibility:** `SaaS`, `PaaS`
+- **Details:**
+Set url for feedback page.
+
 ## Contributing
 
 Read through our [contributing guidelines](https://github.com/Genymobile/genymotion-device-web-player/blob/main/CONTRIBUTING.md) to learn about our submission process, coding rules and more.

bower.json

@@ -1,9 +1,9 @@
 {
   "name": "genymotion-webrtc-client",
   "main": [
-    "dist/js/gm-player.min.js",
-    "dist/css/gm-player.min.css"
+    "dist/js/device-renderer.min.js",
+    "dist/css/device-renderer.min.css"
   ],
   "moduleType": "globals",
-  "version": "2.1.3"
+  "version": "3.1.0"
 }

gulp/graspify-squery.js

@@ -1,6 +1,5 @@
 'use strict';
 
-const grasp = require('grasp');
 const transformTools = require('browserify-transform-tools');
 
 const options = {
@@ -24,19 +23,22 @@ const options = {
 module.exports = transformTools.makeStringTransform('graspify', options, (content, opts, done) => {
     try {
         // Normalize plain replacements
-        if (opts.opts && typeof opts.opts[0] === 'string') {
-            opts.opts = [opts.opts];
-        }
-        if (opts.config && typeof opts.config[0] === 'string') {
-            opts.config = [opts.config];
-        }
+        opts.opts = opts.opts ?
+            Array.isArray(opts.opts) ?
+                opts.opts : [opts.opts]
+            : [];
+        opts.config = opts.config ?
+            Array.isArray(opts.config) ?
+                opts.config : [opts.config]
+            : [];
 
         // Merge opts & config for the full list of replacements an loop over
-        [].concat(opts.opts || [], opts.config || []).forEach((args) => {
-            const selectorType = args.length === 3 ? args.shift() : 'squery';
+        [].concat(opts.opts, opts.config).forEach((args) => {
+            // args is not an array but an object with numeric key (0,1) so args[0] works
             const selector = args[0];
             const replacement = args[1];
-            content = grasp.replace(selectorType, selector, replacement, content);
+
+            content = content.replace(selector.substring(1,selector.length), replacement);
         });
 
         done(null, content);

gulp/gulp-template-collector.js

@@ -7,6 +7,7 @@
 
 const through = require('through2');
 const File = require('vinyl');
+const path = require('path');
 
 /**
  * templateCollector
@@ -29,7 +30,7 @@ module.exports = function templateCollector(options) {
             }
 
             // Break up filename
-            const pieces = file.relative.split('/');
+            const pieces = file.relative.split(path.sep);
             const template = pieces[0];
             const fileName = pieces[1];
 

gulpfile.js

@@ -33,7 +33,7 @@ const util = require('gulp-util');
 
 const PATHS = {
     SRC: {
-        APP: 'GenymotionManager.js',
+        APP: 'index.js',
         BASE: './src',
         WORKER: './src/worker',
         TEMPLATES: './src/templates',
@@ -98,7 +98,7 @@ gulp.task('app-styles', function() {
         .pipe(base64())
         .pipe(autoprefixer())
         .pipe(gulpif(util.env.production, minifyCss()))
-        .pipe(concat('gm-player.min.css'))
+        .pipe(concat('device-renderer.min.css'))
         .pipe(gulp.dest(PATHS.DEST.ASSETS.CSS));
 });
 
@@ -116,15 +116,28 @@ gulp.task('app-templates', function() {
 });
 
 function getBundler() {
+    return new Promise((resolve) => {
+        if (!templates) {
+            gulp.series('app-templates')(() => {
+                resolve(setupBrowserify());
+            });
+        } else {
+            resolve(setupBrowserify());
+        }
+    });
+}
+
+function setupBrowserify() {
     return browserify({
         entries: [PATHS.SRC.BASE + '/' + PATHS.SRC.APP],
-        standalone: 'GenymotionManager',
+        standalone: 'index',
         debug: true
     }).transform(graspify, ['#GEN_TEMPLATES', templates]);
 }
 
-gulp.task('app-js', function() {
-    return merge2(getBundler().bundle()
+gulp.task('app-js', async function() {
+    const bundler = await getBundler();
+    return merge2(bundler.bundle()
         .pipe(source(PATHS.SRC.APP)), {end: true})
         .pipe(gulpif(util.env.debug, using()))
         .pipe(gulpif(util.env.production, streamify(babel({
@@ -137,7 +150,7 @@ gulp.task('app-js', function() {
                 ]
             ]
         }))))
-        .pipe(streamify(concat('gm-player.min.js')))
+        .pipe(streamify(concat('device-renderer.min.js')))
         .pipe(gulpif(util.env.production, streamify(uglify())))
         .pipe(gulp.dest(PATHS.DEST.LIB.JS));
 });
@@ -180,22 +193,20 @@ gulp.task('build', gulp.series(
 ));
 
 // Watch project update
-gulp.task('watch', gulp.series('build', function() {
+gulp.task('watch', gulp.series('build', function(cb) {
     gulp.watch([
         PATHS.SRC.ASSETS.STYLES + '/**/*.scss'
     ], gulp.series('app-styles'));
 
-    gulp.watch([
-        PATHS.TEST.UT + '/**/*.js'
-    ], gulp.series('test'));
-
     gulp.watch([
         PATHS.SRC.BASE + '/*.js',
         PATHS.SRC.BASE + '/**/*.js',
         PATHS.SRC.WORKER + '/*.js',
         PATHS.SRC.WORKER + '/**/*.js',
         PATHS.SRC.TEMPLATES + '/**/*'
     ], gulp.series('app-js'));
+
+    cb();
 }));
 
 // Serve project
@@ -206,7 +217,5 @@ gulp.task('serve', gulp.series('watch', function(cb) {
             baseDir: PATHS.DEST.BASE
         },
         port: 8000
-    });
-
-    cb();
+    }, cb);
 }));

package.json

@@ -1,8 +1,8 @@
 {
   "name": "@genymotion/device-web-player",
-  "version": "2.1.3",
-  "description": "Genymotion Virtual Device Web Player",
-  "main": "dist/js/gm-player.min.js",
+  "version": "3.1.0",
+  "description": "Genymotion Virtual Device Web Renderer",
+  "main": "dist/js/device-renderer.min.js",
   "files": [
     "dist"
   ],
@@ -15,7 +15,8 @@
     "checkstyle": "eslint -f checkstyle -o ./tests/reports/lint/report.xml src tests gulp",
     "validate": "yarn lint; yarn checkstyle",
     "build:dev": "gulp build",
-    "build": "gulp build --production"
+    "build": "gulp build --production",
+    "start": "gulp serve"
   },
   "repository": {
     "type": "git",