├── .gitignore
├── README.md
├── TASKS.md
├── babel.config.json
├── craco.config.js
├── jsconfig.json
├── package-lock.json
├── package.json
├── public
├── favicon.ico
├── index.html
├── logo192.png
├── logo512.png
├── manifest.json
└── robots.txt
└── src
├── AudioControls
├── AudioControls.js
└── AudioControls.scss
├── AudioPlayer.scss
├── AudioProgress
├── AudioProgress.js
└── AudioProgress.scss
├── AudioVolume
├── AudioVolume.js
└── AudioVolume.scss
├── PlayerIcon
├── Icons
│ ├── Backward.js
│ ├── Forward.js
│ ├── Pause.js
│ ├── Play.js
│ ├── Random.js
│ ├── Sync.js
│ ├── VolumeDown.js
│ ├── VolumeOff.js
│ └── VolumeUp.js
├── PlayerIcon.js
└── PlayerIcon.scss
├── SongInfo
├── SongInfo.js
└── SongInfo.scss
├── index.js
├── store
├── actions
│ ├── setAudio.js
│ ├── setControls.js
│ └── setProgress.js
├── reactions.js
└── store.js
├── styles
├── _base.scss
├── _mixins.scss
├── _normalize.scss
├── _variables.scss
└── index.scss
└── utils
├── formatTime.js
└── objectUtils.js
/.gitignore:
--------------------------------------------------------------------------------
1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2 | dist
3 | # dependencies
4 | /node_modules
5 | /.pnp
6 | .pnp.js
7 |
8 | # testing
9 | /coverage
10 |
11 | # production
12 | /build
13 |
14 | # misc
15 | .DS_Store
16 | .env.local
17 | .env.development.local
18 | .env.test.local
19 | .env.production.local
20 |
21 | npm-debug.log*
22 | yarn-debug.log*
23 | yarn-error.log*
24 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | > https://www.patreon.com/champipatreon
2 |
3 | # react-playlist-player
4 |
5 | [Open live demo](https://react-playlist-player.firebaseapp.com/)
6 |
7 | ## Install
8 |
9 | ```javascript
10 | npm install react-playlist-player mobx mobx-react --save
11 | ```
12 |
13 | You'll also need the following devDependencies:
14 |
15 | ```json
16 | "devDependencies": {
17 | "@babel/cli": "^7.14.5",
18 | "@babel/core": "^7.14.6",
19 | "@babel/plugin-proposal-decorators": "^7.14.5",
20 | "@babel/plugin-syntax-jsx": "^7.14.5",
21 | "@babel/polyfill": "^7.12.1",
22 | "@babel/preset-env": "^7.14.7",
23 | "@craco/craco": "^5.6.4",
24 | "node-sass": "^6.0.1"
25 | }
26 | ```
27 |
28 | then update the scripts:
29 |
30 | ```json
31 | "scripts": {
32 | "start": "craco start",
33 | "build": "craco build"
34 | }
35 | ```
36 |
37 | and add a craco.config.js at the root of your project:
38 |
39 | ```javascript
40 | module.exports = {
41 | reactScriptsVersion: "react-scripts",
42 | babel: {
43 | plugins: [["@babel/plugin-proposal-decorators", { legacy: true }]]
44 | }
45 | };
46 | ```
47 |
48 | ## Usage
49 |
50 | ```javascript
51 | import React, { Component } from 'react'
52 | import { render } from 'react-dom'
53 | import AudioPlayer from 'react-playlist-player'
54 |
55 | class Demo extends Component {
56 | state = {
57 | currentPlayList: {}
58 | }
59 |
60 | loadPlayList = () =>
61 | this.setState({
62 | currentPlayList: {
63 | playlistCoverUrl: 'path/to/coverUrl',
64 | playlistName: 'playlist name',
65 | bandName: 'band name',
66 | songs: [
67 | {
68 | position: '1',
69 | songName: 'foo',
70 | songUrl: 'path/to/songUrl'
71 | },
72 | {
73 | position: '2',
74 | songName: 'bar',
75 | songUrl: 'path/to/songUrl'
76 | },
77 | {
78 | position: '3',
79 | songName: 'baz',
80 | songUrl: 'path/to/songUrl'
81 | }
82 | ],
83 | type: 'album'
84 | }
85 | })
86 |
87 | render() {
88 | return (
89 |
90 |
93 |
console.log({audioPlaying})}
95 | onSongChanged={({currentSong}) => {console.log(currentSong)}}
96 | />
97 |
32 |
store.setControls().toggleRandomize()}
36 | />
37 | store.setControls().skipBackward()} />
38 |
39 | toggleHandler(props)}
43 | />
44 |
45 | store.setControls().skipForward()} />
46 | store.setControls().toggleRepeat()} />
47 |
48 | store.setAudio().setCurrentTime(seekPlaying(e, store))}
48 | >
49 |
50 | {formatTime(store.setAudio().getCurrentTime())}
51 |
52 |
56 |
57 | {formatTime(store.setAudio().getDuration())}
58 |
59 |
46 |
50 | store
51 | .setAudio()
52 | .setVolume(toggleVolume(store.state))
53 | .visual()
54 | }
55 | />
56 |
59 | store
60 | .setAudio()
61 | .setVolume(seekVolume(e))
62 | .visual()
63 | }
64 | >
65 |
66 |
43 | {iconToRender(props)}
44 |
45 | )
46 | }
47 |
48 | export default PlayerIcon
49 |
--------------------------------------------------------------------------------
/src/PlayerIcon/PlayerIcon.scss:
--------------------------------------------------------------------------------
1 | @import "../styles/_variables.scss";
2 |
3 | .icon {
4 | position: relative;
5 | display: inline-block;
6 | vertical-align: middle;
7 | transition: transform $transition-primary;
8 | backface-visibility: hidden;
9 | &:not(:nth-child(5)) {
10 | margin-right: 1rem;
11 | }
12 | &:nth-child(1),
13 | &:nth-child(4) {
14 | margin-right: 1.3rem;
15 | }
16 |
17 | &:hover {
18 | #iconPath {
19 | fill: $text;
20 | }
21 | }
22 | &:active {
23 | #iconPath {
24 | fill: darken($text-secondary, 5%);
25 | }
26 | }
27 |
28 | #iconPath {
29 | fill: $text-secondary;
30 | }
31 |
32 | &.active {
33 | #iconPath {
34 | fill: $primary;
35 | }
36 | &::after {
37 | position: absolute;
38 | bottom: -8px;
39 | left: 50%;
40 | transform: translateX(-50%);
41 | content: "";
42 | width: 4px;
43 | height: 4px;
44 | background: $primary;
45 | display: block;
46 | border-radius: 50%;
47 | }
48 | &.active--twice {
49 | &::before {
50 | content: "1";
51 | position: absolute;
52 | top: 0px;
53 | right: -10px;
54 | font-size: 8px;
55 | -webkit-transform: translateX(-50%);
56 | transform: translateX(-50%);
57 | width: 10px;
58 | background: $primary;
59 | display: block;
60 | border-radius: 50%;
61 | }
62 | }
63 | }
64 |
65 | svg {
66 | display: inline-block;
67 | vertical-align: middle;
68 | }
69 | }
70 |
--------------------------------------------------------------------------------
/src/SongInfo/SongInfo.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { observer } from 'mobx-react'
3 | import store from '../store/store'
4 | import './SongInfo.scss'
5 |
6 | const SongInfo = observer(() => {
7 | return (
8 |
9 |
10 |
11 | {store.state.currentSong.songName}
12 | {store.state.currentPlayList.bandName}
13 |
14 |
56 |
57 | {AudioElement}
58 |
59 | {SongInfoComponent}
60 |
64 |
65 |
66 |