Feature song play time

src/components/HeaderBar/CurrentDJ.js

@@ -1,10 +1,13 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { translate } from '@u-wave/react-translate';
+import PlayTime from './PlayTime';
 
-const CurrentDJ = ({ t, className, dj }) => (
+const CurrentDJ = ({
+  t, className, dj, startTime, mediaDuration,
+}) => (
   <div className={className}>
-    {t('booth.currentDJ', { user: dj.username })}
+    {t('booth.currentDJ', { user: dj.username })} - <PlayTime className="HeaderBar-timer" startTime={startTime} mediaDuration={mediaDuration} />
   </div>
 );
 
@@ -14,6 +17,8 @@ CurrentDJ.propTypes = {
   dj: PropTypes.shape({
     username: PropTypes.string.isRequired,
   }),
+  startTime: PropTypes.number.isRequired,
+  mediaDuration: PropTypes.number.isRequired,
 };
 
 export default translate()(CurrentDJ);

src/components/HeaderBar/PlayTime.js

@@ -0,0 +1,23 @@
+import cx from 'clsx';
+import React from 'react';
+import PropTypes from 'prop-types';
+import formatDuration from 'format-duration';
+import useClock from '../../hooks/useClock';
+
+function PlayTime({ className, startTime, mediaDuration }) {
+  const currentTime = useClock();
+  const currentElapsed = currentTime - startTime;
+  return (
+    <span className={cx('Timer', className)}>
+      {formatDuration(currentElapsed)} / {formatDuration(mediaDuration * 1000)}
+    </span>
+  );
+}
+
+PlayTime.propTypes = {
+  className: PropTypes.string,
+  startTime: PropTypes.number.isRequired,
+  mediaDuration: PropTypes.number.isRequired,
+};
+
+export default React.memo(PlayTime);

src/components/HeaderBar/index.js

@@ -16,6 +16,8 @@ const HeaderBar = ({
   mediaStartTime,
   volume,
   muted,
+  startTime,
+  mediaDuration,
   onVolumeChange,
   onVolumeMute,
   onVolumeUnmute,
@@ -35,7 +37,7 @@ const HeaderBar = ({
     </AppTitle>
     <div className="HeaderBar-nowPlaying">
       <CurrentMedia className="HeaderBar-media" media={media} />
-      {dj && <CurrentDJ className="HeaderBar-dj" dj={dj} />}
+      {dj && <CurrentDJ className="HeaderBar-dj" dj={dj} startTime={startTime} mediaDuration={mediaDuration} />}
     </div>
     {media && (
       <Progress
@@ -68,6 +70,8 @@ HeaderBar.propTypes = {
   mediaStartTime: PropTypes.number,
   volume: PropTypes.number,
   muted: PropTypes.bool,
+  startTime: PropTypes.number,
+  mediaDuration: PropTypes.number,
 
   onVolumeChange: PropTypes.func,
   onVolumeMute: PropTypes.func,

src/containers/HeaderBar.js

@@ -2,7 +2,12 @@ import { connect } from 'react-redux';
 import { createStructuredSelector } from 'reselect';
 import { setVolume, mute, unmute } from '../actions/PlaybackActionCreators';
 import { toggleRoomHistory, toggleAbout } from '../actions/OverlayActionCreators';
-import { djSelector, mediaSelector, startTimeSelector } from '../selectors/boothSelectors';
+import {
+  djSelector,
+  mediaSelector,
+  startTimeSelector,
+  mediaDurationSelector,
+} from '../selectors/boothSelectors';
 import { volumeSelector, isMutedSelector } from '../selectors/settingSelectors';
 import HeaderBar from '../components/HeaderBar';
 
@@ -12,6 +17,8 @@ const mapStateToProps = createStructuredSelector({
   dj: djSelector,
   volume: volumeSelector,
   muted: isMutedSelector,
+  startTime: startTimeSelector,
+  mediaDuration: mediaDurationSelector,
 });
 
 const mapDispatchToProps = {