Skip to content

Commit 3e5d5ec

Browse files
mmahalwythabti
mmahalwy
authored and
thabti
committed
Audioplayer repeats (quran#388)
* Audioplayer repeat * ui * wip * tests
1 parent 2e2865d commit 3e5d5ec

File tree

10 files changed

+605
-151
lines changed

10 files changed

+605
-151
lines changed

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -77,7 +77,7 @@
7777
"raven": "^0.11.0",
7878
"raw-loader": "^0.5.1",
7979
"react": "^0.14.8",
80-
"react-bootstrap": "^0.28.4",
80+
"react-bootstrap": "^0.29.5",
8181
"react-cookie": "^0.3.4",
8282
"react-dom": "^0.14.0",
8383
"react-helmet": "^3.1.0",

‎src/components/Audioplayer/RepeatButton/index.js‎

Lines changed: 0 additions & 39 deletions
This file was deleted.

‎src/components/Audioplayer/RepeatButton/spec.js‎

Lines changed: 0 additions & 36 deletions
This file was deleted.

‎src/components/Audioplayer/RepeatDropdown/index.js‎

Lines changed: 239 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,239 @@
1+
import React, { Component, PropTypes } from 'react';
2+
import OverlayTrigger from 'react-bootstrap/lib/OverlayTrigger';
3+
import Popover from 'react-bootstrap/lib/Popover';
4+
import Nav from 'react-bootstrap/lib/Nav';
5+
import NavItem from 'react-bootstrap/lib/NavItem';
6+
import FormControl from 'react-bootstrap/lib/FormControl';
7+
import Row from 'react-bootstrap/lib/Row';
8+
import Col from 'react-bootstrap/lib/Col';
9+
10+
import SwitchToggle from 'components/SwitchToggle';
11+
12+
const style = require('../style.scss');
13+
14+
export default class RepeatButton extends Component {
15+
static propTypes = {
16+
surah: PropTypes.object.isRequired,
17+
repeat: PropTypes.shape({
18+
from: PropTypes.number,
19+
to: PropTypes.number,
20+
times: PropTypes.number
21+
}).isRequired,
22+
setRepeat: PropTypes.func.isRequired,
23+
current: PropTypes.number.isRequired
24+
};
25+
26+
handleToggle = () => {
27+
const { repeat, setRepeat, current } = this.props;
28+
29+
if (repeat.from) {
30+
return setRepeat({});
31+
}
32+
33+
return setRepeat({
34+
from: current,
35+
to: current
36+
});
37+
}
38+
39+
handleNavChange = (nav) => {
40+
const { setRepeat, current } = this.props;
41+
42+
if (nav === 1) {
43+
// Should set single ayah
44+
return setRepeat({
45+
from: current,
46+
to: current
47+
});
48+
}
49+
50+
return setRepeat({
51+
from: current,
52+
to: current + 3
53+
});
54+
}
55+
56+
renderRangeAyahs() {
57+
const { surah, repeat, setRepeat } = this.props;
58+
const array = Array(surah.ayat).join().split(',');
59+
60+
return (
61+
<Col md={12} style={{paddingTop: 15}}>
62+
From - To: <br />
63+
<ul className="list-inline" style={{marginBottom: 0}}>
64+
<li>
65+
<FormControl
66+
componentClass="select"
67+
value={repeat.from}
68+
onChange={(event) => setRepeat({
69+
...repeat,
70+
from: parseInt(event.target.value, 10),
71+
to: parseInt(event.target.value, 10)
72+
})}
73+
>
74+
{
75+
array.map((ayah, index) => (
76+
<option key={index} value={index + 1}>
77+
{index + 1}
78+
</option>
79+
))
80+
}
81+
</FormControl>
82+
</li>
83+
<li> - </li>
84+
<li>
85+
<FormControl
86+
componentClass="select"
87+
value={repeat.to}
88+
onChange={(event) => setRepeat({ ...repeat, to: parseInt(event.target.value, 10)})}
89+
>
90+
{
91+
array.map((ayah, index) => (
92+
<option key={index} value={repeat.from ? index + 1 + repeat.from : index + 1}>
93+
{repeat.from ? index + 1 + repeat.from : index + 1}
94+
</option>
95+
))
96+
}
97+
</FormControl>
98+
</li>
99+
</ul>
100+
</Col>
101+
);
102+
}
103+
104+
renderSingleAyah() {
105+
const { repeat, setRepeat, surah } = this.props;
106+
const array = Array(surah.ayat).join().split(',');
107+
108+
return (
109+
<Col md={12} style={{paddingTop: 15}}>
110+
Ayah: <br />
111+
<FormControl
112+
componentClass="select"
113+
value={repeat.from}
114+
onChange={(event) => setRepeat({
115+
...repeat,
116+
from: parseInt(event.target.value, 10),
117+
to: parseInt(event.target.value, 10)
118+
})}
119+
>
120+
{
121+
array.map((ayah, index) => (
122+
<option key={index} value={index + 1}>
123+
{index + 1}
124+
</option>
125+
))
126+
}
127+
</FormControl>
128+
</Col>
129+
);
130+
}
131+
132+
renderNav() {
133+
const { repeat } = this.props;
134+
135+
return (
136+
<Row className={!repeat.from && style.disabled}>
137+
<Col md={12}>
138+
<Nav
139+
bsStyle="pills"
140+
activeKey={repeat.from === repeat.to ? 1 : 2}
141+
onSelect={this.handleNavChange}
142+
>
143+
<NavItem eventKey={1} title="Single Ayah" className={style.pill}>
144+
Single
145+
</NavItem>
146+
<NavItem eventKey={2} title="Range" className={style.pill}>
147+
Range
148+
</NavItem>
149+
</Nav>
150+
</Col>
151+
</Row>
152+
);
153+
}
154+
155+
renderOptions() {
156+
const { repeat } = this.props;
157+
158+
return (
159+
<Row className={!repeat.from && style.disabled}>
160+
{repeat.from === repeat.to ? this.renderSingleAyah() : this.renderRangeAyahs()}
161+
</Row>
162+
);
163+
}
164+
165+
renderTimes() {
166+
const { repeat, setRepeat } = this.props;
167+
const times = Array(10).join().split(',');
168+
169+
return (
170+
<Row className={!repeat.from && style.disabled}>
171+
<Col md={12} style={{paddingTop: 15}}>
172+
Times: <br />
173+
<FormControl
174+
componentClass="select"
175+
value={repeat.times}
176+
onChange={(event) => setRepeat({
177+
...repeat,
178+
times: parseInt(event.target.value, 10)
179+
})}
180+
>
181+
<option value={Infinity}>
182+
Loop
183+
</option>
184+
{
185+
times.map((ayah, index) => (
186+
<option key={index} value={index + 1}>
187+
{index + 1}
188+
</option>
189+
))
190+
}
191+
</FormControl>
192+
</Col>
193+
</Row>
194+
);
195+
}
196+
197+
render() {
198+
const { repeat } = this.props;
199+
200+
const popover = (
201+
<Popover
202+
id="FontSizeDropdown"
203+
className={style.popover}
204+
title={
205+
<Row>
206+
<Col md={12} className="text-center">
207+
Toggle repeat{' '}
208+
<SwitchToggle
209+
checked={!!repeat.from}
210+
onToggle={this.handleToggle}
211+
id="repeat-toggle"
212+
flat
213+
/>
214+
</Col>
215+
</Row>
216+
}
217+
>
218+
{this.renderNav()}
219+
{this.renderOptions()}
220+
{this.renderTimes()}
221+
</Popover>
222+
);
223+
224+
return (
225+
<div className="text-center">
226+
<OverlayTrigger
227+
overlay={popover}
228+
placement="bottom"
229+
trigger="click"
230+
rootClose
231+
>
232+
<i
233+
className={`pointer ss-icon ss-repeat ${style.buttons} ${repeat.from && style.repeat}`}
234+
/>
235+
</OverlayTrigger>
236+
</div>
237+
);
238+
}
239+
}

0 commit comments

Comments
 (0)