Browser.tsx 2.17 KB
Newer Older
1
import React, { FunctionComponent, useCallback, useRef } from 'react';
2
import { connect } from 'react-redux';
3

4 5 6 7 8
import BrowserBar from './browser-bar/BrowserBar';
import BrowserImage from './browser-image/BrowserImage';
import BrowserNavBar from './browser-nav/BrowserNavBar';
import TrackPanel from './track-panel/TrackPanel';
import Drawer from './drawer/Drawer';
9

10 11
import { RootState } from 'src/rootReducer';
import { BrowserOpenState } from './browserState';
12
import { toggleDrawer } from './browserActions';
13 14 15 16
import {
  getBrowserOpenState,
  getDrawerOpened,
  getBrowserNavOpened
17
} from './browserSelectors';
18

19
import styles from './Browser.scss';
20

21 22 23
import 'static/browser/browser.js';

type StateProps = {
24
  browserNavOpened: boolean;
25 26
  browserOpenState: BrowserOpenState;
  drawerOpened: boolean;
27 28 29
};

type DispatchProps = {
30
  toggleDrawer: (drawerOpened: boolean) => void;
31
};
32

33 34 35 36
type OwnProps = {};

type BrowserProps = StateProps & DispatchProps & OwnProps;

37 38 39
export const Browser: FunctionComponent<BrowserProps> = (
  props: BrowserProps
) => {
40 41
  const browserRef: React.RefObject<HTMLDivElement> = useRef(null);

42
  const closeTrack = useCallback(() => {
43
    if (props.drawerOpened === false) {
44 45 46
      return;
    }

47 48
    props.toggleDrawer(false);
  }, [props.drawerOpened, props.toggleDrawer]);
49

50 51
  return (
    <section className={styles.browser}>
52
      <BrowserBar browserRef={browserRef} />
53 54 55 56 57 58 59
      <div className={styles.browserInnerWrapper}>
        <div
          className={`${styles.browserImageWrapper} ${
            styles[props.browserOpenState]
          }`}
          onClick={closeTrack}
        >
60 61
          {props.browserNavOpened && <BrowserNavBar browserRef={browserRef} />}
          <BrowserImage browserRef={browserRef} />
62
        </div>
63
        <TrackPanel browserRef={browserRef} />
64 65 66 67 68
        {props.drawerOpened && <Drawer />}
      </div>
    </section>
  );
};
69

70
const mapStateToProps = (state: RootState): StateProps => ({
71 72 73
  browserNavOpened: getBrowserNavOpened(state),
  browserOpenState: getBrowserOpenState(state),
  drawerOpened: getDrawerOpened(state)
74 75
});

76 77
const mapDispatchToProps: DispatchProps = {
  toggleDrawer
78 79
};

80 81 82 83
export default connect(
  mapStateToProps,
  mapDispatchToProps
)(Browser);