feat: sound on browser push notification #18548

Udit-takkar · 2025-01-09T08:22:10Z

What does this PR do?

Fixes [CAL-4113] instant meetings: browser notification and ring tone when calling #16076 (GitHub issue number)
Fixes https://linear.app/calcom/issue/CAL-4113/instant-meetings-browser-notification-and-ring-tone-when-calling (Linear issue number - should be visible at the bottom of the GitHub issue description)

Mandatory Tasks (DO NOT REMOVE)

I have self-reviewed the code (A decent size PR without self-review might be rejected).
N/A I have updated the developer docs in /docs if this PR makes changes that would require a documentation change. If N/A, write N/A here and check the checkbox.
N/A I confirm automated tests are in place that prove my fix is effective or that my feature works.

How should this be tested?

Browser push notifications would only work with https url so use this command ngrok http 3000

Go to /settings/my-account/push-notifications and click on allow notification and make sure you have enabled notification for your browser in system settings.
Create an org team event type with instant booking enabled
Go to booking page and click on 'Connect Now' modal and book meeting.

You should have gotten a push notification with a ringing sound

vercel · 2025-01-09T19:00:37Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

2 Skipped Deployments

Name	Status	Preview	Comments	Updated (UTC)
cal	⬜️ Ignored (Inspect)	Visit Preview		Mar 10, 2025 3:49pm
calcom-web-canary	⬜️ Ignored (Inspect)	Visit Preview		Mar 10, 2025 3:49pm

linear · 2025-01-16T19:39:54Z

CAL-4113 instant meetings: browser notification and ring tone when calling

Udit-takkar · 2025-01-16T19:53:28Z

apps/web/components/notification-sound-handler.tsx

+
+import { useEffect, useRef } from "react";
+
+export function NotificationSoundHandler() {


This is required to load the audio as soon as user interacts with our site.

https://developer.chrome.com/blog/autoplay

Udit-takkar · 2025-01-16T19:54:10Z

apps/web/public/service-worker.js

-    };
-    self.registration.showNotification(notification.title, options);
-  });
+  const title = notificationData.title || "New Cal.com Notification";


The service worker would trigger notification and send message to play sound if notification type is instant meetings

Udit-takkar · 2025-01-16T19:59:07Z

packages/features/shell/Shell.tsx

-              {/* TODO: temporary hide push notifications {props.heading === "Bookings" && buttonToShow && (
-                <Button
-                  color="primary"
-                  onClick={buttonToShow === ButtonState.ALLOW ? enableNotifications : disableNotifications}
-                  loading={isLoading}
-                  disabled={buttonToShow === ButtonState.DENIED}
-                  tooltipSide="bottom"
-                  tooltip={
-                    buttonToShow === ButtonState.DENIED ? t("you_have_denied_notifications") : undefined
-                  }>
-                  {t(
-                    buttonToShow === ButtonState.DISABLE
-                      ? "disable_browser_notifications"
-                      : "allow_browser_notifications"
-                  )}
-                </Button>
-              )} */}


I created a new page for this setting. I don't think we should display this in /bookings page like before

graphite-app · 2025-01-16T20:05:11Z

Graphite Automations

"Add consumer team as reviewer" took an action on this PR • (01/16/25)

1 reviewer was added to this PR based on Keith Williams's automation.

"Add ready-for-e2e label" took an action on this PR • (03/08/25)

1 label was added to this PR based on Keith Williams's automation.

github-actions · 2025-01-31T00:21:21Z

This PR is being marked as stale due to inactivity.

github-actions · 2025-03-04T00:22:39Z

This PR is being marked as stale due to inactivity.

alishaz-polymath

LGTM

Udit-takkar · 2025-03-10T10:52:52Z

Let me fix the conflicts

=

alishaz-polymath

LGTM

* 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

keithwillcode added core area: core, team members only enterprise area: enterprise, audit log, organisation, SAML, SSO labels Jan 9, 2025

vercel bot deployed to Preview – api January 9, 2025 08:29 View deployment

vercel bot had a problem deploying to Preview – api January 9, 2025 19:11 Failure

vercel bot deployed to Preview – api January 13, 2025 10:10 View deployment

vercel bot deployed to Preview – api January 15, 2025 18:44 View deployment

vercel bot deployed to Preview – api January 15, 2025 19:13 View deployment

Udit-takkar added this to the v5.0 milestone Jan 16, 2025

vercel bot deployed to Preview – api January 16, 2025 19:33 View deployment

Udit-takkar changed the title ~~feat: sound on notification~~ feat: sound on browser push notification Jan 16, 2025

Udit-takkar commented Jan 16, 2025

View reviewed changes

Udit-takkar marked this pull request as ready for review January 16, 2025 20:00

graphite-app bot requested a review from a team January 16, 2025 20:01

dosubot bot added ui area: UI, frontend, button, form, input ✨ feature New feature or request labels Jan 16, 2025

github-actions bot added the Stale label Jan 31, 2025

dosubot bot modified the milestones: v5.0, v5.1 Feb 17, 2025

CarinaWolli modified the milestones: v5.0, v5.1 Feb 17, 2025

github-actions bot removed the Stale label Feb 18, 2025

github-actions bot added the Stale label Mar 4, 2025

alishaz-polymath previously approved these changes Mar 8, 2025

View reviewed changes

graphite-app bot added the ready-for-e2e label Mar 8, 2025

github-actions bot removed the Stale label Mar 9, 2025

Udit-takkar added 8 commits March 10, 2025 20:52

feat: sound on notification

d7a3ab0

refactor: add load audio

9844359

chore: remove

f77ce1e

fix: type error

ec6842e

fix: notification

7f19847

fix: prevent multiple initialization

5279b4e

=

feat: create notification page

52f1e5a

chore: update the mp3 file

45eaeb1

Udit-takkar dismissed alishaz-polymath’s stale review via 45eaeb1 March 10, 2025 15:24

Udit-takkar force-pushed the feat/ringtone branch from 00d1295 to 45eaeb1 Compare March 10, 2025 15:24

github-actions bot added High priority Created by Linear-GitHub Sync organizations area: organizations, orgs Stale webhooks area: webhooks, callback, webhook payload labels Mar 10, 2025

vercel bot deployed to Preview – api March 10, 2025 15:48 View deployment

vercel bot deployed to Preview – dev March 10, 2025 15:56 View deployment

Udit-takkar enabled auto-merge (squash) March 10, 2025 18:30

Udit-takkar requested a review from alishaz-polymath March 10, 2025 18:30

github-actions bot removed the Stale label Mar 11, 2025

alishaz-polymath approved these changes Mar 11, 2025

View reviewed changes

Udit-takkar merged commit b0125e1 into main Mar 11, 2025
45 of 46 checks passed

Udit-takkar deleted the feat/ringtone branch March 11, 2025 06:19

Udit-takkar mentioned this pull request Aug 20, 2025

[CAL-4417] instant meetings: ring tone and see incoming events #16832

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

feat: sound on browser push notification #18548

feat: sound on browser push notification #18548

Uh oh!

Udit-takkar commented Jan 9, 2025 •

edited

Loading

Uh oh!

vercel bot commented Jan 9, 2025 •

edited

Loading

Uh oh!

linear bot commented Jan 16, 2025

Uh oh!

Udit-takkar Jan 16, 2025

Uh oh!

Udit-takkar Jan 16, 2025

Uh oh!

Udit-takkar Jan 16, 2025

Uh oh!

graphite-app bot commented Jan 16, 2025 •

edited

Loading

Uh oh!

github-actions bot commented Jan 31, 2025

Uh oh!

github-actions bot commented Mar 4, 2025

Uh oh!

alishaz-polymath left a comment

Uh oh!

Udit-takkar commented Mar 10, 2025

Uh oh!

alishaz-polymath left a comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants


		import { useEffect, useRef } from "react";

		export function NotificationSoundHandler() {

feat: sound on browser push notification #18548

feat: sound on browser push notification #18548

Uh oh!

Conversation

Udit-takkar commented Jan 9, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What does this PR do?

Mandatory Tasks (DO NOT REMOVE)

How should this be tested?

Uh oh!

vercel bot commented Jan 9, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

linear bot commented Jan 16, 2025

Uh oh!

Udit-takkar Jan 16, 2025

Choose a reason for hiding this comment

Uh oh!

Udit-takkar Jan 16, 2025

Choose a reason for hiding this comment

Uh oh!

Udit-takkar Jan 16, 2025

Choose a reason for hiding this comment

Uh oh!

graphite-app bot commented Jan 16, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Graphite Automations

Uh oh!

github-actions bot commented Jan 31, 2025

Uh oh!

github-actions bot commented Mar 4, 2025

Uh oh!

alishaz-polymath left a comment

Choose a reason for hiding this comment

Uh oh!

Udit-takkar commented Mar 10, 2025

Uh oh!

alishaz-polymath left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

Udit-takkar commented Jan 9, 2025 •

edited

Loading

vercel bot commented Jan 9, 2025 •

edited

Loading

graphite-app bot commented Jan 16, 2025 •

edited

Loading