index.js 5.36 KB
Newer Older
1
import React, { Component } from 'react'
2
import './video-catalog.scss'
zhanghaozhe committed
3
import { Link } from "react-router-dom";
4 5 6 7 8
import classnames from 'classnames'


class VideoCatalog extends Component {

zhanghaozhe committed
9
    handleClick = (i) => {
10
        this.props.selectVideo(i)
zhanghaozhe committed
11 12
    }

13 14 15 16 17
    render() {
        return (
            <div className='video-catalog'>
                <ul>
                    {
zhanghaozhe committed
18
                        this.props.videoCatalog.map((item, index) => {
19
                            return (
xuzhenghua committed
20 21
                                <li 
                                    key={item.id}
zhanghaozhe committed
22 23
                                    className={classnames({active: this.props.activeIndex === index})}
                                >
xuzhenghua committed
24 25 26 27
                                    <div 
                                        className="video-title" 
                                        onClick={this.handleClick.bind(this, index)}
                                    >
28 29 30 31 32 33 34 35 36
                                        <span className="title">{item.name}</span>
                                        <span className='duration'>{item.duration}</span>
                                        <i className={classnames(`iconfont`,
                                            [item.video_auth === 0
                                                ? 'iconiconfront-74'
                                                : 'iconplay_hovericon'],
                                        )}/>
                                    </div>
                                    {
37
                                        this.props.isAist ? (
wangshuo committed
38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58
                                            item.video_auth ? (
                                                (item.practice && item.practice.qid)
                                                ? <Link to={{
                                                    pathname: item.practice.is_tested ? '/campResolve' : '/campTest',
                                                    search: `?keshi_id=${item.id}&qid=${item.practice.qid}`,
                                                    state: {from: `/play/video${window.location.search}`}
                                                }}>
                                                    <div className="exercise">
                                                        课后练习:{item.practice.title}
                                                        <i className={classnames('iconfont', item.practice.is_tested ? 'iconiconfront-3' : '')}/>
                                                    </div>
                                                </Link>
                                                : null
                                            ) : (
                                                <a href="javascript:void(0)">
                                                    <div className="exercise">
                                                        课后练习:{item.practice.title}
                                                        <i className={classnames('iconfont','iconiconfront-74')}/>
                                                    </div>
                                                </a>
                                            )
59 60 61
                                        ) : (
                                            item.practice_common.map((commonItem, index) => {
                                                return (
wangshuo committed
62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80
                                                    item.video_auth ? (
                                                        <Link to={{
                                                            pathname: commonItem.is_tested ? '/campResolve' : '/campTest',
                                                            search: `?keshi_id=${item.id}&qid=${commonItem.qid}`,
                                                            state: {from: `/play/video${window.location.search}`}
                                                        }} key={index}>
                                                            <div className="exercise">
                                                                课后练习:{commonItem.title}
                                                                <i className={classnames('iconfont',commonItem.is_tested ? 'iconiconfront-3' : '')}/>
                                                            </div>
                                                        </Link>
                                                    ) : (
                                                        <a href="javascript:void(0)">
                                                            <div className="exercise">
                                                                课后练习:{commonItem.title}
                                                                <i className={classnames('iconfont','iconiconfront-74')}/>
                                                            </div>
                                                        </a>
                                                    )
81 82 83
                                                )
                                            })
                                        )
84
                                    }
85 86 87 88 89 90 91 92 93 94 95
                                </li>
                            )
                        })
                    }
                </ul>
            </div>
        );
    }
}

export default VideoCatalog;