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

Dragy

Portal Pro
April 27, 2009
778
333
28
Netherlands Netherlands
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



Home.png Movies overview.png Movie Details.png Music Albumplayer.png Recordings overview.png TVServer Guide list.png TVServer Guide wide.png TVServer Status.png TVShow overview.png TVShow Seasons.png TVShow Episodes.png TVShow Details.png
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')
 

Attachments

Last edited:

The_Stig

Retired Team Member
  • Premium Supporter
  • April 5, 2005
    2,176
    428
    Country flag
    How about screenshots to see first if one personally likes it before installing? Thanks and good luck for the contest.
     

    rspierenburg

    Portal Pro
    June 18, 2010
    146
    30
    Canada Canada
    Country flag
    Love the video...just might not be a good idea to pick 'Life of Pi' before its been released on DVD / Bluray. ;)
     

    mbuzina

    Retired Team Member
  • Premium Supporter
  • April 11, 2005
    2,839
    726
    Germany
    Germany Germany
    Country flag
    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

    Portal Pro
    April 27, 2009
    778
    333
    28
    Netherlands Netherlands
    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 :(
     
    Last edited:

    ollienator

    MP Donator
  • Premium Supporter
  • October 13, 2007
    15
    2
    (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.
     
    Last edited:

    Users Who Are Viewing This Thread (Users: 0, Guests: 1)

    OP Similar threads Forum Replies Date
    ajs [Info] 0.7 Beta - MPExtended, WebMP, Bootstrap skin by ajs - Hard way MPExtended 600
    ajs [Proposal] WebMP source code MPExtended 12
    Rob Hexenmeister Skin functions: What is available? General Support 3
    Rob Hexenmeister Skinning Online Videos question OnlineVideos 2
    Rob Hexenmeister Quick question - skinning MyPics General Support 7
    S Touchscreen skin? MediaPortal 1 Talk 6
    azzuro [fixed] 5011: Version label in Splash screen - pos, size from skin MediaPortal 1 61
    catavolt [WiP] When changing theme in my skins, I always get this error message in logs MediaPortal 1 9
    joecrow MultiShortcut Plugin (Uavailable) in DWHD skin General Support 58
    V Skin With Menu Editor MediaPortal 1 Skins 13
    wizard123 New Skin Template ? MediaPortal 2 8
    Rob Hexenmeister [solved] Latest Media Handler - skinning buttons Fanart Handler 19
    CyberSimian [solved] MP1-4976 Built-in skin variables for current date MediaPortal 1 8
    Mr6686 [solved] Titan skin broken since update to 1.23 Installation, configuration support 6
    doskabouter Skin question Skins and Plugins Installer (MPEI) 1
    Y Titan Skin unter 1.23 nicht mehr so schön Allgemeines Supportforum 1
    framug 1.22.0 BasicHome Editor settings for DefaultWide HD skin not kept when update 1.22 3
    catavolt [solved] FanartHandler - Skin - Holiday and Spotlight support Fanart Handler 9
    ajs [fixed] 4936 - Strange behavior of the font in the skin MediaPortal 1 35
    ajs [solved] 4935: Add string.replace function to Skin engine MediaPortal 1 10
    ajs [solved] Latest Media Handler - Skin settings - Custom latests items number Fanart Handler 27
    Rob Hexenmeister [solved] Latests Media Handler - Skinning an updating window or control Fanart Handler 26
    T Skin Wechsel Installationsprobleme? 1
    JJDoherty Designing & implementing a new skin... Skins and Design 8
    D [fixed] Image browser crashing in Folder View (WMC skin) 2.2 Archive 10
    Similar threads

























    Top Bottom