Don't show resolution badge on narrow images

sist2-vue/src/Sist2Api.ts

@@ -51,6 +51,7 @@ export interface EsHit {
         duration: number
         tag: string[]
         checksum: string
+        thumbnail: string
     }
     _props: {
         isSubDocument: boolean
@@ -61,6 +62,8 @@ export interface EsHit {
         isPlayableImage: boolean
         isAudio: boolean
         hasThumbnail: boolean
+        tnW: number
+        tnH: number
     }
     highlight: {
         name: string[] | undefined,
@@ -131,6 +134,8 @@ class Sist2Api {
 
         if ("thumbnail" in hit._source) {
             hit._props.hasThumbnail = true;
+            hit._props.tnW = Number(hit._source.thumbnail.split(",")[0]);
+            hit._props.tnH = Number(hit._source.thumbnail.split(",")[1]);
         }
 
         switch (mimeCategory) {

sist2-vue/src/components/DocCard.vue

@@ -15,11 +15,15 @@
           <span class="badge badge-resolution">{{ humanTime(doc._source.duration) }}</span>
         </div>
 
-        <div v-if="doc._props.isImage && !hover" class="card-img-overlay" :class="{'small-badge': smallBadge}">
+        <div
+            v-if="doc._props.isImage && !hover && doc._props.tnW / doc._props.tnH < 5"
+            class="card-img-overlay"
+            :class="{'small-badge': smallBadge}">
           <span class="badge badge-resolution">{{ `${doc._source.width}x${doc._source.height}` }}</span>
         </div>
 
-        <div v-if="(doc._props.isVideo || doc._props.isGif) && doc._source.duration > 0 && !hover" class="card-img-overlay"
+        <div v-if="(doc._props.isVideo || doc._props.isGif) && doc._source.duration > 0 && !hover"
+             class="card-img-overlay"
              :class="{'small-badge': smallBadge}">
           <span class="badge badge-resolution">{{ humanTime(doc._source.duration) }}</span>
         </div>
@@ -39,7 +43,8 @@
       </div>
 
       <!-- Audio player-->
-      <audio v-if="doc._props.isAudio" ref="audio" preload="none" class="audio-fit fit" controls :type="doc._source.mime"
+      <audio v-if="doc._props.isAudio" ref="audio" preload="none" class="audio-fit fit" controls
+             :type="doc._source.mime"
              :src="`f/${doc._id}`"
              @play="onAudioPlay()"></audio>
 

sist2-vue/src/components/MimePicker.vue

@@ -21,6 +21,9 @@ export default {
       if (mutation.type === "setUiMimeMap") {
         const mimeMap = mutation.payload.slice();
 
+        const elem = document.getElementById("mimeTree");
+        console.log(elem);
+
         this.mimeTree = new InspireTree({
           selection: {
             mode: 'checkbox'

sist2-vue/src/views/SearchPage.vue

@@ -31,7 +31,7 @@
           </b-row>
         </b-col>
         <b-col>
-          <b-tabs>
+          <b-tabs justified>
             <b-tab :title="$t('mimeTypes')">
               <MimePicker></MimePicker>
             </b-tab>
@@ -43,13 +43,13 @@
       </b-row>
     </b-card>
 
-    <template v-if="docs.length === 0 && !uiLoading">
+    <div v-show="docs.length === 0 && !uiLoading">
       <Preloader v-if="searchBusy" class="mt-3"></Preloader>
 
       <ResultsCard></ResultsCard>
-    </template>
+    </div>
 
-    <div v-else>
+    <div v-if="docs.length > 0">
       <ResultsCard></ResultsCard>
 
       <DocCardWall v-if="optDisplay==='grid'" :docs="docs" :append="appendFunc"></DocCardWall>
@@ -113,10 +113,6 @@ export default Vue.extend({
 
     }, 350, {leading: false});
 
-    Sist2Api.getMimeTypes().then(mimeMap => {
-      this.$store.commit("setUiMimeMap", mimeMap);
-    });
-
     this.$store.dispatch("loadFromArgs", this.$route).then(() => {
       this.$store.subscribe(() => this.$store.dispatch("updateArgs", this.$router));
       this.$store.subscribe((mutation) => {
@@ -142,9 +138,13 @@ export default Vue.extend({
       sist2.getSist2Info().then(data => {
         this.setSist2Info(data);
         this.setIndices(data.indices);
-        this.uiLoading = false;
 
-        this.search(true);
+        Sist2Api.getMimeTypes().then(mimeMap => {
+          this.$store.commit("setUiMimeMap", mimeMap);
+          this.uiLoading = false;
+          this.search(true);
+        });
+
       }).catch(() => {
         this.showErrorToast();
       });