Release quickstart sample 1.3.0 (#10)

* Updated SDK version to 1.3.0.
* Added sound effect.
* Changed some strings.

Author: git-babel

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).

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);

lib/assets/Dialing.mp3

@@ -12,7 +12,7 @@ export default class Header extends BaseElement {
 
     this.settingItems = [
       {
-        'label': 'Device settings',
+        'label': 'Device Settings',
         'callback': () => { this.sendToParent('show_settings') }
       },
       {

lib/assets/Reconnected.mp3

@@ -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);

lib/assets/Reconnecting.mp3

@@ -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',

lib/assets/Ringing.mp3

@@ -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']}`
     });