diff --git a/js/components/MainWindow/Marquee.js b/js/components/MainWindow/Marquee.js index 8f0381d4..3e130ff3 100644 --- a/js/components/MainWindow/Marquee.js +++ b/js/components/MainWindow/Marquee.js @@ -7,6 +7,7 @@ import { getTimeStr } from "../../utils"; import { STEP_MARQUEE } from "../../actionTypes"; import CharacterString from "../CharacterString"; import { noMarquee } from "../../config"; +import { getCurrentTrackNumber } from "../../selectors"; const CHAR_WIDTH = 5; @@ -29,8 +30,8 @@ export const getPositionText = (duration, seekToPercent) => { return `Seek to: ${newElapsedStr}/${durationStr} (${seekToPercent}%)`; }; -export const getMediaText = (name, duration) => - `${name} (${getTimeStr(duration)}) *** `; +export const getMediaText = (trackNumber, name, duration) => + `${trackNumber}. ${name} (${getTimeStr(duration)}) *** `; export const getDoubleSizeModeText = enabled => `${enabled ? "Disable" : "Enable"} doublesize mode`; @@ -158,7 +159,8 @@ const getMarqueeText = state => { break; } if (state.media.name) { - return getMediaText(state.media.name, state.media.length); + const trackNumber = getCurrentTrackNumber(state); + return getMediaText(trackNumber, state.media.name, state.media.length); } return "Winamp 2.91"; }; diff --git a/js/components/MainWindow/Marquee.test.js b/js/components/MainWindow/Marquee.test.js index e3f3c40f..26ed8724 100644 --- a/js/components/MainWindow/Marquee.test.js +++ b/js/components/MainWindow/Marquee.test.js @@ -57,10 +57,11 @@ describe("getPositionText", () => { describe("getMediaText", () => { it("formats a name and duration", () => { + const trackNumber = 1; const name = "My Great Song"; const duration = 86; - const actual = getMediaText(name, duration); - const expected = "My Great Song (01:26) *** "; + const actual = getMediaText(trackNumber, name, duration); + const expected = "1. My Great Song (01:26) *** "; expect(actual).toEqual(expected); }); }); diff --git a/js/components/PlaylistWindow/index.js b/js/components/PlaylistWindow/index.js index a17c23e8..11ba6b85 100644 --- a/js/components/PlaylistWindow/index.js +++ b/js/components/PlaylistWindow/index.js @@ -54,7 +54,6 @@ const PlaylistWindow = props => { toggleShade, allTracksAreVisible } = props; - console.log({ allTracksAreVisible }); if (playlistShade) { return ; } diff --git a/js/index.js b/js/index.js index 12abdd10..578599f2 100644 --- a/js/index.js +++ b/js/index.js @@ -31,7 +31,7 @@ Raven.context(() => { url: skinUrl }, initialTrack: { - name: "1. DJ Mike Llama - Llama Whippin' Intro", + name: "DJ Mike Llama - Llama Whippin' Intro", url: audioUrl }, avaliableSkins: [ diff --git a/js/selectors.js b/js/selectors.js index d0ba9447..70a8fb62 100644 --- a/js/selectors.js +++ b/js/selectors.js @@ -58,15 +58,22 @@ export const getRunningTimeMessage = createSelector( `${getTimeStr(selectedRunningTime)}/${getTimeStr(totalRunningTime)}` ); +// TODO: Consider changing `currentTrack` in the sate to be this value and +// compute the other way (cheaper) +export const getCurrentTrackIndex = state => { + const { trackOrder, currentTrack } = state.playlist; + return trackOrder.findIndex(trackId => trackId === currentTrack); +}; + +export const getCurrentTrackNumber = state => getCurrentTrackIndex(state) + 1; + export const nextTrack = (state, n = 1) => { - const { playlist: { trackOrder, currentTrack }, media: { repeat } } = state; + const { playlist: { trackOrder }, media: { repeat } } = state; if (trackOrder.length === 0) { return null; } - const currentIndex = trackOrder.findIndex( - trackId => trackId === currentTrack - ); + const currentIndex = getCurrentTrackIndex(state); let nextIndex = currentIndex + n; if (repeat) {