let pageNum = "";

getVideoList();

/**
 * 发送ajax请求数据
 */
function getVideoList() {
  Http("/list", { page: pageNum }, res=> {
    let MMList = res.data;
    pageNum = MMList.pcursor;
    MMList.list.forEach(function (val,index) {
      RenderList(val);
    })
  })
}

function RenderList(val) {
  $("ul").append(`
          <li class="list">
            <div class="back">
              <div class="zz" style="background: url('${val.thumbnailUrl}'); background-position: center center;"></div>
              <img src="${val.thumbnailUrl}"/>
            </div>
            <div class="list-bottom">
              <div class="bottom-info">
                <a target="_blank" title="${val.user.id}" href="https://live.kuaishou.com/profile/${val.user.id}">
                  <img class="avatar" src="${val.user.avatar}"/>
                  <span class="title">${val.caption}</span>
                </a>
              </div>
              <div class="action" principalId="${val.user.id}" photoId="${val.id}">
                <a class="down">下载</a>
                <a class="play">播放</a>
              </div>
            </div>
          </li>
  `);

  BindPlayClick();
  BindDownClick();
}

// 播放视频
function BindPlayClick() {
  document.querySelectorAll(".play").forEach((val,index) =>{
    val.onclick= function () {
      Http('/play',{
        principalId: $(val).parent().attr("principalId"),
        photoId: $(val).parent().attr("photoId")
      },url=> {
        $(".video video").attr("src", url.playUrl);
        $(".video").slideDown("slow");
      })
    }
  })
}

// 下载视频
function BindDownClick() {

  document.querySelectorAll(".down").forEach((val,index) =>{
    val.onclick= function () {
      Http('/play',{
        principalId: $(val).parent().attr("principalId"),
        photoId: $(val).parent().attr("photoId")
      },url=> {
        downMp4( url.playUrl, $(val).parent().attr("photoId"))
      })
    }
  });
}


// 滚动加载数据
$(window).scroll(function () {
  var scrollTop = $(this).scrollTop();
  var scrollHeight = $(document).height();
  var windowHeight = $(this).height();
  if (scrollTop + windowHeight == scrollHeight) {
    getVideoList()
    console.log("到底了,发起请求")
  }
});

// 关闭视频播放弹窗
$(".close").click(function () {
  $("video").get(0).pause();
  $(".video video").attr("src", "");
  $(".video").slideUp("slow");
});

// video 父元素被悬浮就开始视频播放
// 以实现不静音而自动播放
$(".video").mouseover(function () {
  $("video").get(0).play()
});


// 发送ajax请求
function Http(URL, params,callback) {
  $.ajax({
    url: `http://127.0.0.1:3000/api${URL}`,
    type: 'GET',
    data: params,
    success: (res)=> {
      callback(res)
    }
  })
}

// 下载MP4视频
function downMp4(urls, photoId) {
  fetch(urls).then(res => res.blob()).then(blob => {
    const a = document.createElement('a');
    
    document.body.appendChild(a);
    a.style.display = 'none';
    const url = window.URL.createObjectURL(blob);

    a.href = url;
    a.download = `bmy-${photoId}.mp4`;
    a.click();
    document.body.removeChild(a);
    window.URL.revokeObjectURL(url);
  });
}