<?php if (!defined('_GNUBOARD_')) exit; ?>

<style>
#mediaDiv { padding:30px 30px 25px 30px; border:1px solid #cccccc; border-radius:20px; background-color:#f1f3f4; box-sizing:border-box; }
#mediaDiv img { display:block; width:100%; border:1px solid #cccccc; border-radius:15px; box-sizing:border-box; }
#mediaDiv audio { display:block; width:100%; height:30px; margin:0 auto; margin-top:20px;  }
@media screen and (hover:none) and (pointer:coarse) {
    @media (orientation: portrait) { #mediaDiv { padding:15px 15px 10px 15px; } #mediaDiv audio { margin-top:5px; } }
    @media (orientation: landscape) { #mediaDiv { padding:25px 25px 20px 25px; } #mediaDiv audio { margin-top:15px; } }
}
</style>
<script>
document.querySelector("#bo_v_img").remove();
document.querySelector("#bo_v_file").remove();
document.querySelector("#bo_v_con").insertAdjacentHTML("beforebegin", "<div id='mediaDiv'></div>");
<?php
for ($i = 1; $i < count($view['file']) - 1; $i++) {
	$topString = $i == 1 ? 'imageList=["' : '"';
	$bottomString = ($i == count($view['file']) - 2) ? '"];' : '",';
	echo $topString.$view['file'][$i]['path'].'/'.$view['file'][$i]['file'].$bottomString;
}
?>
document.querySelector("#bo_v_con").remove();
document.querySelector("#mediaDiv").innerHTML = "<img src='" + imageList[0] + "'>";
document.querySelector("#mediaDiv").innerHTML += "<audio src='<?php echo $view['file'][0]['path'].'/'.$view['file'][0]['file']; ?>' autoplay loop controls controlslist='nodownload'></audio>";
timeList = ("<?php echo $view['wr_1']; ?>").split(",");
setInterval(() => {
	for (sec in timeList) if (document.querySelector("#mediaDiv audio").currentTime >= timeList[sec].trim()) document.querySelector("#mediaDiv img").src = imageList[sec];
}, 100);
document.querySelector("#mediaDiv audio").addEventListener("ended", () => { document.querySelector("#mediaDiv img").src = imageList[0]; });
</script>