Lanmikeman/openvk
Lanmikeman/openvk
1
1
Fork 0
mirror of https://github.com/openvk/openvk synced 2025-04-23 08:33:02 +03:00
Code Issues Projects Releases Packages Wiki Activity

Add funny tip with time when hover track div

Browse source
This commit is contained in:
lalka2018 2023-10-17 16:52:28 +03:00
parent d71620dfd8
commit 120c5b3c0e
3 changed files with 36 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
Web/Presenters/templates/Audio/bigplayer.xml
View file

@ -23,6 +23,7 @@
</div> </div>
<div class="track"> <div class="track">
<div class="timeTip">00:00</div>
<div class="selectableTrack"> <div class="selectableTrack">
<div style="width: 95%;position: relative;">&nbsp; <div style="width: 95%;position: relative;">&nbsp;
<div class="slider"></div> <div class="slider"></div>

12
Web/static/css/audios.css
View file

@ -93,6 +93,18 @@
margin-top: -13px; margin-top: -13px;
margin-left: 13px; margin-left: 13px;
width: 386px; width: 386px;
position: relative;
}
.bigPlayer .paddingLayer .trackPanel .track .timeTip {
display: none;
z-index: 999;
background: #cecece;
padding: 3px;
top: -3px;
position: absolute;
transition: all .1s ease-out;
user-select: none;
} }
.bigPlayer .paddingLayer .volumePanel { .bigPlayer .paddingLayer .volumePanel {

23
Web/static/js/al_music.js
View file

@ -132,6 +132,29 @@ class bigPlayer {
this.player().currentTime = time; this.player().currentTime = time;
}) })
u(".bigPlayer .trackPanel .track").on("mousemove", (e) => {
if(this.tracks["currentTrack"] == null) {
return
}
let rect = this.nodes["thisPlayer"].querySelector(".selectableTrack").getBoundingClientRect();
const width = e.clientX - rect.left;
const time = Math.ceil((width * this.tracks["currentTrack"].length) / (rect.right - rect.left));
document.querySelector(".bigPlayer .track .timeTip").style.display = "block"
document.querySelector(".bigPlayer .track .timeTip").innerHTML = fmtTime(time)
document.querySelector(".bigPlayer .track .timeTip").style.left = `min(${width - 15}px, 317.5px)`
})
u(".bigPlayer .trackPanel .track").on("mouseleave", (e) => {
if(this.tracks["currentTrack"] == null) {
return
}
document.querySelector(".bigPlayer .track .timeTip").style.display = "none"
})
u(".bigPlayer .volumePanel > div").on("click mouseup", (e) => { u(".bigPlayer .volumePanel > div").on("click mouseup", (e) => {
if(this.tracks["currentTrack"] == null) { if(this.tracks["currentTrack"] == null) {
return return