onecric_h5/pages/Live/history-detail.vue

<!-- 直播间 -->
<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>