From 120c5b3c0e0ad75ba04afa9c7a3e96fb96600f68 Mon Sep 17 00:00:00 2001
From: lalka2018 <99399973+lalka2016@users.noreply.github.com>
Date: Tue, 17 Oct 2023 16:52:28 +0300
Subject: [PATCH] Add funny tip with time when hover track div

---
 Web/Presenters/templates/Audio/bigplayer.xml |  1 +
 Web/static/css/audios.css                    | 12 ++++++++++
 Web/static/js/al_music.js                    | 23 ++++++++++++++++++++
 3 files changed, 36 insertions(+)

diff --git a/Web/Presenters/templates/Audio/bigplayer.xml b/Web/Presenters/templates/Audio/bigplayer.xml
index a18132b3..d21fee3f 100644
--- a/Web/Presenters/templates/Audio/bigplayer.xml
+++ b/Web/Presenters/templates/Audio/bigplayer.xml
@@ -23,6 +23,7 @@
             </div>
 
             <div class="track">
+                <div class="timeTip">00:00</div>
                 <div class="selectableTrack">
                     <div style="width: 95%;position: relative;">&nbsp;
                         <div class="slider"></div>
diff --git a/Web/static/css/audios.css b/Web/static/css/audios.css
index 85279faa..beb13e3c 100644
--- a/Web/static/css/audios.css
+++ b/Web/static/css/audios.css
@@ -93,6 +93,18 @@
     margin-top: -13px;
     margin-left: 13px;
     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 {
diff --git a/Web/static/js/al_music.js b/Web/static/js/al_music.js
index ab883c9c..70b3e2e2 100644
--- a/Web/static/js/al_music.js
+++ b/Web/static/js/al_music.js
@@ -132,6 +132,29 @@ class bigPlayer {
             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) => {
             if(this.tracks["currentTrack"] == null) {
                 return