Fixing Safari on MacOS compatibility

The null safe operator is not recognized and was not encoded by Webpack in Svelte expressions (inside {})

+ The Notification API of Safari is old and broken and we need to account for that.
This commit is contained in:
David Négrier 2021-06-03 10:17:38 +02:00
parent 100198b55c
commit 25f4adc7ad
3 changed files with 33 additions and 5 deletions

View File

@ -10,9 +10,11 @@
let timeout; let timeout;
const soundMeter = new SoundMeter(); const soundMeter = new SoundMeter();
let display = false;
$: { $: {
if (stream && stream.getAudioTracks().length > 0) { if (stream && stream.getAudioTracks().length > 0) {
display = true;
soundMeter.connectToSource(stream, new AudioContext()); soundMeter.connectToSource(stream, new AudioContext());
if (timeout) { if (timeout) {
@ -28,6 +30,8 @@
} }
}, 100); }, 100);
} else {
display = false;
} }
} }
@ -53,7 +57,7 @@
</script> </script>
<div class="horizontal-sound-meter" class:active={stream?.getAudioTracks().length > 0}> <div class="horizontal-sound-meter" class:active={display}>
{#each [...Array(NB_BARS).keys()] as i} {#each [...Array(NB_BARS).keys()] as i}
<div style={color(i, volume)}></div> <div style={color(i, volume)}></div>
{/each} {/each}

View File

@ -10,9 +10,11 @@
let timeout; let timeout;
const soundMeter = new SoundMeter(); const soundMeter = new SoundMeter();
let display = false;
$: { $: {
if (stream && stream.getAudioTracks().length > 0) { if (stream && stream.getAudioTracks().length > 0) {
display = true;
soundMeter.connectToSource(stream, new AudioContext()); soundMeter.connectToSource(stream, new AudioContext());
if (timeout) { if (timeout) {
@ -28,6 +30,8 @@
} }
}, 100); }, 100);
} else {
display = false;
} }
} }
@ -40,7 +44,7 @@
</script> </script>
<div class="sound-progress" class:active={stream?.getAudioTracks().length > 0}> <div class="sound-progress" class:active={display}>
<span class:active={volume > 1}></span> <span class:active={volume > 1}></span>
<span class:active={volume > 2}></span> <span class:active={volume > 2}></span>
<span class:active={volume > 3}></span> <span class:active={volume > 3}></span>

View File

@ -440,11 +440,31 @@ export class MediaManager {
public getNotification(){ public getNotification(){
//Get notification //Get notification
if (!DISABLE_NOTIFICATIONS && window.Notification && Notification.permission !== "granted") { if (!DISABLE_NOTIFICATIONS && window.Notification && Notification.permission !== "granted") {
if (this.checkNotificationPromise()) {
Notification.requestPermission().catch((err) => { Notification.requestPermission().catch((err) => {
console.error(`Notification permission error`, err); console.error(`Notification permission error`, err);
}); });
} else {
Notification.requestPermission();
} }
} }
}
/**
* Return true if the browser supports the modern version of the Notification API (which is Promise based) or false
* if we are on Safari...
*
* See https://developer.mozilla.org/en-US/docs/Web/API/Notifications_API/Using_the_Notifications_API
*/
private checkNotificationPromise(): boolean {
try {
Notification.requestPermission().then();
} catch(e) {
return false;
}
return true;
}
public createNotification(userName: string){ public createNotification(userName: string){
if(this.focused){ if(this.focused){