diff --git a/ui/component/publishText/index.js b/ui/component/publishDescription/index.js similarity index 75% rename from ui/component/publishText/index.js rename to ui/component/publishDescription/index.js index da8902408..33db541b8 100644 --- a/ui/component/publishText/index.js +++ b/ui/component/publishDescription/index.js @@ -3,7 +3,6 @@ import { doUpdatePublishForm, makeSelectPublishFormValue } from 'lbry-redux'; import PublishPage from './view'; const select = state => ({ - title: makeSelectPublishFormValue('title')(state), description: makeSelectPublishFormValue('description')(state), }); @@ -11,7 +10,4 @@ const perform = dispatch => ({ updatePublishForm: value => dispatch(doUpdatePublishForm(value)), }); -export default connect( - select, - perform -)(PublishPage); +export default connect(select, perform)(PublishPage); diff --git a/ui/component/publishText/view.jsx b/ui/component/publishDescription/view.jsx similarity index 79% rename from ui/component/publishText/view.jsx rename to ui/component/publishDescription/view.jsx index 180ab5e2d..98f8700e0 100644 --- a/ui/component/publishText/view.jsx +++ b/ui/component/publishDescription/view.jsx @@ -7,14 +7,13 @@ import usePersistedState from 'effects/use-persisted-state'; import Card from 'component/common/card'; type Props = { - title: ?string, description: ?string, disabled: boolean, updatePublishForm: ({}) => void, }; function PublishText(props: Props) { - const { title, description, updatePublishForm, disabled } = props; + const { description, updatePublishForm, disabled } = props; const [advancedEditor, setAdvancedEditor] = usePersistedState('publish-form-description-mode', false); function toggleMarkdown() { setAdvancedEditor(!advancedEditor); @@ -24,16 +23,6 @@ function PublishText(props: Props) { - updatePublishForm({ title: e.target.value })} - /> - ({ name: makeSelectPublishFormValue('name')(state), + title: makeSelectPublishFormValue('title')(state), filePath: makeSelectPublishFormValue('filePath')(state), optimize: makeSelectPublishFormValue('optimize')(state), isStillEditing: selectIsStillEditing(state), diff --git a/ui/component/publishFile/view.jsx b/ui/component/publishFile/view.jsx index b735d27b1..7ea16715e 100644 --- a/ui/component/publishFile/view.jsx +++ b/ui/component/publishFile/view.jsx @@ -2,6 +2,7 @@ import * as ICONS from 'constants/icons'; import React, { useState, useEffect } from 'react'; import { regexInvalidURI } from 'lbry-redux'; +import StoryEditor from 'component/storyEditor'; import FileSelector from 'component/common/file-selector'; import Button from 'component/button'; import Card from 'component/common/card'; @@ -9,9 +10,13 @@ import { FormField } from 'component/common/form'; import Spinner from 'component/spinner'; import I18nMessage from 'component/i18nMessage'; import usePersistedState from 'effects/use-persisted-state'; +import * as PUBLISH_MODES from 'constants/publish_types'; type Props = { + uri: ?string, + mode: ?string, name: ?string, + title: ?string, filePath: string | WebFile, isStillEditing: boolean, balance: number, @@ -26,11 +31,16 @@ type Props = { size: number, duration: number, isVid: boolean, + setPublishMode: string => void, + setPrevFileText: string => void, }; function PublishFile(props: Props) { const { + uri, + mode, name, + title, balance, filePath, isStillEditing, @@ -44,11 +54,14 @@ function PublishFile(props: Props) { size, duration, isVid, + setPublishMode, + setPrevFileText, } = props; const ffmpegAvail = ffmpegStatus.available; const [oversized, setOversized] = useState(false); const [currentFile, setCurrentFile] = useState(null); + const [currentFileType, setCurrentFileType] = useState(null); const [optimizeAvail, setOptimizeAvail] = useState(false); const [userOptimize, setUserOptimize] = usePersistedState('publish-file-user-optimize', false); @@ -58,11 +71,20 @@ function PublishFile(props: Props) { const PROCESSING_MB_PER_SECOND = 0.5; const MINUTES_THRESHOLD = 30; const HOURS_THRESHOLD = MINUTES_THRESHOLD * 60; + const MARKDOWN_FILE_EXTENSIONS = ['txt', 'md', 'markdown']; const sizeInMB = Number(size) / 1000000; const secondsToProcess = sizeInMB / PROCESSING_MB_PER_SECOND; - // clear warnings + // Reset filePath if publish mode changed + useEffect(() => { + if (mode === PUBLISH_MODES.STORY) { + if (currentFileType !== 'text/markdown') { + updatePublishForm({ filePath: '', name: '' }); + } + } + }, [currentFileType, mode, updatePublishForm]); + useEffect(() => { if (!filePath || filePath === '') { setCurrentFile(''); @@ -82,7 +104,7 @@ function PublishFile(props: Props) { setOptimizeAvail(isOptimizeAvail); updatePublishForm({ optimize: finalOptimizeState }); - }, [currentFile, filePath, isVid, ffmpegAvail, userOptimize]); + }, [currentFile, filePath, isVid, ffmpegAvail, userOptimize, updatePublishForm]); function updateFileInfo(duration, size, isvid) { updatePublishForm({ fileDur: duration, fileSize: size, fileVid: isvid }); @@ -201,6 +223,19 @@ function PublishFile(props: Props) { const contentType = file.type && file.type.split('/'); const isVideo = contentType && contentType[0] === 'video'; const isMp4 = contentType && contentType[1] === 'mp4'; + + let isMarkdownText = false; + + if (contentType) { + isMarkdownText = contentType[0] === 'text'; + setCurrentFileType(contentType); + } else if (file.name) { + // If user's machine is missign a valid content type registration + // for markdown content: text/markdown, file extension will be used instead + const extension = file.name.split('.').pop(); + isMarkdownText = MARKDOWN_FILE_EXTENSIONS.includes(extension); + } + if (isVideo) { if (isMp4) { const video = document.createElement('video'); @@ -220,6 +255,22 @@ function PublishFile(props: Props) { updateFileInfo(0, file.size, isVideo); } + if (isMarkdownText) { + // Create reader + const reader = new FileReader(); + // Handler for file reader + reader.addEventListener('load', event => { + const text = event.target.result; + updatePublishForm({ fileText: text }); + setPublishMode(PUBLISH_MODES.STORY); + }); + // Read file contents + reader.readAsText(file); + setCurrentFileType('text/markdown'); + } else { + setPublishMode(PUBLISH_MODES.FILE); + } + // @if TARGET='web' // we only need to enforce file sizes on 'web' if (file.size && Number(file.size) > TV_PUBLISH_SIZE_LIMIT) { @@ -247,43 +298,62 @@ function PublishFile(props: Props) { updatePublishForm(publishFormParams); } - let title; + let cardTitle; if (publishing) { - title = ( + cardTitle = ( {__('Uploading')} ); } else { - title = isStillEditing ? __('Edit') : __('Upload'); + cardTitle = isStillEditing ? __('Edit') : __('Upload'); } + const isPublishFile = mode === PUBLISH_MODES.FILE; + const isPublishStory = mode === PUBLISH_MODES.STORY; + return ( - {title}{' '} + {cardTitle}{' '} {inProgress &&