75 lines
2.3 KiB
TypeScript
75 lines
2.3 KiB
TypeScript
import React, { useEffect, useState } from 'react';
|
|
import { createClickMapPlayer } from 'Player';
|
|
import { makeAutoObservable } from 'mobx';
|
|
import withLocationHandlers from 'HOCs/withLocationHandlers';
|
|
import { observer } from 'mobx-react-lite';
|
|
import { toast } from 'react-toastify';
|
|
import { useStore } from 'App/mstore';
|
|
import { IPlayerContext, PlayerContext, defaultContextValue } from '../../playerContext';
|
|
import PlayerContent from './ThinPlayerContent';
|
|
|
|
function WebPlayer(props: any) {
|
|
const { sessionStore } = useStore();
|
|
const { insights } = sessionStore;
|
|
const {
|
|
session,
|
|
jumpTimestamp,
|
|
} = props;
|
|
// @ts-ignore
|
|
const [contextValue, setContextValue] = useState<IPlayerContext>(defaultContextValue);
|
|
const playerRef = React.useRef<any>(null);
|
|
const insightsSize = React.useRef(0);
|
|
|
|
useEffect(() => {
|
|
const init = () => {
|
|
const [WebPlayerInst, PlayerStore] = createClickMapPlayer(
|
|
session,
|
|
(state) => makeAutoObservable(state),
|
|
toast,
|
|
);
|
|
playerRef.current = WebPlayerInst;
|
|
setContextValue({ player: WebPlayerInst, store: PlayerStore });
|
|
};
|
|
|
|
if (!playerRef.current) {
|
|
init();
|
|
} else {
|
|
playerRef.current.clean();
|
|
playerRef.current = null;
|
|
setContextValue(defaultContextValue);
|
|
init();
|
|
}
|
|
}, [session.sessionId]);
|
|
|
|
React.useEffect(() => () => {
|
|
playerRef.current && playerRef.current.clean();
|
|
playerRef.current = null;
|
|
// @ts-ignore
|
|
setContextValue(defaultContextValue);
|
|
}, []);
|
|
|
|
const isPlayerReady = contextValue.store?.get().ready;
|
|
|
|
React.useEffect(() => {
|
|
contextValue.player && contextValue.player.play();
|
|
if (isPlayerReady && insights.length > 0 && jumpTimestamp && insightsSize.current !== insights.length) {
|
|
insightsSize.current = insights.length;
|
|
setTimeout(() => {
|
|
contextValue.player.pause();
|
|
contextValue.player.jump(jumpTimestamp);
|
|
contextValue.player.scale();
|
|
setTimeout(() => { contextValue.player.showClickmap(insights); }, 250);
|
|
}, 250);
|
|
}
|
|
}, [insights, isPlayerReady, jumpTimestamp]);
|
|
|
|
if (!contextValue.player || !session) return null;
|
|
|
|
return (
|
|
<PlayerContext.Provider value={contextValue}>
|
|
<PlayerContent />
|
|
</PlayerContext.Provider>
|
|
);
|
|
}
|
|
|
|
export default withLocationHandlers()(observer(WebPlayer));
|