spee.ch/views/partials/asset.handlebars

<div class="panel">
	<div id="asset-placeholder" data-filepath="{{{fileInfo.filePath}}}">
		<p> loading... </p>
	</div>
</div>

<script src="/socket.io/socket.io.js"></script>
<script type="text/javascript">
	var socket = io();
	var filePath = document.getElementById('asset-placeholder').dataset.filepath;
	if (filePath) {
		// send request for the file
		socket.emit('asset-request', filePath);
		// update the html
		document.getElementById('asset-placeholder').innerHTML = '<p>Loading...</p><div id="progress-bar"></div>';
		// start a progress animation
		createProgressBar(document.getElementById('progress-bar'), 12);
	}
	// wait for the file to be sent
	socket.on('asset-transfer', function(data) {
		switch (data.type) {
			case 'image/jpeg':
			case 'image/gif':
			case 'image/png':
				const base64Image = 'data:' + data.type + ';base64,' + data.buffer;
				document.getElementById("asset-placeholder").innerHTML = '<img class="show-asset" src="' + base64Image + '"/>';
				break;
			case 'video/mp4':
				const base64video = 'data:' + data.type + ';base64,' + data.buffer;
				document.getElementById("asset-placeholder").innerHTML = '<video class="show-asset" preload="none" autoplay controls> <source src="' + base64video + '"></video>';
				break;
			default: break;
		}
	});
</script>