import React from 'react'
import Layout from '../components/MyLayout.js'
import { withStyles } from '@material-ui/core/styles'
import Head from 'next/head'
import _ from 'lodash'
import Recorder from '../components/Recorder'
//import NoSSR from 'react-no-ssr'

const styles = theme => ({
  root: {
    margin: theme.spacing.unit,
    height: 250,
    width: 400
  },
});

const videoJsOptions = {
  controls: true,
  // width: 800,
  // height: 600,
  fluid: true,
  plugins: {
      /*
      // wavesurfer section is only needed when recording audio-only
      wavesurfer: {
          src: 'live',
          waveColor: '#36393b',
          progressColor: 'black',
          debug: true,
          cursorWidth: 1,
          msDisplayMax: 20,
          hideScrollbar: true
      },
      */
      record: {
          audio: true,
          video: true,
         // maxLength: 10,
          debug: true
      }
  }
};

class Index extends React.Component {
  state = {
  };

  componentDidMount() {

  }

  render() {
    const { classes, menu} = this.props;
    return (
      <Layout menu={menu}>
        <Head>
          <title>Boilerplate PWA</title>
          <meta name="description" content="Vous souhaitez créer une PWA, développer des fonctionnalités à votre site web et améliorer l'expérience utilisateur sur votre site internet? Contactez-nous pour parler de votre projet." />
          <link rel="canonical" href="https://pwa-boiler.bzh" />
          <meta key="robots" name="robots" content="noindex, nofollow"></meta>
        </Head>

        <div className={classes.root}>
        <Recorder {...videoJsOptions} />
        </div>
      </Layout>
    )

  }

}
export default withStyles(styles)(Index)