make anime work again

src/components/TemporaryDrawer.tsx

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

src/screens/anime/Player.tsx

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

src/typings.d.ts

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