diff --git a/frontend/src/Collection/Overview/CollectionOverview.js b/frontend/src/Collection/Overview/CollectionOverview.js
index 1931140ef..1e2811f12 100644
--- a/frontend/src/Collection/Overview/CollectionOverview.js
+++ b/frontend/src/Collection/Overview/CollectionOverview.js
@@ -1,8 +1,8 @@
import PropTypes from 'prop-types';
import React, { Component } from 'react';
-import Slider from 'react-slick';
import TextTruncate from 'react-text-truncate';
import EditCollectionModalConnector from 'Collection/Edit/EditCollectionModalConnector';
+import Carousel from 'Components/Carousel';
import CheckInput from 'Components/Form/CheckInput';
import Icon from 'Components/Icon';
import Label from 'Components/Label';
@@ -16,9 +16,6 @@ import translate from 'Utilities/String/translate';
import CollectionMovieConnector from './CollectionMovieConnector';
import styles from './CollectionOverview.css';
-import 'slick-carousel/slick/slick.css';
-import 'slick-carousel/slick/slick-theme.css';
-
const columnPadding = parseInt(dimensions.movieIndexColumnPadding);
const columnPaddingSmallScreen = parseInt(dimensions.movieIndexColumnPaddingSmallScreen);
const defaultFontSize = parseInt(fonts.defaultFontSize);
@@ -118,15 +115,6 @@ class CollectionOverview extends Component {
const contentHeight = getContentHeight(rowHeight, isSmallScreen);
const overviewHeight = contentHeight - titleRowHeight - posterHeight;
- const sliderSettings = {
- arrows: false,
- dots: false,
- infinite: false,
- slidesToShow: 1,
- slidesToScroll: 1,
- variableWidth: true
- };
-
return (
@@ -262,7 +250,7 @@ class CollectionOverview extends Component {
}
-
+
{movies.map((movie) => (
))}
-
+
diff --git a/frontend/src/Components/Carousel.js b/frontend/src/Components/Carousel.js
new file mode 100644
index 000000000..13077c4d4
--- /dev/null
+++ b/frontend/src/Components/Carousel.js
@@ -0,0 +1,37 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import Slider from 'react-slick';
+import styles from './Alert.css';
+
+import 'slick-carousel/slick/slick.css';
+import 'slick-carousel/slick/slick-theme.css';
+
+function Carousel({ className, setRef, children, ...otherProps }) {
+
+ const sliderSettings = {
+ arrows: false,
+ dots: false,
+ infinite: false,
+ slidesToShow: 1,
+ slidesToScroll: 1,
+ variableWidth: true
+ };
+
+ return (
+
+ {children}
+
+ );
+}
+
+Carousel.propTypes = {
+ className: PropTypes.string.isRequired,
+ setRef: PropTypes.func.isRequired,
+ children: PropTypes.node.isRequired
+};
+
+Carousel.defaultProps = {
+ className: styles.alert
+};
+
+export default Carousel;
diff --git a/frontend/src/InteractiveSearch/InteractiveSearchContent.css b/frontend/src/InteractiveSearch/InteractiveSearch.css
similarity index 100%
rename from frontend/src/InteractiveSearch/InteractiveSearchContent.css
rename to frontend/src/InteractiveSearch/InteractiveSearch.css
diff --git a/frontend/src/InteractiveSearch/InteractiveSearchContent.js b/frontend/src/InteractiveSearch/InteractiveSearch.js
similarity index 70%
rename from frontend/src/InteractiveSearch/InteractiveSearchContent.js
rename to frontend/src/InteractiveSearch/InteractiveSearch.js
index 56f58c0c5..993866047 100644
--- a/frontend/src/InteractiveSearch/InteractiveSearchContent.js
+++ b/frontend/src/InteractiveSearch/InteractiveSearch.js
@@ -2,12 +2,15 @@ import PropTypes from 'prop-types';
import React from 'react';
import Icon from 'Components/Icon';
import LoadingIndicator from 'Components/Loading/LoadingIndicator';
+import FilterMenu from 'Components/Menu/FilterMenu';
+import PageMenuButton from 'Components/Menu/PageMenuButton';
import Table from 'Components/Table/Table';
import TableBody from 'Components/Table/TableBody';
-import { icons, sortDirections } from 'Helpers/Props';
+import { align, icons, sortDirections } from 'Helpers/Props';
import translate from 'Utilities/String/translate';
+import InteractiveSearchFilterModalConnector from './InteractiveSearchFilterModalConnector';
import InteractiveSearchRowConnector from './InteractiveSearchRowConnector';
-import styles from './InteractiveSearchContent.css';
+import styles from './InteractiveSearch.css';
const columns = [
{
@@ -22,20 +25,6 @@ const columns = [
isSortable: true,
isVisible: true
},
- {
- name: 'releaseWeight',
- label: React.createElement(Icon, { name: icons.DOWNLOAD }),
- isSortable: true,
- fixedSortDirection: sortDirections.ASCENDING,
- isVisible: true
- },
- {
- name: 'rejections',
- label: React.createElement(Icon, { name: icons.DANGER }),
- isSortable: true,
- fixedSortDirection: sortDirections.ASCENDING,
- isVisible: true
- },
{
name: 'title',
label: translate('Title'),
@@ -99,10 +88,24 @@ const columns = [
label: React.createElement(Icon, { name: icons.FLAG }),
isSortable: true,
isVisible: true
+ },
+ {
+ name: 'rejections',
+ label: React.createElement(Icon, { name: icons.DANGER }),
+ isSortable: true,
+ fixedSortDirection: sortDirections.ASCENDING,
+ isVisible: true
+ },
+ {
+ name: 'releaseWeight',
+ label: React.createElement(Icon, { name: icons.DOWNLOAD }),
+ isSortable: true,
+ fixedSortDirection: sortDirections.ASCENDING,
+ isVisible: true
}
];
-function InteractiveSearchContent(props) {
+function InteractiveSearch(props) {
const {
searchPayload,
isFetching,
@@ -110,44 +113,63 @@ function InteractiveSearchContent(props) {
error,
totalReleasesCount,
items,
+ selectedFilterKey,
+ filters,
+ customFilters,
sortKey,
sortDirection,
longDateFormat,
timeFormat,
onSortPress,
+ onFilterSelect,
onGrabPress
} = props;
return (
+
+
+
+
{
- isFetching &&
-
+ isFetching ?
: null
}
{
- !isFetching && !!error &&
+ !isFetching && error ?
{translate('UnableToLoadResultsIntSearch')}
-
+
:
+ null
}
{
- !isFetching && isPopulated && !totalReleasesCount &&
+ !isFetching && isPopulated && !totalReleasesCount ?
{translate('NoResultsFound')}
-
+ :
+ null
}
{
- !!totalReleasesCount && isPopulated && !items.length &&
+ !!totalReleasesCount && isPopulated && !items.length ?
{translate('AllResultsHiddenFilter')}
-
+ :
+ null
}
{
- isPopulated && !!items.length &&
+ isPopulated && !!items.length ?
+ :
+ null
}
{
- totalReleasesCount !== items.length && !!items.length &&
+ totalReleasesCount !== items.length && !!items.length ?
{translate('SomeResultsHiddenFilter')}
-
+ :
+ null
}
);
}
-InteractiveSearchContent.propTypes = {
+InteractiveSearch.propTypes = {
searchPayload: PropTypes.object.isRequired,
isFetching: PropTypes.bool.isRequired,
isPopulated: PropTypes.bool.isRequired,
error: PropTypes.object,
totalReleasesCount: PropTypes.number.isRequired,
items: PropTypes.arrayOf(PropTypes.object).isRequired,
+ selectedFilterKey: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
+ filters: PropTypes.arrayOf(PropTypes.object).isRequired,
+ customFilters: PropTypes.arrayOf(PropTypes.object).isRequired,
sortKey: PropTypes.string,
sortDirection: PropTypes.string,
longDateFormat: PropTypes.string.isRequired,
timeFormat: PropTypes.string.isRequired,
onSortPress: PropTypes.func.isRequired,
+ onFilterSelect: PropTypes.func.isRequired,
onGrabPress: PropTypes.func.isRequired
};
-export default InteractiveSearchContent;
+export default InteractiveSearch;
diff --git a/frontend/src/InteractiveSearch/InteractiveSearchContentConnector.js b/frontend/src/InteractiveSearch/InteractiveSearchConnector.js
similarity index 90%
rename from frontend/src/InteractiveSearch/InteractiveSearchContentConnector.js
rename to frontend/src/InteractiveSearch/InteractiveSearchConnector.js
index f4432d9e3..7b8cd2c04 100644
--- a/frontend/src/InteractiveSearch/InteractiveSearchContentConnector.js
+++ b/frontend/src/InteractiveSearch/InteractiveSearchConnector.js
@@ -5,7 +5,7 @@ import { createSelector } from 'reselect';
import * as releaseActions from 'Store/Actions/releaseActions';
import createClientSideCollectionSelector from 'Store/Selectors/createClientSideCollectionSelector';
import createUISettingsSelector from 'Store/Selectors/createUISettingsSelector';
-import InteractiveSearchContent from './InteractiveSearchContent';
+import InteractiveSearch from './InteractiveSearch';
function createMapStateToProps(appState) {
return createSelector(
@@ -48,7 +48,7 @@ function createMapDispatchToProps(dispatch, props) {
};
}
-class InteractiveSearchContentConnector extends Component {
+class InteractiveSearchConnector extends Component {
//
// Lifecycle
@@ -79,18 +79,18 @@ class InteractiveSearchContentConnector extends Component {
return (
-
);
}
}
-InteractiveSearchContentConnector.propTypes = {
+InteractiveSearchConnector.propTypes = {
searchPayload: PropTypes.object.isRequired,
isPopulated: PropTypes.bool.isRequired,
dispatchFetchReleases: PropTypes.func.isRequired,
dispatchClearReleases: PropTypes.func.isRequired
};
-export default connect(createMapStateToProps, createMapDispatchToProps)(InteractiveSearchContentConnector);
+export default connect(createMapStateToProps, createMapDispatchToProps)(InteractiveSearchConnector);
diff --git a/frontend/src/InteractiveSearch/InteractiveSearchRow.css b/frontend/src/InteractiveSearch/InteractiveSearchRow.css
index 6545102ca..1cf5f0e26 100644
--- a/frontend/src/InteractiveSearch/InteractiveSearchRow.css
+++ b/frontend/src/InteractiveSearch/InteractiveSearchRow.css
@@ -1,15 +1,20 @@
-.cell {
+.protocol {
composes: cell from '~Components/Table/Cells/TableRowCell.css';
+
+ width: 80px;
}
-.protocol {
- composes: cell;
+.title {
+ composes: cell from '~Components/Table/Cells/TableRowCell.css';
- width: 80px;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ word-break: break-all;
}
.indexer {
- composes: cell;
+ composes: cell from '~Components/Table/Cells/TableRowCell.css';
width: 85px;
}
@@ -17,7 +22,9 @@
.quality,
.customFormat,
.language {
- composes: cell;
+ composes: cell from '~Components/Table/Cells/TableRowCell.css';
+
+ text-align: center;
}
.language {
@@ -25,7 +32,7 @@
}
.customFormatScore {
- composes: cell;
+ composes: cell from '~Components/Table/Cells/TableRowCell.css';
width: 55px;
font-weight: bold;
@@ -35,34 +42,26 @@
.rejected,
.indexerFlags,
.download {
- composes: cell;
+ composes: cell from '~Components/Table/Cells/TableRowCell.css';
width: 50px;
}
.age,
.size {
- composes: cell;
+ composes: cell from '~Components/Table/Cells/TableRowCell.css';
white-space: nowrap;
}
.peers {
- composes: cell;
+ composes: cell from '~Components/Table/Cells/TableRowCell.css';
width: 75px;
}
-.title {
- composes: cell;
-}
-
-.title div {
- overflow-wrap: break-word;
-}
-
.history {
- composes: cell;
+ composes: cell from '~Components/Table/Cells/TableRowCell.css';
width: 75px;
}
diff --git a/frontend/src/InteractiveSearch/InteractiveSearchRow.js b/frontend/src/InteractiveSearch/InteractiveSearchRow.js
index 5b7cc6c6f..92699e8ac 100644
--- a/frontend/src/InteractiveSearch/InteractiveSearchRow.js
+++ b/frontend/src/InteractiveSearch/InteractiveSearchRow.js
@@ -145,46 +145,6 @@ class InteractiveSearchRow extends Component {
{formatAge(age, ageHours, ageMinutes)}
-
-
-
-
-
- {
- !!rejections.length &&
-
- }
- title={translate('ReleaseRejected')}
- body={
-
- {
- rejections.map((rejection, index) => {
- return (
- -
- {rejection}
-
- );
- })
- }
-
- }
- position={tooltipPositions.BOTTOM}
- />
- }
-
-
+
+ {
+ !!rejections.length &&
+
+ }
+ title={translate('ReleaseRejected')}
+ body={
+
+ {
+ rejections.map((rejection, index) => {
+ return (
+ -
+ {rejection}
+
+ );
+ })
+ }
+
+ }
+ position={tooltipPositions.LEFT}
+ />
+ }
+
+
+
+
+
+
- );
-}
-
-InteractiveSearchTable.propTypes = {
-};
-
-export default InteractiveSearchTable;
diff --git a/frontend/src/Movie/Details/Credits/Cast/MovieCastPoster.js b/frontend/src/Movie/Details/Credits/Cast/MovieCastPoster.js
index 1898e094c..028b0a807 100644
--- a/frontend/src/Movie/Details/Credits/Cast/MovieCastPoster.js
+++ b/frontend/src/Movie/Details/Credits/Cast/MovieCastPoster.js
@@ -69,7 +69,8 @@ class MovieCastPoster extends Component {
const elementStyle = {
width: `${posterWidth}px`,
- height: `${posterHeight}px`
+ height: `${posterHeight}px`,
+ borderRadius: '5px'
};
const contentStyle = {
diff --git a/frontend/src/Movie/Details/Credits/Crew/MovieCrewPoster.js b/frontend/src/Movie/Details/Credits/Crew/MovieCrewPoster.js
index 7831114a2..f27131171 100644
--- a/frontend/src/Movie/Details/Credits/Crew/MovieCrewPoster.js
+++ b/frontend/src/Movie/Details/Credits/Crew/MovieCrewPoster.js
@@ -69,7 +69,8 @@ class MovieCrewPoster extends Component {
const elementStyle = {
width: `${posterWidth}px`,
- height: `${posterHeight}px`
+ height: `${posterHeight}px`,
+ borderRadius: '5px'
};
const contentStyle = {
diff --git a/frontend/src/Movie/Details/Credits/MovieCreditPoster.css b/frontend/src/Movie/Details/Credits/MovieCreditPoster.css
index 3c0d27827..d5589304e 100644
--- a/frontend/src/Movie/Details/Credits/MovieCreditPoster.css
+++ b/frontend/src/Movie/Details/Credits/MovieCreditPoster.css
@@ -1,6 +1,7 @@
$hoverScale: 1.05;
.content {
+ border-radius: 5px;
transition: all 200ms ease-in;
&:hover {
diff --git a/frontend/src/Movie/Details/Credits/MovieCreditPosters.css b/frontend/src/Movie/Details/Credits/MovieCreditPosters.css
index d80f951a0..2bd05a5e0 100644
--- a/frontend/src/Movie/Details/Credits/MovieCreditPosters.css
+++ b/frontend/src/Movie/Details/Credits/MovieCreditPosters.css
@@ -2,6 +2,10 @@
flex: 1 0 auto;
}
+.movie {
+ padding: 10px;
+}
+
.container {
padding: 10px;
}
diff --git a/frontend/src/Movie/Details/Credits/MovieCreditPosters.js b/frontend/src/Movie/Details/Credits/MovieCreditPosters.js
index 7815da3ca..57e2a49d0 100644
--- a/frontend/src/Movie/Details/Credits/MovieCreditPosters.js
+++ b/frontend/src/Movie/Details/Credits/MovieCreditPosters.js
@@ -1,7 +1,6 @@
import PropTypes from 'prop-types';
import React, { Component } from 'react';
-import { Grid, WindowScroller } from 'react-virtualized';
-import Measure from 'Components/Measure';
+import Carousel from 'Components/Carousel';
import dimensions from 'Styles/Variables/dimensions';
import hasDifferentItemsOrOrder from 'Utilities/Object/hasDifferentItemsOrOrder';
import MovieCreditPosterConnector from './MovieCreditPosterConnector';
@@ -169,56 +168,36 @@ class MovieCreditPosters extends Component {
render() {
const {
- items
+ items,
+ itemComponent
} = this.props;
const {
- width,
- columnWidth,
- columnCount,
- rowHeight
+ posterWidth,
+ posterHeight
} = this.state;
- const rowCount = Math.ceil(items.length / columnCount);
-
return (
-
-
- {({ height, registerChild, onChildScroll, scrollTop }) => {
- if (!height) {
- return ;
- }
-
- return (
-
-
-
- );
- }
- }
-
-
+
+
+
+ {items.map((movie) => (
+
+
+
+ ))}
+
+
);
}
}
diff --git a/frontend/src/Movie/Details/MovieAlternateTitles.css b/frontend/src/Movie/Details/MovieAlternateTitles.css
deleted file mode 100644
index 1af1ae68b..000000000
--- a/frontend/src/Movie/Details/MovieAlternateTitles.css
+++ /dev/null
@@ -1,3 +0,0 @@
-.alternateTitle {
- white-space: nowrap;
-}
diff --git a/frontend/src/Movie/Details/MovieAlternateTitles.js b/frontend/src/Movie/Details/MovieAlternateTitles.js
deleted file mode 100644
index 5b0fdaeaa..000000000
--- a/frontend/src/Movie/Details/MovieAlternateTitles.js
+++ /dev/null
@@ -1,28 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import styles from './MovieAlternateTitles.css';
-
-function MovieAlternateTitles({ alternateTitles }) {
- return (
-
- {
- alternateTitles.filter((x, i, a) => a.indexOf(x) === i).map((alternateTitle) => {
- return (
- -
- {alternateTitle}
-
- );
- })
- }
-
- );
-}
-
-MovieAlternateTitles.propTypes = {
- alternateTitles: PropTypes.arrayOf(PropTypes.string).isRequired
-};
-
-export default MovieAlternateTitles;
diff --git a/frontend/src/Movie/Details/MovieDetails.css b/frontend/src/Movie/Details/MovieDetails.css
index 4b1ed1441..35cf5d055 100644
--- a/frontend/src/Movie/Details/MovieDetails.css
+++ b/frontend/src/Movie/Details/MovieDetails.css
@@ -5,7 +5,7 @@
.header {
position: relative;
width: 100%;
- height: 375px;
+ height: 425px;
}
.errorMessage {
@@ -39,10 +39,11 @@
}
.poster {
+ z-index: 2;
flex-shrink: 0;
margin-right: 35px;
- width: 217px;
- height: 319px;
+ width: 250px;
+ height: 368px;
}
.info {
diff --git a/frontend/src/Movie/Details/MovieDetails.js b/frontend/src/Movie/Details/MovieDetails.js
index bc9a3577f..09a402d3d 100644
--- a/frontend/src/Movie/Details/MovieDetails.js
+++ b/frontend/src/Movie/Details/MovieDetails.js
@@ -1,8 +1,8 @@
import _ from 'lodash';
import PropTypes from 'prop-types';
import React, { Component } from 'react';
-import { Tab, TabList, TabPanel, Tabs } from 'react-tabs';
import TextTruncate from 'react-text-truncate';
+import FieldSet from 'Components/FieldSet';
import Icon from 'Components/Icon';
import ImdbRating from 'Components/ImdbRating';
import InfoLabel from 'Components/InfoLabel';
@@ -22,12 +22,11 @@ import Popover from 'Components/Tooltip/Popover';
import Tooltip from 'Components/Tooltip/Tooltip';
import { icons, kinds, sizes, tooltipPositions } from 'Helpers/Props';
import InteractiveImportModal from 'InteractiveImport/InteractiveImportModal';
-import InteractiveSearchFilterMenuConnector from 'InteractiveSearch/InteractiveSearchFilterMenuConnector';
-import InteractiveSearchTable from 'InteractiveSearch/InteractiveSearchTable';
import DeleteMovieModal from 'Movie/Delete/DeleteMovieModal';
import EditMovieModalConnector from 'Movie/Edit/EditMovieModalConnector';
import MovieHistoryTable from 'Movie/History/MovieHistoryTable';
import MoviePoster from 'Movie/MoviePoster';
+import MovieInteractiveSearchModalConnector from 'Movie/Search/MovieInteractiveSearchModalConnector';
import MovieFileEditorTable from 'MovieFile/Editor/MovieFileEditorTable';
import ExtraFileTable from 'MovieFile/Extras/ExtraFileTable';
import OrganizePreviewModalConnector from 'Organize/OrganizePreviewModalConnector';
@@ -81,10 +80,10 @@ class MovieDetails extends Component {
isEditMovieModalOpen: false,
isDeleteMovieModalOpen: false,
isInteractiveImportModalOpen: false,
+ isInteractiveSearchModalOpen: false,
allExpanded: false,
allCollapsed: false,
expandedState: {},
- selectedTabIndex: 0,
overviewHeight: 0,
titleWidth: 0
};
@@ -137,6 +136,14 @@ class MovieDetails extends Component {
this.setState({ isEditMovieModalOpen: false });
};
+ onInteractiveSearchPress = () => {
+ this.setState({ isInteractiveSearchModalOpen: true });
+ };
+
+ onInteractiveSearchModalClose = () => {
+ this.setState({ isInteractiveSearchModalOpen: false });
+ };
+
onDeleteMoviePress = () => {
this.setState({
isEditMovieModalOpen: false,
@@ -298,9 +305,9 @@ class MovieDetails extends Component {
isEditMovieModalOpen,
isDeleteMovieModalOpen,
isInteractiveImportModalOpen,
+ isInteractiveSearchModalOpen,
overviewHeight,
- titleWidth,
- selectedTabIndex
+ titleWidth
} = this.state;
const marqueeWidth = isSmallScreen ? titleWidth : (titleWidth - 150);
@@ -326,6 +333,14 @@ class MovieDetails extends Component {
onPress={onSearchPress}
/>
+
+
}
-
-
-
- {translate('History')}
-
-
-
- {translate('Search')}
-
-
-
- {translate('Files')}
-
-
-
- {translate('Titles')}
-
-
-
- {translate('Cast')}
-
-
-
- {translate('Crew')}
-
-
- {
- selectedTabIndex === 1 &&
-
-
-
- }
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
);
diff --git a/frontend/src/Movie/Details/Titles/MovieTitlesTable.css b/frontend/src/Movie/Details/Titles/MovieTitlesTable.css
new file mode 100644
index 000000000..a2074b388
--- /dev/null
+++ b/frontend/src/Movie/Details/Titles/MovieTitlesTable.css
@@ -0,0 +1,9 @@
+.container {
+ border: 1px solid $borderColor;
+ border-radius: 4px;
+ background-color: $white;
+
+ &:last-of-type {
+ margin-bottom: 0;
+ }
+}
diff --git a/frontend/src/Movie/Details/Titles/MovieTitlesTable.js b/frontend/src/Movie/Details/Titles/MovieTitlesTable.js
index 9223a7585..1309de519 100644
--- a/frontend/src/Movie/Details/Titles/MovieTitlesTable.js
+++ b/frontend/src/Movie/Details/Titles/MovieTitlesTable.js
@@ -1,5 +1,6 @@
import React from 'react';
import MovieTitlesTableContentConnector from './MovieTitlesTableContentConnector';
+import styles from './MovieTitlesTable.css';
function MovieTitlesTable(props) {
const {
@@ -7,9 +8,11 @@ function MovieTitlesTable(props) {
} = props;
return (
-
+
+
+
);
}
diff --git a/frontend/src/Movie/History/MovieHistoryTable.css b/frontend/src/Movie/History/MovieHistoryTable.css
new file mode 100644
index 000000000..a2074b388
--- /dev/null
+++ b/frontend/src/Movie/History/MovieHistoryTable.css
@@ -0,0 +1,9 @@
+.container {
+ border: 1px solid $borderColor;
+ border-radius: 4px;
+ background-color: $white;
+
+ &:last-of-type {
+ margin-bottom: 0;
+ }
+}
diff --git a/frontend/src/Movie/History/MovieHistoryTable.js b/frontend/src/Movie/History/MovieHistoryTable.js
index f5cfd2404..e07bfa561 100644
--- a/frontend/src/Movie/History/MovieHistoryTable.js
+++ b/frontend/src/Movie/History/MovieHistoryTable.js
@@ -1,5 +1,6 @@
import React from 'react';
import MovieHistoryTableContentConnector from './MovieHistoryTableContentConnector';
+import styles from './MovieHistoryTable.css';
function MovieHistoryTable(props) {
const {
@@ -7,9 +8,11 @@ function MovieHistoryTable(props) {
} = props;
return (
-
+
+
+
);
}
diff --git a/frontend/src/Movie/Search/MovieInteractiveSearchModal.js b/frontend/src/Movie/Search/MovieInteractiveSearchModal.js
new file mode 100644
index 000000000..ec8987dfa
--- /dev/null
+++ b/frontend/src/Movie/Search/MovieInteractiveSearchModal.js
@@ -0,0 +1,35 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import Modal from 'Components/Modal/Modal';
+import { sizes } from 'Helpers/Props';
+import MovieInteractiveSearchModalContent from './MovieInteractiveSearchModalContent';
+
+function MovieInteractiveSearchModal(props) {
+ const {
+ isOpen,
+ movieId,
+ onModalClose
+ } = props;
+
+ return (
+
+
+
+ );
+}
+
+MovieInteractiveSearchModal.propTypes = {
+ isOpen: PropTypes.bool.isRequired,
+ movieId: PropTypes.number.isRequired,
+ onModalClose: PropTypes.func.isRequired
+};
+
+export default MovieInteractiveSearchModal;
diff --git a/frontend/src/Movie/Search/MovieInteractiveSearchModalConnector.js b/frontend/src/Movie/Search/MovieInteractiveSearchModalConnector.js
new file mode 100644
index 000000000..f00b1cb4d
--- /dev/null
+++ b/frontend/src/Movie/Search/MovieInteractiveSearchModalConnector.js
@@ -0,0 +1,15 @@
+import { connect } from 'react-redux';
+import { cancelFetchReleases, clearReleases } from 'Store/Actions/releaseActions';
+import MovieInteractiveSearchModal from './MovieInteractiveSearchModal';
+
+function createMapDispatchToProps(dispatch, props) {
+ return {
+ onModalClose() {
+ dispatch(cancelFetchReleases());
+ dispatch(clearReleases());
+ props.onModalClose();
+ }
+ };
+}
+
+export default connect(null, createMapDispatchToProps)(MovieInteractiveSearchModal);
diff --git a/frontend/src/Movie/Search/MovieInteractiveSearchModalContent.js b/frontend/src/Movie/Search/MovieInteractiveSearchModalContent.js
new file mode 100644
index 000000000..ff85b10ed
--- /dev/null
+++ b/frontend/src/Movie/Search/MovieInteractiveSearchModalContent.js
@@ -0,0 +1,45 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import Button from 'Components/Link/Button';
+import ModalBody from 'Components/Modal/ModalBody';
+import ModalContent from 'Components/Modal/ModalContent';
+import ModalFooter from 'Components/Modal/ModalFooter';
+import ModalHeader from 'Components/Modal/ModalHeader';
+import { scrollDirections } from 'Helpers/Props';
+import InteractiveSearchConnector from 'InteractiveSearch/InteractiveSearchConnector';
+
+function MovieInteractiveSearchModalContent(props) {
+ const {
+ movieId,
+ onModalClose
+ } = props;
+
+ return (
+
+
+ Interactive Search
+
+
+
+
+
+
+
+
+
+
+ );
+}
+
+MovieInteractiveSearchModalContent.propTypes = {
+ movieId: PropTypes.number.isRequired,
+ onModalClose: PropTypes.func.isRequired
+};
+
+export default MovieInteractiveSearchModalContent;
diff --git a/frontend/src/MovieFile/Editor/MovieFileEditorTable.css b/frontend/src/MovieFile/Editor/MovieFileEditorTable.css
index 50d1a9e93..a2074b388 100644
--- a/frontend/src/MovieFile/Editor/MovieFileEditorTable.css
+++ b/frontend/src/MovieFile/Editor/MovieFileEditorTable.css
@@ -1,5 +1,4 @@
.container {
- margin-top: 20px;
border: 1px solid $borderColor;
border-radius: 4px;
background-color: $white;