fix npm build window ref

TEN-framework · Feb 7, 2025 · 5dba3b0 · 5dba3b0
1 parent 4947097
commit 5dba3b0
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 8 deletions.
diff --git a/playground/src/app/page.tsx b/playground/src/app/page.tsx
@@ -9,7 +9,7 @@ import Action from "@/components/Layout/Action";
 import { cn } from "@/lib/utils";
 import Avatar from "@/components/Agent/AvatarTrulience";
 import React from "react";
-import { IRtcUser, rtcManager } from "@/manager";
+import { IRtcUser } from "@/manager";
 
 const DynamicRTCCard = dynamic(() => import("@/components/Dynamic/RTCCard"), {
   ssr: false,
@@ -18,6 +18,7 @@ const DynamicChatCard = dynamic(() => import("@/components/Chat/ChatCard"), {
   ssr: false,
 });
 
+
 export default function Home() {
   const mobileActiveTab = useAppSelector(
     (state) => state.global.mobileActiveTab
@@ -28,13 +29,22 @@ export default function Home() {
   const avatarInLargeWindow = process.env.NEXT_PUBLIC_AVATAR_DESKTOP_LARGE_WINDOW?.toLowerCase() === "true";
  const [remoteuser, setRemoteUser] = React.useState<IRtcUser>()
 
-  React.useEffect(() => {
-    rtcManager.on("remoteUserChanged", onRemoteUserChanged) 
 
-   }, [])
+ React.useEffect(() => {
+  // Only runs on the client
+  const { rtcManager } = require("../manager/rtc/rtc"); 
+  rtcManager.on("remoteUserChanged", onRemoteUserChanged);
+
+  return () => {
+    rtcManager.off("remoteUserChanged", onRemoteUserChanged);
+  };
+}, []);
+
+  //React.useEffect(() => {
+  //  rtcManager.on("remoteUserChanged", onRemoteUserChanged) 
+  // }, [])
 
   const onRemoteUserChanged = (user: IRtcUser) => {
-    console.log("[rtc] onRemoteUserChanged", user)
     if (useTrulienceAvatar) {
       user.audioTrack?.stop();
     }

diff --git a/playground/src/lib/utils.ts b/playground/src/lib/utils.ts
@@ -7,7 +7,6 @@ export function cn(...inputs: ClassValue[]) {
 }
 
 export function useIsMobileScreen(breakpoint?: string) {
-  /*
   const [isMobileScreen, setIsMobileScreen] = React.useState(false);
 
   React.useEffect(() => {
@@ -20,6 +19,4 @@ export function useIsMobileScreen(breakpoint?: string) {
   }, [breakpoint]);
 
   return isMobileScreen;
-  */
- return false;
 }