123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743 |
- <!-- 直播间 -->
- <template>
- <view class="detail live-detail">
- <div class="body">
- <detailHeader :roomInfo="roomInfo" v-if="roomInfo.title"></detailHeader>
- <div id="palyevent">palyevent</div>
- <div v-html="inputHtml"></div>
- <div style="height: 420rpx; width: 100%">
- <div class="prism-player" id="player-con">
- <lff-barrage
- ref="lffBarrage"
- :maxTop="240"
- type="leftToRight"
- ></lff-barrage>
- <lff-barrage ref="lffBarrage2"></lff-barrage>
- <detailDownload @cancel="downloadTimerFun" v-if="downloadShow"></detailDownload>
- <detailFollow v-if="toolbar && !isFullScreen" :matchDetail="matchDetail" :roomInfo="roomInfo" @success="getLiveDetail1" :userInfo="userInfo"></detailFollow>
- <div class="icon-box" v-if="toolbar">
- <u-icon name="rewind-left-fill" color="#fff" size="50" @click="setSeek(-10)"></u-icon>
- <u-icon :name="!isPlay ? 'play-right-fill' : 'pause'" @click="playToggle" color="#fff" size="100"></u-icon>
- <u-icon name="rewind-right-fill" color="#fff" size="50" @click="setSeek(10)"></u-icon>
- </div>
- </div>
- </div>
- <div class="adver-box">
- <img class="ad" v-if="roomInfo.adver_img_one" @click="adClick(roomInfo)" :src="roomInfo.adver_img_one" alt="">
- <img class="qr_img" v-if="roomInfo.qr_img" @click.stop="adClick1(roomInfo)" :src="roomInfo.qr_img" alt="">
- </div>
- <view class="tabs" v-if="liveType != 'game'">
- <u-tabs
- :list="tabList"
- lineHeight="3px"
- lineWidth="35px"
- lineColor="#DC3C23"
- :scrollable="true"
- :activeStyle="{
- color: '#DC3C23',
- fontSize: '15px',
- fontWeight: '700',
- }"
- :itemStyle="{height: '40px'}"
- :inactiveStyle="{ color: '#000', fontSize: '15px' }"
- :current="current"
- @change="change"
- >
- </u-tabs>
- </view>
- </div>
- <detailList v-if="current == 0" :liveList="liveList" :robotLength="robotLength"/>
- <detailChat :liveType="liveType" v-show="current == 1" :giftList="giftList" @addMesg="addMesg" ref="detail1" :roomInfo="roomInfo" :userInfo="userInfo"/>
- <!-- <detailAnimation v-if="current == 2" :livePath="matchDetail.live_url" /> -->
- <detailLive v-if="current == 2" :matchDetail="matchDetail" />
- <detailInfo v-if="current == 3" :matchDetail="matchDetail" />
- <detailScorecard v-if="current == 4" :list="competition_list" :matchDetail="matchDetail" />
- <detailSquad v-if="current == 5" :matchDetail="matchDetail" />
- </view>
- </template>
- <script>
- import detailInfo from './compontent/detail-info.vue'
- import detailChat from './compontent/detail-chat.vue'
- import detailAnimation from './compontent/detail-animation.vue'
- import detailList from './compontent/detail-list-h.vue'
- import detailLive from './compontent/detail-live.vue'
- import detailScorecard from './compontent/detail-scorecard.vue'
- import detailSquad from './compontent/detail-squad.vue'
- import bus from '@/utils/bus'
- import detailHeader from './compontent/detail-header.vue'
- import detailFollow from './compontent/detail-follow.vue'
- import detailDownload from './compontent/detail-download.vue'
- export default {
- components: {
- detailHeader,
- detailFollow,
- detailInfo,
- detailChat,
- detailList,
- detailLive,
- detailScorecard,
- detailSquad,
- detailAnimation,
- detailDownload
- },
- data() {
- return {
- nativeShare: null,
- videoMask: false,
- timer: null, //定时器
- i: 0, //计数
- show: false,
- quality: ["540", "720", "1080"],
- bg: {
- backgroundColor: "transparent",
- },
- tabList: [
- {
- name: this.$t("live.detailTab1"),
- },
- {
- name: this.$t("live.detailTab2"),
- },
- // {
- // name: this.$t('live.lab39'),
- // },
- {
- name: this.$t("live.detailTab3"),
- },
- {
- name: this.$t("live.detailTab4"),
- },
- {
- name: this.$t("live.detailTab5"),
- },
- {
- name: this.$t("live.detailTab6"),
- },
- ],
- groupID: "",
- id: '',
- roomInfo: {},
- matchDetail: {},
- competition_list: [],
- player: null,
- current: 1,
- userInfo: {},
- giftList: [],
- isPlay: true,
- toolbar: false,
- isFullScreen: false,
- toolbarTimer: null,
- videoPlay: false,
- isQuality: false,
- qualityIndex: 0,
- qualityArr: [], //画质数组
- quality: [], //画质
- fanItam: {},
- setType: 0,
- liveList: [],
- MediaUrl: '',
- liveType: '',
- danmu: true,
- time1: null,
- robotLength: 0,
- userClick: false,
- downloadShow: false,
- downloadTimer: null,
- inputHtml: '<input type="text" id="copy-input" style="opacity: 0;position: fixed;top: 0;z-index: -1;" readonly="readonly">'
- };
- },
- onLoad(option) {
- this.id = option.ID;
- this.liveType = option.type
- this.MediaUrl = option.MediaUrl;
- // 根据传递过来的参数判断是详情还是历史记录
- // let watchingOutSign = localStorage.getItem('watchingOutSign')
- // if (watchingOutSign && this.isLogin != 1) {
- // this.$r.loginBox();
- // this.$store.state.loginShowSign = true;
- // this.$store.state.loginShowCloseSign = false;
- // } else {
- this.getIsLogin();
- // }
- // this.getUserGiftList()
- if (this.liveType != 'game') {
- this.getList();
- }
- this.$store.state.timMessage = [];
- },
- onUnload() {
- bus.$off('chatLogin')
- this.time1 && clearInterval(this.time1);
- this.downloadTimer && clearTimeout(this.downloadTimer);
- window.removeEventListener('touchstart', this.owerPlay1)
- this.player && this.player.dispose();
- this.time1 = null;
- /* 退出群组 */
- uni.$TUIKit
- .quitGroup(this.groupID)
- .then((imResponse) => {})
- .catch((imError) => {
- console.warn("joinGroup error:", imError); // 申请加群失败的相关信息
- });
- },
- onShow() {
-
- },
- onHide() {
- },
- watch: {
- },
- mounted() {
- this.downloadTimerFun()
- this.getLiveDetail();
- window.addEventListener('touchstart', this.owerPlay1)
- document.getElementById('palyevent').addEventListener('click',this.owerPlay)
- },
- computed: {
- infos() {
- return this.$store.state.info;
- },
- isLogin() {
- return this.$store.state.isLogin;
- },
- system() {
- return this.$store.state.system;
- },
- },
- methods: {
- videoInit(data) {
- var $this = this
- this.player = new Aliplayer(
- {
- id: "player-con",
- source: this.MediaUrl,
- width: "100%",
- height: "100%",
- autoplay: true,
- isLive: false,
- rePlay: true,
- showBarTime: '3000',
- // cover: data.thumb,
- videoHeight: "100%",
- keyShortCuts: true,
- playsinline: true,
- "language": "en-us",
- preload: true,
- controlBarVisibility: "hover",
- videoWidth: "100%",
- useH5Prism: true,
- skinLayout: [
- // {
- // name: "bigPlayButton",
- // align: "blabs",
- // x: 30,
- // y: 80,
- // },
- {
- name: "H5Loading",
- align: "cc",
- },
- {
- name: "errorDisplay",
- align: "tlabs",
- x: 0,
- y: 0,
- },
- {
- name: "infoDisplay",
- },
- {
- name: "tooltip",
- align: "blabs",
- x: 0,
- y: 56,
- },
- {
- name: "thumbnail",
- },
- {
- name: "controlBar",
- align: "blabs",
- x: 0,
- y: 0,
- children: [
- {
- name: "progress",
- align: "blabs",
- x: 0,
- y: 44,
- },
- // {
- // name: "playButton",
- // align: "tl",
- // x: 15,
- // y: 12,
- // },
- {
- name: "timeDisplay",
- align: "tl",
- x: 10,
- y: 7,
- },
- {
- name: "fullScreenButton",
- align: "tr",
- x: 10,
- y: 12,
- },
- {
- name: "volume",
- align: "tr",
- x: 5,
- y: 10,
- },
- ],
- },
- ],
- },
- function (player) {
- setTimeout(() => {
- $this.clickPlay()
- }, 1000)
- }
- );
- this.player.on('hideBar', () => {
- this.toolbar = false
- })
- this.player.on('showBar', () => {
- this.isPlay = this.player.getStatus() == 'playing';
- this.toolbar = true;
- if (this.toolbarTimer) {
- clearTimeout(this.toolbarTimer)
- }
- this.toolbarTimer = setTimeout(() => {
- this.toolbar = false
- this.toolbarTimer = null
- }, 3000)
- })
- this.player.on('requestFullScreen', () => {
- this.isFullScreen = true
- })
- this.player.on('cancelFullScreen', () => {
- this.isFullScreen = false
- })
- },
- getLiveDetail1() {
- uni.$u.http.post("/api/Live_streaming/getRoomInfo", {
- id: this.id,
- }).then(res => {
- this.roomInfo = res.info || {};
- this.userInfo = res.userData;
- })
- },
- /* 获取详情 */
- cricket_match_detail() {
- let time = new Date();
- let timeZone = time.toLocaleTimeString('en-us',{timeZoneName:'short'}); //'1:12:38 PM GMT+8'
- let timeZoneId = Intl.DateTimeFormat().resolvedOptions().timeZone; //'Asia/Shanghai'
- uni.$u.http.post('/api/Cricket/cricket_match_detail',{
- match_id: this.roomInfo.match_id,
- timezone:timeZoneId
- }).then(res=>{
- this.matchDetail = res;
- this.competition_list = res.competition_list || []
- }).catch(res=>{})
- },
- /* 发布弹幕 */
- addMesg(e) {
- if (!this.$refs.lffBarrage) {
- return
- }
- this.$refs.lffBarrage.add({ item: e });
- this.$refs.lffBarrage2.add({ item: e });
- },
- /* 获取直播 */
- getList() {
- uni.$u.http.get('/api/LivePlayBack/list', {}).then(res => {
- if (res.list) {
- this.robotLength = res.list.length
- this.liveList = res.list.slice(0, 6)
- } else {
- this.liveList = []
- }
- })
- },
- getHistoryMsg(msg) {
- uni.$u.http.get("/api/LivePlayBack/getSimple", {
- params: {
- id: this.groupID
- }
- }).then((res) => {
- let RspMsgList = res.RspMsgList || [];
- let msgList = []
- RspMsgList.forEach(item => {
- let MsgBody = item.MsgBody || []
- if (Array.isArray(MsgBody)) {
- MsgBody.forEach(item1 => {
- msgList.unshift({
- conversationType: 'GROUP',
- conversationID: 'GROUP' + this.groupID,
- from: item.From_Account,
- nick: item.From_Account,
- payload: {
- data: item1.MsgContent.Data
- }
- })
- })
- }
- })
- if (msg) {
- msgList.push(msg)
- }
- let arr = {
- data: msgList,
- };
- this.$refs.detail1.$onMessageReceived(arr);
- });
- },
- /* 判断是否登录 未登录情况下只能停留3分钟 180秒 */
- getIsLogin() {
- let that = this;
- if (this.isLogin == 1) return;
- uni.$u.http.get('/api/universal/getHot', {}).then(res => {
- this.$store.state.system = res;
- if (!this.system.login_remind || Number(this.system.login_remind) > 5000) return;
- this.time1 = setTimeout((res) => {
- if (this.isLogin == 1) {
- return
- }
- localStorage.setItem('watchingOutSign', true)
- this.$toast(this.$t('live.lab40'));
- setTimeout((res1) => {
- this.$toUrl('/pages/login/login')
- }, 1500);
- }, this.system.login_remind * 60000);
- })
- },
- getLiveDetail(id) {
- let _this = this;
- uni.showLoading({
- title: this.$t('common.lab'),
- });
- uni.$u.http
- .post("/api/Live_streaming/getRoomInfo", {
- id: this.id,
- })
- .then((res) => {
- this.userInfo = res.userData || {};
- // 编辑主播公告
- // res.userData.announcement1 = []
- // res.userData.announcement1.push(res.userData.announcement)
- this.roomInfo = res.info || {};
- this.groupID = this.roomInfo.id + '';
- if (this.roomInfo.match_id) {
- this.cricket_match_detail()
- } else {
- this.tabList = [
- {
- name: this.$t("live.detailTab1"),
- },
- {
- name: this.$t("live.detailTab2"),
- }
- ]
- }
- if (JSON.stringify(res.info.clarity) == "{}") {
- this.quality = ["原画"];
- } else {
- this.quality = ["流畅", "标清", "高清"];
- // 重组清晰画质连接
- let qualityArr = [];
- for (let var1 in res.info.clarity) {
- let name = var1;
- // if(var1 == 'smooth') {
- // name = '540'
- // }else if(var1 == 'sd') {
- // name = '720'
- // }else if(var1 == 'hd') {
- // name = '1080'
- // }
- qualityArr.push({
- name,
- src: res.info.clarity[var1],
- });
- }
- qualityArr.unshift({
- src: res.info.pull,
- name: this.$t("live.standard"),
- });
- this.qualityArr = qualityArr;
- }
- this.loginTim()
- setTimeout(() => {
- this.videoInit(res.info)
- }, 1000)
- }).finally(() => {
- uni.hideLoading();
- });
- },
- loginTim() {
- if (this.isLogin == 1) {
- this.$store.dispatch('loginTim', this.infos).then(() => {
- this.joinGroup(this.infos)
- })
- } else {
- bus.$on('chatLogin', this.joinGroup)
- let youkeInfo = JSON.parse(sessionStorage.getItem('youkeInfo'))
- if (youkeInfo) {
- this.$store.dispatch('loginTim', {
- ...youkeInfo,
- types: 'youke'
- }).then(() => {
- this.joinGroup(youkeInfo)
- })
- } else {
- uni.$u.http.post("/api/Universal/imTouristAccount").then(res => {
- sessionStorage.setItem('youkeInfo', JSON.stringify(res))
- this.$store.dispatch('loginTim', {
- ...res,
- types: 'youke'
- }).then(() => {
- this.joinGroup(res)
- })
- })
- }
- }
- },
- joinGroup(info, sign) {
- uni.$TUIKit.joinGroup({
- groupID: this.groupID,
- type: "TIM.TYPES.GRP_AVCHATROOM",
- }).then((imResponse) => {
- switch (imResponse.data.status) {
- case uni.$TUIKitTIM.TYPES.JOIN_STATUS_WAIT_APPROVAL:
- // 等待管理员同意
- break;
- case uni.$TUIKitTIM.TYPES.JOIN_STATUS_SUCCESS:
- // 加群成功
- this.$nextTick(() => {
- this.login(info)
- });
- break;
- case "AlreadyInGroup":
- // 加群成功
- this.$nextTick(() => {
- if (sign) {
- this.login(info)
- } else {
- this.getHistoryMsg()
- }
- });
- break;
- case uni.$TUIKitTIM.TYPES.JOIN_STATUS_ALREADY_IN_GROUP:
- // 已经在群中
- break;
- default:
- break;
- }
- });
- },
- login(infos) {
- let data = {
- type: 102,
- nobel: {
- level: 1,
- // 贵族图标guard_icon || 等级图标exp_icon || 房主图标
- exp_icon: infos.exp_icon,
- is_guard: infos.is_guard,
- guard_swf: infos.is_guard == 1 ? infos.guard.swf : "",
- guard_name: infos.is_guard == 1 ? infos.guard.swf_name : "",
- is_room: infos.id == this.groupID ? 1 : 0,
- guard_icon: infos.is_guard == 1 ? infos.guard.icon : "",
- },
- };
- let to = this.groupID;
- const message = uni.$TUIKit.createCustomMessage({
- to,
- conversationType: "GROUP",
- payload: {
- data: JSON.stringify(data),
- },
- });
- uni.$TUIKit
- .sendMessage(message)
- .then((res) => {
- this.getHistoryMsg()
- })
- .catch((error) => {});
- },
- change(e) {
- this.current = e.index;
- if (e == 2) {
- setTimeout((res) => {
- this.$refs.detail3.getList({ uid: this.userInfo.uid, type: 0 });
- }, 100);
- }
- },
- setSeek(type) {
- if (this.toolbarTimer) {
- clearTimeout(this.toolbarTimer)
- }
- this.toolbarTimer = setTimeout(() => {
- this.toolbar = false
- this.toolbarTimer = null
- }, 3000)
- let t = this.player.getCurrentTime();
- let a = this.player.getDuration();
- t += type
- if (t < 0) {
- t = 0
- }
- if (t > a) {
- t = a
- }
- this.player.seek(t)
- },
- playToggle() {
- let status = this.player.getStatus();
- if (this.toolbarTimer) {
- clearTimeout(this.toolbarTimer)
- }
- this.toolbarTimer = setTimeout(() => {
- this.toolbar = false
- this.toolbarTimer = null
- }, 3000)
- if (status == 'playing') {
- this.isPlay = false
- this.userClick = true
- this.player.pause()
- } else {
- this.isPlay = true
- this.player.play()
- }
- },
- clickPlay() {
- try {
- var evt = document.createEvent('HTMLEvents')
- evt.initEvent('click', true, true)
- document.getElementById('palyevent').dispatchEvent(evt)
- } catch (error) {
- }
- },
- owerPlay() {
- this.isPlay = true
- this.player && this.player.play()
- },
- owerPlay1() {
- if (this.userClick) {
- return
- }
- this.owerPlay()
- },
- downloadTimerFun() {
- this.downloadShow = false
- this.downloadTimer = setTimeout(() => {
- this.downloadShow = true
- }, 60000 * 2)
- },
- adClick(info) {
- if (info.adver_url_one) {
- uni.$u.http
- .post("/api/live_streaming/click_adv", {
- type: this.liveType == 'game' ? 6 : 3,
- id: info.id,
- url: info.adver_url_one
- })
- .then((res) => {
- }).finally(() => {
- });
- window.open(info.adver_url_one)
- }
- },
- adClick1(info) {
- if (info.qr_url) {
- window.open(info.qr_url)
- }
- }
- },
- };
- </script>
- <style lang="scss">
- page {
- background-color: #f3f3f7;
- }
- .detail {
- position: relative;
- background: #f3f3f7;
- }
- .body {
- position: sticky;
- top: 0;
- z-index: 20;
- background-color: #f3f3f7;
- }
- @media screen and (orientation: landscape) {
- .body {
- position: relative;
- }
- }
- #palyevent {
- opacity: 0;
- position: absolute;
- top: 0;
- left: 0;
- }
- .icon-box {
- position: absolute;
- top: 50%;
- left: 50%;
- transform: translate(-50%, -50%);
- color: #fff;
- font-weight: 700;
- z-index: 9997;
- display: flex;
- align-items: center;
- background-color: rgba(0, 0, 0, 0.1);
- .u-icon {
- padding: 10px;
- }
- }
- .row {
- display: flex;
- align-items: center;
- text-align: center;
- background-color: rgb(18, 20, 21);
- color: #fff;
- font-size: 14px;
- .col {
- flex: 1;
- display: flex;
- align-items: center;
- justify-content: center;
- height: 20px;
- }
- .u-icon {
- margin: 0 5px;
- }
- }
- .tabs {
- position: relative;
- }
- .u-tabs {
- background-color: #fff;
- }
- .adver-box {
- position: relative;
- .qr_img {
- position: absolute;
- top: 0;
- right: 0;
- height: 100%;
- }
- }
- .ad {
- display: block;
- width: 100%;
- }
- </style>
|