basic color pickers implemented

src/common/ColorPicker/ColorPicker.js

@@ -0,0 +1,42 @@
+const React = require('react');
+const PropTypes = require('prop-types');
+const { SketchPicker } = require('react-color');
+
+class ColorPicker extends React.Component {
+    onContainerClicked = (e) => {
+        e.stopPropagation();
+    }
+
+    onColorChanged = (color) => {
+        const value = '#' + `0${color.rgb.r.toString(16)}`.slice(-2) +
+            `0${color.rgb.g.toString(16)}`.slice(-2) +
+            `0${color.rgb.b.toString(16)}`.slice(-2) +
+            `0${Math.round(color.rgb.a * 255).toString(16)}`.slice(-2);
+        if (typeof this.props.onChange === 'function') {
+            this.props.onChange(value);
+        }
+    }
+
+    render() {
+        return (
+            <div className={this.props.className} onClick={this.onContainerClicked}>
+                <SketchPicker
+                    width={''}
+                    color={this.props.value}
+                    presetColors={[]}
+                    onChangeComplete={this.onColorChanged}
+                />
+            </div>
+        );
+    }
+}
+
+ColorPicker.propTypes = {
+    className: PropTypes.string,
+    value: PropTypes.string.isRequired,
+    onChange: PropTypes.func,
+    onOpen: PropTypes.func,
+    onClose: PropTypes.func
+};
+
+module.exports = ColorPicker;

src/common/ColorPicker/index.js

@@ -0,0 +1,3 @@
+const ColorPicker = require('./ColorPicker');
+
+module.exports = ColorPicker;

src/common/index.js

@@ -1,6 +1,7 @@
 import Slider from './Slider';
 import { FocusableProvider, withFocusable } from './Focusable';
 import Checkbox from './Checkbox';
+import ColorPicker from './ColorPicker';
 import Input from './Input';
 import { Modal, ModalsContainerContext, withModalsContainer } from './Modal';
 import Popup from './Popup';
@@ -13,6 +14,7 @@ import Loader from './Loader';
 
 export {
     Checkbox,
+    ColorPicker,
     Input,
     Popup,
     NavBar,

src/routes/Player/ControlBar/SubtitlesButton/SubtitlesPicker/SubtitlesPicker.js

@@ -116,16 +116,16 @@ class SubtitlesPicker extends React.Component {
         this.props.dispatch({ propName: 'subtitlesDelay', propValue: event.currentTarget.dataset.value });
     }
 
-    setSubtitlesTextColor = (event) => {
-        // TODO fix it
+    setSubtitlesTextColor = (color) => {
+        this.props.dispatch({ propName: 'subtitlesTextColor', propValue: color });
     }
 
-    setSubtitlesBackgroundColor = (event) => {
-        // TODO fix it
+    setSubtitlesBackgroundColor = (color) => {
+        this.props.dispatch({ propName: 'subtitlesBackgroundColor', propValue: color });
     }
 
-    setSubtitlesOutlineColor = (event) => {
-        // TODO fix it
+    setSubtitlesOutlineColor = (color) => {
+        this.props.dispatch({ propName: 'subtitlesOutlineColor', propValue: color });
     }
 
     renderToggleButton({ selectedTrack }) {

src/routes/Player/ControlBar/SubtitlesButton/SubtitlesPicker/styles.less

@@ -223,9 +223,13 @@
 .color-picker-modal-container {
     width: 100%;
     height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
 
     .color-picker-container {
-        width: 80vmin;
-        height: 50vmin;
+        width: 35vmin;
+        height: 35vmin;
+        overflow: hidden;
     }
 }