diff --git a/.eslintignore b/.eslintignore
index 8f579e37..2aef4f79 100644
--- a/.eslintignore
+++ b/.eslintignore
@@ -2,3 +2,4 @@
built/
coverage/
**/node_modules/
+experiments/winamp-skin-museum/
\ No newline at end of file
diff --git a/.eslintrc b/.eslintrc
index 088ba4a4..7fb6d974 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -33,12 +33,7 @@
"camelcase": "error",
"consistent-return": "warn",
"constructor-super": "error",
- "dot-notation": [
- "error",
- {
- "allowKeywords": false
- }
- ],
+ "dot-notation": "error",
"eqeqeq": ["error", "smart"],
"guard-for-in": "error",
"max-depth": ["warn", 4],
diff --git a/.gitignore b/.gitignore
index c06694f5..e199ab42 100644
--- a/.gitignore
+++ b/.gitignore
@@ -2,3 +2,4 @@ node_modules
/built
/coverage
+/experiments/winamp-skin-museum
diff --git a/experiments/automatedScreenshots/index.js b/experiments/automatedScreenshots/index.js
index 7c444469..e1a48ef8 100644
--- a/experiments/automatedScreenshots/index.js
+++ b/experiments/automatedScreenshots/index.js
@@ -116,7 +116,7 @@ const config = {
config.skinUrl = skinUrl;
const url = `http://localhost:8080/#${JSON.stringify(config)}`;
console.log({ url });
- await page["goto"](url);
+ await page.goto(url);
await page.waitForSelector("#main-window", { timeout: 2000 });
console.log("Writing screenshot to", screenshotFile);
diff --git a/index.html b/index.html
index bb573f08..ec82b657 100755
--- a/index.html
+++ b/index.html
@@ -29,6 +29,7 @@
Feedback |
GitHub
+
diff --git a/js/actionCreators.js b/js/actionCreators.js
index 7fbee50e..204329b3 100644
--- a/js/actionCreators.js
+++ b/js/actionCreators.js
@@ -1,9 +1,10 @@
-import jsmediatags from "jsmediatags/dist/jsmediatags";
import { parser, creator } from "winamp-eqf";
import {
genArrayBufferFromFileReference,
genArrayBufferFromUrl,
- promptForFileReferences
+ promptForFileReferences,
+ genMediaDuration,
+ genMediaTags
} from "./fileUtils";
import skinParser from "./skinParser";
import { BANDS, TRACK_HEIGHT, LOAD_STYLE } from "./constants";
@@ -13,7 +14,9 @@ import {
getScrollOffset,
getOverflowTrackCount,
getPlaylistURL,
- getSelectedTrackObjects
+ getSelectedTrackObjects,
+ getTracks,
+ getTrackIsVisibleFunction
} from "./selectors";
import {
@@ -53,9 +56,22 @@ import {
SET_MEDIA_TAGS,
SET_MEDIA_DURATION,
TOGGLE_SHADE_MODE,
- TOGGLE_PLAYLIST_SHADE_MODE
+ TOGGLE_PLAYLIST_SHADE_MODE,
+ MEDIA_TAG_REQUEST_INITIALIZED,
+ MEDIA_TAG_REQUEST_FAILED,
+ PLAYLIST_SIZE_CHANGED
} from "./actionTypes";
+import LoadQueue from "./loadQueue";
+
+// Lower is better
+const DURATION_VISIBLE_PRIORITY = 5;
+const META_DATA_VISIBLE_PRIORITY = 10;
+const DURATION_PRIORITY = 15;
+const META_DATA_PRIORITY = 20;
+
+const loadQueue = new LoadQueue({ threads: 4 });
+
function playRandomTrack() {
return (dispatch, getState) => {
const { playlist: { trackOrder, currentTrack } } = getState();
@@ -228,22 +244,23 @@ export function loadFilesFromReferences(
}
export function fetchMediaDuration(url, id) {
- return dispatch => {
- // TODO: Does this actually stop downloading the file once it's
- // got the duration?
- const audio = document.createElement("audio");
- const durationChange = () => {
- const { duration } = audio;
- dispatch({ type: SET_MEDIA_DURATION, duration, id });
- audio.removeEventListener("durationchange", durationChange);
- audio.url = null;
- // TODO: Not sure if this really gets cleaned up.
- };
- audio.addEventListener("durationchange", durationChange);
- audio.addEventListener("error", () => {
- // TODO: Should we update the state to indicate that we don't know the length?
- });
- audio.src = url;
+ return (dispatch, getState) => {
+ loadQueue.push(
+ () =>
+ genMediaDuration(url)
+ .then(duration =>
+ dispatch({ type: SET_MEDIA_DURATION, duration, id })
+ )
+ .catch(() => {
+ // TODO: Should we update the state to indicate that we don't know the length?
+ }),
+ () => {
+ const trackIsVisible = getTrackIsVisibleFunction(getState());
+ return trackIsVisible(id)
+ ? DURATION_VISIBLE_PRIORITY
+ : DURATION_PRIORITY;
+ }
+ );
};
}
@@ -261,7 +278,7 @@ export function loadMediaFiles(tracks, loadStyle = null, atIndex = 0) {
}
tracks.forEach((track, i) => {
const priority = i === 0 && loadStyle != null ? loadStyle : null;
- dispatch(loadMediaFile(track, priority, atIndex));
+ dispatch(loadMediaFile(track, priority, atIndex + i));
});
};
}
@@ -304,35 +321,43 @@ export function loadMediaFile(track, priority = null, atIndex = 0) {
if (metaData != null) {
const { artist, title } = metaData;
dispatch({ type: SET_MEDIA_TAGS, artist, title, id });
+ } else if (blob != null) {
+ // Blobs can be loaded quickly
+ dispatch(fetchMediaTags(blob, id));
} else {
- dispatch(fetchMediaTags(url || blob, id));
+ dispatch(queueFetchingMediaTags(id));
}
};
}
+function queueFetchingMediaTags(id) {
+ return (dispatch, getState) => {
+ const track = getTracks(getState())[id];
+ return loadQueue.push(
+ () => dispatch(fetchMediaTags(track.url, id)),
+ () => {
+ const trackIsVisible = getTrackIsVisibleFunction(getState());
+ return trackIsVisible(track.id)
+ ? META_DATA_VISIBLE_PRIORITY
+ : META_DATA_PRIORITY;
+ }
+ );
+ };
+}
+
export function fetchMediaTags(file, id) {
- // Workaround https://github.com/aadsm/jsmediatags/issues/83
- if (typeof file === "string" && !/^[a-z]+:\/\//i.test(file)) {
- file = `${location.protocol}//${location.host}${location.pathname}${file}`;
- }
return dispatch => {
- try {
- jsmediatags.read(file, {
- onSuccess: data => {
- const { artist, title } = data.tags;
- // There's more data here, but we don't have a use for it yet:
- // https://github.com/aadsm/jsmediatags#shortcuts
- dispatch({ type: SET_MEDIA_TAGS, artist, title, id });
- },
- onError: () => {
- // Nothing to do. The filename will have to suffice.
- }
+ dispatch({ type: MEDIA_TAG_REQUEST_INITIALIZED, id });
+ return genMediaTags(file)
+ .then(data => {
+ const { artist, title } = data.tags;
+ // There's more data here, but we don't have a use for it yet:
+ // https://github.com/aadsm/jsmediatags#shortcuts
+ dispatch({ type: SET_MEDIA_TAGS, artist, title, id });
+ })
+ .catch(() => {
+ dispatch({ type: MEDIA_TAG_REQUEST_FAILED, id });
});
- } catch (e) {
- // Possibly jsmediatags could not find a parser for this file?
- // Nothing to do.
- // Consider removing this after https://github.com/aadsm/jsmediatags/issues/83 is resolved.
- }
};
}
@@ -367,12 +392,12 @@ export function setSkinFromUrl(url) {
};
}
-// This function is private, since Winamp consumers may wish to support
-// opening files via other means (Dropbox?). Only use the file type specific
+// This function is private, since Winamp consumers can provide means for
+// opening files via other methods. Only use the file type specific
// versions below, since they can defer to the user-defined behavior.
function _openFileDialog(accept) {
return async dispatch => {
- const fileReferences = await promptForFileReferences(accept);
+ const fileReferences = await promptForFileReferences({ accept });
dispatch(loadFilesFromReferences(fileReferences));
};
}
@@ -514,6 +539,10 @@ export function setPlaylistScrollPosition(position) {
return { type: SET_PLAYLIST_SCROLL_POSITION, position };
}
+export function setPlaylistSize(size) {
+ return { type: PLAYLIST_SIZE_CHANGED, size };
+}
+
export function scrollNTracks(n) {
return (dispatch, getState) => {
const state = getState();
diff --git a/js/actionTypes.js b/js/actionTypes.js
index 92d52697..5add53b5 100644
--- a/js/actionTypes.js
+++ b/js/actionTypes.js
@@ -60,3 +60,5 @@ export const SET_MEDIA_TAGS = "SET_MEDIA_TAGS";
export const SET_MEDIA_DURATION = "SET_MEDIA_DURATION";
export const OPEN_GEN_WINDOW = "OPEN_GEN_WINDOW";
export const CLOSE_GEN_WINDOW = "CLOSE_GEN_WINDOW";
+export const MEDIA_TAG_REQUEST_INITIALIZED = "MEDIA_TAG_REQUEST_INITIALIZED";
+export const MEDIA_TAG_REQUEST_FAILED = "MEDIA_TAG_REQUEST_FAILED";
diff --git a/js/components/App.js b/js/components/App.js
index 23b30516..456dc26b 100644
--- a/js/components/App.js
+++ b/js/components/App.js
@@ -22,13 +22,14 @@ const App = ({
equalizer,
playlist,
openWindows,
- container
+ container,
+ filePickers
}) => {
if (closed) {
return null;
}
const windows = {
- main: