add rining to outgoing call, convert souds to much smaller m4a

src/views/incoming-call-view.jsx

@@ -12,7 +12,7 @@ import { CALL_STATE_INCOMING_RECEIVED } from '../constants.js';
 import { makeImageUrl } from '../lib/blob-helpers.js';
 import { clipStr } from '../lib/utils.js'
 
-const RING_SOUND = new Audio('audio/call-in.mp3');
+const RING_SOUND = new Audio('audio/call-in.m4a');
 
 export default class IncomingCallView extends React.Component {
   constructor(props) {

src/views/tinode-web.jsx

@@ -31,7 +31,7 @@ import { secondsToTime } from '../lib/strformat.js'
 import { updateFavicon } from '../lib/utils.js';
 
 // Sound to play on message received.
-const POP_SOUND = new Audio('audio/msg.mp3');
+const POP_SOUND = new Audio('audio/msg.m4a');
 
 const messages = defineMessages({
   reconnect_countdown: {

src/widgets/call-panel.jsx

@@ -9,6 +9,9 @@ import { CALL_STATE_OUTGOING_INITATED, CALL_STATE_IN_PROGRESS } from '../constan
 
 import { clipStr } from '../lib/utils.js'
 
+const RING_SOUND = new Audio('audio/call-out.m4a');
+RING_SOUND.loop = true;
+
 const messages = defineMessages({
   already_in_call: {
     id: 'already_in_call',
@@ -133,6 +136,9 @@ class CallPanel extends React.PureComponent {
       .then(stream => {
         this.setState({localStream: stream});
         this.localRef.current.srcObject = stream;
+
+        RING_SOUND.play();
+
         // Send call invitation.
         this.props.onInvite(this.props.topic, this.props.seq, this.props.callState);
       })
@@ -140,6 +146,9 @@ class CallPanel extends React.PureComponent {
   }
 
   stop() {
+    RING_SOUND.stop();
+    RING_SOUND.currentTime = 0;
+
     this.stopTracks(this.localRef.current);
     this.stopTracks(this.remoteRef.current);
     if (this.state.pc) {