{children}
;
6 | };
7 |
--------------------------------------------------------------------------------
/src/components/ButtonsAndVolumeBox.module.css:
--------------------------------------------------------------------------------
1 | .wrapper {
2 | display: grid;
3 | grid-template-columns: auto 30%;
4 | margin-bottom: 30px;
5 | }
6 |
7 | @media only screen and (max-width: 800px) {
8 | .wrapper {
9 | grid-template-columns: 1fr;
10 | }
11 | }
--------------------------------------------------------------------------------
/src/components/ButtonsBox.jsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import styles from "./ButtonsBox.module.css";
3 |
4 | export const ButtonsBox = ({ children }) => {
5 | return {children}
;
6 | };
7 |
--------------------------------------------------------------------------------
/src/components/ButtonsBox.module.css:
--------------------------------------------------------------------------------
1 | .wrapper {
2 | display: grid;
3 | grid-template-columns: repeat(5, auto);
4 | place-items: center;
5 | }
6 |
7 | @media only screen and (max-width: 600px) {
8 | .wrapper {
9 | grid-template-columns: repeat(3, auto);
10 | }
11 | }
--------------------------------------------------------------------------------
/src/components/Loop.jsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import styles from "./Loop.module.css";
3 |
4 | export const Loop = ({ src, onClick }) => {
5 | return {children}
;
5 | };
6 |
--------------------------------------------------------------------------------
/src/components/Pause.jsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import styles from "./Pause.module.css";
3 |
4 | export const Pause = ({ src, onClick }) => {
5 | return {children}
;
6 | };
7 |
--------------------------------------------------------------------------------
/src/components/PlayerTemplate.module.css:
--------------------------------------------------------------------------------
1 | .wrapper {
2 | border-radius: 10px;
3 | padding: 0 40px;
4 | background-color: var(--playerBackground);
5 | overflow: auto;
6 | font-family: 'Quicksand', sans-serif;
7 | }
8 |
9 | @media only screen and (max-width: 600px) {
10 | .wrapper {
11 | padding: 0 20px;
12 | }
13 | }
--------------------------------------------------------------------------------
/src/components/PlaylistItem.jsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import styles from "./PlaylistItem.module.css";
3 |
4 | export const PlaylistItem = ({ status, data_key, src, title, onClick }) => {
5 | return (
6 | 13 | {title} 14 |
15 | ); 16 | }; 17 | -------------------------------------------------------------------------------- /src/components/PlaylistItem.module.css: -------------------------------------------------------------------------------- 1 | .item { 2 | background-color: var(--playlistBackground); 3 | color: var(--playlistText); 4 | text-align: center; 5 | margin: 5px 0; 6 | padding: 3px 0; 7 | cursor: pointer; 8 | border-radius: 5px; 9 | font-size: 16px; 10 | font-family: 'Poppins', sans-serif; 11 | } 12 | 13 | .active { 14 | color: var(--playlistTextHoverActive); 15 | font-family: 'Quicksand', sans-serif; 16 | font-size: 18px; 17 | } 18 | 19 | .item:hover { 20 | color: var(--playlistTextHoverActive); 21 | } -------------------------------------------------------------------------------- /src/components/PlaylistTemplate.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import styles from "./PlaylistTemplate.module.css"; 3 | 4 | export const PlaylistTemplate = ({ children, visibility }) => { 5 | return visibility &&{children}
;
6 | };
7 |
--------------------------------------------------------------------------------
/src/components/PlaylistTemplate.module.css:
--------------------------------------------------------------------------------
1 | .wrapper {
2 | margin: 20px auto;
3 | max-height: 395px;
4 | min-height: 120px;
5 | overflow-x: hidden;
6 | padding-right: 10px;
7 | font-family: "Quicksand", sans-serif;
8 | }
9 |
10 | .wrapper::-webkit-scrollbar {
11 | width: 5px;
12 | }
13 |
14 | .wrapper::-webkit-scrollbar-track {
15 | border-radius: 10px;
16 | }
17 |
18 | .wrapper::-webkit-scrollbar-thumb {
19 | background: var(--primaryText);
20 | border-radius: 10px;
21 | }
--------------------------------------------------------------------------------
/src/components/Previous.jsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import styles from "./Previous.module.css";
3 |
4 | export const Previous = ({ src, onClick }) => {
5 | return
13 |
39 |
40 | );
41 | };
42 |
--------------------------------------------------------------------------------
/src/components/Progress.module.css:
--------------------------------------------------------------------------------
1 | .container {
2 | display: grid;
3 | place-items: center;
4 | margin-bottom: 20px;
5 | }
6 |
7 | .slider {
8 | -webkit-appearance: none;
9 | width: 100%;
10 | height: 4px;
11 | border-radius: 5px;
12 | }
13 |
14 | .slider::-webkit-slider-thumb {
15 | -webkit-appearance: none;
16 | width: 25px;
17 | height: 25px;
18 | border-radius: 50%;
19 | background: var(--progressSlider);
20 | cursor: pointer;
21 | }
22 |
23 | .slider::-moz-range-thumb {
24 | width: 20px;
25 | height: 20px;
26 | border-radius: 50%;
27 | background: var(--progressSlider);
28 | cursor: pointer;
29 | }
30 |
31 | @media only screen and (max-width: 600px) {
32 | .container {
33 | margin: 40px 0;
34 | }
35 | }
--------------------------------------------------------------------------------
/src/components/Search.jsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import styles from "./Search.module.css";
3 |
4 | export const Search = ({ onChange, value, placeholder }) => {
5 | return (
6 |
14 | );
15 | };
16 |
--------------------------------------------------------------------------------
/src/components/Search.module.css:
--------------------------------------------------------------------------------
1 | .search {
2 | font-family: 'Quicksand', sans-serif;
3 | height: 40px;
4 | border: none;
5 | font-size: 18px;
6 | width: 100%;
7 | margin: 0 auto 10px auto;
8 | background-color: var(--searchBackground);
9 | color: var(--searchText);
10 | padding-left: 20px;
11 | border-radius: 10px;
12 | }
13 |
14 | .search::placeholder {
15 | color: var(--searchPlaceHolder);
16 | }
--------------------------------------------------------------------------------
/src/components/Shuffle.jsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import styles from "./Shuffle.module.css";
3 |
4 | export const Shuffle = ({ src, onClick }) => {
5 | return
10 | {tag}
11 |
12 | );
13 | };
14 |
--------------------------------------------------------------------------------
/src/components/TagItem.module.css:
--------------------------------------------------------------------------------
1 | .tag {
2 | background-color: var(--tagsBackground);
3 | color: var(--tagsText);
4 | height: 40px;
5 | min-width: 100px;
6 | display: inline-grid;
7 | place-items: center;
8 | margin: 5px 5px;
9 | transition: transform 0.2s;
10 | padding: 0 10px;
11 | font-family: 'Varela Round', sans-serif;
12 | border-radius: 10px;
13 | font-size: 18px;
14 | }
15 |
16 | .active {
17 | background-color: var(--tagsBackgroundHoverActive);
18 | color: var(--tagsTextHoverActive);
19 | }
20 |
21 | .tag:hover {
22 | background-color: var(--tagsBackgroundHoverActive);
23 | color: var(--tagsTextHoverActive);
24 | cursor: pointer;
25 | transform: scale(1.1);
26 | }
--------------------------------------------------------------------------------
/src/components/TagsTemplate.jsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import styles from "./TagsTemplate.module.css";
3 |
4 | export const TagsTemplate = ({ children }) => {
5 | return {children}
;
6 | };
7 |
--------------------------------------------------------------------------------
/src/components/TagsTemplate.module.css:
--------------------------------------------------------------------------------
1 | .wrapper {
2 | width: 100%;
3 | margin: 20px auto;
4 | height: auto;
5 | color: var(--primaryText);
6 | display: inline-block;
7 | text-align: center;
8 | }
9 |
--------------------------------------------------------------------------------
/src/components/Time.jsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import styles from "./Time.module.css";
3 |
4 | export const Time = ({ time }) => {
5 | return {time}
; 6 | }; 7 | -------------------------------------------------------------------------------- /src/components/Time.module.css: -------------------------------------------------------------------------------- 1 | .time { 2 | font-family: 'Varela Round', sans-serif; 3 | color: var(--timeColor); 4 | text-align: right; 5 | font-size: 30px; 6 | } 7 | 8 | @media only screen and (max-width: 600px) { 9 | .time { 10 | text-align: center; 11 | } 12 | } -------------------------------------------------------------------------------- /src/components/Title.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import styles from "./Title.module.css"; 3 | 4 | export const Title = ({ title }) => { 5 | return{title}
; 6 | }; 7 | -------------------------------------------------------------------------------- /src/components/Title.module.css: -------------------------------------------------------------------------------- 1 | .title { 2 | color: var(--titleColor); 3 | font-size: 28px; 4 | text-align: left; 5 | } 6 | 7 | @media only screen and (max-width: 600px) { 8 | .title { 9 | width: 100%; 10 | text-align: center; 11 | } 12 | } -------------------------------------------------------------------------------- /src/components/TitleAndTimeBox.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import styles from "./TitleAndTimeBox.module.css"; 3 | 4 | export const TitleAndTimeBox = ({ children }) => { 5 | return{children}
;
6 | };
7 |
--------------------------------------------------------------------------------
/src/components/TitleAndTimeBox.module.css:
--------------------------------------------------------------------------------
1 | .wrapper {
2 | display: grid;
3 | grid-template-columns: auto 200px;
4 | margin: 30px 0 20px 0;
5 | }
6 |
7 | @media only screen and (max-width: 800px) {
8 | .wrapper {
9 | grid-template-columns: 1fr;
10 | }
11 | }
--------------------------------------------------------------------------------
/src/components/Volume.jsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import styles from "./Volume.module.css";
3 |
4 | export const Volume = ({ onChange, value }) => {
5 | return (
6 |
7 |
21 |
22 | );
23 | };
24 |
--------------------------------------------------------------------------------
/src/components/Volume.module.css:
--------------------------------------------------------------------------------
1 | .wrapper {
2 | display: grid;
3 | place-items: center;
4 | min-height: 60px;
5 | }
6 |
7 | .slider {
8 | -webkit-appearance: none;
9 | width: 70%;
10 | height: 3px;
11 | border-radius: 5px;
12 | background: var(--volumeSlider);
13 | outline: none;
14 | opacity: 1;
15 | -webkit-transition: 0.2s;
16 | transition: opacity 0.2s;
17 | }
18 |
19 | .slider::-webkit-slider-thumb {
20 | -webkit-appearance: none;
21 | appearance: none;
22 | width: 20px;
23 | height: 20px;
24 | border-radius: 50%;
25 | background: var(--volumeSlider);
26 | cursor: pointer;
27 | }
28 |
29 | .slider::-webkit-slider-thumb:hover {
30 | background: var(--volumeSlider);
31 | }
32 |
33 | .slider::-moz-range-thumb {
34 | width: 20px;
35 | height: 20px;
36 | border-radius: 50%;
37 | background: var(--volumeSlider);
38 | cursor: pointer;
39 | }
40 |
41 | /* @media only screen and (max-width: 800px) {
42 | .wrapper {
43 | display: none;
44 | }
45 | } */
--------------------------------------------------------------------------------
/src/icons/loop_current.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/madzadev/audio-player/c0922db7bd9ff14c05dedd7ede9fec3b01002382/src/icons/loop_current.png
--------------------------------------------------------------------------------
/src/icons/loop_none.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/madzadev/audio-player/c0922db7bd9ff14c05dedd7ede9fec3b01002382/src/icons/loop_none.png
--------------------------------------------------------------------------------
/src/icons/next.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/madzadev/audio-player/c0922db7bd9ff14c05dedd7ede9fec3b01002382/src/icons/next.png
--------------------------------------------------------------------------------
/src/icons/pause.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/madzadev/audio-player/c0922db7bd9ff14c05dedd7ede9fec3b01002382/src/icons/pause.png
--------------------------------------------------------------------------------
/src/icons/play.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/madzadev/audio-player/c0922db7bd9ff14c05dedd7ede9fec3b01002382/src/icons/play.png
--------------------------------------------------------------------------------
/src/icons/previous.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/madzadev/audio-player/c0922db7bd9ff14c05dedd7ede9fec3b01002382/src/icons/previous.png
--------------------------------------------------------------------------------
/src/icons/shuffle_all.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/madzadev/audio-player/c0922db7bd9ff14c05dedd7ede9fec3b01002382/src/icons/shuffle_all.png
--------------------------------------------------------------------------------
/src/icons/shuffle_none.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/madzadev/audio-player/c0922db7bd9ff14c05dedd7ede9fec3b01002382/src/icons/shuffle_none.png
--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
1 | @import url('https://fonts.googleapis.com/css2?family=Varela+Round&display=swap');
2 | @import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@500&display=swap');
3 | @import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
4 |
5 | * {
6 | padding: 0;
7 | margin: 0;
8 | box-sizing: border-box;
9 | }
10 |
11 | :root {
12 | --tagsBackground: #3e32e4;
13 | --tagsText: #ffffff;
14 | --tagsBackgroundHoverActive: #6e65f1;
15 | --tagsTextHoverActive: #ffffff;
16 | --searchBackground: #18191f;
17 | --searchText: #ffffff;
18 | --searchPlaceHolder: #575a77;
19 | --playerBackground: #18191f;
20 | --titleColor: #ffffff;
21 | --timeColor: #ffffff;
22 | --progressSlider: #3e32e4;
23 | --progressUsed: #ffffff;
24 | --progressLeft: #151616;
25 | --bufferLoaded: #1f212b;
26 | --volumeSlider: #3e32e4;
27 | --volumeUsed: #ffffff;
28 | --volumeLeft: #151616;
29 | --playlistBackground: #18191f;
30 | --playlistText: #575a77;
31 | --playlistBackgroundHoverActive: #18191f;
32 | --playlistTextHoverActive: #ffffff;
33 | }
--------------------------------------------------------------------------------
/src/main.jsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import ReactDOM from "react-dom/client";
3 | import Player from "./App.jsx";
4 |
5 | ReactDOM.createRoot(document.getElementById("root")).render(
6 |