diff --git a/js/components/Skin.js b/js/components/Skin.js index dda03eea..ad215edd 100644 --- a/js/components/Skin.js +++ b/js/components/Skin.js @@ -3,269 +3,22 @@ import React from "react"; import { createPortal } from "react-dom"; import { connect } from "react-redux"; -import { FONT_LOOKUP, imageConstFromChar } from "../skinSprites"; +import { imageSelectors, cursorSelectors } from "../skinSelectors"; -const imageSelectors = { - MAIN_BALANCE_BACKGROUND: ["#balance"], - MAIN_BALANCE_THUMB: [ - "#balance::-webkit-slider-thumb", - "#balance::-moz-range-thumb" - ], - MAIN_BALANCE_THUMB_ACTIVE: [ - "#balance::-webkit-slider-thumb:active", - "#balance::-moz-range-thumb:active" - ], - MAIN_PREVIOUS_BUTTON: [".actions #previous"], - MAIN_PREVIOUS_BUTTON_ACTIVE: [".actions #previous:active"], - MAIN_PLAY_BUTTON: [".actions #play"], - MAIN_PLAY_BUTTON_ACTIVE: [".actions #play:active"], - MAIN_PAUSE_BUTTON: [".actions #pause"], - MAIN_PAUSE_BUTTON_ACTIVE: [".actions #pause:active"], - MAIN_STOP_BUTTON: [".actions #stop"], - MAIN_STOP_BUTTON_ACTIVE: [".actions #stop:active"], - MAIN_NEXT_BUTTON: [".actions #next"], - MAIN_NEXT_BUTTON_ACTIVE: [".actions #next:active"], - MAIN_EJECT_BUTTON: ["#eject"], - MAIN_EJECT_BUTTON_ACTIVE: ["#eject:active"], - MAIN_WINDOW_BACKGROUND: ["#main-window"], - MAIN_STEREO: [".media-info #stereo", ".stop .media-info #stereo.selected"], - MAIN_STEREO_SELECTED: [".media-info #stereo.selected"], - MAIN_MONO: [".media-info #mono", ".stop .media-info #mono.selected"], - MAIN_MONO_SELECTED: [".media-info #mono.selected"], - NO_MINUS_SIGN: ["#time #minus-sign"], - MINUS_SIGN: ["#time.countdown #minus-sign"], - DIGIT_0: [".digit-0"], - DIGIT_1: [".digit-1"], - DIGIT_2: [".digit-2"], - DIGIT_3: [".digit-3"], - DIGIT_4: [".digit-4"], - DIGIT_5: [".digit-5"], - DIGIT_6: [".digit-6"], - DIGIT_7: [".digit-7"], - DIGIT_8: [".digit-8"], - DIGIT_9: [".digit-9"], - NO_MINUS_SIGN_EX: ["#time #minus-sign"], - MINUS_SIGN_EX: ["#time.countdown #minus-sign"], - DIGIT_0_EX: [".digit-0"], - DIGIT_1_EX: [".digit-1"], - DIGIT_2_EX: [".digit-2"], - DIGIT_3_EX: [".digit-3"], - DIGIT_4_EX: [".digit-4"], - DIGIT_5_EX: [".digit-5"], - DIGIT_6_EX: [".digit-6"], - DIGIT_7_EX: [".digit-7"], - DIGIT_8_EX: [".digit-8"], - DIGIT_9_EX: [".digit-9"], - MAIN_PLAYING_INDICATOR: [".play #play-pause"], - MAIN_PAUSED_INDICATOR: [".pause #play-pause"], - MAIN_STOPPED_INDICATOR: [".stop #play-pause"], - MAIN_NOT_WORKING_INDICATOR: ["#work-indicator"], - MAIN_WORKING_INDICATOR: ["#work-indicator.selected"], - PLAYLIST_TOP_TILE: [".playlist-top"], - PLAYLIST_TOP_LEFT_CORNER: [".playlist-top-left"], - PLAYLIST_TITLE_BAR: [".playlist-top-title"], - PLAYLIST_TOP_RIGHT_CORNER: [".playlist-top-right"], - PLAYLIST_TOP_TILE_SELECTED: [".selected .playlist-top"], - PLAYLIST_TOP_LEFT_SELECTED: [".selected .playlist-top-left"], - PLAYLIST_TITLE_BAR_SELECTED: [".selected .playlist-top-title"], - PLAYLIST_TOP_RIGHT_CORNER_SELECTED: [".selected .playlist-top-right"], - PLAYLIST_LEFT_TILE: [".playlist-middle-left"], - PLAYLIST_RIGHT_TILE: [".playlist-middle-right"], - PLAYLIST_SCROLL_HANDLE: [".playlist-scrollbar-handle"], - PLAYLIST_SCROLL_HANDLE_SELECTED: [".playlist-scrollbar-handle:active"], - PLAYLIST_BOTTOM_TILE: [".playlist-bottom"], - PLAYLIST_BOTTOM_LEFT_CORNER: [".playlist-bottom-left"], - PLAYLIST_BOTTOM_RIGHT_CORNER: [".playlist-bottom-right"], - PLAYLIST_VISUALIZER_BACKGROUND: [".playlist-visualizer"], - PLAYLIST_SHADE_BACKGROUND: ["#playlist.shade"], - - PLAYLIST_REMOVE_MENU_BAR: ["#playlist-remove-menu.selected .bar"], - PLAYLIST_REMOVE_ALL: ["#playlist-remove-menu .remove-all"], - PLAYLIST_REMOVE_ALL_SELECTED: ["#playlist-remove-menu .hover .remove-all"], - PLAYLIST_CROP: ["#playlist-remove-menu .crop"], - PLAYLIST_CROP_SELECTED: ["#playlist-remove-menu .hover .crop"], - PLAYLIST_REMOVE_SELECTED: ["#playlist-remove-menu .remove-selected"], - PLAYLIST_REMOVE_SELECTED_SELECTED: [ - "#playlist-remove-menu .hover .remove-selected" - ], - PLAYLIST_REMOVE_MISC: ["#playlist-remove-menu .remove-misc"], - PLAYLIST_REMOVE_MISC_SELECTED: ["#playlist-remove-menu .hover .remove-misc"], - - PLAYLIST_SELECT_MENU_BAR: ["#playlist-selection-menu.selected .bar"], - PLAYLIST_INVERT_SELECTION: ["#playlist-selection-menu .invert-selection"], - PLAYLIST_INVERT_SELECTION_SELECTED: [ - "#playlist-selection-menu .hover .invert-selection" - ], - PLAYLIST_SELECT_ZERO: ["#playlist-selection-menu .select-zero"], - PLAYLIST_SELECT_ZERO_SELECTED: [ - "#playlist-selection-menu .hover .select-zero" - ], - PLAYLIST_SELECT_ALL: ["#playlist-selection-menu .select-all"], - PLAYLIST_SELECT_ALL_SELECTED: ["#playlist-selection-menu .hover .select-all"], - - EQ_WINDOW_BACKGROUND: ["#equalizer-window:not(.shade)"], - EQ_TITLE_BAR: [".equalizer-top"], - EQ_TITLE_BAR_SELECTED: [".selected .equalizer-top"], - EQ_SLIDER_BACKGROUND: [".band"], - EQ_SLIDER_THUMB: [".band .rc-slider-handle"], - EQ_SLIDER_THUMB_SELECTED: [".band .rc-slider-handle:active"], - EQ_ON_BUTTON: ["#on"], - EQ_ON_BUTTON_DEPRESSED: ["#on:active"], - EQ_ON_BUTTON_SELECTED: ["#on.selected"], - EQ_ON_BUTTON_SELECTED_DEPRESSED: ["#on.selected:active"], - EQ_AUTO_BUTTON: ["#auto"], - EQ_AUTO_BUTTON_DEPRESSED: ["#auto:active"], - EQ_AUTO_BUTTON_SELECTED: ["#auto.selected"], - EQ_AUTO_BUTTON_SELECTED_DEPRESSED: ["#auto.selected:active"], - EQ_GRAPH_BACKGROUND: ["#eqGraph"], - EQ_PRESETS_BUTTON: ["#presets"], - EQ_PRESETS_BUTTON_SELECTED: ["#presets:active"], - EQ_PREAMP_LINE: ["#preamp-line"], - EQ_SHADE_BACKGROUND: ["#equalizer-window.shade"], - EQ_SHADE_BACKGROUND_SELECTED: ["#equalizer-window.shade.selected"], - EQ_SHADE_VOLUME_SLIDER_LEFT: [ - "#equalizer-volume.left::-webkit-slider-thumb", - "#equalizer-volume.left::-moz-range-thumb" - ], - EQ_SHADE_VOLUME_SLIDER_CENTER: [ - "#equalizer-volume.center::-webkit-slider-thumb", - "#equalizer-volume.center::-moz-range-thumb" - ], - EQ_SHADE_VOLUME_SLIDER_RIGHT: [ - "#equalizer-volume.right::-webkit-slider-thumb", - "#equalizer-volume.right::-moz-range-thumb" - ], - EQ_SHADE_BALANCE_SLIDER_LEFT: [ - "#equalizer-balance.left::-webkit-slider-thumb", - "#equalizer-balance.left::-moz-range-thumb" - ], - EQ_SHADE_BALANCE_SLIDER_CENTER: [ - "#equalizer-balance.center::-webkit-slider-thumb", - "#equalizer-balance.center::-moz-range-thumb" - ], - EQ_SHADE_BALANCE_SLIDER_RIGHT: [ - "#equalizer-balance.right::-webkit-slider-thumb", - "#equalizer-balance.right::-moz-range-thumb" - ], - EQ_MAXIMIZE_BUTTON_ACTIVE: ["#equalizer-shade:active"], - 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"], - MAIN_POSITION_SLIDER_BACKGROUND: ["#position"], - MAIN_POSITION_SLIDER_THUMB: [ - "#position::-webkit-slider-thumb", - "#position::-moz-range-thumb" - ], - MAIN_POSITION_SLIDER_THUMB_SELECTED: [ - "#position:active::-webkit-slider-thumb", - "#position:active::-moz-range-thumb" - ], - MAIN_SHUFFLE_BUTTON: ["#shuffle"], - MAIN_SHUFFLE_BUTTON_DEPRESSED: ["#shuffle:active"], - MAIN_SHUFFLE_BUTTON_SELECTED: ["#shuffle.selected"], - MAIN_SHUFFLE_BUTTON_SELECTED_DEPRESSED: ["#shuffle.selected:active"], - MAIN_REPEAT_BUTTON: ["#repeat"], - MAIN_REPEAT_BUTTON_DEPRESSED: ["#repeat:active"], - MAIN_REPEAT_BUTTON_SELECTED: ["#repeat.selected"], - MAIN_REPEAT_BUTTON_SELECTED_DEPRESSED: ["#repeat.selected:active"], - MAIN_EQ_BUTTON: ["#equalizer-button"], - MAIN_EQ_BUTTON_SELECTED: ["#equalizer-button.selected"], - MAIN_EQ_BUTTON_DEPRESSED: ["#equalizer-button:active"], - MAIN_EQ_BUTTON_DEPRESSED_SELECTED: ["#equalizer-button.selected:active"], - MAIN_PLAYLIST_BUTTON: ["#playlist-button"], - MAIN_PLAYLIST_BUTTON_SELECTED: ["#playlist-button.selected"], - MAIN_PLAYLIST_BUTTON_DEPRESSED: ["#playlist-button:active"], - MAIN_PLAYLIST_BUTTON_DEPRESSED_SELECTED: ["#playlist-button.selected:active"], - MAIN_TITLE_BAR: ["#title-bar"], - MAIN_TITLE_BAR_SELECTED: [".selected #title-bar"], - MAIN_EASTER_EGG_TITLE_BAR: [".llama #title-bar"], - MAIN_EASTER_EGG_TITLE_BAR_SELECTED: [".llama.selected #title-bar"], - MAIN_OPTIONS_BUTTON: ["#title-bar #option"], - MAIN_OPTIONS_BUTTON_DEPRESSED: [ - "#title-bar #option:active", - "#title-bar #option:selected" - ], - MAIN_MINIMIZE_BUTTON: [".selected #title-bar #minimize"], - MAIN_MINIMIZE_BUTTON_DEPRESSED: ["#title-bar #minimize:active"], - MAIN_SHADE_BUTTON: [".selected #title-bar #shade"], - MAIN_SHADE_BUTTON_DEPRESSED: ["#title-bar #shade:active"], - MAIN_CLOSE_BUTTON: [".selected #title-bar #close"], - MAIN_CLOSE_BUTTON_DEPRESSED: ["#title-bar #close:active"], - MAIN_CLUTTER_BAR_BACKGROUND: ["#clutter-bar"], - MAIN_CLUTTER_BAR_BACKGROUND_DISABLED: ["#clutter-bar.disabled"], - MAIN_CLUTTER_BAR_BUTTON_O_SELECTED: [ - "#button-o:active", - "#button-0:selected" - ], - MAIN_CLUTTER_BAR_BUTTON_A_SELECTED: [ - "#button-a:active", - "#button-a.selected" - ], - MAIN_CLUTTER_BAR_BUTTON_I_SELECTED: [ - "#button-i:active", - "#button-i.selected" - ], - MAIN_CLUTTER_BAR_BUTTON_D_SELECTED: [ - "#button-d:active", - "#button-d.selected" - ], - MAIN_CLUTTER_BAR_BUTTON_V_SELECTED: [ - "#button-v:active", - "#button-v.selected" - ], - MAIN_SHADE_BACKGROUND: [".shade #title-bar"], - MAIN_SHADE_BACKGROUND_SELECTED: [".shade.selected #title-bar"], - MAIN_SHADE_BUTTON_SELECTED: [".shade.selected #title-bar #shade"], - MAIN_SHADE_BUTTON_SELECTED_DEPRESSED: [".shade #title-bar #shade:active"], - MAIN_SHADE_POSITION_BACKGROUND: [".shade #position"], - MAIN_SHADE_POSITION_THUMB: [ - ".shade #position::-moz-range-thumb", - ".shade #position::-webkit-slider-thumb" - ], - MAIN_SHADE_POSITION_THUMB_LEFT: [ - ".shade #position.left::-moz-range-thumb", - ".shade #position.left::-webkit-slider-thumb" - ], - MAIN_SHADE_POSITION_THUMB_RIGHT: [ - ".shade #position.right::-moz-range-thumb", - ".shade #position.right::-webkit-slider-thumb" - ], - MAIN_VOLUME_BACKGROUND: ["#volume"], - MAIN_VOLUME_THUMB: [ - "#volume::-webkit-slider-thumb", - "#volume::-moz-range-thumb" - ], - MAIN_VOLUME_THUMB_SELECTED: [ - "#volume::-webkit-slider-thumb:active", - "#volume::-moz-range-thumb:active" - ] +const mapRegionNamesToIds = { + normal: "mainWindowClipPath", + windowshade: "shadeMainWindowClipPath", + equalizer: "equalizerWindowClipPath", + equalizerws: "shadeEqualizerWindowClipPath" }; -const cursorSelectors = { - 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" - ], - PNORMAL: ["#playlist-window"], - PVSCROLL: ["#playlist-window .playlist-scrollbar-wrapper"] +const mapRegionNamesToMatcher = { + normal: "#main-window", + windowshade: "#main-window.shade", + equalizer: "#equalizer-window", + equalizerws: "#equalizer-window.shade" }; -Object.keys(FONT_LOOKUP).forEach(character => { - const key = imageConstFromChar(character); - const code = character.charCodeAt(0); - imageSelectors[key] = [`.character-${code}`]; -}); - const numExIsUsed = skinImages => !!skinImages.DIGIT_0_EX; class Css extends React.Component { @@ -299,7 +52,8 @@ class ClipPaths extends React.Component { } render() { - // this.props.children should be an object containing arrays of strings. The keys are ids, and the arrays are arrays of polygon point strings + // this.props.children should be an object containing arrays of strings. The + // keys are ids, and the arrays are arrays of polygon point strings const { children } = this.props; return createPortal( @@ -354,28 +108,15 @@ const Skin = props => { ); } - cssRules.push( - "#winamp2-js #main-window { clip-path: url(#mainWindowClipPath); }", - "#winamp2-js #main-window.shade { clip-path: url(#shadeMainWindowClipPath); }", - "#winamp2-js #equalizer-window { clip-path: url(#equalizerWindowClipPath); }", - "#winamp2-js #equalizer-window.shade { clip-path: url(#shadeEqualizerWindowClipPath); }" - ); - - const mapRegionNamesToIds = { - normal: "mainWindowClipPath", - windowshade: "shadeMainWindowClipPath", - equalizer: "equalizerWindowClipPath", - equalizerws: "shadeEqualizerWindowClipPath" - }; - const clipPaths = {}; - Object.keys(mapRegionNamesToIds).forEach(key => { - const polygons = props.skinRegion[key]; + for (const [regionName, polygons] of Object.entries(props.skinRegion)) { if (polygons) { - const id = mapRegionNamesToIds[key]; + const matcher = mapRegionNamesToMatcher[regionName]; + const id = mapRegionNamesToIds[regionName]; clipPaths[id] = polygons; + cssRules.push(`#winamp2-js ${matcher} { clip-path: url(#${id}); }`); } - }); + } return (