spee.ch/views/partials/asset.handlebars

35 lines
1.3 KiB
Handlebars
Raw Normal View History

<div class="panel">
2017-07-06 08:22:47 +02:00
<div id="asset-placeholder" data-filepath="{{{fileInfo.filePath}}}">
<p> loading... </p>
2017-07-05 22:51:25 +02:00
</div>
2017-07-07 02:38:57 +02:00
</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;
2017-07-08 22:05:04 +02:00
document.getElementById("asset-placeholder").innerHTML = '<video class="show-asset" preload="none" autoplay controls> <source src="' + base64video + '"></video>';
2017-07-07 02:38:57 +02:00
break;
default: break;
}
});
</script>