Improve plugin discoverability (wulkano#686)

adoxic · Jul 8, 2019 · 19ba637 · 19ba637
1 parent e70a900
commit 19ba637
Show file tree

Hide file tree

Showing 6 changed files with 38 additions and 10 deletions.
diff --git a/main/menus.js b/main/menus.js
@@ -82,7 +82,7 @@ const exportHistoryItem = {
 const preferencesItem = {
   label: 'Preferences…',
   accelerator: 'Command+,',
-  click: openPrefsWindow
+  click: () => openPrefsWindow()
 };
 
 const cogMenuTemplate = [

diff --git a/main/preferences.js b/main/preferences.js
@@ -3,13 +3,14 @@
 const {BrowserWindow, ipcMain} = require('electron');
 const pEvent = require('p-event');
 
+const {ipcMain: ipc} = require('electron-better-ipc');
 const {closeAllCroppers} = require('./cropper');
 const loadRoute = require('./utils/routes');
 const {track} = require('./common/analytics');
 
 let prefsWindow = null;
 
-const openPrefsWindow = async () => {
+const openPrefsWindow = async options => {
   track('preferences/opened');
   closeAllCroppers();
 
@@ -42,6 +43,12 @@ const openPrefsWindow = async () => {
 
   loadRoute(prefsWindow, 'preferences');
 
+  await pEvent(prefsWindow.webContents, 'did-finish-load');
+  if (options) {
+    ipc.callRenderer(prefsWindow, 'options', options);
+  }
+
+  ipc.callRenderer(prefsWindow, 'mount');
   await pEvent(ipcMain, 'preferences-ready');
   prefsWindow.show();
   return prefsWindow;
@@ -53,6 +60,8 @@ const closePrefsWindow = () => {
   }
 };
 
+ipc.answerRenderer('open-preferences', openPrefsWindow);
+
 module.exports = {
   openPrefsWindow,
   closePrefsWindow

diff --git a/renderer/components/editor/options/right.js b/renderer/components/editor/options/right.js
@@ -11,6 +11,13 @@ class RightOptions extends React.Component {
     const formatOptions = options ? options.map(({format, prettyFormat}) => ({value: format, label: prettyFormat})) : [];
     const pluginOptions = options ? options.find(option => option.format === format).plugins.map(plugin => ({value: plugin.title, label: plugin.title})) : [];
 
+    if (pluginOptions.length < 2) {
+      pluginOptions.push({
+        label: 'Get plugins…',
+        value: 'open-plugins'
+      });
+    }
+
     return (
       <div className="container">
         <div className="label">Destination</div>

diff --git a/renderer/containers/editor.js b/renderer/containers/editor.js
@@ -123,7 +123,15 @@ export default class EditorContainer extends Container {
     this.setState({format, plugin: newPlugin});
   }
 
-  selectPlugin = plugin => this.setState({plugin})
+  selectPlugin = plugin => {
+    if (plugin === 'open-plugins') {
+      const {ipcRenderer: ipc} = require('electron-better-ipc');
+
+      ipc.callMain('open-preferences', {category: 'plugins', tab: 'discover'});
+    } else {
+      this.setState({plugin});
+    }
+  }
 
   setFps = (value, target, {ignoreEmpty = true} = {}) => {
     const {fps, lastValidFps} = this.state;

diff --git a/renderer/containers/preferences.js b/renderer/containers/preferences.js
@@ -7,9 +7,12 @@ const SETTINGS_ANALYTICS_BLACKLIST = ['kapturesDir'];
 export default class PreferencesContainer extends Container {
   remote = electron.remote || false;
 
-  state = {}
+  state = {
+    category: 'general',
+    tab: 'discover'
+  }
 
-  mount = setOverlay => {
+  mount = async setOverlay => {
     this.setOverlay = setOverlay;
     this.settings = this.remote.require('./common/settings');
     this.plugins = this.remote.require('./common/plugins');
@@ -21,17 +24,15 @@ export default class PreferencesContainer extends Container {
     const {getAudioDevices} = this.remote.require('./common/aperture');
     const {audioInputDeviceId} = this.settings.store;
 
+    await this.fetchFromNpm();
+
     this.setState({
       ...this.settings.store,
-      category: 'general',
-      tab: 'discover',
       openOnStartup: this.remote.app.getLoginItemSettings().openAtLogin,
       pluginsInstalled,
       isMounted: true
     });
 
-    this.fetchFromNpm();
-
     (async () => {
       const audioDevices = await getAudioDevices();
       const updates = {audioDevices};
@@ -48,6 +49,8 @@ export default class PreferencesContainer extends Container {
     })();
   }
 
+  setNavigation = ({category, tab}) => this.setState({category, tab})
+
   fetchFromNpm = async () => {
     try {
       const plugins = await this.plugins.getFromNpm();

diff --git a/renderer/pages/preferences.js b/renderer/pages/preferences.js
@@ -14,9 +14,10 @@ export default class PreferencesPage extends React.Component {
   state = {overlay: false}
 
   componentDidMount() {
-    preferencesContainer.mount(this.setOverlay);
     const {ipcRenderer: ipc} = require('electron-better-ipc');
     ipc.answerMain('open-plugin-config', preferencesContainer.openPluginsConfig);
+    ipc.answerMain('options', preferencesContainer.setNavigation);
+    ipc.answerMain('mount', () => preferencesContainer.mount(this.setOverlay));
   }
 
   setOverlay = overlay => this.setState({overlay});