consolidated showFunctions and getAssetFunctions
This commit is contained in:
bill bittner
parent
e5d3fdf322
commit
4a62c011bd
3 changed files with 107 additions and 99 deletions
|
|
@ -1,4 +1,8 @@
|
||||||
const showFunctions = {
|
const showFunctions = {
|
||||||
|
state: {},
|
||||||
|
setState: function(key, value) {
|
||||||
|
this.state[key] = value;
|
||||||
|
},
|
||||||
addPlayPauseToVideo: function () {
|
addPlayPauseToVideo: function () {
|
||||||
const that = this;
|
const that = this;
|
||||||
const video = document.getElementById('video-asset');
|
const video = document.getElementById('video-asset');
|
||||||
|
|
@ -22,5 +26,99 @@ const showFunctions = {
|
||||||
else{
|
else{
|
||||||
video.pause();
|
video.pause();
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
showAsset: function () {
|
||||||
|
this.hideAssetStatus();
|
||||||
|
this.showAssetHolder();
|
||||||
|
if (!this.state.src) {
|
||||||
|
return console.log('error: src is not set')
|
||||||
}
|
}
|
||||||
}
|
if (!this.state.contentType) {
|
||||||
|
return console.log('error: contentType is not set')
|
||||||
|
}
|
||||||
|
if (this.state.contentType === 'video/mp4') {
|
||||||
|
this.showVideo();
|
||||||
|
} else {
|
||||||
|
this.showImage();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
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 () {
|
||||||
|
console.log('showing image', this.state.src);
|
||||||
|
const asset = document.getElementById('image-asset');
|
||||||
|
asset.setAttribute('src', this.state.src);
|
||||||
|
},
|
||||||
|
hideAssetStatus: function () {
|
||||||
|
const assetStatus = document.getElementById('asset-status');
|
||||||
|
assetStatus.hidden = true;
|
||||||
|
},
|
||||||
|
showAssetHolder: function () {
|
||||||
|
const assetHolder = document.getElementById('asset-holder');
|
||||||
|
assetHolder.hidden = false;
|
||||||
|
},
|
||||||
|
showSearchMessage: function () {
|
||||||
|
const searchMessage = document.getElementById('searching-message');
|
||||||
|
searchMessage.hidden = false;
|
||||||
|
},
|
||||||
|
showFailureMessage: function (msg) {
|
||||||
|
console.log(msg);
|
||||||
|
const searchMessage = document.getElementById('searching-message');
|
||||||
|
const failureMessage = document.getElementById('failure-message');
|
||||||
|
const errorMessage = document.getElementById('error-message');
|
||||||
|
searchMessage.hidden = true;
|
||||||
|
failureMessage.hidden = false;
|
||||||
|
errorMessage.innerText = msg;
|
||||||
|
},
|
||||||
|
checkClaimAvailability: function () {
|
||||||
|
const that = this;
|
||||||
|
const uri = `/api/local-file-available/${this.state.claimName}/${this.state.claimId}`;
|
||||||
|
const xhr = new XMLHttpRequest();
|
||||||
|
console.log(`checking local availability for ${this.state.claimName}#${this.state.claimId}`)
|
||||||
|
xhr.open("GET", uri, true);
|
||||||
|
xhr.onreadystatechange = function() {
|
||||||
|
if (xhr.readyState == 4) {
|
||||||
|
const response = JSON.parse(xhr.response);
|
||||||
|
if (xhr.status == 200) {
|
||||||
|
if (response.message === true) {
|
||||||
|
console.log('local asset is available on spee.ch')
|
||||||
|
that.showAsset();
|
||||||
|
} else {
|
||||||
|
that.showSearchMessage();
|
||||||
|
that.getAsset()
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
console.log('get failed:', response);
|
||||||
|
that.showFailureMessage('Well this sucks, but we can\'t seem to phone home');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
xhr.send();
|
||||||
|
},
|
||||||
|
getAsset: function() {
|
||||||
|
const that = this;
|
||||||
|
const uri = `/api/get-claim/${this.state.claimName}/${this.state.claimId}`;
|
||||||
|
const xhr = new XMLHttpRequest();
|
||||||
|
console.log(`getting ${this.state.claimName}#${this.state.claimId}`)
|
||||||
|
xhr.open("GET", uri, true);
|
||||||
|
xhr.onreadystatechange = function() {
|
||||||
|
if (xhr.readyState == 4) {
|
||||||
|
const response = JSON.parse(xhr.response);
|
||||||
|
if (xhr.status == 200) {
|
||||||
|
console.log('get returned successfully', response);
|
||||||
|
that.showAsset();
|
||||||
|
} else {
|
||||||
|
console.log('get failed:', response);
|
||||||
|
that.showFailureMessage(`${response.message}`);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
xhr.send();
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
@ -21,101 +21,12 @@
|
||||||
|
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
|
|
||||||
const getAssetFunctions = {
|
showFunctions.setState('src', '{{claimInfo.name}}', '{{claimInfo.claimId}}', '{{claimInfo.fileExt}}');
|
||||||
showAsset: function () {
|
showFunctions.setState('claimName', '{{claimInfo.name}}');
|
||||||
this.hideAssetStatus();
|
showFunctions.setState('claimId', '{{claimInfo.claimId}}');
|
||||||
this.showAssetHolder();
|
showFunctions.setState('fileExt', '{{claimInfo.fileExt}}');
|
||||||
{{#ifConditional claimInfo.contentType '===' 'video/mp4'}}
|
showFunctions.setState('contentType', '{{claimInfo.contentType}}');
|
||||||
this.showVideo();
|
console.log(showFunctions.state);
|
||||||
{{else}}
|
showFunctions.checkClaimAvailability();
|
||||||
this.showImage();
|
|
||||||
{{/ifConditional}}
|
|
||||||
},
|
|
||||||
showVideo: function () {
|
|
||||||
console.log('showing video');
|
|
||||||
const video = document.getElementById('video-asset');
|
|
||||||
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('image-asset');
|
|
||||||
asset.setAttribute('src', "/{{claimInfo.claimId}}/{{claimInfo.name}}.{{claimInfo.fileExt}}");
|
|
||||||
},
|
|
||||||
hideAssetStatus: function () {
|
|
||||||
const assetStatus = document.getElementById('asset-status');
|
|
||||||
assetStatus.hidden = true;
|
|
||||||
},
|
|
||||||
showAssetHolder: function () {
|
|
||||||
const assetHolder = document.getElementById('asset-holder');
|
|
||||||
assetHolder.hidden = false;
|
|
||||||
},
|
|
||||||
showSearchMessage: function () {
|
|
||||||
const searchMessage = document.getElementById('searching-message');
|
|
||||||
searchMessage.hidden = false;
|
|
||||||
},
|
|
||||||
showFailureMessage: function (msg) {
|
|
||||||
console.log(msg);
|
|
||||||
const searchMessage = document.getElementById('searching-message');
|
|
||||||
const failureMessage = document.getElementById('failure-message');
|
|
||||||
const errorMessage = document.getElementById('error-message');
|
|
||||||
searchMessage.hidden = true;
|
|
||||||
failureMessage.hidden = false;
|
|
||||||
errorMessage.innerText = msg;
|
|
||||||
},
|
|
||||||
checkClaimAvailability: function (claimName, claimId) {
|
|
||||||
console.log(`checking local availability for ${claimName}#${claimId}`)
|
|
||||||
var uri = `/api/local-file-available/${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);
|
|
||||||
if (xhr.status == 200) {
|
|
||||||
if (response.message === true) {
|
|
||||||
console.log('local asset is available on spee.ch')
|
|
||||||
that.showAsset();
|
|
||||||
} else {
|
|
||||||
that.showSearchMessage();
|
|
||||||
that.getAsset(claimName, claimId)
|
|
||||||
}
|
|
||||||
} 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);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
xhr.send();
|
|
||||||
},
|
|
||||||
getAsset: function(claimName, claimId) {
|
|
||||||
console.log(`getting ${claimName}#${claimId}`)
|
|
||||||
var uri = `/api/get-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);
|
|
||||||
if (xhr.status == 200) {
|
|
||||||
console.log('get returned successfully', response);
|
|
||||||
that.showAsset();
|
|
||||||
} else {
|
|
||||||
console.log('get failed:', response);
|
|
||||||
that.showFailureMessage(`${response.message}`);
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
console.log('xhr.readyState', xhr.readyState);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
xhr.send();
|
|
||||||
},
|
|
||||||
}
|
|
||||||
|
|
||||||
getAssetFunctions.checkClaimAvailability('{{claimInfo.name}}', '{{claimInfo.claimId}}');
|
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
@ -6,6 +6,5 @@
|
||||||
</video>
|
</video>
|
||||||
|
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
|
|
||||||
showFunctions.addPlayPauseToVideo();
|
showFunctions.addPlayPauseToVideo();
|
||||||
</script>
|
</script>
|
||||||
Loading…
Reference in a new issue