:root {
	--brown: #24221b;
	--cream: #e4dcc9;
}

body {
	display: flex;
	flex-direction: column;
	height: 100vh;
	margin: 1em;
	align-items: center;
	background-color: var(--cream);

	/* optional */
	gap: 1em;
	font-family: "IBM Plex Mono";
	font-size: 20px;
	font-weight: bold;
	letter-spacing: 2px;
	user-select: none;
}

/* MAIN STYLES FOR PLAY BUTTON */
#video-container {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	height: 394px;
	width: 700px;
	border: 3px solid var(--brown);
	border-radius: 5px;
	position: relative;
	cursor: none;
	max-width: 100%;
}

#play-button {
	position: absolute;
	border: 3px solid var(--brown);
	border-radius: 100px;
	width: 120px;
	height: 120px;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	background-color: var(--cream);
	opacity: 1;
	cursor: none;
}

#video {
	height: 100%;
	width: 100%;
	object-fit: cover;
}

.play-icon {
	font-size: 20px;
	color: var(--brown);
}

/* END OF MAIN STYLES FOR PLAY BUTTON */

/* Optional */

a {
	text-decoration: none;
	color: inherit;
}

::placeholder {
	color: var(--brown);
	opacity: 30%;
}

::selection {
	background-color: var(--brown);
	color: var(--cream);
}

.info {
	display: flex;
	flex-direction: row;
	gap: 1em;
	width: 700px;
	height: 50px;
	max-width: 100%;
}

.button {
	border: 3px solid var(--brown);
	background-color: var(--brown);
	color: var(--cream);
	border-radius: 50px;
	display: flex;
	align-items: center;
	width: 30%;
	justify-content: center;

	font-family: "IBM Plex Mono";
	font-size: 20px;
	font-weight: bold;
	letter-spacing: 2px;
	cursor: pointer;
}

.button:hover {
	background-color: var(--cream);
	color: var(--brown);
}

.button > p {
	margin: 0;
}

.one {
	width: 70%;
	padding: 0 20px;
	border: 3px solid var(--brown);
	border-radius: 50px;
	display: flex;
	align-items: center;
	background-color: var(--cream);

	font-family: "IBM Plex Mono";
	font-size: 20px;
	font-weight: bold;
	letter-spacing: 2px;
}

.description {
	height: fit-content;
	box-sizing: border-box;
	padding: 20px 20px;
	border: 3px solid var(--brown);
	border-radius: 20px;
	display: flex;
	flex-direction: column;
	background-color: var(--cream);
	font-size: 16px;
}

.description > * {
	margin: 0;
}

.link {
	border-bottom: 2px solid var(--brown);
}

.link:hover {
	background-color: var(--brown);
	color: var(--cream);
}

// MAIN PART FOR THE VIDEO AND PLAY BUTTON

const videoContainer = document.getElementById("video-container");
const playButton = document.getElementById("play-button");

videoContainer.addEventListener("mousemove", function (event) {
	const containerRect = videoContainer.getBoundingClientRect();
	const mouseX = event.clientX - containerRect.left;
	const mouseY = event.clientY - containerRect.top;

	const buttonWidth = playButton.offsetWidth;
	const buttonHeight = playButton.offsetHeight;
	const buttonX = mouseX - buttonWidth / 2;
	const buttonY = mouseY - buttonHeight / 2;

	const maxButtonX = containerRect.width - buttonWidth;
	const maxButtonY = containerRect.height - buttonHeight;
	playButton.style.left = Math.min(Math.max(buttonX, 0), maxButtonX) + "px";
	playButton.style.top = Math.min(Math.max(buttonY, 0), maxButtonY) + "px";
});

videoContainer.addEventListener("mouseleave", function () {
	setTimeout(function () {
		playButton.style.left = "50%";
		playButton.style.top = "50%";
		playButton.style.transform = "translate(-50%, -50%) scale(1)";
		playButton.style.transition = "all 0.3s ease-out";
	}, 50);
});

videoContainer.addEventListener("mouseover", function () {
	playButton.style.transition = "transform ease-out 0.3s";
	playButton.style.transform = "scale(1.2)";
});

const video = document.getElementById("video");

videoContainer.addEventListener("mouseenter", function () {
	if (!video.paused) {
		playButton.style.opacity = "1";
	}
});

videoContainer.addEventListener("mouseleave", function () {
	if (!video.paused) {
		playButton.style.opacity = "0";
		playButton.style.transition = "opacity ease 1s";
	}
});

videoContainer.addEventListener("click", function () {
	if (video.paused) {
		video.play();
		playButton.innerHTML =
			'<span class="pause-icon"><i class="fa fa-solid fa-pause"></i></span>';
	} else {
		video.pause();
		playButton.innerHTML =
			'<span class="play-icon"><i class="fa fa-solid fa-play"></i></span>';
	}
});

video.addEventListener("ended", function () {
	playButton.innerHTML =
		'<span class="play-icon"><i class="fa fa-solid fa-play"></i></span>';
	playButton.style.opacity = "1";
});

// END OF MAIN PART FOR THE VIDEO AND PLAY BUTTON

// Optional - Code for inputting video
const videoSource = document.getElementById("video-source");
const videoUrl = document.getElementById("video-url");
const loadButton = document.getElementById("load-button");

function loadVideo() {
	const url = videoUrl.value.trim();
	if (!url) return;
	videoSource.setAttribute("src", url);
	video.load();
	video.play();
}

loadButton.addEventListener("click", function () {
	loadVideo();
	video.play();
	playButton.innerHTML =
		'<span class="pause-icon"><i class="fa fa-solid fa-pause">	</i></span>';
	playButton.style.opacity = "0";
	playButton.style.transition = "opacity ease 1s";
});