102 lines
1.8 KiB
JavaScript
102 lines
1.8 KiB
JavaScript
import React from 'react';
|
|
|
|
import { Plugins } from '@clappr/plugins';
|
|
import Clappr from '@clappr/core';
|
|
import Grid from '@mui/material/Grid';
|
|
import HLS from '@clappr/hlsjs-playback';
|
|
//import ClapprStats from '@clappr/stats-plugin';
|
|
|
|
/*
|
|
import Clappr from 'clappr';
|
|
import ClapprStats from 'clappr-stats';
|
|
*/
|
|
|
|
//import ClapprNerdStats from 'clappr-nerd-stats';
|
|
|
|
Clappr.Loader.registerPlayback(HLS);
|
|
|
|
for (let plugin of Object.values(Plugins)) {
|
|
Clappr.Loader.registerPlugin(plugin);
|
|
}
|
|
|
|
class Player extends React.Component {
|
|
constructor(props) {
|
|
super(props);
|
|
|
|
this.player = new Clappr.Player({});
|
|
|
|
this.playerRef = React.createRef();
|
|
}
|
|
|
|
componentDidMount() {
|
|
this.player.attachTo(this.playerRef.current);
|
|
this.setConfig(this.props.config);
|
|
this.setSource(this.props.source);
|
|
}
|
|
|
|
componentWillUnmount() {
|
|
this.player.destroy();
|
|
}
|
|
|
|
shouldComponentUpdate(nextProps, _) {
|
|
if (nextProps.source !== this.props.source) {
|
|
this.setSource(nextProps.source);
|
|
}
|
|
|
|
return false;
|
|
}
|
|
|
|
setSource(source) {
|
|
this.player.load(source);
|
|
}
|
|
|
|
setConfig(config) {
|
|
delete config.source;
|
|
delete config.sources;
|
|
delete config.parent;
|
|
delete config.parentid;
|
|
|
|
config = {
|
|
plugins: [],
|
|
...config,
|
|
};
|
|
|
|
const plugins = config.plugins;
|
|
config.plugins = [];
|
|
|
|
for (let p of plugins) {
|
|
switch (p) {
|
|
/*
|
|
case 'ClapprStats':
|
|
config.plugins.push(ClapprStats);
|
|
break;
|
|
*/
|
|
/*
|
|
case 'ClapprNerdStats':
|
|
config.plugins.push(ClapprNerdStats);
|
|
break;
|
|
*/
|
|
default:
|
|
break;
|
|
}
|
|
}
|
|
this.player.configure(config);
|
|
}
|
|
|
|
render() {
|
|
return (
|
|
<Grid
|
|
container
|
|
direction="column"
|
|
justifyContent="center"
|
|
alignItems="center"
|
|
spacing={1}
|
|
style={{ position: 'absolute', top: 0, left: 0, bottom: 0, right: 0 }}
|
|
ref={this.playerRef}
|
|
></Grid>
|
|
);
|
|
}
|
|
}
|
|
|
|
export default Player;
|