From 03153467e540331fb2ec658de1fb77f4b8e702c7 Mon Sep 17 00:00:00 2001
From: eyes-0nly <mailz.eyes.only@gmail.com>
Date: Fri, 26 Mar 2021 19:02:02 +0300
Subject: [PATCH 1/6] Added play time

---
 src/components/HeaderBar/CurrentDJ.js |  5 +++--
 src/components/HeaderBar/PlayTime.js  | 23 +++++++++++++++++++++++
 src/components/HeaderBar/index.js     |  4 +++-
 src/containers/HeaderBar.js           |  4 ++++
 4 files changed, 33 insertions(+), 3 deletions(-)
 create mode 100644 src/components/HeaderBar/PlayTime.js

diff --git a/src/components/HeaderBar/CurrentDJ.js b/src/components/HeaderBar/CurrentDJ.js
index 070390223..6ac6360dd 100644
--- a/src/components/HeaderBar/CurrentDJ.js
+++ b/src/components/HeaderBar/CurrentDJ.js
@@ -1,10 +1,11 @@
 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>
 );
 
diff --git a/src/components/HeaderBar/PlayTime.js b/src/components/HeaderBar/PlayTime.js
new file mode 100644
index 000000000..1200eeb9b
--- /dev/null
+++ b/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);
\ No newline at end of file
diff --git a/src/components/HeaderBar/index.js b/src/components/HeaderBar/index.js
index 435602305..7b013978f 100644
--- a/src/components/HeaderBar/index.js
+++ b/src/components/HeaderBar/index.js
@@ -17,6 +17,8 @@ const HeaderBar = ({
   mediaTimeRemaining,
   volume,
   muted,
+  startTime,
+  mediaDuration,
   onVolumeChange,
   onVolumeMute,
   onVolumeUnmute,
@@ -36,7 +38,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
diff --git a/src/containers/HeaderBar.js b/src/containers/HeaderBar.js
index 807ba263a..2cbb56631 100644
--- a/src/containers/HeaderBar.js
+++ b/src/containers/HeaderBar.js
@@ -7,6 +7,8 @@ import {
   mediaSelector,
   mediaProgressSelector,
   timeRemainingSelector,
+  startTimeSelector,
+  mediaDurationSelector,
 } from '../selectors/boothSelectors';
 import { volumeSelector, isMutedSelector } from '../selectors/settingSelectors';
 import HeaderBar from '../components/HeaderBar';
@@ -18,6 +20,8 @@ const mapStateToProps = createStructuredSelector({
   dj: djSelector,
   volume: volumeSelector,
   muted: isMutedSelector,
+  startTime: startTimeSelector,
+  mediaDuration: mediaDurationSelector,
 });
 
 const mapDispatchToProps = {

From 44e0921c97c4d03f58ede4f34370261704a522a3 Mon Sep 17 00:00:00 2001
From: eyes-0nly <mailz.eyes.only@gmail.com>
Date: Fri, 26 Mar 2021 19:03:59 +0300
Subject: [PATCH 2/6] fix new line

---
 src/components/HeaderBar/PlayTime.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/HeaderBar/PlayTime.js b/src/components/HeaderBar/PlayTime.js
index 1200eeb9b..0c43f5566 100644
--- a/src/components/HeaderBar/PlayTime.js
+++ b/src/components/HeaderBar/PlayTime.js
@@ -20,4 +20,4 @@ PlayTime.propTypes = {
   mediaDuration: PropTypes.number.isRequired,
 };
 
-export default React.memo(PlayTime);
\ No newline at end of file
+export default React.memo(PlayTime);

From daa645ddae14f38e1c3056ad454110bf6664ca44 Mon Sep 17 00:00:00 2001
From: eyes-0nly <mailz.eyes.only@gmail.com>
Date: Fri, 26 Mar 2021 19:12:03 +0300
Subject: [PATCH 3/6] fix

---
 src/components/HeaderBar/index.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/components/HeaderBar/index.js b/src/components/HeaderBar/index.js
index 7b013978f..eceda8f64 100644
--- a/src/components/HeaderBar/index.js
+++ b/src/components/HeaderBar/index.js
@@ -72,6 +72,8 @@ HeaderBar.propTypes = {
   mediaTimeRemaining: PropTypes.number.isRequired,
   volume: PropTypes.number,
   muted: PropTypes.bool,
+  startTime: PropTypes.number,
+  mediaDuration: PropTypes.number,
 
   onVolumeChange: PropTypes.func,
   onVolumeMute: PropTypes.func,

From 0b733f518d7a97244abadd011807e161e64e3459 Mon Sep 17 00:00:00 2001
From: eyes-0nly <mailz.eyes.only@gmail.com>
Date: Fri, 26 Mar 2021 19:20:13 +0300
Subject: [PATCH 4/6] fix props validation

---
 src/components/HeaderBar/CurrentDJ.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/components/HeaderBar/CurrentDJ.js b/src/components/HeaderBar/CurrentDJ.js
index 6ac6360dd..b39d12cc4 100644
--- a/src/components/HeaderBar/CurrentDJ.js
+++ b/src/components/HeaderBar/CurrentDJ.js
@@ -15,6 +15,8 @@ CurrentDJ.propTypes = {
   dj: PropTypes.shape({
     username: PropTypes.string.isRequired,
   }),
+  startTime: PropTypes.number.isRequired,
+  mediaDuration: PropTypes.number.isRequired,
 };
 
 export default translate()(CurrentDJ);

From ea8466e8c6512bee0f7ddebb3cdb1dfcccb0bcaf Mon Sep 17 00:00:00 2001
From: eyes-0nly <mailz.eyes.only@gmail.com>
Date: Fri, 26 Mar 2021 19:25:43 +0300
Subject: [PATCH 5/6] lint fix

---
 src/components/HeaderBar/PlayTime.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/HeaderBar/PlayTime.js b/src/components/HeaderBar/PlayTime.js
index 0c43f5566..26092b0a5 100644
--- a/src/components/HeaderBar/PlayTime.js
+++ b/src/components/HeaderBar/PlayTime.js
@@ -9,9 +9,9 @@ function PlayTime({ className, startTime, mediaDuration }) {
   const currentElapsed = currentTime - startTime;
   return (
     <span className={cx('Timer', className)}>
-       {formatDuration(currentElapsed)} / {formatDuration(mediaDuration*1000)}
-     </span>
-   );
+      {formatDuration(currentElapsed)} / {formatDuration(mediaDuration * 1000)}
+    </span>
+  );
 }
 
 PlayTime.propTypes = {

From f66d915d0dc44924781112629a1f1b58e6ce22b9 Mon Sep 17 00:00:00 2001
From: eyes-0nly <mailz.eyes.only@gmail.com>
Date: Fri, 26 Mar 2021 19:37:31 +0300
Subject: [PATCH 6/6] lint fix

---
 src/components/HeaderBar/CurrentDJ.js | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/components/HeaderBar/CurrentDJ.js b/src/components/HeaderBar/CurrentDJ.js
index b39d12cc4..ad865e0c0 100644
--- a/src/components/HeaderBar/CurrentDJ.js
+++ b/src/components/HeaderBar/CurrentDJ.js
@@ -3,7 +3,9 @@ import PropTypes from 'prop-types';
 import { translate } from '@u-wave/react-translate';
 import PlayTime from './PlayTime';
 
-const CurrentDJ = ({ t, className, dj, startTime, mediaDuration }) => (
+const CurrentDJ = ({
+  t, className, dj, startTime, mediaDuration,
+}) => (
   <div className={className}>
     {t('booth.currentDJ', { user: dj.username })} - <PlayTime className="HeaderBar-timer" startTime={startTime} mediaDuration={mediaDuration} />
   </div>