new tvshowspage

src/App.tsx

@@ -17,6 +17,7 @@ import ActorOverviewPage from './pages/ActorOverviewPage/ActorOverviewPage';
 import ActorPage from './pages/ActorPage/ActorPage';
 import {SettingsTypes} from './types/ApiTypes';
 import AuthenticationPage from './pages/AuthenticationPage/AuthenticationPage';
+import TVShowPage from './pages/TVShowPage/TVShowPage';
 
 interface state {
     password: boolean | null; // null if uninitialized - true if pwd needed false if not needed
@@ -93,9 +94,8 @@ class App extends React.Component<{}, state> {
     }
 
     render(): JSX.Element {
-        const themeStyle = GlobalInfos.getThemeStyle();
         // add the main theme to the page body
-        document.body.className = themeStyle.backgroundcolor;
+        document.body.className = GlobalInfos.getThemeStyle().backgroundcolor;
 
         if (this.state.password === true) {
             // render authentication page if auth is neccessary
@@ -104,37 +104,7 @@ class App extends React.Component<{}, state> {
             return (
                 <Router>
                     <div className={style.app}>
-                        <div
+                        {this.navBar()}
-                            className={[style.navcontainer, themeStyle.backgroundcolor, themeStyle.textcolor, themeStyle.hrcolor].join(
-                                ' '
-                            )}>
-                            <div className={style.navbrand}>{this.state.mediacentername}</div>
-                            <NavLink
-                                className={[style.navitem, themeStyle.navitem].join(' ')}
-                                to={'/'}
-                                activeStyle={{opacity: '0.85'}}>
-                                Home
-                            </NavLink>
-                            <NavLink
-                                className={[style.navitem, themeStyle.navitem].join(' ')}
-                                to={'/random'}
-                                activeStyle={{opacity: '0.85'}}>
-                                Random Video
-                            </NavLink>
-
-                            <NavLink
-                                className={[style.navitem, themeStyle.navitem].join(' ')}
-                                to={'/categories'}
-                                activeStyle={{opacity: '0.85'}}>
-                                Categories
-                            </NavLink>
-                            <NavLink
-                                className={[style.navitem, themeStyle.navitem].join(' ')}
-                                to={'/settings'}
-                                activeStyle={{opacity: '0.85'}}>
-                                Settings
-                            </NavLink>
-                        </div>
                         {this.routing()}
                     </div>
                 </Router>
@@ -144,6 +114,38 @@ class App extends React.Component<{}, state> {
         }
     }
 
+    /**
+     * render the top navigation bar
+     */
+    navBar(): JSX.Element {
+        const themeStyle = GlobalInfos.getThemeStyle();
+
+        return (
+            <div className={[style.navcontainer, themeStyle.backgroundcolor, themeStyle.textcolor, themeStyle.hrcolor].join(' ')}>
+                <div className={style.navbrand}>{this.state.mediacentername}</div>
+                <NavLink className={[style.navitem, themeStyle.navitem].join(' ')} to={'/'} activeStyle={{opacity: '0.85'}}>
+                    Home
+                </NavLink>
+                <NavLink className={[style.navitem, themeStyle.navitem].join(' ')} to={'/random'} activeStyle={{opacity: '0.85'}}>
+                    Random Video
+                </NavLink>
+
+                <NavLink className={[style.navitem, themeStyle.navitem].join(' ')} to={'/categories'} activeStyle={{opacity: '0.85'}}>
+                    Categories
+                </NavLink>
+                <NavLink className={[style.navitem, themeStyle.navitem].join(' ')} to={'/tvshows'} activeStyle={{opacity: '0.85'}}>
+                    TV Shows
+                </NavLink>
+                <NavLink className={[style.navitem, themeStyle.navitem].join(' ')} to={'/settings'} activeStyle={{opacity: '0.85'}}>
+                    Settings
+                </NavLink>
+            </div>
+        );
+    }
+
+    /**
+     * render the react router elements
+     */
     routing(): JSX.Element {
         return (
             <Switch>
@@ -153,6 +155,9 @@ class App extends React.Component<{}, state> {
                 <Route path='/categories'>
                     <CategoryPage />
                 </Route>
+                <Route path='/tvshows'>
+                    <TVShowPage />
+                </Route>
                 <Route path='/settings'>
                     <SettingsPage />
                 </Route>

src/pages/Player/Player.tsx

@@ -287,9 +287,9 @@ export class Player extends React.Component<myprops, mystate> {
                         sources: [
                             {
                                 src:
-                                    (process.env.REACT_APP_CUST_BACK_DOMAIN
+                                    (process.env.REACT_APP_CUST_BACK_DOMAIN ? process.env.REACT_APP_CUST_BACK_DOMAIN : '') +
-                                        ? process.env.REACT_APP_CUST_BACK_DOMAIN
+                                    GlobalInfos.getVideoPath() +
-                                        : GlobalInfos.getVideoPath()) + result.MovieUrl,
+                                    result.MovieUrl,
                                 type: 'video/mp4',
                                 size: 1080
                             }

src/pages/TVShowPage/TVShowPage.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+
+class TVShowPage extends React.Component {
+    render(): JSX.Element {
+        return <></>;
+    }
+}
+
+export default TVShowPage;