maykbrito · maykbrito · Aug 12, 2021 · Jun 10, 2021 · Jun 10, 2021 · Jun 10, 2021
diff --git a/.gitignore b/.gitignore
@@ -3,4 +3,5 @@ packages
 dist
 .DS_Store
 out/
-.webpack
+.webpack
+.idea
diff --git 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**

diff --git 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,
   },
@@ -77,6 +80,9 @@ const userPreferencesSchema: Schema<unknown> = {
   borderColorCss: {
     type: JSONSchemaType.String,
   },
+  showBorder: {
+    type: JSONSchemaType.Boolean,
+  },
 }
 
 export const userPreferences = new Store({
@@ -107,9 +113,11 @@ 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)',
+    showBorder: true,
   },
 })
 

diff --git 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">
@@ -9,9 +10,11 @@
   <style>
     :root {
       --border-color: linear-gradient(to right, #988BC7, #FF79C6);
+      --clip-path: inherit;
     }
 
-    body, #video-grid {
+    body,
+    #video-grid {
       -webkit-app-region: drag;
     }
 
@@ -27,15 +30,10 @@
 
     video {
       height: 100vh;
-      border-radius: 9999px;
       pointer-events: none;
       background: #121214;
     }
 
-    .flip {
-      transform: rotateY(180deg);
-    }
-
     #wrapper {
       width: 100vw;
       height: 100vh;
@@ -50,49 +48,59 @@
       color: #FFF;
       background: transparent;
       background-clip: padding-box;
-      border: solid 5px transparent;
-      border-radius: 16px;
     }
 
     #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;
-      background: var(--border-color);
     }
 
     .video-wrapper {
       overflow: hidden;
       display: flex;
       align-items: center;
       justify-content: center;
-      border-radius: 16px;
       background: transparent;
     }
 
-    #wrapper.rounded {
-      border-radius: 50%;
-      /* fix border-radius on Mac Mojave */
-      height: calc(100vw - 1px);
+    #wrapper.has-border {
+      border: solid 5px transparent;
     }
 
-    #wrapper.rounded .video-wrapper {
-      border-radius: 9999px;
+    #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>
     </div>
   </div>
 </body>
+
 </html>
diff --git a/src/cam.ts b/src/cam.ts
@@ -7,19 +7,21 @@ type ZoomType = 'in' | 'out'
 export class CameraController {
   public videoElement: HTMLVideoElement
 
-  private videoWrapper: HTMLDivElement
+  private wrapperElement: HTMLDivElement
   private isFlipped: boolean
   private isRounded: boolean
+  private isClipped: 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
 
     this.isFlipped = config.flipHorizontal
     this.isRounded = config.rounded
+    this.isClipped = !!config.clipPath
 
     this.position = {
       x: config.horizontal,
@@ -75,24 +77,48 @@ export class CameraController {
     this.render()
   }
 
-  private render() {
-    const transform: string[] = []
-    const classList: string[] = []
+  public clip() {
+    this.isClipped = !this.isClipped
 
-    transform.push(`translate(${this.position.x}%, ${this.position.y}%)`)
-    transform.push(`scale(${this.position.z})`)
+    this.render()
+  }
+
+  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.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')
+    } else {
+      this.wrapperElement.classList.remove('rounded')
+    }
+
+    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')
+    }
+  }
+
+  private render() {
+    this.applyPositioning()
+    this.applyBorder()
+    this.applyShape()
   }
 }
diff --git a/src/config.ts b/src/config.ts
@@ -10,6 +10,8 @@ const config = {
   horizontal: Number(userPreferences.anchor.x ?? 0),
   vertical: Number(userPreferences.anchor.y ?? 0),
   borderColorCss: userPreferences.borderColorCss,
+  showBorder: userPreferences.showBorder,
+  clipPath: userPreferences.clipPath,
 }
 
 export { config }
diff --git 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'),