shpaq/sct-overseerr
1
0
Fork 0
mirror of https://github.com/sct/overseerr.git synced 2025-09-17 17:24:35 +02:00
Code Issues Packages Projects Releases Wiki Activity

feat(frontend): add header styling to movie/tv recommendation and similar list views

Browse Source
This commit is contained in:
sct
2020-11-17 12:49:30 +00:00
parent 94eaaf96b4
commit f5f2545520
7 changed files with 123 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/Common/Header/index.tsx
View File

@@ -2,9 +2,14 @@ import React from 'react';
interface HeaderProps {
extraMargin?: number;
subtext?: string;
}
const Header: React.FC<HeaderProps> = ({ children, extraMargin = 0 }) => {
const Header: React.FC<HeaderProps> = ({
children,
extraMargin = 0,
subtext,
}) => {
return (
<div className="md:flex md:items-center md:justify-between mt-8 mb-8">
<div className={`flex-1 min-w-0 mx-${extraMargin}`}>
@@ -13,6 +18,7 @@ const Header: React.FC<HeaderProps> = ({ children, extraMargin = 0 }) => {
{children}
</span>
</h2>
{subtext && <div className="text-cool-gray-400 mt-2">{subtext}</div>}
</div>
</div>
);

38
src/components/MovieDetails/MovieRecommendations.tsx
View File

@@ -1,8 +1,17 @@
import React from 'react';
import { useSWRInfinite } from 'swr';
import { MovieResult } from '../../../server/models/Search';
import React, { useContext } from 'react';
import useSWR, { useSWRInfinite } from 'swr';
import type { MovieResult } from '../../../server/models/Search';
import ListView from '../Common/ListView';
import { useRouter } from 'next/router';
import Header from '../Common/Header';
import type { MovieDetails } from '../../../server/models/Movie';
import { LanguageContext } from '../../context/LanguageContext';
import { defineMessages, useIntl, FormattedMessage } from 'react-intl';
const messages = defineMessages({
recommendations: 'Recommendations',
recommendationssubtext: 'If you liked {title}, you might also like...',
});
interface SearchResult {
page: number;
@@ -12,7 +21,12 @@ interface SearchResult {
}
const MovieRecommendations: React.FC = () => {
const intl = useIntl();
const router = useRouter();
const { locale } = useContext(LanguageContext);
const { data: movieData, error: movieError } = useSWR<MovieDetails>(
`/api/v1/movie/${router.query.movieId}?language=${locale}`
);
const { data, error, size, setSize } = useSWRInfinite<SearchResult>(
(pageIndex: number, previousPageData: SearchResult | null) => {
if (previousPageData && pageIndex + 1 > previousPageData.totalPages) {
@@ -52,13 +66,17 @@ const MovieRecommendations: React.FC = () => {
return (
<>
<div className="md:flex md:items-center md:justify-between mb-8 mt-6">
<div className="flex-1 min-w-0">
<h2 className="text-xl leading-7 text-white sm:text-2xl sm:leading-9 sm:truncate">
Recommendations
</h2>
</div>
</div>
<Header
subtext={
movieData && !movieError
? intl.formatMessage(messages.recommendationssubtext, {
title: movieData.title,
})
: ''
}
>
<FormattedMessage {...messages.recommendations} />
</Header>
<ListView
items={titles}
isEmpty={isEmpty}

38
src/components/MovieDetails/MovieSimilar.tsx
View File

@@ -1,8 +1,17 @@
import React from 'react';
import { useSWRInfinite } from 'swr';
import { MovieResult } from '../../../server/models/Search';
import React, { useContext } from 'react';
import useSWR, { useSWRInfinite } from 'swr';
import type { MovieResult } from '../../../server/models/Search';
import ListView from '../Common/ListView';
import { useRouter } from 'next/router';
import Header from '../Common/Header';
import { LanguageContext } from '../../context/LanguageContext';
import type { MovieDetails } from '../../../server/models/Movie';
import { defineMessages, useIntl, FormattedMessage } from 'react-intl';
const messages = defineMessages({
similar: 'Similar Titles',
similarsubtext: 'Other movies similar to {title}',
});
interface SearchResult {
page: number;
@@ -13,6 +22,11 @@ interface SearchResult {
const MovieSimilar: React.FC = () => {
const router = useRouter();
const intl = useIntl();
const { locale } = useContext(LanguageContext);
const { data: movieData, error: movieError } = useSWR<MovieDetails>(
`/api/v1/movie/${router.query.movieId}?language=${locale}`
);
const { data, error, size, setSize } = useSWRInfinite<SearchResult>(
(pageIndex: number, previousPageData: SearchResult | null) => {
if (previousPageData && pageIndex + 1 > previousPageData.totalPages) {
@@ -52,13 +66,17 @@ const MovieSimilar: React.FC = () => {
return (
<>
<div className="md:flex md:items-center md:justify-between mb-8 mt-6">
<div className="flex-1 min-w-0">
<h2 className="text-xl leading-7 text-white sm:text-2xl sm:leading-9 sm:truncate">
Similar Titles
</h2>
</div>
</div>
<Header
subtext={
movieData && !movieError
? intl.formatMessage(messages.similarsubtext, {
title: movieData.title,
})
: undefined
}
>
<FormattedMessage {...messages.similar} />
</Header>
<ListView
items={titles}
isEmpty={isEmpty}

34
src/components/TvDetails/TvRecommendations.tsx
View File

@@ -1,9 +1,17 @@
import React, { useContext } from 'react';
import { useSWRInfinite } from 'swr';
import useSWR, { useSWRInfinite } from 'swr';
import type { TvResult } from '../../../server/models/Search';
import ListView from '../Common/ListView';
import { useRouter } from 'next/router';
import { LanguageContext } from '../../context/LanguageContext';
import Header from '../Common/Header';
import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
import { TvDetails } from '../../../server/models/Tv';
const messages = defineMessages({
recommendations: 'Recommendations',
recommendationssubtext: 'If you liked {title}, you might also like...',
});
interface SearchResult {
page: number;
@@ -13,8 +21,12 @@ interface SearchResult {
}
const TvRecommendations: React.FC = () => {
const { locale } = useContext(LanguageContext);
const router = useRouter();
const intl = useIntl();
const { locale } = useContext(LanguageContext);
const { data: tvData, error: tvError } = useSWR<TvDetails>(
`/api/v1/tv/${router.query.tvId}?language=${locale}`
);
const { data, error, size, setSize } = useSWRInfinite<SearchResult>(
(pageIndex: number, previousPageData: SearchResult | null) => {
if (previousPageData && pageIndex + 1 > previousPageData.totalPages) {
@@ -51,13 +63,17 @@ const TvRecommendations: React.FC = () => {
return (
<>
<div className="md:flex md:items-center md:justify-between mb-8 mt-6">
<div className="flex-1 min-w-0">
<h2 className="text-xl leading-7 text-white sm:text-2xl sm:leading-9 sm:truncate">
Recommendations
</h2>
</div>
</div>
<Header
subtext={
tvData && !tvError
? intl.formatMessage(messages.recommendationssubtext, {
title: tvData.name,
})
: ''
}
>
<FormattedMessage {...messages.recommendations} />
</Header>
<ListView
items={titles}
isEmpty={isEmpty}

34
src/components/TvDetails/TvSimilar.tsx
View File

@@ -1,9 +1,17 @@
import React, { useContext } from 'react';
import { useSWRInfinite } from 'swr';
import { MovieResult } from '../../../server/models/Search';
import useSWR, { useSWRInfinite } from 'swr';
import type { MovieResult } from '../../../server/models/Search';
import ListView from '../Common/ListView';
import { useRouter } from 'next/router';
import { LanguageContext } from '../../context/LanguageContext';
import { useIntl, defineMessages, FormattedMessage } from 'react-intl';
import type { TvDetails } from '../../../server/models/Tv';
import Header from '../Common/Header';
const messages = defineMessages({
similar: 'Similar Series',
similarsubtext: 'Other series similar to {title}',
});
interface SearchResult {
page: number;
@@ -14,7 +22,11 @@ interface SearchResult {
const TvSimilar: React.FC = () => {
const router = useRouter();
const intl = useIntl();
const { locale } = useContext(LanguageContext);
const { data: tvData, error: tvError } = useSWR<TvDetails>(
`/api/v1/tv/${router.query.tvId}?language=${locale}`
);
const { data, error, size, setSize } = useSWRInfinite<SearchResult>(
(pageIndex: number, previousPageData: SearchResult | null) => {
if (previousPageData && pageIndex + 1 > previousPageData.totalPages) {
@@ -54,13 +66,17 @@ const TvSimilar: React.FC = () => {
return (
<>
<div className="md:flex md:items-center md:justify-between mb-8 mt-6">
<div className="flex-1 min-w-0">
<h2 className="text-xl leading-7 text-white sm:text-2xl sm:leading-9 sm:truncate">
Similar Series
</h2>
</div>
</div>
<Header
subtext={
tvData && !tvError
? intl.formatMessage(messages.similarsubtext, {
title: tvData.name,
})
: undefined
}
>
<FormattedMessage {...messages.similar} />
</Header>
<ListView
items={titles}
isEmpty={isEmpty}

5
src/i18n/locale/en.json
View File

@@ -8,6 +8,7 @@
"components.Discover.recentrequests": "Recent Requests",
"components.Discover.trending": "Trending",
"components.Discover.upcoming": "Upcoming Movies",
"components.Discover.upcomingmovies": "Upcoming Movies",
"components.Layout.LanguagePicker.changelanguage": "Change Language",
"components.Layout.SearchInput.searchPlaceholder": "Search Movies & TV",
"components.Layout.Sidebar.dashboard": "Discover",
@@ -23,11 +24,13 @@
"components.MovieDetails.overviewunavailable": "Overview unavailable",
"components.MovieDetails.pending": "Pending",
"components.MovieDetails.recommendations": "Recommendations",
"components.MovieDetails.recommendationssubtext": "If you liked {title}, you might also like...",
"components.MovieDetails.releasedate": "Release Date",
"components.MovieDetails.request": "Request",
"components.MovieDetails.revenue": "Revenue",
"components.MovieDetails.runtime": "{minutes} minutes",
"components.MovieDetails.similar": "Similar Titles",
"components.MovieDetails.similarsubtext": "Other movies similar to {title}",
"components.MovieDetails.status": "Status",
"components.MovieDetails.unavailable": "Unavailable",
"components.MovieDetails.userrating": "User Rating",
@@ -71,9 +74,11 @@
"components.TvDetails.overviewunavailable": "Overview unavailable",
"components.TvDetails.pending": "Pending",
"components.TvDetails.recommendations": "Recommendations",
"components.TvDetails.recommendationssubtext": "If you liked {title}, you might also like...",
"components.TvDetails.request": "Request",
"components.TvDetails.requestmore": "Request More",
"components.TvDetails.similar": "Similar Series",
"components.TvDetails.similarsubtext": "Other series similar to {title}",
"components.TvDetails.status": "Status",
"components.TvDetails.unavailable": "Unavailable",
"components.TvDetails.userrating": "User Rating",

5
src/i18n/locale/ja.json
View File

@@ -8,6 +8,7 @@
"components.Discover.recentrequests": "最近のリクエスト",
"components.Discover.trending": "",
"components.Discover.upcoming": "",
"components.Discover.upcomingmovies": "",
"components.Layout.LanguagePicker.changelanguage": "言語",
"components.Layout.SearchInput.searchPlaceholder": "作品名で検索",
"components.Layout.Sidebar.dashboard": "ホーム",
@@ -23,11 +24,13 @@
"components.MovieDetails.overviewunavailable": "",
"components.MovieDetails.pending": "リクエスト中",
"components.MovieDetails.recommendations": "オススメの作品",
"components.MovieDetails.recommendationssubtext": "",
"components.MovieDetails.releasedate": "公開日",
"components.MovieDetails.request": "リクエストする",
"components.MovieDetails.revenue": "製作費",
"components.MovieDetails.runtime": "{minutes}分",
"components.MovieDetails.similar": "関連作品",
"components.MovieDetails.similarsubtext": "",
"components.MovieDetails.status": "状態",
"components.MovieDetails.unavailable": "",
"components.MovieDetails.userrating": "ユーザー評価",
@@ -71,9 +74,11 @@
"components.TvDetails.overviewunavailable": "",
"components.TvDetails.pending": "",
"components.TvDetails.recommendations": "",
"components.TvDetails.recommendationssubtext": "",
"components.TvDetails.request": "",
"components.TvDetails.requestmore": "",
"components.TvDetails.similar": "",
"components.TvDetails.similarsubtext": "",
"components.TvDetails.status": "",
"components.TvDetails.unavailable": "",
"components.TvDetails.userrating": "",