diff --git a/frontend/app/components/Assist/AssistSearchField/AssistSearchField.tsx b/frontend/app/components/Assist/AssistSearchField/AssistSearchField.tsx index a8c04a98a..df53e4404 100644 --- a/frontend/app/components/Assist/AssistSearchField/AssistSearchField.tsx +++ b/frontend/app/components/Assist/AssistSearchField/AssistSearchField.tsx @@ -16,7 +16,7 @@ function AssistSearchField(props: Props) { const hasEvents = props.appliedFilter.filters.filter((i: any) => i.isEvent).size > 0; const hasFilters = props.appliedFilter.filters.filter((i: any) => !i.isEvent).size > 0; return ( -
+
diff --git a/frontend/app/components/Session/LivePlayer.tsx b/frontend/app/components/Session/LivePlayer.tsx index 6a1534772..54ea109ef 100644 --- a/frontend/app/components/Session/LivePlayer.tsx +++ b/frontend/app/components/Session/LivePlayer.tsx @@ -11,20 +11,22 @@ import PlayerBlockHeader from '../Session_/PlayerBlockHeader'; import PlayerBlock from '../Session_/PlayerBlock'; import styles from '../Session_/session.module.css'; import Session from 'App/mstore/types/session'; +import withLocationHandlers from 'HOCs/withLocationHandlers'; interface Props { session: Session; - toggleFullscreen: (isOn: boolean) => void; - closeBottomBlock: () => void; fullscreen: boolean; loadingCredentials: boolean; assistCredendials: RTCIceServer[]; - request: () => void; isEnterprise: boolean; userEmail: string; userName: string; - isMultiview?: boolean; customSession?: Session; + isMultiview?: boolean; + query?: Record any>; + toggleFullscreen: (isOn: boolean) => void; + closeBottomBlock: () => void; + request: () => void; } function LivePlayer({ @@ -40,10 +42,11 @@ function LivePlayer({ userName, isMultiview, customSession, + query }: Props) { const [contextValue, setContextValue] = useState(defaultContextValue); const [fullView, setFullView] = useState(false); - + const openedFromMultiview = query.get('multi') === 'true' // @ts-ignore burn immutable const usedSession = isMultiview ? customSession : session.toJS(); @@ -100,6 +103,7 @@ function LivePlayer({ setActiveTab={setActiveTab} tabs={TABS} fullscreen={fullscreen} + isMultiview={openedFromMultiview} /> )}
{ e.stopPropagation(); assistMultiviewStore.setActiveSession(sessionId); - history.push(withSiteId(liveSession(sessionId), siteId)); + history.push(withSiteId(liveSession(sessionId)+'?multi=true', siteId)); }; const returnToList = () => { @@ -76,7 +76,9 @@ function Multiview({ assistMultiviewStore.removeSession(sessionId); }; - const placeholder = new Array(4 - assistMultiviewStore.sessions.length).fill(0); + const emptySpace = 4 - assistMultiviewStore.sessions.length; + + const placeholder = emptySpace > 0 ? new Array(emptySpace).fill(0) : [] return (
diff --git a/frontend/app/components/Session_/Multiview/SessionTileFooter.tsx b/frontend/app/components/Session_/Multiview/SessionTileFooter.tsx index be3205421..da6c36ca5 100644 --- a/frontend/app/components/Session_/Multiview/SessionTileFooter.tsx +++ b/frontend/app/components/Session_/Multiview/SessionTileFooter.tsx @@ -13,11 +13,11 @@ function SessionTileFooter({ deleteSession: (e: any, id: string) => void; }) { return ( -
+
{userDisplayName}
-
+
replaceSession(e, sessionId)} > Replace Session diff --git a/frontend/app/components/Session_/Player/Controls/AssistSessionsModal/AssistSessionsModal.tsx b/frontend/app/components/Session_/Player/Controls/AssistSessionsModal/AssistSessionsModal.tsx index 3f36da569..5fba5ea54 100644 --- a/frontend/app/components/Session_/Player/Controls/AssistSessionsModal/AssistSessionsModal.tsx +++ b/frontend/app/components/Session_/Player/Controls/AssistSessionsModal/AssistSessionsModal.tsx @@ -11,7 +11,9 @@ import { KEYS } from 'Types/filter/customFilter'; import { capitalize } from 'App/utils'; import { useStore } from 'App/mstore'; import { observer } from 'mobx-react-lite'; -import { fetchList as fetchMeta } from 'Duck/customField' +import { fetchList as fetchMeta } from 'Duck/customField'; +import AssistSearchField from 'App/components/Assist/AssistSearchField'; +import LiveSessionSearch from 'Shared/LiveSessionSearch'; import cn from 'classnames'; import Session from 'App/mstore/types/session'; @@ -53,9 +55,9 @@ function AssistSessionsModal(props: Props) { React.useEffect(() => { if (total === 0) { - reloadSessions() + reloadSessions(); } - fetchMeta() + fetchMeta(); }, []); const reloadSessions = () => props.applyFilter({ ...filter }); const onSortChange = ({ value }: any) => { @@ -71,10 +73,21 @@ function AssistSessionsModal(props: Props) { }; return ( -
-
-
- +
+
+
+ +
+
Sort By 0}>
@@ -93,6 +106,8 @@ function AssistSessionsModal(props: Props) {
+ +
{list.map((session) => ( diff --git a/frontend/app/components/Session_/Player/Controls/AssistSessionsTabs/AssistSessionsTabs.tsx b/frontend/app/components/Session_/Player/Controls/AssistSessionsTabs/AssistSessionsTabs.tsx index a6735274a..92ff70a22 100644 --- a/frontend/app/components/Session_/Player/Controls/AssistSessionsTabs/AssistSessionsTabs.tsx +++ b/frontend/app/components/Session_/Player/Controls/AssistSessionsTabs/AssistSessionsTabs.tsx @@ -1,6 +1,6 @@ import React from 'react'; import cn from 'classnames'; -import { Icon } from 'UI'; +import { Icon, Tooltip } from 'UI'; import { useStore } from 'App/mstore'; import { observer } from 'mobx-react-lite'; import { useHistory } from 'react-router-dom'; diff --git a/frontend/app/components/Session_/PlayerBlockHeader.tsx b/frontend/app/components/Session_/PlayerBlockHeader.tsx index 32b47012c..1932ccb85 100644 --- a/frontend/app/components/Session_/PlayerBlockHeader.tsx +++ b/frontend/app/components/Session_/PlayerBlockHeader.tsx @@ -6,8 +6,9 @@ import { assist as assistRoute, liveSession as liveSessionRoute, withSiteId, + multiview, } from 'App/routes'; -import { BackLink, Link } from 'UI'; +import { BackLink, Link, Icon } from 'UI'; import { toggleFavorite, setSessionPath } from 'Duck/sessions'; import cn from 'classnames'; import SessionMetaList from 'Shared/SessionItem/SessionMetaList'; @@ -15,7 +16,7 @@ import UserCard from './EventsBlock/UserCard'; import Tabs from 'Components/Session/Tabs'; import { PlayerContext } from 'App/components/Session/playerContext'; import { observer } from 'mobx-react-lite'; - +import { useStore } from 'App/mstore' import stl from './playerBlockHeader.module.css'; import AssistActions from '../Assist/components/AssistActions'; import AssistTabs from '../Assist/components/AssistTabs'; @@ -27,6 +28,7 @@ const ASSIST_ROUTE = assistRoute(); function PlayerBlockHeader(props: any) { const [hideBack, setHideBack] = React.useState(false); const { player, store } = React.useContext(PlayerContext); + const { assistMultiviewStore } = useStore(); const { width, height, showEvents } = store.get(); const toggleEvents = player.toggleEvents; @@ -43,6 +45,7 @@ function PlayerBlockHeader(props: any) { location, history, sessionPath, + isMultiview, } = props; React.useEffect(() => { @@ -77,14 +80,36 @@ function PlayerBlockHeader(props: any) { key: tab, })); + const openGrid = () => { + const sessionIdQuery = encodeURIComponent(assistMultiviewStore.sessions.map((s) => s.sessionId).join(',')); + return history.push(withSiteId(multiview(sessionIdQuery), siteId)); + }; + return (
{!hideBack && ( -
- {/* @ts-ignore TODO */} - -
+
(isMultiview ? openGrid() : backHandler())} + > + {isMultiview ? ( + <> +
+ +
+ + Close + +
+ + ) : ( + <> + {/* @ts-ignore TODO */} + +
+ + )}
)}