diff --git a/fluxer_app/src/features/channel/components/embeds/media/EmbedYouTube.tsx b/fluxer_app/src/features/channel/components/embeds/media/EmbedYouTube.tsx index e5a772879..c7da395af 100644 --- a/fluxer_app/src/features/channel/components/embeds/media/EmbedYouTube.tsx +++ b/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 = 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 = 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!, - height: embed.video.height!, + maxWidth: width, + 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 (
= observer(({embed, width = YOU {/* biome-ignore lint/a11y/useIframeTitle: project policy forbids the native title attribute (NoNativeTitleAttribute test); aria-label provides the accessible name */}