fix collapse

markdavella · Mar 19, 2024 · f9db70b · f9db70b
1 parent 88f4335
commit f9db70b
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 36 deletions.
diff --git a/web/src/components/InlineModal.tsx b/web/src/components/InlineModal.tsx
@@ -2,10 +2,7 @@ import { Collapse, List } from '@mui/material';
 import { PlexMedia } from '@tunarr/types/plex';
 import { usePrevious } from '@uidotdev/usehooks';
 import { memo, useEffect, useRef, useState } from 'react';
-import {
-  getEstimatedModalHeight,
-  isLeftover,
-} from '../helpers/inlineModalUtil';
+import { getEstimatedModalHeight } from '../helpers/inlineModalUtil';
 import PlexGridItem from './channel_config/PlexGridItem';
 
 type InlineModalProps = {
@@ -45,16 +42,19 @@ function InlineModal(props: InlineModalProps) {
   return (
     <Collapse
       in={modalIndex >= 0 && !!modalChildren && open && !isPending}
-      mountOnEnter
-      sx={{ width: '100%' }}
+      timeout={999}
+      unmountOnExit
+      sx={{ width: '100%', display: 'grid', gridColumn: '1 / -1' }}
     >
       <List
         component={'ul'}
         sx={{
           pl: 4,
-          display: 'flex',
+          display: 'grid',
+          //   gridColumn: '1 / -1',
+          gridTemplateColumns: 'repeat(auto-fill, minmax(160px, 1fr))',
           flexWrap: 'wrap',
-          justifyContent: 'space-around',
+          justifyContent: 'flex-start',
           backgroundColor: (theme) => theme.palette.grey[800],
           padding: '0',
           paddingTop: 2,
@@ -75,11 +75,11 @@ function InlineModal(props: InlineModalProps) {
               index={idx}
               modalIndex={modalIndex}
               length={arr.length}
-              leftover={isLeftover(
-                modalChildren,
-                modalChildren.length % rowSize,
-                idx,
-              )}
+              //   leftover={isLeftover(
+              //     modalChildren,
+              //     modalChildren.length % rowSize,
+              //     idx,
+              //   )}
               ref={gridItemRef}
             />
           ),

diff --git a/web/src/components/TabPanel.tsx b/web/src/components/TabPanel.tsx
@@ -25,7 +25,12 @@ const CustomTabPanel = forwardRef((props: TabPanelProps, ref: any) => {
           container
           component={'div'}
           spacing={2}
-          sx={{ justifyContent: 'space-around', mt: 2 }}
+          sx={{
+            display: 'grid',
+            gridTemplateColumns: 'repeat(auto-fill, minmax(160px, 1fr))',
+            justifyContent: 'space-around',
+            mt: 2,
+          }}
           ref={ref}
         >
           {children}

diff --git a/web/src/components/channel_config/PlexGridItem.tsx b/web/src/components/channel_config/PlexGridItem.tsx
@@ -40,7 +40,7 @@ export interface PlexGridItemProps<T extends PlexMedia> {
   moveModal?: CallableFunction;
   modalChildren?: CallableFunction;
   modalIsPending?: CallableFunction;
-  leftover?: boolean;
+  // leftover?: boolean;
   modalIndex?: number;
   onClick?: any;
   ref?: any;
@@ -97,7 +97,7 @@ const PlexGridItem = forwardRef(
     }, [item.guid, server.name, children]);
 
     const handleItem = useCallback(
-      (e: MouseEvent<HTMLLIElement | HTMLButtonElement>) => {
+      (e: MouseEvent<HTMLDivElement>) => {
         e.stopPropagation();
 
         if (selectedMediaIds.includes(item.guid)) {
@@ -153,12 +153,13 @@ const PlexGridItem = forwardRef(
               cursor: 'pointer',
               display: 'flex',
               flexDirection: 'column',
-              flexGrow: props.leftover ? 0 : 1,
+              flexGrow: 1,
               paddingLeft: '8px !important',
               paddingRight: '8px',
               paddingTop: '8px',
               borderRadiusTopLeft: '10px',
               borderRadiusTopRight: '10px',
+              height: 'auto',
               backgroundColor: (theme) =>
                 props.modalIndex === props.index
                   ? theme.palette.grey[800]
@@ -167,16 +168,15 @@ const PlexGridItem = forwardRef(
             onClick={
               hasChildren
                 ? handleClick
-                : (event: MouseEvent<HTMLDivElement | HTMLButtonElement>) =>
-                    handleItem(event)
+                : (event: MouseEvent<HTMLDivElement>) => handleItem(event)
             }
             ref={ref}
           >
             {isInViewport && ( //isNearViewport
               <img
                 src={`${server.uri}${item.thumb}?X-Plex-Token=${server.accessToken}`}
                 width={100}
-                style={{ borderRadius: '5%' }}
+                style={{ borderRadius: '5%', height: 'auto' }}
               />
             )}
             <ImageListItemBar

diff --git a/web/src/components/channel_config/PlexProgrammingSelector.tsx b/web/src/components/channel_config/PlexProgrammingSelector.tsx
@@ -31,7 +31,6 @@ import { useIntersectionObserver } from 'usehooks-ts';
 import {
   firstItemInNextRow,
   getImagesPerRow,
-  isLeftover,
 } from '../../helpers/inlineModalUtil';
 import { toggle } from '../../helpers/util';
 import { fetchPlexPath, usePlex } from '../../hooks/plexHooks';
@@ -274,26 +273,23 @@ export default function PlexProgrammingSelector() {
               <PlexListItem key={item.guid} item={item} />
             ) : (
               <>
-                {modalChildren.length > 0 &&
-                  index === firstItemInNextRow(modalIndex, rowSize) && (
-                    <InlineModal
-                      modalIndex={modalIndex}
-                      modalChildren={modalChildren}
-                      open={index === firstItemInNextRow(modalIndex, rowSize)}
-                      rowSize={rowSize}
-                      isPending={modalIsPending}
-                    />
-                  )}
+                <InlineModal
+                  modalIndex={modalIndex}
+                  modalChildren={modalChildren}
+                  open={index === firstItemInNextRow(modalIndex, rowSize)}
+                  rowSize={rowSize}
+                  isPending={modalIsPending}
+                />
                 <PlexGridItem
                   key={item.guid}
                   item={item}
                   index={index}
                   modalIndex={modalIndex}
-                  leftover={isLeftover(
-                    collectionsData?.Metadata!,
-                    collectionsData?.Metadata!.length % rowSize,
-                    index,
-                  )}
+                  // leftover={isLeftover(
+                  //   collectionsData?.Metadata!,
+                  //   collectionsData?.Metadata!.length % rowSize,
+                  //   index,
+                  // )}
                   moveModal={() => handleMoveModal(index)}
                   modalChildren={(children: PlexMedia[]) =>
                     handleModalChildren(children)