Compare commits
3 commits
master
...
publish-ux
Author | SHA1 | Date | |
---|---|---|---|
|
6733f12e4f | ||
|
950b7066a6 | ||
|
0c6d17a1a2 |
8 changed files with 192 additions and 74 deletions
|
@ -15,7 +15,7 @@ import {
|
||||||
import { doPushDrawerStack, doPopDrawerStack, doSetPlayerVisible } from 'redux/actions/drawer';
|
import { doPushDrawerStack, doPopDrawerStack, doSetPlayerVisible } from 'redux/actions/drawer';
|
||||||
import { doUpdateChannelFormState, doClearChannelFormState } from 'redux/actions/form';
|
import { doUpdateChannelFormState, doClearChannelFormState } from 'redux/actions/form';
|
||||||
import { selectDrawerStack } from 'redux/selectors/drawer';
|
import { selectDrawerStack } from 'redux/selectors/drawer';
|
||||||
import { selectChannelFormState } from 'redux/selectors/form';
|
import { selectChannelFormState, selectHasChannelFormState } from 'redux/selectors/form';
|
||||||
import Constants from 'constants'; // eslint-disable-line node/no-deprecated-api
|
import Constants from 'constants'; // eslint-disable-line node/no-deprecated-api
|
||||||
import ChannelCreator from './view';
|
import ChannelCreator from './view';
|
||||||
|
|
||||||
|
@ -26,6 +26,7 @@ const select = state => ({
|
||||||
drawerStack: selectDrawerStack(state),
|
drawerStack: selectDrawerStack(state),
|
||||||
fetchingChannels: selectFetchingMyChannels(state),
|
fetchingChannels: selectFetchingMyChannels(state),
|
||||||
balance: selectBalance(state),
|
balance: selectBalance(state),
|
||||||
|
hasFormState: selectHasChannelFormState(state),
|
||||||
updatingChannel: selectUpdatingChannel(state),
|
updatingChannel: selectUpdatingChannel(state),
|
||||||
updateChannelError: selectUpdateChannelError(state),
|
updateChannelError: selectUpdateChannelError(state),
|
||||||
});
|
});
|
||||||
|
|
|
@ -35,7 +35,7 @@ export default class ChannelCreator extends React.PureComponent {
|
||||||
canSave: false,
|
canSave: false,
|
||||||
claimId: null,
|
claimId: null,
|
||||||
currentSelectedValue: Constants.ITEM_ANONYMOUS,
|
currentSelectedValue: Constants.ITEM_ANONYMOUS,
|
||||||
currentPhase: Constants.PHASE_LIST,
|
currentPhase: null,
|
||||||
displayName: null,
|
displayName: null,
|
||||||
channelNameUserEdited: false,
|
channelNameUserEdited: false,
|
||||||
newChannelTitle: '',
|
newChannelTitle: '',
|
||||||
|
@ -110,8 +110,8 @@ export default class ChannelCreator extends React.PureComponent {
|
||||||
};
|
};
|
||||||
|
|
||||||
componentWillReceiveProps(nextProps) {
|
componentWillReceiveProps(nextProps) {
|
||||||
const { currentRoute, drawerStack, updatingChannel, updateChannelError } = nextProps;
|
|
||||||
const { currentRoute: prevRoute, drawerStack: prevDrawerStack, notify } = this.props;
|
const { currentRoute: prevRoute, drawerStack: prevDrawerStack, notify } = this.props;
|
||||||
|
const { currentRoute, drawerStack, updatingChannel, updateChannelError } = nextProps;
|
||||||
|
|
||||||
if (Constants.DRAWER_ROUTE_CHANNEL_CREATOR === currentRoute && currentRoute !== prevRoute) {
|
if (Constants.DRAWER_ROUTE_CHANNEL_CREATOR === currentRoute && currentRoute !== prevRoute) {
|
||||||
this.onComponentFocused();
|
this.onComponentFocused();
|
||||||
|
@ -148,6 +148,7 @@ export default class ChannelCreator extends React.PureComponent {
|
||||||
navigation,
|
navigation,
|
||||||
pushDrawerStack,
|
pushDrawerStack,
|
||||||
setPlayerVisible,
|
setPlayerVisible,
|
||||||
|
hasFormState,
|
||||||
} = this.props;
|
} = this.props;
|
||||||
|
|
||||||
NativeModules.Firebase.setCurrentScreen('Channels').then(result => {
|
NativeModules.Firebase.setCurrentScreen('Channels').then(result => {
|
||||||
|
@ -163,14 +164,20 @@ export default class ChannelCreator extends React.PureComponent {
|
||||||
DeviceEventEmitter.addListener('onDocumentPickerFilePicked', this.onFilePicked);
|
DeviceEventEmitter.addListener('onDocumentPickerFilePicked', this.onFilePicked);
|
||||||
DeviceEventEmitter.addListener('onDocumentPickerCanceled', this.onPickerCanceled);
|
DeviceEventEmitter.addListener('onDocumentPickerCanceled', this.onPickerCanceled);
|
||||||
|
|
||||||
|
let isEditMode = false;
|
||||||
if (navigation.state.params) {
|
if (navigation.state.params) {
|
||||||
const { editChannelUrl, displayForm } = navigation.state.params;
|
const { editChannelUrl, displayForm } = navigation.state.params;
|
||||||
if (editChannelUrl) {
|
if (editChannelUrl) {
|
||||||
|
isEditMode = true;
|
||||||
this.setState({ editChannelUrl, currentPhase: Constants.PHASE_CREATE });
|
this.setState({ editChannelUrl, currentPhase: Constants.PHASE_CREATE });
|
||||||
} else if (displayForm) {
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!isEditMode && hasFormState) {
|
||||||
this.loadPendingFormState();
|
this.loadPendingFormState();
|
||||||
this.setState({ currentPhase: Constants.PHASE_CREATE });
|
this.setState({ currentPhase: Constants.PHASE_CREATE });
|
||||||
}
|
} else {
|
||||||
|
this.setState({ currentPhase: Constants.PHASE_LIST });
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
@ -519,7 +526,6 @@ export default class ChannelCreator extends React.PureComponent {
|
||||||
handleNewChannelPress = () => {
|
handleNewChannelPress = () => {
|
||||||
const { pushDrawerStack } = this.props;
|
const { pushDrawerStack } = this.props;
|
||||||
pushDrawerStack(Constants.DRAWER_ROUTE_CHANNEL_CREATOR_FORM);
|
pushDrawerStack(Constants.DRAWER_ROUTE_CHANNEL_CREATOR_FORM);
|
||||||
this.loadPendingFormState();
|
|
||||||
this.setState({ currentPhase: Constants.PHASE_CREATE });
|
this.setState({ currentPhase: Constants.PHASE_CREATE });
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
@ -8,22 +8,31 @@ import {
|
||||||
selectBalance,
|
selectBalance,
|
||||||
selectPublishFormValues,
|
selectPublishFormValues,
|
||||||
} from 'lbry-redux';
|
} from 'lbry-redux';
|
||||||
import { doPushDrawerStack, doSetPlayerVisible } from 'redux/actions/drawer';
|
import { selectDrawerStack } from 'redux/selectors/drawer';
|
||||||
|
import { doUpdatePublishFormState, doClearPublishFormState } from 'redux/actions/form';
|
||||||
|
import { doPushDrawerStack, doPopDrawerStack, doSetPlayerVisible } from 'redux/actions/drawer';
|
||||||
|
import { selectPublishFormState, selectHasPublishFormState } from 'redux/selectors/form';
|
||||||
import Constants from 'constants'; // eslint-disable-line node/no-deprecated-api
|
import Constants from 'constants'; // eslint-disable-line node/no-deprecated-api
|
||||||
import PublishPage from './view';
|
import PublishPage from './view';
|
||||||
|
|
||||||
const select = state => ({
|
const select = state => ({
|
||||||
balance: selectBalance(state),
|
balance: selectBalance(state),
|
||||||
|
drawerStack: selectDrawerStack(state),
|
||||||
|
hasFormState: selectHasPublishFormState(state),
|
||||||
|
publishFormState: selectPublishFormState(state),
|
||||||
publishFormValues: selectPublishFormValues(state),
|
publishFormValues: selectPublishFormValues(state),
|
||||||
});
|
});
|
||||||
|
|
||||||
const perform = dispatch => ({
|
const perform = dispatch => ({
|
||||||
notify: data => dispatch(doToast(data)),
|
notify: data => dispatch(doToast(data)),
|
||||||
|
clearPublishFormState: () => dispatch(doClearPublishFormState()),
|
||||||
updatePublishForm: value => dispatch(doUpdatePublishForm(value)),
|
updatePublishForm: value => dispatch(doUpdatePublishForm(value)),
|
||||||
|
updatePublishFormState: data => dispatch(doUpdatePublishFormState(data)),
|
||||||
uploadThumbnail: (filePath, fsAdapter) => dispatch(doUploadThumbnail(filePath, null, fsAdapter)),
|
uploadThumbnail: (filePath, fsAdapter) => dispatch(doUploadThumbnail(filePath, null, fsAdapter)),
|
||||||
publish: (success, fail) => dispatch(doPublish(success, fail)),
|
publish: (success, fail) => dispatch(doPublish(success, fail)),
|
||||||
resolveUri: uri => dispatch(doResolveUri(uri)),
|
resolveUri: uri => dispatch(doResolveUri(uri)),
|
||||||
pushDrawerStack: () => dispatch(doPushDrawerStack(Constants.DRAWER_ROUTE_PUBLISH)),
|
pushDrawerStack: (routeName, params) => dispatch(doPushDrawerStack(routeName, params)),
|
||||||
|
popDrawerStack: () => dispatch(doPopDrawerStack()),
|
||||||
setPlayerVisible: () => dispatch(doSetPlayerVisible(false)),
|
setPlayerVisible: () => dispatch(doSetPlayerVisible(false)),
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
|
@ -84,6 +84,7 @@ class PublishPage extends React.PureComponent {
|
||||||
titleFocused: false,
|
titleFocused: false,
|
||||||
descriptionFocused: false,
|
descriptionFocused: false,
|
||||||
loadingVideos: false,
|
loadingVideos: false,
|
||||||
|
vanityUrl: null,
|
||||||
|
|
||||||
// gallery videos
|
// gallery videos
|
||||||
videos: null,
|
videos: null,
|
||||||
|
@ -102,7 +103,7 @@ class PublishPage extends React.PureComponent {
|
||||||
currentMedia: null,
|
currentMedia: null,
|
||||||
currentThumbnailUri: null,
|
currentThumbnailUri: null,
|
||||||
updatingThumbnailUri: false,
|
updatingThumbnailUri: false,
|
||||||
currentPhase: Constants.PHASE_SELECTOR,
|
currentPhase: null,
|
||||||
|
|
||||||
// publish
|
// publish
|
||||||
advancedMode: false,
|
advancedMode: false,
|
||||||
|
@ -167,12 +168,18 @@ class PublishPage extends React.PureComponent {
|
||||||
this.setState({ allThumbnailsChecked: true });
|
this.setState({ allThumbnailsChecked: true });
|
||||||
};
|
};
|
||||||
|
|
||||||
|
loadPendingFormState = () => {
|
||||||
|
const { publishFormState } = this.props;
|
||||||
|
const advancedMode = publishFormState.license !== null;
|
||||||
|
this.setState({ ...publishFormState, advancedMode });
|
||||||
|
};
|
||||||
|
|
||||||
onComponentFocused = () => {
|
onComponentFocused = () => {
|
||||||
const { balance, pushDrawerStack, setPlayerVisible, navigation } = this.props;
|
const { balance, hasFormState, pushDrawerStack, setPlayerVisible, navigation } = this.props;
|
||||||
pushDrawerStack();
|
NativeModules.Firebase.setCurrentScreen('Publish').then(result => {
|
||||||
|
pushDrawerStack(Constants.DRAWER_ROUTE_PUBLISH, navigation.state.params ? navigation.state.params : null);
|
||||||
setPlayerVisible();
|
setPlayerVisible();
|
||||||
|
|
||||||
NativeModules.Firebase.setCurrentScreen('Publish').then(result => {
|
|
||||||
NativeModules.Gallery.canUseCamera().then(canUseCamera => this.setState({ canUseCamera }));
|
NativeModules.Gallery.canUseCamera().then(canUseCamera => this.setState({ canUseCamera }));
|
||||||
NativeModules.Gallery.getThumbnailPath().then(thumbnailPath => this.setState({ thumbnailPath }));
|
NativeModules.Gallery.getThumbnailPath().then(thumbnailPath => this.setState({ thumbnailPath }));
|
||||||
this.setState(
|
this.setState(
|
||||||
|
@ -186,26 +193,44 @@ class PublishPage extends React.PureComponent {
|
||||||
);
|
);
|
||||||
|
|
||||||
// Check if this is an edit action
|
// Check if this is an edit action
|
||||||
|
let isEditMode = false,
|
||||||
|
vanityUrlSet = false;
|
||||||
if (navigation.state.params) {
|
if (navigation.state.params) {
|
||||||
const { editMode, claimToEdit, vanityUrl } = navigation.state.params;
|
const { displayForm, editMode, claimToEdit, vanityUrl } = navigation.state.params;
|
||||||
if (editMode) {
|
if (editMode) {
|
||||||
this.prepareEdit(claimToEdit);
|
this.prepareEdit(claimToEdit);
|
||||||
|
isEditMode = true;
|
||||||
} else if (vanityUrl) {
|
} else if (vanityUrl) {
|
||||||
const { claimName } = parseURI(vanityUrl);
|
const { claimName } = parseURI(vanityUrl);
|
||||||
|
vanityUrlSet = true;
|
||||||
this.setState({
|
this.setState({
|
||||||
name: claimName,
|
name: claimName,
|
||||||
hasEditedContentAddress: true,
|
hasEditedContentAddress: true,
|
||||||
vanityUrlSet: true,
|
vanityUrlSet,
|
||||||
|
vanityUrl: claimName,
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
if (!isEditMode && hasFormState) {
|
||||||
|
this.loadPendingFormState();
|
||||||
|
if (vanityUrlSet) {
|
||||||
|
// replace name with the specified vanity URL if there was one in the pending state
|
||||||
|
this.setState({ name: this.state.vanityUrl });
|
||||||
|
}
|
||||||
|
this.setState({ currentPhase: Constants.PHASE_DETAILS });
|
||||||
|
} else {
|
||||||
|
this.setState({ currentPhase: Constants.PHASE_SELECTOR });
|
||||||
|
}
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
prepareEdit = claim => {
|
prepareEdit = claim => {
|
||||||
let channelName;
|
const { pushDrawerStack } = this.props;
|
||||||
const { amount, name, signing_channel: signingChannel, value } = claim;
|
const { amount, name, signing_channel: signingChannel, value } = claim;
|
||||||
const { description, fee, languages, license, license_url: licenseUrl, tags, thumbnail, title } = value;
|
const { description, fee, languages, license, license_url: licenseUrl, tags, thumbnail, title } = value;
|
||||||
|
|
||||||
|
let channelName;
|
||||||
if (signingChannel) {
|
if (signingChannel) {
|
||||||
channelName = signingChannel.name;
|
channelName = signingChannel.name;
|
||||||
}
|
}
|
||||||
|
@ -256,6 +281,7 @@ class PublishPage extends React.PureComponent {
|
||||||
if (channelName) {
|
if (channelName) {
|
||||||
this.handleChannelChange(channelName);
|
this.handleChannelChange(channelName);
|
||||||
}
|
}
|
||||||
|
pushDrawerStack(Constants.DRAWER_ROUTE_PUBLISH_FORM);
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
@ -374,8 +400,8 @@ class PublishPage extends React.PureComponent {
|
||||||
}
|
}
|
||||||
|
|
||||||
componentWillReceiveProps(nextProps) {
|
componentWillReceiveProps(nextProps) {
|
||||||
const { currentRoute, publishFormValues } = nextProps;
|
const { currentRoute: prevRoute, drawerStack: prevDrawerStack, notify, updatePublishFormState } = this.props;
|
||||||
const { currentRoute: prevRoute, notify } = this.props;
|
const { currentRoute, drawerStack, publishFormValues } = nextProps;
|
||||||
|
|
||||||
if (Constants.DRAWER_ROUTE_PUBLISH === currentRoute && currentRoute !== prevRoute) {
|
if (Constants.DRAWER_ROUTE_PUBLISH === currentRoute && currentRoute !== prevRoute) {
|
||||||
this.onComponentFocused();
|
this.onComponentFocused();
|
||||||
|
@ -383,24 +409,38 @@ class PublishPage extends React.PureComponent {
|
||||||
|
|
||||||
if (publishFormValues) {
|
if (publishFormValues) {
|
||||||
if (publishFormValues.thumbnail && !this.state.uploadedThumbnailUri) {
|
if (publishFormValues.thumbnail && !this.state.uploadedThumbnailUri) {
|
||||||
this.setState({
|
const { thumbnail } = publishFormValues;
|
||||||
currentThumbnailUri: publishFormValues.thumbnail,
|
updatePublishFormState({ currentThumbnailUri: thumbnail, uploadedThumbnailUri: thumbnail });
|
||||||
uploadedThumbnailUri: publishFormValues.thumbnail,
|
this.setState({ currentThumbnailUri: thumbnail, uploadedThumbnailUri: thumbnail });
|
||||||
});
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
if (
|
||||||
|
this.state.currentPhase === Constants.PHASE_DETAILS &&
|
||||||
|
prevDrawerStack[prevDrawerStack.length - 1].route === Constants.DRAWER_ROUTE_PUBLISH_FORM &&
|
||||||
|
drawerStack[drawerStack.length - 1].route === Constants.DRAWER_ROUTE_PUBLISH
|
||||||
|
) {
|
||||||
|
// navigated back from the form
|
||||||
|
this.showSelector();
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
setCurrentMedia(media) {
|
setCurrentMedia(media) {
|
||||||
|
const { pushDrawerStack, updatePublishFormState } = this.props;
|
||||||
const name = generateCombination(2, ' ', true);
|
const name = generateCombination(2, ' ', true);
|
||||||
|
const newName = this.state.hasEditedContentAddress ? this.state.name : this.formatNameForTitle(name);
|
||||||
|
updatePublishFormState({ currentMedia: media, name: newName });
|
||||||
this.setState(
|
this.setState(
|
||||||
{
|
{
|
||||||
currentMedia: media,
|
currentMedia: media,
|
||||||
title: null, // no title autogeneration (user will fill this in)
|
title: null, // no title autogeneration (user will fill this in)
|
||||||
name: this.state.hasEditedContentAddress ? this.state.name : this.formatNameForTitle(name),
|
name: newName,
|
||||||
currentPhase: Constants.PHASE_DETAILS,
|
currentPhase: Constants.PHASE_DETAILS,
|
||||||
},
|
},
|
||||||
() => this.handleNameChange(this.state.name)
|
() => {
|
||||||
|
this.handleNameChange(this.state.name);
|
||||||
|
pushDrawerStack(Constants.DRAWER_ROUTE_PUBLISH_FORM);
|
||||||
|
}
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -416,6 +456,7 @@ class PublishPage extends React.PureComponent {
|
||||||
publishStarted: false,
|
publishStarted: false,
|
||||||
documentPickerOpen: false,
|
documentPickerOpen: false,
|
||||||
editMode: false,
|
editMode: false,
|
||||||
|
vanityUrl: null,
|
||||||
|
|
||||||
currentMedia: null,
|
currentMedia: null,
|
||||||
currentThumbnailUri: null,
|
currentThumbnailUri: null,
|
||||||
|
@ -505,6 +546,8 @@ class PublishPage extends React.PureComponent {
|
||||||
};
|
};
|
||||||
|
|
||||||
handleCameraActionPressed = () => {
|
handleCameraActionPressed = () => {
|
||||||
|
const { pushDrawerStack } = this.props;
|
||||||
|
|
||||||
// check if it's video or photo mode
|
// check if it's video or photo mode
|
||||||
if (this.state.videoRecordingMode) {
|
if (this.state.videoRecordingMode) {
|
||||||
if (this.state.recordingVideo) {
|
if (this.state.recordingVideo) {
|
||||||
|
@ -522,14 +565,17 @@ class PublishPage extends React.PureComponent {
|
||||||
duration: 0,
|
duration: 0,
|
||||||
};
|
};
|
||||||
this.setCurrentMedia(currentMedia);
|
this.setCurrentMedia(currentMedia);
|
||||||
this.setState({
|
this.setState(
|
||||||
|
{
|
||||||
currentThumbnailUri: null,
|
currentThumbnailUri: null,
|
||||||
updatingThumbnailUri: false,
|
updatingThumbnailUri: false,
|
||||||
currentPhase: Constants.PHASE_DETAILS,
|
currentPhase: Constants.PHASE_DETAILS,
|
||||||
showCameraOverlay: false,
|
showCameraOverlay: false,
|
||||||
videoRecordingMode: false,
|
videoRecordingMode: false,
|
||||||
recordingVideo: false,
|
recordingVideo: false,
|
||||||
});
|
},
|
||||||
|
() => pushDrawerStack(Constants.DRAWER_ROUTE_PUBLISH_FORM)
|
||||||
|
);
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
|
@ -543,13 +589,16 @@ class PublishPage extends React.PureComponent {
|
||||||
duration: 0,
|
duration: 0,
|
||||||
};
|
};
|
||||||
this.setCurrentMedia(currentMedia);
|
this.setCurrentMedia(currentMedia);
|
||||||
this.setState({
|
this.setState(
|
||||||
|
{
|
||||||
currentPhase: Constants.PHASE_DETAILS,
|
currentPhase: Constants.PHASE_DETAILS,
|
||||||
currentThumbnailUri: null,
|
currentThumbnailUri: null,
|
||||||
updatingThumbnailUri: false,
|
updatingThumbnailUri: false,
|
||||||
showCameraOverlay: false,
|
showCameraOverlay: false,
|
||||||
videoRecordingMode: false,
|
videoRecordingMode: false,
|
||||||
});
|
},
|
||||||
|
() => pushDrawerStack(Constants.DRAWER_ROUTE_PUBLISH)
|
||||||
|
);
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
@ -575,15 +624,20 @@ class PublishPage extends React.PureComponent {
|
||||||
};
|
};
|
||||||
|
|
||||||
handleBidChange = bid => {
|
handleBidChange = bid => {
|
||||||
|
const { updatePublishFormState } = this.props;
|
||||||
|
updatePublishFormState({ bid });
|
||||||
this.setState({ bid });
|
this.setState({ bid });
|
||||||
};
|
};
|
||||||
|
|
||||||
handlePriceChange = price => {
|
handlePriceChange = price => {
|
||||||
|
const { updatePublishFormState } = this.props;
|
||||||
|
updatePublishFormState({ price });
|
||||||
this.setState({ price });
|
this.setState({ price });
|
||||||
};
|
};
|
||||||
|
|
||||||
handleNameChange = (name, userInput) => {
|
handleNameChange = (name, userInput) => {
|
||||||
const { notify } = this.props;
|
const { notify, updatePublishFormState } = this.props;
|
||||||
|
updatePublishFormState({ name });
|
||||||
this.setState({ name });
|
this.setState({ name });
|
||||||
if (userInput) {
|
if (userInput) {
|
||||||
this.setState({ hasEditedContentAddress: true });
|
this.setState({ hasEditedContentAddress: true });
|
||||||
|
@ -599,8 +653,10 @@ class PublishPage extends React.PureComponent {
|
||||||
};
|
};
|
||||||
|
|
||||||
handleChannelChange = channel => {
|
handleChannelChange = channel => {
|
||||||
|
const { updatePublishFormState } = this.props;
|
||||||
const { name } = this.state;
|
const { name } = this.state;
|
||||||
const uri = this.getNewUri(name, channel);
|
const uri = this.getNewUri(name, channel);
|
||||||
|
updatePublishFormState({ uri, channelName: channel, selectedChannel: channel });
|
||||||
this.setState({ uri, channelName: channel, selectedChannel: channel });
|
this.setState({ uri, channelName: channel, selectedChannel: channel });
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -609,12 +665,13 @@ class PublishPage extends React.PureComponent {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
const { notify } = this.props;
|
const { notify, updatePublishFormState } = this.props;
|
||||||
const { tags } = this.state;
|
const { tags } = this.state;
|
||||||
const index = tags.indexOf(tag.toLowerCase());
|
const index = tags.indexOf(tag.toLowerCase());
|
||||||
if (index === -1) {
|
if (index === -1) {
|
||||||
const newTags = tags.slice();
|
const newTags = tags.slice();
|
||||||
newTags.push(tag);
|
newTags.push(tag);
|
||||||
|
updatePublishFormState({ tags: newTags });
|
||||||
this.setState({ tags: newTags });
|
this.setState({ tags: newTags });
|
||||||
} else {
|
} else {
|
||||||
notify({ message: __(`You already added the "${tag}" tag.`) });
|
notify({ message: __(`You already added the "${tag}" tag.`) });
|
||||||
|
@ -626,11 +683,13 @@ class PublishPage extends React.PureComponent {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const { updatePublishFormState } = this.props;
|
||||||
const newTags = this.state.tags.slice();
|
const newTags = this.state.tags.slice();
|
||||||
const index = newTags.indexOf(tag.toLowerCase());
|
const index = newTags.indexOf(tag.toLowerCase());
|
||||||
|
|
||||||
if (index > -1) {
|
if (index > -1) {
|
||||||
newTags.splice(index, 1);
|
newTags.splice(index, 1);
|
||||||
|
updatePublishFormState({ tags: newTags });
|
||||||
this.setState({ tags: newTags });
|
this.setState({ tags: newTags });
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
@ -678,6 +737,8 @@ class PublishPage extends React.PureComponent {
|
||||||
};
|
};
|
||||||
|
|
||||||
handleTitleChange = title => {
|
handleTitleChange = title => {
|
||||||
|
const { updatePublishFormState } = this.props;
|
||||||
|
updatePublishFormState({ title });
|
||||||
this.setState({ title });
|
this.setState({ title });
|
||||||
|
|
||||||
if (!this.state.editMode && !this.state.hasEditedContentAddress) {
|
if (!this.state.editMode && !this.state.hasEditedContentAddress) {
|
||||||
|
@ -695,26 +756,30 @@ class PublishPage extends React.PureComponent {
|
||||||
};
|
};
|
||||||
|
|
||||||
handleCurrencyValueChange = currency => {
|
handleCurrencyValueChange = currency => {
|
||||||
|
const { updatePublishFormState } = this.props;
|
||||||
|
updatePublishFormState({ currency });
|
||||||
this.setState({ currency });
|
this.setState({ currency });
|
||||||
};
|
};
|
||||||
|
|
||||||
handleDescriptionChange = description => {
|
handleDescriptionChange = description => {
|
||||||
|
const { updatePublishFormState } = this.props;
|
||||||
|
updatePublishFormState({ description });
|
||||||
this.setState({ description });
|
this.setState({ description });
|
||||||
};
|
};
|
||||||
|
|
||||||
handleLanguageValueChange = language => {
|
handleLanguageValueChange = language => {
|
||||||
|
const { updatePublishFormState } = this.props;
|
||||||
|
updatePublishFormState({ language });
|
||||||
this.setState({ language });
|
this.setState({ language });
|
||||||
};
|
};
|
||||||
|
|
||||||
handleLicenseValueChange = license => {
|
handleLicenseValueChange = license => {
|
||||||
|
const { updatePublishFormState } = this.props;
|
||||||
|
|
||||||
const otherLicenseDescription = [LICENSES.COPYRIGHT, LICENSES.OTHER].includes(license)
|
const otherLicenseDescription = [LICENSES.COPYRIGHT, LICENSES.OTHER].includes(license)
|
||||||
? this.state.otherLicenseDescription
|
? this.state.otherLicenseDescription
|
||||||
: '';
|
: '';
|
||||||
|
const licenseUrl = LICENSES.CC_LICENSES.reduce((value, item) => {
|
||||||
this.setState({
|
|
||||||
otherLicenseDescription,
|
|
||||||
license,
|
|
||||||
licenseUrl: LICENSES.CC_LICENSES.reduce((value, item) => {
|
|
||||||
if (typeof value === 'object') {
|
if (typeof value === 'object') {
|
||||||
value = '';
|
value = '';
|
||||||
}
|
}
|
||||||
|
@ -722,11 +787,15 @@ class PublishPage extends React.PureComponent {
|
||||||
value = item.url;
|
value = item.url;
|
||||||
}
|
}
|
||||||
return value;
|
return value;
|
||||||
}),
|
|
||||||
});
|
});
|
||||||
|
|
||||||
|
updatePublishFormState({ otherLicenseDescription, license, licenseUrl });
|
||||||
|
this.setState({ otherLicenseDescription, license, licenseUrl });
|
||||||
};
|
};
|
||||||
|
|
||||||
handleChangeLicenseDescription = otherLicenseDescription => {
|
handleChangeLicenseDescription = otherLicenseDescription => {
|
||||||
|
const { updatePublishFormState } = this.props;
|
||||||
|
updatePublishFormState({ otherLicenseDescription });
|
||||||
this.setState({ otherLicenseDescription });
|
this.setState({ otherLicenseDescription });
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -831,9 +900,6 @@ class PublishPage extends React.PureComponent {
|
||||||
resizeMode={FastImage.resizeMode.contain}
|
resizeMode={FastImage.resizeMode.contain}
|
||||||
source={{ uri: currentThumbnailUri }}
|
source={{ uri: currentThumbnailUri }}
|
||||||
/>
|
/>
|
||||||
</View>
|
|
||||||
)}
|
|
||||||
{!this.state.canPublish && <PublishRewardsDriver navigation={navigation} />}
|
|
||||||
|
|
||||||
{this.state.uploadThumbnailStarted && !this.state.uploadedThumbnailUri && (
|
{this.state.uploadThumbnailStarted && !this.state.uploadedThumbnailUri && (
|
||||||
<View style={publishStyle.thumbnailUploadContainer}>
|
<View style={publishStyle.thumbnailUploadContainer}>
|
||||||
|
@ -841,6 +907,9 @@ class PublishPage extends React.PureComponent {
|
||||||
<Text style={publishStyle.thumbnailUploadText}>Uploading thumbnail...</Text>
|
<Text style={publishStyle.thumbnailUploadText}>Uploading thumbnail...</Text>
|
||||||
</View>
|
</View>
|
||||||
)}
|
)}
|
||||||
|
</View>
|
||||||
|
)}
|
||||||
|
{!this.state.canPublish && <PublishRewardsDriver navigation={navigation} />}
|
||||||
|
|
||||||
<View style={publishStyle.card}>
|
<View style={publishStyle.card}>
|
||||||
<View style={publishStyle.textInputLayout}>
|
<View style={publishStyle.textInputLayout}>
|
||||||
|
|
|
@ -157,6 +157,15 @@ class PublishesPage extends React.PureComponent {
|
||||||
initialNumToRender={8}
|
initialNumToRender={8}
|
||||||
maxToRenderPerBatch={24}
|
maxToRenderPerBatch={24}
|
||||||
removeClippedSubviews
|
removeClippedSubviews
|
||||||
|
ListFooterComponent={
|
||||||
|
<View style={publishStyle.publishesFooter}>
|
||||||
|
<Button
|
||||||
|
style={publishStyle.publishesFooterButton}
|
||||||
|
text={__('Publish something new')}
|
||||||
|
onPress={() => navigation.navigate({ routeName: Constants.DRAWER_ROUTE_PUBLISH })}
|
||||||
|
/>
|
||||||
|
</View>
|
||||||
|
}
|
||||||
renderItem={({ item }) => (
|
renderItem={({ item }) => (
|
||||||
<FileListItem
|
<FileListItem
|
||||||
key={item}
|
key={item}
|
||||||
|
|
|
@ -11,3 +11,13 @@ export const selectChannelFormState = createSelector(
|
||||||
selectState,
|
selectState,
|
||||||
state => state.channelFormValues || {}
|
state => state.channelFormValues || {}
|
||||||
);
|
);
|
||||||
|
|
||||||
|
export const selectHasPublishFormState = createSelector(
|
||||||
|
selectPublishFormState,
|
||||||
|
values => Object.keys(values).length > 0
|
||||||
|
);
|
||||||
|
|
||||||
|
export const selectHasChannelFormState = createSelector(
|
||||||
|
selectChannelFormState,
|
||||||
|
values => Object.keys(values).length > 0
|
||||||
|
);
|
||||||
|
|
|
@ -129,11 +129,9 @@ const channelCreatorStyle = StyleSheet.create({
|
||||||
},
|
},
|
||||||
scrollContainer: {
|
scrollContainer: {
|
||||||
marginTop: 60,
|
marginTop: 60,
|
||||||
marginLeft: 16,
|
|
||||||
marginRight: 16,
|
|
||||||
},
|
},
|
||||||
scrollPadding: {
|
scrollPadding: {
|
||||||
paddingTop: 16,
|
padding: 16,
|
||||||
},
|
},
|
||||||
channelListItem: {
|
channelListItem: {
|
||||||
flexDirection: 'row',
|
flexDirection: 'row',
|
||||||
|
|
|
@ -328,18 +328,24 @@ const publishStyle = StyleSheet.create({
|
||||||
marginLeft: 4,
|
marginLeft: 4,
|
||||||
},
|
},
|
||||||
thumbnailUploadContainer: {
|
thumbnailUploadContainer: {
|
||||||
marginTop: 16,
|
|
||||||
marginLeft: 16,
|
|
||||||
marginRight: 16,
|
|
||||||
paddingLeft: 2,
|
|
||||||
paddingRight: 2,
|
|
||||||
flexDirection: 'row',
|
|
||||||
alignItems: 'center',
|
alignItems: 'center',
|
||||||
|
borderRadius: 16,
|
||||||
|
flexDirection: 'row',
|
||||||
|
position: 'absolute',
|
||||||
|
top: 8,
|
||||||
|
right: 8,
|
||||||
|
backgroundColor: '#00000077',
|
||||||
|
paddingLeft: 8,
|
||||||
|
paddingRight: 8,
|
||||||
|
paddingTop: 4,
|
||||||
|
paddingBottom: 4,
|
||||||
|
justifyContent: 'center',
|
||||||
},
|
},
|
||||||
thumbnailUploadText: {
|
thumbnailUploadText: {
|
||||||
fontFamily: 'Inter-UI-Regular',
|
color: Colors.White,
|
||||||
fontSize: 14,
|
fontFamily: 'Inter-UI-SemiBold',
|
||||||
marginLeft: 8,
|
fontSize: 12,
|
||||||
|
marginLeft: 4,
|
||||||
},
|
},
|
||||||
toggleField: {
|
toggleField: {
|
||||||
flexDirection: 'row',
|
flexDirection: 'row',
|
||||||
|
@ -427,6 +433,16 @@ const publishStyle = StyleSheet.create({
|
||||||
fontSize: 14,
|
fontSize: 14,
|
||||||
color: Colors.DescriptionGrey,
|
color: Colors.DescriptionGrey,
|
||||||
},
|
},
|
||||||
|
publishesFooter: {
|
||||||
|
marginTop: 16,
|
||||||
|
marginLeft: 16,
|
||||||
|
marginRight: 16,
|
||||||
|
},
|
||||||
|
publishesFooterButton: {
|
||||||
|
alignSelf: 'flex-start',
|
||||||
|
backgroundColor: Colors.LbryGreen,
|
||||||
|
marginTop: 16,
|
||||||
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
export default publishStyle;
|
export default publishStyle;
|
||||||
|
|
Loading…
Reference in a new issue