Fixed: Movie Path UI Warning, Duplicate Import Fixes

frontend/src/AddMovie/AddNewMovie/AddNewMovie.css

@@ -35,14 +35,20 @@
 .message {
   margin-top: 30px;
   text-align: center;
+  font-weight: 300;
+  font-size: $largeFontSize;
 }
 
 .helpText {
   margin-bottom: 10px;
-  font-weight: 300;
   font-size: 24px;
 }
 
+.noMoviesText {
+  margin-top: 80px;
+  margin-bottom: 20px;
+}
+
 .noResults {
   margin-bottom: 10px;
   font-weight: 300;

frontend/src/AddMovie/AddNewMovie/AddNewMovie.js

@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import getErrorMessage from 'Utilities/Object/getErrorMessage';
-import { icons } from 'Helpers/Props';
+import { icons, kinds } from 'Helpers/Props';
 import Button from 'Components/Link/Button';
 import Link from 'Components/Link/Link';
 import Icon from 'Components/Icon';
@@ -79,7 +79,8 @@ class AddNewMovie extends Component {
   render() {
     const {
       error,
-      items
+      items,
+      hasExistingMovies
     } = this.props;
 
     const term = this.state.term;
@@ -160,13 +161,34 @@ class AddNewMovie extends Component {
           }
 
           {
-            !term &&
+            term ?
+              null :
               <div className={styles.message}>
-                <div className={styles.helpText}>It's easy to add a new movie, just start typing the name the movie you want to add.</div>
+                <div className={styles.helpText}>
+                  It's easy to add a new movie, just start typing the name the movie you want to add.
+                </div>
                 <div>You can also search using TMDB ID of a movie. eg. tmdb:71663</div>
               </div>
           }
 
+          {
+            !term && !hasExistingMovies ?
+              <div className={styles.message}>
+                <div className={styles.noMoviesText}>
+                  You haven't added any movies yet, do you want to import some or all of your movies first?
+                </div>
+                <div>
+                  <Button
+                    to="/add/import"
+                    kind={kinds.PRIMARY}
+                  >
+                    Import Existing Movies
+                  </Button>
+                </div>
+              </div> :
+              null
+          }
+
           <div />
         </PageContentBodyConnector>
       </PageContent>
@@ -181,6 +203,7 @@ AddNewMovie.propTypes = {
   isAdding: PropTypes.bool.isRequired,
   addError: PropTypes.object,
   items: PropTypes.arrayOf(PropTypes.object).isRequired,
+  hasExistingMovies: PropTypes.bool.isRequired,
   onMovieLookupChange: PropTypes.func.isRequired,
   onClearMovieLookup: PropTypes.func.isRequired
 };

frontend/src/AddMovie/AddNewMovie/AddNewMovieConnector.js

@@ -11,13 +11,15 @@ import AddNewMovie from './AddNewMovie';
 function createMapStateToProps() {
   return createSelector(
     (state) => state.addMovie,
+    (state) => state.movies.items.length,
     (state) => state.router.location,
-    (addMovie, location) => {
+    (addMovie, existingMoviesCount, location) => {
       const { params } = parseUrl(location.search);
 
       return {
+        ...addMovie,
         term: params.term,
-        ...addMovie
+        hasExistingMovies: existingMoviesCount > 0
       };
     }
   );

frontend/src/AddMovie/AddNewMovie/AddNewMovieModalContent.js

@@ -55,8 +55,10 @@ class AddNewMovieModalContent extends Component {
       rootFolderPath,
       monitor,
       qualityProfileId,
+      folder,
       tags,
       isSmallScreen,
+      isWindows,
       onModalClose,
       onInputChange
     } = this.props;
@@ -97,6 +99,15 @@ class AddNewMovieModalContent extends Component {
                   <FormInputGroup
                     type={inputTypes.ROOT_FOLDER_SELECT}
                     name="rootFolderPath"
+                    valueOptions={{
+                      movieFolder: folder,
+                      isWindows
+                    }}
+                    selectedValueOptions={{
+                      movieFolder: folder,
+                      isWindows
+                    }}
+                    helpText={`'${folder}' subfolder will be created automatically`}
                     onChange={onInputChange}
                     {...rootFolderPath}
                   />
@@ -180,8 +191,10 @@ AddNewMovieModalContent.propTypes = {
   rootFolderPath: PropTypes.object,
   monitor: PropTypes.object.isRequired,
   qualityProfileId: PropTypes.object,
+  folder: PropTypes.string.isRequired,
   tags: PropTypes.object.isRequired,
   isSmallScreen: PropTypes.bool.isRequired,
+  isWindows: PropTypes.bool.isRequired,
   onModalClose: PropTypes.func.isRequired,
   onInputChange: PropTypes.func.isRequired,
   onAddMoviePress: PropTypes.func.isRequired

frontend/src/AddMovie/AddNewMovie/AddNewMovieModalContentConnector.js

@@ -4,6 +4,7 @@ import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
 import { setAddMovieDefault, addMovie } from 'Store/Actions/addMovieActions';
 import createDimensionsSelector from 'Store/Selectors/createDimensionsSelector';
+import createSystemStatusSelector from 'Store/Selectors/createSystemStatusSelector';
 import selectSettings from 'Store/Selectors/selectSettings';
 import AddNewMovieModalContent from './AddNewMovieModalContent';
 
@@ -11,7 +12,8 @@ function createMapStateToProps() {
   return createSelector(
     (state) => state.addMovie,
     createDimensionsSelector(),
-    (addMovieState, dimensions) => {
+    createSystemStatusSelector(),
+    (addMovieState, dimensions, systemStatus) => {
       const {
         isAdding,
         addError,
@@ -30,6 +32,7 @@ function createMapStateToProps() {
         isSmallScreen: dimensions.isSmallScreen,
         validationErrors,
         validationWarnings,
+        isWindows: systemStatus.isWindows,
         ...settings
       };
     }

frontend/src/AddMovie/AddNewMovie/AddNewMovieSearchResult.js

@@ -52,6 +52,7 @@ class AddNewMovieSearchResult extends Component {
       status,
       overview,
       ratings,
+      folder,
       images,
       isExistingMovie,
       isExclusionMovie,
@@ -148,6 +149,7 @@ class AddNewMovieSearchResult extends Component {
           title={title}
           year={year}
           overview={overview}
+          folder={folder}
           images={images}
           onModalClose={this.onAddMovieModalClose}
         />
@@ -165,6 +167,7 @@ AddNewMovieSearchResult.propTypes = {
   status: PropTypes.string.isRequired,
   overview: PropTypes.string,
   ratings: PropTypes.object.isRequired,
+  folder: PropTypes.string.isRequired,
   images: PropTypes.arrayOf(PropTypes.object).isRequired,
   isExistingMovie: PropTypes.bool.isRequired,
   isExclusionMovie: PropTypes.bool.isRequired,