Fixed: Movie Details Tab (#3564)

* History Added

* History Cleanup

* History Mark Failed Fix

* History Lint Fix

* Search Tab Initial

* Interactive Search Cleanup

* Files Tab + Small Backend change to MovieFile api

* Reverse Movie History Items

* Grabbed files are not grabbable again.

* Partial movie title outline + Search not updating fix

* Lint Fix + InteractiveSearch refactor

* Rename movieLanguage.js to MovieLanguage.js

* Fixes for qstick's comments

* Rename language selector to allow for const languages

* Qstick comment changes.

* Activity Tabs - Language Column fixed

* Movie Details - MoveStatusLabel fixed

* Spaces + Lower Case added

* fixed DownloadAllowed

* Added padding to history and file tables

* Fix class =>  className

* Updated search to not refresh unless switching movie

* lint fix

* File Tab Converted to Inline Editting

* FIles tab fix + Alt Titles tab implemented

* lint fix

* Cleanup via qstick request

frontend/src/MovieFile/Editor/MovieFileEditorModal.js

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

frontend/src/MovieFile/Editor/MovieFileEditorModalContent.js

@@ -1,284 +0,0 @@
-import _ from 'lodash';
-import PropTypes from 'prop-types';
-import React, { Component } from 'react';
-import hasDifferentItems from 'Utilities/Object/hasDifferentItems';
-import getSelectedIds from 'Utilities/Table/getSelectedIds';
-import removeOldSelectedState from 'Utilities/Table/removeOldSelectedState';
-import selectAll from 'Utilities/Table/selectAll';
-import toggleSelected from 'Utilities/Table/toggleSelected';
-import { kinds } from 'Helpers/Props';
-import ConfirmModal from 'Components/Modal/ConfirmModal';
-import Button from 'Components/Link/Button';
-import SpinnerButton from 'Components/Link/SpinnerButton';
-import SelectInput from 'Components/Form/SelectInput';
-import ModalContent from 'Components/Modal/ModalContent';
-import ModalHeader from 'Components/Modal/ModalHeader';
-import ModalBody from 'Components/Modal/ModalBody';
-import ModalFooter from 'Components/Modal/ModalFooter';
-import Table from 'Components/Table/Table';
-import TableBody from 'Components/Table/TableBody';
-import MovieFileEditorRow from './MovieFileEditorRow';
-import styles from './MovieFileEditorModalContent.css';
-
-const columns = [
-  {
-    name: 'episodeNumber',
-    label: 'Episode',
-    isVisible: true
-  },
-  {
-    name: 'relativePath',
-    label: 'Relative Path',
-    isVisible: true
-  },
-  {
-    name: 'airDateUtc',
-    label: 'Air Date',
-    isVisible: true
-  },
-  {
-    name: 'language',
-    label: 'Language',
-    isVisible: true
-  },
-  {
-    name: 'quality',
-    label: 'Quality',
-    isVisible: true
-  }
-];
-
-class MovieFileEditorModalContent extends Component {
-
-  //
-  // Lifecycle
-
-  constructor(props, context) {
-    super(props, context);
-
-    this.state = {
-      allSelected: false,
-      allUnselected: false,
-      lastToggled: null,
-      selectedState: {},
-      isConfirmDeleteModalOpen: false
-    };
-  }
-
-  componentDidUpdate(prevProps) {
-    if (hasDifferentItems(prevProps.items, this.props.items)) {
-      this.setState((state) => {
-        return removeOldSelectedState(state, prevProps.items);
-      });
-    }
-  }
-
-  //
-  // Control
-
-  getSelectedIds = () => {
-    const selectedIds = getSelectedIds(this.state.selectedState);
-
-    return selectedIds.reduce((acc, id) => {
-      const matchingItem = this.props.items.find((item) => item.id === id);
-
-      if (matchingItem && !acc.includes(matchingItem.episodeFileId)) {
-        acc.push(matchingItem.episodeFileId);
-      }
-
-      return acc;
-    }, []);
-  }
-
-  //
-  // Listeners
-
-  onSelectAllChange = ({ value }) => {
-    this.setState(selectAll(this.state.selectedState, value));
-  }
-
-  onSelectedChange = ({ id, value, shiftKey = false }) => {
-    this.setState((state) => {
-      return toggleSelected(state, this.props.items, id, value, shiftKey);
-    });
-  }
-
-  onDeletePress = () => {
-    this.setState({ isConfirmDeleteModalOpen: true });
-  }
-
-  onConfirmDelete = () => {
-    this.setState({ isConfirmDeleteModalOpen: false });
-    this.props.onDeletePress(this.getSelectedIds());
-  }
-
-  onConfirmDeleteModalClose = () => {
-    this.setState({ isConfirmDeleteModalOpen: false });
-  }
-
-  onLanguageChange = ({ value }) => {
-    const selectedIds = this.getSelectedIds();
-
-    if (!selectedIds.length) {
-      return;
-    }
-
-    this.props.onLanguageChange(selectedIds, parseInt(value));
-  }
-
-  onQualityChange = ({ value }) => {
-    const selectedIds = this.getSelectedIds();
-
-    if (!selectedIds.length) {
-      return;
-    }
-
-    this.props.onQualityChange(selectedIds, parseInt(value));
-  }
-
-  //
-  // Render
-
-  render() {
-    const {
-      isDeleting,
-      items,
-      languages,
-      qualities,
-      onModalClose
-    } = this.props;
-
-    const {
-      allSelected,
-      allUnselected,
-      selectedState,
-      isConfirmDeleteModalOpen
-    } = this.state;
-
-    const languageOptions = _.reduceRight(languages, (acc, language) => {
-      acc.push({
-        key: language.id,
-        value: language.name
-      });
-
-      return acc;
-    }, [{ key: 'selectLanguage', value: 'Select Language', disabled: true }]);
-
-    const qualityOptions = _.reduceRight(qualities, (acc, quality) => {
-      acc.push({
-        key: quality.id,
-        value: quality.name
-      });
-
-      return acc;
-    }, [{ key: 'selectQuality', value: 'Select Quality', disabled: true }]);
-
-    const hasSelectedFiles = this.getSelectedIds().length > 0;
-
-    return (
-      <ModalContent onModalClose={onModalClose}>
-        <ModalHeader>
-          Manage Episodes
-        </ModalHeader>
-
-        <ModalBody>
-          {
-            !items.length &&
-              <div>
-                No episode files to manage.
-              </div>
-          }
-
-          {
-            !!items.length &&
-              <Table
-                columns={columns}
-                selectAll={true}
-                allSelected={allSelected}
-                allUnselected={allUnselected}
-                onSelectAllChange={this.onSelectAllChange}
-              >
-                <TableBody>
-                  {
-                    items.map((item) => {
-                      return (
-                        <MovieFileEditorRow
-                          key={item.id}
-                          isSelected={selectedState[item.id]}
-                          {...item}
-                          onSelectedChange={this.onSelectedChange}
-                        />
-                      );
-                    })
-                  }
-                </TableBody>
-              </Table>
-          }
-        </ModalBody>
-
-        <ModalFooter>
-          <div className={styles.actions}>
-            <SpinnerButton
-              kind={kinds.DANGER}
-              isSpinning={isDeleting}
-              isDisabled={!hasSelectedFiles}
-              onPress={this.onDeletePress}
-            >
-              Delete
-            </SpinnerButton>
-
-            <div className={styles.selectInput}>
-              <SelectInput
-                name="language"
-                value="selectLanguage"
-                values={languageOptions}
-                isDisabled={!hasSelectedFiles}
-                onChange={this.onLanguageChange}
-              />
-            </div>
-
-            <div className={styles.selectInput}>
-              <SelectInput
-                name="quality"
-                value="selectQuality"
-                values={qualityOptions}
-                isDisabled={!hasSelectedFiles}
-                onChange={this.onQualityChange}
-              />
-            </div>
-          </div>
-
-          <Button
-            onPress={onModalClose}
-          >
-            Close
-          </Button>
-        </ModalFooter>
-
-        <ConfirmModal
-          isOpen={isConfirmDeleteModalOpen}
-          kind={kinds.DANGER}
-          title="Delete Selected Episode Files"
-          message={'Are you sure you want to delete the selected episode files?'}
-          confirmLabel="Delete"
-          onConfirm={this.onConfirmDelete}
-          onCancel={this.onConfirmDeleteModalClose}
-        />
-      </ModalContent>
-    );
-  }
-}
-
-MovieFileEditorModalContent.propTypes = {
-  seasonNumber: PropTypes.number,
-  isDeleting: PropTypes.bool.isRequired,
-  items: PropTypes.arrayOf(PropTypes.object).isRequired,
-  languages: PropTypes.arrayOf(PropTypes.object).isRequired,
-  qualities: PropTypes.arrayOf(PropTypes.object).isRequired,
-  onDeletePress: PropTypes.func.isRequired,
-  onLanguageChange: PropTypes.func.isRequired,
-  onQualityChange: PropTypes.func.isRequired,
-  onModalClose: PropTypes.func.isRequired
-};
-
-export default MovieFileEditorModalContent;

frontend/src/MovieFile/Editor/MovieFileEditorRow.css

@@ -0,0 +1,28 @@
+.title {
+    composes: cell from '~Components/Table/Cells/TableRowCell.css';
+  
+    word-break: break-all;
+  }
+  
+  .quality,
+  .language {
+    composes: cell from '~Components/Table/Cells/TableRowCell.css';
+  }
+  
+  .language {
+    width: 100px;
+  }
+  
+  .rejected,
+  .download {
+    composes: cell from '~Components/Table/Cells/TableRowCell.css';
+  
+    width: 50px;
+  }
+  
+  .age,
+  .size {
+    composes: cell from '~Components/Table/Cells/TableRowCell.css';
+  
+    white-space: nowrap;
+  }

frontend/src/MovieFile/Editor/MovieFileEditorRow.js

@@ -1,62 +1,195 @@
 import PropTypes from 'prop-types';
-import React from 'react';
-import Label from 'Components/Label';
-import RelativeDateCellConnector from 'Components/Table/Cells/RelativeDateCellConnector';
+import React, { Component } from 'react';
+import IconButton from 'Components/Link/IconButton';
+import { icons, kinds } from 'Helpers/Props';
 import TableRow from 'Components/Table/TableRow';
 import TableRowCell from 'Components/Table/Cells/TableRowCell';
-import TableSelectCell from 'Components/Table/Cells/TableSelectCell';
+import TableRowCellButton from 'Components/Table/Cells/TableRowCellButton';
 import MovieQuality from 'Movie/MovieQuality';
+import MovieLanguage from 'Movie/MovieLanguage';
+import ConfirmModal from 'Components/Modal/ConfirmModal';
+import SelectQualityModal from 'MovieFile/Quality/SelectQualityModal';
+import SelectLanguageModal from 'MovieFile/Language/SelectLanguageModal';
+import * as mediaInfoTypes from 'MovieFile/mediaInfoTypes';
+import MediaInfoConnector from 'MovieFile/MediaInfoConnector';
+import MovieFileRowCellPlaceholder from './MovieFileRowCellPlaceholder';
+import styles from './MovieFileEditorRow.css';
 
-function MovieFileEditorRow(props) {
-  const {
-    id,
-    relativePath,
-    airDateUtc,
-    language,
-    quality,
-    isSelected,
-    onSelectedChange
-  } = props;
+class MovieFileEditorRow extends Component {
 
-  return (
-    <TableRow>
-      <TableSelectCell
-        id={id}
-        isSelected={isSelected}
-        onSelectedChange={onSelectedChange}
-      />
+  //
+  // Lifecycle
 
-      <TableRowCell>
-        {relativePath}
-      </TableRowCell>
+  constructor(props, context) {
+    super(props, context);
 
-      <RelativeDateCellConnector
-        date={airDateUtc}
-      />
+    this.state = {
+      isSelectQualityModalOpen: false,
+      isSelectLanguageModalOpen: false,
+      isConfirmDeleteModalOpen: false
+    };
+  }
 
-      <TableRowCell>
-        <Label>
-          {language.name}
-        </Label>
-      </TableRowCell>
+  //
+  // Listeners
 
-      <TableRowCell>
-        <MovieQuality
-          quality={quality}
+  onSelectQualityPress = () => {
+    this.setState({ isSelectQualityModalOpen: true });
+  }
+
+  onSelectLanguagePress = () => {
+    this.setState({ isSelectLanguageModalOpen: true });
+  }
+
+  onSelectQualityModalClose = () => {
+    this.setState({ isSelectQualityModalOpen: false });
+  }
+
+  onSelectLanguageModalClose = () => {
+    this.setState({ isSelectLanguageModalOpen: false });
+  }
+
+  onDeletePress = () => {
+    this.setState({ isConfirmDeleteModalOpen: true });
+  }
+
+  onConfirmDelete = () => {
+    this.setState({ isConfirmDeleteModalOpen: false });
+
+    this.props.onDeletePress(this.props.id);
+  }
+
+  onConfirmDeleteModalClose = () => {
+    this.setState({ isConfirmDeleteModalOpen: false });
+  }
+
+  //
+  // Render
+
+  render() {
+    const {
+      id,
+      relativePath,
+      quality,
+      languages
+    } = this.props;
+
+    const {
+      isSelectQualityModalOpen,
+      isSelectLanguageModalOpen,
+      isConfirmDeleteModalOpen
+    } = this.state;
+
+    const showQualityPlaceholder = !quality;
+
+    const showLanguagePlaceholder = !languages;
+
+    return (
+      <TableRow>
+        <TableRowCell
+          className={styles.relativePath}
+          title={relativePath}
+        >
+          {relativePath}
+        </TableRowCell>
+
+        <TableRowCell>
+          <MediaInfoConnector
+            movieFileId={id}
+            type={mediaInfoTypes.VIDEO}
+          />
+          <MediaInfoConnector
+            movieFileId={id}
+            type={mediaInfoTypes.AUDIO}
+          />
+        </TableRowCell>
+
+        <TableRowCellButton
+          className={styles.language}
+          title="Click to change language"
+          onPress={this.onSelectLanguagePress}
+        >
+          {
+            showLanguagePlaceholder &&
+              <MovieFileRowCellPlaceholder />
+          }
+
+          {
+            !showLanguagePlaceholder && !!languages &&
+              <MovieLanguage
+                className={styles.label}
+                languages={languages}
+              />
+          }
+        </TableRowCellButton>
+
+        <TableRowCellButton
+          className={styles.quality}
+          title="Click to change quality"
+          onPress={this.onSelectQualityPress}
+        >
+          {
+            showQualityPlaceholder &&
+              <MovieFileRowCellPlaceholder />
+          }
+
+          {
+            !showQualityPlaceholder && !!quality &&
+              <MovieQuality
+                className={styles.label}
+                quality={quality}
+              />
+          }
+        </TableRowCellButton>
+
+        <TableRowCell className={styles.actions}>
+          <IconButton
+            title="Delete file"
+            name={icons.REMOVE}
+            onPress={this.onDeletePress}
+          />
+        </TableRowCell>
+
+        <ConfirmModal
+          isOpen={isConfirmDeleteModalOpen}
+          ids={[id]}
+          kind={kinds.DANGER}
+          title="Delete Selected Movie Files"
+          message={'Are you sure you want to delete the selected movie files?'}
+          confirmLabel="Delete"
+          onConfirm={this.onConfirmDelete}
+          onCancel={this.onConfirmDeleteModalClose}
         />
-      </TableRowCell>
-    </TableRow>
-  );
+
+        <SelectQualityModal
+          isOpen={isSelectQualityModalOpen}
+          ids={[id]}
+          qualityId={quality ? quality.quality.id : 0}
+          proper={quality ? quality.revision.version > 1 : false}
+          real={quality ? quality.revision.real > 0 : false}
+          onModalClose={this.onSelectQualityModalClose}
+        />
+
+        <SelectLanguageModal
+          isOpen={isSelectLanguageModalOpen}
+          ids={[id]}
+          languageId={languages[0] ? languages[0].id : 0}
+          onModalClose={this.onSelectLanguageModalClose}
+        />
+      </TableRow>
+    );
+  }
+
 }
 
 MovieFileEditorRow.propTypes = {
   id: PropTypes.number.isRequired,
+  size: PropTypes.number.isRequired,
   relativePath: PropTypes.string.isRequired,
-  airDateUtc: PropTypes.string.isRequired,
-  language: PropTypes.object.isRequired,
   quality: PropTypes.object.isRequired,
-  isSelected: PropTypes.bool,
-  onSelectedChange: PropTypes.func.isRequired
+  languages: PropTypes.arrayOf(PropTypes.object).isRequired,
+  mediaInfo: PropTypes.object.isRequired,
+  onDeletePress: PropTypes.func.isRequired
 };
 
 export default MovieFileEditorRow;

frontend/src/MovieFile/Editor/MovieFileEditorTable.js

@@ -0,0 +1,21 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import MovieFileEditorTableContentConnector from './MovieFileEditorTableContentConnector';
+
+function MovieFileEditorTable(props) {
+  const {
+    movieId
+  } = props;
+
+  return (
+    <MovieFileEditorTableContentConnector
+      movieId={movieId}
+    />
+  );
+}
+
+MovieFileEditorTable.propTypes = {
+  movieId: PropTypes.number.isRequired
+};
+
+export default MovieFileEditorTable;

frontend/src/MovieFile/Editor/MovieFileEditorTableContent.css

@@ -6,3 +6,9 @@
 .selectInput {
   margin-left: 10px;
 }
+
+.blankpad {
+  padding-left:2em;
+  padding-top: 10px;
+  padding-bottom: 10px;
+}

frontend/src/MovieFile/Editor/MovieFileEditorTableContent.js

@@ -0,0 +1,86 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import Table from 'Components/Table/Table';
+import TableBody from 'Components/Table/TableBody';
+import MovieFileEditorRow from './MovieFileEditorRow';
+import styles from './MovieFileEditorTableContent.css';
+
+const columns = [
+  {
+    name: 'title',
+    label: 'Title',
+    isVisible: true
+  },
+  {
+    name: 'mediainfo',
+    label: 'Media Info',
+    isVisible: true
+  },
+  {
+    name: 'languages',
+    label: 'Languages',
+    isVisible: true
+  },
+  {
+    name: 'quality',
+    label: 'Quality',
+    isVisible: true
+  },
+  {
+    name: 'action',
+    label: 'Action',
+    isVisible: true
+  }
+];
+
+class MovieFileEditorTableContent extends Component {
+
+  //
+  // Render
+
+  render() {
+    const {
+      items
+    } = this.props;
+
+    return (
+      <div>
+        {
+          !items.length &&
+            <div className={styles.blankpad}>
+              No movie files to manage.
+            </div>
+        }
+
+        {
+          !!items.length &&
+            <Table columns={columns}>
+              <TableBody>
+                {
+                  items.map((item) => {
+                    return (
+                      <MovieFileEditorRow
+                        key={item.id}
+                        {...item}
+                        onDeletePress={this.props.onDeletePress}
+                      />
+                    );
+                  })
+                }
+              </TableBody>
+            </Table>
+        }
+
+      </div>
+    );
+  }
+}
+
+MovieFileEditorTableContent.propTypes = {
+  movieId: PropTypes.number,
+  isDeleting: PropTypes.bool.isRequired,
+  items: PropTypes.arrayOf(PropTypes.object).isRequired,
+  onDeletePress: PropTypes.func.isRequired
+};
+
+export default MovieFileEditorTableContent;

frontend/src/MovieFile/Editor/MovieFileEditorTableContentConnector.js

@@ -6,26 +6,30 @@ import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
 import getQualities from 'Utilities/Quality/getQualities';
 import createMovieSelector from 'Store/Selectors/createMovieSelector';
-import { deleteMovieFiles, updateMovieFiles } from 'Store/Actions/movieFileActions';
-import { fetchQualityProfileSchema } from 'Store/Actions/settingsActions';
-import MovieFileEditorModalContent from './MovieFileEditorModalContent';
+import { deleteMovieFile, updateMovieFiles } from 'Store/Actions/movieFileActions';
+import { fetchQualityProfileSchema, fetchLanguages } from 'Store/Actions/settingsActions';
+import MovieFileEditorTableContent from './MovieFileEditorTableContent';
 
 function createMapStateToProps() {
   return createSelector(
     (state) => state.movieFiles,
-    (state) => state.settings.qualityProfiles.schema,
+    (state) => state.settings.languages,
+    (state) => state.settings.qualityProfiles,
     createMovieSelector(),
     (
       movieFiles,
-      qualityProfileSchema,
-      movie
+      languageProfiles,
+      qualityProfiles
     ) => {
-      const qualities = getQualities(qualityProfileSchema.items);
+      const languages = languageProfiles.items;
+      const qualities = getQualities(qualityProfiles.schema.items);
 
       return {
         items: movieFiles.items,
         isDeleting: movieFiles.isDeleting,
         isSaving: movieFiles.isSaving,
+        error: null,
+        languages,
         qualities
       };
     }
@@ -38,22 +42,27 @@ function createMapDispatchToProps(dispatch, props) {
       dispatch(fetchQualityProfileSchema());
     },
 
+    dispatchFetchLanguages(name, path) {
+      dispatch(fetchLanguages());
+    },
+
     dispatchUpdateMovieFiles(updateProps) {
       dispatch(updateMovieFiles(updateProps));
     },
 
-    onDeletePress(episodeFileIds) {
-      dispatch(deleteMovieFiles({ episodeFileIds }));
+    onDeletePress(movieFileId) {
+      dispatch(deleteMovieFile(movieFileId));
     }
   };
 }
 
-class MovieFileEditorModalContentConnector extends Component {
+class MovieFileEditorTableContentConnector extends Component {
 
   //
   // Lifecycle
 
   componentDidMount() {
+    this.props.dispatchFetchLanguages();
     this.props.dispatchFetchQualityProfileSchema();
   }
 
@@ -63,7 +72,14 @@ class MovieFileEditorModalContentConnector extends Component {
   //
   // Listeners
 
-  onQualityChange = (episodeFileIds, qualityId) => {
+  onLanguageChange = (movieFileIds, languageId) => {
+    const language = _.find(this.props.languages, { id: languageId });
+    // TODO - Placeholder till we implement selection of multiple languages
+    const languages = [language];
+    this.props.dispatchUpdateMovieFiles({ movieFileIds, languages });
+  }
+
+  onQualityChange = (movieFileIds, qualityId) => {
     const quality = {
       quality: _.find(this.props.qualities, { id: qualityId }),
       revision: {
@@ -72,31 +88,34 @@ class MovieFileEditorModalContentConnector extends Component {
       }
     };
 
-    this.props.dispatchUpdateMovieFiles({ episodeFileIds, quality });
+    this.props.dispatchUpdateMovieFiles({ movieFileIds, quality });
   }
 
   render() {
     const {
+      dispatchFetchLanguages,
       dispatchFetchQualityProfileSchema,
       dispatchUpdateMovieFiles,
       ...otherProps
     } = this.props;
 
     return (
-      <MovieFileEditorModalContent
+      <MovieFileEditorTableContent
         {...otherProps}
+        onLanguageChange={this.onLanguageChange}
         onQualityChange={this.onQualityChange}
       />
     );
   }
 }
 
-MovieFileEditorModalContentConnector.propTypes = {
+MovieFileEditorTableContentConnector.propTypes = {
   movieId: PropTypes.number.isRequired,
   languages: PropTypes.arrayOf(PropTypes.object).isRequired,
   qualities: PropTypes.arrayOf(PropTypes.object).isRequired,
+  dispatchFetchLanguages: PropTypes.func.isRequired,
   dispatchFetchQualityProfileSchema: PropTypes.func.isRequired,
   dispatchUpdateMovieFiles: PropTypes.func.isRequired
 };
 
-export default connect(createMapStateToProps, createMapDispatchToProps)(MovieFileEditorModalContentConnector);
+export default connect(createMapStateToProps, createMapDispatchToProps)(MovieFileEditorTableContentConnector);

frontend/src/MovieFile/Editor/MovieFileRowCellPlaceholder.css

@@ -0,0 +1,7 @@
+.placeholder {
+  display: inline-block;
+  margin: -8px 0;
+  width: 100%;
+  height: 25px;
+  border: 2px dashed $dangerColor;
+}

frontend/src/MovieFile/Editor/MovieFileRowCellPlaceholder.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import styles from './MovieFileRowCellPlaceholder.css';
+
+function MovieFileRowCellPlaceholder() {
+  return (
+    <span className={styles.placeholder} />
+  );
+}
+
+export default MovieFileRowCellPlaceholder;