Fall back to Primary/Backdrop in carousel when item.ImageTags?.Thumb is null

[lbux]

Is your feature request related to a problem? Please describe.
When an item does not have a "Thumb" image downloaded, the default is to show a material icon of the item type (show, movie, etc).

Describe the solution you'd like
Instead of immediately falling back to the icon, we can show the primary image or the backdrop image. It is important to note that the backdrop image is already used for the actual backdrop of the carousel background for the currently selected item, but the images look better than the primary image for the thumbnail size.

Describe alternatives you've considered
N/A
Additional context
In the following order of 1) Default, 2) Primary Image, 3) Backdrop

[lbux]

const Carousel = ({
	content,
	onChange,
}: {
	content: BaseItemDto[];
	onChange: (currentSlide: number) => void;
}) => {
	const [currentSlide, setCurrentSlide] = useState(0);

	const [setDirection] = useCarouselStore((state) => [state.setDirection]);

	useEffect(() => {
		onChange(currentSlide);
	}, [content[currentSlide]?.Id]);

	const api = useApiInContext((s) => s.api);

	// Memoize the content mapping
	const sliderContent = useMemo(() => {
		return content.map((item, index) => {
			return (
				<motion.div
					className={
						currentSlide === index
							? "carousel-indicator active"
							: "carousel-indicator"
					}
					layout
					initial={{
						height: "4.6em",
					}}
					whileHover={{
						height: "5.5em",
					}}
					transition={{
						duration: 0.05,
					}}
					key={item.Id}
					onClick={() => {
						if (currentSlide > index) {
							setDirection("left");
						} else if (currentSlide <= index) {
							setDirection("right");
						}
						setCurrentSlide(index);
					}}
				>
					{item.ImageTags?.Thumb ? (
						<img
							src={
								api &&
								getImageUrlsApi(api).getItemImageUrlById(
									item.Id ?? "",
									"Thumb",
									{
										tag: item.ImageTags.Primary,
										fillWidth: 300,
									},
								)
							}
							alt={item.Name ?? "item-image"}
							className="carousel-indicator-image"
						/>
### start of changes
					) : (item.BackdropImageTags ? (
						<img
							src={
								api &&
								getImageUrlsApi(api).getItemImageUrlById(
									item.Id ?? "",
									"Backdrop",
									{
										tag: item.BackdropImageTags.toString(),
										fillWidth: 300,
									},
								)
							}
							alt={item.Name ?? "item-image"}
							className="carousel-indicator-image"
						/>
					) : (
### end of changes
						<div className="carousel-indicator-icon">
							{getTypeIcon(item.Type ?? "Movie")}
						</div>
					)
					)}
				</motion.div>
			);
		});
	}, [content, currentSlide, api, setDirection]);

This is how I accomplished image 3). Image 2) is very similar