RealBull/src/routes/Resource/Video/VideoPlayList.js

import React, { PureComponent } from 'react';
import moment from 'moment';
import { Table, Pagination, Select, Input } from 'antd';
import AXVideoPlayer from '../../../components/AXVideoPlayer/index';
import styles from './VideoPlayList.less';

export default class VideoPlayList extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      currentPlayingIndex: 0,
      searchSelectKey: 'code',
      searchInputValue: '',
    };
  }
  componentWillReceiveProps(nextProps) {
    const { dataSource } = nextProps;
    if (dataSource && dataSource.length) {
      this.setState({ currentPlayingIndex: 0 });
    }
  }
  handleOnRowClick = (index) => {
    this.setState({ currentPlayingIndex: index });
  };
  handleSearchSelectChange = (value) => {
    this.setState({ searchSelectKey: value });
  };
  handleInputChange = (e) => {
    this.setState({ searchInputValue: e.target.value });
  };
  handleFilterOperation = (params) => {
    const { pageSize, pageNo, onFilterClick } = this.props;
    const { searchSelectKey, searchInputValue } = this.state;
    onFilterClick({
      pageNo,
      pageSize,
      [searchSelectKey]: searchInputValue,
      ...params,
    });
  };
  handleSearchBtnClick = () => {
    this.handleFilterOperation();
  };
  handleTablePageChange = (page, pageSize) => {
    this.handleFilterOperation({
      pageSize,
      pageNo: page,
    });
  };
  handleTablePageSizeChange = (current, size) => {
    this.handleFilterOperation({
      pageSize: size,
      pageNo: current,
    });
  };

  render() {
    const { dataSource, loading, totalSize, pageSize, pageNo } = this.props;
    const renderQuality = (quality) => {
      if (quality === 'high') {
        return '高清';
      } else {
        return '标清';
      }
    };
    const renderItem = (data) => {
      return (
        <div className={styles.meta}>
          <p>
            <span>编号:  </span>
            <a>{`${data.code}`}</a>
          </p>
          <p>
            <span>名称:  </span>
            {`${data.name}`}
          </p>
          <p>
            <span>格式:  </span>
            {`${renderQuality(data.quality)}[${data.format}]`}
          </p>
          <p>
            <span>时间:  </span>
            {`${moment(data.gmtModified).format('YYYY-MM-DD HH:mm:ss')}`}
          </p>
        </div>
      );
    };
    const renderVideoPlayer = () => {
      if (dataSource.length) {
        const videoItem = dataSource[this.state.currentPlayingIndex];
        return (
          <AXVideoPlayer
            width="100%"
            height="100%"
            url={videoItem.url}
            isM3U8={videoItem.format === 'm3u8'}
          />
        );
      }
      return null;
    };
    const columns = [{
      title: '名称/编号/状态/格式/质量/日期',
      key: 1,
      dataIndex: 'cn',
      render: (_, record) => renderItem(record),
    }];
    const paginationProps = {
      pageSize,
      total: totalSize,
      current: pageNo,
      simple: true,
      showTotal: total => `共 ${total} 条`,
      onChange: this.handleTablePageChange,
      onShowSizeChange: this.handleTablePageSizeChange,
    };
    const selectOptions = [{
      field: 'code',
      name: '编号',
    }, {
      field: 'name',
      name: '名称',
    }];
    const onRowClick = (_, index) => {
      return {
        onClick: () => this.handleOnRowClick(index),
      };
    };
    const renderHeader = () => {
      return (
        <Input.Search
          value={this.state.searchInputValue}
          style={{ width: '100%' }}
          addonBefore={
            <Select
              placeholder="请选择"
              value={this.state.searchSelectKey}
              onChange={this.handleSearchSelectChange}
            >
              {selectOptions.map(item => (
                <Select.Option
                  key={item.field}
                  value={item.field}
                >
                  {item.name}
                </Select.Option>))}
            </Select>
          }
          placeholder="请输入"
          enterButton
          onChange={this.handleInputChange}
          onSearch={this.handleSearchBtnClick}
        />
      );
    };
    return (
      <div className={styles.content}>
        <div className={styles.left}>
          <Table
            bordered
            title={() => renderHeader()}
            footer={() => <Pagination {...paginationProps} />}
            columns={columns}
            pagination={false}
            onRow={onRowClick}
            rowKey={record => record.key}
            className={styles.table}
            rowClassName={(_, index) =>
              (index === this.state.currentPlayingIndex ? styles.rowChecked : null)
            }
            loading={loading}
            dataSource={dataSource}
          />
        </div>
        <div className={styles.right}>
          {renderVideoPlayer()}
        </div>
      </div>
    );
  }
}