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,11 +54,18 @@ export function ring(name: string) {
     stopRing();
 
     currentRing = loopNotificationRing(name);
+    currentRing.addEventListener('pause', () => {
+        stopRing();
+    });
 }
 
 export function stopRing() {
-    currentRing?.pause();
-    currentRing = null;
+    if (currentRing) {
+        currentRing.pause();
+        currentRing.src = '';
+        currentRing.remove();
+        currentRing = null;
+    }
 }
 
 let currentTryRing: HTMLAudioElement | null = null;
@@ -71,14 +78,22 @@ export function tryNotificationRing(name: string) {
     clearTimeout(currentTimer);
 
     currentTryRing = loopNotificationRing(name);
+    currentTryRing.addEventListener('pause', () => {
+        stopTryNotificationRing();
+    });
+
     currentTimer = setTimeout(() => {
         stopTryNotificationRing();
     }, 5000);
 }
 
 export function stopTryNotificationRing() {
-    currentTryRing?.pause();
-    currentTryRing = null;
+    if (currentTryRing) {
+        currentTryRing.pause();
+        currentTryRing.src = '';
+        currentTryRing.remove();
+        currentTryRing = null;
+    }
 }
 
 export function loopNotificationRing(name: string) {