@import url("https://fonts.googleapis.com/css?family=Barlow&display=swap");

html {
  box-sizing: border-box;
}

body {
  margin: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(to top, #611b04, #d5ba4e);}

.button-container {
  border: 2px solid black;
  padding: 10px;
  border-radius: 7px;
  box-shadow: inset 0 20px 4px -19px rgba(255, 255, 255, 0.7);
}

button {
  cursor: pointer;
  outline: none;
  width: 120px;
  height: 75px;
  font-family: Barlow, sans-serif;
  font-size: 25px;
  color: white;
  text-shadow: 0 2px 5px black;
  background: linear-gradient(to top, #bb9604, #4d1a1a);
  border: 2px solid rgb(187, 2, 2);
  border-radius: 7px;
  box-shadow: inset 0 20px 4px -19px rgba(255, 255, 255, 0.4), 0 12px 12px 0 rgba(0, 0, 0, 0.3);
}

button:hover {
  background: linear-gradient(to bottom, #a40f0f, #e7d40b);
}

button:active {
  transform: translateY(3px);
  box-shadow: 0 6px 6px 0 rgba(0, 0, 0, 0.3);
}

const videoElement = document.getElementById('video');
const button = document.getElementById('button');
//버튼과 비디오 가져오기.

//비동기 함수, prompt로 사용자에게 어떤 미디어 스크림을 표시할지를 선택하는 메시지 표시. 그걸 비디오 요소로 전달하고 플레이를 한다.
async function selectMediaStream() {
  try {
    const mediaStream = await navigator.mediaDevices.getDisplayMedia();
    videoElement.srcObject = mediaStream;
    videoElement.onloadedmetadata = () => {
      videoElement.play();
    };
  } catch (error) {
    // Catch Error Here
  }
}

button.addEventListener('click', async () => {
    //버튼을 비활성화.
    button.disabled = true;
    //Picture in Picture를 시작.
    await videoElement.requestPictureInPicture();
    //리셋 버튼
    button.disabled = false;
});

selectMediaStream();