Use ms-winsoundevent:Notification.IM on Windows

Author: indutny-signal

app/renderWindowsToast.tsx

@@ -33,6 +33,7 @@ const Text = (props: { id: string; children: React.ReactNode }) =>
   React.createElement('text', props);
 const Image = (props: { id: string; src: string; 'hint-crop': string }) =>
   React.createElement('image', props);
+const Audio = (props: { src: string }) => React.createElement('audio', props);
 
 export function renderWindowsToast({
   avatarPath,
@@ -51,13 +52,16 @@ export function renderWindowsToast({
   const template = avatarPath ? 'ToastImageAndText02' : 'ToastText02';
   let launch: URL;
 
+  let audio: React.ReactNode | undefined;
+
   // Note:
   //   1) this maps to the notify() function in services/notifications.ts
   //   2) this also maps to the url-handling in main.ts
   if (type === NotificationType.Message || type === NotificationType.Reaction) {
     launch = showConversationRoute.toAppUrl({
       token,
     });
+    audio = <Audio src="ms-winsoundevent:Notification.IM" />;
   } else if (type === NotificationType.IncomingGroupCall) {
     launch = startCallLobbyRoute.toAppUrl({
       token,
@@ -79,6 +83,7 @@ export function renderWindowsToast({
           <Text id="2">{body}</Text>
         </Binding>
       </Visual>
+      {audio}
     </Toast>
   );
 }

ts/test-node/app/renderWindowsToast_test.tsx

@@ -16,8 +16,18 @@ describe('renderWindowsToast', () => {
       type: NotificationType.Message,
     });
 
-    const expected =
-      '<toast launch="sgnl://show-conversation?token=token" activationType="protocol"><visual><binding template="ToastImageAndText02"><image id="1" src="file:///C:/temp/ab/abcd" hint-crop="circle"></image><text id="1">Alice</text><text id="2">Hi there!</text></binding></visual></toast>';
+    const expected = [
+      '<toast launch="sgnl://show-conversation?token=token" activationType="protocol">',
+      '<visual>',
+      '<binding template="ToastImageAndText02">',
+      '<image id="1" src="file:///C:/temp/ab/abcd" hint-crop="circle"></image>',
+      '<text id="1">Alice</text>',
+      '<text id="2">Hi there!</text>',
+      '</binding>',
+      '</visual>',
+      '<audio src="ms-winsoundevent:Notification.IM"></audio>',
+      '</toast>',
+    ].join('');
 
     assert.strictEqual(xml, expected);
   });
@@ -30,8 +40,17 @@ describe('renderWindowsToast', () => {
       type: NotificationType.Message,
     });
 
-    const expected =
-      '<toast launch="sgnl://show-conversation?token=token" activationType="protocol"><visual><binding template="ToastText02"><text id="1">Alice</text><text id="2">Hi there!</text></binding></visual></toast>';
+    const expected = [
+      '<toast launch="sgnl://show-conversation?token=token" activationType="protocol">',
+      '<visual>',
+      '<binding template="ToastText02">',
+      '<text id="1">Alice</text>',
+      '<text id="2">Hi there!</text>',
+      '</binding>',
+      '</visual>',
+      '<audio src="ms-winsoundevent:Notification.IM"></audio>',
+      '</toast>',
+    ].join('');
 
     assert.strictEqual(xml, expected);
   });
@@ -44,8 +63,17 @@ describe('renderWindowsToast', () => {
       type: NotificationType.Message,
     });
 
-    const expected =
-      '<toast launch="sgnl://show-conversation?token=token" activationType="protocol"><visual><binding template="ToastText02"><text id="1">Alice</text><text id="2">Hi there!</text></binding></visual></toast>';
+    const expected = [
+      '<toast launch="sgnl://show-conversation?token=token" activationType="protocol">',
+      '<visual>',
+      '<binding template="ToastText02">',
+      '<text id="1">Alice</text>',
+      '<text id="2">Hi there!</text>',
+      '</binding>',
+      '</visual>',
+      '<audio src="ms-winsoundevent:Notification.IM"></audio>',
+      '</toast>',
+    ].join('');
 
     assert.strictEqual(xml, expected);
   });
@@ -58,8 +86,16 @@ describe('renderWindowsToast', () => {
       type: NotificationType.IncomingCall,
     });
 
-    const expected =
-      '<toast launch="sgnl://show-window" activationType="protocol"><visual><binding template="ToastText02"><text id="1">Alice</text><text id="2">Hi there!</text></binding></visual></toast>';
+    const expected = [
+      '<toast launch="sgnl://show-window" activationType="protocol">',
+      '<visual>',
+      '<binding template="ToastText02">',
+      '<text id="1">Alice</text>',
+      '<text id="2">Hi there!</text>',
+      '</binding>',
+      '</visual>',
+      '</toast>',
+    ].join('');
 
     assert.strictEqual(xml, expected);
   });
@@ -72,8 +108,16 @@ describe('renderWindowsToast', () => {
       type: NotificationType.IncomingGroupCall,
     });
 
-    const expected =
-      '<toast launch="sgnl://start-call-lobby?token=token" activationType="protocol"><visual><binding template="ToastText02"><text id="1">Alice</text><text id="2">Hi there!</text></binding></visual></toast>';
+    const expected = [
+      '<toast launch="sgnl://start-call-lobby?token=token" activationType="protocol">',
+      '<visual>',
+      '<binding template="ToastText02">',
+      '<text id="1">Alice</text>',
+      '<text id="2">Hi there!</text>',
+      '</binding>',
+      '</visual>',
+      '</toast>',
+    ].join('');
 
     assert.strictEqual(xml, expected);
   });
@@ -86,8 +130,16 @@ describe('renderWindowsToast', () => {
       type: NotificationType.IsPresenting,
     });
 
-    const expected =
-      '<toast launch="sgnl://cancel-presenting" activationType="protocol"><visual><binding template="ToastText02"><text id="1">Alice</text><text id="2">Hi there!</text></binding></visual></toast>';
+    const expected = [
+      '<toast launch="sgnl://cancel-presenting" activationType="protocol">',
+      '<visual>',
+      '<binding template="ToastText02">',
+      '<text id="1">Alice</text>',
+      '<text id="2">Hi there!</text>',
+      '</binding>',
+      '</visual>',
+      '</toast>',
+    ].join('');
 
     assert.strictEqual(xml, expected);
   });