mentasm 43 Posted June 30, 2016 Share Posted June 30, 2016 (edited) 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 2 Link to comment Share on other sites More sharing options...
Luke 37118 Posted July 1, 2016 Share Posted July 1, 2016 Well done there. Maybe you could also play with some vertical takes on the home screen or other new ideas. Link to comment Share on other sites More sharing options...
Guest asrequested Posted July 1, 2016 Share Posted July 1, 2016 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? Link to comment Share on other sites More sharing options...
ebr 14935 Posted July 1, 2016 Share Posted July 1, 2016 I don't believe anyone has completed an alternate one yet. 1 Link to comment Share on other sites More sharing options...
Guest asrequested Posted July 1, 2016 Share Posted July 1, 2016 Thanks ebr. When one is completed, will you guys make it available in app, or will there be some kind of repository? Link to comment Share on other sites More sharing options...
ebr 14935 Posted July 1, 2016 Share Posted July 1, 2016 There will eventually be a catalog you can browse like in EMC or on the server. Link to comment Share on other sites More sharing options...
Luke 37118 Posted July 2, 2016 Share Posted July 2, 2016 As soon as the first skin is available, I will do a catalog. 1 Link to comment Share on other sites More sharing options...
mentasm 43 Posted July 3, 2016 Author Share Posted July 3, 2016 (edited) 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 Link to comment Share on other sites More sharing options...
ebr 14935 Posted July 3, 2016 Share Posted July 3, 2016 Try SortBy: "DateCreated" and SortOrder: "Descending". Link to comment Share on other sites More sharing options...
speechles 1920 Posted July 3, 2016 Share Posted July 3, 2016 (edited) 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 Link to comment Share on other sites More sharing options...
mentasm 43 Posted July 3, 2016 Author Share Posted July 3, 2016 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 Link to comment Share on other sites More sharing options...
mentasm 43 Posted July 4, 2016 Author Share Posted July 4, 2016 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. Link to comment Share on other sites More sharing options...
Luke 37118 Posted July 4, 2016 Share Posted July 4, 2016 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. Link to comment Share on other sites More sharing options...
mentasm 43 Posted July 5, 2016 Author Share Posted July 5, 2016 (edited) 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 artMovie home change collections tile to better image to fit in with fan artTrailers home Add Latest section Add spotlight tile Add back arrow to ... menu for mouse users Edited July 5, 2016 by mentasm Updated URL 1 Link to comment Share on other sites More sharing options...
Luke 37118 Posted July 5, 2016 Share Posted July 5, 2016 Great stuff! Link to comment Share on other sites More sharing options...
Guest asrequested Posted July 5, 2016 Share Posted July 5, 2016 (edited) 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 Link to comment Share on other sites More sharing options...
mentasm 43 Posted July 5, 2016 Author Share Posted July 5, 2016 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 Link to comment Share on other sites More sharing options...
Guest asrequested Posted July 5, 2016 Share Posted July 5, 2016 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 Link to comment Share on other sites More sharing options...
Guest asrequested Posted July 5, 2016 Share Posted July 5, 2016 (edited) 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 Link to comment Share on other sites More sharing options...
mentasm 43 Posted July 5, 2016 Author Share Posted July 5, 2016 Do you have home pages for TV and movies that have the spotlight sections? Your library setup looks quite non standard Link to comment Share on other sites More sharing options...
Guest asrequested Posted July 5, 2016 Share Posted July 5, 2016 (edited) 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 Link to comment Share on other sites More sharing options...
mentasm 43 Posted July 5, 2016 Author Share Posted July 5, 2016 Section titles in the last screenshot are changed. Default is latest movies and continue watching Link to comment Share on other sites More sharing options...
Guest asrequested Posted July 5, 2016 Share Posted July 5, 2016 (edited) 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 Link to comment Share on other sites More sharing options...
mentasm 43 Posted July 5, 2016 Author Share Posted July 5, 2016 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 ? Link to comment Share on other sites More sharing options...
Guest asrequested Posted July 5, 2016 Share Posted July 5, 2016 I've tried different display modes, TV, Desktop and Auto.......No change Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now