content: import React from 'react';
  import classNames from 'classnames';
  import {shape, func} from 'prop-types';
  import {
    branch,
    renderComponent
  } from 'recompose';
  
  import messages from '../messages';
  import styles from '../styles.css';
  
  function NoWebRTCSupport({intl}) {
    return (
      <div className={classNames(styles.meetWidgetContainer, styles.noWebRtc, 'meet-widget-container')}>
        <div className={styles.noWebRtcMessage}>
          <p>{intl.formatMessage(messages.noWebRTCBrowserSupportMessage)}</p>
          <p>{intl.formatMessage(messages.useSupportedBrowserMessage)}</p>
        </div>
      </div>
    );
  }
  
  NoWebRTCSupport.propTypes = {
    // Grabbed from https://github.com/sharetribe/ftw-daily/blob/master/src/util/reactIntl.js#L10
    intl: shape({
      formatDate: func.isRequired,
      formatHTMLMessage: func.isRequired,
      formatMessage: func.isRequired,
      formatNumber: func.isRequired,
      formatPlural: func.isRequired,
      formatRelativeTime: func.isRequired,
      formatTime: func.isRequired
    }).isRequired
  };
  
  const isNotSupported = ({media}) =>
    media.getIn(['webRTC', 'hasCheckedSupport']) &&
    !media.getIn(['webRTC', 'isSupported']);
  
  export default branch(
    isNotSupported,
    renderComponent(NoWebRTCSupport)
  );
  