updated thumbnail claim along with publish claim

This commit is contained in:
bill bittner 2018-03-01 19:38:02 -08:00
parent bdc01f3885
commit caa4705de2
5 changed files with 40 additions and 35 deletions

View file

@ -14,15 +14,11 @@ const mapDispatchToProps = dispatch => {
return {
selectFile: (file) => {
dispatch(selectFile(file));
dispatch(updateError('publishSubmit', null));
},
setFileError: (value) => {
dispatch(clearFile());
dispatch(updateError('file', value));
},
clearFileError: () => {
dispatch(updateError('file', null));
},
};
};

View file

@ -19,7 +19,7 @@ class Dropzone extends React.Component {
this.handleMouseLeave = this.handleMouseLeave.bind(this);
this.handleClick = this.handleClick.bind(this);
this.handleFileInput = this.handleFileInput.bind(this);
this.selectFile = this.selectFile.bind(this);
this.chooseFile = this.chooseFile.bind(this);
}
handleDrop (event) {
event.preventDefault();
@ -30,7 +30,7 @@ class Dropzone extends React.Component {
if (dt.items) {
if (dt.items[0].kind === 'file') {
const droppedFile = dt.items[0].getAsFile();
this.selectFile(droppedFile);
this.chooseFile(droppedFile);
}
}
}
@ -61,15 +61,14 @@ class Dropzone extends React.Component {
}
handleClick (event) {
event.preventDefault();
// trigger file input
document.getElementById('file_input').click();
}
handleFileInput (event) {
event.preventDefault();
const fileList = event.target.files;
this.selectFile(fileList[0]);
this.chooseFile(fileList[0]);
}
selectFile (file) {
chooseFile (file) {
if (file) {
try {
validateFile(file); // validate the file's name, type, and size
@ -77,7 +76,6 @@ class Dropzone extends React.Component {
return this.props.setFileError(error.message);
}
// stage it so it will be ready when the publish button is clicked
this.props.clearFileError(null);
this.props.selectFile(file);
}
}

View file

@ -15,16 +15,28 @@ class PublishThumbnailInput extends React.Component {
this.setThumbnailWithSnapshot = this.setThumbnailWithSnapshot.bind(this);
}
componentDidMount () {
this.setThumbnailClaimAndUrl();
this.setVideoSource();
console.log('thumbnail input did mount');
const { claim, file, host, thumbnailChannel } = this.props;
this.setThumbnailClaimAndUrl(claim, host, thumbnailChannel);
this.setVideoSource(file);
}
setThumbnailClaimAndUrl () {
const { claim, host, thumbnailChannel } = this.props;
componentWillReceiveProps (nextProps) {
// if file changes
if (nextProps.file !== this.props.file) {
const { file } = nextProps;
this.setVideoSource(file);
};
// if claim changes
if (nextProps.claim !== this.props.claim) {
const { claim, host, thumbnailChannel } = nextProps;
this.setThumbnailClaimAndUrl(claim, host, thumbnailChannel);
}
}
setThumbnailClaimAndUrl (claim, host, thumbnailChannel) {
const url = `${host}/${thumbnailChannel}/${claim}-thumb.png`;
this.props.onThumbnailChange(`${claim}-thumb`, url);
}
setVideoSource () {
const { file } = this.props;
setVideoSource (file) {
const previewReader = new FileReader();
previewReader.readAsDataURL(file);
previewReader.onloadend = () => {

View file

@ -8,16 +8,16 @@ class PublishUrlInput extends React.Component {
this.handleInput = this.handleInput.bind(this);
}
componentDidMount () {
if (!this.props.claim || this.props.claim === '') {
this.setClaimNameFromFileName();
const { claim, fileName } = this.props;
if (!claim) {
this.setClaimName(fileName);
}
}
componentWillReceiveProps ({claim: newClaim}) {
if (newClaim) {
this.checkClaimIsAvailable(newClaim);
} else {
this.props.onUrlError('Please enter a URL');
componentWillReceiveProps ({ claim, fileName }) {
if (!claim) {
return this.setClaimName(fileName);
}
this.checkClaimIsAvailable(claim);
}
handleInput (event) {
let value = event.target.value;
@ -30,8 +30,7 @@ class PublishUrlInput extends React.Component {
input = input.replace(/[^A-Za-z0-9-]/g, ''); // remove all characters that are not A-Z, a-z, 0-9, or '-'
return input;
}
setClaimNameFromFileName () {
const fileName = this.props.fileName;
setClaimName (fileName) {
const fileNameWithoutEnding = fileName.substring(0, fileName.lastIndexOf('.'));
const cleanClaimName = this.cleanseInput(fileNameWithoutEnding);
this.props.onClaimChange(cleanClaimName);
@ -39,7 +38,7 @@ class PublishUrlInput extends React.Component {
checkClaimIsAvailable (claim) {
request(`/api/claim/availability/${claim}`)
.then(isAvailable => {
// console.log('checkClaimIsAvailable request response:', isAvailable);
console.log('checkClaimIsAvailable request response:', isAvailable);
if (isAvailable) {
this.props.onUrlError(null);
} else {
@ -53,12 +52,12 @@ class PublishUrlInput extends React.Component {
render () {
return (
<div>
<p id="input-error-claim-name" className="info-message-placeholder info-message--failure">{this.props.urlError}</p>
<div className="column column--3 column--sml-10">
<label className="label">URL:</label>
</div><div className="column column--7 column--sml-10 input-text--primary span--relative">
<p id='input-error-claim-name' className='info-message-placeholder info-message--failure'>{this.props.urlError}</p>
<div className='column column--3 column--sml-10'>
<label className='label'>URL:</label>
</div><div className='column column--7 column--sml-10 input-text--primary span--relative'>
<span className="url-text--secondary">spee.ch / </span>
<span className='url-text--secondary'>spee.ch / </span>
<UrlMiddle
publishInChannel={this.props.publishInChannel}
@ -67,9 +66,9 @@ class PublishUrlInput extends React.Component {
loggedInChannelShortId={this.props.loggedInChannelShortId}
/>
<input type="text" id="claim-name-input" className="input-text" name='claim' placeholder="your-url-here" onChange={this.handleInput} value={this.props.claim}/>
{ (this.props.claim && !this.props.urlError) && <span id="input-success-claim-name" className="info-message--success span--absolute">{'\u2713'}</span> }
{ this.props.urlError && <span id="input-success-channel-name" className="info-message--failure span--absolute">{'\u2716'}</span> }
<input type='text' id='claim-name-input' className='input-text' name='claim' placeholder='your-url-here' onChange={this.handleInput} value={this.props.claim} />
{ (this.props.claim && !this.props.urlError) && <span id='input-success-claim-name' className='info-message--success span--absolute'>{'\u2713'}</span> }
{ this.props.urlError && <span id='input-success-channel-name' className='info-message--failure span--absolute'>{'\u2716'}</span> }
</div>
</div>
);

View file

@ -35,7 +35,7 @@ const initialState = {
export default function (state = initialState, action) {
switch (action.type) {
case actions.FILE_SELECTED:
return Object.assign({}, state, {
return Object.assign({}, initialState, { // note: clears to initial state
file: action.data,
});
case actions.FILE_CLEAR: