|
@@ -1,30 +1,52 @@
|
|
|
<template>
|
|
|
<div id="roomsDetail">
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="24" class="video"> </el-col>
|
|
|
+ </el-row>
|
|
|
+ <van-overlay :show="show" style="{ height: oheight, width: '100%' }">
|
|
|
+ <div id="transformid" class="wrapper" :style="{ transform: transform, height: vheight, width: vwidth, padding: vpadding, position: 'absolute' }">
|
|
|
+ <div :style="{ height: lheight, width: lwidth }" id="look-video-left" class="video-box col-div look-video-left"></div>
|
|
|
+ <div id="look-video-right" :style="{ height: rheight, width: rwidth }" class="video-box col-div look-video-right"></div>
|
|
|
+ </div>
|
|
|
+ <div class="videoBtn" id="videobtnid" :style="{ top: btop, right: bright }">
|
|
|
+ <el-button type="warning" round @click="full()" size="mini"><i class="el-icon-rank"></i></el-button>
|
|
|
+ </div>
|
|
|
+ </van-overlay>
|
|
|
<el-row>
|
|
|
<el-col :span="24" class="info">
|
|
|
<el-col :span="24" class="title">
|
|
|
<span>{{ roomInfos.title }}</span>
|
|
|
</el-col>
|
|
|
- <el-col :span="24" class="video">
|
|
|
- <el-col :span="15" class="videoLeft">
|
|
|
- <div id="look-video-left" class="video-box col-div" style="justify-content: flex-end"></div>
|
|
|
- </el-col>
|
|
|
- <el-col :span="9" class="videoRight">
|
|
|
- <div id="look-video-right" class="video-box col-div" style="justify-content: flex-end"></div>
|
|
|
- </el-col>
|
|
|
- </el-col>
|
|
|
<el-col :span="24" class="num">
|
|
|
<span>观看:{{ total }}</span>
|
|
|
</el-col>
|
|
|
- <el-col :span="24" class="chat">
|
|
|
+ <el-col :span="24" class="advert">
|
|
|
<el-col :span="24">
|
|
|
<van-swipe :autoplay="3000">
|
|
|
<van-swipe-item v-for="(advert, index) in roomInfos.adverts" :key="index">
|
|
|
- <img width="100%" height="100%" v-lazy="advert.imgdir" @click="imgclick(advert.imgurl)" />
|
|
|
+ <img width="100%" height="100px" v-lazy="advert.imgdir" @click="imgclick(advert.imgurl)" />
|
|
|
</van-swipe-item>
|
|
|
</van-swipe>
|
|
|
</el-col>
|
|
|
</el-col>
|
|
|
+ <el-col :span="24" class="chat">
|
|
|
+ <el-col :span="24" class="chatInfo" id="chatSell">
|
|
|
+ <el-col :span="24" class="list" v-for="(item, index) in dataList" :key="index">
|
|
|
+ <p>
|
|
|
+ <span :class="item.sendname == user.name ? 'selfColor' : ''">{{ item.sendname }}</span>
|
|
|
+ <span>{{ item.content }}</span>
|
|
|
+ </p>
|
|
|
+ </el-col>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="24" class="submit">
|
|
|
+ <el-col :span="19" class="input">
|
|
|
+ <el-input type="textarea" maxlength="5000" show-word-limit v-model="content"></el-input>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="5" class="btn">
|
|
|
+ <el-button type="primary" size="mini" @click="chatCreate">发送</el-button>
|
|
|
+ </el-col>
|
|
|
+ </el-col>
|
|
|
+ </el-col>
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
</div>
|
|
@@ -42,6 +64,7 @@ Vue.use(VanImage);
|
|
|
Vue.use(Lazyload);
|
|
|
const { mapActions: gensign } = createNamespacedHelpers('gensign');
|
|
|
const { mapActions: room } = createNamespacedHelpers('room');
|
|
|
+const { mapActions: chat } = createNamespacedHelpers('chat');
|
|
|
export default {
|
|
|
name: 'roomsDetail',
|
|
|
props: {},
|
|
@@ -55,21 +78,77 @@ export default {
|
|
|
roomInfos: {},
|
|
|
sendmemo: '',
|
|
|
total: 0,
|
|
|
+ transform: 'rotate(0)',
|
|
|
+ oheight: '200px',
|
|
|
+ vwidth: '100%',
|
|
|
+ vheight: '200px',
|
|
|
+ rheight: '200px',
|
|
|
+ rwidth: '30%',
|
|
|
+ lheight: '200px',
|
|
|
+ lwidth: '70%',
|
|
|
+ show: true,
|
|
|
+ vpadding: '0',
|
|
|
+ btop: '167px',
|
|
|
+ bright: '10px',
|
|
|
+ isscreen: false,
|
|
|
+ content: '',
|
|
|
+ dataList: [],
|
|
|
};
|
|
|
},
|
|
|
created() {
|
|
|
this.initclient();
|
|
|
this.lookuserSearch();
|
|
|
this.lookusercountsel();
|
|
|
+ this.chatSearch();
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.channel();
|
|
|
},
|
|
|
methods: {
|
|
|
...gensign(['gensignFetch']),
|
|
|
...room(['lookuserFetch', 'fetch', 'lookusercount']),
|
|
|
+ ...chat(['query', 'create']),
|
|
|
+ async chatSearch({ skip = 0, limit = 1000 } = {}) {
|
|
|
+ const info = { roomid: this.id };
|
|
|
+ let res = await this.query({ skip, limit, ...info });
|
|
|
+ this.$set(this, `dataList`, res.data);
|
|
|
+ },
|
|
|
+ async chatCreate() {
|
|
|
+ let data = {};
|
|
|
+ data.roomid = this.id;
|
|
|
+ data.type = '0';
|
|
|
+ data.content = this.content;
|
|
|
+ data.sendid = this.user.uid;
|
|
|
+ data.sendname = this.user.name;
|
|
|
+ const res = await this.create(data);
|
|
|
+ if (this.$checkRes(res)) {
|
|
|
+ //this.$message('发送成功');
|
|
|
+ this.content = '';
|
|
|
+ }
|
|
|
+ },
|
|
|
+ channel() {
|
|
|
+ console.log('in function:');
|
|
|
+ this.$stomp({
|
|
|
+ [`/exchange/public_chat_` + this.id]: this.onMessage,
|
|
|
+ });
|
|
|
+ },
|
|
|
+ onMessage(message) {
|
|
|
+ // console.log('receive a message: ', message.body);
|
|
|
+ let body = _.get(message, 'body');
|
|
|
+ if (body) {
|
|
|
+ body = JSON.parse(body);
|
|
|
+ this.dataList.push(body);
|
|
|
+ this.content = '';
|
|
|
+ }
|
|
|
+ this.$nextTick(() => {
|
|
|
+ document.getElementById('chatSell').scrollTop = document.getElementById('chatSell').scrollHeight + 275;
|
|
|
+ });
|
|
|
+ },
|
|
|
async lookuserSearch() {
|
|
|
let data = {};
|
|
|
data.roomid = this.id;
|
|
|
data.roomname = this.roomname;
|
|
|
- data.userid = this.user.userid;
|
|
|
+ data.userid = this.user.userid === null ? '111' : this.user.userid;
|
|
|
data.username = this.user.name;
|
|
|
const res = await this.lookuserFetch(data);
|
|
|
// 根据房间id查询房间详细信息
|
|
@@ -101,16 +180,44 @@ export default {
|
|
|
userSig: res.data,
|
|
|
});
|
|
|
await this.client_.join({ roomId: this.roomname, role: 'audience' });
|
|
|
- let i = 0;
|
|
|
this.client_.on('stream-subscribed', event => {
|
|
|
const remoteStream = event.stream;
|
|
|
// 远端流订阅成功,播放远端音视频流
|
|
|
+ console.log(remoteStream);
|
|
|
+ this.show = true;
|
|
|
console.log('111' + remoteStream.getType());
|
|
|
- i = i + 1;
|
|
|
- if (i === 1) {
|
|
|
- remoteStream.play('look-video-right');
|
|
|
+ console.log('111' + remoteStream.getUserId());
|
|
|
+ console.log('111' + remoteStream.getId());
|
|
|
+ const userid_ = remoteStream.getUserId();
|
|
|
+ const res_ = userid_.indexOf('-');
|
|
|
+ if (res_ === -1) {
|
|
|
+ this.rvideoid_ = 'video_' + remoteStream.getId();
|
|
|
+ remoteStream
|
|
|
+ .play('look-video-right')
|
|
|
+ .then(() => {
|
|
|
+ // autoplay success
|
|
|
+ })
|
|
|
+ .catch(e => {
|
|
|
+ const errorCode = e.getCode();
|
|
|
+ if (errorCode === 0x4043) {
|
|
|
+ // PLAY_NOT_ALLOWED,引导用户手势操作恢复音视频播放
|
|
|
+ remoteStream.resume();
|
|
|
+ }
|
|
|
+ });
|
|
|
} else {
|
|
|
- remoteStream.play('look-video-left');
|
|
|
+ this.lvideoid_ = 'video_' + remoteStream.getId();
|
|
|
+ remoteStream
|
|
|
+ .play('look-video-left')
|
|
|
+ .then(() => {
|
|
|
+ // autoplay success
|
|
|
+ })
|
|
|
+ .catch(e => {
|
|
|
+ const errorCode = e.getCode();
|
|
|
+ if (errorCode === 0x4043) {
|
|
|
+ // PLAY_NOT_ALLOWED,引导用户手势操作恢复音视频播放
|
|
|
+ remoteStream.resume();
|
|
|
+ }
|
|
|
+ });
|
|
|
}
|
|
|
});
|
|
|
// 监听远端流增加事件
|
|
@@ -118,15 +225,66 @@ export default {
|
|
|
const remoteStream = event.stream;
|
|
|
console.log('222' + remoteStream.getType());
|
|
|
// 订阅远端音频和视频流
|
|
|
- this.client_.subscribe(remoteStream, { audio: false, video: true }).catch(e => {
|
|
|
+ this.client_.subscribe(remoteStream, { audio: true, video: true }).catch(e => {
|
|
|
console.error('failed to subscribe remoteStream');
|
|
|
});
|
|
|
});
|
|
|
+ this.client_.on('stream-removed', event => {
|
|
|
+ const remoteStream = event.stream;
|
|
|
+ console.log('stop----');
|
|
|
+ remoteStream.stop();
|
|
|
+ });
|
|
|
}
|
|
|
},
|
|
|
imgclick(url) {
|
|
|
location.href = url;
|
|
|
},
|
|
|
+ full() {
|
|
|
+ this.show = true;
|
|
|
+ const width = document.documentElement.clientWidth;
|
|
|
+ const height = document.documentElement.clientHeight;
|
|
|
+ if (!this.isscreen) {
|
|
|
+ console.log('全屏');
|
|
|
+ this.isscreen = true;
|
|
|
+ this.oheight = height;
|
|
|
+ const transformid_ = document.getElementById('transformid');
|
|
|
+ let style = 'width:' + height + 'px;';
|
|
|
+ style += 'height:' + width + 'px;';
|
|
|
+ style += '-webkit-transform: rotate(90deg); transform: rotate(90deg);';
|
|
|
+ // 注意旋转中点的处理
|
|
|
+ style += '-webkit-transform-origin: ' + width / 2 + 'px ' + width / 2 + 'px;';
|
|
|
+ style += 'transform-origin: ' + width / 2 + 'px ' + width / 2 + 'px;';
|
|
|
+ transformid_.style.cssText = style;
|
|
|
+ this.transform = 'rotate(90deg)';
|
|
|
+ // this.vwidth = height;
|
|
|
+ console.log(height);
|
|
|
+ this.vheight = `${width}px`;
|
|
|
+ this.vwidth = `${height}px`;
|
|
|
+ this.lheight = `${width}px`;
|
|
|
+ this.rheight = `${width}px`;
|
|
|
+
|
|
|
+ this.btop = `${height - 40}px`;
|
|
|
+ this.bright = `${width - 50}px`;
|
|
|
+ } else {
|
|
|
+ console.log('退出全屏');
|
|
|
+ this.isscreen = false;
|
|
|
+ this.oheight = '200px';
|
|
|
+ const transformid_ = document.getElementById('transformid');
|
|
|
+ let style = 'width:' + width + 'px;';
|
|
|
+ style += 'height: 200px;';
|
|
|
+ transformid_.style.cssText = style;
|
|
|
+ this.transform = 'rotate(0deg)';
|
|
|
+ // this.vwidth = height;
|
|
|
+ console.log(height);
|
|
|
+ this.vheight = `200px`;
|
|
|
+ this.vwidth = `${width}px`;
|
|
|
+ this.lheight = `200px`;
|
|
|
+ this.rheight = `200px`;
|
|
|
+
|
|
|
+ this.btop = `167px`;
|
|
|
+ this.bright = `10px`;
|
|
|
+ }
|
|
|
+ },
|
|
|
},
|
|
|
computed: {
|
|
|
...mapState(['user']),
|
|
@@ -147,6 +305,12 @@ export default {
|
|
|
</script>
|
|
|
|
|
|
<style lang="less" scoped>
|
|
|
+.video {
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 200px;
|
|
|
+}
|
|
|
.info {
|
|
|
.title {
|
|
|
text-align: center;
|
|
@@ -154,29 +318,52 @@ export default {
|
|
|
font-size: 16px;
|
|
|
font-weight: bold;
|
|
|
}
|
|
|
- .video {
|
|
|
- background: #000;
|
|
|
- margin: 0 0 10px 0;
|
|
|
- .videoLeft {
|
|
|
- height: 200px;
|
|
|
- }
|
|
|
- .videoRight {
|
|
|
- height: 200px;
|
|
|
- }
|
|
|
- }
|
|
|
.num {
|
|
|
padding: 10px 0;
|
|
|
font-size: 16px;
|
|
|
}
|
|
|
- .chat {
|
|
|
+ .advert {
|
|
|
background: #fff;
|
|
|
padding: 10px;
|
|
|
}
|
|
|
+ .chat {
|
|
|
+ height: 260px;
|
|
|
+ .chatInfo {
|
|
|
+ height: 185px;
|
|
|
+ overflow-y: auto;
|
|
|
+ padding: 0 10px;
|
|
|
+ margin: 0 0 10px 0;
|
|
|
+ .list {
|
|
|
+ margin: 0 0 10px 0;
|
|
|
+ span:first-child {
|
|
|
+ float: left;
|
|
|
+ width: 17%;
|
|
|
+ text-align: center;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ white-space: nowrap;
|
|
|
+ // font-weight: bold;
|
|
|
+ }
|
|
|
+ span:last-child {
|
|
|
+ float: right;
|
|
|
+ width: 82%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .submit {
|
|
|
+ position: absolute;
|
|
|
+ bottom: 0;
|
|
|
+ .el-button {
|
|
|
+ width: 100%;
|
|
|
+ padding: 20px 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
.my-swipe .van-swipe-item {
|
|
|
color: #fff;
|
|
|
font-size: 20px;
|
|
|
- line-height: 150px;
|
|
|
+ line-height: 120px;
|
|
|
text-align: center;
|
|
|
background-color: #39a9ed;
|
|
|
}
|
|
@@ -184,14 +371,34 @@ export default {
|
|
|
height: 190px !important;
|
|
|
border-radius: 10px;
|
|
|
}
|
|
|
-#look-video-left {
|
|
|
- width: 100%;
|
|
|
- height: 200px;
|
|
|
+.look-video-left {
|
|
|
+ float: left;
|
|
|
+ background: #000;
|
|
|
grid-area: 1/1/3/4;
|
|
|
+ justify-content: flex-end;
|
|
|
}
|
|
|
-#look-video-right {
|
|
|
+.look-video-right {
|
|
|
+ float: right;
|
|
|
+ background: #000;
|
|
|
+ grid-area: 1/1/3/4;
|
|
|
+ justify-content: flex-end;
|
|
|
+}
|
|
|
+.wrapper {
|
|
|
+ background: #000;
|
|
|
+ position: absolute;
|
|
|
+ width: 100%;
|
|
|
+}
|
|
|
+.van-overlay {
|
|
|
+ position: fixed;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ z-index: 1;
|
|
|
width: 100%;
|
|
|
height: 200px;
|
|
|
- grid-area: 1/1/3/4;
|
|
|
+ background-color: rgba(0, 0, 0, 0.7);
|
|
|
+}
|
|
|
+.videoBtn {
|
|
|
+ z-index: 999;
|
|
|
+ position: absolute;
|
|
|
}
|
|
|
</style>
|