fixed error message display/

This commit is contained in:
bill bittner 2017-11-29 10:37:19 -08:00
parent 842ee526df
commit e0e771b9d7
2 changed files with 24 additions and 14 deletions

View file

@ -519,10 +519,11 @@ table {
/* video */ /* video */
#video-asset { #video-asset {
background-color: #fff; background-color: #000000;
cursor: pointer; cursor: pointer;
} }
#showlite-body #video-asset { #showlite-body #video-asset {
background-color: #ffffff;
width: calc(100% - 12px - 12px - 2px); width: calc(100% - 12px - 12px - 2px);
margin: 6px; margin: 6px;
padding: 6px; padding: 6px;

View file

@ -1,22 +1,28 @@
<div id="asset-display-component"> <div id="asset-display-component">
<div id="asset-status">
<p id="searching-message" hidden="true">We're currently combing the blockchain for your asset!</p> <p id="searching-message" hidden="true">We're currently combing the blockchain for your asset!</p>
<p id="in-progress-message" hidden="true"></p> <p id="in-progress-message" hidden="true"></p>
<p id="failure-message" hidden="true"></p> <div id="failure-message" hidden="true">
<div id="asset-holder"> <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'}} {{#ifConditional claimInfo.contentType '===' 'video/mp4'}}
{{> video}} {{> video}}
{{else}} {{else}}
{{> image}} {{> image}}
{{/ifConditional}} {{/ifConditional}}
</div>
<a id="asset-boilerpate" class="link--primary fine-print" href="/{{claimInfo.claimId}}/{{claimInfo.name}}">hosted via Spee&lt;h</a> <a id="asset-boilerpate" class="link--primary fine-print" href="/{{claimInfo.claimId}}/{{claimInfo.name}}">hosted via Spee&lt;h</a>
</div>
</div> </div>
<script type="text/javascript"> <script type="text/javascript">
const getAssetFunctions = { const getAssetFunctions = {
showAsset: function () { showAsset: function () {
this.hideMessages(); this.hideAssetStatus();
this.showAssetHolder();
{{#ifConditional claimInfo.contentType '===' 'video/mp4'}} {{#ifConditional claimInfo.contentType '===' 'video/mp4'}}
this.showVideo(); this.showVideo();
{{else}} {{else}}
@ -36,11 +42,13 @@
const asset = document.getElementById('image-asset'); const asset = document.getElementById('image-asset');
asset.setAttribute('src', "/{{claimInfo.claimId}}/{{claimInfo.name}}.{{claimInfo.fileExt}}"); asset.setAttribute('src', "/{{claimInfo.claimId}}/{{claimInfo.name}}.{{claimInfo.fileExt}}");
}, },
hideMessages: function () { hideAssetStatus: function () {
const searchMessage = document.getElementById('searching-message'); const assetStatus = document.getElementById('asset-status');
const inProgressMessage = document.getElementById('in-progress-message'); assetStatus.hidden = true;
searchMessage.hidden = true; },
inProgressMessage.hidden = true; showAssetHolder: function () {
const assetHolder = document.getElementById('asset-holder');
assetHolder.hidden = false;
}, },
showSearchMessage: function () { showSearchMessage: function () {
const searchMessage = document.getElementById('searching-message'); const searchMessage = document.getElementById('searching-message');
@ -57,12 +65,13 @@
console.log(msg); console.log(msg);
const searchMessage = document.getElementById('searching-message'); const searchMessage = document.getElementById('searching-message');
const failureMessage = document.getElementById('failure-message'); const failureMessage = document.getElementById('failure-message');
const errorMessage = document.getElementById('error-message');
searchMessage.hidden = true; searchMessage.hidden = true;
failureMessage.hidden = false; failureMessage.hidden = false;
failureMessage.innerText = msg; errorMessage.innerText = msg;
}, },
checkClaimAvailability: function (claimName, claimId) { checkClaimAvailability: function (claimName, claimId) {
console.log(`getting ${claimName}#${claimId}`) console.log(`checking local availability for ${claimName}#${claimId}`)
var uri = `/api/check_local_claim/${claimName}/${claimId}`; var uri = `/api/check_local_claim/${claimName}/${claimId}`;
var xhr = new XMLHttpRequest(); var xhr = new XMLHttpRequest();
var that = this; var that = this;