Update default templates to use component/client 2.0 (#648)

* Update default rendering template to use Component 2.0 * update to template sdk 0.2.0
livekit · Apr 8, 2024 · 6b1c207 · 6b1c207
1 parent 28ad293
commit 6b1c207
Show file tree

Hide file tree

Showing 5 changed files with 87 additions and 62 deletions.
diff --git a/template-default/package.json b/template-default/package.json
@@ -6,11 +6,11 @@
   "private": true,
   "dependencies": {
     "@babel/runtime": "^7.21.0",
-    "@livekit/components-core": "^0.8.0",
-    "@livekit/components-react": "^1.4.0",
-    "@livekit/components-styles": "^1.0.7",
-    "@livekit/egress-sdk": "^0.1.2",
-    "livekit-client": "^1.14.4",
+    "@livekit/components-core": "^0.9.3",
+    "@livekit/components-react": "^2.0.6",
+    "@livekit/components-styles": "^1.0.11",
+    "@livekit/egress-sdk": "^0.2.0",
+    "livekit-client": "^2.0.10",
     "react": ">=18",
     "react-dom": ">=18",
     "react-scripts": "5.0.1"

diff --git a/template-default/pnpm-lock.yaml b/template-default/pnpm-lock.yaml
diff --git a/template-default/src/Room.tsx b/template-default/src/Room.tsx
@@ -71,8 +71,8 @@ function CompositeTemplate({ layout: initialLayout }: CompositeTemplateProps) {
 
       // start recording when there's already a track published
       let hasTrack = false;
-      for (const p of Array.from(room.participants.values())) {
-        if (p.tracks.size > 0) {
+      for (const p of Array.from(room.remoteParticipants.values())) {
+        if (p.trackPublications.size > 0) {
           hasTrack = true;
           break;
         }

diff --git a/template-default/src/SingleSpeakerLayout.tsx b/template-default/src/SingleSpeakerLayout.tsx
@@ -14,15 +14,15 @@
  * limitations under the License.
  */
 
-import { useVisualStableUpdate, VideoTrack } from '@livekit/components-react';
+import { TrackReference, useVisualStableUpdate, VideoTrack } from '@livekit/components-react';
 import { LayoutProps } from './common';
 
 const SingleSpeakerLayout = ({ tracks: references }: LayoutProps) => {
   const sortedReferences = useVisualStableUpdate(references, 1);
   if (sortedReferences.length === 0) {
     return null;
   }
-  return <VideoTrack {...sortedReferences[0]} />;
+  return <VideoTrack trackRef={sortedReferences[0] as TrackReference} />;
 };
 
 export default SingleSpeakerLayout;
diff --git a/template-default/src/SpeakerLayout.tsx b/template-default/src/SpeakerLayout.tsx
@@ -16,7 +16,7 @@
 
 import { TrackReference } from '@livekit/components-core';
 import {
-  CarouselView,
+  CarouselLayout,
   FocusLayout,
   ParticipantTile,
   VideoTrack,
@@ -33,15 +33,15 @@ const SpeakerLayout = ({ tracks: references }: LayoutProps) => {
     return <></>;
   } else if (remainingTracks.length === 0) {
     const trackRef = mainTrack as TrackReference;
-    return <VideoTrack {...trackRef} />;
+    return <VideoTrack trackRef={trackRef} />;
   }
 
   return (
     <div className="lk-focus-layout">
-      <CarouselView tracks={remainingTracks}>
+      <CarouselLayout tracks={remainingTracks}>
         <ParticipantTile />
-      </CarouselView>
-      <FocusLayout track={mainTrack as TrackReference} />
+      </CarouselLayout>
+      <FocusLayout trackRef={mainTrack as TrackReference} />
     </div>
   );
 };