-
+ {{ emptyText }}
- -
+
+ {{ emptyText }}
+ + {
aria-hidden="true"
/>
-
-
diff --git a/src/components/meeting-page/MeetingControls.vue b/src/components/meeting-page/MeetingControls.vue
index dfb83f0..344ec28 100644
--- a/src/components/meeting-page/MeetingControls.vue
+++ b/src/components/meeting-page/MeetingControls.vue
@@ -76,8 +76,11 @@ function onLeave() {
-
-
+
diff --git a/src/components/meeting-page/MeetingInviteContent.vue b/src/components/meeting-page/MeetingInviteContent.vue
index 3d80509..e650927 100644
--- a/src/components/meeting-page/MeetingInviteContent.vue
+++ b/src/components/meeting-page/MeetingInviteContent.vue
@@ -167,7 +167,13 @@ watch(policy, () => {
class="h-11 rounded-xl border border-harbor-line bg-harbor-canvas pl-9 text-sm focus-visible:ring-0"
/>
-
- {
:controls-hidden="!showsControls"
:hide-own-camera="!showOwnCamera"
@toggle-pin="handleTogglePin"
+ @show-grid="handleSetViewMode('grid')"
@toggle-fullscreen="handleToggleFullscreen"
@long-press="handleVideoLongPress"
@swipe="handleVideoSwipe"
@@ -1196,6 +1212,7 @@ const handleReconnect = () => {
:show-own-camera="showOwnCamera"
:audio-warning="audioWarning"
:video-warning="videoWarning"
+ :fullscreen="isFullscreen"
@toggle-mute="handleToggleMute"
@toggle-video="handleToggleVideo"
@request-access="handleRequestAccess"
diff --git a/src/services/__tests__/system-alerts.test.ts b/src/services/__tests__/system-alerts.test.ts
index fa50e47..0eb1578 100644
--- a/src/services/__tests__/system-alerts.test.ts
+++ b/src/services/__tests__/system-alerts.test.ts
@@ -290,4 +290,34 @@ describe('SystemAlerts in the native app', () => {
expect(ringtoneStart).toHaveBeenCalledOnce();
alerts.stop();
});
+
+ it('rings only in the app bar while the app is visible, even when its webview reports no focus', async () => {
+ vi.spyOn(document, 'visibilityState', 'get').mockReturnValue('visible');
+ const ringtoneStart = vi.spyOn(Ringtone.prototype, 'start').mockImplementation(() => undefined);
+ const { alerts } = createAlerts();
+ await alerts.start();
+
+ alerts.show(callAlert);
+ await new Promise((resolve) => setTimeout(resolve, 0));
+
+ expect(nativeNotifications.showNativeCallNotification).not.toHaveBeenCalled();
+ expect(ringtoneStart).toHaveBeenCalled();
+ alerts.stop();
+ });
+
+ it('swaps a call notification for the app bar when the app comes to the front', async () => {
+ const visibility = vi.spyOn(document, 'visibilityState', 'get').mockReturnValue('hidden');
+ const ringtoneStart = vi.spyOn(Ringtone.prototype, 'start').mockImplementation(() => undefined);
+ const { alerts } = createAlerts();
+ await alerts.start();
+ alerts.show(callAlert);
+ await vi.waitFor(() => expect(nativeNotifications.showNativeCallNotification).toHaveBeenCalled());
+
+ visibility.mockReturnValue('visible');
+ document.dispatchEvent(new Event('visibilitychange'));
+
+ expect(nativeNotifications.dismissNativeCallNotification).toHaveBeenCalledWith('call-1', 'session');
+ expect(ringtoneStart).toHaveBeenCalled();
+ alerts.stop();
+ });
});
diff --git a/src/services/__tests__/system-bars.test.ts b/src/services/__tests__/system-bars.test.ts
index c22daea..751bd98 100644
--- a/src/services/__tests__/system-bars.test.ts
+++ b/src/services/__tests__/system-bars.test.ts
@@ -1,6 +1,6 @@
import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
-import { startSystemBarSync } from '@/services/system-bars';
+import { coverScreenTop, deviceCornerRadius, startSystemBarSync } from '@/services/system-bars';
const tauri = vi.hoisted(() => ({ isTauri: vi.fn(() => false), invoke: vi.fn(() => Promise.resolve()) }));
vi.mock('@tauri-apps/api/core', () => tauri);
@@ -148,4 +148,23 @@ describe('system bars', () => {
expect(tauri.invoke).toHaveBeenCalledTimes(1);
});
+
+ it('covers the status bar area while any reason holds, and tells the app only when that changes', () => {
+ tauri.isTauri.mockReturnValue(true);
+ coverScreenTop('chat', true);
+ coverScreenTop('call', true);
+ coverScreenTop('chat', false);
+ coverScreenTop('call', false);
+
+ expect(tauri.invoke.mock.calls).toEqual([
+ ['set_screen_edges', { top: true, bottom: true }],
+ ['set_screen_edges', { top: false, bottom: true }],
+ ]);
+ });
+
+ it('knows the corner radius of rounded iPhone screens by size, in either orientation', () => {
+ expect(deviceCornerRadius(393, 852)).toBe(55);
+ expect(deviceCornerRadius(852, 393)).toBe(55);
+ expect(deviceCornerRadius(375, 667)).toBe(0);
+ });
});
diff --git a/src/services/system-alerts.ts b/src/services/system-alerts.ts
index 4d211eb..6b2aeb6 100644
--- a/src/services/system-alerts.ts
+++ b/src/services/system-alerts.ts
@@ -35,6 +35,8 @@ interface RingingCall {
callKind: AlertCallKind;
alertedAt: number;
webNotification: Notification | null;
+ /** The OpenMeet app shows a system notification for it, because the call came while the app was away. */
+ nativeShown: boolean;
}
function blobToDataUrl(blob: Blob) {
@@ -46,8 +48,11 @@ function blobToDataUrl(blob: Blob) {
});
}
+// The OpenMeet app is in front whenever its page is visible: its webview does not always report focus, and a
+// missed focus would show a system notification on top of the app's own incoming call bar. A browser tab can be
+// visible in a window behind another one, so there it must also have focus.
function isAppInFront() {
- return document.visibilityState === 'visible' && document.hasFocus();
+ return document.visibilityState === 'visible' && (hasNativeNotifications() || document.hasFocus());
}
/**
@@ -65,8 +70,22 @@ export class SystemAlerts {
constructor(private readonly options: SystemAlertsOptions) {}
+ // Coming back to the app while a call rings: the incoming call bar takes over from the system notification.
+ private readonly handleVisibility = () => {
+ if (document.visibilityState !== 'visible') return;
+ for (const [callId, call] of this.calls) {
+ if (!call.nativeShown) continue;
+ call.nativeShown = false;
+ dismissNativeCallNotification(callId, call.callKind).catch((error) =>
+ console.error('[SystemAlerts] Failed to dismiss call notification:', error),
+ );
+ this.ringtone.start();
+ }
+ };
+
async start() {
if (!this.native || this.nativeSession) return;
+ document.addEventListener('visibilitychange', this.handleVisibility);
try {
this.nativeSession = await startNativeNotifications(
this.actionLabels(),
@@ -81,6 +100,7 @@ export class SystemAlerts {
}
stop() {
+ document.removeEventListener('visibilitychange', this.handleVisibility);
this.generation += 1;
this.dismissAllCalls();
this.nativeSession?.stop();
@@ -173,7 +193,12 @@ export class SystemAlerts {
const body = alert.conversationTitle
? translate('notifications.groupCallBody', { name: alert.callerName })
: translate('notifications.callBody');
- const call: RingingCall = { callKind: alert.callKind, alertedAt: Date.now(), webNotification: null };
+ const call: RingingCall = {
+ callKind: alert.callKind,
+ alertedAt: Date.now(),
+ webNotification: null,
+ nativeShown: false,
+ };
this.calls.set(alert.callId, call);
const generation = this.generation;
@@ -188,6 +213,12 @@ export class SystemAlerts {
void this.avatarBytes(alert.avatarUrl)
.then((avatar) => {
if (generation !== this.generation || !this.nativeSession || !isRinging()) return;
+ // The app came to the front while the avatar loaded: its own bar shows the call, so it rings in the app.
+ if (isAppInFront()) {
+ this.ringtone.start();
+ return;
+ }
+ call.nativeShown = true;
return showNativeCallNotification({ callId: alert.callId, callKind: alert.callKind, title, body, avatar });
})
.catch((error) => console.error('[SystemAlerts] Failed to show call notification:', error));
diff --git a/src/services/system-bars.ts b/src/services/system-bars.ts
index d17b8a2..66a62d9 100644
--- a/src/services/system-bars.ts
+++ b/src/services/system-bars.ts
@@ -175,8 +175,52 @@ function paint(colors: SystemBarColors) {
}
}
+// What wants the page to cover the status bar area, such as an open chat or a full screen call in portrait.
+const topCovers = new Set();
+
+/**
+ * Lets the page reach under the status bar for `reason` (an open chat, a full screen call), or stops. The OpenMeet
+ * iOS app always lets the page cover the home indicator area, and covers the status bar area while any reason
+ * holds (`set_screen_edges`); browsers ignore it. What the page draws there pads itself with
+ * `env(safe-area-inset-*)`, which reads the real insets of the covered areas.
+ */
+export function coverScreenTop(reason: string, cover: boolean) {
+ const covered = topCovers.size > 0;
+ if (cover) topCovers.add(reason);
+ else topCovers.delete(reason);
+ if (!isTauri() || covered === topCovers.size > 0) return;
+ invoke('set_screen_edges', { top: topCovers.size > 0, bottom: true }).catch((error) =>
+ console.error('[SystemBars] Failed to change the screen edges:', error),
+ );
+}
+
+// The screen's corner radius on iPhones with rounded displays, by their size in points (portrait width x height).
+// iOS keeps the real value private, so this follows Apple's published screen sizes; where two models share a size,
+// the smaller radius is used, which only rounds a little less than the glass.
+const IPHONE_CORNER_RADII: Record = {
+ '375x812': 39,
+ '414x896': 39,
+ '390x844': 47.33,
+ '428x926': 53.33,
+ '393x852': 55,
+ '430x932': 55,
+ '402x874': 62,
+ '440x956': 62,
+};
+
+/** The corner radius of a phone screen this size, in CSS pixels, or 0 for square corners or an unknown size. */
+export function deviceCornerRadius(width: number, height: number): number {
+ const [short, long] = width < height ? [width, height] : [height, width];
+ return IPHONE_CORNER_RADII[`${Math.round(short)}x${Math.round(long)}`] ?? 0;
+}
+
/** Starts following the page background; returns a function that stops. */
export function startSystemBarSync(): () => void {
+ // Lets a full screen call round its video like the glass around it (see VideoGrid).
+ if (isTauri()) {
+ const radius = deviceCornerRadius(window.screen.width, window.screen.height);
+ if (radius) document.documentElement.style.setProperty('--device-corner-radius', `${radius}px`);
+ }
let painted: SystemBarColors | null = null;
let frame: number | null = null;
-
+
+
diff --git a/src/components/meeting-page/MeetingShareRow.vue b/src/components/meeting-page/MeetingShareRow.vue
index c08465f..7952c86 100644
--- a/src/components/meeting-page/MeetingShareRow.vue
+++ b/src/components/meeting-page/MeetingShareRow.vue
@@ -4,6 +4,7 @@ import QRCode from 'qrcode';
import { ref } from 'vue';
import { useI18n } from 'vue-i18n';
+import { Expand } from '@/components/ui/expand';
import { emailShareUrl, meetingLink, telegramShareUrl, whatsAppShareUrl } from '@/lib/meeting-share';
// The invite's row of share targets. Share opens the system share sheet and shows only where one exists.
@@ -32,12 +33,15 @@ async function copyLink() {
copiedTimer = window.setTimeout(() => (isCopied.value = false), 2000);
}
+// The code is made once and kept, so it stays in view while it slides closed.
+const isQrOpen = ref(false);
async function toggleQrCode() {
- if (qrCode.value) {
- qrCode.value = null;
+ if (isQrOpen.value) {
+ isQrOpen.value = false;
return;
}
- qrCode.value = await QRCode.toDataURL(link(), { margin: 1, width: 240 });
+ qrCode.value ??= await QRCode.toDataURL(link(), { margin: 1, width: 240 });
+ isQrOpen.value = true;
}
const openWhatsApp = () => window.open(whatsAppShareUrl(shareText()), '_blank');
@@ -46,7 +50,7 @@ const emailUrl = () => emailShareUrl(t('meeting.controls.shareTitle'), shareText
-
+
-
+
+
diff --git a/src/components/meeting-page/ParticipantTile.vue b/src/components/meeting-page/ParticipantTile.vue
index fe34657..a65956f 100644
--- a/src/components/meeting-page/ParticipantTile.vue
+++ b/src/components/meeting-page/ParticipantTile.vue
@@ -1,7 +1,7 @@
+
+
+
+
(isMobile.value ? 'top-center' : 'top-right'));
:gap="10"
:offset="{ top: 84, right: 20, left: 20 }"
:mobile-offset="{ top: 84, right: 12, left: 12 }"
- :swipe-directions="['left', 'right']"
+ :swipe-directions="['left', 'right', 'top']"
container-aria-label="OpenMeet notifications"
>
-
+
-
+
emailShareUrl(t('meeting.controls.shareTitle'), shareText
-
- ![]()
-
+
+ ![]()
+
+
+
+
diff --git a/src/components/ui/expand/index.ts b/src/components/ui/expand/index.ts
new file mode 100644
index 0000000..0888d31
--- /dev/null
+++ b/src/components/ui/expand/index.ts
@@ -0,0 +1 @@
+export { default as Expand } from './Expand.vue';
diff --git a/src/components/ui/sheet/SheetContent.vue b/src/components/ui/sheet/SheetContent.vue
index 285355a..d926bb2 100644
--- a/src/components/ui/sheet/SheetContent.vue
+++ b/src/components/ui/sheet/SheetContent.vue
@@ -8,6 +8,7 @@ import { DialogClose, DialogContent, DialogOverlay, DialogPortal, useForwardProp
import type { HTMLAttributes } from 'vue';
import { useI18n } from 'vue-i18n';
+import { keepOpenForToasts } from '@/components/ui/toast/store';
import { cn } from '@/lib/utils';
interface SheetContentProps extends DialogContentProps {
@@ -43,7 +44,11 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
)
"
/>
-
+
+ - {{ connectionQualityReason || t('meeting.mediaWarning') }} - - {{ t('meeting.packetLoss', { percent: packetLossPercent }) }} - -
++ {{ connectionQualityReason || t('meeting.mediaWarning') }} + + {{ t('meeting.packetLoss', { percent: packetLossPercent }) }} + +
+