maykbrito · maykbrito · Nov 14, 2021 · Nov 14, 2021 · Nov 14, 2021 · Nov 14, 2021
diff --git a/README.md b/README.md
@@ -19,33 +19,19 @@
 
 <br />
 
-## Installation
-
-Download the latest version from [releases page](https://github.com/maykbrito/mini-video-me/releases) and run it.
-
-## Running locally
-
-Clone de repository, open its folder and install dependencies with:
-
-```sh
-yarn
-```
-
-Run it using:
-
-```sh
-yarn start
-```
-
 ## Preview
 
 Sample preview running the app:
 
 ![Preview](.github/preview.png)
 
+## Installation
+
+Download the latest version from [releases page](https://github.com/maykbrito/mini-video-me/releases) and run it.
+
 ## Usage & settings
 
-After running for the first time you can access the app settings through the tray menu and click on "Settings" to change default shortcuts, camera size, zoom, etc.
+After running for the first time you can access the app settings through the tray menu and click on "Settings" to change default shortcuts, camera size, zoom, shapes, etc.
 
 ### Default shortcuts
 
@@ -67,10 +53,6 @@ After running for the first time you can access the app settings through the tra
     </tr>
     <tr>
       <td>o</td>
-      <td>Toggle rounded camera (window must be focused)</td>
-    </tr>
-    <tr>
-      <td>p</td>
       <td>Toggle <a href="#using-custom-shapes">custom shapes</a> (window must be focused)</td>
     </tr>
     <tr>
@@ -108,15 +90,45 @@ After running for the first time you can access the app settings through the tra
   </tbody>
 </table>
 
-
 > On macOS you can use Command instead of Ctrl.
 
+## Adjust the border
+
+You can **remove border**
+
+Open the camera settings in `tray menu > Settings` and change `"borderWith"` property to `"0"`.
+
+Or you can make it thick by changing the value above to `"10px"` for example.
+
 ## Using custom shapes
 
 You can use custom shapes using the [`clip-path`](https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path)
 CSS property. You can use a tool like [Clippy](https://bennettfeely.com/clippy/) to play around with different shapes
 you can build with `clip-path`.
 
+### How to add/remove shapes
+
+Open the camera settings in `tray menu > Settings` and in the `"shapes"` property, place the CSS's clip-path value as you wish.
+
+<details>
+  <summary>See this image example</summary>
+  <img src="https://i.imgur.com/EfTwfr6.png">
+</details>
+
+## Contributing
+
+Clone de repository, open its folder and install dependencies with:
+
+```sh
+yarn
+```
+
+Run it using:
+
+```sh
+yarn start
+```
+
 ## Author
 
 👤 **Mayk Brito**

diff --git a/electron/store.ts b/electron/store.ts
@@ -92,23 +92,23 @@ const userPreferencesSchema: Schema<unknown> = {
       },
     },
   },
-  rounded: {
-    type: JSONSchemaType.Boolean,
-  },
-  clipPath: {
-    type: JSONSchemaType.String,
+  shapes: {
+    type: JSONSchemaType.Array,
+    items: {
+      type: JSONSchemaType.String,
+    },
   },
   flipHorizontal: {
     type: JSONSchemaType.Boolean,
   },
   zoom: {
     type: JSONSchemaType.Number,
   },
-  borderColorCss: {
+  borderColor: {
     type: JSONSchemaType.String,
   },
-  showBorder: {
-    type: JSONSchemaType.Boolean,
+  borderWidth: {
+    type: JSONSchemaType.String,
   },
 }
 
@@ -139,6 +139,10 @@ export const userPreferences = new Store({
       },
       hideCamera: 'Shift+Alt+CommandOrControl+3',
     },
+    shapes: [
+      'circle(50% at 50% 50%)',
+      'polygon(0 0, 100% 0, 100% 100%, 0% 100%)',
+    ],
     screen: {
       initial: {
         width: 300,
@@ -149,12 +153,10 @@ export const userPreferences = new Store({
         heigth: 600,
       },
     },
-    rounded: true,
-    clipPath: '',
     flipHorizontal: false,
     zoom: 1.1,
-    borderColorCss: 'linear-gradient(to right, #988BC7, #FF79C6)',
-    showBorder: true,
+    borderColor: 'linear-gradient(to right, #988BC7, #FF79C6)',
+    borderWidth: '5px',
   },
 })
 

diff --git a/public/index.html b/public/index.html
@@ -1,106 +1,100 @@
 <!DOCTYPE html>
 <html lang="en">
-
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <meta http-equiv="X-UA-Compatible" content="ie=edge">
-
-  <title>Mini Video Me</title>
-  <style>
-    :root {
-      --border-color: linear-gradient(to right, #988BC7, #FF79C6);
-      --clip-path: inherit;
-    }
-
-    body,
-    #video-grid {
-      -webkit-app-region: drag;
-    }
-
-    button {
-      -webkit-app-region: nodrag;
-    }
-
-    body {
-      margin: 0;
-      padding: 0;
-      overflow: hidden;
-    }
-
-    video {
-      height: 100vh;
-      pointer-events: none;
-      background: #121214;
-    }
-
-    #wrapper {
-      width: 100vw;
-      height: 100vh;
-      display: flex;
-      justify-content: center;
-
-      margin: auto;
-
-      position: relative;
-      box-sizing: border-box;
-
-      color: #FFF;
-      background: transparent;
-      background-clip: padding-box;
-    }
-
-    #wrapper:before {
-      content: '';
-      position: absolute;
-      top: 0;
-      right: 0;
-      bottom: 0;
-      left: 0;
-      z-index: -1;
-      margin: -5px;
-      border-radius: inherit;
-    }
-
-    .video-wrapper {
-      overflow: hidden;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      background: transparent;
-    }
-
-    #wrapper.has-border {
-      border: solid 5px transparent;
-    }
-
-    #wrapper.has-border:before {
-      background: var(--border-color);
-    }
-
-    #wrapper.rounded,
-    #wrapper.rounded .video-wrapper,
-    #wrapper.rounded video {
-      clip-path: circle(50% at 50% 50%);
-    }
-
-    #wrapper.has-clip-path:before,
-    #wrapper.has-clip-path .video-wrapper {
-      clip-path: var(--clip-path);
-    }
-  </style>
-
-  <script>
-    const global = globalThis;
-  </script>
-</head>
-
-<body>
-  <div id="wrapper">
-    <div class="video-wrapper">
-      <video id="video" autoplay muted></video>
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+
+    <title>Mini Video Me</title>
+    <style>
+      :root {
+        --border-color: linear-gradient(to right, #988bc7, #ff79c6);
+        --clip-path: circle(50% at 50% 50%);
+        --border-width: 5px;
+      }
+
+      body,
+      #video-grid {
+        -webkit-app-region: drag;
+      }
+
+      button {
+        -webkit-app-region: nodrag;
+      }
+
+      body {
+        margin: 0;
+        padding: 0;
+        overflow: hidden;
+      }
+
+      video {
+        height: 100vh;
+        pointer-events: none;
+        background: #121214;
+      }
+
+      #wrapper {
+        width: 100vw;
+        height: 100vh;
+        display: flex;
+        justify-content: center;
+
+        margin: auto;
+
+        position: relative;
+        box-sizing: border-box;
+
+        color: #fff;
+        background: transparent;
+        background-clip: padding-box;
+      }
+
+      #wrapper:before {
+        content: '';
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        z-index: -1;
+        margin: calc(-1 * var(--border-width));
+        /* border-radius: inherit; */
+      }
+
+      .video-wrapper {
+        overflow: hidden;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background: transparent;
+      }
+
+      #wrapper.has-border {
+        border: solid transparent;
+        border-width: var(--border-width);
+      }
+
+      #wrapper.has-border:before {
+        background: var(--border-color);
+      }
+
+      #wrapper.has-clip-path:before,
+      #wrapper.has-clip-path .video-wrapper {
+        clip-path: var(--clip-path);
+      }
+    </style>
+
+    <script>
+      const global = globalThis
+    </script>
+  </head>
+
+  <body>
+    <div id="wrapper">
+      <div class="video-wrapper">
+        <video id="video" autoplay muted></video>
+      </div>
     </div>
-  </div>
-</body>
-
-</html>
+  </body>
+</html>