diff --git a/frontend/src/Calendar/CalendarPageConnector.js b/frontend/src/Calendar/CalendarPageConnector.js index e131f85af..7131db7a5 100644 --- a/frontend/src/Calendar/CalendarPageConnector.js +++ b/frontend/src/Calendar/CalendarPageConnector.js @@ -25,7 +25,7 @@ function createMissingMovieIdsSelector() { moment(inCinemas).isAfter(start) && moment(inCinemas).isBefore(end) && isBefore(movie.inCinemas) && - !queueDetails.some((details) => !!details.movie && details.movie.id === movie.id) + !queueDetails.some((details) => details.movieId === movie.id) ) { acc.push(movie.id); } diff --git a/frontend/src/Calendar/Events/CalendarEvent.css b/frontend/src/Calendar/Events/CalendarEvent.css index 9acf6dcf5..ffd12dd17 100644 --- a/frontend/src/Calendar/Events/CalendarEvent.css +++ b/frontend/src/Calendar/Events/CalendarEvent.css @@ -11,23 +11,35 @@ } } +.link { + composes: link from '~Components/Link/Link.css'; + + display: block; + color: $defaultColor; + + &:hover { + color: $defaultColor; + text-decoration: none; + } +} + .info, -.episodeInfo { +.movieInfo { display: flex; } -.episodeInfo { +.movieInfo { color: $calendarTextDim; } -.seriesTitle, -.episodeTitle { +.movieTitle, +.genres { @add-mixin truncate; flex: 1 0 1px; margin-right: 10px; } -.seriesTitle { +.movieTitle { color: #3a3f51; font-size: $defaultFontSize; } diff --git a/frontend/src/Calendar/Events/CalendarEvent.js b/frontend/src/Calendar/Events/CalendarEvent.js index fbc21b8cf..bb0b32671 100644 --- a/frontend/src/Calendar/Events/CalendarEvent.js +++ b/frontend/src/Calendar/Events/CalendarEvent.js @@ -7,7 +7,6 @@ import getStatusStyle from 'Calendar/getStatusStyle'; import Icon from 'Components/Icon'; import Link from 'Components/Link/Link'; import CalendarEventQueueDetails from './CalendarEventQueueDetails'; -import MovieTitleLink from 'Movie/MovieTitleLink'; import styles from './CalendarEvent.css'; class CalendarEvent extends Component { @@ -19,25 +18,10 @@ class CalendarEvent extends Component { super(props, context); this.state = { - isDetailsModalOpen: false + // isDetailsModalOpen: false }; } - // - // Listeners - - onPress = () => { - this.setState({ isDetailsModalOpen: true }, () => { - this.props.onEventModalOpenToggle(true); - }); - } - - onDetailsModalClose = () => { - this.setState({ isDetailsModalOpen: false }, () => { - this.props.onEventModalOpenToggle(false); - }); - } - // // Render @@ -47,10 +31,12 @@ class CalendarEvent extends Component { inCinemas, title, titleSlug, + genres, monitored, hasFile, grabbed, queueItem, + showMovieInformation, showCutoffUnmetIcon, colorImpairedMode } = this.props; @@ -59,24 +45,24 @@ class CalendarEvent extends Component { const isDownloading = !!(queueItem || grabbed); const isMonitored = monitored; const statusStyle = getStatusStyle(hasFile, isDownloading, startTime, isMonitored); + const joinedGenres = genres.slice(0, 2).join(', '); + const link = `/movie/${titleSlug}`; return (
-
- +
+ {title}
{ @@ -109,6 +95,15 @@ class CalendarEvent extends Component { /> }
+ + { + showMovieInformation && +
+
+ {joinedGenres} +
+
+ }
@@ -118,6 +113,7 @@ class CalendarEvent extends Component { CalendarEvent.propTypes = { id: PropTypes.number.isRequired, + genres: PropTypes.arrayOf(PropTypes.string).isRequired, movieFile: PropTypes.object, title: PropTypes.string.isRequired, titleSlug: PropTypes.string.isRequired, @@ -126,10 +122,15 @@ CalendarEvent.propTypes = { hasFile: PropTypes.bool.isRequired, grabbed: PropTypes.bool, queueItem: PropTypes.object, + showMovieInformation: PropTypes.bool.isRequired, showCutoffUnmetIcon: PropTypes.bool.isRequired, timeFormat: PropTypes.string.isRequired, - colorImpairedMode: PropTypes.bool.isRequired, - onEventModalOpenToggle: PropTypes.func.isRequired + colorImpairedMode: PropTypes.bool.isRequired + // onEventModalOpenToggle: PropTypes.func.isRequired +}; + +CalendarEvent.defaultProps = { + genres: [] }; export default CalendarEvent; diff --git a/frontend/src/Calendar/Events/CalendarEventQueueDetails.js b/frontend/src/Calendar/Events/CalendarEventQueueDetails.js index 81d81465c..95144adae 100644 --- a/frontend/src/Calendar/Events/CalendarEventQueueDetails.js +++ b/frontend/src/Calendar/Events/CalendarEventQueueDetails.js @@ -25,7 +25,7 @@ function CalendarEventQueueDetails(props) { status={status} errorMessage={errorMessage} progressBar={ -
+
- Show Episode Information + Show Movie Information - - - - Icon for Finales - - - - - - Icon for Specials - - @@ -242,7 +216,7 @@ class CalendarOptionsModalContent extends Component { CalendarOptionsModalContent.propTypes = { collapseMultipleEpisodes: PropTypes.bool.isRequired, - showEpisodeInformation: PropTypes.bool.isRequired, + showMovieInformation: PropTypes.bool.isRequired, showFinaleIcon: PropTypes.bool.isRequired, showSpecialIcon: PropTypes.bool.isRequired, showCutoffUnmetIcon: PropTypes.bool.isRequired, diff --git a/frontend/src/Store/Actions/calendarActions.js b/frontend/src/Store/Actions/calendarActions.js index 1a54c7ea1..11ef5437a 100644 --- a/frontend/src/Store/Actions/calendarActions.js +++ b/frontend/src/Store/Actions/calendarActions.js @@ -39,9 +39,7 @@ export const defaultState = { options: { collapseMultipleEpisodes: false, - showEpisodeInformation: true, - showFinaleIcon: false, - showSpecialIcon: false, + showMovieInformation: true, showCutoffUnmetIcon: false }, @@ -346,11 +344,11 @@ export const actionHandlers = handleThunks({ }, [SEARCH_MISSING]: function(getState, payload, dispatch) { - const { episodeIds } = payload; + const { movieIds } = payload; const commandPayload = { name: commandNames.MOVIE_SEARCH, - episodeIds + movieIds }; executeCommandHelper(commandPayload, dispatch).then((data) => {