MM-53222 - Fix: Calls Ringing sometimes controllable with media keys (#23775)

* prevent media keys from controlling calls ring sounds

* stop ring on pause

---------

Co-authored-by: Mattermost Build <build@mattermost.com>

webapp/channels/src/utils/notification_sounds.ts

@@ -54,12 +54,19 @@ export function ring(name: string) {
     stopRing();
 
     currentRing = loopNotificationRing(name);
+    currentRing.addEventListener('pause', () => {
+        stopRing();
+    });
 }
 
 export function stopRing() {
-    currentRing?.pause();
+    if (currentRing) {
+        currentRing.pause();
+        currentRing.src = '';
+        currentRing.remove();
         currentRing = null;
     }
+}
 
 let currentTryRing: HTMLAudioElement | null = null;
 let currentTimer: NodeJS.Timeout;
@@ -71,15 +78,23 @@ export function tryNotificationRing(name: string) {
     clearTimeout(currentTimer);
 
     currentTryRing = loopNotificationRing(name);
+    currentTryRing.addEventListener('pause', () => {
+        stopTryNotificationRing();
+    });
+
     currentTimer = setTimeout(() => {
         stopTryNotificationRing();
     }, 5000);
 }
 
 export function stopTryNotificationRing() {
-    currentTryRing?.pause();
+    if (currentTryRing) {
+        currentTryRing.pause();
+        currentTryRing.src = '';
+        currentTryRing.remove();
         currentTryRing = null;
     }
+}
 
 export function loopNotificationRing(name: string) {
     const audio = new Audio(callsNotificationSounds.get(name) ?? callsNotificationSounds.get('Dynamic'));