diff --git a/package-lock.json b/package-lock.json index 57391fe..30b47ab 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,7 +9,7 @@ "version": "0.1.0", "dependencies": { "@fortawesome/fontawesome-svg-core": "^6.1.2", - "@fortawesome/free-solid-svg-icons": "^6.1.2", + "@fortawesome/free-solid-svg-icons": "^6.4.0", "@fortawesome/react-fontawesome": "^0.2.0", "@testing-library/jest-dom": "^5.16.4", "@testing-library/react": "^13.3.0", diff --git a/package.json b/package.json index 40bc107..7bd1dac 100644 --- a/package.json +++ b/package.json @@ -4,7 +4,7 @@ "private": true, "dependencies": { "@fortawesome/fontawesome-svg-core": "^6.1.2", - "@fortawesome/free-solid-svg-icons": "^6.1.2", + "@fortawesome/free-solid-svg-icons": "^6.4.0", "@fortawesome/react-fontawesome": "^0.2.0", "@testing-library/jest-dom": "^5.16.4", "@testing-library/react": "^13.3.0", diff --git a/src/views/components/Player.tsx b/src/views/components/Player.tsx index ab673fd..b4e7e98 100644 --- a/src/views/components/Player.tsx +++ b/src/views/components/Player.tsx @@ -7,7 +7,6 @@ import { useCallback } from 'react'; const Player = ({ audioElement, currentSongTime, - setCurrentSongTime, songDuration, currentSongIndex, setCurrentSongIndex, @@ -16,16 +15,16 @@ const Player = ({ skipSongFunction, isPlaying, setIsPlaying, + isRepeat, + setIsRepeat, prevSongIndex, trackProgress, - startTimerFunction, onScrubFunction, pauseAudioFunction, playAudioFunction, }: { audioElement: React.MutableRefObject, currentSongTime: number, - setCurrentSongTime: Function, songDuration: number, currentSongIndex: number, setCurrentSongIndex: Function, @@ -34,9 +33,10 @@ const Player = ({ skipSongFunction: Function, isPlaying: boolean, setIsPlaying: Function, + isRepeat: boolean, + setIsRepeat: Function, prevSongIndex: number, trackProgress: number, - startTimerFunction: Function, onScrubFunction: Function, pauseAudioFunction: Function, playAudioFunction: Function, @@ -48,10 +48,10 @@ const Player = ({ }; useEffect(() => { - console.log('looking at isPlaying'); + // console.log('looking at isPlaying'); if (isPlaying) { playAudioFunction(); - startTimerFunction(); + // startTimerFunction(); } else { pauseAudioFunction(); } @@ -79,6 +79,8 @@ const Player = ({ currentSongIndex={currentSongIndex} nextSongIndex={nextSongIndex} prevSongIndex={prevSongIndex} + isRepeat={isRepeat} + setIsRepeat={setIsRepeat} /> {/*

Next up: {songs[nextSongIndex].getSong.title} by {songs[nextSongIndex].getSong.artist}

*/} diff --git a/src/views/components/PlayerControls.tsx b/src/views/components/PlayerControls.tsx index 804995d..f104968 100644 --- a/src/views/components/PlayerControls.tsx +++ b/src/views/components/PlayerControls.tsx @@ -2,7 +2,19 @@ import React from 'react' import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' import {faShuffle, faBackward, faPause, faPlay, faForward, faRepeat} from '@fortawesome/free-solid-svg-icons' -const PlayerControls = ({ isPlaying, setIsPlaying, skipSong, currentSongIndex, nextSongIndex, prevSongIndex }: { isPlaying: boolean, setIsPlaying: Function, skipSong: Function, currentSongIndex: number, nextSongIndex: number, prevSongIndex: number }) => { +interface PlaterControlsInterface { + isPlaying: boolean, + setIsPlaying: Function, + isRepeat: boolean, + setIsRepeat: Function, + skipSong: Function, + currentSongIndex: number, + nextSongIndex: number, + prevSongIndex: number +} + + +const PlayerControls = ({ isPlaying, setIsPlaying, isRepeat, setIsRepeat, skipSong, currentSongIndex, nextSongIndex, prevSongIndex }: PlaterControlsInterface) => { // const PlayerControls = return (
@@ -18,9 +30,9 @@ const PlayerControls = ({ isPlaying, setIsPlaying, skipSong, currentSongIndex, n - {/* */} +
) } diff --git a/src/views/screens/MainScreenPortrait.tsx b/src/views/screens/MainScreenPortrait.tsx index 41b95d5..c2b07f4 100644 --- a/src/views/screens/MainScreenPortrait.tsx +++ b/src/views/screens/MainScreenPortrait.tsx @@ -10,74 +10,81 @@ const MainScreenPortrait = ({versionNumber}: {versionNumber: string}) => { // const [currentSongIndex, setCurrentSongIndex] = useState(0); const [nextSongIndex, setNextSongIndex] = useState(0); const [prevSongIndex, setPrevSongIndex] = useState(0); - const [isPlaying, setIsPlaying] = useState(false); - const [currentSongTime, setCurrentSongTime] = useState(0); + + const newCurrentSongTime = useRef(0); + const newSongDurationTime = useRef(0); // const intervalRef: React.MutableRefObject = useRef(0); var intervalRef: number = 0; const [trackProgress, setTrackProgress] = useState(0); - + const isShuffle: React.MutableRefObject = useRef(false); + const isRepeat: React.MutableRefObject = useRef(false); const audioElement: React.MutableRefObject = useRef(new Audio()); + const [isPlaying, setIsPlaying] = useState(!audioElement.current.paused); - const _startTimer = useCallback(() => { - intervalRef = setInterval(() => { - setTrackProgress(audioElement.current.currentTime); - - if(audioElement.current.currentTime === audioElement.current.duration) { - console.log("song has ended"); - selectSong(_getNextSongIndex(currentSongInd.current)); - clearInterval(intervalRef); - setTrackProgress(0); - } + // Keeps track of IsPlaying + useEffect(() => { + setIsPlaying(!audioElement.current.paused) + }, [audioElement.current.paused]) + + useEffect(() => { + loadModal(); + _playAudio(); + }, [audioElement.current.src]) + + useEffect(() => { + console.log('end'); + _checkForEndOfSong(); + }, [audioElement.current.ended]) + + // interval + useEffect(() => { + const interval = setInterval(() => { + _updateTrackProgress(); + // _checkForEndOfSong(); + console.log(audioElement.current.ended); }, 1000); - }, []); + return () => clearInterval(interval); + }, []) + + // updates the actual track progress + function _updateTrackProgress() { + newCurrentSongTime.current = audioElement.current.currentTime; + newSongDurationTime.current = audioElement.current.duration; + setTrackProgress(newCurrentSongTime.current); + } + + // checks for end of the song, check for if repeat is on or not + function _checkForEndOfSong() { + // if( newCurrentSongTime.current === newSongDurationTime.current ){ + // if( !isPlaying ) { + console.log('song has ended'); + if( isRepeat.current ){ + selectSong(currentSongInd.current); + _playAudio(); + } else { + selectSong(_getNextSongIndex(currentSongInd.current)); + _playAudio(); + } + // } + // } + } + + function _toggleIsRepeat(){ + isRepeat.current = !isRepeat.current; + } function _pauseAudio() { audioElement.current.pause(); - setIsPlaying(false); }; - function _loadAudio(){ - audioElement.current.load(); - audioElement.current.src = songs[currentSongInd.current].getSong.songLocationOnline; - setIsPlaying(false); - - } - const _playAudio = useCallback(() => { - // // audioElement.current.src = songs[currentSongInd.current].getSong.songLocationOnline; - // console.log(songs[currentSongInd.current].getSong.songLocationOnline); - // fetch(songs[currentSongInd.current].getSong.songLocationOnline, { - // mode: 'no-cors', - // }) - // .then(response => { - // console.log(`response: ${response.url}`); - // response.blob() - // }) - // .then(blob => { - // console.log(blob); - // // audioElement.current.srcObject = blob; - // // return audioElement.current.play(); - // }) - // .then(_ => { - // setIsPlaying(true); - // console.log('The play() Promise fulfilled! Rock on!'); - // }) - // .catch(e => { - // setIsPlaying(false); - // console.log('The play() Promise rejected!'); - // console.log('error: ' + e); - - // }) var playPromise = audioElement.current.play(); - console.log(playPromise); console.log('Attempting to play automatically...'); if (playPromise !== undefined) { // if (playPromise === 'fulfilled') { playPromise - .then(() => { - setIsPlaying(true); - + .then(() => { console.log('The play() Promise fulfilled! Rock on!'); document.getElementById("errorMessage")!.innerHTML = ''; document.getElementById("errorMessage")!.style.display = 'none'; @@ -87,10 +94,9 @@ const MainScreenPortrait = ({versionNumber}: {versionNumber: string}) => { console.log('error: ' + error); document.getElementById("errorMessage")!.innerHTML = error; document.getElementById("errorMessage")!.style.display = 'block'; - _pauseAudio(); + // _pauseAudio(); }) } - setIsPlaying(true); }, [isPlaying]); const _getNextSongIndex = (currSongIndex: number) => { @@ -103,6 +109,7 @@ const MainScreenPortrait = ({versionNumber}: {versionNumber: string}) => { return _temp; } + const _getPrevSongIndex = (currSongIndex: number) => { let _temp = currSongIndex; _temp--; @@ -114,7 +121,6 @@ const MainScreenPortrait = ({versionNumber}: {versionNumber: string}) => { } function selectSong (index: number) { - // _pauseAudio(); currentSongInd.current = index; setNextSongIndex(_getNextSongIndex(index)); setPrevSongIndex(_getPrevSongIndex(index)); @@ -148,21 +154,13 @@ const MainScreenPortrait = ({versionNumber}: {versionNumber: string}) => { setTrackProgress(audioElement.current.currentTime); } - useEffect(() => { - _pauseAudio(); - loadModal(); - _loadAudio(); - _playAudio(); - }, [currentSongInd.current]); - return (
{/* */} { songs={songs} isPlaying={isPlaying} setIsPlaying={setIsPlaying} + isRepeat={isRepeat.current} + setIsRepeat={_toggleIsRepeat} skipSongFunction={selectSong} prevSongIndex={prevSongIndex} onScrubFunction={onScrub} trackProgress={trackProgress} - startTimerFunction={_startTimer} + // startTimerFunction={_startTimer} pauseAudioFunction={_pauseAudio} playAudioFunction={_playAudio} + />