Sync Packages with Radarr

2025-07-12 08:07:10 -07:00 · 2020-06-27 17:51:59 -04:00 · 2020-06-27 17:51:59 -04:00 · f5e2a447e9
commit f5e2a447e9
parent 4fd772f62b
66 changed files with 2278 additions and 1939 deletions
--- a/frontend/src/Components/Filter/CustomFilters/CustomFiltersModalContent.js
+++ b/frontend/src/Components/Filter/CustomFilters/CustomFiltersModalContent.js
@ -24,7 +24,7 @@ function CustomFiltersModalContent(props) {
  return (
    <ModalContent onModalClose={onModalClose}>
      <ModalHeader>
-          Custom Filters
+        Custom Filters
      </ModalHeader>

      <ModalBody>
@ -58,7 +58,7 @@ function CustomFiltersModalContent(props) {
        <Button
          onPress={onModalClose}
        >
-            Close
+          Close
        </Button>
      </ModalFooter>
    </ModalContent>
--- a/frontend/src/Components/Form/RootFolderSelectInputConnector.js
+++ b/frontend/src/Components/Form/RootFolderSelectInputConnector.js
@ -59,7 +59,7 @@ class RootFolderSelectInputConnector extends Component {
  //
  // Lifecycle

-  componentWillMount() {
+  UNSAFE_componentWillMount() {
    const {
      value,
      values,
--- a/frontend/src/Components/Loading/LoadingIndicator.js
+++ b/frontend/src/Components/Loading/LoadingIndicator.js
@ -2,7 +2,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import styles from './LoadingIndicator.css';

-function LoadingIndicator({ className, size }) {
+function LoadingIndicator({ className, rippleClassName, size }) {
  const sizeInPx = `${size}px`;
  const width = sizeInPx;
  const height = sizeInPx;
@ -17,17 +17,17 @@ function LoadingIndicator({ className, size }) {
        style={{ width, height }}
      >
        <div
-          className={styles.ripple}
+          className={rippleClassName}
          style={{ width, height }}
        />

        <div
-          className={styles.ripple}
+          className={rippleClassName}
          style={{ width, height }}
        />

        <div
-          className={styles.ripple}
+          className={rippleClassName}
          style={{ width, height }}
        />
      </div>
@ -37,11 +37,13 @@ function LoadingIndicator({ className, size }) {

 LoadingIndicator.propTypes = {
  className: PropTypes.string,
+  rippleClassName: PropTypes.string,
  size: PropTypes.number
 };

 LoadingIndicator.defaultProps = {
  className: styles.loading,
+  rippleClassName: styles.ripple,
  size: 50
 };

--- a/frontend/src/Components/Menu/FilterMenuContent.js
+++ b/frontend/src/Components/Menu/FilterMenuContent.js
@ -61,7 +61,7 @@ class FilterMenuContent extends Component {
        {
          showCustomFilters &&
            <MenuItem onPress={onCustomFiltersPress}>
-                Custom Filters
+              Custom Filters
            </MenuItem>
        }
      </MenuContent>
--- a/frontend/src/Components/Modal/ConfirmModal.js
+++ b/frontend/src/Components/Modal/ConfirmModal.js
@ -1,6 +1,7 @@
 import PropTypes from 'prop-types';
-import React from 'react';
+import React, { useEffect } from 'react';
 import { kinds, sizes } from 'Helpers/Props';
+import keyboardShortcuts from 'Components/keyboardShortcuts';
 import Button from 'Components/Link/Button';
 import SpinnerButton from 'Components/Link/SpinnerButton';
 import Modal from 'Components/Modal/Modal';
@ -21,9 +22,19 @@ function ConfirmModal(props) {
    hideCancelButton,
    isSpinning,
    onConfirm,
-    onCancel
+    onCancel,
+    bindShortcut,
+    unbindShortcut
  } = props;

+  useEffect(() => {
+    if (isOpen) {
+      bindShortcut('enter', onConfirm);
+    } else {
+      unbindShortcut('enter', onConfirm);
+    }
+  }, [onConfirm]);
+
  return (
    <Modal
      isOpen={isOpen}
@ -49,7 +60,7 @@ function ConfirmModal(props) {
          }

          <SpinnerButton
-            data-autofocus={true}
+            autoFocus={true}
            kind={kind}
            isSpinning={isSpinning}
            onPress={onConfirm}
@ -74,7 +85,9 @@ ConfirmModal.propTypes = {
  hideCancelButton: PropTypes.bool,
  isSpinning: PropTypes.bool.isRequired,
  onConfirm: PropTypes.func.isRequired,
-  onCancel: PropTypes.func.isRequired
+  onCancel: PropTypes.func.isRequired,
+  bindShortcut: PropTypes.func.isRequired,
+  unbindShortcut: PropTypes.func.isRequired
 };

 ConfirmModal.defaultProps = {
@ -85,4 +98,4 @@ ConfirmModal.defaultProps = {
  isSpinning: false
 };

-export default ConfirmModal;
+export default keyboardShortcuts(ConfirmModal);
--- a/frontend/src/Components/Modal/Modal.js
+++ b/frontend/src/Components/Modal/Modal.js
@ -1,6 +1,7 @@
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import ReactDOM from 'react-dom';
+import FocusLock from 'react-focus-lock';
 import classNames from 'classnames';
 import elementClass from 'element-class';
 import getUniqueElememtId from 'Utilities/getUniqueElementId';
@ -181,31 +182,33 @@ class Modal extends Component {
    }

    return ReactDOM.createPortal(
-      <div
-        className={styles.modalContainer}
-      >
+      <FocusLock disabled={false}>
        <div
-          ref={this._setBackgroundRef}
-          className={backdropClassName}
-          onMouseDown={this.onBackdropBeginPress}
-          onMouseUp={this.onBackdropEndPress}
+          className={styles.modalContainer}
        >
          <div
-            className={classNames(
-              className,
-              styles[size]
-            )}
-            style={style}
+            ref={this._setBackgroundRef}
+            className={backdropClassName}
+            onMouseDown={this.onBackdropBeginPress}
+            onMouseUp={this.onBackdropEndPress}
          >
-            <ErrorBoundary
-              errorComponent={ModalError}
-              onModalClose={onModalClose}
+            <div
+              className={classNames(
+                className,
+                styles[size]
+              )}
+              style={style}
            >
-              {children}
-            </ErrorBoundary>
+              <ErrorBoundary
+                errorComponent={ModalError}
+                onModalClose={onModalClose}
+              >
+                {children}
+              </ErrorBoundary>
+            </div>
          </div>
        </div>
-      </div>,
+      </FocusLock>,
      this._node
    );
  }
--- a/frontend/src/Components/Page/Header/ArtistSearchInput.css
+++ b/frontend/src/Components/Page/Header/ArtistSearchInput.css
@ -3,6 +3,18 @@
  align-items: center;
 }

+.loading {
+  margin-top: 18px;
+  margin-bottom: 18px;
+  text-align: center;
+}
+
+.ripple {
+  composes: ripple from '~Components/Loading/LoadingIndicator.css';
+
+  border: 2px solid $toolbarColor;
+}
+
 .input {
  margin-left: 8px;
  width: 200px;
--- a/frontend/src/Components/Page/Header/ArtistSearchInput.js
+++ b/frontend/src/Components/Page/Header/ArtistSearchInput.js
@ -74,7 +74,11 @@ class ArtistSearchInput extends Component {

    if (item.type === LOADING_TYPE) {
      return (
-        <LoadingIndicator />
+        <LoadingIndicator
+          className={styles.loading}
+          rippleClassName={styles.ripple}
+          size={30}
+        />
      );
    }

@ -124,7 +128,7 @@ class ArtistSearchInput extends Component {
      highlightedSuggestionIndex
    } = this._autosuggest.state;

-    if (!suggestions.length || suggestions[0].type === LOADING_TYPE || highlightedSectionIndex) {
+    if (!suggestions.length || highlightedSectionIndex) {
      this.props.onGoToAddNewArtist(value);
      this._autosuggest.input.blur();
      this.reset();
--- a/frontend/src/Components/Page/Header/fuse.worker.js
+++ b/frontend/src/Components/Page/Header/fuse.worker.js
@ -6,7 +6,6 @@ const fuseOptions = {
  threshold: 0.3,
  location: 0,
  distance: 100,
-  maxPatternLength: 32,
  minMatchCharLength: 1,
  keys: [
    'artistName',
--- a/frontend/src/Components/Scroller/Scroller.js
+++ b/frontend/src/Components/Scroller/Scroller.js
@ -17,12 +17,18 @@ class Scroller extends Component {

  componentDidMount() {
    const {
+      scrollDirection,
+      autoFocus,
      scrollTop
    } = this.props;

    if (this.props.scrollTop != null) {
      this._scroller.scrollTop = scrollTop;
    }
+
+    if (autoFocus && scrollDirection !== scrollDirections.NONE) {
+      this._scroller.focus({ preventScroll: true });
+    }
  }

  //
@ -58,6 +64,7 @@ class Scroller extends Component {
          styles[scrollDirection],
          autoScroll && styles.autoScroll
        )}
+        tabIndex={-1}
        {...otherProps}
      >
        {children}
@ -70,6 +77,7 @@ class Scroller extends Component {
 Scroller.propTypes = {
  className: PropTypes.string,
  scrollDirection: PropTypes.oneOf(scrollDirections.all).isRequired,
+  autoFocus: PropTypes.bool.isRequired,
  autoScroll: PropTypes.bool.isRequired,
  scrollTop: PropTypes.number,
  children: PropTypes.node,
@ -79,6 +87,7 @@ Scroller.propTypes = {

 Scroller.defaultProps = {
  scrollDirection: scrollDirections.VERTICAL,
+  autoFocus: true,
  autoScroll: true,
  registerScroller: () => {}
 };
--- a/frontend/src/Components/Table/TableOptions/TableOptionsModal.js
+++ b/frontend/src/Components/Table/TableOptions/TableOptionsModal.js
@ -136,7 +136,7 @@ class TableOptionsModal extends Component {
            isOpen ?
              <ModalContent onModalClose={onModalClose}>
                <ModalHeader>
-            Table Options
+                  Table Options
                </ModalHeader>

                <ModalBody>
@ -231,7 +231,7 @@ class TableOptionsModal extends Component {
                  <Button
                    onPress={onModalClose}
                  >
-              Close
+                    Close
                  </Button>
                </ModalFooter>
              </ModalContent> :
--- a/frontend/src/Components/keyboardShortcuts.js
+++ b/frontend/src/Components/keyboardShortcuts.js
@ -8,6 +8,16 @@ export const shortcuts = {
    name: 'Open This Modal'
  },

+  CLOSE_MODAL: {
+    key: 'Esc',
+    name: 'Close Current Modal'
+  },
+
+  ACCEPT_CONFIRM_MODAL: {
+    key: 'Enter',
+    name: 'Accept Confirmation Modal'
+  },
+
  ARTIST_SEARCH_INPUT: {
    key: 's',
    name: 'Focus Search Box'