feat: upgrade electron 13.1 and use browser view (#41)

* use new logo

* feat: upgrade electron 13.1 and use browser view

* open mainView devtool on debug

* enable ringtone settings

.gitignore

@@ -2,3 +2,4 @@ node_modules
 release
 *.log
 .DS_Store
+api.json

README.md

@@ -30,6 +30,20 @@ Clone this repo:
 $ git clone https://github.com/ringcentral/ringcentral-embeddable-electron-app.git
 $ cd ringcentral-embeddable-electron-app
 $ yarn
+```
+
+Create `api.json` file in project root path:
+
+```JSON
+{
+  "ringcentralClientId": "your_ringcentral_client_id",
+  "ringcentralServer": "your_ringcentral_api_server, eg: https://platform.ringcentral.com",
+}
+```
+
+Start app:
+
+```
 $ yarn start
 ```
 

app.html

@@ -29,9 +29,8 @@
       }
       #logo {
         display: inline-block;
-        margin-top: 10px;
-        height: 16px;
-        width: 100px;
+        margin-top: 8px;
+        height: 20px;
         cursor: pointer;
       }
       .button {
@@ -126,14 +125,6 @@
         <div id="hidden-button" class="hidden-button"></div>
         <img src="./header_logo.svg" id="logo" />
       </header>
-      <webview
-        preload="./preload.js"
-        partition="persist:rcstorage"
-        allowpopups
-        id="rc-widget-adapter-frame"
-        src="https://ringcentral.github.io/ringcentral-embeddable/app.html?appVersion=0.1.7&userAgent=RingCentralEmbeddableForLinux/0.1.7"
-      >
-      </webview>
     </div>
     <script src="./app.js"></script>
   </body>

app.js

@@ -3,7 +3,6 @@ const { ipcRenderer } = require('electron');
 const closeButton = document.getElementById('close');
 const minimizeButton = document.getElementById('minimize');
 const hiddenButton = document.getElementById('hidden-button');
-const webview = document.querySelector('webview');
 
 closeButton.addEventListener('click', () => {
   ipcRenderer.send('close-main-window');
@@ -14,16 +13,5 @@ minimizeButton.addEventListener('click', () => {
 });
 
 hiddenButton.addEventListener('dblclick', () => {
-  webview.send('main-message', {
-    type: 'rc-adapter-set-environment',
-  });
-});
-
-// webview.addEventListener('new-window', (event) => {
-//   event.preventDefault();
-// });
-
-// transfer message from main process to webview
-ipcRenderer.on('main-message', function (e, message) {
-  webview.send('main-message', message);
+  ipcRenderer.send('set-environment');
 });

electron-builder.yml

@@ -2,6 +2,7 @@ appId: com.ringcentral.integration.EmbeddableVoice
 productName: RingCentral Embeddable
 files:
   - package.json
+  - api.json
   - main.js
   - app.html
   - app.js

main.js

@@ -1,13 +1,26 @@
-const { app, BrowserWindow, ipcMain } = require('electron');
+const path = require('path');
+const fs = require('fs');
+const { app, BrowserWindow, ipcMain, BrowserView, shell } = require('electron');
 const singleInstanceLock = app.requestSingleInstanceLock();
 
+const { version } = JSON.parse(fs.readFileSync(path.resolve(__dirname, 'package.json')));
+let rcClientId;
+let rcServer;
+const apiConfigFile = path.resolve(__dirname, 'api.json');
+if (fs.existsSync(apiConfigFile)) {
+  const apiConfig = JSON.parse(fs.readFileSync(apiConfigFile));
+  rcClientId = apiConfig.ringcentralClientId;
+  rcServer = apiConfig.ringcentralServer;
+}
+
 if (!singleInstanceLock) {
   console.warn('App already running');
 	app.quit();
   return;
 }
 
 let mainWindow;
+let mainView;
 let numberToDialer = null;
 let dialerReady = false;
 
@@ -22,6 +35,7 @@ function createMainWindow() {
     backgroundColor: '#ffffff',
     webPreferences: {
       nodeIntegration: true,
+      contextIsolation: false,
       nativeWindowOpen: true,
       partition: 'persist:rcstorage',
       webviewTag: true,
@@ -44,17 +58,54 @@ function createMainWindow() {
   });
 
   mainWindow.on('close', () => {
-    mainWindow = null
+    mainWindow = null;
+    mainView = null;
     numberToDialer = null;
     dialerReady = false;
   });
+  mainView = new BrowserView({
+    webPreferences: {
+      nodeIntegration: false,
+      contextIsolation: false,
+      nativeWindowOpen: true,
+      partition: 'persist:rcstorage',
+      preload: path.resolve(__dirname, './preload.js'),
+    },
+  });
+  mainWindow.setBrowserView(mainView);
+  mainView.setBounds({ x: 0, y: 36, width: 300, height: 500 });
+  mainView.setAutoResize({ width: true, height: true });
+  let appUrl = 'https://ringcentral.github.io/ringcentral-embeddable/app.html';
+  appUrl = `${appUrl}?appVersion=${version}&userAgent=RingCentralEmbeddableForLinux/${version}&enableRingtoneSettings=1`;
+  if (rcClientId) {
+    appUrl = `${appUrl}&clientId=${rcClientId}`;
+  }
+  if (rcServer) {
+    appUrl = `${appUrl}&appServer=${rcServer}`;
+  }
+  mainView.webContents.loadURL(appUrl);
+  mainView.webContents.setWindowOpenHandler((event) => {
+    const { url } = event;
+    if (url.indexOf('authorize') > -1) {
+      return { action: 'allow' };
+    }
+    if (url.indexOf('http') > -1) {
+      shell.openExternal(url);
+      return { action: 'deny' }
+    }
+    return { action: 'allow' };
+  });
+  // open dev tool default
+  if (process.env.DEBUG == 1) {
+    mainView.webContents.openDevTools();
+  }
 }
 
-function sendMessageToMainWindow(message) {
-  if (!mainWindow) {
+function sendMessageToMainView(message) {
+  if (!mainView) {
     return;
   }
-  mainWindow.webContents.send('main-message', message)
+  mainView.webContents.send('main-message', message)
 }
 
 const protocols = ['tel', 'callto', 'sms'];
@@ -75,10 +126,10 @@ function handleCustomizedSchemeUri(url) {
     return;
   }
   if (protocol === 'sms') {
-    sendMessageToMainWindow({ type: 'click-to-sms', phoneNumber: number });
+    sendMessageToMainView({ type: 'click-to-sms', phoneNumber: number });
   } else {
     if (dialerReady) {
-      sendMessageToMainWindow({ type: 'click-to-dial', phoneNumber: number });
+      sendMessageToMainView({ type: 'click-to-dial', phoneNumber: number });
       numberToDialer = null;
     } else {
       numberToDialer = number;
@@ -110,6 +161,7 @@ app.on('window-all-closed', () => {
   // On OS X it is common for applications and their menu bar
   // to stay active until the user quits explicitly with Cmd + Q
   mainWindow = null;
+  mainView = null;
   if (process.platform !== 'darwin') {
     app.quit();
   }
@@ -172,10 +224,16 @@ ipcMain.on('close-main-window', () => {
 ipcMain.on('dialer-ready', () => {
   dialerReady = true;
   if (numberToDialer) {
-    sendMessageToMainWindow({
+    sendMessageToMainView({
       type: 'click-to-dial',
       phoneNumber: numberToDialer
     });
     numberToDialer = null;
   }
 });
+
+ipcMain.on('set-environment', () => {
+  sendMessageToMainView({
+    type: 'rc-adapter-set-environment',
+  });
+});

package.json

@@ -19,7 +19,7 @@
     "package-armv7l": "electron-builder --dir --armv7l --linux deb"
   },
   "devDependencies": {
-    "electron": "^11.3.0",
+    "electron": "^13.1.0",
     "electron-builder": "^22.4.1"
   }
 }

yarn.lock

@@ -59,11 +59,16 @@
   dependencies:
     "@types/node" "*"
 
-"@types/node@*", "@types/node@^12.0.12":
+"@types/node@*":
   version "12.12.31"
   resolved "https://registry.yarnpkg.com/@types/node/-/node-12.12.31.tgz#d6b4f9645fee17f11319b508fb1001797425da51"
   integrity sha512-T+wnJno8uh27G9c+1T+a1/WYCHzLeDqtsGJkoEdSp2X8RTh3oOCZQcUnjAx90CS8cmmADX51O0FI/tu9s0yssg==
 
+"@types/node@^14.6.2":
+  version "14.17.2"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-14.17.2.tgz#1e94476db57ec93a372c7f7d29aa5707cfb92339"
+  integrity sha512-sld7b/xmFum66AAKuz/rp/CUO8+98fMpyQ3SBfzzBNGMd/1iHBTAg9oyAvcYlAj46bpc74r91jSw2iFdnx29nw==
+
 "@types/yargs-parser@*":
   version "15.0.0"
   resolved "https://registry.yarnpkg.com/@types/yargs-parser/-/yargs-parser-15.0.0.tgz#cb3f9f741869e20cce330ffbeb9271590483882d"
@@ -474,13 +479,13 @@ [email protected]:
     lazy-val "^1.0.4"
     mime "^2.4.4"
 
-electron@^11.3.0:
-  version "11.3.0"
-  resolved "https://registry.yarnpkg.com/electron/-/electron-11.3.0.tgz#87e8528fd23ae53b0eeb3a738f1fe0a3ad27c2db"
-  integrity sha512-MhdS0gok3wZBTscLBbYrOhLaQybCSAfkupazbK1dMP5c+84eVMxJE/QGohiWQkzs0tVFIJsAHyN19YKPbelNrQ==
+electron@^13.1.0:
+  version "13.1.1"
+  resolved "https://registry.yarnpkg.com/electron/-/electron-13.1.1.tgz#de1ea908bcac2197d7a5a373fb68c0c66043e10e"
+  integrity sha512-kySSb5CbIkWU2Kd9mf2rpGZC9p1nWhVVNl+CJjuOUGeVPXHbojHvTkDU1iC8AvV28eik3gqHisSJss40Caprog==
   dependencies:
     "@electron/get" "^1.0.1"
-    "@types/node" "^12.0.12"
+    "@types/node" "^14.6.2"
     extract-zip "^1.0.3"
 
 emoji-regex@^7.0.1: