kristianpedersen/index.html

## index.html
<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		body {
			width: 100vw;
			height: 100vw;
			background-color: darkseagreen;
			font-family: sans-serif;
			font-size: 32px;
			text-align: center;
		}

		body.recording {
			background-color: crimson;
		}

		body.waiting {
			background-color:sandybrown;
		}

		p#info {
			color: white;
		}

		button {
			padding: 50px;
		}

		#status {
			text-align: center;
		}

		video {
			position: absolute;
			bottom: 0;
			left: 50%;
			transform: translate(-50%);
			/* max-width: 100vw; */
			max-height: 50vh;
		}
	</style>
</head>

<body>
	<div id="status">
		<p id="info">Hei!</p>
		<button id="record">🔴 Opptak</button>
	</div>

	<video src="" loop controls></video>

	<script src="/socket.io/socket.io.js"></script>
	<script>
		let playing = false
		const socket = io()
		const infoText = document.querySelector("p#info")
		const btnRecord = document.querySelector("button#record")
		const btnLive = document.querySelector("button#live")
		// const btnReboot = document.querySelector("button#reboot")
		const video = document.querySelector("video")

		// Receive data from node.js
		socket.on("newFile", async function receiveFromNodeJS(data) {
			console.log("Data: " + data)
			if (data.includes("loading")) {
				document.body.classList.remove("recording")
				document.body.classList.add("waiting")
			}

			if (data.includes(".mp4") && !playing) {
				console.log("EEYEYEYYE")
				playing = true
				document.body.classList.remove("waiting")
				btnRecord.disabled = false
				video.src = data.slice(4).replace("\\", "/")
				await video.play()
				console.log("feridg video")
				playing = false
			}
			infoText.innerHTML = data
		})

		// Send data to node.js
		btnRecord.addEventListener("click", function startRecording() {
			document.body.classList.add("recording")
			downloadStarted = false
			socket.emit("userInput")
			btnRecord.disabled = true
		})

		let downloadStarted = false
		function onNotifyEvent(data) {
			const d = JSON.parse(data)
			if (d.videoState === "play") {
				console.log("Jippi")
				socket.emit("play")
			}
		}

		var evtSource = new EventSource("http://172.20.66.181/control/subscribe")
		evtSource.addEventListener("notify", event => onNotifyEvent(event.data))
	</script>
</body>

</html>
	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
	body {
	width: 100vw;
	height: 100vw;
	background-color: darkseagreen;
	font-family: sans-serif;
	font-size: 32px;
	text-align: center;
	}

	body.recording {
	background-color: crimson;
	}

	body.waiting {
	background-color:sandybrown;
	}

	p#info {
	color: white;
	}

	button {
	padding: 50px;
	}

	#status {
	text-align: center;
	}

	video {
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translate(-50%);
	/* max-width: 100vw; */
	max-height: 50vh;
	}
	</style>
	</head>

	<body>
	<div id="status">
	<p id="info">Hei!</p>
	<button id="record">🔴 Opptak</button>
	</div>

	<video src="" loop controls></video>

	<script src="/socket.io/socket.io.js"></script>
	<script>
	let playing = false
	const socket = io()
	const infoText = document.querySelector("p#info")
	const btnRecord = document.querySelector("button#record")
	const btnLive = document.querySelector("button#live")
	// const btnReboot = document.querySelector("button#reboot")
	const video = document.querySelector("video")

	// Receive data from node.js
	socket.on("newFile", async function receiveFromNodeJS(data) {
	console.log("Data: " + data)
	if (data.includes("loading")) {
	document.body.classList.remove("recording")
	document.body.classList.add("waiting")
	}

	if (data.includes(".mp4") && !playing) {
	console.log("EEYEYEYYE")
	playing = true
	document.body.classList.remove("waiting")
	btnRecord.disabled = false
	video.src = data.slice(4).replace("\\", "/")
	await video.play()
	console.log("feridg video")
	playing = false
	}
	infoText.innerHTML = data
	})

	// Send data to node.js
	btnRecord.addEventListener("click", function startRecording() {
	document.body.classList.add("recording")
	downloadStarted = false
	socket.emit("userInput")
	btnRecord.disabled = true
	})

	let downloadStarted = false
	function onNotifyEvent(data) {
	const d = JSON.parse(data)
	if (d.videoState === "play") {
	console.log("Jippi")
	socket.emit("play")
	}
	}

	var evtSource = new EventSource("http://172.20.66.181/control/subscribe")
	evtSource.addEventListener("notify", event => onNotifyEvent(event.data))
	</script>
	</body>

	</html>