mirror of
https://github.com/sct/overseerr.git
synced 2025-09-17 17:24:35 +02:00
feat(frontend): new dashboard concept (#82)
This commit is contained in:
@@ -1,17 +1,27 @@
|
|||||||
import React, { useRef } from 'react';
|
import React, { useRef } from 'react';
|
||||||
import { useSWRInfinite } from 'swr';
|
import useSWR, { useSWRInfinite } from 'swr';
|
||||||
import type { MovieResult } from '../../../server/models/Search';
|
import type { MovieResult, TvResult } from '../../../server/models/Search';
|
||||||
import TitleCard from '../TitleCard';
|
import TitleCard from '../TitleCard';
|
||||||
import useVerticalScroll from '../../hooks/useVerticalScroll';
|
import useVerticalScroll from '../../hooks/useVerticalScroll';
|
||||||
|
|
||||||
interface SearchResult {
|
interface MovieDiscoverResult {
|
||||||
page: number;
|
page: number;
|
||||||
totalResults: number;
|
totalResults: number;
|
||||||
totalPages: number;
|
totalPages: number;
|
||||||
results: MovieResult[];
|
results: MovieResult[];
|
||||||
}
|
}
|
||||||
|
|
||||||
const getKey = (pageIndex: number, previousPageData: SearchResult | null) => {
|
interface TvDiscoverResult {
|
||||||
|
page: number;
|
||||||
|
totalResults: number;
|
||||||
|
totalPages: number;
|
||||||
|
results: TvResult[];
|
||||||
|
}
|
||||||
|
|
||||||
|
const getKey = (
|
||||||
|
pageIndex: number,
|
||||||
|
previousPageData: MovieDiscoverResult | null
|
||||||
|
) => {
|
||||||
if (previousPageData && pageIndex + 1 > previousPageData.totalPages) {
|
if (previousPageData && pageIndex + 1 > previousPageData.totalPages) {
|
||||||
return null;
|
return null;
|
||||||
}
|
}
|
||||||
@@ -20,61 +30,30 @@ const getKey = (pageIndex: number, previousPageData: SearchResult | null) => {
|
|||||||
};
|
};
|
||||||
|
|
||||||
const Discover: React.FC = () => {
|
const Discover: React.FC = () => {
|
||||||
const { data, error, size, setSize } = useSWRInfinite<SearchResult>(getKey, {
|
const { data: movieData, error: movieError } = useSWR<MovieDiscoverResult>(
|
||||||
initialSize: 3,
|
'/api/v1/discover/movies'
|
||||||
});
|
);
|
||||||
|
const { data: tvData, error: tvError } = useSWR<TvDiscoverResult>(
|
||||||
const isLoadingInitialData = !data && !error;
|
'/api/v1/discover/tv'
|
||||||
const isLoadingMore =
|
|
||||||
isLoadingInitialData ||
|
|
||||||
(size > 0 && data && typeof data[size - 1] === 'undefined');
|
|
||||||
|
|
||||||
useVerticalScroll(() => {
|
|
||||||
setSize(size + 1);
|
|
||||||
}, !isLoadingMore && !isLoadingInitialData);
|
|
||||||
|
|
||||||
if (error) {
|
|
||||||
return <div>{error}</div>;
|
|
||||||
}
|
|
||||||
|
|
||||||
const titles = data?.reduce(
|
|
||||||
(a, v) => [...a, ...v.results],
|
|
||||||
[] as MovieResult[]
|
|
||||||
);
|
);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<div className="md:flex md:items-center md:justify-between mb-8 mt-8">
|
<div className="md:flex md:items-center md:justify-between mb-4 mt-6">
|
||||||
<div className="flex-1 min-w-0">
|
<div className="flex-1 min-w-0">
|
||||||
<h2 className="text-2xl font-bold leading-7 text-white sm:text-3xl sm:leading-9 sm:truncate">
|
<h2 className="text-xl leading-7 text-white sm:text-2xl sm:leading-9 sm:truncate">
|
||||||
Discover
|
Popular Movies
|
||||||
</h2>
|
</h2>
|
||||||
</div>
|
</div>
|
||||||
<div className="mt-4 flex md:mt-0 md:ml-4">
|
|
||||||
<span className="relative z-0 inline-flex shadow-sm rounded-md">
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
className="relative inline-flex items-center px-4 py-2 rounded-l-md border border-indigo-900 bg-indigo-500 hover:bg-indigo-400 text-sm leading-5 font-medium text-cool-gray-100 hover:text-white focus:z-10 focus:outline-none focus:border-blue-300 focus:shadow-outline-blue active:bg-gray-100 active:text-gray-700 transition ease-in-out duration-150"
|
|
||||||
>
|
|
||||||
Movies
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
className="-ml-px relative inline-flex items-center px-4 py-2 rounded-r-md border border-indigo-900 bg-indigo-500 text-sm leading-5 font-medium text-cool-gray-100 hover:text-white focus:z-10 focus:outline-none focus:border-blue-300 focus:shadow-outline-blue active:bg-gray-100 active:text-gray-700 transition ease-in-out duration-150"
|
|
||||||
>
|
|
||||||
TV Shows
|
|
||||||
</button>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<ul className="grid grid-cols-1 gap-6 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5">
|
<div
|
||||||
{titles?.map((title) => (
|
className="overflow-x-scroll whitespace-no-wrap hide-scrollbar scrolling-touch overscroll-x-contain -ml-2 -mr-4"
|
||||||
<li
|
style={{ height: 295 }}
|
||||||
key={title.id}
|
>
|
||||||
className="col-span-1 flex flex-col text-center items-center"
|
{movieData?.results.map((title) => (
|
||||||
>
|
<div key={title.id} className="px-2 inline-block">
|
||||||
<TitleCard
|
<TitleCard
|
||||||
image={`image.tmdb.org/t/p/w600_and_h900_bestv2${title.posterPath}`}
|
image={title.posterPath}
|
||||||
status={title.request?.status}
|
status={title.request?.status}
|
||||||
summary={title.overview}
|
summary={title.overview}
|
||||||
title={title.title}
|
title={title.title}
|
||||||
@@ -82,19 +61,48 @@ const Discover: React.FC = () => {
|
|||||||
year={title.releaseDate}
|
year={title.releaseDate}
|
||||||
mediaType={title.mediaType}
|
mediaType={title.mediaType}
|
||||||
/>
|
/>
|
||||||
</li>
|
</div>
|
||||||
))}
|
))}
|
||||||
{(isLoadingInitialData ||
|
{!movieData &&
|
||||||
(isLoadingMore && (titles?.length ?? 0) > 0)) &&
|
!movieError &&
|
||||||
[...Array(8)].map((_item, i) => (
|
[...Array(10)].map((_item, i) => (
|
||||||
<li
|
<div key={`placeholder-${i}`} className="px-2 inline-block">
|
||||||
key={`placeholder-${i}`}
|
|
||||||
className="col-span-1 flex flex-col text-center items-center"
|
|
||||||
>
|
|
||||||
<TitleCard.Placeholder />
|
<TitleCard.Placeholder />
|
||||||
</li>
|
</div>
|
||||||
))}
|
))}
|
||||||
</ul>
|
</div>
|
||||||
|
<div className="md:flex md:items-center md:justify-between mb-4 mt-4">
|
||||||
|
<div className="flex-1 min-w-0">
|
||||||
|
<h2 className="text-xl leading-7 text-white sm:text-2xl sm:leading-9 sm:truncate">
|
||||||
|
Popular TV Shows
|
||||||
|
</h2>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
className="overflow-x-scroll whitespace-no-wrap hide-scrollbar scrolling-touch overscroll-x-contain -ml-2 -mr-4"
|
||||||
|
style={{ height: 295 }}
|
||||||
|
>
|
||||||
|
{tvData?.results.map((title) => (
|
||||||
|
<div key={title.id} className="px-2 inline-block">
|
||||||
|
<TitleCard
|
||||||
|
image={title.posterPath}
|
||||||
|
status={title.request?.status}
|
||||||
|
summary={title.overview}
|
||||||
|
title={title.name}
|
||||||
|
userScore={title.voteAverage}
|
||||||
|
year={title.firstAirDate}
|
||||||
|
mediaType={title.mediaType}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
{!tvData &&
|
||||||
|
!tvError &&
|
||||||
|
[...Array(10)].map((_item, i) => (
|
||||||
|
<div key={`placeholder-${i}`} className="px-2 inline-block">
|
||||||
|
<TitleCard.Placeholder />
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
@@ -3,7 +3,7 @@ import React from 'react';
|
|||||||
const Notifications: React.FC = () => {
|
const Notifications: React.FC = () => {
|
||||||
return (
|
return (
|
||||||
<button
|
<button
|
||||||
className="p-1 text-gray-400 rounded-full hover:bg-gray-100 hover:text-gray-500 focus:outline-none focus:shadow-outline focus:text-gray-500"
|
className="p-1 text-gray-400 rounded-full hover:bg-cool-gray-500 hover:text-white focus:outline-none focus:shadow-outline focus:text-white"
|
||||||
aria-label="Notifications"
|
aria-label="Notifications"
|
||||||
>
|
>
|
||||||
<svg
|
<svg
|
||||||
|
@@ -21,7 +21,7 @@ const SearchInput: React.FC = () => {
|
|||||||
</div>
|
</div>
|
||||||
<input
|
<input
|
||||||
id="search_field"
|
id="search_field"
|
||||||
className="block w-full h-full pl-8 pr-3 py-2 rounded-md bg-cool-gray-600 text-white placeholder-gray-300 focus:outline-none focus:placeholder-gray-400 sm:text-sm"
|
className="block w-full h-full pl-8 pr-3 py-2 rounded-md bg-cool-gray-600 text-white placeholder-gray-300 focus:outline-none focus:placeholder-gray-400 sm:text-base"
|
||||||
placeholder="Search"
|
placeholder="Search"
|
||||||
type="search"
|
type="search"
|
||||||
value={searchValue}
|
value={searchValue}
|
||||||
|
@@ -26,7 +26,7 @@ const UserDropdown: React.FC = () => {
|
|||||||
id="user-menu"
|
id="user-menu"
|
||||||
aria-label="User menu"
|
aria-label="User menu"
|
||||||
aria-haspopup="true"
|
aria-haspopup="true"
|
||||||
onClick={() => setDropdownOpen((state) => !state)}
|
onClick={() => setDropdownOpen(true)}
|
||||||
>
|
>
|
||||||
<img className="h-8 w-8 rounded-full" src={user?.avatar} alt="" />
|
<img className="h-8 w-8 rounded-full" src={user?.avatar} alt="" />
|
||||||
</button>
|
</button>
|
||||||
@@ -45,28 +45,28 @@ const UserDropdown: React.FC = () => {
|
|||||||
ref={dropdownRef}
|
ref={dropdownRef}
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
className="py-1 rounded-md bg-white shadow-xs"
|
className="py-1 rounded-md bg-cool-gray-700 shadow-xs"
|
||||||
role="menu"
|
role="menu"
|
||||||
aria-orientation="vertical"
|
aria-orientation="vertical"
|
||||||
aria-labelledby="user-menu"
|
aria-labelledby="user-menu"
|
||||||
>
|
>
|
||||||
<a
|
<a
|
||||||
href="#"
|
href="#"
|
||||||
className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 transition ease-in-out duration-150"
|
className="block px-4 py-2 text-sm text-gray-200 hover:bg-gray-600 transition ease-in-out duration-150"
|
||||||
role="menuitem"
|
role="menuitem"
|
||||||
>
|
>
|
||||||
Your Profile
|
Your Profile
|
||||||
</a>
|
</a>
|
||||||
<a
|
<a
|
||||||
href="#"
|
href="#"
|
||||||
className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 transition ease-in-out duration-150"
|
className="block px-4 py-2 text-sm text-gray-200 hover:bg-gray-600 transition ease-in-out duration-150"
|
||||||
role="menuitem"
|
role="menuitem"
|
||||||
>
|
>
|
||||||
Settings
|
Settings
|
||||||
</a>
|
</a>
|
||||||
<a
|
<a
|
||||||
href="#"
|
href="#"
|
||||||
className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 transition ease-in-out duration-150"
|
className="block px-4 py-2 text-sm text-gray-200 hover:bg-gray-600 transition ease-in-out duration-150"
|
||||||
role="menuitem"
|
role="menuitem"
|
||||||
onClick={() => logout()}
|
onClick={() => logout()}
|
||||||
>
|
>
|
||||||
|
@@ -14,7 +14,7 @@ const Layout: React.FC = ({ children }) => {
|
|||||||
<div className="flex flex-col w-0 flex-1 md:ml-64 relative mb-16">
|
<div className="flex flex-col w-0 flex-1 md:ml-64 relative mb-16">
|
||||||
<div className="z-10 flex-shrink-0 flex h-16 bg-cool-gray-600 shadow fixed right-0 left-0 md:left-64">
|
<div className="z-10 flex-shrink-0 flex h-16 bg-cool-gray-600 shadow fixed right-0 left-0 md:left-64">
|
||||||
<button
|
<button
|
||||||
className="px-4 border-r border-gray-200 text-gray-500 focus:outline-none focus:bg-gray-100 focus:text-gray-600 md:hidden"
|
className="px-4 border-r border-gray-800 text-gray-200 focus:outline-none focus:bg-gray-300 focus:text-gray-600 md:hidden"
|
||||||
aria-label="Open sidebar"
|
aria-label="Open sidebar"
|
||||||
onClick={() => setSidebarOpen(true)}
|
onClick={() => setSidebarOpen(true)}
|
||||||
>
|
>
|
||||||
@@ -46,7 +46,7 @@ const Layout: React.FC = ({ children }) => {
|
|||||||
tabIndex={0}
|
tabIndex={0}
|
||||||
>
|
>
|
||||||
<div className="pt-2 pb-6 md:py-6">
|
<div className="pt-2 pb-6 md:py-6">
|
||||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 md:px-8">
|
<div className="max-w-8xl mx-auto px-4 sm:px-6 md:px-8">
|
||||||
{children}
|
{children}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@@ -53,9 +53,9 @@ const Search: React.FC = () => {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<div className="md:flex md:items-center md:justify-between mb-8 mt-8">
|
<div className="md:flex md:items-center md:justify-between mb-8 mt-6">
|
||||||
<div className="flex-1 min-w-0">
|
<div className="flex-1 min-w-0">
|
||||||
<h2 className="text-2xl font-bold leading-7 text-white sm:text-3xl sm:leading-9 sm:truncate">
|
<h2 className="text-xl leading-7 text-white sm:text-2xl sm:leading-9 sm:truncate">
|
||||||
Search Results
|
Search Results
|
||||||
</h2>
|
</h2>
|
||||||
</div>
|
</div>
|
||||||
@@ -81,7 +81,7 @@ const Search: React.FC = () => {
|
|||||||
No Results
|
No Results
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
<ul className="grid grid-cols-1 gap-6 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
|
<ul className="grid grid-cols-1 gap-6 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5">
|
||||||
{titles?.map((title) => {
|
{titles?.map((title) => {
|
||||||
let titleCard: React.ReactNode;
|
let titleCard: React.ReactNode;
|
||||||
|
|
||||||
@@ -89,7 +89,7 @@ const Search: React.FC = () => {
|
|||||||
case 'movie':
|
case 'movie':
|
||||||
titleCard = (
|
titleCard = (
|
||||||
<TitleCard
|
<TitleCard
|
||||||
image={`image.tmdb.org/t/p/w600_and_h900_bestv2${title.posterPath}`}
|
image={title.posterPath}
|
||||||
status={title.request?.status}
|
status={title.request?.status}
|
||||||
summary={title.overview}
|
summary={title.overview}
|
||||||
title={title.title}
|
title={title.title}
|
||||||
@@ -102,7 +102,7 @@ const Search: React.FC = () => {
|
|||||||
case 'tv':
|
case 'tv':
|
||||||
titleCard = (
|
titleCard = (
|
||||||
<TitleCard
|
<TitleCard
|
||||||
image={`image.tmdb.org/t/p/w600_and_h900_bestv2${title.posterPath}`}
|
image={title.posterPath}
|
||||||
status={title.request?.status}
|
status={title.request?.status}
|
||||||
summary={title.overview}
|
summary={title.overview}
|
||||||
title={title.name}
|
title={title.name}
|
||||||
@@ -128,7 +128,7 @@ const Search: React.FC = () => {
|
|||||||
})}
|
})}
|
||||||
{(isLoadingInitialData ||
|
{(isLoadingInitialData ||
|
||||||
(isLoadingMore && (titles?.length ?? 0) > 0)) &&
|
(isLoadingMore && (titles?.length ?? 0) > 0)) &&
|
||||||
[...Array(8)].map((_item, i) => (
|
[...Array(10)].map((_item, i) => (
|
||||||
<li
|
<li
|
||||||
key={`placeholder-${i}`}
|
key={`placeholder-${i}`}
|
||||||
className="col-span-1 flex flex-col text-center items-center"
|
className="col-span-1 flex flex-col text-center items-center"
|
||||||
|
@@ -8,7 +8,7 @@ import Transition from '../Transition';
|
|||||||
import Placeholder from './Placeholder';
|
import Placeholder from './Placeholder';
|
||||||
|
|
||||||
interface TitleCardProps {
|
interface TitleCardProps {
|
||||||
image: string;
|
image?: string;
|
||||||
summary: string;
|
summary: string;
|
||||||
year: string;
|
year: string;
|
||||||
title: string;
|
title: string;
|
||||||
@@ -49,12 +49,12 @@ const TitleCard: React.FC<TitleCardProps> = ({
|
|||||||
<div
|
<div
|
||||||
className="titleCard"
|
className="titleCard"
|
||||||
style={{
|
style={{
|
||||||
backgroundImage: `url(//${image})`,
|
backgroundImage: `url(//image.tmdb.org/t/p/w600_and_h900_bestv2${image})`,
|
||||||
}}
|
}}
|
||||||
onMouseEnter={() => setShowDetail(true)}
|
onMouseEnter={() => setShowDetail(true)}
|
||||||
onMouseLeave={() => setShowDetail(false)}
|
onMouseLeave={() => setShowDetail(false)}
|
||||||
>
|
>
|
||||||
<div className="absolute top-0 h-full w-full bottom-0 left-0 right-0 overflow-hidden">
|
<div className="absolute top-0 h-full w-full bottom-0 left-0 right-0 overflow-hidden shadow-md">
|
||||||
<div
|
<div
|
||||||
className={`absolute left-0 top-0 rounded-tl-md rounded-br-md z-50 ${
|
className={`absolute left-0 top-0 rounded-tl-md rounded-br-md z-50 ${
|
||||||
mediaType === 'movie' ? 'bg-blue-500' : 'bg-purple-600'
|
mediaType === 'movie' ? 'bg-blue-500' : 'bg-purple-600'
|
||||||
@@ -83,7 +83,7 @@ const TitleCard: React.FC<TitleCardProps> = ({
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<Transition
|
<Transition
|
||||||
show={showDetail}
|
show={!image || showDetail}
|
||||||
enter="transition ease-in-out duration-300 transform opacity-0"
|
enter="transition ease-in-out duration-300 transform opacity-0"
|
||||||
enterFrom="opacity-0"
|
enterFrom="opacity-0"
|
||||||
enterTo="opacity-100"
|
enterTo="opacity-100"
|
||||||
@@ -104,7 +104,7 @@ const TitleCard: React.FC<TitleCardProps> = ({
|
|||||||
|
|
||||||
<h1 className="text-xl leading-tight">{title}</h1>
|
<h1 className="text-xl leading-tight">{title}</h1>
|
||||||
<div
|
<div
|
||||||
className="text-xs"
|
className="text-xs whitespace-normal"
|
||||||
style={{
|
style={{
|
||||||
WebkitLineClamp: 3,
|
WebkitLineClamp: 3,
|
||||||
display: '-webkit-box',
|
display: '-webkit-box',
|
||||||
|
@@ -19,3 +19,12 @@ body {
|
|||||||
@apply relative bg-cover rounded-lg bg-cool-gray-800;
|
@apply relative bg-cover rounded-lg bg-cool-gray-800;
|
||||||
padding-bottom: 150%;
|
padding-bottom: 150%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.hide-scrollbar {
|
||||||
|
-ms-overflow-style: none; /* IE and Edge */
|
||||||
|
scrollbar-width: none; /* Firefox */
|
||||||
|
}
|
||||||
|
|
||||||
|
.hide-scrollbar::-webkit-scrollbar {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
@@ -10,7 +10,9 @@ module.exports = {
|
|||||||
},
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
variants: {},
|
variants: {
|
||||||
|
padding: ['first', 'last'],
|
||||||
|
},
|
||||||
plugins: [
|
plugins: [
|
||||||
require('@tailwindcss/ui')({
|
require('@tailwindcss/ui')({
|
||||||
layout: 'sidebar',
|
layout: 'sidebar',
|
||||||
|
Reference in New Issue
Block a user