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