Release quickstart sample 1.3.0 (#10)

git-babel · web-flow · commit 4cbaf0d38168 · 2020-09-25T17:07:50.000+09:00
* Updated SDK version to 1.3.0.
* Added sound effect.
* Changed some strings.
diff --git a/README.md b/README.md
@@ -90,6 +90,26 @@ $ npm run start
 
 <br />
 
+##Sound Effects
+You can use different sound effects to enhance the user experience for events that take place while using Sendbird Calls. 
+
+To add sound effects, use the `SendBirdCall.addDirectCallSound(type: SoundType, uri: string)` method for the following events: dialing, ringing, reconnecting, and reconnected. Remember to set sound effects before the mentioned events occur. To remove sound effects, use the `SendBirdCall.Options.removeDirectCallSound(type: SoundType)` method.
+
+Use `SendBirdCall.addDirectCallSound(type: SoundType, uri: string)` method to set sound effects for a number of types: dialing, ringing, reconnecting, reconnected. Sound effects must be set before the events occur. To unregister a sound effect, remove it by calling `SendBirdCall.Options.removeDirectCallSound(type: SoundType)`.
+
+```javascript
+// Play on a caller’s side when making a call.
+SendBirdCall.addDirectCallSound(SendBirdCall.SoundType.DIALING, DIALING_SOUND_URL);
+// Play on a callee’s side when receiving a call.
+SendBirdCall.addDirectCallSound(SendBirdCall.SoundType.RINGING, RINGING_SOUND_URL);
+// Play when a connection is lost, but the SDK immediately attempts to reconnect.
+SendBirdCall.addDirectCallSound(SendBirdCall.SoundType.RECONNECTING, RECONNECTING_SOUND_URL);
+// Play when the connection is re-established.
+SendBirdCall.addDirectCallSound(SendBirdCall.SoundType.RECONNECTED, RECONNECTED_SOUND_URL);
+```
+For more information about sound effects, see the [SDK for JavaScript README for Sound effects](https://github.com/sendbird/sendbird-calls-javascript#sound-effect)
+
+
 ## Reference
 
 For further detail on Sendbird Calls for JavaScript, refer to [Sendbird Calls SDK for JavaScript README](https://github.com/sendbird/sendbird-calls-javascript/blob/master/README.md).
diff --git a/css/main.css b/css/main.css
@@ -106,7 +106,7 @@ body {
 }
 
 .title-choice-type {
-  width: 174px;
+  width: 185px;
   height: 20px;
   letter-spacing: -0.1px;
   color: var(--navy-600);
diff --git a/lib/assets/Dialing.mp3 b/lib/assets/Dialing.mp3
diff --git a/lib/assets/Reconnected.mp3 b/lib/assets/Reconnected.mp3
diff --git a/lib/assets/Reconnecting.mp3 b/lib/assets/Reconnecting.mp3
diff --git a/lib/assets/Ringing.mp3 b/lib/assets/Ringing.mp3
diff --git a/lib/components/Header.js b/lib/components/Header.js
@@ -12,7 +12,7 @@ export default class Header extends BaseElement {
 
     this.settingItems = [
       {
-        'label': 'Device settings',
+        'label': 'Device Settings',
         'callback': () => { this.sendToParent('show_settings') }
       },
       {
diff --git a/lib/components/TabToolBar.js b/lib/components/TabToolBar.js
@@ -15,7 +15,7 @@ export default class TabToolBar extends BaseElement {
     }
     const btnDial = createDiv({ id: 'btn_tab_dial', className: `${classes['btnTab']}` });
     const icoTabDial = createDiv({id: 'ico_tab_dial', className: `${classes['tabIco']}  ${classes['dialActive']}`});
-    const btnDialCaption = createParagraph({id: 'btn_dial_caption', innerText: 'Dial', className: `${classes['fontSmall']} ${classes['fontHeavy']} ${classes['btnTabCaption']} ${classes['btnTabActive']}`});
+    const btnDialCaption = createParagraph({id: 'btn_dial_caption', innerText: 'Call', className: `${classes['fontSmall']} ${classes['fontHeavy']} ${classes['btnTabCaption']} ${classes['btnTabActive']}`});
 
     btnDial.appendChild(icoTabDial);
     btnDial.appendChild(btnDialCaption);
@@ -37,7 +37,7 @@ export default class TabToolBar extends BaseElement {
 
     const btnCallLog = createDiv({id: 'btn_tab_calllog', className: `${classes['btnTab']}`});
     const icoCallLog = createDiv({id: 'ico_tab_callog', className: `${classes['tabIco']} ${classes['callLogDeactive']}`});
-    const btnCalllogCaption = createParagraph({id: 'btn_calllog_caption', innerText: 'History', className: `${classes['fontSmall']} ${classes['fontHeavy']} ${classes['btnTabCaption']} ${classes['btnTabDeactive']}`});
+    const btnCalllogCaption = createParagraph({id: 'btn_calllog_caption', innerText: 'Recents', className: `${classes['fontSmall']} ${classes['fontHeavy']} ${classes['btnTabCaption']} ${classes['btnTabDeactive']}`});
 
     btnCallLog.appendChild(icoCallLog);
     btnCallLog.appendChild(btnCalllogCaption);
diff --git a/lib/css/styles.js b/lib/css/styles.js
@@ -608,7 +608,7 @@ const styles = {
   },
 
   dialTitle: {
-    marginBottom: '16px'
+    marginBottom: '32px'
   },
 
   /*** buttons ***/
@@ -1273,15 +1273,6 @@ const styles = {
     backgroundPosition: 'center'
   },
 
-  dialDesc: {
-    width: '312px',
-    height: '40px',
-    textAlign: 'center',
-    color: colors.navy400,
-    marginBottom: '32px',
-    letterSpacing: '-0.1px'
-  },
-
   btnVideo: {
     backgroundImage: `url(${videoPurpleIcon})`,
     backgroundRepeat: 'no-repeat',
diff --git a/lib/views/AppInfoView.js b/lib/views/AppInfoView.js
@@ -1,7 +1,6 @@
-import SendBirdCall from "sendbird-calls";
 import BaseElement from "../components/BaseElement";
 import { classes } from "../css/styles";
-import { createDiv, createLabel, createOption, createSelect } from "../utils/domUtil";
+import { createDiv, createLabel } from "../utils/domUtil";
 
 export default class AppInfoView extends BaseElement {
   constructor({ args }) {
@@ -55,7 +54,7 @@ export default class AppInfoView extends BaseElement {
     const applicationInfoContainer = createDiv({ id: 'select_container', className: classes['selectContainer'] });
     const applicationNameLabel = createLabel({
       id: 'app_name_label',
-      innerText: 'Application name',
+      innerText: 'Name',
       className: `${classes['popupItemLabel']} ${classes['fontSmall']} ${classes['fontHeavy']}`
     });
     const applicationName = createLabel({
@@ -69,7 +68,7 @@ export default class AppInfoView extends BaseElement {
 
     const applicationIDLabel = createLabel({
       id: 'app_id_label',
-      innerText: 'Application ID',
+      innerText: 'ID',
       className: `${classes['popupItemLabel']} ${classes['fontSmall']} ${classes['fontHeavy']}`
     });
 
diff --git a/lib/views/CallLogItem.js b/lib/views/CallLogItem.js
@@ -126,7 +126,10 @@ export class CallLogItem {
     } else {
       const wrapper = createDiv({ id: 'empty_calllog', className: className });
       const icoCallLogEmpty = createDiv({ className: `${classes['icoCallLogEmpty']}` });
-      const labelCallLogEmpty = createDiv({ innerText: 'No call history', className: `${classes['labelCallLogEmpty']} ${classes['font16']} ${classes['fontHeavy']}` });
+      const labelCallLogEmpty = createDiv({
+        innerText: 'The list of calls you make will show here.\nTap the phone button to start making a call.',
+        className: `${classes['labelCallLogEmpty']} ${classes['fontSmall']}`
+      });
       wrapper.appendChild(icoCallLogEmpty);
       wrapper.appendChild(labelCallLogEmpty);
 
diff --git a/lib/views/CallView.js b/lib/views/CallView.js
@@ -1,7 +1,6 @@
 import BaseElement from "../components/BaseElement";
 import { createAudio, createDiv, createImg, createLabel, createVideo } from "../utils/domUtil";
 import { getCallOption } from "../utils/util";
-import { hasClassName } from "../utils/domUtil";
 import CallButtons from "./CallButtons";
 import { classes } from "../css/styles.js";
 import PeriodicJob from "../modules/periodicJob";
@@ -38,9 +37,9 @@ export default class CallView extends BaseElement {
 
     let connectionText;
     if (this.call.isVideoCall) {
-      connectionText = 'Incoming video call…';
+      connectionText = 'incoming video call…';
     } else {
-      connectionText = 'Incoming voice call…';
+      connectionText = 'incoming voice call…';
     }
     this.connectionInfo = createLabel({
       id: 'conn_info_label',
@@ -50,7 +49,7 @@ export default class CallView extends BaseElement {
 
     const peerStateDiv = createDiv({ id: 'peer_state', className: `${classes['column']} ${classes['peerStateDiv']} ${classes['invisible']}` });
     const peerMuteIcon = createDiv({ id: 'peer_mute_icon', className: `${classes['peerMuteIcon']}` });
-    const peerMuteLabel = createLabel({ id: 'peer_mute_label', className: `${classes['peerMuteLabel']} ${classes['fontSmall']} ${classes['fontColorWhite']}`, innerText: `${remoteUser.userId} audio muted this call` });
+    const peerMuteLabel = createLabel({ id: 'peer_mute_label', className: `${classes['peerMuteLabel']} ${classes['fontSmall']} ${classes['fontColorWhite']}`, innerText: `${remoteUser.userId} is muted.` });
     peerStateDiv.appendChild(peerMuteIcon);
     peerStateDiv.appendChild(peerMuteLabel);
 
@@ -227,7 +226,7 @@ export default class CallView extends BaseElement {
 
   drawCallingText() {
     this.removeConnectionInfoDrawer();
-    const rotatingTexts = ['Calling', 'Calling.', 'Calling..'];
+    const rotatingTexts = ['calling', 'calling.', 'calling..'];
     let frame = 0;
     this.connectionInfoDrawer = new PeriodicJob(() => {
       this.connectionInfo.innerText = rotatingTexts[frame];
@@ -237,7 +236,7 @@ export default class CallView extends BaseElement {
 
   drawReconnectingText() {
     this.removeConnectionInfoDrawer();
-    const rotatingTexts = ['Reconnecting', 'Reconnecting.', 'Reconnecting..'];
+    const rotatingTexts = ['reconnecting', 'reconnecting.', 'reconnecting..'];
     let frame = 0;
     this.connectionInfoDrawer = new PeriodicJob(() => {
       this.connectionInfo.innerText = rotatingTexts[frame];
diff --git a/lib/views/DialView.js b/lib/views/DialView.js
@@ -28,10 +28,6 @@ export default class DialView extends BaseElement {
       className: `${classes['formContainer']} ${classes['column']} ${classes['center']}`
     });
     const dialTitleDiv = createDiv({ id: 'title', className: `${classes['fontBig']} ${classes['fontDemi']} ${classes['dialTitle']}`, innerText: 'Make a call'});
-    const descDiv = createDiv({id: 'desc_div', 
-      innerText: 'Enter the user ID of the user you wish to call, then press one of the video or voice call buttons',
-      className: `${classes['fontNormal']} ${classes['dialDesc']} ${classes['fontHeavy']}`
-    });
 
     const peerId = createInput({
       id: 'peer_id',
@@ -54,7 +50,6 @@ export default class DialView extends BaseElement {
     btns.appendChild(btnAudio);
 
     formContainer.appendChild(dialTitleDiv);
-    formContainer.appendChild(descDiv);
     formContainer.appendChild(peerId);
     formContainer.appendChild(btns);
 
diff --git a/lib/views/LoginView.js b/lib/views/LoginView.js
@@ -1,9 +1,13 @@
-import SendBirdCall from "sendbird-calls";
+import SendBirdCall, { SoundType } from "sendbird-calls";
 
 import BaseElement from "../components/BaseElement";
 import { createButton, createDiv, createInput, createLabel } from "../utils/domUtil";
 import { classes } from "../css/styles.js";
 import pack from "../../package.json";
+import DialingSound from "../assets/Dialing.mp3";
+import RingingSound from "../assets/Ringing.mp3";
+import ReconnectingSound from '../assets/Reconnecting.mp3';
+import ReconnectedSound from '../assets/Reconnected.mp3';
 
 export default class LoginView extends BaseElement {
   constructor({ args }) {
@@ -41,11 +45,11 @@ export default class LoginView extends BaseElement {
     loginTitleDiv.appendChild(loginTitle);
 
     const formContainer = createDiv({ id: 'form_container', className: classes['formContainer'] });
-    const inputAppIdLabel = createLabel({ id: 'input_app_id_label', htmlFor: 'input_app_id', innerText: 'App ID', className: `${classes['fieldLabel']} ${classes['fontSmall']} ${classes['fontHeavy']}` });
+    const inputAppIdLabel = createLabel({ id: 'input_app_id_label', htmlFor: 'input_app_id', innerText: 'Application ID', className: `${classes['fieldLabel']} ${classes['fontSmall']} ${classes['fontHeavy']}` });
     const inputAppId = createInput({ id: 'input_app_id', className: `${classes['field']} ${classes['fontNormal']}` });
     const inputIdLabel = createLabel({ id: 'input_id_label', htmlFor: 'input_id', innerText: 'User ID', className: `${classes['fieldLabel']} ${classes['fontSmall']} ${classes['fontHeavy']}` });
     const inputId = createInput({ id: 'input_id', className: `${classes['field']} ${classes['fontNormal']}` });
-    const inputAccessTokenLabel = createLabel({ id: 'input_access_token_label', htmlFor: 'input_access_token', innerText: 'Access Token', className: `${classes['fieldLabel']} ${classes['fontSmall']} ${classes['fontHeavy']}` });
+    const inputAccessTokenLabel = createLabel({ id: 'input_access_token_label', htmlFor: 'input_access_token', innerText: 'Access token', className: `${classes['fieldLabel']} ${classes['fontSmall']} ${classes['fontHeavy']}` });
     const inputAccessToken = createInput({ id: 'input_access_token', className: `${classes['field']} ${classes['fontNormal']}` });
 
     const btnLogin = createButton({ id: 'btn_login', className: `${classes['btn']} ${classes['btnPrimary']} ${classes['btnMid']} ${classes['loginButton']} ${classes['fontNormal']}`, });
@@ -57,6 +61,11 @@ export default class LoginView extends BaseElement {
       const accessToken = inputAccessToken.value;
       if (appId) this.setAppId(appId);
       this.setCredentials(userId, accessToken);
+
+      SendBirdCall.addDirectCallSound(SoundType.DIALING, DialingSound)
+      SendBirdCall.addDirectCallSound(SoundType.RINGING, RingingSound)
+      SendBirdCall.addDirectCallSound(SoundType.RECONNECTING, ReconnectingSound)
+      SendBirdCall.addDirectCallSound(SoundType.RECONNECTED, ReconnectedSound)
     };
 
     if (!this.args.appId) {
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -34,7 +34,7 @@
     "express": "^4.17.1",
     "jss": "^10.0.3",
     "jss-preset-default": "^10.0.3",
-    "sendbird-calls": "^1.2.5",
+    "sendbird-calls": "^1.3.0",
     "uuid": "^3.3.3"
   }
 }
diff --git a/views/index.html b/views/index.html
@@ -13,18 +13,18 @@
       <div id="welcome_view" class="column center">
         <img src="<%=require('../img/ic-logo-horizontal.svg')%>" alt="Sendbird horizontal logo svg icon" class="ic-logo-horizontal">
         <div class="voice-sample-page title font-weight-demi">
-          Sendbird Calls Quickstart
+          Sendbird Calls
         </div>
         <div class="title-choice-type">
-          Choose an application type
+          Choose a quickstart app type
         </div>
         <div class="row center margin-top-24">
           <div class="choice-item margin-right-24" onclick="location.href='main.html'">
             <div class="title-choice-item">
               Full-screen
             </div>
             <div class="desc-choice-item">
-              The full-screen application type provides an example of a standalone phone call web app.
+              The full-screen type allows you to make calls without any installation on your browser.
             </div>
           </div>
 
@@ -33,7 +33,7 @@
               Widget
             </div>
             <div class="desc-choice-item">
-              The widget application type showcases how a phone call may be overlaid on top of an existing web application.
+              The widget type allows you to make calls on your existing web application.
             </div>
           </div>
         </div>
diff --git a/views/widget.html b/views/widget.html
@@ -12,11 +12,10 @@
         <div id="welcome_view" class="column center">
             <img src="<%=require('../img/ic-logo-horizontal.svg')%>" alt="Sendbird horizontal logo svg icon" class="ic-logo-horizontal" />
             <div class="voice-sample-page title font-weight-demi">
-              Sendbird Calls Quickstart
+              Sendbird Calls
             </div>
             <div class="voice-sample-desc desc">
-              This is the Sendbird Calls Quickstart page.</br> 
-              To try our widget, please click the button below.
+              Try our web widget for Calls by clicking the icon below.
             </div>
             <img src="<%=require('../img/ic-arrow-down-right-24.svg')%>" alt="arrow-down-right" class="ic-arrow-down-right-24" />
         </div>
diff --git a/webpack.config.js b/webpack.config.js
@@ -56,7 +56,7 @@ module.exports = env => ({
         ]
       },
       {
-        test: /\.(png|jpe?g|gif|svg)$/i,
+        test: /\.(png|jpe?g|gif|svg|mp3)$/i,
         use: [
           {
             loader: 'file-loader',

Original file line number	Diff line number	Diff line change
`@@ -106,7 +106,7 @@ body {`
`106`	`106`	`}`
`107`	`107`
`108`	`108`	`.title-choice-type {`
`109`		`- width: 174px;`
	`109`	`+ width: 185px;`
`110`	`110`	`height: 20px;`
`111`	`111`	`letter-spacing: -0.1px;`
`112`	`112`	`color: var(--navy-600);`
Original file line number	Diff line number	Diff line change
`@@ -12,7 +12,7 @@ export default class Header extends BaseElement {`
`12`	`12`
`13`	`13`	`this.settingItems = [`
`14`	`14`	`{`
`15`		`- 'label': 'Device settings',`
	`15`	`+ 'label': 'Device Settings',`
`16`	`16`	`'callback': () => { this.sendToParent('show_settings') }`
`17`	`17`	`},`
`18`	`18`	`{`