From 1d81b744ea3cffc1e8fe46375ec348c27c7544ab Mon Sep 17 00:00:00 2001
From: schlagmichdoch <schlagmichdoch@users.noreply.github.com>
Date: Mon, 5 Feb 2024 02:09:40 +0100
Subject: [PATCH] Put blop sound into separate function and only play if on
 desktop

---
 public/index.html      |  2 +-
 public/scripts/ui.js   |  4 ++--
 public/scripts/util.js | 18 ++++++++++++++++++
 3 files changed, 21 insertions(+), 3 deletions(-)

diff --git a/public/index.html b/public/index.html
index 0cdd990..d67b765 100644
--- a/public/index.html
+++ b/public/index.html
@@ -744,7 +744,7 @@
     <script src="scripts/ui-main.js" defer></script>
     <script src="scripts/main.js" defer></script>
     <!-- Sounds -->
-    <audio id="blop" autobuffer="true">
+    <audio id="blop" preload="metadata" disableremoteplayback="true" x-webkit-airplay="deny" muted>
         <source src="sounds/blop.mp3" type="audio/mpeg">
         <source src="sounds/blop.ogg" type="audio/ogg">
     </audio>
diff --git a/public/scripts/ui.js b/public/scripts/ui.js
index f29e204..27cae3f 100644
--- a/public/scripts/ui.js
+++ b/public/scripts/ui.js
@@ -991,7 +991,7 @@ class ReceiveFileDialog extends ReceiveDialog {
             badgeClassName: badgeClassName
         });
 
-        window.blop.play();
+        audioPlayer.playBlop();
 
         await this._nextFiles();
     }
@@ -2068,7 +2068,7 @@ class ReceiveTextDialog extends Dialog {
     }
 
     _onText(text, peerId) {
-        window.blop.play();
+        audioPlayer.playBlop();
         this._receiveTextQueue.push({text: text, peerId: peerId});
         this._setDocumentTitleMessages();
         if (this.isShown()) return;
diff --git a/public/scripts/util.js b/public/scripts/util.js
index fc418ff..16c03c3 100644
--- a/public/scripts/util.js
+++ b/public/scripts/util.js
@@ -62,6 +62,24 @@ window.isMobile = window.iOS || window.android;
 
 
 // Helper functions
+
+const audioPlayer = (() => {
+    const blop = document.getElementById('blop');
+    blop.addEventListener('ended', _ => {
+        blop.muted = true
+    });
+
+
+    return {
+        playBlop() {
+            if (window.isMobile) return;
+
+            blop.muted = false;
+            blop.play();
+        }
+    }
+})();
+
 const zipper = (() => {
 
     let zipWriter;