Update jump label to only show on fullscreen audio player

components/app/AudioPlayer.vue

@@ -70,14 +70,9 @@
       <div id="playerControls" class="absolute right-0 bottom-0 mx-auto" style="max-width: 414px">
         <div class="flex items-center max-w-full" :class="playerSettings.lockUi ? 'justify-center' : 'justify-between'">
           <span v-show="showFullscreen && !playerSettings.lockUi" class="material-symbols next-icon text-fg cursor-pointer" :class="isLoading ? 'text-opacity-10' : 'text-opacity-75'" @click.stop="jumpChapterStart">first_page</span>
-          <div
+          <div v-show="!playerSettings.lockUi" class="jump-icon text-fg cursor-pointer flex flex-col items-center" :class="isLoading ? 'text-opacity-10' : 'text-opacity-75'" @click.stop="jumpBackwards">
-            v-show="!playerSettings.lockUi"
+            <span class="material-symbols text-3xl leading-none">replay</span>
-            class="jump-icon text-fg cursor-pointer flex flex-col items-center"
+            <span v-if="showFullscreen" class="jump-label text-[10px] font-semibold leading-tight">{{ jumpBackwardsLabel }}</span>
-            :class="isLoading ? 'text-opacity-10' : 'text-opacity-75'"
-            @click.stop="jumpBackwards"
-          >
-            <span class="material-symbols text-3xl leading-none">{{ jumpBackwardsItem.icon }}</span>
-            <span class="jump-label text-[10px] font-semibold leading-tight">{{ jumpBackwardsLabel }}</span>
           </div>
           <div class="play-btn cursor-pointer shadow-sm flex items-center justify-center rounded-full text-primary mx-4 relative overflow-hidden" :style="{ backgroundColor: coverRgb }" :class="{ 'animate-spin': seekLoading }" @mousedown.prevent @mouseup.prevent @click.stop="playPauseClick">
             <div v-if="!coverBgIsLight" class="absolute top-0 left-0 w-full h-full bg-white bg-opacity-20 pointer-events-none" />
@@ -85,14 +80,9 @@
             <span v-if="!isLoading" class="material-symbols fill" :class="{ 'text-white': coverRgb && !coverBgIsLight }">{{ seekLoading ? 'autorenew' : !isPlaying ? 'play_arrow' : 'pause' }}</span>
             <widgets-spinner-icon v-else class="h-8 w-8" />
           </div>
-          <div
+          <div v-show="!playerSettings.lockUi" class="jump-icon text-fg cursor-pointer flex flex-col items-center" :class="isLoading ? 'text-opacity-10' : 'text-opacity-75'" @click.stop="jumpForward">
-            v-show="!playerSettings.lockUi"
+            <span class="material-symbols text-3xl leading-none">forward_media</span>
-            class="jump-icon text-fg cursor-pointer flex flex-col items-center"
+            <span v-if="showFullscreen" class="jump-label text-[10px] font-semibold leading-tight">{{ jumpForwardLabel }}</span>
-            :class="isLoading ? 'text-opacity-10' : 'text-opacity-75'"
-            @click.stop="jumpForward"
-          >
-            <span class="material-symbols text-3xl leading-none">{{ jumpForwardItem.icon }}</span>
-            <span class="jump-label text-[10px] font-semibold leading-tight">{{ jumpForwardLabel }}</span>
           </div>
           <span v-show="showFullscreen && !playerSettings.lockUi" class="material-symbols next-icon text-fg cursor-pointer" :class="nextChapter && !isLoading ? 'text-opacity-75' : 'text-opacity-10'" @click.stop="jumpNextChapter">last_page</span>
         </div>
@@ -239,12 +229,6 @@ export default {
 
       return items
     },
-    jumpForwardItem() {
-      return this.$store.getters['globals/getJumpForwardItem'](this.jumpForwardTime)
-    },
-    jumpBackwardsItem() {
-      return this.$store.getters['globals/getJumpBackwardsItem'](this.jumpBackwardsTime)
-    },
     jumpForwardLabel() {
       return this.getJumpLabel(this.jumpForwardTime)
     },
@@ -967,7 +951,7 @@ export default {
     },
     showProgressSyncSuccess() {
       this.syncStatus = this.$constants.SyncStatus.SUCCESS
-    },
+    }
   },
   mounted() {
     this.updateScreenSize()

store/globals.js

@@ -143,21 +143,7 @@ export const getters = {
         if (episodeId != null && lmp.episodeId != episodeId) return false
         return lmp.libraryItemId == libraryItemId
       })
-    },
+    }
-  getJumpForwardIcon: (state) => (jumpForwardTime) => {
-    const item = state.jumpForwardItems.find((i) => i.value == jumpForwardTime)
-    return item ? item.icon : 'forward_10'
-  },
-  getJumpBackwardsIcon: (state) => (jumpBackwardsTime) => {
-    const item = state.jumpBackwardsItems.find((i) => i.value == jumpBackwardsTime)
-    return item ? item.icon : 'replay_10'
-  },
-  getJumpForwardItem: (state) => (jumpForwardTime) => {
-    return state.jumpForwardItems.find((i) => i.value == jumpForwardTime) || state.jumpForwardItems[1]
-  },
-  getJumpBackwardsItem: (state) => (jumpBackwardsTime) => {
-    return state.jumpBackwardsItems.find((i) => i.value == jumpBackwardsTime) || state.jumpBackwardsItems[1]
-  }
 }
 
 export const actions = {