Localize tag add/delete, fix some translations, add LanguageIcon, add --lang arg, fix lightbox slideshow time, fix gif hover

sist2-vue/src/components/DebugInfo.vue

@@ -15,7 +15,7 @@
 
 <script>
 import IndexDebugInfo from "@/components/IndexDebugInfo";
-import DebugIcon from "@/components/DebugIcon";
+import DebugIcon from "@/components/icons/DebugIcon";
 
 export default {
   name: "DebugInfo.vue",
@@ -27,7 +27,6 @@ export default {
         {key: "platform", value: this.$store.state.sist2Info.platform},
         {key: "debugBinary", value: this.$store.state.sist2Info.debug},
         {key: "sist2CommitHash", value: this.$store.state.sist2Info.sist2Hash},
-        {key: "libscanCommitHash", value: this.$store.state.sist2Info.libscanHash},
         {key: "esIndex", value: this.$store.state.sist2Info.esIndex},
         {key: "tagline", value: this.$store.state.sist2Info.tagline},
         {key: "dev", value: this.$store.state.sist2Info.dev},

sist2-vue/src/components/DocCard.vue

@@ -34,9 +34,11 @@
           </svg>
         </div>
 
-        <img v-if="doc._props.isPlayableImage || doc._props.isPlayableVideo"
+        <img ref="tn"
+             v-if="doc._props.isPlayableImage || doc._props.isPlayableVideo"
              :src="(doc._props.isGif && hover) ? `f/${doc._id}` : `t/${doc._source.index}/${doc._id}`"
              alt=""
+             :style="{height: (doc._props.isGif && hover) ? `${tnHeight()}px` : undefined}"
              class="pointer fit card-img-top" @click="onThumbnailClick()">
         <img v-else :src="`t/${doc._source.index}/${doc._id}`" alt=""
              class="fit card-img-top">
@@ -122,6 +124,9 @@ export default {
     },
     onTnLeave() {
       this.hover = false;
+    },
+    tnHeight() {
+      return this.$refs.tn.height;
     }
   },
 }

sist2-vue/src/components/DocListItem.vue

@@ -1,5 +1,6 @@
 <template>
-  <b-list-group-item class="flex-column align-items-start mb-2" :class="{'sub-document': doc._props.isSubDocument}">
+  <b-list-group-item class="flex-column align-items-start mb-2" :class="{'sub-document': doc._props.isSubDocument}"
+                     @mouseenter="onTnEnter()" @mouseleave="onTnLeave()" >
 
     <!-- Info modal-->
     <DocInfoModal :show="showInfo" :doc="doc" @close="showInfo = false"></DocInfoModal>
@@ -56,7 +57,7 @@ import TagContainer from "@/components/TagContainer";
 import DocFileTitle from "@/components/DocFileTitle";
 import DocInfoModal from "@/components/DocInfoModal";
 import ContentDiv from "@/components/ContentDiv";
-import FileIcon from "@/components/FileIcon";
+import FileIcon from "@/components/icons/FileIcon";
 
 export default {
   name: "DocListItem",
@@ -85,7 +86,13 @@ export default {
         return this.doc.highlight["path.nGram"] + "/"
       }
       return this.doc._source.path + "/"
-    }
+    },
+    onTnEnter() {
+      this.hover = true;
+    },
+    onTnLeave() {
+      this.hover = false;
+    },
   }
 }
 </script>

sist2-vue/src/components/Lightbox.vue

@@ -1,6 +1,5 @@
 <template>
   <div>
-    <!-- TODO: Set slideshowTime as a configurable option-->
     <FsLightbox
         :key="lightboxKey"
         :toggler="showLightbox"
@@ -10,7 +9,7 @@
         :types="lightboxTypes"
         :source-index="lightboxSlide"
         :custom-toolbar-buttons="customButtons"
-        :slideshow-time="1000 * 10"
+        :slideshow-time="$store.getters.optLightboxSlideDuration * 1000"
         :zoom-increment="0.5"
         :load-only-current-source="$store.getters.optLightboxLoadOnlyCurrent"
         :on-close="onClose"

sist2-vue/src/components/NavBar.vue

@@ -20,7 +20,7 @@
 </template>
 
 <script>
-import Sist2Icon from "@/components/Sist2Icon";
+import Sist2Icon from "@/components/icons/Sist2Icon";
 
 export default {
   name: "NavBar",

sist2-vue/src/components/TagContainer.vue

@@ -51,7 +51,7 @@
         >{{ tag.text.split(".").pop() }}</span>
 
         <b-popover :target="hit._id+tag.rawText" triggers="focus blur" placement="top">
-          <b-button variant="danger" @click="onTagDeleteClick(tag, $event)">Delete</b-button>
+          <b-button variant="danger" @click="onTagDeleteClick(tag, $event)">{{$t("deleteTag")}}</b-button>
         </b-popover>
       </div>
 
@@ -63,7 +63,7 @@
     </template>
 
     <!-- Add button -->
-    <small v-if="showAddButton" class="badge add-tag-button" @click="tagAdd()">Add</small>
+    <small v-if="showAddButton" class="badge add-tag-button" @click="tagAdd()">{{$t("addTag")}}</small>
 
     <!-- Size tag-->
     <small v-else class="text-muted badge-size">{{

sist2-vue/src/components/icons/LanguageIcon.vue

@@ -0,0 +1,21 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+    <path
+        fill="currentColor"
+        d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm1 16.057v-3.057h2.994c-.059 1.143-.212 2.24-.456 3.279-.823-.12-1.674-.188-2.538-.222zm1.957 2.162c-.499 1.33-1.159 2.497-1.957 3.456v-3.62c.666.028 1.319.081 1.957.164zm-1.957-7.219v-3.015c.868-.034 1.721-.103 2.548-.224.238 1.027.389 2.111.446 3.239h-2.994zm0-5.014v-3.661c.806.969 1.471 2.15 1.971 3.496-.642.084-1.3.137-1.971.165zm2.703-3.267c1.237.496 2.354 1.228 3.29 2.146-.642.234-1.311.442-2.019.607-.344-.992-.775-1.91-1.271-2.753zm-7.241 13.56c-.244-1.039-.398-2.136-.456-3.279h2.994v3.057c-.865.034-1.714.102-2.538.222zm2.538 1.776v3.62c-.798-.959-1.458-2.126-1.957-3.456.638-.083 1.291-.136 1.957-.164zm-2.994-7.055c.057-1.128.207-2.212.446-3.239.827.121 1.68.19 2.548.224v3.015h-2.994zm1.024-5.179c.5-1.346 1.165-2.527 1.97-3.496v3.661c-.671-.028-1.329-.081-1.97-.165zm-2.005-.35c-.708-.165-1.377-.373-2.018-.607.937-.918 2.053-1.65 3.29-2.146-.496.844-.927 1.762-1.272 2.753zm-.549 1.918c-.264 1.151-.434 2.36-.492 3.611h-3.933c.165-1.658.739-3.197 1.617-4.518.88.361 1.816.67 2.808.907zm.009 9.262c-.988.236-1.92.542-2.797.9-.89-1.328-1.471-2.879-1.637-4.551h3.934c.058 1.265.231 2.488.5 3.651zm.553 1.917c.342.976.768 1.881 1.257 2.712-1.223-.49-2.326-1.211-3.256-2.115.636-.229 1.299-.435 1.999-.597zm9.924 0c.7.163 1.362.367 1.999.597-.931.903-2.034 1.625-3.257 2.116.489-.832.915-1.737 1.258-2.713zm.553-1.917c.27-1.163.442-2.386.501-3.651h3.934c-.167 1.672-.748 3.223-1.638 4.551-.877-.358-1.81-.664-2.797-.9zm.501-5.651c-.058-1.251-.229-2.46-.492-3.611.992-.237 1.929-.546 2.809-.907.877 1.321 1.451 2.86 1.616 4.518h-3.933z"/>
+  </svg>
+</template>
+
+<script>
+export default {
+  name: "LanguageIcon"
+}
+</script>
+
+<style scoped>
+svg {
+  display: inline-block;
+  width: 20px;
+  height: 20px;
+}
+</style>

sist2-vue/src/i18n/messages.ts

@@ -5,6 +5,8 @@ export default {
             advanced: "Advanced search",
             fuzzy: "Fuzzy"
         },
+        addTag: "Add",
+        deleteTag: "Delete",
         download: "Download",
         and: "and",
         page: "page",
@@ -132,6 +134,7 @@ export default {
         saveTagModalTitle: "Add tag",
         saveTagPlaceholder: "Tag name",
         confirm: "Confirm",
+        indexPickerPlaceholder: "Select an index",
         sort: {
             relevance: "Relevance",
             dateAsc: "Date (Older first)",
@@ -161,6 +164,8 @@ export default {
             advanced: "Recherche avancée",
             fuzzy: "Approximatif"
         },
+        addTag: "Ajouter",
+        deleteTag: "Supprimer",
         download: "Télécharger",
         and: "et",
         page: "page",
@@ -320,6 +325,8 @@ export default {
             advanced: "高级搜索",
             fuzzy: "模糊搜索"
         },
+        addTag: "添加",
+        deleteTag: "删除",
         download: "下载",
         and: "与",
         page: "页",
@@ -447,6 +454,7 @@ export default {
         saveTagModalTitle: "增加标签",
         saveTagPlaceholder: "标签名",
         confirm: "确认",
+        indexPickerPlaceholder: "选择一个索引",
         sort: {
             relevance: "相关度",
             dateAsc: "日期（由旧到新）",

sist2-vue/src/store/index.ts

@@ -27,6 +27,7 @@ export default new Vuex.Store({
         size: 60,
 
         optLang: "en",
+        optLangIsDefault: true,
         optHideDuplicates: true,
         optTheme: "light",
         optDisplay: "grid",
@@ -82,7 +83,10 @@ export default new Vuex.Store({
         setSist2Info: (state, val) => state.sist2Info = val,
         setSeed: (state, val) => state.seed = val,
         setOptHideDuplicates: (state, val) => state.optHideDuplicates = val,
-        setOptLang: (state, val) => state.optLang = val,
+        setOptLang: (state, val) => {
+            state.optLang = val;
+            state.optLangIsDefault = false;
+        },
         setSortMode: (state, val) => state.sortMode = val,
         setIndices: (state, val) => {
             state.indices = val;
@@ -148,6 +152,7 @@ export default new Vuex.Store({
         setOptHideLegacy: (state, val) => state.optHideLegacy = val,
 
         setOptLightboxLoadOnlyCurrent: (state, val) => state.optLightboxLoadOnlyCurrent = val,
+        setOptLightboxSlideDuration: (state, val) => state.optLightboxSlideDuration = val,
 
         setUiMimeMap: (state, val) => state.uiMimeMap = val,
 
@@ -159,6 +164,13 @@ export default new Vuex.Store({
         },
     },
     actions: {
+        setSist2Info: (store, val) => {
+            store.commit("setSist2Info", val);
+
+            if (store.state.optLangIsDefault) {
+                store.commit("setOptLang", val.lang);
+            }
+        },
         loadFromArgs({commit}, route: Route) {
 
             if (route.query.q) {

sist2-vue/src/views/Configuration.vue

@@ -15,15 +15,8 @@
         <h4>{{ $t("displayOptions") }}</h4>
 
         <b-card>
-          <b-form-checkbox :checked="optLightboxLoadOnlyCurrent" @input="setOptLightboxLoadOnlyCurrent">
-            {{ $t("opt.lightboxLoadOnlyCurrent") }}
-          </b-form-checkbox>
 
-          <b-form-checkbox :checked="optHideLegacy" @input="setOptHideLegacy">
-            {{ $t("opt.hideLegacy") }}
-          </b-form-checkbox>
-
-          <label>{{ $t("opt.lang") }}</label>
+          <label><LanguageIcon/><span style="vertical-align: middle">&nbsp;{{ $t("opt.lang") }}</span></label>
           <b-form-select :options="langOptions" :value="optLang" @input="setOptLang"></b-form-select>
 
           <label>{{ $t("opt.theme") }}</label>
@@ -34,6 +27,16 @@
 
           <label>{{ $t("opt.columns") }}</label>
           <b-form-select :options="columnsOptions" :value="optColumns" @input="setOptColumns"></b-form-select>
+
+          <div style="height: 10px"></div>
+
+          <b-form-checkbox :checked="optLightboxLoadOnlyCurrent" @input="setOptLightboxLoadOnlyCurrent">
+            {{ $t("opt.lightboxLoadOnlyCurrent") }}
+          </b-form-checkbox>
+
+          <b-form-checkbox :checked="optHideLegacy" @input="setOptHideLegacy">
+            {{ $t("opt.hideLegacy") }}
+          </b-form-checkbox>
         </b-card>
 
         <br/>
@@ -117,15 +120,15 @@
 </template>
 
 <script>
-import Vue from "vue";
-import {mapGetters, mapMutations} from "vuex";
+import {mapActions, mapGetters, mapMutations} from "vuex";
 import DebugInfo from "@/components/DebugInfo.vue";
 import Preloader from "@/components/Preloader.vue";
 import sist2 from "@/Sist2Api";
-import GearIcon from "@/components/GearIcon.vue";
+import GearIcon from "@/components/icons/GearIcon.vue";
+import LanguageIcon from "@/components/icons/LanguageIcon";
 
 export default {
-  components: {GearIcon, DebugInfo, Preloader},
+  components: {LanguageIcon, GearIcon, DebugInfo, Preloader},
   data() {
     return {
       loading: true,
@@ -228,7 +231,7 @@ export default {
   },
   mounted() {
     sist2.getSist2Info().then(data => {
-      this.$store.commit("setSist2Info", data)
+      this.setSist2Info(data);
       this.loading = false;
     });
 
@@ -239,6 +242,9 @@ export default {
     });
   },
   methods: {
+    ...mapActions({
+      setSist2Info: "setSist2Info",
+    }),
     ...mapMutations([
       "setOptTheme",
       "setOptDisplay",
@@ -256,7 +262,6 @@ export default {
       "setOptTreemapSize",
       "setOptLightboxLoadOnlyCurrent",
       "setOptLightboxSlideDuration",
-      "setOptContainerWidth",
       "setOptResultSize",
       "setOptTagOrOperator",
       "setOptLang",

sist2-vue/src/views/SearchPage.vue

@@ -60,7 +60,7 @@
 
 <script lang="ts">
 import Preloader from "@/components/Preloader.vue";
-import {mapGetters, mapMutations} from "vuex";
+import {mapActions, mapGetters, mapMutations} from "vuex";
 import sist2 from "../Sist2Api";
 import Sist2Api, {EsHit, EsResult} from "../Sist2Api";
 import SearchBar from "@/components/SearchBar.vue";
@@ -151,8 +151,10 @@ export default Vue.extend({
     });
   },
   methods: {
-    ...mapMutations({
+    ...mapActions({
       setSist2Info: "setSist2Info",
+    }),
+    ...mapMutations({
       setIndices: "setIndices",
       setDateBoundsMin: "setDateBoundsMin",
       setDateBoundsMax: "setDateBoundsMax",

src/cli.c

@@ -377,15 +377,15 @@ int web_args_validate(web_args_t *args, int argc, const char **argv) {
         args->es_index = DEFAULT_ES_INDEX;
     }
 
-    if (args->lang == NULL) {
-        args->lang = DEFAULT_LANG;
-    }
-
     if (args->tagline == NULL) {
         args->tagline = DEFAULT_TAGLINE;
     }
 
-    if (strlen(args->lang) != 2) {
+    if (args->lang == NULL) {
+        args->lang = DEFAULT_LANG;
+    }
+
+    if (strlen(args->lang) != 2 && strlen(args->lang) != 5) {
         fprintf(stderr, "Invalid --lang value, see usage\n");
         return 1;
     }

src/ctx.h

@@ -98,7 +98,7 @@ typedef struct {
     int tag_auth_enabled;
     char *tagline;
     struct index_t indices[256];
-    char lang[3];
+    char lang[10];
     int dev;
 } WebCtx_t;
 

src/main.c

@@ -501,7 +501,7 @@ void sist2_web(web_args_t *args) {
     WebCtx.tag_auth_enabled = args->tag_auth_enabled;
     WebCtx.tagline = args->tagline;
     WebCtx.dev = args->dev;
-    strcpy(WebCtx.lang, "en");
+    strcpy(WebCtx.lang,  args->lang);
 
     for (int i = 0; i < args->index_count; i++) {
         char *abs_path = abspath(args->indices[i]);
@@ -614,6 +614,7 @@ int main(int argc, const char *argv[]) {
             OPT_STRING(0, "tag-auth", &web_args->tag_credentials, "Basic auth in user:password format for tagging"),
             OPT_STRING(0, "tagline", &web_args->tagline, "Tagline in navbar"),
             OPT_BOOLEAN(0, "dev", &web_args->dev, "Serve html & js files from disk (for development)"),
+            OPT_STRING(0, "lang", &web_args->lang, "Default UI language. Can be changed by the user"),
 
             OPT_GROUP("Exec-script options"),
             OPT_STRING(0, "es-url", &common_es_url, "Elasticsearch url. DEFAULT=http://localhost:9200"),