import React, { Component } from 'react';
import { connect } from 'react-redux';
import DocumentTitle from 'react-document-title';
import 'antd-mobile/dist/antd-mobile.less';
import styles from './index.less';
@connect(() => ({}))
class Index extends Component {
  constructor(props) {
    super(props);
    this.state = {
      id: null,
    };
  }

  componentWillMount = () => {
    const { id } = this.props.location.query;
    if (id) {
      this.setState({
        id,
      });
    }
  };

  componentDidMount = () => {};

  render() {
    const { id } = this.state;
    return (
      <DocumentTitle title="2020年度中国宠物产业文化发展">
        <div className={styles.body}>
          {id ? (
            <video
              className={`${styles.video}`}
              controls
              poster={`/awards/media/${id}.jpg`}
              webkit-playsinline="true"
              playsinline="true"
              x-webkit-airplay="allow"
              x5-video-player-type="h5"
              x5-video-player-fullscreen="true"
              x5-video-orientation="portraint"
            >
              <source src={`/awards/media/${id}.mp4`} type="video/mp4" />
              您的浏览器不支持 video 标签。
            </video>
          ) : null}
        </div>
      </DocumentTitle>
    );
  }
}

export default Index;