Merge branch 'develop' into e2e-tests

Author: BreadGenie

.github/workflows/build-sfu.yml

@@ -28,6 +28,7 @@ jobs:
       - name: Build and push Docker image
         uses: docker/build-push-action@v5
         with:
-          context: ./sfu-server
+          context: .
+          file: ./sfu-server/Dockerfile
           push: true
           tags: ghcr.io/frappe/meet/sfu-server:latest

README.md

@@ -1,110 +1,46 @@
-# Frappe Meet
+<div align="center">
 
-A video conferencing app built with Frappe.
+<a href="https://github.com/frappe/meet">
+    <img src="https://frappe.io/files/meet_logo.png" height="80" alt="Frappe Meet Logo">
+</a>
 
-## Architecture
+<h1>Frappe Meet</h1>
 
-```
-┌─────────────┐    HTTP/WS     ┌─────────────────────┐
-│   Client    │ ◄─────────────► │ Frappe Server      │
-│ (Frontend)  │                │ (Auth, Perms etc)   │
-│             │                └─────────────────────┘
-│             │
-│             │    Socket.IO (JWT Auth)
-│             │ ◄────────────────────────────────┐
-└─────────────┘                                  │
-                                                 ▼
-                                       ┌─────────────┐
-                                       │ SFU Server  │
-                                       │ (mediasoup) │
-                                       └─────────────┘
-```
+**Simple, High Quality Video Conferencing**
 
-### Components
+</div>
 
-1. **Client (Frontend)**: Vue.js application with WebRTC capabilities and direct SFU communication
-2. **Frappe Server**: Handles authentication, permissions, and meeting management
-3. **SFU Server (mediasoup)**: Handles transports, producers/consumers and media routing.
+> [!WARNING]  
+> Frappe Meet is an alpha product and is not yet ready for production!
 
-### Prerequisites
+## Frappe Meet
 
-- Frappe Framework (v15+)
-- Node.js 18+ (recommended for mediasoup)
-- Python 3.10+
-- System deps for mediasoup (libc++, libsrtp, etc.)
+Frappe Meet is a video conferencing app built with simplicity, quality, and reliability in mind.
 
-### 1. Install the Frappe App
+### Key Features
 
-```bash
-cd $PATH_TO_YOUR_BENCH
-bench get-app $URL_OF_THIS_REPO --branch develop
-bench install-app meet
-```
+- **High-quality meetings:** Low-latency, scalable multi-party video with adaptive streaming.
+- **Meeting Management:** Create meetings and control meeting access for guests, participants, or hosts.
+- **Multimedia features:** Features like background effects, noise suppression, and push-to-talk elevate the meeting experience. 
 
-### 2. Setup SFU Server
+### Under the Hood
 
-```bash
-# Navigate to SFU server directory
-cd apps/meet/sfu-server
+- [Mediasoup](https://github.com/versatica/mediasoup): Cutting Edge WebRTC Video Conferencing.
+- [Frappe Framework](https://github.com/frappe/frappe): A full-stack web application framework.
+- [Frappe UI](https://github.com/frappe/frappe-ui): A Vue-based UI library, to provide a modern user interface.
 
-# Install dependencies (including new JWT support)
-npm install
-
-cp .env.example .env
-# Minimum required settings in .env:
-# JWT_SECRET=your_jwt_secret_here
-# PORT=3000
-# HOST=0.0.0.0
-# WEBRTC_ANNOUNCED_IP=<public_ip_or_domain>
-
-# Start SFU server
-npm start
-```
-
-### 3. Configure Frappe Site
-
-Add to your site config:
-
-Add to `site_config.json` (values must match SFU):
-
-```jsonc
-{
-  "sfu_secret": "your_jwt_secret_here",
-  "sfu_server_url": "https://your-domain.example"
-}
-```
-
-### 4. Build Frontend
-
-```bash
-cd apps/meet/frontend
-yarn install
-yarn build
-```
-
-### Contributing
-
-This app uses `pre-commit` for code formatting and linting. Please [install pre-commit](https://pre-commit.com/#installation) and enable it for this repository:
-
-```bash
-cd apps/meet
-pre-commit install
-```
-
-Pre-commit is configured to use the following tools for checking and formatting your code:
-
-- ruff
-- eslint
-- prettier
-- pyupgrade
-
-### CI
-
-This app can use GitHub Actions for CI. The following workflows are configured:
-
-- CI: Installs this app and runs unit tests on every push to `develop` branch.
-- Linters: Runs [Frappe Semgrep Rules](https://github.com/frappe/semgrep-rules) and [pip-audit](https://pypi.org/project/pip-audit/) on every pull request.
 
 ### License
 
 AGPL-3.0
+
+<br>
+<br>
+<div align="center">
+	<a href="https://frappe.io" target="_blank">
+		<picture>
+			<source media="(prefers-color-scheme: dark)" srcset="https://frappe.io/files/Frappe-white.png">
+			<img src="https://frappe.io/files/Frappe-black.png" alt="Frappe Technologies" height="28"/>
+		</picture>
+	</a>
+</div>

frontend/components.d.ts

@@ -6,78 +6,150 @@
 export {}
 
 /* prettier-ignore */
-declare module 'vue' {
-  export interface GlobalComponents {
-    AudioIndicator: typeof import('./src/components/AudioIndicator.vue')['default']
-    AudioSettingsTab: typeof import('./src/components/settings/AudioSettingsTab.vue')['default']
-    BackgroundSettingsTab: typeof import('./src/components/settings/BackgroundSettingsTab.vue')['default']
-    ChatNotification: typeof import('./src/components/ChatNotification.vue')['default']
-    ChatNotificationQueue: typeof import('./src/components/ChatNotificationQueue.vue')['default']
-    ChatPanel: typeof import('./src/components/ChatPanel.vue')['default']
-    ClickToCopyField: typeof import('./src/components/ClickToCopyField.vue')['default']
-    DeviceSettingsTab: typeof import('./src/components/settings/DeviceSettingsTab.vue')['default']
-    EmojiPicker: typeof import('./src/components/EmojiPicker.vue')['default']
-    FloatingControls: typeof import('./src/components/FloatingControls.vue')['default']
-    FloatingReactions: typeof import('./src/components/FloatingReactions.vue')['default']
-    GroupTile: typeof import('./src/components/GroupTile.vue')['default']
-    JoinRequestNotifications: typeof import('./src/components/JoinRequestNotifications.vue')['default']
-    KickParticipantDialog: typeof import('./src/components/KickParticipantDialog.vue')['default']
-    LobbyOverlay: typeof import('./src/components/LobbyOverlay.vue')['default']
-    LucideAlertCircle: typeof import('~icons/lucide/alert-circle')['default']
-    LucideAlertTriangle: typeof import('~icons/lucide/alert-triangle')['default']
-    LucideCheck: typeof import('~icons/lucide/check')['default']
-    LucideCircleUserRound: typeof import('~icons/lucide/circle-user-round')['default']
-    LucideClock: typeof import('~icons/lucide/clock')['default']
-    LucideHand: typeof import('~icons/lucide/hand')['default']
-    LucideHome: typeof import('~icons/lucide/home')['default']
-    LucideLoader: typeof import('~icons/lucide/loader')['default']
-    LucideMessageSquare: typeof import('~icons/lucide/message-square')['default']
-    LucideMessageSquareDot: typeof import('~icons/lucide/message-square-dot')['default']
-    LucideMessageSquareOff: typeof import('~icons/lucide/message-square-off')['default']
-    LucideMic: typeof import('~icons/lucide/mic')['default']
-    LucideMicOff: typeof import('~icons/lucide/mic-off')['default']
-    LucideMonitorPause: typeof import('~icons/lucide/monitor-pause')['default']
-    LucideMonitorUp: typeof import('~icons/lucide/monitor-up')['default']
-    LucideMoreHorizontal: typeof import('~icons/lucide/more-horizontal')['default']
-    LucideMoreVertical: typeof import('~icons/lucide/more-vertical')['default']
-    LucidePhoneOff: typeof import('~icons/lucide/phone-off')['default']
-    LucidePlay: typeof import("~icons/lucide/play")["default"]
-    LucidePlayCircle: typeof import("~icons/lucide/play-circle")["default"]
-    LucidePlus: typeof import('~icons/lucide/plus')['default']
-    LucideSearch: typeof import('~icons/lucide/search')['default']
-    LucideSettings: typeof import('~icons/lucide/settings')['default']
-    LucideSmile: typeof import('~icons/lucide/smile')['default']
-    LucideUserCheck: typeof import("~icons/lucide/user-check")["default"]
-    LucideUserMinus: typeof import("~icons/lucide/user-minus")["default"]
-    LucideUserPlus: typeof import("~icons/lucide/user-plus")["default"]
-    LucideUsers: typeof import('~icons/lucide/users')['default']
-    LucideVideo: typeof import('~icons/lucide/video')['default']
-    LucideVideoOff: typeof import('~icons/lucide/video-off')['default']
-    LucideWifiOff: typeof import('~icons/lucide/wifi-off')['default']
-    LucideX: typeof import('~icons/lucide/x')['default']
-    LucideXCircle: typeof import('~icons/lucide/x-circle')['default']
-    MeetingAccessSettingsTab: typeof import('./src/components/settings/MeetingAccessSettingsTab.vue')['default']
-    MeetingAvatar: typeof import('./src/components/MeetingAvatar.vue')['default']
-    MeetingInfoDialog: typeof import('./src/components/MeetingInfoDialog.vue')['default']
-    MeetingPreview: typeof import('./src/components/MeetingPreview.vue')['default']
-    NamePill: typeof import('./src/components/NamePill.vue')['default']
-    NotificationSettingsTab: typeof import('./src/components/settings/NotificationSettingsTab.vue')['default']
-    ParticipantAvatarGroup: typeof import('./src/components/ParticipantAvatarGroup.vue')['default']
-    ParticipantTile: typeof import('./src/components/ParticipantTile.vue')['default']
-    PeoplePanel: typeof import('./src/components/PeoplePanel.vue')['default']
-    PeopleParticipantTile: typeof import('./src/components/PeopleParticipantTile.vue')['default']
-    PeopleWaitingSection: typeof import('./src/components/PeopleWaitingSection.vue')['default']
-    ReactionPicker: typeof import('./src/components/ReactionPicker.vue')['default']
-    RejectionOverlay: typeof import('./src/components/RejectionOverlay.vue')['default']
-    RouterLink: typeof import('vue-router')['RouterLink']
-    RouterView: typeof import('vue-router')['RouterView']
-    ScreenShareLayout: typeof import('./src/components/ScreenShareLayout.vue')['default']
-    ScreenShareSidebar: typeof import('./src/components/ScreenShareSidebar.vue')['default']
-    ScreenShareSidebarParticipantTile: typeof import('./src/components/ScreenShareSidebarParticipantTile.vue')['default']
-    SettingsDialog: typeof import('./src/components/settings/SettingsDialog.vue')['default']
-    SettingsLayoutBase: typeof import('./src/components/settings/SettingsLayoutBase.vue')['default']
-    SFUDashboard: typeof import('./src/components/SFUDashboard.vue')['default']
-    VideoGrid: typeof import('./src/components/VideoGrid.vue')['default']
-    VideoPreview: typeof import('./src/components/VideoPreview.vue')['default']
-  }
+declare module "vue" {
+	export interface GlobalComponents {
+		AudioIndicator: typeof import(
+			"./src/components/AudioIndicator.vue",
+		)["default"];
+		AudioSettingsTab: typeof import(
+			"./src/components/settings/AudioSettingsTab.vue",
+		)["default"];
+		BackgroundSettingsTab: typeof import(
+			"./src/components/settings/BackgroundSettingsTab.vue",
+		)["default"];
+		ChatNotification: typeof import(
+			"./src/components/ChatNotification.vue",
+		)["default"];
+		ChatNotificationQueue: typeof import(
+			"./src/components/ChatNotificationQueue.vue",
+		)["default"];
+		ChatPanel: typeof import("./src/components/ChatPanel.vue")["default"];
+		ClickToCopyField: typeof import(
+			"./src/components/ClickToCopyField.vue",
+		)["default"];
+		DeviceSettingsTab: typeof import(
+			"./src/components/settings/DeviceSettingsTab.vue",
+		)["default"];
+		EmojiPicker: typeof import("./src/components/EmojiPicker.vue")["default"];
+		FloatingReactions: typeof import(
+			"./src/components/FloatingReactions.vue",
+		)["default"];
+		GroupTile: typeof import("./src/components/GroupTile.vue")["default"];
+		JoinRequestNotifications: typeof import(
+			"./src/components/JoinRequestNotifications.vue",
+		)["default"];
+		KickParticipantDialog: typeof import(
+			"./src/components/KickParticipantDialog.vue",
+		)["default"];
+		LayoutSettingsTab: typeof import(
+			"./src/components/settings/LayoutSettingsTab.vue",
+		)["default"];
+		LobbyOverlay: typeof import("./src/components/LobbyOverlay.vue")["default"];
+		LucideAlertCircle: typeof import("~icons/lucide/alert-circle")["default"];
+		LucideAlertTriangle: typeof import(
+			"~icons/lucide/alert-triangle",
+		)["default"];
+		LucideCheck: typeof import("~icons/lucide/check")["default"];
+		LucideCircleUserRound: typeof import(
+			"~icons/lucide/circle-user-round",
+		)["default"];
+		LucideClock: typeof import("~icons/lucide/clock")["default"];
+		LucideHand: typeof import("~icons/lucide/hand")["default"];
+		LucideHome: typeof import("~icons/lucide/home")["default"];
+		LucideLoader: typeof import("~icons/lucide/loader")["default"];
+		LucideMessageSquare: typeof import(
+			"~icons/lucide/message-square",
+		)["default"];
+		LucideMessageSquareDot: typeof import(
+			"~icons/lucide/message-square-dot",
+		)["default"];
+		LucideMessageSquareOff: typeof import(
+			"~icons/lucide/message-square-off",
+		)["default"];
+		LucideMic: typeof import("~icons/lucide/mic")["default"];
+		LucideMicOff: typeof import("~icons/lucide/mic-off")["default"];
+		LucideMonitorPause: typeof import("~icons/lucide/monitor-pause")["default"];
+		LucideMonitorUp: typeof import("~icons/lucide/monitor-up")["default"];
+		LucideMoreHorizontal: typeof import(
+			"~icons/lucide/more-horizontal",
+		)["default"];
+		LucideMoreVertical: typeof import("~icons/lucide/more-vertical")["default"];
+		LucidePhoneOff: typeof import("~icons/lucide/phone-off")["default"];
+		LucidePlay: typeof import("~icons/lucide/play")["default"];
+		LucidePlayCircle: typeof import("~icons/lucide/play-circle")["default"];
+		LucidePlus: typeof import("~icons/lucide/plus")["default"];
+		LucideSearch: typeof import("~icons/lucide/search")["default"];
+		LucideSettings: typeof import("~icons/lucide/settings")["default"];
+		LucideSmile: typeof import("~icons/lucide/smile")["default"];
+		LucideUserCheck: typeof import("~icons/lucide/user-check")["default"];
+		LucideUserMinus: typeof import("~icons/lucide/user-minus")["default"];
+		LucideUserPlus: typeof import("~icons/lucide/user-plus")["default"];
+		LucideUsers: typeof import("~icons/lucide/users")["default"];
+		LucideVideo: typeof import("~icons/lucide/video")["default"];
+		LucideVideoOff: typeof import("~icons/lucide/video-off")["default"];
+		LucideX: typeof import("~icons/lucide/x")["default"];
+		LucideXCircle: typeof import("~icons/lucide/x-circle")["default"];
+		MeetingAccessSettingsTab: typeof import(
+			"./src/components/settings/MeetingAccessSettingsTab.vue",
+		)["default"];
+		MeetingAvatar: typeof import(
+			"./src/components/MeetingAvatar.vue",
+		)["default"];
+		MeetingInfoDialog: typeof import(
+			"./src/components/MeetingInfoDialog.vue",
+		)["default"];
+		MeetingPreview: typeof import(
+			"./src/components/MeetingPreview.vue",
+		)["default"];
+		MeetingToolbar: typeof import(
+			"./src/components/MeetingToolbar.vue",
+		)["default"];
+		NamePill: typeof import("./src/components/NamePill.vue")["default"];
+		NotificationSettingsTab: typeof import(
+			"./src/components/settings/NotificationSettingsTab.vue",
+		)["default"];
+		ParticipantAvatarGroup: typeof import(
+			"./src/components/ParticipantAvatarGroup.vue",
+		)["default"];
+		ParticipantTile: typeof import(
+			"./src/components/ParticipantTile.vue",
+		)["default"];
+		PeoplePanel: typeof import("./src/components/PeoplePanel.vue")["default"];
+		PeopleParticipantTile: typeof import(
+			"./src/components/PeopleParticipantTile.vue",
+		)["default"];
+		PeopleWaitingSection: typeof import(
+			"./src/components/PeopleWaitingSection.vue",
+		)["default"];
+		PreviewToolbar: typeof import(
+			"./src/components/PreviewToolbar.vue",
+		)["default"];
+		ReactionPicker: typeof import(
+			"./src/components/ReactionPicker.vue",
+		)["default"];
+		RejectionOverlay: typeof import(
+			"./src/components/RejectionOverlay.vue",
+		)["default"];
+		RouterLink: typeof import("vue-router")["RouterLink"];
+		RouterView: typeof import("vue-router")["RouterView"];
+		ScreenShareLayout: typeof import(
+			"./src/components/ScreenShareLayout.vue",
+		)["default"];
+		ScreenShareSidebar: typeof import(
+			"./src/components/ScreenShareSidebar.vue",
+		)["default"];
+		ScreenShareSidebarParticipantTile: typeof import(
+			"./src/components/ScreenShareSidebarParticipantTile.vue",
+		)["default"];
+		SettingsDialog: typeof import(
+			"./src/components/settings/SettingsDialog.vue",
+		)["default"];
+		SettingsLayoutBase: typeof import(
+			"./src/components/settings/SettingsLayoutBase.vue",
+		)["default"];
+		SFUDashboard: typeof import("./src/components/SFUDashboard.vue")["default"];
+		Spinner: typeof import("./src/components/Spinner.vue")["default"];
+		VideoGrid: typeof import("./src/components/VideoGrid.vue")["default"];
+		VideoPreview: typeof import("./src/components/VideoPreview.vue")["default"];
+	}
 }