87 lines
2.4 KiB
TypeScript
87 lines
2.4 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);
|
|
setTimeout(() => {
|
|
contextValue.player.scale();
|
|
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));
|