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",