From 2bc8062a6f6fa84c5a07aa09e707b5ec6f803d50 Mon Sep 17 00:00:00 2001
From: Tristan Yang <yanggc888@163.com>
Date: Fri, 2 Jun 2023 21:24:26 +0800
Subject: [PATCH] fix: is in iframe check

---
 src/components/Voice/index.tsx      | 13 ++++++-------
 src/routes/chat/VoiceChat/index.tsx |  6 ++++++
 src/utils.tsx                       |  2 ++
 src/widget/WidgetContext.tsx        |  6 +++---
 4 files changed, 17 insertions(+), 10 deletions(-)

diff --git a/src/components/Voice/index.tsx b/src/components/Voice/index.tsx
index 21ee8b75..bb2b4226 100644
--- a/src/components/Voice/index.tsx
+++ b/src/components/Voice/index.tsx
@@ -16,13 +16,14 @@ import {
   updateVoicingNetworkQuality
 } from "../../app/slices/voice";
 import { useAppSelector } from "../../app/store";
-import { playAgoraVideo } from "../../utils";
+import { isInIframe, playAgoraVideo } from "../../utils";
 import DMCalling from "./DMCalling";
 import useVoice from "./useVoice";
 
 AgoraRTC.setLogLevel(process.env.NODE_ENV === "development" ? 0 : 4);
 window.VOICE_TRACK_MAP = window.VOICE_TRACK_MAP ?? {};
 window.VIDEO_TRACK_MAP = window.VIDEO_TRACK_MAP ?? {};
+const inIframe = isInIframe();
 // let tmpUids: number[] = [];
 const Voice = () => {
   const { from, to, voiceList, loginUid, voicingInfo } = useAppSelector((store) => {
@@ -174,9 +175,9 @@ const Voice = () => {
         return (evt.returnValue = "");
       }
     };
-    window.addEventListener("beforeunload", handlePageUnload, { capture: true });
-    if (!window.VOICE_CLIENT) {
+    if (!window.VOICE_CLIENT && !inIframe) {
       initializeAgoraClient();
+      window.addEventListener("beforeunload", handlePageUnload, { capture: true });
     }
 
     return () => {
@@ -185,6 +186,7 @@ const Voice = () => {
   }, [voicingInfo]);
 
   useEffect(() => {
+    if (inIframe) return;
     // 有人呼叫我
     const callMeList = voiceList.filter((item) => item.context == "dm" && item.id == loginUid);
     if (callMeList.length) {
@@ -200,10 +202,7 @@ const Voice = () => {
         });
       }
     }
-    // else {
-    //     dispatch(updateCallInfo({ from: 0, to: 0, calling: false }));
-    // }
-  }, [voiceList, loginUid]);
+  }, [voiceList, loginUid, inIframe]);
   // return <DMCalling uid={1} sendByMe={calling !== loginUid} />;
   if (from !== 0) return <DMCalling from={from} to={to} />;
   return null;
diff --git a/src/routes/chat/VoiceChat/index.tsx b/src/routes/chat/VoiceChat/index.tsx
index 361f4c98..49ef741c 100644
--- a/src/routes/chat/VoiceChat/index.tsx
+++ b/src/routes/chat/VoiceChat/index.tsx
@@ -1,6 +1,7 @@
 // import React from 'react';
 // import Tippy from '@tippyjs/react';
 // import { useState } from 'react';
+import { toast } from "react-hot-toast";
 import { useTranslation } from "react-i18next";
 import { useDispatch } from "react-redux";
 
@@ -11,6 +12,7 @@ import { useAppSelector } from "@/app/store";
 import { ChatContext } from "@/types/common";
 import Tooltip from "@/components/Tooltip";
 import { useVoice } from "@/components/Voice";
+import { isInIframe } from "@/utils";
 import IconHeadphone from "@/assets/icons/headphone.svg";
 
 type Props = {
@@ -43,6 +45,10 @@ const VoiceChat = ({ id, context = "channel" }: Props) => {
       alert("You have joined another channel, please leave first!");
       return;
     }
+    if (isInIframe()) {
+      toast.error("Voice is not supported in iframe");
+      return;
+    }
     joinVoice();
     const data = {
       id,
diff --git a/src/utils.tsx b/src/utils.tsx
index 53b3bdd6..40b26cc2 100644
--- a/src/utils.tsx
+++ b/src/utils.tsx
@@ -417,3 +417,5 @@ export const transformInviteLink = (link: string) => {
 
   return tmpLink;
 };
+
+export const isInIframe = () => window.location !== window.parent.location;
diff --git a/src/widget/WidgetContext.tsx b/src/widget/WidgetContext.tsx
index 45f51a68..53444d7d 100644
--- a/src/widget/WidgetContext.tsx
+++ b/src/widget/WidgetContext.tsx
@@ -2,18 +2,18 @@ import { createContext, ReactNode, useContext } from "react";
 
 import { useGetLoginConfigQuery, useGetServerQuery } from "../app/services/server";
 import { useAppSelector } from "../app/store";
-import { getContrastColor } from "../utils";
+import { getContrastColor, isInIframe } from "../utils";
 
 const query = new URLSearchParams(location.search);
 const welcome = decodeURIComponent(query.get("welcome") || "");
 const color = decodeURIComponent(query.get("themeColor") || "#1fe1f9");
 const from = decodeURIComponent(query.get("from") || "widget.link");
 const fgColor = getContrastColor(color);
-// 判断是否是iframe上下文
-const embed = window.location !== window.parent.location;
+const embed = isInIframe();
 const WidgetContext = createContext({
   color,
   fgColor,
+  // 判断是否是iframe上下文
   embed,
   from,
   loading: true,