diff --git a/ui/component/settingSystem/index.js b/ui/component/settingSystem/index.js index 0c27e9c92..a8b195d78 100644 --- a/ui/component/settingSystem/index.js +++ b/ui/component/settingSystem/index.js @@ -1,16 +1,20 @@ import { connect } from 'react-redux'; import { doClearCache } from 'redux/actions/app'; -import { doSetDaemonSetting } from 'redux/actions/settings'; -import { selectDaemonSettings } from 'redux/selectors/settings'; +import { doSetDaemonSetting, doClearDaemonSetting, doFindFFmpeg } from 'redux/actions/settings'; +import { selectDaemonSettings, selectFfmpegStatus, selectFindingFFmpeg } from 'redux/selectors/settings'; import SettingSystem from './view'; const select = (state) => ({ daemonSettings: selectDaemonSettings(state), + ffmpegStatus: selectFfmpegStatus(state), + findingFFmpeg: selectFindingFFmpeg(state), }); const perform = (dispatch) => ({ setDaemonSetting: (key, value) => dispatch(doSetDaemonSetting(key, value)), + clearDaemonSetting: (key) => dispatch(doClearDaemonSetting(key)), clearCache: () => dispatch(doClearCache()), + findFFmpeg: () => dispatch(doFindFFmpeg()), }); export default connect(select, perform)(SettingSystem); diff --git a/ui/component/settingSystem/view.jsx b/ui/component/settingSystem/view.jsx index 770a31c80..e0ff6e775 100644 --- a/ui/component/settingSystem/view.jsx +++ b/ui/component/settingSystem/view.jsx @@ -4,11 +4,14 @@ import React from 'react'; import Button from 'component/button'; import Card from 'component/common/card'; import { FormField } from 'component/common/form'; +import FileSelector from 'component/common/file-selector'; +import I18nMessage from 'component/i18nMessage'; import SettingAutoLaunch from 'component/settingAutoLaunch'; import SettingClosingBehavior from 'component/settingClosingBehavior'; import SettingCommentsServer from 'component/settingCommentsServer'; import SettingsRow from 'component/settingsRow'; import SettingWalletServer from 'component/settingWalletServer'; +import Spinner from 'component/spinner'; // @if TARGET='app' const IS_MAC = process.platform === 'darwin'; @@ -32,15 +35,46 @@ type DaemonSettings = { }; type Props = { + // --- select --- daemonSettings: DaemonSettings, + ffmpegStatus: { available: boolean, which: string }, + findingFFmpeg: boolean, + // --- perform --- setDaemonSetting: (string, ?SetDaemonSettingArg) => void, + clearDaemonSetting: (string) => void, clearCache: () => Promise, + findFFmpeg: () => void, }; export default function SettingSystem(props: Props) { - const { daemonSettings, setDaemonSetting, clearCache } = props; + const { + daemonSettings, + ffmpegStatus, + findingFFmpeg, + setDaemonSetting, + clearDaemonSetting, + clearCache, + findFFmpeg, + } = props; const [clearingCache, setClearingCache] = React.useState(false); + // @if TARGET='app' + const { available: ffmpegAvailable, which: ffmpegPath } = ffmpegStatus; + // @endif + + React.useEffect(() => { + // @if TARGET='app' + const { available } = ffmpegStatus; + const { ffmpeg_path: ffmpegPath } = daemonSettings; + if (!available) { + if (ffmpegPath) { + clearDaemonSetting('ffmpeg_path'); + } + findFFmpeg(); + } + // @endif + }, []); // eslint-disable-line react-hooks/exhaustive-deps + return ( {/* @endif */} + {/* @if TARGET='app' */} + + {__('Automatic transcoding')} + {findingFFmpeg && } + + } + > + { + // $FlowFixMe + setDaemonSetting('ffmpeg_path', newDirectory.path); + findFFmpeg(); + }} + disabled={Boolean(ffmpegPath)} + /> +

+ {ffmpegAvailable ? ( + + ), + }} + > + FFmpeg is correctly configured. %learn_more% + + ) : ( + findFFmpeg()} + disabled={findingFFmpeg} + /> + ), + learn_more: ( +