summaryrefslogtreecommitdiff
path: root/app/ui/player.php
diff options
context:
space:
mode:
authorRaindropsSys <raindrops@equestria.dev>2023-10-30 23:08:45 +0100
committerRaindropsSys <raindrops@equestria.dev>2023-10-30 23:08:45 +0100
commit41c51b8bdb9c8e9fa4a7d56f260d594739d4107e (patch)
tree4bb3e824d636c7cf8cb39fd0e1aa25c49c339164 /app/ui/player.php
parent4d4308c46d4f7801c657cc79d2243e1a81831334 (diff)
downloadmist-41c51b8bdb9c8e9fa4a7d56f260d594739d4107e.tar.gz
mist-41c51b8bdb9c8e9fa4a7d56f260d594739d4107e.tar.bz2
mist-41c51b8bdb9c8e9fa4a7d56f260d594739d4107e.zip
Updated 35 files and added 28 files (automated)
Diffstat (limited to 'app/ui/player.php')
-rw-r--r--app/ui/player.php99
1 files changed, 93 insertions, 6 deletions
diff --git a/app/ui/player.php b/app/ui/player.php
index ea60889..8043a5d 100644
--- a/app/ui/player.php
+++ b/app/ui/player.php
@@ -20,10 +20,60 @@
<link id="native-css" href="/assets/native.css" rel="stylesheet" disabled>
</head>
<body class="crossplatform">
+ <script>
+ window.transitionTimeout = null;
+ window.lastPosY = null;
+ window.log = false;
+
+ document.body.ontouchmove = (e) => {
+ if (window.log) {
+ console.log(e.touches[0]);
+ window.lastPosY = e.touches[0].clientY +
+ window.parent.document.getElementById("player").offsetTop +
+ (window.parent.innerHeight - window.parent.document.getElementById("player").offsetTop);
+ window.parent.document.getElementById("player-mobile-container").style.bottom = -(e.touches[0].clientY +
+ window.parent.document.getElementById("player").offsetTop +
+ (window.parent.innerHeight - window.parent.document.getElementById("player").offsetTop)) + "px";
+ console.log(window.parent.document.getElementById("player-mobile-container").style.bottom);
+ }
+ }
+
+ document.body.ontouchstart = () => {
+ if (window.parent.currentSongID !== null) {
+ window.log = true;
+ window.parent.document.getElementById("player-mobile-container").style.transition = "";
+ }
+ }
+
+ document.body.ontouchend = () => {
+ if (window.log) {
+ window.log = false;
+ window.parent.document.getElementById("player-mobile-container").style.transition = "bottom 200ms ease 0s";
+ window.parent.document.getElementById("player-mobile-container").style.bottom = "-100vh";
+
+ if (lastPosY) {
+ console.log(window.parent.innerHeight - lastPosY);
+
+ if (window.parent.innerHeight - lastPosY >= 10 && lastPosY >= 10) {
+ window.parent.showMobilePlayer();
+ }
+ }
+
+ window.lastPosY = null;
+ }
+ }
+ </script>
<script src="/assets/js/common.js"></script>
<div id="player" class="bg-white desktop-player" style="position: fixed; bottom: 0; left: 0; right: 0; height: 64px; z-index: 9999;">
<div id="desktop-player-action" onclick="window.parent.showMobilePlayer();" style="display: none;"></div>
+
<audio id="player-audio"></audio>
+ <audio id="player-audio-stella-side1"></audio>
+ <audio id="player-audio-stella-side2"></audio>
+ <audio id="player-audio-stella-side3"></audio>
+ <audio id="player-audio-stella-side4"></audio>
+ <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">
@@ -43,12 +93,15 @@
</span>
</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>
<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="display: grid; grid-template-rows: 2px 22px 22px 12px 6px;">
+ <div id="info-grid" style="z-index: 9; display: grid; grid-template-rows: 2px 22px 22px 12px 6px;">
<div id="info-grid-sep"></div>
- <div id="info-grid-title" style="white-space: nowrap; overflow: hidden !important; text-overflow: ellipsis; display: flex; font-size: 0.91rem; align-items: end; text-align: center; justify-content: center;"><span id="title">Title</span></div>
- <div id="info-grid-info" style="white-space: nowrap; overflow: hidden !important; text-overflow: ellipsis; display: flex; font-size: 0.91rem; align-items: start; text-align: center; justify-content: center; opacity: .5;"><span id="artist">Artist</span><span class="player-badge-desktop">&nbsp;—&nbsp;<span id="album">Album</span></span></div>
+ <div id="info-grid-title" style="white-space: nowrap; overflow: hidden !important; text-overflow: ellipsis; display: flex; font-size: 0.91rem; align-items: end; text-align: center; justify-content: center;"><span onclick="openSong();" class="clickable" id="title">Title</span></div>
+ <div id="info-grid-info" style="white-space: nowrap; overflow: hidden !important; text-overflow: ellipsis; display: flex; font-size: 0.91rem; align-items: start; text-align: center; justify-content: center; opacity: .5;"><span onclick="openArtist();" class="clickable" id="artist">Artist</span><span class="player-badge-desktop">&nbsp;—&nbsp;<span onclick="openAlbum();" class="clickable" id="album">Album</span></span></div>
<div id="info-grid-time" style="font-size: 9px; opacity: .5; margin-left: 2px; margin-right: 2px;">
<span id="elapsed-time">0:00</span>
<span id="remaining-time" style="float: right;">-0:00</span>
@@ -66,11 +119,45 @@
</div>
</div>
<div style="text-align: right; display: flex; align-items: center; justify-content: right;" id="badges">
- <span id="badge-lossy" style="display: none; border: 1px solid #a402b6; color: white; background-color: #a402b6; padding: 2px 5px; border-radius: 5px; font-size: 12px;"><span style="display: grid; grid-template-columns: max-content max-content"><span>AAC-LC</span><span class="player-badge-desktop">256 kbps</span></span></span>
- <span id="badge-cd" style="display: none; border: 1px solid #02b6a7; color: white; background-color: #02b6a7; padding: 2px 5px; border-radius: 5px; font-size: 12px;"></span>
- <span id="badge-hires" style="display: none; border: 1px solid #b66e02; color: white; background-color: #b66e02; padding: 2px 5px; border-radius: 5px; font-size: 12px;"></span>
+
</div>
</div>
</div>
+
+ <script>
+ window.buildTooltips = () => {
+ console.log("Build tooltip");
+ const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]');
+ [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl));
+ }
+
+ if (navigator.userAgent.includes("MistNative/win32")) {
+ document.getElementById("badges").style.marginRight = "96px";
+ }
+
+ 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);
+ }
+
+ 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");
+ }
+
+ function openAlbum() {
+ window.parent.location.hash = "#/albums/" + Object.entries(window.parent.albums).filter(i => i[1].tracks.includes(window.parent.currentSongID))[0][0];
+ window.parent.redoNavigation("albums");
+ }
+ </script>
+ <style>
+ .clickable {
+ cursor: pointer;
+ }
+
+ .clickable:hover {
+ text-decoration: underline;
+ }
+ </style>
</body>
</html> \ No newline at end of file
© Floofi Systems, Some rights reserved. Powered by cgit.