Allow only images in modal image uploader. #7672
22 changed files with 455 additions and 395 deletions
|
@ -20,6 +20,7 @@ import path from 'path';
|
||||||
import { diskSpaceLinux, diskSpaceWindows, diskSpaceMac } from '../ui/util/diskspace';
|
import { diskSpaceLinux, diskSpaceWindows, diskSpaceMac } from '../ui/util/diskspace';
|
||||||
|
|
||||||
const { download } = require('electron-dl');
|
const { download } = require('electron-dl');
|
||||||
|
const mime = require('mime');
|
||||||
const remote = require('@electron/remote/main');
|
const remote = require('@electron/remote/main');
|
||||||
const os = require('os');
|
const os = require('os');
|
||||||
const sudo = require('sudo-prompt');
|
const sudo = require('sudo-prompt');
|
||||||
|
@ -299,6 +300,50 @@ app.on('before-quit', () => {
|
||||||
appState.isQuitting = true;
|
appState.isQuitting = true;
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// Get the content of a file as a raw buffer of bytes.
|
||||||
|
// Useful to convert a file path to a File instance.
|
||||||
|
// Example:
|
||||||
|
// const result = await ipcMain.invoke('get-file-from-path', 'path/to/file');
|
||||||
|
// const file = new File([result.buffer], result.name);
|
||||||
|
// NOTE: if path points to a folder, an empty
|
||||||
|
// file will be given.
|
||||||
|
ipcMain.handle('get-file-from-path', (event, path) => {
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
fs.stat(path, (error, stats) => {
|
||||||
|
if (error) {
|
||||||
|
reject(error);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
// Separate folders considering "\" and "/"
|
||||||
|
// as separators (cross platform)
|
||||||
|
const folders = path.split(/[\\/]/);
|
||||||
|
const name = folders[folders.length - 1];
|
||||||
|
if (stats.isDirectory()) {
|
||||||
|
resolve({
|
||||||
|
name,
|
||||||
|
mime: undefined,
|
||||||
|
path,
|
||||||
|
buffer: new ArrayBuffer(0),
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
// Encoding null ensures data results in a Buffer.
|
||||||
|
fs.readFile(path, { encoding: null }, (err, data) => {
|
||||||
|
if (err) {
|
||||||
|
reject(err);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
resolve({
|
||||||
|
name,
|
||||||
|
mime: mime.getType(name) || undefined,
|
||||||
|
path,
|
||||||
|
buffer: data,
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
ipcMain.on('get-disk-space', async (event) => {
|
ipcMain.on('get-disk-space', async (event) => {
|
||||||
try {
|
try {
|
||||||
const { data_dir } = await Lbry.settings_get();
|
const { data_dir } = await Lbry.settings_get();
|
||||||
|
|
9
flow-typed/file-with-path.js
vendored
Normal file
9
flow-typed/file-with-path.js
vendored
Normal file
|
@ -0,0 +1,9 @@
|
||||||
|
// @flow
|
||||||
|
|
||||||
|
declare type FileWithPath = {
|
||||||
|
file: File,
|
||||||
|
// The full path will only be available in
|
||||||
|
// the application. For browser, the name
|
||||||
|
// of the file will be used.
|
||||||
|
path: string,
|
||||||
|
}
|
6
flow-typed/web-file.js
vendored
6
flow-typed/web-file.js
vendored
|
@ -1,6 +0,0 @@
|
||||||
// @flow
|
|
||||||
|
|
||||||
declare type WebFile = File & {
|
|
||||||
path?: string,
|
|
||||||
title?: string,
|
|
||||||
}
|
|
|
@ -54,6 +54,7 @@
|
||||||
"humanize-duration": "^3.27.0",
|
"humanize-duration": "^3.27.0",
|
||||||
"if-env": "^1.0.4",
|
"if-env": "^1.0.4",
|
||||||
"match-sorter": "^6.3.0",
|
"match-sorter": "^6.3.0",
|
||||||
|
"mime": "^3.0.0",
|
||||||
"node-html-parser": "^5.1.0",
|
"node-html-parser": "^5.1.0",
|
||||||
"parse-duration": "^1.0.0",
|
"parse-duration": "^1.0.0",
|
||||||
"proxy-polyfill": "0.1.6",
|
"proxy-polyfill": "0.1.6",
|
||||||
|
|
|
@ -325,7 +325,6 @@ function ChannelForm(props: Props) {
|
||||||
uri={uri}
|
uri={uri}
|
||||||
thumbnailPreview={thumbnailPreview}
|
thumbnailPreview={thumbnailPreview}
|
||||||
allowGifs
|
allowGifs
|
||||||
showDelayedMessage={isUpload.thumbnail}
|
|
||||||
setThumbUploadError={setThumbError}
|
setThumbUploadError={setThumbError}
|
||||||
thumbUploadError={thumbError}
|
thumbUploadError={thumbError}
|
||||||
/>
|
/>
|
||||||
|
|
|
@ -3,8 +3,8 @@ import React from 'react';
|
||||||
import { useRadioState, Radio, RadioGroup } from 'reakit/Radio';
|
import { useRadioState, Radio, RadioGroup } from 'reakit/Radio';
|
||||||
|
|
||||||
type Props = {
|
type Props = {
|
||||||
files: Array<WebFile>,
|
files: Array<File>,
|
||||||
onChange: (WebFile | void) => void,
|
onChange: (File | void) => void,
|
||||||
};
|
};
|
||||||
|
|
||||||
type RadioProps = {
|
type RadioProps = {
|
||||||
|
@ -26,16 +26,16 @@ function FileList(props: Props) {
|
||||||
|
|
||||||
const getFile = (value?: string) => {
|
const getFile = (value?: string) => {
|
||||||
if (files && files.length) {
|
if (files && files.length) {
|
||||||
return files.find((file: WebFile) => file.name === value);
|
return files.find((file: File) => file.name === value);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
React.useEffect(() => {
|
React.useEffect(() => {
|
||||||
if (radio.stops.length) {
|
if (radio.items.length) {
|
||||||
if (!radio.currentId) {
|
if (!radio.currentId) {
|
||||||
radio.first();
|
radio.first();
|
||||||
} else {
|
} else {
|
||||||
const first = radio.stops[0].ref.current;
|
const first = radio.items[0].ref.current;
|
||||||
// First auto-selection
|
// First auto-selection
|
||||||
if (first && first.id === radio.currentId && !radio.state) {
|
if (first && first.id === radio.currentId && !radio.state) {
|
||||||
const file = getFile(first.value);
|
const file = getFile(first.value);
|
||||||
|
@ -46,12 +46,12 @@ function FileList(props: Props) {
|
||||||
|
|
||||||
if (radio.state) {
|
if (radio.state) {
|
||||||
// Find selected element
|
// Find selected element
|
||||||
const stop = radio.stops.find(item => item.id === radio.currentId);
|
const stop = radio.items.find((item) => item.id === radio.currentId);
|
||||||
const element = stop && stop.ref.current;
|
const element = stop && stop.ref.current;
|
||||||
// Only update state if new item is selected
|
// Only update state if new item is selected
|
||||||
if (element && element.value !== radio.state) {
|
if (element && element.value !== radio.state) {
|
||||||
const file = getFile(element.value);
|
const file = getFile(element.value);
|
||||||
// Sselect new file and update state
|
// Select new file and update state
|
||||||
onChange(file);
|
onChange(file);
|
||||||
radio.setState(element.value);
|
radio.setState(element.value);
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,19 +1,21 @@
|
||||||
// @flow
|
// @flow
|
||||||
import * as React from 'react';
|
import * as React from 'react';
|
||||||
import * as remote from '@electron/remote';
|
import * as remote from '@electron/remote';
|
||||||
|
import { ipcRenderer } from 'electron';
|
||||||
import Button from 'component/button';
|
import Button from 'component/button';
|
||||||
import { FormField } from 'component/common/form';
|
import { FormField } from 'component/common/form';
|
||||||
|
|
||||||
type Props = {
|
type Props = {
|
||||||
type: string,
|
type: string,
|
||||||
currentPath?: ?string,
|
currentPath?: ?string,
|
||||||
onFileChosen: (WebFile) => void,
|
onFileChosen: (FileWithPath) => void,
|
||||||
label?: string,
|
label?: string,
|
||||||
placeholder?: string,
|
placeholder?: string,
|
||||||
accept?: string,
|
accept?: string,
|
||||||
error?: string,
|
error?: string,
|
||||||
disabled?: boolean,
|
disabled?: boolean,
|
||||||
autoFocus?: boolean,
|
autoFocus?: boolean,
|
||||||
|
filters?: Array<{ name: string, extension: string[] }>,
|
||||||
};
|
};
|
||||||
|
|
||||||
class FileSelector extends React.PureComponent<Props> {
|
class FileSelector extends React.PureComponent<Props> {
|
||||||
|
@ -41,7 +43,7 @@ class FileSelector extends React.PureComponent<Props> {
|
||||||
const file = files[0];
|
const file = files[0];
|
||||||
|
|
||||||
if (this.props.onFileChosen) {
|
if (this.props.onFileChosen) {
|
||||||
this.props.onFileChosen(file);
|
this.props.onFileChosen({ file, path: file.path || file.name });
|
||||||
}
|
}
|
||||||
this.fileInput.current.value = null; // clear the file input
|
this.fileInput.current.value = null; // clear the file input
|
||||||
};
|
};
|
||||||
|
@ -64,12 +66,26 @@ class FileSelector extends React.PureComponent<Props> {
|
||||||
properties = ['openDirectory'];
|
properties = ['openDirectory'];
|
||||||
}
|
}
|
||||||
|
|
||||||
remote.dialog.showOpenDialog({ properties, defaultPath }).then((result) => {
|
remote.dialog
|
||||||
|
.showOpenDialog({
|
||||||
|
properties,
|
||||||
|
defaultPath,
|
||||||
|
filters: this.props.filters,
|
||||||
|
})
|
||||||
|
.then((result) => {
|
||||||
const path = result && result.filePaths[0];
|
const path = result && result.filePaths[0];
|
||||||
if (path) {
|
if (path) {
|
||||||
// $FlowFixMe
|
return ipcRenderer.invoke('get-file-from-path', path);
|
||||||
this.props.onFileChosen({ path });
|
|
||||||
}
|
}
|
||||||
|
})
|
||||||
|
.then((result) => {
|
||||||
|
if (!result) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const file = new File([result.buffer], result.name, {
|
||||||
|
type: result.mime,
|
||||||
|
});
|
||||||
|
this.props.onFileChosen({ file, path: result.path });
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
@ -11,10 +11,10 @@ import Icon from 'component/common/icon';
|
||||||
|
|
||||||
type Props = {
|
type Props = {
|
||||||
modal: { id: string, modalProps: {} },
|
modal: { id: string, modalProps: {} },
|
||||||
filePath: string | WebFile,
|
filePath: ?string,
|
||||||
clearPublish: () => void,
|
clearPublish: () => void,
|
||||||
updatePublishForm: ({}) => void,
|
updatePublishForm: ({}) => void,
|
||||||
openModal: (id: string, { files: Array<WebFile> }) => void,
|
openModal: (id: string, { files: Array<File> }) => void,
|
||||||
// React router
|
// React router
|
||||||
history: {
|
history: {
|
||||||
entities: {}[],
|
entities: {}[],
|
||||||
|
@ -37,7 +37,7 @@ function FileDrop(props: Props) {
|
||||||
const { drag, dropData } = useDragDrop();
|
const { drag, dropData } = useDragDrop();
|
||||||
const [files, setFiles] = React.useState([]);
|
const [files, setFiles] = React.useState([]);
|
||||||
const [error, setError] = React.useState(false);
|
const [error, setError] = React.useState(false);
|
||||||
const [target, setTarget] = React.useState<?WebFile>(null);
|
const [target, setTarget] = React.useState<?File>(null);
|
||||||
const hideTimer = React.useRef(null);
|
const hideTimer = React.useRef(null);
|
||||||
const targetTimer = React.useRef(null);
|
const targetTimer = React.useRef(null);
|
||||||
const navigationTimer = React.useRef(null);
|
const navigationTimer = React.useRef(null);
|
||||||
|
@ -65,24 +65,29 @@ function FileDrop(props: Props) {
|
||||||
}
|
}
|
||||||
}, [history]);
|
}, [history]);
|
||||||
|
|
||||||
|
// Handle file selection
|
||||||
|
const handleFileSelected = React.useCallback(
|
||||||
|
(selectedFile) => {
|
||||||
// Delay hide and navigation for a smooth transition
|
// Delay hide and navigation for a smooth transition
|
||||||
const hideDropArea = React.useCallback(() => {
|
|
||||||
hideTimer.current = setTimeout(() => {
|
hideTimer.current = setTimeout(() => {
|
||||||
setFiles([]);
|
setFiles([]);
|
||||||
// Navigate to publish area
|
// Navigate to publish area
|
||||||
navigationTimer.current = setTimeout(() => {
|
navigationTimer.current = setTimeout(() => {
|
||||||
|
// Navigate first, THEN assign filePath, otherwise
|
||||||
|
// the file selected will get reset (that's how the
|
||||||
|
// publish file view works, when the user switches to
|
||||||
|
// publish a file, the pathFile value gets reset to undefined)
|
||||||
navigateToPublish();
|
navigateToPublish();
|
||||||
|
updatePublishForm({
|
||||||
|
filePath: selectedFile.path || selectedFile.name,
|
||||||
|
fileDur: 0,
|
||||||
|
fileSize: 0,
|
||||||
|
fileVid: false,
|
||||||
|
});
|
||||||
}, NAVIGATE_TIME_OUT);
|
}, NAVIGATE_TIME_OUT);
|
||||||
}, HIDE_TIME_OUT);
|
}, HIDE_TIME_OUT);
|
||||||
}, [navigateToPublish]);
|
|
||||||
|
|
||||||
// Handle file selection
|
|
||||||
const handleFileSelected = React.useCallback(
|
|
||||||
(selectedFile) => {
|
|
||||||
updatePublishForm({ filePath: selectedFile });
|
|
||||||
hideDropArea();
|
|
||||||
},
|
},
|
||||||
[updatePublishForm, hideDropArea]
|
[setFiles, navigateToPublish, updatePublishForm]
|
||||||
);
|
);
|
||||||
|
|
||||||
// Clear timers when unmounted
|
// Clear timers when unmounted
|
||||||
|
|
|
@ -6,7 +6,7 @@ type Props = {
|
||||||
uri: ?string,
|
uri: ?string,
|
||||||
label: ?string,
|
label: ?string,
|
||||||
disabled: ?boolean,
|
disabled: ?boolean,
|
||||||
filePath: string | WebFile,
|
filePath: File,
|
||||||
fileText: ?string,
|
fileText: ?string,
|
||||||
fileMimeType: ?string,
|
fileMimeType: ?string,
|
||||||
streamingUrl: ?string,
|
streamingUrl: ?string,
|
||||||
|
|
|
@ -19,7 +19,7 @@ type Props = {
|
||||||
mode: ?string,
|
mode: ?string,
|
||||||
name: ?string,
|
name: ?string,
|
||||||
title: ?string,
|
title: ?string,
|
||||||
filePath: string | WebFile,
|
filePath: ?string,
|
||||||
fileMimeType: ?string,
|
fileMimeType: ?string,
|
||||||
isStillEditing: boolean,
|
isStillEditing: boolean,
|
||||||
balance: number,
|
balance: number,
|
||||||
|
@ -77,7 +77,7 @@ function PublishFile(props: Props) {
|
||||||
const sizeInMB = Number(size) / 1000000;
|
const sizeInMB = Number(size) / 1000000;
|
||||||
const secondsToProcess = sizeInMB / PROCESSING_MB_PER_SECOND;
|
const secondsToProcess = sizeInMB / PROCESSING_MB_PER_SECOND;
|
||||||
const ffmpegAvail = ffmpegStatus.available;
|
const ffmpegAvail = ffmpegStatus.available;
|
||||||
const [currentFile, setCurrentFile] = useState(null);
|
const currentFile = filePath;
|
||||||
const [currentFileType, setCurrentFileType] = useState(null);
|
const [currentFileType, setCurrentFileType] = useState(null);
|
||||||
const [optimizeAvail, setOptimizeAvail] = useState(false);
|
const [optimizeAvail, setOptimizeAvail] = useState(false);
|
||||||
const [userOptimize, setUserOptimize] = usePersistedState('publish-file-user-optimize', false);
|
const [userOptimize, setUserOptimize] = usePersistedState('publish-file-user-optimize', false);
|
||||||
|
@ -91,18 +91,6 @@ function PublishFile(props: Props) {
|
||||||
}
|
}
|
||||||
}, [currentFileType, mode, isStillEditing, updatePublishForm]);
|
}, [currentFileType, mode, isStillEditing, updatePublishForm]);
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
if (!filePath || filePath === '') {
|
|
||||||
setCurrentFile('');
|
|
||||||
updateFileInfo(0, 0, false);
|
|
||||||
} else if (typeof filePath !== 'string') {
|
|
||||||
// Update currentFile file
|
|
||||||
if (filePath.name !== currentFile && filePath.path !== currentFile) {
|
|
||||||
handleFileChange(filePath);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}, [filePath, currentFile, handleFileChange, updateFileInfo]);
|
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const isOptimizeAvail = currentFile && currentFile !== '' && isVid && ffmpegAvail;
|
const isOptimizeAvail = currentFile && currentFile !== '' && isVid && ffmpegAvail;
|
||||||
const finalOptimizeState = isOptimizeAvail && userOptimize;
|
const finalOptimizeState = isOptimizeAvail && userOptimize;
|
||||||
|
@ -209,11 +197,11 @@ function PublishFile(props: Props) {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function handleFileChange(file: WebFile, clearName = true) {
|
function handleFileChange(fileWithPath: FileWithPath, clearName = true) {
|
||||||
window.URL = window.URL || window.webkitURL;
|
window.URL = window.URL || window.webkitURL;
|
||||||
|
|
||||||
// select file, start to select a new one, then cancel
|
// select file, start to select a new one, then cancel
|
||||||
if (!file) {
|
if (!fileWithPath) {
|
||||||
if (isStillEditing || !clearName) {
|
if (isStillEditing || !clearName) {
|
||||||
updatePublishForm({ filePath: '' });
|
updatePublishForm({ filePath: '' });
|
||||||
} else {
|
} else {
|
||||||
|
@ -222,7 +210,8 @@ function PublishFile(props: Props) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
// if video, extract duration so we can warn about bitrateif (typeof file !== 'string') {
|
// if video, extract duration so we can warn about bitrate if (typeof file !== 'string')
|
||||||
|
const file = fileWithPath.file;
|
||||||
const contentType = file.type && file.type.split('/');
|
const contentType = file.type && file.type.split('/');
|
||||||
const isVideo = contentType && contentType[0] === 'video';
|
const isVideo = contentType && contentType[0] === 'video';
|
||||||
const isMp4 = contentType && contentType[1] === 'mp4';
|
const isMp4 = contentType && contentType[1] === 'mp4';
|
||||||
|
@ -233,7 +222,7 @@ function PublishFile(props: Props) {
|
||||||
isTextPost = contentType[1] === 'plain' || contentType[1] === 'markdown';
|
isTextPost = contentType[1] === 'plain' || contentType[1] === 'markdown';
|
||||||
setCurrentFileType(contentType);
|
setCurrentFileType(contentType);
|
||||||
} else if (file.name) {
|
} else if (file.name) {
|
||||||
// If user's machine is missign a valid content type registration
|
// If user's machine is missing a valid content type registration
|
||||||
// for markdown content: text/markdown, file extension will be used instead
|
// for markdown content: text/markdown, file extension will be used instead
|
||||||
const extension = file.name.split('.').pop();
|
const extension = file.name.split('.').pop();
|
||||||
isTextPost = MARKDOWN_FILE_EXTENSIONS.includes(extension);
|
isTextPost = MARKDOWN_FILE_EXTENSIONS.includes(extension);
|
||||||
|
@ -270,10 +259,8 @@ function PublishFile(props: Props) {
|
||||||
setPublishMode(PUBLISH_MODES.FILE);
|
setPublishMode(PUBLISH_MODES.FILE);
|
||||||
}
|
}
|
||||||
|
|
||||||
const publishFormParams: { filePath: string | WebFile, name?: string, optimize?: boolean } = {
|
const publishFormParams: { filePath: string, name?: string, optimize?: boolean } = {
|
||||||
// if electron, we'll set filePath to the path string because SDK is handling publishing.
|
filePath: fileWithPath.path,
|
||||||
// File.path will be undefined from web due to browser security, so it will default to the File Object.
|
|
||||||
filePath: file.path || file,
|
|
||||||
};
|
};
|
||||||
// Strip off extention and replace invalid characters
|
// Strip off extention and replace invalid characters
|
||||||
let fileName = name || (file.name && file.name.substring(0, file.name.lastIndexOf('.'))) || '';
|
let fileName = name || (file.name && file.name.substring(0, file.name.lastIndexOf('.'))) || '';
|
||||||
|
@ -282,8 +269,6 @@ function PublishFile(props: Props) {
|
||||||
publishFormParams.name = parseName(fileName);
|
publishFormParams.name = parseName(fileName);
|
||||||
}
|
}
|
||||||
|
|
||||||
// File path is not supported on web for security reasons so we use the name instead.
|
|
||||||
setCurrentFile(file.path || file.name);
|
|
||||||
updatePublishForm(publishFormParams);
|
updatePublishForm(publishFormParams);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -35,8 +35,8 @@ import tempy from 'tempy';
|
||||||
type Props = {
|
type Props = {
|
||||||
disabled: boolean,
|
disabled: boolean,
|
||||||
tags: Array<Tag>,
|
tags: Array<Tag>,
|
||||||
publish: (source?: string | File, ?boolean) => void,
|
publish: (source: ?File, ?boolean) => void,
|
||||||
filePath: string | File,
|
filePath: ?File,
|
||||||
fileText: string,
|
fileText: string,
|
||||||
bid: ?number,
|
bid: ?number,
|
||||||
bidError: ?string,
|
bidError: ?string,
|
||||||
|
@ -373,9 +373,6 @@ function PublishForm(props: Props) {
|
||||||
if (!output || output === '') {
|
if (!output || output === '') {
|
||||||
// Generate a temporary file:
|
// Generate a temporary file:
|
||||||
output = tempy.file({ name: 'post.md' });
|
output = tempy.file({ name: 'post.md' });
|
||||||
} else if (typeof filePath === 'string') {
|
|
||||||
// Use current file
|
|
||||||
output = filePath;
|
|
||||||
}
|
}
|
||||||
// Create a temporary file and save file changes
|
// Create a temporary file and save file changes
|
||||||
if (output && output !== '') {
|
if (output && output !== '') {
|
||||||
|
@ -447,7 +444,7 @@ function PublishForm(props: Props) {
|
||||||
// with other properties such as name, title, etc.) for security reasons.
|
// with other properties such as name, title, etc.) for security reasons.
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (mode === PUBLISH_MODES.FILE) {
|
if (mode === PUBLISH_MODES.FILE) {
|
||||||
updatePublishForm({ filePath: '', fileDur: 0, fileSize: 0 });
|
updatePublishForm({ filePath: undefined, fileDur: 0, fileSize: 0 });
|
||||||
}
|
}
|
||||||
}, [mode, updatePublishForm]);
|
}, [mode, updatePublishForm]);
|
||||||
|
|
||||||
|
|
|
@ -27,6 +27,14 @@ type Props = {
|
||||||
// passed to the onUpdate function after the
|
// passed to the onUpdate function after the
|
||||||
// upload service returns success.
|
// upload service returns success.
|
||||||
buildImagePreview?: boolean,
|
buildImagePreview?: boolean,
|
||||||
|
// File extension filtering. Files can be filtered
|
||||||
|
// but the "All Files" options always shows up. To
|
||||||
|
// avoid that, you can use the filters property.
|
||||||
|
// For example, to only accept images pass the
|
||||||
|
// following filter:
|
||||||
|
// { name: 'Images', extensions: ['jpg', 'png', 'gif'] },
|
||||||
|
filters?: Array<{ name: string, extension: string[] }>,
|
||||||
|
type?: string,
|
||||||
};
|
};
|
||||||
|
|
||||||
function filePreview(file) {
|
function filePreview(file) {
|
||||||
|
@ -43,7 +51,8 @@ function filePreview(file) {
|
||||||
}
|
}
|
||||||
|
|
||||||
function SelectAsset(props: Props) {
|
function SelectAsset(props: Props) {
|
||||||
const { onUpdate, onDone, assetName, currentValue, recommended, title, inline, buildImagePreview } = props;
|
const { onUpdate, onDone, assetName, currentValue, recommended, title, inline, buildImagePreview, filters, type } =
|
||||||
|
props;
|
||||||
const [pathSelected, setPathSelected] = React.useState('');
|
const [pathSelected, setPathSelected] = React.useState('');
|
||||||
const [fileSelected, setFileSelected] = React.useState<any>(null);
|
const [fileSelected, setFileSelected] = React.useState<any>(null);
|
||||||
const [uploadStatus, setUploadStatus] = React.useState(SPEECH_READY);
|
const [uploadStatus, setUploadStatus] = React.useState(SPEECH_READY);
|
||||||
|
@ -121,17 +130,17 @@ function SelectAsset(props: Props) {
|
||||||
/>
|
/>
|
||||||
) : (
|
) : (
|
||||||
<FileSelector
|
<FileSelector
|
||||||
|
filters={filters}
|
||||||
|
type={type}
|
||||||
autoFocus
|
autoFocus
|
||||||
disabled={uploadStatus === SPEECH_UPLOADING}
|
disabled={uploadStatus === SPEECH_UPLOADING}
|
||||||
label={fileSelectorLabel}
|
label={fileSelectorLabel}
|
||||||
name="assetSelector"
|
name="assetSelector"
|
||||||
currentPath={pathSelected}
|
currentPath={pathSelected}
|
||||||
onFileChosen={(file) => {
|
onFileChosen={(fileWithPath) => {
|
||||||
if (file.name) {
|
if (fileWithPath.file.name) {
|
||||||
setFileSelected(file);
|
setFileSelected(fileWithPath.file);
|
||||||
// what why? why not target=WEB this?
|
setPathSelected(fileWithPath.path);
|
||||||
// file.path is undefined in web but available in electron
|
|
||||||
setPathSelected(file.name || file.path);
|
|
||||||
}
|
}
|
||||||
}}
|
}}
|
||||||
accept={accept}
|
accept={accept}
|
||||||
|
|
|
@ -160,9 +160,9 @@ function SelectThumbnail(props: Props) {
|
||||||
label={__('Thumbnail')}
|
label={__('Thumbnail')}
|
||||||
placeholder={__('Choose an enticing thumbnail')}
|
placeholder={__('Choose an enticing thumbnail')}
|
||||||
accept={accept}
|
accept={accept}
|
||||||
onFileChosen={(file) =>
|
onFileChosen={(fileWithPath) =>
|
||||||
openModal(MODALS.CONFIRM_THUMBNAIL_UPLOAD, {
|
openModal(MODALS.CONFIRM_THUMBNAIL_UPLOAD, {
|
||||||
file,
|
file: fileWithPath,
|
||||||
cb: (url) => updateThumbnailParams && updateThumbnailParams({ thumbnail_url: url }),
|
cb: (url) => updateThumbnailParams && updateThumbnailParams({ thumbnail_url: url }),
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
|
@ -130,7 +130,7 @@ export default function SettingSystem(props: Props) {
|
||||||
<FileSelector
|
<FileSelector
|
||||||
type="openDirectory"
|
type="openDirectory"
|
||||||
currentPath={daemonSettings.download_dir}
|
currentPath={daemonSettings.download_dir}
|
||||||
onFileChosen={(newDirectory: WebFile) => {
|
onFileChosen={(newDirectory: FileWithPath) => {
|
||||||
setDaemonSetting('download_dir', newDirectory.path);
|
setDaemonSetting('download_dir', newDirectory.path);
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
|
@ -224,7 +224,7 @@ export default function SettingSystem(props: Props) {
|
||||||
type="openDirectory"
|
type="openDirectory"
|
||||||
placeholder={__('A Folder containing FFmpeg')}
|
placeholder={__('A Folder containing FFmpeg')}
|
||||||
currentPath={ffmpegPath || daemonSettings.ffmpeg_path}
|
currentPath={ffmpegPath || daemonSettings.ffmpeg_path}
|
||||||
onFileChosen={(newDirectory: WebFile) => {
|
onFileChosen={(newDirectory: FileWithPath) => {
|
||||||
// $FlowFixMe
|
// $FlowFixMe
|
||||||
setDaemonSetting('ffmpeg_path', newDirectory.path);
|
setDaemonSetting('ffmpeg_path', newDirectory.path);
|
||||||
findFFmpeg();
|
findFFmpeg();
|
||||||
|
|
|
@ -4,7 +4,7 @@ import { Modal } from 'modal/modal';
|
||||||
import { formatFileSystemPath } from 'util/url';
|
import { formatFileSystemPath } from 'util/url';
|
||||||
|
|
||||||
type Props = {
|
type Props = {
|
||||||
upload: WebFile => void,
|
upload: (File) => void,
|
||||||
filePath: string,
|
filePath: string,
|
||||||
closeModal: () => void,
|
closeModal: () => void,
|
||||||
showToast: ({}) => void,
|
showToast: ({}) => void,
|
||||||
|
|
|
@ -5,7 +5,7 @@ import ModalConfirmThumbnailUpload from './view';
|
||||||
|
|
||||||
const perform = (dispatch) => ({
|
const perform = (dispatch) => ({
|
||||||
closeModal: () => dispatch(doHideModal()),
|
closeModal: () => dispatch(doHideModal()),
|
||||||
upload: (file, cb) => dispatch(doUploadThumbnail(null, file, null, null, file.path, cb)),
|
upload: (fileWithPath, cb) => dispatch(doUploadThumbnail(null, fileWithPath.file, null, null, fileWithPath.path, cb)),
|
||||||
updatePublishForm: (value) => dispatch(doUpdatePublishForm(value)),
|
updatePublishForm: (value) => dispatch(doUpdatePublishForm(value)),
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
|
@ -4,8 +4,8 @@ import { Modal } from 'modal/modal';
|
||||||
import { DOMAIN } from 'config';
|
import { DOMAIN } from 'config';
|
||||||
|
|
||||||
type Props = {
|
type Props = {
|
||||||
file: WebFile,
|
file: FileWithPath,
|
||||||
upload: (WebFile, (string) => void) => void,
|
upload: (FileWithPath, (string) => void) => void,
|
||||||
cb: (string) => void,
|
cb: (string) => void,
|
||||||
closeModal: () => void,
|
closeModal: () => void,
|
||||||
updatePublishForm: ({}) => void,
|
updatePublishForm: ({}) => void,
|
||||||
|
@ -23,7 +23,7 @@ class ModalConfirmThumbnailUpload extends React.PureComponent<Props> {
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
const { closeModal, file } = this.props;
|
const { closeModal, file } = this.props;
|
||||||
const filePath = file && (file.path || file.name);
|
const filePath = file && file.path;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Modal
|
<Modal
|
||||||
|
|
|
@ -9,12 +9,12 @@ import Button from 'component/button';
|
||||||
import FileList from 'component/common/file-list';
|
import FileList from 'component/common/file-list';
|
||||||
|
|
||||||
type Props = {
|
type Props = {
|
||||||
files: Array<WebFile>,
|
files: Array<File>,
|
||||||
hideModal: () => void,
|
hideModal: () => void,
|
||||||
updatePublishForm: ({}) => void,
|
updatePublishForm: ({}) => void,
|
||||||
history: {
|
history: {
|
||||||
location: { pathname: string },
|
location: { pathname: string },
|
||||||
push: string => void,
|
push: (string) => void,
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -43,7 +43,7 @@ const ModalFileSelection = (props: Props) => {
|
||||||
navigateToPublish();
|
navigateToPublish();
|
||||||
}
|
}
|
||||||
|
|
||||||
const handleFileChange = (file?: WebFile) => {
|
const handleFileChange = (file?: File) => {
|
||||||
// $FlowFixMe
|
// $FlowFixMe
|
||||||
setSelectedFile(file);
|
setSelectedFile(file);
|
||||||
};
|
};
|
||||||
|
|
|
@ -14,10 +14,13 @@ type Props = {
|
||||||
|
|
||||||
function ModalImageUpload(props: Props) {
|
function ModalImageUpload(props: Props) {
|
||||||
const { closeModal, currentValue, title, assetName, helpText, onUpdate } = props;
|
const { closeModal, currentValue, title, assetName, helpText, onUpdate } = props;
|
||||||
|
const filters = React.useMemo(() => [{ name: 'Images', extensions: ['jpg', 'jpeg', 'png', 'gif', 'svg'] }]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Modal isOpen type="card" onAborted={closeModal} contentLabel={title}>
|
<Modal isOpen type="card" onAborted={closeModal} contentLabel={title}>
|
||||||
<SelectAsset
|
<SelectAsset
|
||||||
|
filters={filters}
|
||||||
|
type="openFile"
|
||||||
onUpdate={onUpdate}
|
onUpdate={onUpdate}
|
||||||
currentValue={currentValue}
|
currentValue={currentValue}
|
||||||
assetName={assetName}
|
assetName={assetName}
|
||||||
|
|
|
@ -15,7 +15,7 @@ import Icon from 'component/common/icon';
|
||||||
import { NO_FILE } from 'redux/actions/publish';
|
import { NO_FILE } from 'redux/actions/publish';
|
||||||
|
|
||||||
type Props = {
|
type Props = {
|
||||||
filePath: string | WebFile,
|
filePath: ?File,
|
||||||
isMarkdownPost: boolean,
|
isMarkdownPost: boolean,
|
||||||
optimize: boolean,
|
optimize: boolean,
|
||||||
title: ?string,
|
title: ?string,
|
||||||
|
@ -104,17 +104,12 @@ const ModalPublishPreview = (props: Props) => {
|
||||||
// @endif
|
// @endif
|
||||||
}
|
}
|
||||||
|
|
||||||
function getFilePathName(filePath: string | WebFile) {
|
function getFilePathName(filePath: ?File) {
|
||||||
if (!filePath) {
|
if (!filePath) {
|
||||||
return NO_FILE;
|
return NO_FILE;
|
||||||
}
|
}
|
||||||
|
|
||||||
if (typeof filePath === 'string') {
|
|
||||||
return filePath;
|
|
||||||
} else {
|
|
||||||
return filePath.name;
|
return filePath.name;
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
function createRow(label: string, value: any) {
|
function createRow(label: string, value: any) {
|
||||||
return (
|
return (
|
||||||
|
@ -127,7 +122,7 @@ const ModalPublishPreview = (props: Props) => {
|
||||||
|
|
||||||
const txFee = previewResponse ? previewResponse['total_fee'] : null;
|
const txFee = previewResponse ? previewResponse['total_fee'] : null;
|
||||||
// $FlowFixMe add outputs[0] etc to PublishResponse type
|
// $FlowFixMe add outputs[0] etc to PublishResponse type
|
||||||
const isOptimizeAvail = filePath && filePath !== '' && isVid && ffmpegStatus.available;
|
const isOptimizeAvail = filePath && isVid && ffmpegStatus.available;
|
||||||
let modalTitle;
|
let modalTitle;
|
||||||
if (isStillEditing) {
|
if (isStillEditing) {
|
||||||
modalTitle = __('Confirm Edit');
|
modalTitle = __('Confirm Edit');
|
||||||
|
|
|
@ -18,7 +18,7 @@ import Lbry from 'lbry';
|
||||||
import { isClaimNsfw } from 'util/claim';
|
import { isClaimNsfw } from 'util/claim';
|
||||||
|
|
||||||
export const NO_FILE = '---';
|
export const NO_FILE = '---';
|
||||||
export const doPublishDesktop = (filePath: string, preview?: boolean) => (dispatch: Dispatch, getState: () => {}) => {
|
export const doPublishDesktop = (filePath: ?File, preview?: boolean) => (dispatch: Dispatch, getState: () => {}) => {
|
||||||
const publishPreview = (previewResponse) => {
|
const publishPreview = (previewResponse) => {
|
||||||
dispatch(
|
dispatch(
|
||||||
doOpenModal(MODALS.PUBLISH_PREVIEW, {
|
doOpenModal(MODALS.PUBLISH_PREVIEW, {
|
||||||
|
@ -138,14 +138,9 @@ export const doUpdatePublishForm = (publishFormValue: UpdatePublishFormData) =>
|
||||||
data: { ...publishFormValue },
|
data: { ...publishFormValue },
|
||||||
});
|
});
|
||||||
|
|
||||||
export const doUploadThumbnail = (
|
export const doUploadThumbnail =
|
||||||
filePath?: string,
|
(filePath?: string, thumbnailBlob?: File, fsAdapter?: any, fs?: any, path?: any, cb?: (string) => void) =>
|
||||||
thumbnailBlob?: File,
|
(dispatch: Dispatch) => {
|
||||||
fsAdapter?: any,
|
|
||||||
fs?: any,
|
|
||||||
path?: any,
|
|
||||||
cb?: (string) => void
|
|
||||||
) => (dispatch: Dispatch) => {
|
|
||||||
const downMessage = __('Thumbnail upload service may be down, try again later.');
|
const downMessage = __('Thumbnail upload service may be down, try again later.');
|
||||||
let thumbnail, fileExt, fileName, fileType;
|
let thumbnail, fileExt, fileName, fileType;
|
||||||
|
|
||||||
|
@ -253,9 +248,8 @@ export const doUploadThumbnail = (
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
export const doPrepareEdit = (claim: StreamClaim, uri: string, fileInfo: FileListItem, fs: any) => (
|
export const doPrepareEdit =
|
||||||
dispatch: Dispatch
|
(claim: StreamClaim, uri: string, fileInfo: FileListItem, fs: any) => (dispatch: Dispatch) => {
|
||||||
) => {
|
|
||||||
const { name, amount, value = {} } = claim;
|
const { name, amount, value = {} } = claim;
|
||||||
const channelName = (claim && claim.signing_channel && claim.signing_channel.name) || null;
|
const channelName = (claim && claim.signing_channel && claim.signing_channel.name) || null;
|
||||||
const {
|
const {
|
||||||
|
@ -317,10 +311,8 @@ export const doPrepareEdit = (claim: StreamClaim, uri: string, fileInfo: FileLis
|
||||||
dispatch({ type: ACTIONS.DO_PREPARE_EDIT, data: publishData });
|
dispatch({ type: ACTIONS.DO_PREPARE_EDIT, data: publishData });
|
||||||
};
|
};
|
||||||
|
|
||||||
export const doPublish = (success: Function, fail: Function, preview: Function) => (
|
export const doPublish =
|
||||||
dispatch: Dispatch,
|
(success: Function, fail: Function, preview: Function) => (dispatch: Dispatch, getState: () => {}) => {
|
||||||
getState: () => {}
|
|
||||||
) => {
|
|
||||||
if (!preview) {
|
if (!preview) {
|
||||||
dispatch({ type: ACTIONS.PUBLISH_START });
|
dispatch({ type: ACTIONS.PUBLISH_START });
|
||||||
}
|
}
|
||||||
|
|
10
yarn.lock
10
yarn.lock
|
@ -11549,6 +11549,7 @@ __metadata:
|
||||||
lodash-es: ^4.17.21
|
lodash-es: ^4.17.21
|
||||||
mammoth: ^1.4.16
|
mammoth: ^1.4.16
|
||||||
match-sorter: ^6.3.0
|
match-sorter: ^6.3.0
|
||||||
|
mime: ^3.0.0
|
||||||
moment: ^2.29.2
|
moment: ^2.29.2
|
||||||
node-abi: ^2.5.1
|
node-abi: ^2.5.1
|
||||||
node-fetch: ^2.6.7
|
node-fetch: ^2.6.7
|
||||||
|
@ -12576,6 +12577,15 @@ __metadata:
|
||||||
languageName: node
|
languageName: node
|
||||||
linkType: hard
|
linkType: hard
|
||||||
|
|
||||||
|
"mime@npm:^3.0.0":
|
||||||
|
version: 3.0.0
|
||||||
|
resolution: "mime@npm:3.0.0"
|
||||||
|
bin:
|
||||||
|
mime: cli.js
|
||||||
|
checksum: f43f9b7bfa64534e6b05bd6062961681aeb406a5b53673b53b683f27fcc4e739989941836a355eef831f4478923651ecc739f4a5f6e20a76487b432bfd4db928
|
||||||
|
languageName: node
|
||||||
|
linkType: hard
|
||||||
|
|
||||||
"mimic-fn@npm:^1.0.0":
|
"mimic-fn@npm:^1.0.0":
|
||||||
version: 1.2.0
|
version: 1.2.0
|
||||||
resolution: "mimic-fn@npm:1.2.0"
|
resolution: "mimic-fn@npm:1.2.0"
|
||||||
|
|
Loading…
Reference in a new issue