From 038ad7018a46fae2ad96d16b11cc94eb7019cd61 Mon Sep 17 00:00:00 2001
From: Nicholas <nicholaslwallace@gmail.com>
Date: Mon, 1 Jan 2024 20:57:27 -0700
Subject: [PATCH] Added bitrate column to management tools

---
 client/pages/audiobook/_id/manage.vue | 12 ++++++++----
 client/plugins/utils.js               | 13 ++++++++++++-
 2 files changed, 20 insertions(+), 5 deletions(-)

diff --git a/client/pages/audiobook/_id/manage.vue b/client/pages/audiobook/_id/manage.vue
index 965f8c256..9c75702bd 100644
--- a/client/pages/audiobook/_id/manage.vue
+++ b/client/pages/audiobook/_id/manage.vue
@@ -94,7 +94,7 @@
         <transition name="slide">
           <div v-if="showEncodeOptions" 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="'Audio Bitrate (e.g. 128k)'" class="m-2 max-w-40" />
+              <ui-text-input-with-label ref="bitrateInput" v-model="maxBitrate" :disabled="processing || isTaskFinished" :label="'Audio Bitrate (e.g. 128k)'" class="m-2 max-w-40" />
               <ui-text-input-with-label ref="channelsInput" v-model="encodingOptions.channels" :disabled="processing || isTaskFinished" :label="'Audio Channels (1 or 2)'" class="m-2 max-w-40" />
               <ui-text-input-with-label ref="codecInput" v-model="encodingOptions.codec" :disabled="processing || isTaskFinished" :label="'Audio Codec'" class="m-2 max-w-40" />
             </div>
@@ -146,8 +146,9 @@
         <div class="flex py-2 px-4 bg-primary bg-opacity-25">
           <div class="w-10 text-xs font-semibold text-gray-200">#</div>
           <div class="flex-grow text-xs font-semibold uppercase text-gray-200">{{ $strings.LabelFilename }}</div>
+          <div class="w-20 text-xs font-semibold uppercase text-gray-200">bitrate</div>
           <div class="w-16 text-xs font-semibold uppercase text-gray-200">{{ $strings.LabelSize }}</div>
-          <div class="w-24"></div>
+          <div class="w-20"></div>
         </div>
         <template v-for="file in audioFiles">
           <div :key="file.index" class="flex py-2 px-4 text-sm" :class="file.index % 2 === 0 ? 'bg-primary bg-opacity-25' : ''">
@@ -155,10 +156,13 @@
             <div class="flex-grow">
               {{ file.metadata.filename }}
             </div>
+            <div class="w-20 font-mono text-gray-200">
+              {{ $bitratePretty(file.bitRate) }}
+            </div>
             <div class="w-16 font-mono text-gray-200">
               {{ $bytesPretty(file.metadata.size) }}
             </div>
-            <div class="w-24">
+            <div class="w-20">
               <div class="flex justify-center">
                 <span v-if="audiofilesFinished[file.ino]" class="material-icons text-xl text-success leading-none">check_circle</span>
                 <div v-else-if="audiofilesEncoding[file.ino]">
@@ -236,7 +240,7 @@ export default {
     isM4BTool() {
       return this.selectedTool === 'm4b'
     },
-    libraryItemId() {
+        libraryItemId() {
       return this.libraryItem.id
     },
     libraryItemRelPath() {
diff --git a/client/plugins/utils.js b/client/plugins/utils.js
index 495a14ef0..5feb95e08 100644
--- a/client/plugins/utils.js
+++ b/client/plugins/utils.js
@@ -15,6 +15,17 @@ Vue.prototype.$bytesPretty = (bytes, decimals = 2) => {
   return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i]
 }
 
+Vue.prototype.$bitratePretty = (bitrate, decimals = 1) => {
+  if (isNaN(bitrate) || bitrate == 0) {
+    return '0'
+  }
+  const k = 1000
+  const dm = decimals < 0 ? 0 : decimals
+  const sizes = ['', 'k', 'm']
+  const i = Math.floor(Math.log(bitrate) / Math.log(k))
+  return parseFloat((bitrate / Math.pow(k, i)).toFixed(dm)) + sizes[i]
+}
+
 Vue.prototype.$elapsedPretty = (seconds, useFullNames = false) => {
   if (seconds < 60) {
     return `${Math.floor(seconds)} sec${useFullNames ? 'onds' : ''}`
@@ -146,7 +157,7 @@ Vue.prototype.$parseCronExpression = (expression) => {
 }
 
 Vue.prototype.$getNextScheduledDate = (expression) => {
-  const interval = cronParser.parseExpression(expression);
+  const interval = cronParser.parseExpression(expression)
   return interval.next().toDate()
 }