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

Try to fix EQ title buttons

Browse source
This commit is contained in:
Jordan Eldredge 2020-12-21 00:24:51 -08:00
parent 4c73604684
commit 41fce44d98
8 changed files with 67 additions and 16 deletions
Download patch file Download diff file Expand all files Collapse all files

6
packages/webamp/CHANGELOG.md
View file

@ -2,7 +2,11 @@
### Features
- Support `.ani` cursors in skins [#1035](https://github.com/captbaritone/webamp/pull/1035) [blog post](https://jordaneldredge.com/blog/rendering-animated-ani-cursors-in-the-browser/).
- Support `.ani` cursors in skins [#1035](https://github.com/captbaritone/webamp/pull/1035), [blog post](https://jordaneldredge.com/blog/rendering-animated-ani-cursors-in-the-browser/).
### Bug Fixes
- Fix a number of edge cases where the close and minimize buttons in the equalizer window could render the wrong sprite [#1046](https://github.com/captbaritone/webamp/pull/1046)
## 1.4.2

6
packages/webamp/css/base-skin.css
View file

@ -139,8 +139,10 @@
#webamp #equalizer-balance.right::-moz-range-thumb {background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAAHCAYAAADNufepAAAAL0lEQVQYV2O0dPD9v7lPl2H7sQ8MjMlx1v87C+wZQIBx8ZSs/55WAoQ4KHqQTQMABjYbR2VeyxUAAAAASUVORK5CYII=)}
#webamp #equalizer-shade:active {background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAbUlEQVQoU2PcMjH5PwMBwAhTxK0hjaH0642nYDGwImwKYDpACsGKdpx5gNNCDxMFiKJ5O28xSAmzYSh89vYXQ5K7GkIRSAWyQpACEIArmrbhNgMHJ6Ynf3xnZMgKUIWYBNIBUogOQArgviMUTgAGRzXpGfAzIgAAAABJRU5ErkJggg==)}
#webamp #equalizer-window.shade #equalizer-shade:active {background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAbklEQVQoU2PcMjH5PwMBwAhTNG3DbQylWQGqYDGwIpACDs7/DLn5jigKuzsOMIAUghXN23kLLImuaPLE/QxJ7moIRQXpKgx/OWRRTMKqCFnFhJl3wFy4SSA3VRQoo5gCUvTjOyPCTSBZgr4jFE4A2kg/6aCuM1IAAAAASUVORK5CYII=)}
#webamp #equalizer-window.selected #equalizer-close {background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAA2UlEQVQoU2PU1nb5////fwYGEAYDCP0fSoPYjCBFjkb/Gb4z/mC4fvkdVCEDg6auEAPnfw6GPaf/MDBqaTn/tzT5wRCoqcGw49oDsGKQpIeJAsP6szcYjp5igSgSYH/GYKQjBZa4e/c5g7KyJMOOMw8Yzl15xvDuuxhCEch4PQF+hryJWxkm5XszXPrwEWz9u2+iDIxamk7/BTieo5hk6CzOsGrNI1STwG4y1gBbAXNTWIgcw8K1txiOnmSGmORkwojbd6d+QxTBwgcWNqBwY2RkZPj/7x9YCgBOq24Dw83jIwAAAABJRU5ErkJggg==)}
#webamp #equalizer-window #equalizer-close:active {background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAfElEQVQoU2PcMjH5PwMBwAhStOPMA4bvjD8Yrl9+B1euqSvEwPmfg8HDRIEBrGj92RtgBUY6UmDFIMlzV54xgBQGGmtAFLUtOAZWAJIIt1VkWHn4PpxflWCFUATSpSfAz5A3cSvDpHxvhksfPoJNR1FE0CSi3ESU7wiFEwDes2XpVzKmTwAAAABJRU5ErkJggg==)}
#webamp #equalizer-window.selected #eq-buttons.clicked #equalizer-close {background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAiElEQVQoU2PU1HT6z0AAMIIUWRsxMXz9/YPhzs1rcOUq6loM3KwcDEfP/WMAKzLQ/cUQ4KTJsPvwfbBikKSrrSLDhn3XGS5cZoMo4mG7wKCvYwSWuHf/OYOSoiRYw8Ur5xi+/DJAKAIZr6cowFDUvpmhr9KX4dL9D2DrURQRNIkoNxHlO0LhBADl2Vw1H4GXqQAAAABJRU5ErkJggg==)}
#webamp #equalizer-window.selected #eq-buttons.clicked #equalizer-close:active {background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAfElEQVQoU2NcOSP1PwMBwAhStPvwfYavv38w3Lj1Ea5cQ42fgZuVg8HVVpEBrGjDvutgBcba4mDFIMmzV18ygBQGOGlCFHXMOAFWAJIIc5dnWLXzIZxfkWGBUATSpacowFDUvpmhr9KX4dL9D2DTURQRNIkoNxHlO0LhBAD8HGXXJ+lJqwAAAABJRU5ErkJggg==)}
#webamp #equalizer-window.shade.selected #eq-buttons.clicked #equalizer-close {background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAA2UlEQVQoU2PU1nb5////fwYGEAYDCP0fSoPYjCBFjkb/Gb4z/mC4fvkdVCEDg6auEAPnfw6GPaf/MDBqaTn/tzT5wRCoqcGw49oDsGKQpIeJAsP6szcYjp5igSgSYH/GYKQjBZa4e/c5g7KyJMOOMw8Yzl15xvDuuxhCEch4PQF+hryJWxkm5XszXPrwEWz9u2+iDIxamk7/BTieo5hk6CzOsGrNI1STwG4y1gBbAXNTWIgcw8K1txiOnmSGmORkwojbd6d+QxTBwgcWNqBwY2RkZPj/7x9YCgBOq24Dw83jIwAAAABJRU5ErkJggg==)}
#webamp #equalizer-window.shade.selected #eq-buttons.clicked #equalizer-close:active {background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAfElEQVQoU2PcMjH5PwMBwAhStOPMA4bvjD8Yrl9+B1euqSvEwPmfg8HDRIEBrGj92RtgBUY6UmDFIMlzV54xgBQGGmtAFLUtOAZWAJIIt1VkWHn4PpxflWCFUATSpSfAz5A3cSvDpHxvhksfPoJNR1FE0CSi3ESU7wiFEwDes2XpVzKmTwAAAABJRU5ErkJggg==)}
#webamp #position {background-image: url(data:image/png;base64,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)}
#webamp #position::-webkit-slider-thumb {background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB0AAAAKCAYAAABIQFUsAAAArUlEQVQ4T2NMTSv+X5aqzUAvsGnVHAbG1NTi/2Vp2gwr5k2iqb1FPUcZZjS4MtT0nkC11MnTj0HfwpPqljNy6zHsWpzDcO/uTUxLCxunM4AUUBv8/3qJYfe6WbgtbSyMpradDPX9S/FbCnIRtYFrUBpuS0GRDQoKaoMVM5oZhMXEMYNXSiuc4efbYwwHty2jtp1g844dPsggISWBmpBA+YceAJ5llsztp4d9cDsA1L90sv7RoxcAAAAASUVORK5CYII=)}
#webamp #position::-moz-range-thumb {background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB0AAAAKCAYAAABIQFUsAAAArUlEQVQ4T2NMTSv+X5aqzUAvsGnVHAbG1NTi/2Vp2gwr5k2iqb1FPUcZZjS4MtT0nkC11MnTj0HfwpPqljNy6zHsWpzDcO/uTUxLCxunM4AUUBv8/3qJYfe6WbgtbSyMpradDPX9S/FbCnIRtYFrUBpuS0GRDQoKaoMVM5oZhMXEMYNXSiuc4efbYwwHty2jtp1g844dPsggISWBmpBA+YceAJ5llsztp4d9cDsA1L90sv7RoxcAAAAASUVORK5CYII=)}

24
packages/webamp/js/components/EqualizerWindow/EqTitleButtons.tsx Normal file
View file

@ -0,0 +1,24 @@
import ClickedDiv from "../ClickedDiv";
import { useTypedSelector, useActionCreator } from "../../hooks";
import * as Selectors from "../../selectors";
import * as Actions from "../../actionCreators";
import { WINDOWS } from "../../constants";
export default function EqTitleButtons() {
const focusedWindow = useTypedSelector(Selectors.getFocusedWindow);
const selected = focusedWindow === WINDOWS.EQUALIZER;
const closeWindow = useActionCreator(Actions.closeWindow);
const toggleEqualizerShadeMode = useActionCreator(
Actions.toggleEqualizerShadeMode
);
return (
<ClickedDiv id="eq-buttons" key={selected ? "selected" : "unselected"}>
<div id="equalizer-shade" onClick={toggleEqualizerShadeMode} />
<div
id="equalizer-close"
onClick={() => closeWindow(WINDOWS.EQUALIZER)}
/>
</ClickedDiv>
);
}

5
packages/webamp/js/components/EqualizerWindow/EqualizerShade.tsx
View file

@ -1,6 +1,7 @@
import Volume from "../Volume";
import Balance from "../Balance";
import { segment } from "../../utils";
import EqTitleButtons from "./EqTitleButtons";
import * as Actions from "../../actionCreators";
import * as Selectors from "../../selectors";
@ -9,7 +10,6 @@ import { useTypedSelector, useActionCreator } from "../../hooks";
const EqualizerShade = () => {
const volume = useTypedSelector(Selectors.getVolume);
const balance = useTypedSelector(Selectors.getBalance);
const closeWindow = useActionCreator(Actions.closeWindow);
const toggleEqualizerShadeMode = useActionCreator(
Actions.toggleEqualizerShadeMode
);
@ -23,8 +23,7 @@ const EqualizerShade = () => {
onDoubleClick={toggleEqualizerShadeMode}
style={{ width: "100%", height: "100%" }}
>
<div id="equalizer-shade" onClick={toggleEqualizerShadeMode} />
<div id="equalizer-close" onClick={() => closeWindow("equalizer")} />
<EqTitleButtons />
<Volume id="equalizer-volume" className={eqVolumeClassName} />
<Balance id="equalizer-balance" className={eqBalanceClassName} />
</div>

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

@ -15,6 +15,7 @@ import "../../../css/equalizer-window.css";
import { Band as BandType } from "../../types";
import FocusTarget from "../FocusTarget";
import { useTypedSelector, useActionCreator } from "../../hooks";
import EqTitleButtons from "./EqTitleButtons";
const bandClassName = (band: BandType) => `band-${band}`;
@ -31,7 +32,6 @@ const EqualizerWindow = () => {
const setEqToMid = useActionCreator(Actions.setEqToMid);
const setEqToMax = useActionCreator(Actions.setEqToMax);
const setHertzValue = useActionCreator(Actions.setEqBand);
const closeWindow = useActionCreator(Actions.closeWindow);
const toggleEqualizerShadeMode = useActionCreator(
Actions.toggleEqualizerShadeMode
);
@ -54,11 +54,7 @@ const EqualizerWindow = () => {
className="equalizer-top title-bar draggable"
onDoubleClick={toggleEqualizerShadeMode}
>
<div id="equalizer-shade" onClick={toggleEqualizerShadeMode} />
<div
id="equalizer-close"
onClick={() => closeWindow(WINDOWS.EQUALIZER)}
/>
<EqTitleButtons />
</div>
<EqOn />
<EqAuto />

1
packages/webamp/js/components/Skin.tsx
View file

@ -31,6 +31,7 @@ const FALLBACKS: { [key: string]: string } = {
MAIN_BALANCE_BACKGROUND: "MAIN_VOLUME_BACKGROUND",
MAIN_BALANCE_THUMB: "MAIN_VOLUME_THUMB",
MAIN_BALANCE_THUMB_ACTIVE: "MAIN_VOLUME_THUMB_SELECTED",
EQ_MAXIMIZE_BUTTON_ACTIVE: "EQ_MAXIMIZE_BUTTON_ACTIVE_FALLBACK",
};
// Cursors might appear in context menus which are not nested inside the window layout div.

14
packages/webamp/js/skinSelectors.ts
View file

@ -201,8 +201,18 @@ export const imageSelectors: Selectors = {
EQ_MINIMIZE_BUTTON_ACTIVE: [
"#equalizer-window.shade #equalizer-shade:active",
],
EQ_CLOSE_BUTTON: ["#equalizer-window.selected #equalizer-close"],
EQ_CLOSE_BUTTON_ACTIVE: ["#equalizer-window #equalizer-close:active"],
EQ_CLOSE_BUTTON: [
"#equalizer-window.selected #eq-buttons.clicked #equalizer-close",
],
EQ_CLOSE_BUTTON_ACTIVE: [
"#equalizer-window.selected #eq-buttons.clicked #equalizer-close:active",
],
EQ_SHADE_CLOSE_BUTTON: [
"#equalizer-window.shade.selected #eq-buttons.clicked #equalizer-close",
],
EQ_SHADE_CLOSE_BUTTON_ACTIVE: [
"#equalizer-window.shade.selected #eq-buttons.clicked #equalizer-close:active",
],
MAIN_POSITION_SLIDER_BACKGROUND: ["#position"],
MAIN_POSITION_SLIDER_THUMB: [
"#position::-webkit-slider-thumb",

19
packages/webamp/js/skinSprites.ts
View file

@ -418,8 +418,8 @@ const sprites: SpriteMap = {
},
{ name: "EQ_MAXIMIZE_BUTTON_ACTIVE", x: 1, y: 38, width: 9, height: 9 },
{ name: "EQ_MINIMIZE_BUTTON_ACTIVE", x: 1, y: 47, width: 9, height: 9 },
{ name: "EQ_CLOSE_BUTTON", x: 11, y: 38, width: 9, height: 9 },
{ name: "EQ_CLOSE_BUTTON_ACTIVE", x: 11, y: 47, width: 9, height: 9 },
{ name: "EQ_SHADE_CLOSE_BUTTON", x: 11, y: 38, width: 9, height: 9 },
{ name: "EQ_SHADE_CLOSE_BUTTON_ACTIVE", x: 11, y: 47, width: 9, height: 9 },
],
EQMAIN: [
{ name: "EQ_WINDOW_BACKGROUND", x: 0, y: 0, width: 275, height: 116 },
@ -428,6 +428,21 @@ const sprites: SpriteMap = {
{ name: "EQ_SLIDER_BACKGROUND", x: 13, y: 164, width: 209, height: 129 },
{ name: "EQ_SLIDER_THUMB", x: 0, y: 164, width: 11, height: 11 },
{ name: "EQ_SLIDER_THUMB_SELECTED", x: 0, y: 176, width: 11, height: 11 },
{ name: "EQ_CLOSE_BUTTON", x: 0, y: 116, width: 9, height: 9 },
{ name: "EQ_CLOSE_BUTTON_ACTIVE", x: 0, y: 125, width: 9, height: 9 },
// This is technically not a sprite, it's just part of the background.
// However, we extract it to use it as a fallback for
// `EQ_MAXIMIZE_BUTTON_ACTIVE`. Without this, skins that don't implement
// `eq_ex.bmp` would show the default skin's `EQ_MAXIMIZE_BUTTON_ACTIVE`
// instead of showing no sprite aka, just showing through to this portion of
// the title bar image.
{
name: "EQ_MAXIMIZE_BUTTON_ACTIVE_FALLBACK",
x: 254,
y: 152,
width: 9,
height: 9,
},
{ name: "EQ_ON_BUTTON", x: 10, y: 119, width: 26, height: 12 },
{ name: "EQ_ON_BUTTON_DEPRESSED", x: 128, y: 119, width: 26, height: 12 },
{ name: "EQ_ON_BUTTON_SELECTED", x: 69, y: 119, width: 26, height: 12 },