From aff8a32bc1764fef9f97e809eb6ce37ba9b9b8a0 Mon Sep 17 00:00:00 2001
From: Anders Kaseorg <anders@zulip.com>
Date: Mon, 22 Mar 2021 19:41:26 -0700
Subject: [PATCH] notifications: Simplify sound playing.

Remove the unused notifications-area wrapper.  Remove the feature
detection code as all browsers recognize the <audio> element.  Create
the <audio> statically with the page template.  Use multiple <source>s
to let the browser detect the appropriate format instead of trying to
do its job for it.  Remove the absurd loop="yes" attribute, which had
fortunately been specified on the wrong element.

Signed-off-by: Anders Kaseorg <anders@zulip.com>
---
 static/js/notifications.js          | 44 ++++-------------------------
 static/js/settings_notifications.js |  2 +-
 static/styles/zulip.css             |  9 ------
 templates/zerver/app/home.html      |  6 ++--
 4 files changed, 11 insertions(+), 50 deletions(-)

diff --git a/static/js/notifications.js b/static/js/notifications.js
index b483a480ab..95eab73889 100644
--- a/static/js/notifications.js
+++ b/static/js/notifications.js
@@ -28,8 +28,6 @@ const notice_memory = new Map();
 // case after a server-initiated reload.
 let window_focused = document.hasFocus && document.hasFocus();
 
-let supports_sound;
-
 let NotificationAPI;
 
 export function set_notification_api(n) {
@@ -69,14 +67,6 @@ export function get_notifications() {
     return notice_memory;
 }
 
-function get_audio_file_path(audio_element, audio_file_without_extension) {
-    if (audio_element.canPlayType('audio/ogg; codecs="vorbis"')) {
-        return audio_file_without_extension + ".ogg";
-    }
-
-    return audio_file_without_extension + ".mp3";
-}
-
 export function initialize() {
     $(window)
         .on("focus", () => {
@@ -95,40 +85,18 @@ export function initialize() {
             window_focused = false;
         });
 
-    const audio = $("<audio>");
-    if (audio[0].canPlayType === undefined) {
-        supports_sound = false;
-    } else {
-        supports_sound = true;
-
-        $("#notifications-area").append(audio);
-        audio.append($("<source>").attr("loop", "yes"));
-        const source = $("#notifications-area audio source");
-
-        if (audio[0].canPlayType('audio/ogg; codecs="vorbis"')) {
-            source.attr("type", "audio/ogg");
-        } else {
-            source.attr("type", "audio/mpeg");
-        }
-
-        const audio_file_without_extension =
-            "/static/audio/notification_sounds/" + page_params.notification_sound;
-        source.attr("src", get_audio_file_path(audio[0], audio_file_without_extension));
-    }
+    update_notification_sound_source();
 }
 
 function update_notification_sound_source() {
-    // Simplified version of the source creation in `exports.initialize`, for
-    // updating the source instead of creating it for the first time.
-    const audio = $("#notifications-area audio");
-    const source = $("#notifications-area audio source");
     const audio_file_without_extension =
         "/static/audio/notification_sounds/" + page_params.notification_sound;
-    source.attr("src", get_audio_file_path(audio[0], audio_file_without_extension));
+    $("#notification-sound-source-ogg").attr("src", `${audio_file_without_extension}.ogg`);
+    $("#notification-sound-source-mp3").attr("src", `${audio_file_without_extension}.mp3`);
 
     // Load it so that it is ready to be played; without this the old sound
     // is played.
-    $("#notifications-area").find("audio")[0].load();
+    $("#notification-sound-audio")[0].load();
 }
 
 export function permission_state() {
@@ -552,8 +520,8 @@ export function received_messages(messages) {
                 desktop_notify: granted_desktop_notifications_permission(),
             });
         }
-        if (should_send_audible_notification(message) && supports_sound) {
-            $("#notifications-area").find("audio")[0].play();
+        if (should_send_audible_notification(message)) {
+            $("#notification-sound-audio")[0].play();
         }
     }
 }
diff --git a/static/js/settings_notifications.js b/static/js/settings_notifications.js
index 66ce22041b..377bdde645 100644
--- a/static/js/settings_notifications.js
+++ b/static/js/settings_notifications.js
@@ -90,7 +90,7 @@ export function set_up() {
     });
 
     $("#play_notification_sound").on("click", () => {
-        $("#notifications-area").find("audio")[0].play();
+        $("#notification-sound-audio")[0].play();
     });
 
     const notification_sound_dropdown = $("#notification_sound");
diff --git a/static/styles/zulip.css b/static/styles/zulip.css
index c3378cb053..2ad330607a 100644
--- a/static/styles/zulip.css
+++ b/static/styles/zulip.css
@@ -2365,15 +2365,6 @@ div.topic_edit_spinner .loading_indicator_spinner {
     top: 1px;
 }
 
-#notifications-area {
-    position: fixed;
-    z-index: 10;
-    bottom: 0;
-    right: 20px;
-    width: 200px;
-    height: auto;
-}
-
 .notifications-gravatar img {
     max-width: 25px;
     max-height: 25px;
diff --git a/templates/zerver/app/home.html b/templates/zerver/app/home.html
index 11903a71a8..5cef3f44f6 100644
--- a/templates/zerver/app/home.html
+++ b/templates/zerver/app/home.html
@@ -157,5 +157,7 @@
 {% include "zerver/app/message_history.html" %}
 {% include "zerver/app/delete_message.html" %}
 {% include "zerver/app/compose.html" %}
-<div id="notifications-area">
-</div>
+<audio id="notification-sound-audio">
+    <source id="notification-sound-source-ogg" type="audio/ogg">
+    <source id="notification-sound-source-mp3" type="audio/mpeg">
+</audio>