Remove redundant code in selecting with click on poster

(cherry picked from commit b116f63a1d95a23a6f3684e6b60ead60c2584f0f)

frontend/src/Movie/Index/Overview/MovieIndexOverview.tsx

@@ -67,6 +67,7 @@ function MovieIndexOverview(props: MovieIndexOverviewProps) {
     monitored,
     status,
     path,
+    titleSlug,
     overview,
     statistics = {} as Statistics,
     images,
@@ -141,7 +142,9 @@ function MovieIndexOverview(props: MovieIndexOverviewProps) {
       <div className={styles.content}>
         <div className={styles.poster}>
           <div className={styles.posterContainer}>
-            {isSelectMode ? <MovieIndexPosterSelect movieId={movieId} /> : null}
+            {isSelectMode ? (
+              <MovieIndexPosterSelect movieId={movieId} titleSlug={titleSlug} />
+            ) : null}
 
             {status === 'deleted' ? (
               <div className={styles.deleted} title={translate('Deleted')} />

frontend/src/Movie/Index/Posters/MovieIndexPoster.tsx

@@ -1,6 +1,5 @@
-import React, { SyntheticEvent, useCallback, useState } from 'react';
+import React, { useCallback, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
-import { useSelect } from 'App/SelectContext';
 import { MOVIE_SEARCH, REFRESH_MOVIE } from 'Commands/commandNames';
 import Icon from 'Components/Icon';
 import ImdbRating from 'Components/ImdbRating';
@@ -70,6 +69,7 @@ function MovieIndexPoster(props: MovieIndexPosterProps) {
     monitored,
     status,
     images,
+    titleSlug,
     tmdbId,
     imdbId,
     youTubeTrailerId,
@@ -142,30 +142,7 @@ function MovieIndexPoster(props: MovieIndexPosterProps) {
     setIsDeleteMovieModalOpen(false);
   }, [setIsDeleteMovieModalOpen]);
 
-  const [selectState, selectDispatch] = useSelect();
-
-  const onSelectPress = useCallback(
-    (event: SyntheticEvent<HTMLElement, MouseEvent>) => {
-      if (event.nativeEvent.ctrlKey || event.nativeEvent.metaKey) {
-        window.open(`/movie/${tmdbId}`, '_blank');
-        return;
-      }
-
-      const shiftKey = event.nativeEvent.shiftKey;
-
-      selectDispatch({
-        type: 'toggleSelected',
-        id: movieId,
-        isSelected: !selectState.selectedState[movieId],
-        shiftKey,
-      });
-    },
-    [movieId, selectState.selectedState, selectDispatch, tmdbId]
-  );
-
-  const link = `/movie/${tmdbId}`;
-
-  const linkProps = isSelectMode ? { onPress: onSelectPress } : { to: link };
+  const link = `/movie/${titleSlug}`;
 
   const elementStyle = {
     width: `${posterWidth}px`,
@@ -175,7 +152,9 @@ function MovieIndexPoster(props: MovieIndexPosterProps) {
   return (
     <div className={styles.content}>
       <div className={styles.posterContainer} title={title}>
-        {isSelectMode ? <MovieIndexPosterSelect movieId={movieId} /> : null}
+        {isSelectMode ? (
+          <MovieIndexPosterSelect movieId={movieId} titleSlug={titleSlug} />
+        ) : null}
 
         <Label className={styles.controls}>
           <SpinnerIconButton
@@ -220,7 +199,7 @@ function MovieIndexPoster(props: MovieIndexPosterProps) {
           <div className={styles.deleted} title={translate('Deleted')} />
         ) : null}
 
-        <Link className={styles.link} style={elementStyle} {...linkProps}>
+        <Link className={styles.link} style={elementStyle} to={link}>
           <MoviePoster
             style={elementStyle}
             images={images}

frontend/src/Movie/Index/Select/MovieIndexPosterSelect.css

@@ -3,8 +3,8 @@
   top: 0;
   left: 0;
   z-index: 3;
-  width: 36px;
-  height: 36px;
+  width: 100%;
+  height: 100%;
 }
 
 .checkContainer {

frontend/src/Movie/Index/Select/MovieIndexPosterSelect.tsx

@@ -7,15 +7,23 @@ import styles from './MovieIndexPosterSelect.css';
 
 interface MovieIndexPosterSelectProps {
   movieId: number;
+  titleSlug: string;
 }
 
-function MovieIndexPosterSelect(props: MovieIndexPosterSelectProps) {
-  const { movieId } = props;
+function MovieIndexPosterSelect({
+  movieId,
+  titleSlug,
+}: MovieIndexPosterSelectProps) {
   const [selectState, selectDispatch] = useSelect();
   const isSelected = selectState.selectedState[movieId];
 
   const onSelectPress = useCallback(
     (event: SyntheticEvent<HTMLElement, PointerEvent>) => {
+      if (event.nativeEvent.ctrlKey || event.nativeEvent.metaKey) {
+        window.open(`${window.Radarr.urlBase}/movie/${titleSlug}`, '_blank');
+        return;
+      }
+
       const shiftKey = event.nativeEvent.shiftKey;
 
       selectDispatch({
@@ -25,7 +33,7 @@ function MovieIndexPosterSelect(props: MovieIndexPosterSelectProps) {
         shiftKey,
       });
     },
-    [movieId, isSelected, selectDispatch]
+    [movieId, titleSlug, isSelected, selectDispatch]
   );
 
   return (