spee.ch/views/partials/asset.handlebars
2017-11-21 12:53:43 -08:00

84 lines
No EOL
3.3 KiB
Handlebars

{{#ifConditional claimInfo.contentType '===' 'video/mp4'}}
{{#ifConditional claimInfo.fileExt '===' 'gifv'}}
<video class="gifv-show" autoplay loop muted>
<source src="/{{claimInfo.claimId}}/{{claimInfo.name}}.{{claimInfo.fileExt}}">
{{!--fallback--}}
Your browser does not support the <code>video</code> element.
</video>
{{else}}
<video id="video-player" class="video-show video" controls poster="{{claimInfo.thumbnail}}">
<source src="/{{claimInfo.claimId}}/{{claimInfo.name}}.{{claimInfo.fileExt}}">
{{!--fallback--}}
Your browser does not support the <code>video</code> element.
</video>
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', resizeVideoPlayer)
window.addEventListener("resize", resizeVideoPlayer);
function resizeVideoPlayer() {
const div = document.getElementById('video-player');
const width = div.offsetWidth;
div.height = (width * 9 / 16);
}
</script>
{{/ifConditional}}
{{else}}
<a href="/{{claimInfo.claimId}}/{{claimInfo.name}}.{{claimInfo.fileExt}}">
<img class="image-show" src="/{{claimInfo.claimId}}/{{claimInfo.name}}.{{claimInfo.fileExt}}" />
</a>
{{/ifConditional}}
<div id="asset-holder">
<div id="search-message" hidden="true">
<p>We're currently combing the blockchain for your asset!</p>
</div>
<div id="failure-message" hidden="true">
<p>Hmmm, looks like no peers have your content. How anti-social!</p>
</div>
<div id="asset" hidden="true">
</div>
</div>
<script type="text/javascript">
const getAssetFunctions = {
showAsset: function () {
const searchMessage = document.getElementById('search-message');
const asset = document.getElementById('asset');
searchMessage.hidden = true;
asset.hidden = false;
},
showFailureMessage: function (msg) {
console.log(msg);
const searchMessage = document.getElementById('search-message');
const failureMessage = document.getElementById('failure-message');
searchMessage.hidden = true;
failureMessage.hidden = false;
},
displayAsset: function(contentType, source) {
},
getAsset: function(claimName, claimId) {
console.log(`getting ${claimName}#${claimId}}`)
var uri = `/api/get/${claimName}/${claimId}`;
var xhr = new XMLHttpRequest();
xhr.open("GET", uri, true);
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {
if (xhr.status == 200) {
console.log('get returned successfully', xhr.response);
this.showAsset();
} else {
console.log('get failed:', xhr.response);
}
} else {
console.log('xhr.readyState', xhr.readyState);
this.showFailureMessage(xhr.readyState.message);
}
};
// Initiate a multipart/form-data upload
xhr.send();
},
}
</script>