|
|
@@ -8,7 +8,7 @@
|
|
|
<div class="plv-watch-mobile-chatroom plv-skin--dark" id="plv-mobile-chat"></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
-
|
|
|
+
|
|
|
<div class="sign-modal" v-if="signModal">
|
|
|
<div class="sign-modal__content">
|
|
|
<img class="img" src="@/static/sign-img.png" alt="">
|
|
|
@@ -18,7 +18,7 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
-
|
|
|
+
|
|
|
<div class="sign-success" v-if="signSuccess">
|
|
|
<div class="sign-success__content">
|
|
|
<img class="img" src="@/static/sign-success.png" alt="">
|
|
|
@@ -29,15 +29,15 @@
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-import "@/static/chatroom.css";
|
|
|
-import "@/static/mobile.css";
|
|
|
-import "@/static/tool.css";
|
|
|
-import "@/static/public.css";
|
|
|
+ import "@/static/chatroom.css";
|
|
|
+ import "@/static/mobile.css";
|
|
|
+ import "@/static/tool.css";
|
|
|
+ import "@/static/public.css";
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
- signModal:false,
|
|
|
- signSuccess:false,
|
|
|
+ signModal: false,
|
|
|
+ signSuccess: false,
|
|
|
playerJs: "https://player.polyv.net/livesdk/polyv-live.min.js",
|
|
|
chatroomJs: "https://player.polyv.net/jssdk/polyv-chatroom.min.js",
|
|
|
uidzb: "egsxlptzdq",
|
|
|
@@ -48,20 +48,20 @@ import "@/static/public.css";
|
|
|
mediaChannelKey: "",
|
|
|
changeState: false,
|
|
|
liveSdk: null,
|
|
|
- userInfo:{},
|
|
|
- token:'',
|
|
|
+ userInfo: {},
|
|
|
+ token: '',
|
|
|
sectionId: 0,
|
|
|
goodsId: 0,
|
|
|
courseId: 0,
|
|
|
- orderGoodsId:0,
|
|
|
+ orderGoodsId: 0,
|
|
|
gradeId: 0,
|
|
|
chapterId: 0,
|
|
|
moduleId: 0,
|
|
|
- playTime:0,
|
|
|
- duraing:0,
|
|
|
- timer:null,
|
|
|
- isFirst:true,
|
|
|
- isEnd:false,
|
|
|
+ playTime: 0,
|
|
|
+ duraing: 0,
|
|
|
+ timer: null,
|
|
|
+ isFirst: true,
|
|
|
+ isEnd: false,
|
|
|
plv: {
|
|
|
liveSdk: null, // 保存直播 JS-SDK 实例
|
|
|
socket: null, // 保存 WebSocket 实例
|
|
|
@@ -74,10 +74,14 @@ import "@/static/public.css";
|
|
|
vid: '', // 回放的id
|
|
|
}
|
|
|
},
|
|
|
- mounted() {
|
|
|
-
|
|
|
- console.log('直播间参数',this.$route.query)
|
|
|
- const { buyCourse, ident, sectionType, vid } = this.$route.query
|
|
|
+ async mounted() {
|
|
|
+ console.log('直播间参数', this.$route.query)
|
|
|
+ const {
|
|
|
+ buyCourse,
|
|
|
+ ident,
|
|
|
+ sectionType,
|
|
|
+ vid
|
|
|
+ } = this.$route.query
|
|
|
console.log('sectionType:', sectionType, vid)
|
|
|
this.buyCourse = buyCourse
|
|
|
this.identification = ident
|
|
|
@@ -91,29 +95,45 @@ import "@/static/public.css";
|
|
|
this.chapterId = this.$route.query.chapterId;
|
|
|
this.moduleId = this.$route.query.moduleId;
|
|
|
this.channelId = this.$route.query.channelId;
|
|
|
- this.userInfo = this.$route.query.userInfo ? JSON.parse(this.$route.query.userInfo) : {
|
|
|
- userAccount:parseInt(Math.random() * 100000),
|
|
|
- realname:'匿名' + parseInt(Math.random() * 100000)
|
|
|
+ if (this.$route.query.tid) {
|
|
|
+ await this.setStorageAwait('tid', this.$route.query.tid)
|
|
|
+ }
|
|
|
+ this.userInfo = this.$route.query.userInfo && this.$route.query.userInfo !== 'null' ? JSON.parse(this
|
|
|
+ .$route
|
|
|
+ .query.userInfo) : {
|
|
|
+ userAccount: parseInt(Math.random() * 100000),
|
|
|
+ realname: '匿名' + parseInt(Math.random() * 100000)
|
|
|
}
|
|
|
let token = this.$route.query.token;
|
|
|
-
|
|
|
-
|
|
|
- if(token) {
|
|
|
- uni.setStorageSync('token',token)
|
|
|
+
|
|
|
+
|
|
|
+ if (token) {
|
|
|
+ uni.setStorageSync('token', token)
|
|
|
}
|
|
|
this.playVideo();
|
|
|
- if(this.sectionId && this.sectionType != 3) {
|
|
|
+ if (this.sectionId && this.sectionType != 3) {
|
|
|
this.studyRecordGetLastLive();
|
|
|
}
|
|
|
-
|
|
|
+
|
|
|
},
|
|
|
methods: {
|
|
|
+ setStorageAwait() {
|
|
|
+ return new Promise(resolve => {
|
|
|
+ uni.setStorage({
|
|
|
+ key: 'tid',
|
|
|
+ data: this.$route.query.tid,
|
|
|
+ success: function() {
|
|
|
+ resolve()
|
|
|
+ }
|
|
|
+ });
|
|
|
+ })
|
|
|
+ },
|
|
|
close() {
|
|
|
this.signModal = false;
|
|
|
this.signSuccess = true;
|
|
|
setTimeout(() => {
|
|
|
this.signSuccess = false;
|
|
|
- },1000)
|
|
|
+ }, 1000)
|
|
|
},
|
|
|
/**
|
|
|
* 获取上次观看的直播
|
|
|
@@ -121,13 +141,13 @@ import "@/static/public.css";
|
|
|
studyRecordGetLastLive() {
|
|
|
if (!this.gradeId) {
|
|
|
this.$http({
|
|
|
- url:'/study/record/queryLiveLast',
|
|
|
- data:{
|
|
|
- orderGoodsId: this.orderGoodsId,
|
|
|
- courseId: this.courseId,
|
|
|
- }
|
|
|
- }).then( res => {
|
|
|
- if(res.data.code == 200) {
|
|
|
+ url: '/study/record/queryLiveLast',
|
|
|
+ data: {
|
|
|
+ orderGoodsId: this.orderGoodsId,
|
|
|
+ courseId: this.courseId,
|
|
|
+ }
|
|
|
+ }).then(res => {
|
|
|
+ if (res.data.code == 200) {
|
|
|
if (!res.data.data) {
|
|
|
this.signModal = true;
|
|
|
}
|
|
|
@@ -137,40 +157,39 @@ import "@/static/public.css";
|
|
|
},
|
|
|
polyvLivesign() {
|
|
|
this.$http({
|
|
|
- loading:true,
|
|
|
- url:'/polyv/live/sign',
|
|
|
- data:{
|
|
|
- channelId: this.channelId,
|
|
|
- }
|
|
|
- }).then( res => {
|
|
|
+ loading: true,
|
|
|
+ url: '/polyv/live/sign',
|
|
|
+ data: {
|
|
|
+ channelId: this.channelId,
|
|
|
+ }
|
|
|
+ }).then(res => {
|
|
|
if (res.data.code == 200) {
|
|
|
- this.sign = res.data.data.sign;
|
|
|
- this.token = res.data.data.token;
|
|
|
- this.mediaChannelKey = res.data.data.mediaChannelKey;
|
|
|
- this.timestamp = res.data.data.timestamp;
|
|
|
- this.appId = res.data.data.appId;
|
|
|
-
|
|
|
- this.loadPlayerzb();
|
|
|
+ this.sign = res.data.data.sign;
|
|
|
+ this.token = res.data.data.token;
|
|
|
+ this.mediaChannelKey = res.data.data.mediaChannelKey;
|
|
|
+ this.timestamp = res.data.data.timestamp;
|
|
|
+ this.appId = res.data.data.appId;
|
|
|
+
|
|
|
+ this.loadPlayerzb();
|
|
|
} else {
|
|
|
uni.showToast({
|
|
|
title: res.data.msg,
|
|
|
icon: 'none'
|
|
|
})
|
|
|
}
|
|
|
- }).catch((err) => {
|
|
|
- })
|
|
|
+ }).catch((err) => {})
|
|
|
},
|
|
|
-
|
|
|
- studyRecord(status,duraing) {
|
|
|
-
|
|
|
- if(!this.sectionId) {
|
|
|
+
|
|
|
+ studyRecord(status, duraing) {
|
|
|
+
|
|
|
+ if (!this.sectionId) {
|
|
|
return;
|
|
|
}
|
|
|
let self = this;
|
|
|
this.$http({
|
|
|
- load:false,
|
|
|
- url:'/study/record',
|
|
|
- data:{
|
|
|
+ load: false,
|
|
|
+ url: '/study/record',
|
|
|
+ data: {
|
|
|
buyCourse: this.buyCourse,
|
|
|
identification: this.identification,
|
|
|
sectionId: parseInt(this.sectionId),
|
|
|
@@ -182,12 +201,12 @@ import "@/static/public.css";
|
|
|
chapterId: parseInt(self.chapterId),
|
|
|
moduleId: parseInt(self.moduleId),
|
|
|
videoCurrentTime: parseInt(
|
|
|
- 2
|
|
|
+ 2
|
|
|
),
|
|
|
- status:status,
|
|
|
+ status: status,
|
|
|
fromPlat: 1,
|
|
|
},
|
|
|
- method:'POST'
|
|
|
+ method: 'POST'
|
|
|
})
|
|
|
},
|
|
|
|
|
|
@@ -198,7 +217,7 @@ import "@/static/public.css";
|
|
|
console.log('this.userInfo', this.userInfo);
|
|
|
this.polyvLivesign();
|
|
|
},
|
|
|
-
|
|
|
+
|
|
|
jquery() {
|
|
|
return new Promise((resolve) => {
|
|
|
if (!window.polyvLivePlayer) {
|
|
|
@@ -213,29 +232,25 @@ import "@/static/public.css";
|
|
|
},
|
|
|
|
|
|
loadPlayerzb() {
|
|
|
-
|
|
|
var els = {
|
|
|
- playerEl: '', // 播放器容器选择器, 移动端和PC的el参数设置不
|
|
|
- pptEl: '', // 文档容器选择器, 普通直播不需要设置pptEl
|
|
|
- controllerEl: '', // 三分屏控制栏的容器选择器， pc三分屏的场景才需要设置controllerEl,
|
|
|
- chatContainer: '' ,// 聊天室的容器选择器
|
|
|
- pptEl: '#tab-ppt'
|
|
|
- };
|
|
|
-
|
|
|
+ playerEl: '', // 播放器容器选择器, 移动端和PC的el参数设置不
|
|
|
+ pptEl: '', // 文档容器选择器, 普通直播不需要设置pptEl
|
|
|
+ controllerEl: '', // 三分屏控制栏的容器选择器， pc三分屏的场景才需要设置controllerEl,
|
|
|
+ chatContainer: '', // 聊天室的容器选择器
|
|
|
+ pptEl: '#tab-ppt'
|
|
|
+ };
|
|
|
+
|
|
|
$('.plv-watch-mobile').css('display', '');
|
|
|
els.playerEl = '#plv-mobile-player'; // 讲师区域元素
|
|
|
els.chatContainer = '#plv-mobile-chat'; // DOM选择器，HTML元素，用于渲染聊天室
|
|
|
els.pptEl = '#tab-ppt'; // ppt文档元素选择器，非云课堂可不填
|
|
|
- console.log(this,'this')
|
|
|
- console.log(this.$method.splitImgHost(this.userInfo.avatar, true),'this.$method.splitImgHost(this.userInfo.avatar, true)')
|
|
|
var chatroom = new PolyvChatRoom({
|
|
|
//实例聊天室SDK
|
|
|
roomId: this.channelId,
|
|
|
userId: this.userInfo.userAccount,
|
|
|
nick: this.userInfo.realname,
|
|
|
- accountId: this.userInfo.userAccount ,
|
|
|
- pic:
|
|
|
- this.$method.splitImgHost(this.userInfo.avatar, true) ||
|
|
|
+ accountId: this.userInfo.userAccount,
|
|
|
+ pic: this.$method.splitImgHost(this.userInfo.avatar, true) ||
|
|
|
"http://livestatic.videocc.net/assets/wimages/missing_face.png",
|
|
|
container: els.chatContainer,
|
|
|
userType: "slice",
|
|
|
@@ -247,22 +262,21 @@ import "@/static/public.css";
|
|
|
enableWelcome: true, // 是否开启欢迎语，默认为true
|
|
|
enableFlower: true, // 是否开启送花功能，默认为true
|
|
|
mediaChannelKey: this.mediaChannelKey,
|
|
|
- tabData: [
|
|
|
- {
|
|
|
- name: "文档",
|
|
|
- type: "ppt",
|
|
|
- },
|
|
|
- {
|
|
|
- name: "聊天", // 菜单栏名称
|
|
|
- type: "chat", // 菜单栏类型, 有3个已有的内置类型(chat, user-list, ask),详情请参考文档
|
|
|
- },
|
|
|
- {
|
|
|
- name: "提问",
|
|
|
- type: "ask",
|
|
|
- }
|
|
|
- ],
|
|
|
+ tabData: [{
|
|
|
+ name: "文档",
|
|
|
+ type: "ppt",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "聊天", // 菜单栏名称
|
|
|
+ type: "chat", // 菜单栏类型, 有3个已有的内置类型(chat, user-list, ask),详情请参考文档
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "提问",
|
|
|
+ type: "ask",
|
|
|
+ }
|
|
|
+ ],
|
|
|
roomMessage: (data) => {
|
|
|
- console.log(data,'data')
|
|
|
+ console.log(data, 'data')
|
|
|
// data为聊天室socket消息，当有聊天室消息时会触发此方法
|
|
|
if (this.liveSdk && this.liveSdk.player) {
|
|
|
var event = data.EVENT;
|
|
|
@@ -292,23 +306,22 @@ import "@/static/public.css";
|
|
|
user: {
|
|
|
userId: this.userInfo.userAccount,
|
|
|
userName: this.userInfo.realname,
|
|
|
- pic:
|
|
|
- this.$method.splitImgHost(this.userInfo.avatar, true) ||
|
|
|
+ pic: this.$method.splitImgHost(this.userInfo.avatar, true) ||
|
|
|
"http://livestatic.videocc.net/assets/wimages/missing_face.png",
|
|
|
},
|
|
|
});
|
|
|
-
|
|
|
+
|
|
|
// 监听流状态变化刷新播放器
|
|
|
- this.plv.liveSdk.on(PolyvLiveSdk.EVENTS.STREAM_UPDATE, (event,status)=> {
|
|
|
- console.log(status,'STREAM_UPDATE')
|
|
|
- if(status == 'end') {
|
|
|
- clearInterval(this.timer)
|
|
|
- let duraing = this.playTime - this.duraing;
|
|
|
- this.duraing = 0;
|
|
|
- this.isEnd = true;
|
|
|
- this.studyRecord(1,duraing)
|
|
|
- }
|
|
|
- }); // 监听流状态变化
|
|
|
+ this.plv.liveSdk.on(PolyvLiveSdk.EVENTS.STREAM_UPDATE, (event, status) => {
|
|
|
+ console.log(status, 'STREAM_UPDATE')
|
|
|
+ if (status == 'end') {
|
|
|
+ clearInterval(this.timer)
|
|
|
+ let duraing = this.playTime - this.duraing;
|
|
|
+ this.duraing = 0;
|
|
|
+ this.isEnd = true;
|
|
|
+ this.studyRecord(1, duraing)
|
|
|
+ }
|
|
|
+ }); // 监听流状态变化
|
|
|
|
|
|
|
|
|
// 第四步：监听频道信息读取完成事件，初始化播放器
|
|
|
@@ -332,7 +345,7 @@ import "@/static/public.css";
|
|
|
// sessionId: undefined, // 回放场次id，回放模式必填
|
|
|
// vid: undefined, // 回放id，回放模式下传入该参数，可不传fileId、url、sessionId
|
|
|
options.type = 'vod',
|
|
|
- options.vid = this.vid
|
|
|
+ options.vid = this.vid
|
|
|
}
|
|
|
console.log('options', options)
|
|
|
this.plv.liveSdk.on(PolyvLiveSdk.EVENTS.CHANNEL_DATA_INIT, (event, data) => {
|
|
|
@@ -350,7 +363,7 @@ import "@/static/public.css";
|
|
|
this.plv.liveSdk.player.on("switchMainScreen", (main) => {
|
|
|
console.log("切换主讲位置，当前主屏为", main); // 'player'|'ppt'
|
|
|
});
|
|
|
-
|
|
|
+
|
|
|
// this.plv.liveSdk.player.on("ended", (state) => {
|
|
|
// console.log(state,'ended')
|
|
|
// clearInterval(this.timer)
|
|
|
@@ -358,31 +371,31 @@ import "@/static/public.css";
|
|
|
// this.duraing = 0;
|
|
|
// this.studyRecord(1,duraing)
|
|
|
// })
|
|
|
-
|
|
|
+
|
|
|
this.plv.liveSdk.player.on("pause", (state) => {
|
|
|
- console.log(state,'pause')
|
|
|
+ console.log(state, 'pause')
|
|
|
let duraing = this.playTime - this.duraing;
|
|
|
this.duraing = 0;
|
|
|
- if(!this.isEnd) {
|
|
|
- this.studyRecord(0,duraing)
|
|
|
+ if (!this.isEnd) {
|
|
|
+ this.studyRecord(0, duraing)
|
|
|
}
|
|
|
-
|
|
|
+
|
|
|
clearInterval(this.timer)
|
|
|
})
|
|
|
-
|
|
|
+
|
|
|
this.plv.liveSdk.player.on("loadedmetadata", (state) => {
|
|
|
- if(this.isFirst) {
|
|
|
- this.studyRecord(0,0)
|
|
|
+ if (this.isFirst) {
|
|
|
+ this.studyRecord(0, 0)
|
|
|
this.isFirst = false;
|
|
|
}
|
|
|
this.isEnd = false;
|
|
|
clearInterval(this.timer)
|
|
|
this.timer = setInterval(() => {
|
|
|
- this.studyRecord(0,20)
|
|
|
+ this.studyRecord(0, 20)
|
|
|
this.duraing += 20;
|
|
|
- },20000)
|
|
|
+ }, 20000)
|
|
|
})
|
|
|
-
|
|
|
+
|
|
|
this.plv.liveSdk.player.on("timeupdate", (time) => {
|
|
|
this.playTime = time;
|
|
|
})
|
|
|
@@ -424,40 +437,44 @@ import "@/static/public.css";
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
.mobile-wrap .polyv-chat-input input {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- padding: 0 5px;
|
|
|
- color: #212121;
|
|
|
- border: none;
|
|
|
- border-radius: 4px;
|
|
|
- background: #fafafa;
|
|
|
- outline: none;
|
|
|
- border: 1px solid #ecf0f1;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ padding: 0 5px;
|
|
|
+ color: #212121;
|
|
|
+ border: none;
|
|
|
+ border-radius: 4px;
|
|
|
+ background: #fafafa;
|
|
|
+ outline: none;
|
|
|
+ border: 1px solid #ecf0f1;
|
|
|
}
|
|
|
-
|
|
|
+
|
|
|
.sign-modal {
|
|
|
- position:fixed;
|
|
|
- left:0;
|
|
|
- top:0;
|
|
|
- width:100%;
|
|
|
- height:100%;
|
|
|
+ position: fixed;
|
|
|
+ left: 0;
|
|
|
+ top: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
z-index: 999;
|
|
|
- background: rgba(0,0,0,0.3);
|
|
|
+ background: rgba(0, 0, 0, 0.3);
|
|
|
+
|
|
|
&__content {
|
|
|
- position:absolute;
|
|
|
- left:50%;
|
|
|
- top:50%;
|
|
|
- transform: translate3d(-50%,-50%,0);
|
|
|
+ position: absolute;
|
|
|
+ left: 50%;
|
|
|
+ top: 50%;
|
|
|
+ transform: translate3d(-50%, -50%, 0);
|
|
|
border-radius: 24rpx;
|
|
|
- overflow: hidden;
|
|
|
+ overflow: hidden;
|
|
|
+
|
|
|
.img {
|
|
|
- width:640rpx;
|
|
|
+ width: 640rpx;
|
|
|
display: block;
|
|
|
}
|
|
|
+
|
|
|
.box {
|
|
|
background: #fff;
|
|
|
- padding:20rpx 0;
|
|
|
+ padding: 20rpx 0;
|
|
|
overflow: hidden;
|
|
|
+
|
|
|
.title {
|
|
|
font-size: 30rpx;
|
|
|
font-family: PingFang SC;
|
|
|
@@ -466,50 +483,53 @@ import "@/static/public.css";
|
|
|
line-height: 48rpx;
|
|
|
text-align: center;
|
|
|
}
|
|
|
-
|
|
|
+
|
|
|
.btn {
|
|
|
- margin:40rpx auto 0;
|
|
|
+ margin: 40rpx auto 0;
|
|
|
width: 528rpx;
|
|
|
height: 80rpx;
|
|
|
background: #007AFF;
|
|
|
border-radius: 40rpx;
|
|
|
line-height: 80rpx;
|
|
|
text-align: center;
|
|
|
- color:#fff;
|
|
|
+ color: #fff;
|
|
|
font-size: 30rpx;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
+
|
|
|
.sign-success {
|
|
|
- position:fixed;
|
|
|
- left:0;
|
|
|
- top:0;
|
|
|
- width:100%;
|
|
|
- height:100%;
|
|
|
+ position: fixed;
|
|
|
+ left: 0;
|
|
|
+ top: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
z-index: 999;
|
|
|
- background: rgba(0,0,0,0.3);
|
|
|
+ background: rgba(0, 0, 0, 0.3);
|
|
|
+
|
|
|
&__content {
|
|
|
- position:absolute;
|
|
|
- left:50%;
|
|
|
- top:50%;
|
|
|
- transform: translate3d(-50%,-50%,0);
|
|
|
+ position: absolute;
|
|
|
+ left: 50%;
|
|
|
+ top: 50%;
|
|
|
+ transform: translate3d(-50%, -50%, 0);
|
|
|
border-radius: 24rpx;
|
|
|
width: 640rpx;
|
|
|
height: 324rpx;
|
|
|
background: #FFFFFF;
|
|
|
border-radius: 24rpx;
|
|
|
+
|
|
|
.img {
|
|
|
- position:absolute;
|
|
|
- left:50%;
|
|
|
- margin-left:-140rpx;
|
|
|
- top:-72rpx;
|
|
|
- width:280rpx;
|
|
|
+ position: absolute;
|
|
|
+ left: 50%;
|
|
|
+ margin-left: -140rpx;
|
|
|
+ top: -72rpx;
|
|
|
+ width: 280rpx;
|
|
|
display: block;
|
|
|
}
|
|
|
+
|
|
|
.title {
|
|
|
- margin-top:200rpx;
|
|
|
+ margin-top: 200rpx;
|
|
|
font-size: 30rpx;
|
|
|
font-family: PingFang SC;
|
|
|
font-weight: bold;
|
|
|
@@ -519,4 +539,4 @@ import "@/static/public.css";
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
-</style>
|
|
|
+</style>
|
En route