81 lines
2.3 KiB
TypeScript
81 lines
2.3 KiB
TypeScript
import React from 'react';
|
|
import { connect } from 'react-redux';
|
|
import { findDOMNode } from 'react-dom';
|
|
import cn from 'classnames';
|
|
import LiveControls from './LiveControls';
|
|
import ConsolePanel from 'Shared/DevTools/ConsolePanel';
|
|
|
|
import Overlay from './Overlay';
|
|
import stl from 'Components/Session_/Player/player.module.css';
|
|
import { PlayerContext, ILivePlayerContext } from 'App/components/Session/playerContext';
|
|
import { CONSOLE } from "Duck/components/player";
|
|
|
|
interface IProps {
|
|
closedLive: boolean;
|
|
fullView: boolean;
|
|
isMultiview?: boolean;
|
|
bottomBlock: number;
|
|
}
|
|
|
|
function Player(props: IProps) {
|
|
const {
|
|
closedLive,
|
|
fullView,
|
|
isMultiview,
|
|
bottomBlock,
|
|
} = props;
|
|
// @ts-ignore TODO
|
|
const playerContext = React.useContext<ILivePlayerContext>(PlayerContext);
|
|
const screenWrapper = React.useRef<HTMLDivElement>(null);
|
|
|
|
React.useEffect(() => {
|
|
if (!props.closedLive || isMultiview) {
|
|
const parentElement = findDOMNode(screenWrapper.current) as HTMLDivElement | null; //TODO: good architecture
|
|
if (parentElement) {
|
|
playerContext.player.attach(parentElement);
|
|
playerContext.player.play();
|
|
}
|
|
}
|
|
}, []);
|
|
|
|
React.useEffect(() => {
|
|
playerContext.player.scale();
|
|
}, [playerContext.player]);
|
|
|
|
if (!playerContext.player) return null;
|
|
|
|
const maxWidth = '100vw';
|
|
return (
|
|
<div
|
|
className={cn(stl.playerBody, 'flex flex-1 flex-col relative')}
|
|
>
|
|
<div className="relative flex-1 overflow-hidden">
|
|
<Overlay closedLive={closedLive} />
|
|
<div className={cn(stl.screenWrapper)} ref={screenWrapper} />
|
|
</div>
|
|
{bottomBlock === CONSOLE ? (
|
|
<div style={{ maxWidth, width: '100%' }}>
|
|
<ConsolePanel />
|
|
</div>
|
|
) : null}
|
|
{!fullView && !isMultiview ? (
|
|
<LiveControls
|
|
jump={playerContext.player.jump}
|
|
/>
|
|
) : null}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default connect(
|
|
(state: any) => {
|
|
const isAssist = window.location.pathname.includes('/assist/');
|
|
return {
|
|
sessionId: state.getIn(['sessions', 'current']).sessionId,
|
|
bottomBlock: state.getIn(['components', 'player', 'bottomBlock']),
|
|
closedLive:
|
|
!!state.getIn(['sessions', 'errors']) ||
|
|
(isAssist && !state.getIn(['sessions', 'current']).live),
|
|
};
|
|
}
|
|
)(Player);
|