spee.ch/views/show.handlebars

<div class="wrapper">
	{{> topBar}}
	<div class="main">
		{{> asset}}
	</div>
	<div class="sidebar">
		<h1>{{fileInfo.name}}</h1> 
		{{> assetLinks}}
		{{> assetMetadata}}
	</div>
	{{> footer}}
</div>

<script src="/socket.io/socket.io.js"></script>
<script type="text/javascript">
	var socket = io();
	var filePath = document.getElementById('asset-placeholder').dataset.filepath;
	console.log(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" controls> <source src="' + base64video + '"></video>';
				break;
			default: break;
		}
	});
</script>