ChoChoX/suwayomi-material-you-webui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Remove Anime support

Browse Source
This commit is contained in:
Aria Moradi
2021-10-18 14:32:57 +03:30
parent 1efd899188
commit 1ed001a8d8
17 changed files with 3 additions and 1445 deletions
Download Patch File Download Diff File Expand all files Collapse all files

119
src/screens/anime/Anime.tsx
View File

@@ -1,119 +0,0 @@
/*
* 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 { Theme } from '@mui/material/styles';
import makeStyles from '@mui/styles/makeStyles';
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<IAnime>();
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: IAnime) => {
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>
);
}

108
src/screens/anime/AnimeExtensions.tsx
View File

@@ -1,108 +0,0 @@
/*
* 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 ExtensionCard from 'components/anime/ExtensionCard';
import NavbarContext from 'context/NavbarContext';
import client from 'util/client';
import useLocalStorage from 'util/useLocalStorage';
import LangSelect from 'components/manga/LangSelect';
import { extensionDefaultLangs, langCodeToName, langSortCmp } from 'util/language';
const allLangs: string[] = [];
function groupExtensions(extensions: IExtension[]) {
allLangs.length = 0; // empty the array
const result = { installed: [], 'updates pending': [] } as any;
extensions.sort((a, b) => ((a.apkName > b.apkName) ? 1 : -1));
extensions.forEach((extension) => {
if (result[extension.lang] === undefined) {
result[extension.lang] = [];
if (extension.lang !== 'all') { allLangs.push(extension.lang); }
}
if (extension.installed) {
if (extension.hasUpdate) {
result['updates pending'].push(extension);
} else {
result.installed.push(extension);
}
} else {
result[extension.lang].push(extension);
}
});
// put english first for convience
allLangs.sort(langSortCmp);
return result;
}
export default function AnimeExtensions() {
const { setTitle, setAction } = useContext(NavbarContext);
const [shownLangs, setShownLangs] = useLocalStorage<string[]>('shownExtensionLangs', extensionDefaultLangs());
useEffect(() => {
setTitle('Extensions');
setAction(
<LangSelect
shownLangs={shownLangs}
setShownLangs={setShownLangs}
allLangs={allLangs}
/>,
);
}, [shownLangs]);
const [extensionsRaw, setExtensionsRaw] = useState<IExtension[]>([]);
const [extensions, setExtensions] = useState<any>({});
const [updateTriggerHolder, setUpdateTriggerHolder] = useState(0); // just a hack
const triggerUpdate = () => setUpdateTriggerHolder(updateTriggerHolder + 1); // just a hack
useEffect(() => {
client.get('/api/v1/anime/extension/list')
.then((response) => response.data)
.then((data) => setExtensionsRaw(data));
}, [updateTriggerHolder]);
useEffect(() => {
if (extensionsRaw.length > 0) {
const groupedExtension = groupExtensions(extensionsRaw);
setExtensions(groupedExtension);
}
}, [extensionsRaw]);
if (Object.entries(extensions).length === 0) {
return <h3>loading...</h3>;
}
const groupsToShow = ['updates pending', 'installed', ...shownLangs];
return (
<>
{
Object.entries(extensions).map(([lang, list]) => (
((groupsToShow.indexOf(lang) !== -1 && (list as []).length > 0)
&& (
<React.Fragment key={lang}>
<h1 key={lang} style={{ marginLeft: 25 }}>
{langCodeToName(lang)}
</h1>
{(list as IExtension[]).map((it) => (
<ExtensionCard
key={it.apkName}
extension={it}
notifyInstall={() => {
triggerUpdate();
}}
/>
))}
</React.Fragment>
))
))
}
</>
);
}

115
src/screens/anime/AnimeSearchSingle.tsx
View File

@@ -1,115 +0,0 @@
/*
* 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 makeStyles from '@mui/styles/makeStyles';
import TextField from '@mui/material/TextField';
import Button from '@mui/material/Button';
import { useParams } from 'react-router-dom';
import AnimeGrid from 'components/anime/AnimeGrid';
import NavbarContext from 'context/NavbarContext';
import client from 'util/client';
const useStyles = makeStyles((theme) => ({
root: {
margin: '20px 10px',
display: 'flex',
justifyContent: 'space-around',
width: '300px',
TextField: {
margin: theme.spacing(1),
width: '25ch',
},
},
}));
export default function AnimeSearchSingle() {
const { setTitle, setAction } = useContext(NavbarContext);
useEffect(() => { setTitle('Search'); setAction(<></>); }, []);
const { sourceId } = useParams<{ sourceId: string }>();
const classes = useStyles();
const [error, setError] = useState<boolean>(false);
const [mangas, setMangas] = useState<IMangaCard[]>([]);
const [message, setMessage] = useState<string>('');
const [searchTerm, setSearchTerm] = useState<string>('');
const [hasNextPage, setHasNextPage] = useState<boolean>(false);
const [lastPageNum, setLastPageNum] = useState<number>(1);
const textInput = React.createRef<HTMLInputElement>();
useEffect(() => {
client.get(`/api/v1/anime/source/${sourceId}`)
.then((response) => response.data)
.then((data: { name: string }) => setTitle(`Search: ${data.name}`));
}, []);
function processInput() {
if (textInput.current) {
const { value } = textInput.current;
if (value === '') {
setError(true);
setMessage('Type something to search');
} else {
setError(false);
setSearchTerm(value);
setMangas([]);
setMessage('loading...');
}
}
}
useEffect(() => {
if (searchTerm.length > 0) {
client.get(`/api/v1/anime/source/${sourceId}/search/${searchTerm}/${lastPageNum}`)
.then((response) => response.data)
.then((data: { mangaList: IAnime[], hasNextPage: boolean }) => {
setMessage('');
if (data.mangaList.length > 0) {
setMangas([
...mangas,
...data.mangaList.map((it) => ({
title: it.title, thumbnailUrl: it.thumbnailUrl, id: it.id,
}))]);
setHasNextPage(data.hasNextPage);
} else {
setMessage('search query returned nothing.');
}
});
}
}, [searchTerm]);
const mangaGrid = (
<AnimeGrid
mangas={mangas}
message={message}
hasNextPage={hasNextPage}
lastPageNum={lastPageNum}
setLastPageNum={setLastPageNum}
/>
);
return (
<>
<div className={classes.root}>
<TextField
inputRef={textInput}
error={error}
id="filled-basic"
variant="filled"
size="small"
label="Search text.."
onKeyDown={(e) => e.key === 'Enter' && processInput()}
/>
<Button variant="contained" color="primary" onClick={() => processInput()}>
Search
</Button>
</div>
{mangaGrid}
</>
);
}

84
src/screens/anime/AnimeSources.tsx
View File

@@ -1,84 +0,0 @@
/*
* 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 LangSelect from 'components/manga/LangSelect';
import SourceCard from 'components/anime/SourceCard';
import NavbarContext from 'context/NavbarContext';
import client from 'util/client';
import { sourceDefualtLangs, 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', sourceDefualtLangs());
const [sources, setSources] = useState<ISource[]>([]);
const [fetched, setFetched] = useState<boolean>(false);
useEffect(() => {
setTitle('Sources');
setAction(
<LangSelect
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>
)
))}
</>
);
}

83
src/screens/anime/Player.tsx
View File

@@ -1,83 +0,0 @@
/*
* 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 CircularProgress from '@mui/material/CircularProgress';
import makeStyles from '@mui/styles/makeStyles';
import React, { useContext, useEffect, useState } from 'react';
import { useParams } from 'react-router-dom';
import NavbarContext from 'context/NavbarContext';
import client from 'util/client';
const useStyles = makeStyles({
root: {
width: 'calc(100vw - 10px)',
height: 'calc(100vh - 64px)',
},
loading: {
margin: '50px auto',
display: 'flex',
justifyContent: 'center',
},
video: {
maxWidth: '100%',
maxHeight: '100%',
},
});
const initialEpisode = () => ({
index: -1, episodeCount: 0, videos: [],
});
export default function Player() {
const classes = useStyles();
const { episodeIndex, animeId } = useParams<{ episodeIndex: string, animeId: string }>();
const [episode, setEpisode] = useState<IEpisode | IPartialEpisode>(initialEpisode());
// eslint-disable-next-line @typescript-eslint/no-unused-vars
const [episodeLink, setEpisodeLink] = useState<string>('');
const { setTitle } = useContext(NavbarContext);
useEffect(() => {
setTitle('Reader');
client.get(`/api/v1/anime/anime/${animeId}/`)
.then((response) => response.data)
.then((data: IAnime) => {
setTitle(data.title);
});
}, [episodeIndex]);
useEffect(() => {
setEpisode(initialEpisode);
client.get(`/api/v1/anime/anime/${animeId}/episode/${episodeIndex}`)
.then((response) => response.data)
.then((data:IEpisode) => {
setEpisode(data);
});
}, [episodeIndex]);
// return spinner while chpater data is loading
if (episode.videos.length === 0) {
return (
<div className={classes.loading}>
<CircularProgress thickness={5} />
</div>
);
}
return (
<div className={classes.root}>
{/* eslint-disable-next-line jsx-a11y/media-has-caption */}
<video className={classes.video} controls>
{episode.videos.map((it) => (
<source src={it.videoUrl} />
))}
</video>
</div>
);
}

51
src/screens/anime/SourceAnimes.tsx
View File

@@ -1,51 +0,0 @@
/*
* 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: IAnime[], 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}
/>
);
}

0
src/screens/manga/MangaExtensions.tsx → src/screens/manga/Extensions.tsx
View File

0
src/screens/manga/MangaSources.tsx → src/screens/manga/Sources.tsx
View File