Subsonic Web UI Cleanup\Overhaul

Third-party modifications and add-ons, Apps and Clients

Moderator: moderators

Subsonic Web UI Cleanup\Overhaul

Postby califrag » Sat Oct 08, 2011 10:41 pm

After switching to the Outlook black theme, i noticed a few things I wanted to change... It kind of got out of control from there.
These screenshots are a little old and need to be updated:

Subsonic default: http://imgur.com/a/M4OgZ

Some screen shots of the other themes:

The screenshots were all taken in Chromium (Chrome) browser but the changes should be cross-compatible with IE and Firefox and everything should look the same between Chrome, Firefox and IE (8+).

I haven't tried Opera yet, but Firefox and IE 8+ render accurately. IE 7 does not render properly yet (working on it).

On a side note, I've optimized this for display at 1680x1050 resolution so it may not look right on lower resolutions.

UPDATED FIRST POST WITH LATEST INFO:

DISCLAIMER:
This is NOT considered a stable version. Only a minimal amount of testing has been completed to make sure there are no obvious or critical issues.
Do not use this if you do not have backup copies of your files including your music files as I take no responsibility for any errors or data corruption.
The underlying sub-system that maintains the file information has been left intact and unchanged and should not cause any issues with new or previous installations.
If you run into any issues or bugs, don't say I didn't warn you.
Please document any bugs thoroughly before submitting: helpful information includes screenshots, operating system, web browser, what were you doing at the time the error occurred, and whether the issue can be reproduced or not.


If you accept responsibility for testing it, you can download here:
Last Updated: Nov. 25, 08:15:08 PM PST
http://dl.dropbox.com/u/5434601/subsonic.war

Just keep in mind there ARE bugs, it MIGHT break something and you SHOULD update to newer (stabler) versions as I release them.

If you need any help, please post here and not in the 'Help' forum, as that is reserved for the Official Subsonic version. Thanks!

Installation instructions *Temporary until I start building the installer
  • Stop Subsonic
  • Delete the jetty/#### folder or (preferably) back it up to another location.
  • Delete the old subsonic.war file or (preferably) back it up to another location.
  • Copy the new subsonic.war file
  • Restart Subsonic

If you have any issues, you can downgrade back to the stable 4.5 version by following these steps:
  • Stop Subsonic
  • Delete the jetty/#### folder
  • Delete the new subsonic.war
  • Copy your backup subsonic.war (or download it from Subsonic Sourceforge)
  • Restart Subsonic.


Details for configuring webfonts

I've set my system webfont to 'PT Sans': try changing your webfont to 'Ubuntu' or 'Ubuntu:b', or to see a more dramatic change 'Gochi Hand' or 'Salsa'.
There are some other nice ones like 'Istok Web', 'Maven Pro', 'Lato', 'Open Sans'
Each user can customize their own font.
Anything that is on the list here, http://www.google.com/webfonts, will work.. be careful though, some fonts are really ugly!

You can use the options ":b" or ":300", ":400", ":700" or ":i" or ":italic" to request a specific style of font, if the style for that font exists.

If you enter something like 'Quicksand:i' which is not a valid font (no italic version of Quicksand), it won't hurt anything and will just use the regular OS fonts.

I need to figure out how to check if the webfont is available and if not then it rejects the input or finds the closest valid match.

Another example would be if you enter 'Open Sans Condensed" it returns:

Code: Select all
/* Open Sans Condensed (style: normal, weight: 400) is not available */
/* However, style: normal, weight: 300 is available */
/* However, style: italic, weight: 300 is available */
/* Not supported. */


Since the default request for the webfont is sent for :400 and only a :300 style exists, it bombs out.

It can be fixed if the user enters the correct style for the font (Open Sans Condensed:300), but they wouldn't know unless they actually check what styles of the font are available.

CHANGELOG RECENT:
  • Changed css loading methods and overhead/duplicate loading (ie, stop loading playermod/accordion css in main css and only load on playlist/left pages)
  • Menu area changed to buttonsets and buttons versus standard hyperlinks
  • Input forms restyled to completely use jQuery UI styling for ease of theming
  • Multiple legacy javascript code changes
  • Switch from Fancy zoom to Fancy box
  • Switch from webfx slider to jQuery UI slider
  • Remove playermod foreground files and switch player to use jQuery UI icons
  • Multiple css cleanup/condense and fixes.
  • Fixed new user 'comma' issue
  • Fixed manual search index update button
  • Some other stuff I probably forgot.

BACKLOG:
  • various bug fixes
  • player load stability fixed
  • Improved Drag and Drop playlist sorting.
  • Drag and Drop playlist sorting.
  • Fixed main frame menu not showing up on some pages (load playlist, video player)
  • Synchronized to latest build 2508/2510 changes
  • fixed podcast receiver persistent top link
  • jQuery animations and transitions added
  • fixes to lyrics engine, added musiXmatch api lyrics lookup. musiXmatch api key required (free for 'developers', just sign up).
  • Accordion interaction style from 'click' to 'hoverintent', to reduce the amount of clicking needed to navigate the folder list.
    main focus was cleanup of themes:
  • layout styling fixes and theme fixes
  • jQuery accordion styles separated from themes
  • playermod bg\fg separation and separation from themes
  • theme structure separated from theme style
  • base files follow same file naming conventions
  • theme properties modified so images named consistently
  • theme css files cleaned up based from subsonic theme so tags follow the same order.
  • updated jwplayer to the latest 5.8
  • updated prototype.js to 1.7
  • updated jquery to 1.6.4 and jquery-ui to 1.8.16
  • changed jquery, prototype and scriptaculous and swfobject to load from google ajax api to improve loading time.
  • changed subeq style for audio player
  • added ability to set webfonts for the entire system or each user can specify their own. More on this below.
  • cleaned up and integrated similar artists widget mod by mqchen
  • added ability for users to skin the jwplayer video window by theme for even better player customization.
  • added logging failed login attempts by IP
  • top.jsp: Removed javascript topimg onmouseover switching and uses :hover instead.
  • top.jsp: Added container layers to dynamically center top menu
  • left.jsp: Removed "dotbars" div elements which did not render properly.
  • left.jsp: "Music Count\Index", "Shortcuts", "Internet TV\Radio" changed to accordion style at the top of list.
  • left.jsp: Added container layers to dynamically center menu and accordion
  • left.jsp: "Folder List" and "Album List Size" dropdown styles modified.
  • left.jsp: Modified layers so left frame menu will float at top and accordion content will scroll by itself
  • home_searchbox.jsp: Removed album navigation controls when list type 'users' selected.
  • home_searchbox.jsp, main_searchbox.jsp, changeCoverArt.jsp: Adjusted pagination links div placement and alignment.
  • home.jsp, home_searchbox.jsp: Added javascript functions to preserve 'Home' album list size, type and offset settings.
  • home.jsp: Removed 'user' list type and moved "User Statistics" page to status.jsp
  • home.jsp: Modified layers so main frame menu will float at top and main content will scroll by itself.
  • home.jsp: Changed style for navigation links at top
  • home.jsp, main.jsp, settingsHeader.jsp: Added capitalize tags to set title case to categories, play options and settings links.
  • main_searchbox.jsp: Added marquee styling for long album or artist names
  • main_searchbox.jsp: navigation links dynamically constructed based on conditions
  • main_searchbox.jsp, home_searchbox.jsp: Container layers dynamically center
  • main.jsp: Changed playcount string "Played 1 times" to "Played Once".
  • main.jsp: 'Formatting Options' now hidden layer which can be shown by clicking 'Formatting Options' link
  • main.jsp: Search links are now icons and changed to "float:right".
  • main.jsp: Search urls use Google "site:site.com" and "I'm Feeling Lucky" (seems to provide more accurate results)
  • changeCoverArt.jsp: "Previous" and "Next" links always displayed (set to "#" when at the first or last page).
  • changeCoverArt.jsp: Miscellaneous margin and padding adjustments.
  • changeCoverArt.jsp: Added picture zoom function and added 'Set as Cover Image' link
  • changeCoverArt.jsp: Moved 'Specify from URL' input into a 'drop down' layer
  • podcastReceiver.jsp: "Show\Hide Episodes" and 'Dowload\Delete selected' buttons toggle accordingly.
  • changeCoverArt.jsp, podcastReceiver.jsp: added basic validation checks when adding podcast or image from URI
  • podcastReceiver.jsp, settingsHeader.jsp, status.jsp, help.jsp, db.jsp: Added searchbox headers and changed control placement and alignment.
  • status.jsp: moved logfile and user statistics to 'Status' page.
  • more.jsp: miscellaneous style changes.
  • more.jsp: upload file buttons moved into 'drop down' layer
  • right.jsp: added clock above calendar
  • right.jsp: cleaned up calendar coding so spacing is correct and hover effects don't make things move
  • right.jsp: 'Now Playing' info will display the 'current' (logged in) user at the top, then list 'other users' below
  • right.jsp: added function to scroll Now Playing info (title - artist) in Subsonic title bar.
  • shareSettings.jsp: Fixed to show all settings for admin users (preserves settingsHeader.jsp).
  • help.jsp: Changed to 'about.jsp' and centered tables information.
  • playlist.jsp: Adjusted playlist solidblockmenu controls to "float:right"
  • db.jsp: added dropdown select boxes to help build basic SQL queries
  • index.jsp: rearranged frame layout\design and sizing.
  • logfile.jsp: moved log file information to it's own page.
  • default.css: Cleaned up and modified for easier theme creation.
  • Other miscellaneous fixes and changes.

TODO:
    Updated screenshots for themes and 'theme previews' in settings
    Sort Albums by Year when viewing an Artist (viewtopic.php?f=3&t=8057)
    User 'Group' permissions for media folders (viewtopic.php?f=3&t=7984)
    Random playlist generator tweaks: ability to select multiple genres, ability to set max file size limit (IE 4GB, 8GB etc. for mp3 players)
    Improve Playlist sort functionality (viewtopic.php?f=3&t=2367&start=60)
    Improve search functionality (viewtopic.php?f=3&t=5004)
    Sort podcast episodes reverse chronological (viewtopic.php?f=3&t=7221)
    Improve Drag and Drop playlist functionality (drag from album-view to playlist window to add tracks)
    Maybe some other feature requests (viewtopic.php?f=3&t=8040, viewtopic.php?f=3&t=1830, )
    fix similar songs
    better lyrics engine (embedded or scrape via ajax)
    Language translations : would like to try to automate the conversion process, not sure how accurate this would be.
    separate musiXmatch, music brainz, etc services in backend.
    log file tooltips
    desktop notifications
    x-browser compatibility.
    Allow user\general ability to disable animations for increased performance.
    fancyzoom -> fancybox (jquery)
    dddropdownpanel -> jquery
    jscal -> jquery
    wz_tooltips -> jquery
    slider -> jquery
    niceforms -> ?
    change frames to objects
    setup demo site
    prototype/scriptaculous -> jQuery/UI, underscore
    etc.etc.etc.

BUGS:
    similar songs are turned off for now due to no backend support and a bug im figuring out. (it only queries artists at the current time)
    playlist.jsp: wierd player bug sometimes displays wrong player (ie, a web player is selected but it tries to load the playlist into an external player)
    woff font format being transferred as 'Other' due to jetty service not recognizing the font file type.
    log gets spammed when user keeps hitting refresh when url is 'login.view?error' (ie, after failed login attempt, user can keep pressing F5 to generate log events)
    webfont doesn't work if valid font name is given but font style doesn't exist.
    playlist dropdown panel does not 'remember' settings -> to be fixed with jquery cookies
    "continue playing random songs" checkbox appears off-screen niceforms issue. switch to ?? jquery?
    scroll bars disappear when window too small
    item spacing when window too small
    internet explorer 7 compatibility fixes (stuff is broken in ie7 but ie8 and ie9 are fine)
    still some 'workarounds' and 'hacks' to get things to work properly which need to be hard-fixed.
    themes don't look as nice in other languages due to longer naming conventions etc. Need to shorten things up like the Spanish translation "Configuración" extends into 'Estado'
    Drag and drop playlist a little fidgety, sometimes doesn't put it in correct order or moves other songs...
Last edited by califrag on Sun Nov 27, 2011 7:09 pm, edited 33 times in total.
califrag
 
Posts: 72
Joined: Mon Sep 26, 2011 3:43 am

Re: Subsonic Web UI Cleanup\Overhaul

Postby celox » Sun Oct 09, 2011 2:35 am

I think most certainly you should share you code with us!

Your changes (from the screenshots) looked fantastic. I worry that the next release of subsonic will damage all the work you've done but hopefully that can be avoided with diffs =)
celox
 
Posts: 3
Joined: Sun Oct 09, 2011 2:32 am

Re: Subsonic Web UI Cleanup\Overhaul

Postby Qbix » Mon Oct 10, 2011 7:59 am

Please share the code with us...great modifications you've made here :)
Cheers,
Image
------------------
14.985 artiesten
10.798 albums
90.526 nummers
822,06 GB (~ 12.770 uur)
------------------------------
Qbix
 
Posts: 97
Joined: Thu Jun 30, 2011 1:36 pm
Location: Netherlands

Re: Subsonic Web UI Cleanup\Overhaul

Postby mnksauce » Thu Oct 13, 2011 5:14 am

I would love to test run these themes as well!
mnksauce
 
Posts: 12
Joined: Tue Dec 08, 2009 7:55 am

Re: Subsonic Web UI Cleanup\Overhaul

Postby califrag » Mon Oct 17, 2011 5:26 pm

Ok well since there has been some interest I'll try to get the files packed up soon. There are still some issues that I would like to get working before posting it though...

uploads not working
scroll bars disappear when window too small
item spacing when window too small
internet explorer 7 compatibility fixes (stuff is broken in ie7, ie8 and ie9 are fine)
other x-browser compatibility testing
player bar cleanup after i broke a couple things
lots of 'workarounds' and 'hacks' to get things to work properly which need to be hard-fixed.

EDIT: I think I've figured out how to compile subsonic, so now I can properly fix a few things... I hope.

EDIT 2: Okay! I've actually got the 'Albums per Row' select box functioning now but there is still a couple issues I need to fix then I'll post the mods.

UPDATE:

I've changed the 'Albums per Page' and 'Albums per Row' to 'Rows' and 'Columns' so you can choose the exact layout you want to see.
The options can be saved in each user's Personal settings, so if you have several users with different resolution\monitors, they can set their own home layout.
The default layout is set to 2 rows by 5 columns (10 albums)
califrag
 
Posts: 72
Joined: Mon Sep 26, 2011 3:43 am

Re: Subsonic Web UI Cleanup\Overhaul

Postby mnksauce » Wed Oct 19, 2011 5:46 am

That's great news! I am totally looking forward to this.
mnksauce
 
Posts: 12
Joined: Tue Dec 08, 2009 7:55 am

Re: Subsonic Web UI Cleanup\Overhaul

Postby califrag » Wed Oct 19, 2011 10:26 pm

Here are some new screenshots showing the Personal Settings page where you can set your default Home List Type, Rows and Columns.

http://i.imgur.com/Y9Hdn.png
http://i.imgur.com/SHWlS.png
http://i.imgur.com/VJUIw.png
http://i.imgur.com/R0VIM.png
http://i.imgur.com/zzrBQ.png
http://i.imgur.com/sJU6h.png

Notice it moves the selected list type to the front of the row on the home screen :)

There are still a few problems I'm trying to figure out...
When the Now Playing info is empty and you click 'Playing' at the top it will take you back to the Home page.
If you are viewing the Home page and you change the list settings to something different than your default, when you click 'Playing' it reloads the home page with your default list settings.
Instead, it should load the Home page back to the last list type that you were viewing...
It's a minor usability bug...

A few other things, specifically the upload function that I still need to fix first too.
Also, I've only managed to update the English text... Not sure what to do for the other languages....

Sindre has offered to create a sourceforge branch for me and just got everything set up so I will be posting all the modifications there.

I've finished synchronizing all of my changes to the newer 2441 build source and I'm ready to get everything up on Sourceforge.

I've successfully built the new .war file and can post it now, but I am still figuring out how to build the windows\linux\mac installers.

I'm not sure what the best way for people to upgrade whether to just post the .war file or wait until I get the installers figured out.
Last edited by califrag on Tue Nov 01, 2011 8:03 pm, edited 2 times in total.
califrag
 
Posts: 72
Joined: Mon Sep 26, 2011 3:43 am

Re: Subsonic Web UI Cleanup\Overhaul

Postby Kilrathy » Fri Oct 21, 2011 7:11 am

Wow, this look really nice, can we already download it?

If the .war is compatible with the current release of SubSonic, just post the .war with some lines of "howto copy and install".

Would be also totaly great, to see this new styles in a future release of SubSonic. :)
Kilrathy
 
Posts: 3
Joined: Fri Oct 21, 2011 7:08 am

Re: Subsonic Web UI Cleanup\Overhaul

Postby Schokobecher » Tue Oct 25, 2011 4:48 pm

any update on this?
Schokobecher
 
Posts: 16
Joined: Tue Oct 25, 2011 4:45 pm
Location: Germany

Re: Subsonic Web UI Cleanup\Overhaul

Postby califrag » Wed Oct 26, 2011 3:41 am

Sorry it's taken so long.

I will post a better update soon, but just quickly to let you know where I'm at:

The backend modifications have all been made, now I just need to finish debugging the frontend stuff.

Particularly I am trying to resolv some conflicts between prototype and jquery not playing nicely together.
califrag
 
Posts: 72
Joined: Mon Sep 26, 2011 3:43 am

Re: Subsonic Web UI Cleanup\Overhaul

Postby Schokobecher » Wed Oct 26, 2011 12:27 pm

Could you release a changed .war, so people can check it out already?
Can't wait :/
Schokobecher
 
Posts: 16
Joined: Tue Oct 25, 2011 4:45 pm
Location: Germany

Re: Subsonic Web UI Cleanup\Overhaul

Postby califrag » Thu Oct 27, 2011 1:36 am

THIS IS GONNA BE A LONG POST, SORRY!!!

Kilrathy wrote:Wow, this look really nice, can we already download it?

If the .war is compatible with the current release of SubSonic, just post the .war with some lines of "howto copy and install".

Would be also totaly great, to see this new styles in a future release of SubSonic. :)


the .war should be compatible with current 4.5 release, but is built from pre4.6 source.

This is how my setup is:
I installed the latest 4.5 stable (build 2384) standalone version on my FreeNAS device.
After compiling the source, I stop subsonic server, delete the the old subsonic.war file and copy the new one to FreeNAS.
You will probably want to back up the old subsonic.war file just in case anything goes wrong.
I also delete the jetty/2384 folder. the '2384' will vary depending on what build you are currently using. If you are using an older version of Subsonic this number will be different.
You may want to BACK THIS FOLDER UP instead of deleting it.... Just in case!
If anything does go wrong, this folder should get recreated from the OLD subsonic.war that you remembered to back up. just in case it doesn't, it's nice to have a backup of it.

BACK UP ALL THE THINGS.

After backing up the old files and copying over the new subsonic.war, I clear the cache on my browser, and restart Subsonic.
It will create a new jetty/2448 folder (which is the last build I committed) with the new version of Subsonic files.
I've synced my initial modifications to the branch Sindre created for me, and have been working on bug fixing and updating and will commit a stable version once I receive some feedback.
Last edited by califrag on Tue Nov 01, 2011 8:07 pm, edited 5 times in total.
califrag
 
Posts: 72
Joined: Mon Sep 26, 2011 3:43 am

Re: Subsonic Web UI Cleanup\Overhaul

Postby Schokobecher » Thu Oct 27, 2011 10:36 pm

Thank you very much for the release, installed it and testing atm.
Gonna let you know If I find stuff ysou don't know of yet :D

Also:
since you are making a branch of Subsonic, please take a look at my Bounty-Request
viewtopic.php?f=3&t=8149
Schokobecher
 
Posts: 16
Joined: Tue Oct 25, 2011 4:45 pm
Location: Germany

Re: Subsonic Web UI Cleanup\Overhaul

Postby califrag » Fri Oct 28, 2011 9:37 am

Schokobecher wrote:Thank you very much for the release, installed it and testing atm.
Gonna let you know If I find stuff ysou don't know of yet :D

Also:
since you are making a branch of Subsonic, please take a look at my Bounty-Request
viewtopic.php?f=3&t=8149



Thank you for testing.

I have a working Lyrics search engine now..

It is using musiXmatch api which is what iTunes and Spotify use.

A few problems though......

Because of copyright issues and other things they only give you 30% of the lyrics and they put the following at the end:

"******* This Lyrics is NOT for Commercial use *******"

So I'm not sure if this implementation is going to conflict with anybody's use of Subsonic at their work or anything.

Also in order to use it you have to sign up for your own musiXmatch API key... so that sucks too...

You can read more about some of the limitations here:

https://developer.musixmatch.com/faq

particularly:

Why I only have access to 30% of the lyrics and not full text?
We currently offer only 30% of lyrics for Not Commercial Use (personal use and beta testing). In order to get the full view you need to buy a Licensing Data Package


And

How much does it cost to get full access to Lyrics?
We offer annual data licensing packages that are customized to meet your needs with fees ranging from $25,000 to higher depending on the audience for the data and which data are being licensed. We are not able to offer any sort of data license for less than $20,000. Usually in case of a web site we do offer a fixed CPM offering so you're charged every 1,000 lyrics displayed. In any case we would ask a minimum year fee of 20,000$


Soooooo haha... yeah.... $25,000... 1,000 times the bounty lol :P

I've also considered using http://www.songrabbit.com but I'm not sure what their terms of use are so I might email them.

The other option is to use Lyrics Wikia and query the api, then forward the user to the full lyrics url... the only downside is the massive amounts of spam ads on lyrics wikia.

So still not sure where to go with this but will have something better soon....
califrag
 
Posts: 72
Joined: Mon Sep 26, 2011 3:43 am

Re: Subsonic Web UI Cleanup\Overhaul

Postby Schokobecher » Fri Oct 28, 2011 12:30 pm

What about http://www.programmableweb.com/api/lyricsfly or http://instalyrics.com/ ?
over 600k songs so far @ lyricsfly.
Maybe a option to add own lyrics using the Subsonic interface will do for now?
Schokobecher
 
Posts: 16
Joined: Tue Oct 25, 2011 4:45 pm
Location: Germany

Next

Return to Mods, Apps and Clients

Who is online

Users browsing this forum: No registered users and 20 guests