Forking and editting the default skin

[mentasm 43]

Hi,

 

Has anyone else had a go at playing with the default skin?

 

I wanted to adjust the layout of the TV and Movies pages of ET so I had a crack at my own fork yesterday.

 

The goal I had was to move the Latest episodes, section of the TV page to the left most of the screen, followed by nextup then continue watching and finally to have the suggested show, faves, and all series section all the way to the right.

 

On the movies page I wanted the latest movies block on the left.  I also wanted to cut down that block from 12 titles to 8

 

After forking and renaming my fork as per the instructions I had a dig through the files and made the changes that I thought might be required which in this case was simply some reordering of code blocks in some of the html file.  I also had to edit the associated .js files in the few places I wanted to change the item numbers for a section.

 

After the edits it took me a little while and some gentle guidance from Luke to work out how to get my new plugin installed on ET and web ET.  I also took a little bit to work out that a skin, once installed, also needs to be selected in the general settings section.

 

So I now basically have what I want, which is a re-ordered and slightly tweaked default skin.

 

The only issue I have which I can't work out is with the TV page, the large tile that has suggested TV shows seems to still grab focus, so when you come back to TV from say movies, the screen gets scrolled to the right (or part way some times).  This page seems to behave differently to all the other ones.  If you navigate to Movies or Live TV, ET does not seem to try and focus on any screen item. It will just wait for you to navigate down and startr moving through tiles.

 

I'm not sure if anyone here understands how the ET focus stuff works?  I have had a look through the views.tv.js file which is where I think I might need to make a change, but haven't been able to work out what needs changing.  Im definitely not a java script/html coder.

 

I'll try and post a screenshot or 2 of my results tonight when I am in front of the media centre

 

 

Edited July 1, 2016 by mentasm

[Luke 37053]

Well done there. Maybe you could also play with some vertical takes on the home screen or other new ideas.

[Guest asrequested]

I know I'm missing something, here. Are there any finalized skins, and if so, where do I find them? Or are they all forks and we just grab a fork?

[ebr 14910]

I don't believe anyone has completed an alternate one yet.

[Guest asrequested]

Thanks ebr. When one is completed, will you guys make it available in app, or will there be some kind of repository?

[ebr 14910]

There will eventually be a catalog you can browse like in EMC or on the server.

[Luke 37053]

As soon as the first skin is available, I will do a catalog.

[mentasm 43]

Tried a bunch of things today to move this along but didn't have much success.  The screen still focusses on the spotlight tile when entering the TV home page.

 

I also tried fiddling with the rendering order but didn't have a lot of success there.  The section with spotlight, comingup, all tv etc still gets rendered first and then shoved along.  Would be a lot better if it rendered after the latest and nextup section.  I thought it might also help with the focus issue.

 

Also had another idea and tried to edit the spotlight tile to display say the latest 5 tv shows that have been added, as that would actually be useful to me.  My attempts to understand the process there were also unsuccessful.  Can anyone advise if there are other operators for the 'SortBy' command used in the loadspotlight function other than 'random'.  Tried to dig up where that is defined, but my lack of coding skills lets me down.

    function loadSpotlight(element, parentId) {

        var options = {

            SortBy: "Random",
            IncludeItemTypes: "Series",
            Limit: 3,
            Recursive: true,
            ParentId: parentId,
            EnableImageTypes: "Backdrop",
            ImageTypes: "Backdrop"
        };

        return Emby.Models.items(options).then(function (result) {

            var card = element.querySelector('.wideSpotlightCard');

            new spotlight(card, result.Items, 767);
        });
    }

I have noted there isn't much commenting in the code for the skin.  Would probably help many aspiring skinners if someone spent a bit of time adding some explanatory comments about how some of this stuff hangs together

Edited July 3, 2016 by mentasm

[ebr 14910]

Try SortBy: "DateCreated" and SortOrder: "Descending".

[speechles 1917]

Along with what ebr mentioned, throw in:

Filters: "isUnplayed"

 

Now it works like the old "latest" behavior did.

 

There arent comments required for most. Luke uses meaningful variable names, function names, subroutines, objects, arrays, etc. The name of these are clues. This makes it very easy to modify. Take advantage of this.

 

Having lots of comments would only bloat the code, with no perceived value. Javascript is parsed, the entire thing even comments eats bytes of ram. Add in 50MB of comments, while helpful for a few, makes others question why emby eats so much RAM. People already question this. Proper damage control would be removing comments all over and reducing the codebase to bare essentials.

 

I do get your point being a 3rd party and attempting to change parts of emby is daunting. There is not alot of documentation. What there is, is indeed lacking. Knowing this, using the source code of the web client as a teacher is a good tool. Since luke used meaningful names this is all you really need. It makes it slower to develop, using the web client code as a textbook, but you learn more this way.

 

If you are serious about tackling such an endeavor make sure you know the basics of the language its coded in. You dont have to know it all, learn at your own pace and eventually it will fall into place. You will have these epiphany moments where through no ones help, but your own, you accomplished your goal. These triumphs are what makes you a better coder. You learned from your mistakes. It not about how many times you failed along the way, more about you did it when others didnt. So be the first to fork the skin. Show others it isnt that difficult.

 

I speak from experience. If you try hard enough, you will figure it out.

 

Sent from my Nexus 7 using Tapatalk

Edited July 3, 2016 by speechles

[mentasm 43]

I'll play around with those settings.

 

Re: commenting, I get what you mean, but the point I was trying to make is that it would help to get more people have a go if there was more of a primer about how the whole thing hangs together than the small set of instructions on how to fork the skin.  Even having comments in the default skin, with notes indicating that commenting should be cleaned up once the skin is complete would be handy.  I think anything you can do to help get more people looking at skinning the better.  As it is currently the learning curve is huge unless you are already a proficient js coder.

 

Perhaps if having comments in the code is unpalatable, having a wiki page or a document etc with some diagrams or flow charts or something laying out how the basics of stuff work would go a long way towards making the process more accessible.  Making it more accessible means you will see more attempts and successes with new skins

[mentasm 43]

Had a play around.  I've now managed to get the spotlight card to rotate the last 6 or 8 unwatched recently added series.  Seems that spotlight wants nothing to do with episodes individually.

 

Also made the same change to the movies spot light.  I've now moved the spotlight sectiopn back to the left most spot on both TV and Movie home pages.  This will pretty much give me the functionality that I want for now.

 

Next up is working out how to replace the upcoming tile image and I hate it mixed in with all the fanart images.  Looks wrong.  Same for collections in Movies home.

[Luke 37053]

why not show some screehshots of the changes? Also, please supply the url to the skin so that others can install it if they wish.

[mentasm 43]

OK, so here is where I'm at now:
 
TV home

• Spotlight card now rotates latest 6 unwatched series only
• Renamed Latest Episodes to Latest
• Moved Latest into 2nd position and reduced to 6 tiles
• Moved Next Up to 3rd position
• Removed Continue Watching.  

Movie home

• Spotlight card now rotates latest 10 unwatched movies
• Spotlight card now overlaid with movie title rather than tagline
• Renamed Latest Movies to Latest
• Moved Latest into 2nd position and limited to 9 tiles
• Renamed Continue Watching toi Continue
• Moved Continue to 3rd position

Skin can be added as a plugin via the following URL"
 
https://mentasm.github.io/emby-web-defaultskin-mentasm/package.json

 
Once the plugin is added you have to select the skin in Settings/General/Skin
 

 

 

 

 

Things I'd like to do:

 

Series detail page

• make play button dependent on if there is unwatched episodes in the series.  If there is show Play Next, if not show Play all.  If not possible change button top play next and have play all on ... menu
• Fix issue where pressing remote play button while nextup episode is highlighted actually does PlayAll instead of playing the highlighted episode (default skin bug)
• Maybe move the nextup thumb above the series synopsis

 

TV home

• change upcoming tile to better image to fit in with fan art

Movie home

• change collections tile to better image to fit in with fan art

Trailers home

• Add Latest section
• Add spotlight tile

Add back arrow to ... menu for mouse users

Edited July 5, 2016 by mentasm
Updated URL

[Luke 37053]

Great stuff!

[Guest asrequested]

Sadly, it doesn't work at all on mine. The only change that happens is the user icon disappears, forcing me to exploit a bug (pressing the backspace key) to get back to the settings.

 

 

 

I also now have two identical display settings

 

Edited July 5, 2016 by Doofus

[mentasm 43]

Hadn't noticed the user icon being gone.  Not sure why that would be, don't think there is anything I have editted that would change tat.

 

Plugin definitely loads and works in my ET and web ET with regards to chnages to the default TV and Movies home pages.

 

Make luke or someone could comment on why the user icon might have disappered?  I'd assume that is defined in the header, and i haven't editted that

[Guest asrequested]

Hadn't noticed the user icon being gone.  Not sure why that would be, don't think there is anything I have editted that would change tat.

 

Plugin definitely loads and works in my ET and web ET with regards to chnages to the default TV and Movies home pages.

 

Make luke or someone could comment on why the user icon might have disappered?  I'd assume that is defined in the header, and i haven't editted that

 

Nothing else is altered. The UI is unaffected. I like the screenshots you posted, but I get no change

[Guest asrequested]

As soon as I apply it, I can't get out of the settings screen, it just goes black and I can get no further. I have to close and restart

 

 

But with no changes

 

Edited July 5, 2016 by Doofus

[mentasm 43]

Do you have home pages for TV and movies that have the spotlight sections? Your library setup looks quite non standard

[Guest asrequested]

Do you have home pages for TV and movies that have the spotlight sections? Your library setup looks quite non standard

 

I've only used the available settings to move things in the order I want

Edited July 5, 2016 by Doofus

[mentasm 43]

Section titles in the last screenshot are changed. Default is latest movies and continue watching

[Guest asrequested]

Section titles in the last screenshot are changed. Default is latest movies and continue watching

 That's what I have

 

EDIT:

 

They are reversed  

Edited July 5, 2016 by Doofus

[mentasm 43]

I also see 2 display settings icons.

 

No idea why the other pages work fine for me but not for you. Do you see the same if you load the plug in using TV.emby.media ?

[Guest asrequested]

I've tried different display modes, TV, Desktop and Auto.......No change