barebones anime player

webUI/react/src/App.tsx

@@ -32,6 +32,7 @@ import MangaExtensions from 'screens/manga/MangaExtensions';
 import SourceMangas from 'screens/manga/SourceMangas';
 import SourceAnimes from 'screens/anime/SourceAnimes';
 import Reader from 'screens/manga/Reader';
+import Player from 'screens/anime/Player';
 import AnimeExtensions from 'screens/anime/AnimeExtensions';
 
 export default function App() {
@@ -133,13 +134,6 @@ export default function App() {
                             <Route path="/library">
                                 <Library />
                             </Route>
-                            <Route
-                                path="/manga/:mangaId/chapter/:chapterIndex"
-                                // passing a key re-mounts the reader when changing chapters
-                                render={
-                                    (props:any) => <Reader key={props.match.params.chapterIndex} />
-                                }
-                            />
 
                             {/* Anime Routes */}
                             <Route path="/anime/extensions">
@@ -154,11 +148,21 @@ export default function App() {
                             <Route path="/anime/sources">
                                 <AnimeSources />
                             </Route>
+                            <Route path="/anime/:animeId/episode/:episodeIndex">
+                                <Player />
+                            </Route>
                             <Route path="/anime/:id">
                                 <Anime />
                             </Route>
                         </Switch>
                     </Container>
+                    <Switch>
+                        <Route
+                            path="/manga/:mangaId/chapter/:chapterIndex"
+                            // passing a key re-mounts the reader when changing chapters
+                            render={(props:any) => <Reader key={props.match.params.chapterIndex} />}
+                        />
+                    </Switch>
                 </NavbarContext.Provider>
             </ThemeProvider>
         </Router>

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

@@ -0,0 +1,77 @@
+/*
+ * 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 '@material-ui/core/CircularProgress';
+import { makeStyles } from '@material-ui/core/styles';
+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',
+    },
+
+    video: {
+        maxWidth: '100%',
+        maxHeight: '100%',
+    },
+});
+
+const initialEpisode = () => ({ linkUrl: '', index: -1, episodeCount: 0 });
+
+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>();
+    const { setTitle } = useContext(NavbarContext);
+
+    useEffect(() => {
+        setTitle('Reader');
+        client.get(`/api/v1/anime/anime/${animeId}/`)
+            .then((response) => response.data)
+            .then((data: IManga) => {
+                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);
+                setEpisodeLink(data.linkUrl);
+            });
+    }, [episodeIndex]);
+
+    // return spinner while chpater data is loading
+    if (episode.linkUrl === '') {
+        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>
+                <source src={episodeLink} />
+            </video>
+        </div>
+    );
+}

webUI/react/src/typings.d.ts

@@ -55,7 +55,6 @@ interface IManga {
 }
 
 interface IChapter {
-    id: number
     url: string
     name: string
     uploadDate: number
@@ -71,7 +70,6 @@ interface IChapter {
 }
 
 interface IEpisode {
-    id: number
     url: string
     name: string
     uploadDate: number
@@ -83,7 +81,7 @@ interface IEpisode {
     lastPageRead: number
     index: number
     episodeCount: number
-    pageCount: number
+    linkUrl: string
 }
 
 interface IPartialChpter {
@@ -92,6 +90,12 @@ interface IPartialChpter {
     chapterCount: number
 }
 
+interface IPartialEpisode {
+    linkUrl: string
+    index: number
+    episodeCount: number
+}
+
 interface ICategory {
     id: number
     order: number