From 2a923e737bd725ced4bebff1ce8707bce0b58771 Mon Sep 17 00:00:00 2001
From: imaimai17468 <tosiki_801_life@outlook.jp>
Date: Wed, 23 Aug 2023 23:50:50 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=A3=92=E3=81=AE=E4=BD=8D=E7=BD=AE?=
 =?UTF-8?q?=E3=82=92props=E3=81=A7=E6=8C=87=E5=AE=9A=E3=81=A7=E3=81=8D?=
 =?UTF-8?q?=E3=82=8B=E3=82=88=E3=81=86=E3=81=AB=E3=81=99=E3=82=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../AudioVisualizer.stories.tsx               | 40 +++++++------------
 .../AudioVisualizer/AudioVisualizer.tsx       | 11 ++++-
 .../AudioVisualizer/AudioVisualizer.types.ts  |  1 +
 3 files changed, 24 insertions(+), 28 deletions(-)

diff --git a/src/components/AudioVisualizer/AudioVisualizer.stories.tsx b/src/components/AudioVisualizer/AudioVisualizer.stories.tsx
index a689dcf..b718299 100644
--- a/src/components/AudioVisualizer/AudioVisualizer.stories.tsx
+++ b/src/components/AudioVisualizer/AudioVisualizer.stories.tsx
@@ -1,7 +1,5 @@
-import React from 'react'
 import { Meta, StoryObj } from '@storybook/react'
 import AudioVisualizer from './AudioVisualizer'
-import styles from './AudioVisualizer.module.css'
 
 const meta: Meta<typeof AudioVisualizer> = {
   title: 'common/AudioVisualizer',
@@ -9,46 +7,36 @@ const meta: Meta<typeof AudioVisualizer> = {
   tags: ['autodocs'],
   argTypes: {
     bgColor: {
+      description: 'Background color of the container',
       control: 'color',
     },
     barColor: {
+      description: 'Color of the bars',
       control: 'color',
     },
     width: {
+      description: 'Width of the container',
       control: 'text',
     },
     height: {
+      description: 'Height of the container',
       control: 'text',
     },
-  }
+    barAlign: {
+      description: 'Align the bars to the top, center, or bottom of the container (default: bottom)',
+      defaultValue: 'bottom',
+      options: ['top', 'center', 'bottom'],
+      control: { type: 'radio' },
+    },
+  },
 }
 export default meta
 type Story = StoryObj<typeof AudioVisualizer>
 
 export const Default: Story = {
-  args: {},
-  render: () => (
-    <div className={styles['story-container-full']}>
-      <AudioVisualizer />
-    </div>
-  ),
-}
-
-export const FixedWidth: Story = {
-  args: {
-    width: '500px',
-    height: '200px',
-  },
-}
-
-export const ChangeColor: Story = {
   args: {
-    bgColor: '#eeeeee',
-    barColor: '#aaeeaa',
+    height: '100px',
+    width: '100%',
+    barAlign: 'bottom',
   },
-  render: ({ bgColor, barColor }) => (
-    <div className={styles['story-container-full']}>
-      <AudioVisualizer bgColor={bgColor} barColor={barColor} />
-    </div>
-  ),
 }
diff --git a/src/components/AudioVisualizer/AudioVisualizer.tsx b/src/components/AudioVisualizer/AudioVisualizer.tsx
index 49cefb0..4b1f978 100644
--- a/src/components/AudioVisualizer/AudioVisualizer.tsx
+++ b/src/components/AudioVisualizer/AudioVisualizer.tsx
@@ -7,6 +7,7 @@ const AudioVisualizer: React.FC<AudioVisualizerProps> = ({
   barColor = '#000',
   width = '100%',
   height = '100%',
+  barAlign = 'bottom',
 }) => {
   const containerRef = useRef<HTMLDivElement>(null)
   const canvasRef = useRef<HTMLCanvasElement>(null)
@@ -39,7 +40,7 @@ const AudioVisualizer: React.FC<AudioVisualizerProps> = ({
         draw(analyser)
       })
       .catch((err) => console.log('The following error occurred: ' + err))
-  }, [bgColor, barColor])
+  }, [bgColor, barColor, barAlign])
 
   const draw = (analyser: AnalyserNode) => {
     if (canvasRef.current) {
@@ -63,7 +64,13 @@ const AudioVisualizer: React.FC<AudioVisualizerProps> = ({
           barHeight = (frequencyData[i] / 255) * height
 
           ctx.fillStyle = barColor
-          ctx.fillRect(x, height - barHeight, barWidth, barHeight)
+          if (barAlign === 'bottom') {
+            ctx.fillRect(x, height - barHeight, barWidth, barHeight)
+          } else if (barAlign === 'top') {
+            ctx.fillRect(x, 0, barWidth, barHeight)
+          } else {
+            ctx.fillRect(x, height / 2 - barHeight / 2, barWidth, barHeight)
+          }
 
           x += barWidth
         }
diff --git a/src/components/AudioVisualizer/AudioVisualizer.types.ts b/src/components/AudioVisualizer/AudioVisualizer.types.ts
index d477f94..d078097 100644
--- a/src/components/AudioVisualizer/AudioVisualizer.types.ts
+++ b/src/components/AudioVisualizer/AudioVisualizer.types.ts
@@ -3,4 +3,5 @@ export type AudioVisualizerProps = {
   barColor?: string;
   width?: string;
   height?: string;
+  barAlign?: 'top' | 'center' | 'bottom';
 }