Move cursors into skin

css/equalizer-window.css

@@ -15,29 +15,24 @@
   height: 6px;
   width: 97px;
   background-position: 0 0;
-  cursor: url("../cursors/POSBAR.PNG"), auto;
 }
 
 #winamp2-js #equalizer-volume::-webkit-slider-thumb {
   height: 7px;
   width: 2px;
-  cursor: url("../cursors/POSBAR.PNG"), auto;
 }
 
 #winamp2-js #equalizer-volume::-moz-range-thumb {
   height: 7px;
   width: 2px;
-  cursor: url("../cursors/POSBAR.PNG"), auto;
 }
 
 #winamp2-js #equalizer-volume.center::-webkit-slider-thumb {
   width: 5px;
-  cursor: url("../cursors/POSBAR.PNG"), auto;
 }
 
 #winamp2-js #equalizer-volume.center::-moz-range-thumb {
   width: 5px;
-  cursor: url("../cursors/POSBAR.PNG"), auto;
 }
 
 #winamp2-js #equalizer-balance {
@@ -47,29 +42,24 @@
   height: 6px;
   width: 43px;
   background-position: 0 0;
-  cursor: url("../cursors/POSBAR.PNG"), auto;
 }
 
 #winamp2-js #equalizer-balance::-webkit-slider-thumb {
   height: 7px;
   width: 2px;
-  cursor: url("../cursors/POSBAR.PNG"), auto;
 }
 
 #winamp2-js #equalizer-balance::-moz-range-thumb {
   height: 7px;
   width: 2px;
-  cursor: url("../cursors/POSBAR.PNG"), auto;
 }
 
 #winamp2-js #equalizer-balance.center::-webkit-slider-thumb {
   width: 5px;
-  cursor: url("../cursors/POSBAR.PNG"), auto;
 }
 
 #winamp2-js #equalizer-balance.center::-moz-range-thumb {
   width: 5px;
-  cursor: url("../cursors/POSBAR.PNG"), auto;
 }
 
 #winamp2-js .equalizer-top {
@@ -84,7 +74,6 @@
   width: 9px;
   left: 264px;
   top: 3px;
-  cursor: url("../cursors/MAINMENU.PNG"), auto;
 }
 
 #winamp2-js #equalizer-shade {
@@ -93,7 +82,6 @@
   width: 9px;
   left: 254px;
   top: 3px;
-  cursor: url("../cursors/MAINMENU.PNG"), auto;
 }
 
 #winamp2-js #on {
@@ -232,7 +220,6 @@
   height: 51px;
   width: 14px;
   margin-top: 6px;
-  cursor: url("../cursors/POSBAR.PNG"), auto;
 }
 
 #winamp2-js .band .rc-slider .rc-slider-handle {
@@ -240,5 +227,4 @@
   height: 11px;
   margin: -6px 0 0 1px;
   position: absolute;
-  cursor: url("../cursors/POSBAR.PNG"), auto;
 }

css/main-window.css

@@ -3,7 +3,6 @@
   position: absolute;
   height: 116px;
   width: 275px;
-  cursor: url("../cursors/MAINMENU.PNG"), auto;
   /* Ask the browser to scale showing large pixels if possible */
   image-rendering: -moz-crisp-edges; /* Firefox */
   image-rendering: -o-crisp-edges; /* Opera */
@@ -76,7 +75,6 @@
   left: 0;
   height: 14px;
   width: 275px;
-  cursor: url("../cursors/TITLEBAR.PNG"), auto;
 }
 
 #winamp2-js #option-context,
@@ -87,7 +85,6 @@
   height: 9px;
   width: 9px;
   top: 3px;
-  cursor: url("../cursors/MAINMENU.PNG"), auto;
 }
 
 #winamp2-js #title-bar #option {
@@ -106,7 +103,6 @@
 }
 #winamp2-js #title-bar #close {
   left: 264px;
-  cursor: url("../cursors/CLOSE.PNG"), auto;
 }
 #winamp2-js #clutter-bar {
   position: absolute;
@@ -289,19 +285,16 @@
   height: 13px;
   width: 68px;
   background-position: 0 0;
-  cursor: url("../cursors/POSBAR.PNG"), auto;
 }
 #winamp2-js #volume::-webkit-slider-thumb {
   top: 1px;
   height: 11px;
   width: 14px;
-  cursor: url("../cursors/POSBAR.PNG"), auto;
 }
 #winamp2-js #volume::-moz-range-thumb {
   top: 1px;
   height: 11px;
   width: 14px;
-  cursor: url("../cursors/POSBAR.PNG"), auto;
 }
 
 #winamp2-js #balance {
@@ -311,20 +304,17 @@
   height: 13px;
   width: 38px;
   background-position: 0 0;
-  cursor: url("../cursors/POSBAR.PNG"), auto;
 }
 
 #winamp2-js #balance::-webkit-slider-thumb {
   top: 1px;
   height: 11px;
   width: 14px;
-  cursor: url("../cursors/POSBAR.PNG"), auto;
 }
 #winamp2-js #balance::-moz-range-thumb {
   top: 1px;
   height: 11px;
   width: 14px;
-  cursor: url("../cursors/POSBAR.PNG"), auto;
 }
 
 #winamp2-js .windows {
@@ -355,13 +345,11 @@
   top: 72px;
   width: 248px;
   height: 10px;
-  cursor: url("../cursors/POSBAR.PNG"), auto;
 }
 
 #winamp2-js #position::-webkit-slider-thumb {
   height: 10px;
   width: 29px;
-  cursor: url("../cursors/POSBAR.PNG"), auto;
   /*
      * Fix the strange bug in Safair/mobile-chrome
      * http://stackoverflow.com/questions/26727769/rendering-glitch-when-manipulating-range-input-value-via-javascript-in-webkit
@@ -373,7 +361,6 @@
 #winamp2-js #position::-moz-range-thumb {
   height: 10px;
   width: 29px;
-  cursor: url("../cursors/POSBAR.PNG"), auto;
 }
 
 /* For some reason, we can't use display: none here */
@@ -479,7 +466,6 @@
   display: none;
 }
 #winamp2-js .shade #title-bar {
-  cursor: url("../cursors/MAINMENU.PNG"), auto;
 }
 
 #winamp2-js .shade .actions div {

css/mini-time.css

@@ -1,5 +1,4 @@
 #winamp2-js .mini-time {
-  cursor: url("../cursors/MAINMENU.PNG"), auto;
   display: block;
   height: 6px;
   width: 25px;

css/winamp.css

@@ -76,7 +76,6 @@ canvas {
 
 #winamp2-js .window {
   position: absolute;
-  cursor: url("../cursors/MAINMENU.PNG"), auto;
   /* Ask the browser to scale showing large pixels if possible */
   image-rendering: -moz-crisp-edges; /* Firefox */
   image-rendering: -o-crisp-edges; /* Opera */

js/components/Skin.js

@@ -243,7 +243,18 @@ const imageSelectors = {
 };
 
 const cursorSelectors = {
-  PSIZE: ["#playlist-resize-target"]
+  PSIZE: ["#playlist-resize-target"],
+  CLOSE: ["#title-bar #close"],
+  MAINMENU: ["#main-window", "#main-window.shade #title-bar"],
+  TITLEBAR: ["#main-window #title-bar"],
+  POSBAR: ["#position"],
+  VOLBAL: ["#volume", "#balance"],
+  EQSLID: ["#equalizer-window .band"],
+  EQTITLE: [
+    "#equalizer-window .title-bar",
+    "#equalizer-window.shade",
+    "#equalizer-window.shade input"
+  ]
 };
 
 Object.keys(FONT_LOOKUP).forEach(character => {
@@ -270,11 +281,11 @@ const Skin = props => {
     }
   });
   Object.keys(cursorSelectors).map(cursorName => {
-    const imageUrl = props.skinCursors[cursorName];
-    if (imageUrl) {
+    const cursorUrl = props.skinCursors[cursorName];
+    if (cursorUrl) {
       cursorSelectors[cursorName].forEach(selector => {
         cssRules.push(
-          `#winamp2-js ${selector} {cursor: url(${imageUrl}), auto}`
+          `#winamp2-js ${selector} {cursor: url(${cursorUrl}), auto}`
         );
       });
     }

js/reducers.js

@@ -151,7 +151,6 @@ const display = (state = defaultDisplayState, action) => {
     case CLOSE_WINAMP:
       return { ...state, closed: true };
     case SET_SKIN_DATA:
-      console.log(action);
       return {
         ...state,
         loading: false,

js/skinParser.js

@@ -86,7 +86,7 @@ async function genSpriteUrisFromFilename(zip, fileName) {
 
 async function getCursorFromFilename(zip, fileName) {
   const base64 = await genFileFromZip(zip, fileName, "CUR", "base64");
-  return `data:image/x-win-bitmap;base64,${base64}`;
+  return base64 && `data:image/x-win-bitmap;base64,${base64}`;
 }
 
 const defaultVisColors = [