ydeng/audioshowkit
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Changed CSS class for Song Player.

Browse Source
This commit is contained in:
Harrison Deng 2022-04-17 20:09:31 -05:00
parent 5df80501f2
commit ee326fb560
2 changed files with 14 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/player/SongPlayer.js
View File

@ -187,7 +187,7 @@ export default class SongPlayer {
*/
generatePlayElement() {
const playButton = document.createElement("button");
playButton.classList.add("player-ctrl");
playButton.classList.add("player");
playButton.classList.add("play-btn");
if (!this._playing) playButton.classList.add("paused");
@ -207,7 +207,7 @@ export default class SongPlayer {
generateNextElement() {
const nextButton = document.createElement("button");
nextButton.classList.add("player-ctrl");
nextButton.classList.add("player");
nextButton.classList.add("next");
nextButton.addEventListener("click", () => {
this.next();
@ -217,7 +217,7 @@ export default class SongPlayer {
generatePreviousElement() {
const previousButton = document.createElement("button");
previousButton.classList.add("player-ctrl");
previousButton.classList.add("player");
previousButton.classList.add("previous");
previousButton.addEventListener("click", () => {
this.previous();

18
src/styles/songplayer.css
View File

@ -1,25 +1,29 @@
.player-ctrl.play-btn {
.player.play-btn {
box-sizing: border-box;
width: 60px;
height: 60px;
transition: 80ms all ease;
will-change: border-width;
cursor: pointer;
border-color: transparent transparent transparent white;
border-color: transparent transparent transparent black;
border-style: solid;
border-width: 60px 0px 30px 30px;
border-width: 30px 0px 30px 50px;
}
.player-ctrl.play-btn.paused {
.player.play-btn.paused {
border-style: double;
border-width: 0px 0px 0px 60px;
}
.player-ctrl.next {
.player.next {
border-style: none;
}
.player-ctrl.previous {
.player.previous {
border-style: none;
}
table.player {
border-collapse: collapse;
}