Feature: audiobook/podcast skip controls

src/helpers/skipControls.ts

@@ -0,0 +1,34 @@
+import api from "@/plugins/api";
+import { store } from "@/plugins/store";
+
+// Shared skip control logic with throttling for smooth multiple clicks
+class SkipControlManager {
+  private lastSeekPos: number | undefined = undefined;
+  private lastSeekPosTimeoutHandle: any = undefined;
+  private readonly TIMEOUT_MS = 2000;
+
+  private lastSeekPosTimeout() {
+    clearTimeout(this.lastSeekPosTimeoutHandle);
+    this.lastSeekPosTimeoutHandle = setTimeout(() => {
+      this.lastSeekPos = undefined;
+      this.lastSeekPosTimeoutHandle = undefined;
+    }, this.TIMEOUT_MS);
+  }
+
+  public skip(queueId: string, skipSeconds: number) {
+    const currentTime =
+      this.lastSeekPos || store.activePlayerQueue?.elapsed_time || 0;
+    const newTime = Math.max(0, currentTime + skipSeconds);
+
+    this.lastSeekPos = newTime;
+    this.lastSeekPosTimeout();
+
+    // Send the seek command immediately for the accumulated position
+    api.playerCommandSeek(
+      store.activePlayer?.player_id || "",
+      Math.round(newTime),
+    );
+  }
+}
+
+export const skipControlManager = new SkipControlManager();

src/layouts/default/PlayerOSD/PlayerBrowserMediaControls.vue

@@ -14,7 +14,7 @@
 import audio from "@/assets/almost_silent.mp3";
 import { useMediaBrowserMetaData } from "@/helpers/useMediaBrowserMetaData";
 import api from "@/plugins/api";
-import { PlaybackState } from "@/plugins/api/interfaces";
+import { MediaType, PlayerState } from "@/plugins/api/interfaces";
 import { store } from "@/plugins/store";
 import { onMounted, ref, watch } from "vue";
 
@@ -106,7 +106,20 @@ const seekHandler = function (
   if (evt.action === "seekto" && evt.seekTime) {
     to = evt.seekTime;
   } else if (evt.action === "seekforward" || evt.action === "seekbackward") {
-    const offset = evt.seekOffset || 10;
+    // Use configurable skip amount for audiobooks/podcasts, fallback to 10 seconds for music
+    const mediaType = store.curQueueItem?.media_item?.media_type;
+    const isAudiobookOrPodcast =
+      mediaType === MediaType.AUDIOBOOK ||
+      mediaType === MediaType.PODCAST ||
+      mediaType === MediaType.PODCAST_EPISODE;
+    const defaultSkipAmount = isAudiobookOrPodcast
+      ? parseInt(
+          localStorage.getItem("frontend.settings.audiobook_skip_seconds") ||
+            "30",
+        )
+      : 10;
+
+    const offset = evt.seekOffset || defaultSkipAmount;
     const elapsed_time = lastSeekPos || store.activePlayerQueue?.elapsed_time;
     if (!elapsed_time) return;
     if (evt.action === "seekbackward") {

src/layouts/default/PlayerOSD/PlayerControlBtn/SkipBackBtn.vue

@@ -0,0 +1,64 @@
+<template>
+  <!-- skip back button -->
+  <ResponsiveIcon
+    v-if="isVisible && skipAmount > 0"
+    v-bind="icon"
+    :disabled="!playerQueue?.active || !curQueueItem"
+    icon="mdi-rewind"
+    :type="'btn'"
+    :title="$t('skip_backward_seconds', [skipAmount])"
+    @click="
+      playerQueue && skipControlManager.skip(playerQueue.queue_id, -skipAmount)
+    "
+  >
+    <template #default>
+      <div class="skip-button-content">
+        <v-icon>mdi-rewind</v-icon>
+        <span class="skip-amount">{{ skipAmount }}</span>
+      </div>
+    </template>
+  </ResponsiveIcon>
+</template>
+
+<script setup lang="ts">
+import { PlayerQueue, QueueItem } from "@/plugins/api/interfaces";
+import ResponsiveIcon, {
+  ResponsiveIconProps,
+} from "@/components/mods/ResponsiveIcon.vue";
+import { skipControlManager } from "@/helpers/skipControls";
+
+// properties
+export interface Props {
+  playerQueue: PlayerQueue | undefined;
+  curQueueItem: QueueItem | undefined;
+  skipAmount: number;
+  isVisible?: boolean;
+  icon?: ResponsiveIconProps;
+}
+withDefaults(defineProps<Props>(), {
+  isVisible: true,
+  icon: undefined,
+});
+</script>
+
+<style scoped>
+.skip-button-content {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.skip-amount {
+  position: absolute;
+  font-size: 10px;
+  font-weight: bold;
+  bottom: -2px;
+  right: -2px;
+  background: rgba(0, 0, 0, 0.7);
+  border-radius: 8px;
+  padding: 1px 3px;
+  min-width: 16px;
+  text-align: center;
+}
+</style>

src/layouts/default/PlayerOSD/PlayerControlBtn/SkipForwardBtn.vue

@@ -0,0 +1,64 @@
+<template>
+  <!-- skip forward button -->
+  <ResponsiveIcon
+    v-if="isVisible && skipAmount > 0"
+    v-bind="icon"
+    :disabled="!playerQueue?.active || !curQueueItem"
+    icon="mdi-fast-forward"
+    :type="'btn'"
+    :title="$t('skip_forward_seconds', [skipAmount])"
+    @click="
+      playerQueue && skipControlManager.skip(playerQueue.queue_id, skipAmount)
+    "
+  >
+    <template #default>
+      <div class="skip-button-content">
+        <v-icon>mdi-fast-forward</v-icon>
+        <span class="skip-amount">{{ skipAmount }}</span>
+      </div>
+    </template>
+  </ResponsiveIcon>
+</template>
+
+<script setup lang="ts">
+import { PlayerQueue, QueueItem } from "@/plugins/api/interfaces";
+import ResponsiveIcon, {
+  ResponsiveIconProps,
+} from "@/components/mods/ResponsiveIcon.vue";
+import { skipControlManager } from "@/helpers/skipControls";
+
+// properties
+export interface Props {
+  playerQueue: PlayerQueue | undefined;
+  curQueueItem: QueueItem | undefined;
+  skipAmount: number;
+  isVisible?: boolean;
+  icon?: ResponsiveIconProps;
+}
+withDefaults(defineProps<Props>(), {
+  isVisible: true,
+  icon: undefined,
+});
+</script>
+
+<style scoped>
+.skip-button-content {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.skip-amount {
+  position: absolute;
+  font-size: 10px;
+  font-weight: bold;
+  bottom: -2px;
+  right: -2px;
+  background: rgba(0, 0, 0, 0.7);
+  border-radius: 8px;
+  padding: 1px 3px;
+  min-width: 16px;
+  text-align: center;
+}
+</style>

src/layouts/default/PlayerOSD/PlayerControls.vue

@@ -23,6 +23,15 @@
         :icon="visibleComponents.previous.icon"
       />
     </div>
+    <!-- skip back button for audiobooks/podcasts -->
+    <div v-if="isAudiobookOrPodcast" class="player-controls-elements">
+      <SkipBackBtn
+        :player-queue="store.activePlayerQueue"
+        :cur-queue-item="store.curQueueItem"
+        :skip-amount="skipAmount"
+        class="media-controls-item"
+      />
+    </div>
     <!-- play/pause button -->
     <div v-if="visibleComponents && visibleComponents.play?.isVisible">
       <PlayBtn
@@ -33,6 +42,15 @@
         :icon="visibleComponents.play.icon"
       />
     </div>
+    <!-- skip forward button for audiobooks/podcasts -->
+    <div v-if="isAudiobookOrPodcast" class="player-controls-elements">
+      <SkipForwardBtn
+        :player-queue="store.activePlayerQueue"
+        :cur-queue-item="store.curQueueItem"
+        :skip-amount="skipAmount"
+        class="media-controls-item"
+      />
+    </div>
     <!-- next button -->
     <div
       v-if="visibleComponents && visibleComponents.next?.isVisible"
@@ -68,7 +86,11 @@ import ShuffleBtn from "./PlayerControlBtn/ShuffleBtn.vue";
 import PlayBtn from "./PlayerControlBtn/PlayBtn.vue";
 import PreviousBtn from "./PlayerControlBtn/PreviousBtn.vue";
 import NextBtn from "./PlayerControlBtn/NextBtn.vue";
+import SkipForwardBtn from "./PlayerControlBtn/SkipForwardBtn.vue";
+import SkipBackBtn from "./PlayerControlBtn/SkipBackBtn.vue";
 import { store } from "@/plugins/store";
+import { MediaType } from "@/plugins/api/interfaces";
+import { computed } from "vue";
 
 // properties
 export interface Props {
@@ -106,6 +128,23 @@ withDefaults(defineProps<Props>(), {
     next: { isVisible: true },
   }),
 });
+
+// Check if current media is audiobook or podcast
+const isAudiobookOrPodcast = computed(() => {
+  const mediaType = store.curQueueItem?.media_item?.media_type;
+  return (
+    mediaType === MediaType.AUDIOBOOK ||
+    mediaType === MediaType.PODCAST ||
+    mediaType === MediaType.PODCAST_EPISODE
+  );
+});
+
+// Get configured skip amount from settings
+const skipAmount = computed(() => {
+  return parseInt(
+    localStorage.getItem("frontend.settings.audiobook_skip_seconds") || "30",
+  );
+});
 </script>
 
 <style>

src/layouts/default/PlayerOSD/PlayerFullscreen.vue

@@ -493,12 +493,28 @@
             class="media-controls-item"
             max-height="45px"
           />
+          <SkipBackBtn
+            v-if="isAudiobookOrPodcast"
+            :player-queue="store.activePlayerQueue"
+            :cur-queue-item="store.curQueueItem"
+            :skip-amount="skipAmount"
+            class="media-controls-item"
+            max-height="45px"
+          />
           <PlayBtn
             :player="store.activePlayer"
             :player-queue="store.activePlayerQueue"
             class="media-controls-item"
             max-height="100px"
           />
+          <SkipForwardBtn
+            v-if="isAudiobookOrPodcast"
+            :player-queue="store.activePlayerQueue"
+            :cur-queue-item="store.curQueueItem"
+            :skip-amount="skipAmount"
+            class="media-controls-item"
+            max-height="45px"
+          />
           <NextBtn
             :player="store.activePlayer"
             :player-queue="store.activePlayerQueue"
@@ -620,6 +636,28 @@
   Track,
 } from "@/plugins/api/interfaces";
 import { getBreakpointValue } from "@/plugins/breakpoint";
+import Button from "@/components/mods/Button.vue";
+import ResponsiveIcon from "@/components/mods/ResponsiveIcon.vue";
+import ListItem from "@/components/mods/ListItem.vue";
+import LyricsViewer from "@/components/LyricsViewer.vue";
+import vuetify from "@/plugins/vuetify";
+import PlayBtn from "@/layouts/default/PlayerOSD/PlayerControlBtn/PlayBtn.vue";
+import NextBtn from "@/layouts/default/PlayerOSD/PlayerControlBtn/NextBtn.vue";
+import PreviousBtn from "@/layouts/default/PlayerOSD/PlayerControlBtn/PreviousBtn.vue";
+import SkipForwardBtn from "@/layouts/default/PlayerOSD/PlayerControlBtn/SkipForwardBtn.vue";
+import SkipBackBtn from "@/layouts/default/PlayerOSD/PlayerControlBtn/SkipBackBtn.vue";
+import ShuffleBtn from "@/layouts/default/PlayerOSD/PlayerControlBtn/ShuffleBtn.vue";
+import RepeatBtn from "@/layouts/default/PlayerOSD/PlayerControlBtn/RepeatBtn.vue";
+import PlayerVolume from "@/layouts/default/PlayerOSD/PlayerVolume.vue";
+import QueueBtn from "./PlayerControlBtn/QueueBtn.vue";
+import QualityDetailsBtn from "@/components/QualityDetailsBtn.vue";
+import MarqueeText from "@/components/MarqueeText.vue";
+import SpeakerBtn from "./PlayerControlBtn/SpeakerBtn.vue";
+import { MarqueeTextSync } from "@/helpers/marquee_text_sync";
+import {
+  imgCoverLight,
+  imgCoverDark,
+} from "@/components/QualityDetailsBtn.vue";
 import { eventbus } from "@/plugins/eventbus";
 import { $t } from "@/plugins/i18n";
 import router from "@/plugins/router";
@@ -679,6 +717,23 @@
   );
 });
 
+// Check if current media is audiobook or podcast
+const isAudiobookOrPodcast = computed(() => {
+  const mediaType = store.curQueueItem?.media_item?.media_type;
+  return (
+    mediaType === MediaType.AUDIOBOOK ||
+    mediaType === MediaType.PODCAST ||
+    mediaType === MediaType.PODCAST_EPISODE
+  );
+});
+
+// Get configured skip amount from settings
+const skipAmount = computed(() => {
+  return parseInt(
+    localStorage.getItem("frontend.settings.audiobook_skip_seconds") || "30",
+  );
+});
+
 const titleFontSize = computed(() => {
   switch (name.value) {
     case "xs":

src/translations/en.json

@@ -290,7 +290,8 @@
             "announcements": "Announcements configuration",
             "airplay": "AirPlay specific settings",
             "player_controls": "Player controls",
-            "presets": "Presets"
+            "presets": "Presets",
+            "audiobooks_podcasts": "Audiobooks & Podcasts"
         },
         "tts_pre_announce": {
             "label": "Pre-announce TTS announcements",
@@ -516,6 +517,10 @@
         "enable_builtin_player": {
             "label": "Allow playback to this device\/browser",
             "description": "Enable the (experimental) built-in player for this device\/browser, which allows you to stream all Music Assistant content directly to this device."
+        },
+        "audiobook_skip_seconds": {
+            "label": "Audiobook\/Podcast skip amount",
+            "description": "Number of seconds to skip forward or backward when using skip controls during audiobook or podcast playback."
         }
     },
     "show_info": "Show info",
@@ -644,6 +649,8 @@
     "dont_stop_the_music_enable": "Enable 'Don't stop the music!'",
     "dont_stop_the_music_disable": "Disable 'Don't stop the music!'",
     "open_dsp_settings": "Open DSP settings",
+    "skip_forward_seconds": "Skip forward {0} seconds",
+    "skip_backward_seconds": "Skip backward {0} seconds",
     "audiobook": "Audiobook",
     "audiobooks": "Audiobooks",
     "chapter": "Chapter",