Merge pull request #7422 from gitbutlerapp/e-branch-88

web: Play sound on chat notifications

apps/web/src/routes/(app)/+layout.svelte

@@ -24,6 +24,8 @@
 	import '$home/styles/styles.css';
 	import { env } from '$env/dynamic/public';
 
+	const CHAT_NOTFICATION_SOUND = '/sounds/pop.mp3';
+
 	interface Props {
 		children: Snippet;
 	}
@@ -50,16 +52,26 @@
 	setContext(NewUserService, newUserService);
 	const branchService = new BranchService(httpClient, appState.appDispatch);
 	setContext(BranchService, branchService);
-	const patchSerice = new PatchService(httpClient, appState.appDispatch);
-	setContext(PatchService, patchSerice);
+	const patchService = new PatchService(httpClient, appState.appDispatch);
+	setContext(PatchService, patchService);
 	const patchEventsService = new PatchEventsService(
 		httpClient,
 		appState,
 		appState.appDispatch,
 		authService.tokenReadable,
-		patchSerice,
+		patchService,
 		env.PUBLIC_APP_HOST
 	);
+
+	const user = $derived(userService.user);
+
+	$effect(() => {
+		if ($user) {
+			patchEventsService.setUserId($user.id);
+			patchEventsService.setChatSoundUrl(CHAT_NOTFICATION_SOUND);
+		}
+	});
+
 	setContext(PatchEventsService, patchEventsService);
 	const chatChannelService = new ChatChannelsService(httpClient, appState.appDispatch);
 	setContext(ChatChannelsService, chatChannelService);

packages/shared/src/lib/branches/patchEventsService.ts

@@ -9,6 +9,7 @@ import {
 } from '$lib/branches/types';
 import { InterestStore, type Interest } from '$lib/interest/interestStore';
 import { errorToLoadable, isFound } from '$lib/network/loadable';
+import { playSound } from '$lib/sounds';
 import { asyncToSyncSignals, writableDerived } from '$lib/storeUtils';
 import { createConsumer } from '@rails/actioncable';
 import { type Readable } from 'svelte/store';
@@ -30,6 +31,8 @@ function getActionCableEndpoint(token: string | undefined, baseUrl: string): str
 }
 
 export class PatchEventsService {
+	private userId: number | undefined;
+	private chatSoundUrl: string | undefined;
 	private readonly patchEventsInterestStore = new InterestStore<{
 		changeId: string;
 		projectId: string;
@@ -44,6 +47,14 @@ export class PatchEventsService {
 		private readonly websocketBase: string
 	) {}
 
+	setUserId(userId: number) {
+		this.userId = userId;
+	}
+
+	setChatSoundUrl(chatSoundUrl: string) {
+		this.chatSoundUrl = chatSoundUrl;
+	}
+
 	patchEventsInterest(projectId: string, changeId: string): Interest {
 		// Using writableDerived over derived because derived's start stop
 		// notifier doesn't behave as expected, and doesn't runs top even
@@ -84,6 +95,14 @@ export class PatchEventsService {
 			.createInterest();
 	}
 
+	private shouldPlayChatSound(patchEvent: PatchEvent): boolean {
+		if (patchEvent.user?.id === undefined || this.userId === undefined) {
+			return false;
+		}
+
+		return patchEvent.user.id !== this.userId && patchEvent.eventType === 'chat';
+	}
+
 	private handlePatchEventData(projectId: string, changeId: string, data: ApiPatchEvent) {
 		const key = createPatchEventChannelKey(projectId, changeId);
 		const eventChannel = patchEventsSelectors.selectById(this.appState.patchEvents, key);
@@ -104,6 +123,10 @@ export class PatchEventsService {
 		if (data.event_type === 'patch_version' || data.event_type === 'issue_status') {
 			this.patchService.refreshPatchWithSections(changeId);
 		}
+
+		if (this.shouldPlayChatSound(patchEvent) && this.chatSoundUrl) {
+			playSound(this.chatSoundUrl);
+		}
 	}
 
 	private async fetchInitialPatchEvents(projectId: string, changeId: string) {

packages/shared/src/lib/sounds.ts

@@ -0,0 +1,4 @@
+export function playSound(soundUrl: string) {
+	const audio = new Audio(soundUrl);
+	audio.play();
+}