Skip to content
This repository has been archived by the owner on Jun 28, 2021. It is now read-only.

Commit

Permalink
Audioplayer repeats (#388)
Browse files Browse the repository at this point in the history
* Audioplayer repeat

* ui

* wip

* tests
  • Loading branch information
mmahalwy authored Jul 11, 2016
1 parent e73de39 commit 130cafb
Show file tree
Hide file tree
Showing 10 changed files with 605 additions and 151 deletions.
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -77,7 +77,7 @@
"raven": "^0.11.0",
"raw-loader": "^0.5.1",
"react": "^0.14.8",
"react-bootstrap": "^0.28.4",
"react-bootstrap": "^0.29.5",
"react-cookie": "^0.3.4",
"react-dom": "^0.14.0",
"react-helmet": "^3.1.0",
Expand Down
39 changes: 0 additions & 39 deletions src/components/Audioplayer/RepeatButton/index.js

This file was deleted.

36 changes: 0 additions & 36 deletions src/components/Audioplayer/RepeatButton/spec.js

This file was deleted.

239 changes: 239 additions & 0 deletions src/components/Audioplayer/RepeatDropdown/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,239 @@
import React, { Component, PropTypes } from 'react';
import OverlayTrigger from 'react-bootstrap/lib/OverlayTrigger';
import Popover from 'react-bootstrap/lib/Popover';
import Nav from 'react-bootstrap/lib/Nav';
import NavItem from 'react-bootstrap/lib/NavItem';
import FormControl from 'react-bootstrap/lib/FormControl';
import Row from 'react-bootstrap/lib/Row';
import Col from 'react-bootstrap/lib/Col';

import SwitchToggle from 'components/SwitchToggle';

const style = require('../style.scss');

export default class RepeatButton extends Component {
static propTypes = {
surah: PropTypes.object.isRequired,
repeat: PropTypes.shape({
from: PropTypes.number,
to: PropTypes.number,
times: PropTypes.number
}).isRequired,
setRepeat: PropTypes.func.isRequired,
current: PropTypes.number.isRequired
};

handleToggle = () => {
const { repeat, setRepeat, current } = this.props;

if (repeat.from) {
return setRepeat({});
}

return setRepeat({
from: current,
to: current
});
}

handleNavChange = (nav) => {
const { setRepeat, current } = this.props;

if (nav === 1) {
// Should set single ayah
return setRepeat({
from: current,
to: current
});
}

return setRepeat({
from: current,
to: current + 3
});
}

renderRangeAyahs() {
const { surah, repeat, setRepeat } = this.props;
const array = Array(surah.ayat).join().split(',');

return (
<Col md={12} style={{paddingTop: 15}}>
From - To: <br />
<ul className="list-inline" style={{marginBottom: 0}}>
<li>
<FormControl
componentClass="select"
value={repeat.from}
onChange={(event) => setRepeat({
...repeat,
from: parseInt(event.target.value, 10),
to: parseInt(event.target.value, 10)
})}
>
{
array.map((ayah, index) => (
<option key={index} value={index + 1}>
{index + 1}
</option>
))
}
</FormControl>
</li>
<li> - </li>
<li>
<FormControl
componentClass="select"
value={repeat.to}
onChange={(event) => setRepeat({ ...repeat, to: parseInt(event.target.value, 10)})}
>
{
array.map((ayah, index) => (
<option key={index} value={repeat.from ? index + 1 + repeat.from : index + 1}>
{repeat.from ? index + 1 + repeat.from : index + 1}
</option>
))
}
</FormControl>
</li>
</ul>
</Col>
);
}

renderSingleAyah() {
const { repeat, setRepeat, surah } = this.props;
const array = Array(surah.ayat).join().split(',');

return (
<Col md={12} style={{paddingTop: 15}}>
Ayah: <br />
<FormControl
componentClass="select"
value={repeat.from}
onChange={(event) => setRepeat({
...repeat,
from: parseInt(event.target.value, 10),
to: parseInt(event.target.value, 10)
})}
>
{
array.map((ayah, index) => (
<option key={index} value={index + 1}>
{index + 1}
</option>
))
}
</FormControl>
</Col>
);
}

renderNav() {
const { repeat } = this.props;

return (
<Row className={!repeat.from && style.disabled}>
<Col md={12}>
<Nav
bsStyle="pills"
activeKey={repeat.from === repeat.to ? 1 : 2}
onSelect={this.handleNavChange}
>
<NavItem eventKey={1} title="Single Ayah" className={style.pill}>
Single
</NavItem>
<NavItem eventKey={2} title="Range" className={style.pill}>
Range
</NavItem>
</Nav>
</Col>
</Row>
);
}

renderOptions() {
const { repeat } = this.props;

return (
<Row className={!repeat.from && style.disabled}>
{repeat.from === repeat.to ? this.renderSingleAyah() : this.renderRangeAyahs()}
</Row>
);
}

renderTimes() {
const { repeat, setRepeat } = this.props;
const times = Array(10).join().split(',');

return (
<Row className={!repeat.from && style.disabled}>
<Col md={12} style={{paddingTop: 15}}>
Times: <br />
<FormControl
componentClass="select"
value={repeat.times}
onChange={(event) => setRepeat({
...repeat,
times: parseInt(event.target.value, 10)
})}
>
<option value={Infinity}>
Loop
</option>
{
times.map((ayah, index) => (
<option key={index} value={index + 1}>
{index + 1}
</option>
))
}
</FormControl>
</Col>
</Row>
);
}

render() {
const { repeat } = this.props;

const popover = (
<Popover
id="FontSizeDropdown"
className={style.popover}
title={
<Row>
<Col md={12} className="text-center">
Toggle repeat{' '}
<SwitchToggle
checked={!!repeat.from}
onToggle={this.handleToggle}
id="repeat-toggle"
flat
/>
</Col>
</Row>
}
>
{this.renderNav()}
{this.renderOptions()}
{this.renderTimes()}
</Popover>
);

return (
<div className="text-center">
<OverlayTrigger
overlay={popover}
placement="bottom"
trigger="click"
rootClose
>
<i
className={`pointer ss-icon ss-repeat ${style.buttons} ${repeat.from && style.repeat}`}
/>
</OverlayTrigger>
</div>
);
}
}
Loading

0 comments on commit 130cafb

Please sign in to comment.