theme refactor and bug fix

ui/dist/index.html

@@ -6,7 +6,6 @@
 
         <link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,400italic,600italic,600' rel='stylesheet' type='text/css'>
         <link href="./css/all.css" rel="stylesheet" type="text/css" media="screen,print" />
-        <link id="theme" href="" rel="stylesheet" type="text/css" media="screen,print" />
         <link rel="icon" type="image/png" href="./img/fav/favicon-32x32.png" sizes="32x32">
         <link rel="icon" type="image/png" href="./img/fav/favicon-194x194.png" sizes="194x194">
         <link rel="icon" type="image/png" href="./img/fav/favicon-96x96.png" sizes="96x96">

ui/dist/quit.html

@@ -6,7 +6,6 @@
 
     <link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,400italic,600italic,600' rel='stylesheet' type='text/css'>
     <link href="./css/all.css" rel="stylesheet" type="text/css" media="screen,print" />
-    <link href="./js/mediaelement/mediaelementplayer.css" rel="stylesheet" type="text/css" />
     <link rel="icon" type="image/png" href="./img/fav/favicon-32x32.png" sizes="32x32">
     <link rel="icon" type="image/png" href="./img/fav/favicon-194x194.png" sizes="194x194">
     <link rel="icon" type="image/png" href="./img/fav/favicon-96x96.png" sizes="96x96">

ui/js/actions/app.js

@@ -176,7 +176,6 @@ export function doDaemonReady() {
   return function(dispatch, getState) {
     dispatch(doAuthenticate());
     dispatch({ type: types.DAEMON_READY });
-    //dispatch(doSetTheme(lbry.getClientSetting(settings.THEME)));
     dispatch(doFetchDaemonSettings());
     dispatch(doFileList());
   };

ui/js/actions/settings.js

@@ -1,5 +1,6 @@
 import * as types from "constants/action_types";
 import * as settings from "constants/settings";
+import { doAlertError } from "actions/app";
 import batchActions from "util/batchActions";
 
 import lbry from "lbry";
@@ -8,8 +9,7 @@ import http from "http";
 
 const { remote } = require("electron");
 const { extname } = require("path");
-const { download } = remote.require("electron-dl");
-const { readdirSync } = remote.require("fs");
+const { readdir } = remote.require("fs");
 
 export function doFetchDaemonSettings() {
   return function(dispatch, getState) {
@@ -53,45 +53,23 @@ export function doSetClientSetting(key, value) {
 }
 
 export function doGetThemes() {
-  const dir = `${remote.app.getAppPath()}/dist/themes`;
-
-  if (!fs.existsSync(dir)) {
-    return;
-  }
-
-  // Get all .css files
-  const files = readdirSync(dir).filter(file => extname(file) === ".css");
-
   return function(dispatch, getState) {
-    // Find themes
-    const themes = files.map(file => ({
-      name: file.replace(".css", ""),
-      path: `./themes/${file}`,
-    }));
+    const dir = `${remote.app.getAppPath()}/dist/themes`;
 
-    dispatch(doSetClientSetting(settings.THEMES, themes));
-  };
-}
-
-export function doSetTheme(name) {
-  return function(dispatch, getState) {
-    // Find a theme from themes list
-    const find = themeName => themes.find(theme => theme.name === themeName);
-
-    // Get themes
-    const themes = lbry.getClientSetting(settings.THEMES);
-
-    // Find theme and set fallback
-    const theme = find(name) || find("light");
-
-    if (theme.path) {
-      // load css
-      const link = document.getElementById("theme");
-      link.href = theme.path;
-
-      // update theme
-      dispatch(doSetClientSetting(settings.THEME, theme.name));
-    }
+    readdir(dir, (error, files) => {
+      if (!error) {
+        dispatch(
+          doSetClientSetting(
+            settings.THEMES,
+            files
+              .filter(file => extname(file) === ".css")
+              .map(file => file.replace(".css", ""))
+          )
+        );
+      } else {
+        dispatch(doAlertError(error));
+      }
+    });
   };
 }
 

ui/js/component/app/view.jsx

@@ -1,6 +1,7 @@
 import React from "react";
 import Router from "component/router/index";
 import Header from "component/header";
+import Theme from "component/theme";
 import ModalRouter from "modal/modalRouter";
 import lbry from "lbry";
 
@@ -49,6 +50,7 @@ class App extends React.PureComponent {
   render() {
     return (
       <div id="window">
+        <Theme />
         <Header />
         <div id="main-content">
           <Router />

ui/js/component/theme/index.js

@@ -0,0 +1,10 @@
+import React from "react";
+import { connect } from "react-redux";
+import { selectThemePath } from "selectors/settings.js";
+import Theme from "./view";
+
+const select = state => ({
+  themePath: selectThemePath(state),
+});
+
+export default connect(select, null)(Theme);

ui/js/component/theme/view.jsx

@@ -0,0 +1,21 @@
+import React from "react";
+
+const Theme = props => {
+  const { themePath } = props;
+
+  if (!themePath) {
+    return null;
+  }
+
+  return (
+    <link
+      id="theme"
+      href={themePath}
+      rel="stylesheet"
+      type="text/css"
+      media="screen,print"
+    />
+  );
+};
+
+export default Theme;

ui/js/page/settings/index.js

@@ -1,5 +1,6 @@
 import React from "react";
 import { connect } from "react-redux";
+import * as settings from "constants/settings";
 import { doClearCache } from "actions/app";
 import {
   doSetDaemonSetting,
@@ -9,6 +10,7 @@ import {
   doChangeLanguage,
 } from "actions/settings";
 import {
+  makeSelectClientSetting,
   selectDaemonSettings,
   selectShowNsfw,
   selectLanguages,
@@ -21,14 +23,14 @@ const select = state => ({
   showNsfw: selectShowNsfw(state),
   language: selectCurrentLanguage(state),
   languages: selectLanguages(state),
+  theme: makeSelectClientSetting(settings.THEME)(state),
 });
 
 const perform = dispatch => ({
   setDaemonSetting: (key, value) => dispatch(doSetDaemonSetting(key, value)),
   clearCache: () => dispatch(doClearCache()),
   setClientSetting: (key, value) => dispatch(doSetClientSetting(key, value)),
-  setTheme: name => dispatch(doSetTheme(name)),
-  getThemes: () => dispatch(doGetThemes),
+  getThemes: () => dispatch(doGetThemes()),
   changeLanguage: newLanguage => dispatch(doChangeLanguage(newLanguage)),
 });
 

ui/js/page/settings/view.jsx

@@ -42,19 +42,6 @@ class SettingsPage extends React.PureComponent {
     this.props.setDaemonSetting(name, value);
   }
 
-  setClientSetting(name, value) {
-    lbry.setClientSetting(name, value);
-    this._onSettingSaveSuccess();
-  }
-
-  setTheme(value) {
-    this.props.setTheme(value);
-  }
-
-  getThemes() {
-    this.props.getThemes();
-  }
-
   onRunOnStartChange(event) {
     this.setDaemonSetting("run_on_startup", event.target.checked);
   }
@@ -77,7 +64,7 @@ class SettingsPage extends React.PureComponent {
 
   onThemeChange(event) {
     const { value } = event.target;
-    this.setTheme(value);
+    this.props.setClientSetting(settings.THEME, value);
   }
 
   // onMaxUploadPrefChange(isLimited) {
@@ -118,13 +105,13 @@ class SettingsPage extends React.PureComponent {
   onShowUnavailableChange(event) {}
 
   componentWillMount() {
-    this.getThemes();
+    this.props.getThemes();
   }
 
   componentDidMount() {}
 
   render() {
-    const { daemonSettings, language, languages } = this.props;
+    const { daemonSettings, language, languages, theme } = this.props;
 
     if (!daemonSettings || Object.keys(daemonSettings).length === 0) {
       return (
@@ -270,12 +257,12 @@ class SettingsPage extends React.PureComponent {
             <FormField
               type="select"
               onChange={this.onThemeChange.bind(this)}
-              defaultValue={lbry.getClientSetting("theme")}
+              value={theme}
               className="form-field__input--inline"
             >
               {this.state.themes.map((theme, index) =>
-                <option key={index} value={theme.name}>
-                  {__(`${theme.name} theme`)}
+                <option key={theme} value={theme}>
+                  {theme}
                 </option>
               )}
             </FormField>

ui/js/selectors/settings.js

@@ -1,3 +1,4 @@
+import * as settings from "constants/settings";
 import { createSelector } from "reselect";
 
 const _selectState = state => state.settings || {};
@@ -33,3 +34,8 @@ export const selectLanguages = createSelector(
   _selectState,
   state => state.languages || {}
 );
+
+export const selectThemePath = createSelector(
+  makeSelectClientSetting(settings.THEME),
+  theme => "themes/" + (theme || "light") + ".css"
+);