Sped up extremely slow loading of Cropper and context menus

.circleci/config.yml

@@ -2,7 +2,7 @@ version: 2
 jobs:
  build:
  macos:
- xcode: '13.0.0'
+ xcode: '13.4.1'
  steps:
  - checkout
  - run: yarn

.gitignore

@@ -4,3 +4,4 @@ node_modules
 /app/dist
 /dist
 /dist-js
+.DS_Store

.yarnrc

@@ -0,0 +1,5 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+
+yarn-path ".yarn/releases/yarn-1.22.21.cjs"

.yarnrc.yml

@@ -0,0 +1 @@
+nodeLinker: node-modules

main/aperture.ts

@@ -1,23 +1,23 @@
-import {windowManager} from './windows/manager';
-import {setRecordingTray, setPausedTray, disableTray, resetTray} from './tray';
-import {setCropperShortcutAction} from './global-accelerators';
-import {settings} from './common/settings';
-import {track} from './common/analytics';
-import {plugins} from './plugins';
-import {getAudioDevices, getSelectedInputDeviceId} from './utils/devices';
-import {showError} from './utils/errors';
-import {RecordServiceContext, RecordServiceState} from './plugins/service-context';
-import {setCurrentRecording, updatePluginState, stopCurrentRecording} from './recording-history';
-import {Recording} from './video';
-import {ApertureOptions, StartRecordingOptions} from './common/types';
-import {InstalledPlugin} from './plugins/plugin';
-import {RecordService, RecordServiceHook} from './plugins/service';
-import {getCurrentDurationStart, getOverallDuration, setCurrentDurationStart, setOverallDuration} from './utils/track-duration';
+import { windowManager } from './windows/manager';
+import { setRecordingTray, setPausedTray, disableTray, resetTray } from './tray';
+import { setCropperShortcutAction } from './global-accelerators';
+import { settings } from './common/settings';
+import { track } from './common/analytics';
+import { plugins } from './plugins';
+import { getAudioDevices, getSelectedInputDeviceId } from './utils/devices';
+import { showError } from './utils/errors';
+import { RecordServiceContext, RecordServiceState } from './plugins/service-context';
+import { setCurrentRecording, updatePluginState, stopCurrentRecording } from './recording-history';
+import { Recording } from './video';
+import { ApertureOptions, StartRecordingOptions } from './common/types';
+import { InstalledPlugin } from './plugins/plugin';
+import { RecordService, RecordServiceHook } from './plugins/service';
+import { getCurrentDurationStart, getOverallDuration, setCurrentDurationStart, setOverallDuration } from './utils/track-duration';
 
 const createAperture = require('aperture');
 const aperture = createAperture();
 
-let recordingPlugins: Array<{plugin: InstalledPlugin; service: RecordService}> = [];
+let recordingPlugins: Array<{ plugin: InstalledPlugin; service: RecordService }> = [];
 const serviceState = new Map<string, RecordServiceState>();
 let apertureOptions: ApertureOptions;
 let recordingName: string | undefined;
@@ -30,7 +30,7 @@ const setRecordingName = (name: string) => {
 const serializeEditPluginState = () => {
  const result: Record<string, Record<string, Record<string, unknown> | undefined>> = {};
 
- for (const {plugin, service} of recordingPlugins) {
+ for (const { plugin, service } of recordingPlugins) {
  if (!result[plugin.name]) {
  result[plugin.name] = {};
  }
@@ -41,7 +41,7 @@ const serializeEditPluginState = () => {
  return result;
 };
 
-const callPlugins = async (method: RecordServiceHook) => Promise.all(recordingPlugins.map(async ({plugin, service}) => {
+const callPlugins = async (method: RecordServiceHook) => Promise.all(recordingPlugins.map(async ({ plugin, service }) => {
  if (service[method] && typeof service[method] === 'function') {
  try {
  await service[method]?.(
@@ -53,7 +53,7 @@ const callPlugins = async (method: RecordServiceHook) => Promise.all(recordingPl
  })
  );
  } catch (error) {
- showError(error as any, {title: `Something went wrong while using the plugin “${plugin.prettyName}”`, plugin});
+ showError(error as any, { title: `Something went wrong while using the plugin “${plugin.prettyName}”`, plugin });
  }
  }
 }));
@@ -74,13 +74,14 @@ export const startRecording = async (options: StartRecordingOptions) => {
  }
 
  past = Date.now();
+ console.log(`Starting recording ${(Date.now() - past) / 1000}s`);
  recordingName = undefined;
 
  windowManager.preferences?.close();
  windowManager.cropper?.disable();
  disableTray();
 
- const {cropperBounds, screenBounds, displayId} = options;
+ const { cropperBounds, screenBounds, displayId } = options;
 
  cropperBounds.y = screenBounds.height - (cropperBounds.y + cropperBounds.height);
 
@@ -98,14 +99,20 @@ export const startRecording = async (options: StartRecordingOptions) => {
  highlightClicks,
  screenId: displayId
  };
+ console.log(`before recordaudio ${(Date.now() - past) / 1000}s`);
 
  if (recordAudio) {
  // In case for some reason the default audio device is not set
  // use the first available device for recording
+ console.log(`getting audio ${(Date.now() - past) / 1000}s`);
  const audioInputDeviceId = getSelectedInputDeviceId();
+ console.log(`getSelectedInputDeviceId ${(Date.now() - past) / 1000}s`);
+
  if (audioInputDeviceId) {
  apertureOptions.audioDeviceId = audioInputDeviceId;
  } else {
+ console.log(`getting defaultaudio ${(Date.now() - past) / 1000}s`);
+
  const [defaultAudioDevice] = await getAudioDevices();
  apertureOptions.audioDeviceId = defaultAudioDevice?.id;
  }
@@ -125,20 +132,25 @@ export const startRecording = async (options: StartRecordingOptions) => {
  const validServices = plugin.config.validServices;
  return plugin.recordServicesWithStatus
  // Make sure service is valid and enabled
- .filter(({title, isEnabled}) => isEnabled && validServices.includes(title))
- .map(service => ({plugin, service}));
+ .filter(({ title, isEnabled }) => isEnabled && validServices.includes(title))
+ .map(service => ({ plugin, service }));
  }
  );
 
- for (const {service, plugin} of recordingPlugins) {
- serviceState.set(service.title, {persistedState: {}});
+ for (const { service, plugin } of recordingPlugins) {
+ serviceState.set(service.title, { persistedState: {} });
  track(`plugins/used/record/${plugin.name}`);
  }
+ console.log(`callplugins b4 ${(Date.now() - past) / 1000}s`);
 
  await callPlugins('willStartRecording');
+ console.log(`callplugins after ${(Date.now() - past) / 1000}s`);
+
 
  try {
  const filePath = await aperture.startRecording(apertureOptions);
+ console.log(`aperture startrecording ${(Date.now() - past) / 1000}s`);
+
  setOverallDuration(0);
  setCurrentDurationStart(Date.now());
 
@@ -150,7 +162,7 @@ export const startRecording = async (options: StartRecordingOptions) => {
  });
  } catch (error) {
  track('recording/stopped/error');
- showError(error as any, {title: 'Recording error', plugin: undefined});
+ showError(error as any, { title: 'Recording error', plugin: undefined });
  past = undefined;
  cleanup();
  return;
@@ -174,7 +186,7 @@ export const startRecording = async (options: StartRecordingOptions) => {
  // Make sure it doesn't catch the error of ending the recording
  if (past) {
  track('recording/stopped/error');
- showError(error, {title: 'Recording error', plugin: undefined});
+ showError(error, { title: 'Recording error', plugin: undefined });
  past = undefined;
  cleanup();
  }
@@ -201,7 +213,7 @@ export const stopRecording = async () => {
  setCurrentDurationStart(0);
  } catch (error) {
  track('recording/stopped/error');
- showError(error as any, {title: 'Recording error', plugin: undefined});
+ showError(error as any, { title: 'Recording error', plugin: undefined });
  cleanup();
  return;
  }
@@ -237,7 +249,7 @@ export const stopRecordingWithNoEdit = async () => {
  setCurrentDurationStart(0);
  } catch (error) {
  track('recording/quit/error');
- showError(error as any, {title: 'Recording error', plugin: undefined});
+ showError(error as any, { title: 'Recording error', plugin: undefined });
  cleanup();
  return;
  }
@@ -266,7 +278,7 @@ export const pauseRecording = async () => {
  console.log(`Paused recording after ${(Date.now() - past) / 1000}s`);
  } catch (error) {
  track('recording/paused/error');
- showError(error as any, {title: 'Recording error', plugin: undefined});
+ showError(error as any, { title: 'Recording error', plugin: undefined });
  cleanup();
  }
 };
@@ -286,7 +298,7 @@ export const resumeRecording = async () => {
  console.log(`Resume recording after ${(Date.now() - past) / 1000}s`);
  } catch (error) {
  track('recording/resumed/error');
- showError(error as any, {title: 'Recording error', plugin: undefined});
+ showError(error as any, { title: 'Recording error', plugin: undefined });
  cleanup();
  }
 };

main/global-accelerators.ts

@@ -1,11 +1,16 @@
-import {globalShortcut} from 'electron';
-import {ipcMain as ipc} from 'electron-better-ipc';
-import {settings} from './common/settings';
-import {windowManager} from './windows/manager';
+import { globalShortcut } from 'electron';
+import { ipcMain as ipc } from 'electron-better-ipc';
+import { settings } from './common/settings';
+import { windowManager } from './windows/manager';
 
 const openCropper = () => {
- if (!windowManager.cropper?.isOpen()) {
+ let cropperwindow = windowManager.cropper?.isOpen()
+ if (!cropperwindow) {
  windowManager.cropper?.open();
+ } else {
+ if (cropperwindow.isVisible())
+ cropperwindow?.hide()
+ else cropperwindow?.show()
  }
 };
 
@@ -31,6 +36,7 @@ export const setCropperShortcutAction = (action = openCropper) => {
 const registerShortcut = (shortcut: string, action: () => void) => {
  try {
  globalShortcut.register(shortcut, action);
+ console.log('Registered shortcut successfully', shortcut, action);
  } catch (error) {
  console.error('Error registering shortcut', shortcut, action, error);
  }
@@ -50,31 +56,36 @@ const registerFromStore = () => {
 };
 
 export const initializeGlobalAccelerators = () => {
- ipc.answerRenderer('update-shortcut', ({setting, shortcut}) => {
+ ipc.answerRenderer('update-shortcut', ({ setting, shortcut }) => {
  const oldShortcut = settings.get<string, string>(`shortcuts.${setting}`);
 
  try {
  if (oldShortcut && oldShortcut !== shortcut && globalShortcut.isRegistered(oldShortcut)) {
+ console.log('Unregistering old shortcut', oldShortcut);
  globalShortcut.unregister(oldShortcut);
  }
  } catch (error) {
  console.error('Error unregistering old shortcutAccelerator', error);
  } finally {
  if (shortcut && shortcut !== oldShortcut) {
+ console.log('Registering new shortcut', shortcut);
  settings.set(`shortcuts.${setting}`, shortcut);
  const handler = handlers.get(setting);
-
+ console.log(handler)
  if (settings.get('enableShortcuts') && handler) {
+ console.log('Registering new shortcut2', shortcut);
  registerShortcut(shortcut, handler);
  }
  } else if (!shortcut) {
  // @ts-expect-error
  settings.delete(`shortcuts.${setting}`);
+ console.log('No shortcut, unregistering shortcut', oldShortcut);
  }
  }
  });
 
- ipc.answerRenderer('toggle-shortcuts', ({enabled}) => {
+ ipc.answerRenderer('toggle-shortcuts', ({ enabled }) => {
+ console.log('Toggling shortcuts', enabled);
  if (enabled) {
  registerFromStore();
  } else {

main/menus/common.ts

@@ -1,24 +1,26 @@
 import delay from 'delay';
-import {app, dialog} from 'electron';
-import {openNewGitHubIssue} from 'electron-util';
+import { app, dialog } from 'electron';
+import { openNewGitHubIssue } from 'electron-util';
 import macosRelease from '../utils/macos-release';
-import {supportedVideoExtensions} from '../common/constants';
-import {getCurrentMenuItem, MenuItemId} from './utils';
-import {openFiles} from '../utils/open-files';
-import {windowManager} from '../windows/manager';
+import { supportedVideoExtensions } from '../common/constants';
+import { getCurrentMenuItem, MenuItemId } from './utils';
+import { openFiles } from '../utils/open-files';
+import { windowManager } from '../windows/manager';
 
 export const getPreferencesMenuItem = () => ({
  id: MenuItemId.preferences,
  label: 'Preferences…',
  accelerator: 'Command+,',
- click: () => windowManager.preferences?.open()
+ click: () =>
+ windowManager.preferences?.open()
+
 });
 
 export const getAboutMenuItem = () => ({
  id: MenuItemId.about,
  label: `About ${app.name}`,
  click: () => {
- windowManager.cropper?.close();
+ // windowManager.cropper?.close();
  app.focus();
  app.showAboutPanel();
  }
@@ -34,8 +36,8 @@ export const getOpenFileMenuItem = () => ({
  await delay(200);
 
  app.focus();
- const {canceled, filePaths} = await dialog.showOpenDialog({
- filters: [{name: 'Videos', extensions: supportedVideoExtensions}],
+ const { canceled, filePaths } = await dialog.showOpenDialog({
+ filters: [{ name: 'Videos', extensions: supportedVideoExtensions }],
  properties: ['openFile', 'multiSelections']
  });
 

main/tray.ts

@@ -1,28 +1,31 @@
 'use strict';
 
-import {Tray} from 'electron';
-import {KeyboardEvent} from 'electron/main';
+import { Tray } from 'electron';
+import { KeyboardEvent } from 'electron/main';
 import path from 'path';
-import {getCogMenu} from './menus/cog';
-import {getRecordMenu} from './menus/record';
-import {track} from './common/analytics';
-import {openFiles} from './utils/open-files';
-import {windowManager} from './windows/manager';
-import {pauseRecording, resumeRecording, stopRecording} from './aperture';
+import { getCogMenu } from './menus/cog';
+import { getRecordMenu } from './menus/record';
+import { track } from './common/analytics';
+import { openFiles } from './utils/open-files';
+import { windowManager } from './windows/manager';
+import { pauseRecording, resumeRecording, stopRecording } from './aperture';
 
 let tray: Tray;
 let trayAnimation: NodeJS.Timeout | undefined;
 
+let cogMenu = getCogMenu()
 const openContextMenu = async () => {
- tray.popUpContextMenu(await getCogMenu());
+ tray.popUpContextMenu(await cogMenu);
 };
 
+let recordMenu = getRecordMenu(false)
 const openRecordingContextMenu = async () => {
- tray.popUpContextMenu(await getRecordMenu(false));
+ tray.popUpContextMenu(await recordMenu);
 };
 
+let pausedMenu = getRecordMenu(true)
 const openPausedContextMenu = async () => {
- tray.popUpContextMenu(await getRecordMenu(true));
+ tray.popUpContextMenu(await pausedMenu);
 };
 
 const openCropperWindow = () => windowManager.cropper?.open();
@@ -58,13 +61,13 @@ export const resetTray = () => {
 };
 
 export const setRecordingTray = () => {
- animateIcon();
 
  tray.removeAllListeners('right-click');
 
  // TODO: figure out why this is marked as missing. It's defined properly in the electron.d.ts file
  tray.once('click', onRecordingTrayClick);
  tray.on('right-click', openRecordingContextMenu);
+ animateIcon();
 };
 
 export const setPausedTray = () => {
@@ -89,7 +92,7 @@ const onRecordingTrayClick = (event: KeyboardEvent) => {
 };
 
 const animateIcon = async () => new Promise<void>(resolve => {
- const interval = 20;
+ const interval = 50;
  let i = 0;
 
  const next = () => {