{% extends "_base.html" %}
{% block content %}

<h1 class="text-center">澄清湖旅遊導覽</h1>

<div style="display:flex; flex-direction:column; align-items: center; pointer-events: audo;">
	<!-- <button onclick="unmute()">unmute</button> -->
	<form onsubmit="askai(event)"></form>
		<!-- <input type="text" id="question" name="question"/>
		<input type="submit"> -->
		{% include "components/speechtext.html" %}
	</form>
	<br>
	<button onclick="connect()" id="btnConnect" style="pointer-events: none;">Connect</button>
	<!-- <video src="" id="video1" controls autoplay="true" muted="muted" style="display:none; visibility:hidden"/> -->
	<!-- <video src="" id="video1" controls autoplay="true" muted="muted" hidden/> -->
	<video src="" id="video1" style="width: 60%;" onclick="clickVideo();" hidden></video>
	<video src="" id="video2" style="width: 60%;" onclick="clickVideo();" hidden></video>
</div>

<script>
const video1 = document.querySelector('#video1');
const video2 = document.querySelector('#video2');
const btnConnect = document.querySelector('#btnConnect');
const searchbar = document.querySelector('.search');
var loading = false;
var idleTime, timeoutIdle, listenEnded;
// var mediaSource = new MediaSource();
var vidIntro, vidIdle;

const clickVideo = () => {
	setIdleChat(0);
}

const unmute = () => {
  console.log("video1.muted:", video1.muted);
  video1.muted = !video1.muted;
}

const connect = () => {
  // video1.style.display = 'block';
  // video1.hidden = false;
  // video1.style.visibility = 'visible'
  video1.muted = false;
  // video1.play();
	btnConnect.style.visibility = 'hidden'
	setIdleChat(0);
	searchbar.style['pointer-events'] = 'auto';
}

async function getVid(data) {
	// const vidBlob = await (await fetch(remoteVidUrl)).blob();
	const res = await fetch("/askai", {
		method: "POST",
    headers: {
      'Accept': 'application/json',
      'Content-Type': 'application/json'
    },
    body: JSON.stringify(data)
	})
	// for (var pair of res.headers.entries()) {console.log(pair[0]+ ': '+ pair[1]);}
	const vidBlob = await res.blob()
	console.log("vidBlob:", vidBlob)
	// We need array buffers to work with media source
	vidBuff = await vidBlob.arrayBuffer();
	console.log("vidBuff:", vidBuff);
	return {vidBuff, mimeType: res.headers.get('mimeDetail')};
}

async function prepareMediaSource(video, vid) {
	const mediaSource = new MediaSource();
	video.src = URL.createObjectURL(mediaSource);
	
	const sourceBuffer = await new Promise((resolve, reject) => {
		let listenSourceopen;
		const getSourceBuffer = () => {
			try {
				// const sourceBuffer = mediaSource.addSourceBuffer(`video/webm; codecs="vp9,opus"`);
				const sourceBuffer = mediaSource.addSourceBuffer(vid.mimeType);
				console.log(mediaSource.sourceBuffers)
				console.log(mediaSource.activeSourceBuffers)
				resolve(sourceBuffer);
			} catch (e) {
				reject(e);
			}
			if (listenSourceopen) mediaSource.removeEventListener('sourceopen', listenSourceopen);
		};
		console.log("mediaSource.readyState:", mediaSource.readyState)
		if (mediaSource.readyState === 'open') {
			getSourceBuffer();
		} else {
			listenSourceopen = mediaSource.addEventListener('sourceopen', getSourceBuffer);
		}
	});
	console.log({vid, mediaSource, sourceBuffer})

	sourceBuffer.appendBuffer(vid.vidBuff);
	// Listen for when append has been accepted and
	// You could alternative use `.addEventListener` here instead
	sourceBuffer.onupdateend = () => {
		console.log('sourceBuffer.onupdateend')
		// Nothing else to load
		mediaSource.endOfStream();
		// Start playback!
		// Note: this will fail if video is not muted, due to rules about
		// autoplay and non-muted videos
		// video.play();
	};
	// return mediaSource;
}


function setIdleChat(waitForTime, isThenResetVideo1=false) {
	if (timeoutIdle) clearTimeout(timeoutIdle);
	timeoutIdle = setTimeout(async ()=>{
		video2.pause();
		video2.hidden = true;
		video1.hidden = false;
		video1.play();
		loading = true;
		searchbar.style['pointer-events'] = 'none';

		video1.addEventListener("ended", async(event) => {
			console.log("intro video has played", event);
			loading = false;
			searchbar.style['pointer-events'] = 'auto';
			video1.hidden = true;
			video2.hidden = false;
			video2.play();
			
			if (isThenResetVideo1) {
				await prepareMediaSource(video1, vidIntro);
			}
			// setIdleChat(Math.floor(Math.random() * 20000) + 10000);
		}, {once : true});
	}, waitForTime)
}

function cancelIdelMonitor() {
	clearTimeout(timeoutIdle);
}

async function init() {
	vidIntro = await getVid({mode:'intro', question:'sdf08j3fi'})
	vidIdle = await getVid({mode:'idle', question:'dasfj0w3l'})

	await prepareMediaSource(video1, vidIntro);
	video1.loop = false;
	
	await prepareMediaSource(video2, vidIdle);
	video2.loop = true;

	btnConnect.style['pointer-events'] = 'auto';
}
init();



async function askai(event) {
	e.preventDefault();
	
	let res = await fetch("/askai", {
		method: "POST",
    headers: {
      'Accept': 'application/json',
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({question: event.target.elements.question.value})
	})
	const mediaSource1 = new MediaSource();
	console.log("sourceBuffer:", sourceBuffer)
	video1.src = URL.createObjectURL(mediaSource1);
	console.log("sourceBuffer:", sourceBuffer)
	const vidBlob = await res.blob();
	const vidBuff1 = await vidBlob.arrayBuffer();
	const sourceBuffer1 = await prepareSourceBuffer(mediaSource1, `video/mp4; codecs="avc1.64001E,mp4a.40.2"`)
	sourceBuffer1.appendBuffer(vidBuff1);
	sourceBuffer1.onupdateend = () => {
		mediaSource1.endOfStream();
		video1.loop = false;
		video1.play();
	}

	video1.addEventListener("ended", (event) => {
		console.log("video has played", event)
		video1.src = url_idle;
		sourceBuffer.appendBuffer(vidBuff);
		sourceBuffer.onupdateend = () => {
			mediaSource1.endOfStream();
			video1.loop = true;
			video1.play();
		}
	})
}

</script>

{% endblock %}