Mirrors/webamp
1
0
Fork 0
mirror of https://github.com/captbaritone/webamp.git synced 2026-01-23 02:15:01 +00:00
Code Issues Projects Releases Wiki Activity

Trailing commas!

Browse source
This commit is contained in:
Jordan Eldredge 2019-03-19 06:55:24 -07:00
parent c6a70451c9
commit bd5fa82c99
132 changed files with 831 additions and 828 deletions
Download patch file Download diff file Expand all files Collapse all files

2
config/jest.integration.js
View file

@ -2,5 +2,5 @@ module.exports = {
displayName: "integration-test",
rootDir: "../",
preset: "jest-puppeteer",
testRegex: "\\.integration-test\\.js$"
testRegex: "\\.integration-test\\.js$",
};

8
config/jest.unit.js
View file

@ -3,15 +3,15 @@ module.exports = {
rootDir: "../",
testRegex: "\\.test\\.(js|ts|tsx)$",
globals: {
SENTRY_DSN: null
SENTRY_DSN: null,
},
moduleFileExtensions: ["js", "tsx", "ts"],
moduleNameMapper: {
"\\.css$": "<rootDir>/js/__mocks__/styleMock.js",
"\\.wsz$": "<rootDir>/js/__mocks__/fileMock.js",
"\\.mp3$": "<rootDir>/js/__mocks__/fileMock.js"
"\\.mp3$": "<rootDir>/js/__mocks__/fileMock.js",
},
transform: {
"^.+\\.(js|ts|tsx)$": "babel-jest"
}
"^.+\\.(js|ts|tsx)$": "babel-jest",
},
};

34
config/webpack.library.js
View file

@ -6,7 +6,7 @@ module.exports = {
devtool: "source-map",
mode: "production",
resolve: {
extensions: [".js", ".ts", ".tsx"]
extensions: [".js", ".ts", ".tsx"],
},
module: {
rules: [
@ -21,11 +21,11 @@ module.exports = {
options: {
plugins: [
require("cssnano"),
require("../scripts/postcss-optimize-data-uri-pngs")
]
}
}
]
require("../scripts/postcss-optimize-data-uri-pngs"),
],
},
},
],
},
{
test: /\.(js|ts|tsx)$/,
@ -33,36 +33,36 @@ module.exports = {
use: {
loader: "babel-loader",
options: {
envName: "library"
}
}
}
envName: "library",
},
},
},
],
noParse: [/jszip\.js$/]
noParse: [/jszip\.js$/],
},
plugins: [
new BundleAnalyzerPlugin({
analyzerMode: "static",
reportFilename: "library-report.html",
openAnalyzer: false
openAnalyzer: false,
}),
// Also generate non-minified bundles.
new UnminifiedWebpackPlugin()
new UnminifiedWebpackPlugin(),
],
performance: {
// We do some crazy shit okay! Don't judge!
maxEntrypointSize: 9000000,
maxAssetSize: 9000000
maxAssetSize: 9000000,
},
entry: {
"bundle.min": "./js/webamp.js",
"lazy-bundle.min": "./js/webampLazy.tsx"
"lazy-bundle.min": "./js/webampLazy.tsx",
},
output: {
path: path.resolve(__dirname, "../built"),
filename: "webamp.[name].js",
library: "Webamp",
libraryTarget: "umd",
libraryExport: "default"
}
libraryExport: "default",
},
};

55
demo/config/webpack.common.js
View file

@ -5,7 +5,7 @@ const HtmlWebpackInlineSVGPlugin = require("html-webpack-inline-svg-plugin");
module.exports = {
resolve: {
extensions: [".js", ".ts", ".tsx"]
extensions: [".js", ".ts", ".tsx"],
},
module: {
rules: [
@ -20,11 +20,11 @@ module.exports = {
options: {
plugins: [
require("cssnano"),
require("../../scripts/postcss-optimize-data-uri-pngs")
]
}
}
]
require("../../scripts/postcss-optimize-data-uri-pngs"),
],
},
},
],
},
{
test: /\.(js|ts|tsx)?$/,
@ -32,9 +32,9 @@ module.exports = {
use: {
loader: "babel-loader",
options: {
envName: "production"
}
}
envName: "production",
},
},
},
{
test: /\.(wsz|mp3|png|ico|jpg|svg)$/,
@ -43,17 +43,17 @@ module.exports = {
loader: "file-loader",
options: {
emitFile: true,
name: "[path][name]-[hash].[ext]"
}
}
]
}
name: "[path][name]-[hash].[ext]",
},
},
],
},
],
noParse: [/jszip\.js$/]
noParse: [/jszip\.js$/],
},
plugins: [
new HtmlWebpackPlugin({
template: "./index.html"
template: "./index.html",
}),
// Automatically generates the manifest.json file inside the built
// directory, and injects a tag into the gererated index.html file
@ -71,35 +71,38 @@ module.exports = {
{
src: path.resolve("./demo/images/manifest/icon-192x192.png"),
sizes: "192x192",
type: "image/png"
type: "image/png",
},
{
src: path.resolve("./demo/images/manifest/icon-512x512.png"),
sizes: "512x512",
type: "image/png"
type: "image/png",
},
{
src: path.resolve("./demo/images/manifest/icon.svg"),
sizes: "513x513",
type: "image/svg+xml"
}
].map(icon => ({ ...icon, destination: path.join("images", "manifest") }))
type: "image/svg+xml",
},
].map(icon => ({
...icon,
destination: path.join("images", "manifest"),
})),
}),
new HtmlWebpackInlineSVGPlugin({ runPreEmit: true })
new HtmlWebpackInlineSVGPlugin({ runPreEmit: true }),
],
performance: {
// We do some crazy shit okay! Don't judge!
maxEntrypointSize: 7000000,
maxAssetSize: 7000000
maxAssetSize: 7000000,
},
entry: {
webamp: ["./js/index.js"]
webamp: ["./js/index.js"],
},
context: path.resolve(__dirname, "../"),
output: {
filename: "[name]-[hash].js",
chunkFilename: "[name]-[hash].js",
publicPath: "/",
path: path.resolve(__dirname, "../built")
}
path: path.resolve(__dirname, "../built"),
},
};

10
demo/config/webpack.dev.js
View file

@ -10,14 +10,14 @@ module.exports = merge(common, {
new webpack.DefinePlugin({
SENTRY_DSN: JSON.stringify(
"https://c8c64ef822f54240901bc64f88c234d8@sentry.io/146022"
)
),
}),
new CopyWebpackPlugin([
{
from: "./js/dev-service-worker.js",
to: "service-worker.js",
force: true
}
])
]
force: true,
},
]),
],
});

10
demo/config/webpack.prod.js
View file

@ -15,13 +15,13 @@ const config = merge(common, {
new BundleAnalyzerPlugin({
analyzerMode: "static",
reportFilename: "prod-report.html",
openAnalyzer: false
openAnalyzer: false,
}),
new webpack.DefinePlugin({
SENTRY_DSN: JSON.stringify(
"https://12b6be8ef7c44f28ac37ab5ed98fd294@sentry.io/146021"
),
COMMITHASH: JSON.stringify(gitRevisionPlugin.commithash())
COMMITHASH: JSON.stringify(gitRevisionPlugin.commithash()),
}),
new workboxPlugin.GenerateSW({
swDest: "service-worker.js",
@ -30,9 +30,9 @@ const config = merge(common, {
skipWaiting: true,
// Safari (mobile and desktop) seems to have CORs issues when loading
// .mp3s from service workers.
exclude: [/\.mp3/, /\.wsz/]
})
]
exclude: [/\.mp3/, /\.wsz/],
}),
],
});
config.entry.webamp.unshift("./js/googleAnalytics.min.js");

2
demo/js/avaliableSkins.ts
View file

@ -20,5 +20,5 @@ export default [
{ url: topaz, name: "TopazAmp" },
{ url: visor, name: "Vizor" },
{ url: xmms, name: "XMMS Turquoise " },
{ url: zaxon, name: "Zaxon Remake" }
{ url: zaxon, name: "Zaxon Remake" },
];

8
demo/js/butterchurnOptions.ts
View file

@ -4,7 +4,7 @@ const KNOWN_PRESET_URLS_REGEXES = [
/^https:\/\/unpkg\.com\/butterchurn-presets\/.*\.json$/,
/^https:\/\/unpkg\.com\/butterchurn-presets-weekly\/.*\.json$/,
/^https:\/\/archive\.org\/cors\/md_.*\.json$/,
/^https:\/\/s3-us-east-2\.amazonaws\.com\/butterchurn-presets\/.*\.json$/
/^https:\/\/s3-us-east-2\.amazonaws\.com\/butterchurn-presets\/.*\.json$/,
];
function presetNameFromURL(url: string) {
@ -77,8 +77,8 @@ export function getButterchurnOptions(
return [
{
name: presetNameFromURL(butterchurnPresetUrlParam),
butterchurnPresetUrl: butterchurnPresetUrlParam
}
butterchurnPresetUrl: butterchurnPresetUrlParam,
},
];
}
} else if (milkdropPresetUrl) {
@ -90,6 +90,6 @@ export function getButterchurnOptions(
"https://unpkg.com/butterchurn-presets-weekly@0.0.2/weeks/week1/presets.json"
);
},
butterchurnOpen: !startWithMilkdropHidden
butterchurnOpen: !startWithMilkdropHidden,
};
}

52
demo/js/config.ts
View file

@ -35,7 +35,7 @@ export const initialTracks = config.initialTracks || [
{
metaData: { artist: "DJ Mike Llama", title: "Llama Whippin' Intro" },
url: llamaAudio,
duration: 5.322286
duration: 5.322286,
},
{
url:
@ -44,8 +44,8 @@ export const initialTracks = config.initialTracks || [
metaData: {
title: "Heroines",
artist: "Diablo Swing Orchestra",
album
}
album,
},
},
{
url:
@ -54,8 +54,8 @@ export const initialTracks = config.initialTracks || [
metaData: {
title: "We Are Going To Eclecfunk Your Ass",
artist: "Eclectek",
album
}
album,
},
},
{
url:
@ -64,8 +64,8 @@ export const initialTracks = config.initialTracks || [
metaData: {
title: "Seventeen",
artist: "Auto-Pilot",
album
}
album,
},
},
{
url:
@ -74,8 +74,8 @@ export const initialTracks = config.initialTracks || [
metaData: {
title: "Microphone",
artist: "Muha",
album
}
album,
},
},
{
url:
@ -84,8 +84,8 @@ export const initialTracks = config.initialTracks || [
metaData: {
title: "Stumble",
artist: "Just Plain Ant",
album
}
album,
},
},
{
url:
@ -94,8 +94,8 @@ export const initialTracks = config.initialTracks || [
metaData: {
title: "God Damn",
artist: "Sleaze",
album
}
album,
},
},
{
url:
@ -104,8 +104,8 @@ export const initialTracks = config.initialTracks || [
metaData: {
title: "Hola Hola Bossa Nova",
artist: "Juanitos",
album
}
album,
},
},
{
url:
@ -114,8 +114,8 @@ export const initialTracks = config.initialTracks || [
metaData: {
title: "Resolutions (Chris Summer Remix)",
artist: "Entertainment for the Braindead",
album
}
album,
},
},
{
url:
@ -124,8 +124,8 @@ export const initialTracks = config.initialTracks || [
metaData: {
title: "Trail",
artist: "Nobara Hayakawa",
album
}
album,
},
},
{
url:
@ -134,8 +134,8 @@ export const initialTracks = config.initialTracks || [
metaData: {
title: "Tongue Tied",
artist: "Paper Navy",
album
}
album,
},
},
{
url:
@ -144,8 +144,8 @@ export const initialTracks = config.initialTracks || [
metaData: {
title: "Garage",
artist: "60 Tigres",
album
}
album,
},
},
{
url:
@ -154,9 +154,9 @@ export const initialTracks = config.initialTracks || [
metaData: {
title: "The Cycle (Featuring Mista Mista)",
artist: "CM aka Creative",
album
}
}
album,
},
},
];
export const disableMarquee = config.disableMarquee || false;

6
demo/js/dropboxFilePicker.ts
View file

@ -19,7 +19,7 @@ function genAudioFileUrlsFromDropbox(): Promise<DropboxFile[]> {
linkType: "direct",
folderselect: false,
multiselect: true,
extensions: ["video", "audio"]
extensions: ["video", "audio"],
});
});
}
@ -33,10 +33,10 @@ const dropboxFilePicker: FilePicker = {
const files = await genAudioFileUrlsFromDropbox();
return files.map(file => ({
url: file.link,
defaultName: file.name
defaultName: file.name,
}));
},
requiresNetwork: true
requiresNetwork: true,
};
export default dropboxFilePicker;

24
demo/js/index.js
View file

@ -21,7 +21,7 @@ import {
TOGGLE_REPEAT,
TOGGLE_SHUFFLE,
SET_EQ_AUTO,
SET_DUMMY_VIZ_DATA
SET_DUMMY_VIZ_DATA,
} from "../../js/actionTypes";
import { loadFilesFromReferences } from "../../js/actionCreators";
@ -34,7 +34,7 @@ import {
skinUrl as configSkinUrl,
initialTracks,
initialState,
disableMarquee
disableMarquee,
} from "./config";
import WebampIcon from "./WebampIcon";
import enableMediaSession from "./mediaSession";
@ -48,7 +48,7 @@ const NOISY_ACTION_TYPES = new Set([
UPDATE_WINDOW_POSITIONS,
SET_VOLUME,
SET_BALANCE,
SET_BAND_VALUE
SET_BAND_VALUE,
]);
const MIN_MILKDROP_WIDTH = 725;
@ -96,12 +96,12 @@ function filterBreadcrumbActions(action) {
Raven.config(SENTRY_DSN, {
/* global COMMITHASH */
release: typeof COMMITHASH !== "undefined" ? COMMITHASH : "DEV"
release: typeof COMMITHASH !== "undefined" ? COMMITHASH : "DEV",
}).install();
const ravenMiddleware = createMiddleware(Raven, {
filterBreadcrumbActions,
stateTransformer: Selectors.getDebugData
stateTransformer: Selectors.getDebugData,
});
// Don't prompt user to install Webamp. It's probably not
@ -138,12 +138,12 @@ Raven.context(async () => {
[WINDOWS.MAIN]: { position: { x: 0, y: 0 } },
[WINDOWS.EQUALIZER]: { position: { x: 0, y: 116 } },
[WINDOWS.PLAYLIST]: { position: { x: 0, y: 232 }, size: [0, 0] },
[WINDOWS.MILKDROP]: { position: { x: 0, y: 348 }, size: [0, 0] }
[WINDOWS.MILKDROP]: { position: { x: 0, y: 348 }, size: [0, 0] },
};
if (library) {
__initialWindowLayout[WINDOWS.MEDIA_LIBRARY] = {
position: { x: 0, y: 348 },
size: [0, 0]
size: [0, 0],
};
}
} else {
@ -151,12 +151,12 @@ Raven.context(async () => {
[WINDOWS.MAIN]: { position: { x: 0, y: 0 } },
[WINDOWS.EQUALIZER]: { position: { x: 0, y: 116 } },
[WINDOWS.PLAYLIST]: { position: { x: 0, y: 232 }, size: [0, 4] },
[WINDOWS.MILKDROP]: { position: { x: 275, y: 0 }, size: [7, 12] }
[WINDOWS.MILKDROP]: { position: { x: 275, y: 0 }, size: [7, 12] },
};
if (library) {
__initialWindowLayout[WINDOWS.MEDIA_LIBRARY] = {
position: { x: 275, y: 0 },
size: [7, 12]
size: [7, 12],
};
}
}
@ -180,7 +180,7 @@ Raven.context(async () => {
__initialWindowLayout,
__initialState: screenshot ? screenshotInitialState : initialState,
__butterchurnOptions,
__customMiddlewares: [ravenMiddleware]
__customMiddlewares: [ravenMiddleware],
});
if (disableMarquee || screenshot) {
@ -209,8 +209,8 @@ Raven.context(async () => {
96: 4.8125,
104: 4.375,
112: 3.625,
120: 1.5625
}
120: 1.5625,
},
});
}

8
demo/js/mediaSession.ts
View file

@ -9,7 +9,7 @@ export default function enableMediaSession(webamp: WebampLazy) {
return;
}
const {
metaData: { title, artist, album, albumArtUrl }
metaData: { title, artist, album, albumArtUrl },
} = track;
// @ts-ignore TypeScript does not know about the Media Session API: https://github.com/Microsoft/TypeScript/issues/19473
navigator.mediaSession.metadata = new MediaMetadata({
@ -19,13 +19,13 @@ export default function enableMediaSession(webamp: WebampLazy) {
artwork: albumArtUrl
? [
{
src: albumArtUrl
src: albumArtUrl,
// We don't currently know these.
// sizes: "96x96",
// type: "image/png"
}
},
]
: []
: [],
});
});

22
demo/js/screenshotInitialState.ts
View file

@ -10,7 +10,7 @@ const defaultTracksState = {
url: "",
kbps: "128",
khz: "44",
channels: 2
channels: 2,
},
"1": {
id: 1,
@ -20,7 +20,7 @@ const defaultTracksState = {
url: "",
kbps: "128",
khz: "44",
channels: 2
channels: 2,
},
"2": {
id: 2,
@ -30,7 +30,7 @@ const defaultTracksState = {
url: "",
kbps: "128",
khz: "44",
channels: 2
channels: 2,
},
"3": {
id: 3,
@ -40,8 +40,8 @@ const defaultTracksState = {
url: "",
kbps: "128",
khz: "44",
channels: 2
}
channels: 2,
},
};
const initialState: DeepPartial<AppState> = {
@ -57,22 +57,22 @@ const initialState: DeepPartial<AppState> = {
"12000": 19,
"14000": 34,
"16000": 75,
preamp: 56
}
preamp: 56,
},
},
media: {
status: "PLAYING",
timeElapsed: 3
timeElapsed: 3,
},
playlist: {
trackOrder: [0, 1, 2, 3],
currentTrack: 0,
selectedTracks: new Set([2])
selectedTracks: new Set([2]),
},
tracks: defaultTracksState,
display: {
working: false
}
working: false,
},
};
export default initialState;

8
examples/webpack/index.js
View file

@ -5,11 +5,11 @@ new Webamp({
{
metaData: {
artist: "DJ Mike Llama",
title: "Llama Whippin' Intro"
title: "Llama Whippin' Intro",
},
url:
"https://cdn.jsdelivr.net/gh/captbaritone/webamp@43434d82cfe0e37286dbbe0666072dc3190a83bc/mp3/llama-2.91.mp3",
duration: 5.322286
}
]
duration: 5.322286,
},
],
}).renderWhenReady(document.getElementById("app"));

2
experiments/skinArchiveTools/lib/collectSkins.js
View file

@ -49,7 +49,7 @@ module.exports = async function collectSkins({ inputDir, cache }) {
} else {
cache[md5] = {
md5,
filePaths: [filePath]
filePaths: [filePath],
};
}
},

2
experiments/skinArchiveTools/lib/constants.js
View file

@ -2,7 +2,7 @@ const FILE_TYPES = {
INVALID: "INVALID",
CLASSIC: "CLASSIC",
MODERN: "MODERN",
PACK: "PACK"
PACK: "PACK",
};
module.exports = { FILE_TYPES };

4
experiments/skinArchiveTools/lib/index.js
View file

@ -20,7 +20,7 @@ const [
// eslint-disable-next-line @typescript-eslint/no-unused-vars
_thisFile,
rawInputDir,
rawOutputDir
rawOutputDir,
] = process.argv;
const inputDir = path.resolve(rawInputDir);
@ -182,7 +182,7 @@ async function main() {
`${skin.md5}.png`
);
await shooter.takeScreenshot(getPath(skin), screenshotPath, {
minify: true
minify: true,
});
skin.screenshotPath = screenshotPath;
i++;

4
experiments/skinArchiveTools/lib/shooter.js
View file

@ -5,7 +5,7 @@ const imageminOptipng = require("imagemin-optipng");
function min(imgPath) {
return imagemin([imgPath], path.dirname(imgPath), {
use: [imageminOptipng()]
use: [imageminOptipng()],
});
}
@ -61,7 +61,7 @@ class Shooter {
path: screenshotPath,
omitBackground: true, // Make screenshot transparent
// https://github.com/GoogleChrome/puppeteer/issues/703#issuecomment-366041479
clip: { x: 0, y: 0, width: 275, height: 116 * 3 }
clip: { x: 0, y: 0, width: 275, height: 116 * 3 },
});
console.log("Wrote screenshot to", screenshotPath);
if (minify) {

2
experiments/skinArchiveTools/lib/takeScreenshots.js
View file

@ -26,7 +26,7 @@ module.exports = async function takeScreenshots(skinDir, screenshotDir) {
continue;
}
await shooter.takeScreenshot(filePath, screenshotPath, {
minify: true
minify: true,
});
shotCount++;
}

4
experiments/skinArchiveTools/lib/utils.js
View file

@ -76,7 +76,7 @@ function archive(skin, itemName) {
screenshotPath,
`${filename}.wsz`,
getArchiveTitle(skin),
itemName
itemName,
],
(err, stdout) => {
if (err) {
@ -117,5 +117,5 @@ module.exports = {
md5File,
archive,
getArchiveItemName,
getArchiveTitle
getArchiveTitle,
};

4
jest-puppeteer.config.js
View file

@ -3,6 +3,6 @@ module.exports = {
// Note: We require the the build be run before these tests.
// TODO: Figure out how to get this command to run the buil.
command: "npm run serve",
port: 8080 // Jest Puppeteer will wait 5000ms for this port to come online.
}
port: 8080, // Jest Puppeteer will wait 5000ms for this port to come online.
},
};

4
js/actionCreators/equalizer.ts
View file

@ -4,7 +4,7 @@ import {
SET_EQ_ON,
SET_EQ_OFF,
SET_BAND_VALUE,
SET_EQ_AUTO
SET_EQ_AUTO,
} from "../actionTypes";
import { Band, Dispatchable } from "../types";
@ -31,7 +31,7 @@ function _setEqTo(value: number): Dispatchable {
dispatch({
type: SET_BAND_VALUE,
value,
band: band
band: band,
});
});
};

18
js/actionCreators/files.ts
View file

@ -7,14 +7,14 @@ import {
promptForFileReferences,
genArrayBufferFromFileReference,
genMediaDuration,
genMediaTags
genMediaTags,
} from "../fileUtils";
import skinParser from "../skinParser";
import {
getTracks,
getTrackIsVisibleFunction,
getEqfData,
getPlaylistURL
getPlaylistURL,
} from "../selectors";
import {
@ -27,7 +27,7 @@ import {
MEDIA_TAG_REQUEST_FAILED,
SET_SKIN_DATA,
LOADED,
LOADING
LOADING,
} from "../actionTypes";
import LoadQueue from "../loadQueue";
@ -50,7 +50,7 @@ export function addTracksFromReferences(
): Dispatchable {
const tracks: Track[] = Array.from(fileReferences).map(file => ({
blob: file,
defaultName: file.name
defaultName: file.name,
}));
return loadMediaFiles(tracks, loadStyle, atIndex);
}
@ -109,8 +109,8 @@ export function setSkinFromArrayBuffer(
skinCursors: skinData.cursors,
skinRegion: skinData.region,
skinGenLetterWidths: skinData.genLetterWidths,
skinGenExColors: skinData.genExColors
}
skinGenExColors: skinData.genExColors,
},
});
} catch (e) {
console.error(e);
@ -253,7 +253,7 @@ export function loadMediaFile(
duration: track.duration,
defaultName,
id,
atIndex
atIndex,
});
switch (priority) {
case LOAD_STYLE.BUFFER:
@ -286,7 +286,7 @@ export function loadMediaFile(
sampleRate: 44000,
bitrate: 192000,
numberOfChannels: 2,
id
id,
});
} else if ("blob" in track) {
// Blobs can be loaded quickly
@ -336,7 +336,7 @@ export function fetchMediaTags(file: string | Blob, id: number): Dispatchable {
numberOfChannels,
bitrate,
sampleRate,
id
id,
});
} catch (e) {
dispatch({ type: MEDIA_TAG_REQUEST_FAILED, id });

22
js/actionCreators/index.test.js
View file

@ -6,7 +6,7 @@ import {
SET_BALANCE,
TOGGLE_REPEAT,
TOGGLE_SHUFFLE,
SET_BAND_VALUE
SET_BAND_VALUE,
} from "../actionTypes";
import {
@ -19,7 +19,7 @@ import {
setEqBand,
setEqToMax,
setEqToMin,
setEqToMid
setEqToMid,
} from "./";
test("stop", () => {
@ -31,14 +31,14 @@ describe("setVolume", () => {
it("enforces a mimimum value", () => {
const expectedAction = {
type: SET_VOLUME,
volume: 0
volume: 0,
};
expect(setVolume(-10)).toEqual(expectedAction);
});
it("enforces a maximum value", () => {
const expectedAction = {
type: SET_VOLUME,
volume: 100
volume: 100,
};
expect(setVolume(110)).toEqual(expectedAction);
});
@ -48,28 +48,28 @@ describe("setBalance", () => {
it("enforces a mimimum value", () => {
const expectedAction = {
type: SET_BALANCE,
balance: -100
balance: -100,
};
expect(setBalance(-110)).toEqual(expectedAction);
});
it("enforces a maximum value", () => {
const expectedAction = {
type: SET_BALANCE,
balance: 100
balance: 100,
};
expect(setBalance(110)).toEqual(expectedAction);
});
it("snaps to zero for positive values close to zero", () => {
const expectedAction = {
type: SET_BALANCE,
balance: 0
balance: 0,
};
expect(setBalance(24)).toEqual(expectedAction);
});
it("snaps to zero for negative values close to zero", () => {
const expectedAction = {
type: SET_BALANCE,
balance: 0
balance: 0,
};
expect(setBalance(-24)).toEqual(expectedAction);
});
@ -100,7 +100,7 @@ test("setEqToMax", () => {
const dispatcher = setEqToMax();
dispatcher(mockDispatch);
const expectedCalls = BANDS.map(band => [
{ type: SET_BAND_VALUE, band, value: 100 }
{ type: SET_BAND_VALUE, band, value: 100 },
]);
expect(mockDispatch.mock.calls).toEqual(expectedCalls);
});
@ -110,7 +110,7 @@ test("setEqToMin", () => {
const dispatcher = setEqToMin();
dispatcher(mockDispatch);
const expectedCalls = BANDS.map(band => [
{ type: SET_BAND_VALUE, band, value: 0 }
{ type: SET_BAND_VALUE, band, value: 0 },
]);
expect(mockDispatch.mock.calls).toEqual(expectedCalls);
});
@ -120,7 +120,7 @@ test("setEqToMid", () => {
const dispatcher = setEqToMid();
dispatcher(mockDispatch);
const expectedCalls = BANDS.map(band => [
{ type: SET_BAND_VALUE, band, value: 50 }
{ type: SET_BAND_VALUE, band, value: 50 },
]);
expect(mockDispatch.mock.calls).toEqual(expectedCalls);
});

14
js/actionCreators/index.ts
View file

@ -10,7 +10,7 @@ import {
LOAD_SERIALIZED_STATE,
LOAD_DEFAULT_SKIN,
SET_MILKDROP_DESKTOP,
SET_MILKDROP_FULLSCREEN
SET_MILKDROP_FULLSCREEN,
} from "../actionTypes";
import { WINDOWS } from "../constants";
import { Dispatchable } from "../types";
@ -36,7 +36,7 @@ export {
ensureWindowsAreOnScreen,
stackWindows,
toggleLlamaMode,
setFocusedWindow
setFocusedWindow,
} from "./windows";
export {
play,
@ -53,7 +53,7 @@ export {
setBalance,
toggleRepeat,
toggleShuffle,
toggleTimeMode
toggleTimeMode,
} from "./media";
export {
setEqBand,
@ -62,7 +62,7 @@ export {
setEqToMin,
setPreamp,
toggleEq,
toggleEqAuto
toggleEqAuto,
} from "./equalizer";
export {
addTracksFromReferences,
@ -81,7 +81,7 @@ export {
setEqFromFileReference,
downloadPreset,
setEqFromObject,
downloadHtmlPlaylist
downloadHtmlPlaylist,
} from "./files";
export {
cropPlaylist,
@ -95,7 +95,7 @@ export {
scrollPlaylistByDelta,
scrollUpFourTracks,
scrollDownFourTracks,
dragSelected
dragSelected,
} from "./playlist";
export {
initializePresets,
@ -109,7 +109,7 @@ export {
loadPresets,
toggleRandomizePresets,
togglePresetCycling,
scheduleMilkdropMessage
scheduleMilkdropMessage,
} from "./milkdrop";
export function close(): Dispatchable {

10
js/actionCreators/media.ts
View file

@ -9,7 +9,7 @@ import {
PLAY,
PAUSE,
PLAY_TRACK,
TOGGLE_TIME_MODE
TOGGLE_TIME_MODE,
} from "../actionTypes";
import { MEDIA_STATUS } from "../constants";
@ -20,7 +20,7 @@ import * as Selectors from "../selectors";
function playRandomTrack(): Dispatchable {
return (dispatch: Dispatch, getState: GetState) => {
const {
playlist: { trackOrder, currentTrack }
playlist: { trackOrder, currentTrack },
} = getState();
if (trackOrder.length === 0) {
return;
@ -99,7 +99,7 @@ export function seekForward(seconds: number): Dispatchable {
const newTimeElapsed = timeElapsed + seconds;
dispatch({
type: SEEK_TO_PERCENT_COMPLETE,
percent: (newTimeElapsed / duration) * 100
percent: (newTimeElapsed / duration) * 100,
});
};
}
@ -111,7 +111,7 @@ export function seekBackward(seconds: number): Dispatchable {
export function setVolume(volume: number): Dispatchable {
return {
type: SET_VOLUME,
volume: clamp(volume, 0, 100)
volume: clamp(volume, 0, 100),
};
}
@ -141,7 +141,7 @@ export function setBalance(balance: number): Dispatchable {
}
return {
type: SET_BALANCE,
balance
balance,
};
}

14
js/actionCreators/milkdrop.ts
View file

@ -7,7 +7,7 @@ import {
PRESET_REQUESTED,
TOGGLE_RANDOMIZE_PRESETS,
TOGGLE_PRESET_CYCLING,
SCHEDULE_MILKDROP_MESSAGE
SCHEDULE_MILKDROP_MESSAGE,
} from "../actionTypes";
import * as Selectors from "../selectors";
import {
@ -15,7 +15,7 @@ import {
TransitionType,
Preset,
ButterchurnOptions,
StatePreset
StatePreset,
} from "../types";
import * as FileUtils from "../fileUtils";
@ -25,13 +25,13 @@ function normalizePresetTypes(preset: Preset): StatePreset {
return {
type: "RESOLVED",
name,
preset: preset.butterchurnPresetObject
preset: preset.butterchurnPresetObject,
};
} else if ("getButterchrunPresetObject" in preset) {
return {
type: "UNRESOLVED",
name,
getPreset: preset.getButterchrunPresetObject
getPreset: preset.getButterchrunPresetObject,
};
} else if ("butterchurnPresetUrl" in preset) {
return {
@ -40,7 +40,7 @@ function normalizePresetTypes(preset: Preset): StatePreset {
getPreset: async () => {
const resp = await fetch(preset.butterchurnPresetUrl);
return resp.json();
}
},
};
}
throw new Error("Invalid preset object");
@ -90,7 +90,7 @@ export function appendPresetFileList(fileList: FileList): Dispatchable {
return {
type: "UNRESOLVED",
name: file.name.slice(0, file.name.length - MILK_EXT.length),
getPreset: () => convertPreset(file)
getPreset: () => convertPreset(file),
} as StatePreset;
} else if (filename.endsWith(JSON_EXT)) {
return {
@ -100,7 +100,7 @@ export function appendPresetFileList(fileList: FileList): Dispatchable {
const str = await FileUtils.genStringFromFileReference(file);
// TODO: How should we handle the case where json parsing fails?
return JSON.parse(str);
}
},
} as StatePreset;
}
console.error("Invalid type preset when loading directory");

12
js/actionCreators/playlist.ts
View file

@ -10,7 +10,7 @@ import {
RANDOMIZE_LIST,
SET_TRACK_ORDER,
SET_PLAYLIST_SCROLL_POSITION,
DRAG_SELECTED
DRAG_SELECTED,
} from "../actionTypes";
import { Dispatchable } from "../types";
@ -22,13 +22,13 @@ export function cropPlaylist(): Dispatchable {
}
const selectedTrackIds = Selectors.getSelectedTrackIds(state);
const {
playlist: { trackOrder }
playlist: { trackOrder },
} = state;
dispatch({
type: REMOVE_TRACKS,
// @ts-ignore The keys are numbers, but TypeScript does not trust us.
// https://github.com/Microsoft/TypeScript/pull/12253#issuecomment-263132208
ids: trackOrder.filter(id => !selectedTrackIds.has(id))
ids: trackOrder.filter(id => !selectedTrackIds.has(id)),
});
};
}
@ -39,7 +39,7 @@ export function removeSelectedTracks(): Dispatchable {
type: REMOVE_TRACKS,
// @ts-ignore The keys are numbers, but TypeScript does not trust us.
// https://github.com/Microsoft/TypeScript/pull/12253#issuecomment-263132208
ids: Array.from(Selectors.getSelectedTrackIds(getState()))
ids: Array.from(Selectors.getSelectedTrackIds(getState())),
});
};
}
@ -83,7 +83,7 @@ export function scrollNTracks(n: number): Dispatchable {
const position = overflow ? clamp((currentOffset + n) / overflow, 0, 1) : 0;
return dispatch({
type: SET_PLAYLIST_SCROLL_POSITION,
position: position * 100
position: position * 100,
});
};
}
@ -105,7 +105,7 @@ export function scrollPlaylistByDelta(
state.display.playlistScrollPosition + percentDelta,
0,
100
)
),
});
};
}

20
js/actionCreators/windows.ts
View file

@ -12,7 +12,7 @@ import {
BROWSER_WINDOW_SIZE_CHANGED,
RESET_WINDOW_SIZES,
TOGGLE_LLAMA_MODE,
SET_FOCUSED_WINDOW
SET_FOCUSED_WINDOW,
} from "../actionTypes";
import { getPositionDiff, SizeDiff } from "../resizeUtils";
@ -22,7 +22,7 @@ import {
Dispatchable,
WindowId,
WindowPositions,
Dispatch
Dispatch,
} from "../types";
// Dispatch an action and, if needed rearrange the windows to preserve
@ -46,7 +46,7 @@ function withWindowGraphIntegrity(action: Action): Dispatchable {
const current = newSizes[window];
sizeDiff[window] = {
height: current.height - original.height,
width: current.width - original.width
width: current.width - original.width,
};
}
@ -72,21 +72,21 @@ export function toggleLlamaMode(): Dispatchable {
export function toggleEqualizerShadeMode(): Dispatchable {
return withWindowGraphIntegrity({
type: TOGGLE_WINDOW_SHADE_MODE,
windowId: "equalizer"
windowId: "equalizer",
});
}
export function toggleMainWindowShadeMode(): Dispatchable {
return withWindowGraphIntegrity({
type: TOGGLE_WINDOW_SHADE_MODE,
windowId: "main"
windowId: "main",
});
}
export function togglePlaylistShadeMode(): Dispatchable {
return withWindowGraphIntegrity({
type: TOGGLE_WINDOW_SHADE_MODE,
windowId: "playlist"
windowId: "playlist",
});
}
@ -140,7 +140,7 @@ export function centerWindowsInView(): Dispatchable {
left: window.scrollX,
top: window.scrollY,
width: window.innerWidth,
height: window.innerHeight
height: window.innerHeight,
});
}
@ -170,13 +170,13 @@ export function centerWindows(box: {
const move = {
x: Math.ceil(offsetLeft - bounding.left + (width - boxWidth) / 2),
y: Math.ceil(offsetTop - bounding.top + (height - boxHeight) / 2)
y: Math.ceil(offsetTop - bounding.top + (height - boxHeight) / 2),
};
const newPositions = windowsInfo.reduce(
(pos, w) => ({
...pos,
[w.key]: { x: move.x + w.x, y: move.y + w.y }
[w.key]: { x: move.x + w.x, y: move.y + w.y },
}),
{}
);
@ -251,7 +251,7 @@ export function ensureWindowsAreOnScreen(): Dispatchable {
const newPositions = Utils.objectMap(positions, position => ({
x: position.x - moveX,
y: position.y - moveY
y: position.y - moveY,
}));
dispatch(updateWindowPositions(newPositions));

8
js/components/App.js
View file

@ -108,7 +108,7 @@ class App extends React.Component {
node,
remove: () => {
node.removeEventListener("keydown", listener);
}
},
};
}
@ -183,7 +183,7 @@ class App extends React.Component {
}
App.propTypes = {
container: PropTypes.instanceOf(Element)
container: PropTypes.instanceOf(Element),
};
const mapStateToProps = state => ({
@ -192,13 +192,13 @@ const mapStateToProps = state => ({
focused: state.windows.focused,
closed: state.display.closed,
genWindowsInfo: state.windows.genWindows,
zIndex: state.display.zIndex
zIndex: state.display.zIndex,
});
const mapDispatchToProps = dispatch => ({
closeWindow: id => dispatch(Actions.closeWindow(id)),
browserWindowSizeChanged: size =>
dispatch(Actions.browserWindowSizeChanged(size))
dispatch(Actions.browserWindowSizeChanged(size)),
});
export default connect(

4
js/components/Balance.tsx
View file

@ -33,13 +33,13 @@ const Balance = (props: Props) => (
);
const mapStateToProps = (state: AppState) => ({
balance: Selectors.getBalance(state)
balance: Selectors.getBalance(state),
});
const mapDispatchToProps = (dispatch: Dispatch) => ({
setBalance: (e: ChangeEvent<HTMLInputElement>) =>
dispatch(Actions.setBalance(Number((e.target as HTMLInputElement).value))),
showMarquee: () => dispatch(Actions.setFocus("balance")),
hideMarquee: () => dispatch(Actions.unsetFocus())
hideMarquee: () => dispatch(Actions.unsetFocus()),
});
export default connect(

6
js/components/ContextMenu.tsx
View file

@ -34,7 +34,7 @@ const Portal = (props: PortalProps) => {
const style: React.CSSProperties = {
top: props.top,
left: props.left,
position: "absolute"
position: "absolute",
};
return createPortal(<div style={style}>{props.children}</div>, node);
};
@ -107,7 +107,7 @@ class ContextMenu extends React.Component<ContextMenuProps> {
top,
bottom,
selected,
zIndex
zIndex,
} = this.props;
return (
selected && (
@ -122,7 +122,7 @@ class ContextMenu extends React.Component<ContextMenuProps> {
}
const mapStateToProps = (state: AppState) => ({
zIndex: state.display.zIndex
zIndex: state.display.zIndex,
});
export default connect(mapStateToProps)(ContextMenu);

4
js/components/ContextMenuWrapper.tsx
View file

@ -17,7 +17,7 @@ export default class ContextMenuWraper extends React.Component<Props, State> {
this.state = {
selected: false,
offsetTop: null,
offsetLeft: null
offsetLeft: null,
};
}
@ -52,7 +52,7 @@ export default class ContextMenuWraper extends React.Component<Props, State> {
// TODO: We could do an initial render to see if the menu fits here
// and do a second render if it does not.
offsetTop: pageY,
offsetLeft: pageX
offsetLeft: pageX,
});
// Even if you right click multiple times before closeing,
// we should only end up with one global listener.

4
js/components/EqualizerWindow/Band.tsx
View file

@ -42,7 +42,7 @@ const Band = ({
id,
onChange,
handleMouseDown,
handleMouseUp
handleMouseUp,
}: Props) => (
<div id={id} className="band" style={{ backgroundPosition }}>
<Slider
@ -74,7 +74,7 @@ const mapDispatchToProps = (
): DispatchProps => ({
handleMouseDown: () =>
dispatch({ type: SET_BAND_FOCUS, input: "eq", bandFocused: ownProps.band }),
handleMouseUp: () => dispatch({ type: UNSET_FOCUS })
handleMouseUp: () => dispatch({ type: UNSET_FOCUS }),
});
export default connect(

2
js/components/EqualizerWindow/EqAuto.tsx
View file

@ -24,7 +24,7 @@ const mapStateToProps = (state: AppState): StateProps => {
const mapDispatchToProps = () => (dispatch: Dispatch): DispatchProps => {
// We don't support auto.
return {
toggleAuto: () => dispatch({ type: SET_EQ_AUTO, value: false })
toggleAuto: () => dispatch({ type: SET_EQ_AUTO, value: false }),
};
};

4
js/components/EqualizerWindow/EqGraph.js
View file

@ -60,7 +60,7 @@ class EqGraph extends React.Component {
colorsCanvas.height = height;
colorsCtx.drawImage(bgImage, 0, 0, width, height);
this.setState({
colorPattern: this.canvasCtx.createPattern(colorsCanvas, "repeat-x")
colorPattern: this.canvasCtx.createPattern(colorsCanvas, "repeat-x"),
});
};
bgImage.src = lineColorsImage;
@ -137,5 +137,5 @@ class EqGraph extends React.Component {
export default connect(state => ({
...state.equalizer.sliders,
lineColorsImage: state.display.skinImages.EQ_GRAPH_LINE_COLORS,
preampLineUrl: state.display.skinImages.EQ_PREAMP_LINE
preampLineUrl: state.display.skinImages.EQ_PREAMP_LINE,
}))(EqGraph);

4
js/components/EqualizerWindow/EqOn.tsx
View file

@ -18,7 +18,7 @@ const EqOn = (props: StateProps & DispatchProps) => {
<div
id="on"
className={classnames({
selected: props.on
selected: props.on,
})}
onClick={props.toggleEq}
/>
@ -26,7 +26,7 @@ const EqOn = (props: StateProps & DispatchProps) => {
};
const mapStateToProps = (state: AppState): StateProps => ({
on: state.equalizer.on
on: state.equalizer.on,
});
const mapDispatchProps = (dispatch: Dispatch): DispatchProps => {

4
js/components/EqualizerWindow/EqualizerShade.tsx
View file

@ -40,13 +40,13 @@ const EqualizerShade = (props: StateProps & DispatchProps) => {
const mapDispatchToProps = (dispatch: Dispatch): DispatchProps => {
return {
closeWindow: () => dispatch(closeWindow("equalizer")),
toggleEqualizerShadeMode: () => dispatch(toggleEqualizerShadeMode())
toggleEqualizerShadeMode: () => dispatch(toggleEqualizerShadeMode()),
};
};
const mapStateToProps = (state: AppState): StateProps => ({
volume: state.media.volume,
balance: state.media.balance
balance: state.media.balance,
});
export default connect(

4
js/components/EqualizerWindow/PresetsContextMenu.tsx
View file

@ -4,7 +4,7 @@ import builtin from "../../../presets/builtin.json";
import {
openEqfFileDialog,
downloadPreset,
setEqFromObject
setEqFromObject,
} from "../../actionCreators";
import { Node, Parent, Hr } from "../ContextMenu";
import ContextMenuTarget from "../ContextMenuTarget";
@ -37,7 +37,7 @@ const mapDispatchToProps = (dispatch: Dispatch): DispatchProps => {
return {
openEqfFileDialog: () => dispatch(openEqfFileDialog()),
downloadPreset: () => dispatch(downloadPreset()),
setEqFromObject: preset => dispatch(setEqFromObject(preset))
setEqFromObject: preset => dispatch(setEqFromObject(preset)),
};
};

2
js/components/EqualizerWindow/index.test.js
View file

@ -10,7 +10,7 @@ const media = {
setPreamp: jest.fn(),
setBalance: jest.fn(),
getAnalyser: () => null,
on: jest.fn()
on: jest.fn(),
};
const canvasMockify = require("canvas-mock");

8
js/components/EqualizerWindow/index.tsx
View file

@ -10,7 +10,7 @@ import {
setEqToMid,
setEqToMin,
closeWindow,
toggleEqualizerShadeMode
toggleEqualizerShadeMode,
} from "../../actionCreators";
import { SET_FOCUSED_WINDOW } from "../../actionTypes";
@ -53,7 +53,7 @@ const EqualizerWindow = (props: StateProps & DispatchProps) => {
doubled,
shade,
window: true,
draggable: true
draggable: true,
});
return (
<div
@ -109,13 +109,13 @@ const mapDispatchToProps = (dispatch: Dispatch): DispatchProps => ({
setHertzValue: (hertz: BandType) => (value: number) =>
dispatch(setEqBand(hertz, value)),
closeEqualizerWindow: () => dispatch(closeWindow("equalizer")),
toggleEqualizerShadeMode: () => dispatch(toggleEqualizerShadeMode())
toggleEqualizerShadeMode: () => dispatch(toggleEqualizerShadeMode()),
});
const mapStateToProps = (state: AppState): StateProps => ({
doubled: state.display.doubled,
selected: state.windows.focused === WINDOWS.EQUALIZER,
shade: getWindowShade(state)("equalizer")
shade: getWindowShade(state)("equalizer"),
});
export default connect(

8
js/components/GenWindow/index.tsx
View file

@ -69,7 +69,7 @@ export const GenWindow = ({
windowSize,
setGenWindowSize,
width,
height
height,
}: Props) => {
return (
<div
@ -97,7 +97,7 @@ export const GenWindow = ({
<div className="gen-middle-center">
{children({
width: width - CHROME_WIDTH,
height: height - CHROME_HEIGHT
height: height - CHROME_HEIGHT,
})}
</div>
<div className="gen-middle-right draggable">
@ -124,7 +124,7 @@ const mapStateToProps = (state: AppState, ownProps: OwnProps): StateProps => {
width,
height,
selected: state.windows.focused === ownProps.windowId,
windowSize: state.windows.genWindows[ownProps.windowId].size
windowSize: state.windows.genWindows[ownProps.windowId].size,
};
};
@ -134,7 +134,7 @@ const mapDispatchToProps = (dispatch: Dispatch): DispatchProps => {
dispatch({ type: SET_FOCUSED_WINDOW, window: windowId }),
close: (windowId: WindowId) => dispatch(closeWindow(windowId)),
setGenWindowSize: (windowId: WindowId, size: [number, number]) =>
dispatch(setWindowSize(windowId, size))
dispatch(setWindowSize(windowId, size)),
};
};

2
js/components/MainWindow/ActionButtons.tsx
View file

@ -27,7 +27,7 @@ const mapDispatchToProps = (dispatch: Dispatch): DispatchProps => {
play: () => dispatch(play()),
pause: () => dispatch(pause()),
stop: () => dispatch(stop()),
next: () => dispatch(next())
next: () => dispatch(next()),
};
};

4
js/components/MainWindow/ClutterBar.tsx
View file

@ -36,7 +36,7 @@ const ClutterBar = (props: StateProps & DispatchProps) => (
);
const mapStateToProps = (state: AppState): StateProps => ({
doubled: state.display.doubled
doubled: state.display.doubled,
});
const mapDispatchToProps = (dispatch: Dispatch): DispatchProps => ({
@ -44,7 +44,7 @@ const mapDispatchToProps = (dispatch: Dispatch): DispatchProps => ({
handleMouseUp: () => {
dispatch(toggleDoubleSizeMode());
dispatch({ type: UNSET_FOCUS });
}
},
});
export default connect(

2
js/components/MainWindow/Eject.tsx
View file

@ -13,7 +13,7 @@ const Eject = (props: DispatchProps) => (
);
const mapDispatchToProps = (dispatch: Dispatch): DispatchProps => ({
openMediaFileDialog: () => dispatch(Actions.openMediaFileDialog())
openMediaFileDialog: () => dispatch(Actions.openMediaFileDialog()),
});
export default connect(

4
js/components/MainWindow/EqToggleButton.tsx
View file

@ -26,11 +26,11 @@ const EqToggleButton = (props: Props) => (
);
const mapStateToProps = (state: AppState): StateProps => ({
windowOpen: getWindowOpen(state)("equalizer")
windowOpen: getWindowOpen(state)("equalizer"),
});
const mapDispatchToProps = {
handleClick: () => toggleWindow("equalizer")
handleClick: () => toggleWindow("equalizer"),
};
export default connect(

2
js/components/MainWindow/MainBalance.tsx
View file

@ -23,7 +23,7 @@ const MainBalance = (props: StateProps) => (
);
const mapStateToProps = (state: AppState): StateProps => ({
balance: state.media.balance
balance: state.media.balance,
});
export default connect(mapStateToProps)(MainBalance);

8
js/components/MainWindow/MainContextMenu.tsx
View file

@ -4,7 +4,7 @@ import {
close,
openMediaFileDialog,
loadMediaFiles,
toggleWindow
toggleWindow,
} from "../../actionCreators";
import { getGenWindows } from "../../selectors";
import { LOAD_STYLE } from "../../constants";
@ -18,7 +18,7 @@ import {
Track,
WindowId,
FilePicker,
LoadStyle
LoadStyle,
} from "../../types";
import { WebampWindow } from "../../reducers/windows";
@ -96,7 +96,7 @@ const MainContextMenu = (props: Props) => (
const mapStateToProps = (state: AppState): StateProps => ({
networkConnected: state.network.connected,
genWindows: getGenWindows(state)
genWindows: getGenWindows(state),
});
const mapDispatchToProps = (dispatch: Dispatch): DispatchProps => {
@ -105,7 +105,7 @@ const mapDispatchToProps = (dispatch: Dispatch): DispatchProps => {
openMediaFileDialog: () => dispatch(openMediaFileDialog()),
loadMediaFiles: (tracks: Track[], loadStyle: LoadStyle) =>
dispatch(loadMediaFiles(tracks, loadStyle)),
toggleGenWindow: (windowId: WindowId) => dispatch(toggleWindow(windowId))
toggleGenWindow: (windowId: WindowId) => dispatch(toggleWindow(windowId)),
};
};

4
js/components/MainWindow/MainVolume.tsx
View file

@ -16,7 +16,7 @@ const MainVolume = (props: Props) => {
const offset = (sprite - 1) * 15;
const style = {
backgroundPosition: `0 -${offset}px`
backgroundPosition: `0 -${offset}px`,
};
return (
<div id="volume" style={style}>
@ -26,7 +26,7 @@ const MainVolume = (props: Props) => {
};
const mapStateToProps = (state: AppState): Props => ({
volume: Selectors.getVolume(state)
volume: Selectors.getVolume(state),
});
export default connect(mapStateToProps)(MainVolume);

6
js/components/MainWindow/Marquee.tsx
View file

@ -110,7 +110,7 @@ class Marquee extends React.Component<Props, State> {
const style: React.CSSProperties = {
whiteSpace: "nowrap",
willChange: "transform",
transform: `translateX(${offsetPixels})`
transform: `translateX(${offsetPixels})`,
};
return (
<div
@ -137,12 +137,12 @@ class Marquee extends React.Component<Props, State> {
const mapStateToProps = (state: AppState): StateProps => ({
marqueeStep: state.display.marqueeStep,
text: Selectors.getMarqueeText(state),
doubled: Selectors.getDoubled(state)
doubled: Selectors.getDoubled(state),
});
const mapDispatchToProps = (dispatch: Dispatch): DispatchProps => {
return {
stepMarquee: () => dispatch({ type: STEP_MARQUEE })
stepMarquee: () => dispatch({ type: STEP_MARQUEE }),
};
};

2
js/components/MainWindow/Minimize.tsx
View file

@ -13,7 +13,7 @@ const Minimize = ({ minimize }: Props) => (
);
const mapDispatchToProps = (dispatch: Dispatch) => ({
minimize: () => dispatch(Actions.minimize())
minimize: () => dispatch(Actions.minimize()),
});
export default connect(

2
js/components/MainWindow/MonoStereo.tsx
View file

@ -20,7 +20,7 @@ const MonoStereo = (props: Props) => (
const mapStateToProps = (state: AppState): Props => {
return {
channels: Selectors.getChannels(state)
channels: Selectors.getChannels(state),
};
};

4
js/components/MainWindow/PlaylistToggleButton.js
View file

@ -15,11 +15,11 @@ const PlaylistToggleButton = props => (
);
const mapStateToProps = state => ({
getWindowOpen: getWindowOpen(state)
getWindowOpen: getWindowOpen(state),
});
const mapDispatchToProps = {
handleClick: () => toggleWindow("playlist")
handleClick: () => toggleWindow("playlist"),
};
export default connect(

12
js/components/MainWindow/Position.tsx
View file

@ -6,7 +6,7 @@ import {
SEEK_TO_PERCENT_COMPLETE,
SET_FOCUS,
UNSET_FOCUS,
SET_SCRUB_POSITION
SET_SCRUB_POSITION,
} from "../../actionTypes";
import * as Selectors from "../../selectors";
@ -26,7 +26,7 @@ const Position = ({
position,
seekToPercentComplete,
displayedPosition,
setPosition
setPosition,
}: Props) => {
// In shade mode, the position slider shows up differently depending on if
// it's near the start, middle or end of its progress
@ -69,7 +69,7 @@ const mapStateToProps = (state: AppState): StateProps => {
return {
displayedPosition,
position
position,
};
};
@ -77,7 +77,7 @@ const mapDispatchToProps = (dispatch: Dispatch): DispatchProps => ({
seekToPercentComplete: e => {
dispatch({
type: SEEK_TO_PERCENT_COMPLETE,
percent: Number((e.target as HTMLInputElement).value)
percent: Number((e.target as HTMLInputElement).value),
});
dispatch({ type: UNSET_FOCUS });
},
@ -85,9 +85,9 @@ const mapDispatchToProps = (dispatch: Dispatch): DispatchProps => ({
dispatch({ type: SET_FOCUS, input: "position" });
dispatch({
type: SET_SCRUB_POSITION,
position: Number((e.target as HTMLInputElement).value)
position: Number((e.target as HTMLInputElement).value),
});
}
},
});
export default connect(

4
js/components/MainWindow/Repeat.tsx
View file

@ -37,11 +37,11 @@ const Repeat = ({ repeat, handleClick }: Props) => (
);
const mapStateToProps = (state: AppState): StateProps => ({
repeat: state.media.repeat
repeat: state.media.repeat,
});
const mapDispatchToProps = (dispatch: Dispatch): DispatchProps => ({
handleClick: () => dispatch(toggleRepeat())
handleClick: () => dispatch(toggleRepeat()),
});
export default connect(

2
js/components/MainWindow/Shade.tsx
View file

@ -20,7 +20,7 @@ const Shade = (props: DispatchProps) => (
const mapDispatchToProps = (dispatch: Dispatch): DispatchProps => {
return {
handleClick: () => dispatch(toggleMainWindowShadeMode())
handleClick: () => dispatch(toggleMainWindowShadeMode()),
};
};

4
js/components/MainWindow/Shuffle.tsx
View file

@ -36,11 +36,11 @@ const Shuffle = ({ shuffle, handleClick }: Props) => (
);
const mapStateToProps = (state: AppState): StateProps => ({
shuffle: state.media.shuffle
shuffle: state.media.shuffle,
});
const mapDispatchToProps = (dispatch: Dispatch): DispatchProps => ({
handleClick: () => dispatch(toggleShuffle())
handleClick: () => dispatch(toggleShuffle()),
});
export default connect(
mapStateToProps,

4
js/components/MainWindow/Time.tsx
View file

@ -21,7 +21,7 @@ const Time = ({
timeElapsed,
duration,
timeMode,
toggleTimeMode
toggleTimeMode,
}: StateProps & DispatchProps) => {
const seconds =
timeMode === TIME_MODE.ELAPSED ? timeElapsed : duration - timeElapsed;
@ -57,7 +57,7 @@ const mapStateToProps = (state: AppState): StateProps => {
return { timeElapsed, duration: duration || 0, timeMode };
};
const mapDispatchToProps = (dispatch: Dispatch): DispatchProps => ({
toggleTimeMode: () => dispatch(Actions.toggleTimeMode())
toggleTimeMode: () => dispatch(Actions.toggleTimeMode()),
});
export default connect(

2
js/components/MainWindow/index.test.js
View file

@ -13,7 +13,7 @@ const media = {
setBalance: jest.fn(),
setPreamp: jest.fn(),
getAnalyser: () => null,
on: jest.fn()
on: jest.fn(),
};
const canvasMockify = require("canvas-mock");

14
js/components/MainWindow/index.tsx
View file

@ -6,7 +6,7 @@ import {
loadFilesFromReferences,
toggleMainWindowShadeMode,
scrollVolume,
loadMedia
loadMedia,
} from "../../actionCreators";
import { getWindowShade } from "../../selectors";
@ -44,7 +44,7 @@ import {
AppState,
Dispatch,
FilePicker,
Track
Track,
} from "../../types";
interface StateProps {
@ -86,7 +86,7 @@ export class MainWindow extends React.Component<Props> {
llama,
status,
working,
filePickers
filePickers,
} = this.props;
const className = classnames({
@ -99,7 +99,7 @@ export class MainWindow extends React.Component<Props> {
draggable: true,
loading,
doubled,
llama
llama,
});
return (
@ -174,7 +174,7 @@ const mapStateToProps = (state: AppState): StateProps => {
const {
media: { status },
display: { loading, doubled, llama, working },
windows: { focused }
windows: { focused },
} = state;
return {
mainShade: Boolean(getWindowShade(state)("main")),
@ -183,7 +183,7 @@ const mapStateToProps = (state: AppState): StateProps => {
doubled,
llama,
working,
focused
focused,
};
};
@ -196,7 +196,7 @@ const mapDispatchToProps = (dispatch: Dispatch): DispatchProps => {
toggleMainWindowShadeMode: () => dispatch(toggleMainWindowShadeMode()),
scrollVolume: (e: React.WheelEvent<HTMLDivElement>) =>
dispatch(scrollVolume(e)),
loadMedia: (e: React.DragEvent<HTMLDivElement>) => dispatch(loadMedia(e))
loadMedia: (e: React.DragEvent<HTMLDivElement>) => dispatch(loadMedia(e)),
};
};
export default connect(

4
js/components/MediaLibraryWindow/Sidebar.tsx
View file

@ -7,7 +7,7 @@ export default class Sidebar extends React.Component {
style={{
display: "flex",
flexDirection: "column",
height: "100%"
height: "100%",
}}
>
<div className="webamp-media-library-item" style={{ flexGrow: 1 }}>
@ -33,7 +33,7 @@ export default class Sidebar extends React.Component {
<button
style={{
width: "100%",
marginTop: 1
marginTop: 1,
}}
>
Library

8
js/components/MediaLibraryWindow/TracksTable.tsx
View file

@ -22,14 +22,14 @@ class TracksTable extends React.Component<StateProps, State> {
render() {
const cellStyle: React.CSSProperties = {
whiteSpace: "nowrap"
whiteSpace: "nowrap",
};
return (
<div
style={{
display: "flex",
flexDirection: "column",
flexGrow: 2
flexGrow: 2,
}}
>
<div
@ -52,7 +52,7 @@ class TracksTable extends React.Component<StateProps, State> {
display: "grid",
gridTemplateColumns:
"[artist] 1fr [title] 1fr [album] 1fr [length] 1fr [track number] 1fr [genere] 1fr [year] 1fr [filename] 1fr",
gridColumnGap: 1
gridColumnGap: 1,
}}
>
<div style={cellStyle}>Artist</div>
@ -116,7 +116,7 @@ class TracksTable extends React.Component<StateProps, State> {
const mapStateToProps = (state: AppState): StateProps => {
return {
tracks: Object.values(Selectors.getTracks(state)),
filterTracks: Selectors.getTracksMatchingFilter(state)
filterTracks: Selectors.getTracksMatchingFilter(state),
};
};

16
js/components/MediaLibraryWindow/index.tsx
View file

@ -26,7 +26,7 @@ class MediaLibraryWindow extends React.Component<Props, State> {
this.state = {
sidebarWidth: 100,
topPlaylistSectionHeight: 200,
artistsPanelWidth: 150
artistsPanelWidth: 150,
};
}
@ -44,7 +44,7 @@ class MediaLibraryWindow extends React.Component<Props, State> {
const initialWidth = this.state.sidebarWidth;
this._onMouseMove((moveEvent: MouseEvent) => {
this.setState({
sidebarWidth: initialWidth + moveEvent.pageX - startX
sidebarWidth: initialWidth + moveEvent.pageX - startX,
});
});
};
@ -54,7 +54,7 @@ class MediaLibraryWindow extends React.Component<Props, State> {
const initialHeight = this.state.topPlaylistSectionHeight;
this._onMouseMove((moveEvent: MouseEvent) => {
this.setState({
topPlaylistSectionHeight: initialHeight + moveEvent.pageY - startY
topPlaylistSectionHeight: initialHeight + moveEvent.pageY - startY,
});
});
};
@ -64,7 +64,7 @@ class MediaLibraryWindow extends React.Component<Props, State> {
const initialWidth = this.state.artistsPanelWidth;
this._onMouseMove((moveEvent: MouseEvent) => {
this.setState({
artistsPanelWidth: initialWidth + moveEvent.pageX - startX
artistsPanelWidth: initialWidth + moveEvent.pageX - startX,
});
});
};
@ -84,7 +84,7 @@ class MediaLibraryWindow extends React.Component<Props, State> {
right: 0,
display: "flex",
flexDirection: "row",
overflow: "hidden"
overflow: "hidden",
}}
>
<div style={{ width: this.state.sidebarWidth }}>
@ -103,7 +103,7 @@ class MediaLibraryWindow extends React.Component<Props, State> {
flexShrink: 1,
flexGrow: 1,
// https://stackoverflow.com/a/35609992/1263117
overflow: "hidden"
overflow: "hidden",
}}
>
<div
@ -111,7 +111,7 @@ class MediaLibraryWindow extends React.Component<Props, State> {
display: "flex",
flexDirection: "row",
flexShrink: 0,
height: this.state.topPlaylistSectionHeight
height: this.state.topPlaylistSectionHeight,
}}
>
<div style={{ width: this.state.artistsPanelWidth }}>
@ -142,7 +142,7 @@ class MediaLibraryWindow extends React.Component<Props, State> {
const mapStateToProps = (state: AppState) => {
return {
skinGenExColors: Selectors.getSkinGenExColors(state)
skinGenExColors: Selectors.getSkinGenExColors(state),
};
};
export default connect(mapStateToProps)(MediaLibraryWindow);

2
js/components/MilkdropWindow/Background.tsx
View file

@ -20,7 +20,7 @@ const Background = (props: Props) => {
left: 0,
right: 0,
height: "100%",
width: "100%"
width: "100%",
}}
tabIndex={0}
>

4
js/components/MilkdropWindow/MilkdropContextMenu.tsx
View file

@ -52,13 +52,13 @@ const MilkdropContextMenu = (props: Props) => (
const mapStateToProps = (state: AppState): StateProps => ({
desktop: Selectors.getMilkdropDesktopEnabled(state),
fullscreen: Selectors.getMilkdropFullscreenEnabled(state)
fullscreen: Selectors.getMilkdropFullscreenEnabled(state),
});
const mapDispatchToProps = (dispatch: Dispatch): DispatchProps => ({
closeWindow: () => dispatch(Actions.closeWindow(WINDOWS.MILKDROP)),
toggleDesktop: () => dispatch(Actions.toggleMilkdropDesktop()),
toggleFullscreen: () => dispatch(Actions.toggleMilkdropFullscreen())
toggleFullscreen: () => dispatch(Actions.toggleMilkdropFullscreen()),
});
export default connect(

18
js/components/MilkdropWindow/PresetOverlay.tsx
View file

@ -16,14 +16,14 @@ const LOADING_STYLE: React.CSSProperties = {
top: 0,
left: 0,
color: "white",
background: "rgba(0.33, 0.33, 0.33, 0.33)"
background: "rgba(0.33, 0.33, 0.33, 0.33)",
};
const OUTER_WRAPPER_STYLE: React.CSSProperties = {
position: "absolute",
top: 0,
left: 0,
padding: "15px 10px 0 10px"
padding: "15px 10px 0 10px",
};
const INNER_WRAPPER_STYLE: React.CSSProperties = {
@ -31,7 +31,7 @@ const INNER_WRAPPER_STYLE: React.CSSProperties = {
whiteSpace: "nowrap",
overflow: "hidden",
background: "rgba(0, 0, 0, 0.815)",
fontSize: "12px"
fontSize: "12px",
};
interface State {
@ -78,7 +78,7 @@ class PresetOverlay extends React.Component<Props, State> {
const { currentPresetIndex } = this.props;
if (currentPresetIndex != null) {
this.setState({
selectedListIndex: this._listIndexFromPresetIndex(currentPresetIndex)
selectedListIndex: this._listIndexFromPresetIndex(currentPresetIndex),
});
}
}
@ -138,7 +138,7 @@ class PresetOverlay extends React.Component<Props, State> {
switch (e.keyCode) {
case 38: // up arrow
this.setState({
selectedListIndex: Math.max(this.state.selectedListIndex - 1, 0)
selectedListIndex: Math.max(this.state.selectedListIndex - 1, 0),
});
e.stopPropagation();
break;
@ -147,7 +147,7 @@ class PresetOverlay extends React.Component<Props, State> {
selectedListIndex: Math.min(
this.state.selectedListIndex + 1,
this._maxListIndex()
)
),
});
e.stopPropagation();
break;
@ -193,7 +193,7 @@ class PresetOverlay extends React.Component<Props, State> {
style={{
...INNER_WRAPPER_STYLE,
width: width - 20 - WIDTH_PADDING,
maxHeight: height - HEIGHT_PADDING
maxHeight: height - HEIGHT_PADDING,
}}
>
<ul style={{ listStyleType: "none", padding: 0, margin: 0 }}>
@ -224,7 +224,7 @@ export function getRangeCenteredOnIndex(
function mapStateToProps(state: AppState): StateProps {
return {
presetKeys: Selectors.getPresetNames(state),
currentPresetIndex: Selectors.getCurrentPresetIndex(state)
currentPresetIndex: Selectors.getCurrentPresetIndex(state),
};
}
@ -235,7 +235,7 @@ function mapDispatchToProps(dispatch: Dispatch): DispatchProps {
},
togglePresetOverlay: () => dispatch(Actions.togglePresetOverlay()),
appendPresetFileList: (fileList: FileList) =>
dispatch(Actions.appendPresetFileList(fileList))
dispatch(Actions.appendPresetFileList(fileList)),
};
}

8
js/components/MilkdropWindow/Visualizer.tsx
View file

@ -35,7 +35,7 @@ type Props = StateProps & OwnProps;
const TRANSITION_TYPE_DURATIONS = {
[TransitionType.DEFAULT]: 2.7,
[TransitionType.IMMEDIATE]: 0,
[TransitionType.USER_PRESET]: 5.7
[TransitionType.USER_PRESET]: 5.7,
};
function Visualizer(props: Props) {
@ -63,7 +63,7 @@ function Visualizer(props: Props) {
height: props.height,
meshWidth: 32,
meshHeight: 24,
pixelRatio: window.devicePixelRatio || 1
pixelRatio: window.devicePixelRatio || 1,
}
);
_visualizer.connectAudio(props.analyser);
@ -148,7 +148,7 @@ function Visualizer(props: Props) {
style={{
height: "100%",
width: "100%",
display: props.isEnabledVisualizer ? "block" : "none"
display: props.isEnabledVisualizer ? "block" : "none",
}}
ref={canvasRef}
/>
@ -163,7 +163,7 @@ const mapStateToProps = (state: AppState): StateProps => ({
trackTitle: Selectors.getCurrentTrackDisplayName(state),
currentPreset: Selectors.getCurrentPreset(state),
transitionType: Selectors.getPresetTransitionType(state),
message: state.milkdrop.message
message: state.milkdrop.message,
});
export default connect(mapStateToProps)(Visualizer);

4
js/components/MilkdropWindow/index.tsx
View file

@ -146,7 +146,7 @@ const mapStateToProps = (state: AppState): StateProps => ({
fullscreen: Selectors.getMilkdropFullscreenEnabled(state),
overlay: Selectors.getPresetOverlayOpen(state),
presetsAreCycling: Selectors.getPresetsAreCycling(state),
trackTitle: Selectors.getCurrentTrackDisplayName(state)
trackTitle: Selectors.getCurrentTrackDisplayName(state),
});
const mapDispatchToProps = (dispatch: Dispatch): DispatchProps => ({
@ -165,7 +165,7 @@ const mapDispatchToProps = (dispatch: Dispatch): DispatchProps => ({
selectPreviousPreset: (transitionType?: TransitionType) =>
dispatch(Actions.selectPreviousPreset(transitionType)),
scheduleMilkdropMessage: (message: string) =>
dispatch(Actions.scheduleMilkdropMessage(message))
dispatch(Actions.scheduleMilkdropMessage(message)),
});
export default connect(

6
js/components/MiniTime.tsx
View file

@ -59,7 +59,7 @@ const MiniTime = (props: Props) => {
<div
onClick={props.toggle}
className={classnames("mini-time", "countdown", {
blinking: props.status === MEDIA_STATUS.PAUSED
blinking: props.status === MEDIA_STATUS.PAUSED,
})}
>
<Background />
@ -76,14 +76,14 @@ const mapStateToProps = (state: AppState): StateProps => ({
status: state.media.status,
timeMode: state.media.timeMode,
timeElapsed: Selectors.getTimeElapsed(state),
length: Selectors.getDuration(state)
length: Selectors.getDuration(state),
});
const mapDispatchToProps = (dispatch: Dispatch): DispatchProps => ({
// TODO: move to actionCreators
toggle: () => {
dispatch({ type: TOGGLE_TIME_MODE });
}
},
});
export default connect(

4
js/components/OptionsContextMenu.tsx
View file

@ -67,7 +67,7 @@ const mapStateToProps = (state: AppState): StateProps => {
doubled: state.display.doubled,
timeMode: state.media.timeMode,
repeat: state.media.repeat,
shuffle: state.media.shuffle
shuffle: state.media.shuffle,
};
};
const mapDispatchToProps = (dispatch: Dispatch): DispatchProps => {
@ -75,7 +75,7 @@ const mapDispatchToProps = (dispatch: Dispatch): DispatchProps => {
toggleTimeMode: () => dispatch(Actions.toggleTimeMode()),
toggleDoubleSizeMode: () => dispatch(Actions.toggleDoubleSizeMode()),
toggleRepeat: () => dispatch(Actions.toggleRepeat()),
toggleShuffle: () => dispatch(Actions.toggleShuffle())
toggleShuffle: () => dispatch(Actions.toggleShuffle()),
};
};

2
js/components/PlaybackContextMenu.tsx
View file

@ -67,7 +67,7 @@ const mapDispatchToProps = (dispatch: Dispatch): Props => {
next: () => dispatch(Actions.next()),
seekForward: steps => dispatch(Actions.seekForward(steps)),
seekBackward: steps => dispatch(Actions.seekBackward(steps)),
nextN: steps => dispatch(Actions.nextN(steps))
nextN: steps => dispatch(Actions.nextN(steps)),
};
};

6
js/components/PlaylistWindow/AddMenu.tsx
View file

@ -31,7 +31,7 @@ const DIR_SUPPORT =
const AddMenu = ({
nextIndex,
addFilesAtIndex,
addDirAtIndex
addDirAtIndex,
}: StateProps & DispatchProps) => (
<PlaylistMenu id="playlist-add-menu">
<div className="add-url" onClick={() => alert("Not supported in Webamp")} />
@ -41,7 +41,7 @@ const AddMenu = ({
);
const mapStateToProps = (state: AppState): StateProps => ({
nextIndex: getTrackCount(state)
nextIndex: getTrackCount(state),
});
const mapDispatchToProps = (dispatch: Dispatch): DispatchProps => ({
@ -60,7 +60,7 @@ const mapDispatchToProps = (dispatch: Dispatch): DispatchProps => ({
dispatch(
addTracksFromReferences(fileReferences, LOAD_STYLE.NONE, nextIndex)
);
}
},
});
export default connect(

2
js/components/PlaylistWindow/MiscOptionsContextMenu.tsx
View file

@ -21,7 +21,7 @@ const MiscOptionsContextMenu = (props: DispatchProps) => (
const mapDispatchToProps = (dispatch: Dispatch): DispatchProps => {
return {
downloadHtmlPlaylist: () => dispatch(downloadHtmlPlaylist())
downloadHtmlPlaylist: () => dispatch(downloadHtmlPlaylist()),
};
};
export const ConnectedMiscOptionsContextMenu = connect(

4
js/components/PlaylistWindow/PlaylistActionArea.tsx
View file

@ -7,7 +7,7 @@ import {
stop,
next,
previous,
openMediaFileDialog
openMediaFileDialog,
} from "../../actionCreators";
import MiniTime from "../MiniTime";
@ -48,7 +48,7 @@ const mapDispatchToProps = (dispatch: Dispatch): Props => {
stop: () => dispatch(stop()),
openMediaFileDialog: () => dispatch(openMediaFileDialog()),
next: () => dispatch(next()),
previous: () => dispatch(previous())
previous: () => dispatch(previous()),
};
};

6
js/components/PlaylistWindow/PlaylistMenu.tsx
View file

@ -46,12 +46,12 @@ export default class PlaylistMenu extends React.Component<Props, State> {
this.setState({ selected: false });
}, 0);
window.document.removeEventListener("click", handleClickOut, {
capture: true
capture: true,
});
}
};
window.document.addEventListener("click", handleClickOut, {
capture: true
capture: true,
});
this.setState({ selected: true });
@ -62,7 +62,7 @@ export default class PlaylistMenu extends React.Component<Props, State> {
<div
id={this.props.id}
className={classnames("playlist-menu", {
selected: this.state.selected
selected: this.state.selected,
})}
onClick={this._handleClick}
>

2
js/components/PlaylistWindow/PlaylistMenuEntry.tsx
View file

@ -31,7 +31,7 @@ export default class PlaylistMenuEntry extends React.Component<Props, State> {
cursorX >= domRect.left &&
cursorX <= domRect.right &&
cursorY >= domRect.top &&
cursorY <= domRect.bottom
cursorY <= domRect.bottom,
});
}

4
js/components/PlaylistWindow/PlaylistResizeTarget.tsx
View file

@ -16,13 +16,13 @@ interface DispatchProps {
const mapStateToProps = (state: AppState): StateProps => ({
currentSize: getWindowSize(state)("playlist"),
id: "playlist-resize-target"
id: "playlist-resize-target",
});
const mapDispatchToProps = (dispatch: Dispatch) => {
return {
setWindowSize: (size: [number, number]) =>
dispatch(setWindowSize("playlist", size))
dispatch(setWindowSize("playlist", size)),
};
};

2
js/components/PlaylistWindow/PlaylistShade.test.js
View file

@ -14,7 +14,7 @@ const media = {
setPreamp: jest.fn(),
setBalance: jest.fn(),
getAnalyser: () => null,
on: jest.fn()
on: jest.fn(),
};
describe("PlaylistShade", () => {

14
js/components/PlaylistWindow/PlaylistShade.tsx
View file

@ -10,7 +10,7 @@ import {
WINDOW_RESIZE_SEGMENT_WIDTH,
WINDOW_WIDTH,
CHARACTER_WIDTH,
UTF8_ELLIPSIS
UTF8_ELLIPSIS,
} from "../../constants";
import { togglePlaylistShadeMode, closeWindow } from "../../actionCreators";
import CharacterString from "../CharacterString";
@ -59,11 +59,11 @@ class PlaylistShade extends React.Component<StateProps & DispatchProps> {
const { toggleShade, close, focusPlaylist, focused } = this.props;
const style = {
width: `${WINDOW_WIDTH + this._addedWidth()}px`
width: `${WINDOW_WIDTH + this._addedWidth()}px`,
};
const classes = classnames("window", "draggable", {
selected: focused === WINDOWS.PLAYLIST
selected: focused === WINDOWS.PLAYLIST,
});
return (
@ -97,24 +97,24 @@ const mapDispatchToProps = (dispatch: Dispatch): DispatchProps => {
focusPlaylist: () =>
dispatch({
type: SET_FOCUSED_WINDOW,
window: WINDOWS.PLAYLIST
window: WINDOWS.PLAYLIST,
}),
close: () => dispatch(closeWindow("playlist")),
toggleShade: () => dispatch(togglePlaylistShadeMode())
toggleShade: () => dispatch(togglePlaylistShadeMode()),
};
};
const mapStateToProps = (state: AppState): StateProps => {
const duration = Selectors.getDuration(state);
const {
windows: { focused }
windows: { focused },
} = state;
return {
focused,
playlistSize: Selectors.getWindowSize(state)("playlist"),
trackOrder: Selectors.getOrderedTracks(state),
duration,
name: Selectors.getMinimalMediaText(state)
name: Selectors.getMinimalMediaText(state),
};
};

4
js/components/PlaylistWindow/RemoveMenu.tsx
View file

@ -3,7 +3,7 @@ import { connect } from "react-redux";
import {
cropPlaylist,
removeSelectedTracks,
removeAllTracks
removeAllTracks,
} from "../../actionCreators";
import PlaylistMenu from "./PlaylistMenu";
import { Dispatch } from "../../types";
@ -32,7 +32,7 @@ const mapDispatchToProps = (dispatch: Dispatch): DispatchProps => {
return {
removeSelected: () => dispatch(removeSelectedTracks()),
removeAll: () => dispatch(removeAllTracks()),
crop: () => dispatch(cropPlaylist())
crop: () => dispatch(cropPlaylist()),
};
};
export default connect(

2
js/components/PlaylistWindow/RunningTimeDisplay.tsx
View file

@ -31,7 +31,7 @@ const RunningTimeDisplay = (props: Props) => (
);
const mapStateToProps = (state: AppState): Props => ({
runningTimeMessage: getRunningTimeMessage(state)
runningTimeMessage: getRunningTimeMessage(state),
});
export default connect(mapStateToProps)(RunningTimeDisplay);

4
js/components/PlaylistWindow/ScrollBar.tsx
View file

@ -42,14 +42,14 @@ const ScrollBar = (props: StateProps & DispatchProps) => (
const mapDispatchToProps = (dispatch: Dispatch): DispatchProps => {
return {
setPlaylistScrollPosition: position =>
dispatch(setPlaylistScrollPosition(100 - position))
dispatch(setPlaylistScrollPosition(100 - position)),
};
};
const mapStateToProps = (state: AppState): StateProps => ({
playlistScrollPosition: getPlaylistScrollPosition(state),
allTracksAreVisible:
getVisibleTrackIds(state).length === state.playlist.trackOrder.length
getVisibleTrackIds(state).length === state.playlist.trackOrder.length,
});
export default connect(

2
js/components/PlaylistWindow/SelectionMenu.tsx
View file

@ -22,7 +22,7 @@ const mapDispatchToProps = (dispatch: Dispatch): DispatchProps => {
return {
invertSelection: () => dispatch({ type: INVERT_SELECTION }),
selectAll: () => dispatch({ type: SELECT_ALL }),
selectZero: () => dispatch({ type: SELECT_ZERO })
selectZero: () => dispatch({ type: SELECT_ZERO }),
};
};
export default connect(

4
js/components/PlaylistWindow/SortContextMenu.tsx
View file

@ -3,7 +3,7 @@ import { connect } from "react-redux";
import {
reverseList,
randomizeList,
sortListByTitle
sortListByTitle,
} from "../../actionCreators";
import { Hr, Node } from "../ContextMenu";
@ -35,7 +35,7 @@ const mapDispatchToProps = (dispatch: Dispatch): DispatchProps => {
return {
reverseList: () => dispatch(reverseList()),
randomizeList: () => dispatch(randomizeList()),
sortListByTitle: () => dispatch(sortListByTitle())
sortListByTitle: () => dispatch(sortListByTitle()),
};
};

10
js/components/PlaylistWindow/TrackCell.tsx
View file

@ -5,7 +5,7 @@ import {
CLICKED_TRACK,
CTRL_CLICKED_TRACK,
SHIFT_CLICKED_TRACK,
PLAY_TRACK
PLAY_TRACK,
} from "../../actionTypes";
import * as Selectors from "../../selectors";
import { AppState, Dispatch, PlaylistStyle } from "../../types";
@ -52,11 +52,11 @@ class TrackCell extends React.Component<OwnProps & StateProps & DispatchProps> {
selected,
current,
children,
onDoubleClick
onDoubleClick,
} = this.props;
const style: React.CSSProperties = {
backgroundColor: selected ? skinPlaylistStyle.selectedbg : undefined,
color: current ? skinPlaylistStyle.current : undefined
color: current ? skinPlaylistStyle.current : undefined,
};
return (
<div
@ -77,7 +77,7 @@ const mapStateToProps = (state: AppState, ownProps: OwnProps): StateProps => {
return {
skinPlaylistStyle: Selectors.getSkinPlaylistStyle(state),
selected: Selectors.getSelectedTrackIds(state).has(ownProps.id),
current: Selectors.getCurrentTrackId(state) === ownProps.id
current: Selectors.getCurrentTrackId(state) === ownProps.id,
};
};
@ -94,7 +94,7 @@ const mapDispatchToProps = (
return dispatch({ type: CTRL_CLICKED_TRACK, index: ownProps.index });
},
click: () => dispatch({ type: CLICKED_TRACK, index: ownProps.index }),
onDoubleClick: () => dispatch({ type: PLAY_TRACK, id: ownProps.id })
onDoubleClick: () => dispatch({ type: PLAY_TRACK, id: ownProps.id }),
});
export default connect(

6
js/components/PlaylistWindow/TrackList.tsx
View file

@ -6,7 +6,7 @@ import {
getVisibleTrackIds,
getScrollOffset,
getNumberOfTracks,
getTracks
getTracks,
} from "../../selectors";
import { TRACK_HEIGHT } from "../../constants";
import { SELECT_ZERO } from "../../actionTypes";
@ -107,14 +107,14 @@ const mapDispatchToProps = (dispatch: Dispatch): DispatchProps => ({
selectZero: () => dispatch({ type: SELECT_ZERO }),
dragSelected: (offset: number) => dispatch(dragSelected(offset)),
scrollPlaylistByDelta: (e: React.WheelEvent<HTMLDivElement>) =>
dispatch(scrollPlaylistByDelta(e))
dispatch(scrollPlaylistByDelta(e)),
});
const mapStateToProps = (state: AppState): StateProps => ({
offset: getScrollOffset(state),
trackIds: getVisibleTrackIds(state),
tracks: getTracks(state),
numberOfTracks: getNumberOfTracks(state)
numberOfTracks: getNumberOfTracks(state),
});
export default connect(

2
js/components/PlaylistWindow/TrackTitle.tsx
View file

@ -19,7 +19,7 @@ const TrackTitle = (props: OwnProps & StateProps) => (
);
const mapStateToProps = (state: AppState, ownProps: OwnProps): StateProps => ({
title: getTrackDisplayName(state)(ownProps.id)
title: getTrackDisplayName(state)(ownProps.id),
});
export default connect(mapStateToProps)(TrackTitle);

2
js/components/PlaylistWindow/index.test.js
View file

@ -10,7 +10,7 @@ const media = {
setPreamp: jest.fn(),
setBalance: jest.fn(),
getAnalyser: () => null,
on: jest.fn()
on: jest.fn(),
};
describe("PlaylistWindow", () => {

12
js/components/PlaylistWindow/index.tsx
View file

@ -11,7 +11,7 @@ import {
togglePlaylistShadeMode,
scrollVolume,
closeWindow,
loadMedia
loadMedia,
} from "../../actionCreators";
import * as Selectors from "../../selectors";
@ -87,7 +87,7 @@ class PlaylistWindow extends React.Component<Props> {
toggleShade,
analyser,
showVisualizer,
activateVisualizer
activateVisualizer,
} = this.props;
if (playlistShade) {
return <PlaylistShade />;
@ -98,7 +98,7 @@ class PlaylistWindow extends React.Component<Props> {
backgroundColor: skinPlaylistStyle.normalbg,
fontFamily: `${skinPlaylistStyle.font}, Arial, sans-serif`,
height: `${playlistWindowPixelSize.height}px`,
width: `${playlistWindowPixelSize.width}px`
width: `${playlistWindowPixelSize.width}px`,
};
const classes = classnames("window", "draggable", { selected });
@ -188,13 +188,13 @@ const mapDispatchToProps = (dispatch: Dispatch): DispatchProps => {
scrollDownFourTracks: () => dispatch(scrollDownFourTracks()),
loadMedia: (e, startIndex) =>
dispatch(loadMedia(e, LOAD_STYLE.NONE, startIndex)),
scrollVolume: e => dispatch(scrollVolume(e))
scrollVolume: e => dispatch(scrollVolume(e)),
};
};
const mapStateToProps = (state: AppState): StateProps => {
const {
playlist: { trackOrder }
playlist: { trackOrder },
} = state;
const playlistSize = Selectors.getWindowSize(state)(WINDOWS.PLAYLIST);
@ -210,7 +210,7 @@ const mapStateToProps = (state: AppState): StateProps => {
selected: Selectors.getFocusedWindow(state) === WINDOWS.PLAYLIST,
skinPlaylistStyle: Selectors.getSkinPlaylistStyle(state),
playlistShade: Boolean(Selectors.getWindowShade(state)(WINDOWS.PLAYLIST)),
duration: Selectors.getDuration(state)
duration: Selectors.getDuration(state),
};
};

4
js/components/ResizeTarget.tsx
View file

@ -1,7 +1,7 @@
import React from "react";
import {
WINDOW_RESIZE_SEGMENT_WIDTH,
WINDOW_RESIZE_SEGMENT_HEIGHT
WINDOW_RESIZE_SEGMENT_HEIGHT,
} from "../constants";
type Size = [number, number];
@ -20,7 +20,7 @@ export default class ResizeTarget extends React.Component<Props> {
const [width, height] = this.props.currentSize;
const mouseStart = {
x: e.clientX,
y: e.clientY
y: e.clientY,
};
const handleMove = (ee: MouseEvent) => {

8
js/components/Skin.js
View file

@ -12,14 +12,14 @@ const mapRegionNamesToIds = {
normal: "mainWindowClipPath",
windowshade: "shadeMainWindowClipPath",
equalizer: "equalizerWindowClipPath",
equalizerws: "shadeEqualizerWindowClipPath"
equalizerws: "shadeEqualizerWindowClipPath",
};
const mapRegionNamesToMatcher = {
normal: "#main-window:not(.shade)",
windowshade: "#main-window.shade",
equalizer: "#equalizer-window:not(.shade)",
equalizerws: "#equalizer-window.shade"
equalizerws: "#equalizer-window.shade",
};
const numExIsUsed = skinImages => !!skinImages.DIGIT_0_EX;
@ -80,7 +80,7 @@ class ClipPaths extends React.Component {
const FALLBACKS = {
MAIN_BALANCE_BACKGROUND: "MAIN_VOLUME_BACKGROUND",
MAIN_BALANCE_THUMB: "MAIN_VOLUME_THUMB",
MAIN_BALANCE_THUMB_ACTIVE: "MAIN_VOLUME_THUMB_SELECTED"
MAIN_BALANCE_THUMB_ACTIVE: "MAIN_VOLUME_THUMB_SELECTED",
};
function cssRulesFromProps(props) {
@ -243,5 +243,5 @@ export default connect(state => ({
skinCursors: state.display.skinCursors,
skinRegion: state.display.skinRegion,
skinGenLetterWidths: state.display.skinGenLetterWidths,
skinGenExColors: state.display.skinGenExColors
skinGenExColors: state.display.skinGenExColors,
}))(Skin);

4
js/components/SkinsContextMenu.tsx
View file

@ -32,7 +32,7 @@ const SkinContextMenu = (props: Props) => (
);
const mapStateToProps = (state: AppState): StateProps => ({
availableSkins: state.settings.availableSkins
availableSkins: state.settings.availableSkins,
});
const mapDispatchToProps = (dispatch: Dispatch): DispatchProps => {
@ -45,7 +45,7 @@ const mapDispatchToProps = (dispatch: Dispatch): DispatchProps => {
},
setSkin(url: string) {
dispatch(Actions.setSkinFromUrl(url));
}
},
};
};

4
js/components/Visualizer.js
View file

@ -325,11 +325,11 @@ const mapStateToProps = state => ({
height: getWindowShade(state)("main") ? 5 : 16,
status: state.media.status,
windowShade: getWindowShade(state)("main"),
dummyVizData: state.display.dummyVizData
dummyVizData: state.display.dummyVizData,
});
const mapDispatchToProps = {
toggleVisualizerStyle
toggleVisualizerStyle,
};
export default connect(

4
js/components/Volume.tsx
View file

@ -32,14 +32,14 @@ const Volume = (props: Props) => (
);
const mapStateToProps = (state: AppState) => ({
volume: Selectors.getVolume(state)
volume: Selectors.getVolume(state),
});
const mapDispatchToProps = (dispatch: Dispatch) => ({
showMarquee: () => dispatch(Actions.setFocus("volume")),
hideMarquee: () => dispatch(Actions.unsetFocus()),
setVolume: (e: ChangeEvent<HTMLInputElement>) =>
dispatch(Actions.setVolume(Number((e.target as HTMLInputElement).value)))
dispatch(Actions.setVolume(Number((e.target as HTMLInputElement).value))),
});
export default connect(

14
js/components/WindowManager.tsx
View file

@ -9,7 +9,7 @@ import {
Dispatch,
WindowPositions,
AppState,
WindowId
WindowId,
} from "../types";
const abuts = (a: SnapUtils.Box, b: SnapUtils.Box) => {
// TODO: This is kinda a hack. They should really be touching, not just within snapping distance.
@ -73,17 +73,17 @@ class WindowManager extends React.Component<Props> {
const handleMouseMove = (ee: MouseEvent) => {
const proposedDiff = {
x: ee.clientX - mouseStart.x,
y: ee.clientY - mouseStart.y
y: ee.clientY - mouseStart.y,
};
const proposedWindows = moving.map(node => ({
...node,
...SnapUtils.applyDiff(node, proposedDiff)
...SnapUtils.applyDiff(node, proposedDiff),
}));
const proposedBox = {
...box,
...SnapUtils.applyDiff(box, proposedDiff)
...SnapUtils.applyDiff(box, proposedDiff),
};
const snapDiff = SnapUtils.snapDiffManyToMany(
@ -126,7 +126,7 @@ class WindowManager extends React.Component<Props> {
const style: React.CSSProperties = {
position: "absolute",
top: 0,
left: 0
left: 0,
};
const windows = this.props.windowsInfo.filter(
@ -151,13 +151,13 @@ const mapStateToProps = (state: AppState) => ({
windowsInfo: Selectors.getWindowsInfo(state),
getWindowHidden: Selectors.getWindowHidden(state),
getWindowOpen: Selectors.getWindowOpen(state),
browserWindowSize: Selectors.getBrowserWindowSize(state)
browserWindowSize: Selectors.getBrowserWindowSize(state),
});
const mapDispatchToProps = (dispatch: Dispatch) => {
return {
updateWindowPositions: (positions: WindowPositions) =>
dispatch(updateWindowPositions(positions))
dispatch(updateWindowPositions(positions)),
};
};

18
js/constants.ts
View file

@ -3,7 +3,7 @@ import {
MediaTagRequestStatus,
MediaStatus,
LoadStyle,
TimeMode
TimeMode,
} from "./types";
import baseSkin from "./baseSkin.json";
export const BANDS: Band[] = [
@ -16,7 +16,7 @@ export const BANDS: Band[] = [
6000,
12000,
14000,
16000
16000,
];
export const WINDOWS = {
@ -24,13 +24,13 @@ export const WINDOWS = {
PLAYLIST: "playlist",
EQUALIZER: "equalizer",
MEDIA_LIBRARY: "mediaLibrary",
MILKDROP: "milkdrop"
MILKDROP: "milkdrop",
};
export const LOAD_STYLE: Record<LoadStyle, LoadStyle> = {
BUFFER: "BUFFER",
PLAY: "PLAY",
NONE: "NONE"
NONE: "NONE",
};
// TODO: Make this an enum?
@ -41,7 +41,7 @@ export const MEDIA_TAG_REQUEST_STATUS: Record<
INITIALIZED: "INITIALIZED",
FAILED: "FAILED",
COMPLETE: "COMPLETE",
NOT_REQUESTED: "NOT_REQUESTED"
NOT_REQUESTED: "NOT_REQUESTED",
};
export const UTF8_ELLIPSIS = "\u2026";
@ -59,23 +59,23 @@ export const VISUALIZERS = {
OSCILLOSCOPE: "OSCILLOSCOPE",
BAR: "BAR",
NONE: "NONE",
MILKDROP: "MILKDROP"
MILKDROP: "MILKDROP",
};
export const VISUALIZER_ORDER = [
VISUALIZERS.BAR,
VISUALIZERS.OSCILLOSCOPE, // TODO: Verify the order
VISUALIZERS.NONE
VISUALIZERS.NONE,
];
export const TIME_MODE: Record<TimeMode, TimeMode> = {
ELAPSED: "ELAPSED",
REMAINING: "REMAINING"
REMAINING: "REMAINING",
};
// TODO: Convert to enum once we are fully Typescript
export const MEDIA_STATUS: Record<MediaStatus, MediaStatus> = {
PLAYING: "PLAYING",
STOPPED: "STOPPED",
PAUSED: "PAUSED"
PAUSED: "PAUSED",
};

4
js/fileUtils.ts
View file

@ -15,7 +15,7 @@ export function genMediaTags(
const options = {
duration: true,
skipPostHeaders: true // avoid unnecessary data to be read
skipPostHeaders: true, // avoid unnecessary data to be read
};
if (typeof file === "string") {
@ -87,7 +87,7 @@ interface PromptForFileReferenceOptions {
export async function promptForFileReferences(
{ accept, directory = false }: PromptForFileReferenceOptions = {
accept: null,
directory: false
directory: false,
}
): Promise<FileList> {
return new Promise<FileList>(resolve => {

4
js/hotkeys.ts
View file

@ -13,7 +13,7 @@ import {
next,
previous,
toggleDoubleSizeMode,
toggleWindow
toggleWindow,
} from "./actionCreators";
import { TOGGLE_TIME_MODE, TOGGLE_LLAMA_MODE } from "./actionTypes";
@ -33,7 +33,7 @@ export function bindHotkeys(dispatch: Dispatch): () => void {
83, // S
79, // O
70, // F
84 // T
84, // T
];
const listener = (e: KeyboardEvent) => {

10
js/media/StereoBalanceNode.js
View file

@ -48,7 +48,7 @@ export default function StereoBalanceNode(context, options = { balance: 0 }) {
// we'll want to.
const audioParam = {};
Object.defineProperties(audioParam, {
value: { get, set, enumerable: true, configurable: true }
value: { get, set, enumerable: true, configurable: true },
});
// The way the `.connect` API works, we can't actually construct our own
@ -58,20 +58,20 @@ export default function StereoBalanceNode(context, options = { balance: 0 }) {
value: audioParam,
enumerable: true,
writable: false,
configurable: true
configurable: true,
},
connect: {
value: AudioNode.prototype.connect.bind(merger),
enumerable: false,
writable: false,
configurable: true
configurable: true,
},
disconnect: {
value: AudioNode.prototype.disconnect.bind(merger),
enumerable: false,
writable: false,
configurable: true
}
configurable: true,
},
});
if (balance !== options.balance) {

8
js/mediaMiddleware.ts
View file

@ -17,7 +17,7 @@ import {
SET_EQ_ON,
PLAY_TRACK,
BUFFER_TRACK,
LOAD_SERIALIZED_STATE
LOAD_SERIALIZED_STATE,
} from "./actionTypes";
import { next as nextTrack } from "./actionCreators";
import * as Selectors from "./selectors";
@ -27,7 +27,7 @@ import { objectForEach } from "./utils";
export default (media: Media) => (store: MiddlewareStore) => {
const {
media: { volume, balance },
equalizer: { sliders }
equalizer: { sliders },
} = store.getState();
// Ensure the default state is the canonical value.
@ -39,7 +39,7 @@ export default (media: Media) => (store: MiddlewareStore) => {
media.on("timeupdate", () => {
store.dispatch({
type: UPDATE_TIME_ELAPSED,
elapsed: media.timeElapsed()
elapsed: media.timeElapsed(),
});
});
@ -73,7 +73,7 @@ export default (media: Media) => (store: MiddlewareStore) => {
kbps: "128",
khz: "44",
channels: 2,
length: media.duration()
length: media.duration(),
});
});

Some files were not shown because too many files have changed in this diff Show more