110 lines
3.6 KiB
TypeScript
110 lines
3.6 KiB
TypeScript
import React, { useEffect } from 'react';
|
|
import cn from 'classnames';
|
|
import stl from 'Components/Session_/Player/player.module.css';
|
|
import {
|
|
IOSPlayerContext,
|
|
PlayerContext,
|
|
} from 'Components/Session/playerContext';
|
|
import ClipPlayerControls from 'Components/Session/Player/ClipPlayer/ClipPlayerControls';
|
|
import Session from 'Types/session';
|
|
import styles from 'Components/Session_/playerBlock.module.css';
|
|
import ClipPlayerOverlay from 'Components/Session/Player/ClipPlayer/ClipPlayerOverlay';
|
|
import { observer } from 'mobx-react-lite';
|
|
import { Icon } from 'UI';
|
|
import ReplayWindow from 'Components/Session/Player/MobilePlayer/ReplayWindow'
|
|
import PerfWarnings from "Components/Session/Player/MobilePlayer/PerfWarnings";
|
|
import { useStore } from 'App/mstore'
|
|
|
|
interface Props {
|
|
session: Session;
|
|
range: [number, number];
|
|
autoplay: boolean;
|
|
isHighlight?: boolean;
|
|
message?: string;
|
|
isMobile?: boolean;
|
|
}
|
|
|
|
function ClipPlayerContent(props: Props) {
|
|
const { sessionStore } = useStore();
|
|
const playerContext = React.useContext<IOSPlayerContext>(PlayerContext);
|
|
const screenWrapper = React.useRef<HTMLDivElement>(null);
|
|
const { time } = playerContext.store.get();
|
|
const { range } = props;
|
|
const userDevice = sessionStore.current.userDevice;
|
|
const videoURL = sessionStore.current.videoURL;
|
|
const screenWidth = sessionStore.current.screenWidth!;
|
|
const screenHeight = sessionStore.current.screenHeight!;
|
|
const platform = sessionStore.current.platform;
|
|
const isAndroid = platform === 'android';
|
|
|
|
React.useEffect(() => {
|
|
if (!playerContext.player) return;
|
|
|
|
const parentElement = screenWrapper.current
|
|
|
|
if (parentElement && playerContext.player) {
|
|
playerContext.player.attach(parentElement);
|
|
playerContext.player?.play();
|
|
}
|
|
}, [playerContext.player]);
|
|
|
|
React.useEffect(() => {
|
|
playerContext.player.scale();
|
|
}, [playerContext.player]);
|
|
|
|
useEffect(() => {
|
|
if (time < range[0]) {
|
|
playerContext.player?.jump(range[0]);
|
|
}
|
|
if (time > range[1]) {
|
|
playerContext.store.update({ completed: true });
|
|
playerContext.player?.pause();
|
|
}
|
|
}, [time]);
|
|
|
|
if (!playerContext.player) return null;
|
|
|
|
return (
|
|
<div
|
|
className={cn(styles.playerBlock, 'flex flex-col', 'overflow-x-hidden')}
|
|
>
|
|
<div className={cn(stl.playerBody, 'flex-1 flex flex-col relative')}>
|
|
<div className={cn(stl.playerBody, 'flex flex-1 flex-col relative')}>
|
|
<div className="relative flex-1 overflow-hidden group">
|
|
<ClipPlayerOverlay autoplay={props.autoplay} />
|
|
<div
|
|
className={cn(stl.screenWrapper, stl.checkers)}
|
|
ref={screenWrapper}
|
|
data-openreplay-obscured
|
|
style={{ height: '500px' }}
|
|
>
|
|
<ReplayWindow
|
|
videoURL={videoURL}
|
|
userDevice={userDevice}
|
|
isAndroid={isAndroid}
|
|
screenWidth={screenWidth}
|
|
screenHeight={screenHeight}
|
|
isClips={true}
|
|
/>
|
|
<PerfWarnings userDevice={userDevice} />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{props.isHighlight && props.message ? (
|
|
<div className={'shadow-inner p-3 flex gap-2 w-full items-center'} style={{ background: 'rgba(252, 193, 0, 0.2)' }}>
|
|
<Icon name="chat-square-quote" color="inherit" size={18} />
|
|
<div className={'leading-none font-medium'}>
|
|
{props.message}
|
|
</div>
|
|
</div>
|
|
) : null}
|
|
<ClipPlayerControls
|
|
session={props.session}
|
|
range={props.range}
|
|
/>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default observer(ClipPlayerContent);
|