diff --git a/package.json b/package.json
index e6958bec..1e99e687 100644
--- a/package.json
+++ b/package.json
@@ -18,6 +18,7 @@
"application-config": "^1.0.0",
"bitfield": "^1.0.2",
"chromecasts": "^1.8.0",
+ "classnames": "^2.2.5",
"create-torrent": "^3.24.5",
"deep-equal": "^1.0.1",
"dlnacasts": "^0.1.0",
@@ -47,6 +48,8 @@
"devDependencies": {
"babel-cli": "^6.11.4",
"babel-plugin-syntax-jsx": "^6.13.0",
+ "babel-plugin-transform-es2015-destructuring": "^6.9.0",
+ "babel-plugin-transform-object-rest-spread": "^6.8.0",
"babel-plugin-transform-react-jsx": "^6.8.0",
"cross-zip": "^2.0.1",
"electron-osx-sign": "^0.3.0",
diff --git a/src/.babelrc b/src/.babelrc
index 9d3c6b01..db07c35e 100644
--- a/src/.babelrc
+++ b/src/.babelrc
@@ -1,6 +1,8 @@
{
"plugins": [
"syntax-jsx",
+ "transform-es2015-destructuring",
+ "transform-object-rest-spread",
"transform-react-jsx"
]
}
diff --git a/src/renderer/views/Button.js b/src/renderer/views/Button.js
new file mode 100644
index 00000000..a8aa09d3
--- /dev/null
+++ b/src/renderer/views/Button.js
@@ -0,0 +1,40 @@
+const c = require('classnames')
+const React = require('react')
+
+class Button extends React.Component {
+ static get propTypes () {
+ return {
+ className: React.PropTypes.string,
+ onClick: React.PropTypes.func,
+ theme: React.PropTypes.oneOf(['light', 'dark']),
+ type: React.PropTypes.oneOf(['default', 'flat', 'raised'])
+ }
+ }
+
+ static get defaultProps () {
+ return {
+ theme: 'light',
+ type: 'default'
+ }
+ }
+
+ render () {
+ const { theme, type, className, ...other } = this.props
+ return (
+
+ )
+ }
+}
+
+module.exports = Button
diff --git a/src/renderer/views/PathSelector.js b/src/renderer/views/PathSelector.js
new file mode 100644
index 00000000..d5013a97
--- /dev/null
+++ b/src/renderer/views/PathSelector.js
@@ -0,0 +1,70 @@
+const c = require('classnames')
+const electron = require('electron')
+const React = require('react')
+
+const remote = electron.remote
+
+const Button = require('./Button')
+const TextInput = require('./TextInput')
+
+class PathSelector extends React.Component {
+ static get propTypes () {
+ return {
+ className: React.PropTypes.string,
+ defaultValue: React.PropTypes.string.isRequired,
+ dialog: React.PropTypes.object,
+ label: React.PropTypes.string.isRequired,
+ onChange: React.PropTypes.func
+ }
+ }
+
+ constructor (props) {
+ super(props)
+
+ this.state = {
+ value: props.defaultValue
+ }
+
+ this.handleClick = this.handleClick.bind(this)
+ }
+
+ handleClick () {
+ var opts = Object.assign({
+ defaultPath: this.state.value,
+ properties: [ 'openFile', 'openDirectory' ],
+ title: this.props.label
+ }, this.props.dialog)
+
+ remote.dialog.showOpenDialog(
+ remote.getCurrentWindow(),
+ opts,
+ (filenames) => {
+ if (!Array.isArray(filenames)) return
+ this.setState({value: filenames[0]})
+ this.props.onChange && this.props.onChange(filenames[0])
+ }
+ )
+ }
+
+ render () {
+ return (
+
+
{this.props.label}:
+
+
+
+
+
+ {DownloadPathSelector(state)}
+
+
+
+
+ {ExternalPlayerPathSelector(state)}
+
+
+
+
{this.props.title}
+ {this.props.children}
+
+ )
+ }
+}
+
+class Preference extends React.Component {
+ render () {
+ return (
+
+ {this.props.children}
+
+ )
+ }
+}
+
+function DownloadPathSelector (state) {
+ return (
+
+ )
+
+ function handleChange (filePath) {
+ dispatch('updatePreferences', 'downloadPath', filePath)
+ }
+}
+
+function ExternalPlayerPathSelector (state) {
+ return (
+ '}
+ onChange={handleChange}
+ />
+ )
+
+ function handleChange (filePath) {
+ if (path.extname(filePath) === '.app') {
+ // Get executable in packaged mac app
+ var name = path.basename(filePath, '.app')
+ filePath += '/Contents/MacOS/' + name
+ }
+ dispatch('updatePreferences', 'externalPlayerPath', filePath)
+ }
+}
+
+// function ExternalPlayerCheckbox (state) {
+// return renderCheckbox({
+// label: 'Play in External Player',
+// description: 'Media will play in external player',
+// property: 'openExternalPlayer',
+// value: state.saved.prefs.openExternalPlayer
+// },
+// state.unsaved.prefs.openExternalPlayer,
+// function (value) {
+// dispatch('updatePreferences', 'openExternalPlayer', value)
+// })
+// }
+
+// function renderCheckbox (definition, value, callback) {
+// var iconClass = 'icon clickable'
+// if (value) iconClass += ' enabled'
+
+// return (
+//
+//
+//
+//
+//
+//
+//
+//
- {renderGeneralSection(state)}
- {renderPlaybackSection(state)}
-
- )
- }
-}
-
-function renderGeneralSection (state) {
- return renderSection({
- key: 'general',
- title: 'General',
- description: '',
- icon: 'settings'
- }, [
- renderDownloadPathSelector(state),
- renderFileHandlers(state)
- ])
-}
-
-function renderPlaybackSection (state) {
- return renderSection({
- title: 'Playback',
- description: '',
- icon: 'settings'
- }, [
- renderOpenExternalPlayerSelector(state),
- renderExternalPlayerSelector(state)
- ])
-}
-
-function renderDownloadPathSelector (state) {
- return renderFileSelector({
- key: 'download-path',
- label: 'Download Path',
- description: 'Data from torrents will be saved here',
- property: 'downloadPath',
- options: {
- title: 'Select download directory',
- properties: [ 'openDirectory' ]
- }
- },
- state.unsaved.prefs.downloadPath,
- function (filePath) {
- dispatch('updatePreferences', 'downloadPath', filePath)
- })
-}
-
-function renderFileHandlers (state) {
- var definition = {
- key: 'file-handlers',
- label: 'Handle Torrent Files'
- }
- var buttonText = state.unsaved.prefs.isFileHandler
- ? 'Remove default app for torrent files'
- : 'Make WebTorrent the default app for torrent files'
- var controls = [(
-
- )]
- return renderControlGroup(definition, controls)
-
- function toggleFileHandlers () {
- var isFileHandler = state.unsaved.prefs.isFileHandler
- dispatch('updatePreferences', 'isFileHandler', !isFileHandler)
- }
-}
-
-function renderExternalPlayerSelector (state) {
- return renderFileSelector({
- label: 'External Media Player',
- description: 'Progam that will be used to play media externally',
- property: 'externalPlayerPath',
- options: {
- title: 'Select media player executable',
- properties: [ 'openFile' ]
- }
- },
- state.unsaved.prefs.externalPlayerPath || '',
- function (filePath) {
- if (path.extname(filePath) === '.app') {
- // Get executable in packaged mac app
- var name = path.basename(filePath, '.app')
- filePath += '/Contents/MacOS/' + name
- }
- dispatch('updatePreferences', 'externalPlayerPath', filePath)
- })
-}
-
-function renderOpenExternalPlayerSelector (state) {
- return renderCheckbox({
- key: 'open-external-player',
- label: 'Play in External Player',
- description: 'Media will play in external player',
- property: 'openExternalPlayer',
- value: state.saved.prefs.openExternalPlayer
- },
- state.unsaved.prefs.openExternalPlayer,
- function (value) {
- dispatch('updatePreferences', 'openExternalPlayer', value)
- })
-}
-
-// Renders a prefs section.
-// - definition should be {icon, title, description}
-// - controls should be an array of vdom elements
-function renderSection (definition, controls) {
- var helpElem = !definition.description ? null : (
-
- help_outline{definition.description}
-
- )
- return (
-
-
-
- {definition.icon}{definition.title}
-
- {helpElem}
-
- {controls}
-
-
-
-
-
-
-
-
-
-
-
-
- {controls}
-
-
-