{% extends "reusable/form/base.html" %}
{% block input %}
    <button class="btn-secondary" id="recordButton" type="button">record</button>
    <script type="module">
	import { record, createStream, showStream, fileInput, createFileName } from "/static/scripts/videoCapture.js"
	const recordButton = document.getElementById("recordButton")
	const form = document.getElementById("captureForm")
	const fileI = fileInput();
	
	recordButton.onclick = async (e) => {
		const stream = await createStream()
		const preview = document.createElement("video")
		const result = document.createElement("video")
		result.id = "video_result"
		const range = document.getElementById("video_range")


		result.controls = true;

		preview.width = 480
		preview.height = 480
		preview.srcObject = stream;
		preview.onloadedmetadata = function() {
			preview.play();
		};

		form.appendChild(preview);

		
		const chunks = await record(stream, 3000);
		const dt = new DataTransfer();
		const file = new File(chunks, createFileName(), { type: "video/webm" })

		dt.items.add(file);
		fileI.files = dt.files;
		form.appendChild(fileI);


		const blob = new Blob(chunks)
		
		result.src = URL.createObjectURL(blob)
		result.onloadedmetadata = function() {
			preview.play();
		};
		preview.replaceWith(result)
	}
    </script>
{% endblock %}