extern/audiobookshelf
1
0
Fork 0
mirror of https://github.com/advplyr/audiobookshelf.git synced 2024-12-26 16:48:53 +01:00
Code Issues Packages Projects Releases Wiki Activity

Fix player track tooltip overflowing page

Browse Source
This commit is contained in:
Mark Cooper 2021-09-21 17:28:43 -05:00
parent 13ac5f1d2a
commit d234fdea11
1 changed files with 22 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
client/components/AudioPlayer.vue
View File

@ -61,7 +61,9 @@
<!-- 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">
<p ref="hoverTimestampText" class="text-xs font-mono text-center px-2 py-0.5">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 ref="hoverTimestampArrow" class="absolute -top-3 left-0 bg-white text-black rounded-full opacity-0 pointer-events-none">
<div class="absolute -bottom-1.5 left-0 right-0 w-full flex justify-center"> <div class="absolute -bottom-1.5 left-0 right-0 w-full flex justify-center">
<div class="arrow-down" /> <div class="arrow-down" />
</div> </div>
@ -103,7 +105,8 @@ export default {
seekedTime: 0, seekedTime: 0,
seekLoading: false, seekLoading: false,
showChaptersModal: false, showChaptersModal: false,
currentTime: 0 currentTime: 0,
trackOffsetLeft: 16 // Track is 16px from edge
} }
}, },
computed: { computed: {
@ -187,7 +190,20 @@ export default {
if (this.$refs.hoverTimestamp) { if (this.$refs.hoverTimestamp) {
var width = this.$refs.hoverTimestamp.clientWidth var width = this.$refs.hoverTimestamp.clientWidth
this.$refs.hoverTimestamp.style.opacity = 1 this.$refs.hoverTimestamp.style.opacity = 1
this.$refs.hoverTimestamp.style.left = offsetX - width / 2 + 'px' var posLeft = offsetX - width / 2
if (posLeft + width + this.trackOffsetLeft > window.innerWidth) {
posLeft = window.innerWidth - width - this.trackOffsetLeft
} else if (posLeft < -this.trackOffsetLeft) {
posLeft = -this.trackOffsetLeft
}
this.$refs.hoverTimestamp.style.left = posLeft + 'px'
}
if (this.$refs.hoverTimestampArrow) {
var width = this.$refs.hoverTimestampArrow.clientWidth
var posLeft = offsetX - width / 2
this.$refs.hoverTimestampArrow.style.opacity = 1
this.$refs.hoverTimestampArrow.style.left = posLeft + 'px'
} }
if (this.$refs.hoverTimestampText) { if (this.$refs.hoverTimestampText) {
var hoverText = this.$secondsToTimestamp(time) var hoverText = this.$secondsToTimestamp(time)
@ -207,6 +223,9 @@ export default {
if (this.$refs.hoverTimestamp) { if (this.$refs.hoverTimestamp) {
this.$refs.hoverTimestamp.style.opacity = 0 this.$refs.hoverTimestamp.style.opacity = 0
} }
if (this.$refs.hoverTimestampArrow) {
this.$refs.hoverTimestampArrow.style.opacity = 0
}
if (this.$refs.trackCursor) { if (this.$refs.trackCursor) {
this.$refs.trackCursor.style.opacity = 0 this.$refs.trackCursor.style.opacity = 0
} }