106 lines
No EOL
4.6 KiB
Handlebars
106 lines
No EOL
4.6 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 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);
|
|
}
|
|
</script>
|
|
{{else}}
|
|
<img id="asset" class="asset" />
|
|
{{/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/local/${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 === 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();
|
|
},
|
|
getAsset: function(claimName, claimId) {
|
|
console.log(`getting ${claimName}#${claimId}}`)
|
|
var uri = `/api/get/${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);
|
|
that.showAsset();
|
|
} else {
|
|
console.log('get failed:', response);
|
|
that.showFailureMessage('Hmmm, looks like no peers have your content. How anti-social!');
|
|
}
|
|
} else {
|
|
console.log('xhr.readyState', xhr.readyState);
|
|
}
|
|
};
|
|
// Initiate a multipart/form-data upload
|
|
xhr.send();
|
|
},
|
|
}
|
|
|
|
getAssetFunctions.checkClaimAvailability('{{claimInfo.name}}', '{{claimInfo.claimId}}');
|
|
|
|
</script> |