fix(app): size youtube embeds with the shared embed limits (#1873)

fluxer_app/src/features/channel/components/embeds/media/EmbedYouTube.tsx

@@ -7,9 +7,14 @@ import {OverlayActionButton, OverlayPlayButton} from '@app/features/channel/comp
 import {useNearViewport} from '@app/features/messaging/hooks/useNearViewport';
 import {openExternalUrlWithWarning} from '@app/features/messaging/utils/ExternalLinkUtils';
 import * as ImageCacheUtils from '@app/features/messaging/utils/ImageCacheUtils';
+import {
+	EMBED_MAX_HEIGHT,
+	EMBED_MAX_WIDTH,
+	EMBED_TALL_MAX_HEIGHT,
+} from '@app/features/messaging/utils/MediaDimensionConfig';
 import {decodeThumbHashDataURL} from '@app/features/messaging/utils/ThumbHashUtils';
 import {remFromPx} from '@app/features/theme/layout/RemFromPx';
-import {createCalculator} from '@app/features/ui/utils/DimensionUtils';
+import {createCalculator, mediaAspectRatioValue} from '@app/features/ui/utils/DimensionUtils';
 import type {MessageEmbed} from '@fluxer/schema/src/domains/message/EmbedSchemas';
 import {msg} from '@lingui/core/macro';
 import {useLingui} from '@lingui/react/macro';
@@ -18,10 +23,6 @@ import {AnimatePresence, motion} from 'framer-motion';
 import {observer} from 'mobx-react-lite';
 import {type FC, useCallback, useEffect, useMemo, useState} from 'react';
 
-const VIDEO_THUMBNAIL_DESCRIPTOR = msg({
-	message: 'Video thumbnail',
-	comment: 'Short label in the channel and chat embed you tube. Keep it concise.',
-});
 const PLAY_VIDEO_DESCRIPTOR = msg({
 	message: 'Play video',
 	comment: 'Short label in the channel and chat embed you tube. Keep it concise.',
@@ -41,7 +42,8 @@ const YOUTUBE_CONFIG = {
 	BUTTON_DELAY: 0.1,
 } as const;
 const youtubeCalculator = createCalculator({
-	maxWidth: YOUTUBE_CONFIG.DEFAULT_WIDTH,
+	maxWidth: EMBED_MAX_WIDTH,
+	maxHeight: EMBED_MAX_HEIGHT,
 	responsive: true,
 });
 
@@ -74,7 +76,8 @@ const Thumbnail: FC<ThumbnailProps> = observer(
 								exit={{opacity: 0}}
 								transition={{duration: Accessibility.useReducedMotion ? 0 : 0.2}}
 								src={thumbHashURL}
-								alt={i18n._(VIDEO_THUMBNAIL_DESCRIPTOR)}
+								alt=""
+								aria-hidden={true}
 								className={styles.thumbnailPlaceholder}
 								data-flx="channel.embeds.media.embed-you-tube.thumbnail.thumbnail-placeholder"
 							/>
@@ -188,14 +191,16 @@ export const EmbedYouTube: FC<EmbedYouTubeProps> = observer(({embed, width = YOU
 	if (!(embed.video && embed.thumbnail && embed.thumbnail.proxy_url)) {
 		return null;
 	}
+	const videoWidth = embed.video.width ?? YOUTUBE_CONFIG.DEFAULT_WIDTH;
+	const videoHeight = embed.video.height ?? YOUTUBE_CONFIG.DEFAULT_WIDTH;
 	const {style: containerStyle, dimensions} = youtubeCalculator.calculate(
+		{width: videoWidth, height: videoHeight},
 		{
-			width: embed.video.width!,
+			maxWidth: width,
-			height: embed.video.height!,
+			maxHeight: videoHeight > videoWidth ? EMBED_TALL_MAX_HEIGHT : EMBED_MAX_HEIGHT,
 		},
-		{maxWidth: width, forceScale: true},
 	);
-	const aspectRatio = `${dimensions.width} / ${dimensions.height}`;
+	const aspectRatio = mediaAspectRatioValue(dimensions);
 	if (!hasInteracted) {
 		return (
 			<div
@@ -242,7 +247,6 @@ export const EmbedYouTube: FC<EmbedYouTubeProps> = observer(({embed, width = YOU
 			{/* biome-ignore lint/a11y/useIframeTitle: project policy forbids the native title attribute (NoNativeTitleAttribute test); aria-label provides the accessible name */}
 			<iframe
 				allow="autoplay; fullscreen"
-				allowFullScreen
 				sandbox="allow-forms allow-modals allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts"
 				src={embedVideoUrl.toString()}
 				className={styles.iframe}