[System] grab "ffmpeg"

2021-08-07 21:35:11 +08:00 · 2021-08-07 21:35:11 +08:00 · 96ac5a8997
commit 96ac5a8997
parent c55179998b
4 changed files with 108 additions and 128 deletions
--- 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);
--- 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<any>,
+  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 (
    <Card
      title={__('System')}
@ -100,6 +134,69 @@ export default function SettingSystem(props: Props) {
          </SettingsRow>
          {/* @endif */}

+          {/* @if TARGET='app' */}
+          <SettingsRow
+            title={
+              <span>
+                {__('Automatic transcoding')}
+                {findingFFmpeg && <Spinner type="small" />}
+              </span>
+            }
+          >
+            <FileSelector
+              type="openDirectory"
+              placeholder={__('A Folder containing FFmpeg')}
+              currentPath={ffmpegPath || daemonSettings.ffmpeg_path}
+              onFileChosen={(newDirectory: WebFile) => {
+                // $FlowFixMe
+                setDaemonSetting('ffmpeg_path', newDirectory.path);
+                findFFmpeg();
+              }}
+              disabled={Boolean(ffmpegPath)}
+            />
+            <p className="help">
+              {ffmpegAvailable ? (
+                <I18nMessage
+                  tokens={{
+                    learn_more: (
+                      <Button
+                        button="link"
+                        label={__('Learn more')}
+                        href="https://lbry.com/faq/video-publishing-guide#automatic"
+                      />
+                    ),
+                  }}
+                >
+                  FFmpeg is correctly configured. %learn_more%
+                </I18nMessage>
+              ) : (
+                <I18nMessage
+                  tokens={{
+                    check_again: (
+                      <Button
+                        button="link"
+                        label={__('Check again')}
+                        onClick={() => findFFmpeg()}
+                        disabled={findingFFmpeg}
+                      />
+                    ),
+                    learn_more: (
+                      <Button
+                        button="link"
+                        label={__('Learn more')}
+                        href="https://lbry.com/faq/video-publishing-guide#automatic"
+                      />
+                    ),
+                  }}
+                >
+                  FFmpeg could not be found. Navigate to it or Install, Then %check_again% or quit and restart the app.
+                  %learn_more%
+                </I18nMessage>
+              )}
+            </p>
+          </SettingsRow>
+          {/* @endif */}
+
          {/* @if TARGET='app' */}
          <SettingsRow title={__('Experimental settings')} useVerticalSeparator>
            {/* Disabling below until we get downloads to work with shared subscriptions code */}
--- a/ui/page/settingsAdvanced/index.js
+++ b/ui/page/settingsAdvanced/index.js
@ -1,19 +1,8 @@
 import { connect } from 'react-redux';
 import { doClearCache, doNotifyEncryptWallet, doNotifyDecryptWallet, doNotifyForgetPassword } from 'redux/actions/app';
 import { selectAllowAnalytics } from 'redux/selectors/app';
-import {
-  doClearDaemonSetting,
-  doSetClientSetting,
-  doFindFFmpeg,
-  doEnterSettingsPage,
-  doExitSettingsPage,
-} from 'redux/actions/settings';
-import {
-  makeSelectClientSetting,
-  selectDaemonSettings,
-  selectFfmpegStatus,
-  selectFindingFFmpeg,
-} from 'redux/selectors/settings';
+import { doSetClientSetting, doEnterSettingsPage, doExitSettingsPage } from 'redux/actions/settings';
+import { makeSelectClientSetting, selectDaemonSettings } from 'redux/selectors/settings';
 import { doWalletStatus, selectWalletIsEncrypted, SETTINGS } from 'lbry-redux';
 import SettingsAdvancedPage from './view';
 import { selectUserVerifiedEmail } from 'redux/selectors/user';
@ -24,20 +13,16 @@ const select = (state) => ({
  isAuthenticated: selectUserVerifiedEmail(state),
  walletEncrypted: selectWalletIsEncrypted(state),
  hideBalance: makeSelectClientSetting(SETTINGS.HIDE_BALANCE)(state),
-  ffmpegStatus: selectFfmpegStatus(state),
-  findingFFmpeg: selectFindingFFmpeg(state),
  syncEnabled: makeSelectClientSetting(SETTINGS.ENABLE_SYNC)(state),
 });

 const perform = (dispatch) => ({
-  clearDaemonSetting: (key) => dispatch(doClearDaemonSetting(key)),
  clearCache: () => dispatch(doClearCache()),
  setClientSetting: (key, value) => dispatch(doSetClientSetting(key, value)),
  encryptWallet: () => dispatch(doNotifyEncryptWallet()),
  decryptWallet: () => dispatch(doNotifyDecryptWallet()),
  updateWalletStatus: () => dispatch(doWalletStatus()),
  confirmForgetPassword: (modalProps) => dispatch(doNotifyForgetPassword(modalProps)),
-  findFFmpeg: () => dispatch(doFindFFmpeg()),
  enterSettings: () => dispatch(doEnterSettingsPage()),
  exitSettings: () => dispatch(doExitSettingsPage()),
 });
--- a/ui/page/settingsAdvanced/view.jsx
+++ b/ui/page/settingsAdvanced/view.jsx
@ -5,11 +5,9 @@ import { FormField } from 'component/common/form';
 import Button from 'component/button';
 import I18nMessage from 'component/i18nMessage';
 import Page from 'component/page';
-import FileSelector from 'component/common/file-selector';
 import { SETTINGS } from 'lbry-redux';
 import Card from 'component/common/card';
 import { getPasswordFromCookie } from 'util/saved-passwords';
-import Spinner from 'component/spinner';

 type Price = {
  currency: string,
@ -29,7 +27,6 @@ type DaemonSettings = {
 };

 type Props = {
-  clearDaemonSetting: (string) => void,
  setClientSetting: (string, SetDaemonSettingArg) => void,
  daemonSettings: DaemonSettings,
  isAuthenticated: boolean,
@ -39,9 +36,6 @@ type Props = {
  walletEncrypted: boolean,
  hideBalance: boolean,
  confirmForgetPassword: ({}) => void,
-  ffmpegStatus: { available: boolean, which: string },
-  findingFFmpeg: boolean,
-  findFFmpeg: () => void,
  syncEnabled: boolean,
  enterSettings: () => void,
  exitSettings: () => void,
@ -67,18 +61,7 @@ class SettingsAdvancedPage extends React.PureComponent<Props, State> {
  }

  componentDidMount() {
-    const { isAuthenticated, ffmpegStatus, daemonSettings, findFFmpeg, enterSettings } = this.props;
-
-    // @if TARGET='app'
-    const { available } = ffmpegStatus;
-    const { ffmpeg_path: ffmpegPath } = daemonSettings;
-    if (!available) {
-      if (ffmpegPath) {
-        this.clearDaemonSetting('ffmpeg_path');
-      }
-      findFFmpeg();
-    }
-    // @endif
+    const { isAuthenticated, enterSettings } = this.props;

    if (isAuthenticated || !IS_WEB) {
      this.props.updateWalletStatus();
@ -96,11 +79,6 @@ class SettingsAdvancedPage extends React.PureComponent<Props, State> {
    exitSettings();
  }

-  onFFmpegFolder(path: string) {
-    this.setDaemonSetting('ffmpeg_path', path);
-    this.findFFmpeg();
-  }
-
  onThemeChange(event: SyntheticInputEvent<*>) {
    const { value } = event.target;

@ -137,30 +115,11 @@ class SettingsAdvancedPage extends React.PureComponent<Props, State> {
    // this.props.setDaemonSetting(name, value);
  }

-  clearDaemonSetting(name: string): void {
-    this.props.clearDaemonSetting(name);
-  }
-
-  findFFmpeg(): void {
-    this.props.findFFmpeg();
-  }
-
  render() {
-    const {
-      daemonSettings,
-      ffmpegStatus,
-      isAuthenticated,
-      walletEncrypted,
-      setClientSetting,
-      hideBalance,
-      findingFFmpeg,
-    } = this.props;
+    const { daemonSettings, isAuthenticated, walletEncrypted, setClientSetting, hideBalance } = this.props;

    const { storedPassword } = this.state;
    const noDaemonSettings = !daemonSettings || Object.keys(daemonSettings).length === 0;
-    // @if TARGET='app'
-    const { available: ffmpegAvailable, which: ffmpegPath } = ffmpegStatus;
-    // @endif

    return (
      <Page
@ -237,71 +196,6 @@ class SettingsAdvancedPage extends React.PureComponent<Props, State> {
                }
              />
            )}
-
-            {/* @if TARGET='app' */}
-            <Card
-              title={
-                <span>
-                  {__('Automatic transcoding')}
-                  {findingFFmpeg && <Spinner type="small" />}
-                </span>
-              }
-              actions={
-                <React.Fragment>
-                  <FileSelector
-                    type="openDirectory"
-                    placeholder={__('A Folder containing FFmpeg')}
-                    currentPath={ffmpegPath || daemonSettings.ffmpeg_path}
-                    onFileChosen={(newDirectory: WebFile) => {
-                      // $FlowFixMe
-                      this.onFFmpegFolder(newDirectory.path);
-                    }}
-                    disabled={Boolean(ffmpegPath)}
-                  />
-                  <p className="help">
-                    {ffmpegAvailable ? (
-                      <I18nMessage
-                        tokens={{
-                          learn_more: (
-                            <Button
-                              button="link"
-                              label={__('Learn more')}
-                              href="https://lbry.com/faq/video-publishing-guide#automatic"
-                            />
-                          ),
-                        }}
-                      >
-                        FFmpeg is correctly configured. %learn_more%
-                      </I18nMessage>
-                    ) : (
-                      <I18nMessage
-                        tokens={{
-                          check_again: (
-                            <Button
-                              button="link"
-                              label={__('Check again')}
-                              onClick={() => this.findFFmpeg()}
-                              disabled={findingFFmpeg}
-                            />
-                          ),
-                          learn_more: (
-                            <Button
-                              button="link"
-                              label={__('Learn more')}
-                              href="https://lbry.com/faq/video-publishing-guide#automatic"
-                            />
-                          ),
-                        }}
-                      >
-                        FFmpeg could not be found. Navigate to it or Install, Then %check_again% or quit and restart the
-                        app. %learn_more%
-                      </I18nMessage>
-                    )}
-                  </p>
-                </React.Fragment>
-              }
-            />
-            {/* @endif */}
          </div>
        )}
      </Page>