Fix/ux errors (#1208)

* fix TypeError: to.params.page_uid is undefined

From:
http://localhost:8080/app/search?sq=CgIYAgoyEAIYCiosMjAwNS0wNC0wMlQwMDowMDowMFogVE8gMjAwNS0wNC0wMlQyMzo1OTo1OVo%3D&p=1

* Update IIIFFragment.vue

add error message in IIIFFragment and Atl "Image not avaliable" for 404 errors.

* reduce image size to respect border width in SearchResultListItem

* get fullpage when fragment is too small

* remove debugging from histogram slider

* do not computate brush extens in Timelinejs when brush is not avaialble

* use vue proxy when in development mode

* eslint

src/components/IIIFFragment.vue

@@ -1,7 +1,11 @@
 <template>
   <div class="IIIFFragment">
     <figure @click="e => $emit('click', e)" class="position-relative IIIFFragment overflow-hidden">
-      <img class="shadow-sm" :src="computedImageUrl" alt="IIIF Fragment" />
+      <img
+        class="shadow-sm"
+        :src="computedImageUrl"
+        :alt="isNotFound ? 'Image not available' : ''"
+      />
       <div class="IIIFFragment__regions" :style="computedRegionsStyle">
         <div
           v-for="region in computedRegions"
@@ -16,6 +20,9 @@
         ></div>
       </div>
     </figure>
+    <div v-if="errorMessage" class="alert alert-danger" role="alert">
+      {{ errorMessage }}
+    </div>
   </div>
 </template>
 <script>
@@ -32,6 +39,8 @@ export default defineComponent({
       imageHeight: 0,
       image: null,
       isLoaded: false,
+      isNotFound: false,
+      errorMessage: null,
     }
   },
   props: {
@@ -62,13 +71,20 @@ export default defineComponent({
       type: Array,
       default: () => [],
     },
+    coordMinArea: {
+      type: Number,
+      default: 250 * 250,
+    },
   },
   computed: {
     computedImageUrl() {
       // remove inof.json from IIIF if any
-      const iiif = this.iiif.replace('/info.json', '')
-      if (this.fitToRegions) {
+      let iiif = this.iiif.replace('/info.json', '')
+      if (this.regions.length && this.fitToRegions) {
         const coords = this.getCoordsFromArticleRegions()
+        if (coords.w * coords.h < this.coordMinArea) {
+          return `${iiif}/full/${this.size}/0/default.jpg`
+        }
         return `${iiif}/${coords.x},${coords.y},${coords.w},${coords.h}/${this.size}/0/default.jpg`
       }
       if (this.coords) {
@@ -138,26 +154,48 @@ export default defineComponent({
         h: y1 - y0,
       }
     },
+    async getIIIFInfo() {
+      const iiif = this.iiif
+        .replace('/info.json', '')
+        .replace(String(process.env.VUE_APP_BASE_URL), '')
+
+      const status = await axios
+        .get(`${iiif}/info.json`)
+        .then(response => {
+          this.width = response.data.width
+          this.height = response.data.height
+          this.image = new Image()
+          // get actual size fo the image
+          this.image.onload = () => {
+            this.imageWidth = this.image.naturalWidth
+            this.imageHeight = this.image.naturalHeight
+            this.isLoaded = true
+          }
+          this.image.src = this.computedImageUrl
+          return 'success'
+        })
+        .catch(error => {
+          if (error.response.status !== 404) {
+            this.errorMessage = error.message + iiif
+            return 'error'
+          }
+          console.warn(
+            '[IIIFFragment] Error catch on @mounted iiif',
+            iiif,
+            '\nerror:',
+            error.message,
+            error,
+          )
+          this.isLoaded = false
+          this.isNotFound = true
+          return 'not found'
+        })
+      console.info('[IIIFFragment] \n - iiif:', iiif, '\n - status:', status)
+    },
   },
+
   mounted() {
-    const iiif = this.iiif.replace('/info.json', '').replace('https://impresso-project.ch/', '/')
-    axios
-      .get(`${iiif}/info.json`)
-      .then(response => {
-        this.width = response.data.width
-        this.height = response.data.height
-        this.image = new Image()
-        // get actual size fo the image
-        this.image.onload = () => {
-          this.imageWidth = this.image.naturalWidth
-          this.imageHeight = this.image.naturalHeight
-          this.isLoaded = true
-        }
-        this.image.src = this.computedImageUrl
-      })
-      .catch(error => {
-        console.error(error)
-      })
+    this.getIIIFInfo()
     // load iiiif info.json
   },
 })