From 8fe720cfff44d067640e26f53d87d642da4974cc Mon Sep 17 00:00:00 2001
From: Lukas Gruber <mail@lukas-gruber.dev>
Date: Sat, 31 Aug 2024 16:26:03 +0200
Subject: [PATCH] Highlight lyrics that match search result

---
 assets/components/AppNavbar.vue      |  7 +--
 assets/components/HighlightWords.vue | 33 ++++++++++++++
 assets/components/SearchForm.test.js |  4 +-
 assets/components/SearchForm.vue     |  8 +++-
 assets/stores/index.js               |  2 +
 assets/stores/search.js              |  9 ++++
 assets/views/TrackDetailView.vue     | 11 +++--
 package-lock.json                    | 68 ++++++++++++++++++++++------
 package.json                         |  5 +-
 9 files changed, 120 insertions(+), 27 deletions(-)
 create mode 100644 assets/components/HighlightWords.vue
 create mode 100644 assets/stores/index.js
 create mode 100644 assets/stores/search.js

diff --git a/assets/components/AppNavbar.vue b/assets/components/AppNavbar.vue
index 64f3f3d..09b3a60 100644
--- a/assets/components/AppNavbar.vue
+++ b/assets/components/AppNavbar.vue
@@ -16,7 +16,7 @@
       is-nav
     >
       <b-navbar-nav class="ml-auto">
-        <search-form @search="search" />
+        <search-form :value="searchStore.keywords" @input="search" />
       </b-navbar-nav>
 
       <b-navbar-nav class="ml-auto">
@@ -55,7 +55,7 @@
 import SearchForm from './SearchForm.vue';
 import {AuthApi} from '@/openapi';
 import querystring from 'querystring';
-import {useAuthStore} from '@/stores/auth';
+import {useAuthStore, useSearchStore} from '@/stores';
 import {mapStores} from 'pinia';
 
 const authClient = new AuthApi();
@@ -65,10 +65,11 @@ export default {
     SearchForm,
   },
   computed: {
-    ...mapStores(useAuthStore),
+    ...mapStores(useAuthStore, useSearchStore),
   },
   methods: {
     search(query) {
+      this.searchStore.keywords = query;
       this.$router.push({name: 'search', params: {q: query}}).catch(() => {});
     },
     async logout() {
diff --git a/assets/components/HighlightWords.vue b/assets/components/HighlightWords.vue
new file mode 100644
index 0000000..7662e98
--- /dev/null
+++ b/assets/components/HighlightWords.vue
@@ -0,0 +1,33 @@
+<template>
+  <WordHighlighter
+    :query="keywords"
+    :caseSensitive="false"
+    :splitBySpace="true"
+    :diacriticsSensitive="true"
+    highlightClass="mark"
+  >
+    <slot></slot>
+  </WordHighlighter>
+</template>
+
+<script>
+import WordHighlighter from 'vue-word-highlighter';
+
+export default {
+  components: {WordHighlighter},
+  props: {
+    keywords: {
+      type: String,
+    },
+  },
+};
+</script>
+
+<style>
+.mark {
+    background-color: var(--primary);
+    padding: 0;
+    box-shadow: 0 0 3px rgba(0,0,0,0.15);
+    color: var(--white);
+}
+</style>
diff --git a/assets/components/SearchForm.test.js b/assets/components/SearchForm.test.js
index 91ef4a8..306739f 100644
--- a/assets/components/SearchForm.test.js
+++ b/assets/components/SearchForm.test.js
@@ -8,7 +8,7 @@ describe('SearchForm', () => {
 
     await fireEvent.click(getByRole('button'));
 
-    expect(emitted().search).toHaveLength(1);
+    expect(emitted().input).toHaveLength(1);
   });
 
   test('Emitted event contains the entered input value', async () => {
@@ -18,6 +18,6 @@ describe('SearchForm', () => {
     await fireEvent.update(getByRole('textbox'), query);
     await fireEvent.click(getByRole('button'));
 
-    expect(emitted().search[0][0]).toEqual(query);
+    expect(emitted().input[0][0]).toEqual(query);
   });
 });
diff --git a/assets/components/SearchForm.vue b/assets/components/SearchForm.vue
index d010339..b181f4d 100644
--- a/assets/components/SearchForm.vue
+++ b/assets/components/SearchForm.vue
@@ -1,7 +1,7 @@
 <template>
   <b-nav-form
     class="search-form"
-    @submit.prevent="$emit('search', query)"
+    @submit.prevent="$emit('input', query)"
   >
     <b-input-group>
       <b-form-input
@@ -25,11 +25,17 @@
 
 <script>
 export default {
+  props: {
+    value: String,
+  },
   data() {
     return {
       query: '',
     };
   },
+  mounted() {
+    this.query = this.value;
+  },
 };
 </script>
 
diff --git a/assets/stores/index.js b/assets/stores/index.js
new file mode 100644
index 0000000..f6bc52f
--- /dev/null
+++ b/assets/stores/index.js
@@ -0,0 +1,2 @@
+export {useAuthStore} from './auth';
+export {useSearchStore} from './search';
diff --git a/assets/stores/search.js b/assets/stores/search.js
new file mode 100644
index 0000000..1331005
--- /dev/null
+++ b/assets/stores/search.js
@@ -0,0 +1,9 @@
+import {defineStore} from 'pinia';
+
+export const useSearchStore = defineStore({
+  id: 'search',
+  persist: true,
+  state: () => ({
+    keywords: '',
+  }),
+});
diff --git a/assets/views/TrackDetailView.vue b/assets/views/TrackDetailView.vue
index d05d1f7..818046c 100644
--- a/assets/views/TrackDetailView.vue
+++ b/assets/views/TrackDetailView.vue
@@ -125,7 +125,9 @@
                   :style="textareaStyle"
                 />
                 <div v-else-if="track.lyrics">
-                  <span class="lyrics-text">{{ track.lyrics }}</span>
+                  <HighlightWords :keywords="searchStore.keywords" class="lyrics-text">
+                    {{ track.lyrics }}
+                  </HighlightWords>
                 </div>
                 <div v-else-if="track.lyricsImportErrorCount > maxImportErrorCount">
                   <small class="text-warning">Lyrics not found. Import
@@ -151,14 +153,15 @@
 import {ImportApi, Lyrics, TracksApi} from '@/openapi';
 import ErrorBox from '@/components/ErrorBox';
 import {mapStores} from 'pinia';
-import {useAuthStore} from '@/stores/auth';
+import {useAuthStore, useSearchStore} from '@/stores';
 import LoadingButton from '@/components/LoadingButton';
+import HighlightWords from '@/components/HighlightWords';
 
 const api = new TracksApi();
 const importApi = new ImportApi();
 
 export default {
-  components: {LoadingButton, ErrorBox},
+  components: {LoadingButton, ErrorBox, HighlightWords},
   data: () => ({
     track: null,
     notFound: false,
@@ -167,7 +170,7 @@ export default {
     importingLyrics: false,
   }),
   computed: {
-    ...mapStores(useAuthStore),
+    ...mapStores(useAuthStore, useSearchStore),
     textareaStyle() {
       const lineBreaks = this.track.lyrics.match(/\n/g);
       if (!lineBreaks) {
diff --git a/package-lock.json b/package-lock.json
index 6350ab0..d9c5e78 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,7 +10,7 @@
       "dependencies": {
         "@babel/polyfill": "^7.11.5",
         "@fortawesome/fontawesome-free": "^6.1.1",
-        "@vue/composition-api": "^1.6.2",
+        "@vue/composition-api": "^1.7.2",
         "bootstrap": "^4.6.0",
         "bootstrap-vue": "^2.17.3",
         "bootswatch": "^4.6.0",
@@ -25,7 +25,8 @@
         "superagent": "^7.1.6",
         "vue": "^2.6.14",
         "vue-router": "^3.5.1",
-        "vue-toastification": "^1.7.14"
+        "vue-toastification": "^1.7.14",
+        "vue-word-highlighter": "^1.2.4"
       },
       "devDependencies": {
         "@babel/core": "^7.12.16",
@@ -5655,11 +5656,11 @@
       "dev": true
     },
     "node_modules/@vue/composition-api": {
-      "version": "1.6.2",
-      "resolved": "https://registry.npmjs.org/@vue/composition-api/-/composition-api-1.6.2.tgz",
-      "integrity": "sha512-g6pCOaAB5Z987EwCBIDanRlramrgnWfrrYS8F/0axn2AL8EvyfAebDcLTSr48hac0G0rqC9ODp5LWaiupzl6Tw==",
+      "version": "1.7.2",
+      "resolved": "https://registry.npmjs.org/@vue/composition-api/-/composition-api-1.7.2.tgz",
+      "integrity": "sha512-M8jm9J/laYrYT02665HkZ5l2fWTK4dcVg3BsDHm/pfz+MjDYwX+9FUaZyGwEyXEDonQYRCo0H7aLgdklcIELjw==",
       "peerDependencies": {
-        "vue": ">= 2.5 < 3"
+        "vue": ">= 2.5 < 2.7"
       }
     },
     "node_modules/@vue/devtools-api": {
@@ -10118,6 +10119,11 @@
         "wrappy": "1"
       }
     },
+    "node_modules/diacritics": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/diacritics/-/diacritics-1.3.0.tgz",
+      "integrity": "sha512-wlwEkqcsaxvPJML+rDh/2iS824jbREk6DUMUKkEaSlxdYHeS43cClJtsWglvw2RfeXGm6ohKDqsXteJ5sP5enA=="
+    },
     "node_modules/diff": {
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/diff/-/diff-5.1.0.tgz",
@@ -25003,9 +25009,9 @@
       }
     },
     "node_modules/vue-demi": {
-      "version": "0.13.1",
-      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.13.1.tgz",
-      "integrity": "sha512-xmkJ56koG3ptpLnpgmIzk9/4nFf4CqduSJbUM0OdPoU87NwRuZ6x49OLhjSa/fC15fV+5CbEnrxU4oyE022svg==",
+      "version": "0.14.6",
+      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.6.tgz",
+      "integrity": "sha512-8QA7wrYSHKaYgUxDA5ZC24w+eHm3sYCbp0EzcDwKqN3p6HqtTCGR/GVsPyZW92unff4UlcSh++lmqDWN3ZIq4w==",
       "hasInstallScript": true,
       "bin": {
         "vue-demi-fix": "bin/vue-demi-fix.js",
@@ -25265,6 +25271,24 @@
         "vue": "^2.0.0"
       }
     },
+    "node_modules/vue-word-highlighter": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/vue-word-highlighter/-/vue-word-highlighter-1.2.4.tgz",
+      "integrity": "sha512-B+kTkkjXCdxc5cWklArxkwbmJq2lMA/RAdBCmJRG0SJYZJKFvKT6777QJv4jJa/b5saYo6OvGLJmjzUrEr8rNQ==",
+      "dependencies": {
+        "diacritics": "1.3.0",
+        "vue-demi": "0.14.6"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.0.0-rc.1",
+        "vue": "^2.0.0 || >=3.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/w3c-hr-time": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/w3c-hr-time/-/w3c-hr-time-1.0.2.tgz",
@@ -32058,9 +32082,9 @@
       }
     },
     "@vue/composition-api": {
-      "version": "1.6.2",
-      "resolved": "https://registry.npmjs.org/@vue/composition-api/-/composition-api-1.6.2.tgz",
-      "integrity": "sha512-g6pCOaAB5Z987EwCBIDanRlramrgnWfrrYS8F/0axn2AL8EvyfAebDcLTSr48hac0G0rqC9ODp5LWaiupzl6Tw==",
+      "version": "1.7.2",
+      "resolved": "https://registry.npmjs.org/@vue/composition-api/-/composition-api-1.7.2.tgz",
+      "integrity": "sha512-M8jm9J/laYrYT02665HkZ5l2fWTK4dcVg3BsDHm/pfz+MjDYwX+9FUaZyGwEyXEDonQYRCo0H7aLgdklcIELjw==",
       "requires": {}
     },
     "@vue/devtools-api": {
@@ -35461,6 +35485,11 @@
         "wrappy": "1"
       }
     },
+    "diacritics": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/diacritics/-/diacritics-1.3.0.tgz",
+      "integrity": "sha512-wlwEkqcsaxvPJML+rDh/2iS824jbREk6DUMUKkEaSlxdYHeS43cClJtsWglvw2RfeXGm6ohKDqsXteJ5sP5enA=="
+    },
     "diff": {
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/diff/-/diff-5.1.0.tgz",
@@ -46756,9 +46785,9 @@
       }
     },
     "vue-demi": {
-      "version": "0.13.1",
-      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.13.1.tgz",
-      "integrity": "sha512-xmkJ56koG3ptpLnpgmIzk9/4nFf4CqduSJbUM0OdPoU87NwRuZ6x49OLhjSa/fC15fV+5CbEnrxU4oyE022svg==",
+      "version": "0.14.6",
+      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.6.tgz",
+      "integrity": "sha512-8QA7wrYSHKaYgUxDA5ZC24w+eHm3sYCbp0EzcDwKqN3p6HqtTCGR/GVsPyZW92unff4UlcSh++lmqDWN3ZIq4w==",
       "requires": {}
     },
     "vue-eslint-parser": {
@@ -46949,6 +46978,15 @@
       "integrity": "sha512-khZR8t3NWZ/JJ2MZxXLbesHrRJ8AKa75PY5Zq8yMifF9x8lHq8ljYkC0d2PD9yahooygQB5tcFyRDkbbIPx8hw==",
       "requires": {}
     },
+    "vue-word-highlighter": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/vue-word-highlighter/-/vue-word-highlighter-1.2.4.tgz",
+      "integrity": "sha512-B+kTkkjXCdxc5cWklArxkwbmJq2lMA/RAdBCmJRG0SJYZJKFvKT6777QJv4jJa/b5saYo6OvGLJmjzUrEr8rNQ==",
+      "requires": {
+        "diacritics": "1.3.0",
+        "vue-demi": "0.14.6"
+      }
+    },
     "w3c-hr-time": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/w3c-hr-time/-/w3c-hr-time-1.0.2.tgz",
diff --git a/package.json b/package.json
index f4a3b88..9c53828 100644
--- a/package.json
+++ b/package.json
@@ -14,7 +14,7 @@
   "dependencies": {
     "@babel/polyfill": "^7.11.5",
     "@fortawesome/fontawesome-free": "^6.1.1",
-    "@vue/composition-api": "^1.6.2",
+    "@vue/composition-api": "^1.7.2",
     "bootstrap": "^4.6.0",
     "bootstrap-vue": "^2.17.3",
     "bootswatch": "^4.6.0",
@@ -29,7 +29,8 @@
     "superagent": "^7.1.6",
     "vue": "^2.6.14",
     "vue-router": "^3.5.1",
-    "vue-toastification": "^1.7.14"
+    "vue-toastification": "^1.7.14",
+    "vue-word-highlighter": "^1.2.4"
   },
   "devDependencies": {
     "@babel/core": "^7.12.16",