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

change(ui): split large file into chunks

Browse source
This commit is contained in:
sylenien 2022-12-05 15:38:55 +01:00 • committed by Delirium
parent 111d013bab
commit b8008182fc
3 changed files with 67 additions and 30 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
frontend/app/components/Session_/Multiview/EmptyTile.tsx Normal file
View file

@ -0,0 +1,16 @@
import React from 'react'
import { InactiveTab } from 'App/components/Session_/Player/Controls/AssistSessionsTabs';
function EmptyTile({ onClick }: { onClick: () => void }) {
return (
<div
className="border hover:bg-active-blue hover:border-borderColor-primary flex flex-col gap-2 items-center justify-center cursor-pointer"
onClick={onClick}
>
<InactiveTab classNames="!bg-gray-bg w-12" />
Add Session
</div>
);
}
export default EmptyTile;

45
frontend/app/components/Session_/Multiview/Multiview.tsx
View file

@ -1,6 +1,6 @@
import React from 'react';
import { useStore } from 'App/mstore';
import { BackLink, Icon } from 'UI';
import { BackLink } from 'UI';
import { observer } from 'mobx-react-lite';
import { connect } from 'react-redux';
import { fetchSessions, customSetSessions } from 'Duck/liveSearch';
@ -9,7 +9,8 @@ import { liveSession, assist, withSiteId, multiview } from 'App/routes';
import AssistSessionsModal from 'App/components/Session_/Player/Controls/AssistSessionsModal';
import { useModal } from 'App/components/Modal';
import LivePlayer from 'App/components/Session/LivePlayer';
import { InactiveTab } from 'App/components/Session_/Player/Controls/AssistSessionsTabs';
import EmptyTile from './EmptyTile'
import SessionTileFooter from './SessionTileFooter'
function Multiview({
total,
@ -57,7 +58,7 @@ function Multiview({
history.push(withSiteId(liveSession(sessionId), siteId));
};
const openList = () => {
const returnToList = () => {
history.push(withSiteId(assist(), siteId));
};
@ -82,7 +83,7 @@ function Multiview({
<div className="w-full p-4 flex justify-between items-center">
<div>
{/* @ts-ignore */}
<BackLink label="Back to sessions list" onClick={openList} />
<BackLink label="Back to sessions list" onClick={returnToList} />
</div>
<div>{`Watching ${assistMultiviewStore.sessions.length} of ${total} Live Sessions`}</div>
</div>
@ -90,7 +91,7 @@ function Multiview({
{assistMultiviewStore.sortedSessions.map((session: Record<string, any>) => (
<div
key={session.key}
className="border hover:border-active-blue-border relative group cursor-pointer"
className="border hover:bg-active-blue hover:border-borderColor-primary relative group cursor-pointer"
>
<div onClick={(e) => openLiveSession(e, session.sessionId)} className="w-full h-full">
{session.agentToken ? (
@ -103,34 +104,18 @@ function Multiview({
<div>Loading session</div>
)}
</div>
<div className="absolute z-10 bottom-0 w-full left-0 p-2 opacity-70 bg-gray-darkest text-white flex justify-between">
<div>{session.userDisplayName}</div>
<div className="hidden group-hover:flex items-center gap-2">
<div
className="cursor-pointer hover:font-semibold"
onClick={(e) => replaceSession(e, session.sessionId)}
>
Replace Session
</div>
<div
className="cursor-pointer hover:font-semibold"
onClick={(e) => deleteSession(e, session.sessionId)}
>
<Icon name="trash" size={18} color="white" />
</div>
</div>
</div>
<SessionTileFooter
userDisplayName={session.userDisplayName}
sessionId={session.sessionId}
replaceSession={replaceSession}
deleteSession={deleteSession}
/>
</div>
))}
{placeholder.map((_, i) => (
<div
key={i}
className="border hover:border-active-blue-border flex flex-col gap-2 items-center justify-center cursor-pointer"
onClick={openListModal}
>
<InactiveTab classNames="!bg-gray-bg w-12" />
Add Session
</div>
<React.Fragment key={i}>
<EmptyTile onClick={openListModal} />
</React.Fragment>
))}
</div>
</div>

36
frontend/app/components/Session_/Multiview/SessionTileFooter.tsx Normal file
View file

@ -0,0 +1,36 @@
import React from 'react'
import { Icon } from 'UI'
function SessionTileFooter({
userDisplayName,
sessionId,
replaceSession,
deleteSession,
}: {
userDisplayName: string;
sessionId: string;
replaceSession: (e: any, id: string) => void;
deleteSession: (e: any, id: string) => void;
}) {
return (
<div className="absolute z-10 bottom-0 w-full left-0 p-2 opacity-70 bg-gray-darkest text-white flex justify-between">
<div>{userDisplayName}</div>
<div className="hidden group-hover:flex items-center gap-2">
<div
className="cursor-pointer hover:font-semibold"
onClick={(e) => replaceSession(e, sessionId)}
>
Replace Session
</div>
<div
className="cursor-pointer hover:font-semibold"
onClick={(e) => deleteSession(e, sessionId)}
>
<Icon name="trash" size={18} color="white" />
</div>
</div>
</div>
);
}
export default SessionTileFooter;