1.4.8

CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changes
 
+## 1.4.8
+
+- Replaced the indicator tooltip with a progress bar for the grid media cards. These progress bars indicate progress towards completing the media and shows the available episodes available. Grid card's information section margin spacing has changed.
+- Buttons for adding or removing progress have been changed to a blue highlighted color.
+- Tooltips for inputting the account information have been added. These tooltips show example images of what to input in the corresponding fields.
+
 ## 1.4.7
 
 - Redesigned the season search menu. The year select is now an input to allow for easier entry. Moved the search bar to the bottom. Colors were changed in the season search menu for the inputs and search.

README.md

@@ -49,7 +49,7 @@ You can download the app [here](https://github.com/ReStartQ/AniCour/releases). C
 
 1. Download the setup file from the latest release and install it on your computer.
 2. The setup file is labeled as AniCour-Setup-x.x.x.exe, where x denotes a number for the version.
-   <br/> **Ex: AniCour-Setup-1.4.7.exe**
+   <br/> **Ex: AniCour-Setup-1.4.8.exe**
 3. When you run the exe file, Windows will give a message like below because there is no code signing certificate, click on "More info" <p align="center"><a href="#"><img src="https://github.com/ReStartQ/anicour/blob/main/images/help/AniCourNoCodeSigningInitial.png" alt="Hello" /></a></p>
 4. A new option will appear, "Run anyway". Click on it. <p align="center"><a href="#"><img src="https://github.com/ReStartQ/anicour/blob/main/images/help/AniCourNoCodeSigning.png" alt="Hello" /></a></p>
 5. The installer menu will open up to allow you to install it on your computer. <p align="center"><a href="#"><img src="https://github.com/ReStartQ/anicour/blob/main/images/help/AniCourInstallationMenu2.png" alt="Hello" /></a></p>

release/app/package.json

@@ -1,6 +1,6 @@
 {
   "name": "anicour",
-  "version": "1.4.7",
+  "version": "1.4.8",
   "description": "Anime, Manga, and Light Novel Tracker Desktop Application for Windows. A fast and interactive way for AniList users to track and manage their anime/manga lists. ",
   "license": "GPL-3.0",
   "author": {

src/renderer/components/app/etc/CustomTooltipFixedWidth.tsx

@@ -0,0 +1,19 @@
+import { styled } from '@mui/material';
+import Tooltip, { TooltipProps, tooltipClasses } from '@mui/material/Tooltip';
+
+const CustomToolTipFixedWidth = styled(
+  ({ className, ...props }: TooltipProps) => (
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    <Tooltip {...props} classes={{ popper: className }} />
+  ),
+)(({ theme }) => ({
+  [`& .${tooltipClasses.tooltip}`]: {
+    backgroundColor: '#0b0d0e',
+    color: '#86b9db', // #86b9db
+    fontSize: theme.typography.pxToRem(12),
+    border: '1px solid #4383ce', // #4383ce
+    maxWidth: 600,
+  },
+}));
+
+export default CustomToolTipFixedWidth;

src/renderer/components/app/etc/MediaProgress.tsx

@@ -0,0 +1,29 @@
+import { LinearProgress } from '@mui/material';
+import React from 'react';
+
+const MediaProgress = ({ progress, buffer }: any) => {
+  // MIN = Minimum expected value
+  // MAX = Maximum expected value
+  // Function to normalise the values (MIN / MAX could be integrated)
+  // const normalise = (value) => ((value - MIN) * 100) / (MAX - MIN);
+
+  return (
+    <LinearProgress
+      variant="buffer"
+      value={progress}
+      valueBuffer={buffer}
+      color="info"
+      sx={{
+        border: '1px solid deepskyblue',
+        width: '75%',
+        height: '7px',
+        '& .MuiLinearProgress-dashed': {
+          animation: 'none',
+          backgroundImage: 'none',
+        },
+      }}
+    />
+  );
+};
+
+export default MediaProgress;

src/renderer/components/app/etc/NextAiringEpisodeIndicator.tsx

@@ -1,10 +1,15 @@
 import { Tooltip, Typography } from '@mui/joy';
 import InfoIcon from '@mui/icons-material/Info';
 import NewReleasesIcon from '@mui/icons-material/NewReleases';
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import { Box, IconButton } from '@mui/material';
+import MediaProgress from './MediaProgress';
 
 const NextAiringEpisodeIndicator = ({ props }: any) => {
+  const normalise = (value: number) =>
+    ((value - 0) * 100) /
+    (props.episodes !== null ? props.episodes - 0 : 26 - 0);
+
   return (
     <Box display="flex" flexDirection="row">
       <Typography fontSize={12} fontWeight="bold">

src/renderer/components/app/etc/ProgressStepper.tsx

@@ -1,13 +1,15 @@
 import AddIcon from '@mui/icons-material/Add';
 import RemoveIcon from '@mui/icons-material/Remove';
-import { IconButton, Tooltip, Typography } from '@mui/material';
+import { Tooltip, Typography } from '@mui/material';
 import InfoIcon from '@mui/icons-material/Info';
 import NewReleasesIcon from '@mui/icons-material/NewReleases';
 import { useTheme } from '@mui/material/styles';
 import { Box } from '@mui/system';
 import { useEffect, useState } from 'react';
 import { formatProgress } from 'renderer/functions/edit/formatInfo';
+import { Button, IconButton } from '@mui/joy';
 import NextAiringEpisodeIndicator from './NextAiringEpisodeIndicator';
+import MediaProgress from './MediaProgress';
 
 export default function ProgressStepper({
   props,
@@ -16,6 +18,71 @@ export default function ProgressStepper({
 }: any) {
   const theme = useTheme();
 
+  const getEpisodeOrChapterNumber = (
+    value: any,
+    valueC: any,
+    type: any,
+    progress: any,
+  ) => {
+    if (type === 'ANIME') {
+      if (value === null) {
+        const num = Math.ceil(progress / 13);
+        if (progress >= 1000) {
+          return 9999;
+        }
+        if (progress >= 100) {
+          return 999;
+        }
+        if (progress === 0) {
+          return 13;
+        }
+        return num * 13 + 1;
+      }
+      return value;
+    }
+    if (valueC === null) {
+      const num = Math.ceil(progress / 26);
+      if (progress >= 1000) {
+        return 9999;
+      }
+      if (progress >= 100) {
+        return 999;
+      }
+      if (progress === 0) {
+        return 13;
+      }
+      return num * 26 + 1;
+    }
+    return valueC;
+  };
+
+  const normalise = (value: number, valueC: number, type: any) => {
+    if (type === 'ANIME') {
+      return (
+        ((value - 0) * 100) /
+        (props.episodes !== null
+          ? props.episodes - 0
+          : getEpisodeOrChapterNumber(
+              props.episodes,
+              props.chapters,
+              props.type,
+              advancedInput.progress,
+            ) - 0)
+      );
+    }
+    return (
+      ((valueC - 0) * 100) /
+      (props.chapters !== null
+        ? props.chapters - 0
+        : getEpisodeOrChapterNumber(
+            props.episodes,
+            props.chapters,
+            props.type,
+            advancedInput.progress,
+          ) - 0)
+    );
+  };
+
   const handleNext = () => {
     inputDispatch({
       type: 'updateProgress',
@@ -37,31 +104,43 @@ export default function ProgressStepper({
     });
   }, [inputDispatch, props.mediaListEntry.progress]);
 
+  /* <NextAiringEpisodeIndicator props={props} /> */
+
   return (
     <Box
       display="flex"
       flexDirection="column"
       sx={{ gridColumn: '1/2' /* userSelect: 'none' */ }}
     >
       {props.nextAiringEpisode !== null ? (
-        <NextAiringEpisodeIndicator props={props} />
+        <Typography fontSize={12} fontWeight="bold">
+          {props.type === 'ANIME' ? 'Episodes' : 'Chapters'}
+          {/* <NextAiringEpisodeIndicator props={props} /> */}
+        </Typography>
       ) : (
         <Typography fontSize={12} fontWeight="bold">
           {props.type === 'ANIME' ? 'Episodes' : 'Chapters'}
         </Typography>
       )}
-
       <Box
         display="flex"
         flexDirection="row"
         alignItems="center"
         sx={{ overflowX: 'auto' }}
       >
         <IconButton
-          size="small"
+          size="sm"
+          variant="outlined"
+          color="primary"
           onClick={handleBack}
           disabled={advancedInput.progress === 0}
-          sx={{ m: 0, p: 0, minWidth: 0 }}
+          sx={{
+            m: 0,
+            p: 0,
+            minWidth: 0,
+            '--IconButton-size': '12px',
+            mr: '4px',
+          }}
         >
           <RemoveIcon fontSize="inherit" />
         </IconButton>
@@ -74,19 +153,53 @@ export default function ProgressStepper({
           )}
         </Typography>
         <IconButton
-          size="small"
+          size="sm"
+          variant="outlined"
+          color="primary"
           onClick={handleNext}
           disabled={
             (props.type === 'ANIME'
               ? advancedInput.progress === props.episodes
               : advancedInput.progress === props.chapters) ||
             advancedInput.progress === 9999
           }
-          sx={{ m: 0, p: 0, minWidth: 0 }}
+          sx={{
+            m: 0,
+            p: 0,
+            minWidth: 0,
+            '--IconButton-size': '12px',
+            ml: '4px',
+          }}
         >
           <AddIcon fontSize="inherit" />
         </IconButton>
       </Box>
+      <Box
+        display="flex"
+        flexDirection="row"
+        alignItems="center"
+        sx={{ overflowX: 'auto', my: '3px' }}
+      >
+        <MediaProgress
+          progress={normalise(
+            advancedInput.progress,
+            advancedInput.progress,
+            props.type,
+          )}
+          buffer={normalise(
+            props.nextAiringEpisode !== null
+              ? props.nextAiringEpisode.episode - 1
+              : getEpisodeOrChapterNumber(
+                  props.episodes,
+                  props.chapters,
+                  props.type,
+                  advancedInput.progress,
+                ), // this should be episodes or if episodes is null, then default number
+            props.chapters,
+            props.type,
+          )}
+        />
+      </Box>
     </Box>
   );
 }