From 91bc56e1e1677c236dfcce03b8df68bf023c81f8 Mon Sep 17 00:00:00 2001 From: Lars Kiesow Date: Thu, 7 May 2026 02:05:04 +0200 Subject: [PATCH 1/3] Player view in landscape mode Rotating your phone to landscape mode and opening the player, the view wasn't using the available space very efficiently. Especially the cover image is not very helpful being pushed to a minimal size. This patch redesigned the view in landscape mode, pushing the cover image to the left half of the screen while the controls are moved to the right half of the screen. --- components/app/AudioPlayer.vue | 59 +++++++++++++++++++++++++++++++++- 1 file changed, 58 insertions(+), 1 deletion(-) diff --git a/components/app/AudioPlayer.vue b/components/app/AudioPlayer.vue index 69c1188b..db5fbafc 100644 --- a/components/app/AudioPlayer.vue +++ b/components/app/AudioPlayer.vue @@ -1,20 +1,31 @@ @@ -1013,6 +1032,12 @@ export default { .fullscreen .playerContainer { height: 200px; } +@media (orientation: landscape) { + .fullscreen .playerContainer { + width: 50%; + left: 50%; + } +} #playerContent { box-shadow: 0px -8px 8px #11111155; } @@ -1040,13 +1065,45 @@ export default { border-radius: 3px; overflow: hidden; } +@media (orientation: landscape) { + .fullscreen .cover-wrapper { + left: 25px !important; + top: 50px; + width: calc(50% - 25px) !important; + height: calc(100% - 85px) !important; + } + .fullscreen .cover-wrapper > div > div { + width: 100% !important; + height: 100% !important; + max-width: 100% !important; + max-height: 100% !important; + } + .fullscreen .cover-wrapper > div > div > div { + background-color: transparent; + } + .fullscreen .cover-wrapper img { + object-fit: contain; + } +} .total-track { bottom: 215px; left: 0; right: 0; } +@media (orientation: landscape) { + .fullscreen .total-track { + left: 50%; + width: 50%; + } +} +@media (orientation: landscape) { + .fullscreen .title-author-texts { + left: 50% !important; + width: 50% !important; + } +} .title-author-texts { transition: all 0.15s cubic-bezier(0.39, 0.575, 0.565, 1); transition-property: left, bottom, width, height; From 7d17367c1e11607bddc04d25fe26745bc0c05c73 Mon Sep 17 00:00:00 2001 From: Lars Kiesow Date: Sun, 10 May 2026 00:55:53 +0200 Subject: [PATCH 2/3] Adjust title and author size in landscape mode --- components/app/AudioPlayer.vue | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/components/app/AudioPlayer.vue b/components/app/AudioPlayer.vue index db5fbafc..501e10cb 100644 --- a/components/app/AudioPlayer.vue +++ b/components/app/AudioPlayer.vue @@ -1120,12 +1120,22 @@ export default { font-size: 0.85rem; line-height: 1.5; } +@media (orientation: landscape) { + .fullscreen .title-author-texts .title-text { + font-size: larger !important; + } +} .title-author-texts .author-text { transition: all 0.15s cubic-bezier(0.39, 0.575, 0.565, 1); transition-property: font-size; font-size: 0.75rem; line-height: 1.2; } +@media (orientation: landscape) { + .fullscreen .title-author-texts .author-text { + font-size: inherit !important; + } +} .fullscreen .title-author-texts { bottom: calc(50% - var(--cover-image-height) / 2 + 50px); From e0747e3f194b795b6670a9aa746591511beba3ca Mon Sep 17 00:00:00 2001 From: advplyr Date: Fri, 31 Jul 2026 17:00:35 -0500 Subject: [PATCH 3/3] Fix chapter track overflow and switch to percentage width --- components/app/AudioPlayer.vue | 71 ++++++++++++++++++++-------------- 1 file changed, 42 insertions(+), 29 deletions(-) diff --git a/components/app/AudioPlayer.vue b/components/app/AudioPlayer.vue index 6ebd6436..c9d2f639 100644 --- a/components/app/AudioPlayer.vue +++ b/components/app/AudioPlayer.vue @@ -33,7 +33,7 @@

{{ totalTimeRemainingPretty }}

-
+
@@ -111,7 +111,7 @@

{{ timeRemainingPretty }}

-
+
@@ -468,9 +468,8 @@ export default { this.showFullscreen = true if (this.titleMarquee) this.titleMarquee.reset() - // Update track for total time bar if useChapterTrack is set this.$nextTick(() => { - this.updateTrack() + this.measureAndUpdateTrackWidth() }) }, collapseFullscreen() { @@ -550,13 +549,17 @@ export default { this.updateReadyTrack() }, updateReadyTrack() { + if (!this.$refs.readyTrack) return + if (this.playerSettings.useChapterTrack) { - if (this.$refs.totalReadyTrack) { - this.$refs.totalReadyTrack.style.width = this.readyTrackWidth + 'px' + if (this.$refs.totalReadyTrack && this.trackWidth) { + const readyPercent = (this.readyTrackWidth / this.trackWidth) * 100 + this.$refs.totalReadyTrack.style.width = readyPercent + '%' } - this.$refs.readyTrack.style.width = this.trackWidth + 'px' - } else { - this.$refs.readyTrack.style.width = this.readyTrackWidth + 'px' + this.$refs.readyTrack.style.width = '100%' + } else if (this.trackWidth) { + const readyPercent = (this.readyTrackWidth / this.trackWidth) * 100 + this.$refs.readyTrack.style.width = readyPercent + '%' } }, updateTimestamp() { @@ -608,21 +611,23 @@ export default { bufferedPercent = Math.max(0, Math.min(1, (this.bufferedTime - this.currentChapter.start) / this.currentChapterDuration)) } - const ptWidth = Math.round(percentDone * this.trackWidth) + const playedPercent = percentDone * 100 + const bufferedPercentWidth = bufferedPercent * 100 if (this.$refs.playedTrack) { - this.$refs.playedTrack.style.width = ptWidth + 'px' + this.$refs.playedTrack.style.width = playedPercent + '%' } if (this.$refs.bufferedTrack) { - this.$refs.bufferedTrack.style.width = Math.round(bufferedPercent * this.trackWidth) + 'px' + this.$refs.bufferedTrack.style.width = bufferedPercentWidth + '%' } - if (this.$refs.trackCursor) { - this.$refs.trackCursor.style.left = ptWidth - 14 + 'px' + if (this.$refs.trackCursor && this.$refs.track) { + const trackWidth = this.$refs.track.clientWidth + this.$refs.trackCursor.style.left = Math.round(percentDone * trackWidth) - 14 + 'px' } if (this.playerSettings.useChapterTrack) { - if (this.$refs.totalPlayedTrack) this.$refs.totalPlayedTrack.style.width = Math.round(totalPercentDone * this.trackWidth) + 'px' - if (this.$refs.totalBufferedTrack) this.$refs.totalBufferedTrack.style.width = Math.round(totalBufferedPercent * this.trackWidth) + 'px' + if (this.$refs.totalPlayedTrack) this.$refs.totalPlayedTrack.style.width = totalPercentDone * 100 + '%' + if (this.$refs.totalBufferedTrack) this.$refs.totalBufferedTrack.style.width = totalBufferedPercent * 100 + '%' } }, seek(time) { @@ -640,8 +645,7 @@ export default { if (this.$refs.playedTrack) { const perc = time / this.totalDuration - const ptWidth = Math.round(perc * this.trackWidth) - this.$refs.playedTrack.style.width = ptWidth + 'px' + this.$refs.playedTrack.style.width = perc * 100 + '%' this.$refs.playedTrack.classList.remove('bg-gray-200') this.$refs.playedTrack.classList.add('bg-yellow-300') @@ -750,7 +754,8 @@ export default { maxTime = minTime + duration } - const timePerPixel = duration / this.trackWidth + const trackWidth = this.$refs.track?.clientWidth || this.trackWidth + const timePerPixel = duration / trackWidth const newTime = this.draggingTouchStartTime + timePerPixel * distanceMoved this.draggingCurrentTime = Math.min(maxTime, Math.max(minTime, newTime)) @@ -888,11 +893,7 @@ export default { this.titleMarquee = new WrappingMarquee(this.$refs.titlewrapper) this.titleMarquee.init(this.title) - if (this.$refs.track) { - this.trackWidth = this.$refs.track.clientWidth - } else { - console.error('Track not loaded', this.$refs) - } + this.measureAndUpdateTrackWidth() }) }, onPlaybackClosed() { @@ -938,15 +939,26 @@ export default { } } + // playerContainer width transition is 150ms, remeasure after layout settles + await new Promise((resolve) => setTimeout(resolve, 200)) + this.refreshUI() + this.isRefreshingUI = false }, + measureAndUpdateTrackWidth() { + if (!this.$refs.track) { + console.error('Track not loaded', this.$refs) + return + } + this.trackWidth = this.$refs.track.clientWidth + this.updateTrack() + this.updateReadyTrack() + }, refreshUI() { this.updateScreenSize() - if (this.$refs.track) { - this.trackWidth = this.$refs.track.clientWidth - this.updateTrack() - this.updateReadyTrack() - } + this.$nextTick(() => { + this.measureAndUpdateTrackWidth() + }) }, updateScreenSize() { setTimeout(() => { @@ -1054,6 +1066,7 @@ export default { transition: all 0.15s cubic-bezier(0.39, 0.575, 0.565, 1); transition-property: margin; bottom: 35px; + max-width: 100%; } .fullscreen #playerTrack { bottom: unset;