Jump to content

Upcoming Image Overlays


swhitmore

Recommended Posts

swhitmore

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 ;) )

 

5758f8de20f2f_Untitled.jpg

Edited by swhitmore
  • Like 5
Link to comment
Share on other sites

aspdend

I like this idea - I think it would be good to get this implemented as and when

Link to comment
Share on other sites

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

swhitmore

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

bfir3

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:

 

  1. Added 'showUpcomingOverlay: true' flag to the getPosterViewHtml call in homeupcoming.js and tvupcoming.js
  2. 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>';
    }
  3. 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:

 

GhDunq1.png

Edited by bfir3
  • Like 4
Link to comment
Share on other sites

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

Happy2Play

@@bfir3 don't know if I did something wrong but how do you limit the overlay to the image/thumb?

 

575b62598eae6_premiere.jpg

Link to comment
Share on other sites

bfir3

@@bfir3 don't know if I did something wrong but how do you limit the overlay to the image/thumb?

 

575b62598eae6_premiere.jpg

 

Good point, I forgot about that. You will just need to add this CSS:

.cardContent {
    overflow: hidden;
}
Link to comment
Share on other sites

 

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

Happy2Play

 

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.

 

575c5dd5c095f_overlay1.jpg

575c5de4376c5_overlay.jpg

Link to comment
Share on other sites

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

Happy2Play

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

bfir3

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

Happy2Play

@@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

bfir3

@@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>';
}
  • Like 2
Link to comment
Share on other sites

Happy2Play

@@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>';

 
575d34e2a3c10_upcoming.jpg

Edited by Happy2Play
  • Like 1
Link to comment
Share on other sites

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

bfir3

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

 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

swhitmore

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 :D

Link to comment
Share on other sites

bfir3

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

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 by speechles
  • Like 1
Link to comment
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...