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

fix(ui) - player width on fullscreen

Browse source
This commit is contained in:
Shekar Siri 2022-08-26 12:47:04 +02:00
parent f7342825a4
commit 468c896ce0
3 changed files with 28 additions and 33 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

57
frontend/app/components/Session/Layout/Layout.js
View file

@ -1,41 +1,36 @@
import React from 'react';
import { observer } from 'mobx-react-lite';
import { useCallback } from 'react';
import { EscapeButton, Loader } from 'UI';
import { EscapeButton } from 'UI';
import Header from './Header';
import ToolPanel from'./ToolPanel';
import Events from './Events';
import ToolPanel from './ToolPanel';
import PlayOverlay from './PlayOverlay';
import Controls from './Player/Controls';
function Layout({ children, player, toolbar }) {
return (
<div className="flex flex-col h-screen">
{ !player.fullscreen.enabled && <Header player={player} /> }
<div className="flex-1 flex">
<div className="flex flex-col" style={{ width: player.fullscreen.enabled ? "100vw" : "calc(100vw - 270px)" }}>
<div
className="flex-1 flex flex-col relative bg-white border-gray-light"
>
{ player.fullscreen.enabled &&
<EscapeButton onClose={ player.toggleFullscreen } />
}
<div className="flex-1 relative overflow-hidden" >
{/* <Loader loading={ player.loading }> */}
{ children }
{/* </Loader> */}
<PlayOverlay player={player} />
</div>
<Controls player={ player } toolbar={ toolbar } />
</div>
{ !player.fullscreen.enabled && <ToolPanel player={ player } toolbar={ toolbar }/> }
</div>
</div>
</div>
);
return (
<div className="flex flex-col h-screen">
{!player.fullscreen.enabled && <Header player={player} />}
<div className="flex-1 flex">
<div
className="flex flex-col"
// style={{ width: player.fullscreen.enabled ? '100vw' : 'calc(100vw - 270px)' }}
>
<div className="flex-1 flex flex-col relative bg-white border-gray-light">
{player.fullscreen.enabled && <EscapeButton onClose={player.toggleFullscreen} />}
<div className="flex-1 relative overflow-hidden">
{/* <Loader loading={ player.loading }> */}
{children}
{/* </Loader> */}
<PlayOverlay player={player} />
</div>
<Controls player={player} toolbar={toolbar} />
</div>
{!player.fullscreen.enabled && <ToolPanel player={player} toolbar={toolbar} />}
</div>
</div>
</div>
);
}
export default observer(Layout);
export default observer(Layout);

2
frontend/app/components/Session/WebPlayer.js
View file

@ -44,7 +44,7 @@ function PlayerContent({ session, live, fullscreen, activeTab, setActiveTab, has
</div>
) : (
<div className={cn('flex', { 'pointer-events-none': hasError })}>
<div className="w-full" style={activeTab ? { maxWidth: 'calc(100% - 270px)'} : undefined}>
<div className="w-full" style={activeTab && !fullscreen ? { maxWidth: 'calc(100% - 270px)'} : undefined}>
<div className={cn(styles.session, 'relative')} data-fullscreen={fullscreen}>
<PlayerBlock activeTab={activeTab} />
</div>

2
frontend/app/components/Session_/Player/Controls/controls.module.css
View file

@ -54,7 +54,7 @@
display: flex;
align-items: center;
cursor: pointer;
font-size: 12px;
font-size: 13px;
color: $gray-darkest;
background-color: $gray-lightest;
padding: 0 10px;