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

refactor(frontend): titlecard behavior changed to allow clicking anywhere to go through to title

Browse Source 
mobile behavior remains mostly the same, except after the first click, a second click anywhere else
will go through to the title.
This commit is contained in:
sct
2020-12-15 15:49:59 +00:00
parent 7c08809501
commit e8776fd336
5 changed files with 272 additions and 154 deletions
Download Patch File Download Diff File Expand all files Collapse all files

306
src/components/TitleCard/index.tsx
View File

@@ -10,10 +10,11 @@ import Link from 'next/link';
import { MediaStatus } from '../../../server/constants/media'; import { MediaStatus } from '../../../server/constants/media';
import RequestModal from '../RequestModal'; import RequestModal from '../RequestModal';
import { defineMessages, useIntl } from 'react-intl'; import { defineMessages, useIntl } from 'react-intl';
import { useIsTouch } from '../../hooks/useIsTouch';
const messages = defineMessages({ const messages = defineMessages({
movie: 'MOVIE', movie: 'Movie',
tvshow: 'SERIES', tvshow: 'Series',
}); });
interface TitleCardProps { interface TitleCardProps {
@@ -38,6 +39,7 @@ const TitleCard: React.FC<TitleCardProps> = ({
mediaType, mediaType,
canExpand = false, canExpand = false,
}) => { }) => {
const isTouch = useIsTouch();
const intl = useIntl(); const intl = useIntl();
const [isUpdating, setIsUpdating] = useState(false); const [isUpdating, setIsUpdating] = useState(false);
const [currentStatus, setCurrentStatus] = useState(status); const [currentStatus, setCurrentStatus] = useState(status);
@@ -74,9 +76,13 @@ const TitleCard: React.FC<TitleCardProps> = ({
<div <div
className="titleCard outline-none cursor-default" className="titleCard outline-none cursor-default"
style={{ style={{
backgroundImage: `url(//image.tmdb.org/t/p/w600_and_h900_bestv2${image})`, backgroundImage: `url(//image.tmdb.org/t/p/w300_and_h450_face${image})`,
}}
onMouseEnter={() => {
if (!isTouch) {
setShowDetail(true);
}
}} }}
onMouseEnter={() => setShowDetail(true)}
onMouseLeave={() => setShowDetail(false)} onMouseLeave={() => setShowDetail(false)}
onClick={() => setShowDetail(true)} onClick={() => setShowDetail(true)}
onKeyDown={(e) => { onKeyDown={(e) => {
@@ -146,158 +152,162 @@ const TitleCard: React.FC<TitleCardProps> = ({
<Transition <Transition
show={!image || showDetail || showRequestModal} show={!image || showDetail || showRequestModal}
enter="transition ease-in-out duration-300 transform opacity-0" enter="transition transform opacity-0"
enterFrom="opacity-0" enterFrom="opacity-0"
enterTo="opacity-100" enterTo="opacity-100"
leave="transition ease-in-out duration-300 transform opacity-100" leave="transition transform opacity-100"
leaveFrom="opacity-100" leaveFrom="opacity-100"
leaveTo="opacity-0" leaveTo="opacity-0"
> >
<div <Link href={mediaType === 'movie' ? `/movie/${id}` : `/tv/${id}`}>
className="absolute w-full text-left top-0 right-0 left-0 bottom-0 rounded-lg overflow-hidden" <a
style={{ className="absolute w-full text-left top-0 right-0 left-0 bottom-0 rounded-lg overflow-hidden cursor-pointer"
background: style={{
'linear-gradient(180deg, rgba(45, 55, 72, 0.4) 0%, rgba(45, 55, 72, 0.9) 100%)', background:
}} 'linear-gradient(180deg, rgba(45, 55, 72, 0.4) 0%, rgba(45, 55, 72, 0.9) 100%)',
> }}
<div className="absolute bottom-0 w-full left-0 right-0"> >
<div className="px-2 text-white"> <div className="absolute bottom-0 w-full left-0 right-0">
<div className="text-sm">{year}</div> <div className="px-2 text-white">
<div className="text-sm">{year}</div>
<h1 className="text-xl leading-tight whitespace-normal"> <h1 className="text-xl leading-tight whitespace-normal">
{title} {title}
</h1> </h1>
<div <div
className="text-xs whitespace-normal" className="text-xs whitespace-normal"
style={{ style={{
WebkitLineClamp: 3, WebkitLineClamp: 3,
display: '-webkit-box', display: '-webkit-box',
overflow: 'hidden', overflow: 'hidden',
WebkitBoxOrient: 'vertical', WebkitBoxOrient: 'vertical',
}} }}
> >
{summary} {summary}
</div>
</div>
<div className="flex justify-between left-0 bottom-0 right-0 top-0 px-2 py-2">
<Link
href={
mediaType === 'movie' ? `/movie/${id}` : `/tv/${id}`
}
>
<a className="cursor-pointer flex w-full h-7 text-center text-white bg-indigo-500 rounded-sm hover:bg-indigo-400 focus:border-indigo-700 focus:ring-indigo active:bg-indigo-700 transition ease-in-out duration-150">
<svg
className="w-4 mx-auto"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
/>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"
/>
</svg>
</a>
</Link>
{(!currentStatus ||
currentStatus === MediaStatus.UNKNOWN) && (
<button
onClick={(e) => {
e.preventDefault();
setShowRequestModal(true);
}}
className="w-full h-7 text-center text-white bg-indigo-500 rounded-sm ml-2 hover:bg-indigo-400 focus:border-indigo-700 focus:ring-indigo active:bg-indigo-700 transition ease-in-out duration-150"
>
<svg
className="w-4 mx-auto"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"
/>
</svg>
</button>
)}
{currentStatus === MediaStatus.PENDING && (
<button
className="w-full h-7 text-center text-yellow-500 border border-yellow-500 rounded-sm ml-2 cursor-default"
disabled
>
<svg
className="w-4 mx-auto"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"
/>
</svg>
</button>
)}
{currentStatus === MediaStatus.PROCESSING && (
<button
className="w-full h-7 text-center text-red-500 border border-red-500 rounded-sm ml-2 cursor-default"
disabled
>
<svg
className="w-4 mx-auto"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
/>
</svg>
</button>
)}
{(currentStatus === MediaStatus.AVAILABLE ||
currentStatus === MediaStatus.PARTIALLY_AVAILABLE) && (
<button
className="w-full h-7 text-center text-green-400 border border-green-400 rounded-sm ml-2 cursor-default"
disabled
>
<svg
className="w-4 mx-auto"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M5 13l4 4L19 7"
/>
</svg>
</button>
)}
</div> </div>
</div> </div>
<div className="flex justify-between left-0 bottom-0 right-0 top-0 px-2 py-2"> </a>
<Link </Link>
href={
mediaType === 'movie' ? '/movie/[movieId]' : '/tv/[tvId]'
}
as={mediaType === 'movie' ? `/movie/${id}` : `/tv/${id}`}
>
<a className="cursor-pointer flex w-full h-7 text-center text-white bg-indigo-500 rounded-sm hover:bg-indigo-400 focus:border-indigo-700 focus:ring-indigo active:bg-indigo-700 transition ease-in-out duration-150">
<svg
className="w-4 mx-auto"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
/>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"
/>
</svg>
</a>
</Link>
{(!currentStatus ||
currentStatus === MediaStatus.UNKNOWN) && (
<button
onClick={() => setShowRequestModal(true)}
className="w-full h-7 text-center text-white bg-indigo-500 rounded-sm ml-2 hover:bg-indigo-400 focus:border-indigo-700 focus:ring-indigo active:bg-indigo-700 transition ease-in-out duration-150"
>
<svg
className="w-4 mx-auto"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"
/>
</svg>
</button>
)}
{currentStatus === MediaStatus.PENDING && (
<button
className="w-full h-7 text-center text-yellow-500 border border-yellow-500 rounded-sm ml-2 cursor-default"
disabled
>
<svg
className="w-4 mx-auto"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"
/>
</svg>
</button>
)}
{currentStatus === MediaStatus.PROCESSING && (
<button
className="w-full h-7 text-center text-red-500 border border-red-500 rounded-sm ml-2 cursor-default"
disabled
>
<svg
className="w-4 mx-auto"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
/>
</svg>
</button>
)}
{(currentStatus === MediaStatus.AVAILABLE ||
currentStatus === MediaStatus.PARTIALLY_AVAILABLE) && (
<button
className="w-full h-7 text-center text-green-400 border border-green-400 rounded-sm ml-2 cursor-default"
disabled
>
<svg
className="w-4 mx-auto"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M5 13l4 4L19 7"
/>
</svg>
</button>
)}
</div>
</div>
</div>
</Transition> </Transition>
</div> </div>
</div> </div>

20
src/context/InteractionContext.tsx Normal file
View File

@@ -0,0 +1,20 @@
import React from 'react';
import useInteraction from '../hooks/useInteraction';
interface InteractionContextProps {
isTouch: boolean;
}
export const InteractionContext = React.createContext<InteractionContextProps>({
isTouch: false,
});
export const InteractionProvider: React.FC = ({ children }) => {
const isTouch = useInteraction();
return (
<InteractionContext.Provider value={{ isTouch }}>
{children}
</InteractionContext.Provider>
);
};

78
src/hooks/useInteraction.ts Normal file
View File

@@ -0,0 +1,78 @@
import { useState, useEffect } from 'react';
export const INTERACTION_TYPE = {
MOUSE: 'mouse',
PEN: 'pen',
TOUCH: 'touch',
};
const UPDATE_INTERVAL = 1000; // Throttle updates to the type to prevent flip flopping
const useInteraction = (): boolean => {
const [isTouch, setIsTouch] = useState(false);
useEffect(() => {
const hasTapEvent = 'ontouchstart' in window;
setIsTouch(hasTapEvent);
let localTouch = hasTapEvent;
let lastTouchUpdate = Date.now();
const shouldUpdate = (): boolean =>
lastTouchUpdate + UPDATE_INTERVAL < Date.now();
const onMouseMove = (): void => {
if (localTouch && shouldUpdate()) {
setTimeout(() => {
if (shouldUpdate()) {
setIsTouch(false);
localTouch = false;
}
}, UPDATE_INTERVAL);
}
};
const onTouchStart = (): void => {
lastTouchUpdate = Date.now();
if (!localTouch) {
setIsTouch(true);
localTouch = true;
}
};
const onPointerMove = (e: PointerEvent): void => {
const { pointerType } = e;
switch (pointerType) {
case INTERACTION_TYPE.TOUCH:
case INTERACTION_TYPE.PEN:
return onTouchStart();
default:
return onMouseMove();
}
};
if (hasTapEvent) {
window.addEventListener('mousemove', onMouseMove);
window.addEventListener('touchstart', onTouchStart);
} else {
window.addEventListener('pointerdown', onPointerMove);
window.addEventListener('pointermove', onPointerMove);
}
return () => {
if (hasTapEvent) {
window.removeEventListener('mousemove', onMouseMove);
window.removeEventListener('touchstart', onTouchStart);
} else {
window.removeEventListener('pointerdown', onPointerMove);
window.removeEventListener('pointermove', onPointerMove);
}
};
}, []);
return isTouch;
};
export default useInteraction;

7
src/hooks/useIsTouch.ts Normal file
View File

@@ -0,0 +1,7 @@
import { useContext } from 'react';
import { InteractionContext } from '../context/InteractionContext';
export const useIsTouch = (): boolean => {
const { isTouch } = useContext(InteractionContext);
return isTouch;
};

15
src/pages/_app.tsx
View File

@@ -12,6 +12,7 @@ import { IntlProvider } from 'react-intl';
import { LanguageContext, AvailableLocales } from '../context/LanguageContext'; import { LanguageContext, AvailableLocales } from '../context/LanguageContext';
import Head from 'next/head'; import Head from 'next/head';
import Toast from '../components/Toast'; import Toast from '../components/Toast';
import { InteractionProvider } from '../context/InteractionContext';
// eslint-disable-next-line @typescript-eslint/no-explicit-any // eslint-disable-next-line @typescript-eslint/no-explicit-any
const loadLocaleData = (locale: string): Promise<any> => { const loadLocaleData = (locale: string): Promise<any> => {
@@ -90,12 +91,14 @@ const CoreApp: Omit<NextAppComponentType, 'origGetInitialProps'> = ({
defaultLocale="en" defaultLocale="en"
messages={loadedMessages} messages={loadedMessages}
> >
<ToastProvider components={{ Toast }}> <InteractionProvider>
<Head> <ToastProvider components={{ Toast }}>
<title>Overseerr</title> <Head>
</Head> <title>Overseerr</title>
<UserContext initialUser={user}>{component}</UserContext> </Head>
</ToastProvider> <UserContext initialUser={user}>{component}</UserContext>
</ToastProvider>
</InteractionProvider>
</IntlProvider> </IntlProvider>
</LanguageContext.Provider> </LanguageContext.Provider>
</SWRConfig> </SWRConfig>