Add support for pausing the recording

[thethomasz]

Tried implementing the feature request #129 to allow pausing a recording.
I'm not entirely sure if adding a "right-click" to the tray icon is a good solution to this, so I just wanted to create the PR first to get some feedback. I'm also not sure what the tray icon should look like when it's paused, and I'm not much of a designer myself. 😅

Fixes #129

[sindresorhus]

I agree with adding it to the right-click menu, but I think we can also add a shortcut so that if you press Option+click it would pause instead of stopping.

[sindresorhus]

I'm also not sure what the tray icon should look like when it's paused

@skllcrn ^

[thethomasz]

I've finished implementing the suggested changes, still not sure how the icon should look though. Here's some screenshots on what the context menu looks like during recording or when the recording is paused.

[sindresorhus]

Maybe take the recording icon (■) and reduce opacity to 50%? So it's like a faded out recording icon.

[sindresorhus]

I think Pause should be first in the menu as the user can just click to stop, so pause is the main action you want when right-clicking.

[sindresorhus]

I would also drop the Recording word. Stop Recording => Stop.

[sindresorhus]

And maybe also include a quick way to quit Kap.

Resume
Stop
-----
Quit Kap (Q)

[sindresorhus]

Not required for this pull request, but I think it would be useful to see the recording duration in this menu too.

[sindresorhus]

We also need to document the Option-click and right-click menu behavior.

[thethomasz]

Not required for this pull request, but I think it would be useful to see the recording duration in this menu too.

I tried to figure this out for a bit, but I couldn't seem to get it working. My idea was to keep the overall duration (in ms) and the start time of the current segment of the recording (which I need in case the user pauses recording), then set an interval that would update the tray's context menu every second. But I couldn't seem to get the menu item to update dynamically while it's open. I think I'll just keep this out of the current PR for now, and we can create a new issue to track it.

[thethomasz]

Here's what the context menu looks like with all the current changes:

[thethomasz]

We also need to document the Option-click and right-click menu behavior.

Hmm, I wasn't really sure where to document this behaviour, I don't really see a "How To" guide or something in the README. An idea I had was to put a small page in the preferences window that could show users how to use the app. And something else we could also do is add a small walkthrough for when the user installs the app that teaches them how to use it.

[sindresorhus]

I tried to figure this out for a bit, but I couldn't seem to get it working. My idea was to keep the overall duration (in ms) and the start time of the current segment of the recording (which I need in case the user pauses recording), then set an interval that would update the tray's context menu every second. But I couldn't seem to get the menu item to update dynamically while it's open. I think I'll just keep this out of the current PR for now, and we can create a new issue to track it.

When you open a menu on macOS, it switches to a different run loop (it's complicated), so it blocks all timers. I'm not aware of any way to work around this with Electron, but it's fine. The timer doesn't need to update while the menu is open. It's just a convenience to see the current duration at the time of opening the menu.

[skllcrn]

This is looking fantastic @thethomasz, the icon too, thanks both of you!

[sindresorhus]

Hmm, I wasn't really sure where to document this behaviour, I don't really see a "How To" guide or something in the README. An idea I had was to put a small page in the preferences window that could show users how to use the app. And something else we could also do is add a small walkthrough for when the user installs the app that teaches them how to use it.

I think was can just add a simple tip:

Tip: While recording, Option-click the menu bar icon to pause or right-click for more options.

[sindresorhus]

Great work, @thethomasz 👍