Simplify audioplayer

package.json

@@ -50,6 +50,7 @@
     "cookie-parser": "^1.3.5",
     "copy-to-clipboard": "^1.0.4",
     "cors": "^2.7.1",
+    "crypto-js": "^3.1.6",
     "css-loader": "^0.23.1",
     "debug": "^2.2.0",
     "dotenv": "^1.2.0",
@@ -97,7 +98,6 @@
     "serialize-javascript": "^1.0.0",
     "serve-favicon": "^2.2.1",
     "sitemap": "^1.5.0",
-    "sjcl": "~1.0.3",
     "strip-loader": "^0.1.2",
     "style-loader": "^0.13.1",
     "superagent": "^1.2.0",

src/components/Audioplayer/RepeatButton/index.js

@@ -0,0 +1,39 @@
+import React, { PropTypes } from 'react';
+import OverlayTrigger from 'react-bootstrap/lib/OverlayTrigger';
+import Tooltip from 'react-bootstrap/lib/Tooltip';
+
+const style = require('../style.scss');
+
+const RepeatButton = ({ shouldRepeat, onRepeatToggle }) => {
+  const tooltip = (
+    <Tooltip id="repeat-button-tooltip">
+      Repeats the current ayah on end...
+    </Tooltip>
+  );
+
+  return (
+    <div className="text-center">
+      <input type="checkbox" id="repeat" className={style.checkbox} />
+      <OverlayTrigger
+        overlay={tooltip}
+        placement="right"
+        trigger={['hover', 'focus']}
+      >
+        <label
+          htmlFor="repeat"
+          className={`pointer ${style.buttons} ${shouldRepeat ? style.repeat : ''}`}
+          onClick={onRepeatToggle}
+        >
+          <i className="ss-icon ss-repeat" />
+        </label>
+      </OverlayTrigger>
+    </div>
+  );
+};
+
+RepeatButton.propTypes = {
+  shouldRepeat: PropTypes.bool.isRequired,
+  onRepeatToggle: PropTypes.func.isRequired
+};
+
+export default RepeatButton;

src/components/Audioplayer/RepeatButton/spec.js

@@ -0,0 +1,36 @@
+import React from 'react';
+import { mount } from 'enzyme';
+
+import RepeatButton from './index';
+
+let makeComponent, component, onRepeatToggle;
+
+describe('<RepeatButton />', () => {
+  beforeEach(() => {
+    makeComponent = (shouldRepeat) => {
+      onRepeatToggle = sinon.stub();
+
+      component = mount(
+        <RepeatButton shouldRepeat={shouldRepeat} onRepeatToggle={onRepeatToggle} />
+      );
+    }
+  });
+
+  it('should indicate that shouldRepeat', () => {
+    makeComponent(true);
+
+    expect(component.find('label').first().props().className).to.contain('repeat');
+  });
+
+  it('should not indicate that shouldRepeat', () => {
+    makeComponent(false);
+
+    expect(component.find('label').first().props().className).not.to.contain('repeat');
+  });
+
+  it('should call onRepeatToggle when clicked', () => {
+    component.find('label').first().simulate('click');
+
+    expect(onRepeatToggle).to.have.been.called;
+  });
+});

src/components/Audioplayer/ScrollButton/index.js

@@ -0,0 +1,39 @@
+import React, { PropTypes } from 'react';
+import OverlayTrigger from 'react-bootstrap/lib/OverlayTrigger';
+import Tooltip from 'react-bootstrap/lib/Tooltip';
+
+const style = require('../style.scss');
+
+const ScrollButton = ({ shouldScroll, onScrollToggle }) => {
+  const tooltip = (
+    <Tooltip id="scroll-button-tooltip">
+      Automatically scrolls to the currently playing ayah on transitions...
+    </Tooltip>
+  );
+
+  return (
+    <div className="text-center">
+      <input type="checkbox" id="scroll" className={style.checkbox} />
+      <OverlayTrigger
+        overlay={tooltip}
+        placement="right"
+        trigger={['hover', 'focus']}
+      >
+        <label
+          htmlFor="scroll"
+          className={`pointer ${style.buttons} ${shouldScroll ? style.scroll : ''}`}
+          onClick={onScrollToggle}
+        >
+          <i className="ss-icon ss-link" />
+        </label>
+      </OverlayTrigger>
+    </div>
+  );
+};
+
+ScrollButton.propTypes = {
+  shouldScroll: PropTypes.bool.isRequired,
+  onScrollToggle: PropTypes.func.isRequired
+};
+
+export default ScrollButton;

src/components/Audioplayer/ScrollButton/spec.js

@@ -0,0 +1,36 @@
+import React from 'react';
+import { mount } from 'enzyme';
+
+import ScrollButton from './index';
+
+let makeComponent, component, onScrollToggle;
+
+describe('<ScrollButton />', () => {
+  beforeEach(() => {
+    makeComponent = (shouldScroll) => {
+      onScrollToggle = sinon.stub();
+
+      component = mount(
+        <ScrollButton shouldScroll={shouldScroll} onScrollToggle={onScrollToggle} />
+      );
+    }
+  });
+
+  it('should indicate that shouldScroll', () => {
+    makeComponent(true);
+
+    expect(component.find('label').first().props().className).to.contain('scroll');
+  });
+
+  it('should not indicate that shouldScroll', () => {
+    makeComponent(false);
+
+    expect(component.find('label').first().props().className).not.to.contain('scroll');
+  });
+
+  it('should call onScrollToggle when clicked', () => {
+    component.find('label').first().simulate('click');
+
+    expect(onScrollToggle).to.have.been.called;
+  });
+});