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,7 @@ 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. |
+| isExternalUrl | false | ✅ | ❌ | boolean | Used for `static` type. If the resource path of an audio file is a URL, then pass true; otherwise, pass false. |
 | 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 +163,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

@@ -41,11 +41,13 @@ 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);
@@ -116,10 +118,17 @@ 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}%`);
+              }}
               onCurrentProgressChange={(currentProgress, songDuration) => {
                 console.log(
                   'currentProgress ',
@@ -241,6 +250,7 @@ const AppContainer = () => {
                   currentPlaying={currentPlaying}
                   setCurrentPlaying={setCurrentPlaying}
                   item={item}
+                  isExternalUrl={item.isExternalUrl}
                   onPanStateChange={value => setShouldScroll(!value)}
                 />
               ))}

example/src/constants/Audios.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];

package.json

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