From 142029fdad763fdcc2d0a6cf1b9619f7df911001 Mon Sep 17 00:00:00 2001
From: imaimai17468 <tosiki_801_life@outlook.jp>
Date: Tue, 22 Aug 2023 08:16:18 +0900
Subject: [PATCH] feat: add color props
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

propsから背景色とバーの色を動的に変えられるようにする
---
 .../AudioVisualizer.module.css                |  8 -------
 .../AudioVisualizer.stories.tsx               | 22 ++++++++++++++-----
 .../AudioVisualizer/AudioVisualizer.tsx       | 13 +++++++----
 .../AudioVisualizer/AudioVisualizer.types.ts  |  4 ++++
 4 files changed, 29 insertions(+), 18 deletions(-)
 create mode 100644 src/components/AudioVisualizer/AudioVisualizer.types.ts

diff --git a/src/components/AudioVisualizer/AudioVisualizer.module.css b/src/components/AudioVisualizer/AudioVisualizer.module.css
index c84a9c3..62a3d8a 100644
--- a/src/components/AudioVisualizer/AudioVisualizer.module.css
+++ b/src/components/AudioVisualizer/AudioVisualizer.module.css
@@ -6,17 +6,9 @@
 .story-container {
   width: 500px;
   height: 100px;
-  background-color: #fff;
-  padding: 5px;
-  border: 1px solid #ccc;
-  border-radius: 5px;
 }
 
 .story-container-full {
   width: 100%;
   height: 100px;
-  background-color: #fff;
-  padding: 5px;
-  border: 1px solid #ccc;
-  border-radius: 5px;
 }
diff --git a/src/components/AudioVisualizer/AudioVisualizer.stories.tsx b/src/components/AudioVisualizer/AudioVisualizer.stories.tsx
index 5ea5142..960d9f4 100644
--- a/src/components/AudioVisualizer/AudioVisualizer.stories.tsx
+++ b/src/components/AudioVisualizer/AudioVisualizer.stories.tsx
@@ -7,25 +7,35 @@ const meta: Meta<typeof AudioVisualizer> = {
   title: 'common/AudioVisualizer',
   component: AudioVisualizer,
   tags: ['autodocs'],
-  argTypes: {},
+  argTypes: {
+    bgColor: {
+      control: 'color',
+    },
+    barColor: {
+      control: 'color',
+    },
+  }
 }
 export default meta
 type Story = StoryObj<typeof AudioVisualizer>
 
 export const Default: Story = {
-  args: {},
-  render: () => (
+  args: {
+    bgColor: '#fff',
+    barColor: '#000'
+  },
+  render: ({bgColor, barColor}) => (
     <div className={styles['story-container-full']}>
-      <AudioVisualizer />
+      <AudioVisualizer bgColor={bgColor} barColor={barColor} />
     </div>
   ),
 }
 
 export const FixedWidth: Story = {
   args: {},
-  render: () => (
+  render: ({ bgColor, barColor }) => (
     <div className={styles['story-container']}>
-      <AudioVisualizer />
+      <AudioVisualizer bgColor={bgColor} barColor={barColor} />
     </div>
   ),
 }
diff --git a/src/components/AudioVisualizer/AudioVisualizer.tsx b/src/components/AudioVisualizer/AudioVisualizer.tsx
index 7dffc15..ce7a03e 100644
--- a/src/components/AudioVisualizer/AudioVisualizer.tsx
+++ b/src/components/AudioVisualizer/AudioVisualizer.tsx
@@ -1,7 +1,11 @@
 import React, { useEffect, useRef } from 'react'
 import styles from './AudioVisualizer.module.css'
+import { AudioVisualizerProps } from './AudioVisualizer.types'
 
-const AudioVisualizer = () => {
+const AudioVisualizer: React.FC<AudioVisualizerProps> = ({
+  bgColor = '#fff',
+  barColor = '#000'
+}) => {
   const containerRef = useRef<HTMLDivElement>(null)
   const canvasRef = useRef<HTMLCanvasElement>(null)
 
@@ -33,7 +37,7 @@ const AudioVisualizer = () => {
         draw(analyser)
       })
       .catch((err) => console.log('The following error occurred: ' + err))
-  }, [])
+  }, [bgColor, barColor])
 
   const draw = (analyser: AnalyserNode) => {
     if (canvasRef.current) {
@@ -46,7 +50,8 @@ const AudioVisualizer = () => {
         const width = canvas.width
         const height = canvas.height
 
-        ctx.clearRect(0, 0, width, height)
+        ctx.fillStyle = bgColor
+        ctx.fillRect(0, 0, width, height)
 
         const barWidth = width / frequencyData.length
         let barHeight
@@ -55,7 +60,7 @@ const AudioVisualizer = () => {
         for (let i = 0; i < frequencyData.length; i++) {
           barHeight = (frequencyData[i] / 255) * height
 
-          ctx.fillStyle = '#233E71'
+          ctx.fillStyle = barColor
           ctx.fillRect(x, height - barHeight, barWidth, barHeight)
 
           x += barWidth
diff --git a/src/components/AudioVisualizer/AudioVisualizer.types.ts b/src/components/AudioVisualizer/AudioVisualizer.types.ts
new file mode 100644
index 0000000..e800db1
--- /dev/null
+++ b/src/components/AudioVisualizer/AudioVisualizer.types.ts
@@ -0,0 +1,4 @@
+export type AudioVisualizerProps = {
+  bgColor?: string;
+  barColor?: string;
+}