maykbrito · diego3g · Jan 16, 2022 · Jan 18, 2022
diff --git a/babel.config.js b/babel.config.js
@@ -1,4 +1,13 @@
 module.exports = {
-  presets: ['@babel/preset-env', '@babel/preset-typescript'],
+  presets: [
+    '@babel/preset-env',
+    '@babel/preset-typescript',
+    [
+      '@babel/preset-react',
+      {
+        runtime: 'automatic',
+      },
+    ],
+  ],
   plugins: ['@babel/transform-runtime'],
 }
diff --git a/electron/main.ts b/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 { createPreferencesWindow } from './preferences'
 
 const isLinux = process.platform === 'linux'
 const isMac = process.platform === 'darwin'
@@ -129,9 +130,9 @@ async function createTrayContextMenu() {
       enabled: false,
     },
     {
-      label: 'Settings',
+      label: 'Preferences',
       click() {
-        return userPreferences.openInEditor()
+        createPreferencesWindow()
       },
     },
     {

diff --git a/electron/preferences/index.ts b/electron/preferences/index.ts
@@ -0,0 +1,15 @@
+import { BrowserWindow } from 'electron'
+
+declare const PREFERENCES_WINDOW_WEBPACK_ENTRY: string
+
+export async function createPreferencesWindow() {
+  const win = new BrowserWindow({
+    width: 600,
+    minWidth: 400,
+    maxWidth: 600,
+    frame: true,
+    maximizable: false,
+  })
+
+  win.loadURL(PREFERENCES_WINDOW_WEBPACK_ENTRY)
+}
diff --git a/index.html b/index.html
diff --git a/package.json b/package.json
@@ -22,6 +22,7 @@
     "@babel/core": "^7.14.3",
     "@babel/plugin-transform-runtime": "^7.14.3",
     "@babel/preset-env": "^7.14.2",
+    "@babel/preset-react": "^7.16.7",
     "@babel/preset-typescript": "^7.13.0",
     "@electron-forge/cli": "^6.0.0-beta.57",
     "@electron-forge/maker-deb": "^6.0.0-beta.57",
@@ -32,6 +33,8 @@
     "@electron-forge/publisher-github": "^6.0.0-beta.57",
     "@marshallofsound/webpack-asset-relocator-loader": "^0.5.0",
     "@types/electron": "^1.6.10",
+    "@types/react": "^17.0.38",
+    "@types/react-dom": "^17.0.11",
     "@typescript-eslint/eslint-plugin": "^4.25.0",
     "@typescript-eslint/parser": "^4.25.0",
     "babel-loader": "^8.2.2",
@@ -50,11 +53,20 @@
     "wait-on": "^5.3.0"
   },
   "dependencies": {
+    "@radix-ui/colors": "^0.1.8",
+    "@radix-ui/react-separator": "^0.1.3",
+    "@radix-ui/react-slider": "^0.1.3",
+    "@radix-ui/react-tabs": "^0.1.4",
+    "@radix-ui/react-toggle": "^0.1.3",
+    "@radix-ui/react-toggle-group": "^0.1.4",
+    "@stitches/react": "^1.2.6",
     "ajv": "^8.5.0",
     "chokidar": "^3.5.1",
     "electron-squirrel-startup": "^1.0.0",
     "electron-store": "^8.0.0",
-    "json-schema-typed": "^7.0.3"
+    "json-schema-typed": "^7.0.3",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2"
   },
   "config": {
     "forge": {
@@ -76,11 +88,16 @@
               "entryPoints": [
                 {
                   "html": "./public/index.html",
-                  "js": "./src/index.ts",
+                  "js": "./src/main/index.ts",
                   "name": "main_window",
                   "preload": {
                     "js": "./electron/bridge.ts"
                   }
+                },
+                {
+                  "html": "./public/preferences.html",
+                  "js": "./src/preferences/index.ts",
+                  "name": "preferences_window"
                 }
               ]
             }

diff --git a/public/preferences.html b/public/preferences.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <link rel="preconnect" href="https://fonts.googleapis.com" />
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap" rel="stylesheet" />
+
+  <title>Preferences</title>
+</head>
+<body>
+  <div id="root"></div>
+</body>
+</html>
diff --git a/src/cam.ts → src/main/cam.ts b/src/cam.ts → src/main/cam.ts
diff --git a/src/config.ts → src/main/config.ts b/src/config.ts → src/main/config.ts
diff --git a/src/index.ts → src/main/index.ts b/src/index.ts → src/main/index.ts
diff --git a/src/preferences/app.tsx b/src/preferences/app.tsx
@@ -0,0 +1,11 @@
+import { render } from 'react-dom'
+import { Main } from './components/Main'
+import { applyGlobalCss } from './styles/global'
+
+function App() {
+  applyGlobalCss()
+
+  return <Main />
+}
+
+render(<App />, document.getElementById('root'))
diff --git a/src/preferences/components/Main/index.tsx b/src/preferences/components/Main/index.tsx
@@ -0,0 +1,24 @@
+import * as Tabs from '@radix-ui/react-tabs'
+import { Container, TabsList, TabTrigger, Separator } from './styles'
+
+import { Camera } from '../Tabs/Camera'
+
+export function Main() {
+  return (
+    <Container>
+      <h2>Preferences</h2>
+
+      <Tabs.Root defaultValue="camera">
+        <TabsList aria-label="Preferences tabs">
+          <TabTrigger value="camera">Camera</TabTrigger>
+          <TabTrigger value="appearance">Appearance</TabTrigger>
+        </TabsList>
+        <Separator />
+        <Tabs.Content value="camera">
+          <Camera />
+        </Tabs.Content>
+        <Tabs.Content value="appearance">3</Tabs.Content>
+      </Tabs.Root>
+    </Container>
+  )
+}
diff --git a/src/preferences/components/Main/styles.ts b/src/preferences/components/Main/styles.ts
@@ -0,0 +1,42 @@
+import * as Tabs from '@radix-ui/react-tabs'
+import * as RadixSeparator from '@radix-ui/react-separator'
+import { styled } from '../../styles'
+
+export const Container = styled('main', {
+  padding: '$6',
+})
+
+export const TabsList = styled(Tabs.TabsList, {
+  display: 'flex',
+  borderRadius: '$xs',
+  overflow: 'hidden',
+
+  padding: '$1',
+
+  backgroundColor: '$gray3',
+  border: 0,
+
+  marginY: '$2',
+})
+
+export const TabTrigger = styled(Tabs.Trigger, {
+  flex: 1,
+  padding: '$2',
+  color: '$white',
+  backgroundColor: 'transparent',
+  border: 0,
+  borderRadius: '$xs',
+  fontWeight: 'bold',
+  fontSize: '$sm',
+
+  '&[data-state=active]': {
+    backgroundColor: '$purple9',
+  },
+})
+
+export const Separator = styled(RadixSeparator.Root, {
+  backgroundColor: '$gray5',
+  marginY: '$4',
+  height: 1,
+  width: '100%',
+})
diff --git a/src/preferences/components/Tabs/Camera/index.tsx b/src/preferences/components/Tabs/Camera/index.tsx
@@ -0,0 +1,69 @@
+import { useState } from 'react'
+import {
+  Container,
+  FieldLabel,
+  ToggleItem,
+  ToggleRoot,
+  Slider,
+  SliderTrack,
+  SliderRange,
+  SliderThumb,
+  Toggle,
+} from './styles'
+
+export function Camera() {
+  const [cameraResolution, setCameraResolution] = useState('1080p')
+  const [cameraFramerate, setCameraFramerate] = useState('60fps')
+
+  function handleCameraResolutionChange(value: string) {
+    if (value) {
+      setCameraResolution(value)
+    }
+  }
+
+  function handleCameraFramerateChange(value: string) {
+    if (value) {
+      setCameraFramerate(value)
+    }
+  }
+
+  return (
+    <Container>
+      <FieldLabel css={{ marginTop: '$4' }}>Resolution</FieldLabel>
+
+      <ToggleRoot
+        type="single"
+        value={cameraResolution}
+        onValueChange={handleCameraResolutionChange}
+      >
+        <ToggleItem value="480p">480p</ToggleItem>
+        <ToggleItem value="720p">720p</ToggleItem>
+        <ToggleItem value="1080p">1080p</ToggleItem>
+      </ToggleRoot>
+
+      <FieldLabel css={{ marginTop: '$4' }}>Framerate</FieldLabel>
+
+      <ToggleRoot
+        type="single"
+        value={cameraFramerate}
+        onValueChange={handleCameraFramerateChange}
+      >
+        <ToggleItem value="30fps">30 FPS</ToggleItem>
+        <ToggleItem value="60fps">60 FPS</ToggleItem>
+      </ToggleRoot>
+
+      <FieldLabel css={{ marginTop: '$4' }}>Zoom</FieldLabel>
+
+      <Slider aria-label="Zoom" defaultValue={[1]} min={1} max={2} step={0.1}>
+        <SliderTrack>
+          <SliderRange />
+        </SliderTrack>
+        <SliderThumb />
+      </Slider>
+
+      <FieldLabel css={{ marginTop: '$4' }}></FieldLabel>
+
+      <Toggle>Flip horizontally</Toggle>
+    </Container>
+  )
+}