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

updated asset component to set data directly on class

Browse source
This commit is contained in:
bill bittner 2017-12-05 11:38:16 -08:00
parent 6ae79ff054
commit cddcf1c4d0
2 changed files with 18 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

27
public/assets/js/assetConstructor.js
View file

@ -1,8 +1,5 @@
const Asset = function () { const Asset = function () {
this.state = {}; this.data = {};
this.setState = function(key, value) {
this.state[key] = value;
};
this.addPlayPauseToVideo = function () { this.addPlayPauseToVideo = function () {
const that = this; const that = this;
const video = document.getElementById('video-asset'); const video = document.getElementById('video-asset');
@ -30,30 +27,30 @@ const Asset = function () {
this.showAsset = function () { this.showAsset = function () {
this.hideAssetStatus(); this.hideAssetStatus();
this.showAssetHolder(); this.showAssetHolder();
if (!this.state.src) { if (!this.data.src) {
return console.log('error: src is not set') return console.log('error: src is not set')
} }
if (!this.state.contentType) { if (!this.data.contentType) {
return console.log('error: contentType is not set') return console.log('error: contentType is not set')
} }
if (this.state.contentType === 'video/mp4') { if (this.data.contentType === 'video/mp4') {
this.showVideo(); this.showVideo();
} else { } else {
this.showImage(); this.showImage();
} }
}; };
this.showVideo = function () { this.showVideo = function () {
console.log('showing video', this.state.src); console.log('showing video', this.data.src);
const video = document.getElementById('video-asset'); const video = document.getElementById('video-asset');
const source = document.createElement('source'); const source = document.createElement('source');
source.setAttribute('src', this.state.src); source.setAttribute('src', this.data.src);
video.appendChild(source); video.appendChild(source);
video.play(); video.play();
}; };
this.showImage = function () { this.showImage = function () {
console.log('showing image', this.state.src); console.log('showing image', this.data.src);
const asset = document.getElementById('image-asset'); const asset = document.getElementById('image-asset');
asset.setAttribute('src', this.state.src); asset.setAttribute('src', this.data.src);
}; };
this.hideAssetStatus = function () { this.hideAssetStatus = function () {
const assetStatus = document.getElementById('asset-status'); const assetStatus = document.getElementById('asset-status');
@ -94,8 +91,8 @@ const Asset = function () {
}) })
}; };
this.isFileAvailable = function () { this.isFileAvailable = function () {
console.log(`checking if file is available for ${this.state.claimName}#${this.state.claimId}`) console.log(`checking if file is available for ${this.data.claimName}#${this.data.claimId}`)
const uri = `/api/file-is-available/${this.state.claimName}/${this.state.claimId}`; const uri = `/api/file-is-available/${this.data.claimName}/${this.data.claimId}`;
const xhr = new XMLHttpRequest(); const xhr = new XMLHttpRequest();
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
xhr.open("GET", uri, true); xhr.open("GET", uri, true);
@ -119,8 +116,8 @@ const Asset = function () {
}) })
}; };
this.getAssetOnSpeech = function() { this.getAssetOnSpeech = function() {
console.log(`getting claim for ${this.state.claimName}#${this.state.claimId}`) console.log(`getting claim for ${this.data.claimName}#${this.data.claimId}`)
const uri = `/api/claim-get/${this.state.claimName}/${this.state.claimId}`; const uri = `/api/claim-get/${this.data.claimName}/${this.data.claimId}`;
const xhr = new XMLHttpRequest(); const xhr = new XMLHttpRequest();
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
xhr.open("GET", uri, true); xhr.open("GET", uri, true);

12
views/partials/asset.handlebars
View file

@ -26,12 +26,12 @@
<script type="text/javascript"> <script type="text/javascript">
const asset = new Asset(); const asset = new Asset();
asset.setState('src', '/{{claimInfo.claimId}}/{{claimInfo.name}}.{{claimInfo.fileExt}}'); asset.data['src'] = '/{{claimInfo.claimId}}/{{claimInfo.name}}.{{claimInfo.fileExt}}';
asset.setState('claimName', '{{claimInfo.name}}'); asset.data['claimName'] = '{{claimInfo.name}}';
asset.setState('claimId', '{{claimInfo.claimId}}'); asset.data['claimId'] = '{{claimInfo.claimId}}';
asset.setState('fileExt', '{{claimInfo.fileExt}}'); asset.data['fileExt'] = '{{claimInfo.fileExt}}';
asset.setState('contentType', '{{claimInfo.contentType}}'); asset.data['contentType'] = '{{claimInfo.contentType}}';
console.log('asset state:', asset.state); console.log('asset data:', asset.data);
asset.checkFileAndRenderAsset(); asset.checkFileAndRenderAsset();
</script> </script>