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

updated video preview

Browse source
This commit is contained in:
bill bittner 2018-01-17 12:54:26 -08:00
parent 2393fcc702
commit 0aa1456fc0
3 changed files with 61 additions and 39 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
public/assets/js/generalFunctions.js
View file

@ -4,10 +4,10 @@ function getRequest (url) {
xhttp.open('GET', url, true);
xhttp.responseType = 'json';
xhttp.onreadystatechange = () => {
if (xhttp.readyState == 4 ) {
if ( xhttp.status == 200) {
if (xhttp.readyState === 4 ) {
if ( xhttp.status === 200) {
resolve(xhttp.response);
} else if (xhttp.status == 403) {
} else if (xhttp.status === 403) {
reject('Wrong channel name or password');
} else {
reject('request failed with status:' + xhttp.status);
@ -25,10 +25,10 @@ function postRequest (url, params) {
xhttp.responseType = 'json';
xhttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
xhttp.onreadystatechange = () => {
if (xhttp.readyState == 4 ) {
if ( xhttp.status == 200) {
if (xhttp.readyState === 4 ) {
if ( xhttp.status === 200) {
resolve(xhttp.response);
} else if (xhttp.status == 401) {
} else if (xhttp.status === 401) {
reject( new AuthenticationError('Wrong channel name or password'));
} else {
reject('request failed with status:' + xhttp.status);

20
react/components/Preview.jsx
View file

@ -5,8 +5,9 @@ class Preview extends React.Component {
constructor (props) {
super(props);
this.state = {
previewSource: '',
}
imgSource : '',
defaultThumbnail: '/assets/img/video_thumb_default.png',
};
this.previewFile = this.previewFile.bind(this);
}
componentWillMount () {
@ -14,7 +15,14 @@ class Preview extends React.Component {
this.previewFile(this.props.file);
}
componentWillReceiveProps (newProps) {
this.previewFile(newProps.file);
console.log('Preview will receive props', newProps);
if (newProps.file !== this.props.file) {
this.previewFile(newProps.file);
}
if (newProps.thumbnail !== this.props.thumbnail) {
console.log('updating thumbnail', this.props.thumbnail);
this.setState({imgSource: (newProps.thumbnail || this.state.defaultThumbnail)});
}
}
previewFile (file) {
const that = this;
@ -22,17 +30,17 @@ class Preview extends React.Component {
const previewReader = new FileReader();
previewReader.readAsDataURL(file);
previewReader.onloadend = function () {
that.setState({previewSource: previewReader.result});
that.setState({imgSource: previewReader.result});
};
} else {
that.setState({previewSource: (this.props.thumbnail || '/assets/img/video_thumb_default.png')});
that.setState({imgSource: (this.props.thumbnail || this.state.defaultThumbnail)});
}
}
render () {
return (
<img
id="asset-preview"
src={this.state.previewSource}
src={this.state.imgSource}
className={this.props.dimPreview ? 'dim' : ''}
alt="publish preview"
/>

68
react/containers/PublishThumbnailInput/view.jsx
View file

@ -5,51 +5,56 @@ class PublishThumbnailInput extends React.Component {
super(props);
this.state = {
videoPreviewSrc: null,
thumbnailError : null,
thumbnailInput : '',
}
this.handleInput = this.handleInput.bind(this);
this.urlIsAnImage = this.urlIsAnImage.bind(this);
this.testImage = this.testImage.bind(this);
this.updateVideoThumb = this.updateVideoThumb.bind(this);
}
handleInput (event) {
event.preventDefault();
const value = event.target.value;
this.setState({thumbnailInput: value});
}
urlIsAnImage (url) {
return (url.match(/\.(jpeg|jpg|gif|png)$/) != null);
}
testImage (url, timeoutT) {
return new Promise(function (resolve, reject) {
const timeout = timeoutT || 5000;
let timer;
let img = new Image();
img.onerror = img.onabort = function () {
clearTimeout(timer);
reject('error');
testImage (url) {
return new Promise((resolve, reject) => {
const xhttp = new XMLHttpRequest();
xhttp.open('HEAD', url, true);
xhttp.onreadystatechange = () => {
if (xhttp.readyState === 4) {
if (xhttp.status === 200) {
resolve();
} else {
reject();
}
}
};
img.onload = function () {
clearTimeout(timer);
resolve('success');
};
timer = setTimeout(function () {
// reset .src to invalid URL so it stops previous
// loading, but doesn't trigger new load
img.src = '//!!!!/test.jpg';
reject('timeout');
}, timeout);
img.src = url;
xhttp.send();
});
}
updateVideoThumb (event) {
var imageUrl = event.target.value;
const imageUrl = event.target.value;
const that = this;
if (this.urlIsAnImage(imageUrl)) {
this.testImage(imageUrl, 3000)
.then(function (result) {
if (result === 'success') {
that.props.onThumbnailChange('thumbnail', imageUrl);
} else if (result === 'timeout') {
console.log('could not resolve the provided thumbnail image url');
}
.then(() => {
console.log('thumbnail is a valid image');
that.props.onThumbnailChange('thumbnail', imageUrl);
that.setState({thumbnailError: null});
})
.catch(error => {
console.log('encountered an error loading thumbnail image url:', error);
that.props.onThumbnailChange('thumbnail', null);
that.setState({thumbnailError: 'That is an invalid image url'});
});
} else {
that.props.onThumbnailChange('thumbnail', null);
that.setState({thumbnailError: null});
}
}
render () {
@ -59,7 +64,16 @@ class PublishThumbnailInput extends React.Component {
<label className="label">Thumbnail:</label>
</div><div className="column column--6 column--sml-10">
<div className="input-text--primary">
<input type="text" id="claim-thumbnail-input" className="input-text input-text--full-width" placeholder="https://spee.ch/xyz/example.jpg" value={this.props.thumbnail} onInput={this.updateVideoThumb} />
<p className="info-message-placeholder info-message--failure">{this.state.thumbnailError}</p>
<input
type="text" id="claim-thumbnail-input"
className="input-text input-text--full-width"
placeholder="https://spee.ch/xyz/example.jpg"
value={this.state.thumbnailInput}
onChange={ (event) => {
this.handleInput(event);
this.updateVideoThumb(event);
}} />
</div>
</div>
</div>