From d0af75808b01848e4336ced282c39e64c743a486 Mon Sep 17 00:00:00 2001
From: xsx <825657193@qq.com>
Date: Mon, 10 Jun 2024 22:30:48 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20web=E7=AB=AF=E5=8D=95=E4=BA=BA=E8=A7=86?=
 =?UTF-8?q?=E9=A2=91=E5=91=BD=E5=90=8D=E4=BB=A5=E5=8F=8A=E7=9B=AE=E5=BD=95?=
 =?UTF-8?q?=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 im-ui/src/components/chat/ChatBox.vue         | 10 +++----
 .../RtcPrivateAcceptor.vue}                   |  4 +--
 .../RtcPrivateVideo.vue}                      | 30 +++++++++----------
 im-ui/src/view/Home.vue                       | 16 +++++-----
 4 files changed, 30 insertions(+), 30 deletions(-)
 rename im-ui/src/components/{chat/ChatVideoAcceptor.vue => rtc/RtcPrivateAcceptor.vue} (98%)
 rename im-ui/src/components/{chat/ChatPrivateVideo.vue => rtc/RtcPrivateVideo.vue} (95%)

diff --git a/im-ui/src/components/chat/ChatBox.vue b/im-ui/src/components/chat/ChatBox.vue
index 6e4a766..43f4c1c 100644
--- a/im-ui/src/components/chat/ChatBox.vue
+++ b/im-ui/src/components/chat/ChatBox.vue
@@ -47,10 +47,10 @@
 								<div title="发送语音" class="el-icon-microphone" @click="showVoiceBox()">
 								</div>
 								<div title="语音通话" v-show="chat.type == 'PRIVATE'" class="el-icon-phone-outline"
-									@click="showChatVideo('voice')">
+									@click="showPrivateVideo('voice')">
 								</div>
 								<div title="视频通话" v-show="chat.type == 'PRIVATE'" class="el-icon-video-camera"
-									@click="showChatVideo('video')">
+									@click="showPrivateVideo('video')">
 								</div>
 								<div title="聊天记录" class="el-icon-chat-dot-round" @click="showHistoryBox()"></div>
 							</div>
@@ -147,9 +147,9 @@ export default {
 		},
 		onCall(type){
 			if(type == this.$enums.MESSAGE_TYPE.RT_VOICE){
-				this.showChatVideo('voice');
+				this.showPrivateVideo('voice');
 			}else if(type == this.$enums.MESSAGE_TYPE.RT_VIDEO){
-				this.showChatVideo('video');
+				this.showPrivateVideo('video');
 			}
 		},
 		onKeyDown() {
@@ -447,7 +447,7 @@ export default {
 		closeVoiceBox() {
 			this.showVoice = false;
 		},
-		showChatVideo(mode) {
+		showPrivateVideo(mode) {
 			let rtcInfo = {
 				mode: mode,
 				isHost: true,
diff --git a/im-ui/src/components/chat/ChatVideoAcceptor.vue b/im-ui/src/components/rtc/RtcPrivateAcceptor.vue
similarity index 98%
rename from im-ui/src/components/chat/ChatVideoAcceptor.vue
rename to im-ui/src/components/rtc/RtcPrivateAcceptor.vue
index 6216e23..193bc2f 100644
--- a/im-ui/src/components/chat/ChatVideoAcceptor.vue
+++ b/im-ui/src/components/rtc/RtcPrivateAcceptor.vue
@@ -1,5 +1,5 @@
 <template>
-	<div v-show="isShow" class="chat-video-acceptor">
+	<div v-show="isShow" class="rtc-private-acceptor">
 		<head-image :id="rtcInfo.friend.id" :name="rtcInfo.friend.nickName" :url="rtcInfo.friend.headImage" :size="100"></head-image>
 		<div class="acceptor-text">
 			{{tip}}
@@ -191,7 +191,7 @@
 </script>
 
 <style scoped lang="scss">
-	.chat-video-acceptor {
+	.rtc-private-acceptor {
 		position: absolute;
 		display: flex;
 		flex-direction: column;
diff --git a/im-ui/src/components/chat/ChatPrivateVideo.vue b/im-ui/src/components/rtc/RtcPrivateVideo.vue
similarity index 95%
rename from im-ui/src/components/chat/ChatPrivateVideo.vue
rename to im-ui/src/components/rtc/RtcPrivateVideo.vue
index cdaecb2..4a96d38 100644
--- a/im-ui/src/components/chat/ChatPrivateVideo.vue
+++ b/im-ui/src/components/rtc/RtcPrivateVideo.vue
@@ -1,27 +1,27 @@
 <template>
 	<el-dialog v-dialogDrag :title="title" top="5vh" :close-on-click-modal="false" :close-on-press-escape="false"
 		:visible="isShow" width="50%" height="70%" :before-close="handleClose">
-		<div class="chat-video">
-			<div v-show="rtcInfo.mode=='video'" class="chat-video-box">
-				<div class="chat-video-friend" v-loading="loading" element-loading-text="等待对方接听..." 
+		<div class="rtc-private-video">
+			<div v-show="rtcInfo.mode=='video'" class="rtc-video-box">
+				<div class="rtc-video-friend" v-loading="loading" element-loading-text="等待对方接听..." 
 					element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.3)">
 					<head-image class="friend-head-image" :id="rtcInfo.friend.id" :size="80" :name="rtcInfo.friend.nickName"
 						:url="rtcInfo.friend.headImage">
 					</head-image>
 					<video ref="friendVideo" autoplay=""></video>
 				</div>
-				<div class="chat-video-mine">
+				<div class="rtc-video-mine">
 					<video ref="mineVideo" autoplay=""></video>
 				</div>
 			</div>
-			<div v-show="rtcInfo.mode=='voice'" class="chat-voice-box" v-loading="loading" element-loading-text="等待对方接听..."
+			<div v-show="rtcInfo.mode=='voice'" class="rtc-voice-box" v-loading="loading" element-loading-text="等待对方接听..."
 				element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.3)">
 				<head-image class="friend-head-image" :id="rtcInfo.friend.id" :size="200" :name="rtcInfo.friend.nickName"
 					:url="rtcInfo.friend.headImage">
-					<div class="chat-voice-name">{{rtcInfo.friend.nickName}}</div>
+					<div class="rtc-voice-name">{{rtcInfo.friend.nickName}}</div>
 				</head-image>
 			</div>
-			<div class="chat-video-controllbar">
+			<div class="rtc-control-bar">
 				<div v-show="isWaiting" title="取消呼叫" class="icon iconfont icon-phone-reject reject" style="color: red;"
 					@click="cancel()"></div>
 				<div v-show="isAccepted" title="挂断" class="icon iconfont icon-phone-reject reject" style="color: red;"
@@ -36,7 +36,7 @@
 	import HeadImage from '../common/HeadImage.vue';
 
 	export default {
-		name: 'chatVideo',
+		name: 'rtcPrivateVideo',
 		components: {
 			HeadImage
 		},
@@ -405,7 +405,7 @@
 </script>
 
 <style lang="scss">
-	.chat-video {
+	.rtc-private-video {
 		position: relative;
 
 		.el-loading-text {
@@ -418,12 +418,12 @@
 			font-size: 30px !important;
 		}
 		
-		.chat-video-box {
+		.rtc-video-box {
 			position: relative;
 			border: #4880b9 solid 1px;
 			background-color: #eeeeee;
 
-			.chat-video-friend {
+			.rtc-video-friend {
 				height: 70vh;
 
 				.friend-head-image {
@@ -438,7 +438,7 @@
 				}
 			}
 
-			.chat-video-mine {
+			.rtc-video-mine {
 				position: absolute;
 				z-index: 99999;
 				width: 25vh;
@@ -455,7 +455,7 @@
 			}
 		}
 
-		.chat-voice-box {
+		.rtc-voice-box {
 			position: relative;
 			display: flex;
 			justify-content: center;
@@ -465,14 +465,14 @@
 			padding-top: 10vh;
 			background-color: aliceblue;
 
-			.chat-voice-name {
+			.rtc-voice-name {
 				text-align: center;
 				font-size: 22px;
 				font-weight: 600;
 			}
 		}
 
-		.chat-video-controllbar {
+		.rtc-control-bar {
 			display: flex;
 			justify-content: space-around;
 			padding: 10px;
diff --git a/im-ui/src/view/Home.vue b/im-ui/src/view/Home.vue
index 1ea3f07..0ac36cb 100644
--- a/im-ui/src/view/Home.vue
+++ b/im-ui/src/view/Home.vue
@@ -40,8 +40,8 @@
 			@close="$store.commit('closeUserInfoBox')"></user-info>
 		<full-image :visible="uiStore.fullImage.show" :url="uiStore.fullImage.url"
 			@close="$store.commit('closeFullImageBox')"></full-image>
-		<chat-private-video ref="privateVideo"></chat-private-video>
-		<chat-video-acceptor ref="videoAcceptor"></chat-video-acceptor>
+		<rtc-private-video ref="rtcPrivateVideo"></rtc-private-video>
+		<rtc-private-acceptor ref="rtcPrivateAcceptor"></rtc-private-acceptor>
 	</el-container>
 </template>
 
@@ -50,8 +50,8 @@
 	import Setting from '../components/setting/Setting.vue';
 	import UserInfo from '../components/common/UserInfo.vue';
 	import FullImage from '../components/common/FullImage.vue';
-	import ChatPrivateVideo from '../components/chat/ChatPrivateVideo.vue';
-	import ChatVideoAcceptor from '../components/chat/ChatVideoAcceptor.vue';
+	import RtcPrivateVideo from '../components/rtc/RtcPrivateVideo.vue';
+	import RtcPrivateAcceptor from '../components/rtc/RtcPrivateAcceptor.vue';
 
 	export default {
 		components: {
@@ -59,8 +59,8 @@
 			Setting,
 			UserInfo,
 			FullImage,
-			ChatPrivateVideo,
-			ChatVideoAcceptor
+			RtcPrivateVideo,
+			RtcPrivateAcceptor
 		},
 		data() {
 			return {
@@ -162,9 +162,9 @@
 						msg.type == this.$enums.MESSAGE_TYPE.RTC_CALL_VIDEO ||
 						rtcInfo.state == this.$enums.RTC_STATE.FREE ||
 						rtcInfo.state == this.$enums.RTC_STATE.WAIT_ACCEPT) {
-						this.$refs.videoAcceptor.onRTCMessage(msg,friend)
+						this.$refs.rtcPrivateAcceptor.onRTCMessage(msg,friend)
 					} else {
-						this.$refs.privateVideo.onRTCMessage(msg)
+						this.$refs.rtcPrivateVideo.onRTCMessage(msg)
 					}
 					return;
 				}