diff --git a/client/components/AudioPlayer.vue b/client/components/AudioPlayer.vue index f505344b..ffbf1260 100644 --- a/client/components/AudioPlayer.vue +++ b/client/components/AudioPlayer.vue @@ -61,7 +61,9 @@
-

00:00

+

00:00

+
+
@@ -103,7 +105,8 @@ export default { seekedTime: 0, seekLoading: false, showChaptersModal: false, - currentTime: 0 + currentTime: 0, + trackOffsetLeft: 16 // Track is 16px from edge } }, computed: { @@ -187,7 +190,20 @@ export default { if (this.$refs.hoverTimestamp) { var width = this.$refs.hoverTimestamp.clientWidth 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) { var hoverText = this.$secondsToTimestamp(time) @@ -207,6 +223,9 @@ export default { if (this.$refs.hoverTimestamp) { this.$refs.hoverTimestamp.style.opacity = 0 } + if (this.$refs.hoverTimestampArrow) { + this.$refs.hoverTimestampArrow.style.opacity = 0 + } if (this.$refs.trackCursor) { this.$refs.trackCursor.style.opacity = 0 }