mirror of https://github.com/lidarr/Lidarr
Fixed: Use a worker for UI fuzzy search
This commit is contained in:
parent
de491aa4b3
commit
cccac3532d
|
@ -119,6 +119,15 @@ const config = {
|
|||
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
test: /\.worker\.js$/,
|
||||
use: {
|
||||
loader: 'worker-loader',
|
||||
options: {
|
||||
name: '[name].js'
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
test: /\.js?$/,
|
||||
exclude: /(node_modules|JsLibraries)/,
|
||||
|
|
|
@ -1,28 +1,18 @@
|
|||
import _ from 'lodash';
|
||||
import PropTypes from 'prop-types';
|
||||
import React, { Component } from 'react';
|
||||
import Autosuggest from 'react-autosuggest';
|
||||
import Fuse from 'fuse.js';
|
||||
import { icons } from 'Helpers/Props';
|
||||
import Icon from 'Components/Icon';
|
||||
import keyboardShortcuts, { shortcuts } from 'Components/keyboardShortcuts';
|
||||
import ArtistSearchResult from './ArtistSearchResult';
|
||||
import LoadingIndicator from 'Components/Loading/LoadingIndicator';
|
||||
import FuseWorker from './fuse.worker';
|
||||
import styles from './ArtistSearchInput.css';
|
||||
|
||||
const LOADING_TYPE = 'suggestionsLoading';
|
||||
const ADD_NEW_TYPE = 'addNew';
|
||||
|
||||
const fuseOptions = {
|
||||
shouldSort: true,
|
||||
includeMatches: true,
|
||||
threshold: 0.3,
|
||||
location: 0,
|
||||
distance: 100,
|
||||
maxPatternLength: 32,
|
||||
minMatchCharLength: 1,
|
||||
keys: [
|
||||
'artistName',
|
||||
'tags.label'
|
||||
]
|
||||
};
|
||||
const workerInstance = new FuseWorker();
|
||||
|
||||
class ArtistSearchInput extends Component {
|
||||
|
||||
|
@ -42,6 +32,7 @@ class ArtistSearchInput extends Component {
|
|||
|
||||
componentDidMount() {
|
||||
this.props.bindShortcut(shortcuts.ARTIST_SEARCH_INPUT.key, this.focusInput);
|
||||
workerInstance.addEventListener('message', this.onSuggestionsReceived, false);
|
||||
}
|
||||
|
||||
//
|
||||
|
@ -69,7 +60,7 @@ class ArtistSearchInput extends Component {
|
|||
}
|
||||
|
||||
getSuggestionValue({ title }) {
|
||||
return title || '';
|
||||
return title;
|
||||
}
|
||||
|
||||
renderSuggestion(item, { query }) {
|
||||
|
@ -81,6 +72,12 @@ class ArtistSearchInput extends Component {
|
|||
);
|
||||
}
|
||||
|
||||
if (item.type === LOADING_TYPE) {
|
||||
return (
|
||||
<LoadingIndicator />
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<ArtistSearchResult
|
||||
{...item.item}
|
||||
|
@ -113,7 +110,7 @@ class ArtistSearchInput extends Component {
|
|||
}
|
||||
|
||||
onKeyDown = (event) => {
|
||||
if (event.key !== 'Tab' && event.key !== 'Enter' || event.key !== 'ArrowDown' || event.key !== 'ArrowUp') {
|
||||
if (event.key !== 'Tab' && event.key !== 'Enter') {
|
||||
return;
|
||||
}
|
||||
|
||||
|
@ -127,7 +124,7 @@ class ArtistSearchInput extends Component {
|
|||
highlightedSuggestionIndex
|
||||
} = this._autosuggest.state;
|
||||
|
||||
if (!suggestions.length || highlightedSectionIndex && (event.key !== 'ArrowDown' || event.key !== 'ArrowUp')) {
|
||||
if (!suggestions.length || suggestions[0].type === LOADING_TYPE || highlightedSectionIndex) {
|
||||
this.props.onGoToAddNewArtist(value);
|
||||
this._autosuggest.input.blur();
|
||||
this.reset();
|
||||
|
@ -138,7 +135,7 @@ class ArtistSearchInput extends Component {
|
|||
// If an suggestion is not selected go to the first artist,
|
||||
// otherwise go to the selected artist.
|
||||
|
||||
if (highlightedSuggestionIndex == null && (event.key !== 'ArrowDown' || event.key !== 'ArrowUp')) {
|
||||
if (highlightedSuggestionIndex == null) {
|
||||
this.goToArtist(suggestions[0]);
|
||||
} else {
|
||||
this.goToArtist(suggestions[highlightedSuggestionIndex]);
|
||||
|
@ -153,10 +150,30 @@ class ArtistSearchInput extends Component {
|
|||
}
|
||||
|
||||
onSuggestionsFetchRequested = ({ value }) => {
|
||||
const fuse = new Fuse(this.props.artists, fuseOptions);
|
||||
const suggestions = fuse.search(value).slice(0, 15);
|
||||
this.setState({
|
||||
suggestions: [
|
||||
{
|
||||
type: LOADING_TYPE,
|
||||
title: value
|
||||
}
|
||||
]
|
||||
});
|
||||
this.requestSuggestions(value);
|
||||
};
|
||||
|
||||
this.setState({ suggestions });
|
||||
requestSuggestions = _.debounce((value) => {
|
||||
const payload = {
|
||||
value,
|
||||
artists: this.props.artists
|
||||
};
|
||||
|
||||
workerInstance.postMessage(payload);
|
||||
}, 250);
|
||||
|
||||
onSuggestionsReceived = (message) => {
|
||||
this.setState({
|
||||
suggestions: message.data
|
||||
});
|
||||
}
|
||||
|
||||
onSuggestionsClearRequested = () => {
|
||||
|
|
|
@ -0,0 +1,62 @@
|
|||
import Fuse from 'fuse.js';
|
||||
|
||||
const fuseOptions = {
|
||||
shouldSort: true,
|
||||
includeMatches: true,
|
||||
threshold: 0.3,
|
||||
location: 0,
|
||||
distance: 100,
|
||||
maxPatternLength: 32,
|
||||
minMatchCharLength: 1,
|
||||
keys: [
|
||||
'artistName',
|
||||
'tags.label'
|
||||
]
|
||||
};
|
||||
|
||||
function getSuggestions(artists, value) {
|
||||
const limit = 10;
|
||||
let suggestions = [];
|
||||
|
||||
if (value.length === 1) {
|
||||
for (let i = 0; i < artists.length; i++) {
|
||||
const s = artists[i];
|
||||
if (s.firstCharacter === value.toLowerCase()) {
|
||||
suggestions.push({
|
||||
item: artists[i],
|
||||
indices: [
|
||||
[0, 0]
|
||||
],
|
||||
matches: [
|
||||
{
|
||||
value: s.title,
|
||||
key: 'title'
|
||||
}
|
||||
],
|
||||
arrayIndex: 0
|
||||
});
|
||||
if (suggestions.length > limit) {
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
} else {
|
||||
const fuse = new Fuse(artists, fuseOptions);
|
||||
suggestions = fuse.search(value, { limit });
|
||||
}
|
||||
|
||||
return suggestions;
|
||||
}
|
||||
|
||||
self.addEventListener('message', (e) => {
|
||||
if (!e) {
|
||||
return;
|
||||
}
|
||||
|
||||
const {
|
||||
artists,
|
||||
value
|
||||
} = e.data;
|
||||
|
||||
self.postMessage(getSuggestions(artists, value));
|
||||
});
|
|
@ -1,6 +1,4 @@
|
|||
/* eslint-disable-next-line no-undef */
|
||||
__webpack_public_path__ = `${window.Lidarr.urlBase}/`;
|
||||
|
||||
import './preload.js';
|
||||
import React from 'react';
|
||||
import { render } from 'react-dom';
|
||||
import { createBrowserHistory } from 'history';
|
||||
|
|
|
@ -0,0 +1,2 @@
|
|||
/* eslint no-undef: 0 */
|
||||
__webpack_public_path__ = `${window.Lidarr.urlBase}/`;
|
|
@ -124,7 +124,8 @@
|
|||
"uglifyjs-webpack-plugin": "2.2.0",
|
||||
"url-loader": "2.1.0",
|
||||
"webpack": "4.39.3",
|
||||
"webpack-stream": "5.2.1"
|
||||
"webpack-stream": "5.2.1",
|
||||
"worker-loader": "2.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@sentry/cli": "1.47.1"
|
||||
|
|
18
yarn.lock
18
yarn.lock
|
@ -5541,7 +5541,7 @@ loader-utils@^0.2.16:
|
|||
json5 "^0.5.0"
|
||||
object-assign "^4.0.1"
|
||||
|
||||
loader-utils@^1.0.2, loader-utils@^1.1.0, loader-utils@^1.2.3:
|
||||
loader-utils@^1.0.0, loader-utils@^1.0.2, loader-utils@^1.1.0, loader-utils@^1.2.3:
|
||||
version "1.2.3"
|
||||
resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-1.2.3.tgz#1ff5dc6911c9f0a062531a4c04b609406108c2c7"
|
||||
integrity sha512-fkpz8ejdnEMG3s37wGL07iSBDg99O9D5yflE9RGNH3hRdx9SOwYfnGYdZOUIZitN8E+E2vkq3MUMYMvPYl5ZZA==
|
||||
|
@ -8422,6 +8422,14 @@ scheduler@^0.13.6:
|
|||
loose-envify "^1.1.0"
|
||||
object-assign "^4.1.1"
|
||||
|
||||
schema-utils@^0.4.0:
|
||||
version "0.4.7"
|
||||
resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-0.4.7.tgz#ba74f597d2be2ea880131746ee17d0a093c68187"
|
||||
integrity sha512-v/iwU6wvwGK8HbU9yi3/nhGzP0yGSuhQMzL6ySiec1FSrZZDkhm4noOSWzrNFo/jEc+SJY6jRTwuwbSXJPDUnQ==
|
||||
dependencies:
|
||||
ajv "^6.1.0"
|
||||
ajv-keywords "^3.1.0"
|
||||
|
||||
schema-utils@^1.0.0:
|
||||
version "1.0.0"
|
||||
resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-1.0.0.tgz#0b79a93204d7b600d4b2850d1f66c2a34951c770"
|
||||
|
@ -9980,6 +9988,14 @@ worker-farm@^1.3.1, worker-farm@^1.7.0:
|
|||
dependencies:
|
||||
errno "~0.1.7"
|
||||
|
||||
worker-loader@2.0.0:
|
||||
version "2.0.0"
|
||||
resolved "https://registry.yarnpkg.com/worker-loader/-/worker-loader-2.0.0.tgz#45fda3ef76aca815771a89107399ee4119b430ac"
|
||||
integrity sha512-tnvNp4K3KQOpfRnD20m8xltE3eWh89Ye+5oj7wXEEHKac1P4oZ6p9oTj8/8ExqoSBnk9nu5Pr4nKfQ1hn2APJw==
|
||||
dependencies:
|
||||
loader-utils "^1.0.0"
|
||||
schema-utils "^0.4.0"
|
||||
|
||||
wrap-ansi@^2.0.0:
|
||||
version "2.1.0"
|
||||
resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-2.1.0.tgz#d8fc3d284dd05794fe84973caecdd1cf824fdd85"
|
||||
|
|
Loading…
Reference in New Issue