TW-915: Fix click on notification to open room in web

linagora · Nov 15, 2023 · 6e1f622 · 6e1f622
1 parent 42008b5
commit 6e1f622
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 11 deletions.
diff --git a/lib/widgets/local_notifications_extension.dart b/lib/widgets/local_notifications_extension.dart
@@ -1,5 +1,4 @@
 import 'dart:io';
-
 import 'package:flutter/foundation.dart';
 
 import 'package:desktop_lifecycle/desktop_lifecycle.dart';
@@ -10,13 +9,19 @@ import 'package:http/http.dart' as http;
 import 'package:matrix/matrix.dart';
 import 'package:path_provider/path_provider.dart';
 import 'package:universal_html/html.dart' as html;
+import 'package:universal_html/js.dart' as js;
 
 import 'package:fluffychat/config/app_config.dart';
 import 'package:fluffychat/utils/matrix_sdk_extensions/matrix_locals.dart';
 import 'package:fluffychat/utils/platform_infos.dart';
 import 'package:fluffychat/widgets/matrix.dart';
 
 extension LocalNotificationsExtension on MatrixState {
+  static final html.AudioElement _audioPlayer = html.AudioElement()
+    ..src = 'assets/assets/sounds/WoodenBeaver_stereo_message-new-instant.ogg'
+    ..autoplay = true
+    ..load();
+
   void showLocalNotification(EventUpdate eventUpdate) async {
     final roomId = eventUpdate.roomID;
     if (activeRoomId == roomId) {
@@ -55,16 +60,13 @@ extension LocalNotificationsExtension on MatrixState {
           method: ThumbnailMethod.crop,
         );
     if (kIsWeb) {
-      html.AudioElement()
-        ..src =
-            'assets/assets/sounds/WoodenBeaver_stereo_message-new-instant.ogg'
-        ..autoplay = true
-        ..load();
-      html.Notification(
+      _audioPlayer.play();
+      js.context.callMethod("handleNotifications", [
         title,
-        body: body,
-        icon: icon.toString(),
-      );
+        body,
+        icon,
+        eventUpdate.roomID,
+      ]);
     } else if (Platform.isLinux) {
       final appIconUrl = room.avatar?.getThumbnail(
         room.client,

diff --git a/web/index.html b/web/index.html
@@ -11,6 +11,8 @@
     For more details:
     * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base
   -->
+    <script src="script.js" defer></script>
+
     <base href="$FLUTTER_BASE_HREF" />
 
     <meta charset="UTF-8" />
@@ -101,4 +103,4 @@
       defer
     ></script>
   </body>
-</html>
+</html>
diff --git a/web/script.js b/web/script.js
@@ -0,0 +1,28 @@
+function handleNotifications(title, body, icon, roomid) {
+    if ('Notification' in window) {
+        Notification.requestPermission().then(function(permission) {
+            if (permission === 'granted') {
+                var notification = new Notification(title, {
+                    body: body,
+                    icon: icon,
+                });
+
+                notification.onclick = function() {
+                    console.log('JsFunction::handleNotifications(): On click notification');
+                    var host = window.location.host;
+                    var protocol = window.location.protocol;
+                    var redirectURL = protocol + '//' + host + '/#/rooms/' + roomid;
+                    window.parent.parent.focus();
+                    window.location.href = redirectURL;
+                    notification.close();
+                };
+            } else {
+                console.log('Permission for notifications denied');
+            }
+        }).catch(function(err) {
+            console.error('Error requesting permission:', err);
+        });
+    } else {
+        console.log('Notifications not supported in this browser');
+    }
+}