WebMP Skin: Bootstrap v5.1 (9 aug. 2013) (2 Viewers)

[Dragy]

My second contribution to the WebMP skinning contest is this skin based on Bootstrap. It still looks pretty basic, but believe me when I say that it took more work then the BlueShift skin. It has some nice features, like different views for the lists, TVGuide and a cool CPU plot for the TVServer status page.
Also, it works perfectly on mobile devices. The new image lazy loading keeps your bandwith usage low, since it only downloads images when they are in your viewport. This also increases loading speed on desktop browsers.

Main new features compared to the standard skin:
- Choose between different list views (list, coverlist, covers, big covers)
- 2 TVGuide styles, standard and list
- Grouped recordings
- CPU/Memory usage plot on TV Status page
- Seeking in video player is possible in fullscreen
- New music player layout

Enjoy!

Installation:
Copy the Bootstrap folder to c:\Program Files (x86)\MPExtended\WebMediaPortal\www\Skins
When upgrading, copy (and thus overwrite) the contents of the Bootstrap folder in the zip (new version) to the Bootstrap folder in above path (old version). To have no rudimentary files left on your PC, it may be best to remove all the contents from the Bootstrap folder and replace it with the new files.

Todo:
- Views for Recordings list.

Changelog:
v1: Initial release
v2:
- Fixed big banner view for smaller screens (forced small banners)
- New Album Music player! (used JWPlayer 5 because of forcing duration, which makes seeking possible)
- Updated to Bootstrap base v2.3.1
v3:
- New backdrop for movie and tvshow detail view
- New sub-title for some views with extra info
- Add actors to tvshows
- Localize 'Episode' in breadcrumb
- Fixed a small responsive design bug at 779px
- Sorted recordings by date
- Added nummer of recordings per group to group title
- Fixed an issue when clicking on a recording, closing the group
- Extended album musicplayer with playing indicator
- Gave a nice color to the music player itself
- Added duration to track music player
- Added cover to track music player
- Aligned the duration in the list to be more in the middle
- Added refreshrate indicator in dropdown button
v4:
- Fixed rounded corners of fanart in webkit browsers
- Fixed width of coverlist item images in IE
- Fixed loading of non existent default fanart-image
- Fixed images only load when scrolling
- Added fade animation when cha nging view
- Added year to album list
- Added breadcrumbs to music
- Added artist in front of track title in playlist
- Added fast dynamic filter for movies and music
- More consistency between track and album musicplayer
- Placed breadcrumbs at left plane, making more place for the cover
v5:
- Only show 'players' dropdown list when more then one player
- Added current chosen genre (for movies and tvshows) to title of the page
- Statuspage CPU/Memory usage history persistent after refresh/leaving page
- Add new WebMP 0.5.4 feature: watched status for movies (not working right?)
- updated to Bootstrap base v2.3.2 (no time to test the new v3 RC yet)
v5.1:
- Reverted update from Bootstrap base v2.3.2 to v2.3.1 because it caused problems.
- Fixed aspect ratio of videos in Flash player (change stretching: 'exactfit' to stretching: 'uniform')

 

[The_Stig]

How about screenshots to see first if one personally likes it before installing? Thanks and good luck for the contest.

 

[Dragy]

I've added a video!

 

[Lyfesaver74]

awesome job =)

 

[kiwijunglist]

Looks great

 

[rspierenburg]

Love the video...just might not be a good idea to pick 'Life of Pi' before its been released on DVD / Bluray.

 

[mediacowboy]

Life of pi has been released in the US.

 

[mbuzina]

Great skin, a few things do not work 100% in IE10
1. The small view does not work for EPG (works in Chrome/Iron)
2. Covers (music,movies) are sometimes not loaded until scrolled a little (less of an issue in Chrome/Iron)
3. Does not remember view selection (does in Chrome/Iron)
4. Covers keep aspect ratio in IE10 do not in Chrome/Iron. I guess Chrome is the behaviour you want, I would suggest not stretching pics (my Artist pics are not CD cover sized)

Suggestion: Add a floating link list to the right with jumps to the starting letters of the alphabet (# A B C .... Z and have link targets in the list)

 

[Dragy]

New version up!
- Fixed big banner view for smaller screens (forced small banners)
- New Album Music player! (used JWPlayer 5 because of forcing duration)
(and tested a view more video players, still didn't find a better one, though Flowplayer Flash seems promising)

@mbuzina, sorry, still didn't have time for the IE10 issues

 

[ollienator]

(and tested a view more video players, still didn't find a better one, though Flowplayer Flash seems promising)

Have you had a look at projekktor? I was also just recently shopping around for a free jwplayer substitute that doesnt force any logos onto the video (among other issues).
After trying and ditching a couple of different alternatives, I am currently testing a setup with projekktor. So far it seems to work nicely on windows / ios, using the same player.cshtml for all platforms.