From 7edf7d194b558fa0074323973fbae875f8fd1f85 Mon Sep 17 00:00:00 2001
From: lebaudantoine <lebaud.antoine131@gmail.com>
Date: Tue, 10 Sep 2024 16:36:33 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=9A=B8(frontend)=20disable=20toast=20noti?=
 =?UTF-8?q?fications=20on=20mobile?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Due to responsiveness issues and awkward display on mobile screens.

Note: Chrome inspector's responsive mode inaccurately triggers mobile
behavior. It uses a temporary function imported from LiveKit.
---
 .../src/features/notifications/MainNotificationToast.tsx  | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/frontend/src/features/notifications/MainNotificationToast.tsx b/src/frontend/src/features/notifications/MainNotificationToast.tsx
index ead9ada0..e04ab46d 100644
--- a/src/frontend/src/features/notifications/MainNotificationToast.tsx
+++ b/src/frontend/src/features/notifications/MainNotificationToast.tsx
@@ -4,12 +4,15 @@ import { Participant, RemoteParticipant, RoomEvent } from 'livekit-client'
 import { ToastProvider, toastQueue } from './components/ToastProvider'
 import { NotificationType } from './NotificationType'
 import { Div } from '@/primitives'
+import { isMobileBrowser } from '@livekit/components-core/src/helper/detectMobileBrowser.ts'
 
 export const MainNotificationToast = () => {
   const room = useRoomContext()
-  // fixme - don't show toast on mobile screen
   useEffect(() => {
     const showJoinNotification = (participant: Participant) => {
+      if (isMobileBrowser()) {
+        return
+      }
       toastQueue.add(
         {
           participant,
@@ -54,6 +57,9 @@ export const MainNotificationToast = () => {
       if (!participant) {
         return
       }
+      if (isMobileBrowser()) {
+        return
+      }
       const notification = decoder.decode(payload)
       const existingToast = toastQueue.visibleToasts.find(
         (toast) =>