diff --git a/css/playlist.css b/css/playlist.css index ef8e4b03..5826fddc 100644 --- a/css/playlist.css +++ b/css/playlist.css @@ -7,7 +7,6 @@ margin-left: -137px; top: 40%; left: 20%; - /* Background-image: pledit.bmp */ } #playlist.closed { display: none; } @@ -52,21 +51,12 @@ left: 0; height: 100%; width: 25px; - background-position: 0 -21px; } -#playlist.selected .top .top-left { - background-position: 0 0; -} - #playlist .top .title { position: relative; height: 100%; width: 100px; margin: 0 auto; - background-position: -26px -21px; -} -#playlist.selected .top .title { - background-position: -26px 0px; } #playlist .top .top-right { @@ -75,30 +65,17 @@ right: 0; height: 100%; width: 25px; - background-position: -153px -21px; -} - -#playlist.selected .top .top-right { - background-position: -153px 0; } #playlist .top #playlist-shade { - background-position: -156px -3px; position: absolute; top: 3px; right: 13px; height: 9px; width: 9px; } -#playlist .top #playlist-shade:active { - background-position: -62px -42px; -} -#playlist .top #playlist-shade.selected { - background-position: -150px -42px; -} #playlist .top #playlist-close { - background-position: -167px -3px; position: absolute; top: 3px; right: 3px; @@ -106,15 +83,12 @@ width: 9px; } -#playlist .top #playlist-close:active { - background-position: -52px -42px; -} - #playlist .left { height: 100%; width: 24px; overflow: hidden; } + #playlist .right { height: 100%; position: absolute; @@ -138,7 +112,6 @@ left: 0; height: 100%; width: 125px; - background-position: 0 -72px; } #playlist .bottom-right { position: absolute; @@ -146,7 +119,6 @@ right: 0; height: 100%; width: 150px; - background-position: -126px -72px; } #playlist #playlist-resize-handle { @@ -174,27 +146,13 @@ } #playlist.shade .top .top-left { - background-position: -72px -42px; width: 25px; height: 14px; } #playlist.shade .top .top-right { - background-position: -99px -42px; width: 50px; height: 14px; } -#playlist.shade .top #playlist-close { - background-position: -138px -45px; -} -#playlist.shade .top #playlist-close:active { - background-position: -52px -42px; -} -#playlist.shade .top #playlist-shade { - background-position: -128px -45px; -} -#playlist.shade .top #playlist-shade:active { - background-position: -150px -42px; -} #playlist.shade #tracks { top: 0; height: 14px; diff --git a/js/skin-sprites.js b/js/skin-sprites.js index 2c4e4ab9..d9da8d0e 100644 --- a/js/skin-sprites.js +++ b/js/skin-sprites.js @@ -83,17 +83,36 @@ var SKIN_SPRITES = [ { selectors: [".play #work-indicator.selected"], x: 39, y: 0, width: 9, height: 9} ] }, - /* { + { img: "PLEDIT", sprites: [ + { selectors: ["#playlist .top-left"], x: 0, y: 21, width: 25, height: 20}, + { selectors: ["#playlist.selected .top-left"], x: 0, y: 0, width: 25, height: 20}, + { selectors: ["#playlist .title"], x: 26, y: 21, width: 100, height: 20}, + { selectors: ["#playlist.selected .title"], x: 26, y: 0, width: 100, height: 20}, + { selectors: ["#playlist .top-right"], x: 153, y: 21, width: 25, height: 20}, + { selectors: ["#playlist.selected .top-right"], x: 153, y: 0, width: 25, height: 20}, { selectors: [".playlist-top-tile"], x: 127, y: 21, width: 25, height: 20}, { selectors: [".selected .playlist-top-tile"], x: 127, y: 0, width: 25, height: 20}, + { selectors: ["#playlist-shade"], x: 156, y: 3, width: 9, height: 9}, + { selectors: ["#playlist-shade:active"], x: 62, y: 42, width: 9, height: 9}, + { selectors: ["#playlist-shade.selected"], x: 150, y: 42, width: 9, height: 9}, + { selectors: ["#playlist.shade #playlist-shade"], x: 128, y: 45, width: 9, height: 9}, + { selectors: ["#playlist.shade #playlist-shade:active"], x: 150, y: 42, width: 9, height: 9}, + { selectors: ["#playlist-close"], x: 167, y: 3, width: 9, height: 9}, + { selectors: ["#playlist-close:active"], x: 52, y: 42, width: 9, height: 9}, + { selectors: ["#playlist.shade #playlist-close"], x: 138, y: 45, width: 9, height: 9}, + { selectors: ["#playlist.shade #playlist-close:active"], x: 52, y: 42, width: 9, height: 9}, { selectors: [".playlist-left-tile"], x: 0, y: 42, width: 25, height: 29}, { selectors: [".playlist-right-tile"], x: 27, y: 42, width: 25, height: 29}, { selectors: [".playlist-bottom-tile"], x: 179, y: 0, width: 25, height: 38}, - { selectors: ["#playlist.shade"], x: 72, y: 57, width: 25, height: 14} + { selectors: ["#playlist .bottom-right"], x: 126, y: 72, width: 150, height: 38}, + { selectors: ["#playlist .bottom-left"], x: 0, y: 72, width: 150, height: 38}, + { selectors: ["#playlist.shade"], x: 72, y: 57, width: 25, height: 14}, + { selectors: ["#playlist.shade .top-left"], x: 72, y: 42, width: 25, height: 14}, + { selectors: ["#playlist.shade .top-right"], x: 99, y: 42, width: 50, height: 14} ] - }, */ + }, { img: "POSBAR", sprites: [ diff --git a/js/skin.js b/js/skin.js index 5ec27127..790bf86f 100644 --- a/js/skin.js +++ b/js/skin.js @@ -10,6 +10,15 @@ SkinManager = { // For sprites that tile, we need to use just the sprite, not the whole image _skinSprites: SKIN_SPRITES, + // PLEDIT.txt values + _plRules: { + "Normal": { selector:'#tracks li', attribute:'color' }, + "Current": { selector:'#tracks li.current', attribute:'color' }, + "Font": { selector:'#tracks li', attribute:'font-family' }, + "NormalBG": { selector:'#tracks, #tracks li', attribute:'background-color' }, + "SelectedBG": { selector:'#tracks li.selected', attribute:'background-color' } + }, + // Given a file of an original Winamp WSZ file, set the current skin setSkinByFile: function(file, completedCallback) { this.completedCallback = completedCallback; @@ -47,13 +56,22 @@ SkinManager = { }; var plValues = this._parsePlEdit(zip); - for(var key in plRules) { - var rule = plRules[key]; + for(var key in this._plRules) { + var rule = this._plRules[key]; if(plValues[key]) { promisedCssRules.push(rule.selector + "{" + rule.attribute + ":" + plValues[key] + "}"); } } + Array.prototype.push.apply(promisedCssRules, this._skinSprites.map(function(spriteObj) { + var file = this._findFileInZip(spriteObj.img, zip); + if (file) { + var src = "data:image/bmp;base64," + btoa(file.asBinary()); + return this._spriteCssRule(src, spriteObj); + } + }, this)); + + // Extract sprite images Promise.all(promisedCssRules).then(function(newCssRules) { this._createNewStyleNode(); @@ -84,7 +102,7 @@ SkinManager = { _parsePlEdit: function(zip) { var entries = this._findFileInZip("PLEDIT.TXT", zip).asText().split("\n"); - var regex = /^([^=]*)=([^=\r]*)\r?$/ + var regex = /^([^=]*)=([^=\r]*)\r?$/; var results = {}; for(var i = 0; i < entries.length; i++) { var matches = regex.exec(entries[i]);