Blur Unwatched Episode Thumbs?

[tr0nllam 35]

Does anyone have any CSS code that blurs tv episode thumbs for unwatched items?

[Happy2Play 9458]

Don't believe it is possible with css.

[tr0nllam 35]

1 hour ago, Happy2Play said:

Don't believe it is possible with css.

Found this on the Jellyfin subreddit:

/*CSS for hiding unread episods to prevent spoilers*/

/* source : https://www.reddit.com/r/jellyfin/comments/ky6mrf/hiding_ep_thumbnails_cause_of_spoilers/ */

 

/* Blur thumbnails */

 

#itemDetailPage > div.detailPageWrapperContainer > div.detailPageSecondaryContainer > div.detailPageContent > div.nextUpSection.verticalSection.detailVerticalSection > div > div > div > div.cardScalable > button {filter: blur(10px);}

 

#childrenContent > div > div > div.listItem-content > div.listItemImage.listItemImage-large.itemAction.lazy.non-blurhashable.lazy-image-fadein-fast > button {transition: none !important ;border-radius: 0px; height:100%; width:100%; backdrop-filter: blur(10px);}

 

#childrenContent > div > div > div.listItem-content > div.listItemImage.listItemImage-large.itemAction.lazy.non-blurhashable.lazy-image-fadein-fast > button:hover {border-radius: 0px; height:85%; width:85%; backdrop-filter: blur(20px);}

 

#itemDetailPage > div.detailPageWrapperContainer > div.detailPageSecondaryContainer > div.detailPageContent > div.verticalSection.detailVerticalSection.moreFromSeasonSection.emby-scroller-container > div.padded-top-focusscale.padded-bottom-focusscale.emby-scroller > div > div > div > div.cardScalable > button {filter: blur(10px);}

Would something like this work in Emby?

Found this, as well:

/* start of unwatched episode image blurring */
div[data-type="Episode"] .paper-icon-button-light {
    position:static!important;
}
 
div[data-type="Episode"] .listItemImageButton:hover {
    color: #00a4dc;
    background: rgba(0,164,220,.2);
    -webkit-transform: none;
    transform: none;
}
 
div[data-type="Episode"] .listItemImage.listItemImage-large.itemAction > button:nth-child(1) .play_arrow {
    background-color:rgba(0,0,0,0.4);
    width:65px;
    height: 65px;
}
 
div[data-type="Episode"] .listItemImage.listItemImage-large.itemAction > button:nth-child(1):before {
    content:"";
    position: absolute;
    width: 100%;
    height: 100%;
    backdrop-filter: blur(30px);
    pointer-events: none;
}
 
/* end of unwatched episode image blurring */

 

Edited June 18, 2022 by tr0nllam

[Happy2Play 9458]

2 minutes ago, tr0nllam said:

It seems possible in Jellyfin, so I'm assuming it would work here as well:

Are you saying it is applied to only unwatched or all episode images?  This should apply to all, but will take a look.

[tr0nllam 35]

1 minute ago, Happy2Play said:

Are you saying it is applied to only unwatched or all episode images?  This should apply to all, but will take a look.

I just tested both versions of the code I found in Jellyfin and they only blur the unwatched items.

[Happy2Play 9458]

59 minutes ago, tr0nllam said:

I just tested both versions of the code I found in Jellyfin and they only blur the unwatched items.

With just looking at the linked code I would assume our code is totally different (non-blurhashable, card-withuserdata) as I don't see a way.  But could be wrong.

Edited June 18, 2022 by Happy2Play