Update livekit dependencies (#512)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

.github/workflows/sync-to-production.yaml

@@ -1,33 +1,16 @@
+# .github/workflows/sync-to-production.yaml
 name: Sync main to sandbox-production
 
 on:
-  push:
-    branches:
-      - main
-
-permissions:
-  contents: write
-  pull-requests: write
+  workflow_dispatch:
 
 jobs:
   sync:
     runs-on: ubuntu-latest
-
+    permissions:
+      contents: write
     steps:
-      - name: Checkout code
-        uses: actions/checkout@v4
+      - uses: livekit-examples/sandbox-deploy-action@v1
         with:
-          fetch-depth: 0 # Fetch all history so we can force push
-
-      - name: Set up Git
-        run: |
-          git config --global user.name 'github-actions[bot]'
-          git config --global user.email 'github-actions[bot]@livekit.io'
-
-      - name: Sync to sandbox-production
-        env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-        run: |
-          git checkout sandbox-production || git checkout -b sandbox-production
-          git merge --strategy-option theirs main
-          git push origin sandbox-production
+          production_branch: 'sandbox-production'
+          token: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/test.yaml

@@ -11,12 +11,12 @@ jobs:
   test:
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@v4
+    - uses: actions/checkout@v6
     - uses: pnpm/action-setup@v4
-    - name: Use Node.js 20
+    - name: Use Node.js 22
       uses: actions/setup-node@v4
       with:
-        node-version: 20
+        node-version: 24
         cache: 'pnpm'
 
     - name: Install dependencies
@@ -29,4 +29,4 @@ jobs:
       run: pnpm format:check
 
     - name: Run Tests
-      run: pnpm test
+      run: pnpm test

app/custom/VideoConferenceClientImpl.tsx

@@ -21,6 +21,7 @@ export function VideoConferenceClientImpl(props: {
   liveKitUrl: string;
   token: string;
   codec: VideoCodec | undefined;
+  singlePeerConnection: boolean | undefined;
 }) {
   const keyProvider = new ExternalE2EEKeyProvider();
   const { worker, e2eePassphrase } = useSetupE2EE();
@@ -39,10 +40,11 @@ export function VideoConferenceClientImpl(props: {
       dynacast: true,
       e2ee: e2eeEnabled
         ? {
-          keyProvider,
-          worker,
-        }
+            keyProvider,
+            worker,
+          }
         : undefined,
+      singlePeerConnection: props.singlePeerConnection,
     };
   }, [e2eeEnabled, props.codec, keyProvider, worker]);
 

app/custom/page.tsx

@@ -7,9 +7,10 @@ export default async function CustomRoomConnection(props: {
     liveKitUrl?: string;
     token?: string;
     codec?: string;
+    singlePC?: string;
   }>;
 }) {
-  const { liveKitUrl, token, codec } = await props.searchParams;
+  const { liveKitUrl, token, codec, singlePC } = await props.searchParams;
   if (typeof liveKitUrl !== 'string') {
     return <h2>Missing LiveKit URL</h2>;
   }
@@ -22,7 +23,12 @@ export default async function CustomRoomConnection(props: {
 
   return (
     <main data-lk-theme="default" style={{ height: '100%' }}>
-      <VideoConferenceClientImpl liveKitUrl={liveKitUrl} token={token} codec={codec} />
+      <VideoConferenceClientImpl
+        liveKitUrl={liveKitUrl}
+        token={token}
+        codec={codec}
+        singlePeerConnection={singlePC === 'true'}
+      />
     </main>
   );
 }

app/rooms/[roomName]/PageClientImpl.tsx

@@ -129,6 +129,7 @@ function VideoConferenceComponent(props: {
       adaptiveStream: true,
       dynacast: true,
       e2ee: keyProvider && worker && e2eeEnabled ? { keyProvider, worker } : undefined,
+      singlePeerConnection: true,
     };
   }, [props.userChoices, props.options.hq, props.options.codec]);
 

lib/client-utils.ts

@@ -23,3 +23,7 @@ export function randomString(length: number): string {
 export function isLowPowerDevice() {
   return navigator.hardwareConcurrency < 6;
 }
+
+export function isMeetStaging() {
+  return new URL(location.origin).host === 'meet.staging.livekit.io';
+}

package.json

@@ -14,31 +14,31 @@
   },
   "dependencies": {
     "@datadog/browser-logs": "^5.23.3",
-    "@livekit/components-react": "2.9.13",
-    "@livekit/components-styles": "1.1.6",
-    "@livekit/krisp-noise-filter": "0.3.4",
-    "@livekit/track-processors": "^0.5.4",
-    "livekit-client": "2.15.2",
-    "livekit-server-sdk": "2.13.1",
-    "next": "15.2.4",
+    "@livekit/components-react": "2.9.19",
+    "@livekit/components-styles": "1.2.0",
+    "@livekit/krisp-noise-filter": "0.4.1",
+    "@livekit/track-processors": "^0.7.0",
+    "livekit-client": "2.17.2",
+    "livekit-server-sdk": "2.15.0",
+    "next": "15.2.8",
     "react": "18.3.1",
     "react-dom": "18.3.1",
     "react-hot-toast": "^2.5.2",
     "tinykeys": "^3.0.0"
   },
   "devDependencies": {
-    "@types/node": "22.15.31",
-    "@types/react": "18.3.23",
+    "@types/node": "24.10.13",
+    "@types/react": "18.3.27",
     "@types/react-dom": "18.3.7",
-    "eslint": "9.29.0",
-    "eslint-config-next": "15.3.3",
-    "prettier": "3.5.3",
+    "eslint": "9.39.1",
+    "eslint-config-next": "15.5.6",
+    "prettier": "3.7.3",
     "source-map-loader": "^5.0.0",
-    "typescript": "5.8.3",
+    "typescript": "5.9.3",
     "vitest": "^3.2.4"
   },
   "engines": {
     "node": ">=18"
   },
-  "packageManager": "pnpm@10.9.0"
+  "packageManager": "pnpm@10.18.2"
 }

styles/globals.css

@@ -25,13 +25,13 @@ body {
   padding-inline: 2rem;
 }
 
-.header>img {
+.header > img {
   display: block;
   margin: auto;
   max-width: 100%;
 }
 
-.header>h2 {
+.header > h2 {
   font-family: 'TWK Everett', sans-serif;
   font-style: normal;
   font-weight: 400;
@@ -65,92 +65,3 @@ h2 a {
 h2 a {
   text-decoration: none;
 }
-
-/* Override LiveKit video conference layout to fix control bar positioning */
-.lk-video-conference {
-  position: relative;
-  display: flex !important;
-  flex-direction: column !important;
-  align-items: stretch;
-  height: 100%;
-}
-
-.lk-video-conference-content {
-  display: flex;
-  flex-direction: row;
-  align-items: stretch;
-  width: 100%;
-  flex: 1;
-  min-height: 0;
-}
-
-.lk-video-conference-inner {
-  display: flex;
-  flex-direction: column;
-  align-items: stretch;
-  width: 100%;
-  flex: 1;
-  min-height: 0;
-}
-
-.lk-grid-layout-wrapper,
-.lk-focus-layout-wrapper {
-  position: relative;
-  display: flex;
-  justify-content: center;
-  width: 100%;
-  height: 100% !important;
-  flex: 1;
-  min-height: 0;
-}
-
-.lk-grid-layout-wrapper {
-  flex-direction: column;
-  align-items: center;
-}
-
-.lk-focus-layout-wrapper {
-  align-items: stretch;
-}
-
-/* Emoji Reaction Styles */
-.lk-emoji-reactions {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 0.5rem;
-  pointer-events: none;
-  z-index: 10;
-}
-
-.lk-emoji-reaction {
-  font-size: 3rem;
-  animation: emojiReaction 3s ease-out forwards;
-  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
-}
-
-@keyframes emojiReaction {
-  0% {
-    opacity: 0;
-    transform: scale(0.5) translateY(20px);
-  }
-
-  20% {
-    opacity: 1;
-    transform: scale(1.2) translateY(0);
-  }
-
-  80% {
-    opacity: 1;
-    transform: scale(1) translateY(-10px);
-  }
-
-  100% {
-    opacity: 0;
-    transform: scale(0.8) translateY(-20px);
-  }
-}