98 lines
No EOL
4.1 KiB
Handlebars
98 lines
No EOL
4.1 KiB
Handlebars
<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}}
|
|
{{else}}
|
|
{{> image}}
|
|
{{/ifConditional}}
|
|
</div>
|
|
</div>
|
|
|
|
<script type="text/javascript">
|
|
|
|
const getAssetFunctions = {
|
|
showAsset: function () {
|
|
const searchMessage = document.getElementById('search-message');
|
|
const assetHolder = document.getElementById('asset-holder');
|
|
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;
|
|
},
|
|
showFailureMessage: function (msg) {
|
|
console.log(msg);
|
|
const searchMessage = document.getElementById('search-message');
|
|
const failureMessage = document.getElementById('failure-message');
|
|
searchMessage.hidden = true;
|
|
failureMessage.hidden = false;
|
|
failureMessage.innerText = msg;
|
|
},
|
|
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);
|
|
if (xhr.status == 200) {
|
|
if (response.message === true) {
|
|
console.log('local asset is available on spee.ch')
|
|
that.showAsset();
|
|
} else {
|
|
that.showSearchMessage();
|
|
that.getAsset(claimName, claimId)
|
|
}
|
|
} 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();
|
|
},
|
|
getAsset: function(claimName, claimId) {
|
|
console.log(`getting ${claimName}#${claimId}`)
|
|
var uri = `/api/get_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);
|
|
if (xhr.status == 200) {
|
|
console.log('get returned successfully', response);
|
|
if (response.completed === true) {
|
|
console.log('lbrynet has finished downloading the asset');
|
|
that.showAsset();
|
|
} else {
|
|
console.log('lbrynet is still downloading the asset');
|
|
setTimeout(getAsset, 5000);
|
|
}
|
|
} else {
|
|
console.log('get failed:', response);
|
|
that.showFailureMessage(`${response.message}`);
|
|
}
|
|
} else {
|
|
console.log('xhr.readyState', xhr.readyState);
|
|
}
|
|
};
|
|
// Initiate a multipart/form-data upload
|
|
xhr.send();
|
|
},
|
|
}
|
|
|
|
getAssetFunctions.checkClaimAvailability('{{claimInfo.name}}', '{{claimInfo.claimId}}');
|
|
|
|
</script> |