<template>
  <view class="container" style="background-color: #000; position: relative">
    <!-- ios不能播放私有加密提示信息 start-->
    <view
      v-if="show"
      style="
        width: 100%;
        height: 200px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        font-size: 38rpx;
        text-align: center;
      "
    >
      此设备暂不支持观看当前视频<br />请移步到安卓手机进行学习！
    </view>
    <!-- ios不能播放私有加密提示信息 end-->
    <view style="width: 100%; height: 200px" v-else>
      <div
        style="background-color: #000"
        ref="videoContent"
        @tap="renderScript.handleClick"
        id="url-player-test"
        :videoData="videoData"
        :winWidth="winWidth"
        :winHeight="winHeight"
        :currentVideoList="currentVideoList"
        :firstTime="firstTime"
        :isfresh="isfresh"
        :platform="platform"
        :isSetFirstTime="isSetFirstTime"
        :isChange="isChange"
        :change:videoData="renderScript.receiveMsg"
        :change:winWidth="renderScript.receiveWinWidth"
        :change:winHeight="renderScript.receiveWinHeight"
        :change:firstTime="renderScript.receiveFirstTime"
        :change:isSetFirstTime="renderScript.receiveisSetFirstTime"
        :change:isfresh="renderScript.receiveIsfresh"
        :change:platform="renderScript.receiveplatform"
        :change:isChange="renderScript.receiveIsChange"
        :change:currentVideoList="renderScript.receiveVideoList"
      ></div>
      <div @tap="renderScript.emitData" ref="videoContent1" v-show="false">
        直接调用renderjs中的emitData的方法,传递当前播放时长
      </div>
      <div @tap="renderScript.endEmitData" ref="videoContent2" v-show="false">
        监听结束方法，记录播放时长
      </div>
      <div
        @tap="renderScript.changeVideoData"
        ref="videoContent3"
        v-show="false"
      >
        监听切换视频方法
      </div>
      <div @tap="renderScript.emitSetData" ref="videoContent4" v-show="false">
        监听第一次初始播放时长,开始进行接口存储时间
      </div>
      <div @tap="renderScript.emitopenShow" ref="videoContent5" v-show="false">
        在ios端打开视频提示（不能播放私有加密）
      </div>
      <!-- 全屏按钮 start -->
      <!-- 注意：主要用于安卓端，因为ios手机会被劫持 -->
      <div class="fullScreenButton-container">
        <div
          :class="`prism-fullscreen-btn ${isFullScreen ? 'fullscreen' : ''}`"
          @tap="renderScript.changeVideoScreen"
        ></div>
      </div>
      <!-- 全屏按钮 end -->
    </view>
  </view>
</template>

<script>
import $ from "jquery";

export default {
  data() {
    return {
      player: null, //播放器
      videoTimer: null, //定时器
      curTime: null, //播放器当前播放进度
      curStatus: null, //播放器当前播放状态
      playerConfig: {
        id: "url-player-test",
        width: "100%", //容器的大小
        height: "100%", //容器的大小
        qualitySort: "asc",
        cover: "",
        autoplay: true,
        isLive: false,
        rePlay: false,
        playsinline: true,
        controlBarVisibility: "hover",
        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: "prism-speed-selector",
                align: "tr",
                x: 15,
                y: 12,
              },
              {
                name: "volume",
                align: "tr",
                x: 5,
                y: 10,
              },
            ],
          },
        ],
      },
    };
  },

  watch: {
    //播放器当前播放进度
    curTime(val) {
      if (this.curTime !== null && this.curStatus !== null) {
        this.$refs.videoContent1.click();
      }
    },
  },

  mounted() {
    this.loadWebPlayerSDK(); //引入播放器sdk、css
  },

  methods: {
    //检验视频 获取加密权限
    checkValue() {
      if (!this.videoData.playAuth || !this.currentVideoList) {
        setTimeout(() => {
          this.checkValue();
        }, 1000);
      } else {
        this.initAliyunPlayer();
      }
    },

    //引入播放器sdk、css
    loadWebPlayerSDK() {
      return new Promise((resolve, reject) => {
        const s_tag = document.createElement("script"); // 引入播放器js
        s_tag.type = "text/javascript";
        s_tag.src =
          "https://g.alicdn.com/apsara-media-box/imp-web-player/2.20.3/aliplayer-min.js";
        s_tag.charset = "utf-8";
        s_tag.onload = () => {
          const s_tag1 = document.createElement("script"); // 引入播放器js
          s_tag1.type = "text/javascript";
          s_tag1.src =
            "https://player.alicdn.com/aliplayer/presentation/js/aliplayercomponents.min.js";
          s_tag1.charset = "utf-8";
          s_tag1.onload = () => {
            this.checkValue();
            resolve();
          };
          document.body.appendChild(s_tag1);
        };
        document.body.appendChild(s_tag);

        const l_tag = document.createElement("link"); // 引入播放器css
        l_tag.rel = "stylesheet";
        l_tag.href =
          "https://g.alicdn.com/apsara-media-box/imp-web-player/2.20.3/skins/default/aliplayer-min.css";

        document.body.appendChild(l_tag);
      });
    },
    //初始化播放器
    initAliyunPlayer() {
      if (this.player) {
        this.player.dispose();
        $("#url-player-test").empty();
        this.player = null;
      }
      var fullScreenButtonComponent = Aliplayer.Component({
        init: function (status, toAddress) {
          this.fullScreenStatus = status;
          this.$html = $(".fullScreenButton-container");
        },
        createEl: function (el) {
          this.$html.find(".ad").attr("src", this.adAddress);
          var $adWrapper = this.$html.find(".ad-wrapper");
          $adWrapper.attr("href", this.toAddress);
          $adWrapper.click(function () {});

          $(el).find(".prism-time-display").after(this.$html);
        },
      });
      //设置播放基本配置
      var playerOptions = {
        ...this.playerConfig,
        components: [
          {
            name: "adComponent", //自定义全屏组件
            type: fullScreenButtonComponent,
          },
          {
            name: "RateComponent", //倍速组件
            type: AliPlayerComponent.RateComponent,
          },
        ],
      };
      console.log("playerOptions at line 468:", playerOptions);

      if (this.videoData.type == 1) {
        if (this.videoData.m3u8Url == null || this.videoData.m3u8Url == "") {
          //这是私有加密的视频
          if (this.$platform == "ios") {
            //ios 不能播放提示信息
            this.$refs.videoContent5.click();
          } else {
            playerOptions = {
              ...playerOptions,
              vid: this.videoData.videoId,
              playauth: this.videoData.playAuth, // 必选参数，参数值可通过调用GetVideoPlayAuth接口获取。
              encryptType: 1, // 必选参数，当播放私有加密流时需要设置本参数值为1。其它情况无需设置。
              playConfig: {
                EncryptType: "AliyunVoDEncryption",
              },
            };
          }
        } else if (
          this.videoData.m3u8Url != null ||
          this.videoData.m3u8Url != ""
        ) {
          //这是标准加密的视频
          playerOptions = {
            ...playerOptions,
            source: this.videoData.m3u8Url,
            // playConfig: {
            // 	EncryptType: "HLSEncryption",
            // 	MtsHlsUriToken:this.videoData.mtsHlsUriToken
            // },
          };
        }
      } else {
        //这是没有加密的视频
        playerOptions = {
          ...playerOptions,
          source: this.videoData.videoUrl,
        };
      }

      var player = new Aliplayer(playerOptions, function (player) {});

      clearInterval(this.videoTimer);
      this.videoTimer = null;
      this.videoTimer = setInterval(() => {
        var that = this;
        that.curTime = parseInt(this.player.getCurrentTime());
        that.curStatus = this.player.getStatus();
      }, 60000);

      player.on("ready", () => {
        this.player = player;

        if (this.platform == "ios") {
          this.player.one("timeupdate", () => {
            this.player.seek(this.firstTime);
          });

          this.player.on("canplay", function () {
            console.log("这是ios数据缓冲初次设置播放位置判断！！！！");
            this.player.seek(this.firstTime);
          });
        } else {
          this.player.seek(this.firstTime);
        }

        this.$refs.videoContent4.click();
      });

      this.player.on("ended", function () {
        this.$refs.videoContent2.click();
      });
    },

    //调用 recordTime 方法 存本地播放时长
    emitData(event, ownerInstance) {
      ownerInstance.callMethod("recordTime", {
        time: this.curTime,
        status: this.curStatus,
      });
    },

    //调用 setVideoFirtsetTime 设置初始播放
    emitSetData(event, ownerInstance) {
      console.log("调用 setVideoFirtsetTime 设置初始播放");
      ownerInstance.callMethod("setVideoFirtsetTime");
    },

    //调用 openShow 设置ios 不能播放私用加密 提示信息
    emitopenShow(event, ownerInstance) {
      ownerInstance.callMethod("openShow");
    },

    //调用 handleEnd 存储视频播放信息
    endEmitData(event, ownerInstance) {
      ownerInstance.callMethod("handleEnd");
    },

    //调用 screenChange + 设置全屏
    changeVideoScreen(event, ownerInstance) {
      var status = this.player.fullscreenService.getIsFullScreen();
      ownerInstance.callMethod("screenChange", {
        status: status,
        primary: status ? "portrait" : "landscape",
      });

      if (status) {
        setTimeout(() => {
          plus.screen.lockOrientation("portrait-primary"); //锁死屏幕方向为竖屏
          this.player.fullscreenService.cancelFullScreen();
        }, 100);
      } else {
        this.player.fullscreenService.requestFullScreen();
        setTimeout(() => {
          plus.screen.lockOrientation("landscape-primary");
        }, 100);
      }
    },

    //调用 changeVideoData 切换播放源
    changeVideoData(event, ownerInstance) {
      ownerInstance.callMethod("changeVideoData");
    },

    //切换播放源
    async receiveIsChange(newValue) {
      if (this.isChange) {
        this.checkValue();
      }
    },

    handleClick(event, ownerInstance) {}, //点击播放器

    receiveFirstTime(newValue, oldValue, ownerVm, vm) {}, //播放时间

    receiveisSetFirstTime(newValue, oldValue, ownerVm, vm) {}, //是否刚开始设置播放时间

    receiveplatform(newValue) {}, //获取设备型号

    receiveVideoList(newValue, oldValue, ownerVm, vm) {}, //获取视频列表

    receiveVideoData(newValue, oldValue, ownerVm, vm) {}, //获取视频信息

    receiveWinWidth(newValue, oldValue, ownerVm, vm) {}, //获取视频宽度

    receiveWinHeight(newValue, oldValue, ownerVm, vm) {}, //获取视频高度
  },
};
</script>
<style>
.container {
  width: 100vw;
  height: auto;

  /deep/.pause {
    width: 60rpx !important;
    height: 60rpx !important;
  }
}

.fds {
  background-color: blue;
  height: 600rpx;
  position: fixed;
  top: 60rpx;
}

.returnBack {
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  height: 88rpx;
  padding-left: 20rpx;
}

.txt {
  color: #fff;
}

.right_title {
  background: #000;
  height: 96rpx;
  justify-content: space-between;
  flex-direction: row;
  align-items: center;
  margin-left: auto;
}

.return {
  flex-direction: row;
  align-items: center;
  color: #fff;
}

.right_handle {
  width: 200rpx;
  flex-direction: row;
  justify-content: flex-end;
  padding-right: 20rpx;
}

cover-view {
  display: block;
  line-height: 1.2;
  overflow: hidden;
  white-space: nowrap;
  pointer-events: auto;
}

cover-view {
  visibility: visible !important;
}

cover-image {
  visibility: visible !important;
}

.fullScreenButton-container {
  color: #fff;
  float: right;
  height: 35px;
  margin-top: 6px;
  margin-right: 5px;
  display: flex;
  align-items: center;
  position: relative;

  i {
    color: #fff;
    display: inline-block;
    font-size: 22px;
    display: block;
    margin-top: 7px;
    cursor: pointer;

    & + i {
      margin-left: 3px;
    }

    @media (min-width: 768px) {
      &:hover + .player-tooltip {
        display: block;
      }
    }
  }

  .player-tooltip {
    &.prev {
      left: -10px;
    }

    &.list {
      left: 5px;
    }

    &.next {
      right: -12px;
    }
  }
}

.playlist-content {
  position: absolute;
  right: 0;
  width: 0px;
  padding-bottom: 48px;
  box-sizing: border-box;
  height: 100%;
  transition: all 0.38s ease-in-out;
  overflow: hidden;

  .list {
    background-color: #000;
    background-color: rgba(0, 0, 0, 0.3);
    height: 100%;
    overflow: auto;

    .video-item {
      color: #fff;
      padding: 0px 10px;
      line-height: 35px;
      font-size: 14px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      cursor: pointer;

      &.active {
        background-color: #000;
        color: #00ddff;
      }

      @media (min-width: 768px) {
        &:hover {
          background-color: #000;
          color: #00ddff;
        }
      }
    }
  }
}

.player-tooltip {
  position: absolute;
  display: none;
  font-size: 12px;
  color: #fff;
  line-height: 28px;
  letter-spacing: 0;
  text-align: center;
  background: #3c3c3c;
  box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.1);
  height: 28px;
  top: -48px;
  padding: 0 5px;
  white-space: nowrap;
}

.playlist-skip-tip {
  padding: 5px 15px;
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 30;
  line-height: 30px;
  font-size: 14px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.8);
  color: #000;
  text-align: center;
  transform: translate(-50%, -50%);
}

#rotating-div {
  width: 100vw;
  height: 100vh;
  background-color: #3498db;
  transform: rotate(90deg);
  /* 旋转90度 */
  transform-origin: center center;
  /* 设置旋转中心点在div中心 */
  position: fixed;
  /* 固定定位，全屏显示 */
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
}
</style>
