From 43cd79b2c2ed6993e737f1d7186dc7347da24966 Mon Sep 17 00:00:00 2001
From: NikolaBorislavovHristov <hristovnikola@protonmail.com>
Date: Tue, 9 Apr 2019 11:38:32 +0300
Subject: [PATCH] basic color pickers implemented

---
 src/common/ColorPicker/ColorPicker.js         | 42 +++++++++++++++++++
 src/common/ColorPicker/index.js               |  3 ++
 src/common/index.js                           |  2 +
 .../SubtitlesPicker/SubtitlesPicker.js        | 12 +++---
 .../SubtitlesPicker/styles.less               |  8 +++-
 5 files changed, 59 insertions(+), 8 deletions(-)
 create mode 100644 src/common/ColorPicker/ColorPicker.js
 create mode 100644 src/common/ColorPicker/index.js

diff --git a/src/common/ColorPicker/ColorPicker.js b/src/common/ColorPicker/ColorPicker.js
new file mode 100644
index 000000000..14d0f2eca
--- /dev/null
+++ b/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;
diff --git a/src/common/ColorPicker/index.js b/src/common/ColorPicker/index.js
new file mode 100644
index 000000000..92141d7a2
--- /dev/null
+++ b/src/common/ColorPicker/index.js
@@ -0,0 +1,3 @@
+const ColorPicker = require('./ColorPicker');
+
+module.exports = ColorPicker;
diff --git a/src/common/index.js b/src/common/index.js
index 94fd324b1..bacae8d21 100644
--- a/src/common/index.js
+++ b/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,
diff --git a/src/routes/Player/ControlBar/SubtitlesButton/SubtitlesPicker/SubtitlesPicker.js b/src/routes/Player/ControlBar/SubtitlesButton/SubtitlesPicker/SubtitlesPicker.js
index 9ab16da4d..c98cf653b 100644
--- a/src/routes/Player/ControlBar/SubtitlesButton/SubtitlesPicker/SubtitlesPicker.js
+++ b/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 }) {
diff --git a/src/routes/Player/ControlBar/SubtitlesButton/SubtitlesPicker/styles.less b/src/routes/Player/ControlBar/SubtitlesButton/SubtitlesPicker/styles.less
index 4e565796a..ac9bd7441 100644
--- a/src/routes/Player/ControlBar/SubtitlesButton/SubtitlesPicker/styles.less
+++ b/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;
     }
 }
\ No newline at end of file