pepepper/fluxer
1
0 Fork 0
mirror of https://github.com/fluxerapp/fluxer synced 2026-10-17 21:15:32 +09:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Hampus authored and GitHub committed 2026-08-24 12:35:42 +02:00
1 parent 844952db51
commit 213dd53ee8
1 file changed
+16 -12
Download Patch File Download Diff File Expand all files Collapse all files
fluxer_app/src/features/channel/components/embeds/media/EmbedYouTube.tsx
+16 -12
View File
@@ -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!,
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 (
<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}