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:
ta264
2019-11-27 14:19:35 +00:00
committed by Devin Buhl
parent 95e5e3132b
commit abe7a85a39
65 changed files with 1529 additions and 1305 deletions

View File

@@ -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 = () => {

View 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));
});