Movie Posters in Detail view blurry

[JBou]

Is there an existing issue for this?

• I have searched the existing open and closed issues

Current Behavior

The movie Posters on the Movie Details Page are blurry, because the poster has a size of (height x width) 368px x 250px.

Radarr/frontend/src/Movie/Details/MovieDetails.css

Lines 45 to 46 in 288982d

	width: 250px;
	height: 368px;

But the fetched image has only a height of 250px (and therefore a width of 167px)

Radarr/frontend/src/Movie/MovieImage.js

Lines 9 to 15 in 288982d

	function getUrl(image, coverType, size) {
	const imageUrl = image?.url ?? image?.remoteUrl;
	if (imageUrl) {
	return imageUrl.replace(`${coverType}.jpg`, `${coverType}-${size}.jpg`);
	}
	}

The size (height) is set here:

Radarr/frontend/src/Movie/Details/MovieDetails.js

Line 371 in 288982d

size={250}

And the default height is set here:

Radarr/frontend/src/Movie/MoviePoster.js

Lines 25 to 28 in 288982d

	MoviePoster.defaultProps = {
	...MovieImage.defaultProps,
	size: 250
	};

Expected Behavior

The poster should not be blurry and should be fetched in this case by the URL: https://radarr.com/MediaCover/XXXX/poster-368.jpg
I think for this height there exists no thumbnail, so currently it returns the full size poster.

Steps To Reproduce

1. Open a Movie in Detail View
2. See that the image is blurry
3. Inspect the HTML of the page, the size of the Poster is H: 368px x W: 250px
4. Check the URL of the poster, it contains 250
5. Check the size of the poster image, it is H: 167px x W: 250px

Environment

- OS: Unraid
- Radarr: 5.4.6.8723-ls217 by linuxserver.io
- Docker Install: Yes
- Using Reverse Proxy: Yes
- Browser: Chrome
- Database: Sqlite 3.44.2

What branch are you running?

Master

Trace Logs? Not Optional

No trace logs for this issue, just a frontend problem

Trace Logs have been provided as applicable. Reports will be closed if the required logs are not provided.

• I have read and followed the steps in the wiki link above and provided the required trace logs - the logs contain trace - that are relevant and show this issue.

[mynameisbogdan]

Can you show a screenshot?

[JBou]

[mynameisbogdan]

Right, it should be 500 here

Radarr/frontend/src/Movie/Details/MovieDetails.js

Line 371 in 288982d

size={250}