Merge pull request #39 from dmtrKovalenko/Layout-refactoring

Layout refactoring

config/webpack.config.js

@@ -185,7 +185,7 @@ webpackConfig.module.loaders.push(
   { test: /\.ttf(\?.*)?$/,   loader: 'url?prefix=fonts/&name=[path][name].[ext]&limit=10000&mimetype=application/octet-stream' },
   { test: /\.eot(\?.*)?$/,   loader: 'file?prefix=fonts/&name=[path][name].[ext]' },
   { test: /\.svg(\?.*)?$/,   loader: 'url?prefix=fonts/&name=[path][name].[ext]&limit=10000&mimetype=image/svg+xml' },
-  { test: /\.(png|jpg)$/,    loader: 'url?limit=8192' }
+  { test: /\.(png|jpg|gif)$/,    loader: 'url?limit=8192' }
 )
 /* eslint-enable */
 

src/layouts/CoreLayout/CoreLayout.js

@@ -0,0 +1,24 @@
+import React from 'react'
+import Player from './Player/PlayerContainer'
+import PlayerControls from './PlayerControls/PlayerControlsContainer'
+import Navbar from './Navbar/NavbarContainer'
+import '../../styles/core.scss'
+
+export const CoreLayout = (props) => (
+  <div className='app'>
+    <Navbar router={props.router} />
+
+    <div className='main-content'>
+      {props.children}
+    </div>
+
+    <PlayerControls />
+    <Player />
+  </div>
+)
+
+CoreLayout.propTypes = {
+  children : React.PropTypes.element.isRequired
+}
+
+export default CoreLayout

src/layouts/CoreLayout/Navbar/NavbarContainer.js

@@ -0,0 +1,14 @@
+import { connect } from 'react-redux'
+import * as actions from '../../../player-module/player-actions'
+
+import Navbar from './components/Navbar'
+
+const mapDispatchToProps = {
+  changeFilter: actions.changeFilter
+}
+
+const mapStateToProps = (state) => ({
+  filter: state.player.filter
+})
+
+export default connect(mapStateToProps, mapDispatchToProps)(Navbar)

src/layouts/CoreLayout/components/FilterComponents/FilterModal.js → src/layouts/CoreLayout/Navbar/components/Filter/FilterModal.js

@@ -4,7 +4,7 @@ import FlatButton from 'material-ui/FlatButton'
 import GenreChip from './GenreChip'
 import FilterSelect from './FilterSelect'
 import MenuItem from 'material-ui/MenuItem'
-import * as filterConstants from '../../../../constants/FiltersConstants'
+import * as filterConstants from '../../../../../constants/FiltersConstants'
 import '../../styles/Filters.scss'
 
 class FilterModal extends React.Component {

src/layouts/CoreLayout/Navbar/components/Navbar.js

@@ -0,0 +1,15 @@
+import React from 'react'
+import StickyNav from './StickyNav/StickyNavBar'
+import SearchBar from './StickyNav/SearchBar'
+
+const Navbar = props => {
+  return (
+    <StickyNav>
+      <SearchBar router={props.router}
+        filter={props.filter}
+        changeFilter={props.changeFilter} />
+    </StickyNav>
+  )
+}
+
+export default Navbar

src/layouts/CoreLayout/components/FilterComponents/SearchBar.js → src/layouts/CoreLayout/Navbar/components/StickyNav/SearchBar.js

@@ -3,13 +3,16 @@ import AutoComplete from 'material-ui/AutoComplete'
 import IconButton from 'material-ui/IconButton'
 import SearchIcon from 'material-ui/svg-icons/action/search'
 import FilterIcon from 'material-ui/svg-icons/image/tune'
-import FilterModal from './FilterModal'
-import { autocompleteTracks } from '../../../../SDKs/LostFmSDK'
+import FilterModal from '../Filter/FilterModal'
+import { autocompleteTracks } from '../../../../../SDKs/LostFmSDK'
+import { throttle } from '../../../../../utils/CommonFunctions'
+import '../../styles/SearchBar.scss'
 
 class SearchBar extends React.Component {
   constructor (props) {
     super(props)
 
+    this.handleUpdateInput = throttle(this.handleUpdateInput, 200)
     this.state = {
       dataSource: [],
       filterOpen: false
@@ -25,10 +28,10 @@ class SearchBar extends React.Component {
   };
 
   handleUpdateInput = (value) => {
-    autocompleteTracks(value).then(values => {
-      this.setState({ dataSource: values })
-      console.log(values)
-    })
+    if (value) {
+      autocompleteTracks(value)
+        .then(values => this.setState({ dataSource: values }))
+    }
   };
 
   search = (value) => {

src/layouts/CoreLayout/components/StickyNavBar.js → src/layouts/CoreLayout/Navbar/components/StickyNav/StickyNavBar.js

@@ -1,12 +1,13 @@
 import React from 'react'
-import '../styles/StickyNavBar.scss'
 import MenuIcon from 'material-ui/svg-icons/navigation/menu'
 import IconButton from 'material-ui/IconButton'
-import LogoImg from '../../../assets/logo.png'
-import SearchIcon from 'material-ui/svg-icons/action/search'
-import Slogans from '../../../constants/MusicSlogans'
 import Paper from 'material-ui/Paper'
 import Popover from 'material-ui/Popover'
+import SearchIcon from 'material-ui/svg-icons/action/search'
+import Slogans from '../../../../../constants/MusicSlogans'
+import LogoImg from '../../../../../assets/logo.png'
+import { throttle } from '../../../../../utils/CommonFunctions'
+import '../../styles/StickyNavBar.scss'
 
 class StickyNavBar extends React.Component {
   constructor (props) {
@@ -26,11 +27,11 @@ class StickyNavBar extends React.Component {
   }
 
   componentDidMount () {
-    window.addEventListener('scroll', this.handleScroll)
+    window.addEventListener('scroll', throttle(this.handleScroll.bind(this), 100))
   }
 
   componentWillUnmount () {
-    window.removeEventListener('scroll', this.handleScroll)
+    window.removeEventListener('scroll', this.handleScroll.bind(this))
   }
 
   handleScroll = () => {

src/layouts/CoreLayout/Player/PlayerContainer.js

@@ -0,0 +1,21 @@
+import { connect } from 'react-redux'
+import * as actions from '../../../player-module/player-actions'
+
+import PlayerComponent from './components/Player'
+
+const mapDispatchToProps = {
+  playPause : (isPaused) => isPaused ? actions.play() : actions.pause(),
+  changePlaybackTime : actions.changePlaybackTime,
+  playbackEnded: actions.playbackEnded,
+  changeVolume : actions.changeVolume
+}
+
+const mapStateToProps = (state) => ({
+  currentStreamUrl: state.player.currentStreamUrl,
+  isPaused : state.player.isPaused,
+  volume : state.player.volume,
+  isSeeking: state.player.isSeeking,
+  playbackTime: state.player.playbackTime
+})
+
+export default connect(mapStateToProps, mapDispatchToProps)(PlayerComponent)

src/layouts/CoreLayout/containers/CoreLayoutContainer.js → src/layouts/CoreLayout/PlayerControls/PlayerControlsContainer.js

@@ -1,7 +1,7 @@
 import { connect } from 'react-redux'
 import * as actions from '../../../player-module/player-actions'
 
-import CoreLayout from '../components/CoreLayout.js'
+import ControlsComponent from './components/PlayerControls'
 
 const mapDispatchToProps = {
   playPause : (isPaused) => isPaused ? actions.play() : actions.pause(),
@@ -32,4 +32,4 @@ const mapStateToProps = (state) => ({
         : null
 })
 
-export default connect(mapStateToProps, mapDispatchToProps)(CoreLayout)
+export default connect(mapStateToProps, mapDispatchToProps)(ControlsComponent)

src/layouts/CoreLayout/components/ControlsComponents/PlayPauseIcon.js → src/layouts/CoreLayout/PlayerControls/components/PlayPauseIcon.js

@@ -1,5 +1,5 @@
 import React from 'react'
-import '../../styles/PlayPauseIcon.scss'
+import '../styles/PlayPauseIcon.scss'
 
 const pause = 'M11,10 L18,13.74 18,22.28 11,26 M18,13.74 L26,18 26,18 18,22.28'
 const play = 'M11,10 L17,10 17,26 11,26 M20,10 L26,10 26,26 20,26'

src/layouts/CoreLayout/components/ControlsComponents/PlayerControls.js → src/layouts/CoreLayout/PlayerControls/components/PlayerControls.js

@@ -10,7 +10,7 @@ import Shuffle from 'material-ui/svg-icons/av/shuffle'
 import Loop from 'material-ui/svg-icons/av/loop'
 import Checkbox from 'material-ui/Checkbox'
 import { formatMS, formatSS } from '../../../../utils/TimeHelper'
-import '../../styles/Controls.scss'
+import '../styles/Controls.scss'
 
 const floatButtonClassName = 'control-button'
 

src/routes/Songs/components/SongCard.js

@@ -12,10 +12,6 @@ class SongCard extends React.Component {
     }
   }
 
-  componentWillUnmount () {
-    delete this.card
-  }
-
   handleCardClick = () => {
     this.props.onSelect()
 
@@ -25,8 +21,8 @@ class SongCard extends React.Component {
   selectSong = () => {
     if (this.card != null) {
       this.card.classList.add('active', 'icon-hidden')
-      setTimeout(() => (this.card.classList.add('img-visible')), 550)
       setTimeout(() => (this.card.classList.add('title-visible')), 480)
+      setTimeout(() => (this.card.classList.add('img-visible')), 550)
     }
   }
 
@@ -41,29 +37,29 @@ class SongCard extends React.Component {
   }
 
   render () {
-    return <div ref={(ref) => { this.card = ref }}
-      className='card'>
-      <div className='main'
-        style={{ backgroundImage : 'url(' + this.props.artwork + ')' }} />
+    return (
+      <div ref={(ref) => { this.card = ref }} className='card'>
+        <div className='main'
+          style={{ backgroundImage : 'url(' + this.props.artwork + ')' }} />
 
-      <div className='fab'
-        onClick={this.handleCardClick} >
-        <PlayIcon color={'fff'}
-          style={{ width: 44, height: 44 }} />
-      </div>
+        <div className='fab'
+          onClick={this.handleCardClick} >
+          <PlayIcon color={'#fff'}
+            style={{ width: 44, height: 44 }} />
+        </div>
 
-      <div className='fab-sha' />
-      <div className='close'
-        onClick={this.unSelectSong} />
+        <div className='fab-sha' />
+        <div className='close'
+          onClick={this.unSelectSong} />
 
-      <img className='powered-logo'
-        src={PoweredBySC} />
+        <img className='powered-logo'
+          src={PoweredBySC} />
 
-      <div className='title-container'>
-        <span className='user-name'> {this.props.userName} </span>
-        <span className='title'> {this.props.title} </span>
-      </div>
-    </div>
+        <div className='title-container'>
+          <span className='user-name'> {this.props.userName} </span>
+          <span className='title'> {this.props.title} </span>
+        </div>
+      </div>)
   }
 }
 

src/routes/Songs/styles/SongCard.scss

@@ -23,18 +23,28 @@
     background-size: cover;
   }
 
-  .powered-logo {
+  .powered-logo,
+  .animation {
     display: none;
-  }
-
-  &.img-visible .powered-logo { 
-    display: block;
     position: absolute; 
     z-index: 100;
+  }
+
+  .powered-logo {
     left: 20px;
     top: 0;
   }
 
+  .animation {
+    width: 100%;
+    top: 20%;
+  }
+
+  &.img-visible .powered-logo,
+  &.img-visible .animation { 
+    display: block;
+  }
+
   .fab {
     width: 60px;
     height: 60px;

src/routes/index.js

@@ -1,5 +1,5 @@
 // We only need to import the modules necessary for initial render
-import CoreLayout from '../layouts/CoreLayout/containers/CoreLayoutContainer'
+import CoreLayout from '../layouts/CoreLayout/CoreLayout'
 import Songs from './Songs'
 import CounterRoute from './Counter'