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

updated thumbnail to store as blob

Browse source
This commit is contained in:
bill bittner 2018-03-01 20:09:22 -08:00
parent caa4705de2
commit 91d41bc595
2 changed files with 35 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
react/components/Preview/index.jsx
View file

@ -10,25 +10,31 @@ class Preview extends React.Component {
};
}
componentDidMount () {
this.previewFile(this.props.file);
this.setPreviewImageSource(this.props.file);
}
componentWillReceiveProps (newProps) {
if (newProps.file !== this.props.file) {
this.previewFile(newProps.file);
this.setPreviewImageSource(newProps.file);
}
if (newProps.thumbnail !== this.props.thumbnail) {
this.setState({imgSource: (newProps.thumbnail || this.state.defaultThumbnail)});
this.setPreviewImageSourceFromFile(newProps.thumbnail);
}
}
previewFile (file) {
if (file.type !== 'video/mp4') {
setPreviewImageSourceFromFile (file) {
const previewReader = new FileReader();
previewReader.readAsDataURL(file);
previewReader.onloadend = () => {
this.setState({imgSource: previewReader.result});
};
}
setPreviewImageSource (file) {
if (file.type !== 'video/mp4') {
this.setPreviewImageSourceFromFile(file);
} else {
this.setState({imgSource: (this.props.thumbnail || this.state.defaultThumbnail)});
if (this.props.thumbnail) {
this.setPreviewImageSourceFromFile(this.props.thumbnail);
}
this.setState({imgSource: this.state.defaultThumbnail});
}
}
render () {
@ -46,7 +52,7 @@ class Preview extends React.Component {
Preview.propTypes = {
dimPreview: PropTypes.bool.isRequired,
file : PropTypes.object.isRequired,
thumbnail : PropTypes.string,
thumbnail : PropTypes.object,
};
export default Preview;

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

@ -1,5 +1,18 @@
import React from 'react';
function dataURItoBlob(dataURI) {
// convert base64/URLEncoded data component to raw binary data held in a string
let byteString = atob(dataURI.split(',')[1]);
// separate out the mime component
let mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];
// write the bytes of the string to a typed array
let ia = new Uint8Array(byteString.length);
for (var i = 0; i < byteString.length; i++) {
ia[i] = byteString.charCodeAt(i);
}
return new Blob([ia], {type: mimeString});
}
class PublishThumbnailInput extends React.Component {
constructor (props) {
super(props);
@ -68,7 +81,9 @@ class PublishThumbnailInput extends React.Component {
// take a snapshot
const snapshot = this.takeSnapShot();
// set the thumbnail in redux store
if (snapshot) this.props.onThumbnailFileSelect(snapshot);
if (snapshot) {
this.props.onThumbnailFileSelect(snapshot);
}
}
takeSnapShot () {
let video = document.getElementById('video-thumb-player');
@ -76,7 +91,8 @@ class PublishThumbnailInput extends React.Component {
canvas.width = video.videoWidth;
canvas.height = video.videoHeight;
canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);
return canvas.toDataURL();
const dataUri = canvas.toDataURL();
return dataURItoBlob(dataUri);
}
render () {
const { error, videoSource, sliderMinRange, sliderMaxRange, sliderValue } = this.state;