webamp/js/components/Skin.js

// Dynamically set the css background images for all the sprites
import React from 'react';
import {connect} from 'react-redux';

import {FONT_LOOKUP, imageConstFromChar} from '../skinSprites';

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: ['.play #work-indicator'],
  MAIN_WORKING_INDICATOR: ['.play #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-left'],
  PLAYLIST_RIGHT_TILE: ['.playlist-right'],
  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'],
  EQ_WINDOW_BACKGROUND: ['#equalizer-window'],
  EQ_TITLE_BAR: ['.equalizer-top'],
  EQ_TITLE_BAR_SELECTED: ['.selected .equalizer-top'],
  EQ_SLIDER_BACKGROUND: ['.band'],
  EQ_SLIDER_THUMB: ['.band input::-webkit-slider-thumb', 'band input::-moz-range-thumb'],
  EQ_SLIDER_THUMB_SELECTED: ['band input::-webkit-slider-thumb:active', '.band input::-moz-range-thumb: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'],
  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 #title-bar.selected'],
  MAIN_OPTIONS_BUTTON: ['#title-bar #option'],
  MAIN_OPTIONS_BUTTON_DEPRESSED: ['#title-bar #option:active', '#title-bar #option:selected'],
  MAIN_MINIMIZE_BUTTON: ['#title-bar #minimize'],
  MAIN_MINIMIZE_BUTTON_DEPRESSED: ['#title-bar #minimize:active'],
  MAIN_SHADE_BUTTON: ['#title-bar #shade'],
  MAIN_SHADE_BUTTON_DEPRESSED: ['#title-bar #shade:active'],
  MAIN_CLOSE_BUTTON: ['#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 #title-bar.selected'],
  MAIN_SHADE_BUTTON_SELECTED: ['.shade #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']
};

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;

const Skin = (props) => {
  if (!props.skinImages) {
    return null;
  }
  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})}`);
      });
    }
  });
  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; }');
  }
  return <style type='text/css'>{cssRules.join('\n')}</style>;
};

export default connect((state) => ({skinImages: state.display.skinImages}))(Skin);