updated thumbnail claim along with publish claim
This commit is contained in:
parent
bdc01f3885
commit
caa4705de2
5 changed files with 40 additions and 35 deletions
|
@ -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));
|
||||
},
|
||||
};
|
||||
};
|
||||
|
||||
|
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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 = () => {
|
||||
|
|
|
@ -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>
|
||||
);
|
||||
|
|
|
@ -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:
|
||||
|
|
Loading…
Reference in a new issue