chef 3744 Posted August 22, 2017 Author Share Posted August 22, 2017 (edited) 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 August 22, 2017 by chef 1 Link to comment Share on other sites More sharing options...
Luke 36887 Posted August 22, 2017 Share Posted August 22, 2017 Well done. Link to comment Share on other sites More sharing options...
Dhop84 1 Posted August 22, 2017 Share Posted August 22, 2017 This is looking fantastic, great work @@chef Sent from my EDI-AL10 using Tapatalk Link to comment Share on other sites More sharing options...
aspdend 174 Posted August 24, 2017 Share Posted August 24, 2017 (edited) 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 August 24, 2017 by aspdend 2 Link to comment Share on other sites More sharing options...
chef 3744 Posted August 24, 2017 Author Share Posted August 24, 2017 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 comment Share on other sites More sharing options...
chef 3744 Posted August 24, 2017 Author Share Posted August 24, 2017 (edited) 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 August 24, 2017 by chef Link to comment Share on other sites More sharing options...
Guest asrequested Posted August 24, 2017 Share Posted August 24, 2017 Do we need to reload it? Link to comment Share on other sites More sharing options...
chef 3744 Posted August 25, 2017 Author Share Posted August 25, 2017 Do we need to reload it? No, I'm pretty sure it will just load itself with the new code Link to comment Share on other sites More sharing options...
chef 3744 Posted August 25, 2017 Author Share Posted August 25, 2017 (edited) 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: 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: Edited August 25, 2017 by chef 1 Link to comment Share on other sites More sharing options...
LiquidFX 135 Posted August 25, 2017 Share Posted August 25, 2017 (edited) Just made a quick video of this theme in action, Edited August 25, 2017 by LiquidFX 1 Link to comment Share on other sites More sharing options...
Luke 36887 Posted August 25, 2017 Share Posted August 25, 2017 Looks great. Link to comment Share on other sites More sharing options...
chef 3744 Posted August 25, 2017 Author Share Posted August 25, 2017 Thank you for that video. So cool! I can see some lose ends I can fix today. 1 Link to comment Share on other sites More sharing options...
LiquidFX 135 Posted August 25, 2017 Share Posted August 25, 2017 Maybe you can find a way to get rid of the watched indicator....lol Link to comment Share on other sites More sharing options...
Guest asrequested Posted August 25, 2017 Share Posted August 25, 2017 (edited) 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 August 25, 2017 by Doofus Link to comment Share on other sites More sharing options...
chef 3744 Posted August 25, 2017 Author Share Posted August 25, 2017 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 comment Share on other sites More sharing options...
Luke 36887 Posted August 25, 2017 Share Posted August 25, 2017 Skins can have settings. Link to comment Share on other sites More sharing options...
chef 3744 Posted August 25, 2017 Author Share Posted August 25, 2017 (edited) Skins can have settings. Edited August 25, 2017 by chef Link to comment Share on other sites More sharing options...
chef 3744 Posted August 25, 2017 Author Share Posted August 25, 2017 (edited) 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 August 25, 2017 by chef Link to comment Share on other sites More sharing options...
chef 3744 Posted August 26, 2017 Author Share Posted August 26, 2017 This might work document.querySelector(".card:focus").classList.add("animateFloat"); Oh boy fingers crossed! Link to comment Share on other sites More sharing options...
Guest asrequested Posted August 26, 2017 Share Posted August 26, 2017 It's still messed up And why is it black, again? I feel like it's going backwards... Link to comment Share on other sites More sharing options...
Guest asrequested Posted August 26, 2017 Share Posted August 26, 2017 Awesome! Theater is unusable again. Now I have to re-install it Link to comment Share on other sites More sharing options...
Guest asrequested Posted August 26, 2017 Share Posted August 26, 2017 It's pretty much unusable, for me. There's a bit too much to explain, so I made a GIF. I hope it's clear enough. Link to comment Share on other sites More sharing options...
chef 3744 Posted August 26, 2017 Author Share Posted August 26, 2017 (edited) 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 August 26, 2017 by chef Link to comment Share on other sites More sharing options...
chef 3744 Posted August 26, 2017 Author Share Posted August 26, 2017 (edited) @ 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 August 26, 2017 by chef Link to comment Share on other sites More sharing options...
Guest asrequested Posted August 26, 2017 Share Posted August 26, 2017 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 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