fix: OptimizedImage usages

Signed-off-by: Norman Meier <[email protected]>
TERITORI · Feb 2, 2024 · ba096b4 · ba096b4
1 parent 66b4668
commit ba096b4
Show file tree

Hide file tree

Showing 8 changed files with 22 additions and 11 deletions.
diff --git 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<ImageProps, "source"> & {
     width: number;

diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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 */}
         <OptimizedImage
-          width={windowWidth < RESPONSIVE_BREAKPOINT_S ? windowWidth : width}
+          width={1280}
           height={320}
           sourceURI={metadata?.public_profile_header}
-          fallbackURI={defaultUserProfileBannerPNG}
+          fallbackURI="../../../../assets/default-images/default-user-profile-banner.png"
           style={{
             height: "100%",
             width: "100%",