Implement web notifications

CHANGELOG.md

@@ -1,3 +1,7 @@
+# Version 0.16.0 - 2020-07-??
+### Features
+- Implement web notifications
+
 # Version 0.15.1 - 2020-06-26
 ### Fixes:
 - Fix a big with account data being stored incorrectly

lib/components/matrix.dart

@@ -9,7 +9,7 @@ import 'package:flutter/foundation.dart';
 import 'package:flutter/material.dart';
 import 'package:localstorage/localstorage.dart';
 import 'package:url_launcher/url_launcher.dart';
-
+import 'package:universal_html/prefer_universal/html.dart' as html;
 import '../l10n/l10n.dart';
 import '../utils/beautify_string_extension.dart';
 import '../utils/famedlysdk_store.dart';
@@ -101,6 +101,7 @@ class MatrixState extends State<Matrix> {
   StreamSubscription onRoomKeyRequestSub;
   StreamSubscription onKeyVerificationRequestSub;
   StreamSubscription onJitsiCallSub;
+  StreamSubscription onNotification;
 
   void onJitsiCall(EventUpdate eventUpdate) {
     final event = Event.fromJson(
@@ -157,6 +158,28 @@ class MatrixState extends State<Matrix> {
     return;
   }
 
+  void _showWebNotification(EventUpdate eventUpdate) async {
+    final room = client.getRoomById(eventUpdate.roomID);
+    final event = Event.fromJson(eventUpdate.content, room);
+    final body = event.getLocalizedBody(
+      L10n.of(context),
+      withSenderNamePrefix:
+          !room.isDirectChat || room.lastEvent.senderId == client.userID,
+    );
+    html.AudioElement()
+      ..src = 'assets/assets/sounds/notification.wav'
+      ..autoplay = true
+      ..load();
+    html.Notification(
+      room.getLocalizedDisplayname(L10n.of(context)),
+      body: body,
+      icon: event.sender.avatarUrl?.getThumbnail(client,
+              width: 64, height: 64, method: ThumbnailMethod.crop) ??
+          room.avatar?.getThumbnail(client,
+              width: 64, height: 64, method: ThumbnailMethod.crop),
+    );
+  }
+
   @override
   void initState() {
     store = widget.store ?? Store();
@@ -234,6 +257,19 @@ class MatrixState extends State<Matrix> {
         renderHtml = render == '1';
       });
     }
+    if (kIsWeb) {
+      client.onSync.stream.first.then((s) {
+        html.Notification.requestPermission();
+        onNotification ??= client.onEvent.stream
+            .where((e) =>
+                e.roomID != activeRoomId &&
+                e.type == 'timeline' &&
+                [EventTypes.Message, EventTypes.Sticker, EventTypes.Encrypted]
+                    .contains(e.eventType) &&
+                e.content['sender'] != client.userID)
+            .listen(_showWebNotification);
+      });
+    }
     super.initState();
   }
 
@@ -242,6 +278,7 @@ class MatrixState extends State<Matrix> {
     onRoomKeyRequestSub?.cancel();
     onKeyVerificationRequestSub?.cancel();
     onJitsiCallSub?.cancel();
+    onNotification?.cancel();
     super.dispose();
   }
 

pubspec.lock

@@ -157,6 +157,13 @@ packages:
       url: "https://github.com/simolus3/moor.git"
     source: git
     version: "1.0.0"
+  fake_async:
+    dependency: transitive
+    description:
+      name: fake_async
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "1.1.0"
   famedlysdk:
     dependency: "direct main"
     description:
@@ -539,7 +546,7 @@ packages:
       name: path
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "1.6.4"
+    version: "1.7.0"
   path_drawing:
     dependency: transitive
     description:
@@ -617,13 +624,6 @@ packages:
       url: "https://pub.dartlang.org"
     source: hosted
     version: "1.4.2"
-  quiver:
-    dependency: transitive
-    description:
-      name: quiver
-      url: "https://pub.dartlang.org"
-    source: hosted
-    version: "2.1.3"
   random_string:
     dependency: "direct main"
     description:
@@ -761,21 +761,21 @@ packages:
       name: test
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "1.14.4"
+    version: "1.14.7"
   test_api:
     dependency: transitive
     description:
       name: test_api
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "0.2.15"
+    version: "0.2.16"
   test_core:
     dependency: transitive
     description:
       name: test_core
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "0.3.4"
+    version: "0.3.7"
   typed_data:
     dependency: transitive
     description:

pubspec.yaml

@@ -93,6 +93,7 @@ flutter:
   # To add assets to your application, add an assets section, like this:
   assets:
     - assets/
+    - assets/sounds/
     - assets/js/
     - assets/js/package/