From b0125e1a05f28caeffa063affbaa242a4d0b2bcc Mon Sep 17 00:00:00 2001
From: Udit Takkar <53316345+Udit-takkar@users.noreply.github.com>
Date: Tue, 11 Mar 2025 11:49:51 +0530
Subject: [PATCH] feat: sound on browser push notification (#18548)
* feat: sound on notification
* refactor: add load audio
* chore: remove
* fix: type error
* fix: notification
* fix: prevent multiple initialization
=
* feat: create notification page
* chore: update the mp3 file
---
.../SettingsLayoutAppDirClient.tsx | 1 +
apps/web/app/layout.tsx | 3 +
apps/web/app/providers.tsx | 6 +-
.../my-account/push-notifications/page.tsx | 27 +++
.../components/notification-sound-handler.tsx | 142 +++++++++++++++
.../my-account/push-notifications-view.tsx | 20 +++
apps/web/pages/_app.tsx | 19 +-
apps/web/public/ring.mp3 | Bin 0 -> 268329 bytes
apps/web/public/service-worker.js | 111 ++++++++----
apps/web/public/static/locales/en/common.json | 2 +
.../instant-meeting/handleInstantMeeting.ts | 10 +-
.../features/notifications/WebPushContext.tsx | 120 +++++++++++++
.../notifications/sendNotification.ts | 6 +-
packages/features/shell/Shell.tsx | 20 ---
packages/lib/hooks/useNotifications.tsx | 165 ------------------
.../addNotificationsSubscription.handler.ts | 1 +
16 files changed, 416 insertions(+), 237 deletions(-)
create mode 100644 apps/web/app/settings/(settings-layout)/my-account/push-notifications/page.tsx
create mode 100644 apps/web/components/notification-sound-handler.tsx
create mode 100644 apps/web/modules/settings/my-account/push-notifications-view.tsx
create mode 100644 apps/web/public/ring.mp3
create mode 100644 packages/features/notifications/WebPushContext.tsx
delete mode 100644 packages/lib/hooks/useNotifications.tsx
diff --git a/apps/web/app/(use-page-wrapper)/settings/(settings-layout)/SettingsLayoutAppDirClient.tsx b/apps/web/app/(use-page-wrapper)/settings/(settings-layout)/SettingsLayoutAppDirClient.tsx
index aacc629b61..6986fcfc0d 100644
--- a/apps/web/app/(use-page-wrapper)/settings/(settings-layout)/SettingsLayoutAppDirClient.tsx
+++ b/apps/web/app/(use-page-wrapper)/settings/(settings-layout)/SettingsLayoutAppDirClient.tsx
@@ -35,6 +35,7 @@ const getTabs = (orgBranding: OrganizationBranding | null) => {
{ name: "conferencing", href: "/settings/my-account/conferencing" },
{ name: "appearance", href: "/settings/my-account/appearance" },
{ name: "out_of_office", href: "/settings/my-account/out-of-office" },
+ { name: "push_notifications", href: "/settings/my-account/push-notifications" },
// TODO
// { name: "referrals", href: "/settings/my-account/referrals" },
],
diff --git a/apps/web/app/layout.tsx b/apps/web/app/layout.tsx
index 3e5545b6c0..75fa7f3889 100644
--- a/apps/web/app/layout.tsx
+++ b/apps/web/app/layout.tsx
@@ -6,6 +6,7 @@ import React from "react";
import { getLocale } from "@calcom/features/auth/lib/getLocale";
import { IconSprites } from "@calcom/ui";
+import { NotificationSoundHandler } from "@calcom/web/components/notification-sound-handler";
import { buildLegacyCtx } from "@lib/buildLegacyCtx";
import { prepareRootMetadata } from "@lib/metadata";
@@ -124,6 +125,8 @@ export default async function RootLayout({ children }: { children: React.ReactNo
]}
/>
{children}
+ {!isEmbed && }
+