From 25f4adc7ad8537dadfca41c1a432f13e8ae9a4e8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?David=20N=C3=A9grier?= <d.negrier@thecodingmachine.com>
Date: Thu, 3 Jun 2021 10:17:38 +0200
Subject: [PATCH] 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.
---
 .../HorizontalSoundMeterWidget.svelte         |  6 ++++-
 front/src/Components/SoundMeterWidget.svelte  |  6 ++++-
 front/src/WebRtc/MediaManager.ts              | 26 ++++++++++++++++---
 3 files changed, 33 insertions(+), 5 deletions(-)

diff --git a/front/src/Components/EnableCamera/HorizontalSoundMeterWidget.svelte b/front/src/Components/EnableCamera/HorizontalSoundMeterWidget.svelte
index e7f721c1..84352ebb 100644
--- a/front/src/Components/EnableCamera/HorizontalSoundMeterWidget.svelte
+++ b/front/src/Components/EnableCamera/HorizontalSoundMeterWidget.svelte
@@ -10,9 +10,11 @@
 
     let timeout;
     const soundMeter = new SoundMeter();
+    let display = false;
 
     $: {
         if (stream && stream.getAudioTracks().length > 0) {
+            display = true;
             soundMeter.connectToSource(stream, new AudioContext());
 
             if (timeout) {
@@ -28,6 +30,8 @@
                 }
             }, 100);
 
+        } else {
+            display = false;
         }
     }
 
@@ -53,7 +57,7 @@
 </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}
         <div style={color(i, volume)}></div>
     {/each}
diff --git a/front/src/Components/SoundMeterWidget.svelte b/front/src/Components/SoundMeterWidget.svelte
index d96b9681..40c467b1 100644
--- a/front/src/Components/SoundMeterWidget.svelte
+++ b/front/src/Components/SoundMeterWidget.svelte
@@ -10,9 +10,11 @@
 
     let timeout;
     const soundMeter = new SoundMeter();
+    let display = false;
 
     $: {
         if (stream && stream.getAudioTracks().length > 0) {
+            display = true;
             soundMeter.connectToSource(stream, new AudioContext());
 
             if (timeout) {
@@ -28,6 +30,8 @@
                 }
             }, 100);
 
+        } else {
+            display = false;
         }
     }
 
@@ -40,7 +44,7 @@
 </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 > 2}></span>
     <span class:active={volume > 3}></span>
diff --git a/front/src/WebRtc/MediaManager.ts b/front/src/WebRtc/MediaManager.ts
index 180b5746..7b527962 100644
--- a/front/src/WebRtc/MediaManager.ts
+++ b/front/src/WebRtc/MediaManager.ts
@@ -440,12 +440,32 @@ export class MediaManager {
     public getNotification(){
         //Get notification
         if (!DISABLE_NOTIFICATIONS && window.Notification && Notification.permission !== "granted") {
-            Notification.requestPermission().catch((err) => {
-                console.error(`Notification permission error`, err);
-            });
+            if (this.checkNotificationPromise()) {
+                Notification.requestPermission().catch((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){
         if(this.focused){
             return;