1.5.2

CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changes
 
+## 1.5.2
+
+- Releasing/Not Yet Released anime list cards now have the next airing episode timer just like the seasonal anime cards.
+- Next Airing Time is now shown as a sort option on the user's anime list.
+- An option has been added settings menu to hide/show the next airing time for anime media cards in the user's anime list. By default the option is set to show.
+
 ## 1.5.1
 
 - Changed list table header and container colors.

README.md

@@ -1,6 +1,5 @@
 <p align="center"><a href="#"><img src="https://raw.githubusercontent.com/restartq/anicour/main/images/banner/AniCourSmall.png" /></a></p>
 
-
 # AniCour
 
 AniCour is an anime, manga, and light novel tracking app that helps you discover, manage and track your lists from your desktop.
@@ -39,7 +38,7 @@ Downloads can be found [here](https://github.com/ReStartQ/AniCour/releases). Che
 **_Whenever you get a warning message in the browser, you will have to allow for the download with an alternate option that may show up as something like "download suspicious file" (chrome) or "keep file" (edge)._**
 
 1. Download the setup file from the latest releases. The setup file is labeled as AniCour-Setup-x.x.x.exe, where x.x.x denotes the version.
-   <br> **Ex: AniCour-Setup-1.5.1.exe**
+   <br> **Ex: AniCour-Setup-1.5.2.exe**
 2. Run the setup file, Windows will give a message like below, click on "More info" <p align="center"><a href="#"><img src="https://raw.githubusercontent.com/restartq/anicour/main/images/help/AniCourNoCodeSigningInitial.png" height="300"/></a></p>
 3. A new option will appear, "Run anyway". Click on it. <p align="center"><a href="#"><img src="https://raw.githubusercontent.com/restartq/anicour/main/images/help/AniCourNoCodeSigning.png" height="300"/></a></p>
 4. The installer menu will open up to allow you to install it on your computer. <p align="center"><a href="#"><img src="https://raw.githubusercontent.com/restartq/anicour/main/images/help/AniCourInstallationMenu2.png" height="240"/></a></p>

help/InstallHelp.md

@@ -6,7 +6,7 @@ You can download the app [here](https://github.com/ReStartQ/AniCour/releases).
 
 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.
-   **Ex: AniCour-Setup-1.5.1.exe**
+   **Ex: AniCour-Setup-1.5.2.exe**
 3. When you run the exe file, Windows will give a message like below, click on "More info" <p align="center"><a href="#"><img src="https://raw.githubusercontent.com/restartq/anicour/main/images/help/AniCourNoCodeSigningInitial.png" /></a></p>
 4. A new option will appear, "Run anyway". Click on it. <p align="center"><a href="#"><img src="https://raw.githubusercontent.com/restartq/anicour/main/images/help/AniCourNoCodeSigning.png" /></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://raw.githubusercontent.com/restartq/anicour/main/images/help/AniCourInstallationMenu2.png" /></a></p>

release/app/package.json

@@ -1,6 +1,6 @@
 {
   "name": "anicour",
-  "version": "1.5.1",
+  "version": "1.5.2",
   "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/main/main.ts

@@ -89,6 +89,10 @@ const schema: any = {
     type: 'string',
     default: 'Early',
   },
+  nextAiringEpisode: {
+    type: 'string',
+    default: 'Show',
+  },
 };
 
 const store = new Store({ schema });

src/renderer/App.tsx

@@ -90,6 +90,7 @@ import { AdvancedThemeSongsContextProvider } from './context/advanced/AdvancedTh
 import {
   appResetDialogOpenAtom,
   myStore,
+  nextAiringEpisodeAtom,
   notificationAltOpenAtom,
   notificationMediaNamesAtom,
   notificationOpenAtom,
@@ -265,6 +266,10 @@ const Hello = () => {
   const [seasonChange, setSeasonChange] = useAtom(seasonChangeAtom);
   const [openResetDialog, setOpenResetDialog] = useAtom(appResetDialogOpenAtom);
 
+  const [nextAiringEpisode, setNextAiringEpisode] = useAtom(
+    nextAiringEpisodeAtom,
+  );
+
   const handleClose = (event?: SyntheticEvent | Event, reason?: string) => {
     if (reason === 'clickaway') {
       return;
@@ -362,6 +367,10 @@ const Hello = () => {
             setDefaultAddStatus('CURRENT');
             setSeasonChange('Early');
             break;
+          case 'nextAiringEpisode':
+            console.log('nextAiringEpisode');
+            setNextAiringEpisode(arg[1]);
+            break;
           default:
             console.log('test');
         }
@@ -376,6 +385,7 @@ const Hello = () => {
     setAniListToken,
     setAniListUsername,
     setDefaultAddStatus,
+    setNextAiringEpisode,
     setOpenResetDialog,
     setSeasonChange,
   ]);

src/renderer/components/app/main/MediaCard.tsx

@@ -39,6 +39,7 @@ import {
 import { useMainMediaList } from 'renderer/functions/MainMediaListFunctions';
 import { useAtom } from 'jotai';
 import {
+  nextAiringEpisodeAtom,
   notificationMediaNamesAtom,
   notificationOpenAtom,
   notificationTypeAtom,
@@ -47,6 +48,7 @@ import { useAdvancedMedia } from 'renderer/context/advanced/AdvancedMediaContext
 import { useCategory } from 'renderer/context/CategoryContext';
 import { Button, Tooltip } from '@mui/joy';
 import { useSidebarButton } from 'renderer/context/SidebarContext';
+import { getTime, getTimeFormat } from 'renderer/functions/SeasonsFunctions';
 import ContextMenu from '../etc/ContextMenu';
 import ProgressStepper from '../etc/ProgressStepper';
 import ProgressVolumesStepper from '../etc/ProgressVolumesStepper';
@@ -79,11 +81,31 @@ export default function MediaCard({ props }: any) {
   const { isLoading, isError, error, data, refetch, dateUpdatedAt }: any =
     useMainMediaList(myUserName.AniListUsername, myToken.AniListToken);
 
+  const [time, setTime] = useState(
+    props.nextAiringEpisode !== null
+      ? props.nextAiringEpisode.timeUntilAiring
+      : null,
+  );
+
+  const [nextAiringEpisode, setNextAiringEpisode] = useAtom(
+    nextAiringEpisodeAtom,
+  );
+
   const [myAdvancedInput, inputDispatch] = useReducer(
     AdvancedInputContextReducer,
     props.mediaListEntry,
   );
 
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      if (time !== null && time >= 0 && props.nextAiringEpisode !== null) {
+        // eslint-disable-next-line no-plusplus
+        setTime(getTime(props.nextAiringEpisode.airingAt));
+      }
+    }, 1000);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [time]);
+
   useEffect(() => {
     // every time the mediaListEntry is updated through advanced window, myAdvancedInput is also updated
     inputDispatch({
@@ -285,6 +307,25 @@ export default function MediaCard({ props }: any) {
             maxHeight: '200px',
           }}
         />
+        {props.nextAiringEpisode !== null && nextAiringEpisode === 'Show' ? (
+          <Box
+            sx={{
+              position: 'absolute',
+              bottom: 0,
+              left: 0,
+              width: '100%',
+              bgcolor: 'rgba(0, 0, 0, 0.69)',
+              color: 'white',
+              padding: '10px',
+            }}
+          >
+            <Typography variant="body2" fontSize={11}>
+              {`EP${props.nextAiringEpisode.episode}: ${getTimeFormat(
+                props.nextAiringEpisode.airingAt,
+              )}`}
+            </Typography>
+          </Box>
+        ) : null}
         {props.mediaListEntry.notes !== null ? (
           <Tooltip
             title={props.mediaListEntry.notes}

src/renderer/components/app/main/MediaCardCompact.tsx

@@ -2,7 +2,7 @@ import { CardActionArea, Typography } from '@mui/material';
 import Box from '@mui/material/Box';
 import Card from '@mui/material/Card';
 import CardMedia from '@mui/material/CardMedia';
-import { useState, MouseEvent } from 'react';
+import { useState, MouseEvent, useEffect } from 'react';
 import { useTitle } from 'renderer/context/TitleContext';
 import getStatusColor from 'renderer/functions/StatusFunction';
 import { getTitle } from 'renderer/functions/view/TitlePreferenceFunctions';
@@ -11,6 +11,9 @@ import { Tooltip } from '@mui/joy';
 import { useCategory } from 'renderer/context/CategoryContext';
 import { useSidebarButton } from 'renderer/context/SidebarContext';
 import RepeatIcon from '@mui/icons-material/Repeat';
+import { getTime, getTimeFormat } from 'renderer/functions/SeasonsFunctions';
+import { nextAiringEpisodeAtom } from 'renderer/store';
+import { useAtom } from 'jotai';
 import ContextMenuAlternative from '../etc/ContextMenuAlternative';
 import ContextMenu from '../etc/ContextMenu';
 import { MediaIcons } from '../etc/SvgIcons';
@@ -21,6 +24,26 @@ export default function MediaCardCompact({ props }: any) {
   const myCategory: any = useCategory();
   const mySidebar: any = useSidebarButton();
 
+  const [time, setTime] = useState(
+    props.nextAiringEpisode !== null
+      ? props.nextAiringEpisode.timeUntilAiring
+      : null,
+  );
+
+  const [nextAiringEpisode, setNextAiringEpisode] = useAtom(
+    nextAiringEpisodeAtom,
+  );
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      if (time !== null && time >= 0 && props.nextAiringEpisode !== null) {
+        // eslint-disable-next-line no-plusplus
+        setTime(getTime(props.nextAiringEpisode.airingAt));
+      }
+    }, 1000);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [time]);
+
   const [contextMenu, setContextMenu] = useState<{
     mouseX: number;
     mouseY: number;
@@ -141,13 +164,23 @@ export default function MediaCardCompact({ props }: any) {
               overflow: 'hidden',
               textOverflow: 'ellipsis',
               display: '-webkit-box',
-              WebkitLineClamp: '2',
+              WebkitLineClamp:
+                props.nextAiringEpisode !== null && nextAiringEpisode === 'Show'
+                  ? '1'
+                  : '2',
               WebkitBoxOrient: 'vertical',
             }}
             color={getStatusColor(props.status)}
           >
             {getTitle(titlePreference.title, props)}
           </Typography>
+          {props.nextAiringEpisode !== null && nextAiringEpisode === 'Show' ? (
+            <Typography variant="body2" fontSize={11} color="aliceblue" noWrap>
+              {`EP${props.nextAiringEpisode.episode}: ${getTimeFormat(
+                props.nextAiringEpisode.airingAt,
+              )}`}
+            </Typography>
+          ) : null}
         </Box>
       </CardActionArea>
       <ContextMenu

src/renderer/components/app/sidebar/SortMenu.tsx

@@ -13,6 +13,8 @@ import { useCategory } from 'renderer/context/CategoryContext';
 import { useSidebarButton } from 'renderer/context/SidebarContext';
 import { useSort } from 'renderer/context/SortContext';
 import { useSortLast } from 'renderer/context/SortLastContext';
+import { useAtom } from 'jotai';
+import { nextAiringEpisodeAtom } from 'renderer/store';
 
 function SortValueIcon({ value, currentSort }: any) {
   if (value === currentSort + 0.5) {
@@ -61,6 +63,62 @@ export default function SortMenu() {
   const sortLast: any = useSortLast();
   const myCategory: any = useCategory();
 
+  const [nextAiringEpisode, setNextAiringEpisode] = useAtom(
+    nextAiringEpisodeAtom,
+  );
+
+  if (sidebar.sidebar === 0 && nextAiringEpisode === 'Show') {
+    // anime list
+    return (
+      <List component="div" disablePadding>
+        {[
+          'Next Airing Time',
+          'Status',
+          'Title',
+          'Episode Progress',
+          'Score',
+          'Type',
+          'Season',
+        ].map((text, index) => (
+          <ListItem key={text} disablePadding>
+            <ListItemButton
+              sx={{}}
+              dense
+              onClick={() => {
+                switch (sortValue.sort) {
+                  case index + 1:
+                    sortValue.setSort(index + 1.5);
+                    sortLast.dispatch({
+                      type: 'updateAnimeSort',
+                      payload: index + 1.5,
+                    });
+                    break;
+                  case index + 1.5:
+                    sortValue.setSort(0);
+                    sortLast.dispatch({
+                      type: 'updateAnimeSort',
+                      payload: 0,
+                    });
+                    break;
+                  default:
+                    sortValue.setSort(index + 1);
+                    sortLast.dispatch({
+                      type: 'updateAnimeSort',
+                      payload: index + 1,
+                    });
+                }
+              }}
+            >
+              <ListItemIcon>
+                <SortValueIcon value={sortValue.sort} currentSort={index + 1} />
+              </ListItemIcon>
+              <ListItemText primary={text} />
+            </ListItemButton>
+          </ListItem>
+        ))}
+      </List>
+    );
+  }
   if (sidebar.sidebar === 0) {
     // anime list
     return (

src/renderer/components/settings/SettingsMain.tsx

@@ -24,6 +24,7 @@ import DefaultStatus from './app/DefaultStatus';
 import SelectDefaultView from './app/SelectDefaultView';
 import AboutSection from './about/AboutSection';
 import SelectSeasonChange from './app/SelectSeasonChange';
+import NextAiringEpisodeMainList from './app/NextAiringEpisodeMainList';
 
 function SettingsMainTab({ view }: any) {
   if (view === 0) {
@@ -59,6 +60,7 @@ function SettingsMainTab({ view }: any) {
         <SelectSeasonChange />
         <SelectDefaultLink />
         <DefaultStatus />
+        <NextAiringEpisodeMainList />
       </Box>
     );
   }

src/renderer/components/settings/app/NextAiringEpisodeMainList.tsx

@@ -0,0 +1,39 @@
+import { Box, FormControl, InputLabel, NativeSelect } from '@mui/material';
+import { useAtom } from 'jotai';
+import React from 'react';
+import { nextAiringEpisodeAtom } from 'renderer/store';
+
+function NextAiringEpisodeMainList() {
+  const [nextAiringEpisode, setNextAiringEpisode] = useAtom(
+    nextAiringEpisodeAtom,
+  );
+
+  const handleChange = (event: any) => {
+    setNextAiringEpisode(event.target.value as string);
+    window.electron.store.set('nextAiringEpisode', event.target.value);
+    window.electron.ipcRenderer.sendMessage('updateMainFromSettings', [
+      'nextAiringEpisode',
+      event.target.value,
+    ]);
+  };
+
+  return (
+    <Box>
+      <FormControl fullWidth>
+        <InputLabel variant="standard">
+          Show next airing episode on the user&apos;s anime list
+        </InputLabel>
+        <NativeSelect
+          id="defaultNextAiringEpisode"
+          value={nextAiringEpisode}
+          onChange={handleChange}
+        >
+          <option value="Show">Show</option>
+          <option value="Hide">Hide</option>
+        </NativeSelect>
+      </FormControl>
+    </Box>
+  );
+}
+
+export default NextAiringEpisodeMainList;