seth
/
jam-cloud
mirror of https://bitbucket.org/jamkazam/jam-cloud.git
1
0
Fork 0
Code Issues Actions Packages Projects Releases Wiki Activity

fix js variable reference error on loading the audio player component

This commit is contained in:
Nuwan 2024-12-27 13:21:38 +05:30
parent 6368897b21
commit 04a7445f68
1 changed files with 39 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

77
jam-ui/src/components/jamtracks/JKAudioPlayer.js
View File

@ -23,7 +23,7 @@ const JKAudioPlayer = ({ audioUrl }) => {
useEffect(() => {
if (!audio || !audioPlayer) return;
if(audio){
if (audio) {
stopAudio();
}
const audioLoadedDataEventListener = audio.addEventListener("loadeddata", () => {
@ -44,7 +44,7 @@ const JKAudioPlayer = ({ audioUrl }) => {
//audio.play();
return () => {
if(audio){
if (audio) {
stopAudio();
audio.removeEventListener("loadeddata", audioLoadedDataEventListener);
clearInterval(audioPercentageCheckInterval);
@ -110,7 +110,6 @@ const JKAudioPlayer = ({ audioUrl }) => {
audioPlayer.current.querySelector(".controls .volume-percentage").style.width = volume * 100 + '%';
}
function getTimeCodeFromNum(num) {
let seconds = parseInt(num);
let minutes = parseInt(seconds / 60);
@ -125,49 +124,51 @@ const JKAudioPlayer = ({ audioUrl }) => {
}
return (
<div className="audio-player" ref={audioPlayer}>
audioUrl && audio && (
<div className="audio-player" ref={audioPlayer}>
<div className="controls">
<div className="play-container">
<button
onClick={togglePlayPause}
className="play-pause-button"
>
{isPlaying ? (
<img src={pauseIcon} alt="Pause" width="30" />
) : (
<img src={playIcon} alt="Play" width="30" />
)}
</button>
</div>
<div className="time">
<div className="current">0:00</div>
<div className="divider">/</div>
<div className="length"></div>
</div>
{/* <div className="name">Music Song</div> */}
<div className="timeline" onClick={onClickTimeline}>
<div className="progress"></div>
</div>
<div className="volume-container">
<div className="volume-button" onClick={onVolumeButtonClick}>
<div className="volume">
{isMuted ? (
<FontAwesomeIcon icon="volume-off" width={30} height={30} />
<div className="controls">
<div className="play-container">
<button
onClick={togglePlayPause}
className="play-pause-button"
>
{isPlaying ? (
<img src={pauseIcon} alt="Pause" width="30" />
) : (
<FontAwesomeIcon icon="volume-up" width={30} height={30} />
<img src={playIcon} alt="Play" width="30" />
)}
</div>
</button>
</div>
<div className="time">
<div className="current">0:00</div>
<div className="divider">/</div>
<div className="length"></div>
</div>
{/* <div className="name">Music Song</div> */}
<div className="timeline" onClick={onClickTimeline}>
<div className="progress"></div>
</div>
<div className="volume-container">
<div className="volume-button" onClick={onVolumeButtonClick}>
<div className="volume">
{isMuted ? (
<FontAwesomeIcon icon="volume-off" width={30} height={30} />
) : (
<FontAwesomeIcon icon="volume-up" width={30} height={30} />
)}
</div>
</div>
<div className="volume-slider" onClick={onVolumeSliderClick}>
<div className="volume-percentage"></div>
<div className="volume-slider" onClick={onVolumeSliderClick}>
<div className="volume-percentage"></div>
</div>
</div>
</div>
</div>
</div>
)
)
);
}
export default JKAudioPlayer