adding mobile components

scripts/actions/environment.js

@@ -7,9 +7,22 @@ function changeIsMobile(isMobile) {
     };
 }
 
+function changeWidthAndHeight(height, width) {
+    return {
+        type: types.CHANGE_WIDTH_AND_HEIGHT,
+        height,
+        width
+    };
+}
+
 export function initEnvironment() {
     return dispatch => {
         const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
         dispatch(changeIsMobile(isMobile));
+        dispatch(changeWidthAndHeight(window.innerHeight, window.innerWidth));
+
+        window.onresize = () => {
+            dispatch(changeWidthAndHeight(window.innerHeight, window.innerWidth));
+        }
     };
 }

scripts/components/MobileNav.js

@@ -0,0 +1,17 @@
+import React, {Component, PropTypes} from 'react';
+
+class MobileNav extends Component {
+    render() {
+        const {playlist} = this.props;
+
+        return (
+            <div className='mobile-nav'>
+                <div className='mobile-nav-itm'>
+                    {'Hello'}
+                </div>
+            </div>
+        );
+    }
+}
+
+export default MobileNav;

scripts/components/MobilePlayer.js

@@ -0,0 +1,11 @@
+import React, {Component, PropTypes} from 'react';
+
+class MobilePlayer extends Component {
+    render() {
+        return (
+            <div></div>
+        );
+    }
+}
+
+export default MobilePlayer;

scripts/components/MobileSongListItem.js

@@ -0,0 +1,24 @@
+import React, {Component, PropTypes} from 'react';
+import {getImageUrl} from '../utils/SongUtils';
+
+class MobileSongListItem extends Component {
+    render() {
+        const {song, user} = this.props;
+
+        return (
+            <div>
+                <img src={getImageUrl(song.artwork_url)} />
+                <div>
+                    <div>
+                        {song.title}
+                    </div>
+                    <div>
+                        {user.username}
+                    </div>
+                </div>
+            </div>
+        );
+    }
+}
+
+export default MobileSongListItem;

scripts/components/MobileSongs.js

@@ -0,0 +1,40 @@
+import React, {Component, PropTypes} from 'react';
+import {fetchSongsIfNeeded} from '../actions/playlists';
+import MobileSongListItem from '../components/MobileSongListItem';
+
+class MobileSongs extends Component {
+    componentWillMount() {
+        const {dispatch, playlist, playlists} = this.props;
+        if (!(playlist in playlists) || playlists[playlist].items.length === 0) {
+            dispatch(fetchSongsIfNeeded(playlist));
+        }
+    }
+
+    componentWillReceiveProps(nextProps) {
+        const {dispatch, playlist, playlists} = this.props;
+        if (playlist !== nextProps.playlist) {
+            if (!(nextProps.playlist in playlists) || playlists[nextProps.playlist].items.length === 0) {
+                dispatch(fetchSongsIfNeeded(nextProps.playlist));
+            }
+        }
+    }
+
+    renderSongsListItems() {
+        const {playlist, playlists, songs, users} = this.props;
+        return playlists[playlist].items.map(songId => {
+            const song = songs[songId];
+            const user = users[song.user_id];
+            return <MobileSongListItem song={song} user={user} />
+        });
+    }
+
+    render() {
+        return (
+            <div className='mobile-songs'>
+                {this.renderSongsListItems()}
+            </div>
+        );
+    }
+}
+
+export default MobileSongs;

scripts/constants/ActionTypes.js

@@ -3,12 +3,12 @@ export const CHANGE_ACTIVE_PLAYLIST = 'CHANGE_ACTIVE_PLAYLIST';
 export const CHANGE_ACTIVE_SONG_ID = 'CHANGE_ACTIVE_SONG_ID';
 export const CHANGE_ACTIVE_USER_ID = 'CHANGE_ACTIVE_USER_ID';
 export const CHANGE_CURRENT_TIME = 'CHANGE_CURRENT_TIME';
-export const CHANGE_HEIGHT = 'CHANGE_HEIGHT';
 export const CHANGE_IS_MOBILE = 'CHANGE_IS_MOBILE';
 export const CHANGE_MODAL = 'CHANGE_MODAL';
 export const CHANGE_PATH = 'CHANGE_PATH';
 export const CHANGE_PLAYING_SONG = 'CHANGE_PLAYING_SONG';
 export const CHANGE_SELECTED_PLAYLISTS = 'CHANGE_SELECTED_PLAYLISTS';
+export const CHANGE_WIDTH_AND_HEIGHT = 'CHANGE_WIDTH_AND_HEIGHT';
 export const PLAY_SONG = 'PLAY_SONG';
 export const RECEIVE_ACCESS_TOKEN = 'RECEIVE_ACCESS_TOKEN';
 export const RECEIVE_AUTHED_FOLLOWINGS = 'RECEIVE_AUTHED_FOLLOWINGS';

scripts/containers/App.js

@@ -3,7 +3,6 @@ import {connect} from 'react-redux';
 
 import {initAuth} from '../actions/authed';
 import {initEnvironment} from '../actions/environment';
-import {initHeight} from '../actions/height';
 import {initNavigator} from '../actions/navigator';
 
 import MobileFooter from '../components/MobileFooter';
@@ -16,14 +15,11 @@ import SongContainer from '../containers/SongContainer';
 import SongsContainer from '../containers/SongsContainer';
 import UserContainer from '../containers/UserContainer';
 
-import styles from '../../styles/mobile/container';
-
 class App extends Component {
     componentDidMount () {
         const {dispatch} = this.props;
         dispatch(initEnvironment());
         dispatch(initAuth());
-        dispatch(initHeight());
         dispatch(initNavigator());
     }
 
@@ -47,11 +43,12 @@ class App extends Component {
     }
 
     render() {
-        const {isMobile} = this.props;
+        const {height, isMobile, width} = this.props;
         if (isMobile) {
             return (
-                <div style={styles.container}>
-                    <ModalContainer />
+                <div className='mobile' style={{height: `${height}px`, width: `${width}px`}}>
+                    {this.renderContent()}
+                    <NavContainer />
                 </div>
             );
         }
@@ -76,8 +73,10 @@ function mapStateToProps(state) {
     const {environment, navigator} = state;
 
     return {
+        height: environment.height,
         isMobile: environment.isMobile,
-        path: navigator.route.path
+        path: navigator.route.path,
+        width: environment.width
     };
 }
 

scripts/containers/MeContainer.js

@@ -10,13 +10,13 @@ class MeContainer extends Component {
 }
 
 function mapStateToProps(state) {
-    const {authed, entities, height, navigator, player, playlists} = state;
+    const {authed, entities, environment, navigator, player, playlists} = state;
     const playingSongId = getPlayingSongId(player, playlists);
 
     return {
         authed,
         authedPlaylists: entities.playlists,
-        height,
+        height: environment.height,
         player,
         playingSongId,
         playlists,

scripts/containers/NavContainer.js

@@ -1,19 +1,26 @@
 import React, {Component, PropTypes} from 'react';
 import {connect} from 'react-redux';
+import MobileNav from '../components/MobileNav';
 import Nav from '../components/Nav';
 
 class NavContainer extends Component {
     render() {
+        const {isMobile} = this.props;
+        if (isMobile) {
+            return <MobileNav {...this.props} />
+        }
+
         return <Nav {...this.props} />;
     }
 }
 
 function mapStateToProps(state) {
-    const {authed, entities, navigator} = state;
+    const {authed, entities, environment, navigator} = state;
 
     return {
         authed,
         authedPlaylists: entities.playlists,
+        isMobile: environment.isMobile,
         navigator,
         songs: entities.songs
     };

scripts/containers/PlayerContainer.js

@@ -1,12 +1,13 @@
 import React, {Component, PropTypes} from 'react';
 import {connect} from 'react-redux';
+import MobilePlayer from '../components/MobilePlayer';
 import Player from '../components/Player';
 import {getPlayingSongId} from '../utils/PlayerUtils';
 
 class PlayerContainer extends Component {
     render() {
         if (!this.props.playingSongId) {
-            return <div/>;
+            return <MobilePlayer {...this.props} />;
         }
 
         return <Player {...this.props} />;

scripts/containers/SongContainer.js

@@ -10,15 +10,15 @@ class SongContainer extends Component {
 }
 
 function mapStateToProps(state) {
-    const {authed, entities, height, navigator, player, playlists} = state;
+    const {authed, entities, environment, navigator, player, playlists} = state;
     const {path, query} = navigator.route;
     const songId = parseInt(path[1]);
 
     const playingSongId = getPlayingSongId(player, playlists);
 
     return {
         authed,
-        height,
+        height: environment.height,
         player,
         playingSongId,
         playlists,

scripts/containers/SongsContainer.js

@@ -1,16 +1,22 @@
 import React, {Component, PropTypes} from 'react';
 import {connect} from 'react-redux';
 import {fetchSongsIfNeeded} from '../actions/playlists';
+import MobileSongs from '../components/MobileSongs';
 import Songs from '../components/Songs';
 
 class SongsContainer extends Component {
     render() {
+        const {isMobile} = this.props;
+        if (isMobile) {
+            return <MobileSongs {...this.props} />;
+        }
+
         return <Songs {...this.props} />;
     }
 }
 
 function mapStateToProps(state) {
-    const {authed, entities, height, navigator, player, playlists} = state;
+    const {authed, entities, environment, navigator, player, playlists} = state;
 
     const playingSongId = player.currentSongIndex !== null ? playlists[player.selectedPlaylists[player.selectedPlaylists.length - 1]].items[player.currentSongIndex] : null;
 
@@ -23,7 +29,8 @@ function mapStateToProps(state) {
 
     return {
         authed,
-        height,
+        height: environment.height,
+        isMobile: environment.isMobile,
         playingSongId,
         playlist,
         playlists,

scripts/containers/UserContainer.js

@@ -10,14 +10,14 @@ class UserContainer extends Component {
 }
 
 function mapStateToProps(state) {
-    const {authed, entities, height, navigator, player, playlists} = state;
+    const {authed, entities, environment, navigator, player, playlists} = state;
     const {path, query} = navigator.route;
     const userId = parseInt(path[1]);
     const playingSongId = getPlayingSongId(player, playlists);
 
     return {
         authed,
-        height,
+        height: environment.height,
         player,
         playingSongId,
         playlists,

scripts/reducers/environment.js

@@ -1,7 +1,9 @@
 import * as types from '../constants/ActionTypes';
 
 const initialState = {
-    isMobile: false
+    isMobile: false,
+    height: null,
+    width: null
 };
 
 export default function environment(state = initialState, action) {
@@ -10,6 +12,13 @@ export default function environment(state = initialState, action) {
         return Object.assign({}, state, {
             isMobile: action.isMobile
         });
+
+    case types.CHANGE_WIDTH_AND_HEIGHT:
+        return Object.assign({}, state, {
+            height: action.height,
+            width: action.width
+        });
+
     default:
         return state;
     }

scripts/reducers/index.js

@@ -2,7 +2,6 @@ import {combineReducers} from 'redux';
 import authed from '../reducers/authed';
 import entities from '../reducers/entities';
 import environment from '../reducers/environment';
-import height from '../reducers/height';
 import modal from '../reducers/modal';
 import navigator from '../reducers/navigator';
 import player from '../reducers/player';
@@ -12,7 +11,6 @@ const rootReducer = combineReducers({
     authed,
     entities,
     environment,
-    height,
     modal,
     navigator,
     player,

styles/main.scss

@@ -1,2 +1,3 @@
 @import 'custom/custom';
+@import 'mobile/mobile';
 @import 'ionicons/ionicons';

styles/mobile/components/mobile.scss

@@ -0,0 +1,5 @@
+.mobile {
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+}