LBRYCommunity/spee.ch
1
0
Fork 0
Code Issues 95 Pull requests 2 Projects Releases 4 Packages Wiki Activity

fixed video player and image src issue

Browse source
This commit is contained in:
bill bittner 2017-11-29 09:10:40 -08:00
parent cf7ffeb783
commit cb62f0858c
3 changed files with 41 additions and 26 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
public/assets/css/general.css
View file

@ -298,10 +298,6 @@ a, a:visited {
color: red; color: red;
} }
.info-message-placeholder {
}
/* INPUT FIELDS */ /* INPUT FIELDS */
/* blocks */ /* blocks */
@ -349,14 +345,6 @@ option {
cursor: pointer; cursor: pointer;
} }
#claim-name-input {
}
#input-success-claim-name {
}
.span--relative { .span--relative {
position: relative; position: relative;
} }

53
views/partials/asset.handlebars
View file

@ -1,7 +1,8 @@
<div id="asset-display-component"> <div id="asset-display-component">
<p id="search-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="failure-message" hidden="true"></p> <p id="failure-message" hidden="true"></p>
<div id="asset-holder" hidden="true"> <div id="asset-holder">
{{#ifConditional claimInfo.contentType '===' 'video/mp4'}} {{#ifConditional claimInfo.contentType '===' 'video/mp4'}}
{{> video}} {{> video}}
{{else}} {{else}}
@ -14,21 +15,46 @@
const getAssetFunctions = { const getAssetFunctions = {
showAsset: function () { showAsset: function () {
const searchMessage = document.getElementById('search-message'); this.hideMessages();
const assetHolder = document.getElementById('asset-holder'); {{#ifConditional claimInfo.contentType '===' 'video/mp4'}}
const asset = document.getElementById('asset'); this.showVideo();
searchMessage.hidden = true; {{else}}
assetHolder.hidden = false; this.showImage();
asset.setAttribute('src', `/{{claimInfo.claimId}}/{{claimInfo.name}}.{{claimInfo.fileExt}}`); {{/ifConditional}}
}, },
showSearchMessage: function (msg) { showVideo: function () {
console.log(msg); console.log('showing video');
const searchMessage = document.getElementById('search-message'); const video = document.getElementById('video-player');
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');
const asset = document.getElementById('asset');
asset.setAttribute('src', "/{{claimInfo.claimId}}/{{claimInfo.name}}.{{claimInfo.fileExt}}");
},
hideMessages: function () {
const searchMessage = document.getElementById('searching-message');
const inProgressMessage = document.getElementById('in-progress-message');
searchMessage.hidden = true;
inProgressMessage.hidden = true;
},
showSearchMessage: function () {
const searchMessage = document.getElementById('searching-message');
searchMessage.hidden = false; searchMessage.hidden = false;
}, },
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;
},
showFailureMessage: function (msg) { showFailureMessage: function (msg) {
console.log(msg); console.log(msg);
const searchMessage = document.getElementById('search-message'); const searchMessage = document.getElementById('searching-message');
const failureMessage = document.getElementById('failure-message'); const failureMessage = document.getElementById('failure-message');
searchMessage.hidden = true; searchMessage.hidden = true;
failureMessage.hidden = false; failureMessage.hidden = false;
@ -78,7 +104,8 @@
that.showAsset(); that.showAsset();
} else { } else {
console.log('lbrynet is still downloading the asset'); console.log('lbrynet is still downloading the asset');
setTimeout(getAsset, 5000); that.showInProgressMessage(response.message);
setTimeout(that.getAsset, 5000);
} }
} else { } else {
console.log('get failed:', response); console.log('get failed:', response);