feat(UNT-T27088): external url support

Author: nilesh-simform

README.md

@@ -88,7 +88,31 @@ const ref = useRef<IWaveformRef>(null);
 <Waveform
     mode="static"
     ref={ref}
-    path={item}
+    path={path}
+    candleSpace={2}
+    candleWidth={4}
+    scrubColor="white"
+    onPlayerStateChange={playerState=>console.log(playerState)}
+    onPanStateChange={isMoving=>console.log(isMoving)}
+/>;
+```
+
+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.
+
+Check the example below for more information.
+
+```tsx
+import { Waveform, type IWaveformRef } from '@simform_solutions/react-native-audio-waveform';
+
+const url = 'https://dl.espressif.com/dl/audio/gs-16b-2c-44100hz.mp3'; // URL to the audio file for which you want to show waveform
+const ref = useRef<IWaveformRef>(null);
+<Waveform
+    mode="static"
+    ref={ref}
+    path={url}
+    isExternalUrl={true}
+    onDownloadStateChange={state=>console.log(state)}
+    onDownloadProgressChange={progress=>console.log(progress)}
     candleSpace={2}
     candleWidth={4}
     scrubColor="white"
@@ -127,6 +151,9 @@ You can check out the full example at [Example](./example/src/App.tsx).
 | mode\* | - | ✅ | ✅ | 'live' or 'static' | Type of waveform. It can be either `static` for the resource file or `live` if you want to record audio |
 | 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. |
 | path\* | - | ✅ | ❌ | string | Used for `static` type. It is the resource path of an audio source file. |
+| volume | 3 | ✅ | ❌ | number | Used for `static` type. It is a volume level for the media player, ranging from 1 to 10. |
+| isExternalUrl | false | ✅ | ❌ | boolean | Used for `static` type. If the resource path of an audio file is a URL, then pass true; otherwise, pass false. |
+| downloadExternalAudio | true | ✅ | ❌ | boolean | Used for `static` type. Indicates whether the external media should be downloaded. |
 | 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 | 
@@ -138,6 +165,8 @@ You can check out the full example at [Example](./example/src/App.tsx).
 | 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. |
 | onChangeWaveformLoadState | - | ✅ | ❌ | ( state : boolean ) => void | callback function which returns the loading state of waveform candlestick. |
+| onDownloadStateChange | - | ✅ | ❌ | ( state : boolean ) => void | A callback function that returns the loading state of a file download from an external URL. |
+| 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 |
 | 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

@@ -13,6 +13,7 @@ import {
   Pressable,
   ScrollView,
   StatusBar,
+  TouchableOpacity,
   View,
 } from 'react-native';
 import {
@@ -41,16 +42,20 @@ const ListItem = React.memo(
     currentPlaying,
     setCurrentPlaying,
     onPanStateChange,
+    isExternalUrl = false,
   }: {
     item: ListItem;
     currentPlaying: string;
     setCurrentPlaying: Dispatch<SetStateAction<string>>;
     onPanStateChange: (value: boolean) => void;
+    isExternalUrl?: boolean;
   }) => {
     const ref = useRef<IWaveformRef>(null);
     const [playerState, setPlayerState] = useState(PlayerState.stopped);
     const styles = stylesheet({ currentUser: item.fromCurrentUser });
     const [isLoading, setIsLoading] = useState(true);
+    const [downloadExternalAudio, setDownloadExternalAudio] = useState(false);
+    const [isAudioDownloaded, setIsAudioDownloaded] = useState(false);
 
     const handleButtonAction = () => {
       if (playerState === PlayerState.stopped) {
@@ -69,7 +74,16 @@ const ListItem = React.memo(
     }, [currentPlaying]);
 
     return (
-      <View key={item.path} style={[styles.listItemContainer]}>
+      <View
+        key={item.path}
+        style={[
+          styles.listItemContainer,
+          item.fromCurrentUser &&
+            isExternalUrl &&
+            !downloadExternalAudio && {
+              flexDirection: 'row-reverse',
+            },
+        ]}>
         <View style={styles.listItemWidth}>
           <ImageBackground
             source={
@@ -82,7 +96,8 @@ const ListItem = React.memo(
               disabled={isLoading}
               onPress={handleButtonAction}
               style={styles.playBackControlPressable}>
-              {isLoading ? (
+              {(isLoading && (!isExternalUrl || isAudioDownloaded)) ||
+              (isExternalUrl && downloadExternalAudio && !isAudioDownloaded) ? (
                 <ActivityIndicator color={'#FF0000'} />
               ) : (
                 <Image
@@ -107,6 +122,7 @@ const ListItem = React.memo(
               scrubColor={Colors.white}
               waveColor={Colors.gray}
               candleHeightScale={4}
+              downloadExternalAudio={downloadExternalAudio}
               onPlayerStateChange={state => {
                 setPlayerState(state);
                 if (
@@ -116,10 +132,20 @@ const ListItem = React.memo(
                   setCurrentPlaying('');
                 }
               }}
+              isExternalUrl={isExternalUrl}
               onPanStateChange={onPanStateChange}
               onError={error => {
                 console.log(error, 'we are in example');
               }}
+              onDownloadStateChange={state => {
+                console.log('Download State', state);
+              }}
+              onDownloadProgressChange={progress => {
+                console.log('Download Progress', `${progress}%`);
+                if (progress === 100) {
+                  setIsAudioDownloaded(true);
+                }
+              }}
               onCurrentProgressChange={(currentProgress, songDuration) => {
                 console.log(
                   'currentProgress ',
@@ -134,6 +160,15 @@ const ListItem = React.memo(
             />
           </ImageBackground>
         </View>
+        {isExternalUrl && !downloadExternalAudio ? (
+          <TouchableOpacity onPress={() => setDownloadExternalAudio(true)}>
+            <Image
+              source={Icons.download}
+              style={styles.downloadIcon}
+              resizeMode="contain"
+            />
+          </TouchableOpacity>
+        ) : null}
       </View>
     );
   }
@@ -241,6 +276,7 @@ const AppContainer = () => {
                   currentPlaying={currentPlaying}
                   setCurrentPlaying={setCurrentPlaying}
                   item={item}
+                  isExternalUrl={item.isExternalUrl}
                   onPanStateChange={value => setShouldScroll(!value)}
                 />
               ))}

example/src/assets/icons/download.png

@@ -3,4 +3,5 @@ export const Icons = {
   stop: require('./stop.png'),
   simform: require('./simform.png'),
   mic: require('./mic.png'),
+  download: require('./download.png'),
 };

example/src/assets/icons/index.ts

@@ -5,6 +5,7 @@ import { globalMetrics } from '../../src/theme';
 export interface ListItem {
   fromCurrentUser: boolean;
   path: string;
+  isExternalUrl?: boolean;
 }
 
 /**
@@ -54,15 +55,28 @@ const audioAssetArray = [
   'file_example_mp3_15s.mp3',
 ];
 
+const externalAudioAssetArray = [
+  'https://codeskulptor-demos.commondatastorage.googleapis.com/GalaxyInvaders/theme_01.mp3',
+  'https://codeskulptor-demos.commondatastorage.googleapis.com/pang/paza-moduless.mp3',
+];
+
 copyFilesToAndroidResources();
 
 /**
  * List of file objects with information about the files.
  * @type {ListItem[]}
  */
-export const audioListArray: ListItem[] = audioAssetArray.map(
+const audioList: ListItem[] = audioAssetArray.map((value, index) => ({
+  fromCurrentUser: index % 2 !== 0,
+  path: `${filePath}/${value}`,
+}));
+
+const externalAudioList: ListItem[] = externalAudioAssetArray.map(
   (value, index) => ({
     fromCurrentUser: index % 2 !== 0,
-    path: `${filePath}/${value}`,
+    path: value,
+    isExternalUrl: true,
   })
 );
+
+export const audioListArray: ListItem[] = [...audioList, ...externalAudioList];

example/src/constants/Audios.ts

@@ -37,10 +37,12 @@ const styles = (params: StyleSheetParams = {}) =>
     },
     listItemContainer: {
       marginTop: scale(16),
-      alignItems: params.currentUser ? 'flex-end' : 'flex-start',
+      flexDirection: 'row',
+      justifyContent: params.currentUser ? 'flex-end' : 'flex-start',
+      alignItems: 'center',
     },
     listItemWidth: {
-      width: '90%',
+      width: '89%',
     },
     buttonImage: {
       height: '100%',
@@ -90,6 +92,13 @@ const styles = (params: StyleSheetParams = {}) =>
     loadingText: {
       color: Colors.black,
     },
+    downloadIcon: {
+      width: 20,
+      height: 20,
+      tintColor: Colors.pink,
+      marginLeft: 10,
+      marginRight: 10,
+    },
   });
 
 export default styles;

example/src/styles.ts

@@ -110,6 +110,7 @@
     ]
   },
   "dependencies": {
-    "lodash": "^4.17.21"
+    "lodash": "^4.17.21",
+    "rn-fetch-blob": "^0.12.0"
   }
-}
+}