Implement app theming so we can mirror the users look and feel of the desktop client

MarshallOfSound · MarshallOfSound · commit 325158c21d05 · 2016-06-09T01:59:06.000+10:00
diff --git a/android/app/src/main/res/values/styles.xml b/android/app/src/main/res/values/styles.xml
@@ -3,6 +3,7 @@
     <!-- Base application theme. -->
     <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
         <!-- Customize your theme here. -->
+        <item name="android:textColorSecondary">@android:color/white</item>
     </style>
 
 </resources>
diff --git a/src/app.js b/src/app.js
@@ -5,12 +5,14 @@ import HomeScreen from './screens/HomeScreen'
 import PlaylistScreen from './screens/PlaylistScreen'
 import SettingsScreen from './screens/SettingsScreen'
 import SettingsStore from './stores/SettingsStore'
+import ThemeStore from './stores/ThemeStore'
 import TrackStore from './stores/TrackStore'
 import WebSocketStore from './stores/WebSocketStore'
 
 const settingsStore = new SettingsStore()
+const themeStore = new ThemeStore()
 const trackStore = new TrackStore()
-const webSocketStore = new WebSocketStore(trackStore)
+const webSocketStore = new WebSocketStore(trackStore, themeStore)
 
 setTheme({
   primaryColor: MKColor.Orange,
@@ -44,14 +46,14 @@ export default class App extends Component {
         renderScene={(route, navigator) => {
           switch (route.name) {
             case 'playlist': {
-              return (<PlaylistScreen navigator={navigator} webSocketStore={webSocketStore} playlist={route.playlist} />)
+              return (<PlaylistScreen navigator={navigator} webSocketStore={webSocketStore} playlist={route.playlist} themeStore={themeStore} />)
             }
             case 'settings': {
-              return (<SettingsScreen navigator={navigator} settingsStore={settingsStore} />)
+              return (<SettingsScreen navigator={navigator} settingsStore={settingsStore} themeStore={themeStore} />)
             }
             default:
             case 'remote': {
-              return (<HomeScreen trackStore={trackStore} webSocketStore={webSocketStore} navigator={navigator} settingsStore={settingsStore} />)
+              return (<HomeScreen trackStore={trackStore} webSocketStore={webSocketStore} navigator={navigator} settingsStore={settingsStore} themeStore={themeStore} />)
             }
           }
         }}
diff --git a/src/components/ControlBar.js b/src/components/ControlBar.js
@@ -19,7 +19,11 @@ export default class ControlBar extends React.Component {
     onPrevPress: PropTypes.func,
     onNextPress: PropTypes.func,
     onRepeatPress: PropTypes.func,
-    onShufflePress: PropTypes.func
+    onShufflePress: PropTypes.func,
+
+    backgroundColor: PropTypes.string,
+    foreColor: PropTypes.string,
+    highlightColor: PropTypes.string
   }
 
   static defaultProps = {
@@ -28,31 +32,31 @@ export default class ControlBar extends React.Component {
   }
 
   render = () => {
-    const { landscape, onPlayPress, onPrevPress, onNextPress, onRepeatPress, onShufflePress, isPlaying, isStopped, repeatMode, shuffleMode } = this.props
+    const { landscape, onPlayPress, onPrevPress, onNextPress, onRepeatPress, onShufflePress, isPlaying, isStopped, repeatMode, shuffleMode, backgroundColor, foreColor, highlightColor } = this.props
 
-    let repeatColor = colors.GREY_DARK
-    let shuffleColor = colors.GREY_DARK
+    let repeatColor = foreColor
+    let shuffleColor = foreColor
     if (repeatMode !== 'NO_REPEAT') {
-      repeatColor = colors.ORANGE
+      repeatColor = highlightColor
     }
     if (shuffleMode !== 'NO_SHUFFLE') {
-      shuffleColor = colors.ORANGE
+      shuffleColor = highlightColor
     }
     const repeatIcon = <IconMaterial name={repeatMode === 'SINGLE_REPEAT' ? 'repeat-one' : 'repeat'} size={landscape ? 20 : 26} color={repeatColor} />
-    const prevIcon = <IconMaterial name={'skip-previous'} size={landscape ? 20 : 26} color={colors.GREY_DARK} />
-    const nextIcon = <IconMaterial name={'skip-next'} size={landscape ? 20 : 26} color={colors.GREY_DARK} />
+    const prevIcon = <IconMaterial name={'skip-previous'} size={landscape ? 20 : 26} color={foreColor} />
+    const nextIcon = <IconMaterial name={'skip-next'} size={landscape ? 20 : 26} color={foreColor} />
     const shuffleIcon = <IconMaterial name={'shuffle'} size={landscape ? 20 : 26} color={shuffleColor} />
 
     return (
-      <View style={[theme.cardStyle, landscape ? styles.landscapeContainer : styles.container]}>
+      <View style={[theme.cardStyle, landscape ? styles.landscapeContainer : styles.container, { backgroundColor, borderColor: backgroundColor, borderRadius: 0 }]}>
         <CircleButton onPress={onRepeatPress} size={landscape ? 32 : 42}>
           {repeatIcon}
         </CircleButton>
         <CircleButton onPress={onPrevPress} size={landscape ? 32 : 42}>
           {prevIcon}
         </CircleButton>
         <CircleButton onPress={onPlayPress} size={landscape ? 55 : 84}>
-          <PlayPauseButton isPlaying={isPlaying} isStopped={isStopped} landscape={landscape} />
+          <PlayPauseButton color={highlightColor} isPlaying={isPlaying} isStopped={isStopped} landscape={landscape} />
         </CircleButton>
         <CircleButton onPress={onNextPress} size={landscape ? 32 : 42}>
           {nextIcon}
diff --git a/src/components/PlayPauseButton.js b/src/components/PlayPauseButton.js
@@ -6,24 +6,25 @@ import colors from '../theme/colors'
 
 export default class PlayPauseButton extends React.Component {
   static propTypes = {
+    color: PropTypes.string,
     isPlaying: PropTypes.bool,
     isStopped: PropTypes.bool,
     landscape: PropTypes.bool
   }
 
   render () {
-    const { isPlaying, isStopped, landscape } = this.props
+    const { color, isPlaying, isStopped, landscape } = this.props
 
     const playIcon = (
-      <View style={[landscape ? styles.playPauseButtonLandscape : styles.playPauseButton, styles.playIcon]}>
+      <View style={[landscape ? styles.playPauseButtonLandscape : styles.playPauseButton, { backgroundColor: color }]}>
         <Text>
           {' '}<IconEntypo name={'controller-play'} size={landscape ? 26 : 40} color={colors.WHITE} />
         </Text>
       </View>
     )
 
     const pauseIcon = (
-      <View style={[landscape ? styles.playPauseButtonLandscape : styles.playPauseButton, styles.pauseIcon]}>
+      <View style={[landscape ? styles.playPauseButtonLandscape : styles.playPauseButton, { backgroundColor: color }]}>
         <IconEntypo name={'controller-paus'} size={landscape ? 26 : 40} color={colors.WHITE} />
       </View>
     )
diff --git a/src/components/PlaylistNavigation.js b/src/components/PlaylistNavigation.js
@@ -4,20 +4,23 @@ import colors from '../theme/colors'
 
 export default class PlaylistNavigation extends Component {
   static propTypes = {
+    backgroundColor: PropTypes.string,
+    foreColor: PropTypes.string,
     playlistsDataStore: PropTypes.object,
     navigate: PropTypes.func
   }
 
   render () {
-    const { playlistsDataStore, navigate } = this.props
+    const { playlistsDataStore, navigate, backgroundColor, foreColor } = this.props
 
     return (
       <ListView
         dataSource={playlistsDataStore}
         enableEmptySections={true}
+        style={{ backgroundColor }}
         renderHeader={() => (
           <View style={styles.listItem}>
-            <Text style={{ fontWeight: 'bold', fontSize: 24 }}>Playlists</Text>
+            <Text style={{ fontWeight: 'bold', fontSize: 24, color: foreColor }}>Playlists</Text>
           </View>
         )}
         renderRow={(playlist) => {
@@ -28,7 +31,7 @@ export default class PlaylistNavigation extends Component {
             >
               <View>
                 <View style={styles.listItem}>
-                  <Text>{playlist.name}</Text>
+                  <Text style={{ color: foreColor }}>{playlist.name}</Text>
                 </View>
               </View>
             </TouchableNativeFeedback>
diff --git a/src/components/ProgressSlider.js b/src/components/ProgressSlider.js
@@ -8,6 +8,7 @@ import metrics from '../theme/metrics'
 @observer
 export default class ProgressSlider extends React.Component {
   static propTypes = {
+    highlightColor: PropTypes.string,
     min: PropTypes.number,
     max: PropTypes.number,
     value: PropTypes.number,
@@ -39,7 +40,7 @@ export default class ProgressSlider extends React.Component {
   }
 
   render () {
-    const { min, max } = this.props
+    const { highlightColor, min, max } = this.props
     return (
       <CustomSlider
         ref={'slider'}
@@ -50,7 +51,7 @@ export default class ProgressSlider extends React.Component {
         onPress={this._handlePress}
         onConfirm={this._handleConfirm}
         upperTrackColor="rgba(0, 0, 0, 0)"
-        lowerTrackColor={colors.ORANGE}
+        lowerTrackColor={highlightColor}
       />
     )
   }
diff --git a/src/components/Toolbar.js b/src/components/Toolbar.js
@@ -5,6 +5,7 @@ import colors from '../theme/colors'
 
 export default class Toolbar extends Component {
   static propTypes = {
+    color: PropTypes.string,
     drawerFunction: PropTypes.func,
     navigator: PropTypes.object,
     title: PropTypes.string,
@@ -31,7 +32,7 @@ export default class Toolbar extends Component {
   }
 
   render () {
-    const { title, settingsMenu, showDrawer, drawerFunction } = this.props
+    const { color, title, settingsMenu, showDrawer, drawerFunction } = this.props
     const actions = [
       {
         title: 'Settings'
@@ -42,7 +43,7 @@ export default class Toolbar extends Component {
       <Icon.ToolbarAndroid
         navIconName={showDrawer ? 'md-menu' : 'md-arrow-back'}
         onIconClicked={showDrawer ? drawerFunction : this._backButtonPressed}
-        style={styles.toolbar}
+        style={[styles.toolbar, { backgroundColor: color }]}
         titleColor={'white'}
         title={title}
         actions={(settingsMenu ? actions : null)}
@@ -54,7 +55,6 @@ export default class Toolbar extends Component {
 
 const styles = StyleSheet.create({
   toolbar: {
-    backgroundColor: colors.ORANGE,
     height: 56,
     elevation: 2
   }
diff --git a/src/screens/HomeScreen.js b/src/screens/HomeScreen.js
@@ -18,6 +18,7 @@ export default class HomeScreen extends Component {
     navigator: PropTypes.object,
     settingsStore: PropTypes.object,
     trackStore: PropTypes.object,
+    themeStore: PropTypes.object,
     webSocketStore: PropTypes.object
   }
 
@@ -141,6 +142,7 @@ export default class HomeScreen extends Component {
       isStopped, currentTime, totalTime, repeatMode, shuffleMode } = this.props.trackStore
     const { playlistsDataStore, queueDataStore } = this.props.trackStore
     const { isConnected } = this.props.webSocketStore
+    const { themeStore } = this.props
 
     if (!isConnected) {
       title = 'Not Connected'
@@ -166,10 +168,14 @@ export default class HomeScreen extends Component {
         ref="drawer"
         drawerWidth={300}
         drawerPosition={DrawerLayoutAndroid.positions.Left}
-        renderNavigationView={() => <PlaylistNavigation playlistsDataStore={playlistsDataStore} navigate={this._handlePlaylistNavigation} />}
+        renderNavigationView={() =>
+          <PlaylistNavigation
+            backgroundColor={themeStore.backgroundColor()} foreColor={themeStore.foreColor()}
+            playlistsDataStore={playlistsDataStore} navigate={this._handlePlaylistNavigation}
+          />}
       >
-        <View style={styles.container}>
-          <StatusBar animated hidden={this.state.bouncing} backgroundColor={colors.ORANGE_DARK} />
+        <View style={[styles.container, { backgroundColor: this.props.themeStore.backgroundColor() }]}>
+          <StatusBar animated hidden={this.state.bouncing} backgroundColor={this.props.themeStore.barColor()} />
           <View style={styles.content}>
             <View style={{ flex: 1, alignItems: 'center' }}>
               <TouchableWithoutFeedback onPress={this._imageTap}>
@@ -192,15 +198,16 @@ export default class HomeScreen extends Component {
               : null
             }
             <Animated.View style={[styles.toolbar, { transform: [{ translateY: this.state.bounceUpValue }] }]} >
-              <Toolbar title={'Home'} navigator={this.props.navigator} settingsMenu showDrawer drawerFunction={() => { this.refs.drawer.openDrawer() }} />
+              <Toolbar title={'Home'} color={themeStore.barColor()} navigator={this.props.navigator} settingsMenu showDrawer drawerFunction={() => { this.refs.drawer.openDrawer() }} />
             </Animated.View>
             <Animated.View style={[styles.toolbarSongInfo, { transform: [{ translateY: this.state.bounceUpValue }] }]} >
               <SongInfo title={title} artist={artist} album={album} onPress={this._handleSongInfoPress} />
             </Animated.View>
             <Animated.View style={[styles.controlBar, { transform: [{ translateY: this.state.bounceDownValue }] }]} >
               <ControlBar
+                backgroundColor={themeStore.backgroundColor()} foreColor={themeStore.foreColor()} highlightColor={themeStore.highlightColor()}
                 isPlaying={isPlaying} isStopped={isStopped} landscape={this.state.orientation === 'LANDSCAPE'}
-                repeatMode={repeatMode} shuffleMode={shuffleMode}
+                repeatMode={repeatMode} shuffleMode={shuffleMode} themeStore={this.props.themeStore}
                 onPlayPress={this._handlePlayPress} onPrevPress={this._handlePrevPress} onNextPress={this._handleNextPress}
                 onShufflePress={this._handleShufflePress} onRepeatPress={this._handleRepeatPress}
               />
@@ -212,7 +219,7 @@ export default class HomeScreen extends Component {
               }]}
             >
               <ProgressSlider
-                ref={'progressSlider'} min={0} max={totalTime}
+                ref={'progressSlider'} min={0} max={totalTime} highlightColor={themeStore.highlightColor()}
                 value={currentTime} onValueChange={this._handleProgressBarTouch}
               />
             </Animated.View>
diff --git a/src/screens/PlaylistScreen.js b/src/screens/PlaylistScreen.js
@@ -10,6 +10,7 @@ export default class PlaylistScreen extends Component {
   static propTypes = {
     navigator: PropTypes.object,
     playlist: PropTypes.object,
+    themeStore: PropTypes.object,
     webSocketStore: PropTypes.object
   }
 
@@ -28,7 +29,7 @@ export default class PlaylistScreen extends Component {
   }
 
   render () {
-    const { playlist } = this.props
+    const { playlist, themeStore } = this.props
     let ds = new ListView.DataSource({ rowHasChanged: (r1, r2) => JSON.stringify(r1) !== JSON.stringify(r2) })
     const cleanTracks = []
     for (let i = 0; i < playlist.tracks.length; i++) {
@@ -47,11 +48,11 @@ export default class PlaylistScreen extends Component {
     ds = ds.cloneWithRows(cleanTracks)
 
     return (
-      <View style={styles.container}>
-        <StatusBar animated backgroundColor={colors.ORANGE_DARK} />
-        <Toolbar title={playlist.name} navigator={this.props.navigator} />
-        <View style={styles.content}>
-          <SongList black data={ds} handlePress={this._handlePress} />
+      <View style={[styles.container]}>
+        <StatusBar animated backgroundColor={themeStore.barColor()} />
+        <Toolbar title={playlist.name} navigator={this.props.navigator} color={themeStore.barColor()} />
+        <View style={[styles.content, { backgroundColor: themeStore.backgroundColor() }]}>
+          <SongList black={!(themeStore.themeEnabled && themeStore.themeType === 'FULL')} data={ds} handlePress={this._handlePress} />
         </View>
       </View>
     )
@@ -64,8 +65,7 @@ const styles = StyleSheet.create({
     alignSelf: 'stretch'
   },
   content: {
-    flex: 1,
-    backgroundColor: colors.GREY_LIGHTER
+    flex: 1
   },
   controlBar: {
     flex: 0,
diff --git a/src/screens/SettingsScreen.js b/src/screens/SettingsScreen.js
@@ -12,26 +12,29 @@ const theme = getTheme()
 export default class SettingsScreen extends Component {
   static propTypes = {
     navigator: PropTypes.object,
-    settingsStore: PropTypes.object
+    settingsStore: PropTypes.object,
+    themeStore: PropTypes.object
   }
 
   _ipChanged = (newIP) => {
     this.props.settingsStore.updateIPAddress(newIP)
   }
 
   render () {
+    const { themeStore } = this.props
     return (
-      <View style={styles.container}>
-        <StatusBar animated backgroundColor={colors.ORANGE_DARK} />
-        <Toolbar title={'Settings'} navigator={this.props.navigator} />
+      <View style={[styles.container, { backgroundColor: themeStore.backgroundColor() }]}>
+        <StatusBar animated backgroundColor={themeStore.barColor()} />
+        <Toolbar title={'Settings'} navigator={this.props.navigator} color={themeStore.barColor()} />
         <View style={styles.content}>
           <View style={styles.settingsContent}>
-            <Text>GPMDP IP Address</Text>
+            <Text style={{ color: themeStore.foreColor() }}>GPMDP IP Address</Text>
             <TextInput
+              style={{ color: themeStore.foreColor() }}
               autoCorrect={false}
               defaultValue={this.props.settingsStore.IP_ADDRESS === 'NOT_SET' ? '' : this.props.settingsStore.IP_ADDRESS}
               keyboardType="numeric"
-              underlineColorAndroid={colors.ORANGE_DARK}
+              underlineColorAndroid={themeStore.highlightColor()}
               placeholder="GPMDP IP Address"
               onChangeText={this._ipChanged}
             />
@@ -48,8 +51,7 @@ const styles = StyleSheet.create({
     alignSelf: 'stretch'
   },
   content: {
-    flex: 1,
-    backgroundColor: colors.GREY_LIGHTER
+    flex: 1
   },
   controlBar: {
     flex: 0,
diff --git a/src/stores/ThemeStore.js b/src/stores/ThemeStore.js
diff --git a/src/stores/TrackStore.js b/src/stores/TrackStore.js
diff --git a/src/stores/WebSocketStore.js b/src/stores/WebSocketStore.js
