Player bar replacement wip

packages/app/app/App.js

@@ -42,6 +42,7 @@ import HelpModalContainer from './containers/HelpModalContainer';
 import MainContentContainer from './containers/MainContentContainer';
 import PlayQueueContainer from './containers/PlayQueueContainer';
 import SearchBoxContainer from './containers/SearchBoxContainer';
+import PlayerBarContainer from './containers/PlayerBarContainer';
 
 import IpcContainer from './containers/IpcContainer';
 import SoundContainer from './containers/SoundContainer';
@@ -250,27 +251,30 @@ class App extends React.PureComponent {
 
   renderFooter () {
     return (
-      <Footer className={styles.footer}>
-        <Seekbar
-          fill={this.props.player.playbackProgress + '%'}
-          seek={this.props.actions.updateSeek}
-          queue={this.props.queue}
-        >
-          {
-            this.props.settings.trackDuration &&
+      <>
+        <PlayerBarContainer />
+        <Footer className={styles.footer}>
+          <Seekbar
+            fill={this.props.player.playbackProgress + '%'}
+            seek={this.props.actions.updateSeek}
+            queue={this.props.queue}
+          >
+            {
+              this.props.settings.trackDuration &&
             !_.isNil(this.props.queue.queueItems[this.props.queue.currentSong]) &&
             this.renderTrackDuration()
-          }
-        </Seekbar>
-        <div className={styles.footer_horizontal}>
-          <div className={styles.track_info_wrapper}>
-            {this.renderCover()}
-            {this.renderTrackInfo()}
+            }
+          </Seekbar>
+          <div className={styles.footer_horizontal}>
+            <div className={styles.track_info_wrapper}>
+              {this.renderCover()}
+              {this.renderTrackInfo()}
+            </div>
+            {this.renderPlayerControls()}
+            {this.renderVolumeControl()}
           </div>
-          {this.renderPlayerControls()}
-          {this.renderVolumeControl()}
-        </div>
-      </Footer>
+        </Footer>
+      </>
     );
   }
 

packages/app/app/containers/PlayerBarContainer/hooks.js

@@ -0,0 +1,30 @@
+import { formatDuration } from '@nuclear/ui';
+import { useSelector } from 'react-redux';
+
+import { playerSelectors } from '../../selectors/player';
+import { queue as queueSelector } from '../../selectors/queue';
+
+export const useSeekbarProps = () => {
+  const queue = useSelector(queueSelector);
+  const seek = useSelector(playerSelectors.seek);
+  const currentTrackStream = _.head(
+    _.get(
+      queue.queueItems[queue.currentSong],
+      'streams'
+    )
+  );
+
+  const currentTrackDuration = _.get(
+    currentTrackStream,
+    'duration'
+  );
+
+  const timeToEnd = currentTrackDuration - seek;
+
+  return {
+    queue,
+    timePlayed: formatDuration(seek),
+    timeToEnd: formatDuration(timeToEnd)
+  };
+};
+

packages/app/app/containers/PlayerBarContainer/index.js

@@ -0,0 +1,38 @@
+import React from 'react';
+import { useSelector /* useDispatch*/ } from 'react-redux';
+import Sound from 'react-hifi';
+import { PlayerBar } from '@nuclear/ui';
+
+// import * as PlayerActions from '../../actions/player';
+import { playerSelectors } from '../../selectors/player';
+import { useSeekbarProps } from './hooks';
+
+const PlayerBarContainer = () => {
+  // const dispatch = useDispatch();
+  const playbackProgress = useSelector(playerSelectors.playbackProgress);
+  const playbackStatus = useSelector(playerSelectors.playbackStatus);
+  const playbackStreamLoading = useSelector(playerSelectors.playbackStreamLoading);
+
+  const seekbarProps = useSeekbarProps();
+
+  return (
+    <PlayerBar
+      {...seekbarProps}
+      renderTrackDuration
+      fill={playbackProgress}
+      track='Test song'
+      artist='Test artist'
+      volume={60}
+      seek={null}
+      playOptions={[
+        { icon: 'repeat', enabled: false },
+        { icon: 'magic' },
+        { icon: 'random', enabled: false }
+      ]}
+      isPlaying={playbackStatus === Sound.status.PLAYING}
+      isLoading={playbackStreamLoading}
+    />
+  );
+};
+
+export default PlayerBarContainer;

packages/app/app/selectors/player.js

@@ -0,0 +1,11 @@
+import { createStateSelectors } from './helpers';
+
+export const playerSelectors = createStateSelectors(
+  'player',
+  [
+    'playbackProgress',
+    'playbackStatus',
+    'playbackStreamLoading',
+    'seek'
+  ]
+);

packages/app/app/selectors/queue.js

@@ -0,0 +1 @@
+export const queue = s => s.queue;

packages/ui/lib/components/PlayerBar/index.tsx

@@ -14,6 +14,8 @@ export type PlayerBarProps = PlayerControlsProps &
   TrackInfoProps &
   VolumeControlsProps & {
     renderTrackDuration?: boolean;
+    timePlayed?: string;
+    timeToEnd?: string;
   };
 
 const PlayerBar: React.FC<PlayerBarProps> = ({
@@ -24,7 +26,7 @@ const PlayerBar: React.FC<PlayerBarProps> = ({
   onArtistClick,
   addToFavorites,
   isFavorite,
-  
+
   volume,
   setVolume,
   toggleMute,
@@ -40,6 +42,8 @@ const PlayerBar: React.FC<PlayerBarProps> = ({
   queue,
   fill = 0,
   renderTrackDuration = false,
+  timePlayed,
+  timeToEnd,
   seek
 }) => (
     <div className={cx(
@@ -52,8 +56,10 @@ const PlayerBar: React.FC<PlayerBarProps> = ({
         queue={queue}
       >
         {
-          renderTrackDuration && 'trackDuration'
-
+          renderTrackDuration && <div className={styles.track_duration}>
+            <div>{timePlayed}</div>
+            <div>{timeToEnd}</div>
+          </div>
         }
       </Seekbar>
       <div className={styles.player_bar_bottom}>

packages/ui/lib/components/PlayerBar/styles.scss

@@ -21,4 +21,16 @@
     width: 100%;
     max-width: 100%;
   }
+
+  .track_duration {
+    position: absolute;
+    display: flex;
+    flex-flow: row;
+    justify-content: space-between;
+    align-items: center;
+
+    padding: 0 .5em;
+    height: 100%;
+    width: 100%;
+  }
 }

packages/ui/lib/components/Seekbar/index.tsx

@@ -33,15 +33,15 @@ const Seekbar: React.FC<SeekbarProps> = ({
     <div
       className={cx(
         common.nuclear,
-        styles.seekbar_container
+        styles.seekbar
       )}
       onClick={handleClick(seek, queue)}
     >
       <div
         style={{ width: `${fill}%` }}
         className={cx(
           common.nuclear,
-          styles.seekbar_fill
+          styles.seekbar_progress
         )}
       >
         {children}

packages/ui/lib/components/Seekbar/styles.scss

@@ -1,13 +1,18 @@
 @import '../../common.scss';
 
-.seekbar_container {
-  height: 1em;
+.seekbar {
+  position: relative;
+  height: 1.25em;
   cursor: pointer;
-  background-color: transparent;
+  background-color: $background2;
   flex: 0 0 auto;
-}
 
-.seekbar_fill {
-  height: 100%;
-  background-color: $pink;
+  &:hover {
+    height: 1.5em;
+  }
+
+  .seekbar_progress {
+    height: 100%;
+    background-color: $pink;
+  }
 }

packages/ui/stories/playerBar.stories.tsx

@@ -6,25 +6,28 @@ export default {
   title: 'Player bar'
 };
 
-export const DefaultStyle = () => <div 
-className='bg'
-style={{
-display: 'flex',
-flexFlow: 'column'
-}}
+export const DefaultStyle = () => <div
+  className='bg'
+  style={{
+    display: 'flex',
+    flexFlow: 'column'
+  }}
 >
-  <span style={{flex: '1 1 auto'}} />
+  <span style={{ flex: '1 1 auto' }} />
   <PlayerBar
-  fill={66}
-  track='Test song'
-  artist='Test artist'
-  volume={60}
-  seek={() => {}}
-  queue={{ queueItems: [] }}
-  playOptions={[
-    {icon: 'repeat', enabled: false},
-    {icon: 'magic'},
-    {icon: 'random', enabled: false}
-  ]}
+    renderTrackDuration
+    timePlayed='-3:14'
+    timeToEnd='2:43'
+    fill={66}
+    track='Test song'
+    artist='Test artist'
+    volume={60}
+    seek={() => { }}
+    queue={{ queueItems: [] }}
+    playOptions={[
+      { icon: 'repeat', enabled: false },
+      { icon: 'magic' },
+      { icon: 'random', enabled: false }
+    ]}
   />
 </div>;

tsconfig.json

@@ -1,5 +1,6 @@
 {
   "compilerOptions": {
+    "jsx": "react",
     "moduleResolution": "node",
     "target": "ESNext",
     "module":"ESNext",