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

make anime work again

Browse Source
This commit is contained in:
Aria Moradi
2021-08-10 09:40:43 +04:30
parent fe35799332
commit 9dd77e1a13
3 changed files with 64 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

81
src/components/TemporaryDrawer.tsx
View File

@@ -12,12 +12,15 @@ import List from '@material-ui/core/List';
import ListItem from '@material-ui/core/ListItem'; import ListItem from '@material-ui/core/ListItem';
import ListItemIcon from '@material-ui/core/ListItemIcon'; import ListItemIcon from '@material-ui/core/ListItemIcon';
import CollectionsBookmarkIcon from '@material-ui/icons/CollectionsBookmark'; import CollectionsBookmarkIcon from '@material-ui/icons/CollectionsBookmark';
import CollectionsBookmarkOutlinedIcon from '@material-ui/icons/CollectionsBookmarkOutlined';
import VideoLibraryOutlinedIcon from '@material-ui/icons/VideoLibraryOutlined';
import ExploreIcon from '@material-ui/icons/Explore'; import ExploreIcon from '@material-ui/icons/Explore';
import ExtensionIcon from '@material-ui/icons/Extension'; import ExtensionIcon from '@material-ui/icons/Extension';
import GetAppIcon from '@material-ui/icons/GetApp'; import GetAppIcon from '@material-ui/icons/GetApp';
import ListItemText from '@material-ui/core/ListItemText'; import ListItemText from '@material-ui/core/ListItemText';
import SettingsIcon from '@material-ui/icons/Settings'; import SettingsIcon from '@material-ui/icons/Settings';
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
import useLocalStorage from 'util/useLocalStorage';
const useStyles = makeStyles({ const useStyles = makeStyles({
list: { list: {
@@ -33,6 +36,17 @@ interface IProps {
export default function TemporaryDrawer({ drawerOpen, setDrawerOpen }: IProps) { export default function TemporaryDrawer({ drawerOpen, setDrawerOpen }: IProps) {
const classes = useStyles(); const classes = useStyles();
const [workingMode, setWorkingMode] = useLocalStorage<'manga'|'anime'>('workingMode', 'manga');
const otherMode = () => {
if (workingMode === 'manga') return 'Anime';
return 'Manga';
};
const switchMode = () => {
if (workingMode === 'manga') setWorkingMode('anime');
else setWorkingMode('manga');
};
return ( return (
<div> <div>
@@ -48,15 +62,18 @@ export default function TemporaryDrawer({ drawerOpen, setDrawerOpen }: IProps) {
onKeyDown={() => setDrawerOpen(false)} onKeyDown={() => setDrawerOpen(false)}
> >
<List> <List>
<Link to="/library" style={{ color: 'inherit', textDecoration: 'none' }}> {workingMode === 'manga'
<ListItem button key="Library"> && (
<ListItemIcon> <Link to="/library" style={{ color: 'inherit', textDecoration: 'none' }}>
<CollectionsBookmarkIcon /> <ListItem button key="Library">
</ListItemIcon> <ListItemIcon>
<ListItemText primary="Library" /> <CollectionsBookmarkIcon />
</ListItem> </ListItemIcon>
</Link> <ListItemText primary="Library" />
<Link to="/manga/extensions" style={{ color: 'inherit', textDecoration: 'none' }}> </ListItem>
</Link>
)}
<Link to={`/${workingMode}/extensions`} style={{ color: 'inherit', textDecoration: 'none' }}>
<ListItem button key="Extensions"> <ListItem button key="Extensions">
<ListItemIcon> <ListItemIcon>
<ExtensionIcon /> <ExtensionIcon />
@@ -64,16 +81,7 @@ export default function TemporaryDrawer({ drawerOpen, setDrawerOpen }: IProps) {
<ListItemText primary="Extensions" /> <ListItemText primary="Extensions" />
</ListItem> </ListItem>
</Link> </Link>
{/* <Link to="/anime/extensions" <Link to={`/${workingMode}/sources`} style={{ color: 'inherit', textDecoration: 'none' }}>
style={{ color: 'inherit', textDecoration: 'none' }}>
<ListItem button key="Extensions">
<ListItemIcon>
<ExtensionIcon />
</ListItemIcon>
<ListItemText primary="Anime Extensions" />
</ListItem>
</Link> */}
<Link to="/manga/sources" style={{ color: 'inherit', textDecoration: 'none' }}>
<ListItem button key="Sources"> <ListItem button key="Sources">
<ListItemIcon> <ListItemIcon>
<ExploreIcon /> <ExploreIcon />
@@ -81,23 +89,17 @@ export default function TemporaryDrawer({ drawerOpen, setDrawerOpen }: IProps) {
<ListItemText primary="Sources" /> <ListItemText primary="Sources" />
</ListItem> </ListItem>
</Link> </Link>
{/* <Link to="/anime/sources" {workingMode === 'manga'
style={{ color: 'inherit', textDecoration: 'none' }}> && (
<ListItem button key="Sources"> <Link to="/manga/downloads" style={{ color: 'inherit', textDecoration: 'none' }}>
<ListItemIcon> <ListItem button key="Manga Download Queue">
<ExploreIcon /> <ListItemIcon>
</ListItemIcon> <GetAppIcon />
<ListItemText primary="Anime Sources" /> </ListItemIcon>
</ListItem> <ListItemText primary="Downloads" />
</Link> */} </ListItem>
<Link to="/manga/downloads" style={{ color: 'inherit', textDecoration: 'none' }}> </Link>
<ListItem button key="Manga Download Queue"> )}
<ListItemIcon>
<GetAppIcon />
</ListItemIcon>
<ListItemText primary="Downloads" />
</ListItem>
</Link>
<Link to="/settings" style={{ color: 'inherit', textDecoration: 'none' }}> <Link to="/settings" style={{ color: 'inherit', textDecoration: 'none' }}>
<ListItem button key="settings"> <ListItem button key="settings">
<ListItemIcon> <ListItemIcon>
@@ -106,6 +108,13 @@ export default function TemporaryDrawer({ drawerOpen, setDrawerOpen }: IProps) {
<ListItemText primary="Settings" /> <ListItemText primary="Settings" />
</ListItem> </ListItem>
</Link> </Link>
<ListItem button key="SwitchMode" onClick={switchMode}>
<ListItemIcon>
{workingMode === 'manga' && <VideoLibraryOutlinedIcon />}
{workingMode === 'anime' && <CollectionsBookmarkOutlinedIcon />}
</ListItemIcon>
<ListItemText primary={`Switch to ${otherMode()}`} />
</ListItem>
</List> </List>
</div> </div>
</Drawer> </Drawer>

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

@@ -28,14 +28,17 @@ const useStyles = makeStyles({
}, },
}); });
const initialEpisode = () => ({ linkUrl: '', index: -1, episodeCount: 0 }); const initialEpisode = () => ({
index: -1, episodeCount: 0, videos: [],
});
export default function Player() { export default function Player() {
const classes = useStyles(); const classes = useStyles();
const { episodeIndex, animeId } = useParams<{ episodeIndex: string, animeId: string }>(); const { episodeIndex, animeId } = useParams<{ episodeIndex: string, animeId: string }>();
const [episode, setEpisode] = useState<IEpisode | IPartialEpisode>(initialEpisode()); const [episode, setEpisode] = useState<IEpisode | IPartialEpisode>(initialEpisode());
const [episodeLink, setEpisodeLink] = useState<string>(); // eslint-disable-next-line @typescript-eslint/no-unused-vars
const [episodeLink, setEpisodeLink] = useState<string>('');
const { setTitle } = useContext(NavbarContext); const { setTitle } = useContext(NavbarContext);
useEffect(() => { useEffect(() => {
@@ -53,12 +56,11 @@ export default function Player() {
.then((response) => response.data) .then((response) => response.data)
.then((data:IEpisode) => { .then((data:IEpisode) => {
setEpisode(data); setEpisode(data);
setEpisodeLink(data.linkUrl);
}); });
}, [episodeIndex]); }, [episodeIndex]);
// return spinner while chpater data is loading // return spinner while chpater data is loading
if (episode.linkUrl === '') { if (episode.videos.length === 0) {
return ( return (
<div className={classes.loading}> <div className={classes.loading}>
<CircularProgress thickness={5} /> <CircularProgress thickness={5} />
@@ -70,7 +72,9 @@ export default function Player() {
<div className={classes.root}> <div className={classes.root}>
{/* eslint-disable-next-line jsx-a11y/media-has-caption */} {/* eslint-disable-next-line jsx-a11y/media-has-caption */}
<video className={classes.video} controls> <video className={classes.video} controls>
<source src={episodeLink} /> {episode.videos.map((it) => (
<source src={it.videoUrl} />
))}
</video> </video>
</div> </div>
); );

14
src/typings.d.ts vendored
View File

@@ -60,7 +60,7 @@ interface IChapter {
name: string name: string
uploadDate: number uploadDate: number
chapterNumber: number chapterNumber: number
scanlator: String scanlator: string
mangaId: number mangaId: number
read: boolean read: boolean
bookmarked: boolean bookmarked: boolean
@@ -71,19 +71,25 @@ interface IChapter {
downloaded: boolean downloaded: boolean
} }
interface Video{
url: string
quality: string
videoUrl: string
}
interface IEpisode { interface IEpisode {
url: string url: string
name: string name: string
uploadDate: number uploadDate: number
episodeNumber: number episodeNumber: number
scanlator: String scanlator: string
animeId: number animeId: number
read: boolean read: boolean
bookmarked: boolean bookmarked: boolean
lastPageRead: number lastPageRead: number
index: number index: number
episodeCount: number episodeCount: number
linkUrl: string videos: Video[]
} }
interface IPartialChpter { interface IPartialChpter {
@@ -93,9 +99,9 @@ interface IPartialChpter {
} }
interface IPartialEpisode { interface IPartialEpisode {
linkUrl: string
index: number index: number
episodeCount: number episodeCount: number
videos: Video[]
} }
interface ICategory { interface ICategory {