summaryrefslogtreecommitdiff
path: root/app/ui/player.php
diff options
context:
space:
mode:
Diffstat (limited to 'app/ui/player.php')
-rw-r--r--app/ui/player.php63
1 files changed, 40 insertions, 23 deletions
diff --git a/app/ui/player.php b/app/ui/player.php
index 8043a5d..4c5298c 100644
--- a/app/ui/player.php
+++ b/app/ui/player.php
@@ -75,27 +75,29 @@
<audio id="player-audio-stella-side5"></audio>
<div class="container" style="display: grid; grid-template-columns: 1fr 1.5fr 1fr;">
- <div id="buttons" style="height: 48px; margin-top: 8px; margin-bottom: 8px;">
- <span onclick="window.parent.toggleShuffle();" class="player-btn" style="border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; height: 48px; width: 48px;" id="btn-shuffle">
- <img class="icon" alt="" src="/assets/icons/shuffle-off.svg" style="pointer-events: none; width: 32px; height: 32px;" id="btn-shuffle-icon">
- </span>
- <span onclick="window.parent.previous();" class="player-btn disabled" style="border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; height: 48px; width: 48px;" id="btn-previous">
- <img class="icon" alt="" src="/assets/icons/previous.svg" style="pointer-events: none; width: 32px; height: 32px;" id="btn-previous-icon">
- </span>
- <span onclick="window.parent.playPause();" class="player-btn" style="border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; height: 48px; width: 48px;" id="btn-play">
- <img class="icon" alt="" src="/assets/icons/play.svg" style="pointer-events: none; width: 32px; height: 32px;" id="btn-play-icon">
- </span>
- <span onclick="window.parent.next();" class="player-btn disabled" style="border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; height: 48px; width: 48px;" id="btn-next">
- <img class="icon" alt="" src="/assets/icons/next.svg" style="pointer-events: none; width: 32px; height: 32px;" id="btn-next-icon">
- </span>
- <span onclick="window.parent.toggleRepeat();" class="player-btn" style="border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; height: 48px; width: 48px;" id="btn-repeat">
- <img class="icon" alt="" src="/assets/icons/repeat-off.svg" style="pointer-events: none; width: 32px; height: 32px;" id="btn-repeat-icon">
- </span>
+ <div id="buttons" style="text-align: center; display: flex; align-items: center; justify-content: center;">
+ <div style="height: 48px; margin-top: 8px; margin-bottom: 8px;">
+ <span onclick="window.parent.toggleShuffle();" class="player-btn" style="border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; height: 48px; width: 48px;" id="btn-shuffle">
+ <img class="icon" alt="" src="/assets/icons/shuffle-off.svg" style="pointer-events: none; width: 32px; height: 32px;" id="btn-shuffle-icon">
+ </span>
+ <span onclick="window.parent.previous();" class="player-btn disabled" style="border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; height: 48px; width: 48px;" id="btn-previous">
+ <img class="icon" alt="" src="/assets/icons/previous.svg" style="pointer-events: none; width: 32px; height: 32px;" id="btn-previous-icon">
+ </span>
+ <span onclick="window.parent.playPause();" class="player-btn" style="border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; height: 48px; width: 48px;" id="btn-play">
+ <img class="icon" alt="" src="/assets/icons/play.svg" style="pointer-events: none; width: 32px; height: 32px;" id="btn-play-icon">
+ </span>
+ <span onclick="window.parent.next();" class="player-btn disabled" style="border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; height: 48px; width: 48px;" id="btn-next">
+ <img class="icon" alt="" src="/assets/icons/next.svg" style="pointer-events: none; width: 32px; height: 32px;" id="btn-next-icon">
+ </span>
+ <span onclick="window.parent.toggleRepeat();" class="player-btn" style="border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; height: 48px; width: 48px;" id="btn-repeat">
+ <img class="icon" alt="" src="/assets/icons/repeat-off.svg" style="pointer-events: none; width: 32px; height: 32px;" id="btn-repeat-icon">
+ </span>
+ </div>
</div>
<div>
- <span data-bs-html="true" data-bs-toggle="tooltip" id="badge-cd" style="z-index: 9999; display: none;position: absolute;margin-left: 71px;"><img src="/assets/icons/lossless.svg" alt="" style="height: 12px;opacity: .5;" class="icon"></span>
- <span data-bs-html="true" data-bs-toggle="tooltip" id="badge-hires" style="z-index: 9999; display: none;position: absolute;margin-left: 71px;"><img src="/assets/icons/lossless.svg" alt="" style="height: 12px;opacity: .5;" class="icon"></span>
- <span data-bs-html="true" title="<b>Mist Stella</b>" data-bs-toggle="tooltip" id="badge-stella" style="z-index: 9999; display: none;position: absolute;margin-left: 71px;"><img src="/assets/icons/stella.svg" alt="" style="height: 12px;opacity: .5;" class="icon"></span>
+ <span class="player-badge-desktop" data-bs-html="true" data-bs-toggle="tooltip" id="badge-cd" style="z-index: 9999; display: none;position: absolute;margin-left: 71px;"><img src="/assets/icons/lossless.svg" alt="" style="height: 12px;opacity: .5;" class="icon"></span>
+ <span class="player-badge-desktop" data-bs-html="true" data-bs-toggle="tooltip" id="badge-hires" style="z-index: 9999; display: none;position: absolute;margin-left: 71px;"><img src="/assets/icons/lossless.svg" alt="" style="height: 12px;opacity: .5;" class="icon"></span>
+ <span class="player-badge-desktop" data-bs-html="true" title="<b>Mist Stella</b>" data-bs-toggle="tooltip" id="badge-stella" style="z-index: 9999; display: none;position: absolute;margin-left: 71px;"><img src="/assets/icons/stella.svg" alt="" style="height: 12px;opacity: .5;" class="icon"></span>
<div id="info" style="display: none; grid-template-columns: 64px 1fr; height: 64px; border-left: 1px solid rgba(0, 0, 0, .25); border-right: 1px solid rgba(0, 0, 0, .25);">
<img alt="" id="album-art" style="background-color: rgba(0, 0, 0, .1); height: 64px; width: 64px;">
<div id="info-grid" style="z-index: 9; display: grid; grid-template-rows: 2px 22px 22px 12px 6px;">
@@ -118,13 +120,28 @@
</div>
</div>
</div>
- <div style="text-align: right; display: flex; align-items: center; justify-content: right;" id="badges">
-
+ <div style="text-align: center; display: flex; align-items: center; justify-content: center;" id="badges">
+ <img src="/assets/icons/volume-down.svg" alt="" class="icon" style="margin-right: 10px; display: inline-block;">
+ <input onchange="window.parent.setPlayerVolume();" oninput="window.parent.setPlayerVolume();" min="0" max="100" step="0.01" value="100" type="range" class="form-range" id="volume" style="width: 128px;">
+ <img src="/assets/icons/volume-up.svg" alt="" class="icon" style="margin-left: 10px; display: inline-block;">
</div>
</div>
</div>
<script>
+ if (localStorage.getItem("volume")) {
+ let vol = parseFloat(localStorage.getItem("volume"));
+
+ if (!isNaN(vol) && vol >= 0 && vol <= 100) {
+ document.getElementById("volume").value = vol;
+ window.parent.setPlayerVolume();
+ } else {
+ localStorage.setItem("volume", "100");
+ }
+ } else {
+ localStorage.setItem("volume", "100");
+ }
+
window.buildTooltips = () => {
console.log("Build tooltip");
const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]');
@@ -136,13 +153,13 @@
}
function openSong() {
- window.parent.openModal((window.parent.songs[window.parent.currentSongID]?.artist ?? "Unknown artist") + " - " + (window.parent.songs[window.parent.currentSongID]?.title ?? "Unknown song"), "info.php?i=" + window.parent.currentSongID);
+ window.parent.openModal((window.parent.songs[window.parent.currentSongID]?.artist ?? "Unknown artist") + " - " + (window.parent.songs[window.parent.currentSongID]?.title ?? "Unknown song"), "info.php?i=" + window.parent.currentSongID, true);
}
function openArtist() {
window.parent.location.hash = "#/search/" + encodeURIComponent(window.parent.songs[window.parent.currentSongID]?.artist ?? "Unknown artist");
window.parent.document.getElementById("ui").src = "ui/search.php?q=" + encodeURIComponent(window.parent.songs[window.parent.currentSongID]?.artist ?? "Unknown artist")
- window.parent.redoNavigation("explore");
+ window.parent.redoNavigation("home");
}
function openAlbum() {
© Floofi Systems, Some rights reserved. Powered by cgit.