From ba096b43cf9fe4367db20a61f883ae4da101f4d7 Mon Sep 17 00:00:00 2001 From: Norman Meier Date: Fri, 2 Feb 2024 12:30:36 +0100 Subject: [PATCH] fix: OptimizedImage usages Signed-off-by: Norman Meier --- packages/components/OptimizedImage.tsx | 6 ++++-- packages/components/mediaPlayer/MediaPlayerVideo.tsx | 3 ++- packages/components/music/TrackCard.tsx | 4 +++- .../socialFeed/SocialCard/MusicPostTrackContent.tsx | 4 +++- .../socialFeed/SocialCard/SocialMessageContent.tsx | 4 +++- .../socialFeed/SocialCard/cards/SocialArticleCard.tsx | 3 ++- packages/components/video/VideoCard.tsx | 4 +++- packages/screens/UserPublicProfile/components/UPPIntro.tsx | 5 ++--- 8 files changed, 22 insertions(+), 11 deletions(-) diff --git a/packages/components/OptimizedImage.tsx b/packages/components/OptimizedImage.tsx index 6e14b62241..ec9347cea3 100644 --- a/packages/components/OptimizedImage.tsx +++ b/packages/components/OptimizedImage.tsx @@ -4,8 +4,10 @@ import { Image, ImageProps, View, StyleSheet, PixelRatio } from "react-native"; import { neutral33 } from "../utils/style/colors"; -// This only supports uri images since the proxy is only for external images - +/** + * This only supports uri images since the proxy is only for external images + * The width and height props are the source image dimensions, they should not be dynamic, otherwise it will overwelm the resizing proxy + */ export const OptimizedImage: React.FC< Omit & { width: number; diff --git a/packages/components/mediaPlayer/MediaPlayerVideo.tsx b/packages/components/mediaPlayer/MediaPlayerVideo.tsx index f4f4031b1c..094fba1d76 100644 --- a/packages/components/mediaPlayer/MediaPlayerVideo.tsx +++ b/packages/components/mediaPlayer/MediaPlayerVideo.tsx @@ -12,7 +12,6 @@ import { v4 as uuidv4 } from "uuid"; import { TimerSlider } from "./TimerSlider"; import { VolumeSlider } from "./VolumeSlider"; -import defaultThumbnailImage from "../../../assets/default-images/default-video-thumbnail.jpg"; import FullScreenIcon from "../../../assets/icons/media-player/full-screen.svg"; import NextIcon from "../../../assets/icons/media-player/next.svg"; import PauseIcon from "../../../assets/icons/pause.svg"; @@ -38,6 +37,8 @@ import { CustomPressable } from "../buttons/CustomPressable"; import { SocialFeedVideoMetadata } from "../socialFeed/NewsFeed/NewsFeed.type"; import { SOCIAl_CARD_BORDER_RADIUS } from "../socialFeed/SocialCard/cards/SocialThreadCard"; import { SpacerColumn, SpacerRow } from "../spacer"; +const defaultThumbnailImage = + "../../../assets/default-images/default-video-thumbnail.jpg"; interface MediaPlayerVideoProps { videoMetadata: SocialFeedVideoMetadata; diff --git a/packages/components/music/TrackCard.tsx b/packages/components/music/TrackCard.tsx index c76bb08f29..bb74741417 100644 --- a/packages/components/music/TrackCard.tsx +++ b/packages/components/music/TrackCard.tsx @@ -9,7 +9,6 @@ import { StyleSheet, } from "react-native"; -import defaultThumbnailImage from "../../../assets/default-images/default-track-thumbnail.png"; import NormalPlay from "../../../assets/icons/music/normal-play.svg"; import ThreeDotsCircleWhite from "../../../assets/icons/music/three-dot-circle-white.svg"; import { Post } from "../../api/feed/v1/feed"; @@ -32,6 +31,9 @@ import { CustomPressable } from "../buttons/CustomPressable"; import { ZodSocialFeedTrackMetadata } from "../socialFeed/NewsFeed/NewsFeed.type"; import { SpacerColumn } from "../spacer"; +const defaultThumbnailImage = + "../../../assets/default-images/default-track-thumbnail.png"; + const BUTTONS_HEIGHT = 28; export const TRACK_CARD_WIDTH = 242; export const TrackCard: React.FC<{ diff --git a/packages/components/socialFeed/SocialCard/MusicPostTrackContent.tsx b/packages/components/socialFeed/SocialCard/MusicPostTrackContent.tsx index 623f7a6b7b..7f1778aa34 100644 --- a/packages/components/socialFeed/SocialCard/MusicPostTrackContent.tsx +++ b/packages/components/socialFeed/SocialCard/MusicPostTrackContent.tsx @@ -1,6 +1,5 @@ import React, { FC } from "react"; -import defaultThumbnailImage from "../../../../assets/default-images/default-track-thumbnail.png"; import { Post } from "../../../api/feed/v1/feed"; import { zodTryParseJSON } from "../../../utils/sanitize"; import { neutralA3 } from "../../../utils/style/colors"; @@ -10,6 +9,9 @@ import { AudioView } from "../../FilePreview/AudioView"; import { SpacerColumn } from "../../spacer"; import { ZodSocialFeedTrackMetadata } from "../NewsFeed/NewsFeed.type"; +const defaultThumbnailImage = + "../../../../assets/default-images/default-track-thumbnail.png"; + export const MusicPostTrackContent: FC<{ post: Post; }> = ({ post }) => { diff --git a/packages/components/socialFeed/SocialCard/SocialMessageContent.tsx b/packages/components/socialFeed/SocialCard/SocialMessageContent.tsx index 59ba1839a1..9f03a3ac9d 100644 --- a/packages/components/socialFeed/SocialCard/SocialMessageContent.tsx +++ b/packages/components/socialFeed/SocialCard/SocialMessageContent.tsx @@ -1,7 +1,6 @@ import React, { Fragment, useMemo } from "react"; import { v4 as uuidv4 } from "uuid"; -import defaultThumbnailImage from "../../../../assets/default-images/default-track-thumbnail.png"; import { Post } from "../../../api/feed/v1/feed"; import { HTML_TAG_REGEXP } from "../../../utils/regex"; import { zodTryParseJSON } from "../../../utils/sanitize"; @@ -12,6 +11,9 @@ import { VideoView } from "../../FilePreview/VideoView"; import { SpacerColumn } from "../../spacer"; import { ZodSocialFeedPostMetadata } from "../NewsFeed/NewsFeed.type"; import { TextRenderer } from "../NewsFeed/TextRenderer/TextRenderer"; + +const defaultThumbnailImage = + "../../../../assets/default-images/default-track-thumbnail.png"; interface Props { post: Post; isPreview?: boolean; diff --git a/packages/components/socialFeed/SocialCard/cards/SocialArticleCard.tsx b/packages/components/socialFeed/SocialCard/cards/SocialArticleCard.tsx index 717a7cf486..c8494849ca 100644 --- a/packages/components/socialFeed/SocialCard/cards/SocialArticleCard.tsx +++ b/packages/components/socialFeed/SocialCard/cards/SocialArticleCard.tsx @@ -3,7 +3,6 @@ import React, { FC, memo, useEffect, useMemo, useState } from "react"; import { StyleProp, useWindowDimensions, View, ViewStyle } from "react-native"; import { SOCIAl_CARD_BORDER_RADIUS } from "./SocialThreadCard"; -import defaultThumbnailImage from "../../../../../assets/default-images/default-article-thumbnail.png"; import { Post } from "../../../../api/feed/v1/feed"; import { useNSUserInfo } from "../../../../hooks/useNSUserInfo"; import { useSelectedNetworkInfo } from "../../../../hooks/useSelectedNetwork"; @@ -43,6 +42,8 @@ import { FlaggedCardFooter } from "../FlaggedCardFooter"; import { SocialCardFooter } from "../SocialCardFooter"; import { SocialCardHeader } from "../SocialCardHeader"; import { SocialCardWrapper } from "../SocialCardWrapper"; +const defaultThumbnailImage = + "../../../../../assets/default-images/default-article-thumbnail.png"; const ARTICLE_CARD_PADDING_VERTICAL = layout.spacing_x2; const ARTICLE_CARD_PADDING_HORIZONTAL = layout.spacing_x2_5; diff --git a/packages/components/video/VideoCard.tsx b/packages/components/video/VideoCard.tsx index 5a7e0008c2..7cc7216c5a 100644 --- a/packages/components/video/VideoCard.tsx +++ b/packages/components/video/VideoCard.tsx @@ -9,7 +9,6 @@ import { ViewStyle, } from "react-native"; -import defaultThumbnailImage from "../../../assets/default-images/default-video-thumbnail.jpg"; import { Post } from "../../api/feed/v1/feed"; import { useNSUserInfo } from "../../hooks/useNSUserInfo"; import { useSelectedNetworkId } from "../../hooks/useSelectedNetwork"; @@ -40,6 +39,9 @@ import { ZodSocialFeedVideoMetadata } from "../socialFeed/NewsFeed/NewsFeed.type import { DateTime } from "../socialFeed/SocialCard/DateTime"; import { SpacerColumn, SpacerRow } from "../spacer"; +const defaultThumbnailImage = + "../../../assets/default-images/default-video-thumbnail.jpg"; + const IMAGE_HEIGHT = 173; const VIDEO_CARD_WIDTH = 261; export const VideoCard: React.FC<{ diff --git a/packages/screens/UserPublicProfile/components/UPPIntro.tsx b/packages/screens/UserPublicProfile/components/UPPIntro.tsx index 9f943c58eb..4a7324aae6 100644 --- a/packages/screens/UserPublicProfile/components/UPPIntro.tsx +++ b/packages/screens/UserPublicProfile/components/UPPIntro.tsx @@ -1,7 +1,6 @@ import React from "react"; import { Linking, useWindowDimensions, View } from "react-native"; -import defaultUserProfileBannerPNG from "../../../../assets/default-images/default-user-profile-banner.png"; import discordSVG from "../../../../assets/icons/discord.svg"; import infoSVG from "../../../../assets/icons/info_black.svg"; import shareSVG from "../../../../assets/icons/share.svg"; @@ -53,10 +52,10 @@ export const UPPIntro: React.FC<{ > {/* Banner */}