Feat: Presets

README.md

@@ -25,13 +25,40 @@ Sample preview running the app:
 
 ![Preview](.github/preview.png)
 
+<p align="center" id="menu">
+  <a href="#installation">Instalation</a>&nbsp;•&nbsp;
+  <a href="#usage">Usage & Settings</a>&nbsp;•&nbsp;
+  <a href="#contributing">Contributing</a>&nbsp;•&nbsp;
+  <a href="#author">Contact</a>
+</p>
+
+<br>
+<br>
+
 # Installation
 
 Download the latest version from [releases page](https://github.com/maykbrito/mini-video-me/releases) and run it.
 
-# Usage & settings
+<br>
+<br>
+
+<h1 id="usage">Usage & Settings</h1>
 
-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.
+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, borders, filters etc.
+
+<br>
+
+---
+
+<p align="center" id="custom-settings">
+<a href="#default-shortcuts">Shortcuts</a>&nbsp;•&nbsp;
+  <a href="#adjust-the-border">Border</a>&nbsp;•&nbsp;
+  <a href="#using-custom-shapes">Shapes</a>&nbsp;•&nbsp;
+  <a href="#change-size">Size</a>&nbsp;•&nbsp;
+  <a href="#using-custom-filters">Filters</a>
+</p>
+
+---
 
 ## Default shortcuts
 
@@ -55,6 +82,10 @@ After running for the first time you can access the app settings through the tra
       <td>o</td>
       <td>Toggle <a href="#using-custom-shapes">custom shapes</a> (window must be focused)</td>
     </tr>
+    <tr>
+      <td>f</td>
+      <td>Toggle <a href="#using-custom-filters">custom filters</a> (window must be focused)</td>
+    </tr>
     <tr>
       <td>r</td>
       <td>Reset zoom (window must be focused)</td>
@@ -92,6 +123,11 @@ After running for the first time you can access the app settings through the tra
 
 > On macOS you can use Command instead of Ctrl.
 
+<br>
+<a href="#custom-settings">^ back to settings menu</a>
+<br>
+<br>
+
 ## Adjust the border
 
 You can **remove border**
@@ -100,6 +136,11 @@ Open the camera settings in `tray menu > Settings` and change `"borderWith"` pro
 
 Or you can make it thick by changing the value above to `"10px"` for example.
 
+<br>
+<a href="#custom-settings">^ back to settings menu</a>
+<br>
+<br>
+
 ## Using custom shapes
 
 You can use custom shapes using the [`clip-path`](https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path)
@@ -115,6 +156,11 @@ Open the camera settings in `tray menu > Settings` and in the `"shapes"` propert
   <img src="https://i.imgur.com/EfTwfr6.png">
 </details>
 
+<br>
+<a href="#custom-settings">^ back to settings menu</a>
+<br>
+<br>
+
 ## Change size
 
 Open the camera settings in `tray menu > Settings` and change `"screen.initial"` and/or `"screen.large"`'s width and height properties as you wish
@@ -124,6 +170,30 @@ Open the camera settings in `tray menu > Settings` and change `"screen.initial"`
   <img src="https://i.imgur.com/D53cdtr.png">
 </details>
 
+<br>
+<a href="#custom-settings">^ back to settings menu</a>
+<br>
+<br>
+
+## Using custom filters
+
+We can apply a custom `CSS filter` as contrast, brightness, grayscale. See all filters [here](https://developer.mozilla.org/en-US/docs/Web/CSS/filter).
+
+We can also use named filter as `blend-` followed by these colors: `blue, red, yellow, orange, green, purple, pink, red-blue, blue-yellow` and, to give more options, you can append `-dark` or `-light` at the end of the name.
+
+So we can have something like these: `blend-blue-dark`, `blend-purple-light`, `blend-orange`, and so on ....
+[Based on this project](http://lukyvj.github.io/colofilter.css/) tks [LukyVj](https://github.com/LukyVj)
+
+<details>
+  <summary>See this gif example</summary>
+  <img src="https://i.imgur.com/DNQAxLH.gif">
+</details>
+
+<br>
+<a href="#custom-settings">^ back to settings menu</a>
+<br>
+<br>
+
 # Contributing
 
 Clone de repository, open its folder and install dependencies with:
@@ -138,6 +208,11 @@ Run it using:
 yarn start
 ```
 
+<br>
+<a href="#menu">^ back to menu</a>
+<br>
+<br>
+
 # Author
 
 👤 **Mayk Brito**
@@ -146,6 +221,11 @@ yarn start
 - Github: [@maykbrito](https://github.com/maykbrito)
 - LinkedIn: [@maykbrito](https://linkedin.com/in/maykbrito)
 
+<br>
+<a href="#menu">^ back to menu</a>
+<br>
+<br>
+
 ## Show your support
 
 Give a ⭐️ if this project helped you!

electron/main.ts

@@ -13,6 +13,7 @@ import path from 'path'
 import { ScreenController } from './lib/ScreenController'
 import { VideoDevice } from './bridge'
 import { userPreferences } from './store'
+import { PresetOptions } from '../src/config'
 
 const isLinux = process.platform === 'linux'
 const isMac = process.platform === 'darwin'
@@ -213,6 +214,38 @@ async function createTrayContextMenu() {
           })
         : [],
     },
+    {
+      type: 'submenu',
+      label: 'Presets',
+      submenu: userPreferences.store.presets.map((preset: PresetOptions) => {
+        return {
+          label: (() => {
+            const isDefault = userPreferences.store.presets.find(
+              (p: PresetOptions) => p.isDefault
+            )
+
+            if (isDefault.name === preset.name) {
+              return `• ${preset.name}`
+            }
+
+            return preset.name
+          })(),
+          click(menuItem: any) {
+            const updatedPresets = userPreferences.store.presets.map(
+              (p: PresetOptions) => {
+                p.isDefault = menuItem.label === p.name
+                return p
+              }
+            )
+
+            userPreferences.set('presets', updatedPresets)
+
+            app.relaunch()
+            app.exit()
+          },
+        }
+      }),
+    },
     {
       type: 'separator',
     },

electron/store.ts

@@ -65,51 +65,76 @@ const userPreferencesSchema: Schema<unknown> = {
       },
     },
   },
-  screen: {
-    type: JSONSchemaType.Object,
-    properties: {
-      initial: {
-        type: JSONSchemaType.Object,
-        properties: {
-          width: {
-            type: JSONSchemaType.Number,
-          },
-          height: {
-            type: JSONSchemaType.Number,
-          },
+  presets: {
+    type: JSONSchemaType.Array,
+    items: {
+      type: JSONSchemaType.Object,
+      properties: {
+        name: {
+          type: JSONSchemaType.String,
         },
-      },
-      large: {
-        type: JSONSchemaType.Object,
-        properties: {
-          width: {
-            type: JSONSchemaType.Number,
-          },
-          height: {
-            type: JSONSchemaType.Number,
+        isDefault: {
+          type: JSONSchemaType.Boolean,
+        },
+        config: {
+          type: JSONSchemaType.Object,
+          properties: {
+            zoom: {
+              type: JSONSchemaType.Number,
+            },
+            flipHorizontal: {
+              type: JSONSchemaType.Boolean,
+            },
+            borderWidth: {
+              type: JSONSchemaType.String,
+            },
+            borderColor: {
+              type: JSONSchemaType.String,
+            },
+            filters: {
+              type: JSONSchemaType.Array,
+              items: {
+                type: JSONSchemaType.String,
+              },
+            },
+            screen: {
+              type: JSONSchemaType.Object,
+              properties: {
+                initial: {
+                  type: JSONSchemaType.Object,
+                  properties: {
+                    width: {
+                      type: JSONSchemaType.Number,
+                    },
+                    height: {
+                      type: JSONSchemaType.Number,
+                    },
+                  },
+                },
+                large: {
+                  type: JSONSchemaType.Object,
+                  properties: {
+                    width: {
+                      type: JSONSchemaType.Number,
+                    },
+                    height: {
+                      type: JSONSchemaType.Number,
+                    },
+                  },
+                },
+              },
+            },
+            shapes: {
+              type: JSONSchemaType.Array,
+              items: {
+                type: JSONSchemaType.String,
+              },
+            },
           },
         },
       },
     },
   },
-  shapes: {
-    type: JSONSchemaType.Array,
-    items: {
-      type: JSONSchemaType.String,
-    },
-  },
-  flipHorizontal: {
-    type: JSONSchemaType.Boolean,
-  },
-  zoom: {
-    type: JSONSchemaType.Number,
-  },
-  borderColor: {
-    type: JSONSchemaType.String,
-  },
-  borderWidth: {
-    type: JSONSchemaType.String,
-  },
 }
 
 export const userPreferences = new Store({
@@ -139,24 +164,30 @@ 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,
-        height: 300,
-      },
-      large: {
-        width: 600,
-        height: 600,
+    presets: [
+      {
+        name: 'base',
+        isDefault: true,
+        config: {
+          zoom: 1,
+          flipHorizontal: false,
+          borderWidth: '5px',
+          borderColor: 'linear-gradient(to right, #988BC7, #FF79C6)',
+          filters: ['initial', 'grayscale(1)'],
+          screen: {
+            initial: {
+              width: 300,
+              height: 300,
+            },
+            large: {
+              width: 600,
+              height: 600,
+            },
+          },
+          shapes: ['circle(50% at 50% 50%)'],
+        },
       },
-    },
-    flipHorizontal: false,
-    zoom: 1.1,
-    borderColor: 'linear-gradient(to right, #988BC7, #FF79C6)',
-    borderWidth: '5px',
+    ],
   },
 })