Allow the user to use custom shapes and enable/disable the border

.gitignore

@@ -3,4 +3,5 @@ packages
 dist
 .DS_Store
 out/
-.webpack
+.webpack
+.idea

electron/store.ts

@@ -68,13 +68,22 @@ const userPreferencesSchema: Schema<unknown> = {
   rounded: {
     type: JSONSchemaType.Boolean,
   },
+  clipPath: {
+    type: JSONSchemaType.String,
+  },
   flipHorizontal: {
     type: JSONSchemaType.Boolean,
   },
   zoom: {
     type: JSONSchemaType.Number,
   },
-  borderColorCss: {
+  borderColor: {
+    type: JSONSchemaType.String,
+  },
+  showBorder: {
+    type: JSONSchemaType.Boolean,
+  },
+  filter: {
     type: JSONSchemaType.String,
   },
 }
@@ -107,9 +116,12 @@ 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)',
+    borderColor: 'linear-gradient(to right, #988BC7, #FF79C6)',
+    showBorder: true,
+    filter: '',
   },
 })
 

public/index.html

@@ -9,6 +9,7 @@
   <style>
     :root {
       --border-color: linear-gradient(to right, #988BC7, #FF79C6);
+      --clip-path: inherit;
     }
 
     body, #video-grid {
@@ -27,7 +28,6 @@
 
     video {
       height: 100vh;
-      border-radius: 9999px;
       pointer-events: none;
       background: #121214;
     }
@@ -50,8 +50,6 @@
       color: #FFF;
       background: transparent;
       background-clip: padding-box;
-      border: solid 5px transparent;
-      border-radius: 16px;
     }
 
     #wrapper:before {
@@ -61,27 +59,39 @@
       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.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 */
       height: calc(100vw - 1px);
     }
 
-    #wrapper.rounded .video-wrapper {
+    #wrapper.rounded .video-wrapper,
+    #wrapper.rounded video {
       border-radius: 9999px;
     }
+
+    #wrapper.has-clip-path:before,
+    #wrapper.has-clip-path .video-wrapper {
+      clip-path: var(--clip-path);
+    }
   </style>
 
   <script>
@@ -95,4 +105,4 @@
     </div>
   </div>
 </body>
-</html>
+</html>

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,48 @@ 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')
+    }
+  }
+
+  private applyBorder() {
+    if (config.borderColor) {
+      this.root.style.setProperty('--border-color', config.borderColor)
+    }
+
+    if (config.showBorder) {
+      this.wrapperElement.classList.add('has-border')
+    }
+  }
+
+  private applyShape() {
+    if (!config.clipPath && this.isRounded) {
+      this.wrapperElement.classList.add('rounded')
+    } else {
+      this.wrapperElement.classList.remove('rounded')
     }
 
-    this.videoElement.style.transform = transform.join(' ')
-    this.videoElement.className = classList.join(' ')
-    this.videoWrapper.className = this.isRounded ? 'rounded' : ''
+    if (config.clipPath) {
+      this.wrapperElement.classList.add('has-clip-path')
+      this.root.style.setProperty('--clip-path', config.clipPath)
+    }
+  }
 
-    if (config.borderColorCss) {
-      this.root.style.setProperty('--border-color', config.borderColorCss)
+  private applyFilter() {
+    if (config.filter) {
+      this.videoElement.style.setProperty('filter', config.filter)
     }
   }
+
+  private render() {
+    this.applyPositioning()
+    this.applyBorder()
+    this.applyShape()
+    this.applyFilter()
+  }
 }

src/config.ts

@@ -9,7 +9,10 @@ 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,
 }
 
 export { config }