settings page

src/app/routerConfig.js

@@ -1,4 +1,4 @@
-import { Calendar, Discover, Addons, Board } from 'stremio-routes';
+import { Calendar, Discover, Addons, Settings, Board } from 'stremio-routes';
 
 const config = {
     views: [
@@ -23,6 +23,10 @@ const config = {
                 {
                     path: '/addons',
                     component: Addons
+                },
+                {
+                    path: '/settings',
+                    component: Settings
                 }
             ]
         }

src/routes/Settings/Settings.js

@@ -0,0 +1,41 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import styles from './styles';
+import SettingsExpanded from './SettingsExpanded';
+
+class Settings extends Component {
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            selectedMenu: 'player_preferences'
+        }
+
+        this.changeSettings = this.changeSettings.bind(this);
+    }
+
+    changeSettings(selectedMenu) {
+        this.setState({ selectedMenu });
+    }
+
+    render() {
+        return (
+            <div className={styles['settings']}>
+                <div className={styles['options']}>
+                    <span onClick={() => { this.changeSettings('player_preferences') }} className={styles['option']}>Player Preferences</span>
+                    <span onClick={() => { this.changeSettings('language') }} className={styles['option']}>Language</span>
+                    <span className={styles['option']}>Account Setttings</span>
+                    <span className={styles['option']}>Notifications</span>
+                    <span className={styles['option']}>Data Caching</span>
+                </div>
+                <SettingsExpanded selectedMenu={this.state.selectedMenu} />
+            </div>
+        );
+    }
+}
+
+Settings.propTypes = {
+    changeSettings: PropTypes.func
+};
+
+export default Settings;

src/routes/Settings/SettingsExpanded.js

@@ -0,0 +1,79 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import Icon from 'stremio-icons/dom';
+import styles from './styles';
+
+class SettingsExpanded extends Component {
+    constructor(props) {
+        super(props);
+
+        this.renderPlayerPreferences = this.renderPlayerPreferences.bind(this);
+        this.renderLanguage = this.renderLanguage.bind(this);
+    }
+
+    renderPlayerPreferences = () => {
+        const preferences = ["Auto-play next episode", "Data saver"];
+
+        return (
+            <div className={styles['player-preferences']}>
+                <label className={styles['preference-container']}>
+                    <input type='checkbox' className={styles['default-checkbox']} />
+                    <span className={styles['preference']}>Hardware-accelerated decoding</span>
+                    <p className={styles['checkbox']}>
+                        <Icon className={styles['checkmark']} icon={'ic_check'} />
+                    </p>
+                </label>
+                {preferences.map((item, key) => {
+                    return (
+                        <label key={key} className={styles['preference-container1']}>
+                            <input type="checkbox" />
+                            <span className={styles['slider']}></span>
+                            <div className={styles['preference']}>{item}</div>
+                        </label>
+                    );
+                })}
+            </div>
+        );
+    }
+
+    renderLanguage = () => {
+        return (
+            <div className={styles['language']}>
+                <div className={styles['interface-language']}>
+                    <span className={styles['headline']}>INTERFACE LANGUAGE</span>
+                    <div className={styles['name']}>English
+                        <Icon className={styles['arrow-down']} icon={'ic_arrow_down'} />
+                    </div>
+                </div>
+                <div className={styles['default-subtitles-language']}>
+                    <span className={styles['headline']}>DEFAULT SUBTITLES LANGUAGE</span>
+                    <div className={styles['name']}>Portugese - BR
+                        <Icon className={styles['arrow-down']} icon={'ic_arrow_down'} />
+                    </div>
+                </div>
+            </div>
+        );
+    }
+
+    render() {
+        const { selectedMenu } = this.props;
+        
+        if (selectedMenu == "player_preferences") {
+            return (
+                <div> {this.renderPlayerPreferences()} </div>
+            );
+        } else if (selectedMenu == "language") {
+            return (
+                <div>{this.renderLanguage()} </div>
+            );
+        }
+    }
+}
+
+SettingsExpanded.propTypes = {
+    selectedMenu: PropTypes.string,
+    renderPlayerPreferences: PropTypes.func,
+    renderLanguage: PropTypes.func
+};
+
+export default SettingsExpanded;

src/routes/Settings/index.js

@@ -0,0 +1,3 @@
+import Settings from './Settings';
+
+export default Settings;

src/routes/Settings/styles.less

@@ -0,0 +1,143 @@
+@import 'stremio-colors';
+.settings {
+    height: 100%;
+    display: flex;
+    color: @colorwhite60;
+    font-family: LatoLight;
+    .options {
+        width: 240px;
+        padding: 20px;
+        display: flex;
+        font-size: 14px;
+        flex-direction: column;
+        background: @colordarkest;
+        .option {
+            padding: 14px;
+            font-weight: 600;
+            &:hover {
+                cursor: pointer;
+                color: @colorwhite;
+                background: @colorglass;
+            }
+        }
+        .selected {
+            cursor: pointer;
+            color: @colorwhite;
+            background: @colorglass;
+        }
+    }
+    .player-preferences {
+        height: 150px;
+        margin: 60px 50px;
+        border-bottom: 1px solid @colormedium;
+        .preference-container {
+            display: flex;
+            cursor: pointer;
+            margin: 30px 0px;
+            justify-content: space-between;
+            align-items: center;
+            .preference {
+                width: 280px;
+            }
+            .default-checkbox {
+                display: none;
+            }
+            .checkbox {
+                width: 14px;
+                height: 14px;
+                cursor: pointer;
+                border: 2px solid @colorwhite60;
+                .checkmark {
+                    width: 10px;
+                    height: 10px;
+                    display: none;
+                    fill: @colorwhite;
+                }
+            }
+            input:checked ~ .checkbox {
+                background-color: @colorprimlight;
+                border: 2px solid @colorprimlight;
+                .checkmark {
+                    display: block;
+                }
+            }
+            input:checked ~ .preference {
+                color: @colorwhite;
+            }
+        }
+        .preference-container1 {
+            display: flex;
+            cursor: pointer;
+            margin: 30px 0px;
+            align-items: center;
+            flex-direction: row-reverse;
+            .preference {
+                width: 280px;
+            }
+            input { 
+                visibility: hidden;
+            }
+            .slider {
+                cursor: pointer;
+                position: absolute;
+                border-radius: 50px;
+                width: 22px;
+                height: 10px;
+                background-color: @colorneutral;
+            }
+            .slider:before {
+                position: absolute;
+                border-radius: 50%;
+                content: "";
+                height: 14px;
+                width: 14px;
+                bottom: -2px;
+                transition: .4s;
+                -webkit-transition: .4s;
+                background-color: @colorwhite;
+            }
+            input:checked + .slider:before {
+                transform: translateX(8px);
+                background-color: @colorsignal5;
+            }
+            input:checked ~ .preference {
+                color: @colorwhite;
+            }
+        }
+    }
+    .language {
+        margin: 40px 50px;
+        .interface-language {
+            margin-bottom: 30px;
+        }
+        .interface-language, .default-subtitles-language {
+            border-bottom: 1px solid @colormedium;
+            .headline {
+                font-weight: 600;
+                color: @colorwhite40;
+            }
+            .name {
+                height: 40px;
+                width: 250px;
+                padding: 20px;
+                display: flex;
+                margin: 30px 0px;
+                align-items: center;
+                justify-content: space-between;
+                font-weight: 600;
+                color: @colorwhite;
+                background-color: @colordarkest;
+                border: 1px solid @colortransparent;
+                .arrow-down {
+                    width: 8px;
+                    height: 10px;
+                    fill: @colorwhite40;
+                }
+                &:hover {
+                    cursor: pointer;
+                    border: 1px solid @colormedium;
+                }
+            }
+        }
+    }
+}

src/routes/index.js

@@ -5,6 +5,7 @@ import Discover from './Discover';
 import Library from './Library';
 import Calendar from './Calendar';
 import Search from './Search';
+import Settings from './Settings';
 
 export {
     Addons,
@@ -13,5 +14,6 @@ export {
     Discover,
     Library,
     Calendar,
-    Search
+    Search,
+    Settings
 };