Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit fe71b52

Browse files
jnutterdevjnutterdev
authored
Merge pull request #5 from jnutterdev/feature/player-design
Feature/player design
2 parents 743d7f4 + cad6ab6 commit fe71b52

File tree

11 files changed

+314
-71
lines changed

11 files changed

+314
-71
lines changed

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@
77

88
# testing
99
/coverage
10+
.eslintcache
1011

1112
# production
1213
/build

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@
1414
"web-vitals": "^1.0.1"
1515
},
1616
"scripts": {
17-
"start": "BROWSER=firefox react-scripts start",
17+
"start": "react-scripts start",
1818
"build": "react-scripts build",
1919
"test": "react-scripts test",
2020
"eject": "react-scripts eject"

‎public/index.html‎

Lines changed: 3 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -8,36 +8,17 @@
88
<meta name="theme-color" content="#000000" />
99
<meta name="description" content="Web site created using create-react-app" />
1010
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
11-
<!--
12-
manifest.json provides metadata used when your web app is installed on a
13-
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
14-
-->
15-
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
16-
<!--
17-
Notice the use of %PUBLIC_URL% in the tags above.
18-
It will be replaced with the URL of the `public` folder during the build.
19-
Only files inside the `public` folder can be referenced from the HTML.
2011

21-
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
22-
work correctly both with client-side routing and a non-root public URL.
23-
Learn how to configure a non-root public URL by running `npm run build`.
24-
-->
12+
<!-- <link rel="manifest" href="%PUBLIC_URL%/manifest.json" /> -->
13+
2514
<title>Web audio player</title>
15+
<script src="https://kit.fontawesome.com/a062562745.js" crossorigin="anonymous"></script>
2616
</head>
2717

2818
<body>
2919
<noscript>You need to enable JavaScript to run this app.</noscript>
3020
<div id="root"></div>
31-
<!--
32-
This HTML file is a template.
33-
If you open it directly in the browser, you will see an empty page.
34-
35-
You can add webfonts, meta tags, or analytics to this file.
36-
The build step will place the bundled scripts into the <body> tag.
3721

38-
To begin the development, run `npm start` or `yarn start`.
39-
To create a production bundle, use `npm run build` or `yarn build`.
40-
-->
4122
</body>
4223

4324
</html>

‎src/Components/AudioPlayer.js‎

Lines changed: 19 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@ import React, {Component} from 'react';
22
import VolumeSlider from './VolumeSlider';
33
import AudioPlayerButtons from './AudioPlayerButtons';
44

5-
65
class AudioPlayer extends Component {
76
constructor(props) {
87
super(props);
@@ -70,12 +69,29 @@ class AudioPlayer extends Component {
7069
render() {
7170

7271
return (
73-
<div>
72+
<div className="player-ctn">
7473
<audio ref={this.props.childRef}>
7574
<source src={this.props.audiopath} type="audio/mpeg" />
7675
</audio>
76+
7777
<AudioPlayerButtons entity={this.state.speakerEntity} pause={this.pause} play={this.play} mute={this.mute} />
78-
<VolumeSlider changeVolume={this.changeVolume} volumeRef={this.volumeRef}/>
78+
<div className="slider-ctn">
79+
<VolumeSlider changeVolume={this.changeVolume} volumeRef={this.volumeRef}/>
80+
</div>
81+
{/* <div className="playlist-ctn">
82+
{
83+
this.state.mp3Data.map((mp3,index)=>
84+
<Buttons key={index}
85+
changeMP3={this.changeMP3}
86+
clickedButtonId={this.state.mp3name}
87+
mp3={mp3.name}
88+
artist={mp3.artist}
89+
genre={mp3.genre}
90+
/>
91+
)
92+
}
93+
</div> */}
94+
7995
</div>
8096
)
8197
}

‎src/Components/AudioPlayerButtons.js‎

Lines changed: 68 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,11 +15,77 @@ class AudioPlayerButtons extends Component {
1515

1616
render() {
1717
return (
18-
<aside>
18+
<>
19+
{/* <aside>
1920
<button onClick={this.props.pause} className='pause-button'>||</button>
2021
<button onClick={this.props.play} className='play-button'>&#9654;</button>
2122
<button onClick={this.props.mute} className='mute-button' dangerouslySetInnerHTML={{__html: this.props.entity}} ></button>
22-
</aside>
23+
</aside> */}
24+
25+
26+
<div className="infos-ctn">
27+
<div className="timer">00:00</div>
28+
<div className="title"></div>
29+
<div className="duration">00:00</div>
30+
</div>
31+
32+
{/* // PROGRESS BAR / NO COMPONENT */}
33+
<div id="myProgress">
34+
<div id="myBar"></div>
35+
</div>
36+
37+
{/* // PREVIOUS SONG BUTTON / NO COMPONENT */}
38+
<div className="btn-ctn">
39+
<div className="btn-action first-btn" onclick="">
40+
<div id="btn-faws-back">
41+
<i className='fas fa-step-backward'></i>
42+
</div>
43+
</div>
44+
45+
{/* // REWIND SONG BUTTON / NO COMPONENT */}
46+
<div className="btn-action" onclick="">
47+
<div id="btn-faws-rewind">
48+
<i className='fas fa-backward'></i>
49+
</div>
50+
</div>
51+
52+
{/* // PLAY BUTTON / AUDIOPLAYER > AUDIOPLAYERBUTTONS (this.play) */}
53+
<div className="btn-action" onclick="">
54+
<div id="btn-faws-play-pause">
55+
<i className='fas fa-play' id="icon-play" onClick={this.props.play} ></i>
56+
</div>
57+
</div>
58+
59+
<div className="btn-action" onclick="">
60+
<div id="btn-faws-play-pause">
61+
<i className='fas fa-pause' id="icon-pause" onClick={this.props.pause} ></i>
62+
</div>
63+
</div>
64+
65+
{/* // FFWD BUTTON / NO COMPONENT */}
66+
<div className="btn-play" onclick="">
67+
<div id="btn-faws-forward">
68+
<i className='fas fa-forward'></i>
69+
</div>
70+
</div>
71+
72+
{/* // NEXT SONG BUTTON / NO COMPONENT */}
73+
<div className="btn-action" onclick="">
74+
<div id="btn-faws-next">
75+
<i className='fas fa-step-forward'></i>
76+
</div>
77+
</div>
78+
79+
{/* // MUTE BUTTON / AUDIOPLAYER > AUDIOPLAYERBUTTONS (this.mute) */}
80+
<div className="btn-mute" id="toggleMute" onClick={this.props.mute} >
81+
<div id="btn-faws-volume">
82+
<i id="icon-vol-up" className='fas fa-volume-up'></i>
83+
<i id="icon-vol-mute" className='fas fa-volume-mute' style={{ display: 'none' }}></i>
84+
</div>
85+
</div>
86+
</div>
87+
88+
</>
2389
);
2490
}
2591
}

‎src/Components/Buttons.js‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,9 @@ class Buttons extends Component {
2626

2727
render() {
2828
return (
29-
<button onClick={()=>this.props.changeMP3(this.state.currentButtonId,this.props.genre,this.props.mp3,this.props.artist)} id={this.props.mp3} className={this.state.buttonClass}>{this.state.buttonTitle}</button>
29+
30+
<button onClick={()=>this.props.changeMP3(this.state.currentButtonId,this.props.genre,this.props.mp3,this.props.artist)} id={this.props.mp3} className={this.state.buttonClass}>{this.state.buttonTitle}</button>
31+
3032
)
3133
}
3234

‎src/Components/Header.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import FlashOnIcon from '@material-ui/icons/FlashOn';
55
return (
66
<div className="">
77
<AppBar className="appbar" elevation={0}>
8-
<Toolbar>
8+
<Toolbar className="navigation">
99
<h1>Music Player</h1>
1010
<IconButton>
1111
<FlashOnIcon className="icon" />

‎src/assets/css/style.css‎

Whitespace-only changes.

0 commit comments

Comments
 (0)