add a new TVPlayer component,

add tv episode path to db

src/App.tsx

@@ -18,6 +18,7 @@ import ActorPage from './pages/ActorPage/ActorPage';
 import {SettingsTypes} from './types/ApiTypes';
 import AuthenticationPage from './pages/AuthenticationPage/AuthenticationPage';
 import TVShowPage from './pages/TVShowPage/TVShowPage';
+import TVPlayer from './pages/TVShowPage/TVPlayer';
 
 interface state {
     password: boolean | null; // null if uninitialized - true if pwd needed false if not needed
@@ -172,6 +173,9 @@ class App extends React.Component<{}, state> {
                 <Route exact path='/player/:id'>
                     <Player />
                 </Route>
+                <Route exact path='/tvplayer/:id'>
+                    <TVPlayer />
+                </Route>
                 <Route exact path='/actors'>
                     <ActorOverviewPage />
                 </Route>

src/pages/Player/Player.tsx

@@ -15,14 +15,14 @@ import ActorTile from '../../elements/ActorTile/ActorTile';
 import {withRouter} from 'react-router-dom';
 import {APINode, callAPI} from '../../utils/Api';
 import {RouteComponentProps} from 'react-router';
-import {GeneralSuccess} from '../../types/GeneralTypes';
+import {DefaultPlyrOptions, GeneralSuccess} from '../../types/GeneralTypes';
 import {ActorType, TagType} from '../../types/VideoTypes';
 import PlyrJS from 'plyr';
 import {Button} from '../../elements/GPElements/Button';
 import {VideoTypes} from '../../types/ApiTypes';
 import GlobalInfos from '../../utils/GlobalInfos';
 
-interface myprops extends RouteComponentProps<{id: string}> {}
+interface Props extends RouteComponentProps<{id: string}> {}
 
 interface mystate {
     sources?: PlyrJS.SourceInfo;
@@ -42,25 +42,8 @@ interface mystate {
  * Player page loads when a video is selected to play and handles the video view
  * and actions such as tag adding and liking
  */
-export class Player extends React.Component<myprops, mystate> {
-    options: PlyrJS.Options = {
-        controls: [
-            'play-large', // The large play button in the center
-            'play', // Play/pause playback
-            'progress', // The progress bar and scrubber for playback and buffering
-            'current-time', // The current time of playback
-            'duration', // The full duration of the media
-            'mute', // Toggle mute
-            'volume', // Volume control
-            'captions', // Toggle captions
-            'settings', // Settings menu
-            'airplay', // Airplay (currently Safari only)
-            'download', // Show a download button with a link to either the current source or a custom URL you specify in your options
-            'fullscreen' // Toggle fullscreen
-        ]
-    };
-
-    constructor(props: myprops) {
+export class Player extends React.Component<Props, mystate> {
+    constructor(props: Props) {
         super(props);
 
         this.state = {
@@ -94,7 +77,7 @@ export class Player extends React.Component<myprops, mystate> {
                 <div className={style.videowrapper}>
                     {/* video component is added here */}
                     {this.state.sources ? (
-                        <Plyr style={plyrstyle} source={this.state.sources} options={this.options} />
+                        <Plyr style={plyrstyle} source={this.state.sources} options={DefaultPlyrOptions} />
                     ) : (
                         <div>not loaded yet</div>
                     )}

src/pages/TVShowPage/TVPlayer.tsx

@@ -0,0 +1,97 @@
+import * as React from 'react';
+import {RouteComponentProps} from 'react-router';
+import {withRouter} from 'react-router-dom';
+import PageTitle from '../../elements/PageTitle/PageTitle';
+import style from '../Player/Player.module.css';
+import {Plyr} from 'plyr-react';
+import plyrstyle from 'plyr-react/dist/plyr.css';
+import {DefaultPlyrOptions} from '../../types/GeneralTypes';
+import {APINode, callAPI} from '../../utils/Api';
+import GlobalInfos from '../../utils/GlobalInfos';
+import PlyrJS from 'plyr';
+
+interface Props extends RouteComponentProps<{id: string}> {}
+
+interface State {
+    loaded: boolean;
+}
+
+interface EpisodeData {
+    Name: string;
+    Season: number;
+    Episode: number;
+    TVShowID: number;
+    Path: string;
+}
+
+class TVPlayer extends React.Component<Props, State> {
+    state = {
+        loaded: false
+    };
+
+    data: EpisodeData | null = null;
+
+    componentDidMount(): void {
+        this.loadVideo();
+    }
+
+    loadVideo(): void {
+        callAPI(
+            APINode.TVShow,
+            {
+                action: 'loadEpisode',
+                ID: parseInt(this.props.match.params.id, 10)
+            },
+            (data: EpisodeData) => {
+                console.log(data);
+                this.data = data;
+                this.setState({loaded: true});
+            }
+        );
+    }
+
+    assemblePlyrObject(): JSX.Element {
+        if (this.state.loaded && this.data !== null) {
+            const sources: PlyrJS.SourceInfo = {
+                type: 'video',
+                sources: [
+                    {
+                        src:
+                            (process.env.REACT_APP_CUST_BACK_DOMAIN ? process.env.REACT_APP_CUST_BACK_DOMAIN : '') +
+                            GlobalInfos.getTVShowPath() +
+                            this.data.Path,
+                        type: 'video/mp4',
+                        size: 1080
+                    }
+                ],
+                poster: ''
+            };
+
+            return <Plyr style={plyrstyle} source={sources} options={DefaultPlyrOptions} />;
+        } else {
+            return <div>not loaded yet</div>;
+        }
+    }
+
+    render(): JSX.Element {
+        return (
+            <div id='videocontainer'>
+                <PageTitle title='Watch' subtitle='todo' />
+
+                <div className={style.videowrapper}>
+                    {/* video component is added here */}
+                    {this.assemblePlyrObject()}
+                </div>
+                <button className={style.closebutton} onClick={(): void => this.closebtn()}>
+                    Close
+                </button>
+            </div>
+        );
+    }
+
+    private closebtn(): void {
+        this.props.history.goBack();
+    }
+}
+
+export default withRouter(TVPlayer);

src/types/GeneralTypes.ts

@@ -1,4 +1,5 @@
 import {TagType} from './VideoTypes';
+import PlyrJS from 'plyr';
 
 export interface GeneralSuccess {
     result: string;
@@ -14,3 +15,20 @@ export const DefaultTags: TagarrayType = {
     lowq: {TagId: 3, TagName: 'lowquality'},
     hd: {TagId: 4, TagName: 'hd'}
 };
+
+export const DefaultPlyrOptions: PlyrJS.Options = {
+    controls: [
+        'play-large', // The large play button in the center
+        'play', // Play/pause playback
+        'progress', // The progress bar and scrubber for playback and buffering
+        'current-time', // The current time of playback
+        'duration', // The full duration of the media
+        'mute', // Toggle mute
+        'volume', // Volume control
+        'captions', // Toggle captions
+        'settings', // Settings menu
+        'airplay', // Airplay (currently Safari only)
+        'download', // Show a download button with a link to either the current source or a custom URL you specify in your options
+        'fullscreen' // Toggle fullscreen
+    ]
+};