diff --git a/react/containers/ChannelCreateForm/index.js b/react/containers/ChannelCreateForm/index.js index e91719f6..91b42661 100644 --- a/react/containers/ChannelCreateForm/index.js +++ b/react/containers/ChannelCreateForm/index.js @@ -1,7 +1,7 @@ import { connect } from 'react-redux'; import { updateLoggedInChannel } from 'actions/channel'; import View from './view'; -import {updateSelectedChannel} from '../../actions/publish'; +import {updateSelectedChannel} from 'actions/publish'; const mapDispatchToProps = dispatch => { return { diff --git a/react/containers/ChannelCreateForm/view.jsx b/react/containers/ChannelCreateForm/view.jsx index 69fed75d..a008ffbf 100644 --- a/react/containers/ChannelCreateForm/view.jsx +++ b/react/containers/ChannelCreateForm/view.jsx @@ -119,38 +119,41 @@ class ChannelCreateForm extends React.Component { return (
{ !this.state.status ? ( -
-

{this.state.error}

-
-
- -
-
+ +
+
+ +
+
@ - - { (this.state.channel && !this.state.error) && {'\u2713'} } - { this.state.error && {'\u2716'} } + + { (this.state.channel && !this.state.error) && {'\u2713'} } + { this.state.error && {'\u2716'} }
-
-
- -
-
- +
+
+ +
+
+
- -
- + {this.state.error ? ( +

{this.state.error}

+ ) : ( +

Choose a name and password for your channel

+ )} +
+
) : (
-

{this.state.status}

- +

{this.state.status}

+
)}
diff --git a/react/containers/ChannelLoginForm/view.jsx b/react/containers/ChannelLoginForm/view.jsx index ad98f9a5..d273165c 100644 --- a/react/containers/ChannelLoginForm/view.jsx +++ b/react/containers/ChannelLoginForm/view.jsx @@ -26,7 +26,7 @@ class ChannelLoginForm extends React.Component { 'Content-Type': 'application/json', }), credentials: 'include', - } + }; request('login', params) .then(({success, channelName, shortChannelId, channelClaimId, message}) => { console.log('loginToChannel success:', success); @@ -47,30 +47,33 @@ class ChannelLoginForm extends React.Component { } render () { return ( -
-

{this.state.error}

-
-
- -
-
- @ - + +
+
+ +
+
+ @ + +
-
-
-
- -
-
- +
+
+ +
+
+ +
-
- -
- + { this.state.error ? ( +

{this.state.error}

+ ) : ( +

Enter the name and password for your channel

+ )} +
+
); diff --git a/react/containers/ChannelSelect/view.jsx b/react/containers/ChannelSelect/view.jsx index 9f4abf40..7d69145b 100644 --- a/react/containers/ChannelSelect/view.jsx +++ b/react/containers/ChannelSelect/view.jsx @@ -24,28 +24,32 @@ class ChannelSelect extends React.Component { render () { return (
-

{this.props.channelError}

-
- - +
+ +
-
- - +
+ +
+ { this.props.channelError ? ( +

{this.props.channelError}

+ ) : ( +

Publish anonymously or in a channel

+ )} { this.props.publishInChannel && (
-
- -
- -
+
+ +
+ +
{ (this.props.selectedChannel === states.LOGIN) && } { (this.props.selectedChannel === states.CREATE) && }
diff --git a/react/containers/PublishThumbnailInput/view.jsx b/react/containers/PublishThumbnailInput/view.jsx index 5528bd16..c1ec1152 100644 --- a/react/containers/PublishThumbnailInput/view.jsx +++ b/react/containers/PublishThumbnailInput/view.jsx @@ -51,10 +51,14 @@ class PublishThumbnailInput extends React.Component { } handleVideoLoadedData (event) { const duration = event.target.duration; + const totalMinutes = Math.floor(duration / 60); + const totalSeconds = Math.floor(duration % 60); // set the slider this.setState({ sliderMaxRange: duration * 100, sliderValue : duration * 100 / 2, + totalMinutes, + totalSeconds, }); // update the current time of the video let video = document.getElementById('video-thumb-player'); @@ -88,28 +92,28 @@ class PublishThumbnailInput extends React.Component { } } render () { - const { error, videoSource, sliderMinRange, sliderMaxRange, sliderValue } = this.state; + const { error, videoSource, sliderMinRange, sliderMaxRange, sliderValue, totalMinutes, totalSeconds } = this.state; return (
-
- { error ? ( -

{error}

- ) : ( -

Use slider to set thumbnail:

- )} -
); } diff --git a/react/containers/PublishUrlInput/view.jsx b/react/containers/PublishUrlInput/view.jsx index ed782f1a..4f3b1bba 100644 --- a/react/containers/PublishUrlInput/view.jsx +++ b/react/containers/PublishUrlInput/view.jsx @@ -14,10 +14,14 @@ class PublishUrlInput extends React.Component { } } componentWillReceiveProps ({ claim, fileName }) { - if (!claim) { + // if a new file was chosen, update the claim name + if (fileName !== this.props.fileName) { return this.setClaimName(fileName); } - this.checkClaimIsAvailable(claim); + // if the claim has updated, check its availability + if (claim !== this.props.claim) { + this.validateClaim(claim); + } } handleInput (event) { let value = event.target.value; @@ -35,35 +39,42 @@ class PublishUrlInput extends React.Component { const cleanClaimName = this.cleanseInput(fileNameWithoutEnding); this.props.onClaimChange(cleanClaimName); } - checkClaimIsAvailable (claim) { + validateClaim (claim) { + if (!claim) { + return this.props.onUrlError('Enter a url above'); + } request(`/api/claim/availability/${claim}`) - .then(() => { + .then(response => { + console.log('api/claim/availability response:', response); this.props.onUrlError(null); }) .catch((error) => { + console.log('api/claim/availability error:', error); this.props.onUrlError(error.message); }); } render () { + const { claim, loggedInChannelName, loggedInChannelShortId, publishInChannel, selectedChannel, urlError } = this.props; return ( -
-

{this.props.urlError}

-
- -
- +
+
spee.ch / - - - - { (this.props.claim && !this.props.urlError) && {'\u2713'} } - { this.props.urlError && {'\u2716'} } + + { (claim && !urlError) && {'\u2713'} } + { urlError && {'\u2716'} } +
+
+ { urlError ? ( +

{urlError}

+ ) : ( +

Choose a custom url

+ )}
); diff --git a/react/utils/file.js b/react/utils/file.js index da0ee4c9..f8a433f1 100644 --- a/react/utils/file.js +++ b/react/utils/file.js @@ -19,15 +19,15 @@ module.exports = { } break; case 'image/gif': - if (file.size > 50000000) { + if (file.size > 30000000) { console.log('file was too big'); - throw new Error('Sorry, GIFs are limited to 50 megabytes.'); + throw new Error('Sorry, GIFs are limited to 30 megabytes.'); } break; case 'video/mp4': - if (file.size > 50000000) { + if (file.size > 20000000) { console.log('file was too big'); - throw new Error('Sorry, videos are limited to 50 megabytes.'); + throw new Error('Sorry, videos are limited to 20 megabytes.'); } break; default: diff --git a/routes/api-routes.js b/routes/api-routes.js index eb5cd49e..044863f0 100644 --- a/routes/api-routes.js +++ b/routes/api-routes.js @@ -5,9 +5,7 @@ const multipartMiddleware = multipart({uploadDir: files.uploadDirectory}); const db = require('../models'); const { claimNameIsAvailable, checkChannelAvailability, publish } = require('../controllers/publishController.js'); const { getClaimList, resolveUri, getClaim } = require('../helpers/lbryApi.js'); - const { addGetResultsToFileData, createBasicPublishParams, createThumbnailPublishParams, parsePublishApiRequestBody, parsePublishApiRequestFiles, createFileData } = require('../helpers/publishHelpers.js'); - const errorHandlers = require('../helpers/errorHandlers.js'); const { sendGAAnonymousPublishTiming, sendGAChannelPublishTiming } = require('../helpers/googleAnalytics.js'); const { authenticateUser } = require('../auth/authentication.js');