Merge pull request #38 from dyte-io/fix/v2-support

fix(v2-support): updated samples to use v2
dyte-io · Sep 13, 2024 · 5de582e · 5de582e
2 parents 82465fd + 0c89ef6
commit 5de582e
Show file tree

Hide file tree

Showing 18 changed files with 638 additions and 293 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/samples/active-speaker-ui/package.json b/samples/active-speaker-ui/package.json
@@ -9,8 +9,8 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@dytesdk/react-ui-kit": "^1.66.1",
-    "@dytesdk/react-web-core": "^1.36.4",
+    "@dytesdk/react-ui-kit": "^2.0.3",
+    "@dytesdk/react-web-core": "^2.0.7",
     "clsx": "^2.1.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

diff --git a/samples/async-video-survey/package.json b/samples/async-video-survey/package.json
@@ -9,8 +9,8 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@dytesdk/react-ui-kit": "^1.54.0",
-    "@dytesdk/react-web-core": "^1.33.4",
+    "@dytesdk/react-ui-kit": "^2.0.3",
+    "@dytesdk/react-web-core": "^2.0.7",
     "autoprefixer": "^10.4.15",
     "postcss": "^8.4.29",
     "react": "^18.2.0",

diff --git a/samples/audio-room/package.json b/samples/audio-room/package.json
@@ -9,8 +9,8 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@dytesdk/react-ui-kit": "^1.54.0",
-    "@dytesdk/react-web-core": "^1.33.4",
+    "@dytesdk/react-ui-kit": "^2.0.3",
+    "@dytesdk/react-web-core": "^2.0.7",
     "clsx": "^1.2.1",
     "good-grid": "^0.3.0",
     "react": "^18.2.0",

diff --git a/samples/chat-widget/package.json b/samples/chat-widget/package.json
@@ -13,9 +13,9 @@
     "typecheck": "tsc --project tsconfig.json --noEmit"
   },
   "dependencies": {
-	"@dytesdk/web-core": "1.20.0",
-	"@dytesdk/react-web-core": "1.35.5",
-	"@dytesdk/react-ui-kit": "1.59.0",
+	  "@dytesdk/web-core": "2.0.7",
+	  "@dytesdk/react-ui-kit": "^2.0.3",
+    "@dytesdk/react-web-core": "^2.0.7",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },

diff --git a/samples/chat/package.json b/samples/chat/package.json
@@ -9,8 +9,8 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@dytesdk/react-ui-kit": "^1.54.0",
-    "@dytesdk/react-web-core": "^1.33.4",
+    "@dytesdk/react-ui-kit": "^2.0.3",
+    "@dytesdk/react-web-core": "^2.0.7",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-feather": "^2.0.10"

diff --git a/samples/clubhouse/package.json b/samples/clubhouse/package.json
@@ -9,8 +9,8 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@dytesdk/react-ui-kit": "^1.54.0",
-    "@dytesdk/react-web-core": "^1.33.4",
+    "@dytesdk/react-ui-kit": "^2.0.3",
+    "@dytesdk/react-web-core": "^2.0.7",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-feather": "^2.0.10"

diff --git a/samples/create-your-own-ui/package.json b/samples/create-your-own-ui/package.json
@@ -8,8 +8,8 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@dytesdk/react-ui-kit": "^1.66.3",
-    "@dytesdk/react-web-core": "^1.36.5",
+    "@dytesdk/react-ui-kit": "^2.0.3",
+    "@dytesdk/react-web-core": "^2.0.7",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },

diff --git a/samples/create-your-own-ui/src/components/meeting-control-bar.tsx b/samples/create-your-own-ui/src/components/meeting-control-bar.tsx
@@ -1,4 +1,4 @@
-import { DyteBreakoutRoomsToggle, DyteCameraToggle, DyteChatToggle, DyteControlbar, DyteControlbarButton, DyteDebuggerToggle, DyteFullscreenToggle, DyteLeaveButton, DyteMicToggle, DyteMoreToggle, DyteMuteAllButton, DyteParticipantsToggle, DytePipToggle, DytePluginsToggle, DytePoll, DytePollsToggle, DyteRecordingToggle, DyteScreenShareToggle, DyteSettingsToggle, DyteStageToggle } from "@dytesdk/react-ui-kit";
+import { DyteBreakoutRoomsToggle, DyteCameraToggle, DyteChatToggle, DyteControlbar, DyteControlbarButton, DyteFullscreenToggle, DyteLeaveButton, DyteMicToggle, DyteMoreToggle, DyteMuteAllButton, DyteParticipantsToggle, DytePipToggle, DytePluginsToggle, DytePoll, DytePollsToggle, DyteRecordingToggle, DyteScreenShareToggle, DyteSettingsToggle, DyteStageToggle } from "@dytesdk/react-ui-kit";
 import { UIConfig, defaultIconPack } from "@dytesdk/ui-kit";
 import DyteClient from "@dytesdk/web-core";
 import { CustomStates, SetStates } from "../types";
@@ -34,7 +34,6 @@ function ControlBarWithCustomUI({
                     <DyteMuteAllButton meeting={meeting} variant="horizontal"/>
                     <DyteBreakoutRoomsToggle meeting={meeting} states={states} variant="horizontal"/>
                     <DyteRecordingToggle meeting={meeting} variant="horizontal"/>
-                    <DyteDebuggerToggle meeting={meeting} states={states} variant="horizontal"/>
                 </div>
             </DyteMoreToggle>
         </div>

diff --git a/samples/default-meeting-ui/package.json b/samples/default-meeting-ui/package.json
@@ -9,8 +9,8 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@dytesdk/react-ui-kit": "^1.54.0",
-    "@dytesdk/react-web-core": "^1.33.4",
+    "@dytesdk/react-ui-kit": "^2.0.3",
+    "@dytesdk/react-web-core": "^2.0.7",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },

diff --git a/samples/facetime/package.json b/samples/facetime/package.json
@@ -8,8 +8,8 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@dytesdk/react-ui-kit": "^1.54.0",
-    "@dytesdk/react-web-core": "^1.33.4",
+    "@dytesdk/react-ui-kit": "^2.0.3",
+    "@dytesdk/react-web-core": "^2.0.7",
     "clsx": "^1.2.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

diff --git a/samples/live-auction/package.json b/samples/live-auction/package.json
@@ -8,8 +8,8 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@dytesdk/react-ui-kit": "^1.55.0",
-    "@dytesdk/react-web-core": "^1.34.1",
+    "@dytesdk/react-ui-kit": "^2.0.3",
+    "@dytesdk/react-web-core": "^2.0.7",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },

diff --git a/samples/screenshare-focused-ui-with-custom-addons/package.json b/samples/screenshare-focused-ui-with-custom-addons/package.json
@@ -8,9 +8,9 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@dytesdk/react-ui-kit": "^2.0.0",
-    "@dytesdk/react-web-core": "^2.0.0",
-    "@dytesdk/video-background-transformer": "2.0.1",
+    "@dytesdk/react-ui-kit": "^2.0.3",
+    "@dytesdk/react-web-core": "^2.0.7",
+    "@dytesdk/video-background-transformer": "^2.0.3",
     "zustand": "^3.5.6",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"

diff --git a/samples/screenshare-focused-ui-with-custom-addons/src/components/EffectsManager.tsx b/samples/screenshare-focused-ui-with-custom-addons/src/components/EffectsManager.tsx
@@ -55,8 +55,15 @@ const EffectsManager = ({
           backgroundTransformerInit.current !== true
         ) {
           backgroundTransformerInit.current = true;
+          /**
+           * To customise DyteVideoBackgroundTransformer configs, please refer to https://www.npmjs.com/package/@dytesdk/video-background-transformer?activeTab=readme.
+           * 
+          */
           const transformer = await DyteVideoBackgroundTransformer.init({
             meeting,
+            segmentationConfig: {
+              pipeline: 'canvas2dCpu', // 'webgl2' | 'canvas2dCpu'
+            },
           });
           MiddlewareHolder.transformer = transformer;
         } else return;

diff --git a/samples/simple-group-call/package.json b/samples/simple-group-call/package.json
@@ -8,8 +8,8 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@dytesdk/react-ui-kit": "^1.54.0",
-    "@dytesdk/react-web-core": "^1.33.4",
+    "@dytesdk/react-ui-kit": "^2.0.3",
+    "@dytesdk/react-web-core": "^2.0.7",
     "clsx": "^1.2.1",
     "good-grid": "^0.3.0",
     "react": "^18.2.0",

diff --git a/samples/simple-ui/package.json b/samples/simple-ui/package.json
@@ -8,8 +8,8 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@dytesdk/react-ui-kit": "^1.56.0",
-    "@dytesdk/react-web-core": "^1.35.0",
+    "@dytesdk/react-ui-kit": "^2.0.3",
+    "@dytesdk/react-web-core": "^2.0.7",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },

diff --git a/samples/with-background-transformer/package.json b/samples/with-background-transformer/package.json
@@ -9,9 +9,9 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@dytesdk/react-ui-kit": "^1.54.0",
-    "@dytesdk/react-web-core": "^1.33.4",
-    "@dytesdk/video-background-transformer": "^1.1.0",
+    "@dytesdk/react-ui-kit": "^2.0.3",
+    "@dytesdk/react-web-core": "^2.0.7",
+    "@dytesdk/video-background-transformer": "^2.0.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },

diff --git a/samples/with-background-transformer/src/App.tsx b/samples/with-background-transformer/src/App.tsx
@@ -31,8 +31,17 @@ function App() {
     ).then(async (meeting: any) => {
       window.meeting = meeting;
 
+      /**
+       * To customise DyteVideoBackgroundTransformer configs, please refer to https://www.npmjs.com/package/@dytesdk/video-background-transformer?activeTab=readme.
+       * 
+      */
       const videoBackgroundTransformer =
-        await DyteVideoBackgroundTransformer.init();
+        await DyteVideoBackgroundTransformer.init({
+          meeting,
+          segmentationConfig: {
+            pipeline: 'canvas2dCpu', // 'webgl2' | 'canvas2dCpu'
+          },
+        });
 
       // The video-background-transformer provides two functionalities
       // 1. Add background blur