|
|
@@ -9,11 +9,13 @@
|
|
|
<span class="live-name">{{ roomData.name }}</span>
|
|
|
</div>
|
|
|
<div>
|
|
|
- <el-button @click="startLive">开启直播</el-button>
|
|
|
- <el-button @click="stopLive">结束直播</el-button>
|
|
|
+ <el-button v-if="userType === 'TEACHER'" @click="startLive">开启直播</el-button>
|
|
|
+ <el-button v-if="userType === 'TEACHER'" @click="stopLive">结束直播</el-button>
|
|
|
+ <el-button v-if="userType === 'TEACHER'" @click="publishStream">推流</el-button>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
+ <!-- 主容器 -->
|
|
|
<div class="live-container">
|
|
|
<!--左侧-->
|
|
|
<div class="live-container-left">
|
|
|
@@ -38,19 +40,30 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="button-group">
|
|
|
- <div>
|
|
|
- <!-- <el-button>群组讨论</el-button>
|
|
|
+ <div class="button-group-left">
|
|
|
+ <span v-if="userType === 'TEACHER'" @click="publishShareStream">
|
|
|
+ <svg-icon icon-class="share" />
|
|
|
+ </span>
|
|
|
+ <span v-if="userType === 'TEACHER'" @click="showDrawSetting">
|
|
|
+ <svg-icon icon-class="draw"></svg-icon>
|
|
|
+ </span>
|
|
|
+ <span v-if="userType === 'TEACHER'">
|
|
|
+ <svg-icon icon-class="push"></svg-icon>
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ <!-- <el-button>群组讨论</el-button>
|
|
|
<el-button>推送课件</el-button> -->
|
|
|
- <el-button @click="showDrawSetting">屏幕画笔</el-button>
|
|
|
+ <!-- <el-button @click="showDrawSetting">屏幕画笔</el-button>
|
|
|
</div>
|
|
|
<div>
|
|
|
<el-button @click="publishShareStream">共享屏幕</el-button>
|
|
|
- </div>
|
|
|
+ </div> -->
|
|
|
+ <div class="button-group-right"></div>
|
|
|
</div>
|
|
|
<div class="live-container-left-chat">
|
|
|
<div class="chat-top">
|
|
|
- <span>聊天窗口</span>
|
|
|
- <a @click="chatBans">群体禁言</a>
|
|
|
+ <span>聊天</span>
|
|
|
+ <a @click="chatBans">禁言</a>
|
|
|
</div>
|
|
|
<div class="chat-window">
|
|
|
<ul class="chat-window-ul">
|
|
|
@@ -175,6 +188,9 @@ export default {
|
|
|
true
|
|
|
);
|
|
|
},
|
|
|
+ beforeDestroy() {
|
|
|
+ // document.querySelector('script[src="https://image.csslcloud.net/js/dpc.js"]').remove();
|
|
|
+ },
|
|
|
methods: {
|
|
|
// 加载直播所需 SDK，加载完成后才能初始化
|
|
|
downloadWebSDK() {
|
|
|
@@ -249,6 +265,17 @@ export default {
|
|
|
common.startLive();
|
|
|
},
|
|
|
|
|
|
+ getLiveStat() {
|
|
|
+ common.getLiveStat({
|
|
|
+ success: data => {
|
|
|
+ console.log('直播开启状态', data);
|
|
|
+ },
|
|
|
+ fail: str => {
|
|
|
+ console.log('直播关闭状态或查询直播失败', str);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
// 推送桌面共享
|
|
|
publishShareStream() {
|
|
|
common.publishShareStream();
|
|
|
@@ -306,6 +333,10 @@ export default {
|
|
|
StudentExitLiveRoom({ task_id: this.task_id, room_user_id }).then(() => {
|
|
|
this.getLiveRoomStudentList();
|
|
|
});
|
|
|
+ },
|
|
|
+
|
|
|
+ publishStream() {
|
|
|
+ common.publishStream('main');
|
|
|
}
|
|
|
}
|
|
|
};
|
|
|
@@ -313,10 +344,18 @@ export default {
|
|
|
|
|
|
<style lang="scss">
|
|
|
@import '~@/styles/mixin.scss';
|
|
|
+$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;
|
|
|
}
|
|
|
@@ -339,27 +378,26 @@ export default {
|
|
|
&-container {
|
|
|
display: flex;
|
|
|
justify-content: left;
|
|
|
- margin-top: 17px;
|
|
|
|
|
|
&-left {
|
|
|
width: 832px;
|
|
|
+ background-color: #fff;
|
|
|
+ border-radius: 8px;
|
|
|
|
|
|
#student {
|
|
|
width: 100%;
|
|
|
height: 468px;
|
|
|
- margin-bottom: 14px;
|
|
|
border: 1px solid #ccc;
|
|
|
position: relative;
|
|
|
- background-color: #3d3938;
|
|
|
+ background-color: $live-bc;
|
|
|
}
|
|
|
|
|
|
#draw-parent {
|
|
|
width: 100%;
|
|
|
height: 468px;
|
|
|
- margin-bottom: 14px;
|
|
|
border: 1px solid #ccc;
|
|
|
position: relative;
|
|
|
- background-color: #3d3938;
|
|
|
+ background-color: $live-bc;
|
|
|
|
|
|
// 设置屏幕画笔
|
|
|
.draw-setting {
|
|
|
@@ -438,14 +476,36 @@ export default {
|
|
|
.button-group {
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
+ height: 48px;
|
|
|
+ background-color: #4d4d4d;
|
|
|
+ padding: 0 15px;
|
|
|
+ border-bottom-right-radius: 5px;
|
|
|
+ border-bottom-left-radius: 5px;
|
|
|
+
|
|
|
+ .svg-icon {
|
|
|
+ font-size: 20px;
|
|
|
+ }
|
|
|
+
|
|
|
+ &-left {
|
|
|
+ > span {
|
|
|
+ display: inline-block;
|
|
|
+ height: 100%;
|
|
|
+ padding: 14px 16px;
|
|
|
+ cursor: pointer;
|
|
|
+
|
|
|
+ &:active,
|
|
|
+ &:hover {
|
|
|
+ background-color: #3d3d3d;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
// 聊天窗口
|
|
|
&-chat {
|
|
|
- margin-top: 15px;
|
|
|
height: 278px;
|
|
|
border: 1px solid #ccc;
|
|
|
- border-radius: 8px;
|
|
|
+ border-bottom-left-radius: 8px;
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
justify-content: space-between;
|
|
|
@@ -455,6 +515,7 @@ export default {
|
|
|
justify-content: space-between;
|
|
|
padding: 15px 15px 10px;
|
|
|
border-bottom: 1px solid #e6e6e6;
|
|
|
+ color: #959595;
|
|
|
}
|
|
|
|
|
|
.chat-window {
|
|
|
@@ -476,18 +537,27 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
+ .chat-speak {
|
|
|
+ padding: 16px;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
|
|
|
&-right {
|
|
|
+ padding: 8px;
|
|
|
+ background-color: #2c2c2c;
|
|
|
+ border-end-end-radius: 8px;
|
|
|
+
|
|
|
#live {
|
|
|
width: 352px;
|
|
|
height: 198px;
|
|
|
+ background-color: $live-bc;
|
|
|
}
|
|
|
|
|
|
.student-list {
|
|
|
width: 100%;
|
|
|
- padding: 24px;
|
|
|
+ padding: 24px 16px;
|
|
|
margin-top: 2px;
|
|
|
height: calc(100% - 200px);
|
|
|
background-color: #2c2c2c;
|
