Skip to content

Commit 168e463

Browse files
McAlec1McAlec1
committed
fix up
1 parent fe68c98 commit 168e463

8 files changed

Lines changed: 52 additions & 30 deletions

File tree

‎package.json‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "mcalec.dev",
3-
"version": "1.0.0",
3+
"version": "v2.1",
44
"description": "personal website",
55
"main": "startup.js",
66
"scripts": {
@@ -9,12 +9,12 @@
99
},
1010
"repository": {
1111
"type": "git",
12-
"url": "https://gitlab.com/mcalec-dev/mcalec.dev.git"
12+
"url": "https://github.com/mcalec-dev/mcalec.dev"
1313
},
1414
"author": "mcalec",
1515
"license": "MIT",
1616
"bugs": {
17-
"url": "https://gitlab.com/mcalec-dev/mcalec.dev/issues"
17+
"url": "https://github.com/mcalec-dev/mcalec.dev/issues"
1818
},
1919
"homepage": "https://mcalec.dev/",
2020
"dependencies": {

‎public/css/music.css‎

Lines changed: 21 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -68,9 +68,11 @@ p {
6868
display: none;
6969
}
7070

71+
/* Hide skip button by default, show only when a song is playing */
7172
#music, #music-skip, #collapse-toggle {
72-
width: 40px;
73-
height: 40px;
73+
max-width: 40px;
74+
max-height: 40px;
75+
background: none;
7476
background-size: contain;
7577
border: none;
7678
cursor: url('/img/cursor/pointer.cur'), pointer;
@@ -81,18 +83,29 @@ p {
8183
justify-content: center;
8284
}
8385

86+
#music-skip {
87+
display: none;
88+
}
89+
90+
#music-box.playing #music-skip {
91+
display: flex;
92+
}
93+
8494
#music {
85-
background: url("https://3kh0.net/svg/play.svg") no-repeat center center;
95+
max-height: 64px;
96+
max-width: 64px;
8697
z-index: 2;
8798
}
8899

89-
#music.paused {
90-
background: url("https://3kh0.net/svg/pause.svg") no-repeat center center;
100+
.music-icon {
101+
width: 20px;
102+
height: 20px;
103+
filter: invert(0.85);
104+
display: block;
91105
}
92106

93-
#music-skip {
94-
background: url("https://3kh0.net/svg/skip.svg") no-repeat center center;
95-
display: none;
107+
.music.paused .music-icon.play {
108+
display: block;
96109
}
97110

98111
#collapse-toggle {

‎public/img/music/pause.png‎

836 Bytes
Loading

‎public/img/music/play.png‎

1.56 KB
Loading

‎public/img/music/skip.png‎

1.79 KB
Loading

‎public/index.html‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,8 +14,12 @@
1414
<div class="music-content">
1515
<!--<img id="music-cover" src="//cdn.mcalec.dev/image/png/music.png" style="display: none;">-->
1616
<p class="toggle-link" id="music-info"></p>
17-
<button id="music" class="music" title="Unpause the current song."></button>
18-
<button id="music-skip" class="music" title="Skip the current song."></button>
17+
<button id="music" class="music" title="Unpause the current song.">
18+
<img class="music-icon play" src="/img/music/play.png" alt="Play">
19+
</button>
20+
<button id="music-skip" class="music" title="Skip the current song.">
21+
<img class="music-icon skip" src="/img/music/skip.png" alt="Skip">
22+
</button>
1923
<audio id="music-src" hidden=""></audio>
2024
</div>
2125
</div>

‎public/js/music.js‎

Lines changed: 21 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -16,35 +16,42 @@ async function initMusic() {
1616
t = document.getElementById("music"),
1717
s = document.getElementById("music-skip"),
1818
n = document.getElementById("music-info");
19-
async function o() {
19+
const playImg = t.querySelector(".music-icon.play");
20+
async function o() {
2021
let newIndex;
2122
do {
2223
newIndex = Math.floor(Math.random() * songs.length);
2324
} while (newIndex === currentSong && songs.length > 1);
24-
currentSong = newIndex;
25-
e.src = `${baseUrl}${songs[currentSong].src}`;
26-
e.play();
27-
t.setAttribute("title", "Unpause the current song.");
28-
t.classList.add("paused");
29-
s.style.display = "block";
30-
n.textContent = songs[currentSong].title;
31-
n.setAttribute("title", songs[currentSong].title);
32-
}
33-
currentSong = Math.floor(Math.random() * songs.length);
25+
currentSong = newIndex;
3426
e.src = `${baseUrl}${songs[currentSong].src}`;
27+
e.play();
28+
t.setAttribute("title", "Pause the current song.");
29+
t.classList.add("paused");
30+
if (playImg) playImg.src = "/img/music/pause.png";
31+
s.style.display = "block";
32+
n.textContent = songs[currentSong].title;
3533
n.setAttribute("title", songs[currentSong].title);
36-
t.addEventListener("click", async function () {
34+
}
35+
currentSong = Math.floor(Math.random() * songs.length);
36+
e.src = `${baseUrl}${songs[currentSong].src}`;
37+
n.setAttribute("title", songs[currentSong].title);
38+
if (playImg) playImg.src = "/img/music/play.png";
39+
t.setAttribute("title", "Unpause the current song.");
40+
t.classList.remove("paused");
41+
t.addEventListener("click", async function () {
3742
if (e.paused) {
38-
e.play();
43+
await e.play();
3944
t.classList.add("paused");
40-
t.setAttribute("title", "Pause the current song.")
45+
t.setAttribute("title", "Pause the current song.");
46+
if (playImg) playImg.src = "/img/music/pause.png";
4147
s.style.display = "block";
4248
n.textContent = songs[currentSong].title;
4349
n.setAttribute("title", songs[currentSong].title);
4450
} else {
4551
e.pause();
4652
t.classList.remove("paused");
4753
t.setAttribute("title", "Unpause the current song.");
54+
if (playImg) playImg.src = "/img/music/play.png";
4855
}
4956
});
5057
s.addEventListener("click", o);

‎public/json/songs.json‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -33,10 +33,8 @@
3333
{ "title": "Rasputin.opus", "src": "/opus/Rasputin.opus" },
3434
{ "title": "Ratta_Tooi.opus", "src": "/opus/Ratta_Tooi.opus" },
3535
{ "title": "Super_Mario_3D_World-Beep_Block_Skyway.opus", "src": "/opus/Super_Mario_3D_World-Beep_Block_Skyway.opus" },
36-
{ "title": "TF2_Solider-of-Dance.opus", "src": "TF2_Solider-of-Dance.opus" },
3736
{ "title": "That's_How_You_Know.opus", "src": "/opus/That's_How_You_Know.opus" },
3837
{ "title": "The_Way_You_Make_Me_Feel.opus", "src": "/opus/The_Way_You_Make_Me_Feel.opus" },
3938
{ "title": "Windmill_Isle_Day.opus", "src": "/opus/Windmill_Isle_Day.opus" },
40-
{ "title": "You'll_Be_Gone.opus", "src": "/opus/You'll_Be_Gone.opus" },
41-
{ "title": "TF2_More-Gun.m4a", "src": "/m4a/TF2_More-Gun.m4a" }
39+
{ "title": "You'll_Be_Gone.opus", "src": "/opus/You'll_Be_Gone.opus" }
4240
]

0 commit comments

Comments
 (0)