Skip to content

Commit

Permalink
Updating front-end structure, bug fixes
Browse files Browse the repository at this point in the history
  • Loading branch information
@lainshiHenry
lainshiHenry committed Jun 19, 2023
1 parent 4838c2c commit 59ba11e
Show file tree
Hide file tree
Showing 5 changed files with 91 additions and 76 deletions.
2 changes: 1 addition & 1 deletion package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
14 changes: 8 additions & 6 deletions src/views/components/Player.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,6 @@ import { useCallback } from 'react';
const Player = ({
audioElement,
currentSongTime,
setCurrentSongTime,
songDuration,
currentSongIndex,
setCurrentSongIndex,
Expand All @@ -16,16 +15,16 @@ const Player = ({
skipSongFunction,
isPlaying,
setIsPlaying,
isRepeat,
setIsRepeat,
prevSongIndex,
trackProgress,
startTimerFunction,
onScrubFunction,
pauseAudioFunction,
playAudioFunction,
}: {
audioElement: React.MutableRefObject<HTMLAudioElement>,
currentSongTime: number,
setCurrentSongTime: Function,
songDuration: number,
currentSongIndex: number,
setCurrentSongIndex: Function,
Expand All @@ -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,
Expand All @@ -48,10 +48,10 @@ const Player = ({
};

useEffect(() => {
console.log('looking at isPlaying');
// console.log('looking at isPlaying');
if (isPlaying) {
playAudioFunction();
startTimerFunction();
// startTimerFunction();
} else {
pauseAudioFunction();
}
Expand Down Expand Up @@ -79,6 +79,8 @@ const Player = ({
currentSongIndex={currentSongIndex}
nextSongIndex={nextSongIndex}
prevSongIndex={prevSongIndex}
isRepeat={isRepeat}
setIsRepeat={setIsRepeat}
/>
{/* <p><strong>Next up:</strong> {songs[nextSongIndex].getSong.title} by {songs[nextSongIndex].getSong.artist}</p> */}
</div>
Expand Down
20 changes: 16 additions & 4 deletions src/views/components/PlayerControls.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 (
<div className='c-player--controls'>
Expand All @@ -18,9 +30,9 @@ const PlayerControls = ({ isPlaying, setIsPlaying, skipSong, currentSongIndex, n
<button className='skip-btn' onClick={() => skipSong(nextSongIndex)}>
<FontAwesomeIcon icon={faForward} />
</button>
{/* <button className='repeat-btn selectionActive' onClick={() => {}}>
<FontAwesomeIcon icon={faRepeat} />
</button> */}
<button className='repeat-btn' onClick={() => {setIsRepeat(!isRepeat); console.log(`repeat is ${!isRepeat}`)}}>
<FontAwesomeIcon icon={faRepeat} pulse={isRepeat ? true : false} color={isRepeat ? '#000' : '#888'}/>
</button>
</div>
)
}
Expand Down
129 changes: 65 additions & 64 deletions src/views/screens/MainScreenPortrait.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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<number> = useRef(0);
var intervalRef: number = 0;
const [trackProgress, setTrackProgress] = useState(0);

const isShuffle: React.MutableRefObject<boolean> = useRef(false);
const isRepeat: React.MutableRefObject<boolean> = useRef(false);
const audioElement: React.MutableRefObject<HTMLAudioElement> = 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';
Expand All @@ -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) => {
Expand All @@ -103,6 +109,7 @@ const MainScreenPortrait = ({versionNumber}: {versionNumber: string}) => {
return _temp;
}


const _getPrevSongIndex = (currSongIndex: number) => {
let _temp = currSongIndex;
_temp--;
Expand All @@ -114,7 +121,6 @@ const MainScreenPortrait = ({versionNumber}: {versionNumber: string}) => {
}

function selectSong (index: number) {
// _pauseAudio();
currentSongInd.current = index;
setNextSongIndex(_getNextSongIndex(index));
setPrevSongIndex(_getPrevSongIndex(index));
Expand Down Expand Up @@ -148,35 +154,30 @@ const MainScreenPortrait = ({versionNumber}: {versionNumber: string}) => {
setTrackProgress(audioElement.current.currentTime);
}

useEffect(() => {
_pauseAudio();
loadModal();
_loadAudio();
_playAudio();
}, [currentSongInd.current]);

return (
<div className='mainScreenLayoutPortrait'>
{/* <button id="playlistModalButton">Open Modal</button> */}
<Player
audioElement={audioElement}
songDuration={audioElement.current.duration}
currentSongTime={audioElement.current.currentTime}
setCurrentSongTime={setCurrentSongTime}
songDuration={newSongDurationTime.current}
currentSongTime={newCurrentSongTime.current}
// currentSongIndex={currentSongIndex}
currentSongIndex={currentSongInd.current}
setCurrentSongIndex={selectSong}
nextSongIndex={nextSongIndex}
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}

/>
<Playlist
songs={songs}
Expand Down

0 comments on commit 59ba11e

Please sign in to comment.