Skip to content
Snippets Groups Projects
Select Git revision
  • 5ebf51f709eb8a35a8c09f8b721d8bf137dd2165
  • mui5-annotation-on-video-stable default
  • get_setter_canvasSizeInformations
  • fix-error-div-into-p
  • annotation-on-video-v2
  • detached
  • annotation-on-video-r17
  • mui5
  • mui5-react-18
  • jacob-test
  • annotation-on-video protected
  • master
  • test-antoinev1
  • 20-fetch-thumbnail-on-annotation
  • add-research-field
  • Save
  • add-plugin
  • 14-wip-no-seek-to
  • 14-bug-on-video-time-control
  • 9_wip_videotests
  • _upgrade_material_ui
  • latest-tetras-16
  • v3.3.0
  • v3.2.0
  • v3.1.1
  • v3.1.0
  • v3.0.0
  • v3.0.0-rc.7
  • v3.0.0-rc.6
  • v3.0.0-rc.5
  • v3.0.0-rc.4
  • v3.0.0-rc.3
  • v3.0.0-rc.2
  • v3.0.0-rc.1
  • v3.0.0-beta.10
  • v3.0.0-beta.9
  • v3.0.0-beta.8
  • v3.0.0-beta.7
  • v3.0.0-beta.6
  • v3.0.0-beta.5
  • v3.0.0-beta.3
41 results

WorkspaceArea.js

Blame
  • WorkspaceArea.js 2.14 KiB
    import { Component } from 'react';
    import PropTypes from 'prop-types';
    import { styled, lighten, darken } from '@mui/material/styles';
    import ErrorDialog from '../containers/ErrorDialog';
    import WorkspaceControlPanel from '../containers/WorkspaceControlPanel';
    import Workspace from '../containers/Workspace';
    import WorkspaceAdd from '../containers/WorkspaceAdd';
    import BackgroundPluginArea from '../containers/BackgroundPluginArea';
    import ns from '../config/css-ns';
    
    const Root = styled('main', { name: 'WorkspaceArea', slot: 'root' })(({ theme }) => {
      const getBackgroundColor = theme.palette.mode === 'light' ? darken : lighten;
    
      return {
        background: getBackgroundColor(theme.palette.grey.A200, 0.1),
        bottom: 0,
        left: 0,
        overflow: 'hidden',
        position: 'absolute',
        right: 0,
        top: 0,
      };
    });
    
    /**
     * This is the top level Mirador component.
     * @prop {Object} manifests
     */
    export class WorkspaceArea extends Component {
      /**
       * render
       * @return {String} - HTML markup for the component
       */
      render() {
        const {
          areaRef,
          controlPanelVariant,
          isWorkspaceAddVisible,
          isWorkspaceControlPanelVisible,
          lang,
          t,
        } = this.props;
    
        return (
          <>
            {
              isWorkspaceControlPanelVisible
                && <WorkspaceControlPanel variant={controlPanelVariant} />
            }
            <Root
              className={ns('viewer')}
              lang={lang}
              aria-label={t('workspace')}
              {...(areaRef ? { ref: areaRef } : {})}
            >
              {
                isWorkspaceAddVisible
                  ? <WorkspaceAdd />
                  : <Workspace />
              }
              <ErrorDialog />
              <BackgroundPluginArea />
            </Root>
          </>
        );
      }
    }
    
    WorkspaceArea.propTypes = {
      areaRef: PropTypes.shape({ current: PropTypes.instanceOf(Element) }),