Fix:Audio track hover timestamp bubble z-index

This commit is contained in:
advplyr 2023-02-11 15:29:39 -06:00
parent 8b5d05739f
commit 895ab8d18a

View File

@ -15,7 +15,7 @@
</div> </div>
<!-- Hover timestamp --> <!-- Hover timestamp -->
<div ref="hoverTimestamp" class="absolute -top-8 left-0 bg-white text-black rounded-full opacity-0 pointer-events-none"> <div ref="hoverTimestamp" class="absolute -top-8 left-0 bg-white text-black rounded-full opacity-0 pointer-events-none z-10">
<p ref="hoverTimestampText" class="text-xs font-mono text-center px-2 py-0.5 truncate whitespace-nowrap">00:00</p> <p ref="hoverTimestampText" class="text-xs font-mono text-center px-2 py-0.5 truncate whitespace-nowrap">00:00</p>
</div> </div>
<div ref="hoverTimestampArrow" class="absolute -top-3 left-0 bg-white text-black rounded-full opacity-0 pointer-events-none"> <div ref="hoverTimestampArrow" class="absolute -top-3 left-0 bg-white text-black rounded-full opacity-0 pointer-events-none">
@ -83,9 +83,9 @@ export default {
var offsetX = e.offsetX var offsetX = e.offsetX
var perc = offsetX / this.trackWidth var perc = offsetX / this.trackWidth
const baseTime = this.useChapterTrack ? this.currentChapterStart : 0; const baseTime = this.useChapterTrack ? this.currentChapterStart : 0
const duration = this.useChapterTrack ? this.currentChapterDuration : this.duration; const duration = this.useChapterTrack ? this.currentChapterDuration : this.duration
const time = baseTime + (perc * duration); const time = baseTime + perc * duration
if (isNaN(time) || time === null) { if (isNaN(time) || time === null) {
console.error('Invalid time', perc, time) console.error('Invalid time', perc, time)
return return
@ -143,10 +143,10 @@ export default {
mousemoveTrack(e) { mousemoveTrack(e) {
var offsetX = e.offsetX var offsetX = e.offsetX
const baseTime = this.useChapterTrack ? this.currentChapterStart : 0; const baseTime = this.useChapterTrack ? this.currentChapterStart : 0
const duration = this.useChapterTrack ? this.currentChapterDuration : this.duration; const duration = this.useChapterTrack ? this.currentChapterDuration : this.duration
const progressTime = (offsetX / this.trackWidth) * duration; const progressTime = (offsetX / this.trackWidth) * duration
const totalTime = baseTime + progressTime; const totalTime = baseTime + progressTime
if (this.$refs.hoverTimestamp) { if (this.$refs.hoverTimestamp) {
var width = this.$refs.hoverTimestamp.clientWidth var width = this.$refs.hoverTimestamp.clientWidth