OpenMediaCenter/src/Player.js

import React from "react";
import "./css/Player.css"
import {PlyrComponent} from 'plyr-react';
import SideBar from "./SideBar";


class Player extends React.Component {
    constructor(props, context) {
        super(props, context);

        this.state = {};

        this.props = props;
    }

    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
        ]
    };

    componentDidMount() {
        this.fetchMovieData();
    }

    render() {
        return (
            <div id='videocontainer'>
                <div className='pageheader'>
                    <span className='pageheadertitle'>Watch</span>
                    <span className='pageheadersubtitle'>{this.state.movie_name}</span>
                    <hr/>
                </div>
                <SideBar>
                    <div className='sidebartitle'>Infos:</div>
                    <hr/>
                    <div className='sidebarinfo'><b>{this.state.likes}</b> Likes!</div>
                    <div className='sidebarinfo'><b> {this.state.quality}p</b> Quality!</div>
                    <div className='sidebarinfo'><b>{this.state.length}</b> Minutes of length!</div>
                    <hr/>
                    <div className='sidebartitle'>Tags:</div>
                    <button className='tagbtn' onClick={() => this.fetchVideoData("all")}>All</button>
                    <button className='tagbtn' onClick={() => this.fetchVideoData("fullhd")}>FullHd</button>
                    <button className='tagbtn' onClick={() => this.fetchVideoData("lowquality")}>LowQuality</button>
                    <button className='tagbtn' onClick={() => this.fetchVideoData("hd")}>HD</button>
                </SideBar>

                <div className="videowrapper">
                    {/* video component is added here */}
                    {this.state.sources ? <PlyrComponent
                            className='myvideo'
                            sources={this.state.sources}
                            options={this.options}/> :
                        <div>not loaded yet</div>}
                    <div className='videoactions'>
                        <button className='btn btn-primary' onClick={() => this.likebtn()}>Like this Video!</button>
                        <button className='btn btn-info' id="tagbutton">Give this Video a Tag</button>
                    </div>
                </div>
                <button className="closebutton" onClick={() => this.closebtn()}>Close</button>
            </div>
        );
    }

    fetchMovieData() {
        const updateRequest = new FormData();
        updateRequest.append('action', 'loadVideo');
        updateRequest.append('movieid', this.props.movie_id);

        fetch('/api/videoload.php', {method: 'POST', body: updateRequest})
            .then((response) => response.json())
            .then((result) => {
                this.setState({
                    sources: {
                        type: 'video',
                        sources: [
                            {
                                src: result.movie_url,
                                type: 'video/mp4',
                                size: 1080,
                            }
                        ],
                        poster: result.thumbnail
                    },
                    movie_name: result.movie_name,
                    likes: result.likes,
                    quality: result.quality,
                    length: result.length
                });
            });
    }


    /* Click Listener */
    likebtn() {
        const updateRequest = new FormData();
        updateRequest.append('action', 'addLike');
        updateRequest.append('movieid', this.props.movie_id);

        fetch('/api/videoload.php', {method: 'POST', body: updateRequest})
            .then((response) => response.json())
            .then((result) => {
                if (result.result === "success") {
                    this.fetchMovieData();
                } else {
                    console.log("an error occured while liking");
                    console.log(result);
                }
            });
    }

    closebtn() {
        this.props.viewbinding.hideVideo();
    }
}

export default Player;