Sonarr
+
+[](https://translate.servarr.com/engage/servarr/)
+[](#backers)
+[](#sponsors)
+[](#mega-sponsors)
Sonarr is a PVR for Usenet and BitTorrent users. It can monitor multiple RSS feeds for new episodes of your favorite shows and will grab, sort and rename them. It can also be configured to automatically upgrade the quality of files already downloaded when a better quality format becomes available.
-## Major Features Include:
+## Getting Started
-* Support for major platforms: Windows, Linux, macOS, Raspberry Pi, etc.
-* Automatically detects new episodes
-* Can scan your existing library and download any missing episodes
-* Can watch for better quality of the episodes you already 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
-* Fully configurable episode renaming
-* Full integration with SABnzbd and NZBGet
-* Full integration with Kodi, Plex (notification, library update, metadata)
-* Full support for specials and multi-episode releases
-* And a beautiful UI
+- [Download/Installation](https://sonarr.tv/#downloads-v3)
+- [FAQ](https://wiki.servarr.com/sonarr/faq)
+- [Wiki](https://wiki.servarr.com/Sonarr)
+- [v4 Beta API Documentation](https://sonarr.tv/docs/api)
+- [Donate](https://sonarr.tv/donate)
-## Configuring Development Environment:
+## Support
-### Requirements
+Note: GitHub Issues are for Bugs and Feature Requests Only
-* Visual Studio 2015 (https://www.visualstudio.com/vs/)
-* [Git](https://git-scm.com/downloads)
-* [NodeJS](https://nodejs.org/en/download/)
+- [Forums](https://forums.sonarr.tv/)
+- [Discord](https://discord.gg/M6BvZn5)
+- [GitHub - Bugs and Feature Requests Only](https://github.com/Sonarr/Sonarr/issues)
+- [IRC](https://web.libera.chat/?channels=#sonarr)
+- [Reddit](https://www.reddit.com/r/sonarr)
+- [Wiki](https://wiki.servarr.com/sonarr)
-### Setup
+## Features
-* Make sure all the required software mentioned above are installed.
-* Clone the repository into your development machine. [*info*](https://help.github.com/articles/working-with-repositories)
-* Grab the submodules `git submodule init && git submodule update`
-* Install the required Node Packages `npm install`
-* Start gulp to monitor your dev environment for any changes that need post processing using `npm start` command.
+### Current Features
-*Please note gulp must be running at all times while you are working with Sonarr client source files.*
+- Support for major platforms: Windows, Linux, macOS, Raspberry Pi, etc.
+- Automatically detects new episodes
+- Can scan your existing library and download any missing episodes
+- Can watch for better quality of the episodes you already 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
+- Fully configurable episode renaming
+- Full integration with SABnzbd and NZBGet
+- Full integration with Kodi, Plex (notification, library update, metadata)
+- Full support for specials and multi-episode releases
+- And a beautiful UI
+
+## Contributing
### Development
-* Open `NzbDrone.sln` in Visual Studio
-* Make sure `NzbDrone.Console` is set as the startup project
+This project exists thanks to all the people who contribute. [Contribute](CONTRIBUTING.md).
-### License
+
-* [GNU GPL v3](http://www.gnu.org/licenses/gpl.html)
-* Copyright 2010-2017
+### Supporters
-### Sponsors
+This project would not be possible without the support of our users and software providers.
+[**Become a sponsor or backer**](https://opencollective.com/sonarr) to help us out!
-* [JetBrains](http://www.jetbrains.com/) for providing us with free licenses to their great tools
- * [ReSharper](http://www.jetbrains.com/resharper/)
- * [WebStorm](http://www.jetbrains.com/webstorm/)
- * [TeamCity](http://www.jetbrains.com/teamcity/)
+#### Mega Sponsors
+
+[](https://opencollective.com/sonarr/contribute/mega-sponsor-21443/checkout)
+
+#### Sponsors
+
+[](https://opencollective.com/sonarr/contribute/sponsor-21457/checkout)
+
+#### Backers
+
+[](https://opencollective.com/sonarr/contribute/backer-21442/checkout)
+
+#### JetBrains
+
+Thank you to [
](http://www.jetbrains.com/) for providing us with free licenses to their great tools
+
+[
](http://www.jetbrains.com/teamcity/)
+
+[
](http://www.jetbrains.com/resharper/)
+
+[
](http://www.jetbrains.com/dottrace/)
+
+[
](http://www.jetbrains.com/rider/)
+
+### Licenses
+
+- [GNU GPL v3](http://www.gnu.org/licenses/gpl.html)
+- Copyright 2010-2024
diff --git a/SECURITY.md b/SECURITY.md
new file mode 100644
index 000000000..a534ff2fb
--- /dev/null
+++ b/SECURITY.md
@@ -0,0 +1,9 @@
+# Security Policy
+
+## Reporting a Vulnerability
+
+Please report (suspected) security vulnerabilities on Discord (preferred) to
+either markus101
+#2148 or Taloth#7357 or via email: security@sonarr.tv. You will receive a response from
+us within 72 hours. If the issue is confirmed, we will release a patch as soon
+as possible depending on complexity/severity.
diff --git a/build.ps1 b/build.ps1
deleted file mode 100644
index 45b8ce783..000000000
--- a/build.ps1
+++ /dev/null
@@ -1 +0,0 @@
-Write-Warning "DEPRECATED -- Please use build.sh instead."
\ No newline at end of file
diff --git a/build.sh b/build.sh
index e45c949e9..ee59d2f61 100755
--- a/build.sh
+++ b/build.sh
@@ -1,265 +1,455 @@
-#! /bin/bash
-msBuild='/c/Program Files (x86)/MSBuild/14.0/Bin'
-outputFolder='./_output'
-outputFolderMono='./_output_mono'
-outputFolderOsx='./_output_osx'
-outputFolderOsxApp='./_output_osx_app'
-testPackageFolder='./_tests/'
-testSearchPattern='*.Test/bin/x86/Release'
-sourceFolder='./src'
-slnFile=$sourceFolder/NzbDrone.sln
-updateFolder=$outputFolder/NzbDrone.Update
-updateFolderMono=$outputFolderMono/NzbDrone.Update
+#! /usr/bin/env bash
+set -e
-nuget='tools/nuget/nuget.exe';
-CheckExitCode()
+outputFolder='_output'
+testPackageFolder='_tests'
+artifactsFolder="_artifacts";
+framework="${FRAMEWORK:=net6.0}"
+
+ProgressStart()
{
- "$@"
- local status=$?
- if [ $status -ne 0 ]; then
- echo "error with $1" >&2
- exit 1
+ echo "::group::$1"
+ echo "Start '$1'"
+}
+
+ProgressEnd()
+{
+ echo "Finish '$1'"
+ echo "::endgroup::"
+}
+
+UpdateVersionNumber()
+{
+ if [ "$SONARR_VERSION" != "" ]; then
+ echo "Updating version info to: $SONARR_VERSION"
+ sed -i'' -e "s/
+
+
+
+ ) : null}
+
+
+
+
+
+ ) : null}
+
+
+
+
+
+ ) : null}
+
+ {statusMessages.map(({ title, messages }) => {
+ return (
+
+ );
+}
+
+interface QueueStatusProps {
+ sourceTitle: string;
+ status: string;
+ trackedDownloadStatus?: QueueTrackedDownloadStatus;
+ trackedDownloadState?: QueueTrackedDownloadState;
+ statusMessages?: StatusMessage[];
+ errorMessage?: string;
+ position: TooltipPosition;
+ canFlip?: boolean;
+}
+
+function QueueStatus(props: QueueStatusProps) {
+ const {
+ sourceTitle,
+ status,
+ trackedDownloadStatus = 'ok',
+ trackedDownloadState = 'downloading',
+ statusMessages = [],
+ errorMessage,
+ position,
+ canFlip = false,
+ } = props;
+
+ const hasWarning = trackedDownloadStatus === 'warning';
+ const hasError = trackedDownloadStatus === 'error';
+
+ // status === 'downloading'
+ let iconName = icons.DOWNLOADING;
+ let iconKind: IconProps['kind'] = kinds.DEFAULT;
+ let title = translate('Downloading');
+
+ if (status === 'paused') {
+ iconName = icons.PAUSED;
+ title = translate('Paused');
+ }
+
+ if (status === 'queued') {
+ iconName = icons.QUEUED;
+ title = translate('Queued');
+ }
+
+ if (status === 'completed') {
+ iconName = icons.DOWNLOADED;
+ title = translate('Downloaded');
+
+ if (trackedDownloadState === 'importBlocked') {
+ title += ` - ${translate('UnableToImportAutomatically')}`;
+ iconKind = kinds.WARNING;
+ }
+
+ if (trackedDownloadState === 'importPending') {
+ title += ` - ${translate('WaitingToImport')}`;
+ iconKind = kinds.PURPLE;
+ }
+
+ if (trackedDownloadState === 'importing') {
+ title += ` - ${translate('Importing')}`;
+ iconKind = kinds.PURPLE;
+ }
+
+ if (trackedDownloadState === 'failedPending') {
+ title += ` - ${translate('WaitingToProcess')}`;
+ iconKind = kinds.DANGER;
+ }
+ }
+
+ if (hasWarning) {
+ iconKind = kinds.WARNING;
+ }
+
+ if (status === 'delay') {
+ iconName = icons.PENDING;
+ title = translate('Pending');
+ }
+
+ if (status === 'downloadClientUnavailable') {
+ iconName = icons.PENDING;
+ iconKind = kinds.WARNING;
+ title = translate('PendingDownloadClientUnavailable');
+ }
+
+ if (status === 'failed') {
+ iconName = icons.DOWNLOADING;
+ iconKind = kinds.DANGER;
+ title = translate('DownloadFailed');
+ }
+
+ if (status === 'warning') {
+ iconName = icons.DOWNLOADING;
+ iconKind = kinds.WARNING;
+ const warningMessage =
+ errorMessage || translate('CheckDownloadClientForDetails');
+ title = translate('DownloadWarning', { warningMessage });
+ }
+
+ if (hasError) {
+ if (status === 'completed') {
+ iconName = icons.DOWNLOAD;
+ iconKind = kinds.DANGER;
+ title = translate('ImportFailed', { sourceTitle });
+ } else {
+ iconName = icons.DOWNLOADING;
+ iconKind = kinds.DANGER;
+ title = translate('DownloadFailed');
+ }
+ }
+
+ return (
+
+ {title}
+
+ );
+ })}
+ -
+ {messages.map((message) => {
+ return
- {message} ; + })} +
{message}
+
+ {isPending ? null : (
+
+
+
+ {
+ isFetching &&
+
+
+
+
+ {getErrorMessage(error)}
+
: null
+ }
+
+ {
+ !isFetching && !error && !!items.length &&
+
+ {translate('AddNewSeriesError')}
+
+
+
+ {
+ items.map((item) => {
+ return (
+
+ }
+
+ {
+ !isFetching && !error && !items.length && !!term &&
+
+
+ }
+
+ {
+ term ?
+ null :
+ {translate('CouldNotFindResults', { term })}
+ {translate('SearchByTvdbId')}
+
+
+ {translate('WhyCantIFindMyShow')}
+
+
+
+
+ }
+
+ {
+ !term && !hasExistingSeries ?
+
+ {translate('AddNewSeriesHelpText')}
+
+ {translate('SearchByTvdbId')}
+
+
:
+ null
+ }
+
+
+
+ {translate('NoSeriesHaveBeenAdded')}
+
+
+
+
+
+ {
+ isSmallScreen ?
+ null :
+
+
+
+ }
+
+
+ {
+ overview ?
+
+
+ {overview}
+
:
+ null
+ }
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+ }
+}
+
+AddNewSeriesSearchResult.propTypes = {
+ tvdbId: PropTypes.number.isRequired,
+ title: PropTypes.string.isRequired,
+ titleSlug: PropTypes.string.isRequired,
+ year: PropTypes.number.isRequired,
+ network: PropTypes.string,
+ originalLanguage: PropTypes.object,
+ genres: PropTypes.arrayOf(PropTypes.string),
+ status: PropTypes.string.isRequired,
+ overview: PropTypes.string,
+ statistics: PropTypes.object.isRequired,
+ ratings: PropTypes.object.isRequired,
+ folder: PropTypes.string.isRequired,
+ seriesType: PropTypes.string.isRequired,
+ images: PropTypes.arrayOf(PropTypes.object).isRequired,
+ isExistingSeries: PropTypes.bool.isRequired,
+ isSmallScreen: PropTypes.bool.isRequired
+};
+
+AddNewSeriesSearchResult.defaultProps = {
+ genres: []
+};
+
+export default AddNewSeriesSearchResult;
diff --git a/frontend/src/AddSeries/AddNewSeries/AddNewSeriesSearchResultConnector.js b/frontend/src/AddSeries/AddNewSeries/AddNewSeriesSearchResultConnector.js
new file mode 100644
index 000000000..c1207c9ef
--- /dev/null
+++ b/frontend/src/AddSeries/AddNewSeries/AddNewSeriesSearchResultConnector.js
@@ -0,0 +1,20 @@
+import { connect } from 'react-redux';
+import { createSelector } from 'reselect';
+import createDimensionsSelector from 'Store/Selectors/createDimensionsSelector';
+import createExistingSeriesSelector from 'Store/Selectors/createExistingSeriesSelector';
+import AddNewSeriesSearchResult from './AddNewSeriesSearchResult';
+
+function createMapStateToProps() {
+ return createSelector(
+ createExistingSeriesSelector(),
+ createDimensionsSelector(),
+ (isExistingSeries, dimensions) => {
+ return {
+ isExistingSeries,
+ isSmallScreen: dimensions.isSmallScreen
+ };
+ }
+ );
+}
+
+export default connect(createMapStateToProps)(AddNewSeriesSearchResult);
diff --git a/frontend/src/AddSeries/ImportSeries/Import/ImportSeries.js b/frontend/src/AddSeries/ImportSeries/Import/ImportSeries.js
new file mode 100644
index 000000000..eecdf8495
--- /dev/null
+++ b/frontend/src/AddSeries/ImportSeries/Import/ImportSeries.js
@@ -0,0 +1,179 @@
+import { reduce } from 'lodash';
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import Alert from 'Components/Alert';
+import LoadingIndicator from 'Components/Loading/LoadingIndicator';
+import PageContent from 'Components/Page/PageContent';
+import PageContentBody from 'Components/Page/PageContentBody';
+import { kinds } from 'Helpers/Props';
+import translate from 'Utilities/String/translate';
+import selectAll from 'Utilities/Table/selectAll';
+import toggleSelected from 'Utilities/Table/toggleSelected';
+import ImportSeriesFooterConnector from './ImportSeriesFooterConnector';
+import ImportSeriesTableConnector from './ImportSeriesTableConnector';
+
+class ImportSeries extends Component {
+
+ //
+ // Lifecycle
+
+ constructor(props, context) {
+ super(props, context);
+
+ this.scrollerRef = React.createRef();
+
+ this.state = {
+ allSelected: false,
+ allUnselected: false,
+ lastToggled: null,
+ selectedState: {}
+ };
+ }
+
+ //
+ // Listeners
+
+ getSelectedIds = () => {
+ return reduce(
+ this.state.selectedState,
+ (result, value, id) => {
+ if (value) {
+ result.push(id);
+ }
+
+ return result;
+ },
+ []
+ );
+ };
+
+ onSelectAllChange = ({ value }) => {
+ // Only select non-dupes
+ this.setState(selectAll(this.state.selectedState, value));
+ };
+
+ onSelectedChange = ({ id, value, shiftKey = false }) => {
+ this.setState((state) => {
+ return toggleSelected(state, this.props.items, id, value, shiftKey);
+ });
+ };
+
+ onRemoveSelectedStateItem = (id) => {
+ this.setState((state) => {
+ const selectedState = Object.assign({}, state.selectedState);
+ delete selectedState[id];
+
+ return {
+ ...state,
+ selectedState
+ };
+ });
+ };
+
+ onInputChange = ({ name, value }) => {
+ this.props.onInputChange(this.getSelectedIds(), name, value);
+ };
+
+ onImportPress = () => {
+ this.props.onImportPress(this.getSelectedIds());
+ };
+
+ //
+ // Render
+
+ render() {
+ const {
+ rootFolderId,
+ path,
+ rootFoldersFetching,
+ rootFoldersPopulated,
+ rootFoldersError,
+ unmappedFolders
+ } = this.props;
+
+ const {
+ allSelected,
+ allUnselected,
+ selectedState
+ } = this.state;
+
+ return (
+
+ {
+ isSmallScreen ?
+ null :
+
+
+
+
+
+
+
+
+
+
+
+ {title}
+
+ {
+ !title.contains(year) && year ?
+
+ ({year})
+ :
+ null
+ }
+
+
+ {
+ isExistingSeries ?
+
+
+
+
+ {
+ originalLanguage?.name ?
+ :
+ null
+ }
+
+ {
+ network ?
+ :
+ null
+ }
+
+ {
+ genres.length > 0 ?
+ :
+ null
+ }
+
+ {
+ seasonCount ?
+ :
+ null
+ }
+
+ {
+ status === 'ended' ?
+ :
+ null
+ }
+
+ {
+ status === 'upcoming' ?
+ :
+ null
+ }
+
+
+
+ {overview}
+
+
+
+
+
+
+ {translate('Monitor')}
+
+
+
+
+
+
+ {translate('QualityProfile')}
+
+
+
+
+
+
+ {translate('SeriesType')}
+
+
+
+
+
+
+ {translate('SeasonFolder')}
+
+
+
+
+
+
+
+
+
+
+ {translate('ImportCountSeries', { selectedCount })}
+
+
+ {
+ isLookingUpSeries ?
+ :
+ null
+ }
+
+ {
+ hasUnsearchedItems ?
+ :
+ null
+ }
+
+ {
+ isLookingUpSeries ?
+
+ -
+ {
+ Array.isArray(importError.responseJSON) ?
+ importError.responseJSON.map((error, index) => {
+ return (
+
- + {error.errorMessage} + + ); + }) : +
- + { + JSON.stringify(importError.responseJSON) + } + + } +
+
+
+ );
+}
+
+ImportSeriesSearchResult.propTypes = {
+ tvdbId: PropTypes.number.isRequired,
+ title: PropTypes.string.isRequired,
+ year: PropTypes.number.isRequired,
+ network: PropTypes.string,
+ isExistingSeries: PropTypes.bool.isRequired,
+ onPress: PropTypes.func.isRequired
+};
+
+export default ImportSeriesSearchResult;
diff --git a/frontend/src/AddSeries/ImportSeries/Import/SelectSeries/ImportSeriesSearchResultConnector.js b/frontend/src/AddSeries/ImportSeries/Import/SelectSeries/ImportSeriesSearchResultConnector.js
new file mode 100644
index 000000000..81bb3059b
--- /dev/null
+++ b/frontend/src/AddSeries/ImportSeries/Import/SelectSeries/ImportSeriesSearchResultConnector.js
@@ -0,0 +1,17 @@
+import { connect } from 'react-redux';
+import { createSelector } from 'reselect';
+import createExistingSeriesSelector from 'Store/Selectors/createExistingSeriesSelector';
+import ImportSeriesSearchResult from './ImportSeriesSearchResult';
+
+function createMapStateToProps() {
+ return createSelector(
+ createExistingSeriesSelector(),
+ (isExistingSeries) => {
+ return {
+ isExistingSeries
+ };
+ }
+ );
+}
+
+export default connect(createMapStateToProps)(ImportSeriesSearchResult);
diff --git a/frontend/src/AddSeries/ImportSeries/Import/SelectSeries/ImportSeriesSelectSeries.css b/frontend/src/AddSeries/ImportSeries/Import/SelectSeries/ImportSeriesSelectSeries.css
new file mode 100644
index 000000000..89b03301b
--- /dev/null
+++ b/frontend/src/AddSeries/ImportSeries/Import/SelectSeries/ImportSeriesSelectSeries.css
@@ -0,0 +1,77 @@
+.button {
+ composes: link from '~Components/Link/Link.css';
+
+ display: flex;
+ align-items: center;
+ padding: 6px 16px;
+ width: 100%;
+ height: 35px;
+ border: 1px solid var(--inputBorderColor);
+ border-radius: 4px;
+ background-color: var(--inputBackgroundColor);
+ box-shadow: inset 0 1px 1px var(--inputBoxShadowColor);
+}
+
+.loading {
+ display: inline-block;
+}
+
+.warningIcon {
+ margin-right: 8px;
+}
+
+.existing {
+ margin-left: 5px;
+}
+
+.dropdownArrowContainer {
+ flex: 1 0 auto;
+ margin-left: 5px;
+ text-align: right;
+}
+
+.contentContainer {
+ z-index: $popperZIndex;
+ margin-top: 4px;
+ /* 400px container width with 8px padding on each side */
+ width: 384px;
+}
+
+.content {
+ padding: 4px;
+ border: 1px solid var(--inputBorderColor);
+ border-radius: 4px;
+ background-color: var(--inputBackgroundColor);
+}
+
+.searchContainer {
+ display: flex;
+}
+
+.searchIconContainer {
+ width: 58px;
+ border: 1px solid var(--inputBorderColor);
+ border-right: none;
+ border-radius: 4px;
+ border-top-right-radius: 0;
+ border-bottom-right-radius: 0;
+ background-color: var(--searchIconContainerBackgroundColor);
+ text-align: center;
+ line-height: 33px;
+}
+
+.searchInput {
+ composes: input from '~Components/Form/TextInput.css';
+
+ border-radius: 0;
+}
+
+.results {
+ @add-mixin scrollbar;
+ @add-mixin scrollbarTrack;
+ @add-mixin scrollbarThumb;
+
+ overflow-x: hidden;
+ overflow-y: scroll;
+ max-height: 165px;
+}
diff --git a/frontend/src/AddSeries/ImportSeries/Import/SelectSeries/ImportSeriesSelectSeries.css.d.ts b/frontend/src/AddSeries/ImportSeries/Import/SelectSeries/ImportSeriesSelectSeries.css.d.ts
new file mode 100644
index 000000000..d5aa6bc94
--- /dev/null
+++ b/frontend/src/AddSeries/ImportSeries/Import/SelectSeries/ImportSeriesSelectSeries.css.d.ts
@@ -0,0 +1,17 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+ 'button': string;
+ 'content': string;
+ 'contentContainer': string;
+ 'dropdownArrowContainer': string;
+ 'existing': string;
+ 'loading': string;
+ 'results': string;
+ 'searchContainer': string;
+ 'searchIconContainer': string;
+ 'searchInput': string;
+ 'warningIcon': string;
+}
+export const cssExports: CssExports;
+export default cssExports;
diff --git a/frontend/src/AddSeries/ImportSeries/Import/SelectSeries/ImportSeriesSelectSeries.js b/frontend/src/AddSeries/ImportSeries/Import/SelectSeries/ImportSeriesSelectSeries.js
new file mode 100644
index 000000000..1257be9b1
--- /dev/null
+++ b/frontend/src/AddSeries/ImportSeries/Import/SelectSeries/ImportSeriesSelectSeries.js
@@ -0,0 +1,303 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import { Manager, Popper, Reference } from 'react-popper';
+import FormInputButton from 'Components/Form/FormInputButton';
+import TextInput from 'Components/Form/TextInput';
+import Icon from 'Components/Icon';
+import Link from 'Components/Link/Link';
+import LoadingIndicator from 'Components/Loading/LoadingIndicator';
+import Portal from 'Components/Portal';
+import { icons, kinds } from 'Helpers/Props';
+import getUniqueElementId from 'Utilities/getUniqueElementId';
+import translate from 'Utilities/String/translate';
+import ImportSeriesSearchResultConnector from './ImportSeriesSearchResultConnector';
+import ImportSeriesTitle from './ImportSeriesTitle';
+import styles from './ImportSeriesSelectSeries.css';
+
+class ImportSeriesSelectSeries extends Component {
+
+ //
+ // Lifecycle
+
+ constructor(props, context) {
+ super(props, context);
+
+ this._seriesLookupTimeout = null;
+ this._scheduleUpdate = null;
+ this._buttonId = getUniqueElementId();
+ this._contentId = getUniqueElementId();
+
+ this.state = {
+ term: props.id,
+ isOpen: false
+ };
+ }
+
+ componentDidUpdate() {
+ if (this._scheduleUpdate) {
+ this._scheduleUpdate();
+ }
+ }
+
+ //
+ // Control
+
+ _addListener() {
+ window.addEventListener('click', this.onWindowClick);
+ }
+
+ _removeListener() {
+ window.removeEventListener('click', this.onWindowClick);
+ }
+
+ //
+ // Listeners
+
+ onWindowClick = (event) => {
+ const button = document.getElementById(this._buttonId);
+ const content = document.getElementById(this._contentId);
+
+ if (!button || !content) {
+ return;
+ }
+
+ if (
+ !button.contains(event.target) &&
+ !content.contains(event.target) &&
+ this.state.isOpen
+ ) {
+ this.setState({ isOpen: false });
+ this._removeListener();
+ }
+ };
+
+ onPress = () => {
+ if (this.state.isOpen) {
+ this._removeListener();
+ } else {
+ this._addListener();
+ }
+
+ this.setState({ isOpen: !this.state.isOpen });
+ };
+
+ onSearchInputChange = ({ value }) => {
+ if (this._seriesLookupTimeout) {
+ clearTimeout(this._seriesLookupTimeout);
+ }
+
+ this.setState({ term: value }, () => {
+ this._seriesLookupTimeout = setTimeout(() => {
+ this.props.onSearchInputChange(value);
+ }, 200);
+ });
+ };
+
+ onRefreshPress = () => {
+ this.props.onSearchInputChange(this.state.term);
+ };
+
+ onSeriesSelect = (tvdbId) => {
+ this.setState({ isOpen: false });
+
+ this.props.onSeriesSelect(tvdbId);
+ };
+
+ //
+ // Render
+
+ render() {
+ const {
+ selectedSeries,
+ isExistingSeries,
+ isFetching,
+ isPopulated,
+ error,
+ items,
+ isQueued,
+ isLookingUpSeries
+ } = this.props;
+
+ const errorMessage = error &&
+ error.responseJSON &&
+ error.responseJSON.message;
+
+ return (
+
+ {
+ this.state.isOpen ?
+
+ );
+ }}
+
+
:
+ null
+ }
+
+
+
+
+
+
+
+
+
+ {
+ items.map((item) => {
+ return (
+
+
+
+ );
+}
+
+ImportSeriesTitle.propTypes = {
+ title: PropTypes.string.isRequired,
+ year: PropTypes.number.isRequired,
+ network: PropTypes.string,
+ isExistingSeries: PropTypes.bool.isRequired
+};
+
+export default ImportSeriesTitle;
diff --git a/frontend/src/AddSeries/ImportSeries/ImportSeries.js b/frontend/src/AddSeries/ImportSeries/ImportSeries.js
new file mode 100644
index 000000000..8f9fed325
--- /dev/null
+++ b/frontend/src/AddSeries/ImportSeries/ImportSeries.js
@@ -0,0 +1,30 @@
+import React, { Component } from 'react';
+import { Route } from 'react-router-dom';
+import ImportSeriesConnector from 'AddSeries/ImportSeries/Import/ImportSeriesConnector';
+import ImportSeriesSelectFolderConnector from 'AddSeries/ImportSeries/SelectFolder/ImportSeriesSelectFolderConnector';
+import Switch from 'Components/Router/Switch';
+
+class ImportSeries extends Component {
+
+ //
+ // Render
+
+ render() {
+ return (
+
+ {title}
+
+
+ {
+ !title.contains(year) &&
+ year > 0 ?
+
+ ({year})
+ :
+ null
+ }
+
+ {
+ network ?
+ :
+ null
+ }
+
+ {
+ isExistingSeries ?
+ :
+ null
+ }
+
+
+ {translate('AddRootFolderError')}
+
+ :
+ null
+ }
+
+
+ }
+
+ {translate('LibraryImportSeriesHeader')}
+
+
+
+ {translate('LibraryImportTips')}
+
+
+ {
+ hasRootFolders ?
+ -
+
-
+
+
+ -
+
+
+ - + {translate('LibraryImportTipsDontUseDownloadsFolder')} + +
+
+
:
+ null
+ }
+
+ {
+ !isSaving && saveError ?
+ -
+ {
+ Array.isArray(saveError.responseJSON) ?
+ saveError.responseJSON.map((e, index) => {
+ return (
+
- + {e.errorMessage} + + ); + }) : +
- + { + JSON.stringify(saveError.responseJSON) + } + + } +
+
+
+
+
+
+
+ {isPopulated && !error && !!update ? (
+
+ {update.changes ? (
+
+ ) : null}
+
+ {!isPopulated && !error ?
+ {translate('MaintenanceRelease')}
+
+ ) : null}
+
+ {update.changes ? (
+
+
+ ) : null}
+ {translate('WhatsNew')}
+
+ {translate('ConnectionLostToBackend')}
+
+
+ {translate('ConnectionLostReconnect')}
+
+
+ {items.map((item, index) => {
+ const momentDate = moment(item.airDateUtc);
+ const showDate =
+ index === 0 ||
+ !moment(items[index - 1].airDateUtc).isSame(momentDate, 'day');
+
+ return
+ );
+}
+
+export default Agenda;
diff --git a/frontend/src/Calendar/Agenda/AgendaEvent.css b/frontend/src/Calendar/Agenda/AgendaEvent.css
new file mode 100644
index 000000000..7ad9ccf6a
--- /dev/null
+++ b/frontend/src/Calendar/Agenda/AgendaEvent.css
@@ -0,0 +1,138 @@
+.event {
+ position: relative;
+ padding: 5px;
+ border-bottom: 1px solid var(--borderColor);
+}
+
+.underlay {
+ @add-mixin cover;
+
+ &:hover {
+ background-color: var(--tableRowHoverBackgroundColor);
+ }
+}
+
+.overlay {
+ @add-mixin linkOverlay;
+
+ position: relative;
+ display: flex;
+ overflow-x: hidden;
+ font-size: $defaultFontSize;
+
+ &:global(.colorImpaired) {
+ border-left-width: 5px;
+ }
+}
+
+.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 125px;
+ margin-right: 10px;
+ border: none !important;
+}
+
+.seriesTitle,
+.episodeTitle {
+ @add-mixin truncate;
+
+ flex: 0 1 300px;
+ margin-right: 10px;
+}
+
+.episodeTitle {
+ flex: 1 1 1px;
+}
+
+.seasonEpisodeNumber {
+ flex: 0 0 100px;
+}
+
+.episodeSeparator {
+ display: none;
+}
+
+.absoluteEpisodeNumber {
+ margin-left: 3px;
+}
+
+.statusIcon {
+ margin-left: 3px;
+ cursor: default;
+ pointer-events: all;
+}
+
+/*
+ * 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';
+}
+
+.onAir {
+ composes: onAir from '~Calendar/Events/CalendarEvent.css';
+}
+
+.missing {
+ composes: missing from '~Calendar/Events/CalendarEvent.css';
+}
+
+.premiere {
+ composes: premiere from '~Calendar/Events/CalendarEvent.css';
+}
+
+.unaired {
+ composes: unaired from '~Calendar/Events/CalendarEvent.css';
+}
+
+@media only screen and (max-width: $breakpointSmall) {
+ .overlay {
+ flex-direction: column;
+ }
+
+ .eventWrapper {
+ display: block;
+ flex: 0 0 auto;
+ }
+
+ .date {
+ margin-left: 10px;
+ }
+
+ .date,
+ .time,
+ .seriesTitle {
+ flex: 0 0 100%;
+ }
+
+ .seasonEpisodeNumber {
+ flex: 0 0 auto;
+ }
+
+ .episodeSeparator {
+ display: inline-block;
+ margin: 0 5px;
+ }
+}
diff --git a/frontend/src/Calendar/Agenda/AgendaEvent.css.d.ts b/frontend/src/Calendar/Agenda/AgendaEvent.css.d.ts
new file mode 100644
index 000000000..288e11824
--- /dev/null
+++ b/frontend/src/Calendar/Agenda/AgendaEvent.css.d.ts
@@ -0,0 +1,25 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+ 'absoluteEpisodeNumber': string;
+ 'date': string;
+ 'downloaded': string;
+ 'downloading': string;
+ 'episodeSeparator': string;
+ 'episodeTitle': string;
+ 'event': string;
+ 'eventWrapper': string;
+ 'missing': string;
+ 'onAir': string;
+ 'overlay': string;
+ 'premiere': string;
+ 'seasonEpisodeNumber': string;
+ 'seriesTitle': string;
+ 'statusIcon': string;
+ 'time': string;
+ 'unaired': string;
+ 'underlay': string;
+ 'unmonitored': string;
+}
+export const cssExports: CssExports;
+export default cssExports;
diff --git a/frontend/src/Calendar/Agenda/AgendaEvent.tsx b/frontend/src/Calendar/Agenda/AgendaEvent.tsx
new file mode 100644
index 000000000..2fd2d7c54
--- /dev/null
+++ b/frontend/src/Calendar/Agenda/AgendaEvent.tsx
@@ -0,0 +1,227 @@
+import classNames from 'classnames';
+import moment from 'moment';
+import React, { useCallback, useState } from 'react';
+import { useSelector } from 'react-redux';
+import AppState from 'App/State/AppState';
+import CalendarEventQueueDetails from 'Calendar/Events/CalendarEventQueueDetails';
+import getStatusStyle from 'Calendar/getStatusStyle';
+import Icon from 'Components/Icon';
+import Link from 'Components/Link/Link';
+import EpisodeDetailsModal from 'Episode/EpisodeDetailsModal';
+import episodeEntities from 'Episode/episodeEntities';
+import getFinaleTypeName from 'Episode/getFinaleTypeName';
+import useEpisodeFile from 'EpisodeFile/useEpisodeFile';
+import { icons, kinds } from 'Helpers/Props';
+import useSeries from 'Series/useSeries';
+import { createQueueItemSelectorForHook } from 'Store/Selectors/createQueueItemSelector';
+import createUISettingsSelector from 'Store/Selectors/createUISettingsSelector';
+import formatTime from 'Utilities/Date/formatTime';
+import padNumber from 'Utilities/Number/padNumber';
+import translate from 'Utilities/String/translate';
+import styles from './AgendaEvent.css';
+
+interface AgendaEventProps {
+ id: number;
+ seriesId: number;
+ episodeFileId: number;
+ title: string;
+ seasonNumber: number;
+ episodeNumber: number;
+ absoluteEpisodeNumber?: number;
+ airDateUtc: string;
+ monitored: boolean;
+ unverifiedSceneNumbering?: boolean;
+ finaleType?: string;
+ hasFile: boolean;
+ grabbed?: boolean;
+ showDate: boolean;
+}
+
+function AgendaEvent(props: AgendaEventProps) {
+ const {
+ id,
+ seriesId,
+ episodeFileId,
+ title,
+ seasonNumber,
+ episodeNumber,
+ absoluteEpisodeNumber,
+ airDateUtc,
+ monitored,
+ unverifiedSceneNumbering,
+ finaleType,
+ hasFile,
+ grabbed,
+ showDate,
+ } = props;
+
+ const series = useSeries(seriesId)!;
+ const episodeFile = useEpisodeFile(episodeFileId);
+ const queueItem = useSelector(createQueueItemSelectorForHook(id));
+ const { timeFormat, longDateFormat, enableColorImpairedMode } = useSelector(
+ createUISettingsSelector()
+ );
+
+ const {
+ showEpisodeInformation,
+ showFinaleIcon,
+ showSpecialIcon,
+ showCutoffUnmetIcon,
+ } = useSelector((state: AppState) => state.calendar.options);
+
+ const [isDetailsModalOpen, setIsDetailsModalOpen] = useState(false);
+
+ const startTime = moment(airDateUtc);
+ const endTime = moment(airDateUtc).add(series.runtime, 'minutes');
+ const downloading = !!(queueItem || grabbed);
+ const isMonitored = series.monitored && monitored;
+ const statusStyle = getStatusStyle(
+ hasFile,
+ downloading,
+ startTime,
+ endTime,
+ isMonitored
+ );
+ const missingAbsoluteNumber =
+ series.seriesType === 'anime' && seasonNumber > 0 && !absoluteEpisodeNumber;
+
+ const handlePress = useCallback(() => {
+ setIsDetailsModalOpen(true);
+ }, []);
+
+ const handleDetailsModalClose = useCallback(() => {
+ setIsDetailsModalOpen(false);
+ }, []);
+
+ return (
+
+
+
+
+ );
+}
+
+export default AgendaEvent;
diff --git a/frontend/src/Calendar/Calendar.css b/frontend/src/Calendar/Calendar.css
new file mode 100644
index 000000000..37e6ff618
--- /dev/null
+++ b/frontend/src/Calendar/Calendar.css
@@ -0,0 +1,8 @@
+.calendar {
+ flex-grow: 1;
+ width: 100%;
+}
+
+.calendarContent {
+ width: 100%;
+}
diff --git a/frontend/src/Calendar/Calendar.css.d.ts b/frontend/src/Calendar/Calendar.css.d.ts
new file mode 100644
index 000000000..503034402
--- /dev/null
+++ b/frontend/src/Calendar/Calendar.css.d.ts
@@ -0,0 +1,8 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+ 'calendar': string;
+ 'calendarContent': string;
+}
+export const cssExports: CssExports;
+export default cssExports;
diff --git a/frontend/src/Calendar/Calendar.tsx b/frontend/src/Calendar/Calendar.tsx
new file mode 100644
index 000000000..caa337cf0
--- /dev/null
+++ b/frontend/src/Calendar/Calendar.tsx
@@ -0,0 +1,170 @@
+import React, { useCallback, useEffect, useRef } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import AppState from 'App/State/AppState';
+import * as commandNames from 'Commands/commandNames';
+import Alert from 'Components/Alert';
+import LoadingIndicator from 'Components/Loading/LoadingIndicator';
+import Episode from 'Episode/Episode';
+import useCurrentPage from 'Helpers/Hooks/useCurrentPage';
+import usePrevious from 'Helpers/Hooks/usePrevious';
+import { kinds } from 'Helpers/Props';
+import {
+ clearCalendar,
+ fetchCalendar,
+ gotoCalendarToday,
+} from 'Store/Actions/calendarActions';
+import {
+ clearEpisodeFiles,
+ fetchEpisodeFiles,
+} from 'Store/Actions/episodeFileActions';
+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 translate from 'Utilities/String/translate';
+import Agenda from './Agenda/Agenda';
+import CalendarDays from './Day/CalendarDays';
+import DaysOfWeek from './Day/DaysOfWeek';
+import CalendarHeader from './Header/CalendarHeader';
+import styles from './Calendar.css';
+
+const UPDATE_DELAY = 3600000; // 1 hour
+
+function Calendar() {
+ const dispatch = useDispatch();
+ const requestCurrentPage = useCurrentPage();
+ const updateTimeout = useRef
+
+
+
+ {showDate && startTime.format(longDateFormat)}
+
+
+
+
+
+ {formatTime(airDateUtc, timeFormat)} -{' '}
+ {formatTime(endTime.toISOString(), timeFormat, {
+ includeMinuteZero: true,
+ })}
+
+
+ {series.title}
+
+ {showEpisodeInformation ? (
+
+ {seasonNumber}x{padNumber(episodeNumber, 2)}
+ {series.seriesType === 'anime' && absoluteEpisodeNumber && (
+
+ ({absoluteEpisodeNumber})
+
+ )}
+
+ ) : null}
+
+ -
+
+ {showEpisodeInformation ? title : null}
+
+
+ {missingAbsoluteNumber ? (
+
+ {isFetching && !isPopulated ? {translate('CalendarLoadError')}
+ ) : null}
+
+ {!error && isPopulated && view === 'agenda' ? (
+
+ );
+}
+
+export default Calendar;
diff --git a/frontend/src/Calendar/CalendarFilterModal.tsx b/frontend/src/Calendar/CalendarFilterModal.tsx
new file mode 100644
index 000000000..e26b2928b
--- /dev/null
+++ b/frontend/src/Calendar/CalendarFilterModal.tsx
@@ -0,0 +1,54 @@
+import React, { useCallback } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { createSelector } from 'reselect';
+import AppState from 'App/State/AppState';
+import FilterModal from 'Components/Filter/FilterModal';
+import { setCalendarFilter } from 'Store/Actions/calendarActions';
+
+function createCalendarSelector() {
+ return createSelector(
+ (state: AppState) => state.calendar.items,
+ (calendar) => {
+ return calendar;
+ }
+ );
+}
+
+function createFilterBuilderPropsSelector() {
+ return createSelector(
+ (state: AppState) => state.calendar.filterBuilderProps,
+ (filterBuilderProps) => {
+ return filterBuilderProps;
+ }
+ );
+}
+
+interface CalendarFilterModalProps {
+ isOpen: boolean;
+}
+
+export default function CalendarFilterModal(props: CalendarFilterModalProps) {
+ const sectionItems = useSelector(createCalendarSelector());
+ const filterBuilderProps = useSelector(createFilterBuilderPropsSelector());
+ const customFilterType = 'calendar';
+
+ const dispatch = useDispatch();
+
+ const dispatchSetFilter = useCallback(
+ (payload: unknown) => {
+ dispatch(setCalendarFilter(payload));
+ },
+ [dispatch]
+ );
+
+ return (
+
+
+ ) : null}
+
+ {!error && isPopulated && view !== 'agenda' ? (
+
+
+ ) : null}
+
+ {view === calendarViews.MONTH && (
+
+ );
+}
+
+export default CalendarDay;
diff --git a/frontend/src/Calendar/Day/CalendarDays.css b/frontend/src/Calendar/Day/CalendarDays.css
new file mode 100644
index 000000000..507dd0ede
--- /dev/null
+++ b/frontend/src/Calendar/Day/CalendarDays.css
@@ -0,0 +1,14 @@
+.days {
+ display: flex;
+ border-right: 1px solid var(--calendarBorderColor);
+}
+
+.day,
+.week,
+.forecast {
+ flex-wrap: nowrap;
+}
+
+.month {
+ flex-wrap: wrap;
+}
diff --git a/frontend/src/Calendar/Day/CalendarDays.css.d.ts b/frontend/src/Calendar/Day/CalendarDays.css.d.ts
new file mode 100644
index 000000000..ae3e7aebc
--- /dev/null
+++ b/frontend/src/Calendar/Day/CalendarDays.css.d.ts
@@ -0,0 +1,11 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+ 'day': string;
+ 'days': string;
+ 'forecast': string;
+ 'month': string;
+ 'week': string;
+}
+export const cssExports: CssExports;
+export default cssExports;
diff --git a/frontend/src/Calendar/Day/CalendarDays.tsx b/frontend/src/Calendar/Day/CalendarDays.tsx
new file mode 100644
index 000000000..149dc1455
--- /dev/null
+++ b/frontend/src/Calendar/Day/CalendarDays.tsx
@@ -0,0 +1,135 @@
+import classNames from 'classnames';
+import moment from 'moment';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import AppState from 'App/State/AppState';
+import * as calendarViews from 'Calendar/calendarViews';
+import {
+ gotoCalendarNextRange,
+ gotoCalendarPreviousRange,
+} from 'Store/Actions/calendarActions';
+import CalendarDay from './CalendarDay';
+import styles from './CalendarDays.css';
+
+function CalendarDays() {
+ const dispatch = useDispatch();
+ const { dates, view } = useSelector((state: AppState) => state.calendar);
+ const isSidebarVisible = useSelector(
+ (state: AppState) => state.app.isSidebarVisible
+ );
+
+ const updateTimeout = useRef
+ {moment(date).date()}
+
+ )}
+
+ {events.map((event) => {
+ if (event.isGroup) {
+ return (
+
+
+ {dates.map((date) => {
+ return (
+
+ );
+}
+
+export default CalendarDays;
diff --git a/frontend/src/Calendar/Day/DayOfWeek.css b/frontend/src/Calendar/Day/DayOfWeek.css
new file mode 100644
index 000000000..2d31a30be
--- /dev/null
+++ b/frontend/src/Calendar/Day/DayOfWeek.css
@@ -0,0 +1,13 @@
+.dayOfWeek {
+ flex: 1 0 14.28%;
+ background-color: var(--calendarBackgroundColor);
+ text-align: center;
+}
+
+.isSingleDay {
+ width: 100%;
+}
+
+.isToday {
+ background-color: var(--calendarTodayBackgroundColor);
+}
diff --git a/frontend/src/Calendar/Day/DayOfWeek.css.d.ts b/frontend/src/Calendar/Day/DayOfWeek.css.d.ts
new file mode 100644
index 000000000..a377e4a8e
--- /dev/null
+++ b/frontend/src/Calendar/Day/DayOfWeek.css.d.ts
@@ -0,0 +1,9 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+ 'dayOfWeek': string;
+ 'isSingleDay': string;
+ 'isToday': string;
+}
+export const cssExports: CssExports;
+export default cssExports;
diff --git a/frontend/src/Calendar/Day/DayOfWeek.tsx b/frontend/src/Calendar/Day/DayOfWeek.tsx
new file mode 100644
index 000000000..c8b493b7c
--- /dev/null
+++ b/frontend/src/Calendar/Day/DayOfWeek.tsx
@@ -0,0 +1,54 @@
+import classNames from 'classnames';
+import moment from 'moment';
+import React from 'react';
+import * as calendarViews from 'Calendar/calendarViews';
+import getRelativeDate from 'Utilities/Date/getRelativeDate';
+import styles from './DayOfWeek.css';
+
+interface DayOfWeekProps {
+ date: string;
+ view: string;
+ isTodaysDate: boolean;
+ calendarWeekColumnHeader: string;
+ shortDateFormat: string;
+ showRelativeDates: boolean;
+}
+
+function DayOfWeek(props: DayOfWeekProps) {
+ const {
+ date,
+ view,
+ isTodaysDate,
+ calendarWeekColumnHeader,
+ shortDateFormat,
+ showRelativeDates,
+ } = 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 (
+
+ {formatedDate}
+
+ );
+}
+
+export default DayOfWeek;
diff --git a/frontend/src/Calendar/Day/DaysOfWeek.css b/frontend/src/Calendar/Day/DaysOfWeek.css
new file mode 100644
index 000000000..518664633
--- /dev/null
+++ b/frontend/src/Calendar/Day/DaysOfWeek.css
@@ -0,0 +1,4 @@
+.daysOfWeek {
+ display: flex;
+ margin-top: 10px;
+}
diff --git a/frontend/src/Calendar/Day/DaysOfWeek.css.d.ts b/frontend/src/Calendar/Day/DaysOfWeek.css.d.ts
new file mode 100644
index 000000000..5bc224b68
--- /dev/null
+++ b/frontend/src/Calendar/Day/DaysOfWeek.css.d.ts
@@ -0,0 +1,7 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+ 'daysOfWeek': string;
+}
+export const cssExports: CssExports;
+export default cssExports;
diff --git a/frontend/src/Calendar/Day/DaysOfWeek.tsx b/frontend/src/Calendar/Day/DaysOfWeek.tsx
new file mode 100644
index 000000000..64bc886cc
--- /dev/null
+++ b/frontend/src/Calendar/Day/DaysOfWeek.tsx
@@ -0,0 +1,60 @@
+import moment from 'moment';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { useSelector } from 'react-redux';
+import AppState from 'App/State/AppState';
+import * as calendarViews from 'Calendar/calendarViews';
+import createUISettingsSelector from 'Store/Selectors/createUISettingsSelector';
+import DayOfWeek from './DayOfWeek';
+import styles from './DaysOfWeek.css';
+
+function DaysOfWeek() {
+ const { dates, view } = useSelector((state: AppState) => state.calendar);
+ const { calendarWeekColumnHeader, shortDateFormat, showRelativeDates } =
+ useSelector(createUISettingsSelector());
+
+ const updateTimeout = useRef
+ {dates.map((date) => {
+ return (
+
+ );
+}
+
+export default DaysOfWeek;
diff --git a/frontend/src/Calendar/Events/CalendarEvent.css b/frontend/src/Calendar/Events/CalendarEvent.css
new file mode 100644
index 000000000..679b4cc51
--- /dev/null
+++ b/frontend/src/Calendar/Events/CalendarEvent.css
@@ -0,0 +1,158 @@
+$fullColorGradient: rgba(244, 245, 246, 0.2);
+
+.event {
+ position: relative;
+ margin: 4px 2px;
+ padding: 5px;
+ border-bottom: 1px solid var(--calendarBorderColor);
+ border-left: 4px solid var(--calendarBorderColor);
+}
+
+.underlay {
+ @add-mixin cover;
+}
+
+.overlay {
+ @add-mixin linkOverlay;
+
+ position: relative;
+ overflow-x: hidden;
+ font-size: 12px;
+
+ &:global(.colorImpaired) {
+ border-left-width: 5px;
+ }
+}
+
+.info,
+.episodeInfo {
+ display: flex;
+}
+
+.episodeInfo {
+ color: var(--calendarTextDim);
+}
+
+.seriesTitle,
+.episodeTitle {
+ @add-mixin truncate;
+ flex: 1 0 1px;
+ margin-right: 10px;
+}
+
+.seriesTitle {
+ color: var(--calendarTextDimAlternate);
+ font-size: $defaultFontSize;
+}
+
+.absoluteEpisodeNumber {
+ margin-left: 3px;
+}
+
+.statusContainer {
+ display: flex;
+ align-items: center;
+
+ &:global(.fullColor) {
+ filter: var(--calendarFullColorFilter)
+ }
+}
+
+.statusIcon {
+ margin-left: 3px;
+ cursor: default;
+ pointer-events: all;
+}
+
+.airTime {
+ color: var(--calendarTextDim);
+}
+
+/*
+ * Status
+ */
+
+.downloaded {
+ border-left-color: var(--successColor) !important;
+
+ &:global(.fullColor) {
+ background-color: rgba(39, 194, 76, 0.4) !important;
+ }
+
+ &:global(.colorImpaired) {
+ border-left-color: color(#27c24c saturation(+15%)) !important;
+ }
+}
+
+.downloading {
+ border-left-color: var(--purple) !important;
+
+ &:global(.fullColor) {
+ background-color: rgba(122, 67, 182, 0.4) !important;
+ }
+}
+
+.unmonitored {
+ border-left-color: var(--gray) !important;
+
+ &:global(.fullColor) {
+ background-color: rgba(173, 173, 173, 0.5) !important;
+ }
+
+ &:global(.colorImpaired) {
+ background: repeating-linear-gradient(45deg, var(--colorImpairedGradientDark), var(--colorImpairedGradientDark) 5px, var(--colorImpairedGradient) 5px, var(--colorImpairedGradient) 10px);
+ }
+
+ &:global(.fullColor.colorImpaired) {
+ background: repeating-linear-gradient(45deg, $fullColorGradient, $fullColorGradient 5px, transparent 5px, transparent 10px);
+ }
+}
+
+.onAir {
+ border-left-color: var(--warningColor) !important;
+
+ &:global(.fullColor) {
+ background-color: rgba(255, 165, 0, 0.6) !important;
+ }
+
+ &:global(.colorImpaired) {
+ background: repeating-linear-gradient(90deg, var(--colorImpairedGradientDark), var(--colorImpairedGradientDark) 5px, var(--colorImpairedGradient) 5px, var(--colorImpairedGradient) 10px);
+ }
+
+ &:global(.fullColor.colorImpaired) {
+ background: repeating-linear-gradient(90deg, $fullColorGradient, $fullColorGradient 5px, transparent 5px, transparent 10px);
+ }
+}
+
+.missing {
+ border-left-color: var(--dangerColor) !important;
+
+ &:global(.fullColor) {
+ background-color: rgba(240, 80, 80, 0.6) !important;
+ }
+
+ &:global(.colorImpaired) {
+ border-left-color: color(#f05050 saturation(+15%)) !important;
+ background: repeating-linear-gradient(90deg, var(--colorImpairedGradientDark), var(--colorImpairedGradientDark) 5px, var(--colorImpairedGradient) 5px, var(--colorImpairedGradient) 10px);
+ }
+
+ &:global(.fullColor.colorImpaired) {
+ background: repeating-linear-gradient(90deg, $fullColorGradient, $fullColorGradient 5px, transparent 5px, transparent 10px);
+ }
+}
+
+.unaired {
+ border-left-color: var(--primaryColor) !important;
+
+ &:global(.fullColor) {
+ background-color: rgba(93, 156, 236, 0.4) !important;
+ }
+
+ &:global(.colorImpaired) {
+ background: repeating-linear-gradient(90deg, var(--colorImpairedGradientDark), var(--colorImpairedGradientDark) 5px, var(--colorImpairedGradient) 5px, var(--colorImpairedGradient) 10px);
+ }
+
+ &:global(.fullColor.colorImpaired) {
+ background: repeating-linear-gradient(90deg, $fullColorGradient, $fullColorGradient 5px, transparent 5px, transparent 10px);
+ }
+}
diff --git a/frontend/src/Calendar/Events/CalendarEvent.css.d.ts b/frontend/src/Calendar/Events/CalendarEvent.css.d.ts
new file mode 100644
index 000000000..f099df211
--- /dev/null
+++ b/frontend/src/Calendar/Events/CalendarEvent.css.d.ts
@@ -0,0 +1,23 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+ 'absoluteEpisodeNumber': string;
+ 'airTime': string;
+ 'downloaded': string;
+ 'downloading': string;
+ 'episodeInfo': string;
+ 'episodeTitle': string;
+ 'event': string;
+ 'info': string;
+ 'missing': string;
+ 'onAir': string;
+ 'overlay': string;
+ 'seriesTitle': string;
+ 'statusContainer': string;
+ 'statusIcon': string;
+ 'unaired': string;
+ 'underlay': string;
+ 'unmonitored': string;
+}
+export const cssExports: CssExports;
+export default cssExports;
diff --git a/frontend/src/Calendar/Events/CalendarEvent.tsx b/frontend/src/Calendar/Events/CalendarEvent.tsx
new file mode 100644
index 000000000..079256a0e
--- /dev/null
+++ b/frontend/src/Calendar/Events/CalendarEvent.tsx
@@ -0,0 +1,240 @@
+import classNames from 'classnames';
+import moment from 'moment';
+import React, { useCallback, useState } from 'react';
+import { useSelector } from 'react-redux';
+import AppState from 'App/State/AppState';
+import getStatusStyle from 'Calendar/getStatusStyle';
+import Icon from 'Components/Icon';
+import Link from 'Components/Link/Link';
+import EpisodeDetailsModal from 'Episode/EpisodeDetailsModal';
+import episodeEntities from 'Episode/episodeEntities';
+import getFinaleTypeName from 'Episode/getFinaleTypeName';
+import useEpisodeFile from 'EpisodeFile/useEpisodeFile';
+import { icons, kinds } from 'Helpers/Props';
+import useSeries from 'Series/useSeries';
+import { createQueueItemSelectorForHook } from 'Store/Selectors/createQueueItemSelector';
+import createUISettingsSelector from 'Store/Selectors/createUISettingsSelector';
+import formatTime from 'Utilities/Date/formatTime';
+import padNumber from 'Utilities/Number/padNumber';
+import translate from 'Utilities/String/translate';
+import CalendarEventQueueDetails from './CalendarEventQueueDetails';
+import styles from './CalendarEvent.css';
+
+interface CalendarEventProps {
+ id: number;
+ episodeId: number;
+ seriesId: number;
+ episodeFileId?: number;
+ title: string;
+ seasonNumber: number;
+ episodeNumber: number;
+ absoluteEpisodeNumber?: number;
+ airDateUtc: string;
+ monitored: boolean;
+ unverifiedSceneNumbering?: boolean;
+ finaleType?: string;
+ hasFile: boolean;
+ grabbed?: boolean;
+ onEventModalOpenToggle: (isOpen: boolean) => void;
+}
+
+function CalendarEvent(props: CalendarEventProps) {
+ const {
+ id,
+ seriesId,
+ episodeFileId,
+ title,
+ seasonNumber,
+ episodeNumber,
+ absoluteEpisodeNumber,
+ airDateUtc,
+ monitored,
+ unverifiedSceneNumbering,
+ finaleType,
+ hasFile,
+ grabbed,
+ onEventModalOpenToggle,
+ } = props;
+
+ const series = useSeries(seriesId);
+ const episodeFile = useEpisodeFile(episodeFileId);
+ const queueItem = useSelector(createQueueItemSelectorForHook(id));
+
+ const { timeFormat, enableColorImpairedMode } = useSelector(
+ createUISettingsSelector()
+ );
+
+ const {
+ showEpisodeInformation,
+ showFinaleIcon,
+ showSpecialIcon,
+ showCutoffUnmetIcon,
+ fullColorEvents,
+ } = useSelector((state: AppState) => state.calendar.options);
+
+ const [isDetailsModalOpen, setIsDetailsModalOpen] = useState(false);
+
+ const handlePress = useCallback(() => {
+ setIsDetailsModalOpen(true);
+ onEventModalOpenToggle(true);
+ }, [onEventModalOpenToggle]);
+
+ const handleDetailsModalClose = useCallback(() => {
+ setIsDetailsModalOpen(false);
+ onEventModalOpenToggle(false);
+ }, [onEventModalOpenToggle]);
+
+ if (!series) {
+ return null;
+ }
+
+ const startTime = moment(airDateUtc);
+ const endTime = moment(airDateUtc).add(series.runtime, 'minutes');
+ const isDownloading = !!(queueItem || grabbed);
+ const isMonitored = series.monitored && monitored;
+ const statusStyle = getStatusStyle(
+ hasFile,
+ isDownloading,
+ startTime,
+ endTime,
+ isMonitored
+ );
+ const missingAbsoluteNumber =
+ series.seriesType === 'anime' && seasonNumber > 0 && !absoluteEpisodeNumber;
+
+ return (
+
+
+
+
+ );
+}
+
+export default CalendarEvent;
diff --git a/frontend/src/Calendar/Events/CalendarEventGroup.css b/frontend/src/Calendar/Events/CalendarEventGroup.css
new file mode 100644
index 000000000..990d994ec
--- /dev/null
+++ b/frontend/src/Calendar/Events/CalendarEventGroup.css
@@ -0,0 +1,97 @@
+.eventGroup {
+ overflow-x: hidden;
+ margin: 4px 2px;
+ padding: 5px;
+ border-bottom: 1px solid var(--borderColor);
+ border-left: 4px solid var(--borderColor);
+ font-size: 12px;
+}
+
+.info,
+.airingInfo {
+ display: flex;
+}
+
+.seriesTitle {
+ @add-mixin truncate;
+ flex: 1 0 1px;
+ margin-right: 10px;
+ color: var(--calendarTextDimAlternate);
+ font-size: $defaultFontSize;
+}
+
+.airTime {
+ flex: 1 0 1px;
+ color: var(--calendarTextDim);
+}
+
+.episodeInfo {
+ margin-left: 10px;
+ color: var(--calendarTextDim);
+}
+
+.absoluteEpisodeNumber {
+ margin-left: 3px;
+}
+
+.expandContainerInline {
+ display: flex;
+ justify-content: flex-end;
+ flex: 1 0 20px;
+}
+
+.expandContainer,
+.collapseContainer {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+.collapseContainer {
+ margin-bottom: 5px;
+}
+
+.statusContainer {
+ display: flex;
+ align-items: center;
+
+ &:global(.fullColor) {
+ filter: var(--calendarFullColorFilter)
+ }
+}
+
+.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';
+}
+
+.onAir {
+ composes: onAir from '~Calendar/Events/CalendarEvent.css';
+}
+
+.missing {
+ composes: missing from '~Calendar/Events/CalendarEvent.css';
+}
+
+.premiere {
+ composes: premiere from '~Calendar/Events/CalendarEvent.css';
+}
+
+.unaired {
+ composes: unaired from '~Calendar/Events/CalendarEvent.css';
+}
diff --git a/frontend/src/Calendar/Events/CalendarEventGroup.css.d.ts b/frontend/src/Calendar/Events/CalendarEventGroup.css.d.ts
new file mode 100644
index 000000000..c527feff1
--- /dev/null
+++ b/frontend/src/Calendar/Events/CalendarEventGroup.css.d.ts
@@ -0,0 +1,25 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+ 'absoluteEpisodeNumber': string;
+ 'airTime': string;
+ 'airingInfo': string;
+ 'collapseContainer': string;
+ 'downloaded': string;
+ 'downloading': string;
+ 'episodeInfo': string;
+ 'eventGroup': string;
+ 'expandContainer': string;
+ 'expandContainerInline': string;
+ 'info': string;
+ 'missing': string;
+ 'onAir': string;
+ 'premiere': string;
+ 'seriesTitle': string;
+ 'statusContainer': string;
+ 'statusIcon': string;
+ 'unaired': string;
+ 'unmonitored': string;
+}
+export const cssExports: CssExports;
+export default cssExports;
diff --git a/frontend/src/Calendar/Events/CalendarEventGroup.tsx b/frontend/src/Calendar/Events/CalendarEventGroup.tsx
new file mode 100644
index 000000000..1ee981cfd
--- /dev/null
+++ b/frontend/src/Calendar/Events/CalendarEventGroup.tsx
@@ -0,0 +1,253 @@
+import classNames from 'classnames';
+import moment from 'moment';
+import React, { useCallback, useMemo, useState } from 'react';
+import { useSelector } from 'react-redux';
+import { createSelector } from 'reselect';
+import AppState from 'App/State/AppState';
+import getStatusStyle from 'Calendar/getStatusStyle';
+import Icon from 'Components/Icon';
+import Link from 'Components/Link/Link';
+import getFinaleTypeName from 'Episode/getFinaleTypeName';
+import { icons, kinds } from 'Helpers/Props';
+import useSeries from 'Series/useSeries';
+import createUISettingsSelector from 'Store/Selectors/createUISettingsSelector';
+import { CalendarItem } from 'typings/Calendar';
+import formatTime from 'Utilities/Date/formatTime';
+import padNumber from 'Utilities/Number/padNumber';
+import translate from 'Utilities/String/translate';
+import CalendarEvent from './CalendarEvent';
+import styles from './CalendarEventGroup.css';
+
+function createIsDownloadingSelector(episodeIds: number[]) {
+ return createSelector(
+ (state: AppState) => state.queue.details,
+ (details) => {
+ return details.items.some((item) => {
+ return !!(item.episodeId && episodeIds.includes(item.episodeId));
+ });
+ }
+ );
+}
+
+interface CalendarEventGroupProps {
+ episodeIds: number[];
+ seriesId: number;
+ events: CalendarItem[];
+ onEventModalOpenToggle: (isOpen: boolean) => void;
+}
+
+function CalendarEventGroup({
+ episodeIds,
+ seriesId,
+ events,
+ onEventModalOpenToggle,
+}: CalendarEventGroupProps) {
+ const isDownloading = useSelector(createIsDownloadingSelector(episodeIds));
+ const series = useSeries(seriesId)!;
+
+ const { timeFormat, enableColorImpairedMode } = useSelector(
+ createUISettingsSelector()
+ );
+
+ const { showEpisodeInformation, showFinaleIcon, fullColorEvents } =
+ useSelector((state: AppState) => state.calendar.options);
+
+ const [isExpanded, setIsExpanded] = useState(false);
+
+ const firstEpisode = events[0];
+ const lastEpisode = events[events.length - 1];
+ const airDateUtc = firstEpisode.airDateUtc;
+ const startTime = moment(airDateUtc);
+ const endTime = moment(lastEpisode.airDateUtc).add(series.runtime, 'minutes');
+ const seasonNumber = firstEpisode.seasonNumber;
+
+ const { allDownloaded, anyQueued, anyMonitored, allAbsoluteEpisodeNumbers } =
+ useMemo(() => {
+ let files = 0;
+ let queued = 0;
+ let monitored = 0;
+ let absoluteEpisodeNumbers = 0;
+
+ events.forEach((event) => {
+ if (event.episodeFileId) {
+ files++;
+ }
+
+ if (event.queued) {
+ queued++;
+ }
+
+ if (series.monitored && event.monitored) {
+ monitored++;
+ }
+
+ if (event.absoluteEpisodeNumber) {
+ absoluteEpisodeNumbers++;
+ }
+ });
+
+ return {
+ allDownloaded: files === events.length,
+ anyQueued: queued > 0,
+ anyMonitored: monitored > 0,
+ allAbsoluteEpisodeNumbers: absoluteEpisodeNumbers === events.length,
+ };
+ }, [series, events]);
+
+ const anyDownloading = isDownloading || anyQueued;
+
+ const statusStyle = getStatusStyle(
+ allDownloaded,
+ anyDownloading,
+ startTime,
+ endTime,
+ anyMonitored
+ );
+ const isMissingAbsoluteNumber =
+ series.seriesType === 'anime' &&
+ seasonNumber > 0 &&
+ !allAbsoluteEpisodeNumbers;
+
+ const handleExpandPress = useCallback(() => {
+ setIsExpanded((state) => !state);
+ }, []);
+
+ if (isExpanded) {
+ return (
+
+
+
+
+
+
+ {showEpisodeInformation ? (
+ {series.title}
+
+
+ {missingAbsoluteNumber ? (
+
+
+
+ ) : null}
+
+ {title}
+
+
+ {seasonNumber}x{padNumber(episodeNumber, 2)}
+ {series.seriesType === 'anime' && absoluteEpisodeNumber ? (
+
+ ({absoluteEpisodeNumber})
+
+ ) : null}
+
+
+ {formatTime(airDateUtc, timeFormat)} -{' '}
+ {formatTime(endTime.toISOString(), timeFormat, {
+ includeMinuteZero: true,
+ })}
+
+
+ {events.map((event) => {
+ return (
+
+ );
+ }
+
+ return (
+
+
+ );
+}
+
+export default CalendarEventGroup;
diff --git a/frontend/src/Calendar/Events/CalendarEventQueueDetails.tsx b/frontend/src/Calendar/Events/CalendarEventQueueDetails.tsx
new file mode 100644
index 000000000..2372bc78e
--- /dev/null
+++ b/frontend/src/Calendar/Events/CalendarEventQueueDetails.tsx
@@ -0,0 +1,58 @@
+import React from 'react';
+import QueueDetails from 'Activity/Queue/QueueDetails';
+import CircularProgressBar from 'Components/CircularProgressBar';
+import {
+ QueueTrackedDownloadState,
+ QueueTrackedDownloadStatus,
+ StatusMessage,
+} from 'typings/Queue';
+
+interface CalendarEventQueueDetailsProps {
+ title: string;
+ size: number;
+ sizeleft: number;
+ estimatedCompletionTime?: string;
+ status: string;
+ trackedDownloadState: QueueTrackedDownloadState;
+ trackedDownloadStatus: QueueTrackedDownloadStatus;
+ statusMessages?: StatusMessage[];
+ errorMessage?: string;
+}
+
+function CalendarEventQueueDetails({
+ title,
+ size,
+ sizeleft,
+ estimatedCompletionTime,
+ status,
+ trackedDownloadState,
+ trackedDownloadStatus,
+ statusMessages,
+ errorMessage,
+}: CalendarEventQueueDetailsProps) {
+ const progress = size ? 100 - (sizeleft / size) * 100 : 0;
+
+ return (
+
+
+
+ {series.title}
+
+
+ {isMissingAbsoluteNumber ? (
+
+
+
+
+ {showEpisodeInformation ? (
+
+
+
+ {formatTime(airDateUtc, timeFormat)} -{' '}
+ {formatTime(endTime.toISOString(), timeFormat, {
+ includeMinuteZero: true,
+ })}
+
+
+ {showEpisodeInformation ? (
+
+ {seasonNumber}x{padNumber(firstEpisode.episodeNumber, 2)}-
+ {padNumber(lastEpisode.episodeNumber, 2)}
+ {series.seriesType === 'anime' &&
+ firstEpisode.absoluteEpisodeNumber &&
+ lastEpisode.absoluteEpisodeNumber ? (
+
+ ({firstEpisode.absoluteEpisodeNumber}-
+ {lastEpisode.absoluteEpisodeNumber})
+
+ ) : null}
+
+ ) : (
+
+
+ {isSmallScreen ?
+ );
+}
+
+export default CalendarHeader;
diff --git a/frontend/src/Calendar/Header/CalendarHeaderViewButton.tsx b/frontend/src/Calendar/Header/CalendarHeaderViewButton.tsx
new file mode 100644
index 000000000..c9366f9ef
--- /dev/null
+++ b/frontend/src/Calendar/Header/CalendarHeaderViewButton.tsx
@@ -0,0 +1,34 @@
+import React, { useCallback } from 'react';
+import { CalendarView } from 'Calendar/calendarViews';
+import Button, { ButtonProps } from 'Components/Link/Button';
+import titleCase from 'Utilities/String/titleCase';
+
+interface CalendarHeaderViewButtonProps
+ extends Omit{title}
: null}
+
+
+
+
+
+
+
+
+
+
+
+ {isSmallScreen ? null : (
+ {title}
+ )}
+
+
+ {isFetching ? (
+
+
+
+ );
+}
+
+export default Legend;
diff --git a/frontend/src/Calendar/Legend/LegendIconItem.css b/frontend/src/Calendar/Legend/LegendIconItem.css
new file mode 100644
index 000000000..c6c12027d
--- /dev/null
+++ b/frontend/src/Calendar/Legend/LegendIconItem.css
@@ -0,0 +1,14 @@
+.legendIconItem {
+ margin: 3px 0;
+ margin-right: 6px;
+ width: 150px;
+ cursor: default;
+}
+
+.icon {
+ margin-right: 5px;
+
+ &:global(.fullColorEvents) {
+ filter: var(--calendarFullColorFilter)
+ }
+}
diff --git a/frontend/src/Calendar/Legend/LegendIconItem.css.d.ts b/frontend/src/Calendar/Legend/LegendIconItem.css.d.ts
new file mode 100644
index 000000000..5d618d24b
--- /dev/null
+++ b/frontend/src/Calendar/Legend/LegendIconItem.css.d.ts
@@ -0,0 +1,8 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+ 'icon': string;
+ 'legendIconItem': string;
+}
+export const cssExports: CssExports;
+export default cssExports;
diff --git a/frontend/src/Calendar/Legend/LegendIconItem.tsx b/frontend/src/Calendar/Legend/LegendIconItem.tsx
new file mode 100644
index 000000000..88a758c44
--- /dev/null
+++ b/frontend/src/Calendar/Legend/LegendIconItem.tsx
@@ -0,0 +1,33 @@
+import { FontAwesomeIconProps } from '@fortawesome/react-fontawesome';
+import classNames from 'classnames';
+import React from 'react';
+import Icon, { IconProps } from 'Components/Icon';
+import styles from './LegendIconItem.css';
+
+interface LegendIconItemProps extends Pick
+
+
+
+
+
+
+
+
+
+
+
+ {iconsToShow.length > 1 ? (
+
+ {iconsToShow[1]}
+ {iconsToShow[2]}
+
+ ) : null}
+ {iconsToShow.length > 3 ? {iconsToShow[3]}
: null}
+
+
+ );
+}
+
+export default LegendIconItem;
diff --git a/frontend/src/Calendar/Legend/LegendItem.css b/frontend/src/Calendar/Legend/LegendItem.css
new file mode 100644
index 000000000..c71a6d916
--- /dev/null
+++ b/frontend/src/Calendar/Legend/LegendItem.css
@@ -0,0 +1,41 @@
+.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';
+}
+
+.onAir {
+ composes: onAir from '~Calendar/Events/CalendarEvent.css';
+}
+
+.missing {
+ composes: missing from '~Calendar/Events/CalendarEvent.css';
+}
+
+.premiere {
+ composes: premiere from '~Calendar/Events/CalendarEvent.css';
+}
+
+.unaired {
+ composes: unaired from '~Calendar/Events/CalendarEvent.css';
+}
diff --git a/frontend/src/Calendar/Legend/LegendItem.css.d.ts b/frontend/src/Calendar/Legend/LegendItem.css.d.ts
new file mode 100644
index 000000000..155e029c6
--- /dev/null
+++ b/frontend/src/Calendar/Legend/LegendItem.css.d.ts
@@ -0,0 +1,14 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+ 'downloaded': string;
+ 'downloading': string;
+ 'legendItem': string;
+ 'missing': string;
+ 'onAir': string;
+ 'premiere': string;
+ 'unaired': string;
+ 'unmonitored': string;
+}
+export const cssExports: CssExports;
+export default cssExports;
diff --git a/frontend/src/Calendar/Legend/LegendItem.tsx b/frontend/src/Calendar/Legend/LegendItem.tsx
new file mode 100644
index 000000000..40466ab9d
--- /dev/null
+++ b/frontend/src/Calendar/Legend/LegendItem.tsx
@@ -0,0 +1,41 @@
+import classNames from 'classnames';
+import React from 'react';
+import { CalendarStatus } from 'typings/Calendar';
+import titleCase from 'Utilities/String/titleCase';
+import styles from './LegendItem.css';
+
+interface LegendItemProps {
+ name?: string;
+ status: CalendarStatus;
+ tooltip: string;
+ isAgendaView: boolean;
+ fullColorEvents: boolean;
+ colorImpairedMode: boolean;
+}
+
+function LegendItem(props: LegendItemProps) {
+ const {
+ name,
+ status,
+ tooltip,
+ isAgendaView,
+ fullColorEvents,
+ colorImpairedMode,
+ } = props;
+
+ return (
+
+ {name ? name : titleCase(status)}
+
+ );
+}
+
+export default LegendItem;
diff --git a/frontend/src/Calendar/Options/CalendarOptionsModal.tsx b/frontend/src/Calendar/Options/CalendarOptionsModal.tsx
new file mode 100644
index 000000000..ae782a684
--- /dev/null
+++ b/frontend/src/Calendar/Options/CalendarOptionsModal.tsx
@@ -0,0 +1,21 @@
+import React from 'react';
+import Modal from 'Components/Modal/Modal';
+import CalendarOptionsModalContent from './CalendarOptionsModalContent';
+
+interface CalendarOptionsModalProps {
+ isOpen: boolean;
+ onModalClose: () => void;
+}
+
+function CalendarOptionsModal({
+ isOpen,
+ onModalClose,
+}: CalendarOptionsModalProps) {
+ return (
+ {children}
;
+}
+
+export default Alert;
diff --git a/frontend/src/Components/Card.css b/frontend/src/Components/Card.css
new file mode 100644
index 000000000..49a9abd76
--- /dev/null
+++ b/frontend/src/Components/Card.css
@@ -0,0 +1,19 @@
+.card {
+ position: relative;
+ margin: 10px;
+ padding: 10px;
+ border-radius: 3px;
+ background-color: var(--cardBackgroundColor);
+ box-shadow: 0 0 10px 1px var(--cardShadowColor);
+ color: var(--defaultColor);
+}
+
+.underlay {
+ @add-mixin cover;
+}
+
+.overlay {
+ @add-mixin linkOverlay;
+
+ position: relative;
+}
diff --git a/frontend/src/Components/Card.css.d.ts b/frontend/src/Components/Card.css.d.ts
new file mode 100644
index 000000000..fb3ea792e
--- /dev/null
+++ b/frontend/src/Components/Card.css.d.ts
@@ -0,0 +1,9 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+ 'card': string;
+ 'overlay': string;
+ 'underlay': string;
+}
+export const cssExports: CssExports;
+export default cssExports;
diff --git a/frontend/src/Components/Card.tsx b/frontend/src/Components/Card.tsx
new file mode 100644
index 000000000..24588c841
--- /dev/null
+++ b/frontend/src/Components/Card.tsx
@@ -0,0 +1,39 @@
+import React from 'react';
+import Link, { LinkProps } from 'Components/Link/Link';
+import styles from './Card.css';
+
+interface CardProps extends Pick
+
+
+
+ );
+ }
+
+ return (
+
+ {children}
+
+ );
+}
+
+export default Card;
diff --git a/frontend/src/Components/CircularProgressBar.css b/frontend/src/Components/CircularProgressBar.css
new file mode 100644
index 000000000..32b349404
--- /dev/null
+++ b/frontend/src/Components/CircularProgressBar.css
@@ -0,0 +1,21 @@
+.circularProgressBarContainer {
+ position: relative;
+ display: inline-block;
+ vertical-align: top;
+ text-align: center;
+}
+
+.circularProgressBar {
+ position: absolute;
+ top: 0;
+ left: 0;
+ transform: rotate(-90deg);
+ transform-origin: center center;
+}
+
+.circularProgressBarText {
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ font-weight: bold;
+}
diff --git a/frontend/src/Components/CircularProgressBar.css.d.ts b/frontend/src/Components/CircularProgressBar.css.d.ts
new file mode 100644
index 000000000..45179620c
--- /dev/null
+++ b/frontend/src/Components/CircularProgressBar.css.d.ts
@@ -0,0 +1,9 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+ 'circularProgressBar': string;
+ 'circularProgressBarContainer': string;
+ 'circularProgressBarText': string;
+}
+export const cssExports: CssExports;
+export default cssExports;
diff --git a/frontend/src/Components/CircularProgressBar.tsx b/frontend/src/Components/CircularProgressBar.tsx
new file mode 100644
index 000000000..b14f5fc6a
--- /dev/null
+++ b/frontend/src/Components/CircularProgressBar.tsx
@@ -0,0 +1,99 @@
+import React, { useCallback, useEffect, useState } from 'react';
+import styles from './CircularProgressBar.css';
+
+interface CircularProgressBarProps {
+ className?: string;
+ containerClassName?: string;
+ size?: number;
+ progress: number;
+ strokeWidth?: number;
+ strokeColor?: string;
+ showProgressText?: boolean;
+}
+
+function CircularProgressBar({
+ className = styles.circularProgressBar,
+ containerClassName = styles.circularProgressBarContainer,
+ size = 60,
+ strokeWidth = 5,
+ strokeColor = '#35c5f4',
+ showProgressText = false,
+ progress,
+}: CircularProgressBarProps) {
+ const [currentProgress, setCurrentProgress] = useState(0);
+ const raf = React.useRef{children}
+
+
+
+ {showProgressText && (
+
+ );
+}
+
+export default CircularProgressBar;
diff --git a/frontend/src/Components/DescriptionList/DescriptionList.css b/frontend/src/Components/DescriptionList/DescriptionList.css
new file mode 100644
index 000000000..230347f80
--- /dev/null
+++ b/frontend/src/Components/DescriptionList/DescriptionList.css
@@ -0,0 +1,4 @@
+.descriptionList {
+ margin-top: 0;
+ margin-bottom: 0;
+}
diff --git a/frontend/src/Components/DescriptionList/DescriptionList.css.d.ts b/frontend/src/Components/DescriptionList/DescriptionList.css.d.ts
new file mode 100644
index 000000000..34c1578a4
--- /dev/null
+++ b/frontend/src/Components/DescriptionList/DescriptionList.css.d.ts
@@ -0,0 +1,7 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+ 'descriptionList': string;
+}
+export const cssExports: CssExports;
+export default cssExports;
diff --git a/frontend/src/Components/DescriptionList/DescriptionList.tsx b/frontend/src/Components/DescriptionList/DescriptionList.tsx
new file mode 100644
index 000000000..6deee77e5
--- /dev/null
+++ b/frontend/src/Components/DescriptionList/DescriptionList.tsx
@@ -0,0 +1,15 @@
+import React from 'react';
+import styles from './DescriptionList.css';
+
+interface DescriptionListProps {
+ className?: string;
+ children?: React.ReactNode;
+}
+
+function DescriptionList(props: DescriptionListProps) {
+ const { className = styles.descriptionList, children } = props;
+
+ return {progressText}
+ )}
+ - {children}
+
+ {title}
+
+
+
+ {data}
+
+
+ );
+}
+
+export default DescriptionListItem;
diff --git a/frontend/src/Components/DescriptionList/DescriptionListItemDescription.css b/frontend/src/Components/DescriptionList/DescriptionListItemDescription.css
new file mode 100644
index 000000000..786123fb7
--- /dev/null
+++ b/frontend/src/Components/DescriptionList/DescriptionListItemDescription.css
@@ -0,0 +1,11 @@
+.description {
+ margin-left: 0;
+ line-height: $lineHeight;
+ overflow-wrap: break-word;
+}
+
+@media (min-width: 768px) {
+ .description {
+ margin-left: 180px;
+ }
+}
diff --git a/frontend/src/Components/DescriptionList/DescriptionListItemDescription.css.d.ts b/frontend/src/Components/DescriptionList/DescriptionListItemDescription.css.d.ts
new file mode 100644
index 000000000..ff7055b0f
--- /dev/null
+++ b/frontend/src/Components/DescriptionList/DescriptionListItemDescription.css.d.ts
@@ -0,0 +1,7 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+ 'description': string;
+}
+export const cssExports: CssExports;
+export default cssExports;
diff --git a/frontend/src/Components/DescriptionList/DescriptionListItemDescription.tsx b/frontend/src/Components/DescriptionList/DescriptionListItemDescription.tsx
new file mode 100644
index 000000000..e08c117dc
--- /dev/null
+++ b/frontend/src/Components/DescriptionList/DescriptionListItemDescription.tsx
@@ -0,0 +1,17 @@
+import React, { ReactNode } from 'react';
+import styles from './DescriptionListItemDescription.css';
+
+export interface DescriptionListItemDescriptionProps {
+ className?: string;
+ children?: ReactNode;
+}
+
+function DescriptionListItemDescription(
+ props: DescriptionListItemDescriptionProps
+) {
+ const { className = styles.description, children } = props;
+
+ return
+ {children}
+
+ );
+}
+
+export default DragPreviewLayer;
diff --git a/frontend/src/Components/Error/ErrorBoundary.tsx b/frontend/src/Components/Error/ErrorBoundary.tsx
new file mode 100644
index 000000000..6b27f7a09
--- /dev/null
+++ b/frontend/src/Components/Error/ErrorBoundary.tsx
@@ -0,0 +1,46 @@
+import * as sentry from '@sentry/browser';
+import React, { Component, ErrorInfo } from 'react';
+
+interface ErrorBoundaryProps {
+ children: React.ReactNode;
+ errorComponent: React.ElementType;
+}
+
+interface ErrorBoundaryState {
+ error: Error | null;
+ info: ErrorInfo | null;
+}
+
+// Class component until componentDidCatch is supported in functional components
+class ErrorBoundary extends Component
+
+ );
+}
+
+export default ErrorBoundaryError;
diff --git a/frontend/src/Components/FieldSet.css b/frontend/src/Components/FieldSet.css
new file mode 100644
index 000000000..9ea0dbab1
--- /dev/null
+++ b/frontend/src/Components/FieldSet.css
@@ -0,0 +1,24 @@
+.fieldSet {
+ margin: 0;
+ margin-bottom: 20px;
+ padding: 0;
+ min-width: 0;
+ border: 0;
+}
+
+.legend {
+ display: block;
+ margin-bottom: 21px;
+ padding: 0;
+ width: 100%;
+ border: 0;
+ border-bottom: 1px solid #e5e5e5;
+ color: var(--textColor);
+ font-size: 21px;
+ line-height: inherit;
+
+ &.small {
+ color: #909293;
+ font-size: 18px;
+ }
+}
diff --git a/frontend/src/Components/FieldSet.css.d.ts b/frontend/src/Components/FieldSet.css.d.ts
new file mode 100644
index 000000000..74e99779a
--- /dev/null
+++ b/frontend/src/Components/FieldSet.css.d.ts
@@ -0,0 +1,9 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+ 'fieldSet': string;
+ 'legend': string;
+ 'small': string;
+}
+export const cssExports: CssExports;
+export default cssExports;
diff --git a/frontend/src/Components/FieldSet.tsx b/frontend/src/Components/FieldSet.tsx
new file mode 100644
index 000000000..c2ff03a7f
--- /dev/null
+++ b/frontend/src/Components/FieldSet.tsx
@@ -0,0 +1,29 @@
+import classNames from 'classnames';
+import React, { ComponentProps } from 'react';
+import { sizes } from 'Helpers/Props';
+import { Size } from 'Helpers/Props/sizes';
+import styles from './FieldSet.css';
+
+interface FieldSetProps {
+ size?: Size;
+ legend?: ComponentProps<'legend'>['children'];
+ children?: React.ReactNode;
+}
+
+function FieldSet({ size = sizes.MEDIUM, legend, children }: FieldSetProps) {
+ return (
+
+ );
+}
+
+export default FieldSet;
diff --git a/frontend/src/Components/FileBrowser/FileBrowserModal.css b/frontend/src/Components/FileBrowser/FileBrowserModal.css
new file mode 100644
index 000000000..59dba1397
--- /dev/null
+++ b/frontend/src/Components/FileBrowser/FileBrowserModal.css
@@ -0,0 +1,5 @@
+.modal {
+ composes: modal from '~Components/Modal/Modal.css';
+
+ height: 600px;
+}
diff --git a/frontend/src/Components/FileBrowser/FileBrowserModal.css.d.ts b/frontend/src/Components/FileBrowser/FileBrowserModal.css.d.ts
new file mode 100644
index 000000000..5d00cca7e
--- /dev/null
+++ b/frontend/src/Components/FileBrowser/FileBrowserModal.css.d.ts
@@ -0,0 +1,7 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+ 'modal': string;
+}
+export const cssExports: CssExports;
+export default cssExports;
diff --git a/frontend/src/Components/FileBrowser/FileBrowserModal.tsx b/frontend/src/Components/FileBrowser/FileBrowserModal.tsx
new file mode 100644
index 000000000..0925890de
--- /dev/null
+++ b/frontend/src/Components/FileBrowser/FileBrowserModal.tsx
@@ -0,0 +1,23 @@
+import React from 'react';
+import Modal from 'Components/Modal/Modal';
+import FileBrowserModalContent, {
+ FileBrowserModalContentProps,
+} from './FileBrowserModalContent';
+import styles from './FileBrowserModal.css';
+
+interface FileBrowserModalProps extends FileBrowserModalContentProps {
+ isOpen: boolean;
+ onModalClose: () => void;
+}
+
+function FileBrowserModal(props: FileBrowserModalProps) {
+ const { isOpen, onModalClose, ...otherProps } = props;
+
+ return (
+ {message}
+
+
+ 
+
+
+
+
+ {error ?
+ {error.message}
: null}
+
+ {detailedError ? (
+ detailedError.map((d, index) => {
+ return (
+
+ {` at ${d.functionName} (${d.fileName}:${d.lineNumber}:${d.columnNumber})`}
+
+ );
+ })
+ ) : (
+ {info.componentStack}
+ )}
+
+ Version: {window.Sonarr.version}
+ {translate('ErrorLoadingContents')}
: null}
+
+ {isPopulated && !error ? (
+
+
+ );
+ }
+
+ return (
+
+
+
+
+ {translate('Label')}
+
+
+
+
+
+ {translate('Filters')}
+
+
+
+ {
+ filters.map((filter, index) => {
+ return (
+
+
+
+ );
+ }
+}
+
+FilterBuilderRow.propTypes = {
+ index: PropTypes.number.isRequired,
+ filterKey: PropTypes.string,
+ filterValue: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.array, PropTypes.object]),
+ filterType: PropTypes.string,
+ filterCount: PropTypes.number.isRequired,
+ filterBuilderProps: PropTypes.arrayOf(PropTypes.object).isRequired,
+ sectionItems: PropTypes.arrayOf(PropTypes.object).isRequired,
+ onFilterChange: PropTypes.func.isRequired,
+ onAddPress: PropTypes.func.isRequired,
+ onRemovePress: PropTypes.func.isRequired
+};
+
+export default FilterBuilderRow;
diff --git a/frontend/src/Components/Filter/Builder/FilterBuilderRowValue.js b/frontend/src/Components/Filter/Builder/FilterBuilderRowValue.js
new file mode 100644
index 000000000..217626c90
--- /dev/null
+++ b/frontend/src/Components/Filter/Builder/FilterBuilderRowValue.js
@@ -0,0 +1,160 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import TagInput from 'Components/Form/Tag/TagInput';
+import { filterBuilderTypes, filterBuilderValueTypes, kinds } from 'Helpers/Props';
+import tagShape from 'Helpers/Props/Shapes/tagShape';
+import convertToBytes from 'Utilities/Number/convertToBytes';
+import formatBytes from 'Utilities/Number/formatBytes';
+import FilterBuilderRowValueTag from './FilterBuilderRowValueTag';
+
+export const NAME = 'value';
+
+function getTagDisplayValue(value, selectedFilterBuilderProp) {
+ if (selectedFilterBuilderProp.valueType === filterBuilderValueTypes.BYTES) {
+ return formatBytes(value);
+ }
+
+ return value;
+}
+
+function getValue(input, selectedFilterBuilderProp) {
+ if (selectedFilterBuilderProp.valueType === filterBuilderValueTypes.BYTES) {
+ const match = input.match(/^(\d+)([kmgt](i?b)?)$/i);
+
+ if (match && match.length > 1) {
+ const [, value, unit] = input.match(/^(\d+)([kmgt](i?b)?)$/i);
+
+ switch (unit.toLowerCase()) {
+ case 'k':
+ return convertToBytes(value, 1, true);
+ case 'm':
+ return convertToBytes(value, 2, true);
+ case 'g':
+ return convertToBytes(value, 3, true);
+ case 't':
+ return convertToBytes(value, 4, true);
+ case 'kb':
+ return convertToBytes(value, 1, true);
+ case 'mb':
+ return convertToBytes(value, 2, true);
+ case 'gb':
+ return convertToBytes(value, 3, true);
+ case 'tb':
+ return convertToBytes(value, 4, true);
+ case 'kib':
+ return convertToBytes(value, 1, true);
+ case 'mib':
+ return convertToBytes(value, 2, true);
+ case 'gib':
+ return convertToBytes(value, 3, true);
+ case 'tib':
+ return convertToBytes(value, 4, true);
+ default:
+ return parseInt(value);
+ }
+ }
+ }
+
+ if (selectedFilterBuilderProp.type === filterBuilderTypes.NUMBER) {
+ return parseInt(input);
+ }
+
+ return input;
+}
+
+class FilterBuilderRowValue extends Component {
+
+ //
+ // Listeners
+
+ onTagAdd = (tag) => {
+ const {
+ filterValue,
+ selectedFilterBuilderProp,
+ onChange
+ } = this.props;
+
+ let value = tag.id;
+
+ if (value == null) {
+ value = getValue(tag.name, selectedFilterBuilderProp);
+ }
+
+ onChange({
+ name: NAME,
+ value: [...filterValue, value]
+ });
+ };
+
+ onTagDelete = ({ index }) => {
+ const {
+ filterValue,
+ onChange
+ } = this.props;
+
+ const value = filterValue.filter((v, i) => i !== index);
+
+ onChange({
+ name: NAME,
+ value
+ });
+ };
+
+ //
+ // Render
+
+ render() {
+ const {
+ filterValue,
+ selectedFilterBuilderProp,
+ tagList
+ } = this.props;
+
+ const hasItems = !!tagList.length;
+
+ const tags = filterValue.map((id) => {
+ if (hasItems) {
+ const tag = tagList.find((t) => t.id === id);
+
+ return {
+ id,
+ name: tag && tag.name
+ };
+ }
+
+ return {
+ id,
+ name: getTagDisplayValue(id, selectedFilterBuilderProp)
+ };
+ });
+
+ return (
+
+ {
+ filterKey &&
+
+
+
+ {
+ filterType &&
+
+
+
+ {
+ filterValue != null && !!selectedFilterBuilderProp &&
+
+
+
+
+
+
+ );
+}
+
+FilterBuilderRowValueTag.propTypes = {
+ isLastTag: PropTypes.bool.isRequired
+};
+
+export default FilterBuilderRowValueTag;
diff --git a/frontend/src/Components/Filter/Builder/HistoryEventTypeFilterBuilderRowValue.tsx b/frontend/src/Components/Filter/Builder/HistoryEventTypeFilterBuilderRowValue.tsx
new file mode 100644
index 000000000..4ecddf646
--- /dev/null
+++ b/frontend/src/Components/Filter/Builder/HistoryEventTypeFilterBuilderRowValue.tsx
@@ -0,0 +1,51 @@
+import React from 'react';
+import translate from 'Utilities/String/translate';
+import FilterBuilderRowValue from './FilterBuilderRowValue';
+import FilterBuilderRowValueProps from './FilterBuilderRowValueProps';
+
+const EVENT_TYPE_OPTIONS = [
+ {
+ id: 1,
+ get name() {
+ return translate('Grabbed');
+ },
+ },
+ {
+ id: 3,
+ get name() {
+ return translate('Imported');
+ },
+ },
+ {
+ id: 4,
+ get name() {
+ return translate('Failed');
+ },
+ },
+ {
+ id: 5,
+ get name() {
+ return translate('Deleted');
+ },
+ },
+ {
+ id: 6,
+ get name() {
+ return translate('Renamed');
+ },
+ },
+ {
+ id: 7,
+ get name() {
+ return translate('Ignored');
+ },
+ },
+];
+
+function HistoryEventTypeFilterBuilderRowValue(
+ props: FilterBuilderRowValueProps
+) {
+ return
+ {translate('Or')}
+
+ }
+
+
+ );
+ }
+}
+
+CustomFilter.propTypes = {
+ id: PropTypes.number.isRequired,
+ label: PropTypes.string.isRequired,
+ selectedFilterKey: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
+ isDeleting: PropTypes.bool.isRequired,
+ deleteError: PropTypes.object,
+ dispatchSetFilter: PropTypes.func.isRequired,
+ onEditPress: PropTypes.func.isRequired,
+ dispatchDeleteCustomFilter: PropTypes.func.isRequired
+};
+
+export default CustomFilter;
diff --git a/frontend/src/Components/Filter/CustomFilters/CustomFiltersModalContent.css b/frontend/src/Components/Filter/CustomFilters/CustomFiltersModalContent.css
new file mode 100644
index 000000000..c391764dc
--- /dev/null
+++ b/frontend/src/Components/Filter/CustomFilters/CustomFiltersModalContent.css
@@ -0,0 +1,3 @@
+.addButtonContainer {
+ margin-top: 15px;
+}
diff --git a/frontend/src/Components/Filter/CustomFilters/CustomFiltersModalContent.css.d.ts b/frontend/src/Components/Filter/CustomFilters/CustomFiltersModalContent.css.d.ts
new file mode 100644
index 000000000..b505d0767
--- /dev/null
+++ b/frontend/src/Components/Filter/CustomFilters/CustomFiltersModalContent.css.d.ts
@@ -0,0 +1,7 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+ 'addButtonContainer': string;
+}
+export const cssExports: CssExports;
+export default cssExports;
diff --git a/frontend/src/Components/Filter/CustomFilters/CustomFiltersModalContent.js b/frontend/src/Components/Filter/CustomFilters/CustomFiltersModalContent.js
new file mode 100644
index 000000000..99cb6ec5c
--- /dev/null
+++ b/frontend/src/Components/Filter/CustomFilters/CustomFiltersModalContent.js
@@ -0,0 +1,84 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import Button from 'Components/Link/Button';
+import ModalBody from 'Components/Modal/ModalBody';
+import ModalContent from 'Components/Modal/ModalContent';
+import ModalFooter from 'Components/Modal/ModalFooter';
+import ModalHeader from 'Components/Modal/ModalHeader';
+import sortByProp from 'Utilities/Array/sortByProp';
+import translate from 'Utilities/String/translate';
+import CustomFilter from './CustomFilter';
+import styles from './CustomFiltersModalContent.css';
+
+function CustomFiltersModalContent(props) {
+ const {
+ selectedFilterKey,
+ customFilters,
+ isDeleting,
+ deleteError,
+ dispatchDeleteCustomFilter,
+ dispatchSetFilter,
+ onAddCustomFilter,
+ onEditCustomFilter,
+ onModalClose
+ } = props;
+
+ return (
+
+ {label}
+
+
+
+
+
+
+
+
+
+
+ );
+ }}
+
+
+ );
+ }}
+
+ {children}
+
+
+
+ );
+}
+
+export default CaptchaInput;
diff --git a/frontend/src/Components/Form/CheckInput.css b/frontend/src/Components/Form/CheckInput.css
new file mode 100644
index 000000000..171121482
--- /dev/null
+++ b/frontend/src/Components/Form/CheckInput.css
@@ -0,0 +1,105 @@
+.container {
+ position: relative;
+ display: flex;
+ flex: 1 1 65%;
+ user-select: none;
+}
+
+.label {
+ display: flex;
+ margin-bottom: 0;
+ min-height: 21px;
+ font-weight: normal;
+ cursor: pointer;
+}
+
+.checkbox {
+ position: absolute;
+ opacity: 0;
+ cursor: pointer;
+ pointer-events: none;
+
+ &:global(.isDisabled) {
+ cursor: not-allowed;
+ }
+}
+
+.input {
+ flex: 1 0 auto;
+ margin-top: 7px;
+ margin-right: 5px;
+ width: 20px;
+ height: 20px;
+ border: 1px solid #ccc;
+ border-radius: 2px;
+ background-color: var(--white);
+ color: var(--white);
+ text-align: center;
+ line-height: 20px;
+}
+
+.checkbox:focus + .input {
+ outline: 0;
+ border-color: var(--inputFocusBorderColor);
+ box-shadow: inset 0 1px 1px var(--inputBoxShadowColor), 0 0 8px var(--inputFocusBoxShadowColor);
+}
+
+.dangerIsChecked {
+ border-color: var(--dangerColor);
+ background-color: var(--dangerColor);
+
+ &.isDisabled {
+ opacity: 0.7;
+ }
+}
+
+.primaryIsChecked {
+ border-color: var(--primaryColor);
+ background-color: var(--primaryColor);
+
+ &.isDisabled {
+ opacity: 0.7;
+ }
+}
+
+.successIsChecked {
+ border-color: var(--successColor);
+ background-color: var(--successColor);
+
+ &.isDisabled {
+ opacity: 0.7;
+ }
+}
+
+.warningIsChecked {
+ border-color: var(--warningColor);
+ background-color: var(--warningColor);
+
+ &.isDisabled {
+ opacity: 0.7;
+ }
+}
+
+.isNotChecked {
+ &.isDisabled {
+ border-color: var(--disabledCheckInputColor);
+ background-color: var(--disabledCheckInputColor);
+ opacity: 0.7;
+ }
+}
+
+.isIndeterminate {
+ border-color: var(--gray);
+ background-color: var(--gray);
+}
+
+.helpText {
+ composes: helpText from '~Components/Form/FormInputHelpText.css';
+
+ margin-top: 8px;
+ margin-left: 5px;
+}
+
+.isDisabled {
+ cursor: not-allowed;
+}
diff --git a/frontend/src/Components/Form/CheckInput.css.d.ts b/frontend/src/Components/Form/CheckInput.css.d.ts
new file mode 100644
index 000000000..bba6b63bb
--- /dev/null
+++ b/frontend/src/Components/Form/CheckInput.css.d.ts
@@ -0,0 +1,18 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+ 'checkbox': string;
+ 'container': string;
+ 'dangerIsChecked': string;
+ 'helpText': string;
+ 'input': string;
+ 'isDisabled': string;
+ 'isIndeterminate': string;
+ 'isNotChecked': string;
+ 'label': string;
+ 'primaryIsChecked': string;
+ 'successIsChecked': string;
+ 'warningIsChecked': string;
+}
+export const cssExports: CssExports;
+export default cssExports;
diff --git a/frontend/src/Components/Form/CheckInput.tsx b/frontend/src/Components/Form/CheckInput.tsx
new file mode 100644
index 000000000..b7080cfdd
--- /dev/null
+++ b/frontend/src/Components/Form/CheckInput.tsx
@@ -0,0 +1,141 @@
+import classNames from 'classnames';
+import React, { SyntheticEvent, useCallback, useEffect, useRef } from 'react';
+import Icon from 'Components/Icon';
+import { icons } from 'Helpers/Props';
+import { Kind } from 'Helpers/Props/kinds';
+import { CheckInputChanged } from 'typings/inputs';
+import FormInputHelpText from './FormInputHelpText';
+import styles from './CheckInput.css';
+
+interface ChangeEvent
+
+
+
+
+ {siteKey && secretToken ? (
+
+
+ ) : null}
+
+
+
+ );
+}
+
+export default CheckInput;
diff --git a/frontend/src/Components/Form/Form.css b/frontend/src/Components/Form/Form.css
new file mode 100644
index 000000000..52e79aec4
--- /dev/null
+++ b/frontend/src/Components/Form/Form.css
@@ -0,0 +1,3 @@
+.validationFailures {
+ margin-bottom: 20px;
+}
diff --git a/frontend/src/Components/Form/Form.css.d.ts b/frontend/src/Components/Form/Form.css.d.ts
new file mode 100644
index 000000000..178f2fec1
--- /dev/null
+++ b/frontend/src/Components/Form/Form.css.d.ts
@@ -0,0 +1,7 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+ 'validationFailures': string;
+}
+export const cssExports: CssExports;
+export default cssExports;
diff --git a/frontend/src/Components/Form/Form.tsx b/frontend/src/Components/Form/Form.tsx
new file mode 100644
index 000000000..d522019e7
--- /dev/null
+++ b/frontend/src/Components/Form/Form.tsx
@@ -0,0 +1,45 @@
+import React, { ReactNode } from 'react';
+import Alert from 'Components/Alert';
+import { kinds } from 'Helpers/Props';
+import { ValidationError, ValidationWarning } from 'typings/pending';
+import styles from './Form.css';
+
+export interface FormProps {
+ children: ReactNode;
+ validationErrors?: ValidationError[];
+ validationWarnings?: ValidationWarning[];
+}
+
+function Form({
+ children,
+ validationErrors = [],
+ validationWarnings = [],
+}: FormProps) {
+ return (
+
+ {validationErrors.length || validationWarnings.length ? (
+
+ );
+}
+
+export default Form;
diff --git a/frontend/src/Components/Form/FormGroup.css b/frontend/src/Components/Form/FormGroup.css
new file mode 100644
index 000000000..ddce8863b
--- /dev/null
+++ b/frontend/src/Components/Form/FormGroup.css
@@ -0,0 +1,28 @@
+.group {
+ display: flex;
+ margin-bottom: 20px;
+}
+
+/* Sizes */
+
+.extraSmall {
+ max-width: $formGroupExtraSmallWidth;
+}
+
+.small {
+ max-width: $formGroupSmallWidth;
+}
+
+.medium {
+ max-width: $formGroupMediumWidth;
+}
+
+.large {
+ max-width: $formGroupLargeWidth;
+}
+
+@media only screen and (max-width: $breakpointLarge) {
+ .group {
+ display: block;
+ }
+}
diff --git a/frontend/src/Components/Form/FormGroup.css.d.ts b/frontend/src/Components/Form/FormGroup.css.d.ts
new file mode 100644
index 000000000..86145f643
--- /dev/null
+++ b/frontend/src/Components/Form/FormGroup.css.d.ts
@@ -0,0 +1,11 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+ 'extraSmall': string;
+ 'group': string;
+ 'large': string;
+ 'medium': string;
+ 'small': string;
+}
+export const cssExports: CssExports;
+export default cssExports;
diff --git a/frontend/src/Components/Form/FormGroup.tsx b/frontend/src/Components/Form/FormGroup.tsx
new file mode 100644
index 000000000..1dd879897
--- /dev/null
+++ b/frontend/src/Components/Form/FormGroup.tsx
@@ -0,0 +1,43 @@
+import classNames from 'classnames';
+import React, { Children, ComponentPropsWithoutRef, ReactNode } from 'react';
+import { Size } from 'Helpers/Props/sizes';
+import styles from './FormGroup.css';
+
+interface FormGroupProps extends ComponentPropsWithoutRef<'div'> {
+ className?: string;
+ children: ReactNode;
+ size?: Extract
+ {validationErrors.map((error, index) => {
+ return (
+
+ {error.errorMessage}
+
+ );
+ })}
+
+ {validationWarnings.map((warning, index) => {
+ return (
+
+ {warning.errorMessage}
+
+ );
+ })}
+
+ ) : null}
+
+ {children}
+
+ {Children.map(children, (child) => {
+ if (!React.isValidElement(child)) {
+ return child;
+ }
+
+ return React.cloneElement(child, childProps);
+ })}
+
+ );
+}
+
+export default FormGroup;
diff --git a/frontend/src/Components/Form/FormInputButton.css b/frontend/src/Components/Form/FormInputButton.css
new file mode 100644
index 000000000..da4888f09
--- /dev/null
+++ b/frontend/src/Components/Form/FormInputButton.css
@@ -0,0 +1,12 @@
+.button {
+ composes: button from '~Components/Link/Button.css';
+
+ border-left: none;
+ border-top-left-radius: 0;
+ border-bottom-left-radius: 0;
+}
+
+.middleButton {
+ border-top-right-radius: 0;
+ border-bottom-right-radius: 0;
+}
diff --git a/frontend/src/Components/Form/FormInputButton.css.d.ts b/frontend/src/Components/Form/FormInputButton.css.d.ts
new file mode 100644
index 000000000..d469cdfe3
--- /dev/null
+++ b/frontend/src/Components/Form/FormInputButton.css.d.ts
@@ -0,0 +1,8 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+ 'button': string;
+ 'middleButton': string;
+}
+export const cssExports: CssExports;
+export default cssExports;
diff --git a/frontend/src/Components/Form/FormInputButton.tsx b/frontend/src/Components/Form/FormInputButton.tsx
new file mode 100644
index 000000000..e5149ab14
--- /dev/null
+++ b/frontend/src/Components/Form/FormInputButton.tsx
@@ -0,0 +1,39 @@
+import classNames from 'classnames';
+import React from 'react';
+import Button, { ButtonProps } from 'Components/Link/Button';
+import SpinnerButton from 'Components/Link/SpinnerButton';
+import { kinds } from 'Helpers/Props';
+import styles from './FormInputButton.css';
+
+export interface FormInputButtonProps extends ButtonProps {
+ canSpin?: boolean;
+ isLastButton?: boolean;
+}
+
+function FormInputButton({
+ className = styles.button,
+ canSpin = false,
+ isLastButton = true,
+ kind = kinds.PRIMARY,
+ ...otherProps
+}: FormInputButtonProps) {
+ if (canSpin) {
+ return (
+
+
+ );
+}
+
+export default FormInputGroup;
diff --git a/frontend/src/Components/Form/FormInputHelpText.css b/frontend/src/Components/Form/FormInputHelpText.css
new file mode 100644
index 000000000..0a6897d27
--- /dev/null
+++ b/frontend/src/Components/Form/FormInputHelpText.css
@@ -0,0 +1,43 @@
+.helpText {
+ margin-top: 5px;
+ color: var(--helpTextColor);
+ line-height: 20px;
+}
+
+.isError {
+ color: var(--dangerColor);
+
+ .link {
+ color: var(--dangerColor);
+
+ &:hover {
+ color: #e01313;
+ }
+ }
+}
+
+.isWarning {
+ color: var(--warningColor);
+
+ .link {
+ color: var(--warningColor);
+
+ &:hover {
+ color: #e36c00;
+ }
+ }
+}
+
+.isCheckInput {
+ padding-left: 30px;
+}
+
+.link {
+ composes: link from '~Components/Link/Link.css';
+
+ margin-left: 5px;
+}
+
+.details {
+ margin-left: 5px;
+}
diff --git a/frontend/src/Components/Form/FormInputHelpText.css.d.ts b/frontend/src/Components/Form/FormInputHelpText.css.d.ts
new file mode 100644
index 000000000..0e163f134
--- /dev/null
+++ b/frontend/src/Components/Form/FormInputHelpText.css.d.ts
@@ -0,0 +1,12 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+ 'details': string;
+ 'helpText': string;
+ 'isCheckInput': string;
+ 'isError': string;
+ 'isWarning': string;
+ 'link': string;
+}
+export const cssExports: CssExports;
+export default cssExports;
diff --git a/frontend/src/Components/Form/FormInputHelpText.tsx b/frontend/src/Components/Form/FormInputHelpText.tsx
new file mode 100644
index 000000000..1531d9585
--- /dev/null
+++ b/frontend/src/Components/Form/FormInputHelpText.tsx
@@ -0,0 +1,55 @@
+import classNames from 'classnames';
+import React from 'react';
+import Icon from 'Components/Icon';
+import Link from 'Components/Link/Link';
+import { icons } from 'Helpers/Props';
+import styles from './FormInputHelpText.css';
+
+interface FormInputHelpTextProps {
+ className?: string;
+ text: string;
+ link?: string;
+ tooltip?: string;
+ isError?: boolean;
+ isWarning?: boolean;
+ isCheckInput?: boolean;
+}
+
+function FormInputHelpText({
+ className = styles.helpText,
+ text,
+ link,
+ tooltip,
+ isError = false,
+ isWarning = false,
+ isCheckInput = false,
+}: FormInputHelpTextProps) {
+ return (
+
+ (button)) {
+ return button;
+ }
+
+ return React.cloneElement(button, {
+ isLastButton: index === lastButtonIndex,
+ });
+ })}
+
+ {/*
+
+ {!checkInput && helpText ?
+ {/* @ts-expect-error - need to pass through all the expected options */}
+
+
+ {buttonsArray.map((button, index) => {
+ if (!React.isValidElement
+ {unit}
+
+ )}
+
+ {
+ pending &&
+
*/}
+
+ {helpTexts.map((text, index) => {
+ return (
+
+ ) : null}
+
+ {(!checkInput || helpText) && helpTextWarning ? (
+
+ {text}
+
+ {link ? (
+
+
+ );
+}
+
+export default FormInputHelpText;
diff --git a/frontend/src/Components/Form/FormLabel.css b/frontend/src/Components/Form/FormLabel.css
new file mode 100644
index 000000000..54a4678e8
--- /dev/null
+++ b/frontend/src/Components/Form/FormLabel.css
@@ -0,0 +1,31 @@
+.label {
+ display: flex;
+ justify-content: flex-end;
+ margin-right: $formLabelRightMarginWidth;
+ padding-top: 8px;
+ min-height: 35px;
+ text-align: end;
+ font-weight: bold;
+}
+
+.hasError {
+ color: var(--dangerColor);
+}
+
+.isAdvanced {
+ color: var(--advancedFormLabelColor);
+}
+
+@media only screen and (max-width: $breakpointLarge) {
+ .label {
+ justify-content: flex-start;
+ }
+}
+
+.small {
+ flex: 0 0 $formLabelSmallWidth;
+}
+
+.large {
+ flex: 0 0 $formLabelLargeWidth;
+}
diff --git a/frontend/src/Components/Form/FormLabel.css.d.ts b/frontend/src/Components/Form/FormLabel.css.d.ts
new file mode 100644
index 000000000..c23dd30a4
--- /dev/null
+++ b/frontend/src/Components/Form/FormLabel.css.d.ts
@@ -0,0 +1,11 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+ 'hasError': string;
+ 'isAdvanced': string;
+ 'label': string;
+ 'large': string;
+ 'small': string;
+}
+export const cssExports: CssExports;
+export default cssExports;
diff --git a/frontend/src/Components/Form/FormLabel.tsx b/frontend/src/Components/Form/FormLabel.tsx
new file mode 100644
index 000000000..4f29e6ac6
--- /dev/null
+++ b/frontend/src/Components/Form/FormLabel.tsx
@@ -0,0 +1,42 @@
+import classNames from 'classnames';
+import React, { ReactNode } from 'react';
+import { Size } from 'Helpers/Props/sizes';
+import styles from './FormLabel.css';
+
+interface FormLabelProps {
+ children: ReactNode;
+ className?: string;
+ errorClassName?: string;
+ size?: Extract
+ {[...value, { key: '', value: '' }].map((v, index) => (
+
+ );
+}
+
+export default KeyValueListInput;
diff --git a/frontend/src/Components/Form/KeyValueListInputItem.css b/frontend/src/Components/Form/KeyValueListInputItem.css
new file mode 100644
index 000000000..ed82db459
--- /dev/null
+++ b/frontend/src/Components/Form/KeyValueListInputItem.css
@@ -0,0 +1,35 @@
+.itemContainer {
+ display: flex;
+ margin-bottom: 3px;
+ border-bottom: 1px solid var(--inputBorderColor);
+
+ &:last-child {
+ margin-bottom: 0;
+ border-bottom: 0;
+ }
+}
+
+.keyInputWrapper {
+ flex: 1 0 0;
+}
+
+.valueInputWrapper {
+ flex: 1 0 0;
+ min-width: 40px;
+}
+
+.buttonWrapper {
+ flex: 0 0 22px;
+}
+
+.keyInput,
+.valueInput {
+ width: 100%;
+ border: none;
+ background-color: transparent;
+ color: var(--textColor);
+
+ &::placeholder {
+ color: var(--helpTextColor);
+ }
+}
diff --git a/frontend/src/Components/Form/KeyValueListInputItem.css.d.ts b/frontend/src/Components/Form/KeyValueListInputItem.css.d.ts
new file mode 100644
index 000000000..aa0c1be13
--- /dev/null
+++ b/frontend/src/Components/Form/KeyValueListInputItem.css.d.ts
@@ -0,0 +1,12 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+ 'buttonWrapper': string;
+ 'itemContainer': string;
+ 'keyInput': string;
+ 'keyInputWrapper': string;
+ 'valueInput': string;
+ 'valueInputWrapper': string;
+}
+export const cssExports: CssExports;
+export default cssExports;
diff --git a/frontend/src/Components/Form/KeyValueListInputItem.tsx b/frontend/src/Components/Form/KeyValueListInputItem.tsx
new file mode 100644
index 000000000..c63ad50a9
--- /dev/null
+++ b/frontend/src/Components/Form/KeyValueListInputItem.tsx
@@ -0,0 +1,89 @@
+import React, { useCallback } from 'react';
+import IconButton from 'Components/Link/IconButton';
+import { icons } from 'Helpers/Props';
+import TextInput from './TextInput';
+import styles from './KeyValueListInputItem.css';
+
+interface KeyValueListInputItemProps {
+ index: number;
+ keyValue: string;
+ value: string;
+ keyPlaceholder?: string;
+ valuePlaceholder?: string;
+ isNew: boolean;
+ onChange: (index: number, itemValue: { key: string; value: string }) => void;
+ onRemove: (index: number) => void;
+ onFocus: () => void;
+ onBlur: () => void;
+}
+
+function KeyValueListInputItem({
+ index,
+ keyValue,
+ value,
+ keyPlaceholder = 'Key',
+ valuePlaceholder = 'Value',
+ isNew,
+ onChange,
+ onRemove,
+ onFocus,
+ onBlur,
+}: KeyValueListInputItemProps): JSX.Element {
+ const handleKeyChange = useCallback(
+ ({ value: keyValue }: { value: string }) => {
+ onChange(index, { key: keyValue, value });
+ },
+ [index, value, onChange]
+ );
+
+ const handleValueChange = useCallback(
+ ({ value }: { value: string }) => {
+ onChange(index, { key: keyValue, value });
+ },
+ [index, keyValue, onChange]
+ );
+
+ const handleRemovePress = useCallback(() => {
+ onRemove(index);
+ }, [index, onRemove]);
+
+ return (
+
+
+ );
+}
+
+export default KeyValueListInputItem;
diff --git a/frontend/src/Components/Form/NumberInput.tsx b/frontend/src/Components/Form/NumberInput.tsx
new file mode 100644
index 000000000..a5e1fcb64
--- /dev/null
+++ b/frontend/src/Components/Form/NumberInput.tsx
@@ -0,0 +1,108 @@
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import usePrevious from 'Helpers/Hooks/usePrevious';
+import { InputChanged } from 'typings/inputs';
+import TextInput, { TextInputProps } from './TextInput';
+
+function parseValue(
+ value: string | null | undefined,
+ isFloat: boolean,
+ min: number | undefined,
+ max: number | undefined
+) {
+ if (value == null || value === '') {
+ return null;
+ }
+
+ let newValue = isFloat ? parseFloat(value) : parseInt(value);
+
+ if (min != null && newValue != null && newValue < min) {
+ newValue = min;
+ } else if (max != null && newValue != null && newValue > max) {
+ newValue = max;
+ }
+
+ return newValue;
+}
+
+interface NumberInputProps
+ extends Omit
+
+
+
+
+
+
+ {isNew ? null : (
+
+
+
+ {label}
+
+
+ );
+}
+
+export default OAuthInput;
diff --git a/frontend/src/Components/Form/PasswordInput.tsx b/frontend/src/Components/Form/PasswordInput.tsx
new file mode 100644
index 000000000..776c2b913
--- /dev/null
+++ b/frontend/src/Components/Form/PasswordInput.tsx
@@ -0,0 +1,14 @@
+import React, { SyntheticEvent } from 'react';
+import TextInput, { TextInputProps } from './TextInput';
+
+// Prevent a user from copying (or cutting) the password from the input
+function onCopy(e: SyntheticEvent) {
+ e.preventDefault();
+ e.nativeEvent.stopImmediatePropagation();
+}
+
+function PasswordInput(props: TextInputProps
+
+
+
+
+ );
+}
diff --git a/frontend/src/Components/Form/ProviderFieldFormGroup.js b/frontend/src/Components/Form/ProviderFieldFormGroup.js
new file mode 100644
index 000000000..f081f5906
--- /dev/null
+++ b/frontend/src/Components/Form/ProviderFieldFormGroup.js
@@ -0,0 +1,155 @@
+import _ from 'lodash';
+import PropTypes from 'prop-types';
+import React from 'react';
+import FormGroup from 'Components/Form/FormGroup';
+import FormInputGroup from 'Components/Form/FormInputGroup';
+import FormLabel from 'Components/Form/FormLabel';
+import { inputTypes } from 'Helpers/Props';
+
+function getType({ type, selectOptionsProviderAction }) {
+ switch (type) {
+ case 'captcha':
+ return inputTypes.CAPTCHA;
+ case 'checkbox':
+ return inputTypes.CHECK;
+ case 'device':
+ return inputTypes.DEVICE;
+ case 'keyValueList':
+ return inputTypes.KEY_VALUE_LIST;
+ case 'password':
+ return inputTypes.PASSWORD;
+ case 'number':
+ return inputTypes.NUMBER;
+ case 'path':
+ return inputTypes.PATH;
+ case 'filePath':
+ return inputTypes.PATH;
+ case 'select':
+ if (selectOptionsProviderAction) {
+ return inputTypes.DYNAMIC_SELECT;
+ }
+ return inputTypes.SELECT;
+ case 'seriesTag':
+ return inputTypes.SERIES_TAG;
+ case 'tag':
+ return inputTypes.TEXT_TAG;
+ case 'tagSelect':
+ return inputTypes.TAG_SELECT;
+ case 'textbox':
+ return inputTypes.TEXT;
+ case 'oAuth':
+ return inputTypes.OAUTH;
+ case 'rootFolder':
+ return inputTypes.ROOT_FOLDER_SELECT;
+ case 'qualityProfile':
+ return inputTypes.QUALITY_PROFILE_SELECT;
+ default:
+ return inputTypes.TEXT;
+ }
+}
+
+function getSelectValues(selectOptions) {
+ if (!selectOptions) {
+ return;
+ }
+
+ return _.reduce(selectOptions, (result, option) => {
+ result.push({
+ key: option.value,
+ value: option.name,
+ hint: option.hint
+ });
+
+ return result;
+ }, []);
+}
+
+function ProviderFieldFormGroup(props) {
+ const {
+ advancedSettings,
+ name,
+ label,
+ helpText,
+ helpTextWarning,
+ helpLink,
+ placeholder,
+ value,
+ type,
+ advanced,
+ hidden,
+ pending,
+ errors,
+ warnings,
+ selectOptions,
+ onChange,
+ ...otherProps
+ } = props;
+
+ if (
+ hidden === 'hidden' ||
+ (hidden === 'hiddenIfNotSet' && !value)
+ ) {
+ return null;
+ }
+
+ return (
+
+
+
+ {({ ref }) => (
+
+ )}
+
+
+
+ {({ ref, style, scheduleUpdate }) => {
+ updater.current = scheduleUpdate;
+
+ return (
+
+
+
+
+ {isMobile ? (
+
+
+
+
+ {v.value}
+
+ );
+ })}
+
+
+
+ ) : null}
+
+ );
+}
+
+export default EnhancedSelectInput;
diff --git a/frontend/src/Components/Form/Select/EnhancedSelectInputOption.css b/frontend/src/Components/Form/Select/EnhancedSelectInputOption.css
new file mode 100644
index 000000000..bfdaa9036
--- /dev/null
+++ b/frontend/src/Components/Form/Select/EnhancedSelectInputOption.css
@@ -0,0 +1,65 @@
+.option {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 5px 10px;
+ width: 100%;
+ cursor: default;
+
+ &:hover {
+ background-color: var(--inputHoverBackgroundColor);
+ }
+
+ &.isDisabled {
+ cursor: not-allowed;
+ }
+}
+
+.optionCheck {
+ composes: container from '~Components/Form/CheckInput.css';
+
+ flex: 0 0 0;
+}
+
+.optionCheckInput {
+ composes: input from '~Components/Form/CheckInput.css';
+
+ margin-top: 0;
+}
+
+.isSelected {
+ background-color: var(--inputSelectedBackgroundColor);
+
+ &:hover {
+ background-color: var(--inputSelectedBackgroundColor);
+ }
+
+ &.isMobile {
+ background-color: inherit;
+
+ .iconContainer {
+ color: var(--primaryColor);
+ }
+ }
+}
+
+.isDisabled {
+ background-color: #aaa;
+}
+
+.isHidden {
+ display: none;
+}
+
+.isMobile {
+ height: 50px;
+ border-bottom: 1px solid var(--borderColor);
+
+ &:last-child {
+ border: none;
+ }
+
+ &:hover {
+ background-color: unset;
+ }
+}
diff --git a/frontend/src/Components/Form/Select/EnhancedSelectInputOption.css.d.ts b/frontend/src/Components/Form/Select/EnhancedSelectInputOption.css.d.ts
new file mode 100644
index 000000000..59675cd91
--- /dev/null
+++ b/frontend/src/Components/Form/Select/EnhancedSelectInputOption.css.d.ts
@@ -0,0 +1,14 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+ 'iconContainer': string;
+ 'isDisabled': string;
+ 'isHidden': string;
+ 'isMobile': string;
+ 'isSelected': string;
+ 'option': string;
+ 'optionCheck': string;
+ 'optionCheckInput': string;
+}
+export const cssExports: CssExports;
+export default cssExports;
diff --git a/frontend/src/Components/Form/Select/EnhancedSelectInputOption.tsx b/frontend/src/Components/Form/Select/EnhancedSelectInputOption.tsx
new file mode 100644
index 000000000..c866a5060
--- /dev/null
+++ b/frontend/src/Components/Form/Select/EnhancedSelectInputOption.tsx
@@ -0,0 +1,84 @@
+import classNames from 'classnames';
+import React, { SyntheticEvent, useCallback } from 'react';
+import Icon from 'Components/Icon';
+import Link from 'Components/Link/Link';
+import { icons } from 'Helpers/Props';
+import CheckInput from '../CheckInput';
+import styles from './EnhancedSelectInputOption.css';
+
+function handleCheckPress() {
+ // CheckInput requires a handler. Swallow the change event because onPress will already handle it via event propagation.
+}
+
+export interface EnhancedSelectInputOptionProps {
+ className?: string;
+ id: string | number;
+ depth?: number;
+ isSelected: boolean;
+ isDisabled?: boolean;
+ isHidden?: boolean;
+ isMultiSelect?: boolean;
+ isMobile: boolean;
+ children: React.ReactNode;
+ onSelect: (...args: unknown[]) => unknown;
+}
+
+function EnhancedSelectInputOption({
+ className = styles.option,
+ id,
+ depth = 0,
+ isSelected,
+ isDisabled = false,
+ isHidden = false,
+ isMultiSelect = false,
+ isMobile,
+ children,
+ onSelect,
+}: EnhancedSelectInputOptionProps) {
+ const handlePress = useCallback(
+ (event: SyntheticEvent) => {
+ event.preventDefault();
+
+ onSelect(id);
+ },
+ [id, onSelect]
+ );
+
+ return (
+
+ {depth !== 0 && }
+
+ {isMultiSelect && (
+
+ {isOpen && !isMobile ? (
+
+ {values.map((v, index) => {
+ const hasParent = v.parentKey !== undefined;
+ const depth = hasParent ? 1 : 0;
+ const parentSelected =
+ v.parentKey !== undefined &&
+ Array.isArray(value) &&
+ value.includes(v.parentKey);
+
+ const { key, ...other } = v;
+
+ return (
+
+ {v.value}
+
+ );
+ })}
+
+ ) : null}
+
+ );
+ }}
+
+
+
+
+ {values.map((v, index) => {
+ const hasParent = v.parentKey !== undefined;
+ const depth = hasParent ? 1 : 0;
+ const parentSelected =
+ v.parentKey !== undefined &&
+ isMultiSelect &&
+ value.includes(v.parentKey);
+
+ const { key, ...other } = v;
+
+ return (
+
+
+ )}
+
+ );
+}
+
+export default EnhancedSelectInputOption;
diff --git a/frontend/src/Components/Form/Select/EnhancedSelectInputSelectedValue.css b/frontend/src/Components/Form/Select/EnhancedSelectInputSelectedValue.css
new file mode 100644
index 000000000..908126689
--- /dev/null
+++ b/frontend/src/Components/Form/Select/EnhancedSelectInputSelectedValue.css
@@ -0,0 +1,7 @@
+.selectedValue {
+ flex: 1 1 auto;
+}
+
+.isDisabled {
+ color: var(--disabledInputColor);
+}
diff --git a/frontend/src/Components/Form/Select/EnhancedSelectInputSelectedValue.css.d.ts b/frontend/src/Components/Form/Select/EnhancedSelectInputSelectedValue.css.d.ts
new file mode 100644
index 000000000..5377239a8
--- /dev/null
+++ b/frontend/src/Components/Form/Select/EnhancedSelectInputSelectedValue.css.d.ts
@@ -0,0 +1,8 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+ 'isDisabled': string;
+ 'selectedValue': string;
+}
+export const cssExports: CssExports;
+export default cssExports;
diff --git a/frontend/src/Components/Form/Select/EnhancedSelectInputSelectedValue.tsx b/frontend/src/Components/Form/Select/EnhancedSelectInputSelectedValue.tsx
new file mode 100644
index 000000000..88afdb18a
--- /dev/null
+++ b/frontend/src/Components/Form/Select/EnhancedSelectInputSelectedValue.tsx
@@ -0,0 +1,23 @@
+import classNames from 'classnames';
+import React, { ReactNode } from 'react';
+import styles from './EnhancedSelectInputSelectedValue.css';
+
+interface EnhancedSelectInputSelectedValueProps {
+ className?: string;
+ children: ReactNode;
+ isDisabled?: boolean;
+}
+
+function EnhancedSelectInputSelectedValue({
+ className = styles.selectedValue,
+ children,
+ isDisabled = false,
+}: EnhancedSelectInputSelectedValueProps) {
+ return (
+
+ {children}
+
+ );
+}
+
+export default EnhancedSelectInputSelectedValue;
diff --git a/frontend/src/Components/Form/Select/HintedSelectInputOption.css b/frontend/src/Components/Form/Select/HintedSelectInputOption.css
new file mode 100644
index 000000000..74bf6a86e
--- /dev/null
+++ b/frontend/src/Components/Form/Select/HintedSelectInputOption.css
@@ -0,0 +1,23 @@
+.optionText {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ flex: 1 0 0;
+ min-width: 0;
+
+ &.isMobile {
+ display: block;
+
+ .hintText {
+ margin-left: 0;
+ }
+ }
+}
+
+.hintText {
+ @add-mixin truncate;
+
+ margin-left: 15px;
+ color: var(--darkGray);
+ font-size: $smallFontSize;
+}
diff --git a/frontend/src/Components/Form/Select/HintedSelectInputOption.css.d.ts b/frontend/src/Components/Form/Select/HintedSelectInputOption.css.d.ts
new file mode 100644
index 000000000..b598ce484
--- /dev/null
+++ b/frontend/src/Components/Form/Select/HintedSelectInputOption.css.d.ts
@@ -0,0 +1,9 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+ 'hintText': string;
+ 'isMobile': string;
+ 'optionText': string;
+}
+export const cssExports: CssExports;
+export default cssExports;
diff --git a/frontend/src/Components/Form/Select/HintedSelectInputOption.tsx b/frontend/src/Components/Form/Select/HintedSelectInputOption.tsx
new file mode 100644
index 000000000..faa9081c5
--- /dev/null
+++ b/frontend/src/Components/Form/Select/HintedSelectInputOption.tsx
@@ -0,0 +1,52 @@
+import classNames from 'classnames';
+import React from 'react';
+import EnhancedSelectInputOption, {
+ EnhancedSelectInputOptionProps,
+} from './EnhancedSelectInputOption';
+import styles from './HintedSelectInputOption.css';
+
+interface HintedSelectInputOptionProps extends EnhancedSelectInputOptionProps {
+ value: string;
+ hint?: React.ReactNode;
+}
+
+function HintedSelectInputOption(props: HintedSelectInputOptionProps) {
+ const {
+ id,
+ value,
+ hint,
+ depth,
+ isSelected = false,
+ isDisabled,
+ isMobile,
+ ...otherProps
+ } = props;
+
+ return (
+
+
+ {value}
+
+ {hint != null && {hint}
}
+
+ {isMultiSelect && Array.isArray(selectedValue)
+ ? selectedValue.map((key) => {
+ const v = valuesMap.get(key);
+
+ return ;
+ })
+ : valuesMap.get(selectedValue as ArrayElement)}
+
+
+ {hint != null && includeHint ? (
+ {hint}
+ ) : null}
+
+
+
+ {value}
+
+ {seriesFolder && id !== 'addNew' ? (
+
+
+ {freeSpace == null ? null : (
+
+ {slashCharacter}
+ {seriesFolder}
+
+ ) : null}
+
+ {translate('RootFolderSelectFreeSpace', {
+ freeSpace: formatBytes(freeSpace),
+ })}
+
+ )}
+
+ {isMissing ? (
+ {translate('Missing')}
+ ) : null}
+
+
+
+ {freeSpace != null && includeFreeSpace ? (
+ {value}
+
+ {seriesFolder ? (
+
+ {slashCharacter}
+ {seriesFolder}
+
+ ) : null}
+
+ {translate('RootFolderSelectFreeSpace', {
+ freeSpace: formatBytes(freeSpace),
+ })}
+
+ ) : null}
+
+
+ {value}
+
+ {format == null ? null : {format}
}
+
+
+ );
+}
+
+UMaskInput.propTypes = {
+ name: PropTypes.string.isRequired,
+ value: PropTypes.string.isRequired,
+ hasError: PropTypes.bool,
+ hasWarning: PropTypes.bool,
+ onChange: PropTypes.func.isRequired,
+ onFocus: PropTypes.func,
+ onBlur: PropTypes.func,
+};
+
+export default UMaskInput;
diff --git a/frontend/src/Components/Form/SelectInput.css b/frontend/src/Components/Form/SelectInput.css
new file mode 100644
index 000000000..aa1dfc79b
--- /dev/null
+++ b/frontend/src/Components/Form/SelectInput.css
@@ -0,0 +1,18 @@
+.select {
+ composes: input from '~Components/Form/Input.css';
+
+ padding: 0 11px;
+}
+
+.hasError {
+ composes: hasError from '~Components/Form/Input.css';
+}
+
+.hasWarning {
+ composes: hasWarning from '~Components/Form/Input.css';
+}
+
+.isDisabled {
+ opacity: 0.7;
+ cursor: not-allowed;
+}
diff --git a/frontend/src/Components/Form/SelectInput.css.d.ts b/frontend/src/Components/Form/SelectInput.css.d.ts
new file mode 100644
index 000000000..fe8fa3069
--- /dev/null
+++ b/frontend/src/Components/Form/SelectInput.css.d.ts
@@ -0,0 +1,10 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+ 'hasError': string;
+ 'hasWarning': string;
+ 'isDisabled': string;
+ 'select': string;
+}
+export const cssExports: CssExports;
+export default cssExports;
diff --git a/frontend/src/Components/Form/SelectInput.tsx b/frontend/src/Components/Form/SelectInput.tsx
new file mode 100644
index 000000000..4716c2dfd
--- /dev/null
+++ b/frontend/src/Components/Form/SelectInput.tsx
@@ -0,0 +1,76 @@
+import classNames from 'classnames';
+import React, { ChangeEvent, SyntheticEvent, useCallback } from 'react';
+import { InputChanged } from 'typings/inputs';
+import styles from './SelectInput.css';
+
+interface SelectInputOption {
+ key: string;
+ value: string | number | (() => string | number);
+}
+
+interface SelectInputProps
+
+
+
+
+ d{unit}
+
+
+
+
+
+
+ {umask}
+
+
+
+
+ {folder}
+ d{formatPermissions(folderNum)}
+
+
+
+ {file}
+ {formatPermissions(fileNum)}
+
+
+
+
+ );
+}
+
+export default DeviceInput;
diff --git a/frontend/src/Components/Form/Tag/SeriesTagInput.tsx b/frontend/src/Components/Form/Tag/SeriesTagInput.tsx
new file mode 100644
index 000000000..f72248cf5
--- /dev/null
+++ b/frontend/src/Components/Form/Tag/SeriesTagInput.tsx
@@ -0,0 +1,145 @@
+import React, { useCallback, useMemo } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { createSelector } from 'reselect';
+import { addTag } from 'Store/Actions/tagActions';
+import createTagsSelector from 'Store/Selectors/createTagsSelector';
+import { InputChanged } from 'typings/inputs';
+import sortByProp from 'Utilities/Array/sortByProp';
+import TagInput, { TagBase } from './TagInput';
+
+interface SeriesTag extends TagBase {
+ id: number;
+ name: string;
+}
+
+interface SeriesTagInputProps {
+ name: string;
+ value: number | number[];
+ onChange: (change: InputChanged
+ {tags.map((tag, index) => {
+ return (
+
+ );
+}
+
+export default TagInputInput;
diff --git a/frontend/src/Components/Form/Tag/TagInputTag.css b/frontend/src/Components/Form/Tag/TagInputTag.css
new file mode 100644
index 000000000..1a8ff45d6
--- /dev/null
+++ b/frontend/src/Components/Form/Tag/TagInputTag.css
@@ -0,0 +1,35 @@
+.tag {
+ display: flex;
+ justify-content: center;
+ flex-direction: column;
+ max-width: 100%;
+ height: 31px;
+}
+
+.link {
+ max-width: 100%;
+}
+
+.linkWithEdit {
+ max-width: calc(100% - 9px - 4px - 2px);
+}
+
+.editContainer {
+ display: inline-block;
+ margin-left: 4px;
+ padding-left: 2px;
+ border-left: 1px solid #eee;
+}
+
+.editButton {
+ composes: button from '~Components/Link/IconButton.css';
+
+ width: 9px;
+}
+
+.label {
+ composes: label from '~Components/Label.css';
+
+ display: flex;
+ max-width: 100%;
+}
diff --git a/frontend/src/Components/Form/Tag/TagInputTag.css.d.ts b/frontend/src/Components/Form/Tag/TagInputTag.css.d.ts
new file mode 100644
index 000000000..510189d2c
--- /dev/null
+++ b/frontend/src/Components/Form/Tag/TagInputTag.css.d.ts
@@ -0,0 +1,12 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+ 'editButton': string;
+ 'editContainer': string;
+ 'label': string;
+ 'link': string;
+ 'linkWithEdit': string;
+ 'tag': string;
+}
+export const cssExports: CssExports;
+export default cssExports;
diff --git a/frontend/src/Components/Form/Tag/TagInputTag.tsx b/frontend/src/Components/Form/Tag/TagInputTag.tsx
new file mode 100644
index 000000000..7b549767c
--- /dev/null
+++ b/frontend/src/Components/Form/Tag/TagInputTag.tsx
@@ -0,0 +1,79 @@
+import React, { useCallback } from 'react';
+import Label, { LabelProps } from 'Components/Label';
+import IconButton from 'Components/Link/IconButton';
+import Link from 'Components/Link/Link';
+import MiddleTruncate from 'Components/MiddleTruncate';
+import { icons } from 'Helpers/Props';
+import { TagBase } from './TagInput';
+import styles from './TagInputTag.css';
+
+export interface DeletedTag
+
+
+ );
+}
+
+export default TagInputTag;
diff --git a/frontend/src/Components/Form/Tag/TagSelectInput.tsx b/frontend/src/Components/Form/Tag/TagSelectInput.tsx
new file mode 100644
index 000000000..21fde893c
--- /dev/null
+++ b/frontend/src/Components/Form/Tag/TagSelectInput.tsx
@@ -0,0 +1,97 @@
+import React, { useCallback, useMemo } from 'react';
+import { InputChanged } from 'typings/inputs';
+import TagInput, { TagBase, TagInputProps } from './TagInput';
+
+interface SelectTag extends TagBase {
+ id: number;
+ name: string;
+}
+
+interface TagSelectValue {
+ value: string;
+ key: number;
+ order: number;
+}
+
+interface TagSelectInputProps extends TagInputProps