feat(UNT-T27088): external url support

nilesh-simform · nilesh-simform · commit 631e0bb32949 · 2024-09-20T11:33:54.000+05:30
diff --git a/README.md b/README.md
@@ -33,13 +33,13 @@ Here's how to get started with react-native-audio-waveform in your React Native
 ##### 1. Install the package
 
 ```sh
-npm install @simform_solutions/react-native-audio-waveform react-native-gesture-handler
+npm install @simform_solutions/react-native-audio-waveform react-native-gesture-handler rn-fetch-blob
 ```
 
 ###### --- or ---
 
 ```sh
-yarn add @simform_solutions/react-native-audio-waveform react-native-gesture-handler
+yarn add @simform_solutions/react-native-audio-waveform react-native-gesture-handler rn-fetch-blob
 ```
 
 ##### 2. Install CocoaPods in the iOS project
@@ -90,7 +90,34 @@ 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://www2.cs.uic.edu/~i101/SoundFiles/taunt.wav'; // 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"
@@ -133,6 +160,9 @@ You can check out the full example at [Example](./example/src/App.tsx).
 | 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.                                                                                                                                                                        |
 | 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   |
+| 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                                                                                                                                                                                                       |
@@ -145,6 +175,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)
diff --git a/example/src/App.tsx b/example/src/App.tsx
@@ -25,6 +25,7 @@ import {
   ScrollView,
   StatusBar,
   Text,
+  TouchableOpacity,
   View,
 } from 'react-native';
 import { GestureHandlerRootView } from 'react-native-gesture-handler';
@@ -49,27 +50,40 @@ const RenderListItem = React.memo(
     onPanStateChange,
     currentPlaybackSpeed,
     changeSpeed,
+    isExternalUrl = false,
   }: {
     item: ListItem;
     currentPlaying: string;
     setCurrentPlaying: Dispatch<SetStateAction<string>>;
     onPanStateChange: (value: boolean) => void;
     currentPlaybackSpeed: PlaybackSpeedType;
     changeSpeed: () => 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 [isLoading, setIsLoading] = useState(isExternalUrl ? false : true);
+    const [downloadExternalAudio, setDownloadExternalAudio] = useState(false);
+    const [isAudioDownloaded, setIsAudioDownloaded] = useState(false);
 
-    const handleButtonAction = () => {
+    const handleButtonAction = (): void => {
       if (playerState === PlayerState.stopped) {
         setCurrentPlaying(item.path);
       } else {
         setCurrentPlaying('');
       }
     };
 
+    const handleDownloadPress = (): void => {
+      setDownloadExternalAudio(true);
+      if (currentPlaying === item.path) {
+        setCurrentPlaying('');
+      }
+
+      setIsLoading(true);
+    };
+
     useEffect(() => {
       if (currentPlaying !== item.path) {
         ref.current?.stopPlayer();
@@ -79,7 +93,15 @@ const RenderListItem = React.memo(
     }, [currentPlaying]);
 
     return (
-      <View key={item.path} style={[styles.listItemContainer]}>
+      <View
+        key={item.path}
+        style={[
+          styles.listItemContainer,
+          item.fromCurrentUser &&
+            isExternalUrl &&
+            !isAudioDownloaded &&
+            styles.listItemReverseContainer,
+        ]}>
         <View style={styles.listItemWidth}>
           <ImageBackground
             source={
@@ -118,6 +140,7 @@ const RenderListItem = React.memo(
               scrubColor={Colors.white}
               waveColor={Colors.gray}
               candleHeightScale={4}
+              downloadExternalAudio={downloadExternalAudio}
               onPlayerStateChange={state => {
                 setPlayerState(state);
                 if (
@@ -127,10 +150,20 @@ const RenderListItem = 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 ',
@@ -154,6 +187,15 @@ const RenderListItem = React.memo(
             )}
           </ImageBackground>
         </View>
+        {isExternalUrl && !downloadExternalAudio && !isAudioDownloaded ? (
+          <TouchableOpacity onPress={handleDownloadPress}>
+            <Image
+              source={Icons.download}
+              style={styles.downloadIcon}
+              resizeMode="contain"
+            />
+          </TouchableOpacity>
+        ) : null}
       </View>
     );
   }
@@ -281,6 +323,7 @@ const AppContainer = () => {
                   currentPlaying={currentPlaying}
                   setCurrentPlaying={setCurrentPlaying}
                   item={item}
+                  isExternalUrl={item.isExternalUrl}
                   onPanStateChange={value => setShouldScroll(!value)}
                   {...{ currentPlaybackSpeed, changeSpeed }}
                 />
diff --git a/example/src/assets/icons/download.png b/example/src/assets/icons/download.png
diff --git a/example/src/assets/icons/index.ts b/example/src/assets/icons/index.ts
@@ -4,4 +4,5 @@ export const Icons = {
   simform: require('./simform.png'),
   mic: require('./mic.png'),
   logo: require('./logo.png'),
+  download: require('./download.png'),
 };
diff --git a/example/src/constants/Audios.ts b/example/src/constants/Audios.ts
@@ -5,6 +5,7 @@ import { globalMetrics } from '../../src/theme';
 export interface ListItem {
   fromCurrentUser: boolean;
   path: string;
+  isExternalUrl?: boolean;
 }
 
 /**
@@ -69,6 +70,11 @@ 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',
+];
+
 /**
  * Generate a list of file objects with information about successfully copied files (Android)
  * or all files (iOS).
@@ -78,8 +84,18 @@ export const generateAudioList = async (): Promise<ListItem[]> => {
   const audioAssets = await copyFilesToNativeResources();
 
   // Generate the final list based on the copied or available files
-  return audioAssets?.map?.((value, index) => ({
+  const localAssetList = audioAssets?.map?.((value, index) => ({
     fromCurrentUser: index % 2 !== 0,
     path: `${filePath}/${value}`,
   }));
+
+  const externalAudioList: ListItem[] = externalAudioAssetArray.map(
+    (value, index) => ({
+      fromCurrentUser: index % 2 !== 0,
+      path: value,
+      isExternalUrl: true,
+    })
+  );
+
+  return [...localAssetList, ...externalAudioList];
 };
diff --git a/example/src/styles.ts b/example/src/styles.ts
@@ -39,10 +39,16 @@ 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',
+    },
+    listItemReverseContainer: {
+      flexDirection: 'row-reverse',
+      alignSelf: 'flex-end',
     },
     listItemWidth: {
-      width: '90%',
+      width: '88%',
     },
     buttonImage: {
       height: scale(22),
@@ -107,6 +113,13 @@ const styles = (params: StyleSheetParams = {}) =>
       textAlign: 'center',
       fontWeight: '600',
     },
+    downloadIcon: {
+      width: 20,
+      height: 20,
+      tintColor: Colors.pink,
+      marginLeft: 10,
+      marginRight: 10,
+    },
   });
 
 export default styles;
diff --git a/package.json b/package.json
@@ -110,6 +110,7 @@
     ]
   },
   "dependencies": {
-    "lodash": "^4.17.21"
+    "lodash": "^4.17.21",
+    "rn-fetch-blob": "^0.12.0"
   }
-}
+}
diff --git a/src/components/Waveform/Waveform.tsx b/src/components/Waveform/Waveform.tsx
diff --git a/src/components/Waveform/WaveformTypes.ts b/src/components/Waveform/WaveformTypes.ts

Original file line number	Diff line number	Diff line change
`@@ -110,6 +110,7 @@`
`110`	`110`	`]`
`111`	`111`	`},`
`112`	`112`	`"dependencies": {`
`113`		`- "lodash": "^4.17.21"`
	`113`	`+ "lodash": "^4.17.21",`
	`114`	`+ "rn-fetch-blob": "^0.12.0"`
`114`	`115`	`}`
`115`		`-}`
	`116`	`+}`