Merge pull request #2823 from ever-co/develop

Release

.cspell.json

@@ -201,6 +201,8 @@
  "longpress",
  "Lorem",
  "lucide",
+ "livekit",
+ "livekitroom",
  "mappagination",
  "mathieudutour",
  "Mazen",

apps/web/.env

@@ -58,6 +58,13 @@ NEXT_PUBLIC_TWITTER_APP_NAME=ever-twitter
 TWITTER_CLIENT_ID=
 TWITTER_CLIENT_SECRET=
 
+# MEET_TYPE: LiveKit | Jitsi
+NEXT_PUBLIC_MEET_TYPE=Jitsi
+
+#Livekit configuration
+LIVEKIT_API_SECRET=
+LIVEKIT_API_KEY=
+NEXT_PUBLIC_LIVEKIT_URL=
 
 # Invite Callback URL
 INVITE_CALLBACK_URL=https://app.ever.team/auth/passcode

apps/web/app/[locale]/meet/component.tsx → apps/web/app/[locale]/meet/jitsi/component.tsx

@@ -44,7 +44,7 @@ function MeetPage() {
  }, [pathname]);
 
  useEffect(() => {
- if (!room && pathname?.startsWith('/meet') && !replaced.current) {
+ if (!room && pathname?.startsWith('/meet/jitsi') && !replaced.current) {
  const url = new URL(window.location.href);
  url.searchParams.set('room', btoa(randomMeetName()));
 

apps/web/app/[locale]/meet/livekit/component.tsx

@@ -0,0 +1,61 @@
+"use client";
+
+import { useAuthenticateUser } from '@app/hooks';
+import { withAuthentication } from 'lib/app/authenticator';
+import { BackdropLoader, Meta } from 'lib/components';
+import dynamic from 'next/dynamic';
+import { useRouter, useSearchParams } from 'next/navigation';
+import { useCallback, useEffect, useState } from 'react';
+import { useTokenLiveKit } from '@app/hooks/useLiveKit';
+
+const LiveKit = dynamic(() => import('lib/features/integrations/livekit'), {
+ ssr: false,
+ loading: () => <BackdropLoader show />
+});
+
+function LiveKitPage() {
+ const router = useRouter();
+ const { user } = useAuthenticateUser();
+ const [roomName, setRoomName] = useState<string | undefined>(undefined);
+ const params = useSearchParams();
+
+ const onLeave = useCallback(() => {
+ router.push('/');
+ }, [router]);
+
+ useEffect(() => {
+ const room = params.get("roomName");
+ if (room) {
+ setRoomName(room);
+ }
+ }, [params]);
+
+ const { token } = useTokenLiveKit({
+ roomName: roomName || '',
+ username: user?.email || '',
+ });
+
+ return (
+ <>
+ <Meta title="Meet" />
+ {token && roomName && <LiveKit
+ token={token!}
+ roomName={roomName}
+ liveKitUrl={process.env.NEXT_PUBLIC_LIVEKIT_URL || ''}
+ onLeave={onLeave}
+ userChoices={{
+ videoEnabled: true,
+ audioEnabled: true,
+ audioDeviceId: '',
+ username: user?.email || '',
+ videoDeviceId: ''
+ }}
+ />}
+ </>
+ );
+}
+
+export default withAuthentication(LiveKitPage, {
+ displayName: 'LiveKitPage',
+ showPageSkeleton: false
+});

apps/web/app/[locale]/meet/livekit/page.tsx

@@ -0,0 +1,9 @@
+import LiveKitPage from './component'
+import React from 'react'
+
+function Page() {
+ return <LiveKitPage />
+
+}
+
+export default Page

apps/web/app/api/livekit/route.ts

@@ -0,0 +1,46 @@
+import { AccessToken } from "livekit-server-sdk";
+import { NextRequest, NextResponse } from "next/server";
+
+export async function GET(req: NextRequest) {
+ const room = req.nextUrl.searchParams.get("roomName");
+ const username = req.nextUrl.searchParams.get("username");
+
+ if (!room || typeof room !== 'string' || room.trim() === '') {
+ return NextResponse.json(
+ { error: 'Missing or invalid "roomName" query parameter' },
+ { status: 400 }
+ );
+ }
+
+ if (!username || typeof username !== 'string' || username.trim() === '') {
+ return NextResponse.json(
+ { error: 'Missing or invalid "username" query parameter' },
+ { status: 400 }
+ );
+ }
+
+ const apiKey = process.env.LIVEKIT_API_KEY;
+ const apiSecret = process.env.LIVEKIT_API_SECRET;
+ const wsUrl = process.env.NEXT_PUBLIC_LIVEKIT_URL;
+
+ if (!apiKey || !apiSecret || !wsUrl) {
+ console.error("Server misconfigured: missing environment variables.");
+ return NextResponse.json(
+ { error: "Server misconfigured" },
+ { status: 500 }
+ );
+ }
+
+ try {
+ const at = new AccessToken(apiKey, apiSecret, { identity: username });
+ at.addGrant({ room, roomJoin: true, canPublish: true, canSubscribe: true, roomRecord: true });
+ const token = await at.toJwt();
+ return NextResponse.json({ token: token });
+ } catch (error) {
+ console.error("Failed to generate token:", error);
+ return NextResponse.json(
+ { error: "Failed to generate token" },
+ { status: 500 }
+ );
+ }
+}

apps/web/app/hooks/useCollaborative.ts

@@ -9,7 +9,11 @@ import { useRouter } from 'next/navigation';
 import { nanoid } from 'nanoid';
 import capitalize from 'lodash/capitalize';
 
+
+
 export function useCollaborative(user?: IUser) {
+ const meetType = process.env.NEXT_PUBLIC_MEET_TYPE || 'Jitsi';
+
  const { activeTeam } = useOrganizationTeams();
  const { user: authUser } = useAuthenticateUser();
  const [collaborativeSelect, setCollaborativeSelect] = useRecoilState(collaborativeSelectState);
@@ -57,10 +61,14 @@ export function useCollaborative(user?: IUser) {
  }, [authUser, randomMeetName, activeTeam, collaborativeMembers]);
 
  const onMeetClick = useCallback(() => {
+ // LiveKit | Jitsi
  const meetName = getMeetRoomName();
-
- router.push(`/meet?room=${btoa(meetName)}`);
- }, [getMeetRoomName, router]);
+ const encodedName = Buffer.from(meetName).toString('base64');
+ const path = meetType === 'Jitsi'
+ ? `/meet/jitsi?room=${encodedName}`
+ : `/meet/livekit?roomName=${encodedName}`;
+ router.push(path);
+ }, [getMeetRoomName, router, meetType]);
 
  const onBoardClick = useCallback(() => {
  const members = collaborativeMembers.map((m) => m.id).join(',');

apps/web/app/hooks/useLiveKit.ts

@@ -0,0 +1,33 @@
+"use client";
+import { tokenLiveKitRoom } from "@app/services/server/livekitroom";
+import { useEffect, useState } from "react";
+
+interface ITokenLiveKitProps {
+ roomName: string;
+ username: string;
+}
+
+export function useTokenLiveKit({ roomName, username }: ITokenLiveKitProps) {
+
+ const [token, setToken] = useState<string | null>(() => {
+ if (typeof window !== 'undefined') {
+ return window.localStorage.getItem('token-live-kit');
+ }
+ return null;
+ });
+
+ useEffect(() => {
+ const fetchToken = async () => {
+ try {
+ const response = await tokenLiveKitRoom({ roomName, username });
+ window.localStorage.setItem('token-live-kit', response.token);
+ setToken(response.token);
+ } catch (error) {
+ console.error('Failed to fetch token:', error);
+ }
+ };
+ fetchToken();
+ }, [roomName, username, token]);
+
+ return { token };
+}

apps/web/app/interfaces/ILiveKiteCredentials.ts

@@ -0,0 +1,42 @@
+import { JwtPayload } from "jsonwebtoken";
+import { LocalAudioTrack, LocalVideoTrack } from 'livekit-client';
+
+export interface ILiveKiteCredentials {
+ ttl?:number|string
+ roomName?: string,
+ identity?: string,
+ username?: string,
+ metadata?: string
+}
+
+export interface CustomJwtPayload extends JwtPayload {
+ exp?: number;
+ iss?: string;
+ nbf?: number;
+ sub?: string;
+ video?: {
+ canPublish: boolean;
+ canPublishData: boolean;
+ canSubscribe: boolean;
+ room: string;
+ roomJoin: boolean;
+ };
+}
+
+
+
+
+export interface SessionProps {
+ roomName: string;
+ identity: string;
+ audioTrack?: LocalAudioTrack;
+ videoTrack?: LocalVideoTrack;
+ region?: string;
+ turnServer?: RTCIceServer;
+ forceRelay?: boolean;
+}
+
+export interface TokenResult {
+ identity: string;
+ accessToken: string;
+}

apps/web/app/interfaces/index.ts

@@ -33,6 +33,7 @@ export * from './ITheme';
 export * from './IRolePermissions';
 export * from './ITimer';
 export * from './IProject';
+export * from './ILiveKiteCredentials'
 
 export * from './integrations/IGithubRepositories';
 export * from './integrations/IGithubMetadata';

apps/web/app/services/server/livekitroom.ts

@@ -0,0 +1,10 @@
+import { ILiveKiteCredentials } from "@app/interfaces";
+
+export async function tokenLiveKitRoom({ roomName, username }: ILiveKiteCredentials) {
+ try {
+ const response = await fetch(`/api/livekit?roomName=${roomName ?? 'default'}&username=${username ?? 'employee'}`);
+ return await response.json();
+ } catch (e) {
+ console.error(e)
+ }
+}

apps/web/components/shared/collaborate/index.tsx

@@ -114,11 +114,11 @@ const Collaborate = () => {
  {(member?.image?.thumbUrl ||
  member?.image?.fullUrl ||
  member?.imageUrl) &&
- isValidUrl(
- member?.image?.thumbUrl ||
+  isValidUrl(
+  member?.image?.thumbUrl ||
  member?.image?.fullUrl ||
  member?.imageUrl
- ) ? (
+  ) ? (
  <Avatar
  size={36}
  className="relative cursor-pointer dark:border-[0.25rem] dark:border-[#26272C]"
@@ -167,9 +167,9 @@ const Collaborate = () => {
  }}
  >
  {(member?.image?.thumbUrl || member?.image?.fullUrl || member?.imageUrl) &&
- isValidUrl(
- member?.image?.thumbUrl || member?.image?.fullUrl || member?.imageUrl
- ) ? (
+  isValidUrl(
+  member?.image?.thumbUrl || member?.image?.fullUrl || member?.imageUrl
+  ) ? (
  <Avatar
  size={32}
  className="relative cursor-pointer dark:border-[0.25rem] dark:border-[#26272C]"