334 lines
12 KiB
TypeScript
334 lines
12 KiB
TypeScript
import React from 'react';
|
|
|
|
import style from './Player.module.css';
|
|
import plyrstyle from 'plyr-react/dist/plyr.css';
|
|
|
|
import {Plyr} from 'plyr-react';
|
|
import SideBar, {SideBarItem, SideBarTitle} from '../../elements/SideBar/SideBar';
|
|
import Tag from '../../elements/Tag/Tag';
|
|
import AddTagPopup from '../../elements/Popups/AddTagPopup/AddTagPopup';
|
|
import PageTitle, {Line} from '../../elements/PageTitle/PageTitle';
|
|
import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
|
|
import {faPlusCircle} from '@fortawesome/free-solid-svg-icons';
|
|
import AddActorPopup from '../../elements/Popups/AddActorPopup/AddActorPopup';
|
|
import ActorTile from '../../elements/ActorTile/ActorTile';
|
|
import {withRouter} from 'react-router-dom';
|
|
import {APINode, callAPI, getBackendDomain} from '../../utils/Api';
|
|
import {RouteComponentProps} from 'react-router';
|
|
import {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 mystate {
|
|
sources?: PlyrJS.SourceInfo,
|
|
movie_id: number,
|
|
movie_name: string,
|
|
likes: number,
|
|
quality: number,
|
|
length: number,
|
|
tags: TagType[],
|
|
suggesttag: TagType[],
|
|
popupvisible: boolean,
|
|
actorpopupvisible: boolean,
|
|
actors: ActorType[]
|
|
}
|
|
|
|
/**
|
|
* 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) {
|
|
super(props);
|
|
|
|
this.state = {
|
|
movie_id: -1,
|
|
movie_name: '',
|
|
likes: 0,
|
|
quality: 0,
|
|
length: 0,
|
|
tags: [],
|
|
suggesttag: [],
|
|
popupvisible: false,
|
|
actorpopupvisible: false,
|
|
actors: []
|
|
};
|
|
|
|
this.quickAddTag = this.quickAddTag.bind(this);
|
|
}
|
|
|
|
componentDidMount(): void {
|
|
// initial fetch of current movie data
|
|
this.fetchMovieData();
|
|
}
|
|
|
|
render(): JSX.Element {
|
|
return (
|
|
<div id='videocontainer'>
|
|
<PageTitle
|
|
title='Watch'
|
|
subtitle={this.state.movie_name}/>
|
|
|
|
{this.assembleSideBar()}
|
|
|
|
<div className={style.videowrapper}>
|
|
{/* video component is added here */}
|
|
{this.state.sources ? <Plyr
|
|
style={plyrstyle}
|
|
source={this.state.sources}
|
|
options={this.options}/> :
|
|
<div>not loaded yet</div>}
|
|
<div className={style.videoactions}>
|
|
<Button onClick={(): void => this.likebtn()} title='Like this Video!' color={{backgroundColor: 'green'}}/>
|
|
<Button onClick={(): void => this.setState({popupvisible: true})} title='Give this Video a Tag' color={{backgroundColor: '#3574fe'}}/>
|
|
<Button title='Delete Video' onClick={(): void => {this.deleteVideo();}} color={{backgroundColor: 'red'}}/>
|
|
</div>
|
|
{this.assembleActorTiles()}
|
|
</div>
|
|
<button className={style.closebutton} onClick={(): void => this.closebtn()}>Close</button>
|
|
{
|
|
// handle the popovers switched on and off according to state changes
|
|
this.handlePopOvers()
|
|
}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
/**
|
|
* generate sidebar with all items
|
|
*/
|
|
assembleSideBar(): JSX.Element {
|
|
return (
|
|
<SideBar>
|
|
<SideBarTitle>Infos:</SideBarTitle>
|
|
<Line/>
|
|
<SideBarItem><b>{this.state.likes}</b> Likes!</SideBarItem>
|
|
{this.state.quality !== 0 ?
|
|
<SideBarItem><b>{this.state.quality}p</b> Quality!</SideBarItem> : null}
|
|
{this.state.length !== 0 ?
|
|
<SideBarItem><b>{Math.round(this.state.length / 60)}</b> Minutes of length!</SideBarItem> : null}
|
|
<Line/>
|
|
<SideBarTitle>Tags:</SideBarTitle>
|
|
{this.state.tags.map((m: TagType) => (
|
|
<Tag key={m.TagId} tagInfo={m}/>
|
|
))}
|
|
<Line/>
|
|
<SideBarTitle>Tag Quickadd:</SideBarTitle>
|
|
{this.state.suggesttag.map((m: TagType) => (
|
|
<Tag
|
|
tagInfo={m}
|
|
key={m.TagName}
|
|
onclick={(): void => {
|
|
this.quickAddTag(m.TagId, m.TagName);
|
|
}}/>
|
|
))}
|
|
</SideBar>
|
|
);
|
|
}
|
|
|
|
/**
|
|
* rendering of actor tiles
|
|
*/
|
|
private assembleActorTiles(): JSX.Element {
|
|
return (
|
|
<div className={style.actorcontainer}>
|
|
{this.state.actors ?
|
|
this.state.actors.map((actr: ActorType) => (
|
|
<ActorTile key={actr.ActorId} actor={actr}/>
|
|
)) : <></>
|
|
}
|
|
<div className={style.actorAddTile} onClick={(): void => {
|
|
this.addActor();
|
|
}}>
|
|
<div className={style.actorAddTile_thumbnail}>
|
|
<FontAwesomeIcon style={{
|
|
lineHeight: '130px'
|
|
}} icon={faPlusCircle} size='5x'/>
|
|
</div>
|
|
<div className={style.actorAddTile_name}>Add Actor</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
|
|
/**
|
|
* handle the popovers generated according to state changes
|
|
* @returns {JSX.Element}
|
|
*/
|
|
handlePopOvers(): JSX.Element {
|
|
return (
|
|
<>
|
|
{
|
|
this.state.popupvisible ?
|
|
<AddTagPopup onHide={(): void => this.setState({popupvisible: false})}
|
|
submit={this.quickAddTag}/> : null
|
|
}
|
|
{
|
|
this.state.actorpopupvisible ?
|
|
<AddActorPopup onHide={(): void => {
|
|
this.refetchActors();
|
|
this.setState({actorpopupvisible: false});
|
|
}} movie_id={this.state.movie_id}/> : null
|
|
}
|
|
</>
|
|
);
|
|
}
|
|
|
|
/**
|
|
* quick add callback to add tag to db and change gui correctly
|
|
* @param tagId id of tag to add
|
|
* @param tagName name of tag to add
|
|
*/
|
|
quickAddTag(tagId: number, tagName: string): void {
|
|
callAPI(APINode.Tags, {
|
|
action: 'addTag',
|
|
TagId: tagId,
|
|
MovieId: parseInt(this.props.match.params.id)
|
|
}, (result: GeneralSuccess) => {
|
|
if (result.result !== 'success') {
|
|
console.error('error occured while writing to db -- todo error handling');
|
|
console.error(result.result);
|
|
} else {
|
|
// check if tag has already been added
|
|
const tagIndex = this.state.tags.map(function (e: TagType) {
|
|
return e.TagName;
|
|
}).indexOf(tagName);
|
|
|
|
// only add tag if it isn't already there
|
|
if (tagIndex === -1) {
|
|
// update tags if successful
|
|
let array = [...this.state.suggesttag]; // make a separate copy of the array (because of setState)
|
|
const quickaddindex = this.state.suggesttag.map(function (e: TagType) {
|
|
return e.TagId;
|
|
}).indexOf(tagId);
|
|
|
|
// check if tag is available in quickadds
|
|
if (quickaddindex !== -1) {
|
|
array.splice(quickaddindex, 1);
|
|
|
|
this.setState({
|
|
tags: [...this.state.tags, {TagName: tagName, TagId: tagId}],
|
|
suggesttag: array
|
|
});
|
|
} else {
|
|
this.setState({
|
|
tags: [...this.state.tags, {TagName: tagName, TagId: tagId}]
|
|
});
|
|
}
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
/**
|
|
* fetch all the required infos of a video from backend
|
|
*/
|
|
fetchMovieData(): void {
|
|
callAPI(APINode.Video, {action: 'loadVideo', MovieId: parseInt(this.props.match.params.id)}, (result: VideoTypes.loadVideoType) => {
|
|
console.log(result)
|
|
this.setState({
|
|
sources: {
|
|
type: 'video',
|
|
sources: [
|
|
{
|
|
src: getBackendDomain() + GlobalInfos.getVideoPath() + result.MovieUrl,
|
|
type: 'video/mp4',
|
|
size: 1080
|
|
}
|
|
],
|
|
poster: result.Poster
|
|
},
|
|
movie_id: result.MovieId,
|
|
movie_name: result.MovieName,
|
|
likes: result.Likes,
|
|
quality: result.Quality,
|
|
length: result.Length,
|
|
tags: result.Tags,
|
|
suggesttag: result.SuggestedTag,
|
|
actors: result.Actors
|
|
});
|
|
});
|
|
}
|
|
|
|
|
|
/**
|
|
* click handler for the like btn
|
|
*/
|
|
likebtn(): void {
|
|
callAPI(APINode.Video, {action: 'addLike', MovieId: parseInt(this.props.match.params.id)}, (result: GeneralSuccess) => {
|
|
if (result.result === 'success') {
|
|
// likes +1 --> avoid reload of all data
|
|
this.setState({likes: this.state.likes + 1});
|
|
} else {
|
|
console.error('an error occured while liking');
|
|
console.error(result);
|
|
}
|
|
});
|
|
}
|
|
|
|
/**
|
|
* closebtn click handler
|
|
* calls callback to viewbinding to show previous page agains
|
|
*/
|
|
closebtn(): void {
|
|
this.props.history.goBack();
|
|
}
|
|
|
|
/**
|
|
* delete the current video and return to last page
|
|
*/
|
|
deleteVideo(): void {
|
|
callAPI(APINode.Video, {action: 'deleteVideo', MovieId: parseInt(this.props.match.params.id)}, (result: GeneralSuccess) => {
|
|
if (result.result === 'success') {
|
|
// return to last element if successful
|
|
this.props.history.goBack();
|
|
} else {
|
|
console.error('an error occured while liking');
|
|
console.error(result);
|
|
}
|
|
});
|
|
}
|
|
|
|
/**
|
|
* show the actor add popup
|
|
*/
|
|
addActor(): void {
|
|
this.setState({actorpopupvisible: true});
|
|
}
|
|
|
|
/**
|
|
* fetch the available video actors again
|
|
*/
|
|
refetchActors(): void {
|
|
callAPI<ActorType[]>(APINode.Actor, {action: 'getActorsOfVideo', MovieId: parseInt(this.props.match.params.id)}, result => {
|
|
this.setState({actors: result});
|
|
});
|
|
}
|
|
}
|
|
|
|
export default withRouter(Player);
|
|
|