add setting for cover crop behavior

fixes #257
xgi · Oct 12, 2023 · 368d3b0 · 368d3b0
1 parent b159035
commit 368d3b0
Show file tree

Hide file tree

Showing 7 changed files with 33 additions and 25 deletions.
diff --git a/src/components/library/LibraryGrid.css b/src/components/library/LibraryGrid.css
@@ -3,7 +3,6 @@
   opacity: 0.8;
   background-size: cover;
   cursor: pointer;
-  text-align: center;
 }
 
 .coverContainer:hover {

diff --git a/src/components/library/LibraryGrid.tsx b/src/components/library/LibraryGrid.tsx
@@ -22,6 +22,7 @@ import {
   chapterLanguagesState,
   confirmRemoveSeriesState,
   libraryColumnsState,
+  libraryCropCoversState,
   libraryViewState,
 } from '../../state/settingStates';
 import { goToSeries, markChapters, removeSeries } from '../../features/library/utils';
@@ -91,6 +92,7 @@ const LibraryGrid: React.FC<Props> = (props: Props) => {
   const libraryView = useRecoilValue(libraryViewState);
   const libraryColumns = useRecoilValue(libraryColumnsState);
   const chapterLanguages = useRecoilValue(chapterLanguagesState);
+  const libraryCropCovers = useRecoilValue(libraryCropCoversState);
   const confirmRemoveSeries = useRecoilValue(confirmRemoveSeriesState);
   const [categoriesSubMenuOpen, setCategoriesSubMenuOpen] = useState(false);
 
@@ -187,23 +189,19 @@ const LibraryGrid: React.FC<Props> = (props: Props) => {
                   <div
                     className={styles.coverContainer}
                     onClick={() => viewFunc(series)}
-                    // style={{
-                      // height: `calc(105vw / ${libraryColumns})`,
-                    // }}
+                    style={{
+                      height: libraryCropCovers ? `calc(105vw / ${libraryColumns})` : '100%',
+                    }}
                   >
                     <ExtensionImage
                       url={coverSource}
                       series={series}
                       alt={series.title}
-                      // width="100%"
-                      // height="100%"
                       style={{
-						  objectFit: 'cover',
-						  width: '100%',
-						  height: '100%'
-						  // maxWidth: '100%',
-						  // maxHeight: '100%'						  
-					    }}
+                        objectFit: 'cover',
+                        width: '100%',
+                        height: '100%',
+                      }}
                     />
                     {renderUnreadBadge(series)}
                     {libraryView === LibraryView.GridCompact ? (

diff --git a/src/components/search/SearchGrid.css b/src/components/search/SearchGrid.css
@@ -2,7 +2,6 @@
   position: relative;
   opacity: 0.8;
   background-size: cover;
-  text-align: center;
 }
 
 .coverContainer:hover {

diff --git a/src/components/search/SearchGrid.tsx b/src/components/search/SearchGrid.tsx
@@ -6,7 +6,7 @@ import { Overlay, SimpleGrid, Skeleton, Title, ScrollArea } from '@mantine/core'
 import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil';
 import ipcChannels from '../../constants/ipcChannels.json';
 import styles from './SearchGrid.css';
-import { libraryColumnsState } from '../../state/settingStates';
+import { libraryColumnsState, libraryCropCoversState } from '../../state/settingStates';
 import {
   searchResultState,
   addModalEditableState,
@@ -34,6 +34,7 @@ const SearchGrid: React.FC<Props> = (props: Props) => {
   const gridRef = useRef<HTMLDivElement>(null);
   const searchResult = useRecoilValue(searchResultState);
   const libraryColumns = useRecoilValue(libraryColumnsState);
+  const libraryCropCovers = useRecoilValue(libraryCropCoversState);
   const searchExtension = useRecoilValue(searchExtensionState);
   const setAddModalSeries = useSetRecoilState(addModalSeriesState);
   const setAddModalEditable = useSetRecoilState(addModalEditableState);
@@ -67,7 +68,7 @@ const SearchGrid: React.FC<Props> = (props: Props) => {
             setShowingContextMenu(true);
           }}
           style={{
-            // height: `calc(105vw / ${libraryColumns})`,
+            height: libraryCropCovers ? `calc(105vw / ${libraryColumns})` : '100%',
             cursor: inLibrary ? 'not-allowed' : 'pointer',
           }}
         >
@@ -79,15 +80,11 @@ const SearchGrid: React.FC<Props> = (props: Props) => {
             url={series.remoteCoverUrl}
             series={series}
             alt={series.title}
-            // width="100%"
-			// height="100%"
-             style={{
-				objectFit: 'cover',
-				width: '100%',
-				height: '100%'
-				// maxWidth: '100%',
-				// maxHeight: '100%'						  
-			}}
+            style={{
+              objectFit: 'cover',
+              width: '100%',
+              height: '100%',
+            }}
           />
           {inLibrary ? <Overlay opacity={0.5} color="#2B8A3E" /> : ''}
           <Title className={styles.seriesTitle} order={5} lineClamp={3} p={4}>

diff --git a/src/components/settings/GeneralSettings.tsx b/src/components/settings/GeneralSettings.tsx
@@ -13,6 +13,7 @@ import {
   chapterLanguagesState,
   confirmRemoveSeriesState,
   customDownloadsDirState,
+  libraryCropCoversState,
   refreshOnStartState,
 } from '../../state/settingStates';
 
@@ -25,14 +26,15 @@ const defaultDownloadsDir = await ipcRenderer.invoke(ipcChannels.GET_PATH.DEFAUL
 // eslint-disable-next-line @typescript-eslint/ban-types
 type Props = {};
 
-const GeneralSettings: React.FC<Props> = (props: Props) => {
+const GeneralSettings: React.FC<Props> = () => {
   const [chapterLanguages, setChapterLanguages] = useRecoilState(chapterLanguagesState);
   const [refreshOnStart, setRefreshOnStart] = useRecoilState(refreshOnStartState);
   const [autoCheckForUpdates, setAutoCheckForUpdates] = useRecoilState(autoCheckForUpdatesState);
   const [autoCheckForExtensionUpdates, setAutoCheckForExtensionUpdates] = useRecoilState(
     autoCheckForExtensionUpdatesState
   );
   const [confirmRemoveSeries, setConfirmRemoveSeries] = useRecoilState(confirmRemoveSeriesState);
+  const [libraryCropCovers, setLibraryCropCovers] = useRecoilState(libraryCropCoversState);
   const [customDownloadsDir, setCustomDownloadsDir] = useRecoilState(customDownloadsDirState);
 
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -53,6 +55,9 @@ const GeneralSettings: React.FC<Props> = (props: Props) => {
       case GeneralSetting.ConfirmRemoveSeries:
         setConfirmRemoveSeries(value);
         break;
+      case GeneralSetting.LibraryCropCovers:
+        setLibraryCropCovers(value);
+        break;
       case GeneralSetting.CustomDownloadsDir:
         setCustomDownloadsDir(value);
         break;
@@ -99,6 +104,12 @@ const GeneralSettings: React.FC<Props> = (props: Props) => {
             updateGeneralSetting(GeneralSetting.ConfirmRemoveSeries, e.target.checked)
           }
         />
+        <Checkbox
+          label="Crop cover images to library grid"
+          size="md"
+          checked={libraryCropCovers}
+          onChange={(e) => updateGeneralSetting(GeneralSetting.LibraryCropCovers, e.target.checked)}
+        />
         <MultiSelect
           label="Chapter languages"
           size="sm"

diff --git a/src/models/types.ts b/src/models/types.ts
@@ -93,6 +93,7 @@ export enum GeneralSetting {
   LibraryFilterStatus = 'LibraryFilterStatus',
   LibraryFilterProgress = 'LibraryFilterProgress',
   LibraryFilterCategory = 'LibraryFilterCategory',
+  LibraryCropCovers = 'LibraryCropCovers',
   ChapterListVolOrder = 'ChapterListVolOrder',
   ChapterListChOrder = 'ChapterListChOrder',
   ChapterListPageSize = 'ChapterListPageSize',
@@ -196,6 +197,7 @@ export const SettingTypes = {
   [GeneralSetting.LibraryFilterStatus]: SettingType.STRING,
   [GeneralSetting.LibraryFilterProgress]: SettingType.STRING,
   [GeneralSetting.LibraryFilterCategory]: SettingType.STRING,
+  [GeneralSetting.LibraryCropCovers]: SettingType.BOOLEAN,
   [GeneralSetting.ChapterListVolOrder]: SettingType.STRING,
   [GeneralSetting.ChapterListChOrder]: SettingType.STRING,
   [GeneralSetting.ChapterListPageSize]: SettingType.NUMBER,
@@ -246,6 +248,7 @@ export const DefaultSettings = {
   [GeneralSetting.LibraryFilterStatus]: null,
   [GeneralSetting.LibraryFilterProgress]: ProgressFilter.All,
   [GeneralSetting.LibraryFilterCategory]: '',
+  [GeneralSetting.LibraryCropCovers]: true,
   [GeneralSetting.ChapterListVolOrder]: TableColumnSortOrder.None,
   [GeneralSetting.ChapterListChOrder]: TableColumnSortOrder.Descending,
   [GeneralSetting.ChapterListPageSize]: 10,

diff --git a/src/state/settingStates.ts b/src/state/settingStates.ts
@@ -66,6 +66,7 @@ export const librarySortState = atomFromSetting<LibrarySort>(GeneralSetting.Libr
 export const libraryFilterStatusState = atomFromSetting<SeriesStatus | null>(GeneralSetting.LibraryFilterStatus);
 export const libraryFilterProgressState = atomFromSetting<ProgressFilter>(GeneralSetting.LibraryFilterProgress);
 export const libraryFilterCategoryState = atomFromSetting<string>(GeneralSetting.LibraryFilterCategory);
+export const libraryCropCoversState = atomFromSetting<boolean>(GeneralSetting.LibraryCropCovers);
 export const chapterListVolOrderState = atomFromSetting<TableColumnSortOrder>(GeneralSetting.ChapterListVolOrder);
 export const chapterListChOrderState = atomFromSetting<TableColumnSortOrder>(GeneralSetting.ChapterListChOrder);
 export const chapterListPageSizeState = atomFromSetting<number>(GeneralSetting.ChapterListPageSize);