refactor: decreased comment preview image and video height

TERITORI · Feb 27, 2024 · 9c10a6d · 9c10a6d
1 parent 89c2538
commit 9c10a6d
Show file tree

Hide file tree

Showing 4 changed files with 87 additions and 74 deletions.
diff --git a/packages/components/FilePreview/ImagesViews.tsx b/packages/components/FilePreview/ImagesViews.tsx
@@ -11,6 +11,8 @@ import { LocalFileData, RemoteFileData } from "../../utils/types/files";
 import { BrandText } from "../BrandText";
 import { OptimizedImage } from "../OptimizedImage";
 
+import { useAppMode } from "@/hooks/useAppMode";
+
 interface ImagePreviewProps {
   files: LocalFileData[] | RemoteFileData[];
   onDelete?: (file: LocalFileData | RemoteFileData) => void;
@@ -42,6 +44,7 @@ export const ImagesViews: React.FC<ImagePreviewProps> = ({
   const [activeIndex, setActiveIndex] = useState(0);
   const [isFullView, setFullView] = useState(false);
   const [formattedFiles, setFormattedFiles] = useState(files);
+  const [appMode] = useAppMode();
 
   useEffect(() => {
     const fetchContent = async () => {
@@ -100,7 +103,9 @@ export const ImagesViews: React.FC<ImagePreviewProps> = ({
             // @ts-expect-error: description todo
             style={{
               padding: layout.spacing_x1,
-              ...getDimension(index, files.length),
+              ...(appMode === "mini"
+                ? { height: 120, width: "50%" }
+                : getDimension(index, files.length)),
             }}
           >
             {isEditable && onDelete && (

diff --git a/packages/components/FilePreview/VideoView.tsx b/packages/components/FilePreview/VideoView.tsx
@@ -11,6 +11,8 @@ import { LocalFileData, RemoteFileData } from "../../utils/types/files";
 import { BrandText } from "../BrandText";
 import { MediaPlayerVideo } from "../mediaPlayer/MediaPlayerVideo";
 
+import { useAppMode } from "@/hooks/useAppMode";
+
 interface VideoPreviewProps {
   file: LocalFileData | RemoteFileData;
   onDelete?: (file: LocalFileData | RemoteFileData) => void;
@@ -26,6 +28,7 @@ export const VideoView: React.FC<VideoPreviewProps> = ({
   postId,
   isEditable = false,
 }) => {
+  const [appMode] = useAppMode();
   const videoMetadata: SocialFeedVideoMetadata = {
     title: "Video from Social Feed",
     description: "",
@@ -53,14 +56,14 @@ export const VideoView: React.FC<VideoPreviewProps> = ({
           source={{ uri: web3ToWeb2URI(videoMetadata.videoFile.url) }}
           resizeMode={ResizeMode.CONTAIN}
           style={{
-            height: 400,
+            height: appMode === "mini" ? 120 : 400,
           }}
         />
       ) : (
         <MediaPlayerVideo
           videoMetadata={videoMetadata}
           style={{
-            height: 400,
+            height: appMode === "mini" ? 120 : 400,
           }}
           resizeMode={ResizeMode.CONTAIN}
           authorId={authorId}

diff --git a/packages/screens/Mini/components/MiniCommentInput/CommentTextInput.tsx b/packages/screens/Mini/components/MiniCommentInput/CommentTextInput.tsx
@@ -45,7 +45,7 @@ const CHARS_LIMIT_WARNING_MULTIPLIER = 0.92;
 
 export const CommentTextInput = React.forwardRef<MiniCommentInputHandle, Props>(
   ({ formValues, setValue, setSelection, onBlur, onFocus }, forwardRef) => {
-    const inputMaxHeight = 400;
+    const inputMaxHeight = 200;
     const inputMinHeight = 30;
     const inputHeight = useSharedValue(30);
     const inputRef = useRef<TextInput>(null);
@@ -148,43 +148,45 @@ export const CommentTextInput = React.forwardRef<MiniCommentInputHandle, Props>(
         {formValues.files && formValues.files.length > 0 ? (
           <>
             <SpacerColumn size={3} />
-            <FilesPreviewsContainer
-              files={formValues.files}
-              gifs={formValues.gifs}
-              onDelete={(file) => {
-                setValue(
-                  "files",
-                  removeFileFromArray(
-                    formValues?.files || [],
-                    file as LocalFileData,
-                  ),
-                );
-              }}
-              onDeleteGIF={(url) => {
-                setValue(
-                  "gifs",
-                  (formValues?.gifs || [])?.filter((gif) => gif !== url),
-                );
-                const gifFile = formValues?.files?.find((x) => x.url === url);
-                if (gifFile) {
+            <View style={{ maxHeight: 120 }}>
+              <FilesPreviewsContainer
+                files={formValues.files}
+                gifs={formValues.gifs}
+                onDelete={(file) => {
                   setValue(
                     "files",
                     removeFileFromArray(
                       formValues?.files || [],
-                      gifFile as LocalFileData,
+                      file as LocalFileData,
                     ),
                   );
-                }
-              }}
-              onAudioUpdate={(updatedFile) => {
-                if (formValues?.files?.length) {
+                }}
+                onDeleteGIF={(url) => {
                   setValue(
-                    "files",
-                    replaceFileInArray(formValues?.files, updatedFile),
+                    "gifs",
+                    (formValues?.gifs || [])?.filter((gif) => gif !== url),
                   );
-                }
-              }}
-            />
+                  const gifFile = formValues?.files?.find((x) => x.url === url);
+                  if (gifFile) {
+                    setValue(
+                      "files",
+                      removeFileFromArray(
+                        formValues?.files || [],
+                        gifFile as LocalFileData,
+                      ),
+                    );
+                  }
+                }}
+                onAudioUpdate={(updatedFile) => {
+                  if (formValues?.files?.length) {
+                    setValue(
+                      "files",
+                      replaceFileInArray(formValues?.files, updatedFile),
+                    );
+                  }
+                }}
+              />
+            </View>
           </>
         ) : null}
       </View>

diff --git a/packages/screens/Mini/components/MiniCommentInput/SimpleCommentInput.tsx b/packages/screens/Mini/components/MiniCommentInput/SimpleCommentInput.tsx
@@ -5,6 +5,7 @@ import penSVG from "../../../../../assets/icons/pen.svg";
 
 import FlexRow from "@/components/FlexRow";
 import { SVG } from "@/components/SVG";
+import { CustomPressable } from "@/components/buttons/CustomPressable";
 import { neutral77, neutralA3, secondaryColor } from "@/utils/style/colors";
 import { fontSemibold16 } from "@/utils/style/fonts";
 import { layout } from "@/utils/style/layout";
@@ -23,46 +24,48 @@ export const SimpleCommentInput = ({
   style,
 }: Props) => {
   return (
-    <View
-      style={{
-        borderRadius: layout.borderRadius,
-        borderWidth: 1,
-        borderColor: neutralA3,
-        paddingHorizontal: layout.spacing_x1,
-        paddingVertical: layout.spacing_x0_75,
-        marginHorizontal: layout.spacing_x2,
-        ...style,
-      }}
-    >
-      <FlexRow style={{ alignItems: "center" }}>
-        <SVG
-          height={24}
-          width={24}
-          source={penSVG}
-          color={secondaryColor}
-          style={{
-            alignSelf: "flex-end",
-            marginRight: layout.spacing_x1_5,
-          }}
-        />
-        <TextInput
-          value={value}
-          onFocus={onFocus}
-          onBlur={onBlur}
-          placeholder="Hey yo! Write your comment"
-          placeholderTextColor={neutral77}
-          multiline
-          readOnly
-          onPressOut={onFocus}
-          style={[
-            fontSemibold16,
-            {
-              height: 30,
-              color: secondaryColor,
-            },
-          ]}
-        />
-      </FlexRow>
-    </View>
+    <CustomPressable onPress={onFocus}>
+      <View
+        style={{
+          borderRadius: layout.borderRadius,
+          borderWidth: 1,
+          borderColor: neutralA3,
+          paddingHorizontal: layout.spacing_x1,
+          paddingVertical: layout.spacing_x0_75,
+          marginHorizontal: layout.spacing_x2,
+          ...style,
+        }}
+      >
+        <FlexRow style={{ alignItems: "center" }}>
+          <SVG
+            height={24}
+            width={24}
+            source={penSVG}
+            color={secondaryColor}
+            style={{
+              alignSelf: "flex-end",
+              marginRight: layout.spacing_x1_5,
+            }}
+          />
+          <TextInput
+            value={value}
+            onFocus={onFocus}
+            onBlur={onBlur}
+            placeholder="Hey yo! Write your comment"
+            placeholderTextColor={neutral77}
+            multiline
+            readOnly
+            style={[
+              fontSemibold16,
+              {
+                height: 30,
+                color: secondaryColor,
+              },
+            ]}
+            onPressOut={onFocus}
+          />
+        </FlexRow>
+      </View>
+    </CustomPressable>
   );
 };