spee.ch/views/partials/asset.handlebars

135 lines
6 KiB
Handlebars
Raw Normal View History

<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">
{{#ifConditional claimInfo.contentType '===' 'video/mp4'}}
{{> video}}
{{else}}
{{> image}}
{{/ifConditional}}
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&lt;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
{{#ifConditional claimInfo.contentType '===' 'video/mp4'}}
this.showVideo();
{{else}}
this.showImage();
{{/ifConditional}}
},
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-29 18:10:40 +01:00
showSearchMessage: function () {
const searchMessage = document.getElementById('searching-message');
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
},
checkClaimAvailability: function (claimName, claimId) {
2017-11-29 19:37:19 +01:00
console.log(`checking local availability for ${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 === true) {
2017-11-22 00:49:16 +01:00
console.log('local asset is available on spee.ch')
that.showAsset();
} else {
that.showSearchMessage();
that.getAsset(claimName, claimId)
2017-11-22 00:49:16 +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) {
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);
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-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>