2017-11-22 00:44:27 +01:00
<div id="asset-display-component">
2017-11-29 19:37:19 +01:00
<div id="asset-status">
<p id="searching-message" hidden="true">We're currently combing the blockchain for your asset!</p>
<p id="in-progress-message" hidden="true"></p>
<div id="failure-message" hidden="true">
<p>Unfortunately, we couldn't download your asset from LBRY. You can help us out by sharing the below error message in the <a class="link--primary" href="https://discord.gg/YjYbwhS" target="_blank">LBRY discord</a>.</p>
<i><p id="error-message"></p></i>
</div>
</div>
<div id="asset-holder" hidden="true">
2017-11-22 00:44:27 +01:00
{{ # if Conditional claimInfo .contentType '===' 'video/mp4' }}
2017-11-28 21:17:22 +01:00
{{ > video }}
2017-11-22 00:44:27 +01:00
{{ else }}
2017-11-28 21:17:22 +01:00
{{ > image }}
2017-11-22 00:44:27 +01:00
{{ / if Conditional }}
2017-11-29 19:37:19 +01:00
<a id="asset-boilerpate" class="link--primary fine-print" href="/ {{ claimInfo .claimId }} / {{ claimInfo .name }} ">hosted via Spee<h</a>
2017-11-21 21:53:43 +01:00
</div>
</div>
<script type="text/javascript">
const getAssetFunctions = {
showAsset: function () {
2017-11-29 19:37:19 +01:00
this.hideAssetStatus();
this.showAssetHolder();
2017-11-29 18:10:40 +01:00
{{ # if Conditional claimInfo .contentType '===' 'video/mp4' }}
this.showVideo();
{{ else }}
this.showImage();
{{ / if Conditional }}
},
showVideo: function () {
console.log('showing video');
2017-11-29 19:11:56 +01:00
const video = document.getElementById('video-asset');
2017-11-29 18:10:40 +01:00
const source = document.createElement('source');
source.setAttribute('src', '/ {{ claimInfo .claimId }} / {{ claimInfo .name }} . {{ claimInfo .fileExt }} ');
video.appendChild(source);
video.play();
},
showImage: function () {
console.log('showing image');
2017-11-29 19:11:56 +01:00
const asset = document.getElementById('image-asset');
2017-11-29 18:10:40 +01:00
asset.setAttribute('src', "/ {{ claimInfo .claimId }} / {{ claimInfo .name }} . {{ claimInfo .fileExt }} ");
},
2017-11-29 19:37:19 +01:00
hideAssetStatus: function () {
const assetStatus = document.getElementById('asset-status');
assetStatus.hidden = true;
},
showAssetHolder: function () {
const assetHolder = document.getElementById('asset-holder');
assetHolder.hidden = false;
2017-11-22 00:44:27 +01:00
},
2017-11-29 18:10:40 +01:00
showSearchMessage: function () {
const searchMessage = document.getElementById('searching-message');
2017-11-22 00:44:27 +01:00
searchMessage.hidden = false;
2017-11-21 21:53:43 +01:00
},
2017-11-29 18:10:40 +01:00
showInProgressMessage: function (msg) {
const searchMessage = document.getElementById('searching-message');
const inProgressMessage = document.getElementById('in-progress-message');
searchMessage.hidden = true;
inProgressMessage.hidden = false;
inProgressMessage.innerText = msg;
},
2017-11-21 21:53:43 +01:00
showFailureMessage: function (msg) {
console.log(msg);
2017-11-29 18:10:40 +01:00
const searchMessage = document.getElementById('searching-message');
2017-11-21 21:53:43 +01:00
const failureMessage = document.getElementById('failure-message');
2017-11-29 19:37:19 +01:00
const errorMessage = document.getElementById('error-message');
2017-11-21 21:53:43 +01:00
searchMessage.hidden = true;
failureMessage.hidden = false;
2017-11-29 19:37:19 +01:00
errorMessage.innerText = msg;
2017-11-21 21:53:43 +01:00
},
2017-11-22 00:44:27 +01:00
checkClaimAvailability: function (claimName, claimId) {
2017-11-29 19:37:19 +01:00
console.log(`checking local availability for $ { claimName}#$ { claimId}`)
2017-11-28 01:53:32 +01:00
var uri = `/api/check_local_claim/$ { claimName}/$ { claimId}`;
2017-11-22 00:44:27 +01:00
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) {
2017-11-28 21:17:22 +01:00
if (response.message === true) {
2017-11-22 00:49:16 +01:00
console.log('local asset is available on spee.ch')
that.showAsset();
2017-11-28 21:17:22 +01:00
} else {
that.showSearchMessage();
that.getAsset(claimName, claimId)
2017-11-22 00:49:16 +01:00
}
2017-11-22 00:44:27 +01:00
} 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) {
2017-11-28 01:53:32 +01:00
console.log(`getting $ { claimName}#$ { claimId}`)
var uri = `/api/get_claim/$ { claimName}/$ { claimId}`;
2017-11-21 21:53:43 +01:00
var xhr = new XMLHttpRequest();
2017-11-22 00:44:27 +01:00
var that = this;
2017-11-21 21:53:43 +01:00
xhr.open("GET", uri, true);
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {
2017-11-22 00:44:27 +01:00
const response = JSON.parse(xhr.response);
2017-11-21 21:53:43 +01:00
if (xhr.status == 200) {
2017-11-22 00:44:27 +01:00
console.log('get returned successfully', response);
2017-11-28 21:17:22 +01:00
if (response.completed === true) {
console.log('lbrynet has finished downloading the asset');
that.showAsset();
} else {
console.log('lbrynet is still downloading the asset');
2017-11-29 18:10:40 +01:00
that.showInProgressMessage(response.message);
setTimeout(that.getAsset, 5000);
2017-11-28 21:17:22 +01:00
}
2017-11-21 21:53:43 +01:00
} else {
2017-11-22 00:44:27 +01:00
console.log('get failed:', response);
2017-11-28 01:53:32 +01:00
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();
},
}
2017-11-22 00:44:27 +01:00
getAssetFunctions.checkClaimAvailability(' {{ claimInfo .name }} ', ' {{ claimInfo .claimId }} ');
2017-11-21 21:53:43 +01:00
</script>