From 43b7ccd61ae378f97068700da2ed17432262ec5a Mon Sep 17 00:00:00 2001 From: Greg Lorenzen <31518305+glorenzen@users.noreply.github.com> Date: Fri, 12 Jul 2024 15:52:48 -0700 Subject: [PATCH] WIP: Add adjustable skip amount (#3113) * Add playback settings string to en-us * Add playback settings UI for jump forwards and jump backwards * Remove jump forwards and jump backwards settings * Remove jump forwards and jump backwards en-us strings * Update player UI to include player settings button * Add label view player settings string * Add PlayerSettingsModal component Includes a toggle switch for enabling/disabling the chapter track feature. * Add player settings modal component to MediaPlayerContainer * Handle useChapterTrack changes in PlayerUI * Add jump forwards and jump backwards settings to user store * Add jump forwards and jump backwards label strings * Add jump forwards and jump backwards settings to PlayerSettingsModal * Update jump forwards and jump backwards to handle user state values in PlayerHandler * Update jump backwards icon in PlayerPlaybackControls * Add playback settings string to en-us * Add playback settings UI for jump forwards and jump backwards * Remove jump forwards and jump backwards settings * Remove jump forwards and jump backwards en-us strings * Update player UI to include player settings button * Add label view player settings string * Add PlayerSettingsModal component Includes a toggle switch for enabling/disabling the chapter track feature. * Add player settings modal component to MediaPlayerContainer * Handle useChapterTrack changes in PlayerUI * Add jump forwards and jump backwards settings to user store * Add jump forwards and jump backwards label strings * Add jump forwards and jump backwards settings to PlayerSettingsModal * Update jump forwards and jump backwards to handle user state values in PlayerHandler * Update jump backwards icon in PlayerPlaybackControls * Add jump amounts to playback controls tooltips * Fix merge issues and add new Material Symbols to player ui * Alphabetize strings in en-us.json * Update dropdown component with SelectInput to support menu overflowing modal * Update localization for player settings * Update en-us strings order --------- Co-authored-by: advplyr --- .../components/app/MediaPlayerContainer.vue | 4 + .../components/modals/PlayerSettingsModal.vue | 70 ++++++++ .../player/PlayerPlaybackControls.vue | 34 +++- client/components/player/PlayerUi.vue | 20 ++- client/components/ui/SelectInput.vue | 151 ++++++++++++++++++ client/players/PlayerHandler.js | 12 +- client/store/user.js | 4 +- client/strings/en-us.json | 6 + 8 files changed, 283 insertions(+), 18 deletions(-) create mode 100644 client/components/modals/PlayerSettingsModal.vue create mode 100644 client/components/ui/SelectInput.vue diff --git a/client/components/app/MediaPlayerContainer.vue b/client/components/app/MediaPlayerContainer.vue index 3c99a6da..5c04d053 100644 --- a/client/components/app/MediaPlayerContainer.vue +++ b/client/components/app/MediaPlayerContainer.vue @@ -51,6 +51,7 @@ @showBookmarks="showBookmarks" @showSleepTimer="showSleepTimerModal = true" @showPlayerQueueItems="showPlayerQueueItemsModal = true" + @showPlayerSettings="showPlayerSettingsModal = true" /> @@ -58,6 +59,8 @@ + + @@ -76,6 +79,7 @@ export default { currentTime: 0, showSleepTimerModal: false, showPlayerQueueItemsModal: false, + showPlayerSettingsModal: false, sleepTimerSet: false, sleepTimerTime: 0, sleepTimerRemaining: 0, diff --git a/client/components/modals/PlayerSettingsModal.vue b/client/components/modals/PlayerSettingsModal.vue new file mode 100644 index 00000000..10c3cd65 --- /dev/null +++ b/client/components/modals/PlayerSettingsModal.vue @@ -0,0 +1,70 @@ + + + diff --git a/client/components/player/PlayerPlaybackControls.vue b/client/components/player/PlayerPlaybackControls.vue index 6a70b28c..664385bd 100644 --- a/client/components/player/PlayerPlaybackControls.vue +++ b/client/components/player/PlayerPlaybackControls.vue @@ -7,17 +7,17 @@ first_page - - - - @@ -56,6 +56,12 @@ export default { set(val) { this.$emit('update:playbackRate', val) } + }, + jumpForwardText() { + return this.getJumpText('jumpForwardAmount', this.$strings.ButtonJumpForward) + }, + jumpBackwardText() { + return this.getJumpText('jumpBackwardAmount', this.$strings.ButtonJumpBackward) } }, methods: { @@ -83,8 +89,22 @@ export default { this.$store.dispatch('user/updateUserSettings', { playbackRate }).catch((err) => { console.error('Failed to update settings', err) }) + }, + getJumpText(setting, prefix) { + const amount = this.$store.getters['user/getUserSetting'](setting) + if (!amount) return prefix + + let formattedTime = '' + if (amount <= 60) { + formattedTime = this.$getString('LabelJumpAmountSeconds', [amount]) + } else { + const minutes = Math.floor(amount / 60) + formattedTime = this.$getString('LabelJumpAmountMinutes', [minutes]) + } + + return `${prefix} - ${formattedTime}` } }, mounted() {} } - \ No newline at end of file + diff --git a/client/components/player/PlayerUi.vue b/client/components/player/PlayerUi.vue index 3093975f..21d1b7aa 100644 --- a/client/components/player/PlayerUi.vue +++ b/client/components/player/PlayerUi.vue @@ -36,9 +36,9 @@ - - @@ -90,13 +90,16 @@ export default { seekLoading: false, showChaptersModal: false, currentTime: 0, - duration: 0, - useChapterTrack: false + duration: 0 } }, watch: { playbackRate() { this.updateTimestamp() + }, + useChapterTrack() { + if (this.$refs.trackbar) this.$refs.trackbar.setUseChapterTrack(this.useChapterTrack) + this.updateTimestamp() } }, computed: { @@ -162,6 +165,10 @@ export default { }, playerQueueItems() { return this.$store.state.playerQueueItems || [] + }, + useChapterTrack() { + const _useChapterTrack = this.$store.getters['user/getUserSetting']('useChapterTrack') || false + return this.chapters.length ? _useChapterTrack : false } }, methods: { @@ -310,9 +317,6 @@ export default { init() { this.playbackRate = this.$store.getters['user/getUserSetting']('playbackRate') || 1 - const _useChapterTrack = this.$store.getters['user/getUserSetting']('useChapterTrack') || false - this.useChapterTrack = this.chapters.length ? _useChapterTrack : false - if (this.$refs.trackbar) this.$refs.trackbar.setUseChapterTrack(this.useChapterTrack) this.setPlaybackRate(this.playbackRate) }, diff --git a/client/components/ui/SelectInput.vue b/client/components/ui/SelectInput.vue new file mode 100644 index 00000000..e7c302d5 --- /dev/null +++ b/client/components/ui/SelectInput.vue @@ -0,0 +1,151 @@ + + + diff --git a/client/players/PlayerHandler.js b/client/players/PlayerHandler.js index 660ca2c1..0f806d81 100644 --- a/client/players/PlayerHandler.js +++ b/client/players/PlayerHandler.js @@ -51,6 +51,12 @@ export default class PlayerHandler { if (!this.episodeId) return null return this.libraryItem.media.episodes.find(ep => ep.id === this.episodeId) } + get jumpForwardAmount() { + return this.ctx.$store.getters['user/getUserSetting']('jumpForwardAmount') + } + get jumpBackwardAmount() { + return this.ctx.$store.getters['user/getUserSetting']('jumpBackwardAmount') + } setSessionId(sessionId) { this.currentSessionId = sessionId @@ -381,13 +387,15 @@ export default class PlayerHandler { jumpBackward() { if (!this.player) return var currentTime = this.getCurrentTime() - this.seek(Math.max(0, currentTime - 10)) + const jumpAmount = this.jumpBackwardAmount + this.seek(Math.max(0, currentTime - jumpAmount)) } jumpForward() { if (!this.player) return var currentTime = this.getCurrentTime() - this.seek(Math.min(currentTime + 10, this.getDuration())) + const jumpAmount = this.jumpForwardAmount + this.seek(Math.min(currentTime + jumpAmount, this.getDuration())) } setVolume(volume) { diff --git a/client/store/user.js b/client/store/user.js index 3555d63e..7571f916 100644 --- a/client/store/user.js +++ b/client/store/user.js @@ -14,7 +14,9 @@ export const state = () => ({ seriesSortDesc: false, seriesFilterBy: 'all', authorSortBy: 'name', - authorSortDesc: false + authorSortDesc: false, + jumpForwardAmount: 10, + jumpBackwardAmount: 10, } }) diff --git a/client/strings/en-us.json b/client/strings/en-us.json index f713cb11..f39901b6 100644 --- a/client/strings/en-us.json +++ b/client/strings/en-us.json @@ -155,6 +155,7 @@ "HeaderPasswordAuthentication": "Password Authentication", "HeaderPermissions": "Permissions", "HeaderPlayerQueue": "Player Queue", + "HeaderPlayerSettings": "Player Settings", "HeaderPlaylist": "Playlist", "HeaderPlaylistItems": "Playlist Items", "HeaderPodcastsToAdd": "Podcasts to Add", @@ -343,6 +344,10 @@ "LabelIntervalEveryHour": "Every hour", "LabelInvert": "Invert", "LabelItem": "Item", + "LabelJumpAmountMinutes": "{0} minutes", + "LabelJumpAmountSeconds": "{0} seconds", + "LabelJumpBackwardAmount": "Jump backward amount", + "LabelJumpForwardAmount": "Jump forward amount", "LabelLanguage": "Language", "LabelLanguageDefaultServer": "Default Server Language", "LabelLanguages": "Languages", @@ -598,6 +603,7 @@ "LabelVersion": "Version", "LabelViewBookmarks": "View bookmarks", "LabelViewChapters": "View chapters", + "LabelViewPlayerSettings": "View player settings", "LabelViewQueue": "View player queue", "LabelVolume": "Volume", "LabelWeekdaysToRun": "Weekdays to run",