mirror of
https://github.com/Prowlarr/Prowlarr.git
synced 2025-09-17 17:14:18 +02:00
Fix: Aphrodite UI enhancements
* New: Display UI before movies have loaded * Revised webpack bundling * New: Option for production build with profiling * Fixed: Faster hasDifferentItems and specialized OrOrder version * Fixed: Faster movie selector * Fixed: Speed up release processing, add indices (migration 161) * Fixed: Use a worker for UI fuzzy search * Fixed: Don't loop over all movies if we know none selected * Fixed: Strip UrlBase from UI events before sending to sentry Should mean that source maps are picked up correctly. * Better selection of jump bar items Show first, last and most common items * Fixed: Don't repeatedly re-render cells * Rework Movie Index and virtualTable * Corresponding improvements for AddListMovie and ImportMovie
This commit is contained in:
@@ -1,29 +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 MovieSearchResult from './MovieSearchResult';
|
||||
import LoadingIndicator from 'Components/Loading/LoadingIndicator';
|
||||
import FuseWorker from './fuse.worker';
|
||||
import styles from './MovieSearchInput.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: [
|
||||
'title',
|
||||
'alternateTitles.title',
|
||||
'tags.label'
|
||||
]
|
||||
};
|
||||
const workerInstance = new FuseWorker();
|
||||
|
||||
class MovieSearchInput extends Component {
|
||||
|
||||
@@ -43,6 +32,7 @@ class MovieSearchInput extends Component {
|
||||
|
||||
componentDidMount() {
|
||||
this.props.bindShortcut(shortcuts.MOVIE_SEARCH_INPUT.key, this.focusInput);
|
||||
workerInstance.addEventListener('message', this.onSuggestionsReceived, false);
|
||||
}
|
||||
|
||||
//
|
||||
@@ -82,6 +72,12 @@ class MovieSearchInput extends Component {
|
||||
);
|
||||
}
|
||||
|
||||
if (item.type === LOADING_TYPE) {
|
||||
return (
|
||||
<LoadingIndicator />
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<MovieSearchResult
|
||||
{...item.item}
|
||||
@@ -128,7 +124,7 @@ class MovieSearchInput extends Component {
|
||||
highlightedSuggestionIndex
|
||||
} = this._autosuggest.state;
|
||||
|
||||
if (!suggestions.length || highlightedSectionIndex) {
|
||||
if (!suggestions.length || suggestions[0].type === LOADING_TYPE || highlightedSectionIndex) {
|
||||
this.props.onGoToAddNewMovie(value);
|
||||
this._autosuggest.input.blur();
|
||||
this.reset();
|
||||
@@ -154,35 +150,30 @@ class MovieSearchInput extends Component {
|
||||
}
|
||||
|
||||
onSuggestionsFetchRequested = ({ value }) => {
|
||||
const { movies } = this.props;
|
||||
let suggestions = [];
|
||||
|
||||
if (value.length === 1) {
|
||||
suggestions = movies.reduce((acc, s) => {
|
||||
if (s.firstCharacter === value.toLowerCase()) {
|
||||
acc.push({
|
||||
item: s,
|
||||
indices: [
|
||||
[0, 0]
|
||||
],
|
||||
matches: [
|
||||
{
|
||||
value: s.title,
|
||||
key: 'title'
|
||||
}
|
||||
],
|
||||
arrayIndex: 0
|
||||
});
|
||||
this.setState({
|
||||
suggestions: [
|
||||
{
|
||||
type: LOADING_TYPE,
|
||||
title: value
|
||||
}
|
||||
]
|
||||
});
|
||||
this.requestSuggestions(value);
|
||||
};
|
||||
|
||||
return acc;
|
||||
}, []);
|
||||
} else {
|
||||
const fuse = new Fuse(movies, fuseOptions);
|
||||
suggestions = fuse.search(value);
|
||||
}
|
||||
requestSuggestions = _.debounce((value) => {
|
||||
const payload = {
|
||||
value,
|
||||
movies: this.props.movies
|
||||
};
|
||||
|
||||
this.setState({ suggestions });
|
||||
workerInstance.postMessage(payload);
|
||||
}, 250);
|
||||
|
||||
onSuggestionsReceived = (message) => {
|
||||
this.setState({
|
||||
suggestions: message.data
|
||||
});
|
||||
}
|
||||
|
||||
onSuggestionsClearRequested = () => {
|
||||
|
63
frontend/src/Components/Page/Header/fuse.worker.js
Normal file
63
frontend/src/Components/Page/Header/fuse.worker.js
Normal file
@@ -0,0 +1,63 @@
|
||||
import Fuse from 'fuse.js';
|
||||
|
||||
const fuseOptions = {
|
||||
shouldSort: true,
|
||||
includeMatches: true,
|
||||
threshold: 0.3,
|
||||
location: 0,
|
||||
distance: 100,
|
||||
maxPatternLength: 32,
|
||||
minMatchCharLength: 1,
|
||||
keys: [
|
||||
'title',
|
||||
'alternateTitles.title',
|
||||
'tags.label'
|
||||
]
|
||||
};
|
||||
|
||||
function getSuggestions(movies, value) {
|
||||
const limit = 10;
|
||||
let suggestions = [];
|
||||
|
||||
if (value.length === 1) {
|
||||
for (let i = 0; i < movies.length; i++) {
|
||||
const s = movies[i];
|
||||
if (s.firstCharacter === value.toLowerCase()) {
|
||||
suggestions.push({
|
||||
item: movies[i],
|
||||
indices: [
|
||||
[0, 0]
|
||||
],
|
||||
matches: [
|
||||
{
|
||||
value: s.title,
|
||||
key: 'title'
|
||||
}
|
||||
],
|
||||
arrayIndex: 0
|
||||
});
|
||||
if (suggestions.length > limit) {
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
} else {
|
||||
const fuse = new Fuse(movies, fuseOptions);
|
||||
suggestions = fuse.search(value, { limit });
|
||||
}
|
||||
|
||||
return suggestions;
|
||||
}
|
||||
|
||||
self.addEventListener('message', (e) => {
|
||||
if (!e) {
|
||||
return;
|
||||
}
|
||||
|
||||
const {
|
||||
movies,
|
||||
value
|
||||
} = e.data;
|
||||
|
||||
self.postMessage(getSuggestions(movies, value));
|
||||
});
|
Reference in New Issue
Block a user