Skip to content

Commit 414011f

Browse files
mukesh-simformmukesh-simform
authored
Merge pull request #164 from SimformSolutionsPvtLtd/feature/UNT-T32661-scroll-indicator-live-waveform
feat(UNT-T32661): hide scroll indicator in live waveform
2 parents eb3845d + 8672bee commit 414011f

File tree

3 files changed

+23
-19
lines changed

3 files changed

+23
-19
lines changed

‎README.md‎

Lines changed: 20 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -127,25 +127,26 @@ You can check out the full example at [Example](./example/src/App.tsx).
127127

128128
## Properties
129129

130-
| **Props** | **Default** | **Static Mode** | **Live Mode** | **Type** | **Description** |
131-
| ------------------------- | ----------- | --------------- | ------------- | ---------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
132-
| mode\* | - | ✅ | ✅ | 'live' or 'static' | Type of waveform. It can be either `static` for the resource file or `live` if you want to record audio |
133-
| ref\* | - | ✅ | ✅ | IWaveformRef | Type of ref provided to waveform component. If waveform mode is `static`, some methods from ref will throw error and same for `live`.<br> Check [IWaveformRef](#iwaveformref-methods) for more details about which methods these refs provides. |
134-
| path\* | - | ✅ | ❌ | string | Used for `static` type. It is the resource path of an audio source file. |
135-
| playbackSpeed | 1.0 | ✅ | ❌ | 1.0 / 1.5 / 2.0 | The playback speed of the audio player. Note: Currently playback speed only supports, Normal (1x) Faster(1.5x) and Fastest(2.0x), any value passed to playback speed greater than 2.0 will be automatically adjusted to normal playback speed |
136-
| candleSpace | 2 | ✅ | ✅ | number | Space between two candlesticks of waveform |
137-
| candleWidth | 5 | ✅ | ✅ | number | Width of single candlestick of waveform |
138-
| candleHeightScale | 3 | ✅ | ✅ | number | Scaling height of candlestick of waveform |
139-
| maxCandlesToRender | 300 | ❌ | ✅ | number | Number of candlestick in waveform |
140-
| containerStyle | - | ✅ | ✅ | `StyleProp<ViewStyle>` | style of the container |
141-
| waveColor | #545454 | ✅ | ✅ | string | color of candlestick of waveform |
142-
| scrubColor | #7b7b7b | ✅ | ❌ | string | color of candlestick of waveform which has played |
143-
| onPlayerStateChange | - | ✅ | ❌ | ( playerState : PlayerState ) => void | callback function, which returns player state whenever player state changes. |
144-
| onPanStateChange | - | ✅ | ❌ | ( panMoving : boolean ) => void | callback function which returns boolean indicating whether audio seeking is active or not. |
145-
| onRecorderStateChange | - | ❌ | ✅ | ( recorderState : RecorderState ) => void | callback function which returns the recorder state whenever the recorder state changes. Check RecorderState for more details |
146-
| onCurrentProgressChange | - | ✅ | ❌ | ( currentProgress : number, songDuration: number ) => void | callback function, which returns current progress of audio and total song duration. |
147-
| onChangeWaveformLoadState | - | ✅ | ❌ | ( state : boolean ) => void | callback function which returns the loading state of waveform candlestick. |
148-
| onError | - | ✅ | ❌ | ( error : Error ) => void | callback function which returns the error for static audio waveform |
130+
| **Props** | **Default** | **Static Mode** | **Live Mode** | **Type** | **Description** |
131+
| ------------------------------ | ----------- | --------------- | ------------- | ---------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
132+
| mode\* | - | ✅ | ✅ | 'live' or 'static' | Type of waveform. It can be either `static` for the resource file or `live` if you want to record audio |
133+
| ref\* | - | ✅ | ✅ | IWaveformRef | Type of ref provided to waveform component. If waveform mode is `static`, some methods from ref will throw error and same for `live`.<br> Check [IWaveformRef](#iwaveformref-methods) for more details about which methods these refs provides. |
134+
| path\* | - | ✅ | ❌ | string | Used for `static` type. It is the resource path of an audio source file. |
135+
| playbackSpeed | 1.0 | ✅ | ❌ | 1.0 / 1.5 / 2.0 | The playback speed of the audio player. Note: Currently playback speed only supports, Normal (1x) Faster(1.5x) and Fastest(2.0x), any value passed to playback speed greater than 2.0 will be automatically adjusted to normal playback speed |
136+
| candleSpace | 2 | ✅ | ✅ | number | Space between two candlesticks of waveform |
137+
| candleWidth | 5 | ✅ | ✅ | number | Width of single candlestick of waveform |
138+
| candleHeightScale | 3 | ✅ | ✅ | number | Scaling height of candlestick of waveform |
139+
| maxCandlesToRender | 300 | ❌ | ✅ | number | Number of candlestick in waveform |
140+
| containerStyle | - | ✅ | ✅ | `StyleProp<ViewStyle>` | style of the container |
141+
| waveColor | #545454 | ✅ | ✅ | string | color of candlestick of waveform |
142+
| scrubColor | #7b7b7b | ✅ | ❌ | string | color of candlestick of waveform which has played |
143+
| onPlayerStateChange | - | ✅ | ❌ | ( playerState : PlayerState ) => void | callback function, which returns player state whenever player state changes. |
144+
| onPanStateChange | - | ✅ | ❌ | ( panMoving : boolean ) => void | callback function which returns boolean indicating whether audio seeking is active or not. |
145+
| onRecorderStateChange | - | ❌ | ✅ | ( recorderState : RecorderState ) => void | callback function which returns the recorder state whenever the recorder state changes. Check RecorderState for more details |
146+
| onCurrentProgressChange | - | ✅ | ❌ | ( currentProgress : number, songDuration: number ) => void | callback function, which returns current progress of audio and total song duration. |
147+
| onChangeWaveformLoadState | - | ✅ | ❌ | ( state : boolean ) => void | callback function which returns the loading state of waveform candlestick. |
148+
| onError | - | ✅ | ❌ | ( error : Error ) => void | callback function which returns the error for static audio waveform |
149+
| showsHorizontalScrollIndicator | false | ❌ | ✅ | boolean | whether to show scroll indicator when live waveform is being recorded and total width is more than parent view width |
149150

150151
##### Know more about [ViewStyle](https://reactnative.dev/docs/view-style-props), [PlayerState](#playerstate), and [RecorderState](#recorderstate)
151152

‎src/components/Waveform/Waveform.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -63,6 +63,7 @@ export const Waveform = forwardRef<IWaveformRef, IWaveform>((props, ref) => {
6363
onCurrentProgressChange = () => {},
6464
candleHeightScale = 3,
6565
onChangeWaveformLoadState = (_state: boolean) => {},
66+
showsHorizontalScrollIndicator = false,
6667
} = props as StaticWaveform & LiveWaveform;
6768
const viewRef = useRef<View>(null);
6869
const scrollRef = useRef<ScrollView>(null);
@@ -644,6 +645,7 @@ export const Waveform = forwardRef<IWaveformRef, IWaveform>((props, ref) => {
644645
{...(mode === 'static' ? panResponder.panHandlers : {})}>
645646
<ScrollView
646647
horizontal
648+
showsHorizontalScrollIndicator={showsHorizontalScrollIndicator}
647649
ref={scrollRef}
648650
style={styles.scrollContainer}
649651
scrollEnabled={mode === 'live'}>

‎src/components/Waveform/WaveformTypes.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,7 @@ export interface StaticWaveform extends BaseWaveform {
3333

3434
export interface LiveWaveform extends BaseWaveform {
3535
mode: 'live';
36+
showsHorizontalScrollIndicator?: boolean;
3637
maxCandlesToRender?: number;
3738
onRecorderStateChange?: (recorderState: RecorderState) => void;
3839
}

0 commit comments

Comments
 (0)