From a013ffe23af80098a27698b494b21f9dfe0e6cd7 Mon Sep 17 00:00:00 2001
From: Luigi <19366824+luigidotmoe@users.noreply.github.com>
Date: Tue, 12 Aug 2025 18:49:58 +0200
Subject: [PATCH] New: Select with poster click in movie selection (#11187)

---
 .../Movie/Index/Posters/MovieIndexPoster.tsx  | 28 +++++++++++++++++--
 1 file changed, 26 insertions(+), 2 deletions(-)

diff --git a/frontend/src/Movie/Index/Posters/MovieIndexPoster.tsx b/frontend/src/Movie/Index/Posters/MovieIndexPoster.tsx
index c6b27aa6f8..c659f4214b 100644
--- a/frontend/src/Movie/Index/Posters/MovieIndexPoster.tsx
+++ b/frontend/src/Movie/Index/Posters/MovieIndexPoster.tsx
@@ -1,5 +1,6 @@
-import React, { useCallback, useState } from 'react';
+import React, { SyntheticEvent, 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';
@@ -141,8 +142,31 @@ 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 elementStyle = {
     width: `${posterWidth}px`,
     height: `${posterHeight}px`,
@@ -196,7 +220,7 @@ function MovieIndexPoster(props: MovieIndexPosterProps) {
           <div className={styles.deleted} title={translate('Deleted')} />
         ) : null}
 
-        <Link className={styles.link} style={elementStyle} to={link}>
+        <Link className={styles.link} style={elementStyle} {...linkProps}>
           <MoviePoster
             style={elementStyle}
             images={images}