Skip to content

Commit 57e2faa

Browse files
nilesh-simformnilesh-simform
committed
feat(UNT-T27088): external url support
1 parent c836c68 commit 57e2faa

File tree

9 files changed

+288
-65
lines changed

9 files changed

+288
-65
lines changed

‎README.md‎

Lines changed: 36 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -33,13 +33,13 @@ Here's how to get started with react-native-audio-waveform in your React Native
3333
##### 1. Install the package
3434

3535
```sh
36-
npm install @simform_solutions/react-native-audio-waveform react-native-gesture-handler
36+
npm install @simform_solutions/react-native-audio-waveform rn-fetch-blob react-native-gesture-handler
3737
```
3838

3939
###### --- or ---
4040

4141
```sh
42-
yarn add @simform_solutions/react-native-audio-waveform react-native-gesture-handler
42+
yarn add @simform_solutions/react-native-audio-waveform rn-fetch-blob react-native-gesture-handler
4343
```
4444

4545
##### 2. Install CocoaPods in the iOS project
@@ -48,7 +48,7 @@ yarn add @simform_solutions/react-native-audio-waveform react-native-gesture-han
4848
npx pod-install
4949
```
5050

51-
##### Know more about [react-native-gesture-handler](https://www.npmjs.com/package/react-native-gesture-handler)
51+
##### Know more about [rn-fetch-blob](https://www.npmjs.com/package/rn-fetch-blob) [react-native-gesture-handler](https://www.npmjs.com/package/react-native-gesture-handler)
5252

5353
##### 3. Add audio recording permissions
5454

@@ -90,7 +90,34 @@ const ref = useRef<IWaveformRef>(null);
9090
<Waveform
9191
mode="static"
9292
ref={ref}
93-
path={item}
93+
path={path}
94+
candleSpace={2}
95+
candleWidth={4}
96+
scrubColor="white"
97+
onPlayerStateChange={playerState => console.log(playerState)}
98+
onPanStateChange={isMoving => console.log(isMoving)}
99+
/>;
100+
```
101+
102+
When you want to show a waveform for a external audio URL, you need to use `static` mode for the waveform and set isExternalUrl to true.
103+
104+
Check the example below for more information.
105+
106+
```tsx
107+
import {
108+
Waveform,
109+
type IWaveformRef,
110+
} from '@simform_solutions/react-native-audio-waveform';
111+
112+
const url = 'https://www2.cs.uic.edu/~i101/SoundFiles/taunt.wav'; // URL to the audio file for which you want to show waveform
113+
const ref = useRef<IWaveformRef>(null);
114+
<Waveform
115+
mode="static"
116+
ref={ref}
117+
path={url}
118+
isExternalUrl={true}
119+
onDownloadStateChange={state => console.log(state)}
120+
onDownloadProgressChange={progress => console.log(progress)}
94121
candleSpace={2}
95122
candleWidth={4}
96123
scrubColor="white"
@@ -133,6 +160,9 @@ You can check out the full example at [Example](./example/src/App.tsx).
133160
| 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. |
134161
| path\* | - | ✅ | ❌ | string | Used for `static` type. It is the resource path of an audio source file. |
135162
| 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 |
163+
| volume | 3 | ✅ | ❌ | number | Used for `static` type. It is a volume level for the media player, ranging from 1 to 10. |
164+
| isExternalUrl | false | ✅ | ❌ | boolean | Used for `static` type. If the resource path of an audio file is a URL, then pass true; otherwise, pass false. |
165+
| downloadExternalAudio | true | ✅ | ❌ | boolean | Used for `static` type. Indicates whether the external media should be downloaded. |
136166
| candleSpace | 2 | ✅ | ✅ | number | Space between two candlesticks of waveform |
137167
| candleWidth | 5 | ✅ | ✅ | number | Width of single candlestick of waveform |
138168
| candleHeightScale | 3 | ✅ | ✅ | number | Scaling height of candlestick of waveform |
@@ -145,6 +175,8 @@ You can check out the full example at [Example](./example/src/App.tsx).
145175
| onRecorderStateChange | - | ❌ | ✅ | ( recorderState : RecorderState ) => void | callback function which returns the recorder state whenever the recorder state changes. Check RecorderState for more details |
146176
| onCurrentProgressChange | - | ✅ | ❌ | ( currentProgress : number, songDuration: number ) => void | callback function, which returns current progress of audio and total song duration. |
147177
| onChangeWaveformLoadState | - | ✅ | ❌ | ( state : boolean ) => void | callback function which returns the loading state of waveform candlestick. |
178+
| onDownloadStateChange | - | ✅ | ❌ | ( state : boolean ) => void | A callback function that returns the loading state of a file download from an external URL. |
179+
| onDownloadProgressChange | - | ✅ | ❌ | ( currentProgress : number ) => void | Used when isExternalUrl is true; a callback function that returns the current progress of a file download from an external URL |
148180
| onError | - | ✅ | ❌ | ( error : Error ) => void | callback function which returns the error for static audio waveform |
149181

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

‎example/src/App.tsx‎

Lines changed: 47 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@ import {
2424
ScrollView,
2525
StatusBar,
2626
Text,
27+
TouchableOpacity,
2728
View,
2829
} from 'react-native';
2930
import { GestureHandlerRootView } from 'react-native-gesture-handler';
@@ -48,27 +49,40 @@ const RenderListItem = React.memo(
4849
onPanStateChange,
4950
currentPlaybackSpeed,
5051
changeSpeed,
52+
isExternalUrl = false,
5153
}: {
5254
item: ListItem;
5355
currentPlaying: string;
5456
setCurrentPlaying: Dispatch<SetStateAction<string>>;
5557
onPanStateChange: (value: boolean) => void;
5658
currentPlaybackSpeed: PlaybackSpeedType;
5759
changeSpeed: () => void;
60+
isExternalUrl?: boolean;
5861
}) => {
5962
const ref = useRef<IWaveformRef>(null);
6063
const [playerState, setPlayerState] = useState(PlayerState.stopped);
6164
const styles = stylesheet({ currentUser: item.fromCurrentUser });
62-
const [isLoading, setIsLoading] = useState(true);
65+
const [isLoading, setIsLoading] = useState(isExternalUrl ? false : true);
66+
const [downloadExternalAudio, setDownloadExternalAudio] = useState(false);
67+
const [isAudioDownloaded, setIsAudioDownloaded] = useState(false);
6368

64-
const handleButtonAction = () => {
69+
const handleButtonAction = (): void => {
6570
if (playerState === PlayerState.stopped) {
6671
setCurrentPlaying(item.path);
6772
} else {
6873
setCurrentPlaying('');
6974
}
7075
};
7176

77+
const handleDownloadPress = (): void => {
78+
setDownloadExternalAudio(true);
79+
if (currentPlaying === item.path) {
80+
setCurrentPlaying('');
81+
}
82+
83+
setIsLoading(true);
84+
};
85+
7286
useEffect(() => {
7387
if (currentPlaying !== item.path) {
7488
ref.current?.stopPlayer();
@@ -78,15 +92,23 @@ const RenderListItem = React.memo(
7892
}, [currentPlaying]);
7993

8094
return (
81-
<View key={item.path} style={[styles.listItemContainer]}>
95+
<View
96+
key={item.path}
97+
style={[
98+
styles.listItemContainer,
99+
item.fromCurrentUser &&
100+
isExternalUrl &&
101+
!isAudioDownloaded &&
102+
styles.listItemReverseContainer,
103+
]}>
82104
<View style={styles.listItemWidth}>
83105
<View style={[styles.buttonContainer]}>
84106
<Pressable
85107
disabled={isLoading}
86108
onPress={handleButtonAction}
87109
style={styles.playBackControlPressable}>
88110
{isLoading ? (
89-
<ActivityIndicator color={'#FF0000'} />
111+
<ActivityIndicator color={'#FFFFFF'} />
90112
) : (
91113
<Image
92114
source={
@@ -111,6 +133,7 @@ const RenderListItem = React.memo(
111133
scrubColor={Colors.white}
112134
waveColor={Colors.lightWhite}
113135
candleHeightScale={4}
136+
downloadExternalAudio={downloadExternalAudio}
114137
onPlayerStateChange={state => {
115138
setPlayerState(state);
116139
if (
@@ -120,10 +143,20 @@ const RenderListItem = React.memo(
120143
setCurrentPlaying('');
121144
}
122145
}}
146+
isExternalUrl={isExternalUrl}
123147
onPanStateChange={onPanStateChange}
124148
onError={error => {
125149
console.log(error, 'we are in example');
126150
}}
151+
onDownloadStateChange={state => {
152+
console.log('Download State', state);
153+
}}
154+
onDownloadProgressChange={progress => {
155+
console.log('Download Progress', `${progress}%`);
156+
if (progress === 100) {
157+
setIsAudioDownloaded(true);
158+
}
159+
}}
127160
onCurrentProgressChange={(currentProgress, songDuration) => {
128161
console.log(
129162
'currentProgress ',
@@ -147,6 +180,15 @@ const RenderListItem = React.memo(
147180
)}
148181
</View>
149182
</View>
183+
{isExternalUrl && !downloadExternalAudio && !isAudioDownloaded ? (
184+
<TouchableOpacity onPress={handleDownloadPress}>
185+
<Image
186+
source={Icons.download}
187+
style={styles.downloadIcon}
188+
resizeMode="contain"
189+
/>
190+
</TouchableOpacity>
191+
) : null}
150192
</View>
151193
);
152194
}
@@ -272,6 +314,7 @@ const AppContainer = () => {
272314
currentPlaying={currentPlaying}
273315
setCurrentPlaying={setCurrentPlaying}
274316
item={item}
317+
isExternalUrl={item.isExternalUrl}
275318
onPanStateChange={value => setShouldScroll(!value)}
276319
{...{ currentPlaybackSpeed, changeSpeed }}
277320
/>

‎example/src/assets/icons/download.png‎

8.4 KB
Loading

‎example/src/assets/icons/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,4 +4,5 @@ export const Icons = {
44
simform: require('./simform.png'),
55
mic: require('./mic.png'),
66
logo: require('./logo.png'),
7+
download: require('./download.png'),
78
};

‎example/src/constants/Audios.ts‎

Lines changed: 17 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import { globalMetrics } from '../../src/theme';
55
export interface ListItem {
66
fromCurrentUser: boolean;
77
path: string;
8+
isExternalUrl?: boolean;
89
}
910

1011
/**
@@ -69,6 +70,11 @@ const audioAssetArray = [
6970
'file_example_mp3_15s.mp3',
7071
];
7172

73+
const externalAudioAssetArray = [
74+
'https://codeskulptor-demos.commondatastorage.googleapis.com/GalaxyInvaders/theme_01.mp3',
75+
'https://codeskulptor-demos.commondatastorage.googleapis.com/pang/paza-moduless.mp3',
76+
];
77+
7278
/**
7379
* Generate a list of file objects with information about successfully copied files (Android)
7480
* or all files (iOS).
@@ -78,8 +84,18 @@ export const generateAudioList = async (): Promise<ListItem[]> => {
7884
const audioAssets = await copyFilesToNativeResources();
7985

8086
// Generate the final list based on the copied or available files
81-
return audioAssets?.map?.((value, index) => ({
87+
const localAssetList = audioAssets?.map?.((value, index) => ({
8288
fromCurrentUser: index % 2 !== 0,
8389
path: `${filePath}/${value}`,
8490
}));
91+
92+
const externalAudioList: ListItem[] = externalAudioAssetArray.map(
93+
(value, index) => ({
94+
fromCurrentUser: index % 2 !== 0,
95+
path: value,
96+
isExternalUrl: true,
97+
})
98+
);
99+
100+
return [...localAssetList, ...externalAudioList];
85101
};

‎example/src/styles.ts‎

Lines changed: 15 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -40,10 +40,16 @@ const styles = (params: StyleSheetParams = {}) =>
4040
},
4141
listItemContainer: {
4242
marginTop: scale(16),
43-
alignItems: params.currentUser ? 'flex-end' : 'flex-start',
43+
flexDirection: 'row',
44+
justifyContent: params.currentUser ? 'flex-end' : 'flex-start',
45+
alignItems: 'center',
46+
},
47+
listItemReverseContainer: {
48+
flexDirection: 'row-reverse',
49+
alignSelf: 'flex-end',
4450
},
4551
listItemWidth: {
46-
width: '90%',
52+
width: '88%',
4753
},
4854
buttonImage: {
4955
height: scale(22),
@@ -111,6 +117,13 @@ const styles = (params: StyleSheetParams = {}) =>
111117
textAlign: 'center',
112118
fontWeight: '600',
113119
},
120+
downloadIcon: {
121+
width: 20,
122+
height: 20,
123+
tintColor: Colors.pink,
124+
marginLeft: 10,
125+
marginRight: 10,
126+
},
114127
});
115128

116129
export default styles;

‎package.json‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -110,6 +110,7 @@
110110
]
111111
},
112112
"dependencies": {
113-
"lodash": "^4.17.21"
113+
"lodash": "^4.17.21",
114+
"rn-fetch-blob": "^0.12.0"
114115
}
115-
}
116+
}

0 commit comments

Comments
 (0)