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

fixed errors in publishThumnailInput

Browse source
This commit is contained in:
bill bittner 2018-02-28 17:28:47 -08:00
parent 3367ecb01a
commit d3dc86fd1f
1 changed files with 11 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -6,11 +6,11 @@ const ThumbnailPreview = ({dataUrl}) => {
margin : '1%', margin : '1%',
display: 'inline-block', display: 'inline-block',
border : 'solid 1px black', border : 'solid 1px black',
} };
const imageStyle = { const imageStyle = {
width : '100%', width : '100%',
display: 'block', display: 'block',
} };
return ( return (
<div style={divStyle}> <div style={divStyle}>
{ dataUrl ? ( { dataUrl ? (
@ -20,7 +20,7 @@ const ThumbnailPreview = ({dataUrl}) => {
)} )}
</div> </div>
); );
} };
class PublishThumbnailInput extends React.Component { class PublishThumbnailInput extends React.Component {
constructor (props) { constructor (props) {
@ -29,18 +29,13 @@ class PublishThumbnailInput extends React.Component {
videoPreviewSrc: null, videoPreviewSrc: null,
thumbnailError : null, thumbnailError : null,
thumbnailInput : '', thumbnailInput : '',
} };
this.handleInput = this.handleInput.bind(this);
this.updateVideoThumb = this.updateVideoThumb.bind(this);
} }
componentDidMount () { componentDidMount () {
this.setClaimAndThumbailUrl(this.props.publishClaim); this.setClaimAndThumbailUrl(this.props.publishClaim);
this.previewThumbnails(this.props.publishFile); this.previewThumbnails(this.props.publishFile);
} }
componentWillReceiveProps (nextProps) { componentWillReceiveProps (nextProps) {
// if (nextProps.publishFile !== this.publishFile) {
// this.createThumbnails(nextProps.publishFile);
// }
if (nextProps.publishClaim !== this.props.publishClaim) { if (nextProps.publishClaim !== this.props.publishClaim) {
console.log(nextProps.publishClaim, this.props.publishClaim); console.log(nextProps.publishClaim, this.props.publishClaim);
this.setClaimAndThumbailUrl(nextProps.publishClaim); this.setClaimAndThumbailUrl(nextProps.publishClaim);
@ -50,7 +45,6 @@ class PublishThumbnailInput extends React.Component {
console.log('video file:', videoFile); console.log('video file:', videoFile);
this.loadFileAndReturnThumbnails(videoFile) this.loadFileAndReturnThumbnails(videoFile)
.then((thumbnail) => { .then((thumbnail) => {
console.log('thumbs:', thumbnail);
this.selectVideoThumb(thumbnail); this.selectVideoThumb(thumbnail);
this.setPossibleThumbnailFiles(thumbnail, thumbnail, thumbnail); this.setPossibleThumbnailFiles(thumbnail, thumbnail, thumbnail);
}) })
@ -67,9 +61,7 @@ class PublishThumbnailInput extends React.Component {
const blob = new Blob([fileReader.result], {type: file.type}); const blob = new Blob([fileReader.result], {type: file.type});
const url = URL.createObjectURL(blob); const url = URL.createObjectURL(blob);
let video = document.createElement('video'); let video = document.createElement('video');
const snapShot = (time) => { const snapShot = () => {
console.log('creating thubmnail @', time);
// video.currentTime = time;
let canvas = document.createElement('canvas'); let canvas = document.createElement('canvas');
canvas.width = video.videoWidth; canvas.width = video.videoWidth;
canvas.height = video.videoHeight; canvas.height = video.videoHeight;
@ -80,15 +72,15 @@ class PublishThumbnailInput extends React.Component {
return imageDataUrl; return imageDataUrl;
} }
return success; return success;
} };
const loadedata = () => { const loadedata = () => {
console.log('loadeddata'); console.log('loadeddata');
console.log('readyState', video.readyState); console.log('readyState', video.readyState);
const duration = video.duration; const duration = video.duration;
console.log('readyState', duration); console.log('readyState', duration);
const thumb = snapShot(duration / 2); const thumb = snapShot();
resolve(thumb); resolve(thumb);
} };
video.addEventListener('loadeddata', loadedata); video.addEventListener('loadeddata', loadedata);
video.preload = 'metadata'; video.preload = 'metadata';
video.src = url; video.src = url;
@ -116,10 +108,10 @@ class PublishThumbnailInput extends React.Component {
render () { render () {
return ( return (
<div> <div>
<label className="label">Thumbnail:</label> <label className='label'>Thumbnail:</label>
<div> <div>
<p className="info-message-placeholder info-message--failure">{this.state.error}</p> <p className='info-message-placeholder info-message--failure'>{this.state.error}</p>
{this.props.potentialFiles.map((file, index) => <ThumbnailPreview dataUrl={file} key={index}/>)} {this.props.potentialFiles.map((file, index) => <ThumbnailPreview dataUrl={file} key={index} />)}
</div> </div>
</div> </div>
); );