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

18
src/styles/songplayer.css
View File

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