Add sound effect features in sample

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

lib/assets/Dialing.mp3

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

lib/assets/Reconnected.mp3

@@ -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 }) {
@@ -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) {

lib/assets/Reconnecting.mp3

@@ -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"
   }
 }

lib/assets/Ringing.mp3

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