Merge pull request #27 from SimformSolutionsPvtLtd/feature/UNT-T24855…

…_candle_height_and_current_progress_props

feat: UNT-T24855: added candleHeightScale and onCurrentProgressChange

README.md

@@ -129,12 +129,14 @@ You can check out the full example at [Example](./example/src/App.tsx).
 | path\* | - | ✅ | ❌ | string | Used for `static` type. It is the resource path of an audio source file. |
 | candleSpace | 2 | ✅ | ✅ | number | Space between two candlesticks of waveform |
 | candleWidth | 5 | ✅ | ✅ | number | Width of single candlestick of waveform |
+| candleHeightScale | 3 | ✅ | ✅ | number | Scaling height of candlestick of waveform | 
 | containerStyle | - | ✅ | ✅ | `StyleProp<ViewStyle>` | style of the container |
 | waveColor | #545454 | ✅ | ✅ | string | color of candlestick of waveform |
 | scrubColor | #7b7b7b | ✅ | ❌ | string | color of candlestick of waveform which has played |
 | onPlayerStateChange | - | ✅ | ❌ | ( playerState : PlayerState ) => void | callback function, which returns player state whenever player state changes. |
 | onPanStateChange | - | ✅ | ❌ | ( panMoving : boolean ) => void | callback function which returns boolean indicating whether audio seeking is active or not. |
 | onRecorderStateChange | - | ❌ | ✅ | ( recorderState : RecorderState ) => void | callback function which returns the recorder state whenever the recorder state changes. Check RecorderState for more details |
+| onCurrentProgressChange | - | ✅ | ❌ | ( currentProgress : number, songDuration: number ) => void | callback function, which returns current progress of audio and total song duration. |
 | onError | - | ✅ | ❌ | ( error : Error ) => void | callback function which returns the error for static audio waveform |
 
 ##### Know more about [ViewStyle](https://reactnative.dev/docs/view-style-props), [PlayerState](#playerstate), and [RecorderState](#recorderstate)

example/src/App.tsx

@@ -97,11 +97,20 @@ const ListItem = React.memo(
               candleWidth={4}
               scrubColor={Colors.white}
               waveColor={Colors.gray}
+              candleHeightScale={4}
               onPlayerStateChange={setPlayerState}
               onPanStateChange={onPanStateChange}
               onError={error => {
                 console.log(error, 'we are in example');
               }}
+              onCurrentProgressChange={(currentProgress, songDuration) => {
+                console.log(
+                  'currentProgress ',
+                  currentProgress,
+                  'songDuration ',
+                  songDuration
+                );
+              }}
             />
           </ImageBackground>
         </View>

src/components/Waveform/Waveform.tsx

@@ -50,6 +50,8 @@ export const Waveform = forwardRef<IWaveformRef, IWaveform>((props, ref) => {
     onRecorderStateChange,
     onPanStateChange,
     onError,
+    onCurrentProgressChange,
+    candleHeightScale = 3
   } = props as StaticWaveform & LiveWaveform;
   const viewRef = useRef<View>(null);
   const scrollRef = useRef<ScrollView>(null);
@@ -471,6 +473,12 @@ export const Waveform = forwardRef<IWaveformRef, IWaveform>((props, ref) => {
     })
   ).current;
 
+  useEffect(() => {
+    if (!isNil(onCurrentProgressChange)) {
+      (onCurrentProgressChange as Function)(currentProgress, songDuration);
+    }
+  }, [currentProgress, songDuration]);
+
   useImperativeHandle(ref, () => ({
     startPlayer: startPlayerAction,
     stopPlayer: stopPlayerAction,
@@ -512,6 +520,7 @@ export const Waveform = forwardRef<IWaveformRef, IWaveform>((props, ref) => {
                 currentProgress,
                 waveColor,
                 scrubColor,
+                candleHeightScale
               }}
             />
           ))}

src/components/Waveform/WaveformTypes.ts

@@ -10,6 +10,7 @@ interface BaseWaveform {
   containerStyle?: StyleProp<ViewStyle>;
   waveColor?: string;
   mode: StaticOrLive;
+  candleHeightScale?: number;
 }
 
 export interface StaticWaveform extends BaseWaveform {
@@ -19,6 +20,10 @@ export interface StaticWaveform extends BaseWaveform {
   onPlayerStateChange?: (playerState: PlayerState) => void;
   onPanStateChange?: (panMoving: boolean) => void;
   onError?: (error: string) => void;
+  onCurrentProgressChange?: (
+    currentProgress: number,
+    songDuration: number
+  ) => void;
 }
 
 export interface LiveWaveform extends BaseWaveform {

src/components/WaveformCandle/WaveformCandle.tsx

@@ -15,6 +15,7 @@ export const WaveformCandle = ({
   currentProgress = 0,
   waveColor,
   scrubColor,
+  candleHeightScale
 }: IWaveformCandle) => {
   const maxHeight = (parentViewLayout?.height ?? 0) - 10;
   const completedIndex = (currentProgress / songDuration) * noOfSamples;
@@ -42,7 +43,7 @@ export const WaveformCandle = ({
             width: candleWidth,
             marginRight: candleSpace,
             maxHeight,
-            height: amplitude * maxHeight * 3, // Adjust the height scale as needed
+            height: amplitude * maxHeight * candleHeightScale, // Adjust the height scale as needed
             minHeight: candleWidth,
             borderRadius: candleWidth,
           },

src/components/WaveformCandle/WaveformCandleTypes.ts

@@ -11,4 +11,5 @@ export interface IWaveformCandle {
   parentViewLayout: LayoutRectangle | null;
   waveColor?: string;
   scrubColor?: string;
+  candleHeightScale: number;
 }