[skip ci] feat: prepare for public release

fluxer_app/src/components/channel/embeds/media/EmbedGifv.tsx

@@ -457,8 +457,8 @@ export const EmbedGifv: FC<
 		const {width, aspectRatio} = style;
 		const containerStyle = {
 			'--embed-width': `${width}px`,
-			maxWidth: `${width}px`,
-			width: '100%',
+			maxWidth: '100%',
+			width,
 			aspectRatio,
 		} as React.CSSProperties;
 
@@ -488,7 +488,7 @@ export const EmbedGifv: FC<
 					type="gifv"
 					handlePress={openImagePreview}
 				>
-					<div className={styles.videoWrapper}>
+					<div className={styles.videoWrapper} style={aspectRatio ? {aspectRatio} : undefined}>
 						{(!loaded || error) && thumbHashURL && (
 							<img src={thumbHashURL} className={styles.thumbHashPlaceholder} alt={t`Loading placeholder`} />
 						)}
@@ -551,6 +551,7 @@ export const EmbedGif: FC<GifvEmbedProps & {proxyURL: string; includeButton?: bo
 		const {shouldBlur, gateReason} = useNSFWMedia(nsfw, channelId);
 		const containerRef = useRef<HTMLDivElement>(null);
 		const imgRef = useRef<HTMLImageElement>(null);
+		const isHoveredRef = useRef(false);
 
 		const defaultName = deriveDefaultNameFromMessage({
 			message,
@@ -622,16 +623,21 @@ export const EmbedGif: FC<GifvEmbedProps & {proxyURL: string; includeButton?: bo
 		useEffect(() => {
 			if (gifAutoPlay) return;
 
-			const img = imgRef.current;
 			const container = containerRef.current;
-			if (!img || !container) return;
+			if (!container) return;
 
 			const handleMouseEnter = () => {
-				if (FocusManager.isFocused() && img) {
-					img.src = optimizedAnimatedURL;
+				isHoveredRef.current = true;
+				if (FocusManager.isFocused()) {
+					const img = imgRef.current;
+					if (img) {
+						img.src = optimizedAnimatedURL;
+					}
 				}
 			};
 			const handleMouseLeave = () => {
+				isHoveredRef.current = false;
+				const img = imgRef.current;
 				if (img) {
 					img.src = optimizedStaticURL;
 				}
@@ -646,6 +652,24 @@ export const EmbedGif: FC<GifvEmbedProps & {proxyURL: string; includeButton?: bo
 			};
 		}, [gifAutoPlay, optimizedAnimatedURL, optimizedStaticURL]);
 
+		useEffect(() => {
+			if (gifAutoPlay) return;
+
+			const unsubscribe = FocusManager.subscribe((focused) => {
+				const img = imgRef.current;
+				if (!img) return;
+				if (!focused) {
+					img.src = optimizedStaticURL;
+					return;
+				}
+				if (isHoveredRef.current && focused) {
+					img.src = optimizedAnimatedURL;
+				}
+			});
+
+			return unsubscribe;
+		}, [gifAutoPlay, optimizedAnimatedURL, optimizedStaticURL]);
+
 		if (shouldBlur) {
 			const {style} = mediaCalculator.calculate({width: naturalWidth, height: naturalHeight}, {forceScale: true});
 			const {width: _width, height: _height, ...styleWithoutDimensions} = style;
@@ -679,8 +703,8 @@ export const EmbedGif: FC<GifvEmbedProps & {proxyURL: string; includeButton?: bo
 		const {width, aspectRatio} = style;
 		const containerStyle = {
 			'--embed-width': `${width}px`,
-			maxWidth: `${width}px`,
-			width: '100%',
+			maxWidth: '100%',
+			width,
 			aspectRatio,
 		} as React.CSSProperties;
 
@@ -716,7 +740,7 @@ export const EmbedGif: FC<GifvEmbedProps & {proxyURL: string; includeButton?: bo
 					contentHash={contentHash}
 					message={message}
 				>
-					<div className={styles.videoWrapper}>
+					<div className={styles.videoWrapper} style={aspectRatio ? {aspectRatio} : undefined}>
 						{(!loaded || error) && thumbHashURL && (
 							<img src={thumbHashURL} className={styles.thumbHashPlaceholder} alt={t`Loading placeholder`} />
 						)}

fluxer_app/src/components/channel/embeds/media/EmbedImage.tsx

@@ -251,6 +251,11 @@ export const EmbedImage: FC<EmbedImageProps> = observer(
 				aspectRatio: true,
 			},
 		);
+		const resolvedContainerStyle: React.CSSProperties = {
+			...containerStyle,
+			width: dimensions.width,
+			maxWidth: '100%',
+		};
 
 		const shouldRenderPlaceholder = error || !loaded;
 
@@ -295,7 +300,7 @@ export const EmbedImage: FC<EmbedImageProps> = observer(
 				<div className={styles.blurContainer}>
 					<div className={clsx(styles.rowContainer, isInline && styles.justifyEnd)}>
 						<div className={styles.innerContainer}>
-							<div className={styles.imageWrapper} style={containerStyle}>
+							<div className={styles.imageWrapper} style={resolvedContainerStyle}>
 								<div className={styles.imageContainer}>
 									{thumbHashURL && (
 										<div className={styles.thumbHashContainer}>
@@ -328,7 +333,7 @@ export const EmbedImage: FC<EmbedImageProps> = observer(
 				<div className={clsx(styles.rowContainer, isInline && styles.justifyEnd)}>
 					<MediaContainer
 						className={clsx(styles.mediaContainer, styles.cursorPointer)}
-						style={containerStyle}
+						style={resolvedContainerStyle}
 						showFavoriteButton={showFavoriteButton}
 						isFavorited={isFavorited}
 						onFavoriteClick={handleFavoriteClick}

fluxer_app/src/components/channel/embeds/media/EmbedVideo.tsx

@@ -247,7 +247,7 @@ const EmbedVideo: FC<EmbedVideoProps> = observer(
 					}
 				: {
 						width: dimensions.width,
-						maxWidth: dimensions.width,
+						maxWidth: '100%',
 						aspectRatio,
 					};