From ea606cafe66f082ea8b5876dda2c318100d4493f Mon Sep 17 00:00:00 2001 From: xJunko Date: Fri, 31 Jan 2025 02:56:34 +0800 Subject: [PATCH] misc: add back the music player --- public/css/music-player.css | 132 ++++++++++++++ public/fonts/icons.woff | Bin 0 -> 3392 bytes public/js/music-player.js | 161 ++++++++++++++++++ templates/page.tmpl | 2 + .../route-template/common/music-player.tmpl | 37 ++++ 5 files changed, 332 insertions(+) create mode 100644 public/css/music-player.css create mode 100644 public/fonts/icons.woff create mode 100644 public/js/music-player.js create mode 100644 templates/route-template/common/music-player.tmpl diff --git a/public/css/music-player.css b/public/css/music-player.css new file mode 100644 index 0000000..1eef5a9 --- /dev/null +++ b/public/css/music-player.css @@ -0,0 +1,132 @@ +/* bottombar player stuff, awful styling. */ + +@font-face { + font-family: "jk::player-icons"; + src: url("../fonts/icons.woff"); + font-weight: normal; + font-style: normal; +} + +.player-icons { + font-family: "jk::player-icons"; + font-style: normal; + font-weight: normal; + color: var(--text-color-dark); + user-select: none; +} + +.music-player { + bottom: 0; + left: 0; + padding-left: 10px; + padding-right: 10px; + width: 100%; + height: 32px; + background-color: var(--background-color-window); + border-top: 1px solid var(--border-color); + position: fixed; + display: flex; + align-items: center; + user-select: none; + overflow: hidden; +} + +.music-player a { + color: var(--text-color-dark); + font-size: 1.2em; + text-align: center; + padding: 10px; +} + +.music-info { + display: flex; + align-items: center; +} + +input[type="range"] { + -webkit-appearance: none; + width: 100%; + background-color: var(--background-color-window); +} + +input[type="range"]:focus { + outline: none; +} + +input[type="range"]::-webkit-slider-runnable-track { + width: 100%; + height: 2px; + animate: 0.2s; + box-shadow: 0px 0px 0px #000000; + background: var(--border-color); + border-radius: 1px; + border: 0px solid #000000; +} + +input[type="range"]::-webkit-slider-thumb { + box-shadow: 0px 0px 0px #000000; + border: 0px solid var(--border-color); + height: 10px; + width: 10px; + border-radius: 0px; + background: var(--border-color); + -webkit-appearance: none; + margin-top: -4px; +} + +input[type="range"]:focus::-webkit-slider-runnable-track { + background: var(--border-color); +} + +input[type="range"]::-moz-range-track { + width: 100%; + height: 2px; + animate: 0.2s; + box-shadow: 0px 0px 0px #000000; + background: var(--border-color); + border-radius: 1px; + border: 0px solid #000000; +} + +input[type="range"]::-moz-range-thumb { + box-shadow: 0px 0px 0px #000000; + border: 0px solid var(--border-color); + height: 10px; + width: 10px; + border-radius: 0px; + background: var(--border-color); +} + +#music-title { + font-family: "Neue"; + font-weight: 600; +} + +/* phone */ +@media only screen and (max-width: 768px), +(orientation: portrait) { + input[type="range"] { + display: none; + } + + #split { + display: none; + } + + #music-queue { + display: none; + } + + #music-duration { + display: none; + } + + .music-control a { + font-size: 1.5em; + padding: 5px; + } + + .music-info a { + font-size: 3vw; + } +} \ No newline at end of file diff --git a/public/fonts/icons.woff b/public/fonts/icons.woff new file mode 100644 index 0000000000000000000000000000000000000000..cb23db32f32af3c83dbae01395236c24609f88fe GIT binary patch literal 3392 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 0) + music_track_index -= 1; + else music_track_index = track_list.length; + loadTrack(music_track_index); + playTrack(); +} + + +function setVolume() { + _current_track.volume = music_volume.value / 100; +} + +function seekUpdate() { + if (!isNaN(_current_track.duration)) { + seekPosition = _current_track.currentTime * (100 / _current_track.duration); + + let currentMinutes = Math.floor(_current_track.currentTime / 60); + let currentSeconds = Math.floor(_current_track.currentTime - currentMinutes * 60); + let durationMinutes = Math.floor(_current_track.duration / 60); + let durationSeconds = Math.floor(_current_track.duration - durationMinutes * 60); + + if (currentSeconds < 10) { currentSeconds = "0" + currentSeconds; } + if (durationSeconds < 10) { durationSeconds = "0" + durationSeconds; } + if (currentMinutes < 10) { currentMinutes = currentMinutes; } + if (durationMinutes < 10) { durationMinutes = durationMinutes; } + + music_track_duration.textContent = currentMinutes + ":" + currentSeconds + " / " + durationMinutes + ":" + durationSeconds;; + } +} diff --git a/templates/page.tmpl b/templates/page.tmpl index 6ed0782..51fbf9b 100755 --- a/templates/page.tmpl +++ b/templates/page.tmpl @@ -44,6 +44,8 @@ {{ template "route-template/common/araragi" . }} + {{ template "route-template/common/music-player" . }} {{ end }} +


{{ template "base/footer" . }} \ No newline at end of file diff --git a/templates/route-template/common/music-player.tmpl b/templates/route-template/common/music-player.tmpl new file mode 100644 index 0000000..8d582a5 --- /dev/null +++ b/templates/route-template/common/music-player.tmpl @@ -0,0 +1,37 @@ + + +
+
+ + + + + + + + + + + +
+ + | + +
+ 1/1 + | + 0:00 / 0:00 + | + MUSIC-TITLE +
+ + | + +
+ +
+ + +
+ + \ No newline at end of file