Skip to content

Commit

Permalink
Merge pull request #8 from Mento1oS/dev-t
Browse files Browse the repository at this point in the history 
my playlist not reachable
  • Loading branch information
@Mento1oS
Mento1oS authored Oct 27, 2023
2 parents 60f168b + d9d7cf3 commit a0124f6
Show file tree
Hide file tree
Showing 31 changed files with 3,613 additions and 3,060 deletions.
34 changes: 33 additions & 1 deletion README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,39 @@ This project was bootstrapped with [Create React App](https://github.com/faceboo

# оценочное время на д/з по редаксу - 5 часов.

# итоговое время на д/з ао редаксу - 8 часов.
# итоговое время на д/з по редаксу - 8 часов.

# оценочное время на 2 д/з по редаксу - 8 часов.

# итоговое время на 2 д/з ао редаксу - 12 часов.

# оценочное время на доделывание курсовой - 10 часов.

# итоговое время на доделывание курсовой - 10 часов.

# Работает вход, выход и регистрация

# Работает страница "Главное"

# Работает поиск и фильтрация на странице "Главное"

# Работает механика лайков (снять и поставить лайк) и страница "Мой плейлист"

# Работают переходы на страницы с подборками и сами страницы с подборками, при переходах между страницами музыка не прекращает играть

# На всех страницах с треками можно выбрать трек и начнется воспроизведение трека

# После того как заканчивается текущий трек, включается следующий трек из текущего плейлиста

# Работает ручное переключение треков назад и вперед кнопками

# Работает функция "перемешать треки"

# Работает управление воспроизведением: play, pause, громкость и зацикливание

# Работают фильтры, сортировка и поиск треков

# Приложением удобно пользоваться

## Available Scripts

Expand Down
5,532 changes: 2,610 additions & 2,922 deletions package-lock.json
View file

Large diffs are not rendered by default.

Binary file modified public/img/playlist01.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified public/img/playlist02.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified public/img/playlist03.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 0 additions & 4 deletions src/App.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,10 +8,6 @@ import { setCurrentTheme } from './store/slices/themeSlice';
function App() {
const dispatch = useDispatch();
const currentTheme = useSelector(state=>state.theme.currentTheme);
// const [user, setUser] = useState({
// mail: '',
// password: '',
// password__double: ''});
useEffect(()=>{
dispatch(setCurrentTheme(themes.dark));
},[]);
Expand Down
10 changes: 0 additions & 10 deletions src/pages/Compilation/components/Compilation/Compilation.jsx
View file

This file was deleted.

4 changes: 0 additions & 4 deletions src/pages/Compilation/components/Compilation/styles.js
View file

This file was deleted.

94 changes: 71 additions & 23 deletions src/pages/Main/components/Bar/Bar.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,9 +13,18 @@ import { StyledBar, StyledBar__Content, StyledBar__Player_Block,
Styled__Btn_Play_Svg, Styled__Btn_Prev_Svg, Styled__Btn_Repeat_Svg, Styled__Btn_Shuffle_Svg } from "./styles";
import { useThemeContext } from "../../../../providers/ThemeProvider";
import { useDispatch, useSelector } from "react-redux";
import { toggleMute, toggleLoop, togglePlay, setCurrentDuration, setCurrentTime, playNextSong, playPrevSong, toggleShuffle } from "../../../../store/slices/playerSlice";
import { useGetFavoriteSongsQuery, useGetAllTracksQuery, useAddSongToFavoritesMutation, useDeleteSongFromFavoritesMutation } from "../../../../store/middlewares/favorites";
import { toggleMute, toggleLoop, togglePlay, setCurrentDuration, setCurrentTime, playNextSong,
playPrevSong, toggleShuffle, findCategoryArray, addSongToMyShuffledPlaylist, deleteSongFromMyShuffledPlaylist } from "../../../../store/slices/playerSlice";
function Bar(props){
const isOnCategory = useSelector(state=>state.player.isOnCategory);
const accessToken = useSelector(state=>state.user.accessToken);
const {data = []} = useGetFavoriteSongsQuery({
accessToken: accessToken});
const dispatch = useDispatch();
const [likeSong] = useAddSongToFavoritesMutation();
const [dislikeSong] = useDeleteSongFromFavoritesMutation();
const onMyPlaylist = useSelector(state=>state.player.onMyPlaylist);
const isMuted = useSelector(state => state.player.isMuted);
const isLoop = useSelector(state => state.player.isLoop);
const isPlaying = useSelector(state => state.player.isPlaying);
Expand All @@ -24,6 +33,30 @@ function Bar(props){
const currentTime = useSelector(state => state.player.currentTime);
const isShuffle = useSelector(state=> state.player.isShuffle);
const audioRef = useRef(null);
const wasChosenOnCategory = useSelector(state=>state.player.wasChosenOnCategory);
const rockTracks = useSelector(state=>state.player.rockTracks);
const electricTracks = useSelector(state=>state.player.electricTracks);
const classicTracks = useSelector(state=>state.player.classicTracks);
const handleLike = async ()=>{
try{
await likeSong({id: currentSong.id, accessToken: accessToken}).unwrap().then((payload)=>{
console.log(payload);
})}
catch (error) {
alert(error);
}
dispatch((addSongToMyShuffledPlaylist(currentSong)));
}
const handleDislike = async()=>{
try{
await dislikeSong({id: currentSong.id, accessToken: accessToken}).unwrap().then((payload)=>{
console.log(payload);
})}
catch (error) {
alert(error);
}
dispatch((deleteSongFromMyShuffledPlaylist(currentSong)));
}
const durationChange = () =>{
dispatch(setCurrentDuration(audioRef.current.duration));
}
Expand All @@ -39,11 +72,11 @@ function Bar(props){
audioRef.current.volume = (Number(e.target.value))/100;
}
const switchShuffle=()=>{
dispatch(toggleShuffle());
dispatch(toggleShuffle(data));
}
const switchLoop=()=>{
dispatch((toggleLoop()));
isLoop ? audioRef.current.removeAttribute('loop'): audioRef.current.setAttribute('loop',true);
isLoop ? audioRef.current.removeAttribute('loop'):audioRef.current.setAttribute('loop',true);
}
const handleStart = () => {
audioRef.current.play();
Expand All @@ -60,12 +93,26 @@ function Bar(props){
const mock =()=>{
alert('Функционал ещё не готов');
}
const findArray=()=>{
if(rockTracks.includes(currentSong)){
return rockTracks;
}
if(electricTracks.includes(currentSong)){
return electricTracks;
}
if(classicTracks.includes(currentSong)){
return classicTracks;
}
}
const playNext = ()=>{
dispatch(playNextSong(isShuffle));
wasChosenOnCategory?dispatch(findCategoryArray()):'';
console.log(data);
onMyPlaylist?dispatch(playNextSong(data)):wasChosenOnCategory?dispatch(playNextSong(findArray())):dispatch(playNextSong());
}
const playPrev = ()=>{
wasChosenOnCategory?dispatch(findCategoryArray()):'';
if(Number(currentTime)<=5){
dispatch(playPrevSong(isShuffle));
onMyPlaylist?dispatch(playPrevSong(data)):wasChosenOnCategory?dispatch(playPrevSong(findArray())):dispatch(playPrevSong());
}
else{
dispatch(setCurrentTime(0));
Expand All @@ -89,7 +136,7 @@ function Bar(props){
<StyledPlayer__Controls>
<StyledPlayer__Btn_Prev_Button__Icon onClick={playPrev}>
<Styled__Btn_Prev_Svg alt="prev">
<use xlinkHref="img/icon/sprite.svg#icon-prev"></use>
<use xlinkHref={isOnCategory?"../img/icon/sprite.svg#icon-prev":"img/icon/sprite.svg#icon-prev"}></use>
</Styled__Btn_Prev_Svg>
</StyledPlayer__Btn_Prev_Button__Icon>
<StyledPlayer__Btn_Play onClick={switchPlay}>
Expand All @@ -99,31 +146,30 @@ function Bar(props){
<rect x="10" width="5" height="19" fill="#D9D9D9"/>
</Styled__Btn_Play_Svg>:
<Styled__Btn_Play_Svg alt="play">
<use xlinkHref="img/icon/sprite.svg#icon-play"></use>
<use xlinkHref={isOnCategory?"../img/icon/sprite.svg#icon-play":"img/icon/sprite.svg#icon-play"}></use>
</Styled__Btn_Play_Svg>}
</StyledPlayer__Btn_Play>
<StyledPlayer__Btn_Next_Button__Icon onClick={playNext}>
<Styled__Btn_Next_Svg alt="next">
<use xlinkHref="img/icon/sprite.svg#icon-next"></use>
<use xlinkHref={isOnCategory?"../img/icon/sprite.svg#icon-next":"img/icon/sprite.svg#icon-next"}></use>
</Styled__Btn_Next_Svg>
</StyledPlayer__Btn_Next_Button__Icon>
<StyledPlayer__Btn_Repeat_Button__Icon onClick={switchLoop}>
<Styled__Btn_Repeat_Svg isloop={(isLoop).toString()} alt="repeat">
<use xlinkHref="img/icon/sprite.svg#icon-repeat"></use>
<use xlinkHref={isOnCategory?"../img/icon/sprite.svg#icon-repeat":"img/icon/sprite.svg#icon-repeat"}></use>
</Styled__Btn_Repeat_Svg>
</StyledPlayer__Btn_Repeat_Button__Icon>
<StyledPlayer__Btn_Shuffle_Button__Icon onClick={switchShuffle}>
<Styled__Btn_Shuffle_Svg isshuffle={(isShuffle).toString()} alt="shuffle">
<use xlinkHref="img/icon/sprite.svg#icon-shuffle"></use>
<use xlinkHref={isOnCategory?"../img/icon/sprite.svg#icon-shuffle":"img/icon/sprite.svg#icon-shuffle"}></use>
</Styled__Btn_Shuffle_Svg>
</StyledPlayer__Btn_Shuffle_Button__Icon>
</StyledPlayer__Controls>

<StyledPlayer__Track_Play_Track__Play>
<StyledTrack_Play__Contain>
<StyledTrack_Play__Image>
<StyledTrack_Play__Svg alt="music">
<use xlinkHref="img/icon/sprite.svg#icon-note"></use>
<use xlinkHref={isOnCategory?"../img/icon/sprite.svg#icon-note":"img/icon/sprite.svg#icon-note"}></use>
</StyledTrack_Play__Svg>
</StyledTrack_Play__Image>
<StyledTrack_Play__Author>
Expand All @@ -135,24 +181,26 @@ function Bar(props){
</StyledTrack_Play__Contain>

<StyledTrack_Play__Like_Dis>
<StyledTrack_Play__Like>
<StyledTrack_Play__Like_Svg alt="like">
<use xlinkHref="img/icon/sprite.svg#icon-like"></use>
</StyledTrack_Play__Like_Svg>
</StyledTrack_Play__Like>
<StyledTrack_Play__Dislike>
<StyledTrack_Play__Dislike_Svg alt="dislike">
<use xlinkHref="img/icon/sprite.svg#icon-dislike"></use>
</StyledTrack_Play__Dislike_Svg>
</StyledTrack_Play__Dislike>
{data!==undefined?data.find(elem=>elem.id===currentSong.id)?
<StyledTrack_Play__Dislike onClick={handleDislike}>
<StyledTrack_Play__Dislike_Svg alt="dislike" width="16" height="14" viewBox="0 0 16 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M8.02203 12.7031C13.9025 9.20312 16.9678 3.91234 13.6132 1.47046C11.413 -0.13111 8.95392 1.14488 8.02203 1.95884H8.00052H8.00046H7.97895C7.04706 1.14488 4.58794 -0.13111 2.38775 1.47046C-0.966814 3.91234 2.09846 9.20312 7.97895 12.7031H8.00046H8.00052H8.02203Z" fill="#B672FF"/>
<path d="M8.00046 1.95884H8.02203C8.95392 1.14488 11.413 -0.13111 13.6132 1.47046C16.9678 3.91234 13.9025 9.20312 8.02203 12.7031H8.00046M8.00052 1.95884H7.97895C7.04706 1.14488 4.58794 -0.13111 2.38775 1.47046C-0.966814 3.91234 2.09846 9.20312 7.97895 12.7031H8.00052" stroke="#B672FF"/>
</StyledTrack_Play__Dislike_Svg>
</StyledTrack_Play__Dislike>:
<StyledTrack_Play__Like onClick={handleLike}>
<StyledTrack_Play__Like_Svg alt="like">
<use xlinkHref={isOnCategory?"../img/icon/sprite.svg#icon-like":"img/icon/sprite.svg#icon-like"}></use>
</StyledTrack_Play__Like_Svg>
</StyledTrack_Play__Like>:''}
</StyledTrack_Play__Like_Dis>
</StyledPlayer__Track_Play_Track__Play>
</StyledBar__Player_Player>
<StyledBar__Volume_Block_Volume>
<StyledVolume__Content>
<StyledVolume__Image onClick={switchMute}>
<StyledVolume__Svg alt="volume">
<use xlinkHref="img/icon/sprite.svg#icon-volume"></use>
<use xlinkHref={isOnCategory?"../img/icon/sprite.svg#icon-volume":"img/icon/sprite.svg#icon-volume"}></use>
</StyledVolume__Svg>
</StyledVolume__Image>
<StyledVolume__Progress>
Expand Down
1 change: 0 additions & 1 deletion src/pages/Main/components/Bar/styles.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -337,7 +337,6 @@ const StyledTrack_Play__ = styled.div`
export const StyledTrack_Play__Like = styled(StyledTrack_Play__)`
`;
export const StyledTrack_Play__Dislike = styled(StyledTrack_Play__)`
margin-left: 28.5px;
`;
export const StyledTrack_Play__Like_Svg = styled.svg`
width: 14px;
Expand Down
Loading

0 comments on commit a0124f6

Please sign in to comment.