swhitmore 781 Posted June 9, 2016 Share Posted June 9, 2016 (edited) Hi everyone, As someone who uses the 'Upcoming' section a lot, I'd love to see some overlays for important episodes. A few examples of these would be: Series/Season Premiere Series/Season Finale Series Specials I have a really crappy example of this below: (Edit: looks like you can't actually see it in my really crappy example, but you get the idea ) Edited June 9, 2016 by swhitmore 5 Link to comment Share on other sites More sharing options...
aspdend 174 Posted June 9, 2016 Share Posted June 9, 2016 I like this idea - I think it would be good to get this implemented as and when Link to comment Share on other sites More sharing options...
bfir3 113 Posted June 9, 2016 Share Posted June 9, 2016 Good idea, adds some nice detail to the page. I like it! Link to comment Share on other sites More sharing options...
Luke 37008 Posted June 9, 2016 Share Posted June 9, 2016 it's not a bad idea but try to come up with a better proposal, since the one you did isn't very readable. try to take into account mobile, desktop, and tv. Link to comment Share on other sites More sharing options...
swhitmore 781 Posted June 10, 2016 Author Share Posted June 10, 2016 it's not a bad idea but try to come up with a better proposal, since the one you did isn't very readable. try to take into account mobile, desktop, and tv. Yeah, I was working a shitty spare laptop at work. I'll do a better one tonight. Link to comment Share on other sites More sharing options...
bfir3 113 Posted June 10, 2016 Share Posted June 10, 2016 (edited) Here's my implementation of this feature. I'm just going to post the JS and CSS here as I'm not sure if the files are still the same on the latest server version. Here's all I did: Added 'showUpcomingOverlay: true' flag to the getPosterViewHtml call in homeupcoming.js and tvupcoming.js Added the following JS snippet to the librarybrowser.js in the getPosterViewItemHtml function. This adds to the html appended in the cardContent div: if (options.showUpcomingOverlay && item.Type == "Episode" && item.IndexNumber == 1) { html += '<div class="cardUpcomingOverlay">'; if (item.ParentIndexNumber == 1) { html += 'Series Premiere'; } else { html += 'Season Premiere'; } html += '</div>'; } Added the following CSS: .cardUpcomingOverlay { top: 38px; right: -51px; left: auto; transform: rotate(45deg); -webkit-transform: rotate(45deg); width: 200px; background: #e43; position: absolute; text-align: center; letter-spacing: 1px; color: #f0f0f0; height: 26px; display: flex; justify-content: center; align-items: center; vertical-align: middle; font-weight: 500; } And here are the results: Edited June 10, 2016 by bfir3 4 Link to comment Share on other sites More sharing options...
Luke 37008 Posted June 10, 2016 Share Posted June 10, 2016 Is there another color that would work besides red? many people associate that with an error message. thanks. Link to comment Share on other sites More sharing options...
ebr 14903 Posted June 10, 2016 Share Posted June 10, 2016 The future banners I use now are green. 1 Link to comment Share on other sites More sharing options...
Happy2Play 8242 Posted June 11, 2016 Share Posted June 11, 2016 @@bfir3 don't know if I did something wrong but how do you limit the overlay to the image/thumb? Link to comment Share on other sites More sharing options...
swhitmore 781 Posted June 11, 2016 Author Share Posted June 11, 2016 Wow, thanks guys! Looking great. That was quick! Link to comment Share on other sites More sharing options...
bfir3 113 Posted June 11, 2016 Share Posted June 11, 2016 @@bfir3 don't know if I did something wrong but how do you limit the overlay to the image/thumb? Good point, I forgot about that. You will just need to add this CSS: .cardContent { overflow: hidden; } Link to comment Share on other sites More sharing options...
ebr 14903 Posted June 11, 2016 Share Posted June 11, 2016 Good point, I forgot about that. You will just need to add this CSS: .cardContent { overflow: hidden; } That'll help but still won't completely cover a situation where the image itself has transparent padding in it - which is probably the case with that CA treatment. Link to comment Share on other sites More sharing options...
Happy2Play 8242 Posted June 11, 2016 Share Posted June 11, 2016 Good point, I forgot about that. You will just need to add this CSS: .cardContent { overflow: hidden; } That'll help but still won't completely cover a situation where the image itself has transparent padding in it - which is probably the case with that CA treatment. That code is already present by default, so it makes no difference, and changing thumbs via CA to ignore doesn't appear to show any additional padding. Link to comment Share on other sites More sharing options...
ebr 14903 Posted June 11, 2016 Share Posted June 11, 2016 Yeah, your issue is not just the image padding. Plus, looks like you are using Sapphire which actually doesn't have much padding. Diamond or ClearCase are the ones that do. Link to comment Share on other sites More sharing options...
Happy2Play 8242 Posted June 11, 2016 Share Posted June 11, 2016 It is presenting properly so I don't believe I applied the edits improperly, but I guess I could have applied it wrong. Link to comment Share on other sites More sharing options...
bfir3 113 Posted June 11, 2016 Share Posted June 11, 2016 I have no idea without seeing the actual code, but what it looks like to me is that maybe the .cardUpcomingOverlay div is not in the right place. I think my first attempt netted the same result, and I noticed that I needed to have the .cardUpcomingOverlay div inside of the .cardContent div, so please ensure yours is the same: <a class="cardContent mediaItem" href="itemdetails.html"> <div class="cardImage lazy" style="background-image: url();" data-src=""></div> <div class="cardUpcomingOverlay">Series Premiere</div> </a> Link to comment Share on other sites More sharing options...
Happy2Play 8242 Posted June 11, 2016 Share Posted June 11, 2016 @@bfir3 I can't figure out how to get cardUpcomingOverlay inside that attribute. Everywhere I have tried puts it outside the attribute. I can drag and drop it in Inspector console and see it works, but not exactly where in the js to input the modification. Do you know a line number where yours is located? Link to comment Share on other sites More sharing options...
bfir3 113 Posted June 12, 2016 Share Posted June 12, 2016 @@Happy2Play Well, mine is on line 2157 but I'm using an old server version, and a lot of my JS files have been previously modified. I will provide some context sample JS that will hopefully help you figure out where it needs to go: html += '<div class="cardScalable">'; html += '<div class="cardPadder"></div>'; var anchorCssClass = "cardContent"; anchorCssClass += ' mediaItem'; if (options.defaultAction) { anchorCssClass += ' itemWithAction'; } var transition = options.transition === false || !AppInfo.enableSectionTransitions ? '' : ' data-transition="slide"'; var onclick = item.onclick ? ' onclick="' + item.onclick + '"' : ''; html += '<a' + onclick + transition + ' class="' + anchorCssClass + '" href="' + href + '"' + defaultActionAttribute + '>'; html += '<div class="' + imageCssClass + '" style="' + style + '"' + dataSrc + '>'; if (icon) { html += '<iron-icon icon="' + icon + '"></iron-icon>'; } html += '</div>'; if (options.showUpcomingOverlay && item.Type == "Episode" && item.IndexNumber == 1) { html += '<div class="cardUpcomingOverlay">'; if (item.ParentIndexNumber == 1) { html += 'Series Premiere'; } else { html += 'Season Premiere'; } html += '</div>'; } 2 Link to comment Share on other sites More sharing options...
Happy2Play 8242 Posted June 12, 2016 Share Posted June 12, 2016 (edited) @@bfir3 Thanks for all the help, finely got it working, had some browser history issues but after making these changes and clearing the history it worked. Initially placed the edit between this and several other places. // cardContent html += '</a>'; Edited June 12, 2016 by Happy2Play 1 Link to comment Share on other sites More sharing options...
ebr 14903 Posted June 12, 2016 Share Posted June 12, 2016 What happens when it is also future or missing? Or is this only supposed to be targeted at the upcoming page? Link to comment Share on other sites More sharing options...
bfir3 113 Posted June 12, 2016 Share Posted June 12, 2016 I only added the showUpcomingOverlay flag to the homeupcoming.js and tvupcoming.js for my server, so it only shows up on Upcoming pages, which seems appropriate to me. Link to comment Share on other sites More sharing options...
ebr 14903 Posted June 13, 2016 Share Posted June 13, 2016 which seems appropriate to me. Why? I mean, why is it only appropriate to know that something is a season premiere before it airs...? Link to comment Share on other sites More sharing options...
swhitmore 781 Posted June 13, 2016 Author Share Posted June 13, 2016 Why? I mean, why is it only appropriate to know that something is a season premiere before it airs...? Mainly so it stands out when browsing the Upcoming section. If I see 'Season Premiere' I can get excited about it Link to comment Share on other sites More sharing options...
bfir3 113 Posted June 13, 2016 Share Posted June 13, 2016 Yeah, if I'm browsing an older series, I don't want it to show "Series Premiere" and "Season Premiere" on the first episode of each season, it would just look weird. The real purpose for the banner is to say, "Hey, one of your shows is starting again!" Link to comment Share on other sites More sharing options...
speechles 1917 Posted June 13, 2016 Share Posted June 13, 2016 (edited) After the second episode of that season has aired it would look silly to keep it applied to that episode until you watch it. It looks good on upcoming new episodes where it is also a new season, the sXXe01 of the series. You can easily spot this in the upcoming and choose to care about still following the series into the new episodes or not. After they have aired seeing season premiere on new seasons would only look good visually on the latest and nextup rows. It could show which in these are new season episodes by visualization rather than an entire row of separation like androidtv/firetv does this. This would make all clients/apps to easily adopt the feature without changing anything. Sent from my Nexus 7 using Tapatalk Edited June 13, 2016 by speechles 1 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