mirror/advplyr.audiobookshelf-app
1
0
Fork 0
mirror of https://github.com/advplyr/audiobookshelf-app.git synced 2025-08-03 17:44:51 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

Player Progress Bar Position

Browse source 
This patch moves the progress bar slightly up for a better separation
between playback controls and seeking.

The reasoning behind this is that I (and probably others as well) often
interact with this interface in a clumsy, half-asleep state. Due to the
closeness of the progress bar and the play/pause button, I have managed
it several times to accidentally seek instead of pause. That is really
annoying since you then have to manually find the previous playback
position again.

Long term, I would love to see more of the available space being used.
In particular in the player interface. There should be enough free space
available. Especially if you have just one of the progress bars active.
But for now, this is just a quick-fix to improve the current situation.
This commit is contained in:
Lars Kiesow 2023-01-31 15:31:06 +01:00
parent 84632c8a32
commit 3fc89377b4
No known key found for this signature in database
GPG key ID: 5DAFE8D9C823CE73
1 changed files with 1 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

3
components/app/AudioPlayer.vue
View file

@ -65,7 +65,7 @@
</div>
<div v-else class="w-full h-full absolute top-0 left-0 pointer-events-none" style="background: linear-gradient(145deg, rgba(38, 38, 38, 0.5) 0%, rgba(38, 38, 38, 0.9) 20%, rgb(38, 38, 38) 60%)" />
<div id="playerControls" class="absolute right-0 bottom-0 py-2">
<div id="playerControls" class="absolute right-0 bottom-0 py-2 mt-5">
<div class="flex items-center justify-center">
<span v-show="showFullscreen && !lockUi" class="material-icons next-icon text-white text-opacity-75 cursor-pointer" :class="isLoading ? 'text-opacity-10' : 'text-opacity-75'" @click.stop="jumpChapterStart">first_page</span>
<span v-show="!lockUi" class="material-icons jump-icon text-white cursor-pointer" :class="isLoading ? 'text-opacity-10' : 'text-opacity-75'" @click.stop="jumpBackwards">{{ jumpBackwardsIcon }}</span>
@ -934,7 +934,6 @@ export default {
bottom: 20px;
}
.fullscreen #playerTrack {
top: 20px;
bottom: unset;
}