Update Sample to 0.7.0

Author: git-babel

envs.js

@@ -1,4 +1,4 @@
-export const TEST_APP_ID = 'YOUR_APP_ID';
+export const TEST_APP_ID = BUILD_APP_ID || 'YOUR_APP_ID';
 export const USER_ID = undefined;
 export const ACCESS_TOKEN = undefined;
 export const IS_ACCESS_TOKEN_NEEDED = false;

lib/modules/periodicJob.js

@@ -0,0 +1,28 @@
+
+
+export default class PeriodicJob {
+
+  constructor(jobFunc, interval = 1000) {
+    this.jobFunc = jobFunc;
+    this.interval = interval;
+    this.lastResult = null;
+  }
+
+  start() {
+    this.stop();
+
+    this.timer = setInterval(() => {
+      this.lastResult = this.jobFunc();
+    }, this.interval);
+
+    return this;
+  }
+
+  stop() {
+    if (this.timer) {
+      clearInterval(this.timer);
+      this.timer = null;
+    }
+    return this;
+  }
+}

lib/utils/util.js

@@ -9,4 +9,4 @@ export function getCallOption() {
     videoFps: 30,
     frontCamera: false
   }
-}
+}

lib/views/CallView.js

@@ -3,14 +3,14 @@ import { createDiv, createImg, createLabel } from "../utils/domUtil";
 import { getCallOption } from "../utils/util";
 import CallButtons from "./CallButtons";
 import { classes } from "../css/styles.js";
+import PeriodicJob from "../modules/PeriodicJob";
 
 export default class CallView extends BaseElement {
   constructor({ call, state, args }) {
     super({ id: 'call_view', className: `${classes['column']} ${classes['center']} ${classes['view']} ${classes['viewCall']}`, args });
 
     this.call = call;
     this.state = state;
-    this.timer = null;
     this.connected = false;
     this.addCallListeners(call);
   }
@@ -25,7 +25,7 @@ export default class CallView extends BaseElement {
     const peerProfile = createImg({ src: remoteUser.profileUrl, className: classes['remoteProfile'] });
     const peerName = createLabel({ id: 'peer_name', innerText: remoteUser.userId, className: `${classes['peerName']} ${classes['fontBig']}` });
 
-    const connectionInfo = createLabel({ id: 'conn_info_label', className: `${classes['connectionInfo']} ${classes['fontNormal']}` });
+    this.connectionInfo = createLabel({ id: 'conn_info_label', className: `${classes['connectionInfo']} ${classes['fontNormal']}` });
 
     const peerStateDiv = createDiv({ id: 'peer_state', className: `${classes['column']} ${classes['peerStateDiv']} ${classes['invisible']}` });
     const peerMuteIcon = createDiv({ id: 'peer_mute_icon', className: classes['peerMuteIcon'] });
@@ -37,41 +37,37 @@ export default class CallView extends BaseElement {
 
     this.element.appendChild(peerProfile);
     this.element.appendChild(peerName);
-    this.element.appendChild(connectionInfo);
+    this.element.appendChild(this.connectionInfo);
     this.element.appendChild(peerStateDiv);
     buttons.appendToBaseElement(this);
 
-    let tick = 0;
-    this.timer = setInterval(() => {
-      const callingStr = 'Calling';
-      if (this.call && this.call.endResult) {
-        connectionInfo.innerText = this.call.endResult;
-        clearInterval(this.timer);
-      } else if (!this.connected && this.call.caller.userId === localUser.userId) {
-        connectionInfo.innerText = callingStr + '.'.repeat((tick % 3) + 1);
-      } else if (this.connected) {
-        const durationInSec = Math.floor(this.call.getDuration() / 1000);
-        const minutes = `0${Math.floor(durationInSec / 60)}`.slice(-2);
-        const seconds = `0${durationInSec % 60}`.slice(-2);
-        connectionInfo.innerText = `${minutes}:${seconds}`;
-      }
-
-      tick += 1;
-    }, 1000);
+    if (this.call.caller.userId === localUser.userId) {
+      this.drawCallingText();
+    }
 
     this.sendToChildren(this.state);
   }
 
   addCallListeners(call) {
     call.onConnected = () => {
       this.connected = true;
+      this.drawCurrentTime();
       this.sendToChildren('connected');
     };
 
     call.onEnded = () => {
+      this.drawEndResult();
       this.sendToChildren('ended');
     };
 
+    call.onReconnected = () => {
+      this.drawCurrentTime();
+    };
+
+    call.onReconnecting = () => {
+      this.drawReconnectingText();
+    };
+
     call.onRemoteAudioSettingsChanged = (call) => {
       this.onRemoteMuted(call.isRemoteAudioEnabled);
     };
@@ -108,7 +104,7 @@ export default class CallView extends BaseElement {
   accept() {
     const callOption = getCallOption();
 
-    this.call.accept(callOption).catch((e) => {
+    this.call.accept({ callOption: callOption }).catch((e) => {
       alert(e);
     });
   }
@@ -127,8 +123,51 @@ export default class CallView extends BaseElement {
 
   close() {
     this.end();
-    clearInterval(this.timer);
+    this.removeConnectionInfoDrawer();
 
     this.sendToParent('close', this.call);
   }
+
+  drawCallingText() {
+    this.removeConnectionInfoDrawer();
+    const rotatingTexts = ['Calling', 'Calling.', 'Calling..'];
+    let frame = 0;
+    this.connectionInfoDrawer = new PeriodicJob(() => {
+      this.connectionInfo.innerText = rotatingTexts[frame];
+      frame = (frame + 1) % rotatingTexts.length;
+    }).start();
+  }
+
+  drawReconnectingText() {
+    this.removeConnectionInfoDrawer();
+    const rotatingTexts = ['Reconnecting', 'Reconnecting.', 'Reconnecting..'];
+    let frame = 0;
+    this.connectionInfoDrawer = new PeriodicJob(() => {
+      this.connectionInfo.innerText = rotatingTexts[frame];
+      frame = (frame + 1) % rotatingTexts.length;
+    }).start();
+  }
+
+  drawCurrentTime() {
+    this.removeConnectionInfoDrawer();
+    this.connectionInfoDrawer = new PeriodicJob(() => {
+      const durationInSec = Math.floor(this.call.getDuration() / 1000);
+      const minutes = `0${Math.floor(durationInSec / 60)}`.slice(-2);
+      const seconds = `0${durationInSec % 60}`.slice(-2);
+      this.connectionInfo.innerText = `${minutes}:${seconds}`;
+    }).start();
+  }
+
+  drawEndResult() {
+    this.removeConnectionInfoDrawer();
+    this.connectionInfo.innerText = this.call.endResult;
+  }
+
+  removeConnectionInfoDrawer() {
+    if (this.connectionInfoDrawer) {
+      this.connectionInfoDrawer.stop();
+      this.connectionInfoDrawer = null;
+    }
+    this.connectionInfo.innerText = '';
+  }
 }

lib/views/DialView.js

@@ -58,7 +58,11 @@ export default class DialView extends BaseElement {
 
     try {
 
-      const call = SendBirdCall.dial(peerId, false, callOption, (call, error) => {
+      const call = SendBirdCall.dial({
+        userId: peerId,
+        isVideoCall: false,
+        callOption: callOption
+      }, (call, error) => {
         if (error) {
           console.error('dial failed');
           return;

lib/views/WidgetDialView.js

@@ -71,7 +71,11 @@ export default class widgetDialView extends BaseElement {
     const callOption = getCallOption();
 
     try {
-      const call = SendBirdCall.dial(peerId, false, callOption, (call, error) => {
+      const call = SendBirdCall.dial({
+        userId: peerId,
+        isVideoCall: false,
+        callOption: callOption
+      }, (call, error) => {
         if (error) {
           this.errorMsg.textContent = error.message;
           if (this.errorMsg.htmlFor) {

package-lock.json

@@ -34,7 +34,7 @@
     "express": "^4.17.1",
     "jss": "^10.0.3",
     "jss-preset-default": "^10.0.3",
-    "sendbird-calls": "^0.6.10",
+    "sendbird-calls": "^0.7.0",
     "uuid": "^3.3.3"
   }
 }

package.json

@@ -2,8 +2,9 @@ const { CleanWebpackPlugin } = require('clean-webpack-plugin');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const path = require('path');
+const webpack = require("webpack");
 
-module.exports = {
+module.exports = env => ({
   entry: {
     main: ['./js/main.js'],
     widget: ['./js/widget.js'],
@@ -70,6 +71,9 @@ module.exports = {
   plugins: [
     new CleanWebpackPlugin(),
     new MiniCssExtractPlugin(),
+    new webpack.DefinePlugin({
+      BUILD_APP_ID: (env && env.app_id) ? `"${env.app_id}"` : undefined,
+    }),
     new HtmlWebpackPlugin({
       filename: 'index.html',
       template: 'views/index.html',
@@ -86,4 +90,4 @@ module.exports = {
       chunks: ['widget']
     })
   ]
-};
+});