feat: Introduce border color to the configuration

This commit changes the border color to use a css variable that can be overriden by the configuration file
maykbrito · Jun 7, 2021 · 4755bb9 · 4755bb9
1 parent e3daa8b
commit 4755bb9
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 5 deletions.
diff --git a/electron/store.ts b/electron/store.ts
@@ -74,6 +74,9 @@ const userPreferencesSchema: Schema<unknown> = {
   zoom: {
     type: JSONSchemaType.Number,
   },
+  borderColorCss: {
+    type: JSONSchemaType.String,
+  },
 }
 
 export const userPreferences = new Store({
@@ -106,6 +109,7 @@ export const userPreferences = new Store({
     rounded: true,
     flipHorizontal: false,
     zoom: 1.1,
+    borderColorCss: 'linear-gradient(to right, #988BC7, #FF79C6)',
   },
 })
 

diff --git a/public/index.html b/public/index.html
@@ -7,6 +7,10 @@
 
   <title>Mini Video Me</title>
   <style>
+    :root {
+      --border-color: linear-gradient(to right, #988BC7, #FF79C6);
+    }
+
     body, #video-grid {
       -webkit-app-region: drag;
     }
@@ -27,8 +31,8 @@
       pointer-events: none;
       background: #121214;
     }
-    
-    .flip { 
+
+    .flip {
       transform: rotateY(180deg);
     }
 
@@ -57,7 +61,7 @@
       z-index: -1;
       margin: -5px;
       border-radius: inherit;
-      background: linear-gradient(to right, #988BC7, #FF79C6);
+      background: var(--border-color);
     }
 
     .video-wrapper {
@@ -72,7 +76,7 @@
     #wrapper.rounded {
       border-radius: 50%;
       /* fix border-radius on Mac Mojave */
-      height: calc(100vw - 1px); 
+      height: calc(100vw - 1px);
     }
 
     #wrapper.rounded .video-wrapper {
@@ -82,7 +86,7 @@
 
   <script>
     const global = globalThis;
-  </script> 
+  </script>
 </head>
 <body>
   <div id="wrapper">

diff --git a/src/cam.ts b/src/cam.ts
@@ -11,10 +11,12 @@ export class CameraController {
   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.videoElement = document.getElementById('video') as HTMLVideoElement
+    this.root = document.querySelector(':root') as HTMLElement
 
     this.isFlipped = config.flipHorizontal
     this.isRounded = config.rounded
@@ -84,5 +86,9 @@ export class CameraController {
     this.videoElement.style.transform = transform.join(' ')
     this.videoElement.className = classList.join(' ')
     this.videoWrapper.className = this.isRounded ? 'rounded' : ''
+
+    if (config.borderColorCss) {
+      this.root.style.setProperty('--border-color', config.borderColorCss)
+    }
   }
 }
diff --git a/src/config.ts b/src/config.ts
@@ -9,6 +9,7 @@ const config = {
   scale: Number(userPreferences.zoom ?? 1),
   horizontal: Number(userPreferences.anchor.x ?? 0),
   vertical: Number(userPreferences.anchor.y ?? 0),
+  borderColorCss: userPreferences.borderColorCss,
 }
 
 export { config }