diff --git a/components/app/AudioPlayer.vue b/components/app/AudioPlayer.vue index 9c4c8a85..69c1188b 100644 --- a/components/app/AudioPlayer.vue +++ b/components/app/AudioPlayer.vue @@ -70,14 +70,20 @@
first_page - {{ jumpBackwardsIcon }} +
+ replay + {{ jumpBackwardsLabel }} +
{{ seekLoading ? 'autorenew' : !isPlaying ? 'play_arrow' : 'pause' }}
- {{ jumpForwardIcon }} +
+ forward_media + {{ jumpForwardLabel }} +
last_page
@@ -110,6 +116,7 @@ import { AbsAudioPlayer } from '@/plugins/capacitor' import { Dialog } from '@capacitor/dialog' import { FastAverageColor } from 'fast-average-color' import WrappingMarquee from '@/assets/WrappingMarquee.js' +import jumpLabelMixin from '@/mixins/jumpLabel' export default { props: { @@ -121,6 +128,7 @@ export default { sleepTimeRemaining: Number, serverLibraryItemId: String }, + mixins: [jumpLabelMixin], data() { return { windowHeight: 0, @@ -221,11 +229,11 @@ export default { return items }, - jumpForwardIcon() { - return this.$store.getters['globals/getJumpForwardIcon'](this.jumpForwardTime) + jumpForwardLabel() { + return this.getJumpLabel(this.jumpForwardTime) }, - jumpBackwardsIcon() { - return this.$store.getters['globals/getJumpBackwardsIcon'](this.jumpBackwardsTime) + jumpBackwardsLabel() { + return this.getJumpLabel(this.jumpBackwardsTime) }, jumpForwardTime() { return this.$store.getters['getJumpForwardTime'] @@ -1091,6 +1099,9 @@ export default { margin: 0px 0px; font-size: 1.6rem; } +#playerControls .jump-label { + margin-top: 2px; +} #playerControls .play-btn { transition: all 0.15s cubic-bezier(0.39, 0.575, 0.565, 1); transition-property: padding, margin, height, width, min-width, min-height; diff --git a/mixins/jumpLabel.js b/mixins/jumpLabel.js new file mode 100644 index 00000000..0a026fff --- /dev/null +++ b/mixins/jumpLabel.js @@ -0,0 +1,12 @@ +export default { + methods: { + getJumpLabel(seconds) { + const val = Number(seconds) + if (isNaN(val)) return '' + const useMinutes = val >= 120 // keep 60s as seconds + const key = useMinutes ? 'UnitMinutesShort' : 'UnitSecondsShort' + const unitValue = useMinutes ? val / 60 : val + return this.$getString(key, [this.$formatNumber(unitValue)]) + } + } +} diff --git a/pages/settings.vue b/pages/settings.vue index 63357548..edc69f0a 100644 --- a/pages/settings.vue +++ b/pages/settings.vue @@ -36,24 +36,24 @@

{{ $strings.HeaderPlaybackSettings }}

+
+

{{ $strings.LabelJumpBackwardsTime }}

+
+ +
+
+
+

{{ $strings.LabelJumpForwardsTime }}

+
+ +
+

{{ $strings.LabelDisableAutoRewind }}

-
-
- {{ currentJumpBackwardsTimeIcon }} -
-

{{ $strings.LabelJumpBackwardsTime }}

-
-
-
- {{ currentJumpForwardTimeIcon }} -
-

{{ $strings.LabelJumpForwardsTime }}

-
@@ -179,7 +179,7 @@
- +
@@ -187,8 +187,10 @@