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

mobile behavior remains mostly the same, except after the first click, a second click anywhere else
will go through to the title.

src/components/TitleCard/index.tsx

@@ -10,10 +10,11 @@ import Link from 'next/link';
 import { MediaStatus } from '../../../server/constants/media';
 import RequestModal from '../RequestModal';
 import { defineMessages, useIntl } from 'react-intl';
+import { useIsTouch } from '../../hooks/useIsTouch';
 
 const messages = defineMessages({
-  movie: 'MOVIE',
+  movie: 'Movie',
-  tvshow: 'SERIES',
+  tvshow: 'Series',
 });
 
 interface TitleCardProps {
@@ -38,6 +39,7 @@ const TitleCard: React.FC<TitleCardProps> = ({
   mediaType,
   canExpand = false,
 }) => {
+  const isTouch = useIsTouch();
   const intl = useIntl();
   const [isUpdating, setIsUpdating] = useState(false);
   const [currentStatus, setCurrentStatus] = useState(status);
@@ -74,9 +76,13 @@ const TitleCard: React.FC<TitleCardProps> = ({
       <div
         className="titleCard outline-none cursor-default"
         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)}
         onClick={() => setShowDetail(true)}
         onKeyDown={(e) => {
@@ -146,15 +152,16 @@ const TitleCard: React.FC<TitleCardProps> = ({
 
           <Transition
             show={!image || showDetail || showRequestModal}
-            enter="transition ease-in-out duration-300 transform opacity-0"
+            enter="transition transform opacity-0"
             enterFrom="opacity-0"
             enterTo="opacity-100"
-            leave="transition ease-in-out duration-300 transform opacity-100"
+            leave="transition transform opacity-100"
             leaveFrom="opacity-100"
             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
+                className="absolute w-full text-left top-0 right-0 left-0 bottom-0 rounded-lg overflow-hidden cursor-pointer"
                 style={{
                   background:
                     'linear-gradient(180deg, rgba(45, 55, 72, 0.4) 0%, rgba(45, 55, 72, 0.9) 100%)',
@@ -182,9 +189,8 @@ const TitleCard: React.FC<TitleCardProps> = ({
                   <div className="flex justify-between left-0 bottom-0 right-0 top-0 px-2 py-2">
                     <Link
                       href={
-                      mediaType === 'movie' ? '/movie/[movieId]' : '/tv/[tvId]'
+                        mediaType === 'movie' ? `/movie/${id}` : `/tv/${id}`
                       }
-                    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
@@ -212,7 +218,10 @@ const TitleCard: React.FC<TitleCardProps> = ({
                     {(!currentStatus ||
                       currentStatus === MediaStatus.UNKNOWN) && (
                       <button
-                      onClick={() => setShowRequestModal(true)}
+                        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
@@ -297,7 +306,8 @@ const TitleCard: React.FC<TitleCardProps> = ({
                     )}
                   </div>
                 </div>
-            </div>
+              </a>
+            </Link>
           </Transition>
         </div>
       </div>

src/context/InteractionContext.tsx

@@ -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>
+  );
+};

src/hooks/useInteraction.ts

@@ -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;

src/hooks/useIsTouch.ts

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

src/pages/_app.tsx

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