fix: fixed covers

mbret · Feb 24, 2024 · b4e65ac · b4e65ac
1 parent af913b5
commit b4e65ac
Show file tree

Hide file tree

Showing 6 changed files with 81 additions and 114 deletions.
diff --git a/packages/web/src/books/bookList/BookListCoverContainer.tsx b/packages/web/src/books/bookList/BookListCoverContainer.tsx
@@ -1,24 +1,19 @@
 import React, { FC, memo } from "react"
 import { Box, Chip, useTheme } from "@mui/material"
 import {
-  CheckCircleRounded,
+  CheckOutlined,
   CloudDownloadRounded,
   ErrorRounded,
   LoopRounded,
-  NoEncryptionRounded,
+  NoEncryptionOutlined,
   ThumbDownOutlined
 } from "@mui/icons-material"
 import { Cover } from "../Cover"
 import { useBook, useIsBookProtected } from "../states"
 import { ReadingStateState } from "@oboku/shared"
 import { ReadingProgress } from "./ReadingProgress"
-import {
-  DownloadState,
-  booksDownloadStateSignal,
-  useBookDownloadState
-} from "../../download/states"
+import { DownloadState, useBookDownloadState } from "../../download/states"
 import { useCSS } from "../../common/utils"
-import { useSignalValue } from "reactjrx"
 import { CoverIconBadge } from "./CoverIconBadge"
 
 type Book = ReturnType<typeof useBook>["data"]
@@ -29,25 +24,22 @@ export const BookListCoverContainer: FC<{
   style?: React.CSSProperties
   withReadingProgressStatus?: boolean
   withDownloadStatus?: boolean
-  withMetadaStatus?: boolean
-  withProtectedStatus?: boolean
+  withBadges: boolean
   size?: "small" | "large" | "medium"
 }> = memo(
   ({
     bookId,
     className,
-    withMetadaStatus = true,
     style,
     withDownloadStatus = true,
     withReadingProgressStatus = true,
-    size = "small",
-    withProtectedStatus = true
+    withBadges,
+    size = "small"
   }) => {
     const { data: item } = useBook({ id: bookId })
     const bookDownloadState = useBookDownloadState(bookId)
     const { data: isBookProtected = true } = useIsBookProtected(item)
     const classes = useStyles({ item })
-    const theme = useTheme()
 
     return (
       <Box
@@ -70,67 +62,67 @@ export const BookListCoverContainer: FC<{
             }}
           />
         )}
-        {withProtectedStatus && isBookProtected && (
-          <div style={classes.protectedIconContainer}>
-            <NoEncryptionRounded
-              style={classes.protectedIcon}
-              fontSize="small"
-            />
-          </div>
-        )}
-        {withReadingProgressStatus &&
-          item?.readingStateCurrentState === ReadingStateState.Finished && (
-            <div style={classes.finishIconContainer}>
-              <CheckCircleRounded style={classes.finishIcon} fontSize={size} />
-            </div>
-          )}
-        <Box style={classes.bodyContainer}>
-          {item?.isNotInterested && (
-            <CoverIconBadge
-              position="absolute"
-              left={0}
-              top={0}
-              style={{
-                transform: "translate(10%, 10%)"
-              }}
+        <Box style={classes.bodyContainer} gap={1}>
+          {withBadges && (
+            <Box
+              display="flex"
+              alignItems="center"
+              justifyContent="space-between"
+              flexDirection="row"
+              width="100%"
             >
-              <ThumbDownOutlined color="action" fontSize={size} />
-            </CoverIconBadge>
+              <Box gap={1} flexDirection="row" display="flex">
+                {isBookProtected && (
+                  <CoverIconBadge>
+                    <NoEncryptionOutlined fontSize={size} />
+                  </CoverIconBadge>
+                )}
+                {item?.isNotInterested && (
+                  <CoverIconBadge>
+                    <ThumbDownOutlined fontSize={size} />
+                  </CoverIconBadge>
+                )}
+              </Box>
+              {withReadingProgressStatus &&
+                item?.readingStateCurrentState ===
+                  ReadingStateState.Finished && (
+                  <CoverIconBadge alignSelf="flex-end" justifySelf="flex-end">
+                    <CheckOutlined fontSize={size} />
+                  </CoverIconBadge>
+                )}
+            </Box>
+          )}
+          {withBadges && item?.metadataUpdateStatus === "fetching" && (
+            <Chip
+              color="primary"
+              size="small"
+              icon={<LoopRounded color="primary" className="icon-spin" />}
+              label="metadata..."
+            />
           )}
-          {withMetadaStatus && item?.metadataUpdateStatus === "fetching" && (
-            <div style={classes.itemCoverCenterInfo}>
+          {withBadges &&
+            item?.metadataUpdateStatus !== "fetching" &&
+            !!item?.lastMetadataUpdateError && (
               <Chip
                 color="primary"
                 size="small"
-                icon={<LoopRounded color="primary" className="icon-spin" />}
-                label="metadata..."
+                icon={<ErrorRounded color="primary" />}
+                label="metadata"
               />
-            </div>
-          )}
-          {withMetadaStatus &&
-            item?.metadataUpdateStatus !== "fetching" &&
-            !!item?.lastMetadataUpdateError && (
-              <div style={classes.itemCoverCenterInfo}>
-                <Chip
-                  color="primary"
-                  size="small"
-                  icon={<ErrorRounded color="primary" />}
-                  label="metadata"
-                />
-              </div>
             )}
-          {bookDownloadState?.downloadState === DownloadState.None && (
-            <CoverIconBadge
-              position="absolute"
-              left="50%"
-              top="50%"
-              style={{
-                transform: "translate(-50%, -50%)"
-              }}
-            >
-              <CloudDownloadRounded color="action" fontSize={size} />
-            </CoverIconBadge>
-          )}
+          {withDownloadStatus &&
+            bookDownloadState?.downloadState === DownloadState.None && (
+              <CoverIconBadge
+                position="absolute"
+                left="50%"
+                top="50%"
+                style={{
+                  transform: "translate(-50%, -50%)"
+                }}
+              >
+                <CloudDownloadRounded color="action" fontSize={size} />
+              </CoverIconBadge>
+            )}
           {withDownloadStatus &&
             bookDownloadState?.downloadState === DownloadState.Downloading && (
               <div style={classes.pauseButton}>
@@ -165,30 +157,13 @@ const useStyles = ({ item }: { item: Book }) => {
         display: "flex",
         minHeight: 0 // @see https://stackoverflow.com/questions/42130384/why-should-i-specify-height-0-even-if-i-specified-flex-basis-0-in-css3-flexbox
       },
-      itemCoverCenterInfo: {
-        display: "flex",
-        overflow: "hidden"
-      },
-      itemCoverCenterInfoText: {},
-      finishIconContainer: { position: "absolute", right: 5, top: 5 },
-      finishIcon: { opacity: "70%", color: "black" },
-      protectedIconContainer: {
-        position: "absolute",
-        left: 5,
-        top: 5,
-        backgroundColor: "black",
-        borderRadius: 50,
-        padding: 4,
-        opacity: "70%"
-      },
-      protectedIcon: { opacity: "100%", color: "white" },
       bodyContainer: {
         position: "absolute",
         height: "100%",
         width: "100%",
         top: 0,
         display: "flex",
-        padding: theme.spacing(1),
+        padding: theme.spacing(0.5),
         flexDirection: "column",
         alignItems: "center"
       },

diff --git a/packages/web/src/books/bookList/BookListGridItem.tsx b/packages/web/src/books/bookList/BookListGridItem.tsx
@@ -51,6 +51,7 @@ export const BookListGridItem: FC<{
         bookId={bookId}
         style={classes.coverContainer}
         size="medium"
+        withBadges
       />
       <Box
         style={classes.itemBottomContainer}

diff --git a/packages/web/src/books/bookList/BookListListItem.tsx b/packages/web/src/books/bookList/BookListListItem.tsx
@@ -1,14 +1,16 @@
-import { Chip, Typography, useTheme } from "@mui/material"
+import { Box, Chip, Typography, useTheme } from "@mui/material"
 import { FC, memo } from "react"
 import { useDefaultItemClickHandler } from "./helpers"
-import { useEnrichedBookState } from "../states"
+import { useEnrichedBookState, useIsBookProtected } from "../states"
 import { ReadingStateState } from "@oboku/shared"
 import {
   DoneRounded,
   ErrorRounded,
   LoopRounded,
   MenuBookRounded,
-  MoreVert
+  MoreVert,
+  NoEncryptionRounded,
+  ThumbDownOutlined
 } from "@mui/icons-material"
 import { bookActionDrawerSignal } from "../drawer/BookActionsDrawer"
 import { useCSS } from "../../common/utils"
@@ -34,9 +36,7 @@ export const BookListListItem: FC<{
   }) => {
     const book = useEnrichedBookState({
       bookId,
-      normalizedBookDownloadsState: useSignalValue(
-        booksDownloadStateSignal
-      ),
+      normalizedBookDownloadsState: useSignalValue(booksDownloadStateSignal),
       protectedTagIds: useProtectedTagIds().data,
       tags: useTagsByIds().data
     })
@@ -45,6 +45,7 @@ export const BookListListItem: FC<{
     const computedHeight = itemHeight || (size === "small" ? 50 : 100)
     const coverWidth = computedHeight * theme.custom.coverAverageRatio
     const classes = useStyles({ coverWidth })
+    const { data: isBookProtected = true } = useIsBookProtected(book)
 
     return (
       <div
@@ -56,18 +57,15 @@ export const BookListListItem: FC<{
           display: "flex",
           overflow: "hidden",
           height: computedHeight,
-          // height: '100%',
           cursor: "pointer",
           flexGrow: 1
         }}
       >
         <BookListCoverContainer
           bookId={bookId}
           style={classes.coverContainer}
+          withBadges={false}
           withReadingProgressStatus={false}
-          withDownloadStatus={false}
-          withMetadaStatus={false}
-          withProtectedStatus={false}
         />
         <div
           style={{
@@ -92,31 +90,27 @@ export const BookListListItem: FC<{
           <Typography noWrap color="textSecondary" variant="body2">
             {book?.creator || "Unknown"}
           </Typography>
-          {/* <div style={{ display: 'flex', flex: 1, alignItems: 'flex-end', justifyContent: 'space-between' }}>
-          {book?.isProtected && (
-            <NoEncryptionRounded color="secondary" />
-          )}
-        </div> */}
-          <div
+          <Box
             style={{
               display: "flex",
               justifyContent: "space-between",
               flex: 1,
               alignItems: "flex-end"
             }}
           >
-            <div>
+            <Box display="flex" flexDirection="row" gap={1}>
+              {isBookProtected && <NoEncryptionRounded />}
+              {book?.isNotInterested && <ThumbDownOutlined />}
               {book?.readingStateCurrentState ===
                 ReadingStateState.Finished && (
                 <div style={{ display: "flex", flexDirection: "row" }}>
-                  <DoneRounded color="secondary" style={{}} />
+                  <DoneRounded style={{}} />
                 </div>
               )}
               {book?.readingStateCurrentState === ReadingStateState.Reading && (
                 <div style={{ display: "flex", flexDirection: "row" }}>
-                  <MenuBookRounded style={{ opacity: "50%" }} />
+                  <MenuBookRounded />
                   <Typography
-                    color="textSecondary"
                     style={{
                       marginLeft: theme.spacing(0.5)
                     }}
@@ -129,7 +123,7 @@ export const BookListListItem: FC<{
                   </Typography>
                 </div>
               )}
-            </div>
+            </Box>
             <div style={{ display: "flex", flexDirection: "row" }}>
               {/* {(book?.downloadState === DownloadState.Downloading) && (
               <div style={{ display: 'flex', flexDirection: 'row' }}>
@@ -169,7 +163,7 @@ export const BookListListItem: FC<{
                   </div>
                 )}
             </div>
-          </div>
+          </Box>
         </div>
         {withDrawerActions && (
           <div

diff --git a/packages/web/src/books/bookList/CoverIconBadge.tsx b/packages/web/src/books/bookList/CoverIconBadge.tsx
@@ -9,6 +9,7 @@ export const CoverIconBadge = memo(
         padding={0.3}
         borderRadius="50%"
         bgcolor="white"
+        border="1px solid black"
         {...rest}
       >
         {children}

diff --git a/packages/web/src/books/bookList/SelectableBookListItem.tsx b/packages/web/src/books/bookList/SelectableBookListItem.tsx
@@ -29,9 +29,7 @@ export const SelectableBookListItem: FC<{
 }) => {
   const book = useEnrichedBookState({
     bookId,
-    normalizedBookDownloadsState: useSignalValue(
-      booksDownloadStateSignal
-    ),
+    normalizedBookDownloadsState: useSignalValue(booksDownloadStateSignal),
     protectedTagIds: useProtectedTagIds().data,
     tags: useTagsByIds().data
   })
@@ -50,10 +48,9 @@ export const SelectableBookListItem: FC<{
       <BookListCoverContainer
         bookId={bookId}
         style={classes.coverContainer}
+        withBadges={false}
         withReadingProgressStatus={false}
         withDownloadStatus={false}
-        withMetadaStatus={false}
-        withProtectedStatus={false}
       />
       <div
         style={{

diff --git a/packages/web/src/books/states.ts b/packages/web/src/books/states.ts
@@ -46,7 +46,6 @@ export const useBook = ({ id }: { id?: string }) => {
     queryKey: ["rxdb", "book", id],
     enabled: !!id,
     queryFn: () => {
-      console.log("useBook.fetch", id)
       return latestDatabase$.pipe(
         switchMap(
           (db) =>