[realjohngalt]

This started off as a vertical and fullscreen mod of jurialmunkey's excellent (fuse)neue skin, but has developed a style of it's own.

Mod Principals and features:

• Keeps artwork and media as the focus, with dynamic highlights throughout (with enabling dynamic colors).
  
• ExtraPoster support (with enabling ExtraPoster and using the repo). This is shown in screenshots with Guardians of the Galaxy Vol.2.
  
• List-based views.
  
• Always accessible main menu, sliding everything to the right. Pressing left on the main menu slides the submenu into view similar to Mimic's vertical menu.
  
• Views all have slight tweaks for different content types.
  
• Parallax shift animations are standard across the skin to add depth.
  
• Large info areas with everything a click away.
  
• Additional media flags (such as a HDR flag).
  

ToDo:

• Notifications need repositioning.
  
• Settings to be redesigned (like jurialmunkey's suggestion here).
  
• Scrollbar fixes.
  
• Skin extendedinfo.
  
• PVR.
  

What you need to know:

• Pressing right while on a list will get you the alphabet strip or options menu. Pressing right from the alphabet strip will get you the options menu.
  
• Pressing left or back will slide the main menu into focus. You may disable the "back to main menu" in skin settings.
  
• Pressing left on a main menu item will get you the item's submenu. Submenu widgets don't currently function on this skin.
  

Some current images:

watch gallery

A big thanks to jurialmunkey for creating fuse(neue), encouraging the mod, and being available for assistance.

Install from repository

[Blurayx]

I'm a big fan of (fuse)neue but excellent work

[jurialmunkey]

Looking good.

One minor thing - I think the Title and Genre labels need to move down a few pixels so they look more positioned in the center (vertically). I'm thinking that the vertical center of the rating should line up nicely with the vertical space between title and genre - if that makes sense?

I'm also wondering if the transparency is a little too high. I think at least the selected item could be a little more opaque to improve readability (also, the tagline is a little dark and difficult to read).

I also feel like the menu could be a little wider considering it is vertical (might not work, not 100% on whether or not it needs to be wider). For the submenus, I wonder if a stacked version similar to how refocus does things could be a better solution? That way you could still have submenu widgets as you wouldn't need to move through the main menu to get back to the widget space.

With watched indicators, make sure they are in a consistent place in the view -- they are particularly useful in episode view for telling where you are up to, so need to be able to quickly scan them with your eyes to figure out what is unwatched/inprogress etc. Regarding episodes, the other thing to think about is premiere date which is more important than year for episodes, but is also wider because it has day and month as well (e.g. 27/03/2016).

Also, I'm not sure how you are going to implement the view options menu. I'm thinking it should slide in from the right like the context menu will and share the same style as main menu perhaps. Because the view movement is vertical, it makes the options/sort buttons at the bottom a little awkward to understand how to get to them. You could maybe leave the sort by part there as a visual indicator of how the menu is being sorted, but I think the options part would definitely need to go as there isn't really any sensible way to navigate down there.

It's coming along really nicely! Good work

[realjohngalt]

Looking good.

One minor thing - I think the Title and Genre labels need to move down a few pixels so they look more positioned in the center (vertically). I'm thinking that the vertical center of the rating should line up nicely with the vertical space between title and genre - if that makes sense?

I'm also wondering if the transparency is a little too high. I think at least the selected item could be a little more opaque to improve readability (also, the tagline is a little dark and difficult to read).

I also feel like the menu could be a little wider considering it is vertical (might not work, not 100% on whether or not it needs to be wider). For the submenus, I wonder if a stacked version similar to how refocus does things could be a better solution? That way you could still have submenu widgets as you wouldn't need to move through the main menu to get back to the widget space.

With watched indicators, make sure they are in a consistent place in the view -- they are particularly useful in episode view for telling where you are up to, so need to be able to quickly scan them with your eyes to figure out what is unwatched/inprogress etc. Regarding episodes, the other thing to think about is premiere date which is more important than year for episodes, but is also wider because it has day and month as well (e.g. 27/03/2016).

Also, I'm not sure how you are going to implement the view options menu. I'm thinking it should slide in from the right like the context menu will and share the same style as main menu perhaps. Because the view movement is vertical, it makes the options/sort buttons at the bottom a little awkward to understand how to get to them. You could maybe leave the sort by part there as a visual indicator of how the menu is being sorted, but I think the options part would definitely need to go as there isn't really any sensible way to navigate down there.

It's coming along really nicely! Good work

Thank you very much for your suggestions.

1) I agree about list item balance. At one point when I fixed it, it looked worse (I think because of font sizing), so I put it back and put it off for later.

2) I agree about the list selection. I'll make those changes. For the info view, I'm working on doing gradient textures for each section to add a bit of depth and improve readability, so I'm not yet sure if overall transparency needs to be reduced.

3) Submenu widgets...damn! I completely forgot about submenu widgets, but unfortunately I think if the main menu's any wider, it will affect the boundaries I set on the list. Right now the title and genre/tagline end where it slides for the main menu. If I cut the title length down, I think it will look too short in the full list view (and consistency here is something I'd like to keep). However, this might end up getting shorter if I work toward doing an alphabet/status bar change. For now I can change the onright to go to submenu widgets from submenu, and leave back to go to main menu...but it might end up getting confusing.

4) Good point about the premier date. I agree watched indicators are a necessity. I'm considering either putting minimal watched indicators where the rating is, or "tinting" those list items differently (could look good for tv shows).

5) View options is where things get very tricky (especially since I removed how to navigate to it since I fixed some navigation issues). After I get the info page, context menu, and settings adjusted, I'm going to work on the vertical alphabet strip. Depending on how I can get it to look, I'm considering removing the status bar completely, keeping the alphabet strip visible, and putting a gear icon at top for options, and minimal info on the bottom (time and page info). Nextup could go in the focused list item. This could also cut down on the list size, and make a larger main menu a possibility.

Edit: for the options menu, I removed left to get to main menu, and changed it back to options. I added a "<" before the icon which might help. Because the alphabet strip/status bar is such a major change, I'd like to at least keep functionality before I get there.

[jurialmunkey]

1. Yeah it can be surprisingly difficult to get text to look balanced.

2. A gradient might help a lot. I think maybe the transparency looks a little high because in the default skin you have the transparent black infoblade part behind the content section and that combines to dim the background and add a little bit of extra opacity when transparency is turned on (whereas because you are going fullscreen, you don't have that element any more).

3. Definitely keep the menu width how it is if it affects how it slides over -- it's a really nice effect how the poster slides a little bit more to the right than the list so that the rating is covered but the titles remain fully visible. At least that is how I imagine it animating in my head -- with the background moving too, it will create a really nice parallax effect where each layer travels a little further than the one below it.

3.1 I like your idea about the cog at the top of the alphabet strip. Just keep in mind that the alphabet strip doesn't work for some content sorting options because they aren't sorted alphabetically (e.g. by year, by rating etc.) -- although in cases where the alphabet strip isn't visible, maybe you can just have <onright> open the menu directly instead (I imagine it would be good to also have onright from the alphabet strip open the view menu to save having to navigate all the way to the settings cog).

3.2 - Also, regarding the alphabet strip, what if instead of reducing the list width to accomodate it, have it be the same width as the ratings column and just off screen to the right. Then a right press can slide the list over slightly so that the rating column is hidden under the poster and the alphabet strip becomes visible from the right.

[realjohngalt]

1. Yeah it can be surprisingly difficult to get text to look balanced.

2. A gradient might help a lot. I think maybe the transparency looks a little high because in the default skin you have the transparent black infoblade part behind the content section and that combines to dim the background and add a little bit of extra opacity when transparency is turned on (whereas because you are going fullscreen, you don't have that element any more).

3. Definitely keep the menu width how it is if it affects how it slides over -- it's a really nice effect how the poster slides a little bit more to the right than the list so that the rating is covered but the titles remain fully visible. At least that is how I imagine it animating in my head -- with the background moving too, it will create a really nice parallax effect where each layer travels a little further than the one below it.

3.1 I like your idea about the cog at the top of the alphabet strip. Just keep in mind that the alphabet strip doesn't work for some content sorting options because they aren't sorted alphabetically (e.g. by year, by rating etc.) -- although in cases where the alphabet strip isn't visible, maybe you can just have <onright> open the menu directly instead (I imagine it would be good to also have onright from the alphabet strip open the view menu to save having to navigate all the way to the settings cog).

3.2 - Also, regarding the alphabet strip, what if instead of reducing the list width to accomodate it, have it be the same width as the ratings column and just off screen to the right. Then a right press can slide the list over slightly so that the rating column is hidden under the poster and the alphabet strip becomes visible from the right.

1+2) Improved text balance, changed gradients, and decreased the background transparency 9%. Also added air date to TV (there's plenty of room due to no taglines):


3) No need to change size, got it figured out. The effect is exactly as you describe. The poster moves 320, list moves 240. This effect is something I'd like to keep consistent throughout the skin, just as for the right menu (right menu covers mpaa/duration, list moves to cover rating). Worth mentioning the fanart doesn't shift if pan is on currently, but I'll probably be tweaking this soon anyway just to pan less. I'm also going to disable menu transparency (possible currently with "pan fanart" off but "transparency" on), so the fanart will also shift in those conditions.

3.1) Thank you for working me through this. I'm going to be moving the options menu to the right for now just like the context menu. Also any excuse for those nice animations. I could perhaps put weather on the left of the status bar for now to balance it out.

3.2) I'll make the alphabet menu another right before the options menu on supported content types, at least at first. I'm going to be keeping the status bar for awhile while I work on other stuff, especially after your point of content types.

Edit: a brighter/more colorful fanart example for the gradient and transparency changes:


Edit2: got animations to a good point with fanart, and better defaults. Main menu is now always opaque (didn't fit having it transparent even without the animations). The "transparency" setting now essentially enables/disables fanart.

Edit3: Settings is functional for the layout changes. Although I'm least happy with it, it's also the most likely to stay the same.


Edit4: main menu's now always static, everything else still animates the same. There was too much movement before, and this way it looks like the animation's occurring to expose the menu. I've decided I'll do the same for the alphabet strip, but due to size constraints, the context menu still needs to be on top.

[jurialmunkey]

Looking great. The little tweak to transparency and text positioning in the list makes all the difference! Also I like the idea of sliding to reveal the menu, was almost going to suggest that. I had a concept mockup for a skin ages ago with a very similar idea.

My suggestion for the settings page would be to completely remove the home menu look from the left selection panel. Instead, extend the black transparent background full width and make the left panel just look like another column. It would need its own Title and Sublabel like the Settings | Expert part. I would suggest something like Categories | Click to switch
For example:

Code:

Categories      | Settings      | Interface
Click to switch | Expert        | Description of setting
                |               |
Interface       | Skin          | Setting
Library         | Regional      | Setting
etc.            | etc.          | etc.

[realjohngalt]

That will look much better, thank you again for the help and suggestions.

Here's the context menu (note: fanart pan is enabled, so the fanart has moved differently between screenshots than the open animation):


And without the context menu open:


The fanart is sliding 40 and the list is sliding 80.

Because of size constraints, this had to be on top of the list, and the options menu will be the same. In the case of the alphabet strip, it's going to be revealed by the list sliding enough to hide the imdb rating (to keep the same aesthetic as the main menu).

[Aaiemron]

Beautyfull!!

[Blurayx]

@realjohngalt,

coming along nicely!!

it will be very popular for the vertical layout fans

[realjohngalt]

Small update with no screenshots: I got a chance to do a bit on it today: cleaned up right menu animations and made an expression for the trigger (to simplify down the road when dialogs are also right panels). Also moved options out of the statusbar completely, and it is now on right from the scrollbar (or from alphabet strip when it gets there).

I started work on the info page, and have come up with the general layout. The header on the info page has two variants: one with clear logo + tagline, one with title + tagline. Because it's difficult to describe any further, the goal is to have everything major visible with no need to select another button for something like "directed by" or "top billed cast."

[realjohngalt]

Regarding the info page, here's a very WIP screenshot:


The background transparency fade decreases 10% for twice as long as the info fade in (to improve legibility).

The plot autoscrolls vertically. Title (if no clearlogo) horizontally autoscrolls. Tagline vertically scrolls (if clearlogo), and horizontally scrolls without a clearlogo. I'm working on modifying the square actor view to show and autoscroll below "Top Billed Cast." Below that will be "Also Directed By..." with a similar view.

Below these will be left/right sections like the current info page in fuse(neue) with everything else. The "Director" and "Cast" buttons are also going away.

[realjohngalt]

Got the info page more squared away (and functional). It also works with tv shows and episodes. I'm sure there's a fringe case I'm missing, but it looks good for most of my stuff. The biggest issue is a gap between the plot and cast section in the case of short plots, but I haven't been able to figure out a way around it due to how the cast view is integrated.


This is without fanart (transparency off) and the plot is currently scrolling. The cast list auto scrolls, and currently the "Director" button replaces the plot section and header (title/tagline).

One more with transparency on:

[jurialmunkey]

This is looking fantastic

My immediate though is that perhaps the padding on the left side between info and poster needs to be just a little bit more. It looks a bit tight currently. Also looks like just a little extra padding is needed between the cast list and the info directly below it. But this is really my only criticism and I really think it only needs to be a few pixels (maybe 10).

[realjohngalt]

This is looking fantastic

My immediate though is that perhaps the padding on the left side between info and poster needs to be just a little bit more. It looks a bit tight currently. Also looks like just a little extra padding is needed between the cast list and the info directly below it. But this is really my only criticism and I really think it only needs to be a few pixels (maybe 10).

Thank you, you're right.

I started by giving everything equal padding, but it didn't translate well to the visuals -- especially with left alignment and varying sizes. I like the idea of giving the cast view more padding.

I have an idea for changing the actor and director movie views more to improve them a bit in the case of manual focus (showing actor info where "plot summary" is), but I've put that on the back burner so I can get the alphabet strip done as well as some functionality tweaks.