openreplay/frontend/app/components/Session_/Player/Player.js

import React from 'react';
import { connect } from 'react-redux';
import { findDOMNode } from 'react-dom';
import cn from 'classnames';
import { EscapeButton } from 'UI';
import { hide as hideTargetDefiner } from 'Duck/components/targetDefiner';
import { fullscreenOff } from 'Duck/components/player';
import {
  NONE,
  CONSOLE,
  NETWORK,
  STACKEVENTS,
  STORAGE,
  PROFILER,
  PERFORMANCE,
  GRAPHQL,
  FETCH,
  EXCEPTIONS,
  LONGTASKS,
  INSPECTOR,
  OVERVIEW,
} from 'Duck/components/player';
import Network from '../Network';
import Console from '../Console/Console';
import StackEvents from '../StackEvents/StackEvents';
import Storage from '../Storage';
import Profiler from '../Profiler';
import { ConnectedPerformance } from '../Performance';
import GraphQL from '../GraphQL';
import Fetch from '../Fetch';
import Exceptions from '../Exceptions/Exceptions';
import LongTasks from '../LongTasks';
import Inspector from '../Inspector';
import {
  attach as attachPlayer,
  Controls as PlayerControls,
  scale as scalePlayerScreen,
  connectPlayer,
} from 'Player';
import Controls from './Controls';
import Overlay from './Overlay';
import stl from './player.module.css';
import { updateLastPlayedSession } from 'Duck/sessions';
import OverviewPanel from '../OverviewPanel';

@connectPlayer(state => ({
  live: state.live,
}))
@connect(state => {
  const isAssist = window.location.pathname.includes('/assist/');
  return {
    fullscreen: state.getIn([ 'components', 'player', 'fullscreen' ]),
    nextId: state.getIn([ 'sessions', 'nextId' ]),
    sessionId: state.getIn([ 'sessions', 'current', 'sessionId' ]),
    closedLive: !!state.getIn([ 'sessions', 'errors' ]) || (isAssist && !state.getIn([ 'sessions', 'current', 'live' ])),
  }
}, {
  hideTargetDefiner,
  fullscreenOff,
  updateLastPlayedSession,
})
export default class Player extends React.PureComponent {
  screenWrapper = React.createRef();

  componentDidUpdate(prevProps) {
    if ([ prevProps.bottomBlock, this.props.bottomBlock ].includes(NONE) ||
        prevProps.fullscreen !== this.props.fullscreen) {
      scalePlayerScreen();
    }
  }

  componentDidMount() {
    this.props.updateLastPlayedSession(this.props.sessionId);
    if (this.props.closedLive) return;

    const parentElement = findDOMNode(this.screenWrapper.current);  //TODO: good architecture
    attachPlayer(parentElement);
  }

  render() {
    const {
      className,
      bottomBlockIsActive,
      fullscreen,
      fullscreenOff,
      nextId,
      closedLive,
      bottomBlock,
      activeTab
    } = this.props;

    const maxWidth = activeTab ? 'calc(100vw - 270px)' : '100vw'
    return (
      <div
        className={ cn(className, stl.playerBody, "flex flex-col relative", fullscreen && 'pb-2') }
        data-bottom-block={ bottomBlockIsActive }
      >
        {fullscreen && <EscapeButton onClose={ fullscreenOff } />}
        <div className="relative flex-1 overflow-hidden">
          <Overlay nextId={nextId} togglePlay={PlayerControls.togglePlay} closedLive={closedLive} />
          <div
            className={ stl.screenWrapper }
            ref={ this.screenWrapper }
          />
        </div>
        { !fullscreen && !!bottomBlock &&
          <div style={{ maxWidth, width: '100%' }}>
            { bottomBlock === OVERVIEW &&
               <OverviewPanel />
            }
            { bottomBlock === CONSOLE &&
              <Console />
            }
            { bottomBlock === NETWORK &&
              <Network />
            }
            { bottomBlock === STACKEVENTS &&
              <StackEvents />
            }
            { bottomBlock === STORAGE &&
              <Storage />
            }
            { bottomBlock === PROFILER &&
              <Profiler />
            }
            { bottomBlock === PERFORMANCE &&
              <ConnectedPerformance />
            }
            { bottomBlock === GRAPHQL &&
              <GraphQL />
            }
            { bottomBlock === FETCH &&
              <Fetch />
            }
            { bottomBlock === EXCEPTIONS &&
              <Exceptions />
            }
            { bottomBlock === LONGTASKS &&
              <LongTasks />
            }
            { bottomBlock === INSPECTOR &&
              <Inspector />
            }
          </div>
        }
        <Controls
          { ...PlayerControls }
        />
      </div>
    );
  }
}