Browse Source

feat: web端单人视频命名以及目录修改

master
xsx 2 years ago
parent
commit
d0af75808b
  1. 10
      im-ui/src/components/chat/ChatBox.vue
  2. 4
      im-ui/src/components/rtc/RtcPrivateAcceptor.vue
  3. 30
      im-ui/src/components/rtc/RtcPrivateVideo.vue
  4. 16
      im-ui/src/view/Home.vue

10
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,

4
im-ui/src/components/chat/ChatVideoAcceptor.vue → 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;

30
im-ui/src/components/chat/ChatPrivateVideo.vue → 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;

16
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;
}

Loading…
Cancel
Save