Mirrors/webamp
1
0
Fork 0
mirror of https://github.com/captbaritone/webamp.git synced 2026-07-25 19:13:54 +00:00
Code Issues Projects Releases Wiki Activity

Move skin <style> to portal

Browse source
This commit is contained in:
Jordan Eldredge 2017-10-24 06:46:42 -07:00
parent c847d50e10
commit 42aef661e6
2 changed files with 49 additions and 36 deletions
Download patch file Download diff file Expand all files Collapse all files

5
js/components/App.js
View file

@ -26,10 +26,7 @@ const App = ({ media, fileInput, loading, closed, equalizer, playlist }) => {
}
return (
<div id="loaded">
<Skin>
{/* This is not technically kosher, since <style> tags should be in
the <head>, but browsers don't really care... */}
</Skin>
<Skin />
<WindowManager>
<MainWindow fileInput={fileInput} mediaPlayer={media} />
{equalizer && <EqualizerWindow fileInput={fileInput} />}

80
js/components/Skin.js
View file

@ -1,5 +1,6 @@
// Dynamically set the css background images for all the sprites
import React from "react";
import { createPortal } from "react-dom";
import { connect } from "react-redux";
import { FONT_LOOKUP, imageConstFromChar } from "../skinSprites";
@ -267,41 +268,56 @@ Object.keys(FONT_LOOKUP).forEach(character => {
const numExIsUsed = skinImages => !!skinImages.DIGIT_0_EX;
const Skin = props => {
if (!props.skinImages) {
return null;
class Skin extends React.Component {
componentWillMount() {
const style = document.createElement("style");
style.type = "text/css";
document.head.appendChild(style);
this.style = style;
}
const cssRules = [];
Object.keys(imageSelectors).map(imageName => {
const imageUrl = props.skinImages[imageName];
if (imageUrl) {
imageSelectors[imageName].forEach(selector => {
cssRules.push(
`#winamp2-js ${selector} {background-image: url(${imageUrl})}`
);
});
}
});
Object.keys(cursorSelectors).map(cursorName => {
const cursorUrl = props.skinCursors[cursorName];
if (cursorUrl) {
cursorSelectors[cursorName].forEach(selector => {
cssRules.push(
`#winamp2-js ${selector} {cursor: url(${cursorUrl}), auto}`
);
});
}
});
if (numExIsUsed(props.skinImages)) {
// This alternate number file requires that the minus sign be
// formatted differently.
cssRules.push(
"#winamp2-js .status #time #minus-sign { top: 0px; left: -1px; width: 9px; height: 13px; }"
);
componentWillUnmount() {
this.style.remove();
this.style = null;
}
return <style type="text/css">{cssRules.join("\n")}</style>;
};
render() {
const { skinImages, skinCursors } = this.props;
if (!skinImages) {
return null;
}
const cssRules = [];
Object.keys(imageSelectors).map(imageName => {
const imageUrl = skinImages[imageName];
if (imageUrl) {
imageSelectors[imageName].forEach(selector => {
cssRules.push(
`#winamp2-js ${selector} {background-image: url(${imageUrl})}`
);
});
}
});
Object.keys(cursorSelectors).map(cursorName => {
const cursorUrl = skinCursors[cursorName];
if (cursorUrl) {
cursorSelectors[cursorName].forEach(selector => {
cssRules.push(
`#winamp2-js ${selector} {cursor: url(${cursorUrl}), auto}`
);
});
}
});
if (numExIsUsed(skinImages)) {
// This alternate number file requires that the minus sign be
// formatted differently.
cssRules.push(
"#winamp2-js .status #time #minus-sign { top: 0px; left: -1px; width: 9px; height: 13px; }"
);
}
return createPortal(cssRules.join("\n"), this.style);
}
}
export default connect(state => ({
skinImages: state.display.skinImages,