From fcb75b06f199d491fbbfdf4db3d8fd908923dd23 Mon Sep 17 00:00:00 2001
From: Douglas Moura <douglas.ademoura@gmail.com>
Date: Thu, 10 Jun 2021 15:31:26 -0300
Subject: [PATCH 01/14] chore: Add .idea to ignored files

---
 .gitignore | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/.gitignore b/.gitignore
index 56fe9d0..1c19142 100644
--- a/.gitignore
+++ b/.gitignore
@@ -3,4 +3,5 @@ packages
 dist
 .DS_Store
 out/
-.webpack
\ No newline at end of file
+.webpack
+.idea

From 29d2fe6ed6b13cec04206c60fc179815f360ad1c Mon Sep 17 00:00:00 2001
From: Douglas Moura <douglas.ademoura@gmail.com>
Date: Thu, 10 Jun 2021 15:51:16 -0300
Subject: [PATCH 02/14] chore: Introduce option to enable/disable border

---
 electron/store.ts |  4 ++++
 public/index.html | 19 +++++++++++++------
 src/cam.ts        | 38 ++++++++++++++++++++++++--------------
 src/config.ts     |  1 +
 4 files changed, 42 insertions(+), 20 deletions(-)

diff --git a/electron/store.ts b/electron/store.ts
index eb00e82..77a5cb1 100644
--- a/electron/store.ts
+++ b/electron/store.ts
@@ -77,6 +77,9 @@ const userPreferencesSchema: Schema<unknown> = {
   borderColorCss: {
     type: JSONSchemaType.String,
   },
+  showBorder: {
+    type: JSONSchemaType.Boolean,
+  },
 }
 
 export const userPreferences = new Store({
@@ -110,6 +113,7 @@ export const userPreferences = new Store({
     flipHorizontal: false,
     zoom: 1.1,
     borderColorCss: 'linear-gradient(to right, #988BC7, #FF79C6)',
+    showBorder: true,
   },
 })
 
diff --git a/public/index.html b/public/index.html
index ff72087..41f1562 100644
--- a/public/index.html
+++ b/public/index.html
@@ -27,7 +27,6 @@
 
     video {
       height: 100vh;
-      border-radius: 9999px;
       pointer-events: none;
       background: #121214;
     }
@@ -50,8 +49,6 @@
       color: #FFF;
       background: transparent;
       background-clip: padding-box;
-      border: solid 5px transparent;
-      border-radius: 16px;
     }
 
     #wrapper:before {
@@ -61,7 +58,6 @@
       z-index: -1;
       margin: -5px;
       border-radius: inherit;
-      background: var(--border-color);
     }
 
     .video-wrapper {
@@ -69,10 +65,17 @@
       display: flex;
       align-items: center;
       justify-content: center;
-      border-radius: 16px;
       background: transparent;
     }
 
+    #wrapper.has-border {
+      border: solid 5px transparent;
+    }
+
+    #wrapper.has-border:before {
+      background: var(--border-color);
+    }
+
     #wrapper.rounded {
       border-radius: 50%;
       /* fix border-radius on Mac Mojave */
@@ -82,6 +85,10 @@
     #wrapper.rounded .video-wrapper {
       border-radius: 9999px;
     }
+
+    #wrapper.rounded video {
+      border-radius: 9999px;
+    }
   </style>
 
   <script>
@@ -95,4 +102,4 @@
     </div>
   </div>
 </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/src/cam.ts b/src/cam.ts
index 4901d6a..4e8ee64 100644
--- a/src/cam.ts
+++ b/src/cam.ts
@@ -7,14 +7,14 @@ type ZoomType = 'in' | 'out'
 export class CameraController {
   public videoElement: HTMLVideoElement
 
-  private videoWrapper: HTMLDivElement
+  private wrapperElement: HTMLDivElement
   private isFlipped: boolean
   private isRounded: boolean
   private position: Record<'x' | 'y' | 'z', number>
   private root: HTMLElement
 
   constructor() {
-    this.videoWrapper = document.getElementById('wrapper') as HTMLDivElement
+    this.wrapperElement = document.getElementById('wrapper') as HTMLDivElement
     this.videoElement = document.getElementById('video') as HTMLVideoElement
     this.root = document.querySelector(':root') as HTMLElement
 
@@ -71,24 +71,34 @@ export class CameraController {
     this.render()
   }
 
-  private render() {
-    const transform: string[] = []
-    const classList: string[] = []
-
-    transform.push(`translate(${this.position.x}%, ${this.position.y}%)`)
-    transform.push(`scale(${this.position.z})`)
+  private applyPositioning() {
+    this.videoElement.style.transform = `translate(${this.position.x}%, ${this.position.y}%) scale(${this.position.z})`
 
     if (this.isFlipped) {
-      classList.push('flip')
-      transform.push('rotateY(180deg)')
+      this.videoElement.style.transform += 'rotateY(180deg)'
+      this.videoElement.classList.add('flip')
     }
+  }
 
-    this.videoElement.style.transform = transform.join(' ')
-    this.videoElement.className = classList.join(' ')
-    this.videoWrapper.className = this.isRounded ? 'rounded' : ''
-
+  private applyBorder() {
     if (config.borderColorCss) {
       this.root.style.setProperty('--border-color', config.borderColorCss)
     }
+
+    if (config.showBorder) {
+      this.wrapperElement.classList.add('has-border')
+    }
+  }
+
+  private applyShape() {
+    if (this.isRounded) {
+      this.wrapperElement.classList.add('rounded')
+    }
+  }
+
+  private render() {
+    this.applyPositioning()
+    this.applyBorder()
+    this.applyShape()
   }
 }
diff --git a/src/config.ts b/src/config.ts
index 91cbd99..dcaccf4 100644
--- a/src/config.ts
+++ b/src/config.ts
@@ -10,6 +10,7 @@ const config = {
   horizontal: Number(userPreferences.anchor.x ?? 0),
   vertical: Number(userPreferences.anchor.y ?? 0),
   borderColorCss: userPreferences.borderColorCss,
+  showBorder: userPreferences.showBorder,
 }
 
 export { config }

From 59b4d594130e6daf7305408264c6b7ca9fb73beb Mon Sep 17 00:00:00 2001
From: Douglas Moura <douglas.ademoura@gmail.com>
Date: Thu, 10 Jun 2021 16:42:09 -0300
Subject: [PATCH 03/14] chore: Add support to custom shapes with clip-path

---
 electron/store.ts | 4 ++++
 src/cam.ts        | 6 +++++-
 src/config.ts     | 1 +
 3 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/electron/store.ts b/electron/store.ts
index 77a5cb1..b3172e7 100644
--- a/electron/store.ts
+++ b/electron/store.ts
@@ -68,6 +68,9 @@ const userPreferencesSchema: Schema<unknown> = {
   rounded: {
     type: JSONSchemaType.Boolean,
   },
+  clipPath: {
+    type: JSONSchemaType.String,
+  },
   flipHorizontal: {
     type: JSONSchemaType.Boolean,
   },
@@ -110,6 +113,7 @@ export const userPreferences = new Store({
       hideCamera: 'Shift+Alt+CommandOrControl+3',
     },
     rounded: true,
+    clipPath: '',
     flipHorizontal: false,
     zoom: 1.1,
     borderColorCss: 'linear-gradient(to right, #988BC7, #FF79C6)',
diff --git a/src/cam.ts b/src/cam.ts
index 4e8ee64..8dc7aac 100644
--- a/src/cam.ts
+++ b/src/cam.ts
@@ -91,9 +91,13 @@ export class CameraController {
   }
 
   private applyShape() {
-    if (this.isRounded) {
+    if (!config.clipPath && this.isRounded) {
       this.wrapperElement.classList.add('rounded')
     }
+
+    if (config.clipPath) {
+      this.wrapperElement.style.setProperty('clip-path', config.clipPath)
+    }
   }
 
   private render() {
diff --git a/src/config.ts b/src/config.ts
index dcaccf4..5b74800 100644
--- a/src/config.ts
+++ b/src/config.ts
@@ -11,6 +11,7 @@ const config = {
   vertical: Number(userPreferences.anchor.y ?? 0),
   borderColorCss: userPreferences.borderColorCss,
   showBorder: userPreferences.showBorder,
+  clipPath: userPreferences.clipPath,
 }
 
 export { config }

From f2c51da980b0daea02fccaea61c7c22bf7691fe1 Mon Sep 17 00:00:00 2001
From: Douglas Moura <douglas.ademoura@gmail.com>
Date: Thu, 10 Jun 2021 16:56:29 -0300
Subject: [PATCH 04/14] chore: Add support to CSS filters

---
 electron/store.ts | 4 ++++
 src/cam.ts        | 7 +++++++
 src/config.ts     | 1 +
 3 files changed, 12 insertions(+)

diff --git a/electron/store.ts b/electron/store.ts
index b3172e7..ed5321e 100644
--- a/electron/store.ts
+++ b/electron/store.ts
@@ -83,6 +83,9 @@ const userPreferencesSchema: Schema<unknown> = {
   showBorder: {
     type: JSONSchemaType.Boolean,
   },
+  filter: {
+    type: JSONSchemaType.String,
+  },
 }
 
 export const userPreferences = new Store({
@@ -118,6 +121,7 @@ export const userPreferences = new Store({
     zoom: 1.1,
     borderColorCss: 'linear-gradient(to right, #988BC7, #FF79C6)',
     showBorder: true,
+    filter: '',
   },
 })
 
diff --git a/src/cam.ts b/src/cam.ts
index 8dc7aac..fe54086 100644
--- a/src/cam.ts
+++ b/src/cam.ts
@@ -100,9 +100,16 @@ export class CameraController {
     }
   }
 
+  private applyFilter() {
+    if (config.filter) {
+      this.videoElement.style.setProperty('filter', config.filter)
+    }
+  }
+
   private render() {
     this.applyPositioning()
     this.applyBorder()
     this.applyShape()
+    this.applyFilter()
   }
 }
diff --git a/src/config.ts b/src/config.ts
index 5b74800..c8dedb8 100644
--- a/src/config.ts
+++ b/src/config.ts
@@ -12,6 +12,7 @@ const config = {
   borderColorCss: userPreferences.borderColorCss,
   showBorder: userPreferences.showBorder,
   clipPath: userPreferences.clipPath,
+  filter: userPreferences.filter,
 }
 
 export { config }

From 77e637c8d202a20d71e0308ec48a4dc8033e3a29 Mon Sep 17 00:00:00 2001
From: Douglas Moura <douglas.ademoura@gmail.com>
Date: Thu, 10 Jun 2021 19:53:08 -0300
Subject: [PATCH 05/14] chore: Show border for custom shapes

---
 public/index.html | 9 +++++++++
 src/cam.ts        | 3 ++-
 2 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/public/index.html b/public/index.html
index 41f1562..9caa15a 100644
--- a/public/index.html
+++ b/public/index.html
@@ -9,6 +9,7 @@
   <style>
     :root {
       --border-color: linear-gradient(to right, #988BC7, #FF79C6);
+      --clip-path: inherit;
     }
 
     body, #video-grid {
@@ -89,6 +90,14 @@
     #wrapper.rounded video {
       border-radius: 9999px;
     }
+
+    #wrapper.has-clip-path:before {
+      clip-path: var(--clip-path);
+    }
+
+    #wrapper.has-clip-path .video-wrapper {
+      clip-path: var(--clip-path);
+    }
   </style>
 
   <script>
diff --git a/src/cam.ts b/src/cam.ts
index fe54086..fcce606 100644
--- a/src/cam.ts
+++ b/src/cam.ts
@@ -96,7 +96,8 @@ export class CameraController {
     }
 
     if (config.clipPath) {
-      this.wrapperElement.style.setProperty('clip-path', config.clipPath)
+      this.wrapperElement.classList.add('has-clip-path')
+      this.root.style.setProperty('--clip-path', config.clipPath)
     }
   }
 

From 04f1894365c46445bbecbd71a8cdd6f71139b3bf Mon Sep 17 00:00:00 2001
From: Douglas Moura <douglas.ademoura@gmail.com>
Date: Thu, 10 Jun 2021 19:54:52 -0300
Subject: [PATCH 06/14] chore: Agglutinate identical CSS properties

---
 public/index.html | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/public/index.html b/public/index.html
index 9caa15a..0514b4f 100644
--- a/public/index.html
+++ b/public/index.html
@@ -91,10 +91,7 @@
       border-radius: 9999px;
     }
 
-    #wrapper.has-clip-path:before {
-      clip-path: var(--clip-path);
-    }
-
+    #wrapper.has-clip-path:before,
     #wrapper.has-clip-path .video-wrapper {
       clip-path: var(--clip-path);
     }

From 103d81e62a54737aff95bb4ed94197d5badb01eb Mon Sep 17 00:00:00 2001
From: Douglas Moura <douglas.ademoura@gmail.com>
Date: Thu, 10 Jun 2021 20:59:59 -0300
Subject: [PATCH 07/14] refactor: Rename config variable

---
 electron/store.ts | 4 ++--
 public/index.html | 5 +----
 src/cam.ts        | 4 ++--
 src/config.ts     | 2 +-
 4 files changed, 6 insertions(+), 9 deletions(-)

diff --git a/electron/store.ts b/electron/store.ts
index ed5321e..916ba48 100644
--- a/electron/store.ts
+++ b/electron/store.ts
@@ -77,7 +77,7 @@ const userPreferencesSchema: Schema<unknown> = {
   zoom: {
     type: JSONSchemaType.Number,
   },
-  borderColorCss: {
+  borderColor: {
     type: JSONSchemaType.String,
   },
   showBorder: {
@@ -119,7 +119,7 @@ export const userPreferences = new Store({
     clipPath: '',
     flipHorizontal: false,
     zoom: 1.1,
-    borderColorCss: 'linear-gradient(to right, #988BC7, #FF79C6)',
+    borderColor: 'linear-gradient(to right, #988BC7, #FF79C6)',
     showBorder: true,
     filter: '',
   },
diff --git a/public/index.html b/public/index.html
index 0514b4f..5b542a6 100644
--- a/public/index.html
+++ b/public/index.html
@@ -83,10 +83,7 @@
       height: calc(100vw - 1px);
     }
 
-    #wrapper.rounded .video-wrapper {
-      border-radius: 9999px;
-    }
-
+    #wrapper.rounded .video-wrapper,
     #wrapper.rounded video {
       border-radius: 9999px;
     }
diff --git a/src/cam.ts b/src/cam.ts
index fcce606..e2365d1 100644
--- a/src/cam.ts
+++ b/src/cam.ts
@@ -81,8 +81,8 @@ export class CameraController {
   }
 
   private applyBorder() {
-    if (config.borderColorCss) {
-      this.root.style.setProperty('--border-color', config.borderColorCss)
+    if (config.borderColor) {
+      this.root.style.setProperty('--border-color', config.borderColor)
     }
 
     if (config.showBorder) {
diff --git a/src/config.ts b/src/config.ts
index c8dedb8..06cc0d4 100644
--- a/src/config.ts
+++ b/src/config.ts
@@ -9,7 +9,7 @@ const config = {
   scale: Number(userPreferences.zoom ?? 1),
   horizontal: Number(userPreferences.anchor.x ?? 0),
   vertical: Number(userPreferences.anchor.y ?? 0),
-  borderColorCss: userPreferences.borderColorCss,
+  borderColor: userPreferences.borderColor,
   showBorder: userPreferences.showBorder,
   clipPath: userPreferences.clipPath,
   filter: userPreferences.filter,

From 2e6c1e0a02b3dce5053be1a593de3901e0779b8d Mon Sep 17 00:00:00 2001
From: Douglas Moura <douglas.ademoura@gmail.com>
Date: Thu, 10 Jun 2021 21:19:10 -0300
Subject: [PATCH 08/14] fix: Re-add key shortcut to toggle the shape of the
 video

---
 src/cam.ts | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/cam.ts b/src/cam.ts
index e2365d1..9339d22 100644
--- a/src/cam.ts
+++ b/src/cam.ts
@@ -93,6 +93,8 @@ export class CameraController {
   private applyShape() {
     if (!config.clipPath && this.isRounded) {
       this.wrapperElement.classList.add('rounded')
+    } else {
+      this.wrapperElement.classList.remove('rounded')
     }
 
     if (config.clipPath) {

From 6f0edde21930928fe877b182de8a23eb72af5289 Mon Sep 17 00:00:00 2001
From: Douglas Moura <douglas.ademoura@gmail.com>
Date: Wed, 11 Aug 2021 16:10:37 -0300
Subject: [PATCH 09/14] styles: improve styles for a better behavior when the
 window is resized

---
 public/index.html | 9 ++-------
 1 file changed, 2 insertions(+), 7 deletions(-)

diff --git a/public/index.html b/public/index.html
index 5b542a6..b2d9a81 100644
--- a/public/index.html
+++ b/public/index.html
@@ -77,15 +77,10 @@
       background: var(--border-color);
     }
 
-    #wrapper.rounded {
-      border-radius: 50%;
-      /* fix border-radius on Mac Mojave */
-      height: calc(100vw - 1px);
-    }
-
+    #wrapper.rounded,
     #wrapper.rounded .video-wrapper,
     #wrapper.rounded video {
-      border-radius: 9999px;
+      clip-path: circle(50% at 50% 50%);
     }
 
     #wrapper.has-clip-path:before,

From c33ecb1be0f934053179b5f5cbc6451e5c21899b Mon Sep 17 00:00:00 2001
From: Douglas Moura <douglas.ademoura@gmail.com>
Date: Wed, 11 Aug 2021 16:12:12 -0300
Subject: [PATCH 10/14] chore: add shortcut to toggle clip-path

---
 src/cam.ts   | 14 ++++++++++++--
 src/index.ts |  1 +
 2 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/src/cam.ts b/src/cam.ts
index 0875b0f..3e4b257 100644
--- a/src/cam.ts
+++ b/src/cam.ts
@@ -10,6 +10,7 @@ export class CameraController {
   private wrapperElement: HTMLDivElement
   private isFlipped: boolean
   private isRounded: boolean
+  private isClipped: boolean
   private position: Record<'x' | 'y' | 'z', number>
   private root: HTMLElement
 
@@ -20,6 +21,7 @@ export class CameraController {
 
     this.isFlipped = config.flipHorizontal
     this.isRounded = config.rounded
+    this.isClipped = !!config.clipPath
 
     this.position = {
       x: config.horizontal,
@@ -75,6 +77,12 @@ export class CameraController {
     this.render()
   }
 
+  public clip() {
+    this.isClipped = !this.isClipped
+
+    this.render()
+  }
+
   private applyPositioning() {
     this.videoElement.style.transform = `translate(${this.position.x}%, ${this.position.y}%) scale(${this.position.z})`
 
@@ -95,15 +103,17 @@ export class CameraController {
   }
 
   private applyShape() {
-    if (!config.clipPath && this.isRounded) {
+    if (this.isRounded) {
       this.wrapperElement.classList.add('rounded')
     } else {
       this.wrapperElement.classList.remove('rounded')
     }
 
-    if (config.clipPath) {
+    if (this.isClipped && config.clipPath) {
       this.wrapperElement.classList.add('has-clip-path')
       this.root.style.setProperty('--clip-path', config.clipPath)
+    } else {
+      this.wrapperElement.classList.remove('has-clip-path')
     }
   }
 
diff --git a/src/index.ts b/src/index.ts
index f430559..3aabd0e 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -36,6 +36,7 @@ const controls = {
   ArrowUp: () => cameraController.adjustOffset('up'),
   ArrowDown: () => cameraController.adjustOffset('down'),
   o: () => cameraController.round(),
+  p: () => cameraController.clip(),
   r: () => cameraController.reset(),
   '=': () => cameraController.zoom('in'),
   '-': () => cameraController.zoom('out'),

From 676f3d3be889c6322d18da458bf90db676674474 Mon Sep 17 00:00:00 2001
From: Douglas Moura <douglas.ademoura@gmail.com>
Date: Wed, 11 Aug 2021 16:16:25 -0300
Subject: [PATCH 11/14] fix: avoid breaking change by renaming a setting

---
 electron/store.ts | 4 ++--
 src/cam.ts        | 4 ++--
 src/config.ts     | 2 +-
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/electron/store.ts b/electron/store.ts
index 916ba48..ed5321e 100644
--- a/electron/store.ts
+++ b/electron/store.ts
@@ -77,7 +77,7 @@ const userPreferencesSchema: Schema<unknown> = {
   zoom: {
     type: JSONSchemaType.Number,
   },
-  borderColor: {
+  borderColorCss: {
     type: JSONSchemaType.String,
   },
   showBorder: {
@@ -119,7 +119,7 @@ export const userPreferences = new Store({
     clipPath: '',
     flipHorizontal: false,
     zoom: 1.1,
-    borderColor: 'linear-gradient(to right, #988BC7, #FF79C6)',
+    borderColorCss: 'linear-gradient(to right, #988BC7, #FF79C6)',
     showBorder: true,
     filter: '',
   },
diff --git a/src/cam.ts b/src/cam.ts
index 3e4b257..6c241db 100644
--- a/src/cam.ts
+++ b/src/cam.ts
@@ -93,8 +93,8 @@ export class CameraController {
   }
 
   private applyBorder() {
-    if (config.borderColor) {
-      this.root.style.setProperty('--border-color', config.borderColor)
+    if (config.borderColorCss) {
+      this.root.style.setProperty('--border-color', config.borderColorCss)
     }
 
     if (config.showBorder) {
diff --git a/src/config.ts b/src/config.ts
index 06cc0d4..c8dedb8 100644
--- a/src/config.ts
+++ b/src/config.ts
@@ -9,7 +9,7 @@ const config = {
   scale: Number(userPreferences.zoom ?? 1),
   horizontal: Number(userPreferences.anchor.x ?? 0),
   vertical: Number(userPreferences.anchor.y ?? 0),
-  borderColor: userPreferences.borderColor,
+  borderColorCss: userPreferences.borderColorCss,
   showBorder: userPreferences.showBorder,
   clipPath: userPreferences.clipPath,
   filter: userPreferences.filter,

From a646f0fc7025191e3094ee92ed13759d2af7d688 Mon Sep 17 00:00:00 2001
From: Douglas Moura <douglas.ademoura@gmail.com>
Date: Wed, 11 Aug 2021 16:19:29 -0300
Subject: [PATCH 12/14] chore: remove filter setting

---
 electron/store.ts | 4 ----
 src/cam.ts        | 7 -------
 src/config.ts     | 1 -
 3 files changed, 12 deletions(-)

diff --git a/electron/store.ts b/electron/store.ts
index ed5321e..b3172e7 100644
--- a/electron/store.ts
+++ b/electron/store.ts
@@ -83,9 +83,6 @@ const userPreferencesSchema: Schema<unknown> = {
   showBorder: {
     type: JSONSchemaType.Boolean,
   },
-  filter: {
-    type: JSONSchemaType.String,
-  },
 }
 
 export const userPreferences = new Store({
@@ -121,7 +118,6 @@ export const userPreferences = new Store({
     zoom: 1.1,
     borderColorCss: 'linear-gradient(to right, #988BC7, #FF79C6)',
     showBorder: true,
-    filter: '',
   },
 })
 
diff --git a/src/cam.ts b/src/cam.ts
index 6c241db..9eb00f6 100644
--- a/src/cam.ts
+++ b/src/cam.ts
@@ -117,16 +117,9 @@ export class CameraController {
     }
   }
 
-  private applyFilter() {
-    if (config.filter) {
-      this.videoElement.style.setProperty('filter', config.filter)
-    }
-  }
-
   private render() {
     this.applyPositioning()
     this.applyBorder()
     this.applyShape()
-    this.applyFilter()
   }
 }
diff --git a/src/config.ts b/src/config.ts
index c8dedb8..5b74800 100644
--- a/src/config.ts
+++ b/src/config.ts
@@ -12,7 +12,6 @@ const config = {
   borderColorCss: userPreferences.borderColorCss,
   showBorder: userPreferences.showBorder,
   clipPath: userPreferences.clipPath,
-  filter: userPreferences.filter,
 }
 
 export { config }

From 2a5cd9e8c54e7e5531093b41a1fc177ffd8d2451 Mon Sep 17 00:00:00 2001
From: Douglas Moura <douglas.ademoura@gmail.com>
Date: Wed, 11 Aug 2021 16:33:56 -0300
Subject: [PATCH 13/14] docs: update table of default shortcuts and give
 instructions on how to use custom shapes

---
 README.md | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/README.md b/README.md
index de8cd45..32dae42 100644
--- a/README.md
+++ b/README.md
@@ -69,6 +69,10 @@ After running for the first time you can access the app settings through the tra
       <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>
       <td>r</td>
       <td>Reset zoom (window must be focused)</td>
@@ -104,8 +108,15 @@ 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.
 
+## 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`.
+
 ## Author
 
 👤 **Mayk Brito**

From 09f155e341ad2a41d0a40910c0e3262ee3e26712 Mon Sep 17 00:00:00 2001
From: Douglas Moura <douglas.ademoura@gmail.com>
Date: Thu, 12 Aug 2021 04:57:19 -0300
Subject: [PATCH 14/14] chore: remove unused class

---
 public/index.html | 17 ++++++++++-------
 src/cam.ts        |  1 -
 2 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/public/index.html b/public/index.html
index b2d9a81..0c2013d 100644
--- a/public/index.html
+++ b/public/index.html
@@ -1,5 +1,6 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -12,7 +13,8 @@
       --clip-path: inherit;
     }
 
-    body, #video-grid {
+    body,
+    #video-grid {
       -webkit-app-region: drag;
     }
 
@@ -32,10 +34,6 @@
       background: #121214;
     }
 
-    .flip {
-      transform: rotateY(180deg);
-    }
-
     #wrapper {
       width: 100vw;
       height: 100vh;
@@ -55,7 +53,10 @@
     #wrapper:before {
       content: '';
       position: absolute;
-      top: 0; right: 0; bottom: 0; left: 0;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
       z-index: -1;
       margin: -5px;
       border-radius: inherit;
@@ -93,6 +94,7 @@
     const global = globalThis;
   </script>
 </head>
+
 <body>
   <div id="wrapper">
     <div class="video-wrapper">
@@ -100,4 +102,5 @@
     </div>
   </div>
 </body>
-</html>
+
+</html>
\ No newline at end of file
diff --git a/src/cam.ts b/src/cam.ts
index 9eb00f6..edd2423 100644
--- a/src/cam.ts
+++ b/src/cam.ts
@@ -88,7 +88,6 @@ export class CameraController {
 
     if (this.isFlipped) {
       this.videoElement.style.transform += 'rotateY(180deg)'
-      this.videoElement.classList.add('flip')
     }
   }