add some styles

YeonV · Nov 7, 2023 · b2f7da2 · b2f7da2
1 parent ddb910c
commit b2f7da2
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 15 deletions.
diff --git a/src/renderer/src/Manager.tsx b/src/renderer/src/Manager.tsx
@@ -25,11 +25,11 @@ import {
 import {
   ArrowDownward,
   ArrowUpward,
-  Cast,
   ChevronLeft,
   ChevronRight,
   Close,
   Equalizer,
+  PlayArrow,
   Refresh,
   Settings,
   Stop
@@ -395,6 +395,15 @@ const Manager = () => {
     }
   }, [])
 
+  useEffect(() => {
+    if (is2D) {
+      setSizeW(device.seg?.[0]?.stop - device.seg?.[0]?.start)
+      setSizeH(device.seg?.[0]?.stopY - device.seg?.[0]?.startY)
+      setZoom(Math.ceil(80 / Math.min(sizeW, sizeH)) )
+    }
+    device.seg?.[0]?.startY
+  },[is2D])
+
   return (
     <>
       <Drawer
@@ -778,14 +787,14 @@ const Manager = () => {
                       <Typography marginTop={3} marginBottom={2}>
                         2D Matrix detected
                       </Typography>
-                      <Stack direction='row' spacing={2}>
+                      <Stack direction='row' spacing={1} paddingRight={1}>
                         <TextField
                           select
                           variant='outlined'
                           label='Video Input'
                           // disabled={playing}
                           value={videoDevice || 'none'}
-                          style={{ width: '100%' }}
+                          sx={{ width: '100%', height: '60px', '& .MuiInputBase-root': { height: '60px' } }}
                           onChange={(e) => {
                             setVideoDevice(e.target.value as 'screen' | 'camera' | 'none')
                           }}
@@ -800,7 +809,7 @@ const Manager = () => {
                           label='Width'
                           size='small'
                           type='number'
-                          style={{ width: 120, margin: 10 }}
+                          sx={{ width: '120px', height: '60px', '& .MuiInputBase-root': { height: '60px' } }}
                           variant='outlined'
                           defaultValue={sizeW}
                           onBlur={(e) => {
@@ -813,7 +822,7 @@ const Manager = () => {
                           label='Height'
                           size='small'
                           type='number'
-                          style={{ width: 120, margin: 10 }}
+                          sx={{ width: '120px', height: '60px', '& .MuiInputBase-root': { height: '60px' } }}
                           variant='outlined'
                           defaultValue={sizeH}
                           onBlur={(e) => {
@@ -826,7 +835,7 @@ const Manager = () => {
                           label='Zoom'
                           size='small'
                           type='number'
-                          style={{ width: 120, margin: 10, marginBottom: 10 }}
+                          sx={{ width: '120px', height: '60px', '& .MuiInputBase-root': { height: '60px' } }}
                           variant='outlined'
                           value={zoom}
                           onChange={(e) => {
@@ -835,13 +844,11 @@ const Manager = () => {
                             }
                           }}
                         />
-                      </Stack>
-                      <Stack direction='row' spacing={2}>
-                        <Button startIcon={<Cast />} onClick={startCapture}>
-                          Share
-                        </Button>
-                        <Button startIcon={<Stop />} onClick={stopCapture}>
-                          Stop
+                        <Button onClick={startCapture} variant='outlined'>
+                          <PlayArrow />
+                        </Button>                        
+                        <Button onClick={stopCapture} variant='outlined'>
+                          <Stop />
                         </Button>
                       </Stack>
                       <video autoPlay muted hidden width={sizeW + 'px'} height={sizeH + 'px'} ref={videoRef}></video>
@@ -879,6 +886,8 @@ const Manager = () => {
         </div>
 
         <AudioDataContainer
+          is2D={is2D}
+          ctx={ctx}
           selectedPixels={selectedPixels}
           audioDeviceId={audioDevice}
           videoDevice={videoDevice}

diff --git a/src/renderer/src/components/AudioContainer.tsx b/src/renderer/src/components/AudioContainer.tsx
@@ -18,7 +18,9 @@ const AudioDataContainer = ({
   drawerBottomHeight,
   videoDevice = 'none',
   theStream,
-  selectedPixels
+  selectedPixels,
+  is2D = false,
+  ctx
 }: any) => {
   const [frequencyBandArray] = useState([...Array(bandCount).keys()])
   const audioData = useRef<AnalyserNode | null>(null)
@@ -139,6 +141,8 @@ const AudioDataContainer = ({
       }}
     >
       <Visualizer
+        is2D={is2D}
+        ctx={ctx}
         selectedPixels={selectedPixels}
         fft={fft}
         bandCount={bandCount}

diff --git a/src/renderer/src/components/Visualizer.tsx b/src/renderer/src/components/Visualizer.tsx
@@ -72,7 +72,9 @@ export default function Visualizer({
   audioContext,
   fft,
   bandCount,
-  selectedPixels
+  selectedPixels,
+  is2D,
+  ctx
 }: any) {
   const classes = useVisualizerStyles()
   const theme = useTheme()
@@ -209,6 +211,14 @@ export default function Visualizer({
                 flipped ? [...ledDataPrefix, ...ledData.reverse().flat()] : [...ledDataPrefix, ...ledData.flat()]
               ])
           }
+        } else {
+          if (is2D) {
+            for (let i = 0; i < frequencyBandArray.length; i++) {
+              const num = frequencyBandArray[i]              
+              ctx.fillStyle = `rgb(${color.r},${color.g},${color.b})`
+              ctx.fillRect(i, 8, 1, amplitudeValues.current?.[num] ? -amplitudeValues.current?.[num] / 20 : 1)
+            }
+          }
         }
       }
     }