diff --git a/packages/webamp/CHANGELOG.md b/packages/webamp/CHANGELOG.md index 8c52db0e..b82a5afc 100644 --- a/packages/webamp/CHANGELOG.md +++ b/packages/webamp/CHANGELOG.md @@ -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 diff --git a/packages/webamp/css/base-skin.css b/packages/webamp/css/base-skin.css index 6bad95ae..6fd42943 100644 --- a/packages/webamp/css/base-skin.css +++ b/packages/webamp/css/base-skin.css @@ -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=)} diff --git a/packages/webamp/js/components/EqualizerWindow/EqTitleButtons.tsx b/packages/webamp/js/components/EqualizerWindow/EqTitleButtons.tsx new file mode 100644 index 00000000..6fb719bb --- /dev/null +++ b/packages/webamp/js/components/EqualizerWindow/EqTitleButtons.tsx @@ -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 ( + +
+
closeWindow(WINDOWS.EQUALIZER)} + /> + + ); +} diff --git a/packages/webamp/js/components/EqualizerWindow/EqualizerShade.tsx b/packages/webamp/js/components/EqualizerWindow/EqualizerShade.tsx index 34d58e50..b0fc1e14 100644 --- a/packages/webamp/js/components/EqualizerWindow/EqualizerShade.tsx +++ b/packages/webamp/js/components/EqualizerWindow/EqualizerShade.tsx @@ -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%" }} > -
-
closeWindow("equalizer")} /> +
diff --git a/packages/webamp/js/components/EqualizerWindow/index.tsx b/packages/webamp/js/components/EqualizerWindow/index.tsx index 69de4566..1c7048b7 100644 --- a/packages/webamp/js/components/EqualizerWindow/index.tsx +++ b/packages/webamp/js/components/EqualizerWindow/index.tsx @@ -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} > -
-
closeWindow(WINDOWS.EQUALIZER)} - /> +
diff --git a/packages/webamp/js/components/Skin.tsx b/packages/webamp/js/components/Skin.tsx index 59f5ade2..fde959fb 100644 --- a/packages/webamp/js/components/Skin.tsx +++ b/packages/webamp/js/components/Skin.tsx @@ -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. diff --git a/packages/webamp/js/skinSelectors.ts b/packages/webamp/js/skinSelectors.ts index cbacbfa1..e36c1076 100644 --- a/packages/webamp/js/skinSelectors.ts +++ b/packages/webamp/js/skinSelectors.ts @@ -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", diff --git a/packages/webamp/js/skinSprites.ts b/packages/webamp/js/skinSprites.ts index b6220182..4af2f29c 100644 --- a/packages/webamp/js/skinSprites.ts +++ b/packages/webamp/js/skinSprites.ts @@ -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 },