jan/openreplay
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix(ui): fix wrong player instance used (map renderer), fix clickmap height

Browse source
This commit is contained in:
nick-delirium 2023-01-24 15:57:53 +01:00
parent d084c4a9a6
commit f0f1bd085d
4 changed files with 9 additions and 26 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
frontend/app/components/Session/Player/ClickMapRenderer/Renderer.tsx
View file

@ -31,7 +31,7 @@ function Player() {
>
<div className={cn("relative flex-1", 'overflow-visible')}>
<Overlay isClickmap />
<div className={cn(stl.screenWrapper, '!overflow-y-scroll')} style={{ height: wrapperHeight, maxHeight: 900 }} ref={screenWrapper} />
<div className={cn(stl.screenWrapper, '!overflow-y-scroll')} style={{ height: wrapperHeight, maxHeight: 800 }} ref={screenWrapper} />
</div>
</div>
);

9
frontend/app/components/Session/Player/ReplayPlayer/PlayerInst.tsx
View file

@ -55,7 +55,6 @@ function Player(props: IProps) {
bottomBlock,
activeTab,
fullView,
isClickmap,
} = props;
const playerContext = React.useContext(PlayerContext);
const isReady = playerContext.store.get().ready
@ -88,9 +87,9 @@ function Player(props: IProps) {
data-bottom-block={bottomBlockIsActive}
>
{fullscreen && <EscapeButton onClose={fullscreenOff} />}
<div className={cn("relative flex-1", isClickmap ? 'overflow-visible' : 'overflow-hidden')}>
<Overlay nextId={nextId} isClickmap={isClickmap} />
<div className={cn(stl.screenWrapper, isClickmap && '!overflow-y-scroll')} ref={screenWrapper} />
<div className={cn("relative flex-1",'overflow-hidden')}>
<Overlay nextId={nextId} />
<div className={cn(stl.screenWrapper)} ref={screenWrapper} />
</div>
{!fullscreen && !!bottomBlock && (
<div style={{ maxWidth, width: '100%' }}>
@ -106,7 +105,7 @@ function Player(props: IProps) {
{bottomBlock === INSPECTOR && <Inspector />}
</div>
)}
{!fullView && !isClickmap ? (
{!fullView ? (
<Controls
speedDown={playerContext.player.speedDown}
speedUp={playerContext.player.speedUp}

12
frontend/app/components/Session/WebPlayer.tsx
View file

@ -72,6 +72,7 @@ function WebPlayer(props: any) {
WebPlayerInst.jump(parseInt(jumpToTime));
}
if (freeze) {
console.log(freeze)
WebPlayerInst.freeze()
}
@ -82,17 +83,6 @@ function WebPlayer(props: any) {
React.useEffect(() => {
contextValue.player && contextValue.player.play()
if (isClickmap && isPlayerReady && insights.size > 0) {
setTimeout(() => {
contextValue.player.jump(jumpTimestamp)
contextValue.player.pause()
contextValue.player.scaleFullPage()
setTimeout(() => { contextValue.player.showClickmap(insights) }, 250)
}, 1500)
}
return () => {
isPlayerReady && contextValue.player.showClickmap(null)
}
}, [insights, isPlayerReady, jumpTimestamp])
// LAYOUT (TODO: local layout state - useContext or something..)

12
frontend/app/components/Session_/Player/Controls/Controls.tsx
View file

@ -138,14 +138,6 @@ function Controls(props: any) {
player.jumpInterval(-SKIP_INTERVALS[skipInterval]);
};
const renderPlayBtn = () => {
const state = completed ? PlayingState.Completed : playing ? PlayingState.Playing : PlayingState.Paused
return (
<PlayButton state={state} togglePlay={player.togglePlay} iconSize={36} />
);
};
const toggleBottomTools = (blockName: number) => {
if (blockName === INSPECTOR) {
// player.toggleInspectorMode(false);
@ -156,6 +148,8 @@ function Controls(props: any) {
}
};
const state = completed ? PlayingState.Completed : playing ? PlayingState.Playing : PlayingState.Paused
return (
<div className={styles.controls}>
<Timeline />
@ -170,7 +164,7 @@ function Controls(props: any) {
forthTenSeconds={forthTenSeconds}
toggleSpeed={() => player.toggleSpeed()}
toggleSkip={() => player.toggleSkip()}
playButton={renderPlayBtn()}
playButton={<PlayButton state={state} togglePlay={player.togglePlay} iconSize={36} />}
skipIntervals={SKIP_INTERVALS}
setSkipInterval={changeSkipInterval}
currentInterval={skipInterval}