Qstick
4 years ago
parent
09ed2ab889
commit
e1020f4107
File diff suppressed because it is too large
Load Diff
@ -1,149 +1 @@
|
||||
# Radarr
|
||||
|
||||
[](https://dev.azure.com/Radarr/Radarr/_build/latest?definitionId=1&branchName=develop)
|
||||
[](https://translate.servarr.com/engage/radarr/?utm_source=widget)
|
||||
[](https://github.com/Radarr/Radarr/wiki/Docker)
|
||||
|
||||
[](#backers) [](#sponsors)
|
||||
|
||||
Radarr is an __independent__ fork of [Sonarr](https://github.com/Sonarr/Sonarr) reworked for automatically downloading movies via Usenet and BitTorrent.
|
||||
|
||||
The project was inspired by other Usenet/BitTorrent movie downloaders such as CouchPotato.
|
||||
|
||||
## Getting Started
|
||||
|
||||
[](https://github.com/Radarr/Radarr/wiki/Installation)
|
||||
[](https://github.com/Radarr/Radarr/wiki/Docker)
|
||||
[](https://github.com/Radarr/Radarr/wiki/Setup-Guide)
|
||||
[](https://github.com/Radarr/Radarr/wiki/FAQ)
|
||||
|
||||
|
||||
If you are using Docker please ensure your Docker paths are setup correctly using [this guide to facilitate](https://old.reddit.com/r/usenet/wiki/docker) hardlinks and minimize permissions issues.
|
||||
|
||||
* [Install Radarr for your desired OS](https://github.com/Radarr/Radarr/wiki/Installation) *or* use [Docker](https://github.com/Radarr/Radarr/wiki/Docker)
|
||||
* *For Linux users*, run `radarr` and *optionally* have [Radarr start automatically](https://github.com/Radarr/Radarr/wiki/Autostart-on-Linux)
|
||||
* Connect to the UI through <http://localhost:7878> or <http://your-ip:7878> in your web browser
|
||||
* See the [Setup Guide](https://github.com/Radarr/Radarr/wiki/Setup-Guide) for further configuration
|
||||
|
||||
## Downloads
|
||||
Please note that v0.2 will only have critical bugs resolved as of August 2020. Any additional development or features will be soley in V3.
|
||||
|
||||
Each push to the "develop" branch creates a build on "nightly" release channel (release channel is the "branch" within radarr's settings), once we push a build to Github it will show up on "develop" release channel.
|
||||
|
||||
|
||||
| Release Channel Type | Branch: develop (stable) (v0.2) | Branch: nightly (semi-unstable) (v3.0) |
|
||||
|-----------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
|
||||
| Binary Releases | [](https://github.com/Radarr/Radarr/releases) | [](https://radarr.servarr.com/v1/update/nightly/updatefile?os=windows&runtime=netcore&arch=x64) <br> [](https://radarr.servarr.com/v1/update/nightly/updatefile?os=linux&runtime=netcore&arch=x64) <br> [](https://radarr.servarr.com/v1/update/nightly/updatefile?os=linux&runtime=netcore&arch=arm64) [](https://radarr.servarr.com/v1/update/nightly/updatefile?os=linux&runtime=netcore&arch=arm) <br> [](https://radarr.servarr.com/v1/update/nightly/updatefile?os=osx&runtime=netcore&arch=x64)
|
||||
| Docker - lsio | [](https://hub.docker.com/r/linuxserver/radarr) | [](https://hub.docker.com/r/linuxserver/radarr) |
|
||||
| Docker - hotio | [](https://hub.docker.com/r/hotio/radarr) | [](https://hub.docker.com/r/hotio/radarr) |
|
||||
|
||||
## Support
|
||||
|
||||
[](https://discord.gg/r5wJPt9)
|
||||
[](https://www.reddit.com/r/radarr)
|
||||
[](https://github.com/Radarr/Radarr/issues)
|
||||
[](https://github.com/Radarr/Radarr/wiki)
|
||||
|
||||
## Status
|
||||
|
||||
[](https://github.com/Radarr/Radarr/issues)
|
||||
[](https://github.com/Radarr/Radarr/pulls)
|
||||
[](http://www.gnu.org/licenses/gpl.html)
|
||||
[](https://github.com/Radarr/Radarr)
|
||||
[](https://github.com/Radarr/Radarr/releases/)
|
||||
[](https://hub.docker.com/r/linuxserver/radarr/)
|
||||
[](/CHANGELOG.md#unreleased)
|
||||
|
||||
### [Site and API Status](https://status.radarr.video)
|
||||
|
||||
Radarr is currently undergoing rapid development and pull requests are actively added into the repository.
|
||||
|
||||
## Features
|
||||
|
||||
### Current Features
|
||||
|
||||
* Adding new movies with lots of information, such as trailers, ratings, etc.
|
||||
* Support for major platforms: Windows, Linux, macOS, Raspberry Pi, etc.
|
||||
* Can watch for better quality of the movies you have and do an automatic upgrade. *eg. from DVD to Blu-Ray*
|
||||
* Automatic failed download handling will try another release if one fails
|
||||
* Manual search so you can pick any release or to see why a release was not downloaded automatically
|
||||
* Full integration with SABnzbd and NZBGet
|
||||
* Automatically searching for releases as well as RSS Sync
|
||||
* Automatically importing downloaded movies
|
||||
* Recognizing Special Editions, Director's Cut, etc.
|
||||
* Identifying releases with hardcoded subs
|
||||
* All indexers supported by Sonarr also supported
|
||||
* New PassThePopcorn Indexer
|
||||
* QBittorrent, Deluge, rTorrent, Transmission and uTorrent download client (Other clients are coming)
|
||||
* New TorrentPotato Indexer
|
||||
* Torznab Indexer now supports Movies (Works well with [Jackett](https://github.com/Jackett/Jackett))
|
||||
* Scanning PreDB to know when a new release is available
|
||||
* Importing movies from various online sources, such as IMDb Watchlists or Trakt (v3) (A complete list can be found [here](https://github.com/Radarr/Radarr/issues/114))
|
||||
* Full integration with Kodi, Plex (notification, library update)
|
||||
* And a new beautiful UI (v3)
|
||||
* Importing Metadata such as trailers or subtitles
|
||||
* Adding metadata such as posters and information for Kodi and others to use
|
||||
* Advanced customization for profiles, such that Radarr will always download the copy you want
|
||||
|
||||
#### [Feature Requests](https://github.com/Radarr/Radarr/issues/new?assignees=&labels=feature+request&template=feature_request.md&title=)
|
||||
|
||||
## Configuring the Development Environment
|
||||
|
||||
### Requirements
|
||||
|
||||
* [Visual Studio Community 2019](https://www.visualstudio.com/vs/community/) or [Rider](http://www.jetbrains.com/rider/)
|
||||
* [Git](https://git-scm.com/downloads)
|
||||
* [Node.js](https://nodejs.org/en/download/)
|
||||
* [Yarn](https://yarnpkg.com/)
|
||||
|
||||
### Setup
|
||||
|
||||
* Make sure all the required software mentioned above are installed
|
||||
* Clone the repository into your development machine ([*info*](https://help.github.com/desktop/guides/contributing/working-with-your-remote-repository-on-github-or-github-enterprise))
|
||||
* Install the required Node Packages `yarn install`
|
||||
* Start gulp to monitor your dev environment for any changes that need post processing using `yarn start` command.
|
||||
|
||||
> **Notice**
|
||||
> Gulp must be running at all times while you are working with Radarr client source files.
|
||||
|
||||
### Build
|
||||
|
||||
* To build run `sh build.sh`
|
||||
|
||||
**Note:** Windows users must have bash available to do this. If you installed git, you should have a git bash utility that works.
|
||||
|
||||
### Development
|
||||
|
||||
* Open `Radarr.sln` in Visual Studio 2019 or run the build.sh script, if Mono is installed. Alternatively you can use Jetbrains Rider, since it works on all Platforms.
|
||||
* Make sure `NzbDrone.Console` is set as the startup project
|
||||
* Run `build.sh` before running, or build in VS
|
||||
|
||||
## Supporters
|
||||
|
||||
This project would not be possible without the support by these amazing folks. [**Become a sponsor or backer**](https://opencollective.com/radarr) to help us out!
|
||||
|
||||
### Sponsors
|
||||
|
||||
[](https://opencollective.com/radarr/order/3851)
|
||||
|
||||
### Flexible Sponsors
|
||||
|
||||
[](https://opencollective.com/radarr/order/3856)
|
||||
|
||||
### Backers
|
||||
|
||||
[](https://opencollective.com/radarr/order/3850)
|
||||
|
||||
### JetBrains
|
||||
|
||||
Thank you to [<img src="/Logo/jetbrains.svg" alt="JetBrains" width="32"> JetBrains](http://www.jetbrains.com/) for providing us with free licenses to their great tools
|
||||
|
||||
* [<img src="/Logo/resharper.svg" alt="ReSharper" width="32"> ReSharper](http://www.jetbrains.com/resharper/)
|
||||
* [<img src="/Logo/webstorm.svg" alt="WebStorm" width="32"> WebStorm](http://www.jetbrains.com/webstorm/)
|
||||
* [<img src="/Logo/rider.svg" alt="Rider" width="32"> Rider](http://www.jetbrains.com/rider/)
|
||||
* [<img src="/Logo/dottrace.svg" alt="dotTrace" width="32"> dotTrace](http://www.jetbrains.com/dottrace/)
|
||||
|
||||
## License
|
||||
|
||||
* [GNU GPL v3](http://www.gnu.org/licenses/gpl.html)
|
||||
* Copyright 2010-2020
|
||||
# Prowlarr
|
||||
@ -1,14 +0,0 @@
|
||||
# Changelog
|
||||
|
||||
{{#versions}}
|
||||
## {{{label}}}
|
||||
|
||||
{{#sections}}
|
||||
### {{{label}}}
|
||||
{{#commits}}
|
||||
- {{{subject}}} [<a href="https://github.com/{{{author}}}">{{{author}}}</a>]
|
||||
{{/commits}}
|
||||
|
||||
{{/sections}}
|
||||
|
||||
{{/versions}}
|
||||
@ -1,15 +0,0 @@
|
||||
**To receive further Pre-Release updates, please change the branch to develop. (Settings -> General (Show Advanced Settings) -> Updates -> Branch)**
|
||||
|
||||
{{#versions}}
|
||||
|
||||
{{#sections}}
|
||||
{{{label}}}
|
||||
{{#commits}}
|
||||
- {{{subject}}} [{{{author}}}]
|
||||
{{/commits}}
|
||||
|
||||
{{/sections}}
|
||||
|
||||
{{/versions}}
|
||||
|
||||
**Note**: The OSX version does not automatically launch the browser. You have to go to http://localhost:7878 by yourself in a browser of your choice.
|
||||
@ -1,44 +0,0 @@
|
||||
input1 = """Prometheus.Special.Edition.Fan Edit.2012..BRRip.x264.AAC-m2g
|
||||
Star Wars Episode IV - A New Hope (Despecialized) 1999.mkv
|
||||
Prometheus.(Special.Edition.Remastered).2012.[Bluray-1080p].mkv
|
||||
Prometheus Extended 2012
|
||||
Prometheus Extended Directors Cut Fan Edit 2012
|
||||
Prometheus Director's Cut 2012
|
||||
Prometheus Directors Cut 2012
|
||||
Prometheus.(Extended.Theatrical.Version.IMAX).BluRay.1080p.2012.asdf
|
||||
2001 A Space Odyssey Director's Cut (1968).mkv
|
||||
2001: A Space Odyssey (Extended Directors Cut FanEdit) Bluray 1080p 1968
|
||||
A Fake Movie 2035 Directors 2012.mkv
|
||||
Blade Runner Director's Cut 2049.mkv
|
||||
Prometheus 50th Anniversary Edition 2012.mkv
|
||||
Movie 2in1 2012.mkv
|
||||
Movie IMAX 2012.mkv"""
|
||||
|
||||
output1 = """Special.Edition.Fan Edit BRRip.x264.AAC-m2g
|
||||
Despecialized mkv
|
||||
Special.Edition.Remastered Bluray-1080p].mkv
|
||||
Extended mkv
|
||||
Extended Directors Cut Fan Edit mkv
|
||||
Director's Cut mkv
|
||||
Directors Cut mkv
|
||||
Extended.Theatrical.Version.IMAX asdf
|
||||
Director's Cut mkv
|
||||
Extended Directors Cut FanEdit mkv
|
||||
Directors mkv
|
||||
Director's Cut mkv
|
||||
50th Anniversary Edition mkv
|
||||
2in1 mkv
|
||||
IMAX mkv"""
|
||||
|
||||
inputs = input1.split("\n")
|
||||
outputs = output1.split("\n")
|
||||
real_o = []
|
||||
for output in outputs:
|
||||
real_o.append(output.split(" ")[0].replace(".", " ").strip())
|
||||
|
||||
count = 0
|
||||
|
||||
for inp in inputs:
|
||||
o = real_o[count]
|
||||
print "[TestCase(\"{0}\", \"{1}\")]".format(inp, o)
|
||||
count += 1
|
||||
@ -1,3 +0,0 @@
|
||||
.agenda {
|
||||
margin-top: 10px;
|
||||
}
|
||||
@ -1,69 +0,0 @@
|
||||
import moment from 'moment';
|
||||
import PropTypes from 'prop-types';
|
||||
import React from 'react';
|
||||
import AgendaEventConnector from './AgendaEventConnector';
|
||||
import styles from './Agenda.css';
|
||||
|
||||
function Agenda(props) {
|
||||
const {
|
||||
items,
|
||||
start,
|
||||
end
|
||||
} = props;
|
||||
|
||||
const startDateParsed = Date.parse(start);
|
||||
const endDateParsed = Date.parse(end);
|
||||
|
||||
items.forEach((item) => {
|
||||
const cinemaDateParsed = Date.parse(item.inCinemas);
|
||||
const digitalDateParsed = Date.parse(item.digitalRelease);
|
||||
const physicalDateParsed = Date.parse(item.physicalRelease);
|
||||
const dates = [];
|
||||
|
||||
if (cinemaDateParsed > 0 && cinemaDateParsed >= startDateParsed && cinemaDateParsed <= endDateParsed) {
|
||||
dates.push(cinemaDateParsed);
|
||||
}
|
||||
if (digitalDateParsed > 0 && digitalDateParsed >= startDateParsed && digitalDateParsed <= endDateParsed) {
|
||||
dates.push(digitalDateParsed);
|
||||
}
|
||||
if (physicalDateParsed > 0 && physicalDateParsed >= startDateParsed && physicalDateParsed <= endDateParsed) {
|
||||
dates.push(physicalDateParsed);
|
||||
}
|
||||
|
||||
item.sortDate = Math.min(...dates);
|
||||
item.cinemaDateParsed = cinemaDateParsed;
|
||||
item.digitalDateParsed = digitalDateParsed;
|
||||
item.physicalDateParsed = physicalDateParsed;
|
||||
});
|
||||
|
||||
items.sort((a, b) => ((a.sortDate > b.sortDate) ? 1 : -1));
|
||||
|
||||
return (
|
||||
<div className={styles.agenda}>
|
||||
{
|
||||
items.map((item, index) => {
|
||||
const momentDate = moment(item.inCinemas);
|
||||
const showDate = index === 0 ||
|
||||
!moment(items[index - 1].inCinemas).isSame(momentDate, 'day');
|
||||
|
||||
return (
|
||||
<AgendaEventConnector
|
||||
key={item.id}
|
||||
movieId={item.id}
|
||||
showDate={showDate}
|
||||
{...item}
|
||||
/>
|
||||
);
|
||||
})
|
||||
}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Agenda.propTypes = {
|
||||
items: PropTypes.arrayOf(PropTypes.object).isRequired,
|
||||
start: PropTypes.string.isRequired,
|
||||
end: PropTypes.string.isRequired
|
||||
};
|
||||
|
||||
export default Agenda;
|
||||
@ -1,14 +0,0 @@
|
||||
import { connect } from 'react-redux';
|
||||
import { createSelector } from 'reselect';
|
||||
import Agenda from './Agenda';
|
||||
|
||||
function createMapStateToProps() {
|
||||
return createSelector(
|
||||
(state) => state.calendar,
|
||||
(calendar) => {
|
||||
return calendar;
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
export default connect(createMapStateToProps)(Agenda);
|
||||
@ -1,96 +0,0 @@
|
||||
.event {
|
||||
display: flex;
|
||||
overflow-x: hidden;
|
||||
padding: 5px;
|
||||
border-bottom: 1px solid $borderColor;
|
||||
font-size: $defaultFontSize;
|
||||
|
||||
&:hover {
|
||||
background-color: $tableRowHoverBackgroundColor;
|
||||
}
|
||||
}
|
||||
|
||||
.link {
|
||||
composes: link from '~Calendar/Events/CalendarEvent.css';
|
||||
}
|
||||
|
||||
.eventWrapper {
|
||||
display: flex;
|
||||
flex: 1 0 1px;
|
||||
overflow-x: hidden;
|
||||
padding-left: 6px;
|
||||
border-left-width: 4px;
|
||||
border-left-style: solid;
|
||||
}
|
||||
|
||||
.date {
|
||||
flex: 0 0 250px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.time {
|
||||
flex: 0 0 120px;
|
||||
margin-right: 10px;
|
||||
border: none !important;
|
||||
}
|
||||
|
||||
.movieTitle,
|
||||
.genres {
|
||||
@add-mixin truncate;
|
||||
|
||||
flex: 0 1 300px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.statusIcon {
|
||||
margin-left: 3px;
|
||||
}
|
||||
|
||||
/*
|
||||
* Status
|
||||
*/
|
||||
|
||||
.downloaded {
|
||||
composes: downloaded from '~Calendar/Events/CalendarEvent.css';
|
||||
}
|
||||
|
||||
.downloading {
|
||||
composes: downloading from '~Calendar/Events/CalendarEvent.css';
|
||||
}
|
||||
|
||||
.unmonitored {
|
||||
composes: unmonitored from '~Calendar/Events/CalendarEvent.css';
|
||||
}
|
||||
|
||||
.missing {
|
||||
composes: missing from '~Calendar/Events/CalendarEvent.css';
|
||||
}
|
||||
|
||||
.unreleased {
|
||||
composes: unreleased from '~Calendar/Events/CalendarEvent.css';
|
||||
}
|
||||
|
||||
@media only screen and (max-width: $breakpointSmall) {
|
||||
.event {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.eventWrapper {
|
||||
display: block;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.date {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.date,
|
||||
.time,
|
||||
.movieTitle {
|
||||
flex: 0 0 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.dateIcon {
|
||||
width: 25px;
|
||||
}
|
||||
@ -1,193 +0,0 @@
|
||||
import classNames from 'classnames';
|
||||
import moment from 'moment';
|
||||
import PropTypes from 'prop-types';
|
||||
import React, { Component } from 'react';
|
||||
import CalendarEventQueueDetails from 'Calendar/Events/CalendarEventQueueDetails';
|
||||
import getStatusStyle from 'Calendar/getStatusStyle';
|
||||
import Icon from 'Components/Icon';
|
||||
import Link from 'Components/Link/Link';
|
||||
import { icons, kinds } from 'Helpers/Props';
|
||||
import translate from 'Utilities/String/translate';
|
||||
import styles from './AgendaEvent.css';
|
||||
|
||||
class AgendaEvent extends Component {
|
||||
//
|
||||
// Lifecycle
|
||||
|
||||
constructor(props, context) {
|
||||
super(props, context);
|
||||
|
||||
this.state = {
|
||||
isDetailsModalOpen: false
|
||||
};
|
||||
}
|
||||
|
||||
//
|
||||
// Listeners
|
||||
|
||||
onPress = () => {
|
||||
this.setState({ isDetailsModalOpen: true });
|
||||
}
|
||||
|
||||
onDetailsModalClose = () => {
|
||||
this.setState({ isDetailsModalOpen: false });
|
||||
}
|
||||
|
||||
//
|
||||
// Render
|
||||
|
||||
render() {
|
||||
const {
|
||||
movieFile,
|
||||
title,
|
||||
titleSlug,
|
||||
genres,
|
||||
isAvailable,
|
||||
inCinemas,
|
||||
digitalRelease,
|
||||
physicalRelease,
|
||||
monitored,
|
||||
hasFile,
|
||||
grabbed,
|
||||
queueItem,
|
||||
showDate,
|
||||
showMovieInformation,
|
||||
showCutoffUnmetIcon,
|
||||
longDateFormat,
|
||||
colorImpairedMode,
|
||||
cinemaDateParsed,
|
||||
digitalDateParsed,
|
||||
physicalDateParsed,
|
||||
sortDate
|
||||
} = this.props;
|
||||
|
||||
let startTime = null;
|
||||
let releaseIcon = null;
|
||||
|
||||
if (physicalDateParsed === sortDate) {
|
||||
startTime = physicalRelease;
|
||||
releaseIcon = icons.DISC;
|
||||
}
|
||||
|
||||
if (digitalDateParsed === sortDate) {
|
||||
startTime = digitalRelease;
|
||||
releaseIcon = icons.MOVIE_FILE;
|
||||
}
|
||||
|
||||
if (cinemaDateParsed === sortDate) {
|
||||
startTime = inCinemas;
|
||||
releaseIcon = icons.IN_CINEMAS;
|
||||
}
|
||||
|
||||
startTime = moment(startTime);
|
||||
const downloading = !!(queueItem || grabbed);
|
||||
const isMonitored = monitored;
|
||||
const statusStyle = getStatusStyle(hasFile, downloading, isAvailable, isMonitored);
|
||||
const joinedGenres = genres.slice(0, 2).join(', ');
|
||||
const link = `/movie/${titleSlug}`;
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Link
|
||||
className={classNames(
|
||||
styles.event,
|
||||
styles.link
|
||||
)}
|
||||
to={link}
|
||||
>
|
||||
<div className={styles.dateIcon}>
|
||||
<Icon
|
||||
name={releaseIcon}
|
||||
kind={kinds.DEFAULT}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className={styles.date}>
|
||||
{(showDate) ? startTime.format(longDateFormat) : null}
|
||||
</div>
|
||||
|
||||
<div
|
||||
className={classNames(
|
||||
styles.eventWrapper,
|
||||
styles[statusStyle],
|
||||
colorImpairedMode && 'colorImpaired'
|
||||
)}
|
||||
>
|
||||
<div className={styles.movieTitle}>
|
||||
{title}
|
||||
</div>
|
||||
|
||||
{
|
||||
showMovieInformation &&
|
||||
<div className={styles.genres}>
|
||||
{joinedGenres}
|
||||
</div>
|
||||
}
|
||||
|
||||
{
|
||||
!!queueItem &&
|
||||
<span className={styles.statusIcon}>
|
||||
<CalendarEventQueueDetails
|
||||
{...queueItem}
|
||||
/>
|
||||
</span>
|
||||
}
|
||||
|
||||
{
|
||||
!queueItem && grabbed &&
|
||||
<Icon
|
||||
className={styles.statusIcon}
|
||||
name={icons.DOWNLOADING}
|
||||
title={translate('MovieIsDownloading')}
|
||||
/>
|
||||
}
|
||||
|
||||
{
|
||||
showCutoffUnmetIcon &&
|
||||
!!movieFile &&
|
||||
movieFile.qualityCutoffNotMet &&
|
||||
<Icon
|
||||
className={styles.statusIcon}
|
||||
name={icons.MOVIE_FILE}
|
||||
kind={kinds.WARNING}
|
||||
title={translate('QualityCutoffHasNotBeenMet')}
|
||||
/>
|
||||
}
|
||||
</div>
|
||||
</Link>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
AgendaEvent.propTypes = {
|
||||
id: PropTypes.number.isRequired,
|
||||
movieFile: PropTypes.object,
|
||||
title: PropTypes.string.isRequired,
|
||||
titleSlug: PropTypes.string.isRequired,
|
||||
genres: PropTypes.arrayOf(PropTypes.string).isRequired,
|
||||
isAvailable: PropTypes.bool.isRequired,
|
||||
inCinemas: PropTypes.string,
|
||||
digitalRelease: PropTypes.string,
|
||||
physicalRelease: PropTypes.string,
|
||||
monitored: PropTypes.bool.isRequired,
|
||||
hasFile: PropTypes.bool.isRequired,
|
||||
grabbed: PropTypes.bool,
|
||||
queueItem: PropTypes.object,
|
||||
showDate: PropTypes.bool.isRequired,
|
||||
showMovieInformation: PropTypes.bool.isRequired,
|
||||
showCutoffUnmetIcon: PropTypes.bool.isRequired,
|
||||
timeFormat: PropTypes.string.isRequired,
|
||||
longDateFormat: PropTypes.string.isRequired,
|
||||
colorImpairedMode: PropTypes.bool.isRequired,
|
||||
cinemaDateParsed: PropTypes.number,
|
||||
digitalDateParsed: PropTypes.number,
|
||||
physicalDateParsed: PropTypes.number,
|
||||
sortDate: PropTypes.number
|
||||
};
|
||||
|
||||
AgendaEvent.defaultProps = {
|
||||
genres: []
|
||||
};
|
||||
|
||||
export default AgendaEvent;
|
||||
@ -1,30 +0,0 @@
|
||||
import { connect } from 'react-redux';
|
||||
import { createSelector } from 'reselect';
|
||||
import createMovieFileSelector from 'Store/Selectors/createMovieFileSelector';
|
||||
import createMovieSelector from 'Store/Selectors/createMovieSelector';
|
||||
import createQueueItemSelector from 'Store/Selectors/createQueueItemSelector';
|
||||
import createUISettingsSelector from 'Store/Selectors/createUISettingsSelector';
|
||||
import AgendaEvent from './AgendaEvent';
|
||||
|
||||
function createMapStateToProps() {
|
||||
return createSelector(
|
||||
(state) => state.calendar.options,
|
||||
createMovieSelector(),
|
||||
createMovieFileSelector(),
|
||||
createQueueItemSelector(),
|
||||
createUISettingsSelector(),
|
||||
(calendarOptions, movie, movieFile, queueItem, uiSettings) => {
|
||||
return {
|
||||
movie,
|
||||
movieFile,
|
||||
queueItem,
|
||||
...calendarOptions,
|
||||
timeFormat: uiSettings.timeFormat,
|
||||
longDateFormat: uiSettings.longDateFormat,
|
||||
colorImpairedMode: uiSettings.enableColorImpairedMode
|
||||
};
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
export default connect(createMapStateToProps)(AgendaEvent);
|
||||
@ -1,8 +0,0 @@
|
||||
.calendar {
|
||||
flex-grow: 1;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.calendarContent {
|
||||
width: 100%;
|
||||
}
|
||||
@ -1,67 +0,0 @@
|
||||
import PropTypes from 'prop-types';
|
||||
import React, { Component } from 'react';
|
||||
import LoadingIndicator from 'Components/Loading/LoadingIndicator';
|
||||
import translate from 'Utilities/String/translate';
|
||||
import AgendaConnector from './Agenda/AgendaConnector';
|
||||
import * as calendarViews from './calendarViews';
|
||||
import CalendarDaysConnector from './Day/CalendarDaysConnector';
|
||||
import DaysOfWeekConnector from './Day/DaysOfWeekConnector';
|
||||
import CalendarHeaderConnector from './Header/CalendarHeaderConnector';
|
||||
import styles from './Calendar.css';
|
||||
|
||||
class Calendar extends Component {
|
||||
|
||||
//
|
||||
// Render
|
||||
|
||||
render() {
|
||||
const {
|
||||
isFetching,
|
||||
isPopulated,
|
||||
error,
|
||||
view
|
||||
} = this.props;
|
||||
|
||||
return (
|
||||
<div className={styles.calendar}>
|
||||
{
|
||||
isFetching && !isPopulated &&
|
||||
<LoadingIndicator />
|
||||
}
|
||||
|
||||
{
|
||||
!isFetching && !!error &&
|
||||
<div>
|
||||
{translate('UnableToLoadTheCalendar')}
|
||||
</div>
|
||||
}
|
||||
|
||||
{
|
||||
!error && isPopulated && view === calendarViews.AGENDA &&
|
||||
<div className={styles.calendarContent}>
|
||||
<CalendarHeaderConnector />
|
||||
<AgendaConnector />
|
||||
</div>
|
||||
}
|
||||
|
||||
{
|
||||
!error && isPopulated && view !== calendarViews.AGENDA &&
|
||||
<div className={styles.calendarContent}>
|
||||
<CalendarHeaderConnector />
|
||||
<DaysOfWeekConnector />
|
||||
<CalendarDaysConnector />
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
Calendar.propTypes = {
|
||||
isFetching: PropTypes.bool.isRequired,
|
||||
isPopulated: PropTypes.bool.isRequired,
|
||||
error: PropTypes.object,
|
||||
view: PropTypes.string.isRequired
|
||||
};
|
||||
|
||||
export default Calendar;
|
||||
@ -1,195 +0,0 @@
|
||||
import PropTypes from 'prop-types';
|
||||
import React, { Component } from 'react';
|
||||
import { connect } from 'react-redux';
|
||||
import { createSelector } from 'reselect';
|
||||
import * as commandNames from 'Commands/commandNames';
|
||||
import * as calendarActions from 'Store/Actions/calendarActions';
|
||||
import { clearMovieFiles, fetchMovieFiles } from 'Store/Actions/movieFileActions';
|
||||
import { clearQueueDetails, fetchQueueDetails } from 'Store/Actions/queueActions';
|
||||
import createCommandExecutingSelector from 'Store/Selectors/createCommandExecutingSelector';
|
||||
import hasDifferentItems from 'Utilities/Object/hasDifferentItems';
|
||||
import selectUniqueIds from 'Utilities/Object/selectUniqueIds';
|
||||
import { registerPagePopulator, unregisterPagePopulator } from 'Utilities/pagePopulator';
|
||||
import Calendar from './Calendar';
|
||||
|
||||
const UPDATE_DELAY = 3600000; // 1 hour
|
||||
|
||||
function createMapStateToProps() {
|
||||
return createSelector(
|
||||
(state) => state.calendar,
|
||||
(state) => state.settings.ui.item.firstDayOfWeek,
|
||||
createCommandExecutingSelector(commandNames.REFRESH_MOVIE),
|
||||
(calendar, firstDayOfWeek, isRefreshingMovie) => {
|
||||
return {
|
||||
...calendar,
|
||||
isRefreshingMovie,
|
||||
firstDayOfWeek
|
||||
};
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
const mapDispatchToProps = {
|
||||
...calendarActions,
|
||||
fetchMovieFiles,
|
||||
clearMovieFiles,
|
||||
fetchQueueDetails,
|
||||
clearQueueDetails
|
||||
};
|
||||
|
||||
class CalendarConnector extends Component {
|
||||
|
||||
//
|
||||
// Lifecycle
|
||||
|
||||
constructor(props, context) {
|
||||
super(props, context);
|
||||
|
||||
this.updateTimeoutId = null;
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
const {
|
||||
useCurrentPage,
|
||||
fetchCalendar,
|
||||
gotoCalendarToday
|
||||
} = this.props;
|
||||
|
||||
registerPagePopulator(this.repopulate);
|
||||
|
||||
if (useCurrentPage) {
|
||||
fetchCalendar();
|
||||
} else {
|
||||
gotoCalendarToday();
|
||||
}
|
||||
|
||||
this.scheduleUpdate();
|
||||
}
|
||||
|
||||
componentDidUpdate(prevProps) {
|
||||
const {
|
||||
items,
|
||||
time,
|
||||
view,
|
||||
isRefreshingMovie,
|
||||
firstDayOfWeek
|
||||
} = this.props;
|
||||
|
||||
if (hasDifferentItems(prevProps.items, items)) {
|
||||
const movieFileIds = selectUniqueIds(items, 'movieFileId');
|
||||
|
||||
if (movieFileIds.length) {
|
||||
this.props.fetchMovieFiles({ movieFileIds });
|
||||
}
|
||||
|
||||
if (items.length) {
|
||||
this.props.fetchQueueDetails();
|
||||
}
|
||||
}
|
||||
|
||||
if (prevProps.time !== time) {
|
||||
this.scheduleUpdate();
|
||||
}
|
||||
|
||||
if (prevProps.firstDayOfWeek !== firstDayOfWeek) {
|
||||
this.props.fetchCalendar({ time, view });
|
||||
}
|
||||
|
||||
if (prevProps.isRefreshingMovie && !isRefreshingMovie) {
|
||||
this.props.fetchCalendar({ time, view });
|
||||
}
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
unregisterPagePopulator(this.repopulate);
|
||||
this.props.clearCalendar();
|
||||
this.props.clearQueueDetails();
|
||||
this.props.clearMovieFiles();
|
||||
this.clearUpdateTimeout();
|
||||
}
|
||||
|
||||
//
|
||||
// Control
|
||||
|
||||
repopulate = () => {
|
||||
const {
|
||||
time,
|
||||
view
|
||||
} = this.props;
|
||||
|
||||
this.props.fetchQueueDetails({ time, view });
|
||||
this.props.fetchCalendar({ time, view });
|
||||
}
|
||||
|
||||
scheduleUpdate = () => {
|
||||
this.clearUpdateTimeout();
|
||||
|
||||
this.updateTimeoutId = setTimeout(this.updateCalendar, UPDATE_DELAY);
|
||||
}
|
||||
|
||||
clearUpdateTimeout = () => {
|
||||
if (this.updateTimeoutId) {
|
||||
clearTimeout(this.updateTimeoutId);
|
||||
}
|
||||
}
|
||||
|
||||
updateCalendar = () => {
|
||||
this.props.gotoCalendarToday();
|
||||
this.scheduleUpdate();
|
||||
}
|
||||
|
||||
//
|
||||
// Listeners
|
||||
|
||||
onCalendarViewChange = (view) => {
|
||||
this.props.setCalendarView({ view });
|
||||
}
|
||||
|
||||
onTodayPress = () => {
|
||||
this.props.gotoCalendarToday();
|
||||
}
|
||||
|
||||
onPreviousPress = () => {
|
||||
this.props.gotoCalendarPreviousRange();
|
||||
}
|
||||
|
||||
onNextPress = () => {
|
||||
this.props.gotoCalendarNextRange();
|
||||
}
|
||||
|
||||
//
|
||||
// Render
|
||||
|
||||
render() {
|
||||
return (
|
||||
<Calendar
|
||||
{...this.props}
|
||||
onCalendarViewChange={this.onCalendarViewChange}
|
||||
onTodayPress={this.onTodayPress}
|
||||
onPreviousPress={this.onPreviousPress}
|
||||
onNextPress={this.onNextPress}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
CalendarConnector.propTypes = {
|
||||
useCurrentPage: PropTypes.bool.isRequired,
|
||||
time: PropTypes.string,
|
||||
view: PropTypes.string.isRequired,
|
||||
firstDayOfWeek: PropTypes.number.isRequired,
|
||||
items: PropTypes.arrayOf(PropTypes.object).isRequired,
|
||||
isRefreshingMovie: PropTypes.bool.isRequired,
|
||||
setCalendarView: PropTypes.func.isRequired,
|
||||
gotoCalendarToday: PropTypes.func.isRequired,
|
||||
gotoCalendarPreviousRange: PropTypes.func.isRequired,
|
||||
gotoCalendarNextRange: PropTypes.func.isRequired,
|
||||
clearCalendar: PropTypes.func.isRequired,
|
||||
fetchCalendar: PropTypes.func.isRequired,
|
||||
fetchMovieFiles: PropTypes.func.isRequired,
|
||||
clearMovieFiles: PropTypes.func.isRequired,
|
||||
fetchQueueDetails: PropTypes.func.isRequired,
|
||||
clearQueueDetails: PropTypes.func.isRequired
|
||||
};
|
||||
|
||||
export default connect(createMapStateToProps, mapDispatchToProps)(CalendarConnector);
|
||||
@ -1,20 +0,0 @@
|
||||
.calendarPageBody {
|
||||
composes: contentBody from '~Components/Page/PageContentBody.css';
|
||||
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.calendarInnerPageBody {
|
||||
composes: innerContentBody from '~Components/Page/PageContentBody.css';
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-grow: 1;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.errorMessage {
|
||||
margin-top: 20px;
|
||||
text-align: center;
|
||||
font-size: 20px;
|
||||
}
|
||||
@ -1,220 +0,0 @@
|
||||
import PropTypes from 'prop-types';
|
||||
import React, { Component } from 'react';
|
||||
import LoadingIndicator from 'Components/Loading/LoadingIndicator';
|
||||
import Measure from 'Components/Measure';
|
||||
import FilterMenu from 'Components/Menu/FilterMenu';
|
||||
import PageContent from 'Components/Page/PageContent';
|
||||
import PageContentBody from 'Components/Page/PageContentBody';
|
||||
import PageToolbar from 'Components/Page/Toolbar/PageToolbar';
|
||||
import PageToolbarButton from 'Components/Page/Toolbar/PageToolbarButton';
|
||||
import PageToolbarSection from 'Components/Page/Toolbar/PageToolbarSection';
|
||||
import PageToolbarSeparator from 'Components/Page/Toolbar/PageToolbarSeparator';
|
||||
import { align, icons } from 'Helpers/Props';
|
||||
import NoMovie from 'Movie/NoMovie';
|
||||
import getErrorMessage from 'Utilities/Object/getErrorMessage';
|
||||
import translate from 'Utilities/String/translate';
|
||||
import CalendarConnector from './CalendarConnector';
|
||||
import CalendarLinkModal from './iCal/CalendarLinkModal';
|
||||
import LegendConnector from './Legend/LegendConnector';
|
||||
import CalendarOptionsModal from './Options/CalendarOptionsModal';
|
||||
import styles from './CalendarPage.css';
|
||||
|
||||
const MINIMUM_DAY_WIDTH = 120;
|
||||
|
||||
class CalendarPage extends Component {
|
||||
|
||||
//
|
||||
// Lifecycle
|
||||
|
||||
constructor(props, context) {
|
||||
super(props, context);
|
||||
|
||||
this.state = {
|
||||
isCalendarLinkModalOpen: false,
|
||||
isOptionsModalOpen: false,
|
||||
width: 0
|
||||
};
|
||||
}
|
||||
|
||||
//
|
||||
// Listeners
|
||||
|
||||
onMeasure = ({ width }) => {
|
||||
this.setState({ width });
|
||||
const days = Math.max(3, Math.min(7, Math.floor(width / MINIMUM_DAY_WIDTH)));
|
||||
|
||||
this.props.onDaysCountChange(days);
|
||||
}
|
||||
|
||||
onGetCalendarLinkPress = () => {
|
||||
this.setState({ isCalendarLinkModalOpen: true });
|
||||
}
|
||||
|
||||
onGetCalendarLinkModalClose = () => {
|
||||
this.setState({ isCalendarLinkModalOpen: false });
|
||||
}
|
||||
|
||||
onOptionsPress = () => {
|
||||
this.setState({ isOptionsModalOpen: true });
|
||||
}
|
||||
|
||||
onOptionsModalClose = () => {
|
||||
this.setState({ isOptionsModalOpen: false });
|
||||
}
|
||||
|
||||
onSearchMissingPress = () => {
|
||||
const {
|
||||
missingMovieIds,
|
||||
onSearchMissingPress
|
||||
} = this.props;
|
||||
|
||||
onSearchMissingPress(missingMovieIds);
|
||||
}
|
||||
|
||||
//
|
||||
// Render
|
||||
|
||||
render() {
|
||||
const {
|
||||
selectedFilterKey,
|
||||
filters,
|
||||
hasMovie,
|
||||
movieError,
|
||||
movieIsFetching,
|
||||
movieIsPopulated,
|
||||
missingMovieIds,
|
||||
isRssSyncExecuting,
|
||||
isSearchingForMissing,
|
||||
useCurrentPage,
|
||||
onRssSyncPress,
|
||||
onFilterSelect
|
||||
} = this.props;
|
||||
|
||||
const {
|
||||
isCalendarLinkModalOpen,
|
||||
isOptionsModalOpen
|
||||
} = this.state;
|
||||
|
||||
const isMeasured = this.state.width > 0;
|
||||
|
||||
return (
|
||||
<PageContent title={translate('Calendar')}>
|
||||
<PageToolbar>
|
||||
<PageToolbarSection>
|
||||
<PageToolbarButton
|
||||
label={translate('iCalLink')}
|
||||
iconName={icons.CALENDAR}
|
||||
onPress={this.onGetCalendarLinkPress}
|
||||
/>
|
||||
|
||||
<PageToolbarSeparator />
|
||||
|
||||
<PageToolbarButton
|
||||
label={translate('RSSSync')}
|
||||
iconName={icons.RSS}
|
||||
isSpinning={isRssSyncExecuting}
|
||||
onPress={onRssSyncPress}
|
||||
/>
|
||||
|
||||
<PageToolbarButton
|
||||
label={translate('SearchForMissing')}
|
||||
iconName={icons.SEARCH}
|
||||
isDisabled={!missingMovieIds.length}
|
||||
isSpinning={isSearchingForMissing}
|
||||
onPress={this.onSearchMissingPress}
|
||||
/>
|
||||
</PageToolbarSection>
|
||||
|
||||
<PageToolbarSection alignContent={align.RIGHT}>
|
||||
<PageToolbarButton
|
||||
label={translate('Options')}
|
||||
iconName={icons.POSTER}
|
||||
onPress={this.onOptionsPress}
|
||||
/>
|
||||
|
||||
<FilterMenu
|
||||
alignMenu={align.RIGHT}
|
||||
isDisabled={!hasMovie}
|
||||
selectedFilterKey={selectedFilterKey}
|
||||
filters={filters}
|
||||
customFilters={[]}
|
||||
onFilterSelect={onFilterSelect}
|
||||
/>
|
||||
</PageToolbarSection>
|
||||
</PageToolbar>
|
||||
|
||||
<PageContentBody
|
||||
className={styles.calendarPageBody}
|
||||
innerClassName={styles.calendarInnerPageBody}
|
||||
>
|
||||
{
|
||||
movieIsFetching && !movieIsPopulated &&
|
||||
<LoadingIndicator />
|
||||
}
|
||||
|
||||
{
|
||||
movieError &&
|
||||
<div className={styles.errorMessage}>
|
||||
{getErrorMessage(movieError, 'Failed to load movies from API')}
|
||||
</div>
|
||||
}
|
||||
|
||||
{
|
||||
!movieError && movieIsPopulated && hasMovie &&
|
||||
<Measure
|
||||
whitelist={['width']}
|
||||
onMeasure={this.onMeasure}
|
||||
>
|
||||
{
|
||||
isMeasured ?
|
||||
<CalendarConnector
|
||||
useCurrentPage={useCurrentPage}
|
||||
/> :
|
||||
<div />
|
||||
}
|
||||
</Measure>
|
||||
}
|
||||
|
||||
{
|
||||
!movieError && movieIsPopulated && !hasMovie &&
|
||||
<NoMovie />
|
||||
}
|
||||
|
||||
{
|
||||
hasMovie && !movieError &&
|
||||
<LegendConnector />
|
||||
}
|
||||
</PageContentBody>
|
||||
|
||||
<CalendarLinkModal
|
||||
isOpen={isCalendarLinkModalOpen}
|
||||
onModalClose={this.onGetCalendarLinkModalClose}
|
||||
/>
|
||||
|
||||
<CalendarOptionsModal
|
||||
isOpen={isOptionsModalOpen}
|
||||
onModalClose={this.onOptionsModalClose}
|
||||
/>
|
||||
</PageContent>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
CalendarPage.propTypes = {
|
||||
selectedFilterKey: PropTypes.string.isRequired,
|
||||
filters: PropTypes.arrayOf(PropTypes.object).isRequired,
|
||||
hasMovie: PropTypes.bool.isRequired,
|
||||
movieError: PropTypes.object,
|
||||
movieIsFetching: PropTypes.bool.isRequired,
|
||||
movieIsPopulated: PropTypes.bool.isRequired,
|
||||
missingMovieIds: PropTypes.arrayOf(PropTypes.number).isRequired,
|
||||
isRssSyncExecuting: PropTypes.bool.isRequired,
|
||||
isSearchingForMissing: PropTypes.bool.isRequired,
|
||||
useCurrentPage: PropTypes.bool.isRequired,
|
||||
onSearchMissingPress: PropTypes.func.isRequired,
|
||||
onDaysCountChange: PropTypes.func.isRequired,
|
||||
onRssSyncPress: PropTypes.func.isRequired,
|
||||
onFilterSelect: PropTypes.func.isRequired
|
||||
};
|
||||
|
||||
export default CalendarPage;
|
||||
@ -1,116 +0,0 @@
|
||||
import moment from 'moment';
|
||||
import { connect } from 'react-redux';
|
||||
import { createSelector } from 'reselect';
|
||||
import * as commandNames from 'Commands/commandNames';
|
||||
import withCurrentPage from 'Components/withCurrentPage';
|
||||
import { searchMissing, setCalendarDaysCount, setCalendarFilter } from 'Store/Actions/calendarActions';
|
||||
import { executeCommand } from 'Store/Actions/commandActions';
|
||||
import createCommandExecutingSelector from 'Store/Selectors/createCommandExecutingSelector';
|
||||
import createCommandsSelector from 'Store/Selectors/createCommandsSelector';
|
||||
import createMovieCountSelector from 'Store/Selectors/createMovieCountSelector';
|
||||
import createUISettingsSelector from 'Store/Selectors/createUISettingsSelector';
|
||||
import { isCommandExecuting } from 'Utilities/Command';
|
||||
import isBefore from 'Utilities/Date/isBefore';
|
||||
import CalendarPage from './CalendarPage';
|
||||
|
||||
function createMissingMovieIdsSelector() {
|
||||
return createSelector(
|
||||
(state) => state.calendar.start,
|
||||
(state) => state.calendar.end,
|
||||
(state) => state.calendar.items,
|
||||
(state) => state.queue.details.items,
|
||||
(start, end, movies, queueDetails) => {
|
||||
return movies.reduce((acc, movie) => {
|
||||
const inCinemas = movie.inCinemas;
|
||||
|
||||
if (
|
||||
!movie.movieFileId &&
|
||||
moment(inCinemas).isAfter(start) &&
|
||||
moment(inCinemas).isBefore(end) &&
|
||||
isBefore(movie.inCinemas) &&
|
||||
!queueDetails.some((details) => details.movieId === movie.id)
|
||||
) {
|
||||
acc.push(movie.id);
|
||||
}
|
||||
|
||||
return acc;
|
||||
}, []);
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
function createIsSearchingSelector() {
|
||||
return createSelector(
|
||||
(state) => state.calendar.searchMissingCommandId,
|
||||
createCommandsSelector(),
|
||||
(searchMissingCommandId, commands) => {
|
||||
if (searchMissingCommandId == null) {
|
||||
return false;
|
||||
}
|
||||
|
||||
return isCommandExecuting(commands.find((command) => {
|
||||
return command.id === searchMissingCommandId;
|
||||
}));
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
function createMapStateToProps() {
|
||||
return createSelector(
|
||||
(state) => state.calendar.selectedFilterKey,
|
||||
(state) => state.calendar.filters,
|
||||
createMovieCountSelector(),
|
||||
createUISettingsSelector(),
|
||||
createMissingMovieIdsSelector(),
|
||||
createCommandExecutingSelector(commandNames.RSS_SYNC),
|
||||
createIsSearchingSelector(),
|
||||
(
|
||||
selectedFilterKey,
|
||||
filters,
|
||||
movieCount,
|
||||
uiSettings,
|
||||
missingMovieIds,
|
||||
isRssSyncExecuting,
|
||||
isSearchingForMissing
|
||||
) => {
|
||||
return {
|
||||
selectedFilterKey,
|
||||
filters,
|
||||
colorImpairedMode: uiSettings.enableColorImpairedMode,
|
||||
hasMovie: !!movieCount.count,
|
||||
movieError: movieCount.error,
|
||||
movieIsFetching: movieCount.isFetching,
|
||||
movieIsPopulated: movieCount.isPopulated,
|
||||
missingMovieIds,
|
||||
isRssSyncExecuting,
|
||||
isSearchingForMissing
|
||||
};
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
function createMapDispatchToProps(dispatch, props) {
|
||||
return {
|
||||
onRssSyncPress() {
|
||||
dispatch(executeCommand({
|
||||
name: commandNames.RSS_SYNC
|
||||
}));
|
||||
},
|
||||
|
||||
onSearchMissingPress(movieIds) {
|
||||
dispatch(searchMissing({ movieIds }));
|
||||
},
|
||||
|
||||
onDaysCountChange(dayCount) {
|
||||
dispatch(setCalendarDaysCount({ dayCount }));
|
||||
},
|
||||
|
||||
onFilterSelect(selectedFilterKey) {
|
||||
dispatch(setCalendarFilter({ selectedFilterKey }));
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
export default withCurrentPage(
|
||||
connect(createMapStateToProps, createMapDispatchToProps)(CalendarPage)
|
||||
);
|
||||
@ -1,25 +0,0 @@
|
||||
.day {
|
||||
flex: 1 0 14.28%;
|
||||
overflow: hidden;
|
||||
min-height: 70px;
|
||||
border-bottom: 1px solid $calendarBorderColor;
|
||||
border-left: 1px solid $calendarBorderColor;
|
||||
}
|
||||
|
||||
.isSingleDay {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.dayOfMonth {
|
||||
padding-right: 5px;
|
||||
border-bottom: 1px solid $calendarBorderColor;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.isToday {
|
||||
background-color: $calendarTodayBackgroundColor;
|
||||
}
|
||||
|
||||
.isDifferentMonth {
|
||||
color: $disabledColor;
|
||||
}
|
||||
@ -1,64 +0,0 @@
|
||||
import classNames from 'classnames';
|
||||
import moment from 'moment';
|
||||
import PropTypes from 'prop-types';
|
||||
import React from 'react';
|
||||
import * as calendarViews from 'Calendar/calendarViews';
|
||||
import CalendarEventConnector from 'Calendar/Events/CalendarEventConnector';
|
||||
import styles from './CalendarDay.css';
|
||||
|
||||
function CalendarDay(props) {
|
||||
const {
|
||||
date,
|
||||
time,
|
||||
isTodaysDate,
|
||||
events,
|
||||
view,
|
||||
onEventModalOpenToggle
|
||||
} = props;
|
||||
|
||||
return (
|
||||
<div className={classNames(
|
||||
styles.day,
|
||||
view === calendarViews.DAY && styles.isSingleDay
|
||||
)}
|
||||
>
|
||||
{
|
||||
view === calendarViews.MONTH &&
|
||||
<div className={classNames(
|
||||
styles.dayOfMonth,
|
||||
isTodaysDate && styles.isToday,
|
||||
!moment(date).isSame(moment(time), 'month') && styles.isDifferentMonth
|
||||
)}
|
||||
>
|
||||
{moment(date).date()}
|
||||
</div>
|
||||
}
|
||||
<div>
|
||||
{
|
||||
events.map((event) => {
|
||||
return (
|
||||
<CalendarEventConnector
|
||||
key={event.id}
|
||||
movieId={event.id}
|
||||
date={date}
|
||||
{...event}
|
||||
onEventModalOpenToggle={onEventModalOpenToggle}
|
||||
/>
|
||||
);
|
||||
})
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
CalendarDay.propTypes = {
|
||||
date: PropTypes.string.isRequired,
|
||||
time: PropTypes.string.isRequired,
|
||||
isTodaysDate: PropTypes.bool.isRequired,
|
||||
events: PropTypes.arrayOf(PropTypes.object).isRequired,
|
||||
view: PropTypes.string.isRequired,
|
||||
onEventModalOpenToggle: PropTypes.func.isRequired
|
||||
};
|
||||
|
||||
export default CalendarDay;
|
||||
@ -1,67 +0,0 @@
|
||||
import _ from 'lodash';
|
||||
import moment from 'moment';
|
||||
import PropTypes from 'prop-types';
|
||||
import React, { Component } from 'react';
|
||||
import { connect } from 'react-redux';
|
||||
import { createSelector } from 'reselect';
|
||||
import CalendarDay from './CalendarDay';
|
||||
|
||||
function sort(items) {
|
||||
return _.sortBy(items, (item) => {
|
||||
if (item.isGroup) {
|
||||
return moment(item.events[0].inCinemas).unix();
|
||||
}
|
||||
|
||||
return moment(item.inCinemas).unix();
|
||||
});
|
||||
}
|
||||
|
||||
function createCalendarEventsConnector() {
|
||||
return createSelector(
|
||||
(state, { date }) => date,
|
||||
(state) => state.calendar.items,
|
||||
(date, items) => {
|
||||
const filtered = _.filter(items, (item) => {
|
||||
return (item.inCinemas && moment(date).isSame(moment(item.inCinemas), 'day')) ||
|
||||
(item.physicalRelease && moment(date).isSame(moment(item.physicalRelease), 'day')) ||
|
||||
(item.digitalRelease && moment(date).isSame(moment(item.digitalRelease), 'day'));
|
||||
});
|
||||
|
||||
return sort(filtered);
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
function createMapStateToProps() {
|
||||
return createSelector(
|
||||
(state) => state.calendar,
|
||||
createCalendarEventsConnector(),
|
||||
(calendar, events) => {
|
||||
return {
|
||||
time: calendar.time,
|
||||
view: calendar.view,
|
||||
events
|
||||
};
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
class CalendarDayConnector extends Component {
|
||||
|
||||
//
|
||||
// Render
|
||||
|
||||
render() {
|
||||
return (
|
||||
<CalendarDay
|
||||
{...this.props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
CalendarDayConnector.propTypes = {
|
||||
date: PropTypes.string.isRequired
|
||||
};
|
||||
|
||||
export default connect(createMapStateToProps)(CalendarDayConnector);
|
||||
@ -1,14 +0,0 @@
|
||||
.days {
|
||||
display: flex;
|
||||
border-right: 1px solid $calendarBorderColor;
|
||||
}
|
||||
|
||||
.day,
|
||||
.week,
|
||||
.forecast {
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
|
||||
.month {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
@ -1,164 +0,0 @@
|
||||
import classNames from 'classnames';
|
||||
import moment from 'moment';
|
||||
import PropTypes from 'prop-types';
|
||||
import React, { Component } from 'react';
|
||||
import * as calendarViews from 'Calendar/calendarViews';
|
||||
import isToday from 'Utilities/Date/isToday';
|
||||
import CalendarDayConnector from './CalendarDayConnector';
|
||||
import styles from './CalendarDays.css';
|
||||
|
||||
class CalendarDays extends Component {
|
||||
|
||||
//
|
||||
// Lifecycle
|
||||
|
||||
constructor(props, context) {
|
||||
super(props, context);
|
||||
|
||||
this._touchStart = null;
|
||||
|
||||
this.state = {
|
||||
todaysDate: moment().startOf('day').toISOString(),
|
||||
isEventModalOpen: false
|
||||
};
|
||||
|
||||
this.updateTimeoutId = null;
|
||||
}
|
||||
|
||||
// Lifecycle
|
||||
|
||||
componentDidMount() {
|
||||
const view = this.props.view;
|
||||
|
||||
if (view === calendarViews.MONTH) {
|
||||
this.scheduleUpdate();
|
||||
}
|
||||
|
||||
window.addEventListener('touchstart', this.onTouchStart);
|
||||
window.addEventListener('touchend', this.onTouchEnd);
|
||||
window.addEventListener('touchcancel', this.onTouchCancel);
|
||||
window.addEventListener('touchmove', this.onTouchMove);
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
this.clearUpdateTimeout();
|
||||
|
||||
window.removeEventListener('touchstart', this.onTouchStart);
|
||||
window.removeEventListener('touchend', this.onTouchEnd);
|
||||
window.removeEventListener('touchcancel', this.onTouchCancel);
|
||||
window.removeEventListener('touchmove', this.onTouchMove);
|
||||
}
|
||||
|
||||
//
|
||||
// Control
|
||||
|
||||
scheduleUpdate = () => {
|
||||
this.clearUpdateTimeout();
|
||||
const todaysDate = moment().startOf('day');
|
||||
const diff = moment().diff(todaysDate.clone().add(1, 'day'));
|
||||
|
||||
this.setState({ todaysDate: todaysDate.toISOString() });
|
||||
|
||||
this.updateTimeoutId = setTimeout(this.scheduleUpdate, diff);
|
||||
}
|
||||
|
||||
clearUpdateTimeout = () => {
|
||||
if (this.updateTimeoutId) {
|
||||
clearTimeout(this.updateTimeoutId);
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Listeners
|
||||
|
||||
onEventModalOpenToggle = (isEventModalOpen) => {
|
||||
this.setState({ isEventModalOpen });
|
||||
}
|
||||
|
||||
onTouchStart = (event) => {
|
||||
const touches = event.touches;
|
||||
const touchStart = touches[0].pageX;
|
||||
|
||||
if (touches.length !== 1) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (
|
||||
touchStart < 50 ||
|
||||
this.props.isSidebarVisible ||
|
||||
this.state.isEventModalOpen
|
||||
) {
|
||||
return;
|
||||
}
|
||||
|
||||
this._touchStart = touchStart;
|
||||
}
|
||||
|
||||
onTouchEnd = (event) => {
|
||||
const touches = event.changedTouches;
|
||||
const currentTouch = touches[0].pageX;
|
||||
|
||||
if (!this._touchStart) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (currentTouch > this._touchStart && currentTouch - this._touchStart > 100) {
|
||||
this.props.onNavigatePrevious();
|
||||
} else if (currentTouch < this._touchStart && this._touchStart - currentTouch > 100) {
|
||||
this.props.onNavigateNext();
|
||||
}
|
||||
|
||||
this._touchStart = null;
|
||||
}
|
||||
|
||||
onTouchCancel = (event) => {
|
||||
this._touchStart = null;
|
||||
}
|
||||
|
||||
onTouchMove = (event) => {
|
||||
if (!this._touchStart) {
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Render
|
||||
|
||||
render() {
|
||||
const {
|
||||
dates,
|
||||
view
|
||||
} = this.props;
|
||||
|
||||
return (
|
||||
<div className={classNames(
|
||||
styles.days,
|
||||
styles[view]
|
||||
)}
|
||||
>
|
||||
{
|
||||
dates.map((date) => {
|
||||
return (
|
||||
<CalendarDayConnector
|
||||
key={date}
|
||||
date={date}
|
||||
isTodaysDate={isToday(date)}
|
||||
onEventModalOpenToggle={this.onEventModalOpenToggle}
|
||||
/>
|
||||
);
|
||||
})
|
||||
}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
CalendarDays.propTypes = {
|
||||
dates: PropTypes.arrayOf(PropTypes.string).isRequired,
|
||||
view: PropTypes.string.isRequired,
|
||||
isSidebarVisible: PropTypes.bool.isRequired,
|
||||
onNavigatePrevious: PropTypes.func.isRequired,
|
||||
onNavigateNext: PropTypes.func.isRequired
|
||||
};
|
||||
|
||||
export default CalendarDays;
|
||||
@ -1,25 +0,0 @@
|
||||
import { connect } from 'react-redux';
|
||||
import { createSelector } from 'reselect';
|
||||
import { gotoCalendarNextRange, gotoCalendarPreviousRange } from 'Store/Actions/calendarActions';
|
||||
import CalendarDays from './CalendarDays';
|
||||
|
||||
function createMapStateToProps() {
|
||||
return createSelector(
|
||||
(state) => state.calendar,
|
||||
(state) => state.app.isSidebarVisible,
|
||||
(calendar, isSidebarVisible) => {
|
||||
return {
|
||||
dates: calendar.dates,
|
||||
view: calendar.view,
|
||||
isSidebarVisible
|
||||
};
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
const mapDispatchToProps = {
|
||||
onNavigatePrevious: gotoCalendarPreviousRange,
|
||||
onNavigateNext: gotoCalendarNextRange
|
||||
};
|
||||
|
||||
export default connect(createMapStateToProps, mapDispatchToProps)(CalendarDays);
|
||||
@ -1,13 +0,0 @@
|
||||
.dayOfWeek {
|
||||
flex: 1 0 14.28%;
|
||||
background-color: #e4eaec;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.isSingleDay {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.isToday {
|
||||
background-color: $calendarTodayBackgroundColor;
|
||||
}
|
||||
@ -1,56 +0,0 @@
|
||||
import classNames from 'classnames';
|
||||
import moment from 'moment';
|
||||
import PropTypes from 'prop-types';
|
||||
import React, { Component } from 'react';
|
||||
import * as calendarViews from 'Calendar/calendarViews';
|
||||
import getRelativeDate from 'Utilities/Date/getRelativeDate';
|
||||
import styles from './DayOfWeek.css';
|
||||
|
||||
class DayOfWeek extends Component {
|
||||
|
||||
//
|
||||
// Render
|
||||
|
||||
render() {
|
||||
const {
|
||||
date,
|
||||
view,
|
||||
isTodaysDate,
|
||||
calendarWeekColumnHeader,
|
||||
shortDateFormat,
|
||||
showRelativeDates
|
||||
} = this.props;
|
||||
|
||||
const highlightToday = view !== calendarViews.MONTH && isTodaysDate;
|
||||
const momentDate = moment(date);
|
||||
let formatedDate = momentDate.format('dddd');
|
||||
|
||||
if (view === calendarViews.WEEK) {
|
||||
formatedDate = momentDate.format(calendarWeekColumnHeader);
|
||||
} else if (view === calendarViews.FORECAST) {
|
||||
formatedDate = getRelativeDate(date, shortDateFormat, showRelativeDates);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={classNames(
|
||||
styles.dayOfWeek,
|
||||
view === calendarViews.DAY && styles.isSingleDay,
|
||||
highlightToday && styles.isToday
|
||||
)}
|
||||
>
|
||||
{formatedDate}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
DayOfWeek.propTypes = {
|
||||
date: PropTypes.string.isRequired,
|
||||
view: PropTypes.string.isRequired,
|
||||
isTodaysDate: PropTypes.bool.isRequired,
|
||||
calendarWeekColumnHeader: PropTypes.string.isRequired,
|
||||
shortDateFormat: PropTypes.string.isRequired,
|
||||
showRelativeDates: PropTypes.bool.isRequired
|
||||
};
|
||||
|
||||
export default DayOfWeek;
|
||||
@ -1,4 +0,0 @@
|
||||
.daysOfWeek {
|
||||
display: flex;
|
||||
margin-top: 10px;
|
||||
}
|
||||
@ -1,97 +0,0 @@
|
||||
import moment from 'moment';
|
||||
import PropTypes from 'prop-types';
|
||||
import React, { Component } from 'react';
|
||||
import * as calendarViews from 'Calendar/calendarViews';
|
||||
import DayOfWeek from './DayOfWeek';
|
||||
import styles from './DaysOfWeek.css';
|
||||
|
||||
class DaysOfWeek extends Component {
|
||||
|
||||
//
|
||||
// Lifecycle
|
||||
|
||||
constructor(props, context) {
|
||||
super(props, context);
|
||||
|
||||
this.state = {
|
||||
todaysDate: moment().startOf('day').toISOString()
|
||||
};
|
||||
|
||||
this.updateTimeoutId = null;
|
||||
}
|
||||
|
||||
// Lifecycle
|
||||
|
||||
componentDidMount() {
|
||||
const view = this.props.view;
|
||||
|
||||
if (view !== calendarViews.AGENDA || view !== calendarViews.MONTH) {
|
||||
this.scheduleUpdate();
|
||||
}
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
this.clearUpdateTimeout();
|
||||
}
|
||||
|
||||
//
|
||||
// Control
|
||||
|
||||
scheduleUpdate = () => {
|
||||
this.clearUpdateTimeout();
|
||||
const todaysDate = moment().startOf('day');
|
||||
const diff = todaysDate.clone().add(1, 'day').diff(moment());
|
||||
|
||||
this.setState({
|
||||
todaysDate: todaysDate.toISOString()
|
||||
});
|
||||
|
||||
this.updateTimeoutId = setTimeout(this.scheduleUpdate, diff);
|
||||
}
|
||||
|
||||
clearUpdateTimeout = () => {
|
||||
if (this.updateTimeoutId) {
|
||||
clearTimeout(this.updateTimeoutId);
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Render
|
||||
|
||||
render() {
|
||||
const {
|
||||
dates,
|
||||
view,
|
||||
...otherProps
|
||||
} = this.props;
|
||||
|
||||
if (view === calendarViews.AGENDA) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={styles.daysOfWeek}>
|
||||
{
|
||||
dates.map((date) => {
|
||||
return (
|
||||
<DayOfWeek
|
||||
key={date}
|
||||
date={date}
|
||||
view={view}
|
||||
isTodaysDate={date === this.state.todaysDate}
|
||||
{...otherProps}
|
||||
/>
|
||||
);
|
||||
})
|
||||
}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
DaysOfWeek.propTypes = {
|
||||
dates: PropTypes.arrayOf(PropTypes.string),
|
||||
view: PropTypes.string.isRequired
|
||||
};
|
||||
|
||||
export default DaysOfWeek;
|
||||
@ -1,22 +0,0 @@
|
||||
import { connect } from 'react-redux';
|
||||
import { createSelector } from 'reselect';
|
||||
import createUISettingsSelector from 'Store/Selectors/createUISettingsSelector';
|
||||
import DaysOfWeek from './DaysOfWeek';
|
||||
|
||||
function createMapStateToProps() {
|
||||
return createSelector(
|
||||
(state) => state.calendar,
|
||||
createUISettingsSelector(),
|
||||
(calendar, UiSettings) => {
|
||||
return {
|
||||
dates: calendar.dates.slice(0, 7),
|
||||
view: calendar.view,
|
||||
calendarWeekColumnHeader: UiSettings.calendarWeekColumnHeader,
|
||||
shortDateFormat: UiSettings.shortDateFormat,
|
||||
showRelativeDates: UiSettings.showRelativeDates
|
||||
};
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
export default connect(createMapStateToProps)(DaysOfWeek);
|
||||
@ -1,98 +0,0 @@
|
||||
.event {
|
||||
overflow-x: hidden;
|
||||
margin: 4px 2px;
|
||||
padding: 5px;
|
||||
border-bottom: 1px solid $borderColor;
|
||||
border-left: 4px solid $borderColor;
|
||||
font-size: 12px;
|
||||
|
||||
&:global(.colorImpaired) {
|
||||
border-left-width: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.link {
|
||||
composes: link from '~Components/Link/Link.css';
|
||||
|
||||
display: block;
|
||||
color: $defaultColor;
|
||||
|
||||
&:hover {
|
||||
color: $defaultColor;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
.info,
|
||||
.movieInfo {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.movieInfo {
|
||||
color: $calendarTextDim;
|
||||
}
|
||||
|
||||
.movieTitle,
|
||||
.genres {
|
||||
@add-mixin truncate;
|
||||
flex: 1 0 1px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.movieTitle {
|
||||
color: #3a3f51;
|
||||
font-size: $defaultFontSize;
|
||||
}
|
||||
|
||||
.statusIcon {
|
||||
margin-left: 3px;
|
||||
}
|
||||
|
||||
/*
|
||||
* Status
|
||||
*/
|
||||
|
||||
.downloaded {
|
||||
border-left-color: $successColor !important;
|
||||
|
||||
&:global(.colorImpaired) {
|
||||
border-left-color: color($successColor, saturation(+15%)) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.downloading {
|
||||
border-left-color: $purple !important;
|
||||
}
|
||||
|
||||
.unmonitored {
|
||||
border-left-color: $gray !important;
|
||||
|
||||
&:global(.colorImpaired) {
|
||||
background: repeating-linear-gradient(45deg, $colorImpairedGradientDark, $colorImpairedGradientDark 5px, $colorImpairedGradient 5px, $colorImpairedGradient 10px);
|
||||
}
|
||||
}
|
||||
|
||||
.onAir {
|
||||
border-left-color: $warningColor !important;
|
||||
|
||||
&:global(.colorImpaired) {
|
||||
background: repeating-linear-gradient(90deg, $colorImpairedGradientDark, $colorImpairedGradientDark 5px, $colorImpairedGradient 5px, $colorImpairedGradient 10px);
|
||||
}
|
||||
}
|
||||
|
||||
.missing {
|
||||
border-left-color: $dangerColor !important;
|
||||
|
||||
&:global(.colorImpaired) {
|
||||
border-left-color: color($dangerColor saturation(+15%)) !important;
|
||||
background: repeating-linear-gradient(90deg, $colorImpairedGradientDark, $colorImpairedGradientDark 5px, $colorImpairedGradient 5px, $colorImpairedGradient 10px);
|
||||
}
|
||||
}
|
||||
|
||||
.unreleased {
|
||||
border-left-color: $primaryColor !important;
|
||||
|
||||
&:global(.colorImpaired) {
|
||||
background: repeating-linear-gradient(90deg, $colorImpairedGradientDark, $colorImpairedGradientDark 5px, $colorImpairedGradient 5px, $colorImpairedGradient 10px);
|
||||
}
|
||||
}
|
||||
@ -1,159 +0,0 @@
|
||||
import classNames from 'classnames';
|
||||
import moment from 'moment';
|
||||
import PropTypes from 'prop-types';
|
||||
import React, { Component } from 'react';
|
||||
import getStatusStyle from 'Calendar/getStatusStyle';
|
||||
import Icon from 'Components/Icon';
|
||||
import Link from 'Components/Link/Link';
|
||||
import { icons, kinds } from 'Helpers/Props';
|
||||
import translate from 'Utilities/String/translate';
|
||||
import CalendarEventQueueDetails from './CalendarEventQueueDetails';
|
||||
import styles from './CalendarEvent.css';
|
||||
|
||||
class CalendarEvent extends Component {
|
||||
|
||||
//
|
||||
// Render
|
||||
|
||||
render() {
|
||||
const {
|
||||
movieFile,
|
||||
isAvailable,
|
||||
inCinemas,
|
||||
physicalRelease,
|
||||
digitalRelease,
|
||||
title,
|
||||
titleSlug,
|
||||
genres,
|
||||
monitored,
|
||||
certification,
|
||||
hasFile,
|
||||
grabbed,
|
||||
queueItem,
|
||||
showMovieInformation,
|
||||
showCutoffUnmetIcon,
|
||||
colorImpairedMode,
|
||||
date
|
||||
} = this.props;
|
||||
|
||||
const isDownloading = !!(queueItem || grabbed);
|
||||
const isMonitored = monitored;
|
||||
const statusStyle = getStatusStyle(hasFile, isDownloading, isAvailable, isMonitored);
|
||||
const joinedGenres = genres.slice(0, 2).join(', ');
|
||||
const link = `/movie/${titleSlug}`;
|
||||
const eventType = [];
|
||||
|
||||
if (moment(date).isSame(moment(inCinemas), 'day')) {
|
||||
eventType.push('Cinemas');
|
||||
}
|
||||
|
||||
if (moment(date).isSame(moment(physicalRelease), 'day')) {
|
||||
eventType.push('Physical');
|
||||
}
|
||||
|
||||
if (moment(date).isSame(moment(digitalRelease), 'day')) {
|
||||
eventType.push('Digital');
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Link
|
||||
className={classNames(
|
||||
styles.event,
|
||||
styles.link,
|
||||
styles[statusStyle],
|
||||
colorImpairedMode && 'colorImpaired'
|
||||
)}
|
||||
// component="div"
|
||||
to={link}
|
||||
>
|
||||
<div className={styles.info}>
|
||||
<div className={styles.movieTitle}>
|
||||
{title}
|
||||
</div>
|
||||
|
||||
{
|
||||
!!queueItem &&
|
||||
<span className={styles.statusIcon}>
|
||||
<CalendarEventQueueDetails
|
||||
{...queueItem}
|
||||
/>
|
||||
</span>
|
||||
}
|
||||
|
||||
{
|
||||
!queueItem && grabbed &&
|
||||
<Icon
|
||||
className={styles.statusIcon}
|
||||
name={icons.DOWNLOADING}
|
||||
title={translate('MovieIsDownloading')}
|
||||
/>
|
||||
}
|
||||
|
||||
{
|
||||
showCutoffUnmetIcon &&
|
||||
!!movieFile &&
|
||||
movieFile.qualityCutoffNotMet &&
|
||||
<Icon
|
||||
className={styles.statusIcon}
|
||||
name={icons.MOVIE_FILE}
|
||||
kind={kinds.WARNING}
|
||||
title={translate('QualityCutoffHasNotBeenMet')}
|
||||
/>
|
||||
}
|
||||
</div>
|
||||
|
||||
{
|
||||
showMovieInformation &&
|
||||
<div className={styles.movieInfo}>
|
||||
<div className={styles.genres}>
|
||||
{joinedGenres}
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
{
|
||||
showMovieInformation &&
|
||||
<div className={styles.movieInfo}>
|
||||
<div className={styles.genres}>
|
||||
{eventType.join(', ')}
|
||||
</div>
|
||||
<div>
|
||||
{certification}
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
</Link>
|
||||
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
CalendarEvent.propTypes = {
|
||||
id: PropTypes.number.isRequired,
|
||||
genres: PropTypes.arrayOf(PropTypes.string).isRequired,
|
||||
movieFile: PropTypes.object,
|
||||
title: PropTypes.string.isRequired,
|
||||
titleSlug: PropTypes.string.isRequired,
|
||||
isAvailable: PropTypes.bool.isRequired,
|
||||
inCinemas: PropTypes.string,
|
||||
physicalRelease: PropTypes.string,
|
||||
digitalRelease: PropTypes.string,
|
||||
monitored: PropTypes.bool.isRequired,
|
||||
certification: PropTypes.string,
|
||||
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,
|
||||
date: PropTypes.string.isRequired
|
||||
};
|
||||
|
||||
CalendarEvent.defaultProps = {
|
||||
genres: []
|
||||
};
|
||||
|
||||
export default CalendarEvent;
|
||||
@ -1,26 +0,0 @@
|
||||
import { connect } from 'react-redux';
|
||||
import { createSelector } from 'reselect';
|
||||
import createMovieSelector from 'Store/Selectors/createMovieSelector';
|
||||
import createQueueItemSelector from 'Store/Selectors/createQueueItemSelector';
|
||||
import createUISettingsSelector from 'Store/Selectors/createUISettingsSelector';
|
||||
import CalendarEvent from './CalendarEvent';
|
||||
|
||||
function createMapStateToProps() {
|
||||
return createSelector(
|
||||
(state) => state.calendar.options,
|
||||
createMovieSelector(),
|
||||
createQueueItemSelector(),
|
||||
createUISettingsSelector(),
|
||||
(calendarOptions, movie, queueItem, uiSettings) => {
|
||||
return {
|
||||
movie,
|
||||
queueItem,
|
||||
...calendarOptions,
|
||||
timeFormat: uiSettings.timeFormat,
|
||||
colorImpairedMode: uiSettings.enableColorImpairedMode
|
||||
};
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
export default connect(createMapStateToProps)(CalendarEvent);
|
||||
@ -1,57 +0,0 @@
|
||||
import PropTypes from 'prop-types';
|
||||
import React from 'react';
|
||||
import QueueDetails from 'Activity/Queue/QueueDetails';
|
||||
import CircularProgressBar from 'Components/CircularProgressBar';
|
||||
import colors from 'Styles/Variables/colors';
|
||||
import translate from 'Utilities/String/translate';
|
||||
|
||||
function CalendarEventQueueDetails(props) {
|
||||
const {
|
||||
title,
|
||||
size,
|
||||
sizeleft,
|
||||
estimatedCompletionTime,
|
||||
status,
|
||||
trackedDownloadState,
|
||||
trackedDownloadStatus,
|
||||
errorMessage
|
||||
} = props;
|
||||
|
||||
const progress = size ? (100 - sizeleft / size * 100) : 0;
|
||||
|
||||
return (
|
||||
<QueueDetails
|
||||
title={title}
|
||||
size={size}
|
||||
sizeleft={sizeleft}
|
||||
estimatedCompletionTime={estimatedCompletionTime}
|
||||
status={status}
|
||||
trackedDownloadState={trackedDownloadState}
|
||||
trackedDownloadStatus={trackedDownloadStatus}
|
||||
errorMessage={errorMessage}
|
||||
progressBar={
|
||||
<div title={translate('MovieIsDownloadingInterp', [progress.toFixed(1), title])}>
|
||||
<CircularProgressBar
|
||||
progress={progress}
|
||||
size={20}
|
||||
strokeWidth={2}
|
||||
strokeColor={colors.purple}
|
||||
/>
|
||||
</div>
|
||||
}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
CalendarEventQueueDetails.propTypes = {
|
||||
title: PropTypes.string.isRequired,
|
||||
size: PropTypes.number.isRequired,
|
||||
sizeleft: PropTypes.number.isRequired,
|
||||
estimatedCompletionTime: PropTypes.string,
|
||||
status: PropTypes.string.isRequired,
|
||||
trackedDownloadState: PropTypes.string.isRequired,
|
||||
trackedDownloadStatus: PropTypes.string.isRequired,
|
||||
errorMessage: PropTypes.string
|
||||
};
|
||||
|
||||
export default CalendarEventQueueDetails;
|
||||
@ -1,53 +0,0 @@
|
||||
.header {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.navigationButtons {
|
||||
flex: 1 1 33%;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.todayButton {
|
||||
composes: button from '~Components/Link/Button.css';
|
||||
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
.titleDesktop,
|
||||
.titleMobile {
|
||||
text-align: center;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.titleMobile {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.viewButtonsContainer {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
flex: 1 1 33%;
|
||||
}
|
||||
|
||||
.viewMenu {
|
||||
composes: menu from '~Components/Menu/Menu.css';
|
||||
|
||||
line-height: 31px;
|
||||
}
|
||||
|
||||
.loading {
|
||||
composes: loading from '~Components/Loading/LoadingIndicator.css';
|
||||
|
||||
margin-top: 5px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: $breakpointSmall) {
|
||||
.navigationButtons {
|
||||
flex: 1 0 50%;
|
||||
}
|
||||
|
||||
.viewButtonsContainer {
|
||||
flex: 0 0 100px;
|
||||
}
|
||||
}
|
||||
@ -1,268 +0,0 @@
|
||||
import moment from 'moment';
|
||||
import PropTypes from 'prop-types';
|
||||
import React, { Component } from 'react';
|
||||
import * as calendarViews from 'Calendar/calendarViews';
|
||||
import Icon from 'Components/Icon';
|
||||
import Button from 'Components/Link/Button';
|
||||
import LoadingIndicator from 'Components/Loading/LoadingIndicator';
|
||||
import Menu from 'Components/Menu/Menu';
|
||||
import MenuButton from 'Components/Menu/MenuButton';
|
||||
import MenuContent from 'Components/Menu/MenuContent';
|
||||
import ViewMenuItem from 'Components/Menu/ViewMenuItem';
|
||||
import { align, icons } from 'Helpers/Props';
|
||||
import translate from 'Utilities/String/translate';
|
||||
import CalendarHeaderViewButton from './CalendarHeaderViewButton';
|
||||
import styles from './CalendarHeader.css';
|
||||
|
||||
function getTitle(time, start, end, view, longDateFormat) {
|
||||
const timeMoment = moment(time);
|
||||
const startMoment = moment(start);
|
||||
const endMoment = moment(end);
|
||||
|
||||
if (view === 'day') {
|
||||
return timeMoment.format(longDateFormat);
|
||||
} else if (view === 'month') {
|
||||
return timeMoment.format('MMMM YYYY');
|
||||
} else if (view === 'agenda') {
|
||||
return `Agenda: ${startMoment.format('MMM D')} - ${endMoment.format('MMM D')}`;
|
||||
}
|
||||
|
||||
let startFormat = 'MMM D YYYY';
|
||||
let endFormat = 'MMM D YYYY';
|
||||
|
||||
if (startMoment.isSame(endMoment, 'month')) {
|
||||
startFormat = 'MMM D';
|
||||
endFormat = 'D YYYY';
|
||||
} else if (startMoment.isSame(endMoment, 'year')) {
|
||||
startFormat = 'MMM D';
|
||||
endFormat = 'MMM D YYYY';
|
||||
}
|
||||
|
||||
return `${startMoment.format(startFormat)} \u2014 ${endMoment.format(endFormat)}`;
|
||||
}
|
||||
|
||||
// TODO Convert to a stateful Component so we can track view internally when changed
|
||||
|
||||
class CalendarHeader extends Component {
|
||||
|
||||
//
|
||||
// Lifecycle
|
||||
|
||||
constructor(props, context) {
|
||||
super(props, context);
|
||||
|
||||
this.state = {
|
||||
view: props.view
|
||||
};
|
||||
}
|
||||
|
||||
componentDidUpdate(prevProps) {
|
||||
const view = this.props.view;
|
||||
|
||||
if (prevProps.view !== view) {
|
||||
this.setState({ view });
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Listeners
|
||||
|
||||
onViewChange = (view) => {
|
||||
this.setState({ view }, () => {
|
||||
this.props.onViewChange(view);
|
||||
});
|
||||
}
|
||||
|
||||
//
|
||||
// Render
|
||||
|
||||
render() {
|
||||
const {
|
||||
isFetching,
|
||||
time,
|
||||
start,
|
||||
end,
|
||||
longDateFormat,
|
||||
isSmallScreen,
|
||||
collapseViewButtons,
|
||||
onTodayPress,
|
||||
onPreviousPress,
|
||||
onNextPress
|
||||
} = this.props;
|
||||
|
||||
const view = this.state.view;
|
||||
|
||||
const title = getTitle(time, start, end, view, longDateFormat);
|
||||
|
||||
return (
|
||||
<div>
|
||||
{
|
||||
isSmallScreen &&
|
||||
<div className={styles.titleMobile}>
|
||||
{title}
|
||||
</div>
|
||||
}
|
||||
|
||||
<div className={styles.header}>
|
||||
<div className={styles.navigationButtons}>
|
||||
<Button
|
||||
buttonGroupPosition={align.LEFT}
|
||||
isDisabled={view === calendarViews.AGENDA}
|
||||
onPress={onPreviousPress}
|
||||
>
|
||||
<Icon name={icons.PAGE_PREVIOUS} />
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
buttonGroupPosition={align.RIGHT}
|
||||
isDisabled={view === calendarViews.AGENDA}
|
||||
onPress={onNextPress}
|
||||
>
|
||||
<Icon name={icons.PAGE_NEXT} />
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
className={styles.todayButton}
|
||||
isDisabled={view === calendarViews.AGENDA}
|
||||
onPress={onTodayPress}
|
||||
>
|
||||
Today
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{
|
||||
!isSmallScreen &&
|
||||
<div className={styles.titleDesktop}>
|
||||
{title}
|
||||
</div>
|
||||
}
|
||||
|
||||
<div className={styles.viewButtonsContainer}>
|
||||
{
|
||||
isFetching &&
|
||||
<LoadingIndicator
|
||||
className={styles.loading}
|
||||
size={20}
|
||||
/>
|
||||
}
|
||||
|
||||
{
|
||||
collapseViewButtons ?
|
||||
<Menu
|
||||
className={styles.viewMenu}
|
||||
alignMenu={align.RIGHT}
|
||||
>
|
||||
<MenuButton>
|
||||
<Icon
|
||||
name={icons.VIEW}
|
||||
size={22}
|
||||
/>
|
||||
</MenuButton>
|
||||
|
||||
<MenuContent>
|
||||
{
|
||||
isSmallScreen ?
|
||||
null :
|
||||
<ViewMenuItem
|
||||
name={calendarViews.MONTH}
|
||||
selectedView={view}
|
||||
onPress={this.onViewChange}
|
||||
>
|
||||
Month
|
||||
</ViewMenuItem>
|
||||
}
|
||||
|
||||
<ViewMenuItem
|
||||
name={calendarViews.WEEK}
|
||||
selectedView={view}
|
||||
onPress={this.onViewChange}
|
||||
>
|
||||
Week
|
||||
</ViewMenuItem>
|
||||
|
||||
<ViewMenuItem
|
||||
name={calendarViews.FORECAST}
|
||||
selectedView={view}
|
||||
onPress={this.onViewChange}
|
||||
>
|
||||
Forecast
|
||||
</ViewMenuItem>
|
||||
|
||||
<ViewMenuItem
|
||||
name={calendarViews.DAY}
|
||||
selectedView={view}
|
||||
onPress={this.onViewChange}
|
||||
>
|
||||
{translate('Day')}
|
||||
</ViewMenuItem>
|
||||
|
||||
<ViewMenuItem
|
||||
name={calendarViews.AGENDA}
|
||||
selectedView={view}
|
||||
onPress={this.onViewChange}
|
||||
>
|
||||
{translate('Agenda')}
|
||||
</ViewMenuItem>
|
||||
</MenuContent>
|
||||
</Menu> :
|
||||
|
||||
<div className={styles.viewButtons}>
|
||||
<CalendarHeaderViewButton
|
||||
view={calendarViews.MONTH}
|
||||
selectedView={view}
|
||||
buttonGroupPosition={align.LEFT}
|
||||
onPress={this.onViewChange}
|
||||
/>
|
||||
|
||||
<CalendarHeaderViewButton
|
||||
view={calendarViews.WEEK}
|
||||
selectedView={view}
|
||||
buttonGroupPosition={align.CENTER}
|
||||
onPress={this.onViewChange}
|
||||
/>
|
||||
|
||||
<CalendarHeaderViewButton
|
||||
view={calendarViews.FORECAST}
|
||||
selectedView={view}
|
||||
buttonGroupPosition={align.CENTER}
|
||||
onPress={this.onViewChange}
|
||||
/>
|
||||
|
||||
<CalendarHeaderViewButton
|
||||
view={calendarViews.DAY}
|
||||
selectedView={view}
|
||||
buttonGroupPosition={align.CENTER}
|
||||
onPress={this.onViewChange}
|
||||
/>
|
||||
|
||||
<CalendarHeaderViewButton
|
||||
view={calendarViews.AGENDA}
|
||||
selectedView={view}
|
||||
buttonGroupPosition={align.RIGHT}
|
||||
onPress={this.onViewChange}
|
||||
/>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
CalendarHeader.propTypes = {
|
||||
isFetching: PropTypes.bool.isRequired,
|
||||
time: PropTypes.string.isRequired,
|
||||
start: PropTypes.string.isRequired,
|
||||
end: PropTypes.string.isRequired,
|
||||
view: PropTypes.oneOf(calendarViews.all).isRequired,
|
||||
isSmallScreen: PropTypes.bool.isRequired,
|
||||
collapseViewButtons: PropTypes.bool.isRequired,
|
||||
longDateFormat: PropTypes.string.isRequired,
|
||||
onViewChange: PropTypes.func.isRequired,
|
||||
onTodayPress: PropTypes.func.isRequired,
|
||||
onPreviousPress: PropTypes.func.isRequired,
|
||||
onNextPress: PropTypes.func.isRequired
|
||||
};
|
||||
|
||||
export default CalendarHeader;
|
||||
@ -1,81 +0,0 @@
|
||||
import PropTypes from 'prop-types';
|
||||
import React, { Component } from 'react';
|
||||
import { connect } from 'react-redux';
|
||||
import { createSelector } from 'reselect';
|
||||
import { gotoCalendarNextRange, gotoCalendarPreviousRange, gotoCalendarToday, setCalendarView } from 'Store/Actions/calendarActions';
|
||||
import createDimensionsSelector from 'Store/Selectors/createDimensionsSelector';
|
||||
import createUISettingsSelector from 'Store/Selectors/createUISettingsSelector';
|
||||
import CalendarHeader from './CalendarHeader';
|
||||
|
||||
function createMapStateToProps() {
|
||||
return createSelector(
|
||||
(state) => state.calendar,
|
||||
createDimensionsSelector(),
|
||||
createUISettingsSelector(),
|
||||
(calendar, dimensions, uiSettings) => {
|
||||
return {
|
||||
isFetching: calendar.isFetching,
|
||||
view: calendar.view,
|
||||
time: calendar.time,
|
||||
start: calendar.start,
|
||||
end: calendar.end,
|
||||
isSmallScreen: dimensions.isSmallScreen,
|
||||
collapseViewButtons: dimensions.isLargeScreen,
|
||||
longDateFormat: uiSettings.longDateFormat
|
||||
};
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
const mapDispatchToProps = {
|
||||
setCalendarView,
|
||||
gotoCalendarToday,
|
||||
gotoCalendarPreviousRange,
|
||||
gotoCalendarNextRange
|
||||
};
|
||||
|
||||
class CalendarHeaderConnector extends Component {
|
||||
|
||||
//
|
||||
// Listeners
|
||||
|
||||
onViewChange = (view) => {
|
||||
this.props.setCalendarView({ view });
|
||||
}
|
||||
|
||||
onTodayPress = () => {
|
||||
this.props.gotoCalendarToday();
|
||||
}
|
||||
|
||||
onPreviousPress = () => {
|
||||
this.props.gotoCalendarPreviousRange();
|
||||
}
|
||||
|
||||
onNextPress = () => {
|
||||
this.props.gotoCalendarNextRange();
|
||||
}
|
||||
|
||||
//
|
||||
// Render
|
||||
|
||||
render() {
|
||||
return (
|
||||
<CalendarHeader
|
||||
{...this.props}
|
||||
onViewChange={this.onViewChange}
|
||||
onTodayPress={this.onTodayPress}
|
||||
onPreviousPress={this.onPreviousPress}
|
||||
onNextPress={this.onNextPress}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
CalendarHeaderConnector.propTypes = {
|
||||
setCalendarView: PropTypes.func.isRequired,
|
||||
gotoCalendarToday: PropTypes.func.isRequired,
|
||||
gotoCalendarPreviousRange: PropTypes.func.isRequired,
|
||||
gotoCalendarNextRange: PropTypes.func.isRequired
|
||||
};
|
||||
|
||||
export default connect(createMapStateToProps, mapDispatchToProps)(CalendarHeaderConnector);
|
||||
@ -1,45 +0,0 @@
|
||||
import PropTypes from 'prop-types';
|
||||
import React, { Component } from 'react';
|
||||
import * as calendarViews from 'Calendar/calendarViews';
|
||||
import Button from 'Components/Link/Button';
|
||||
import titleCase from 'Utilities/String/titleCase';
|
||||
// import styles from './CalendarHeaderViewButton.css';
|
||||
|
||||
class CalendarHeaderViewButton extends Component {
|
||||
|
||||
//
|
||||
// Listeners
|
||||
|
||||
onPress = () => {
|
||||
this.props.onPress(this.props.view);
|
||||
}
|
||||
|
||||
//
|
||||
// Render
|
||||
|
||||
render() {
|
||||
const {
|
||||
view,
|
||||
selectedView,
|
||||
...otherProps
|
||||
} = this.props;
|
||||
|
||||
return (
|
||||
<Button
|
||||
isDisabled={selectedView === view}
|
||||
{...otherProps}
|
||||
onPress={this.onPress}
|
||||
>
|
||||
{titleCase(view)}
|
||||
</Button>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
CalendarHeaderViewButton.propTypes = {
|
||||
view: PropTypes.oneOf(calendarViews.all).isRequired,
|
||||
selectedView: PropTypes.oneOf(calendarViews.all).isRequired,
|
||||
onPress: PropTypes.func.isRequired
|
||||
};
|
||||
|
||||
export default CalendarHeaderViewButton;
|
||||
@ -1,6 +0,0 @@
|
||||
.legend {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin-top: 10px;
|
||||
padding: 3px 0;
|
||||
}
|
||||
@ -1,72 +0,0 @@
|
||||
import PropTypes from 'prop-types';
|
||||
import React from 'react';
|
||||
import { icons, kinds } from 'Helpers/Props';
|
||||
import LegendIconItem from './LegendIconItem';
|
||||
import LegendItem from './LegendItem';
|
||||
import styles from './Legend.css';
|
||||
|
||||
function Legend(props) {
|
||||
const {
|
||||
showCutoffUnmetIcon,
|
||||
colorImpairedMode
|
||||
} = props;
|
||||
|
||||
const iconsToShow = [];
|
||||
|
||||
if (showCutoffUnmetIcon) {
|
||||
iconsToShow.push(
|
||||
<LegendIconItem
|
||||
name="Cutoff Not Met"
|
||||
icon={icons.MOVIE_FILE}
|
||||
kind={kinds.WARNING}
|
||||
tooltip="Quality or language cutoff has not been met"
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={styles.legend}>
|
||||
<div>
|
||||
<LegendItem
|
||||
status="unreleased"
|
||||
tooltip="Movie hasn't released yet"
|
||||
colorImpairedMode={colorImpairedMode}
|
||||
/>
|
||||
|
||||
<LegendItem
|
||||
status="unmonitored"
|
||||
tooltip="Movie is unmonitored"
|
||||
colorImpairedMode={colorImpairedMode}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<LegendItem
|
||||
status="downloading"
|
||||
tooltip="Movie is currently downloading"
|
||||
colorImpairedMode={colorImpairedMode}
|
||||
/>
|
||||
|
||||
<LegendItem
|
||||
status="downloaded"
|
||||
tooltip="Movie was downloaded and sorted"
|
||||
colorImpairedMode={colorImpairedMode}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{
|
||||
iconsToShow.length > 0 &&
|
||||
<div>
|
||||
{iconsToShow[0]}
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Legend.propTypes = {
|
||||
showCutoffUnmetIcon: PropTypes.bool.isRequired,
|
||||
colorImpairedMode: PropTypes.bool.isRequired
|
||||
};
|
||||
|
||||
export default Legend;
|
||||
@ -1,19 +0,0 @@
|
||||
import { connect } from 'react-redux';
|
||||
import { createSelector } from 'reselect';
|
||||
import createUISettingsSelector from 'Store/Selectors/createUISettingsSelector';
|
||||
import Legend from './Legend';
|
||||
|
||||
function createMapStateToProps() {
|
||||
return createSelector(
|
||||
(state) => state.calendar.options,
|
||||
createUISettingsSelector(),
|
||||
(calendarOptions, uiSettings) => {
|
||||
return {
|
||||
...calendarOptions,
|
||||
colorImpairedMode: uiSettings.enableColorImpairedMode
|
||||
};
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
export default connect(createMapStateToProps)(Legend);
|
||||
@ -1,10 +0,0 @@
|
||||
.legendIconItem {
|
||||
margin: 3px 0;
|
||||
margin-right: 6px;
|
||||
width: 150px;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.icon {
|
||||
margin-right: 5px;
|
||||
}
|
||||
@ -1,37 +0,0 @@
|
||||
import PropTypes from 'prop-types';
|
||||
import React from 'react';
|
||||
import Icon from 'Components/Icon';
|
||||
import styles from './LegendIconItem.css';
|
||||
|
||||
function LegendIconItem(props) {
|
||||
const {
|
||||
name,
|
||||
icon,
|
||||
kind,
|
||||
tooltip
|
||||
} = props;
|
||||
|
||||
return (
|
||||
<div
|
||||
className={styles.legendIconItem}
|
||||
title={tooltip}
|
||||
>
|
||||
<Icon
|
||||
className={styles.icon}
|
||||
name={icon}
|
||||
kind={kind}
|
||||
/>
|
||||
|
||||
{name}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
LegendIconItem.propTypes = {
|
||||
name: PropTypes.string.isRequired,
|
||||
icon: PropTypes.object.isRequired,
|
||||
kind: PropTypes.string.isRequired,
|
||||
tooltip: PropTypes.string.isRequired
|
||||
};
|
||||
|
||||
export default LegendIconItem;
|
||||
@ -1,33 +0,0 @@
|
||||
.legendItem {
|
||||
margin: 3px 0;
|
||||
margin-right: 6px;
|
||||
padding-left: 5px;
|
||||
width: 150px;
|
||||
border-left-width: 4px;
|
||||
border-left-style: solid;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
/*
|
||||
* Status
|
||||
*/
|
||||
|
||||
.downloaded {
|
||||
composes: downloaded from '~Calendar/Events/CalendarEvent.css';
|
||||
}
|
||||
|
||||
.downloading {
|
||||
composes: downloading from '~Calendar/Events/CalendarEvent.css';
|
||||
}
|
||||
|
||||
.unmonitored {
|
||||
composes: unmonitored from '~Calendar/Events/CalendarEvent.css';
|
||||
}
|
||||
|
||||
.missing {
|
||||
composes: missing from '~Calendar/Events/CalendarEvent.css';
|
||||
}
|
||||
|
||||
.unreleased {
|
||||
composes: unreleased from '~Calendar/Events/CalendarEvent.css';
|
||||
}
|
||||
@ -1,36 +0,0 @@
|
||||
import classNames from 'classnames';
|
||||
import PropTypes from 'prop-types';
|
||||
import React from 'react';
|
||||
import titleCase from 'Utilities/String/titleCase';
|
||||
import styles from './LegendItem.css';
|
||||
|
||||
function LegendItem(props) {
|
||||
const {
|
||||
name,
|
||||
status,
|
||||
tooltip,
|
||||
colorImpairedMode
|
||||
} = props;
|
||||
|
||||
return (
|
||||
<div
|
||||
className={classNames(
|
||||
styles.legendItem,
|
||||
styles[status],
|
||||
colorImpairedMode && 'colorImpaired'
|
||||
)}
|
||||
title={tooltip}
|
||||
>
|
||||
{name ? name : titleCase(status)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
LegendItem.propTypes = {
|
||||
name: PropTypes.string,
|
||||
status: PropTypes.string.isRequired,
|
||||
tooltip: PropTypes.string.isRequired,
|
||||
colorImpairedMode: PropTypes.bool.isRequired
|
||||
};
|
||||
|
||||
export default LegendItem;
|
||||
@ -1,29 +0,0 @@
|
||||
import PropTypes from 'prop-types';
|
||||
import React from 'react';
|
||||
import Modal from 'Components/Modal/Modal';
|
||||
import CalendarOptionsModalContentConnector from './CalendarOptionsModalContentConnector';
|
||||
|
||||
function CalendarOptionsModal(props) {
|
||||
const {
|
||||
isOpen,
|
||||
onModalClose
|
||||
} = props;
|
||||
|
||||
return (
|
||||
<Modal
|
||||
isOpen={isOpen}
|
||||
onModalClose={onModalClose}
|
||||
>
|
||||
<CalendarOptionsModalContentConnector
|
||||
onModalClose={onModalClose}
|
||||
/>
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
|
||||
CalendarOptionsModal.propTypes = {
|
||||
isOpen: PropTypes.bool.isRequired,
|
||||
onModalClose: PropTypes.func.isRequired
|
||||
};
|
||||
|
||||
export default CalendarOptionsModal;
|
||||
@ -1,217 +0,0 @@
|
||||
import PropTypes from 'prop-types';
|
||||
import React, { Component } from 'react';
|
||||
import FieldSet from 'Components/FieldSet';
|
||||
import Form from 'Components/Form/Form';
|
||||
import FormGroup from 'Components/Form/FormGroup';
|
||||
import FormInputGroup from 'Components/Form/FormInputGroup';
|
||||
import FormLabel from 'Components/Form/FormLabel';
|
||||
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 { inputTypes } from 'Helpers/Props';
|
||||
import { firstDayOfWeekOptions, timeFormatOptions, weekColumnOptions } from 'Settings/UI/UISettings';
|
||||
import translate from 'Utilities/String/translate';
|
||||
|
||||
class CalendarOptionsModalContent extends Component {
|
||||
|
||||
//
|
||||
// Lifecycle
|
||||
|
||||
constructor(props, context) {
|
||||
super(props, context);
|
||||
|
||||
const {
|
||||
firstDayOfWeek,
|
||||
calendarWeekColumnHeader,
|
||||
timeFormat,
|
||||
enableColorImpairedMode
|
||||
} = props;
|
||||
|
||||
this.state = {
|
||||
firstDayOfWeek,
|
||||
calendarWeekColumnHeader,
|
||||
timeFormat,
|
||||
enableColorImpairedMode
|
||||
};
|
||||
}
|
||||
|
||||
componentDidUpdate(prevProps) {
|
||||
const {
|
||||
firstDayOfWeek,
|
||||
calendarWeekColumnHeader,
|
||||
timeFormat,
|
||||
enableColorImpairedMode
|
||||
} = this.props;
|
||||
|
||||
if (
|
||||
prevProps.firstDayOfWeek !== firstDayOfWeek ||
|
||||
prevProps.calendarWeekColumnHeader !== calendarWeekColumnHeader ||
|
||||
prevProps.timeFormat !== timeFormat ||
|
||||
prevProps.enableColorImpairedMode !== enableColorImpairedMode
|
||||
) {
|
||||
this.setState({
|
||||
firstDayOfWeek,
|
||||
calendarWeekColumnHeader,
|
||||
timeFormat,
|
||||
enableColorImpairedMode
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Listeners
|
||||
|
||||
onOptionInputChange = ({ name, value }) => {
|
||||
const {
|
||||
dispatchSetCalendarOption
|
||||
} = this.props;
|
||||
|
||||
dispatchSetCalendarOption({ [name]: value });
|
||||
}
|
||||
|
||||
onGlobalInputChange = ({ name, value }) => {
|
||||
const {
|
||||
dispatchSaveUISettings
|
||||
} = this.props;
|
||||
|
||||
const setting = { [name]: value };
|
||||
|
||||
this.setState(setting, () => {
|
||||
dispatchSaveUISettings(setting);
|
||||
});
|
||||
}
|
||||
|
||||
onLinkFocus = (event) => {
|
||||
event.target.select();
|
||||
}
|
||||
|
||||
//
|
||||
// Render
|
||||
|
||||
render() {
|
||||
const {
|
||||
showMovieInformation,
|
||||
showCutoffUnmetIcon,
|
||||
onModalClose
|
||||
} = this.props;
|
||||
|
||||
const {
|
||||
firstDayOfWeek,
|
||||
calendarWeekColumnHeader,
|
||||
timeFormat,
|
||||
enableColorImpairedMode
|
||||
} = this.state;
|
||||
|
||||
return (
|
||||
<ModalContent onModalClose={onModalClose}>
|
||||
<ModalHeader>
|
||||
Calendar Options
|
||||
</ModalHeader>
|
||||
|
||||
<ModalBody>
|
||||
<FieldSet legend={translate('Local')}>
|
||||
<Form>
|
||||
<FormGroup>
|
||||
<FormLabel>{translate('ShowMovieInformation')}</FormLabel>
|
||||
|
||||
<FormInputGroup
|
||||
type={inputTypes.CHECK}
|
||||
name="showMovieInformation"
|
||||
value={showMovieInformation}
|
||||
helpText={translate('ShowMovieInformationHelpText')}
|
||||
onChange={this.onOptionInputChange}
|
||||
/>
|
||||
</FormGroup>
|
||||
|
||||
<FormGroup>
|
||||
<FormLabel>{translate('IconForCutoffUnmet')}</FormLabel>
|
||||
|
||||
<FormInputGroup
|
||||
type={inputTypes.CHECK}
|
||||
name="showCutoffUnmetIcon"
|
||||
value={showCutoffUnmetIcon}
|
||||
helpText={translate('ShowCutoffUnmetIconHelpText')}
|
||||
onChange={this.onOptionInputChange}
|
||||
/>
|
||||
</FormGroup>
|
||||
</Form>
|
||||
</FieldSet>
|
||||
|
||||
<FieldSet legend={translate('Global')}>
|
||||
<Form>
|
||||
<FormGroup>
|
||||
<FormLabel>{translate('FirstDayOfWeek')}</FormLabel>
|
||||
|
||||
<FormInputGroup
|
||||
type={inputTypes.SELECT}
|
||||
name="firstDayOfWeek"
|
||||
values={firstDayOfWeekOptions}
|
||||
value={firstDayOfWeek}
|
||||
onChange={this.onGlobalInputChange}
|
||||
/>
|
||||
</FormGroup>
|
||||
|
||||
<FormGroup>
|
||||
<FormLabel>{translate('WeekColumnHeader')}</FormLabel>
|
||||
|
||||
<FormInputGroup
|
||||
type={inputTypes.SELECT}
|
||||
name="calendarWeekColumnHeader"
|
||||
values={weekColumnOptions}
|
||||
value={calendarWeekColumnHeader}
|
||||
onChange={this.onGlobalInputChange}
|
||||
helpText={translate('HelpText')}
|
||||
/>
|
||||
</FormGroup>
|
||||
|
||||
<FormGroup>
|
||||
<FormLabel>{translate('TimeFormat')}</FormLabel>
|
||||
|
||||
<FormInputGroup
|
||||
type={inputTypes.SELECT}
|
||||
name="timeFormat"
|
||||
values={timeFormatOptions}
|
||||
value={timeFormat}
|
||||
onChange={this.onGlobalInputChange}
|
||||
/>
|
||||
</FormGroup><FormGroup>
|
||||
<FormLabel>{translate('EnableColorImpairedMode')}</FormLabel>
|
||||
|
||||
<FormInputGroup
|
||||
type={inputTypes.CHECK}
|
||||
name="enableColorImpairedMode"
|
||||
value={enableColorImpairedMode}
|
||||
helpText={translate('EnableColorImpairedModeHelpText')}
|
||||
onChange={this.onGlobalInputChange}
|
||||
/>
|
||||
</FormGroup>
|
||||
|
||||
</Form>
|
||||
</FieldSet>
|
||||
</ModalBody>
|
||||
|
||||
<ModalFooter>
|
||||
<Button onPress={onModalClose}>
|
||||
{translate('Close')}
|
||||
</Button>
|
||||
</ModalFooter>
|
||||
</ModalContent>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
CalendarOptionsModalContent.propTypes = {
|
||||
showMovieInformation: PropTypes.bool.isRequired,
|
||||
showCutoffUnmetIcon: PropTypes.bool.isRequired,
|
||||
firstDayOfWeek: PropTypes.number.isRequired,
|
||||
calendarWeekColumnHeader: PropTypes.string.isRequired,
|
||||
timeFormat: PropTypes.string.isRequired,
|
||||
enableColorImpairedMode: PropTypes.bool.isRequired,
|
||||
dispatchSetCalendarOption: PropTypes.func.isRequired,
|
||||
dispatchSaveUISettings: PropTypes.func.isRequired,
|
||||
onModalClose: PropTypes.func.isRequired
|
||||
};
|
||||
|
||||
export default CalendarOptionsModalContent;
|
||||
@ -1,25 +0,0 @@
|
||||
import { connect } from 'react-redux';
|
||||
import { createSelector } from 'reselect';
|
||||
import { setCalendarOption } from 'Store/Actions/calendarActions';
|
||||
import { saveUISettings } from 'Store/Actions/settingsActions';
|
||||
import CalendarOptionsModalContent from './CalendarOptionsModalContent';
|
||||
|
||||
function createMapStateToProps() {
|
||||
return createSelector(
|
||||
(state) => state.calendar.options,
|
||||
(state) => state.settings.ui.item,
|
||||
(options, uiSettings) => {
|
||||
return {
|
||||
...options,
|
||||
...uiSettings
|
||||
};
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
const mapDispatchToProps = {
|
||||
dispatchSetCalendarOption: setCalendarOption,
|
||||
dispatchSaveUISettings: saveUISettings
|
||||
};
|
||||
|
||||
export default connect(createMapStateToProps, mapDispatchToProps)(CalendarOptionsModalContent);
|
||||
@ -1,7 +0,0 @@
|
||||
export const DAY = 'day';
|
||||
export const WEEK = 'week';
|
||||
export const MONTH = 'month';
|
||||
export const FORECAST = 'forecast';
|
||||
export const AGENDA = 'agenda';
|
||||
|
||||
export const all = [DAY, WEEK, MONTH, FORECAST, AGENDA];
|
||||
@ -1,23 +0,0 @@
|
||||
|
||||
function getStatusStyle(hasFile, downloading, isAvailable, isMonitored) {
|
||||
|
||||
if (hasFile) {
|
||||
return 'downloaded';
|
||||
}
|
||||
|
||||
if (downloading) {
|
||||
return 'downloading';
|
||||
}
|
||||
|
||||
if (!isMonitored) {
|
||||
return 'unmonitored';
|
||||
}
|
||||
|
||||
if (isAvailable && !hasFile) {
|
||||
return 'missing';
|
||||
}
|
||||
|
||||
return 'unreleased';
|
||||
}
|
||||
|
||||
export default getStatusStyle;
|
||||
@ -1,29 +0,0 @@
|
||||
import PropTypes from 'prop-types';
|
||||
import React from 'react';
|
||||
import Modal from 'Components/Modal/Modal';
|
||||
import CalendarLinkModalContentConnector from './CalendarLinkModalContentConnector';
|
||||
|
||||
function CalendarLinkModal(props) {
|
||||
const {
|
||||
isOpen,
|
||||
onModalClose
|
||||
} = props;
|
||||
|
||||
return (
|
||||
<Modal
|
||||
isOpen={isOpen}
|
||||
onModalClose={onModalClose}
|
||||
>
|
||||
<CalendarLinkModalContentConnector
|
||||
onModalClose={onModalClose}
|
||||
/>
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
|
||||
CalendarLinkModal.propTypes = {
|
||||
isOpen: PropTypes.bool.isRequired,
|
||||
onModalClose: PropTypes.func.isRequired
|
||||
};
|
||||
|
||||
export default CalendarLinkModal;
|
||||
@ -1,203 +0,0 @@
|
||||
import PropTypes from 'prop-types';
|
||||
import React, { Component } from 'react';
|
||||
import Form from 'Components/Form/Form';
|
||||
import FormGroup from 'Components/Form/FormGroup';
|
||||
import FormInputButton from 'Components/Form/FormInputButton';
|
||||
import FormInputGroup from 'Components/Form/FormInputGroup';
|
||||
import FormLabel from 'Components/Form/FormLabel';
|
||||
import Icon from 'Components/Icon';
|
||||
import Button from 'Components/Link/Button';
|
||||
import ClipboardButton from 'Components/Link/ClipboardButton';
|
||||
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 { icons, inputTypes, kinds, sizes } from 'Helpers/Props';
|
||||
import translate from 'Utilities/String/translate';
|
||||
|
||||
function getUrls(state) {
|
||||
const {
|
||||
unmonitored,
|
||||
asAllDay,
|
||||
tags
|
||||
} = state;
|
||||
|
||||
let icalUrl = `${window.location.host}${window.Radarr.urlBase}/feed/calendar/Radarr.ics?`;
|
||||
|
||||
if (unmonitored) {
|
||||
icalUrl += 'unmonitored=true&';
|
||||
}
|
||||
|
||||
if (asAllDay) {
|
||||
icalUrl += 'asAllDay=true&';
|
||||
}
|
||||
|
||||
if (tags.length) {
|
||||
icalUrl += `tags=${tags.toString()}&`;
|
||||
}
|
||||
|
||||
icalUrl += `apikey=${window.Radarr.apiKey}`;
|
||||
|
||||
const iCalHttpUrl = `${window.location.protocol}//${icalUrl}`;
|
||||
const iCalWebCalUrl = `webcal://${icalUrl}`;
|
||||
|
||||
return {
|
||||
iCalHttpUrl,
|
||||
iCalWebCalUrl
|
||||
};
|
||||
}
|
||||
|
||||
class CalendarLinkModalContent extends Component {
|
||||
|
||||
//
|
||||
// Lifecycle
|
||||
|
||||
constructor(props, context) {
|
||||
super(props, context);
|
||||
|
||||
const defaultState = {
|
||||
unmonitored: false,
|
||||
asAllDay: false,
|
||||
tags: []
|
||||
};
|
||||
|
||||
const urls = getUrls(defaultState);
|
||||
|
||||
this.state = {
|
||||
...defaultState,
|
||||
...urls
|
||||
};
|
||||
}
|
||||
|
||||
//
|
||||
// Listeners
|
||||
|
||||
onInputChange = ({ name, value }) => {
|
||||
const state = {
|
||||
...this.state,
|
||||
[name]: value
|
||||
};
|
||||
|
||||
const urls = getUrls(state);
|
||||
|
||||
this.setState({
|
||||
[name]: value,
|
||||
...urls
|
||||
});
|
||||
}
|
||||
|
||||
onLinkFocus = (event) => {
|
||||
event.target.select();
|
||||
}
|
||||
|
||||
//
|
||||
// Render
|
||||
|
||||
render() {
|
||||
const {
|
||||
onModalClose
|
||||
} = this.props;
|
||||
|
||||
const {
|
||||
unmonitored,
|
||||
asAllDay,
|
||||
tags,
|
||||
iCalHttpUrl,
|
||||
iCalWebCalUrl
|
||||
} = this.state;
|
||||
|
||||
return (
|
||||
<ModalContent onModalClose={onModalClose}>
|
||||
<ModalHeader>
|
||||
Radarr Calendar Feed
|
||||
</ModalHeader>
|
||||
|
||||
<ModalBody>
|
||||
<Form>
|
||||
<FormGroup>
|
||||
<FormLabel>{translate('IncludeUnmonitored')}</FormLabel>
|
||||
|
||||
<FormInputGroup
|
||||
type={inputTypes.CHECK}
|
||||
name="unmonitored"
|
||||
value={unmonitored}
|
||||
helpText={translate('UnmonitoredHelpText')}
|
||||
onChange={this.onInputChange}
|
||||
/>
|
||||
</FormGroup>
|
||||
|
||||
<FormGroup>
|
||||
<FormLabel>{translate('ShowAsAllDayEvents')}</FormLabel>
|
||||
|
||||
<FormInputGroup
|
||||
type={inputTypes.CHECK}
|
||||
name="asAllDay"
|
||||
value={asAllDay}
|
||||
helpText={translate('AsAllDayHelpText')}
|
||||
onChange={this.onInputChange}
|
||||
/>
|
||||
</FormGroup>
|
||||
|
||||
<FormGroup>
|
||||
<FormLabel>{translate('Tags')}</FormLabel>
|
||||
|
||||
<FormInputGroup
|
||||
type={inputTypes.TAG}
|
||||
name="tags"
|
||||
value={tags}
|
||||
helpText={translate('TagsHelpText')}
|
||||
onChange={this.onInputChange}
|
||||
/>
|
||||
</FormGroup>
|
||||
|
||||
<FormGroup
|
||||
size={sizes.LARGE}
|
||||
>
|
||||
<FormLabel>{translate('ICalFeed')}</FormLabel>
|
||||
|
||||
<FormInputGroup
|
||||
type={inputTypes.TEXT}
|
||||
name="iCalHttpUrl"
|
||||
value={iCalHttpUrl}
|
||||
readOnly={true}
|
||||
helpText={translate('ICalHttpUrlHelpText')}
|
||||
buttons={[
|
||||
<ClipboardButton
|
||||
key="copy"
|
||||
value={iCalHttpUrl}
|
||||
kind={kinds.DEFAULT}
|
||||
/>,
|
||||
|
||||
<FormInputButton
|
||||
key="webcal"
|
||||
kind={kinds.DEFAULT}
|
||||
to={iCalWebCalUrl}
|
||||
target="_blank"
|
||||
noRouter={true}
|
||||
>
|
||||
<Icon name={icons.CALENDAR_O} />
|
||||
</FormInputButton>
|
||||
]}
|
||||
onChange={this.onInputChange}
|
||||
onFocus={this.onLinkFocus}
|
||||
/>
|
||||
</FormGroup>
|
||||
</Form>
|
||||
</ModalBody>
|
||||
|
||||
<ModalFooter>
|
||||
<Button onPress={onModalClose}>
|
||||
{translate('Close')}
|
||||
</Button>
|
||||
</ModalFooter>
|
||||
</ModalContent>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
CalendarLinkModalContent.propTypes = {
|
||||
tagList: PropTypes.arrayOf(PropTypes.object).isRequired,
|
||||
onModalClose: PropTypes.func.isRequired
|
||||
};
|
||||
|
||||
export default CalendarLinkModalContent;
|
||||
@ -1,17 +0,0 @@
|
||||
import { connect } from 'react-redux';
|
||||
import { createSelector } from 'reselect';
|
||||
import createTagsSelector from 'Store/Selectors/createTagsSelector';
|
||||
import CalendarLinkModalContent from './CalendarLinkModalContent';
|
||||
|
||||
function createMapStateToProps() {
|
||||
return createSelector(
|
||||
createTagsSelector(),
|
||||
(tagList) => {
|
||||
return {
|
||||
tagList
|
||||
};
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
export default connect(createMapStateToProps)(CalendarLinkModalContent);
|
||||
@ -1,27 +0,0 @@
|
||||
import { connect } from 'react-redux';
|
||||
import { createSelector } from 'reselect';
|
||||
import createImportListSelector from 'Store/Selectors/createImportListSelector';
|
||||
import FilterBuilderRowValue from './FilterBuilderRowValue';
|
||||
|
||||
function createMapStateToProps() {
|
||||
return createSelector(
|
||||
createImportListSelector(),
|
||||
(importLists) => {
|
||||
return {
|
||||
tagList: importLists.map((importList) => {
|
||||
const {
|
||||
id,
|
||||
name
|
||||
} = importList;
|
||||
|
||||
return {
|
||||
id,
|
||||
name
|
||||
};
|
||||
})
|
||||
};
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
export default connect(createMapStateToProps)(FilterBuilderRowValue);
|
||||
@ -1,31 +0,0 @@
|
||||
import PropTypes from 'prop-types';
|
||||
import React from 'react';
|
||||
import Modal from 'Components/Modal/Modal';
|
||||
import AddNewDiscoverMovieModalContentConnector from './AddNewDiscoverMovieModalContentConnector';
|
||||
|
||||
function AddNewDiscoverMovieModal(props) {
|
||||
const {
|
||||
isOpen,
|
||||
onModalClose,
|
||||
...otherProps
|
||||
} = props;
|
||||
|
||||
return (
|
||||
<Modal
|
||||
isOpen={isOpen}
|
||||
onModalClose={onModalClose}
|
||||
>
|
||||
<AddNewDiscoverMovieModalContentConnector
|
||||
{...otherProps}
|
||||
onModalClose={onModalClose}
|
||||
/>
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
|
||||
AddNewDiscoverMovieModal.propTypes = {
|
||||
isOpen: PropTypes.bool.isRequired,
|
||||
onModalClose: PropTypes.func.isRequired
|
||||
};
|
||||
|
||||
export default AddNewDiscoverMovieModal;
|
||||
@ -1,105 +0,0 @@
|
||||
import PropTypes from 'prop-types';
|
||||
import React, { Component } from 'react';
|
||||
import { connect } from 'react-redux';
|
||||
import { createSelector } from 'reselect';
|
||||
import AddNewMovieModalContent from 'AddMovie/AddNewMovie/AddNewMovieModalContent';
|
||||
import { addMovie, setAddMovieDefault } from 'Store/Actions/discoverMovieActions';
|
||||
import createDimensionsSelector from 'Store/Selectors/createDimensionsSelector';
|
||||
import createSystemStatusSelector from 'Store/Selectors/createSystemStatusSelector';
|
||||
import selectSettings from 'Store/Selectors/selectSettings';
|
||||
|
||||
function createMapStateToProps() {
|
||||
return createSelector(
|
||||
(state) => state.discoverMovie,
|
||||
createDimensionsSelector(),
|
||||
createSystemStatusSelector(),
|
||||
(discoverMovieState, dimensions, systemStatus) => {
|
||||
const {
|
||||
isAdding,
|
||||
addError,
|
||||
defaults
|
||||
} = discoverMovieState;
|
||||
|
||||
const {
|
||||
settings,
|
||||
validationErrors,
|
||||
validationWarnings
|
||||
} = selectSettings(defaults, {}, addError);
|
||||
|
||||
return {
|
||||
isAdding,
|
||||
addError,
|
||||
isSmallScreen: dimensions.isSmallScreen,
|
||||
validationErrors,
|
||||
validationWarnings,
|
||||
isWindows: systemStatus.isWindows,
|
||||
...settings
|
||||
};
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
const mapDispatchToProps = {
|
||||
setAddMovieDefault,
|
||||
addMovie
|
||||
};
|
||||
|
||||
class AddNewDiscoverMovieModalContentConnector extends Component {
|
||||
|
||||
//
|
||||
// Listeners
|
||||
|
||||
onInputChange = ({ name, value }) => {
|
||||
this.props.setAddMovieDefault({ [name]: value });
|
||||
}
|
||||
|
||||
onAddMoviePress = (searchForMovie) => {
|
||||
const {
|
||||
tmdbId,
|
||||
rootFolderPath,
|
||||
monitor,
|
||||
qualityProfileId,
|
||||
minimumAvailability,
|
||||
tags
|
||||
} = this.props;
|
||||
|
||||
this.props.addMovie({
|
||||
tmdbId,
|
||||
rootFolderPath: rootFolderPath.value,
|
||||
monitor: monitor.value,
|
||||
qualityProfileId: qualityProfileId.value,
|
||||
minimumAvailability: minimumAvailability.value,
|
||||
tags: tags.value,
|
||||
searchForMovie
|
||||
});
|
||||
|
||||
this.props.onModalClose(true);
|
||||
}
|
||||
|
||||
//
|
||||
// Render
|
||||
|
||||
render() {
|
||||
return (
|
||||
<AddNewMovieModalContent
|
||||
{...this.props}
|
||||
onInputChange={this.onInputChange}
|
||||
onAddMoviePress={this.onAddMoviePress}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
AddNewDiscoverMovieModalContentConnector.propTypes = {
|
||||
tmdbId: PropTypes.number.isRequired,
|
||||
rootFolderPath: PropTypes.object,
|
||||
monitor: PropTypes.object.isRequired,
|
||||
qualityProfileId: PropTypes.object,
|
||||
minimumAvailability: PropTypes.object.isRequired,
|
||||
tags: PropTypes.object.isRequired,
|
||||
onModalClose: PropTypes.func.isRequired,
|
||||
setAddMovieDefault: PropTypes.func.isRequired,
|
||||
addMovie: PropTypes.func.isRequired
|
||||
};
|
||||
|
||||
export default connect(createMapStateToProps, mapDispatchToProps)(AddNewDiscoverMovieModalContentConnector);
|
||||
@ -1,464 +0,0 @@
|
||||
import _ from 'lodash';
|
||||
import PropTypes from 'prop-types';
|
||||
import React, { Component } from 'react';
|
||||
import LoadingIndicator from 'Components/Loading/LoadingIndicator';
|
||||
import PageContent from 'Components/Page/PageContent';
|
||||
import PageContentBody from 'Components/Page/PageContentBody';
|
||||
import PageJumpBar from 'Components/Page/PageJumpBar';
|
||||
import PageToolbar from 'Components/Page/Toolbar/PageToolbar';
|
||||
import PageToolbarButton from 'Components/Page/Toolbar/PageToolbarButton';
|
||||
import PageToolbarSection from 'Components/Page/Toolbar/PageToolbarSection';
|
||||
import PageToolbarSeparator from 'Components/Page/Toolbar/PageToolbarSeparator';
|
||||
import TableOptionsModalWrapper from 'Components/Table/TableOptions/TableOptionsModalWrapper';
|
||||
import { align, icons, sortDirections } from 'Helpers/Props';
|
||||
import styles from 'Movie/Index/MovieIndex.css';
|
||||
import hasDifferentItemsOrOrder from 'Utilities/Object/hasDifferentItemsOrOrder';
|
||||
import translate from 'Utilities/String/translate';
|
||||
import getSelectedIds from 'Utilities/Table/getSelectedIds';
|
||||
import selectAll from 'Utilities/Table/selectAll';
|
||||
import toggleSelected from 'Utilities/Table/toggleSelected';
|
||||
import DiscoverMovieFooterConnector from './DiscoverMovieFooterConnector';
|
||||
import DiscoverMovieFilterMenu from './Menus/DiscoverMovieFilterMenu';
|
||||
import DiscoverMovieSortMenu from './Menus/DiscoverMovieSortMenu';
|
||||
import DiscoverMovieViewMenu from './Menus/DiscoverMovieViewMenu';
|
||||
import NoDiscoverMovie from './NoDiscoverMovie';
|
||||
import DiscoverMovieOverviewsConnector from './Overview/DiscoverMovieOverviewsConnector';
|
||||
import DiscoverMovieOverviewOptionsModal from './Overview/Options/DiscoverMovieOverviewOptionsModal';
|
||||
import DiscoverMoviePostersConnector from './Posters/DiscoverMoviePostersConnector';
|
||||
import DiscoverMoviePosterOptionsModal from './Posters/Options/DiscoverMoviePosterOptionsModal';
|
||||
import DiscoverMovieTableConnector from './Table/DiscoverMovieTableConnector';
|
||||
import DiscoverMovieTableOptionsConnector from './Table/DiscoverMovieTableOptionsConnector';
|
||||
|
||||
function getViewComponent(view) {
|
||||
if (view === 'posters') {
|
||||
return DiscoverMoviePostersConnector;
|
||||
}
|
||||
|
||||
if (view === 'overview') {
|
||||
return DiscoverMovieOverviewsConnector;
|
||||
}
|
||||
|
||||
return DiscoverMovieTableConnector;
|
||||
}
|
||||
|
||||
class DiscoverMovie extends Component {
|
||||
|
||||
//
|
||||
// Lifecycle
|
||||
|
||||
constructor(props, context) {
|
||||
super(props, context);
|
||||
|
||||
this.state = {
|
||||
scroller: null,
|
||||
jumpBarItems: { order: [] },
|
||||
jumpToCharacter: null,
|
||||
isPosterOptionsModalOpen: false,
|
||||
isOverviewOptionsModalOpen: false,
|
||||
isConfirmSearchModalOpen: false,
|
||||
searchType: null,
|
||||
allSelected: false,
|
||||
allUnselected: false,
|
||||
lastToggled: null,
|
||||
selectedState: {}
|
||||
};
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
this.setJumpBarItems();
|
||||
this.setSelectedState();
|
||||
}
|
||||
|
||||
componentDidUpdate(prevProps) {
|
||||
const {
|
||||
items,
|
||||
sortKey,
|
||||
sortDirection
|
||||
} = this.props;
|
||||
|
||||
if (sortKey !== prevProps.sortKey ||
|
||||
sortDirection !== prevProps.sortDirection ||
|
||||
hasDifferentItemsOrOrder(prevProps.items, items)
|
||||
) {
|
||||
this.setJumpBarItems();
|
||||
this.setSelectedState();
|
||||
}
|
||||
|
||||
if (this.state.jumpToCharacter != null) {
|
||||
this.setState({ jumpToCharacter: null });
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Control
|
||||
|
||||
setScrollerRef = (ref) => {
|
||||
this.setState({ scroller: ref });
|
||||
}
|
||||
|
||||
getSelectedIds = () => {
|
||||
if (this.state.allUnselected) {
|
||||
return [];
|
||||
}
|
||||
return getSelectedIds(this.state.selectedState);
|
||||
}
|
||||
|
||||
setSelectedState() {
|
||||
const {
|
||||
items
|
||||
} = this.props;
|
||||
|
||||
const {
|
||||
selectedState
|
||||
} = this.state;
|
||||
|
||||
const newSelectedState = {};
|
||||
|
||||
items.forEach((movie) => {
|
||||
const isItemSelected = selectedState[movie.tmdbId];
|
||||
|
||||
if (isItemSelected) {
|
||||
newSelectedState[movie.tmdbId] = isItemSelected;
|
||||
} else {
|
||||
newSelectedState[movie.tmdbId] = false;
|
||||
}
|
||||
});
|
||||
|
||||
const selectedCount = getSelectedIds(newSelectedState).length;
|
||||
const newStateCount = Object.keys(newSelectedState).length;
|
||||
let isAllSelected = false;
|
||||
let isAllUnselected = false;
|
||||
|
||||
if (selectedCount === 0) {
|
||||
isAllUnselected = true;
|
||||
} else if (selectedCount === newStateCount) {
|
||||
isAllSelected = true;
|
||||
}
|
||||
|
||||
this.setState({ selectedState: newSelectedState, allSelected: isAllSelected, allUnselected: isAllUnselected });
|
||||
}
|
||||
|
||||
setJumpBarItems() {
|
||||
const {
|
||||
items,
|
||||
sortKey,
|
||||
sortDirection
|
||||
} = this.props;
|
||||
|
||||
// Reset if not sorting by sortTitle
|
||||
if (sortKey !== 'sortTitle') {
|
||||
this.setState({ jumpBarItems: { order: [] } });
|
||||
return;
|
||||
}
|
||||
|
||||
const characters = _.reduce(items, (acc, item) => {
|
||||
let char = item.sortTitle.charAt(0);
|
||||
|
||||
if (!isNaN(char)) {
|
||||
char = '#';
|
||||
}
|
||||
|
||||
if (char in acc) {
|
||||
acc[char] = acc[char] + 1;
|
||||
} else {
|
||||
acc[char] = 1;
|
||||
}
|
||||
|
||||
return acc;
|
||||
}, {});
|
||||
|
||||
const order = Object.keys(characters).sort();
|
||||
|
||||
// Reverse if sorting descending
|
||||
if (sortDirection === sortDirections.DESCENDING) {
|
||||
order.reverse();
|
||||
}
|
||||
|
||||
const jumpBarItems = {
|
||||
characters,
|
||||
order
|
||||
};
|
||||
|
||||
this.setState({ jumpBarItems });
|
||||
}
|
||||
|
||||
//
|
||||
// Listeners
|
||||
|
||||
onPosterOptionsPress = () => {
|
||||
this.setState({ isPosterOptionsModalOpen: true });
|
||||
}
|
||||
|
||||
onPosterOptionsModalClose = () => {
|
||||
this.setState({ isPosterOptionsModalOpen: false });
|
||||
}
|
||||
|
||||
onOverviewOptionsPress = () => {
|
||||
this.setState({ isOverviewOptionsModalOpen: true });
|
||||
}
|
||||
|
||||
onOverviewOptionsModalClose = () => {
|
||||
this.setState({ isOverviewOptionsModalOpen: false });
|
||||
}
|
||||
|
||||
onJumpBarItemPress = (jumpToCharacter) => {
|
||||
this.setState({ jumpToCharacter });
|
||||
}
|
||||
|
||||
onSelectAllChange = ({ value }) => {
|
||||
this.setState(selectAll(this.state.selectedState, value));
|
||||
}
|
||||
|
||||
onSelectAllPress = () => {
|
||||
this.onSelectAllChange({ value: !this.state.allSelected });
|
||||
}
|
||||
|
||||
onImportListSyncPress = () => {
|
||||
this.props.onImportListSyncPress();
|
||||
}
|
||||
|
||||
onSelectedChange = ({ id, value, shiftKey = false }) => {
|
||||
this.setState((state) => {
|
||||
return toggleSelected(state, this.props.items, id, value, shiftKey, 'tmdbId');
|
||||
});
|
||||
}
|
||||
|
||||
onAddMoviesPress = ({ addOptions }) => {
|
||||
this.props.onAddMoviesPress({ ids: this.getSelectedIds(), addOptions });
|
||||
}
|
||||
|
||||
onExcludeMoviesPress = () => {
|
||||
this.props.onExcludeMoviesPress({ ids: this.getSelectedIds() });
|
||||
}
|
||||
|
||||
//
|
||||
// Render
|
||||
|
||||
render() {
|
||||
const {
|
||||
isFetching,
|
||||
isPopulated,
|
||||
error,
|
||||
totalItems,
|
||||
items,
|
||||
columns,
|
||||
selectedFilterKey,
|
||||
filters,
|
||||
customFilters,
|
||||
sortKey,
|
||||
sortDirection,
|
||||
view,
|
||||
onSortSelect,
|
||||
onFilterSelect,
|
||||
onViewSelect,
|
||||
onScroll,
|
||||
onAddMoviesPress,
|
||||
isSyncingLists,
|
||||
...otherProps
|
||||
} = this.props;
|
||||
|
||||
const {
|
||||
scroller,
|
||||
jumpBarItems,
|
||||
jumpToCharacter,
|
||||
isPosterOptionsModalOpen,
|
||||
isOverviewOptionsModalOpen,
|
||||
selectedState,
|
||||
allSelected,
|
||||
allUnselected
|
||||
} = this.state;
|
||||
|
||||
const selectedMovieIds = this.getSelectedIds();
|
||||
|
||||
const ViewComponent = getViewComponent(view);
|
||||
const isLoaded = !!(!error && isPopulated && items.length && scroller);
|
||||
const hasNoMovie = !totalItems;
|
||||
|
||||
return (
|
||||
<PageContent>
|
||||
<PageToolbar>
|
||||
<PageToolbarSection>
|
||||
<PageToolbarButton
|
||||
label='Refresh Lists'
|
||||
iconName={icons.REFRESH}
|
||||
isSpinning={isSyncingLists}
|
||||
isDisabled={hasNoMovie}
|
||||
onPress={this.onImportListSyncPress}
|
||||
/>
|
||||
<PageToolbarButton
|
||||
label={allSelected ? translate('UnselectAll') : translate('SelectAll')}
|
||||
iconName={icons.CHECK_SQUARE}
|
||||
isDisabled={hasNoMovie}
|
||||
onPress={this.onSelectAllPress}
|
||||
/>
|
||||
</PageToolbarSection>
|
||||
|
||||
<PageToolbarSection
|
||||
alignContent={align.RIGHT}
|
||||
collapseButtons={false}
|
||||
>
|
||||
{
|
||||
view === 'table' ?
|
||||
<TableOptionsModalWrapper
|
||||
{...otherProps}
|
||||
columns={columns}
|
||||
optionsComponent={DiscoverMovieTableOptionsConnector}
|
||||
>
|
||||
<PageToolbarButton
|
||||
label={translate('Options')}
|
||||
iconName={icons.TABLE}
|
||||
/>
|
||||
</TableOptionsModalWrapper> :
|
||||
null
|
||||
}
|
||||
|
||||
{
|
||||
view === 'posters' ?
|
||||
<PageToolbarButton
|
||||
label={translate('Options')}
|
||||
iconName={icons.POSTER}
|
||||
onPress={this.onPosterOptionsPress}
|
||||
/> :
|
||||
null
|
||||
}
|
||||
|
||||
{
|
||||
view === 'overview' ?
|
||||
<PageToolbarButton
|
||||
label={translate('Options')}
|
||||
iconName={icons.OVERVIEW}
|
||||
onPress={this.onOverviewOptionsPress}
|
||||
/> :
|
||||
null
|
||||
}
|
||||
|
||||
{
|
||||
(view === 'posters' || view === 'overview') &&
|
||||
<PageToolbarSeparator />
|
||||
}
|
||||
|
||||
<DiscoverMovieViewMenu
|
||||
view={view}
|
||||
isDisabled={hasNoMovie}
|
||||
onViewSelect={onViewSelect}
|
||||
/>
|
||||
|
||||
<DiscoverMovieSortMenu
|
||||
sortKey={sortKey}
|
||||
sortDirection={sortDirection}
|
||||
isDisabled={hasNoMovie}
|
||||
onSortSelect={onSortSelect}
|
||||
/>
|
||||
|
||||
<DiscoverMovieFilterMenu
|
||||
selectedFilterKey={selectedFilterKey}
|
||||
filters={filters}
|
||||
customFilters={customFilters}
|
||||
isDisabled={hasNoMovie}
|
||||
onFilterSelect={onFilterSelect}
|
||||
/>
|
||||
</PageToolbarSection>
|
||||
</PageToolbar>
|
||||
|
||||
<div className={styles.pageContentBodyWrapper}>
|
||||
<PageContentBody
|
||||
registerScroller={this.setScrollerRef}
|
||||
className={styles.contentBody}
|
||||
innerClassName={styles[`${view}InnerContentBody`]}
|
||||
onScroll={onScroll}
|
||||
>
|
||||
{
|
||||
isFetching && !isPopulated &&
|
||||
<LoadingIndicator />
|
||||
}
|
||||
|
||||
{
|
||||
!isFetching && !!error &&
|
||||
<div>
|
||||
{translate('UnableToLoadMovies')}
|
||||
</div>
|
||||
}
|
||||
|
||||
{
|
||||
isLoaded &&
|
||||
<div className={styles.contentBodyContainer}>
|
||||
<ViewComponent
|
||||
scroller={scroller}
|
||||
items={items}
|
||||
filters={filters}
|
||||
sortKey={sortKey}
|
||||
sortDirection={sortDirection}
|
||||
jumpToCharacter={jumpToCharacter}
|
||||
allSelected={allSelected}
|
||||
allUnselected={allUnselected}
|
||||
onSelectedChange={this.onSelectedChange}
|
||||
onSelectAllChange={this.onSelectAllChange}
|
||||
selectedState={selectedState}
|
||||
{...otherProps}
|
||||
/>
|
||||
</div>
|
||||
}
|
||||
|
||||
{
|
||||
!error && isPopulated && !items.length &&
|
||||
<NoDiscoverMovie totalItems={totalItems} />
|
||||
}
|
||||
</PageContentBody>
|
||||
|
||||
{
|
||||
isLoaded && !!jumpBarItems.order.length &&
|
||||
<PageJumpBar
|
||||
items={jumpBarItems}
|
||||
onItemPress={this.onJumpBarItemPress}
|
||||
/>
|
||||
}
|
||||
</div>
|
||||
|
||||
{
|
||||
isLoaded &&
|
||||
<DiscoverMovieFooterConnector
|
||||
selectedIds={selectedMovieIds}
|
||||
onAddMoviesPress={this.onAddMoviesPress}
|
||||
onExcludeMoviesPress={this.onExcludeMoviesPress}
|
||||
/>
|
||||
}
|
||||
|
||||
<DiscoverMoviePosterOptionsModal
|
||||
isOpen={isPosterOptionsModalOpen}
|
||||
onModalClose={this.onPosterOptionsModalClose}
|
||||
/>
|
||||
|
||||
<DiscoverMovieOverviewOptionsModal
|
||||
isOpen={isOverviewOptionsModalOpen}
|
||||
onModalClose={this.onOverviewOptionsModalClose}
|
||||
/>
|
||||
</PageContent>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
DiscoverMovie.propTypes = {
|
||||
isFetching: PropTypes.bool.isRequired,
|
||||
isPopulated: PropTypes.bool.isRequired,
|
||||
error: PropTypes.object,
|
||||
totalItems: PropTypes.number.isRequired,
|
||||
items: PropTypes.arrayOf(PropTypes.object).isRequired,
|
||||
columns: 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.oneOf(sortDirections.all),
|
||||
view: PropTypes.string.isRequired,
|
||||
isSyncingLists: PropTypes.bool.isRequired,
|
||||
isSmallScreen: PropTypes.bool.isRequired,
|
||||
onSortSelect: PropTypes.func.isRequired,
|
||||
onFilterSelect: PropTypes.func.isRequired,
|
||||
onViewSelect: PropTypes.func.isRequired,
|
||||
onScroll: PropTypes.func.isRequired,
|
||||
onAddMoviesPress: PropTypes.func.isRequired,
|
||||
onExcludeMoviesPress: PropTypes.func.isRequired,
|
||||
onImportListSyncPress: PropTypes.func.isRequired
|
||||
};
|
||||
|
||||
export default DiscoverMovie;
|
||||
@ -1,155 +0,0 @@
|
||||
import PropTypes from 'prop-types';
|
||||
import React, { Component } from 'react';
|
||||
import { connect } from 'react-redux';
|
||||
import { createSelector } from 'reselect';
|
||||
import * as commandNames from 'Commands/commandNames';
|
||||
import withScrollPosition from 'Components/withScrollPosition';
|
||||
import { executeCommand } from 'Store/Actions/commandActions';
|
||||
import { addImportExclusions, addMovies, clearAddMovie, fetchDiscoverMovies, setListMovieFilter, setListMovieSort, setListMovieTableOption, setListMovieView } from 'Store/Actions/discoverMovieActions';
|
||||
import { fetchRootFolders } from 'Store/Actions/rootFolderActions';
|
||||
import { fetchImportExclusions } from 'Store/Actions/Settings/importExclusions';
|
||||
import scrollPositions from 'Store/scrollPositions';
|
||||
import createCommandExecutingSelector from 'Store/Selectors/createCommandExecutingSelector';
|
||||
import createDimensionsSelector from 'Store/Selectors/createDimensionsSelector';
|
||||
import createDiscoverMovieClientSideCollectionItemsSelector from 'Store/Selectors/createDiscoverMovieClientSideCollectionItemsSelector';
|
||||
import { registerPagePopulator, unregisterPagePopulator } from 'Utilities/pagePopulator';
|
||||
import DiscoverMovie from './DiscoverMovie';
|
||||
|
||||
function createMapStateToProps() {
|
||||
return createSelector(
|
||||
createDiscoverMovieClientSideCollectionItemsSelector('discoverMovie'),
|
||||
createCommandExecutingSelector(commandNames.IMPORT_LIST_SYNC),
|
||||
createDimensionsSelector(),
|
||||
(
|
||||
movies,
|
||||
isSyncingLists,
|
||||
dimensionsState
|
||||
) => {
|
||||
return {
|
||||
...movies,
|
||||
isSyncingLists,
|
||||
isSmallScreen: dimensionsState.isSmallScreen
|
||||
};
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
function createMapDispatchToProps(dispatch, props) {
|
||||
return {
|
||||
dispatchFetchRootFolders() {
|
||||
dispatch(fetchRootFolders());
|
||||
},
|
||||
|
||||
dispatchFetchImportExclusions() {
|
||||
dispatch(fetchImportExclusions());
|
||||
},
|
||||
|
||||
dispatchClearListMovie() {
|
||||
dispatch(clearAddMovie());
|
||||
},
|
||||
|
||||
dispatchFetchListMovies() {
|
||||
dispatch(fetchDiscoverMovies());
|
||||
},
|
||||
|
||||
onTableOptionChange(payload) {
|
||||
dispatch(setListMovieTableOption(payload));
|
||||
},
|
||||
|
||||
onSortSelect(sortKey) {
|
||||
dispatch(setListMovieSort({ sortKey }));
|
||||
},
|
||||
|
||||
onFilterSelect(selectedFilterKey) {
|
||||
dispatch(setListMovieFilter({ selectedFilterKey }));
|
||||
},
|
||||
|
||||
dispatchSetListMovieView(view) {
|
||||
dispatch(setListMovieView({ view }));
|
||||
},
|
||||
|
||||
dispatchAddMovies(ids, addOptions) {
|
||||
dispatch(addMovies({ ids, addOptions }));
|
||||
},
|
||||
|
||||
dispatchAddImportExclusions(exclusions) {
|
||||
dispatch(addImportExclusions(exclusions));
|
||||
},
|
||||
|
||||
onImportListSyncPress() {
|
||||
dispatch(executeCommand({
|
||||
name: commandNames.IMPORT_LIST_SYNC
|
||||
}));
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
class DiscoverMovieConnector extends Component {
|
||||
|
||||
//
|
||||
// Lifecycle
|
||||
|
||||
componentDidMount() {
|
||||
registerPagePopulator(this.repopulate);
|
||||
this.props.dispatchFetchRootFolders();
|
||||
this.props.dispatchFetchImportExclusions();
|
||||
this.props.dispatchFetchListMovies();
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
this.props.dispatchClearListMovie();
|
||||
unregisterPagePopulator(this.repopulate);
|
||||
}
|
||||
|
||||
//
|
||||
// Listeners
|
||||
|
||||
onViewSelect = (view) => {
|
||||
this.props.dispatchSetListMovieView(view);
|
||||
}
|
||||
|
||||
onScroll = ({ scrollTop }) => {
|
||||
scrollPositions.discoverMovie = scrollTop;
|
||||
}
|
||||
|
||||
onAddMoviesPress = ({ ids, addOptions }) => {
|
||||
this.props.dispatchAddMovies(ids, addOptions);
|
||||
}
|
||||
|
||||
onExcludeMoviesPress =({ ids }) => {
|
||||
this.props.dispatchAddImportExclusions({ ids });
|
||||
}
|
||||
|
||||
//
|
||||
// Render
|
||||
|
||||
render() {
|
||||
return (
|
||||
<DiscoverMovie
|
||||
{...this.props}
|
||||
onViewSelect={this.onViewSelect}
|
||||
onScroll={this.onScroll}
|
||||
onAddMoviesPress={this.onAddMoviesPress}
|
||||
onExcludeMoviesPress={this.onExcludeMoviesPress}
|
||||
onSyncListsPress={this.onSyncListsPress}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
DiscoverMovieConnector.propTypes = {
|
||||
isSmallScreen: PropTypes.bool.isRequired,
|
||||
view: PropTypes.string.isRequired,
|
||||
dispatchFetchImportExclusions: PropTypes.func.isRequired,
|
||||
dispatchFetchRootFolders: PropTypes.func.isRequired,
|
||||
dispatchFetchListMovies: PropTypes.func.isRequired,
|
||||
dispatchClearListMovie: PropTypes.func.isRequired,
|
||||
dispatchSetListMovieView: PropTypes.func.isRequired,
|
||||
dispatchAddMovies: PropTypes.func.isRequired,
|
||||
dispatchAddImportExclusions: PropTypes.func.isRequired
|
||||
};
|
||||
|
||||
export default withScrollPosition(
|
||||
connect(createMapStateToProps, createMapDispatchToProps)(DiscoverMovieConnector),
|
||||
'discoverMovie'
|
||||
);
|
||||
@ -1,24 +0,0 @@
|
||||
import { connect } from 'react-redux';
|
||||
import { createSelector } from 'reselect';
|
||||
import FilterModal from 'Components/Filter/FilterModal';
|
||||
import { setListMovieFilter } from 'Store/Actions/discoverMovieActions';
|
||||
|
||||
function createMapStateToProps() {
|
||||
return createSelector(
|
||||
(state) => state.discoverMovie.items,
|
||||
(state) => state.discoverMovie.filterBuilderProps,
|
||||
(sectionItems, filterBuilderProps) => {
|
||||
return {
|
||||
sectionItems,
|
||||
filterBuilderProps,
|
||||
customFilterType: 'discoverMovie'
|
||||
};
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
const mapDispatchToProps = {
|
||||
dispatchSetFilter: setListMovieFilter
|
||||
};
|
||||
|
||||
export default connect(createMapStateToProps, mapDispatchToProps)(FilterModal);
|
||||
@ -1,56 +0,0 @@
|
||||
.inputContainer {
|
||||
margin-right: 20px;
|
||||
min-width: 150px;
|
||||
}
|
||||
|
||||
.buttonContainer {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.buttonContainerContent {
|
||||
flex-grow: 0;
|
||||
}
|
||||
|
||||
.buttons {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.addSelectedButton {
|
||||
composes: button from '~Components/Link/SpinnerButton.css';
|
||||
|
||||
margin-right: 10px;
|
||||
height: 35px;
|
||||
}
|
||||
|
||||
.excludeSelectedButton {
|
||||
composes: button from '~Components/Link/SpinnerButton.css';
|
||||
|
||||
margin-left: 25px;
|
||||
height: 35px;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: $breakpointSmall) {
|
||||
.inputContainer {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.buttonContainer {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.buttonContainerContent {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.buttons {
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.selectedMovieLabel {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
@ -1,277 +0,0 @@
|
||||
import _ from 'lodash';
|
||||
import PropTypes from 'prop-types';
|
||||
import React, { Component } from 'react';
|
||||
import AvailabilitySelectInput from 'Components/Form/AvailabilitySelectInput';
|
||||
import CheckInput from 'Components/Form/CheckInput';
|
||||
import QualityProfileSelectInputConnector from 'Components/Form/QualityProfileSelectInputConnector';
|
||||
import RootFolderSelectInputConnector from 'Components/Form/RootFolderSelectInputConnector';
|
||||
import SelectInput from 'Components/Form/SelectInput';
|
||||
import SpinnerButton from 'Components/Link/SpinnerButton';
|
||||
import PageContentFooter from 'Components/Page/PageContentFooter';
|
||||
import { kinds } from 'Helpers/Props';
|
||||
import translate from 'Utilities/String/translate';
|
||||
import DiscoverMovieFooterLabel from './DiscoverMovieFooterLabel';
|
||||
import ExcludeMovieModal from './Exclusion/ExcludeMovieModal';
|
||||
import styles from './DiscoverMovieFooter.css';
|
||||
|
||||
class DiscoverMovieFooter extends Component {
|
||||
|
||||
//
|
||||
// Lifecycle
|
||||
|
||||
constructor(props, context) {
|
||||
super(props, context);
|
||||
|
||||
const {
|
||||
defaultMonitor,
|
||||
defaultQualityProfileId,
|
||||
defaultMinimumAvailability,
|
||||
defaultRootFolderPath,
|
||||
defaultSearchForMovie
|
||||
} = props;
|
||||
|
||||
this.state = {
|
||||
monitor: defaultMonitor,
|
||||
qualityProfileId: defaultQualityProfileId,
|
||||
minimumAvailability: defaultMinimumAvailability,
|
||||
rootFolderPath: defaultRootFolderPath,
|
||||
searchForMovie: defaultSearchForMovie,
|
||||
isExcludeMovieModalOpen: false,
|
||||
destinationRootFolder: null
|
||||
};
|
||||
}
|
||||
|
||||
componentDidUpdate(prevProps) {
|
||||
const {
|
||||
defaultMonitor,
|
||||
defaultQualityProfileId,
|
||||
defaultMinimumAvailability,
|
||||
defaultRootFolderPath,
|
||||
defaultSearchForMovie
|
||||
} = this.props;
|
||||
|
||||
const {
|
||||
monitor,
|
||||
qualityProfileId,
|
||||
minimumAvailability,
|
||||
rootFolderPath,
|
||||
searchForMovie
|
||||
} = this.state;
|
||||
|
||||
const newState = {};
|
||||
|
||||
if (monitor !== defaultMonitor) {
|
||||
newState.monitor = defaultMonitor;
|
||||
}
|
||||
|
||||
if (qualityProfileId !== defaultQualityProfileId) {
|
||||
newState.qualityProfileId = defaultQualityProfileId;
|
||||
}
|
||||
|
||||
if (minimumAvailability !== defaultMinimumAvailability) {
|
||||
newState.minimumAvailability = defaultMinimumAvailability;
|
||||
}
|
||||
|
||||
if (rootFolderPath !== defaultRootFolderPath) {
|
||||
newState.rootFolderPath = defaultRootFolderPath;
|
||||
}
|
||||
|
||||
if (searchForMovie !== defaultSearchForMovie) {
|
||||
newState.searchForMovie = defaultSearchForMovie;
|
||||
}
|
||||
|
||||
if (!_.isEmpty(newState)) {
|
||||
this.setState(newState);
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Listeners
|
||||
|
||||
onExcludeSelectedPress = () => {
|
||||
this.setState({ isExcludeMovieModalOpen: true });
|
||||
}
|
||||
|
||||
onExcludeMovieModalClose = () => {
|
||||
this.setState({ isExcludeMovieModalOpen: false });
|
||||
}
|
||||
|
||||
onAddMoviesPress = () => {
|
||||
const {
|
||||
monitor,
|
||||
qualityProfileId,
|
||||
minimumAvailability,
|
||||
rootFolderPath,
|
||||
searchForMovie
|
||||
} = this.state;
|
||||
|
||||
const addOptions = {
|
||||
monitor,
|
||||
qualityProfileId,
|
||||
minimumAvailability,
|
||||
rootFolderPath,
|
||||
searchForMovie
|
||||
};
|
||||
|
||||
this.props.onAddMoviesPress({ addOptions });
|
||||
}
|
||||
|
||||
//
|
||||
// Render
|
||||
|
||||
render() {
|
||||
const {
|
||||
selectedIds,
|
||||
selectedCount,
|
||||
isAdding,
|
||||
isExcluding,
|
||||
onInputChange
|
||||
} = this.props;
|
||||
|
||||
const {
|
||||
monitor,
|
||||
qualityProfileId,
|
||||
minimumAvailability,
|
||||
rootFolderPath,
|
||||
searchForMovie,
|
||||
isExcludeMovieModalOpen
|
||||
} = this.state;
|
||||
|
||||
const monitoredOptions = [
|
||||
{ key: true, value: 'Monitored' },
|
||||
{ key: false, value: 'Unmonitored' }
|
||||
];
|
||||
|
||||
return (
|
||||
<PageContentFooter>
|
||||
<div className={styles.inputContainer}>
|
||||
<DiscoverMovieFooterLabel
|
||||
label={translate('MonitorMovie')}
|
||||
isSaving={isAdding}
|
||||
/>
|
||||
|
||||
<SelectInput
|
||||
name="monitor"
|
||||
value={monitor}
|
||||
values={monitoredOptions}
|
||||
isDisabled={!selectedCount}
|
||||
onChange={onInputChange}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className={styles.inputContainer}>
|
||||
<DiscoverMovieFooterLabel
|
||||
label={translate('QualityProfile')}
|
||||
isSaving={isAdding}
|
||||
/>
|
||||
|
||||
<QualityProfileSelectInputConnector
|
||||
name="qualityProfileId"
|
||||
value={qualityProfileId}
|
||||
isDisabled={!selectedCount}
|
||||
onChange={onInputChange}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className={styles.inputContainer}>
|
||||
<DiscoverMovieFooterLabel
|
||||
label={translate('MinimumAvailability')}
|
||||
isSaving={isAdding}
|
||||
/>
|
||||
|
||||
<AvailabilitySelectInput
|
||||
name="minimumAvailability"
|
||||
value={minimumAvailability}
|
||||
isDisabled={!selectedCount}
|
||||
onChange={onInputChange}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className={styles.inputContainer}>
|
||||
<DiscoverMovieFooterLabel
|
||||
label={translate('RootFolder')}
|
||||
isSaving={isAdding}
|
||||
/>
|
||||
|
||||
<RootFolderSelectInputConnector
|
||||
name="rootFolderPath"
|
||||
value={rootFolderPath}
|
||||
isDisabled={!selectedCount}
|
||||
selectedValueOptions={{ includeFreeSpace: false }}
|
||||
onChange={onInputChange}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className={styles.inputContainer}>
|
||||
<DiscoverMovieFooterLabel
|
||||
label={translate('SearchOnAdd')}
|
||||
isSaving={isAdding}
|
||||
/>
|
||||
|
||||
<CheckInput
|
||||
name="searchForMovie"
|
||||
isDisabled={!selectedCount}
|
||||
value={searchForMovie}
|
||||
onChange={onInputChange}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className={styles.buttonContainer}>
|
||||
<div className={styles.buttonContainerContent}>
|
||||
<DiscoverMovieFooterLabel
|
||||
label={translate('MoviesSelectedInterp', [selectedCount])}
|
||||
isSaving={false}
|
||||
/>
|
||||
|
||||
<div className={styles.buttons}>
|
||||
<div>
|
||||
<SpinnerButton
|
||||
className={styles.addSelectedButton}
|
||||
kind={kinds.PRIMARY}
|
||||
isSpinning={isAdding}
|
||||
isDisabled={!selectedCount || isAdding}
|
||||
onPress={this.onAddMoviesPress}
|
||||
>
|
||||
{translate('AddMovies')}
|
||||
</SpinnerButton>
|
||||
|
||||
<SpinnerButton
|
||||
className={styles.excludeSelectedButton}
|
||||
kind={kinds.DANGER}
|
||||
isSpinning={isExcluding}
|
||||
isDisabled={!selectedCount || isExcluding}
|
||||
onPress={this.props.onExcludeMoviesPress}
|
||||
>
|
||||
{translate('AddExclusion')}
|
||||
</SpinnerButton>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ExcludeMovieModal
|
||||
isOpen={isExcludeMovieModalOpen}
|
||||
movieIds={selectedIds}
|
||||
onModalClose={this.onExcludeMovieModalClose}
|
||||
/>
|
||||
</PageContentFooter>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
DiscoverMovieFooter.propTypes = {
|
||||
selectedIds: PropTypes.arrayOf(PropTypes.number).isRequired,
|
||||
selectedCount: PropTypes.number.isRequired,
|
||||
isAdding: PropTypes.bool.isRequired,
|
||||
isExcluding: PropTypes.bool.isRequired,
|
||||
defaultMonitor: PropTypes.string.isRequired,
|
||||
defaultQualityProfileId: PropTypes.number,
|
||||
defaultMinimumAvailability: PropTypes.string,
|
||||
defaultRootFolderPath: PropTypes.string,
|
||||
defaultSearchForMovie: PropTypes.bool,
|
||||
onInputChange: PropTypes.func.isRequired,
|
||||
onAddMoviesPress: PropTypes.func.isRequired,
|
||||
onExcludeMoviesPress: PropTypes.func.isRequired
|
||||
};
|
||||
|
||||
export default DiscoverMovieFooter;
|
||||
@ -1,74 +0,0 @@
|
||||
import PropTypes from 'prop-types';
|
||||
import React, { Component } from 'react';
|
||||
import { connect } from 'react-redux';
|
||||
import { createSelector } from 'reselect';
|
||||
import { setAddMovieDefault } from 'Store/Actions/discoverMovieActions';
|
||||
import DiscoverMovieFooter from './DiscoverMovieFooter';
|
||||
|
||||
function createMapStateToProps() {
|
||||
return createSelector(
|
||||
(state) => state.discoverMovie,
|
||||
(state) => state.settings.importExclusions,
|
||||
(state, { selectedIds }) => selectedIds,
|
||||
(discoverMovie, importExclusions, selectedIds) => {
|
||||
const {
|
||||
monitor: defaultMonitor,
|
||||
qualityProfileId: defaultQualityProfileId,
|
||||
minimumAvailability: defaultMinimumAvailability,
|
||||
rootFolderPath: defaultRootFolderPath,
|
||||
searchForMovie: defaultSearchForMovie
|
||||
} = discoverMovie.defaults;
|
||||
|
||||
const {
|
||||
isAdding
|
||||
} = discoverMovie;
|
||||
|
||||
const {
|
||||
isSaving
|
||||
} = importExclusions;
|
||||
|
||||
return {
|
||||
selectedCount: selectedIds.length,
|
||||
isAdding,
|
||||
isExcluding: isSaving,
|
||||
defaultMonitor,
|
||||
defaultQualityProfileId,
|
||||
defaultMinimumAvailability,
|
||||
defaultRootFolderPath,
|
||||
defaultSearchForMovie
|
||||
};
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
const mapDispatchToProps = {
|
||||
setAddMovieDefault
|
||||
};
|
||||
|
||||
class DiscoverMovieFooterConnector extends Component {
|
||||
|
||||
//
|
||||
// Listeners
|
||||
|
||||
onInputChange = ({ name, value }) => {
|
||||
this.props.setAddMovieDefault({ [name]: value });
|
||||
}
|
||||
|
||||
//
|
||||
// Render
|
||||
|
||||
render() {
|
||||
return (
|
||||
<DiscoverMovieFooter
|
||||
{...this.props}
|
||||
onInputChange={this.onInputChange}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
DiscoverMovieFooterConnector.propTypes = {
|
||||
setAddMovieDefault: PropTypes.func.isRequired
|
||||
};
|
||||
|
||||
export default connect(createMapStateToProps, mapDispatchToProps)(DiscoverMovieFooterConnector);
|
||||
@ -1,8 +0,0 @@
|
||||
.label {
|
||||
margin-bottom: 3px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.savingIcon {
|
||||
margin-left: 8px;
|
||||
}
|
||||
@ -1,40 +0,0 @@
|
||||
import PropTypes from 'prop-types';
|
||||
import React from 'react';
|
||||
import SpinnerIcon from 'Components/SpinnerIcon';
|
||||
import { icons } from 'Helpers/Props';
|
||||
import styles from './DiscoverMovieFooterLabel.css';
|
||||
|
||||
function DiscoverMovieFooterLabel(props) {
|
||||
const {
|
||||
className,
|
||||
label,
|
||||
isSaving
|
||||
} = props;
|
||||
|
||||
return (
|
||||
<div className={className}>
|
||||
{label}
|
||||
|
||||
{
|
||||
isSaving &&
|
||||
<SpinnerIcon
|
||||
className={styles.savingIcon}
|
||||
name={icons.SPINNER}
|
||||
isSpinning={true}
|
||||
/>
|
||||
}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
DiscoverMovieFooterLabel.propTypes = {
|
||||
className: PropTypes.string.isRequired,
|
||||
label: PropTypes.string.isRequired,
|
||||
isSaving: PropTypes.bool.isRequired
|
||||
};
|
||||
|
||||
DiscoverMovieFooterLabel.defaultProps = {
|
||||
className: styles.label
|
||||
};
|
||||
|
||||
export default DiscoverMovieFooterLabel;
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in new issue