CodeCow/zulip
1
0
Fork 0
mirror of https://github.com/zulip/zulip.git synced 2026-06-30 21:11:04 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

notifications: Simplify sound playing.

Browse Source 
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>
This commit is contained in:
Anders Kaseorg 2021-03-22 19:41:26 -07:00 committed by Tim Abbott
parent 72e0f2e901
commit aff8a32bc1
4 changed files with 11 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
static/js/notifications.js
View File

@ -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();
}
}
}

2
static/js/settings_notifications.js
View File

@ -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");

9
static/styles/zulip.css
View File

@ -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;

6
templates/zerver/app/home.html
View File

@ -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>