Merge pull request #198 from jcass77/enhance/alternative_icons

Alternative more consistent icon set

README.rst

@@ -22,20 +22,33 @@ Mopidy-MusicBox-Webclient
     :target: http://standardjs.com/
     :alt: JavaScript Standard Style
 
-With Mopidy MusicBox Webclient (MMW), you can play your music on your computer (`Rapsberry Pi <http://www.raspberrypi.org/>`_)
-and remotely control it using your computer, tablet or phone.
+Mopidy MusicBox Webclient (MMW) is a frontend extension and JavaScript-based web client especially written for
+`Mopidy <http://www.mopidy.com/>`_.
 
-This is a responsive webclient especially written for `Mopidy <http://www.mopidy.com/>`_: a music server that can play
-music from many different sources including Spotify, Google Music, SoundCloud, etc. or from your hard drive. The
-webclient is responsive, so it works on desktop and mobile browsers. You can browse, search and play albums, artists,
-playlists, and it has cover art from Last.fm.
+Features
+========
 
+- Responsive design that works equally well on desktop and mobile browsers.
+- Browse content provided by any Mopidy backend extension.
+- Add one or more tracks or entire albums to the queue.
+- Save the current queue to an easily accessible playlist.
+- Search for tracks, albums, or artists from specific backends or all of Mopidy.
+- Shows detailed track and album information during playback, with album cover retrieval from Last.fm.
+- Seek tracks during playback.
+- Support for all of the Mopidy playback controls (consume mode, repeat, shuffle, etc.)
+- Deep integration with, and additional features for, the `Pi MusicBox <http://www.pimusicbox.com/>`_.
+- Fullscreen mode.
 
-If you want to run Mopidy with this webclient on a Raspberry Pi, do yourself a favor and use my custom built SD-image:
-`Pi MusicBox <http://www.pimusicbox.com/>`_.
+.. image:: https://github.com/pimusicbox/mopidy-musicbox-webclient/raw/develop/screenshots/queue_desktop.png
 
-.. image:: https://github.com/pimusicbox/mopidy-musicbox-webclient/raw/master/screenshots/playlists_desktop.png
+Dependencies
+============
 
+- MMW has been tested on the major browsers (Chrome, IE, Firefox, Safari, iOS). It *may* also work on other browsers
+  that support websockets, cookies, and JavaScript.
+
+- ``Mopidy`` >= 1.1.0. An extensible music server that plays music from local disk, Spotify, SoundCloud, Google
+  Play Music, and more.
 
 Installation
 ============
@@ -52,11 +65,38 @@ Alternatively, clone the repository and run ``sudo python setup.py install`` fro
     $ sudo python setup.py install
 
 
+Configuration
+=============
+
+MMW is shipped with default settings that should work straight out of the box for most users::
+
+    [musicbox_webclient]
+    enabled = true
+    musicbox = false
+    websocket_host =
+    websocket_port =
+    on_track_click = PLAY_ALL
+
+The following configuration values are available should you wish to customize your installation further:
+
+- ``musicbox_webclient/enabled``: If the MMW extension should be enabled or not. Defaults to ``true``.
+
+- ``musicbox_webclient/musicbox``: Set this to ``true`` if you are connecting to a Mopidy instance running on a
+  Pi Musicbox. Expands the MMW user interface to include features for rebooting the Pi, changing configuration values
+  via a web interface, etc.
+
+- ``musicbox_webclient/websocket_host``: Optional setting that can be used to specify the target host for Mopidy websocket connections.
+
+- ``musicbox_webclient/websocket_port``: Optional setting that can be used to specify the target port for Mopidy websocket connections.
+
+- ``musicbox_webclient/on_track_click``: Specifies the default action that should be performed when the user clicks on
+  a track that is displayed in the Browse pane or as part of Search results. Valid options are: ``PLAY_NOW``,
+  ``PLAY_NEXT``, ``ADD_THIS_BOTTOM``, ``ADD_ALL_BOTTOM``, ``PLAY_ALL`` (default), and ``DYNAMIC`` (repeats last action).
+
 Usage
 =====
 
-Point your (modern) browser at Mopidy-MusicBox-Webclient running on your Mopidy server e.g.
-http://localhost:6680/musicbox_webclient.
+Enter the address of the Mopidy server that you are connecting to in your browser (e.g. http://localhost:6680/musicbox_webclient)
 
 
 Project resources
@@ -87,6 +127,8 @@ v2.3.0 (UNRELEASED)
   (Addresses: `#184 <https://github.com/pimusicbox/mopidy-musicbox-webclient/issues/184>`_).
 - Optimized rendering of large lists of tracks to make UI more responsive.
 - Added 'Folder' FontAwesome icon on the Browse pane for browsing the filesystem.
+- New icons for 'PLAY' and 'PLAY_ALL' actions. In general, icons with an empty background will perform an action only
+  on the selected track, while icons with a filled background will apply the action to all tracks in the list.
 
 **Fixes**
 

mopidy_musicbox_webclient/static/css/webclient.css

@@ -300,6 +300,11 @@
     line-height: 100%;
 }
 
+.moreBtn i {
+    color: #ddd;
+    font-size: initial;
+}
+
 .backnav {
     background-color: #ccc !important;
 }
@@ -395,11 +400,11 @@
 }
 
 .ui-icon-playAll:after {
-    content: '\f050';
+    content: '\f144';
 }
 
 .ui-icon-play:after {
-    content: '\f04b';
+    content: '\f01d';
 }
 
 .ui-icon-playNext:after {

mopidy_musicbox_webclient/static/index.html

@@ -115,12 +115,12 @@
 <div data-role="popup" data-transition="none" data-theme="b" id="popupTracks">
     <div data-role="collapsible-set">
         <ul data-role="listview" data-icon="false" id="popupTracksLv">
-            <li data-icon="playAll" data-iconshadow="false">
-                <a href="#" onclick="return controls.playTracks(PLAY_ALL, mopidy);">Play All</a>
-            </li>
             <li data-icon="play">
                 <a href="#" onclick="return controls.playTracks(PLAY_NOW, mopidy);">Play <span class="popupTrackName"></span></a>
             </li>
+            <li data-icon="playAll" data-iconshadow="false">
+                <a href="#" onclick="return controls.playTracks(PLAY_ALL, mopidy);">Play All</a>
+            </li>
             <li data-icon="playNext" class="addqueue">
                 <a href="#" onclick="return controls.playTracks(PLAY_NEXT, mopidy);">Play Track Next</a>
             </li>

mopidy_musicbox_webclient/static/js/controls.js

@@ -117,9 +117,9 @@
 
             switch (parseInt(action)) {
                 case PLAY_ALL:
-                    return 'fa fa-fast-forward'
+                    return 'fa fa-play-circle'
                 case PLAY_NOW:
-                    return 'fa fa-play'
+                    return 'fa fa-play-circle-o'
                 case PLAY_NEXT:
                     return 'fa fa-level-down'
                 case ADD_THIS_BOTTOM:

mopidy_musicbox_webclient/static/js/functionsvars.js

@@ -216,7 +216,7 @@ function renderSongLi (previousTrack, track, nextTrack, uri, tlid, target, curre
     html +=
         '<li class="song albumli" id="' + getjQueryID(target, track.uri) + '" tlid="' + tlid + '">' +
         '<a href="#" class="moreBtn" onclick="return popupTracks(event, \'' + uri + '\',\'' + track.uri + tlidParameter + '\');">' +
-        '<i class="fa fa-ellipsis-v"></i></a>' +
+        '<i class="fa fa-play-circle-o"></i></a>' +
         '<a href="#" onclick="' + onClick + '"><h1><i class="' + getMediaClass(track.uri) + '"></i> ' + track.name + '</h1>'
 
     if (listLength === 1 || (!hasSameAlbum(previousTrack, track) && !hasSameAlbum(track, nextTrack))) {

mopidy_musicbox_webclient/static/mb.appcache

@@ -1,6 +1,6 @@
 CACHE MANIFEST
 
-# 2016-04-27:v1
+# 2016-05-05:v1
 
 NETWORK:
 *

tests/js/test_controls.js

@@ -217,8 +217,8 @@ describe('controls', function () {
 
     describe('#getIconForAction()', function () {
         it('should return correct FontAwesome class for each tracklist action', function () {
-            assert.equal(controls.getIconForAction(PLAY_ALL), 'fa fa-fast-forward')
-            assert.equal(controls.getIconForAction(PLAY_NOW), 'fa fa-play')
+            assert.equal(controls.getIconForAction(PLAY_ALL), 'fa fa-play-circle')
+            assert.equal(controls.getIconForAction(PLAY_NOW), 'fa fa-play-circle-o')
             assert.equal(controls.getIconForAction(PLAY_NEXT), 'fa fa-level-down')
             assert.equal(controls.getIconForAction(ADD_THIS_BOTTOM), 'fa fa-plus-square-o')
             assert.equal(controls.getIconForAction(ADD_ALL_BOTTOM), 'fa fa-plus-square')
@@ -229,11 +229,11 @@ describe('controls', function () {
         })
 
         it('should handle action identifier strings in addition to integers', function () {
-            assert.equal(controls.getIconForAction('0'), 'fa fa-play')
+            assert.equal(controls.getIconForAction('0'), 'fa fa-play-circle-o')
         })
 
         it('should use default tracklist action if no parameter is provided', function () {
-            assert.equal(controls.getIconForAction(), 'fa fa-fast-forward')
+            assert.equal(controls.getIconForAction(), 'fa fa-play-circle')
         })
     })