|
|
@@ -2,21 +2,26 @@
|
|
|
<div class="live">
|
|
|
<!--顶部-->
|
|
|
<div class="live-top">
|
|
|
- <div class="live-page-title">直播间</div>
|
|
|
- <div class="live-desc">{{ roomData.desc }}</div>
|
|
|
- <div class="live-info">
|
|
|
- <div>
|
|
|
- <span class="live-name">{{ roomData.name }}</span>
|
|
|
- </div>
|
|
|
+ <div class="live-title">
|
|
|
+ <div class="live-title-name">{{ roomInfo.cs_item_name }} {{ roomInfo.task_name }}</div>
|
|
|
<div>
|
|
|
<!-- <el-button @click="playAudio">开启本地流声音</el-button> -->
|
|
|
<template v-if="userType === 'TEACHER'">
|
|
|
<el-button v-if="!liveStat" @click="startLive">开启直播</el-button>
|
|
|
- <el-button v-if="liveStat" @click="closeLiveRoom">结束直播</el-button>
|
|
|
+ <el-button v-if="liveStat" icon="el-icon-switch-button" @click="closeLiveRoom">
|
|
|
+ 结束直播
|
|
|
+ </el-button>
|
|
|
<el-button v-if="liveStat" @click="publishStream">推流</el-button>
|
|
|
</template>
|
|
|
</div>
|
|
|
</div>
|
|
|
+ <div class="live-course-name">{{ roomInfo.course_name }}</div>
|
|
|
+ <div class="live-teacher">
|
|
|
+ <span class="live-teacher-name">
|
|
|
+ <svg-icon icon-class="person" />{{ roomInfo.teacher_name }}
|
|
|
+ </span>
|
|
|
+ <span><svg-icon icon-class="people" />{{ roomInfo.student_count }}</span>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
<!-- 主容器 -->
|
|
|
<div class="live-container">
|
|
|
@@ -90,16 +95,25 @@
|
|
|
placeholder="输入发言"
|
|
|
maxlength="400"
|
|
|
@keydown.enter.native="sendMsg"
|
|
|
- ></el-input>
|
|
|
+ >
|
|
|
+ <el-button slot="append" @click="sendMsg">发送</el-button>
|
|
|
+ </el-input>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<!-- 右侧 -->
|
|
|
<div class="live-container-right">
|
|
|
- <div class="live-teacher-lens">
|
|
|
+ <div class="live-teacher-lens" @mouseover="liveWrapperOver" @mouseout="liveWrapperOut">
|
|
|
<div id="live"></div>
|
|
|
+ <div v-show="liveMenuShow" class="live-wrapper">
|
|
|
+ <div>
|
|
|
+ {{ roomInfo.teacher_name }}
|
|
|
+ </div>
|
|
|
+ <div></div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
<div class="student-list">
|
|
|
+ <div class="student-list-title">学生列表</div>
|
|
|
<ul>
|
|
|
<li v-for="item in student_list" :key="item.room_user_id">
|
|
|
<div class="student-list-left">
|
|
|
@@ -204,6 +218,15 @@ export default {
|
|
|
allow_audio: true,
|
|
|
allow_speak: true
|
|
|
},
|
|
|
+ roomInfo: {
|
|
|
+ room_id: '',
|
|
|
+ video_mode: 1,
|
|
|
+ task_name: '',
|
|
|
+ cs_item_name: '',
|
|
|
+ course_name: '',
|
|
|
+ teacher_name: '',
|
|
|
+ student_count: 0
|
|
|
+ },
|
|
|
loadedNumber: 0,
|
|
|
speakData: {},
|
|
|
roomContext: {},
|
|
|
@@ -215,7 +238,8 @@ export default {
|
|
|
// 直播间学员列表
|
|
|
student_list: [],
|
|
|
// 直播状态
|
|
|
- liveStat: false
|
|
|
+ liveStat: false,
|
|
|
+ liveMenuShow: false
|
|
|
};
|
|
|
},
|
|
|
computed: {
|
|
|
@@ -225,8 +249,8 @@ export default {
|
|
|
}
|
|
|
},
|
|
|
watch: {
|
|
|
- loadedNumber(newValue) {
|
|
|
- if (newValue === 5) {
|
|
|
+ loadedNumber(newVal) {
|
|
|
+ if (newVal === 5) {
|
|
|
this.initSDK();
|
|
|
this.$loading().close();
|
|
|
}
|
|
|
@@ -235,6 +259,7 @@ export default {
|
|
|
created() {
|
|
|
this.downloadWebSDK();
|
|
|
this.getLiveRoomStudentList();
|
|
|
+ this.getLiveRoomInfo();
|
|
|
},
|
|
|
mounted() {
|
|
|
document.addEventListener(
|
|
|
@@ -262,6 +287,14 @@ export default {
|
|
|
this.getCurMaterialSent();
|
|
|
}
|
|
|
},
|
|
|
+ beforeDestroy() {
|
|
|
+ // 清除所有定时器
|
|
|
+ // let end = setInterval(() => {}, 1000);
|
|
|
+ // for (let i = 1; i <= end; i++) {
|
|
|
+ // clearInterval(i);
|
|
|
+ // }
|
|
|
+ CloseLiveRoom({ task_id: this.task_id });
|
|
|
+ },
|
|
|
methods: {
|
|
|
// 加载直播所需 SDK，加载完成后才能初始化
|
|
|
downloadWebSDK() {
|
|
|
@@ -329,10 +362,34 @@ export default {
|
|
|
this.getLiveStat();
|
|
|
},
|
|
|
|
|
|
+ getLiveRoomInfo() {
|
|
|
+ GetLiveRoomInfo({ task_id: this.task_id }).then(
|
|
|
+ ({
|
|
|
+ room_id,
|
|
|
+ video_mode,
|
|
|
+ task_name,
|
|
|
+ cs_item_name,
|
|
|
+ course_name,
|
|
|
+ teacher_name,
|
|
|
+ student_count
|
|
|
+ }) => {
|
|
|
+ this.roomInfo = {
|
|
|
+ room_id,
|
|
|
+ video_mode,
|
|
|
+ task_name,
|
|
|
+ cs_item_name,
|
|
|
+ course_name,
|
|
|
+ teacher_name,
|
|
|
+ student_count
|
|
|
+ };
|
|
|
+ }
|
|
|
+ );
|
|
|
+ },
|
|
|
+
|
|
|
closeLiveRoom() {
|
|
|
CloseLiveRoom({ task_id: this.task_id }).then(() => {
|
|
|
- this.$message.success('关闭直播成功');
|
|
|
this.$router.push('/');
|
|
|
+ this.$message.success('关闭直播成功');
|
|
|
});
|
|
|
},
|
|
|
|
|
|
@@ -411,7 +468,7 @@ export default {
|
|
|
|
|
|
chatBans() {
|
|
|
common.roomUpdate({
|
|
|
- allow_chat: this.roomData.allow_chat,
|
|
|
+ allow_chat: !this.roomData.allow_chat,
|
|
|
roomUpdateSuccess: function (data) {
|
|
|
console.log(data, '房间模板配置更新请求成功！');
|
|
|
},
|
|
|
@@ -472,6 +529,14 @@ export default {
|
|
|
this.dialogVisibleComplete = false;
|
|
|
},
|
|
|
|
|
|
+ liveWrapperOver() {
|
|
|
+ this.liveMenuShow = true;
|
|
|
+ },
|
|
|
+
|
|
|
+ liveWrapperOut() {
|
|
|
+ this.liveMenuShow = false;
|
|
|
+ },
|
|
|
+
|
|
|
getCurMaterialSent() {
|
|
|
const timer = setInterval(() => {
|
|
|
GetCurMaterialSent({ task_id: this.task_id })
|
|
|
@@ -501,37 +566,47 @@ $live-bc: #3d3938;
|
|
|
.live {
|
|
|
@include container;
|
|
|
|
|
|
+ // 顶部
|
|
|
&-top {
|
|
|
background-color: #fff;
|
|
|
padding: 24px 32px;
|
|
|
border-top-left-radius: 8px;
|
|
|
border-top-right-radius: 8px;
|
|
|
- }
|
|
|
|
|
|
- &-page-title {
|
|
|
- font-size: 12px;
|
|
|
- }
|
|
|
+ .live-title {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
|
|
|
- &-desc {
|
|
|
- margin: 17px 0 8px;
|
|
|
- }
|
|
|
+ &-name {
|
|
|
+ font-size: 22px;
|
|
|
+ }
|
|
|
|
|
|
- &-info {
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
+ .el-button {
|
|
|
+ border-radius: 4px;
|
|
|
+ padding: 7px 12px;
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
- .el-button {
|
|
|
- border-radius: 4px;
|
|
|
- padding: 7px 12px;
|
|
|
+ .live-course-name {
|
|
|
+ font-size: 14px;
|
|
|
+ color: #737373;
|
|
|
+ line-height: 30px;
|
|
|
}
|
|
|
- }
|
|
|
|
|
|
- &-name {
|
|
|
- opacity: 0.4;
|
|
|
- line-height: 30px;
|
|
|
+ .live-teacher {
|
|
|
+ margin-top: 12px;
|
|
|
+
|
|
|
+ .svg-icon {
|
|
|
+ margin-right: 8px;
|
|
|
+ }
|
|
|
+
|
|
|
+ &-name {
|
|
|
+ margin-right: 60px;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
- // 主要容器
|
|
|
+ // 主容器
|
|
|
&-container {
|
|
|
display: flex;
|
|
|
justify-content: left;
|
|
|
@@ -733,10 +808,27 @@ $live-bc: #3d3938;
|
|
|
background-color: #2c2c2c;
|
|
|
border-end-end-radius: 8px;
|
|
|
|
|
|
- #live {
|
|
|
- width: 352px;
|
|
|
- height: 198px;
|
|
|
- background-color: $live-bc;
|
|
|
+ .live-teacher-lens {
|
|
|
+ position: relative;
|
|
|
+ overflow: hidden;
|
|
|
+
|
|
|
+ #live {
|
|
|
+ width: 352px;
|
|
|
+ height: 198px;
|
|
|
+ background-color: $live-bc;
|
|
|
+ }
|
|
|
+
|
|
|
+ .live-wrapper {
|
|
|
+ position: absolute;
|
|
|
+ bottom: 0;
|
|
|
+ height: 40px;
|
|
|
+ width: 100%;
|
|
|
+ background-color: #000;
|
|
|
+ opacity: 0.7;
|
|
|
+ color: #fff;
|
|
|
+ line-height: 40px;
|
|
|
+ padding: 0 16px;
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
.student-list {
|
|
|
@@ -748,6 +840,10 @@ $live-bc: #3d3938;
|
|
|
font-size: 14px;
|
|
|
color: #fff;
|
|
|
|
|
|
+ &-title {
|
|
|
+ margin-bottom: 16px;
|
|
|
+ }
|
|
|
+
|
|
|
li {
|
|
|
display: flex;
|
|
|
margin-bottom: 16px;
|
