diff options
Diffstat (limited to 'app/ui/player-mobile.php')
| -rw-r--r-- | app/ui/player-mobile.php | 60 |
1 files changed, 52 insertions, 8 deletions
diff --git a/app/ui/player-mobile.php b/app/ui/player-mobile.php index 5266961..e49e852 100644 --- a/app/ui/player-mobile.php +++ b/app/ui/player-mobile.php @@ -44,12 +44,51 @@ document.head.append(style); </script> - <div id="act-1" onclick="window.parent.hideMobilePlayer();" style="position: fixed; z-index: 9999999; top: 0; left: 0; right: 0; height: calc(20px + var(--android-status-bar));"></div> - <div id="act-2" onclick="window.parent.hideMobilePlayer();" style="position: fixed; z-index: 9999999; bottom: 0; left: 0; right: 0; height: calc(20px + var(--android-navigation-bar))"></div> - <div id="act-3" onclick="window.parent.hideMobilePlayer();" style="position: fixed; z-index: 9999999; bottom: 0; left: 0; top: 0; width: 20px;"></div> - <div id="act-4" onclick="window.parent.hideMobilePlayer();" style="position: fixed; z-index: 9999999; bottom: 0; right: 0; top: 0; width: 20px;"></div> + <div id="act" onclick="window.parent.hideMobilePlayer();" style="position: fixed; z-index: 9999999; top: 0; bottom: calc(175px + var(--android-navigation-bar)); height: calc(100vh - (175px + var(--android-navigation-bar))); left: 0; right: 0;"></div> <div id="android" style="position: fixed; z-index: 9999999; bottom: 0; right: 0; left: 0; height: var(--android-navigation-bar); border-top: 1px solid rgba(255, 255, 255, .1);"></div> + <script> + window.transitionTimeout = null; + window.lastPosY = null; + window.initialPosY = null; + window.log = false; + + document.body.ontouchmove = (e) => { + if (window.log) { + window.lastPosY = e.touches[0].clientY; + let diff = initialPosY - lastPosY; + + if (diff < 0) { + window.parent.document.getElementById("player-mobile-container").style.bottom = diff + "px"; + window.parent.document.getElementById("lyrics-page").classList.remove("mobile-show"); + } + } + } + + document.getElementById("act").ontouchstart = (e) => { + window.initialPosY = e.touches[0].clientY; + + 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 = "0"; + window.parent.document.getElementById("lyrics-page").classList.add("mobile-show"); + let diff = initialPosY - lastPosY; + + if (diff < 0 && diff <= -10) { + window.parent.hideMobilePlayer(); + } + } + } + </script> + <div id="album-art-bg" style="position: fixed;inset: 0;background-position: center;background-size: cover; z-index: 5;"></div> <div id="album-art-bg2" style="background-color: rgba(0, 0, 0, .1); z-index: 10; position: fixed;inset: 0; backdrop-filter: blur(100px);"></div> <div id="player" class="bg-white mobile-player" style="background-color: transparent !important; color: white;position: fixed; bottom: var(--android-navigation-bar); left: 0; right: 0; height: 64px; z-index: 9999;"> @@ -87,14 +126,19 @@ </div> <div style="text-align: right; display: flex; align-items: center; justify-content: right;" id="badges"> <span id="badge-lossy" style="display: none;"></span> - <span id="badge-cd" style="display: block;border: 1px solid transparent;color: rgba(255, 255, 255, .75);background-color: rgba(255, 255, 255, .25);padding: 2px 5px;border-radius: 5px;font-size: 12px;position: fixed;margin-left: auto;margin-right: auto;width: max-content;left: 0;right: 0;bottom: calc(120px + var(--android-navigation-bar));"> + <span id="badge-cd" style="display: block;border: 1px solid transparent;color: rgba(255, 255, 255, .5);background-color: rgba(255, 255, 255, .1);padding: 2px 5px;border-radius: 5px;font-size: 12px;position: fixed;margin-left: auto;margin-right: auto;width: max-content;left: 0;right: 0;bottom: calc(120px + var(--android-navigation-bar));"> + <span style="display: grid; grid-template-columns: max-content max-content"> + <span><img src="/assets/icons/lossless.svg" alt="" class="player-badge-icon" style="filter: invert(1); opacity: .5;">Lossless</span> + </span> + </span> + <span id="badge-hires" style="display: block;border: 1px solid transparent;color: rgba(255, 255, 255, .5);background-color: rgba(255, 255, 255, .1);padding: 2px 5px;border-radius: 5px;font-size: 12px;position: fixed;margin-left: auto;margin-right: auto;width: max-content;left: 0;right: 0;bottom: calc(120px + var(--android-navigation-bar));"> <span style="display: grid; grid-template-columns: max-content max-content"> - <span><img src="/assets/icons/lossless.svg" alt="" class="player-badge-icon" style="filter: invert(1); opacity: .75;">Lossless</span> + <span><img src="/assets/icons/lossless.svg" alt="" class="player-badge-icon" style="filter: invert(1); opacity: .5;">Hi-Res Lossless</span> </span> </span> - <span id="badge-hires" style="display: block;border: 1px solid transparent;color: rgba(255, 255, 255, .75);background-color: rgba(255, 255, 255, .25);padding: 2px 5px;border-radius: 5px;font-size: 12px;position: fixed;margin-left: auto;margin-right: auto;width: max-content;left: 0;right: 0;bottom: calc(120px + var(--android-navigation-bar));"> + <span id="badge-stella" style="display: block;border: 1px solid transparent;color: rgba(255, 255, 255, .5);background-color: rgba(255, 255, 255, .1);padding: 2px 5px;border-radius: 5px;font-size: 12px;position: fixed;margin-left: auto;margin-right: auto;width: max-content;left: 0;right: 0;bottom: calc(120px + var(--android-navigation-bar));"> <span style="display: grid; grid-template-columns: max-content max-content"> - <span><img src="/assets/icons/lossless.svg" alt="" class="player-badge-icon" style="filter: invert(1); opacity: .75;">Hi-Res Lossless</span> + <span><img src="/assets/icons/stella.svg" alt="" class="player-badge-icon" style="height: 14.4px; width: 14.4px !important; filter: invert(1); opacity: .5;">Mist Stella</span> </span> </span> </div> |