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 @@
@@ -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
}