changed Asset and ProgressBar into constructors
This commit is contained in:
bill bittner
parent
d619281908
commit
0f55da1349
6 changed files with 89 additions and 86 deletions
|
|
@ -1,9 +1,9 @@
|
|||
const showFunctions = {
|
||||
state: {},
|
||||
setState: function(key, value) {
|
||||
const Asset = function () {
|
||||
this.state = {};
|
||||
this.setState = function(key, value) {
|
||||
this.state[key] = value;
|
||||
},
|
||||
addPlayPauseToVideo: function () {
|
||||
};
|
||||
this.addPlayPauseToVideo = function () {
|
||||
const that = this;
|
||||
const video = document.getElementById('video-asset');
|
||||
if (video) {
|
||||
|
|
@ -18,16 +18,16 @@ const showFunctions = {
|
|||
}
|
||||
};
|
||||
}
|
||||
},
|
||||
playOrPause: function(video){
|
||||
};
|
||||
this.playOrPause = function(video){
|
||||
if (video.paused == true) {
|
||||
video.play();
|
||||
}
|
||||
else{
|
||||
video.pause();
|
||||
}
|
||||
},
|
||||
showAsset: function () {
|
||||
};
|
||||
this.showAsset = function () {
|
||||
this.hideAssetStatus();
|
||||
this.showAssetHolder();
|
||||
if (!this.state.src) {
|
||||
|
|
@ -41,33 +41,33 @@ const showFunctions = {
|
|||
} else {
|
||||
this.showImage();
|
||||
}
|
||||
},
|
||||
showVideo: function () {
|
||||
};
|
||||
this.showVideo = function () {
|
||||
console.log('showing video', this.state.src);
|
||||
const video = document.getElementById('video-asset');
|
||||
const source = document.createElement('source');
|
||||
source.setAttribute('src', this.state.src);
|
||||
video.appendChild(source);
|
||||
video.play();
|
||||
},
|
||||
showImage: function () {
|
||||
};
|
||||
this.showImage = function () {
|
||||
console.log('showing image', this.state.src);
|
||||
const asset = document.getElementById('image-asset');
|
||||
asset.setAttribute('src', this.state.src);
|
||||
},
|
||||
hideAssetStatus: function () {
|
||||
};
|
||||
this.hideAssetStatus = function () {
|
||||
const assetStatus = document.getElementById('asset-status');
|
||||
assetStatus.hidden = true;
|
||||
},
|
||||
showAssetHolder: function () {
|
||||
};
|
||||
this.showAssetHolder =function () {
|
||||
const assetHolder = document.getElementById('asset-holder');
|
||||
assetHolder.hidden = false;
|
||||
},
|
||||
showSearchMessage: function () {
|
||||
};
|
||||
this.showSearchMessage = function () {
|
||||
const searchMessage = document.getElementById('searching-message');
|
||||
searchMessage.hidden = false;
|
||||
},
|
||||
showFailureMessage: function (msg) {
|
||||
};
|
||||
this.showFailureMessage = function (msg) {
|
||||
console.log(msg);
|
||||
const searchMessage = document.getElementById('searching-message');
|
||||
const failureMessage = document.getElementById('failure-message');
|
||||
|
|
@ -75,8 +75,8 @@ const showFunctions = {
|
|||
searchMessage.hidden = true;
|
||||
failureMessage.hidden = false;
|
||||
errorMessage.innerText = msg;
|
||||
},
|
||||
checkClaimAvailability: function () {
|
||||
};
|
||||
this.checkClaimAvailability = function () {
|
||||
const that = this;
|
||||
const uri = `/api/local-file-available/${this.state.claimName}/${this.state.claimId}`;
|
||||
const xhr = new XMLHttpRequest();
|
||||
|
|
@ -100,8 +100,8 @@ const showFunctions = {
|
|||
}
|
||||
};
|
||||
xhr.send();
|
||||
},
|
||||
getAsset: function() {
|
||||
};
|
||||
this.getAsset = function() {
|
||||
const that = this;
|
||||
const uri = `/api/get-claim/${this.state.claimName}/${this.state.claimId}`;
|
||||
const xhr = new XMLHttpRequest();
|
||||
|
|
@ -120,5 +120,5 @@ const showFunctions = {
|
|||
}
|
||||
};
|
||||
xhr.send();
|
||||
},
|
||||
};
|
||||
};
|
||||
48
public/assets/js/progressBarConstructor.js
Normal file
48
public/assets/js/progressBarConstructor.js
Normal file
|
|
@ -0,0 +1,48 @@
|
|||
const ProgressBar = function() {
|
||||
this.state = {
|
||||
x: 0,
|
||||
adder: 1,
|
||||
bars: [],
|
||||
};
|
||||
this.setState = function (key, value) {
|
||||
this.state[key] = value;
|
||||
};
|
||||
this.barHolder = document.getElementById('bar-holder');
|
||||
this.createProgressBar = function (size) {
|
||||
this.setState('size', size);
|
||||
for (var i = 0; i < size; i++) {
|
||||
const bar = document.createElement('span');
|
||||
bar.innerText = '| ';
|
||||
bar.setAttribute('class', 'progress-bar progress-bar--inactive');
|
||||
this.barHolder.appendChild(bar);
|
||||
this.state.bars.push(bar);
|
||||
}
|
||||
};
|
||||
this.startProgressBar = function () {
|
||||
this.updateInterval = setInterval(this.updateProgressBar.bind(this), 300);
|
||||
};
|
||||
this.updateProgressBar = function () {
|
||||
const x = this.state.x;
|
||||
const adder = this.state.adder;
|
||||
const size = this.state.size;
|
||||
// update the appropriate bar
|
||||
if (x > -1 && x < size){
|
||||
if (adder === 1){
|
||||
this.state.bars[x].setAttribute('class', 'progress-bar progress-bar--active');
|
||||
} else {
|
||||
this.state.bars[x].setAttribute('class', 'progress-bar progress-bar--inactive');
|
||||
}
|
||||
}
|
||||
// update adder
|
||||
if (x === size){
|
||||
this.setState('adder', -1);
|
||||
} else if ( x === -1){
|
||||
this.setState('adder', 1);
|
||||
}
|
||||
// update x
|
||||
this.setState('x', x + adder);
|
||||
};
|
||||
this.stopProgressBar = function () {
|
||||
clearInterval(this.updateInterval);
|
||||
};
|
||||
};
|
||||
|
|
@ -21,7 +21,7 @@
|
|||
<body id="show-body">
|
||||
<script src="/assets/js/generalFunctions.js"></script>
|
||||
<script src="/assets/js/navBarFunctions.js"></script>
|
||||
<script src="/assets/js/showFunctions.js"></script>
|
||||
<script src="/assets/js/assetConstructor.js"></script>
|
||||
{{> navBar}}
|
||||
{{{ body }}}
|
||||
</body>
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@
|
|||
{{ googleAnalytics }}
|
||||
</head>
|
||||
<body id="showlite-body">
|
||||
<script src="/assets/js/showFunctions.js"></script>
|
||||
<script src="/assets/js/assetConstructor.js"></script>
|
||||
{{{ body }}}
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@
|
|||
<div id="searching-message" hidden="true">
|
||||
<p>Sit tight, we're searching the LBRY blockchain for your asset!</p>
|
||||
{{> progressBar}}
|
||||
<p>Curious what magic is happening here? <a class="link--primary" target="blank" href="https://lbry.io/faq/what-is-lbry">Learn more.</a></p>
|
||||
</div>
|
||||
<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>
|
||||
|
|
@ -24,12 +25,13 @@
|
|||
|
||||
<script type="text/javascript">
|
||||
|
||||
showFunctions.setState('src', '/{{claimInfo.claimId}}/{{claimInfo.name}}.{{claimInfo.fileExt}}');
|
||||
showFunctions.setState('claimName', '{{claimInfo.name}}');
|
||||
showFunctions.setState('claimId', '{{claimInfo.claimId}}');
|
||||
showFunctions.setState('fileExt', '{{claimInfo.fileExt}}');
|
||||
showFunctions.setState('contentType', '{{claimInfo.contentType}}');
|
||||
console.log(showFunctions.state);
|
||||
showFunctions.checkClaimAvailability();
|
||||
const asset = new Asset();
|
||||
asset.setState('src', '/{{claimInfo.claimId}}/{{claimInfo.name}}.{{claimInfo.fileExt}}');
|
||||
asset.setState('claimName', '{{claimInfo.name}}');
|
||||
asset.setState('claimId', '{{claimInfo.claimId}}');
|
||||
asset.setState('fileExt', '{{claimInfo.fileExt}}');
|
||||
asset.setState('contentType', '{{claimInfo.contentType}}');
|
||||
console.log('asset state:', asset.state);
|
||||
asset.checkClaimAvailability();
|
||||
|
||||
</script>
|
||||
|
|
@ -1,55 +1,8 @@
|
|||
<p id="bar-holder"></p>
|
||||
|
||||
<script src="/assets/js/progressBarConstructor.js"></script>
|
||||
<script type="text/javascript">
|
||||
const progressBarFunctions = {
|
||||
state: {
|
||||
x: 0,
|
||||
adder: 1,
|
||||
bars: [],
|
||||
},
|
||||
setState: function (key, value) {
|
||||
this.state[key] = value;
|
||||
},
|
||||
barHolder: document.getElementById('bar-holder'),
|
||||
createProgressBar: function (size) {
|
||||
this.setState('size', size);
|
||||
for (var i = 0; i < size; i++) {
|
||||
const bar = document.createElement('span');
|
||||
bar.innerText = '| ';
|
||||
bar.setAttribute('class', 'progress-bar progress-bar--inactive');
|
||||
this.barHolder.appendChild(bar);
|
||||
this.state.bars.push(bar);
|
||||
}
|
||||
},
|
||||
startProgressBar: function () {
|
||||
this.updateInterval = setInterval(this.updateProgressBar.bind(this), 300);
|
||||
},
|
||||
updateProgressBar: function () {
|
||||
const x = this.state.x;
|
||||
const adder = this.state.adder;
|
||||
const size = this.state.size;
|
||||
// update the appropriate bar
|
||||
if (x > -1 && x < size){
|
||||
if (adder === 1){
|
||||
this.state.bars[x].setAttribute('class', 'progress-bar progress-bar--active');
|
||||
} else {
|
||||
this.state.bars[x].setAttribute('class', 'progress-bar progress-bar--inactive');
|
||||
}
|
||||
}
|
||||
// update adder
|
||||
if (x === size){
|
||||
this.setState('adder', -1);
|
||||
} else if ( x === -1){
|
||||
this.setState('adder', 1);
|
||||
}
|
||||
// update x
|
||||
this.setState('x', x + adder);
|
||||
},
|
||||
stopProgressBar: function () {
|
||||
clearInterval(this.updateInterval);
|
||||
},
|
||||
}
|
||||
|
||||
progressBarFunctions.createProgressBar(10);
|
||||
progressBarFunctions.startProgressBar();
|
||||
const progressBar = new ProgressBar();
|
||||
progressBar.createProgressBar(10);
|
||||
progressBar.startProgressBar();
|
||||
</script>
|
||||
Loading…
Reference in a new issue