From 342d100f3e3110ae24a895f265c96c6fa6586155 Mon Sep 17 00:00:00 2001
From: advplyr <advplyr@protonmail.com>
Date: Fri, 2 May 2025 17:24:46 -0500
Subject: [PATCH] Replace advanced options with presets/advanced card

---
 client/components/ui/ToggleBtns.vue           |  17 +-
 .../components/widgets/EncoderOptionsCard.vue | 211 ++++++++++++++++++
 client/pages/audiobook/_id/manage.vue         |  53 ++---
 client/strings/en-us.json                     |   1 +
 server/controllers/ToolsController.js         |   1 +
 5 files changed, 246 insertions(+), 37 deletions(-)
 create mode 100644 client/components/widgets/EncoderOptionsCard.vue

diff --git a/client/components/ui/ToggleBtns.vue b/client/components/ui/ToggleBtns.vue
index 3c1d663f..a1324234 100644
--- a/client/components/ui/ToggleBtns.vue
+++ b/client/components/ui/ToggleBtns.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="inline-flex toggle-btn-wrapper shadow-md">
-    <button v-for="item in items" :key="item.value" type="button" class="toggle-btn outline-hidden relative border border-gray-600 px-4 py-1" :class="{ selected: item.value === value }" @click.stop="clickBtn(item.value)">
+    <button v-for="item in items" :key="item.value" type="button" :disabled="disabled" class="toggle-btn outline-hidden relative border border-gray-600 px-4 py-1" :class="{ selected: item.value === value }" @click.stop="clickBtn(item.value)">
       {{ item.text }}
     </button>
   </div>
@@ -9,13 +9,17 @@
 <script>
 export default {
   props: {
-    value: String,
+    value: [String, Number],
     /**
      * [{ "text", "", "value": "" }]
      */
     items: {
       type: Array,
       default: Object
+    },
+    disabled: {
+      type: Boolean,
+      default: false
     }
   },
   data() {
@@ -76,10 +80,19 @@ export default {
 .toggle-btn.selected {
   color: white;
 }
+.toggle-btn.selected:disabled {
+  color: white;
+}
 .toggle-btn.selected::before {
   background-color: rgba(255, 255, 255, 0.1);
 }
+button.toggle-btn.selected:disabled::before {
+  background-color: rgba(255, 255, 255, 0.05);
+}
 button.toggle-btn:disabled::before {
   background-color: rgba(0, 0, 0, 0.2);
 }
+button.toggle-btn:disabled {
+  cursor: not-allowed;
+}
 </style>
\ No newline at end of file
diff --git a/client/components/widgets/EncoderOptionsCard.vue b/client/components/widgets/EncoderOptionsCard.vue
new file mode 100644
index 00000000..9306274d
--- /dev/null
+++ b/client/components/widgets/EncoderOptionsCard.vue
@@ -0,0 +1,211 @@
+<template>
+  <div class="w-full py-2">
+    <div class="flex -mb-px">
+      <button type="button" :disabled="disabled" class="w-1/2 h-8 rounded-tl-md relative border border-black-200 flex items-center justify-center disabled:cursor-not-allowed" :class="!showAdvancedView ? 'text-white bg-bg hover:bg-bg/60 border-b-bg' : 'text-gray-400 hover:text-gray-300 bg-primary/70 hover:bg-primary/60'" @click="showAdvancedView = false">
+        <p class="text-sm">{{ $strings.HeaderPresets }}</p>
+      </button>
+      <button type="button" :disabled="disabled" class="w-1/2 h-8 rounded-tr-md relative border border-black-200 flex items-center justify-center -ml-px disabled:cursor-not-allowed" :class="showAdvancedView ? 'text-white bg-bg hover:bg-bg/60 border-b-bg' : 'text-gray-400 hover:text-gray-300 bg-primary/70 hover:bg-primary/60'" @click="showAdvancedView = true">
+        <p class="text-sm">{{ $strings.HeaderAdvanced }}</p>
+      </button>
+    </div>
+    <div class="p-4 md:p-8 border border-black-200 rounded-b-md mr-px bg-bg">
+      <template v-if="!showAdvancedView">
+        <div class="flex flex-wrap gap-4 sm:gap-8 justify-start sm:justify-center">
+          <div class="flex flex-col items-start gap-2">
+            <p class="text-sm w-40">{{ $strings.LabelCodec }}</p>
+            <ui-toggle-btns v-model="selectedCodec" :items="codecItems" :disabled="disabled" />
+            <p class="text-xs text-gray-300">
+              {{ $strings.LabelCurrently }} <span class="text-white">{{ currentCodec }}</span> <span v-if="isCodecsDifferent" class="text-warning">(mixed)</span>
+            </p>
+          </div>
+          <div class="flex flex-col items-start gap-2">
+            <p class="text-sm w-40">{{ $strings.LabelBitrate }}</p>
+            <ui-toggle-btns v-model="selectedBitrate" :items="bitrateItems" :disabled="disabled" />
+            <p class="text-xs text-gray-300">
+              {{ $strings.LabelCurrently }} <span class="text-white">{{ currentBitrate }} KB/s</span>
+            </p>
+          </div>
+          <div class="flex flex-col items-start gap-2">
+            <p class="text-sm w-40">{{ $strings.LabelChannels }}</p>
+            <ui-toggle-btns v-model="selectedChannels" :items="channelsItems" :disabled="disabled" />
+            <p class="text-xs text-gray-300">
+              {{ $strings.LabelCurrently }} <span class="text-white">{{ currentChannels }} ({{ currentChanelLayout }})</span>
+            </p>
+          </div>
+        </div>
+      </template>
+      <template v-else>
+        <div>
+          <div class="flex flex-wrap gap-4 sm:gap-8 justify-start sm:justify-center mb-4">
+            <div class="w-40">
+              <ui-text-input-with-label v-model="customCodec" :label="$strings.LabelAudioCodec" :disabled="disabled" @input="customCodecChanged" />
+            </div>
+            <div class="w-40">
+              <ui-text-input-with-label v-model="customBitrate" :label="$strings.LabelAudioBitrate" :disabled="disabled" @input="customBitrateChanged" />
+            </div>
+            <div class="w-40">
+              <ui-text-input-with-label v-model="customChannels" :label="$strings.LabelAudioChannels" type="number" :disabled="disabled" @input="customChannelsChanged" />
+            </div>
+          </div>
+          <p class="text-xs sm:text-sm text-warning sm:text-center">{{ $strings.LabelEncodingWarningAdvancedSettings }}</p>
+        </div>
+      </template>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    audioTracks: {
+      type: Array,
+      default: () => []
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      showAdvancedView: false,
+      selectedCodec: 'aac',
+      selectedBitrate: '128k',
+      selectedChannels: 2,
+      customCodec: 'aac',
+      customBitrate: '128k',
+      customChannels: 2,
+      currentCodec: '',
+      currentBitrate: '',
+      currentChannels: '',
+      currentChanelLayout: '',
+      isCodecsDifferent: false
+    }
+  },
+  computed: {
+    codecItems() {
+      return [
+        {
+          text: 'Copy',
+          value: 'copy'
+        },
+        {
+          text: 'AAC',
+          value: 'aac'
+        },
+        {
+          text: 'OPUS',
+          value: 'opus'
+        }
+      ]
+    },
+    bitrateItems() {
+      return [
+        {
+          text: '32k',
+          value: '32k'
+        },
+        {
+          text: '64k',
+          value: '64k'
+        },
+        {
+          text: '128k',
+          value: '128k'
+        },
+        {
+          text: '192k',
+          value: '192k'
+        }
+      ]
+    },
+    channelsItems() {
+      return [
+        {
+          text: '1 (mono)',
+          value: 1
+        },
+        {
+          text: '2 (stereo)',
+          value: 2
+        }
+      ]
+    }
+  },
+  methods: {
+    customBitrateChanged(val) {
+      localStorage.setItem('embedMetadataBitrate', val)
+    },
+    customChannelsChanged(val) {
+      localStorage.setItem('embedMetadataChannels', val)
+    },
+    customCodecChanged(val) {
+      localStorage.setItem('embedMetadataCodec', val)
+    },
+    getEncodingOptions() {
+      return {
+        codec: this.selectedCodec || 'aac',
+        bitrate: this.selectedBitrate || '128k',
+        channels: this.selectedChannels || 2
+      }
+    },
+    setPreset() {
+      // If already AAC and not mixed, set copy
+      if (this.currentCodec === 'aac' && !this.isCodecsDifferent) {
+        this.selectedCodec = 'copy'
+      } else {
+        this.selectedCodec = 'aac'
+      }
+
+      if (!this.currentBitrate) {
+        this.selectedBitrate = '128k'
+      } else {
+        // Find closest bitrate rounding up
+        const bitratesToMatch = [32, 64, 128, 192]
+        const closestBitrate = bitratesToMatch.find((bitrate) => bitrate >= this.currentBitrate)
+        this.selectedBitrate = closestBitrate + 'k'
+      }
+
+      if (!this.currentChannels || isNaN(this.currentChannels)) {
+        this.selectedChannels = 2
+      } else {
+        // Either 1 or 2
+        this.selectedChannels = Math.max(Math.min(Number(this.currentChannels), 2), 1)
+      }
+    },
+    setCurrentValues() {
+      if (this.audioTracks.length === 0) return
+
+      this.currentChannels = this.audioTracks[0].channels
+      this.currentChanelLayout = this.audioTracks[0].channelLayout
+      this.currentCodec = this.audioTracks[0].codec
+
+      let totalBitrate = 0
+      for (const track of this.audioTracks) {
+        const trackBitrate = !isNaN(track.bitRate) ? track.bitRate : 0
+        totalBitrate += trackBitrate
+
+        if (track.channels > this.currentChannels) this.currentChannels = track.channels
+        if (track.codec !== this.currentCodec) {
+          console.warn('Audio track codec is different from the first track', track.codec)
+          this.isCodecsDifferent = true
+        }
+      }
+
+      this.currentBitrate = Math.round(totalBitrate / this.audioTracks.length / 1000)
+    },
+    init() {
+      this.customBitrate = localStorage.getItem('embedMetadataBitrate') || '128k'
+      this.customChannels = localStorage.getItem('embedMetadataChannels') || 2
+      this.customCodec = localStorage.getItem('embedMetadataCodec') || 'aac'
+
+      this.setCurrentValues()
+
+      this.setPreset()
+    }
+  },
+  mounted() {
+    this.init()
+  }
+}
+</script>
diff --git a/client/pages/audiobook/_id/manage.vue b/client/pages/audiobook/_id/manage.vue
index cc86398b..a95b13ab 100644
--- a/client/pages/audiobook/_id/manage.vue
+++ b/client/pages/audiobook/_id/manage.vue
@@ -77,10 +77,6 @@
       </div>
       <!-- m4b embed action buttons -->
       <div v-else class="w-full flex items-center mb-4">
-        <button :disabled="processing" class="text-sm uppercase text-gray-200 flex items-center pt-px pl-1 pr-2 hover:bg-white/5 rounded-md" @click="showEncodeOptions = !showEncodeOptions">
-          <span class="material-symbols text-xl">{{ showEncodeOptions || usingCustomEncodeOptions ? 'check_box' : 'check_box_outline_blank' }}</span> <span class="pl-1">{{ $strings.LabelUseAdvancedOptions }}</span>
-        </button>
-
         <div class="grow" />
 
         <ui-btn v-if="!isTaskFinished && processing" color="bg-error" :loading="isCancelingEncode" class="mr-2" @click.stop="cancelEncodeClick">{{ $strings.ButtonCancelEncode }}</ui-btn>
@@ -89,18 +85,16 @@
         <p v-else class="text-success text-lg font-semibold">{{ $strings.MessageM4BFinished }}</p>
       </div>
 
-      <!-- advanced encoding options -->
-      <div v-if="isM4BTool" class="overflow-hidden">
-        <transition name="slide">
-          <div v-if="showEncodeOptions || usingCustomEncodeOptions" class="mb-4 pb-4 border-b border-white/10">
-            <div class="flex flex-wrap -mx-2">
-              <ui-text-input-with-label ref="bitrateInput" v-model="encodingOptions.bitrate" :disabled="processing || isTaskFinished" :label="$strings.LabelAudioBitrate" class="m-2 max-w-40" @input="bitrateChanged" />
-              <ui-text-input-with-label ref="channelsInput" v-model="encodingOptions.channels" :disabled="processing || isTaskFinished" :label="$strings.LabelAudioChannels" class="m-2 max-w-40" @input="channelsChanged" />
-              <ui-text-input-with-label ref="codecInput" v-model="encodingOptions.codec" :disabled="processing || isTaskFinished" :label="$strings.LabelAudioCodec" class="m-2 max-w-40" @input="codecChanged" />
-            </div>
-            <p class="text-sm text-warning">{{ $strings.LabelEncodingWarningAdvancedSettings }}</p>
-          </div>
-        </transition>
+      <!-- show encoding options for running task -->
+      <div v-if="encodeTaskHasEncodingOptions" class="mb-4 pb-4 border-b border-white/10">
+        <div class="flex flex-wrap -mx-2">
+          <ui-text-input-with-label ref="bitrateInput" v-model="encodingOptions.bitrate" readonly :label="$strings.LabelAudioBitrate" class="m-2 max-w-40" @input="bitrateChanged" />
+          <ui-text-input-with-label ref="channelsInput" v-model="encodingOptions.channels" readonly :label="$strings.LabelAudioChannels" class="m-2 max-w-40" @input="channelsChanged" />
+          <ui-text-input-with-label ref="codecInput" v-model="encodingOptions.codec" readonly :label="$strings.LabelAudioCodec" class="m-2 max-w-40" @input="codecChanged" />
+        </div>
+      </div>
+      <div v-else-if="isM4BTool" class="mb-4">
+        <widgets-encoder-options-card ref="encoderOptionsCard" :audio-tracks="audioFiles" :disabled="processing || isTaskFinished" />
       </div>
 
       <div class="mb-4">
@@ -224,7 +218,6 @@ export default {
       metadataObject: null,
       selectedTool: 'embed',
       isCancelingEncode: false,
-      showEncodeOptions: false,
       shouldBackupAudioFiles: true,
       encodingOptions: {
         bitrate: '128k',
@@ -324,8 +317,8 @@ export default {
     isMetadataEmbedQueued() {
       return this.queuedEmbedLIds.some((lid) => lid === this.libraryItemId)
     },
-    usingCustomEncodeOptions() {
-      return this.isM4BTool && this.encodeTask && this.encodeTask.data.encodeOptions && Object.keys(this.encodeTask.data.encodeOptions).length > 0
+    encodeTaskHasEncodingOptions() {
+      return this.isM4BTool && !!this.encodeTask?.data.encodeOptions && Object.keys(this.encodeTask.data.encodeOptions).length > 0
     }
   },
   methods: {
@@ -361,19 +354,13 @@ export default {
       if (this.$refs.channelsInput) this.$refs.channelsInput.blur()
       if (this.$refs.codecInput) this.$refs.codecInput.blur()
 
-      let queryStr = ''
-      if (this.showEncodeOptions) {
-        const options = []
-        if (this.encodingOptions.bitrate) options.push(`bitrate=${this.encodingOptions.bitrate}`)
-        if (this.encodingOptions.channels) options.push(`channels=${this.encodingOptions.channels}`)
-        if (this.encodingOptions.codec) options.push(`codec=${this.encodingOptions.codec}`)
-        if (options.length) {
-          queryStr = `?${options.join('&')}`
-        }
-      }
+      const encodeOptions = this.$refs.encoderOptionsCard.getEncodingOptions()
+
+      const queryParams = new URLSearchParams(encodeOptions)
+
       this.processing = true
       this.$axios
-        .$post(`/api/tools/item/${this.libraryItemId}/encode-m4b${queryStr}`)
+        .$post(`/api/tools/item/${this.libraryItemId}/encode-m4b?${queryParams.toString()}`)
         .then(() => {
           console.log('Ab m4b merge started')
         })
@@ -426,14 +413,10 @@ export default {
       const shouldBackupAudioFiles = localStorage.getItem('embedMetadataShouldBackup')
       this.shouldBackupAudioFiles = shouldBackupAudioFiles != 0
 
-      if (this.usingCustomEncodeOptions) {
+      if (this.encodeTaskHasEncodingOptions) {
         if (this.encodeTask.data.encodeOptions.bitrate) this.encodingOptions.bitrate = this.encodeTask.data.encodeOptions.bitrate
         if (this.encodeTask.data.encodeOptions.channels) this.encodingOptions.channels = this.encodeTask.data.encodeOptions.channels
         if (this.encodeTask.data.encodeOptions.codec) this.encodingOptions.codec = this.encodeTask.data.encodeOptions.codec
-      } else {
-        this.encodingOptions.bitrate = localStorage.getItem('embedMetadataBitrate') || '128k'
-        this.encodingOptions.channels = localStorage.getItem('embedMetadataChannels') || '2'
-        this.encodingOptions.codec = localStorage.getItem('embedMetadataCodec') || 'aac'
       }
     },
     fetchMetadataEmbedObject() {
diff --git a/client/strings/en-us.json b/client/strings/en-us.json
index 2bf70b53..9247de4d 100644
--- a/client/strings/en-us.json
+++ b/client/strings/en-us.json
@@ -177,6 +177,7 @@
   "HeaderPlaylist": "Playlist",
   "HeaderPlaylistItems": "Playlist Items",
   "HeaderPodcastsToAdd": "Podcasts to Add",
+  "HeaderPresets": "Presets",
   "HeaderPreviewCover": "Preview Cover",
   "HeaderRSSFeedGeneral": "RSS Details",
   "HeaderRSSFeedIsOpen": "RSS Feed is Open",
diff --git a/server/controllers/ToolsController.js b/server/controllers/ToolsController.js
index 94122b46..9f2014ec 100644
--- a/server/controllers/ToolsController.js
+++ b/server/controllers/ToolsController.js
@@ -48,6 +48,7 @@ class ToolsController {
     }
 
     const options = req.query || {}
+    Logger.info(`[ToolsController] encodeM4b: Starting audiobook merge for "${req.libraryItem.media.title}" with options: ${JSON.stringify(options)}`)
     this.abMergeManager.startAudiobookMerge(req.user.id, req.libraryItem, options)
 
     res.sendStatus(200)