diff --git a/frontend/src/App/State/MoviesAppState.ts b/frontend/src/App/State/MoviesAppState.ts
index c8db9ab36..2c0904fea 100644
--- a/frontend/src/App/State/MoviesAppState.ts
+++ b/frontend/src/App/State/MoviesAppState.ts
@@ -25,6 +25,7 @@ export interface MovieIndexAppState {
showTmdbRating: boolean;
showImdbRating: boolean;
showRottenTomatoesRating: boolean;
+ showTags: boolean;
showSearchAction: boolean;
};
@@ -37,6 +38,7 @@ export interface MovieIndexAppState {
showAdded: boolean;
showPath: boolean;
showSizeOnDisk: boolean;
+ showTags: boolean;
showSearchAction: boolean;
};
diff --git a/frontend/src/Movie/Index/Overview/MovieIndexOverview.css b/frontend/src/Movie/Index/Overview/MovieIndexOverview.css
index fdb5be0ba..a2d5e6c2f 100644
--- a/frontend/src/Movie/Index/Overview/MovieIndexOverview.css
+++ b/frontend/src/Movie/Index/Overview/MovieIndexOverview.css
@@ -80,14 +80,26 @@ $hoverScale: 1.05;
flex: 1 0 auto;
}
+.overviewContainer {
+ display: flex;
+ justify-content: space-between;
+ flex: 0 1 1000px;
+ flex-direction: column;
+}
+
.overview {
composes: link;
- flex: 0 1 1000px;
overflow: hidden;
min-height: 0;
}
+.tags {
+ display: flex;
+ justify-content: space-around;
+ overflow: hidden;
+}
+
@media only screen and (max-width: $breakpointSmall) {
.overview {
display: none;
diff --git a/frontend/src/Movie/Index/Overview/MovieIndexOverview.css.d.ts b/frontend/src/Movie/Index/Overview/MovieIndexOverview.css.d.ts
index 5a7467424..f11f6809b 100644
--- a/frontend/src/Movie/Index/Overview/MovieIndexOverview.css.d.ts
+++ b/frontend/src/Movie/Index/Overview/MovieIndexOverview.css.d.ts
@@ -10,9 +10,11 @@ interface CssExports {
'info': string;
'link': string;
'overview': string;
+ 'overviewContainer': string;
'poster': string;
'posterContainer': string;
'queue': string;
+ 'tags': string;
'title': string;
'titleRow': string;
}
diff --git a/frontend/src/Movie/Index/Overview/MovieIndexOverview.tsx b/frontend/src/Movie/Index/Overview/MovieIndexOverview.tsx
index 29d4ace25..a2ac34ad7 100644
--- a/frontend/src/Movie/Index/Overview/MovieIndexOverview.tsx
+++ b/frontend/src/Movie/Index/Overview/MovieIndexOverview.tsx
@@ -6,6 +6,7 @@ import Icon from 'Components/Icon';
import IconButton from 'Components/Link/IconButton';
import Link from 'Components/Link/Link';
import SpinnerIconButton from 'Components/Link/SpinnerIconButton';
+import TagListConnector from 'Components/TagListConnector';
import Popover from 'Components/Tooltip/Popover';
import { icons } from 'Helpers/Props';
import DeleteMovieModal from 'Movie/Delete/DeleteMovieModal';
@@ -69,6 +70,7 @@ function MovieIndexOverview(props: MovieIndexOverviewProps) {
overview,
statistics = {} as Statistics,
images,
+ tags,
hasFile,
isAvailable,
tmdbId,
@@ -212,15 +214,22 @@ function MovieIndexOverview(props: MovieIndexOverviewProps) {
-
-
-
+
+
+
+
+ {overviewOptions.showTags ? (
+
+
+
+ ) : null}
+
+
+ {translate('ShowTags')}
+
+
+
+
{translate('ShowSearch')}
diff --git a/frontend/src/Movie/Index/Posters/MovieIndexPoster.css b/frontend/src/Movie/Index/Posters/MovieIndexPoster.css
index 27a40dd96..e8d11ccf4 100644
--- a/frontend/src/Movie/Index/Posters/MovieIndexPoster.css
+++ b/frontend/src/Movie/Index/Posters/MovieIndexPoster.css
@@ -75,6 +75,20 @@ $hoverScale: 1.05;
}
}
+.tags {
+ display: flex;
+ align-items: center;
+ justify-content: space-around;
+ padding: 0 3px;
+ height: 21px;
+ background-color: var(--movieBackgroundColor);
+}
+
+.tagsList {
+ display: flex;
+ overflow: hidden;
+}
+
.ended {
position: absolute;
top: 0;
diff --git a/frontend/src/Movie/Index/Posters/MovieIndexPoster.css.d.ts b/frontend/src/Movie/Index/Posters/MovieIndexPoster.css.d.ts
index 0ddb53cf9..49eb2068e 100644
--- a/frontend/src/Movie/Index/Posters/MovieIndexPoster.css.d.ts
+++ b/frontend/src/Movie/Index/Posters/MovieIndexPoster.css.d.ts
@@ -13,6 +13,8 @@ interface CssExports {
'overlayTitle': string;
'poster': string;
'posterContainer': string;
+ 'tags': string;
+ 'tagsList': string;
'title': string;
}
export const cssExports: CssExports;
diff --git a/frontend/src/Movie/Index/Posters/MovieIndexPoster.tsx b/frontend/src/Movie/Index/Posters/MovieIndexPoster.tsx
index 1b2c3569d..997293352 100644
--- a/frontend/src/Movie/Index/Posters/MovieIndexPoster.tsx
+++ b/frontend/src/Movie/Index/Posters/MovieIndexPoster.tsx
@@ -8,6 +8,7 @@ import IconButton from 'Components/Link/IconButton';
import Link from 'Components/Link/Link';
import SpinnerIconButton from 'Components/Link/SpinnerIconButton';
import RottenTomatoRating from 'Components/RottenTomatoRating';
+import TagListConnector from 'Components/TagListConnector';
import TmdbRating from 'Components/TmdbRating';
import Popover from 'Components/Tooltip/Popover';
import { icons } from 'Helpers/Props';
@@ -51,6 +52,7 @@ function MovieIndexPoster(props: MovieIndexPosterProps) {
showTmdbRating,
showImdbRating,
showRottenTomatoesRating,
+ showTags,
showSearchAction,
} = useSelector(selectPosterOptions);
@@ -80,6 +82,7 @@ function MovieIndexPoster(props: MovieIndexPosterProps) {
certification,
originalTitle,
originalLanguage,
+ tags,
} = movie;
const { sizeOnDisk = 0 } = statistics;
@@ -284,6 +287,14 @@ function MovieIndexPoster(props: MovieIndexPosterProps) {
) : null}
+ {showTags && tags.length ? (
+
+ ) : null}
+
+
+ {translate('ShowTags')}
+
+
+
+
{translate('ShowSearch')}
diff --git a/frontend/src/Store/Actions/movieIndexActions.js b/frontend/src/Store/Actions/movieIndexActions.js
index e2b914a20..51c4009f9 100644
--- a/frontend/src/Store/Actions/movieIndexActions.js
+++ b/frontend/src/Store/Actions/movieIndexActions.js
@@ -38,6 +38,7 @@ export const defaultState = {
showTmdbRating: false,
showImdbRating: false,
showRottenTomatoesRating: false,
+ showTags: false,
showSearchAction: false
},
@@ -50,6 +51,7 @@ export const defaultState = {
showAdded: false,
showPath: false,
showSizeOnDisk: false,
+ showTags: false,
showSearchAction: false
},
diff --git a/src/NzbDrone.Core/Localization/Core/en.json b/src/NzbDrone.Core/Localization/Core/en.json
index e36a5658f..3b4f83551 100644
--- a/src/NzbDrone.Core/Localization/Core/en.json
+++ b/src/NzbDrone.Core/Localization/Core/en.json
@@ -1579,6 +1579,8 @@
"ShowSearchHelpText": "Show search button on hover",
"ShowSizeOnDisk": "Show Size on Disk",
"ShowStudio": "Show Studio",
+ "ShowTags": "Show Tags",
+ "ShowTagsHelpText": "Show tags under poster",
"ShowTitle": "Show Title",
"ShowTitleHelpText": "Show movie title under poster",
"ShowTmdbRating": "Show TMDb Rating",