Manga page Finished

webUI/react/src/screens/anime/Anime.tsx

@@ -0,0 +1,118 @@
+/*
+ * Copyright (C) Contributors to the Suwayomi project
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
+
+import React, { useEffect, useState, useContext } from 'react';
+import { makeStyles, Theme } from '@material-ui/core/styles';
+import { useParams } from 'react-router-dom';
+import { Virtuoso } from 'react-virtuoso';
+import EpisodeCard from 'components/anime/EpisodeCard';
+import AnimeDetails from 'components/anime/AnimeDetails';
+import NavbarContext from 'context/NavbarContext';
+import client from 'util/client';
+import LoadingPlaceholder from 'components/LoadingPlaceholder';
+import makeToast from 'components/Toast';
+
+const useStyles = makeStyles((theme: Theme) => ({
+    root: {
+        [theme.breakpoints.up('md')]: {
+            display: 'flex',
+        },
+    },
+
+    chapters: {
+        listStyle: 'none',
+        padding: 0,
+        minHeight: '200px',
+        [theme.breakpoints.up('md')]: {
+            width: '50vw',
+            height: 'calc(100vh - 64px)',
+            margin: 0,
+        },
+    },
+
+    loading: {
+        margin: '10px 0',
+        display: 'flex',
+        justifyContent: 'center',
+    },
+}));
+
+export default function Anime() {
+    const classes = useStyles();
+
+    const { setTitle } = useContext(NavbarContext);
+    useEffect(() => { setTitle('Anime'); }, []); // delegate setting topbar action to MangaDetails
+
+    const { id } = useParams<{ id: string }>();
+
+    const [manga, setManga] = useState<IManga>();
+    const [episodes, setEpisodes] = useState<IEpisode[]>([]);
+    const [fetchedEpisodes, setFetchedEpisodes] = useState(false);
+    const [noEpisodesFound, setNoEpisodesFound] = useState(false);
+    const [episodeUpdateTriggerer, setEpisodeUpdateTriggerer] = useState(0);
+
+    function triggerEpisodesUpdate() {
+        setEpisodeUpdateTriggerer(episodeUpdateTriggerer + 1);
+    }
+
+    useEffect(() => {
+        if (manga === undefined || !manga.freshData) {
+            client.get(`/api/v1/anime/anime/${id}/?onlineFetch=${manga !== undefined}`)
+                .then((response) => response.data)
+                .then((data: IManga) => {
+                    setManga(data);
+                    setTitle(data.title);
+                });
+        }
+    }, [manga]);
+
+    useEffect(() => {
+        const shouldFetchOnline = fetchedEpisodes && episodeUpdateTriggerer === 0;
+        client.get(`/api/v1/anime/anime/${id}/episodes?onlineFetch=${shouldFetchOnline}`)
+            .then((response) => response.data)
+            .then((data) => {
+                if (data.length === 0 && fetchedEpisodes) {
+                    makeToast('No episodes found', 'warning');
+                    setNoEpisodesFound(true);
+                }
+                setEpisodes(data);
+            })
+            .then(() => setFetchedEpisodes(true));
+    }, [episodes.length, fetchedEpisodes, episodeUpdateTriggerer]);
+
+    return (
+        <div className={classes.root}>
+            <LoadingPlaceholder
+                shouldRender={manga !== undefined}
+                component={AnimeDetails}
+                componentProps={{ manga }}
+            />
+
+            <LoadingPlaceholder
+                shouldRender={episodes.length > 0 || noEpisodesFound}
+            >
+                <Virtuoso
+                    style={{ // override Virtuoso default values and set them with class
+                        height: 'undefined',
+                        overflowY: window.innerWidth < 960 ? 'visible' : 'auto',
+                    }}
+                    className={classes.chapters}
+                    totalCount={episodes.length}
+                    itemContent={(index:number) => (
+                        <EpisodeCard
+                            episode={episodes[index]}
+                            triggerEpisodesUpdate={triggerEpisodesUpdate}
+                        />
+                    )}
+                    useWindowScroll={window.innerWidth < 960}
+                    overscan={window.innerHeight * 0.5}
+                />
+            </LoadingPlaceholder>
+
+        </div>
+    );
+}

webUI/react/src/screens/anime/AnimeSources.tsx

@@ -0,0 +1,84 @@
+/*
+ * Copyright (C) Contributors to the Suwayomi project
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
+
+import React, { useContext, useEffect, useState } from 'react';
+import ExtensionLangSelect from 'components/manga/ExtensionLangSelect';
+import SourceCard from 'components/anime/SourceCard';
+import NavbarContext from 'context/NavbarContext';
+import client from 'util/client';
+import { defualtLangs, langCodeToName, langSortCmp } from 'util/language';
+import useLocalStorage from 'util/useLocalStorage';
+
+function sourceToLangList(sources: ISource[]) {
+    const result: string[] = [];
+
+    sources.forEach((source) => {
+        if (result.indexOf(source.lang) === -1) { result.push(source.lang); }
+    });
+
+    result.sort(langSortCmp);
+    return result;
+}
+
+function groupByLang(sources: ISource[]) {
+    const result = {} as any;
+    sources.forEach((source) => {
+        if (result[source.lang] === undefined) { result[source.lang] = [] as ISource[]; }
+        result[source.lang].push(source);
+    });
+
+    return result;
+}
+
+export default function AnimeSources() {
+    const { setTitle, setAction } = useContext(NavbarContext);
+
+    const [shownLangs, setShownLangs] = useLocalStorage<string[]>('shownSourceLangs', defualtLangs());
+
+    const [sources, setSources] = useState<ISource[]>([]);
+    const [fetched, setFetched] = useState<boolean>(false);
+
+    useEffect(() => {
+        setTitle('Sources');
+        setAction(
+            <ExtensionLangSelect
+                shownLangs={shownLangs}
+                setShownLangs={setShownLangs}
+                allLangs={sourceToLangList(sources)}
+            />,
+        );
+    }, [shownLangs, sources]);
+
+    useEffect(() => {
+        client.get('/api/v1/anime/source/list')
+            .then((response) => response.data)
+            .then((data) => { setSources(data); setFetched(true); });
+    }, []);
+
+    if (sources.length === 0) {
+        if (fetched) return (<h3>No sources found. Install Some Extensions first.</h3>);
+        return (<h3>loading...</h3>);
+    }
+    return (
+        <>
+            {/* eslint-disable-next-line max-len */}
+            {Object.entries(groupByLang(sources)).sort((a, b) => langSortCmp(a[0], b[0])).map(([lang, list]) => (
+                shownLangs.indexOf(lang) !== -1 && (
+                    <React.Fragment key={lang}>
+                        <h1 key={lang} style={{ marginLeft: 25 }}>{langCodeToName(lang)}</h1>
+                        {(list as ISource[]).map((source) => (
+                            <SourceCard
+                                key={source.id}
+                                source={source}
+                            />
+                        ))}
+                    </React.Fragment>
+                )
+            ))}
+        </>
+    );
+}

webUI/react/src/screens/anime/SourceAnimes.tsx

@@ -0,0 +1,51 @@
+/*
+ * Copyright (C) Contributors to the Suwayomi project
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
+
+import React, { useContext, useEffect, useState } from 'react';
+import { useParams } from 'react-router-dom';
+import AnimeGrid from 'components/anime/AnimeGrid';
+import NavbarContext from 'context/NavbarContext';
+import client from 'util/client';
+
+export default function SourceAnimes(props: { popular: boolean }) {
+    const { setTitle, setAction } = useContext(NavbarContext);
+    useEffect(() => { setTitle('Source'); setAction(<></>); }, []);
+
+    const { sourceId } = useParams<{ sourceId: string }>();
+    const [mangas, setMangas] = useState<IMangaCard[]>([]);
+    const [hasNextPage, setHasNextPage] = useState<boolean>(false);
+    const [lastPageNum, setLastPageNum] = useState<number>(1);
+
+    useEffect(() => {
+        client.get(`/api/v1/anime/source/${sourceId}`)
+            .then((response) => response.data)
+            .then((data: { name: string }) => setTitle(data.name));
+    }, []);
+
+    useEffect(() => {
+        const sourceType = props.popular ? 'popular' : 'latest';
+        client.get(`/api/v1/anime/source/${sourceId}/${sourceType}/${lastPageNum}`)
+            .then((response) => response.data)
+            .then((data: { mangaList: IManga[], hasNextPage: boolean }) => {
+                setMangas([
+                    ...mangas,
+                    ...data.mangaList.map((it) => ({
+                        title: it.title, thumbnailUrl: it.thumbnailUrl, id: it.id,
+                    }))]);
+                setHasNextPage(data.hasNextPage);
+            });
+    }, [lastPageNum]);
+
+    return (
+        <AnimeGrid
+            mangas={mangas}
+            hasNextPage={hasNextPage}
+            lastPageNum={lastPageNum}
+            setLastPageNum={setLastPageNum}
+        />
+    );
+}

webUI/react/src/screens/manga/Manga.tsx

@@ -26,7 +26,7 @@ const useStyles = makeStyles((theme: Theme) => ({
     chapters: {
         listStyle: 'none',
         padding: 0,
-        minHeight: '50vh',
+        minHeight: '200px',
         [theme.breakpoints.up('md')]: {
             width: '50vw',
             height: 'calc(100vh - 64px)',
@@ -98,7 +98,7 @@ export default function Manga() {
                 <Virtuoso
                     style={{ // override Virtuoso default values and set them with class
                         height: 'undefined',
-                        overflowY: 'visible',
+                        overflowY: window.innerWidth < 960 ? 'visible' : 'auto',
                     }}
                     className={classes.chapters}
                     totalCount={chapters.length}

webUI/react/src/screens/manga/MangaSources.tsx

@@ -34,7 +34,7 @@ function groupByLang(sources: ISource[]) {
     return result;
 }
 
-export default function Sources() {
+export default function MangaSources() {
     const { setTitle, setAction } = useContext(NavbarContext);
 
     const [shownLangs, setShownLangs] = useLocalStorage<string[]>('shownSourceLangs', defualtLangs());