mirror of
https://github.com/captbaritone/webamp.git
synced 2026-01-23 10:15:31 +00:00
Upgrade Prettier
This commit is contained in:
Jordan Eldredge
parent
c13a7ef466
commit
a0560d0ccc
34 changed files with 228 additions and 218 deletions
|
|
@ -1,3 +1,4 @@
|
|||
*.min.js
|
||||
built/
|
||||
coverage/
|
||||
automated_screenshots/node_modules/
|
||||
|
|
|
|||
|
|
@ -10,7 +10,10 @@ const config = {
|
|||
};
|
||||
|
||||
(async () => {
|
||||
const files = await Filehound.create().ext("wsz").paths("skins/").find();
|
||||
const files = await Filehound.create()
|
||||
.ext("wsz")
|
||||
.paths("skins/")
|
||||
.find();
|
||||
|
||||
const browser = await puppeteer.launch();
|
||||
|
||||
|
|
|
|||
|
|
@ -19,22 +19,23 @@
|
|||
display: block;
|
||||
}
|
||||
|
||||
#winamp2-js #context-menu, #winamp2-js #context-menu ul {
|
||||
#winamp2-js #context-menu,
|
||||
#winamp2-js #context-menu ul {
|
||||
display: none;
|
||||
z-index: 50; /* Gross */
|
||||
background-color: #FFFFFF;
|
||||
background-color: #ffffff;
|
||||
position: absolute;
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
border: 1px solid #A7A394;
|
||||
border: 1px solid #a7a394;
|
||||
cursor: default;
|
||||
box-shadow: 2px 2px 4px rgba(0, 0, 0, .5);
|
||||
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
#winamp2-js #context-menu li {
|
||||
position: relative;
|
||||
font-family: 'Tahoma';
|
||||
font-family: "Tahoma";
|
||||
font-size: 11px;
|
||||
color: black;
|
||||
white-space: nowrap;
|
||||
|
|
@ -52,9 +53,10 @@
|
|||
cursor: default;
|
||||
}
|
||||
|
||||
#winamp2-js #context-menu li:hover, #winamp2-js #context-menu li:hover a {
|
||||
background-color: #224EB7;
|
||||
color: #FFFFFF;
|
||||
#winamp2-js #context-menu li:hover,
|
||||
#winamp2-js #context-menu li:hover a {
|
||||
background-color: #224eb7;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
#winamp2-js #context-menu li.hr {
|
||||
|
|
@ -62,13 +64,13 @@
|
|||
}
|
||||
|
||||
#winamp2-js #context-menu li.hr:hover {
|
||||
background-color: #FFFFFF;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
#winamp2-js #context-menu li.hr hr {
|
||||
border: none;
|
||||
height: 1px;
|
||||
background-color: #A7A394;
|
||||
background-color: #a7a394;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -15,29 +15,29 @@
|
|||
height: 6px;
|
||||
width: 97px;
|
||||
background-position: 0 0;
|
||||
cursor: url('../cursors/POSBAR.PNG'), auto;
|
||||
cursor: url("../cursors/POSBAR.PNG"), auto;
|
||||
}
|
||||
|
||||
#winamp2-js #equalizer-volume::-webkit-slider-thumb {
|
||||
height: 7px;
|
||||
width: 2px;
|
||||
cursor: url('../cursors/POSBAR.PNG'), auto;
|
||||
cursor: url("../cursors/POSBAR.PNG"), auto;
|
||||
}
|
||||
|
||||
#winamp2-js #equalizer-volume::-moz-range-thumb {
|
||||
height: 7px;
|
||||
width: 2px;
|
||||
cursor: url('../cursors/POSBAR.PNG'), auto;
|
||||
cursor: url("../cursors/POSBAR.PNG"), auto;
|
||||
}
|
||||
|
||||
#winamp2-js #equalizer-volume.center::-webkit-slider-thumb {
|
||||
width: 5px;
|
||||
cursor: url('../cursors/POSBAR.PNG'), auto;
|
||||
cursor: url("../cursors/POSBAR.PNG"), auto;
|
||||
}
|
||||
|
||||
#winamp2-js #equalizer-volume.center::-moz-range-thumb {
|
||||
width: 5px;
|
||||
cursor: url('../cursors/POSBAR.PNG'), auto;
|
||||
cursor: url("../cursors/POSBAR.PNG"), auto;
|
||||
}
|
||||
|
||||
#winamp2-js #equalizer-balance {
|
||||
|
|
@ -47,29 +47,29 @@
|
|||
height: 6px;
|
||||
width: 43px;
|
||||
background-position: 0 0;
|
||||
cursor: url('../cursors/POSBAR.PNG'), auto;
|
||||
cursor: url("../cursors/POSBAR.PNG"), auto;
|
||||
}
|
||||
|
||||
#winamp2-js #equalizer-balance::-webkit-slider-thumb {
|
||||
height: 7px;
|
||||
width: 2px;
|
||||
cursor: url('../cursors/POSBAR.PNG'), auto;
|
||||
cursor: url("../cursors/POSBAR.PNG"), auto;
|
||||
}
|
||||
|
||||
#winamp2-js #equalizer-balance::-moz-range-thumb {
|
||||
height: 7px;
|
||||
width: 2px;
|
||||
cursor: url('../cursors/POSBAR.PNG'), auto;
|
||||
cursor: url("../cursors/POSBAR.PNG"), auto;
|
||||
}
|
||||
|
||||
#winamp2-js #equalizer-balance.center::-webkit-slider-thumb {
|
||||
width: 5px;
|
||||
cursor: url('../cursors/POSBAR.PNG'), auto;
|
||||
cursor: url("../cursors/POSBAR.PNG"), auto;
|
||||
}
|
||||
|
||||
#winamp2-js #equalizer-balance.center::-moz-range-thumb {
|
||||
width: 5px;
|
||||
cursor: url('../cursors/POSBAR.PNG'), auto;
|
||||
cursor: url("../cursors/POSBAR.PNG"), auto;
|
||||
}
|
||||
|
||||
#winamp2-js .equalizer-top {
|
||||
|
|
@ -84,7 +84,7 @@
|
|||
width: 9px;
|
||||
left: 264px;
|
||||
top: 3px;
|
||||
cursor: url('../cursors/MAINMENU.PNG'), auto;
|
||||
cursor: url("../cursors/MAINMENU.PNG"), auto;
|
||||
}
|
||||
|
||||
#winamp2-js #equalizer-shade {
|
||||
|
|
@ -93,7 +93,7 @@
|
|||
width: 9px;
|
||||
left: 254px;
|
||||
top: 3px;
|
||||
cursor: url('../cursors/MAINMENU.PNG'), auto;
|
||||
cursor: url("../cursors/MAINMENU.PNG"), auto;
|
||||
}
|
||||
|
||||
#winamp2-js #on {
|
||||
|
|
@ -227,7 +227,7 @@
|
|||
height: 51px;
|
||||
width: 14px;
|
||||
margin-top: 6px;
|
||||
cursor: url('../cursors/POSBAR.PNG'), auto;
|
||||
cursor: url("../cursors/POSBAR.PNG"), auto;
|
||||
}
|
||||
|
||||
#winamp2-js .band .rc-slider .rc-slider-handle {
|
||||
|
|
@ -235,5 +235,5 @@
|
|||
height: 11px;
|
||||
margin: -6px 0 0 1px;
|
||||
position: absolute;
|
||||
cursor: url('../cursors/POSBAR.PNG'), auto;
|
||||
cursor: url("../cursors/POSBAR.PNG"), auto;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
position: absolute;
|
||||
height: 116px;
|
||||
width: 275px;
|
||||
cursor: url('../cursors/MAINMENU.PNG'), auto;
|
||||
cursor: url("../cursors/MAINMENU.PNG"), auto;
|
||||
/* Ask the browser to scale showing large pixels if possible */
|
||||
image-rendering: -moz-crisp-edges; /* Firefox */
|
||||
image-rendering: -o-crisp-edges; /* Opera */
|
||||
|
|
@ -13,15 +13,15 @@
|
|||
}
|
||||
|
||||
#winamp2-js #main-window.doubled #context-menu {
|
||||
-moz-transform: scale(.5);
|
||||
-moz-transform: scale(0.5);
|
||||
-moz-transform-origin: top left;
|
||||
-webkit-transform: scale(.5);
|
||||
-webkit-transform: scale(0.5);
|
||||
-webkit-transform-origin: top left;
|
||||
}
|
||||
|
||||
#winamp2-js #main-window.loading {
|
||||
background-image: none;
|
||||
background-color: #FFFFFF;
|
||||
background-color: #ffffff;
|
||||
border: 2px solid #dddddd;
|
||||
}
|
||||
|
||||
|
|
@ -45,8 +45,8 @@
|
|||
}
|
||||
|
||||
#winamp2-js #loading .ellipsis-anim span:nth-child(1) {
|
||||
-webkit-animation-delay: 0.0s;
|
||||
animation-delay: 0.0s;
|
||||
-webkit-animation-delay: 0s;
|
||||
animation-delay: 0s;
|
||||
}
|
||||
|
||||
#winamp2-js #loading .ellipsis-anim span:nth-child(2) {
|
||||
|
|
@ -93,7 +93,7 @@
|
|||
left: 0;
|
||||
height: 14px;
|
||||
width: 275px;
|
||||
cursor: url('../cursors/TITLEBAR.PNG'), auto;
|
||||
cursor: url("../cursors/TITLEBAR.PNG"), auto;
|
||||
}
|
||||
|
||||
#winamp2-js #option,
|
||||
|
|
@ -104,7 +104,7 @@
|
|||
height: 9px;
|
||||
width: 9px;
|
||||
top: 3px;
|
||||
cursor: url('../cursors/MAINMENU.PNG'), auto;
|
||||
cursor: url("../cursors/MAINMENU.PNG"), auto;
|
||||
}
|
||||
|
||||
#winamp2-js #title-bar #option {
|
||||
|
|
@ -118,7 +118,7 @@
|
|||
}
|
||||
#winamp2-js #title-bar #close {
|
||||
left: 264px;
|
||||
cursor: url('../cursors/CLOSE.PNG'), auto;
|
||||
cursor: url("../cursors/CLOSE.PNG"), auto;
|
||||
}
|
||||
#winamp2-js #clutter-bar {
|
||||
position: absolute;
|
||||
|
|
@ -301,19 +301,19 @@
|
|||
height: 13px;
|
||||
width: 68px;
|
||||
background-position: 0 0;
|
||||
cursor: url('../cursors/POSBAR.PNG'), auto;
|
||||
cursor: url("../cursors/POSBAR.PNG"), auto;
|
||||
}
|
||||
#winamp2-js #volume::-webkit-slider-thumb {
|
||||
top: 1px;
|
||||
height: 11px;
|
||||
width: 14px;
|
||||
cursor: url('../cursors/POSBAR.PNG'), auto;
|
||||
cursor: url("../cursors/POSBAR.PNG"), auto;
|
||||
}
|
||||
#winamp2-js #volume::-moz-range-thumb {
|
||||
top: 1px;
|
||||
height: 11px;
|
||||
width: 14px;
|
||||
cursor: url('../cursors/POSBAR.PNG'), auto;
|
||||
cursor: url("../cursors/POSBAR.PNG"), auto;
|
||||
}
|
||||
|
||||
#winamp2-js #balance {
|
||||
|
|
@ -323,20 +323,20 @@
|
|||
height: 13px;
|
||||
width: 38px;
|
||||
background-position: 0 0;
|
||||
cursor: url('../cursors/POSBAR.PNG'), auto;
|
||||
cursor: url("../cursors/POSBAR.PNG"), auto;
|
||||
}
|
||||
|
||||
#winamp2-js #balance::-webkit-slider-thumb {
|
||||
top: 1px;
|
||||
height: 11px;
|
||||
width: 14px;
|
||||
cursor: url('../cursors/POSBAR.PNG'), auto;
|
||||
cursor: url("../cursors/POSBAR.PNG"), auto;
|
||||
}
|
||||
#winamp2-js #balance::-moz-range-thumb {
|
||||
top: 1px;
|
||||
height: 11px;
|
||||
width: 14px;
|
||||
cursor: url('../cursors/POSBAR.PNG'), auto;
|
||||
cursor: url("../cursors/POSBAR.PNG"), auto;
|
||||
}
|
||||
|
||||
#winamp2-js .windows {
|
||||
|
|
@ -367,13 +367,13 @@
|
|||
top: 72px;
|
||||
width: 248px;
|
||||
height: 10px;
|
||||
cursor: url('../cursors/POSBAR.PNG'), auto;
|
||||
cursor: url("../cursors/POSBAR.PNG"), auto;
|
||||
}
|
||||
|
||||
#winamp2-js #position::-webkit-slider-thumb {
|
||||
height: 10px;
|
||||
width: 29px;
|
||||
cursor: url('../cursors/POSBAR.PNG'), auto;
|
||||
cursor: url("../cursors/POSBAR.PNG"), auto;
|
||||
/*
|
||||
* Fix the strange bug in Safair/mobile-chrome
|
||||
* http://stackoverflow.com/questions/26727769/rendering-glitch-when-manipulating-range-input-value-via-javascript-in-webkit
|
||||
|
|
@ -385,7 +385,7 @@
|
|||
#winamp2-js #position::-moz-range-thumb {
|
||||
height: 10px;
|
||||
width: 29px;
|
||||
cursor: url('../cursors/POSBAR.PNG'), auto;
|
||||
cursor: url("../cursors/POSBAR.PNG"), auto;
|
||||
}
|
||||
|
||||
/* For some reason, we can't use display: none here */
|
||||
|
|
@ -483,7 +483,7 @@
|
|||
}
|
||||
|
||||
#winamp2-js #shade-time {
|
||||
cursor: url('../cursors/MAINMENU.PNG'), auto;
|
||||
cursor: url("../cursors/MAINMENU.PNG"), auto;
|
||||
}
|
||||
|
||||
#winamp2-js .shade .media-info,
|
||||
|
|
@ -495,7 +495,7 @@
|
|||
display: none;
|
||||
}
|
||||
#winamp2-js .shade #title-bar {
|
||||
cursor: url('../cursors/MAINMENU.PNG'), auto;
|
||||
cursor: url("../cursors/MAINMENU.PNG"), auto;
|
||||
}
|
||||
|
||||
#winamp2-js .shade .actions div {
|
||||
|
|
@ -509,35 +509,40 @@
|
|||
top: 2px;
|
||||
left: 169px;
|
||||
}
|
||||
#winamp2-js .shade .actions #play, #winamp2-js .shade .actions #play:active {
|
||||
#winamp2-js .shade .actions #play,
|
||||
#winamp2-js .shade .actions #play:active {
|
||||
background: none;
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
top: 2px;
|
||||
left: 176px;
|
||||
}
|
||||
#winamp2-js .shade .actions #pause, #winamp2-js .shade .actions #pause:active {
|
||||
#winamp2-js .shade .actions #pause,
|
||||
#winamp2-js .shade .actions #pause:active {
|
||||
background: none;
|
||||
height: 10px;
|
||||
width: 9px;
|
||||
top: 2px;
|
||||
left: 186px;
|
||||
}
|
||||
#winamp2-js .shade .actions #stop, #winamp2-js .shade .actions #stop:active {
|
||||
#winamp2-js .shade .actions #stop,
|
||||
#winamp2-js .shade .actions #stop:active {
|
||||
background: none;
|
||||
height: 10px;
|
||||
width: 9px;
|
||||
top: 2px;
|
||||
left: 195px;
|
||||
}
|
||||
#winamp2-js .shade .actions #next, #winamp2-js .shade .actions #next:active {
|
||||
#winamp2-js .shade .actions #next,
|
||||
#winamp2-js .shade .actions #next:active {
|
||||
background: none;
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
top: 2px;
|
||||
left: 204px;
|
||||
}
|
||||
#winamp2-js .shade #eject, #winamp2-js .shade #eject:active {
|
||||
#winamp2-js .shade #eject,
|
||||
#winamp2-js .shade #eject:active {
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
top: 2px;
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
/* Rules for the page layout */
|
||||
body {
|
||||
background-color: #224EB7;
|
||||
background-color: #224eb7;
|
||||
font-family: arial;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,32 +1,32 @@
|
|||
/* Rules used by all windows */
|
||||
|
||||
/* Range input css reset */
|
||||
#winamp2-js input[type=range] {
|
||||
#winamp2-js input[type="range"] {
|
||||
-webkit-appearance: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background: none;
|
||||
border: none;
|
||||
}
|
||||
#winamp2-js input[type=range]::-webkit-slider-thumb {
|
||||
#winamp2-js input[type="range"]::-webkit-slider-thumb {
|
||||
-webkit-appearance: none;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
background: none;
|
||||
}
|
||||
#winamp2-js input[type=range]::-moz-range-thumb {
|
||||
#winamp2-js input[type="range"]::-moz-range-thumb {
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
background: none;
|
||||
}
|
||||
#winamp2-js input[type=range]::-moz-range-track {
|
||||
#winamp2-js input[type="range"]::-moz-range-track {
|
||||
border: none;
|
||||
background: none;
|
||||
}
|
||||
#winamp2-js input[type=range]:focus {
|
||||
#winamp2-js input[type="range"]:focus {
|
||||
outline: none;
|
||||
}
|
||||
#winamp2-js input[type=range]::-moz-focus-outer {
|
||||
#winamp2-js input[type="range"]::-moz-focus-outer {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
|
|
@ -37,24 +37,24 @@
|
|||
/* Animation */
|
||||
@keyframes blink {
|
||||
0% {
|
||||
opacity: 1.0;
|
||||
opacity: 1;
|
||||
}
|
||||
50% {
|
||||
opacity: 0.0;
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
opacity: 1.0;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
@-webkit-keyframes blink {
|
||||
0% {
|
||||
opacity: 1.0;
|
||||
opacity: 1;
|
||||
}
|
||||
50% {
|
||||
opacity: 0.0;
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
opacity: 1.0;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -69,7 +69,7 @@
|
|||
|
||||
#winamp2-js .window {
|
||||
position: absolute;
|
||||
cursor: url('../cursors/MAINMENU.PNG'), auto;
|
||||
cursor: url("../cursors/MAINMENU.PNG"), auto;
|
||||
/* Ask the browser to scale showing large pixels if possible */
|
||||
image-rendering: -moz-crisp-edges; /* Firefox */
|
||||
image-rendering: -o-crisp-edges; /* Opera */
|
||||
|
|
|
|||
|
|
@ -8,23 +8,27 @@ import Skin from "./Skin";
|
|||
import { equalizerEnabled, playlistEnabled } from "../config";
|
||||
|
||||
const App = ({ winamp, loading }) =>
|
||||
loading
|
||||
? <div id="loading">
|
||||
Loading<span className="ellipsis-anim">
|
||||
<span>.</span><span>.</span><span>.</span>
|
||||
</span>
|
||||
</div>
|
||||
: <div id="loaded">
|
||||
<Skin>
|
||||
{/* This is not technically kosher, since <style> tags should be in
|
||||
loading ? (
|
||||
<div id="loading">
|
||||
Loading<span className="ellipsis-anim">
|
||||
<span>.</span>
|
||||
<span>.</span>
|
||||
<span>.</span>
|
||||
</span>
|
||||
</div>
|
||||
) : (
|
||||
<div id="loaded">
|
||||
<Skin>
|
||||
{/* This is not technically kosher, since <style> tags should be in
|
||||
the <head>, but browsers don't really care... */}
|
||||
</Skin>
|
||||
<WindowManager>
|
||||
<MainWindow fileInput={winamp.fileInput} mediaPlayer={winamp.media} />
|
||||
{equalizerEnabled && <EqualizerWindow fileInput={winamp.fileInput} />}
|
||||
{playlistEnabled && <PlaylistWindow />}
|
||||
</WindowManager>
|
||||
</div>;
|
||||
</Skin>
|
||||
<WindowManager>
|
||||
<MainWindow fileInput={winamp.fileInput} mediaPlayer={winamp.media} />
|
||||
{equalizerEnabled && <EqualizerWindow fileInput={winamp.fileInput} />}
|
||||
{playlistEnabled && <PlaylistWindow />}
|
||||
</WindowManager>
|
||||
</div>
|
||||
);
|
||||
|
||||
const mapStateToProps = state => ({ loading: state.display.loading });
|
||||
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ import { connect } from "react-redux";
|
|||
import { setBalance } from "../actionCreators";
|
||||
import { SET_FOCUS, UNSET_FOCUS } from "../actionTypes";
|
||||
|
||||
const Balance = props =>
|
||||
const Balance = props => (
|
||||
<input
|
||||
id={props.id}
|
||||
className={props.className}
|
||||
|
|
@ -17,7 +17,8 @@ const Balance = props =>
|
|||
onChange={props.handleChange}
|
||||
onMouseDown={props.showMarquee}
|
||||
onMouseUp={props.hideMarquee}
|
||||
/>;
|
||||
/>
|
||||
);
|
||||
|
||||
const mapDispatchToProps = dispatch => ({
|
||||
handleChange: e => dispatch(setBalance(e.target.value)),
|
||||
|
|
|
|||
|
|
@ -2,12 +2,16 @@ import React from "react";
|
|||
import PropTypes from "prop-types";
|
||||
|
||||
export const characterClassName = char =>
|
||||
`character-${char.toString().toLowerCase().charCodeAt(0)}`;
|
||||
`character-${char
|
||||
.toString()
|
||||
.toLowerCase()
|
||||
.charCodeAt(0)}`;
|
||||
|
||||
const Character = ({ children: char, id }) =>
|
||||
const Character = ({ children: char, id }) => (
|
||||
<div id={id} className={`character ${characterClassName(char)}`}>
|
||||
{char}
|
||||
</div>;
|
||||
</div>
|
||||
);
|
||||
|
||||
Character.propTypes = {
|
||||
children: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired
|
||||
|
|
|
|||
|
|
@ -7,11 +7,9 @@ const CharacterString = props => {
|
|||
const chars = text.split("");
|
||||
return (
|
||||
<div {...props}>
|
||||
{chars.map((character, index) =>
|
||||
<Character key={index + character}>
|
||||
{character}
|
||||
</Character>
|
||||
)};
|
||||
{chars.map((character, index) => (
|
||||
<Character key={index + character}>{character}</Character>
|
||||
))};
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -4,36 +4,32 @@ import classnames from "classnames";
|
|||
|
||||
import "../../css/context-menu.css";
|
||||
|
||||
export const Hr = () =>
|
||||
export const Hr = () => (
|
||||
<li className="hr">
|
||||
<hr />
|
||||
</li>;
|
||||
</li>
|
||||
);
|
||||
|
||||
// TODO: Add down-arrow
|
||||
export const Parent = ({ children, label }) =>
|
||||
export const Parent = ({ children, label }) => (
|
||||
<li className="parent">
|
||||
<ul>
|
||||
{children}
|
||||
</ul>
|
||||
<ul>{children}</ul>
|
||||
{label}
|
||||
</li>;
|
||||
</li>
|
||||
);
|
||||
|
||||
export const LinkNode = props =>
|
||||
export const LinkNode = props => (
|
||||
<li>
|
||||
<a {...props}>
|
||||
{props.label}
|
||||
</a>
|
||||
</li>;
|
||||
<a {...props}>{props.label}</a>
|
||||
</li>
|
||||
);
|
||||
|
||||
LinkNode.propTypes = {
|
||||
label: React.PropTypes.string.isRequired,
|
||||
href: React.PropTypes.string.isRequired
|
||||
};
|
||||
|
||||
export const Node = props =>
|
||||
<li {...props}>
|
||||
{props.label}
|
||||
</li>;
|
||||
export const Node = props => <li {...props}>{props.label}</li>;
|
||||
|
||||
Node.propTypes = {
|
||||
label: React.PropTypes.string.isRequired
|
||||
|
|
@ -53,9 +49,7 @@ export class ContextMenu extends React.Component {
|
|||
const { selected, top, bottom, children } = this.props;
|
||||
return (
|
||||
<div className={classnames({ selected, top, bottom })}>
|
||||
<ul id="context-menu">
|
||||
{children}
|
||||
</ul>
|
||||
<ul id="context-menu">{children}</ul>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@ export const spriteOffsets = number => {
|
|||
|
||||
const Handle = () => <div className="rc-slider-handle" />;
|
||||
|
||||
const Band = ({ value, backgroundPosition, id, onChange }) =>
|
||||
const Band = ({ value, backgroundPosition, id, onChange }) => (
|
||||
<div id={id} className="band" style={{ backgroundPosition }}>
|
||||
<Slider
|
||||
type="range"
|
||||
|
|
@ -30,7 +30,8 @@ const Band = ({ value, backgroundPosition, id, onChange }) =>
|
|||
onChange={onChange}
|
||||
handle={Handle}
|
||||
/>
|
||||
</div>;
|
||||
</div>
|
||||
);
|
||||
|
||||
const mapStateToProps = (state, ownProps) => {
|
||||
const value = state.equalizer.sliders[ownProps.band];
|
||||
|
|
|
|||
|
|
@ -4,11 +4,12 @@ import { CLOSE_PRESETS_CONTEXT_MENU } from "../../actionTypes";
|
|||
import { openFileDialog, downloadPreset } from "../../actionCreators";
|
||||
import { ContextMenu, Node } from "../ContextMenu";
|
||||
|
||||
const MainContextMenu = props =>
|
||||
const MainContextMenu = props => (
|
||||
<ContextMenu closeMenu={props.closeMenu} selected={props.selected} top>
|
||||
<Node onClick={props.openFileDialog} label="Load" />
|
||||
<Node onClick={props.downloadPreset} label="Save" />
|
||||
</ContextMenu>;
|
||||
</ContextMenu>
|
||||
);
|
||||
|
||||
const mapDispatchToProps = (dispatch, ownProps) => ({
|
||||
closeMenu: () => dispatch({ type: CLOSE_PRESETS_CONTEXT_MENU }),
|
||||
|
|
|
|||
|
|
@ -53,46 +53,45 @@ const EqualizerWindow = props => {
|
|||
className={className}
|
||||
onClick={props.focusWindow}
|
||||
>
|
||||
{props.shade
|
||||
? <div className="draggable">
|
||||
{props.shade ? (
|
||||
<div className="draggable">
|
||||
<div id="equalizer-shade" onClick={props.toggleEqualizerShadeMode} />
|
||||
<div id="equalizer-close" onClick={props.closeEqualizerWindow} />
|
||||
<Volume id="equalizer-volume" className={eqVolumeClassName} />
|
||||
<Balance id="equalizer-balance" className={eqBalanceClassName} />
|
||||
</div>
|
||||
) : (
|
||||
<div>
|
||||
<div className="equalizer-top title-bar draggable">
|
||||
<div
|
||||
id="equalizer-shade"
|
||||
onClick={props.toggleEqualizerShadeMode}
|
||||
/>
|
||||
<div id="equalizer-close" onClick={props.closeEqualizerWindow} />
|
||||
<Volume id="equalizer-volume" className={eqVolumeClassName} />
|
||||
<Balance id="equalizer-balance" className={eqBalanceClassName} />
|
||||
</div>
|
||||
: <div>
|
||||
<div className="equalizer-top title-bar draggable">
|
||||
<div
|
||||
id="equalizer-shade"
|
||||
onClick={props.toggleEqualizerShadeMode}
|
||||
/>
|
||||
<div id="equalizer-close" onClick={props.closeEqualizerWindow} />
|
||||
</div>
|
||||
<EqOn />
|
||||
<EqAuto />
|
||||
<EqGraph />
|
||||
<div id="presets" onClick={props.togglePresetsContextMenu}>
|
||||
<PresetsContextMenu
|
||||
selected={props.contextMenuSelected}
|
||||
fileInput={props.fileInput}
|
||||
/>
|
||||
</div>
|
||||
<Band id="preamp" band="preamp" onChange={props.setPreampValue} />
|
||||
<div id="plus12db" onClick={props.setEqToMax} />
|
||||
<div id="zerodb" onClick={props.setEqToMid} />
|
||||
<div id="minus12db" onClick={props.setEqToMin} />
|
||||
{BANDS.map(hertz =>
|
||||
<Band
|
||||
key={hertz}
|
||||
id={bandClassName(hertz)}
|
||||
band={hertz}
|
||||
onChange={props.setHertzValue(hertz)}
|
||||
/>
|
||||
)}
|
||||
</div>}
|
||||
<EqOn />
|
||||
<EqAuto />
|
||||
<EqGraph />
|
||||
<div id="presets" onClick={props.togglePresetsContextMenu}>
|
||||
<PresetsContextMenu
|
||||
selected={props.contextMenuSelected}
|
||||
fileInput={props.fileInput}
|
||||
/>
|
||||
</div>
|
||||
<Band id="preamp" band="preamp" onChange={props.setPreampValue} />
|
||||
<div id="plus12db" onClick={props.setEqToMax} />
|
||||
<div id="zerodb" onClick={props.setEqToMid} />
|
||||
<div id="minus12db" onClick={props.setEqToMin} />
|
||||
{BANDS.map(hertz => (
|
||||
<Band
|
||||
key={hertz}
|
||||
id={bandClassName(hertz)}
|
||||
band={hertz}
|
||||
onChange={props.setHertzValue(hertz)}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -2,14 +2,15 @@ import React from "react";
|
|||
import { connect } from "react-redux";
|
||||
import { play, pause, stop } from "../../actionCreators";
|
||||
|
||||
const ActionButtons = props =>
|
||||
const ActionButtons = props => (
|
||||
<div className="actions">
|
||||
<div id="previous" />
|
||||
<div id="play" onClick={props.play} />
|
||||
<div id="pause" onClick={props.pause} />
|
||||
<div id="stop" onClick={props.stop} />
|
||||
<div id="next" />
|
||||
</div>;
|
||||
</div>
|
||||
);
|
||||
|
||||
const mapStateToProps = state => state.media;
|
||||
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ import {
|
|||
UNSET_FOCUS
|
||||
} from "../../actionTypes";
|
||||
|
||||
const ClutterBar = props =>
|
||||
const ClutterBar = props => (
|
||||
<div id="clutter-bar">
|
||||
<div id="button-o" />
|
||||
<div id="button-a" />
|
||||
|
|
@ -20,7 +20,8 @@ const ClutterBar = props =>
|
|||
onMouseDown={props.handleMouseDown}
|
||||
/>
|
||||
<div id="button-v" />
|
||||
</div>;
|
||||
</div>
|
||||
);
|
||||
|
||||
const mapStateToProps = state => ({
|
||||
doubled: state.display.doubled
|
||||
|
|
|
|||
|
|
@ -4,12 +4,13 @@ import classnames from "classnames";
|
|||
|
||||
import { TOGGLE_EQUALIZER_WINDOW } from "../../actionTypes";
|
||||
|
||||
const EqToggleButton = props =>
|
||||
const EqToggleButton = props => (
|
||||
<div
|
||||
id="equalizer-button"
|
||||
className={classnames({ selected: props.equalizer })}
|
||||
onClick={props.handleClick}
|
||||
/>;
|
||||
/>
|
||||
);
|
||||
|
||||
const mapStateToProps = state => ({
|
||||
equalizer: state.windows.equalizer
|
||||
|
|
|
|||
|
|
@ -3,9 +3,6 @@ import { connect } from "react-redux";
|
|||
|
||||
import CharacterString from "../CharacterString";
|
||||
|
||||
const Kbps = props =>
|
||||
<CharacterString id="kbps">
|
||||
{props.kbps}
|
||||
</CharacterString>;
|
||||
const Kbps = props => <CharacterString id="kbps">{props.kbps}</CharacterString>;
|
||||
|
||||
export default connect(state => state.media)(Kbps);
|
||||
|
|
|
|||
|
|
@ -3,9 +3,6 @@ import { connect } from "react-redux";
|
|||
|
||||
import CharacterString from "../CharacterString";
|
||||
|
||||
const Khz = props =>
|
||||
<CharacterString id="khz">
|
||||
{props.khz}
|
||||
</CharacterString>;
|
||||
const Khz = props => <CharacterString id="khz">{props.khz}</CharacterString>;
|
||||
|
||||
export default connect(state => state.media)(Khz);
|
||||
|
|
|
|||
|
|
@ -10,11 +10,12 @@ const offsetFromBalance = balance => {
|
|||
return offset;
|
||||
};
|
||||
|
||||
const MainBalance = props =>
|
||||
const MainBalance = props => (
|
||||
<Balance
|
||||
id="balance"
|
||||
style={{ backgroundPosition: `0 -${offsetFromBalance(props.balance)}px` }}
|
||||
/>;
|
||||
/>
|
||||
);
|
||||
|
||||
const mapStateToProps = state => ({ balance: state.media.balance });
|
||||
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@ const SKINS = [
|
|||
{ file: "ZaxonRemake1-0.wsz", name: "Zaxon Remake" }
|
||||
];
|
||||
|
||||
const MainContextMenu = props =>
|
||||
const MainContextMenu = props => (
|
||||
<ContextMenu
|
||||
closeMenu={props.closeMenu}
|
||||
openMenu={props.openMenu}
|
||||
|
|
@ -34,17 +34,18 @@ const MainContextMenu = props =>
|
|||
<Parent label="Skins">
|
||||
<Node onClick={props.openFileDialog} label="Load Skin..." />
|
||||
<Hr />
|
||||
{SKINS.map(skin =>
|
||||
{SKINS.map(skin => (
|
||||
<Node
|
||||
key={skin.file}
|
||||
onClick={props.setSkin.bind(null, skin.file)}
|
||||
label={skin.name}
|
||||
/>
|
||||
)}
|
||||
))}
|
||||
</Parent>
|
||||
<Hr />
|
||||
<Node onClick={props.close} label="Exit" />
|
||||
</ContextMenu>;
|
||||
</ContextMenu>
|
||||
);
|
||||
|
||||
const mapDispatchToProps = (dispatch, ownProps) => ({
|
||||
close: () => dispatch(close()),
|
||||
|
|
|
|||
|
|
@ -2,13 +2,14 @@ import React from "react";
|
|||
import { connect } from "react-redux";
|
||||
import classnames from "classnames";
|
||||
|
||||
const MonoStereo = props =>
|
||||
const MonoStereo = props => (
|
||||
<div className="mono-stereo">
|
||||
<div
|
||||
id="stereo"
|
||||
className={classnames({ selected: props.channels === 2 })}
|
||||
/>
|
||||
<div id="mono" className={classnames({ selected: props.channels === 1 })} />
|
||||
</div>;
|
||||
</div>
|
||||
);
|
||||
|
||||
export default connect(state => state.media)(MonoStereo);
|
||||
|
|
|
|||
|
|
@ -43,9 +43,8 @@ const Position = ({
|
|||
const mapStateToProps = ({ media, userInput }) => {
|
||||
const position = media.length ? media.timeElapsed / media.length * 100 : 0;
|
||||
|
||||
const displayedPosition = userInput.focus === "position"
|
||||
? userInput.scrubPosition
|
||||
: position;
|
||||
const displayedPosition =
|
||||
userInput.focus === "position" ? userInput.scrubPosition : position;
|
||||
|
||||
return {
|
||||
displayedPosition,
|
||||
|
|
|
|||
|
|
@ -4,12 +4,13 @@ import classnames from "classnames";
|
|||
|
||||
import { toggleRepeat } from "../../actionCreators";
|
||||
|
||||
const Repeat = props =>
|
||||
const Repeat = props => (
|
||||
<div
|
||||
id="repeat"
|
||||
className={classnames({ selected: props.repeat })}
|
||||
onClick={props.handleClick}
|
||||
/>;
|
||||
/>
|
||||
);
|
||||
|
||||
const mapStateToProps = state => ({
|
||||
repeat: state.media.repeat
|
||||
|
|
|
|||
|
|
@ -14,9 +14,10 @@ class Time extends React.Component {
|
|||
this.props.dispatch({ type: TOGGLE_TIME_MODE });
|
||||
}
|
||||
render() {
|
||||
const seconds = this.props.timeMode === "ELAPSED"
|
||||
? this.props.timeElapsed
|
||||
: this.props.length - this.props.timeElapsed;
|
||||
const seconds =
|
||||
this.props.timeMode === "ELAPSED"
|
||||
? this.props.timeElapsed
|
||||
: this.props.length - this.props.timeElapsed;
|
||||
|
||||
const timeObj = getTimeObj(seconds);
|
||||
return (
|
||||
|
|
|
|||
|
|
@ -3,12 +3,13 @@ import { connect } from "react-redux";
|
|||
import classnames from "classnames";
|
||||
import { toggleShuffle } from "../../actionCreators";
|
||||
|
||||
const Shuffle = ({ shuffle, handleClick }) =>
|
||||
const Shuffle = ({ shuffle, handleClick }) => (
|
||||
<div
|
||||
id="shuffle"
|
||||
className={classnames({ selected: shuffle })}
|
||||
onClick={handleClick}
|
||||
/>;
|
||||
/>
|
||||
);
|
||||
const mapStateToProps = state => ({
|
||||
shuffle: state.media.shuffle
|
||||
});
|
||||
|
|
|
|||
|
|
@ -239,11 +239,7 @@ const Skin = props => {
|
|||
"#winamp2-js .status #time #minus-sign { top: 0px; left: -1px; width: 9px; height: 13px; }"
|
||||
);
|
||||
}
|
||||
return (
|
||||
<style type="text/css">
|
||||
{cssRules.join("\n")}
|
||||
</style>
|
||||
);
|
||||
return <style type="text/css">{cssRules.join("\n")}</style>;
|
||||
};
|
||||
|
||||
export default connect(state => ({ skinImages: state.display.skinImages }))(
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ import { setVolume } from "../actionCreators";
|
|||
|
||||
import { SET_FOCUS, UNSET_FOCUS } from "../actionTypes";
|
||||
|
||||
const Volume = props =>
|
||||
const Volume = props => (
|
||||
<input
|
||||
id={props.id}
|
||||
type="range"
|
||||
|
|
@ -17,7 +17,8 @@ const Volume = props =>
|
|||
onChange={props.setVolume}
|
||||
onMouseDown={props.showMarquee}
|
||||
onMouseUp={props.hideMarquee}
|
||||
/>;
|
||||
/>
|
||||
);
|
||||
|
||||
const mapStateToProps = state => state.media;
|
||||
|
||||
|
|
|
|||
|
|
@ -131,15 +131,16 @@ class WindowManager extends React.Component {
|
|||
const position = this.state[i];
|
||||
/* eslint-disable react/jsx-no-bind */
|
||||
return (
|
||||
position &&
|
||||
<div
|
||||
onMouseDown={e => this.handleMouseDown(i, e)}
|
||||
ref={this.getRef}
|
||||
style={{ ...style, ...position }}
|
||||
key={i}
|
||||
>
|
||||
{child}
|
||||
</div>
|
||||
position && (
|
||||
<div
|
||||
onMouseDown={e => this.handleMouseDown(i, e)}
|
||||
ref={this.getRef}
|
||||
style={{ ...style, ...position }}
|
||||
key={i}
|
||||
>
|
||||
{child}
|
||||
</div>
|
||||
)
|
||||
);
|
||||
/* eslint-enable react/jsx-no-bind */
|
||||
})}
|
||||
|
|
|
|||
|
|
@ -20,7 +20,9 @@ if (new Browser(window).isCompatible) {
|
|||
window.store = store;
|
||||
|
||||
render(
|
||||
<Provider store={store}><App winamp={winamp} /></Provider>,
|
||||
<Provider store={store}>
|
||||
<App winamp={winamp} />
|
||||
</Provider>,
|
||||
document.getElementById("winamp2-js")
|
||||
);
|
||||
|
||||
|
|
|
|||
|
|
@ -178,9 +178,8 @@ export default {
|
|||
this._source.connect(this._analyser);
|
||||
this._source.connect(this._preamp);
|
||||
|
||||
this._position = typeof position !== "undefined"
|
||||
? position
|
||||
: this._position;
|
||||
this._position =
|
||||
typeof position !== "undefined" ? position : this._position;
|
||||
this._startTime = this._context.currentTime - this._position;
|
||||
this._source.start(0, this._position);
|
||||
this._playing = true;
|
||||
|
|
|
|||
16
package.json
16
package.json
|
|
@ -13,18 +13,14 @@
|
|||
"tdd": "jest --watch",
|
||||
"deploy": "ssh jordaneldredge.com HASH=$HASH sh < deploy.sh",
|
||||
"revert": "ssh jordaneldredge.com sh < revert.sh",
|
||||
"format": "prettier --write js/**/*.js css/**/*.css webpack.config.js webpack.production.config.js"
|
||||
"format":
|
||||
"prettier --write js/**/*.js css/**/*.css webpack.config.js webpack.production.config.js"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git+https://github.com/captbaritone/winamp2-js.git"
|
||||
},
|
||||
"keywords": [
|
||||
"Winamp",
|
||||
"HTML5",
|
||||
"audio",
|
||||
"web-auido-api"
|
||||
],
|
||||
"keywords": ["Winamp", "HTML5", "audio", "web-auido-api"],
|
||||
"author": "Jordan Eldredge <jordan@jordaneldredge.com>",
|
||||
"license": "MIT",
|
||||
"bugs": {
|
||||
|
|
@ -41,13 +37,12 @@
|
|||
"canvas-mock": "0.0.0",
|
||||
"css-loader": "^0.28.4",
|
||||
"eslint": "3.19.0",
|
||||
"eslint-config-prettier": "^1.5.0",
|
||||
"eslint-plugin-prettier": "^2.1.1",
|
||||
"eslint-config-prettier": "^2.3.0",
|
||||
"eslint-plugin-prettier": "^2.2.0",
|
||||
"eslint-plugin-react": "6.10.3",
|
||||
"file-loader": "^0.11.0",
|
||||
"gzip-size-cli": "^2.0.0",
|
||||
"jest-cli": "^20.0.4",
|
||||
"prettier": "^1.4.1",
|
||||
"react-test-renderer": "^15.4.2",
|
||||
"style-loader": "^0.16.1",
|
||||
"travis-weigh-in": "^1.0.2",
|
||||
|
|
@ -64,6 +59,7 @@
|
|||
"classnames": "^2.2.5",
|
||||
"eslint-plugin-import": "^2.7.0",
|
||||
"jszip": "^3.1.3",
|
||||
"prettier": "^1.6.0",
|
||||
"prop-types": "^15.5.10",
|
||||
"rc-slider": "^8.1.5",
|
||||
"react": "^15.3.1",
|
||||
|
|
|
|||
18
yarn.lock
18
yarn.lock
|
|
@ -1916,9 +1916,9 @@ escope@^3.6.0:
|
|||
esrecurse "^4.1.0"
|
||||
estraverse "^4.1.1"
|
||||
|
||||
eslint-config-prettier@^1.5.0:
|
||||
version "1.5.0"
|
||||
resolved "https://registry.yarnpkg.com/eslint-config-prettier/-/eslint-config-prettier-1.5.0.tgz#969b6d21b2eb2574a6810426507f755072db1963"
|
||||
eslint-config-prettier@^2.3.0:
|
||||
version "2.3.0"
|
||||
resolved "https://registry.yarnpkg.com/eslint-config-prettier/-/eslint-config-prettier-2.3.0.tgz#b75b1eabea0c8b97b34403647ee25db349b9d8a0"
|
||||
dependencies:
|
||||
get-stdin "^5.0.1"
|
||||
|
||||
|
|
@ -1951,9 +1951,9 @@ eslint-plugin-import@^2.7.0:
|
|||
minimatch "^3.0.3"
|
||||
read-pkg-up "^2.0.0"
|
||||
|
||||
eslint-plugin-prettier@^2.1.1:
|
||||
version "2.1.1"
|
||||
resolved "https://registry.yarnpkg.com/eslint-plugin-prettier/-/eslint-plugin-prettier-2.1.1.tgz#2fb7e2ab961f2b61d2c8cf91bc17716ca8c53868"
|
||||
eslint-plugin-prettier@^2.2.0:
|
||||
version "2.2.0"
|
||||
resolved "https://registry.yarnpkg.com/eslint-plugin-prettier/-/eslint-plugin-prettier-2.2.0.tgz#f2837ad063903d73c621e7188fb3d41486434088"
|
||||
dependencies:
|
||||
fast-diff "^1.1.1"
|
||||
jest-docblock "^20.0.1"
|
||||
|
|
@ -4295,9 +4295,9 @@ preserve@^0.2.0:
|
|||
version "0.2.0"
|
||||
resolved "https://registry.yarnpkg.com/preserve/-/preserve-0.2.0.tgz#815ed1f6ebc65926f865b310c0713bcb3315ce4b"
|
||||
|
||||
prettier@^1.4.1:
|
||||
version "1.4.4"
|
||||
resolved "https://registry.yarnpkg.com/prettier/-/prettier-1.4.4.tgz#a8d1447b14c9bf67e6d420dcadd10fb9a4fad65a"
|
||||
prettier@^1.6.0:
|
||||
version "1.6.0"
|
||||
resolved "https://registry.yarnpkg.com/prettier/-/prettier-1.6.0.tgz#23e9c68251f440feb847f558821bead21765919a"
|
||||
|
||||
pretty-bytes@^4.0.2:
|
||||
version "4.0.2"
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue