Change: chapter lookup to be in modal

client/pages/audiobook/_id/chapters.vue

@@ -141,10 +141,21 @@
         </div>
       </template>
       <div class="w-full h-full max-h-full text-sm rounded-lg bg-bg shadow-lg border border-black-300 relative">
-        <div v-if="!chapterData" class="flex p-20">
+        <div v-if="!chapterData" class="flex flex-col items-center justify-center p-20">
-          <ui-text-input-with-label v-model.trim="asinInput" label="ASIN" />
+          <div class="relative">
-          <ui-dropdown v-model="regionInput" :label="$strings.LabelRegion" small :items="audibleRegions" class="w-32 mx-1" />
+            <div class="flex items-end space-x-2">
-          <ui-btn small color="bg-primary" class="mt-5" @click="findChapters">{{ $strings.ButtonSearch }}</ui-btn>
+              <ui-text-input-with-label v-model.trim="asinInput" label="ASIN" />
+              <ui-dropdown v-model="regionInput" :label="$strings.LabelRegion" small :items="audibleRegions" class="w-32" />
+              <ui-btn small color="bg-primary" @click="findChapters">{{ $strings.ButtonSearch }}</ui-btn>
+            </div>
+
+            <div class="absolute left-0 mt-1.5 text-error text-s h-5">
+              <p v-if="asinError">{{ asinError }}</p>
+              <p v-if="asinError">{{ $strings.MessageAsinCheck }}</p>
+            </div>
+
+            <div class="invisible h-5 mt-1 text-xs"></div>
+          </div>
         </div>
         <div v-else class="w-full p-4">
           <div class="flex justify-between mb-4">
@@ -249,6 +260,7 @@ export default {
       findingChapters: false,
       showFindChaptersModal: false,
       chapterData: null,
+      asinError: null,
       showSecondInputs: false,
       audibleRegions: ['US', 'CA', 'UK', 'AU', 'FR', 'DE', 'JP', 'IT', 'IN', 'ES'],
       hasChanges: false
@@ -546,14 +558,14 @@ export default {
 
       this.findingChapters = true
       this.chapterData = null
+      this.asinError = null // used to show warning about audible vs amazon ASIN
       this.$axios
         .$get(`/api/search/chapters?asin=${this.asinInput}&region=${this.regionInput}`)
         .then((data) => {
           this.findingChapters = false
 
           if (data.error) {
-            this.$toast.error(data.error)
+            this.asinError = data.error
-            this.showFindChaptersModal = false
           } else {
             console.log('Chapter data', data)
             this.chapterData = data

client/strings/en-us.json

@@ -705,6 +705,7 @@
   "LabelYourProgress": "Your Progress",
   "MessageAddToPlayerQueue": "Add to player queue",
   "MessageAppriseDescription": "To use this feature you will need to have an instance of <a href=\"https://github.com/caronc/apprise-api\" target=\"_blank\">Apprise API</a> running or an api that will handle those same requests. <br />The Apprise API Url should be the full URL path to send the notification, e.g., if your API instance is served at <code>http://192.168.1.1:8337</code> then you would put <code>http://192.168.1.1:8337/notify</code>.",
+  "MessageAsinCheck": "Ensure you are using the ASIN from the correct Audible region, not Amazon.",
   "MessageBackupsDescription": "Backups include users, user progress, library item details, server settings, and images stored in <code>/metadata/items</code> & <code>/metadata/authors</code>. Backups <strong>do not</strong> include any files stored in your library folders.",
   "MessageBackupsLocationEditNote": "Note: Updating the backup location will not move or modify existing backups",
   "MessageBackupsLocationNoEditNote": "Note: The backup location is set through an environment variable and cannot be changed here.",