Prospective solution for livestream appearance (nukeop#1077)

Co-authored-by: Jacob Netwal <jnetwal@msudenver.edu>
Co-authored-by: Hardik <55993168+Hardik-hi@users.noreply.github.com>
Co-authored-by: Felix <hdcompany123@gmail.com>
Co-authored-by: 1lluzi0nzz <51207896+1lluzi0nzz@users.noreply.github.com>

packages/app/app/components/PlayQueue/index.js

@@ -107,12 +107,7 @@ class PlayQueue extends React.PureComponent {
                     error={el.error}
                     selectSong={actions.selectSong}
                     removeFromQueue={actions.removeFromQueue}
-                    duration={formatDuration(
-                      getTrackDuration(
-                        el,
-                        plugins.selected.streamProviders
-                      )
-                    )}
+                    duration={formatDuration(getTrackDuration(el, plugins.selected.streamProviders)) === '00:00' && !el.loading ? this.props.t('live') : formatDuration(getTrackDuration(el, plugins.selected.streamProviders))}
                     resetPlayer={this.props.items.length === 1 ? this.props.actions.resetPlayer : undefined}
                   />
                 }

packages/app/app/containers/PlayQueueContainer/__snapshots__/PlayQueueContainer.test.tsx.snap

@@ -234,7 +234,7 @@ exports[`Play Queue container should display a context popup on right click 1`]
               <div
                 class="item_duration"
               >
-                00:00
+                Live
               </div>
             </div>
           </div>
@@ -652,7 +652,7 @@ exports[`Play Queue container should display with track in queue 1`] = `
               <div
                 class="item_duration"
               >
-                00:00
+                Live
               </div>
             </div>
           </div>

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

@@ -54,8 +54,8 @@ export const useSeekbarProps = () => {
     queue,
     skipSegments,
     allowSkipSegment,
-    timeToEnd,
-    timePlayed: seek,
+    timeToEnd: currentTrackDuration === 0 ? t('live') : timeToEnd,
+    timePlayed: currentTrackDuration === 0 ? t('live') : seek,
     fill: playbackProgress,
     seek: seekCallback,
     segmentPopupMessage: t('segment-popup')

packages/i18n/src/locales/en.json

@@ -179,7 +179,8 @@
     "playlist-add": "Add to playlist",
     "playlist-toast-content": "Playlist {{name}} has been created.",
     "playlist-toast-title": "Playlist created",
-    "title": "Title:"
+    "title": "Title:",
+    "live": "Live"
   },
   "search": {
     "album": "Album",
@@ -198,6 +199,7 @@
     "you-can-search-for": "You can search for:"
   },
   "seekbar": {
+    "live": "Live",
     "segment-popup": "Non-music"
   },
   "settings": {

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

@@ -13,8 +13,8 @@ export type MiniPlayerProps = Omit<SeekbarProps, 'children'> &
   PlayerControlsProps &
   MiniTrackInfoProps &
   MiniPlayOptionsProps & {
-    timePlayed?: number;
-    timeToEnd?: number;
+    timePlayed?: any;
+    timeToEnd?: any;
     style?: React.HTMLAttributes<HTMLDivElement>['style'];
   };
 

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

@@ -6,7 +6,6 @@ import PlayerControls, { PlayerControlsProps } from '../PlayerControls';
 import TrackInfo, { TrackInfoProps } from '../TrackInfo';
 import VolumeControls, { VolumeControlsProps } from '../VolumeControls';
 import VolumePopUp, { VolumePopUpProps } from './VolumePopUp';
-
 import common from '../../common.scss';
 import styles from './styles.scss';
 import { formatDuration } from '../../utils';
@@ -18,8 +17,8 @@ export type PlayerBarProps = PlayerControlsProps &
   VolumeControlsProps &
   VolumePopUpProps & {
     renderTrackDuration?: boolean;
-    timePlayed?: number;
-    timeToEnd?: number;
+    timePlayed?: any;
+    timeToEnd?: any;
   };
 
 const VOLUME_POPUP_BREAKPOINT = 570;
@@ -60,13 +59,14 @@ const PlayerBar: React.FC<PlayerBarProps> = ({
   segmentPopupMessage
 }) => {
   const { width: windowWidth } = useWindowSize();
+  const isLivestream = (isNaN(timeToEnd) || typeof timeToEnd === 'string') && (queue.queueItems.length > 0);
   return (
     <div className={cx(
       common.nuclear,
       styles.player_bar
     )}>
       <Seekbar
-        fill={fill}
+        fill={isLivestream ? 100 : fill}
         seek={seek}
         queue={queue}
         timePlayed={timePlayed}
@@ -77,8 +77,8 @@ const PlayerBar: React.FC<PlayerBarProps> = ({
         {hasTracks &&
           renderTrackDuration &&
           <div className={styles.track_duration}>
-            <div>{formatDuration(timePlayed)}</div>
-            <div>-{formatDuration(timeToEnd)}</div>
+            <div>{isLivestream ? timePlayed : formatDuration(timePlayed)}</div>
+            <div>{isLivestream ? timeToEnd : '-'+formatDuration(timeToEnd)}</div> 
           </div>}
       </Seekbar>
       <div className={styles.player_bar_bottom}>

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

@@ -25,7 +25,7 @@ export type SeekbarProps = {
   height?: string;
   skipSegments?: Segment[];
   allowSkipSegment?: boolean;
-  timePlayed?: number;
+  timePlayed?: any;
   segmentPopupMessage: string;
 };
 

packages/ui/lib/utils.ts

@@ -2,6 +2,10 @@ import _ from 'lodash';
 import { Track } from './types';
 
 export function formatDuration(duration) {
+  if (typeof duration === 'string') {
+    return duration;
+  }
+
   if (!_.isFinite(parseInt(duration)) || duration <= 0) {
     return '00:00';
   }

packages/ui/test/formatDuration.test.ts

@@ -14,7 +14,7 @@ it('Should format non-number values as 00:00', () => {
   expect(formatDuration([])).toBe('00:00');
   expect(formatDuration(null)).toBe('00:00');
   expect(formatDuration({})).toBe('00:00');
-  expect(formatDuration('test')).toBe('00:00');
+  expect(formatDuration('test')).toBe('test');
 });
 
 it('Should format hours', () => {