Cleanup

.gitattributes

@@ -0,0 +1 @@
+* text=auto eol=lf

.gitignore

@@ -1,14 +1,5 @@
-# build output
-out
-.next
-dist
-
-# dependencies
 node_modules
-
-# logs
-npm-debug.log
-yarn-error.log
-
-# MacOS
-.DS_Store
+/renderer/out
+/renderer/.next
+/app/dist
+/dist

.npmrc

@@ -0,0 +1 @@
+package-lock=false

README.md

@@ -12,7 +12,7 @@
 Or install with [Homebrew-Cask](https://caskroom.github.io):
 
 ```
-$ brew update && brew cask install kap
+$ brew cask install kap
 ```
 
 ## Contribute

contributing.md

@@ -2,7 +2,7 @@
 
 1. [Fork](https://help.github.com/articles/fork-a-repo/) this repository to your own GitHub account and then [clone](https://help.github.com/articles/cloning-a-repository/) it to your local device
 2. Install the dependencies: `npm install`
-3. Build the code, start the app, and watch for changes: `npm run dev`
+3. Build the code, start the app, and watch for changes: `npm start`
 
 To make sure that your code works in the finished app, you can generate the binary:
 

main/common/aperture.js

@@ -65,7 +65,7 @@ const startRecording = async options => {
     await desktopIcons.hide();
   }
 
-  console.log(`Hid desktop icons after ${(Date.now() - past) / 1000}s`);
+  console.log(`Hide desktop icons after ${(Date.now() - past) / 1000}s`);
 
   if (doNotDisturb) {
     wasDoNotDisturbAlreadyEnabled = await dnd.isEnabled();

main/common/settings.js

@@ -25,13 +25,15 @@ store.set('actionBar', {});
 
 const audioInputDeviceId = store.get('audioInputDeviceId');
 
-audioDevices().then(audioDevices => {
-  if (!audioDevices.some(device => device.id === audioInputDeviceId)) {
-    const [device] = audioDevices;
+(async () => {
+  const devices = await audioDevices();
+
+  if (!devices.some(device => device.id === audioInputDeviceId)) {
+    const [device] = devices;
     if (device) {
       store.set('audioInputDeviceId', device.id);
     }
   }
-});
+})();
 
 module.exports = store;

main/export.js

@@ -55,7 +55,11 @@ class Export {
       try {
         await this.service.action(this.context);
         if (!this.canceled) {
-          this.updateExport({text: 'Export completed', status: 'completed', percentage: undefined});
+          this.updateExport({
+            text: 'Export completed',
+            status: 'completed',
+            percentage: undefined
+          });
         }
         resolve();
       } catch (error) {
@@ -65,7 +69,11 @@ class Export {
   }
 
   cancel() {
-    this.updateExport({text: 'Export canceled', status: 'canceled', percentage: undefined});
+    this.updateExport({
+      text: 'Export canceled',
+      status: 'canceled',
+      percentage: undefined
+    });
     this.canceled = true;
 
     if (this.resolve) {
@@ -80,7 +88,10 @@ class Export {
   }
 
   setProgress(text, percentage = 0) {
-    this.updateExport({text, percentage, status: 'processing'});
+    this.updateExport({
+      text, percentage,
+      status: 'processing'
+    });
   }
 
   async convert() {

main/save-file-service.js

@@ -1,3 +1,5 @@
+'use strict';
+
 const {Notification, shell} = require('electron');
 const moveFile = require('move-file');
 

main/tray.js

@@ -56,7 +56,7 @@ const animateIcon = () => new Promise(resolve => {
       try {
         tray.setImage(path.join(__dirname, '..', 'static', 'menubar-loading', filename));
         next();
-      } catch (err) {
+      } catch (_) {
         resolve();
       }
     }, interval);

renderer/components/action-bar/index.js

@@ -57,7 +57,7 @@ class ActionBar extends React.Component {
               width: ${width}px;
               background: white;
               border-radius: 4px;
-              box-shadow: 0px 0px 5px 2px rgba(0,0,0,0.2);
+              box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.2);
               z-index: 10;
               top: ${y}px;
               left: ${x}px;

renderer/components/action-bar/record-button.js

@@ -41,8 +41,8 @@ class RecordButton extends React.Component {
             this.setState({shouldStop: true});
           }
         };
-      }, err => {
-        console.error('An error occurred when trying to get audio levels:', err);
+      }, error => {
+        console.error('An error occurred when trying to get audio levels:', error);
       });
     }
   }
@@ -61,7 +61,17 @@ class RecordButton extends React.Component {
 
   startRecording = event => {
     event.stopPropagation();
-    const {cropperExists, x, y, width, height, screenWidth, screenHeight, displayId, willStartRecording} = this.props;
+    const {
+      cropperExists,
+      x,
+      y,
+      width,
+      height,
+      screenWidth,
+      screenHeight,
+      displayId,
+      willStartRecording
+    } = this.props;
 
     if (cropperExists) {
       const {remote} = electron;
@@ -95,8 +105,8 @@ class RecordButton extends React.Component {
           <div className="inner">
             {!cropperExists && <div className="fill"/>}
           </div>
-          { showFirst && <div className="ripple first" onAnimationIteration={this.shouldFirstStop}/>}
-          { showSecond && <div className="ripple second" onAnimationIteration={this.shouldSecondStop}/>}
+          {showFirst && <div className="ripple first" onAnimationIteration={this.shouldFirstStop}/>}
+          {showSecond && <div className="ripple second" onAnimationIteration={this.shouldSecondStop}/>}
         </div>
         <style jsx>{`
             .container {
@@ -154,9 +164,15 @@ class RecordButton extends React.Component {
               animation: ripple 1.8s linear 0.9s infinite;
             }
 
-            @keyframes ripple{
-              0% {transform:scale(1); }
-              100% {transform:scale(1.3); opacity:0;}
+            @keyframes ripple {
+              0% {
+                transform: scale(1);
+              }
+
+              100% {
+                transform: scale(1.3);
+                opacity: 0;
+              }
             }
         `}</style>
       </div>

renderer/components/cropper/cursor.js

@@ -13,8 +13,14 @@ class Cursor extends React.Component {
       return null;
     }
 
-    /// const {width: screenWidth, height: screenHeight} = this.remote.getGlobal('screen');
-    const {cursorY, cursorX, width, height, screenWidth, screenHeight} = this.props;
+    const {
+      cursorY,
+      cursorX,
+      width,
+      height,
+      screenWidth,
+      screenHeight
+    } = this.props;
 
     const className = classNames('dimensions', {
       flipY: screenHeight - cursorY < 35,

renderer/components/cropper/handles.js

@@ -15,7 +15,15 @@ class Handle extends React.Component {
   }
 
   render() {
-    const {size, top, bottom, right, left, onClick, ratioLocked} = this.props;
+    const {
+      size,
+      top,
+      bottom,
+      right,
+      left,
+      onClick,
+      ratioLocked
+    } = this.props;
 
     const className = classNames('handle', {
       'handle-top': top,

renderer/components/cropper/overlay.js

@@ -65,20 +65,20 @@ class Overlay extends React.Component {
         <div id="bottom" className={className} onMouseDown={startPicking}/>
         <style jsx>{`
           .overlay {
-            background-color: rgba(0, 0, 0, .5);
-            transition: background-color .5s ease-in-out, width .2s ease-out, height .2s ease-out;
+            background-color: rgba(0, 0, 0, 0.5);
+            transition: background-color 0.5s ease-in-out, width 0.2s ease-out, height 0.2s ease-out;
           }
 
           .overlay.recording {
-            background-color: rgba(0, 0, 0, .1);
+            background-color: rgba(0, 0, 0, 0.1);
           }
 
           .overlay.picking {
             cursor: crosshair;
           }
 
           .overlay.no-transition {
-            transition: background-color .5s ease-in-out;
+            transition: background-color 0.5s ease-in-out;
           }
 
           #middle {

renderer/components/editor/controls/play-bar.js

@@ -119,7 +119,7 @@ class PlayBar extends React.Component {
               left: 50%;
               transform: translateX(-50%);
               width: 60%;
-              transition: all .12s ease-in-out;
+              transition: all 0.12s ease-in-out;
             }
 
             .progress-bar-container:not(.hover) {

renderer/components/editor/controls/preview.js

@@ -39,7 +39,7 @@ class Preview extends React.Component {
             transform: translateX(-50%);
             width: max-content;
             height: 24px;
-            background: rgba(0, 0, 0, .4);
+            background: rgba(0, 0, 0, 0.4);
             color: #fff;
             display: flex;
             align-items: center;
@@ -53,7 +53,7 @@ class Preview extends React.Component {
             width: 100%;
             height: 100%;
             border-radius: 4px;
-            box-shadow: 0px 0px 16px rgba(0,0,0,.1);
+            box-shadow: 0px 0px 16px rgba(0, 0, 0, 0.1);
             ${hidePreview ? 'display: none;' : ''}
           }
         `}</style>

renderer/components/editor/controls/right.js

@@ -36,7 +36,8 @@ class RightControls extends React.Component {
               justify-content: flex-end;
             }
 
-            .mute, .fullscreen {
+            .mute,
+            .fullscreen {
               width: 24px;
               height: 24px;
               margin-left: 16px;

renderer/components/editor/index.js

@@ -58,7 +58,7 @@ export default class Editor extends React.Component {
             width: 100%;
             height: 36px;
             background: rgba(0, 0, 0, 0.4);
-            transition: top .12s ease-in-out;
+            transition: top 0.12s ease-in-out;
             display: flex;
             z-index: 10;
           }
@@ -101,7 +101,8 @@ export default class Editor extends React.Component {
             -webkit-app-region: no-drag;
           }
 
-          .traffic-light:after, .traffic-light:before {
+          .traffic-light:after,
+          .traffic-light:before {
             visibility: hidden;
           }
 
@@ -118,7 +119,8 @@ export default class Editor extends React.Component {
             background-color: #bf4942;
           }
 
-          .close:after, .close:before {
+          .close:after,
+          .close:before {
             background-color: #760e0e;
             width: 8px;
             height: 2px;
@@ -166,7 +168,8 @@ export default class Editor extends React.Component {
             pointer-events: none;
           }
 
-          .disabled:after, .disabled:before {
+          .disabled:after,
+          .disabled:before {
             display: none;
           }
         `}</style>

renderer/components/editor/options/left.js

@@ -41,7 +41,7 @@ class LeftOptions extends React.Component {
 
           input {
             height: 24px;
-            background: hsla(0,0%,100%,.1);
+            background: hsla(0, 0%, 100%, 0.1);
             text-align: center;
             font-size: 12px;
             box-sizing: border-box;
@@ -64,7 +64,7 @@ class LeftOptions extends React.Component {
 
           input:focus, input:hover {
             outline: none;
-            background: hsla(0,0%,100%,.2);
+            background: hsla(0, 0%, 100%, 0.2);
           }
 
           .option {

renderer/components/editor/options/right.js

@@ -48,7 +48,7 @@ class RightOptions extends React.Component {
 
           .button {
             padding: 4px 8px;
-            background: hsla(0,0%,100%,.1);
+            background: hsla(0, 0%, 100%, 0.1);
             font-size: 12px;
             color: white;
             height: 24px;
@@ -59,7 +59,7 @@ class RightOptions extends React.Component {
           }
 
           .button:hover {
-            background: hsla(0,0%,100%,.2);
+            background: hsla(0, 0%, 100%, 0.2);
           }
         `}</style>
       </div>