72 lines
1.7 KiB
JavaScript
72 lines
1.7 KiB
JavaScript
import React, { PropTypes } from 'react';
|
|
import { Button, Col, Row, Panel } from 'react-bootstrap';
|
|
import { History } from 'react-router';
|
|
import Vimeo from 'react-vimeo';
|
|
import debugFactory from 'debug';
|
|
|
|
const debug = debugFactory('freecc:hikes');
|
|
|
|
export default React.createClass({
|
|
displayName: 'Lecture',
|
|
mixins: [History],
|
|
|
|
propTypes: {
|
|
currentHike: PropTypes.object,
|
|
params: PropTypes.object
|
|
},
|
|
|
|
handleError: debug,
|
|
|
|
handleFinish() {
|
|
debug('loading questions');
|
|
const { dashedName } = this.props.params;
|
|
this.history.pushState(null, `/hikes/${dashedName}/questions/1`);
|
|
},
|
|
|
|
renderTranscript(transcript, dashedName) {
|
|
return transcript.map((line, index) => (
|
|
<p key={ dashedName + index }>{ line }</p>
|
|
));
|
|
},
|
|
|
|
render() {
|
|
const {
|
|
title,
|
|
challengeSeed = ['1'],
|
|
description = []
|
|
} = this.props.currentHike;
|
|
const { dashedName } = this.props.params;
|
|
|
|
const [ id ] = challengeSeed;
|
|
|
|
const videoTitle = <h2>{ title }</h2>;
|
|
return (
|
|
<Col xs={ 12 }>
|
|
<Row>
|
|
<Panel className={ 'text-center' } title={ videoTitle }>
|
|
<Vimeo
|
|
onError={ this.handleError }
|
|
onFinish= { this.handleFinish }
|
|
videoId={ id } />
|
|
</Panel>
|
|
</Row>
|
|
<Row>
|
|
<Col xs={ 12 }>
|
|
<Panel>
|
|
{ this.renderTranscript(description, dashedName) }
|
|
</Panel>
|
|
<Panel>
|
|
<Button
|
|
block={ true }
|
|
bsSize='large'
|
|
onClick={ this.handleFinish }>
|
|
Take me to the Questions
|
|
</Button>
|
|
</Panel>
|
|
</Col>
|
|
</Row>
|
|
</Col>
|
|
);
|
|
}
|
|
});
|