Ringtone for incoming calls.

src/config.js

@@ -112,3 +112,20 @@ export const CALL_STATE_NONE = 0;
 export const CALL_STATE_OUTGOING_INITATED = 1;
 export const CALL_STATE_INCOMING_RECEIVED = 2;
 export const CALL_STATE_IN_PROGRESS = 3;
+// Video calls/WebRTC configuration.
+export const CALL_WEBRTC_CONFIG = {
+  iceServers: [
+    { urls: [ "stun:bn-turn1.xirsys.com" ] },
+    {
+      username: "0kYXFmQL9xojOrUy4VFemlTnNPVFZpp7jfPjpB3AjxahuRe4QWrCs6Ll1vDc7TTjAAAAAGAG2whXZWJUdXRzUGx1cw==",
+      credential: "285ff060-5a58-11eb-b269-0242ac140004",
+      urls: [
+        "turn:bn-turn1.xirsys.com:80?transport=udp",
+        "turn:bn-turn1.xirsys.com:3478?transport=udp",
+        "turn:bn-turn1.xirsys.com:80?transport=tcp",
+        "turn:bn-turn1.xirsys.com:3478?transport=tcp",
+        "turns:bn-turn1.xirsys.com:443?transport=tcp",
+        "turns:bn-turn1.xirsys.com:5349?transport=tcp"
+       ]
+    }
+ ]};

src/views/call-view.jsx

@@ -17,6 +17,8 @@ function _clip(str, length) {
   return str && str.substring(0, length);
 }
 
+const RING_SOUND = new Audio("audio/phone_ring.mp3");
+
 class CallView extends React.Component {
   constructor(props) {
     super(props);
@@ -34,6 +36,7 @@ class CallView extends React.Component {
     this.onMetaDesc = this.onMetaDesc.bind(this);
     this.handleRejectCall = this.handleRejectCall.bind(this);
     this.handleAcceptCall = this.handleAcceptCall.bind(this);
+    this.ringTimer = null;
   }
 
   componentDidMount() {
@@ -43,6 +46,8 @@ class CallView extends React.Component {
     }
     this.resetDesc(topic, this.props);
     if (this.props.callState == 2) {
+      RING_SOUND.play();
+      this.ringTimer = setInterval(() => RING_SOUND.play(), 2000);
       this.props.onRinging(this.props.topic, this.props.seq);
     }
   }
@@ -66,6 +71,10 @@ class CallView extends React.Component {
   }
 
   componentWillUnmount() {
+    if (this.ringTimer != null) {
+      clearInterval(this.ringTimer);
+      RING_SOUND.pause();
+    }
     const topic = this.props.tinode.getTopic(this.props.topic);
     if (!topic) {
       return;

src/widgets/rtc-panel.jsx

@@ -2,16 +2,13 @@ import React from 'react';
 
 import LetterTile from '../widgets/letter-tile.jsx';
 
-import { CALL_STATE_OUTGOING_INITATED, CALL_STATE_IN_PROGRESS } from '../config.js';
+import { CALL_STATE_OUTGOING_INITATED, CALL_STATE_IN_PROGRESS, CALL_WEBRTC_CONFIG } from '../config.js';
 
 export default class RtcPanel extends React.PureComponent {
   constructor(props) {
     super(props);
 
     this.state = {
-      isChannelReady: false,
-      isInitiator: false,
-      isStarted: false,
       localStream: undefined,
       pc: undefined,
 
@@ -23,23 +20,6 @@ export default class RtcPanel extends React.PureComponent {
       video: true
     };
 
-    this.pcConfig = {
-      iceServers: [
-        { urls: [ "stun:bn-turn1.xirsys.com" ] }, 
-        {   
-          username: "0kYXFmQL9xojOrUy4VFemlTnNPVFZpp7jfPjpB3AjxahuRe4QWrCs6Ll1vDc7TTjAAAAAGAG2whXZWJUdXRzUGx1cw==",   
-          credential: "285ff060-5a58-11eb-b269-0242ac140004",   
-          urls: [       
-            "turn:bn-turn1.xirsys.com:80?transport=udp",       
-            "turn:bn-turn1.xirsys.com:3478?transport=udp",       
-            "turn:bn-turn1.xirsys.com:80?transport=tcp",       
-            "turn:bn-turn1.xirsys.com:3478?transport=tcp",       
-            "turns:bn-turn1.xirsys.com:443?transport=tcp",       
-            "turns:bn-turn1.xirsys.com:5349?transport=tcp"   
-           ]
-        }
-     ]};
-
     this.localRef = React.createRef();
     this.remoteRef = React.createRef();
 
@@ -158,7 +138,7 @@ export default class RtcPanel extends React.PureComponent {
   }
 
   createPeerConnection() {
-    var pc = new RTCPeerConnection(this.pcConfig);
+    var pc = new RTCPeerConnection(CALL_WEBRTC_CONFIG);
 
     pc.onicecandidate = this.handleICECandidateEvent;
     pc.oniceconnectionstatechange = this.handleICEConnectionStateChangeEvent;
@@ -327,7 +307,7 @@ export default class RtcPanel extends React.PureComponent {
 
       this.state.pc.close();
     }
-    this.setState({isStarted: false, isChannelReady: false, isInitiator: false, pc: null});
+    this.setState({pc: null});
   }
 
   handleCloseClick() {