`oh-sipclient`: refactor ring & ring back tone to catch exception (#1474)

Signed-off-by: Florian Hotze <florianh_dev@icloud.com>

bundles/org.openhab.ui/doc/components/oh-sipclient-card.md

@@ -89,7 +89,7 @@ Usage is explained at the [`oh-sipclient` component docs](/docs/ui/components/oh
 </PropBlock>
 <PropBlock type="BOOLEAN" name="enableTones" label="Enable tones">
   <PropDescription>
-    Enable ringback and ring tone, might cause issues with your browser, so that your call fails
+    Enable ringback and ring tone. Not recommended for mobile browsers, might cause issues. Ring tone might only work after interaction with the webpage.
   </PropDescription>
 </PropBlock>
 <PropBlock type="BOOLEAN" name="hideCallerId" label="Hide caller id">

bundles/org.openhab.ui/doc/components/oh-sipclient.md

@@ -75,7 +75,7 @@ If the call is accepted, a red hangup button is accepted.
 </PropBlock>
 <PropBlock type="BOOLEAN" name="enableTones" label="Enable tones">
   <PropDescription>
-    Enable ringback and ring tone, might cause issues with your browser, so that your call fails
+    Enable ringback and ring tone. Not recommended for mobile browsers, might cause issues. Ring tone might only work after interaction with the webpage.
   </PropDescription>
 </PropBlock>
 <PropBlock type="BOOLEAN" name="hideCallerId" label="Hide caller id">

bundles/org.openhab.ui/web/src/assets/definitions/widgets/system/sipclient.js

@@ -6,7 +6,7 @@ export default () => [
   pt('domain', 'Domain', 'SIP Domain').r(),
   pt('username', 'Username', 'SIP Username').r(),
   pt('password', 'Password', 'SIP Password').r(),
-  pb('enableTones', 'Enable tones', 'Enable ringback and ring tone, might cause issues with your browser, so that your call fails'),
+  pb('enableTones', 'Enable tones', 'Enable ringback and ring tone. Not recommended for mobile browsers, might cause issues. Ring tone might only work after interaction with the webpage.').a(),
   pb('hideCallerId', 'Hide caller id', 'Hides the username of the remote party on incoming call'),
   pt('phonebook', 'Phonebook', 'Single SIP Address (phone number) for a single call target or a comma-separated list of \'phoneNumber=name\' for multiple call targets').r(),
   pb('enableVideo', 'Enable Video', 'Enable video calling'),

bundles/org.openhab.ui/web/src/components/widgets/system/oh-sipclient.vue

@@ -55,6 +55,7 @@ import WidgetConfigPopup from '@/components/pagedesigner/widget-config-popup.vue
 import { WidgetDefinition, pg, pt } from '@/assets/definitions/widgets/helpers.js'
 
 // Thanks to Joseph Sardin, https://bigsoundbank.com
+// ringFile source: https://bigsoundbank.com/detail-0375-phone-ring-5.html
 import ringFile from './oh-sipclient-ringtone.mp3'
 import ringBackFile from './oh-sipclient-ringback.mp3'
 
@@ -141,29 +142,20 @@ export default {
 
           this.remoteParty = (this.phonebook.size > 0) ? this.phonebook.get(this.session.remote_identity.uri.user) : this.session.remote_identity.uri.user
 
-          // Handle outgoing call,
           if (this.session.direction === 'outgoing') {
-            if (this.config.enableTones === true) {
-              // Set ringback tone
-              this.audio = new Audio(ringBackFile)
-            }
-            console.info(this.loggerPrefix + ': Calling ' + this.remoteParty + ' ...')
+            // Handle accepted call
+            this.session.on('accepted', () => {
+              this.stopTones()
+              console.info(this.loggerPrefix + ': Outgoing call in progress')
+            })
           } else if (this.session.direction === 'incoming') {
-            // Set ring tone
-            if (this.config.enableTones === true) this.audio = new Audio(ringFile)
             console.info(this.loggerPrefix + ': Incoming call from ' + this.remoteParty)
+            this.playTone(ringFile)
+            // Handle accepted call
+            this.session.on('accepted', () => {
+              console.info(this.loggerPrefix + ': Incoming call in progress')
+            })
           }
-          if (this.config.enableTones === true) {
-            // Play ringback or ring tone
-            this.audio.loop = true
-            this.audio.play()
-          }
-          // Handle accepted call
-          this.session.on('accepted', () => {
-            // Stop playing ringback or ring tone
-            if (this.config.enableTones === true) this.audio.pause()
-            console.info(this.loggerPrefix + ': Call in progress')
-          })
           // Handle ended call
           this.session.on('ended', () => {
             this.stopMedia()
@@ -171,6 +163,7 @@ export default {
           })
           // Handle failed call
           this.session.on('failed', (event) => {
+            this.stopTones()
             this.stopMedia()
             console.info(this.loggerPrefix + ': Call failed. Reason: ' + event.cause)
           })
@@ -178,6 +171,24 @@ export default {
         this.phone.start()
       })
     },
+    playTone (file) {
+      if (this.config.enableTones === true) {
+        console.info(this.loggerPrefix + ': Starting to play tone')
+        this.audio = new Audio(file)
+        // Play tone
+        this.audio.loop = true
+        this.audio.load()
+        this.audio.play().catch(error => {
+          console.debug(this.loggerPrefix + ': Play tone: ' + error)
+        })
+      }
+    },
+    stopTones () {
+      if (this.config.enableTones === true) {
+        console.info(this.loggerPrefix + ': Stop playing tone')
+        this.audio.pause()
+      }
+    },
     attachMedia () {
       this.session.connection.addEventListener('track', (track) => {
         if (this.config.enableVideo) {
@@ -196,8 +207,6 @@ export default {
       })
     },
     stopMedia () {
-      // Stop playing ringback or ring tone
-      if (this.config.enableTones === true) this.audio.pause()
       if (this.config.enableVideo) this.$refs.remoteVideo.srcObject = null
       if (this.config.enableLocalVideo) {
         this.$refs.localVideo.srcObject = null
@@ -205,10 +214,13 @@ export default {
       }
     },
     call (target) {
+      console.info(this.loggerPrefix + ': Calling ' + this.remoteParty + ' ...')
       this.phone.call(target, { mediaConstraints: { audio: true, video: this.config.enableVideo } })
       this.attachMedia()
+      this.playTone(ringBackFile)
     },
     answer () {
+      this.stopTones()
       this.session.answer({ mediaConstraints: { audio: true, video: this.config.enableVideo } })
       this.attachMedia()
     },