Display track bug (#1110)

* Resolved Duration Bug

* Writing test for PlayerBar controller

packages/app/app/containers/PlayerBarContainer/PlayerBarContainer.test.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { SemanticICONS } from 'semantic-ui-react/dist/commonjs/generic';
+import { AnyProps, setupI18Next, TestStoreProvider } from '../../../test/testUtils';
+import PlayerBarContainer from '.';
+
+describe('PlayerBar container', () => {
+  beforeAll(() => {
+    setupI18Next();
+  });
+
+  it('should display no time stamp if rendertrackDuration is false', () => {
+    const component = mountComponent({
+      renderTrackDuration: false
+    });
+
+    expect(component.getByText('00:00')).toBeNull;
+  });
+
+  const mountComponent = (initialStore?: AnyProps) => {
+    const component = render(<TestStoreProvider
+      initialState={initialStore ?? { 
+        renderTrackDuration: true,
+        timePlayed: '-3:14',
+        timeToEnd: '2:43',
+        fill: 66,
+        track: 'Test song',
+        artist: 'Test artist',
+        cover: 'https://i.imgur.com/4euOws2.jpg',
+        volume: 60,
+        queue: { queueItems: [] },
+        playOptions: [
+          { icon: ('repeat' as SemanticICONS), enabled: false, name: 'Repeat' },
+          { icon: ('magic' as SemanticICONS), name: 'Autoradio' },
+          { icon: ('random' as SemanticICONS), enabled: false, name: 'Shuffle' }
+        ],
+        isMuted: false
+      }
+      }
+    >
+      <PlayerBarContainer />
+    </TestStoreProvider>);
+    return component;
+  };
+});

packages/app/app/containers/PlayerBarContainer/hooks.ts

@@ -165,6 +165,14 @@ export const useToggleOptionCallback = (
   [name, settings, toggleOption]
 );
 
+export const useTrackDurationProp = () => { 
+  const settings = useSelector(settingsSelector);
+  const trackDurationSetting = _.get(settings, 'trackDuration', false);
+  return {
+    'renderTrackDuration': trackDurationSetting
+  };
+};
+
 export const useVolumeControlsProps = () => {
   const { t } = useTranslation('option-control');
   const dispatch = useDispatch();

packages/app/app/containers/PlayerBarContainer/index.tsx

@@ -4,23 +4,27 @@ import { PlayerBar } from '@nuclear/ui';
 import { 
   usePlayerControlsProps,
   useSeekbarProps,
+  useTrackDurationProp,
   useTrackInfoProps,
   useVolumeControlsProps
 } from './hooks';
 
+
 const PlayerBarContainer = () => {
   const seekbarProps = useSeekbarProps();
   const playerControlsProps = usePlayerControlsProps();
   const trackInfoProps = useTrackInfoProps();
   const volumeControlsProps = useVolumeControlsProps();
+  const trackDurationProp = useTrackDurationProp();
+
 
   return (
     <PlayerBar
       {...seekbarProps}
       {...playerControlsProps}
       {...trackInfoProps}
       {...volumeControlsProps}
-      renderTrackDuration
+      {...trackDurationProp}
     />
   );
 };