Allow conversion to be applied to books already in the library

frontend/src/Author/Details/AuthorDetails.js

@@ -18,6 +18,7 @@ import PageToolbarButton from 'Components/Page/Toolbar/PageToolbarButton';
 import PageToolbarSection from 'Components/Page/Toolbar/PageToolbarSection';
 import PageToolbarSeparator from 'Components/Page/Toolbar/PageToolbarSeparator';
 import SwipeHeaderConnector from 'Components/Swipe/SwipeHeaderConnector';
+import ConvertPreviewModalConnector from 'Convert/ConvertPreviewModalConnector';
 import { align, icons, kinds } from 'Helpers/Props';
 import InteractiveSearchFilterMenuConnector from 'InteractiveSearch/InteractiveSearchFilterMenuConnector';
 import InteractiveSearchTable from 'InteractiveSearch/InteractiveSearchTable';
@@ -55,6 +56,7 @@ class AuthorDetails extends Component {
     this.state = {
       isOrganizeModalOpen: false,
       isRetagModalOpen: false,
+      isConvertModalOpen: false,
       isEditAuthorModalOpen: false,
       isSelectRootFolderModalOpen: false,
       selectRootFolderMediaType: 'audiobook',
@@ -130,6 +132,14 @@ class AuthorDetails extends Component {
     this.setState({ isRetagModalOpen: false });
   };
 
+  onConvertPress = () => {
+    this.setState({ isConvertModalOpen: true });
+  };
+
+  onConvertModalClose = () => {
+    this.setState({ isConvertModalOpen: false });
+  };
+
   onInteractiveImportPress = () => {
     this.setState({ isInteractiveImportModalOpen: true });
   };
@@ -281,6 +291,7 @@ class AuthorDetails extends Component {
 	    const {
 	      isOrganizeModalOpen,
 	      isRetagModalOpen,
+      isConvertModalOpen,
 	      isEditAuthorModalOpen,
 	      isSelectRootFolderModalOpen,
 	      selectRootFolderMediaType,
@@ -345,6 +356,13 @@ class AuthorDetails extends Component {
               onPress={this.onRetagPress}
             />
 
+            <PageToolbarButton
+              label={translate('ConvertFiles')}
+              iconName={icons.CONVERT}
+              isDisabled={!hasBookFiles}
+              onPress={this.onConvertPress}
+            />
+
             <PageToolbarButton
               label={translate('ManualImport')}
               iconName={icons.INTERACTIVE}
@@ -636,6 +654,12 @@ class AuthorDetails extends Component {
             onModalClose={this.onRetagModalClose}
           />
 
+          <ConvertPreviewModalConnector
+            isOpen={isConvertModalOpen}
+            authorId={id}
+            onModalClose={this.onConvertModalClose}
+          />
+
 	          <EditAuthorModalConnector
 	            isOpen={isEditAuthorModalOpen}
 	            authorId={id}

frontend/src/Book/Details/BookDetails.js

@@ -14,6 +14,7 @@ import PageToolbarButton from 'Components/Page/Toolbar/PageToolbarButton';
 import PageToolbarSection from 'Components/Page/Toolbar/PageToolbarSection';
 import PageToolbarSeparator from 'Components/Page/Toolbar/PageToolbarSeparator';
 import SwipeHeaderConnector from 'Components/Swipe/SwipeHeaderConnector';
+import ConvertPreviewModalConnector from 'Convert/ConvertPreviewModalConnector';
 import { icons } from 'Helpers/Props';
 import InteractiveSearchFilterMenuConnector from 'InteractiveSearch/InteractiveSearchFilterMenuConnector';
 import InteractiveSearchTable from 'InteractiveSearch/InteractiveSearchTable';
@@ -36,6 +37,7 @@ class BookDetails extends Component {
     this.state = {
       isOrganizeModalOpen: false,
       isRetagModalOpen: false,
+      isConvertModalOpen: false,
       isEditBookModalOpen: false,
       isDeleteBookModalOpen: false,
       selectedTabIndex: 0
@@ -74,6 +76,14 @@ class BookDetails extends Component {
     this.setState({ isRetagModalOpen: false });
   };
 
+  onConvertPress = () => {
+    this.setState({ isConvertModalOpen: true });
+  };
+
+  onConvertModalClose = () => {
+    this.setState({ isConvertModalOpen: false });
+  };
+
   onEditBookPress = () => {
     this.setState({ isEditBookModalOpen: true });
   };
@@ -129,6 +139,7 @@ class BookDetails extends Component {
     const {
       isOrganizeModalOpen,
       isRetagModalOpen,
+      isConvertModalOpen,
       isEditBookModalOpen,
       isDeleteBookModalOpen,
       selectedTabIndex
@@ -170,6 +181,13 @@ class BookDetails extends Component {
               onPress={this.onRetagPress}
             />
 
+            <PageToolbarButton
+              label={translate('ConvertFiles')}
+              iconName={icons.CONVERT}
+              isDisabled={!hasBookFiles}
+              onPress={this.onConvertPress}
+            />
+
             <PageToolbarSeparator />
 
             <PageToolbarButton
@@ -361,6 +379,13 @@ class BookDetails extends Component {
             onModalClose={this.onRetagModalClose}
           />
 
+          <ConvertPreviewModalConnector
+            isOpen={isConvertModalOpen}
+            authorId={author.id}
+            bookId={id}
+            onModalClose={this.onConvertModalClose}
+          />
+
           <EditBookModalConnector
             isOpen={isEditBookModalOpen}
             bookId={id}

frontend/src/Commands/commandNames.js

@@ -3,6 +3,8 @@ export const BACKUP = 'Backup';
 export const REFRESH_MONITORED_DOWNLOADS = 'RefreshMonitoredDownloads';
 export const RETRY_FAILED_IMPORT = 'RetryFailedImport';
 export const CLEAR_BLOCKLIST = 'ClearBlocklist';
+export const CONVERT_BOOK_FILES = 'ConvertBookFiles';
+export const CONVERT_AUTHOR = 'ConvertAuthor';
 export const CHECK_HEALTH = 'CheckHealth';
 export const CLEAR_LOGS = 'ClearLog';
 export const CUTOFF_UNMET_BOOK_SEARCH = 'CutoffUnmetBookSearch';

frontend/src/Convert/ConvertPreviewModal.js

@@ -0,0 +1,34 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import Modal from 'Components/Modal/Modal';
+import ConvertPreviewModalContentConnector from './ConvertPreviewModalContentConnector';
+
+function ConvertPreviewModal(props) {
+  const {
+    isOpen,
+    onModalClose,
+    ...otherProps
+  } = props;
+
+  return (
+    <Modal
+      isOpen={isOpen}
+      onModalClose={onModalClose}
+    >
+      {
+        isOpen &&
+          <ConvertPreviewModalContentConnector
+            {...otherProps}
+            onModalClose={onModalClose}
+          />
+      }
+    </Modal>
+  );
+}
+
+ConvertPreviewModal.propTypes = {
+  isOpen: PropTypes.bool.isRequired,
+  onModalClose: PropTypes.func.isRequired
+};
+
+export default ConvertPreviewModal;

frontend/src/Convert/ConvertPreviewModalConnector.js

@@ -0,0 +1,39 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import { clearConvertPreview } from 'Store/Actions/convertPreviewActions';
+import ConvertPreviewModal from './ConvertPreviewModal';
+
+const mapDispatchToProps = {
+  clearConvertPreview
+};
+
+class ConvertPreviewModalConnector extends Component {
+
+  //
+  // Listeners
+
+  onModalClose = () => {
+    this.props.clearConvertPreview();
+    this.props.onModalClose();
+  };
+
+  //
+  // Render
+
+  render() {
+    return (
+      <ConvertPreviewModal
+        {...this.props}
+        onModalClose={this.onModalClose}
+      />
+    );
+  }
+}
+
+ConvertPreviewModalConnector.propTypes = {
+  clearConvertPreview: PropTypes.func.isRequired,
+  onModalClose: PropTypes.func.isRequired
+};
+
+export default connect(undefined, mapDispatchToProps)(ConvertPreviewModalConnector);

frontend/src/Convert/ConvertPreviewModalContent.css

@@ -0,0 +1,37 @@
+.previews {
+  margin-top: 20px;
+}
+
+.book {
+  margin-bottom: 20px;
+
+  &:last-of-type {
+    margin-bottom: 0;
+  }
+}
+
+.bookHeader {
+  display: flex;
+  align-items: center;
+  margin-bottom: 8px;
+}
+
+.bookSelectedContainer {
+  margin-right: 10px;
+  margin-bottom: 0;
+}
+
+.bookTitle {
+  font-weight: bold;
+}
+
+.selectAllInputContainer {
+  margin-right: auto;
+  line-height: 30px;
+}
+
+.selectAllInput {
+  composes: input from '~Components/Form/CheckInput.css';
+
+  margin: 0;
+}

frontend/src/Convert/ConvertPreviewModalContent.css.d.ts

@@ -0,0 +1,13 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+  'book': string;
+  'bookHeader': string;
+  'bookSelectedContainer': string;
+  'bookTitle': string;
+  'previews': string;
+  'selectAllInput': string;
+  'selectAllInputContainer': string;
+}
+export const cssExports: CssExports;
+export default cssExports;