const isSupportPictureInPictureEnabled = "pictureInPictureEnabled" in document;
const videoElement = document.querySelector("video");
const enterPipButton = document.querySelector('[data-target="enter-pip"]');
const exitPipButton = document.querySelector('[data-target="exit-pip"]');
const notice = document.querySelector('[data-target="notice"]');

checkPipIsSupported();

enterPipButton.addEventListener("click", e => {
  e.preventDefault();
  // 觸發影片進入 PIP 模式
  videoElement.requestPictureInPicture().catch(error => {
    // Error Handling
    console.log({
      name: error.name,
      message: error.message
    });
  });
});

exitPipButton.addEventListener("click", e => {
  e.preventDefault();
  // 影片離開 PIP 模式
  document.exitPictureInPicture().catch(error => {
    // Error Handling
    console.log({
      name: error.name,
      message: error.message
    });
  });
});

/**
 * 事件
 **/
videoElement.addEventListener("enterpictureinpicture", () => {
  notice.textContent = "Enter Picture-in-Picture mode";
});

videoElement.addEventListener("leavepictureinpicture", () => {
  notice.textContent = "Exit Picture-in-Picture mode";
});

/**
 * 在 PIP 的視窗上增加前一部、後一部的功能鍵
 **/
navigator.mediaSession.setActionHandler("previoustrack", () => {
  // Go to previous track
});

navigator.mediaSession.setActionHandler("nexttrack", () => {
  // Go to next track
});

/**
 * 如果瀏覽器不支援 PIP
 **/
function checkPipIsSupported() {
  if (!isSupportPictureInPictureEnabled) {
    notice.textContent = "Picture In Picture is not supported.";

    enterPipButton.classList.add("hidden");
    enterPipButton.disabled = true;

    exitPipButton.classList.add("hidden");
    exitPipButton.disabled = true;
  } else {
    notice.textContent = "Picture In Picture is supported.";
  }
}