From 5ca44008941b7988f9eadca6f97e07c83ba245ab Mon Sep 17 00:00:00 2001 From: Jordan Eldredge Date: Mon, 4 Mar 2019 07:23:19 -0800 Subject: [PATCH] Namespace skin CSS to be per instance This will be required to have multiple Webamp instances on a page. However, it will complicate our script which extracts pre-compiled CSS for the default skin. --- js/components/App.js | 4 +++- js/components/Skin.js | 36 ++++++++++++++++++++---------------- js/webampLazy.tsx | 3 +++ 3 files changed, 26 insertions(+), 17 deletions(-) diff --git a/js/components/App.js b/js/components/App.js index 20fa829c..bab8d8fe 100644 --- a/js/components/App.js +++ b/js/components/App.js @@ -35,6 +35,7 @@ class App extends React.Component { this._webampNode.id = "webamp"; this._webampNode.role = "application"; this._webampNode.style.zIndex = this.props.zIndex; + this._webampNode.classList.add(this.props.instanceClass); document.body.appendChild(this._webampNode); this.props.browserWindowSizeChanged(Utils.getWindowSize()); @@ -167,8 +168,9 @@ class App extends React.Component { } return ReactDOM.createPortal( - + } > { const imageUrl = skinImages[imageName] || skinImages[FALLBACKS[imageName]]; if (imageUrl) { imageSelectors[imageName].forEach(selector => { cssRules.push( - `${CSS_PREFIX} ${selector} {background-image: url(${imageUrl})}` + `${cssPrefix} ${selector} {background-image: url(${imageUrl})}` ); }); } @@ -105,10 +106,10 @@ function cssRulesFromProps(props) { const width = skinGenLetterWidths[`GEN_TEXT_${letter}`]; const selectedWidth = skinGenLetterWidths[`GEN_TEXT_SELECTED_${letter}`]; cssRules.push( - `${CSS_PREFIX} .gen-text-${letter.toLowerCase()} {width: ${width}px;}` + `${cssPrefix} .gen-text-${letter.toLowerCase()} {width: ${width}px;}` ); cssRules.push( - `${CSS_PREFIX} .selected .gen-text-${letter.toLowerCase()} {width: ${selectedWidth}px;}` + `${cssPrefix} .selected .gen-text-${letter.toLowerCase()} {width: ${selectedWidth}px;}` ); }); } @@ -122,7 +123,7 @@ function cssRulesFromProps(props) { // Maybe our CSS name spacing should be based on some other class/id // than the one we use for defining the main div. // That way it could be shared by both the player and the context menu. - selector.startsWith("#webamp-context-menu") ? "" : CSS_PREFIX + selector.startsWith("#webamp-context-menu") ? "" : cssPrefix } ${selector} {cursor: url(${cursorUrl}), auto}` ); }); @@ -133,7 +134,7 @@ function cssRulesFromProps(props) { // This alternate number file requires that the minus sign be // formatted differently. cssRules.push( - `${CSS_PREFIX} .status #time #minus-sign { top: 0px; left: -1px; width: 9px; height: 13px; }` + `${cssPrefix} .status #time #minus-sign { top: 0px; left: -1px; width: 9px; height: 13px; }` ); } @@ -141,24 +142,24 @@ function cssRulesFromProps(props) { if (polygons) { const matcher = mapRegionNamesToMatcher[regionName]; const id = mapRegionNamesToIds[regionName]; - cssRules.push(`${CSS_PREFIX} ${matcher} { clip-path: url(#${id}); }`); + cssRules.push(`${cssPrefix} ${matcher} { clip-path: url(#${id}); }`); } } // TODO: Find a way to make this declarative. cssRules.push( - `#webamp-media-library { + `${cssPrefix} #webamp-media-library { background-color: ${props.skinGenExColors.windowBackground}; color: ${props.skinGenExColors.windowText}; }` ); cssRules.push( - `#webamp-media-library input { + `${cssPrefix} #webamp-media-library input { caret-color: ${props.skinGenExColors.windowText}; }` ); cssRules.push( - `#webamp-media-library .webamp-media-library-item { + `${cssPrefix} #webamp-media-library .webamp-media-library-item { color: ${props.skinGenExColors.itemForeground}; background-color: ${props.skinGenExColors.itemBackground}; border-right: 1px solid ${props.skinGenExColors.divider}; @@ -166,37 +167,37 @@ function cssRulesFromProps(props) { }` ); cssRules.push( - `#webamp-media-library button { + `${cssPrefix} #webamp-media-library button { color: ${props.skinGenExColors.buttonText}; }` ); cssRules.push( - `#webamp-media-library .webamp-media-library-vertical-divider { + `${cssPrefix} #webamp-media-library .webamp-media-library-vertical-divider { }` ); cssRules.push( - `#webamp-media-library .webamp-media-library-vertical-divider-line, + `${cssPrefix} #webamp-media-library .webamp-media-library-vertical-divider-line, #webamp-media-library .webamp-media-library-horizontal-divider-line { background-color: ${props.skinGenExColors.divider}; }` ); cssRules.push( - `#webamp-media-library .webamp-media-library-table { + `${cssPrefix} #webamp-media-library .webamp-media-library-table { color: ${props.skinGenExColors.itemForeground}; background-color: ${props.skinGenExColors.itemBackground}; }` ); cssRules.push( - `#webamp-media-library .webamp-media-library-table thead { + `${cssPrefix} #webamp-media-library .webamp-media-library-table thead { color: ${props.skinGenExColors.listHeaderText}; background-color: ${props.skinGenExColors.listHeaderBackground}; }` ); cssRules.push( - `#webamp-media-library .webamp-media-library-table thead th { + `${cssPrefix} #webamp-media-library .webamp-media-library-table thead th { border-top: 1px solid ${props.skinGenExColors.listHeaderFrameTopAndLeft}; border-left: 1px solid ${ props.skinGenExColors.listHeaderFrameTopAndLeft @@ -229,11 +230,14 @@ const Skin = props => { if (cssRules == null) { return null; } + console.log(cssRules); + console.log(props.instanceId); const clipPaths = clipPathsFromProps(props); return ( -
+
{cssRules.join("\n")} {clipPaths} + {props.children}
); }; diff --git a/js/webampLazy.tsx b/js/webampLazy.tsx index 75d97dc6..2279415d 100644 --- a/js/webampLazy.tsx +++ b/js/webampLazy.tsx @@ -140,6 +140,7 @@ const storeHas = ( }); class Winamp { + _instanceClass: string; _actionEmitter: Emitter; _node: HTMLElement | null; _disposable: Disposable; @@ -158,6 +159,7 @@ class Winamp { } constructor(options: Options & PrivateOptions) { + this._instanceClass = `webamp-instance-${Utils.uniqueId()}`; this._node = null; this._disposable = new Disposable(); this._actionEmitter = new Emitter(); @@ -368,6 +370,7 @@ class Winamp { ReactDOM.render(