Skip to content

Commit cee571b

Browse files
Krunal-K-SimformSolutionsKrunal-K-SimformSolutions
committed
Eslint issue & Change package version
1 parent 998ec6e commit cee571b

8 files changed

Lines changed: 110 additions & 66 deletions

‎package.json‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
2-
"name": "react-native-audio-waveform",
3-
"version": "0.1.0",
2+
"name": "rn-audio-waveform",
3+
"version": "1.0.0",
44
"description": "user waveform",
55
"main": "lib/commonjs/index",
66
"module": "lib/module/index",
@@ -144,4 +144,4 @@
144144
]
145145
]
146146
}
147-
}
147+
}

‎src/player/AudioPlayerWaveformView.tsx‎

Lines changed: 17 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
1-
import React, { forwardRef, useImperativeHandle, useRef } from 'react';
1+
import React, { forwardRef, useImperativeHandle } from 'react';
2+
import { StyleSheet, View } from 'react-native';
23
import styles from './AudioPlayerWaveformViewStyles';
34
import type {
45
AudioPlayerWaveformViewProps,
@@ -15,6 +16,8 @@ import {
1516
NativeAudioPlayerWaveformView,
1617
} from './AudioPlayerWaveformViewUtils';
1718

19+
const refView = React.createRef<View>();
20+
1821
function CustomAudioPlayerWaveformView(
1922
{
2023
style,
@@ -38,11 +41,16 @@ function CustomAudioPlayerWaveformView(
3841
}: AudioPlayerWaveformViewProps,
3942
ref: React.Ref<AudioPlayerWaveformHandleType>
4043
): React.ReactElement {
41-
const refView = useRef();
42-
4344
useImperativeHandle(ref, () => ({
44-
createPlayer: (withDebug: boolean = false, subscriptionDurationInMilliseconds: number) => {
45-
setUpPlayer(getViewId(refView), withDebug, subscriptionDurationInMilliseconds);
45+
createPlayer: (
46+
withDebug: boolean = false,
47+
subscriptionDurationInMilliseconds: number
48+
) => {
49+
setUpPlayer(
50+
getViewId(refView),
51+
withDebug,
52+
subscriptionDurationInMilliseconds
53+
);
4654
},
4755
setSource: (filePath: string, isAmplitudaMode?: boolean) => {
4856
setSource(getViewId(refView), filePath, isAmplitudaMode);
@@ -64,7 +72,7 @@ function CustomAudioPlayerWaveformView(
6472
return (
6573
<NativeAudioPlayerWaveformView
6674
ref={refView}
67-
style={[styles.defaultStyle, style]}
75+
style={StyleSheet.flatten([styles.defaultStyle, style])}
6876
progress={progress}
6977
maxProgress={maxProgress}
7078
visibleProgress={visibleProgress}
@@ -86,5 +94,6 @@ function CustomAudioPlayerWaveformView(
8694
);
8795
}
8896

89-
export const AudioPlayerWaveformView: React.ForwardRefExoticComponent<AudioPlayerWaveformViewProps> =
90-
forwardRef(CustomAudioPlayerWaveformView);
97+
export const AudioPlayerWaveformView = forwardRef(
98+
CustomAudioPlayerWaveformView
99+
);

‎src/player/AudioPlayerWaveformViewTypes.ts‎

Lines changed: 33 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,9 @@
1-
import type { ViewStyle, StyleProp, NativeSyntheticEvent } from 'react-native';
1+
import type {
2+
ViewStyle,
3+
StyleProp,
4+
NativeSyntheticEvent,
5+
View,
6+
} from 'react-native';
27
import type {
38
OnSeekChangeEvent,
49
OnErrorEvent,
@@ -17,29 +22,35 @@ export type OnLoadAmpsEvent = (
1722
e: NativeSyntheticEvent<{ loadAmps: Array<number> }>
1823
) => void;
1924

20-
export type AudioPlayerWaveformViewProps = Partial<{
21-
visibleProgress: number;
22-
playbackSpeed: number;
23-
progress: number;
24-
maxProgress: number;
25-
waveWidth: number;
26-
gap: number;
27-
minHeight: number;
28-
radius: number;
29-
gravity: 'top' | 'center' | 'bottom';
30-
barBgColor: string | number;
31-
barPgColor: string | number;
32-
style: StyleProp<ViewStyle>;
33-
onSeekChange: OnSeekChangeEvent;
34-
onError: OnErrorEvent;
35-
onPlayerState: OnPlayerStateEvent;
36-
onProgress: OnProgressEvent;
37-
onLoadAmps: OnLoadAmpsEvent;
38-
onAmpsState: OnAmpsStateEvent;
39-
}>;
25+
export type AudioPlayerWaveformViewProps = React.ComponentPropsWithRef<
26+
typeof View
27+
> &
28+
Partial<{
29+
visibleProgress: number;
30+
playbackSpeed: number;
31+
progress: number;
32+
maxProgress: number;
33+
waveWidth: number;
34+
gap: number;
35+
minHeight: number;
36+
radius: number;
37+
gravity: 'top' | 'center' | 'bottom';
38+
barBgColor: string | number;
39+
barPgColor: string | number;
40+
style: StyleProp<ViewStyle>;
41+
onSeekChange: OnSeekChangeEvent;
42+
onError: OnErrorEvent;
43+
onPlayerState: OnPlayerStateEvent;
44+
onProgress: OnProgressEvent;
45+
onLoadAmps: OnLoadAmpsEvent;
46+
onAmpsState: OnAmpsStateEvent;
47+
}>;
4048

4149
export type AudioPlayerWaveformHandleType = Required<{
42-
createPlayer: (withDebug: boolean, subscriptionDurationInMilliseconds: number) => void;
50+
createPlayer: (
51+
withDebug: boolean,
52+
subscriptionDurationInMilliseconds: number
53+
) => void;
4354
setSource: (filePath: string, isAmplitudaMode?: boolean) => void;
4455
startPlaying: () => void;
4556
pausePlaying: () => void;

‎src/player/AudioPlayerWaveformViewUtils.ts‎

Lines changed: 14 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,23 +5,34 @@ import {
55
findNodeHandle,
66
} from 'react-native';
77
import { LINKING_ERROR } from '../Constants';
8+
import type { AudioPlayerWaveformViewProps } from './AudioPlayerWaveformViewTypes';
89

910
export const NativeAudioPlayerWaveformView =
1011
UIManager.getViewManagerConfig('AudioPlayerWaveformView') != null
11-
? requireNativeComponent('AudioPlayerWaveformView')
12+
? requireNativeComponent<AudioPlayerWaveformViewProps>(
13+
'AudioPlayerWaveformView'
14+
)
1215
: () => {
1316
throw new Error(LINKING_ERROR);
1417
};
1518

16-
export const setUpPlayer = (viewId: number | null, withDebug: boolean, subscriptionDurationInMilliseconds: number) =>
19+
export const setUpPlayer = (
20+
viewId: number | null,
21+
withDebug: boolean,
22+
subscriptionDurationInMilliseconds: number
23+
) =>
1724
UIManager.dispatchViewManagerCommand(
1825
viewId,
1926
// we are calling the 'create' command for init player
2027
UIManager.getViewManagerConfig('AudioPlayerWaveformView').Commands.create,
2128
[viewId, withDebug, subscriptionDurationInMilliseconds]
2229
);
2330

24-
export const setSource = (viewId: number | null, filePath: string, isAmplitudaMode?: boolean) =>
31+
export const setSource = (
32+
viewId: number | null,
33+
filePath: string,
34+
isAmplitudaMode?: boolean
35+
) =>
2536
UIManager.dispatchViewManagerCommand(
2637
viewId,
2738
// we are calling the 'source' command for set source

‎src/recorder/AudioRecorderWaveformView.tsx‎

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React, { forwardRef, useImperativeHandle, useRef } from 'react';
1+
import React, { forwardRef, useImperativeHandle } from 'react';
22
import styles from './AudioRecorderWaveformViewStyles';
33
import type {
44
AudioRecorderWaveformViewProps,
@@ -14,6 +14,9 @@ import {
1414
stopRecorder,
1515
NativeAudioRecorderWaveformView,
1616
} from './AudioRecorderWaveformViewUtils';
17+
import { StyleSheet, View } from 'react-native';
18+
19+
const refView = React.createRef<View>();
1720

1821
function CustomAudioRecorderWaveformView(
1922
{
@@ -39,8 +42,6 @@ function CustomAudioRecorderWaveformView(
3942
}: AudioRecorderWaveformViewProps,
4043
ref: React.Ref<AudioRecorderWaveformHandleType>
4144
): React.ReactElement {
42-
const refView = useRef();
43-
4445
useImperativeHandle(ref, () => ({
4546
createRecorder: (config: AudioRecordConfig = {}) => {
4647
setUpRecorder(getViewId(refView), config);
@@ -62,7 +63,7 @@ function CustomAudioRecorderWaveformView(
6263
return (
6364
<NativeAudioRecorderWaveformView
6465
ref={refView}
65-
style={[styles.defaultStyle, style]}
66+
style={StyleSheet.flatten([styles.defaultStyle, style])}
6667
progress={progress}
6768
maxProgress={maxProgress}
6869
visibleProgress={visibleProgress}
@@ -85,5 +86,6 @@ function CustomAudioRecorderWaveformView(
8586
);
8687
}
8788

88-
export const AudioRecorderWaveformView: React.ForwardRefExoticComponent<AudioRecorderWaveformViewProps> =
89-
forwardRef(CustomAudioRecorderWaveformView);
89+
export const AudioRecorderWaveformView = forwardRef(
90+
CustomAudioRecorderWaveformView
91+
);

‎src/recorder/AudioRecorderWaveformViewTypes.ts‎

Lines changed: 30 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,9 @@
1-
import type { ViewStyle, StyleProp, NativeSyntheticEvent } from 'react-native';
1+
import type {
2+
ViewStyle,
3+
StyleProp,
4+
NativeSyntheticEvent,
5+
View,
6+
} from 'react-native';
27
import type { AudioRecordConfig } from './RecorderTypes';
38
import type {
49
OnSeekChangeEvent,
@@ -30,27 +35,30 @@ export type OnSilentDetectedEvent = (
3035
e: NativeSyntheticEvent<{ time: number }>
3136
) => void;
3237

33-
export type AudioRecorderWaveformViewProps = Partial<{
34-
visibleProgress: number;
35-
progress: number;
36-
maxProgress: number;
37-
waveWidth: number;
38-
gap: number;
39-
minHeight: number;
40-
radius: number;
41-
gravity: 'top' | 'center' | 'bottom';
42-
barBgColor: string | number;
43-
barPgColor: string | number;
44-
style: StyleProp<ViewStyle>;
45-
onSeekChange: OnSeekChangeEvent;
46-
onError: OnErrorEvent;
47-
onBuffer: OnBufferEvent;
48-
onFFmpegState: OnFFmpegStateEvent;
49-
onFinished: OnFinishedEvent;
50-
onProgress: OnProgressEvent;
51-
onRecorderState: OnRecorderStateEvent;
52-
onSilentDetected: OnSilentDetectedEvent;
53-
}>;
38+
export type AudioRecorderWaveformViewProps = React.ComponentPropsWithRef<
39+
typeof View
40+
> &
41+
Partial<{
42+
visibleProgress: number;
43+
progress: number;
44+
maxProgress: number;
45+
waveWidth: number;
46+
gap: number;
47+
minHeight: number;
48+
radius: number;
49+
gravity: 'top' | 'center' | 'bottom';
50+
barBgColor: string | number;
51+
barPgColor: string | number;
52+
style: StyleProp<ViewStyle>;
53+
onSeekChange: OnSeekChangeEvent;
54+
onError: OnErrorEvent;
55+
onBuffer: OnBufferEvent;
56+
onFFmpegState: OnFFmpegStateEvent;
57+
onFinished: OnFinishedEvent;
58+
onProgress: OnProgressEvent;
59+
onRecorderState: OnRecorderStateEvent;
60+
onSilentDetected: OnSilentDetectedEvent;
61+
}>;
5462

5563
export type AudioRecorderWaveformHandleType = Required<{
5664
createRecorder: (config: AudioRecordConfig) => void;

‎src/recorder/AudioRecorderWaveformViewUtils.ts‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,10 +6,13 @@ import {
66
findNodeHandle,
77
} from 'react-native';
88
import { LINKING_ERROR } from '../Constants';
9+
import type { AudioRecorderWaveformViewProps } from './AudioRecorderWaveformViewTypes';
910

1011
export const NativeAudioRecorderWaveformView =
1112
UIManager.getViewManagerConfig('AudioRecorderWaveformView') != null
12-
? requireNativeComponent('AudioRecorderWaveformView')
13+
? requireNativeComponent<AudioRecorderWaveformViewProps>(
14+
'AudioRecorderWaveformView'
15+
)
1316
: () => {
1417
throw new Error(LINKING_ERROR);
1518
};

‎src/recorder/RecorderTypes.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -77,7 +77,7 @@ export type FFmpegConvert = {
7777
// '.pcm', '.wav' -> false isFfmpegMode
7878
// '.mp3', '.aac', '.m4a', '.wma', '.flac', '.mp4'
7979
export type AudioRecordConfig = {
80-
sourceMode: 'normal' | 'noise' | 'auto';
80+
sourceMode?: 'normal' | 'noise' | 'auto';
8181
isFFmpegMode?: boolean;
8282
audioSourceAndroid?: AudioSourceAndroidType;
8383
audioEncoderAndroid?: AudioEncoderAndroidType;

0 commit comments

Comments
 (0)