From 4487fe373d8e521d9887e0d350a88ce97876fa85 Mon Sep 17 00:00:00 2001 From: jreiser1 <47801590+jreiser1@users.noreply.github.com> Date: Mon, 8 Nov 2021 13:13:49 -0700 Subject: [PATCH] Prospective solution for livestream appearance (#1077) Co-authored-by: Jacob Netwal Co-authored-by: Hardik <55993168+Hardik-hi@users.noreply.github.com> Co-authored-by: Felix Co-authored-by: 1lluzi0nzz <51207896+1lluzi0nzz@users.noreply.github.com> --- packages/app/app/components/PlayQueue/index.js | 7 +------ .../__snapshots__/PlayQueueContainer.test.tsx.snap | 4 ++-- .../app/app/containers/PlayerBarContainer/hooks.ts | 4 ++-- packages/i18n/src/locales/en.json | 4 +++- packages/ui/lib/components/MiniPlayer/index.tsx | 4 ++-- packages/ui/lib/components/PlayerBar/index.tsx | 12 ++++++------ packages/ui/lib/components/Seekbar/index.tsx | 2 +- packages/ui/lib/utils.ts | 4 ++++ packages/ui/test/formatDuration.test.ts | 2 +- 9 files changed, 22 insertions(+), 21 deletions(-) diff --git a/packages/app/app/components/PlayQueue/index.js b/packages/app/app/components/PlayQueue/index.js index e899c876cd..b04bb9585d 100644 --- a/packages/app/app/components/PlayQueue/index.js +++ b/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} /> } diff --git a/packages/app/app/containers/PlayQueueContainer/__snapshots__/PlayQueueContainer.test.tsx.snap b/packages/app/app/containers/PlayQueueContainer/__snapshots__/PlayQueueContainer.test.tsx.snap index 02b9ac8fb1..e5a6ba6130 100644 --- a/packages/app/app/containers/PlayQueueContainer/__snapshots__/PlayQueueContainer.test.tsx.snap +++ b/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`]
- 00:00 + Live
@@ -652,7 +652,7 @@ exports[`Play Queue container should display with track in queue 1`] = `
- 00:00 + Live
diff --git a/packages/app/app/containers/PlayerBarContainer/hooks.ts b/packages/app/app/containers/PlayerBarContainer/hooks.ts index fdb5502681..42809cedf0 100644 --- a/packages/app/app/containers/PlayerBarContainer/hooks.ts +++ b/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') diff --git a/packages/i18n/src/locales/en.json b/packages/i18n/src/locales/en.json index 48ed1edc9f..9f950e2578 100644 --- a/packages/i18n/src/locales/en.json +++ b/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": { diff --git a/packages/ui/lib/components/MiniPlayer/index.tsx b/packages/ui/lib/components/MiniPlayer/index.tsx index 043a26e66b..4ff2b50a19 100644 --- a/packages/ui/lib/components/MiniPlayer/index.tsx +++ b/packages/ui/lib/components/MiniPlayer/index.tsx @@ -13,8 +13,8 @@ export type MiniPlayerProps = Omit & PlayerControlsProps & MiniTrackInfoProps & MiniPlayOptionsProps & { - timePlayed?: number; - timeToEnd?: number; + timePlayed?: any; + timeToEnd?: any; style?: React.HTMLAttributes['style']; }; diff --git a/packages/ui/lib/components/PlayerBar/index.tsx b/packages/ui/lib/components/PlayerBar/index.tsx index 6efa8f0a87..aec2b12c7d 100644 --- a/packages/ui/lib/components/PlayerBar/index.tsx +++ b/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 = ({ segmentPopupMessage }) => { const { width: windowWidth } = useWindowSize(); + const isLivestream = (isNaN(timeToEnd) || typeof timeToEnd === 'string') && (queue.queueItems.length > 0); return (
= ({ {hasTracks && renderTrackDuration &&
-
{formatDuration(timePlayed)}
-
-{formatDuration(timeToEnd)}
+
{isLivestream ? timePlayed : formatDuration(timePlayed)}
+
{isLivestream ? timeToEnd : '-'+formatDuration(timeToEnd)}
}
diff --git a/packages/ui/lib/components/Seekbar/index.tsx b/packages/ui/lib/components/Seekbar/index.tsx index 80539d62b1..b3e944accb 100644 --- a/packages/ui/lib/components/Seekbar/index.tsx +++ b/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; }; diff --git a/packages/ui/lib/utils.ts b/packages/ui/lib/utils.ts index b4baa3ff9c..5337cde353 100644 --- a/packages/ui/lib/utils.ts +++ b/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'; } diff --git a/packages/ui/test/formatDuration.test.ts b/packages/ui/test/formatDuration.test.ts index 3a76848dbd..9cf246b7e0 100644 --- a/packages/ui/test/formatDuration.test.ts +++ b/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', () => {