@@ -121,9 +121,11 @@ const TimerDisplay: React.FC<{ startTime: number; isPaused: boolean }> = ({
121121 return < div className = "timer-text" > { display } </ div > ;
122122} ;
123123
124+ const NUM_BARS = 13 ;
125+
124126const AudioBars : React . FC = ( ) => {
125127 const barsRef = useRef < HTMLDivElement > ( null ) ;
126- const smoothedRef = useRef < number [ ] > ( Array ( 16 ) . fill ( 0 ) ) ;
128+ const smoothedRef = useRef < number [ ] > ( Array ( 25 ) . fill ( 0 ) ) ;
127129
128130 useEffect ( ( ) => {
129131 let unlisten : ( ( ) => void ) | null = null ;
@@ -138,11 +140,14 @@ const AudioBars: React.FC = () => {
138140
139141 if ( barsRef . current ) {
140142 const bars = barsRef . current . children ;
141- for ( let i = 0 ; i < bars . length ; i ++ ) {
142- const v = smoothed [ i ] || 0 ;
143+ const half = Math . ceil ( NUM_BARS / 2 ) ;
144+ for ( let i = 0 ; i < NUM_BARS ; i ++ ) {
145+ // Mirror: map bar index to bucket index (center = highest bucket)
146+ const bucketIdx = i < half ? i : NUM_BARS - 1 - i ;
147+ const v = smoothed [ bucketIdx ] || 0 ;
143148 const el = bars [ i ] as HTMLElement ;
144- el . style . height = `${ Math . min ( 20 , 3 + Math . pow ( v , 0.6 ) * 17 ) } px` ;
145- el . style . opacity = `${ Math . max ( 0.25 , v * 1.4 ) } ` ;
149+ el . style . height = `${ Math . min ( 24 , 2 + Math . pow ( v , 0.6 ) * 22 ) } px` ;
150+ el . style . opacity = `${ Math . max ( 0.2 , v * 1.4 ) } ` ;
146151 }
147152 }
148153 } ) ;
@@ -155,7 +160,7 @@ const AudioBars: React.FC = () => {
155160
156161 return (
157162 < div className = "bars-container" ref = { barsRef } >
158- { Array . from ( { length : 9 } , ( _ , i ) => (
163+ { Array . from ( { length : NUM_BARS } , ( _ , i ) => (
159164 < div key = { i } className = "bar" />
160165 ) ) }
161166 </ div >
0 commit comments