Jump to content

Sharing webclient customisation tips and tricks


rthomas
 Share

Recommended Posts

rthomas

Dear members of the forum,

 

First of all I would like to know how the MB team is thinking about sharing ideas, tips and tricks on the forum and is it encouraged by the team? Since there are users like me who don't have the time to join the development team or don't want the hazzle of setting up github or just want to work in their own pace and with their own server applications but do have knowlegde about html5 css3 and javascript I was thinking sharing ideas, tips and tricks about customisation of the webclient in this community forum could benefit us all. 

 

There are a lot of examples where you could change the code to your taste and benefit, for example: the loginpage has a white background. I don't like this so i have made a change to the html code to have a dark background. 

 

I know customising this way has the disadvantage that changes will be overwritten with a upgrade but if you keep track of the changes you make it can be easily implemented in a new upgrade.  Let me know what you think of it. 

 

 

  • Like 8
Link to comment
Share on other sites

wolfbuddy

If I felt that I could help out, I would. MB is a great project but I see lots of areas that need additional experienced input, as I would imagine that it is very time consuming (I'm assuming the team are kindly working on this in their spare time).

 

Unfortunately, my experience is unlikely to be suitable for a project of this size. I'm just a part-time, amateur coder doing simple projects for my own consumption. At best I could have a go at doing my own plugin..........

Link to comment
Share on other sites

Beardyname

If I felt that I could help out, I would. MB is a great project but I see lots of areas that need additional experienced input, as I would imagine that it is very time consuming (I'm assuming the team are kindly working on this in their spare time).

 

Unfortunately, my experience is unlikely to be suitable for a project of this size. I'm just a part-time, amateur coder doing simple projects for my own consumption. At best I could have a go at doing my own plugin..........

 

 

 

I think actually that you fit the profile just fine :) I see myself as an happy amateur coder and will probably start with a plugin or so before i try to do something else! we are in this for the long run so take your time is my advice.

  • Like 1
Link to comment
Share on other sites

wolfbuddy

Well, I don't know. There's lots of concepts in OO programming that I still don't fully understand.

 

I'll take a look at the MBT plugin instructions and see if any of it makes sense.

Link to comment
Share on other sites

FYI Channels would be implemented as server plug-ins.  I would hold off trying to create any MBT specific plug-ins right now.

Link to comment
Share on other sites

wolfbuddy

It was more of a reference to 'dipping my toe', so to speak, just to see if I could make sense of any of it and the MBT plugin guide was open in my browser.

 

But yes, I see that there are no channel plugins for the likes of BBC iPlayer, 4OD, Netflix etc. 

Link to comment
Share on other sites

Something I do after every update is replace the "missingtrailer.png" image in System\dashboard-ui\css\images\editor\ with a blank 1X80 png. I don't use trailers, nor do I want to, so I don't need to know in the metadata editor that I am missing a trailer for every single movie. Replacing that with a blank png allows the ones to stand out better that ARE missing things I care about, like a primary image or backdrop.

  • Like 1
Link to comment
Share on other sites

rthomas

Well here is the followup of post about sharing Tips and Tricks. I consider myself a webdesigner so my major interest goes to enhancing and customise the webclient for MB3. First I would like to share some general tips to consider when customising code. I don't have visual studio or program skills instead I use just a html css javascript editor.

 

  1. Setup a test server for mediabrowser3. I personally prefer to install another MB3 server on a different PC just for testing. I advise never to customise code on the production server. It is possible I think to install two MB3 servers on the same PC but besure to set a different port for each server.
  2. Once you installed the test server simply shutdown the server, go to the directory C:/users/yourname/AppData/Roaming/MediaBrowser-Server/config/ and open system.xml in a editor and change the EnableDashboardResponseCaching to false and save the file. Restart the server and begin to modify the dashboard-ui files and display the changes by simply refreshing the browser.
  3. Test the result of you changes in as much webbrowsers as possible.
  4. Keep the original file unchanged (append original or default to it) and just save the modified one with the actual filename. If something might go wrong you simply replace the saved original files back again.
  5. When opening html pages in a webbrowser use the developers helptools to examine the code. This can be a real timesaver.

OK these were some general tips. My first specific tip for the webclient I would like to share is as follows:

  1. changing from a white to black background for the login​ and the forgotpasswordpage.
    //login.html changed line 7 from
    <div id="loginPage" data-role="page" class="page standalonePage">
    
    //to
    <div id="loginPage" data-role="page" class="page standalonePage" data-theme="b">
    
    //and
    
    //forgotpassword.html line 7 from
    <div data-role="page" class="page standalonePage forgotPasswordPage">
    
    //to
    <div data-role="page" class="page standalonePage forgotPasswordPage" data-theme="b">
    . 
    

2. because you have now dark text over a dark background you have to change the text also from black to white.

//loginpage.js changed line 117 from
html += '<div class="card squareCard alternateHover bottomPaddedCard"><div class="cardBox visualCardBox">';
//to
html += '<div class="card squareCard alternateHover bottomPaddedCard"><div class="cardBox visualCardBox-b">';

I forgot to mention step 3: changing the MB3 logo from mblogotextblack to mblogotextwhite.png

//site.js changed line 652 from 
if (page.hasClass('standalonePage')) {

    headerHtml += '<img class="imgLogoIcon" src="css/images/mblogoicon.png" /><img class="imgLogoText" src="css/images/mblogotextblack.png" />';
            }
            headerHtml += '</a>';
            headerHtml += '</div>';
//to
if (page.hasClass('standalonePage')) {
				
                headerHtml += '<img class="imgLogoIcon" src="css/images/mblogoicon.png" /><img class="imgLogoText" src="css/images/mblogotextwhite.png" />';
	    }
            headerHtml += '</a>';
            headerHtml += '</div>'; 

That's it. Don't forget to save the files and if it is ok upload the modified files to the production server. Success.

    

Edited by rthomas
  • Like 5
Link to comment
Share on other sites

Great stuff. i have been thinking about ideas for a refresh of the web client and a dark login page is one i hadn't thought of

Link to comment
Share on other sites

mediacowboy

This is just a web idea, but what about making the web client themeable? Where we could have change the theme from a drop down menu in the server setting's. Say a user wants a light background and another user likes the dark background. By user I mean server admin's.

Edited by mediacowboy
Link to comment
Share on other sites

wolfbuddy

Themes for the web client is what I've been thinking about, but why limit the access to this option to admins? I don't see any reason why each user couldn't have their own theme, via an option in the user preferences .  

Link to comment
Share on other sites

Maleficarum

I wouldn't necessarily limit it to only admins but I would allow admins to control wether a user can change them or not, like they can with other user options

Link to comment
Share on other sites

Well here is the followup of post about sharing Tips and Tricks. I consider myself a webdesigner so my major interest goes to enhancing and customise the webclient for MB3. First I would like to share some general tips to consider when customising code. I don't have visual studio or program skills instead I use just a html css javascript editor.

 

  1. Setup a test server for mediabrowser3. I personally prefer to install another MB3 server on a different PC just for testing. I advise never to customise code on the production server. It is possible I think to install two MB3 servers on the same PC but besure to set a different port for each server.
  2. Once you installed the test server simply shutdown the server, go to the directory C:/users/yourname/AppData/Roaming/MediaBrowser-Server/config/ and open system.xml in a editor and change the EnableDashboardResponseCaching to false and save the file. Restart the server and begin to modify the dashboard-ui files and display the changes by simply refreshing the browser.
  3. Test the result of you changes in as much webbrowsers as possible.
  4. Keep the original file unchanged (append original or default to it) and just save the modified one with the actual filename. If something might go wrong you simply replace the saved original files back again.
  5. When opening html pages in a webbrowser use the developers helptools to examine the code. This can be a real timesaver.

OK these were some general tips. My first specific tip for the webclient I would like to share is as follows:

  1. changing from a white to black background for the login​ and the forgotpasswordpage.

    //login.html changed line 7 from
    <div id="loginPage" data-role="page" class="page standalonePage">
    
    //to
    <div id="loginPage" data-role="page" class="page standalonePage" data-theme="b">
    
    //and
    
    //forgotpassword.html line 7 from
    <div data-role="page" class="page standalonePage forgotPasswordPage">
    
    //to
    <div data-role="page" class="page standalonePage forgotPasswordPage" data-theme="b">
    . 
    

2. because you have now dark text over a dark background you have to change the text also from black to white.

//loginpage.js changed line 117 from
html += '<div class="card squareCard alternateHover bottomPaddedCard"><div class="cardBox visualCardBox">';
//to
html += '<div class="card squareCard alternateHover bottomPaddedCard"><div class="cardBox visualCardBox-b">';

I forgot to mention step 3: changing the MB3 logo from mblogotextblack to mblogotextwhite.png

//site.js changed line 652 from 
if (page.hasClass('standalonePage')) {

    headerHtml += '<img class="imgLogoIcon" src="css/images/mblogoicon.png" /><img class="imgLogoText" src="css/images/mblogotextblack.png" />';
            }
            headerHtml += '</a>';
            headerHtml += '</div>';
//to
if (page.hasClass('standalonePage')) {
				
                headerHtml += '<img class="imgLogoIcon" src="css/images/mblogoicon.png" /><img class="imgLogoText" src="css/images/mblogotextwhite.png" />';
	    }
            headerHtml += '</a>';
            headerHtml += '</div>'; 

That's it. Don't forget to save the files and if it is ok upload the modified files to the production server. Success.

 

Inspired by this, I've made some adjustments to the css so that the page content will adjust to the alternate data-theme. So now you should be able to get all of that just by changing data-theme at the top.

  • Like 2
Link to comment
Share on other sites

Tim Hobbs

This is just a web idea, but what about making the web client themeable? Where we could have change the theme from a drop down menu in the server setting's. Say a user wants a light background and another user likes the dark background. By user I mean server admin's.

 

This was something I kicked around a few months back. If you search a bit you may be able to find the post with the examples. A couple of us went back and forth on it but that was about as far as it got.

 

I had a bit of a framework fleshed out with zip packages containing css, js and images that would be used and had an idea of a way where multiple themes could be stored with a single active theme. I am sure there could even be the ability to set them up per user - you could have one for you and another for your kids, for example.

 

Personally I think allowing users to skin/theme and even maybe be able to implement some customized js would be the best direction for the web client, but it got a pretty lukewarm response. I don't have much free time to dedicate, let alone work on something that no one is going to use or that is not going to get into the code base, but I am sure that if there was enough support this could be something that happens.

Link to comment
Share on other sites

thefirstofthe300

I would love to see a skinnable web client. It would be even better if the skins could take advantage of the plugins repo so they can be one click installed in the server.

Link to comment
Share on other sites

Unreal.2K7

Hello everyone! First of all, thank you for the great work! This software is really an amazing tool for beautyfing our movie libraries! :)

I hope this is the correct place to post this. It's about customization of the web client, and i thought this could belong here. If i'm wrong, please excuse me. I shall create a dedicated thread then.

 

I love the web client. It's a really handy tool to centralize the experience for every user in the home. Having the ability to customize the web server files is another nice level of customization (even if at this moment we have to do the coding on our own, but i don't mind, more raw power to us!).

 

Talking about web client customization: i've been trying to modify the script files. My goal is to edit the links in the left menu to point to what i want. Specifically, i want to edit the links for the movies category to point to the whole movie list instead of the "latest" tab and i want to do the same for the tv show category instead of pointing to the reccommended tab.

 

My intention is to create my own version of the librarybrowser.js file, modifying the getHrefInternal function at the following lines:

return 'movieslatest.html?topParentId=' + item.Id;   ->   return 'movies.html?topParentId=' + item.Id;
return 'tvrecommended.html?topParentId=' + item.Id;   ->   return 'tvshows.html?topParentId=' + item.Id;

I'm using the server version 3.0.5490.2. I've changed the EnableDashboardResponseCaching setting in the system.xml file to False (as pointed out by rthomas earlier) and rebooted.

 

If i understand correctly this should propagate the customization to everything, which means both the left collapsible menu and the "my views" links.

 

--------------------

 

I am facing a problem though: after everything i did, the server is still serving me the old version of librarybrowser.js. I can see that if i inspect the js file that the server provides, those lines are still the unedited ones.

I tried refreshing the page, clearing the cache, i've tried with different browsers from different clients. The server provides the unedited version everywhere.

 

Am i doing something wrong? I did reboot the server (both the program and the computer itself). Any suggestion on what am i overlooking?

Thank you!

Edited by Unreal.2K7
Link to comment
Share on other sites

did you change that setting with the server shutdown? that should be all you have to do.

 

however in the latest dev build it's now exposed in the web interface. see advanced -> developer options

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...