diff --git a/README.md b/README.md
index 32dae42..da6c445 100644
--- a/README.md
+++ b/README.md
@@ -19,33 +19,19 @@
-## 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:
+## 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
| o |
- Toggle rounded camera (window must be focused) |
-
-
- | p |
Toggle custom shapes (window must be focused) |
@@ -108,15 +90,45 @@ After running for the first time you can access the app settings through the tra
-
> 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.
+
+
+ See this image example
+ 
+
+
+## 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
index 4cc2acb..322394e 100644
--- a/electron/store.ts
+++ b/electron/store.ts
@@ -92,11 +92,11 @@ const userPreferencesSchema: Schema = {
},
},
},
- rounded: {
- type: JSONSchemaType.Boolean,
- },
- clipPath: {
- type: JSONSchemaType.String,
+ shapes: {
+ type: JSONSchemaType.Array,
+ items: {
+ type: JSONSchemaType.String,
+ },
},
flipHorizontal: {
type: JSONSchemaType.Boolean,
@@ -104,11 +104,11 @@ const userPreferencesSchema: Schema = {
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
index 0c2013d..0044493 100644
--- a/public/index.html
+++ b/public/index.html
@@ -1,106 +1,100 @@
-
-
-
-
-
-
- Mini Video Me
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
Mini Video Me
+
+
+
+
+
+
+
-
-
-
-
\ No newline at end of file
+
+