openreplay/frontend/app/components/Session_/Player/Controls/AssistSessionsTabs/AssistSessionsTabs.tsx

import React from 'react';
import cn from 'classnames';
import { Icon } from 'UI';
import { useStore } from 'App/mstore';
import { observer } from 'mobx-react-lite';
import { useHistory } from 'react-router-dom';
import { multiview, liveSession, withSiteId } from 'App/routes';

interface ITab {
  onClick?: () => void;
  classNames?: string;
  children: React.ReactNode;
  style?: Record<string, any>;
}

const Tab = (props: ITab) => (
  <div
    onClick={props.onClick}
    className={cn('p-1 rounded flex items-center justify-center cursor-pointer', props.classNames)}
    style={props.style}
  >
    {props.children}
  </div>
);

export const InactiveTab = React.memo((props: Omit<ITab, 'children'>) => (
  <Tab onClick={props.onClick} classNames={cn("hover:bg-gray-bg bg-gray-light", props.classNames)}>
    <Icon name="plus" size="22" color="white" />
  </Tab>
));

const ActiveTab = React.memo((props: Omit<ITab, 'children'>) => (
  <Tab onClick={props.onClick} classNames="hover:bg-teal" style={{ background: 'rgba(57, 78, 255, 0.5)' }}>
    <Icon name="play-fill-new" size="22" color="white" />
  </Tab>
));

const CurrentTab = React.memo(() => (
  <Tab classNames="bg-teal color-white">
    <span style={{ fontSize: '0.65rem' }}>PLAYING</span>
  </Tab>
));

function AssistTabs({ session }: { session: Record<string, any> }) {
  const history = useHistory();
  const { assistMultiviewStore, projectsStore } = useStore();
  const siteId = projectsStore.siteId!;

  const placeholder = new Array(4 - assistMultiviewStore.sessions.length).fill(0);

  React.useEffect(() => {
    if (assistMultiviewStore.sessions.length === 0) {
      assistMultiviewStore.setDefault(session);
    }
  }, []);

  const openGrid = () => {
    const sessionIdQuery = encodeURIComponent(assistMultiviewStore.sessions.map((s) => s.sessionId).join(','));
    return history.push(withSiteId(multiview(sessionIdQuery), siteId));
  };
  const openLiveSession = (sessionId: string) => {
    assistMultiviewStore.setActiveSession(sessionId);
    history.push(withSiteId(liveSession(sessionId), siteId));
  };

  return (
    <div className="grid grid-cols-2 w-28 h-full" style={{ gap: '4px' }}>
      {assistMultiviewStore.sortedSessions.map((session: { key: number, sessionId: string }) => (
        <React.Fragment key={session.key}>
          {assistMultiviewStore.isActive(session.sessionId) ? (
            <CurrentTab />
          ) : (
            <ActiveTab onClick={() => openLiveSession(session.sessionId)} />
          )}
        </React.Fragment>
      ))}
      {placeholder.map((_, i) => (
        <React.Fragment key={i}>
          <InactiveTab onClick={openGrid} />
        </React.Fragment>
      ))}
    </div>
  );
}

export default observer(AssistTabs)