提交 486ad978 authored 作者: 王鹏飞's avatar 王鹏飞

对接直播中台

上级 46f69e2a
<template> <template>
<ul class="chapter-list"> <ul class="chapter-list">
<li class="chapter-item" v-for="item in chapters" :key="item.id"> <li class="chapter-item" v-for="item in chapters" :key="item.id">
<h4>{{item.name}}</h4> <h4>{{ item.name }}</h4>
<ul class="chapter-item-list"> <ul class="chapter-item-list">
<li <li
v-for="subItem in item.children" v-for="subItem in item.children"
:key="subItem.id" :key="subItem.id"
@click="onClick(subItem)" @click="onClick(subItem)"
:class="{'is-active': subItem.id === (active ? active.id : '')}" :class="{ 'is-active': subItem.id === (active ? active.id : '') }"
> >
<span class="chapter-item-list__name">{{subItem.name | showName(subItem)}}</span> <span class="chapter-item-list__name">{{ subItem.name | showName(subItem) }}</span>
<i class="el-icon" :class="genIconClass(subItem.type)"></i> <i class="el-icon" :class="genIconClass(subItem.type)"></i>
</li> </li>
</ul> </ul>
...@@ -60,6 +60,11 @@ export default { ...@@ -60,6 +60,11 @@ export default {
if (data.type === 1) { if (data.type === 1) {
return return
} }
// zoom直播
if (data.type === 8) {
window.open(data.live.record_url || data.live.join_url)
return
}
// 课程大作业 // 课程大作业
if (data.id === 'course_work' && !this.data.survey) { if (data.id === 'course_work' && !this.data.survey) {
this.$message('请先填写教学评估,然后完成大作业。') this.$message('请先填写教学评估,然后完成大作业。')
...@@ -71,10 +76,7 @@ export default { ...@@ -71,10 +76,7 @@ export default {
this.$router.push({ name: 'survey', params: { sid, cid } }) this.$router.push({ name: 'survey', params: { sid, cid } })
return return
} }
this.$router.push({ this.$router.push({ name: 'viewerCourseChapter', params: { id: data.id } })
name: 'viewerCourseChapter',
params: { id: data.id }
})
} }
} }
} }
......
<template> <template>
<component <component :is="currentCompoent" :chapter="chapter" v-bind="$attrs" v-on="$listeners" v-if="chapter" :key="pid" />
:is="currentCompoent"
:chapter="chapter"
v-bind="$attrs"
v-on="$listeners"
v-if="chapter"
:key="pid"
/>
</template> </template>
<script> <script>
...@@ -46,7 +39,8 @@ export default { ...@@ -46,7 +39,8 @@ export default {
2: 'ChapterPlayer', // 视频 2: 'ChapterPlayer', // 视频
3: 'ChapterWork', // 作业 3: 'ChapterWork', // 作业
4: 'ChapterRead', // 资料 4: 'ChapterRead', // 资料
5: 'ChapterLive', // 直播 5: 'ChapterLive', // CC直播
8: 'ChapterLive', // CC直播
9: 'ChapterExam', // 考试 9: 'ChapterExam', // 考试
99: 'CourseWork', // 课程大作业 99: 'CourseWork', // 课程大作业
100: 'CourseRead', // 课程资料 100: 'CourseRead', // 课程资料
......
<template> <template>
<div style="width:100%;height:100%;"> <div style="width: 100%; height: 100%">
<div class="course-viewer-content" v-if="isLiveEnd && !hasRecord"> <div class="course-viewer-content" v-if="isLiveEnd && !hasRecord">
<div class="empty">直播已结束</div> <div class="empty">直播已结束</div>
</div> </div>
...@@ -42,7 +42,7 @@ export default { ...@@ -42,7 +42,7 @@ export default {
return this.user.personal_name || '匿名' return this.user.personal_name || '匿名'
}, },
live() { live() {
const live = this.chapter.live const live = this.chapter.live || {}
live.live_status = parseInt(live.live_status) live.live_status = parseInt(live.live_status)
return live return live
}, },
...@@ -56,15 +56,28 @@ export default { ...@@ -56,15 +56,28 @@ export default {
return this.live.enable_record === 1 && this.live.record_url return this.live.enable_record === 1 && this.live.record_url
}, },
iframeUrl() { iframeUrl() {
if (this.live.type === 5) {
return this.ccUrl
}
if (this.live.type === 8) {
return this.zoomUrl
}
},
// cc直播
ccUrl() {
const live = this.live const live = this.live
if (this.isLiveEnd && this.hasRecord) { if (this.isLiveEnd && this.hasRecord) {
// 查看回放 // 查看回放
return live.record_url return live.record_url
} else { } else {
// 直播 // 直播
live.viewer_name = live.viewer_name || this.nickName live.user_name = live.user_name || this.nickName
return `https://view.csslcloud.net/api/view/index?roomid=${live.room_id}&userid=${live.user_id}&autoLogin=true&viewername=${live.viewer_name}&viewertoken=${live.viewer_token}` return `https://view.csslcloud.net/api/view/index?roomid=${live.room_id}&userid=${live.account_id}&autoLogin=true&viewername=${live.user_name}&viewertoken=${live.play_pass}`
} }
},
// zoom直播
zoomUrl() {
return this.live.record_url || this.live.join_url
} }
} }
} }
......
...@@ -132,7 +132,7 @@ export default { ...@@ -132,7 +132,7 @@ export default {
}, },
// 直播 // 直播
isLive() { isLive() {
return this.activeChapter ? this.activeChapter.type === 5 : false return this.activeChapter ? [5, 8].includes(this.activeChapter.type) : false
}, },
// 课程考试 // 课程考试
isCourseExam() { isCourseExam() {
......
...@@ -190,7 +190,11 @@ export default { ...@@ -190,7 +190,11 @@ export default {
}, },
/* 直接进直播 */ /* 直接进直播 */
goLive () { goLive () {
this.$router.push({ name: 'viewerCourseChapter', params: { sid: this.newLiveMsg.semester_id, cid: this.newLiveMsg.course_id, id: this.newLiveMsg.chapter_id } }) if (this.newLiveMsg.live.type === 8) {
window.open(this.newLiveMsg.live.record_url || this.newLiveMsg.live.join_url)
} else {
this.$router.push({ name: 'viewerCourseChapter', params: { sid: this.newLiveMsg.semester_id, cid: this.newLiveMsg.course_id, id: this.newLiveMsg.chapter_id } })
}
}, },
// 获取最新直播 // 获取最新直播
getLatestLive() { getLatestLive() {
......
...@@ -509,7 +509,7 @@ export default { ...@@ -509,7 +509,7 @@ export default {
if (type === 1) { if (type === 1) {
return return
} }
// 直播 // cc直播
if (type === 5) { if (type === 5) {
const live = data.live const live = data.live
const status = live.live_status const status = live.live_status
...@@ -531,6 +531,11 @@ export default { ...@@ -531,6 +531,11 @@ export default {
return return
} }
} }
// zoom直播
if (type === 8) {
window.open(data.live.record_url || data.live.join_url)
return
}
this.$router.push({ name: 'viewerCourseChapter', params: { sid, cid, id: data.id } }) this.$router.push({ name: 'viewerCourseChapter', params: { sid, cid, id: data.id } })
}, },
/** /**
......
...@@ -4,36 +4,29 @@ ...@@ -4,36 +4,29 @@
<img class="logo" src="../../assets/images/logo-header.png" /> <img class="logo" src="../../assets/images/logo-header.png" />
<div class="user"> <div class="user">
<div class="nickname">{{ nickName }}</div> <div class="nickname">{{ nickName }}</div>
<div class="logout" @click="logout">{{$t('components.learnSysLayout.sideBar.outLogin')}}</div> <div class="logout" @click="logout">{{ $t('components.learnSysLayout.sideBar.outLogin') }}</div>
</div> </div>
</div> </div>
<div class="hint" v-if="latest" @click="onClick(latest.live)"> <div class="hint" v-if="latest" @click="onClick(latest.live)">
<div class="left"> <div class="left">
<div class="left-1">{{$t('live.liveReminder')}}</div> <div class="left-1">{{ $t('live.liveReminder') }}</div>
<div <div class="left-2">
class="left-2" {{ latest.course_name }}{{ $t('live.startTime', { time: latest.live.start_time }) }}
>{{latest.course_name}}{{$t('live.startTime', { time: latest.live.start_time })}}</div> </div>
</div> </div>
<div class="right">{{$t('live.goLive')}}</div> <div class="right">{{ $t('live.goLive') }}</div>
</div> </div>
<div class="tips">{{$t('live.replayTips')}}</div> <div class="tips">{{ $t('live.replayTips') }}</div>
<div class="live-list"> <div class="live-list">
<template v-for="item in dataList"> <template v-for="item in dataList">
<div <div class="live-item" :key="subitem.id" v-for="subitem in item.live" @click="onClick(subitem)">
class="live-item" <h4 class="live-item-name">{{ item.course_name }}</h4>
:key="subitem.id"
v-for="subitem in item.live"
@click="onClick(subitem)"
>
<h4 class="live-item-name">{{item.course_name}}</h4>
<div class="live-item-main"> <div class="live-item-main">
<img class="live-item-pic" :src="item.curriculum.curriculum_picture" /> <img class="live-item-pic" :src="item.curriculum.curriculum_picture" />
<div class="live-item-content"> <div class="live-item-content">
<div class="live-item-content__title">{{subitem.chapter_name}}</div> <div class="live-item-content__title">{{ subitem.topic }}</div>
<div class="live-item-content__time">{{subitem.start_time}}</div> <div class="live-item-content__time">{{ subitem.start_time }}</div>
<div <div class="live-item-content__status">{{ calcTimeText(subitem.start_time, subitem.live_status) }}</div>
class="live-item-content__status"
>{{calcTimeText(subitem.start_time, subitem.live_status)}}</div>
</div> </div>
</div> </div>
</div> </div>
...@@ -128,11 +121,7 @@ export default { ...@@ -128,11 +121,7 @@ export default {
}, },
onClick(data) { onClick(data) {
data.live_status = parseInt(data.live_status) data.live_status = parseInt(data.live_status)
const { const { live_status: liveStatus, type: liveType = 5, start_time: liveTime } = data
live_status: liveStatus,
live_type: liveType = 'live',
start_time: liveTime
} = data
let message = this.calcTimeText(liveTime, liveStatus) let message = this.calcTimeText(liveTime, liveStatus)
if (liveStatus === 2 && !data.enable_record) { if (liveStatus === 2 && !data.enable_record) {
message = this.$t('live.noPlayback') message = this.$t('live.noPlayback')
...@@ -145,7 +134,7 @@ export default { ...@@ -145,7 +134,7 @@ export default {
this.openCloudClass(data, message) this.openCloudClass(data, message)
return return
} }
if (liveType === 'live') { if (liveType === 5) {
// 打开云直播 // 打开云直播
this.openCloudLive(data, message) this.openCloudLive(data, message)
return return
...@@ -168,11 +157,10 @@ export default { ...@@ -168,11 +157,10 @@ export default {
openCloudClass(data, message) { openCloudClass(data, message) {
// https://doc.bokecc.com/class/developer/api/login.html // https://doc.bokecc.com/class/developer/api/login.html
const liveStatus = data.live_status const liveStatus = data.live_status
data.viewer_name = data.user_name = data.user_name || window.G.UserInfo.student_info.personal_name
data.viewer_name || window.G.UserInfo.student_info.personal_name
if (liveStatus === 1) { if (liveStatus === 1) {
// 进行中 // 进行中
const url = `http://view.csslcloud.net/api/view/index?roomid=${data.room_id}&userid=${data.user_id}&autoLogin=true&viewername=${data.username}&viewertoken=${data.password}` const url = `http://view.csslcloud.net/api/view/index?roomid=${data.room_id}&userid=${data.account_id}&autoLogin=true&viewername=${data.username}&viewertoken=${data.password}`
this.openNewWindow(url) this.openNewWindow(url)
} else if (liveStatus === 2) { } else if (liveStatus === 2) {
// 查看回放 // 查看回放
...@@ -190,15 +178,15 @@ export default { ...@@ -190,15 +178,15 @@ export default {
openCloudLive(data, message) { openCloudLive(data, message) {
// https://doc.bokecc.com/live/Appendix_1.html // https://doc.bokecc.com/live/Appendix_1.html
const liveStatus = data.live_status const liveStatus = data.live_status
data.viewer_name = data.viewer_name || this.nickName data.user_name = data.user_name || this.nickName
if (liveStatus === 2 && data.enable_record === 1) { if (liveStatus === 2 && data.enable_record === 1) {
// enable_record 0:不启用回放 1:开启回放 // enable_record 0:不启用回放 1:开启回放
// 查看回放 // 查看回放
// const url = `https://view.csslcloud.net/api/view/callback?recordid=${data.record_id}&roomid=${data.room_id}&userid=${data.user_id}&autoLogin=true&viewername=${data.viewer_name}&viewertoken=${data.viewer_token}` // const url = `https://view.csslcloud.net/api/view/callback?recordid=${data.record_id}&roomid=${data.room_id}&userid=${data.account_id}&autoLogin=true&viewername=${data.user_name}&viewertoken=${data.play_pass}`
this.openNewWindow(data.record_url) this.openNewWindow(data.record_url)
} else { } else {
// 查看直播 // 查看直播
const url = `https://view.csslcloud.net/api/view/index?roomid=${data.room_id}&userid=${data.user_id}&autoLogin=true&viewername=${data.viewer_name}&viewertoken=${data.viewer_token}` const url = `https://view.csslcloud.net/api/view/index?roomid=${data.room_id}&userid=${data.account_id}&autoLogin=true&viewername=${data.user_name}&viewertoken=${data.play_pass}`
this.openNewWindow(url) this.openNewWindow(url)
} }
}, },
...@@ -226,8 +214,7 @@ export default { ...@@ -226,8 +214,7 @@ export default {
if (liveStatus === 0 && liveTime) { if (liveStatus === 0 && liveTime) {
liveTime = liveTime.replace(/-/g, '/') liveTime = liveTime.replace(/-/g, '/')
const time = const time = (new Date(liveTime).getTime() - new Date().getTime()) / 1000 || 0
(new Date(liveTime).getTime() - new Date().getTime()) / 1000 || 0
if (time <= 5 * 60) { if (time <= 5 * 60) {
result = this.$t('live.start') result = this.$t('live.start')
} else if (time <= 1 * 60 * 60) { } else if (time <= 1 * 60 * 60) {
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论