import * as React from 'react';
import Dialog from 'material-ui/Dialog';

import PreviewPlayer from '../../Video/Player';

const PreviewMediaDialog = ({
  open,
  media,
  volume,
  onCloseDialog
}) => (
  <Dialog
    contentClassName="Dialog PreviewMediaDialog"
    bodyClassName="Dialog-body"
    titleClassName="Dialog-title"
    title={open ? `${media.artist} – ${media.title}` : 'Preview Media'}
    open={open}
    onRequestClose={onCloseDialog}
    autoScrollBodyContent
  >
    {open && (
      <div className="PreviewMediaDialog-content">
        <PreviewPlayer
          mode="preview"
          media={media}
          volume={volume}
        />
      </div>
    )}
  </Dialog>
);

PreviewMediaDialog.propTypes = {
  open: React.PropTypes.bool,
  media: React.PropTypes.object,
  volume: React.PropTypes.volume,

  onCloseDialog: React.PropTypes.func.isRequired
};

export default PreviewMediaDialog;

import * as React from 'react';
import Dialog from 'material-ui/Dialog';

import PreviewPlayer from '../../Video/Player';

const useClassNameWidthStyle = {
  width: null
};
const inheritWidthStyle = {
  width: 'inherit'
};

const PreviewMediaDialog = ({
  open,
  media,
  volume,
  onCloseDialog
}) => (
  <Dialog
    className="AppColumn AppColumn--left"
    style={useClassNameWidthStyle}
    overlayStyle={inheritWidthStyle}
    contentClassName="Dialog PreviewMediaDialog"
    bodyClassName="Dialog-body"
    titleClassName="Dialog-title"
    title={open ? `${media.artist} – ${media.title}` : 'Preview Media'}
    open={open}
    onRequestClose={onCloseDialog}
    autoScrollBodyContent
  >
    {open && (
      <div className="PreviewMediaDialog-content">
        <PreviewPlayer
          mode="preview"
          media={media}
          volume={volume}
        />
      </div>
    )}
  </Dialog>
);

PreviewMediaDialog.propTypes = {
  open: React.PropTypes.bool,
  media: React.PropTypes.object,
  volume: React.PropTypes.volume,

  onCloseDialog: React.PropTypes.func.isRequired
};

export default PreviewMediaDialog;

make dialog not overlay chat