Bulk actions support (#1418)

frontend/src/static/js/components/list-item/MediaItem.jsx

@@ -8,9 +8,10 @@ import { Item } from './Item';
 export function MediaItem(props) {
   const type = props.type;
 
-  const [titleComponent, descriptionComponent, thumbnailUrl, UnderThumbWrapper, editMediaComponent, metaComponents] =
+  const [titleComponent, descriptionComponent, thumbnailUrl, UnderThumbWrapper, editMediaComponent, metaComponents, viewMediaComponent] =
     useMediaItem({ ...props, type });
 
+
   function thumbnailComponent() {
     return <MediaItemThumbnailLink src={thumbnailUrl} title={props.title} link={props.link} />;
   }
@@ -21,10 +22,45 @@ export function MediaItem(props) {
     props.playlistOrder === props.playlistActiveItem
   );
 
+  const finalClassname = containerClassname +
+    (props.showSelection ? ' with-selection' : '') +
+    (props.isSelected ? ' selected' : '') +
+    (props.hasAnySelection ? ' has-any-selection' : '');
+
+  const handleItemClick = (e) => {
+    // If there's any selection active, clicking the item should toggle selection
+    if (props.hasAnySelection && props.onCheckboxChange) {
+      // Check if clicking on the checkbox itself, edit icon, or view icon
+      if (e.target.closest('.item-selection-checkbox') ||
+          e.target.closest('.item-edit-icon') ||
+          e.target.closest('.item-view-icon')) {
+        return; // Let these elements handle their own clicks
+      }
+
+      // Prevent all other clicks and toggle selection
+      e.preventDefault();
+      e.stopPropagation();
+      props.onCheckboxChange({ target: { checked: !props.isSelected } });
+    }
+  };
+
   return (
-    <div className={containerClassname}>
+    <div className={finalClassname} onClick={handleItemClick}>
       <div className="item-content">
+        {props.showSelection && (
+          <div className="item-selection-checkbox" onClick={(e) => e.stopPropagation()}>
+            <input
+              type="checkbox"
+              checked={props.isSelected || false}
+              onChange={(e) => { props.onCheckboxChange && props.onCheckboxChange(e); }}
+              onClick={(e) => e.stopPropagation()}
+              aria-label="Select media"
+            />
+          </div>
+        )}
+
         {editMediaComponent()}
+        {viewMediaComponent()}
 
         {thumbnailComponent()}