Jump to content

Ultra Pure Emby Theater Skin


chef

Recommended Posts

Oooooooh @@Luke - I'm following you down the rabbit hole, my man!

 

this requireJS stuff took me for a loop, but now I understand why it is important.

 

Plus, I found your 'backMenu'... finally. It's not a cheap way to do it either dude, it works great!

 

Just set whether or not you want the home icon to appear. Easy enough.

 

Now I know what I'm looking for.

Edited by chef
  • Like 1
Link to post
Share on other sites

Hi @@chef - finally managed to get a chance to install and have a quick play with this skin - it's a good start and well done. I had a list of initial comments and they have all been mentioned in the thread so I won't bother reiterating them here. However, one thing I have noticed is that it is difficult to see the item that is focussed easily, especially if you look away and then look back again.

 

Looking forward to seeing this develop!

Edited by aspdend
  • Like 2
Link to post
Share on other sites

I really don;t know about these dimmed unselected posters guys.

 

I'll leave it in today, try it and tell me what you think.

 

We can change the brightness.

 

FYI: right now brightness is 30% on unselected posters.

Link to post
Share on other sites

I worked on the details page today.

 

Was able to have the overview scroll with a fade effect. It is less jarring to read.

 

Took out the dimming of unselected posters for now.

Edited by chef
Link to post
Share on other sites

There are a couple things happening in this skin that I would like to bring to the attention of the lead developers (@@Luke @ebr) because they would be a good idea to put into the Default Skin for Emby Theater.

 

My proposals are simple and I believe are worth while:

 

Add a static 'Nowplaying'  button to Album list in the list of playback control buttons under Music instead of a music note in the header:

 

59a02fcb420f7_nowplaying.png

 

2. Scroll Fade Text for overviews on Details page. This is easy and stops long overviews (example 'Login' movie overview) from exceeding the page landing view.

 

Simple to use Regex to split the Paragphas into sentences and fade them in one at a time, then repeat. (I'm sure you don;t need a newbie like me giving you code, but I'm gonna anyway. Here:

function overviewSplitter(str){
        var strs = [];
        return str.replace(/([.?!])\s*(?=[A-Z])/g, "$1|").split("|");
}

Then create a timeout function to display the overview:

var overviewElem = view.querySelector('.overview');
overviewElem.classList.remove('hide');
//split it
var overviewArr = overviewSplitter(item.Overview);
if(overviewArr.length > 1){
                                    
   var i = 0;
   //abbreviations like 'mrs.', 'mr.' need to be ignored - 
   var abbreviations = false;                                        
                    
   setInterval(function() {     
       if (i >= overviewArr.length) {     
           i = 0;     
       } //Repeat the overview                       
       
       //deal with abbreviations          
       if(overviewArr[i].length < 5){
          abbreviations = true;
          overviewElem.innerHTML = overviewArr[i] + " " +  overviewArr[i+1]
       }else{
          overviewElem.innerHTML = overviewArr[i]; 
       }
       //Don't know if this is exactly how to write keyframes in vanella javascript? but it works                 
       var keyframesFadeIn = 
           [{opacity: '0',},{opacity: '1',},{opacity: '1',},{opacity: '1',},{opacity: '1',},{opacity: '0',}];
       var timingIn = { duration: 8000, iterations: 1 };
           overviewElem.animate(keyframesFadeIn, timingIn)
           if(abbreviations){
              i = i + 2
           }else{
              i++;
           }
    } , 8000);  
 }else{
       //Just write the overview because it is short enough
       overviewElem.innerHTML = item.Overview; 
 }
                
  

Anyway, I thought it was worth sharing.

 

One thing though, the mediaInfo icons need to be placed with a position other than relative on the details page because otherwise, they will move up and down with the sentences.

 

I used absolute positioning, but there maybe a better way.

 

Also, I enlarged the details poster image in order to push the actors images down and out of the landing page view. Now it has a nice landing page for details until you scroll down.

 

 

Example:

 

59a0375e86f95_detail.png

Edited by chef
  • Like 1
Link to post
Share on other sites
Guest asrequested

I haven't tested the latest, yet. I'm looking forward to it.

 

Great video! An option to turn the watched indicator off, would be good. I don't want it permanently off. As sometimes I don't remember what episode I watched, last.

Edited by Doofus
Link to post
Share on other sites

Unfortunately with skins we can't really have options because we aren't tied into theater settings. I can added setting toggles, but can't save them.

 

I can turn them off, it is a Boolean value to show them or not.

 

What if we turned them off on movies only?

 

I actually use them for tv shows, because I sometimes fall asleep during episodes and need to remember where the heck I was lol.

Link to post
Share on other sites

I found out what I did wrong in settings, I didn;t return the value properly and therefore navigating back to settings would show the check box in its default state, not what I set it as...

 

And that means, we can disable watched icons if we want, and (this is my favorite!) we can add a floating effect to the highlighted tile again, and it can be turned off for browsers which are slow.

 

that's aaaaamazing!

 

Float effect first, because I love it!

 

Edit: got too excited and it is hard pull this off:

 

1. skinsettings.js -> querySelector from document level to get items (ex. cards)? Will the cards be created in DOM during this time of loading?

 

2. Two different float animations ('animateFloat', 'staticFloat')

 

3. How to find the ':focus' pseudo element from javascript?  Or do I 'addEventListeners' to the focused element?

 

4. Then use 'classList.add(animatedFloat) if skinsettings is true.

 

 

Hard stuff actually... better start reading.

Edited by chef
Link to post
Share on other sites

This might work :)

 

document.querySelector(".card:focus").classList.add("animateFloat");

 

Oh boy fingers crossed!

Link to post
Share on other sites

Wierd it shouldn't be black.

 

The title bar I need to fix still.

 

I ha to re code the thing from scratch.

 

But haven't got the scroller in place yet.

Edited by chef
Link to post
Share on other sites

@

 

Skins don't have access to the initial settings page, probably because it is a shared page between all themes, and has global effects to all theater options.

 

The best I can do is add a home button to the 'Ultra Pure' settings page which will return you back to the home page.

 

 

SO, this is very important!

 

If people enter settings, and think they are stuck there because there is no 'Back' button, you have to:

 

1. choose 'Ultra Pure' from the General List

2. Choose the home button.

 

 

That is the best I can do. It's a bit of a PITA. sorry.

 

If you choose to go back to the Default Skin, then I can see that the back button isn't available. I'll look at that next.

Edited by chef
Link to post
Share on other sites
Guest asrequested

Did you notice that it took several clicks on the settings icon, before it would go away? In the GIF, I had to use a mouse and keyboard combination to navigate. The back arrow not being present can still be achieved by using the backspace on the keyboard. So for those using a remote, they should be able to map that. When changing back to the default skin, you have to restart the app for it to work, after you select it.

Link to post
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
×
×
  • Create New...