spee.ch/views/partials/asset.handlebars

106 lines
4.5 KiB
Handlebars
Raw Normal View History

<div id="asset-display-component">
<p id="search-message" hidden="true">We're currently combing the blockchain for your asset!</p>
<p id="failure-message" hidden="true"></p>
<div id="asset-holder" hidden="true">
{{#ifConditional claimInfo.contentType '===' 'video/mp4'}}
<video id="video-player" controls poster="{{claimInfo.thumbnail}}">
<source id="asset">
<!--fallback-->
Your browser does not support the <code>video</code> element.
</video>
<!--dynamically resize video player-->
<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);
}
2017-10-20 19:54:26 +02:00
</script>
{{else}}
<img id="asset" class="asset" />
{{/ifConditional}}
2017-11-21 21:53:43 +01:00
</div>
</div>
<script type="text/javascript">
const getAssetFunctions = {
showAsset: function () {
const searchMessage = document.getElementById('search-message');
const assetHolder = document.getElementById('asset-holder');
2017-11-21 21:53:43 +01:00
const asset = document.getElementById('asset');
searchMessage.hidden = true;
assetHolder.hidden = false;
asset.setAttribute('src', `/{{claimInfo.claimId}}/{{claimInfo.name}}.{{claimInfo.fileExt}}`);
},
showSearchMessage: function (msg) {
console.log(msg);
const searchMessage = document.getElementById('search-message');
searchMessage.hidden = false;
2017-11-21 21:53:43 +01:00
},
showFailureMessage: function (msg) {
console.log(msg);
const searchMessage = document.getElementById('search-message');
const failureMessage = document.getElementById('failure-message');
searchMessage.hidden = true;
failureMessage.hidden = false;
2017-11-22 00:49:16 +01:00
failureMessage.innerText = msg;
2017-11-21 21:53:43 +01:00
},
checkClaimAvailability: function (claimName, claimId) {
console.log(`getting ${claimName}#${claimId}`)
var uri = `/api/check_local_claim/${claimName}/${claimId}`;
var xhr = new XMLHttpRequest();
var that = this;
xhr.open("GET", uri, true);
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {
const response = JSON.parse(xhr.response);
2017-11-22 00:49:16 +01:00
if (xhr.status == 200) {
if (response.message === false) {
that.showSearchMessage();
that.getAsset(claimName, claimId)
} else {
console.log('local asset is available on spee.ch')
that.showAsset();
}
} else {
console.log('get failed:', response);
that.showFailureMessage('Well this sucks, but we can\'t seem to phone home');
}
} else {
console.log('xhr.readyState', xhr.readyState);
}
};
// Initiate a multipart/form-data upload
xhr.send();
2017-11-21 21:53:43 +01:00
},
getAsset: function(claimName, claimId) {
console.log(`getting ${claimName}#${claimId}`)
var uri = `/api/get_claim/${claimName}/${claimId}`;
2017-11-21 21:53:43 +01:00
var xhr = new XMLHttpRequest();
var that = this;
2017-11-21 21:53:43 +01:00
xhr.open("GET", uri, true);
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {
const response = JSON.parse(xhr.response);
2017-11-21 21:53:43 +01:00
if (xhr.status == 200) {
console.log('get returned successfully', response);
that.showAsset();
2017-11-21 21:53:43 +01:00
} else {
console.log('get failed:', response);
that.showFailureMessage(`${response.message}`);
2017-11-21 21:53:43 +01:00
}
} else {
console.log('xhr.readyState', xhr.readyState);
}
};
// Initiate a multipart/form-data upload
xhr.send();
},
}
getAssetFunctions.checkClaimAvailability('{{claimInfo.name}}', '{{claimInfo.claimId}}');
2017-11-21 21:53:43 +01:00
</script>