feat(UNT-T27088): external url support

[nilesh-simform]

• added support for external URL

[kuldip-simform]

@nilesh-simform Can you please check if we are downloading audio files every time, or is it doing caching and taking file paths from cached data for the same file a second time?

If it is cached, is the downloaded media permanent or not? If yes, can we pass a file path to which we can download audio?

[nilesh-simform]

@nilesh-simform Can you please check if we are downloading audio files every time, or is it doing caching and taking file paths from cached data for the same file a second time?

If it is cached, is the downloaded media permanent or not? If yes, can we pass a file path to which we can download audio?

Yes, it is downloading audio temporarily every time, I have also added mechanism to remove temporary file on unmounting of waveform

[kuldip-simform]

@nilesh-simform Can you please check if we are downloading audio files every time, or is it doing caching and taking file paths from cached data for the same file a second time?
If it is cached, is the downloaded media permanent or not? If yes, can we pass a file path to which we can download audio?

Yes, it is downloading audio temporarily every time, I have also added mechanism to remove temporary file on unmounting of waveform

This is fine for smaller files but for large files this does not seem right to me. @mukesh-simform Can you please check?

[hamzadar2013]

@kuldip-simform @nilesh-simform when will u merge these changes i badly need url support

[hamzadar2013]

@nilesh-simform I hope you are fine when will you merge flatlist issues changes in master from develop?

[SyedZawwarAhmed]

@kuldip-simform @nilesh-simform please merge these changes, I also need url support

[moeezally]

@nilesh-simform Please merge this, I need external url support for the waveform. thanks

[moeezally]

@mukesh-simform kindly review this merge, I need the external url support for the waveform asap, thanks.

[moeezally]

@mukesh-simform @nilesh-simform Still waiting for the successful merge guys! :|

[moeezally]

@nilesh-simform @mukesh-simform guys can you let us know till when can we expect this PR to be merged? Will it still take considerable time? Please let us know, thanks! :)

[thetaungg]

@moeezally @SyedZawwarAhmed @hamzadar2013

If you need it urgently,

• you can just clone the repo
• checkout to this branch
• build it using yarn build:local
• extract the .tgz file it created
• and create a patch using it.

It should work as a temporary solution until this is merged. I tested it.

[MADahab]

For any one need support for remote url urgently, there is a workaround, you can check if the url is remote, if so download it and use the local url and if not remote use the provided url
this is my code example for a component that have the waveform with play and pause button where the audioUri can be local or external url

import React, { useEffect, useRef, useState } from 'react';
import * as FileSystem from 'expo-file-system';
import {
  PlayerState,
  Waveform,
  type IWaveformRef,
} from '@simform_solutions/react-native-audio-waveform';
import { Ionicons } from '@expo/vector-icons';
import { Text, View } from 'react-native';

interface AudioPlayerProps {
  audioUri: string;
}

export const AudioPlayer = ({ audioUri }: AudioPlayerProps) => {
  const ref = useRef<IWaveformRef>(null);
  const [localUri, setLocalUri] = useState<string | null>(null);
  const [isPlaying, setIsPlaying] = useState<PlayerState | undefined>(undefined);

  useEffect(() => {
    (async () => {
      try {
        if (audioUri.startsWith('https://')) {
          // Download the audio file from the remote URL
          const fileUri = `${FileSystem.cacheDirectory}${audioUri.split('/').pop()}`;
          const { exists } = await FileSystem.getInfoAsync(fileUri);

          if (!exists) {
            // If file doesn't exist locally, download it
            await FileSystem.downloadAsync(audioUri, fileUri);
          }

          setLocalUri(fileUri);
        } else {
          // If it's a local file, use it directly
          setLocalUri(audioUri);
        }
      } catch (error) {
        console.error('Error fetching or downloading audio:', error);
      }
    })();
  }, [audioUri]);

  if (!localUri) {
    return <Text style={{ color: 'black' }}>Loading Audio</Text>;
  }

  return (
    <View
      style={{
        flex: 1,
        padding: 0,
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'center',
        height: 20,
        minWidth: 200,
        backgroundColor: '#00000000',
      }}
    >
      {isPlaying !== 'playing' ? (
        <Ionicons
          onPress={() => ref.current?.startPlayer()}
          name="play"
          size={24}
          color='black'
        />
      ) : (
        <Ionicons
          onPress={() => ref.current?.pausePlayer()}
          name="pause-circle"
          size={24}
          color='black'
        />
      )}

      <Waveform
        ref={ref}
        mode="static"
        path={localUri}
        candleSpace={1}
        scrubColor="grey"
        candleHeightScale={10}
        waveColor='black'
        containerStyle={{ padding: 0, height: 40, flex: 1 }}
        onPanStateChange={(isMoving) => console.log(isMoving)}
        onPlayerStateChange={(playerState) => setIsPlaying(playerState)}
      />
    </View>
  );
};

[Bayramito]

Is it possible to add .wav file support too @nilesh-simform ?

[pradipbhanderi]

@kuldip-simform @nilesh-simform please merge these changes, I also need url support

[ghost]

@nilesh-simform are you cleaning the cache? i m not sure but im not finding this part of code.

[kauan777]

@nilesh-simform @kuldip-simform @nilesh-simform

I did found a provisional solution.

I took the liberty of creating a separate code based on yours. I solved the following problems

• Clear cache with customizable time
• Dragging to external URLs (mp3, m4a...)
• A function to fetch the Duration
• A function to see the cache
• A function to clear the entire cache
• A function to clear the cache of expired audios (they shouldn't be in the cache anymore)
• You no longer need to export the code to your own, I've created an export.js script, so you just need to access this file and change the path and then run the patches in your original code.

Remember that my intention is not to harm or copy the project, but to contribute :)

If you need another contributor, I'm available.

https://github.com/kauan777/wave-lib