Skip to content

Commit cd05168

Browse files
sachin-intosachin-into
authored
fix: issue video music upload (#1067)
* chore: moved CustomButton from screen mini folder to component folder * chore: moved image and video selector from screen mini to component mini folder * fix: audio and image selector assets path * fix:fixed video upload issue * fix:upload music issue fixed and its layout * chore: removed unused line
1 parent 7a31d53 commit cd05168

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

44 files changed

+549
-336
lines changed

‎metro.config.js

+3-6
Original file line numberDiff line numberDiff line change
@@ -21,12 +21,9 @@ module.exports = (() => {
2121
config.resolver.resolveRequest = (context, moduleName, platform) => {
2222
if (
2323
platform !== "web" &&
24-
[
25-
"redux-persist-electron-storage",
26-
"electron",
27-
"electron-store",
28-
"react-native-vision-camera",
29-
].includes(moduleName)
24+
["redux-persist-electron-storage", "electron", "electron-store"].includes(
25+
moduleName,
26+
)
3027
) {
3128
return {
3229
type: "empty",

‎packages/components/FilePreview/EditableAudioPreview.tsx

+86-41
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,12 @@
11
import { Audio, AVPlaybackStatus } from "expo-av";
22
import React, { useEffect, useState } from "react";
3-
import { Image, View, TouchableOpacity, ActivityIndicator } from "react-native";
3+
import {
4+
Image,
5+
View,
6+
TouchableOpacity,
7+
ActivityIndicator,
8+
Platform,
9+
} from "react-native";
410

511
import { AudioWaveform } from "./AudioWaveform";
612
import { AUDIO_WAVEFORM_MAX_WIDTH } from "./AudioWaveform/AudioWaveform.web";
@@ -18,8 +24,10 @@ import { fontMedium32, fontSemibold12 } from "../../utils/style/fonts";
1824
import { layout } from "../../utils/style/layout";
1925
import { LocalFileData } from "../../utils/types/files";
2026
import { BrandText } from "../BrandText";
27+
import { OptimizedImage } from "../OptimizedImage";
2128
import { SVG } from "../SVG";
2229
import { FileUploader } from "../fileUploader";
30+
import { SelectPicture } from "../mini/SelectPicture";
2331

2432
interface AudioPreviewProps {
2533
file: LocalFileData;
@@ -151,49 +159,86 @@ export const EditableAudioPreview: React.FC<AudioPreviewProps> = ({
151159
)}
152160
</View>
153161

154-
<FileUploader
155-
onUpload={(files) => {
156-
onUploadThumbnail({ ...file, thumbnailFileData: files[0] });
157-
setThumbnailFile(files[0]);
158-
}}
159-
mimeTypes={IMAGE_MIME_TYPES}
160-
>
161-
{({ onPress }) => (
162-
<TouchableOpacity
163-
activeOpacity={0.9}
164-
style={{
165-
height: "100%",
166-
width: 80,
167-
backgroundColor: neutral44,
168-
borderTopRightRadius: 4,
169-
borderBottomRightRadius: 4,
170-
alignItems: "center",
171-
justifyContent: "center",
172-
}}
173-
onPress={onPress}
174-
>
175-
{thumbnailFile?.url ? (
176-
<Image
177-
source={{ uri: thumbnailFile.url }}
162+
{Platform.OS === "web" ? (
163+
<FileUploader
164+
onUpload={(files) => {
165+
onUploadThumbnail({ ...file, thumbnailFileData: files[0] });
166+
setThumbnailFile(files[0]);
167+
}}
168+
mimeTypes={IMAGE_MIME_TYPES}
169+
>
170+
{({ onPress }) => (
171+
<TouchableOpacity
172+
activeOpacity={0.9}
173+
style={{
174+
height: "100%",
175+
width: 80,
176+
backgroundColor: neutral44,
177+
borderTopRightRadius: 4,
178+
borderBottomRightRadius: 4,
179+
alignItems: "center",
180+
justifyContent: "center",
181+
}}
182+
onPress={onPress}
183+
>
184+
{thumbnailFile?.url ? (
185+
<Image
186+
source={{ uri: thumbnailFile.url }}
187+
style={{
188+
height: 80,
189+
width: 80,
190+
borderTopLeftRadius: 4,
191+
borderBottomLeftRadius: 4,
192+
}}
193+
resizeMode="cover"
194+
/>
195+
) : (
196+
<>
197+
<BrandText style={[fontMedium32]}>+</BrandText>
198+
<BrandText style={[fontSemibold12, { textAlign: "center" }]}>
199+
Image
200+
</BrandText>
201+
</>
202+
)}
203+
</TouchableOpacity>
204+
)}
205+
</FileUploader>
206+
) : null}
207+
{Platform.OS !== "web" && (
208+
<View
209+
style={{
210+
borderColor: "transparent",
211+
borderLeftColor: neutral00,
212+
borderWidth: 1,
213+
width: 70,
214+
}}
215+
>
216+
{thumbnailFile?.url ? (
217+
<View style={{ alignItems: "center" }}>
218+
<OptimizedImage
219+
sourceURI={thumbnailFile?.url}
178220
style={{
179-
height: 80,
180-
width: 80,
181-
borderTopLeftRadius: 4,
182-
borderBottomLeftRadius: 4,
221+
width: 70,
222+
height: 70,
223+
borderRadius: layout.spacing_x1,
183224
}}
184-
resizeMode="cover"
225+
width={70}
226+
height={70}
185227
/>
186-
) : (
187-
<>
188-
<BrandText style={[fontMedium32]}>+</BrandText>
189-
<BrandText style={[fontSemibold12, { textAlign: "center" }]}>
190-
Image
191-
</BrandText>
192-
</>
193-
)}
194-
</TouchableOpacity>
195-
)}
196-
</FileUploader>
228+
</View>
229+
) : (
230+
<SelectPicture
231+
onSelectFile={(files) => setThumbnailFile(files[0])}
232+
files={thumbnailFile ? [thumbnailFile] : []}
233+
squareSelector
234+
squareSelectorOptions={{
235+
placeholder: "",
236+
height: 70,
237+
}}
238+
/>
239+
)}
240+
</View>
241+
)}
197242
</View>
198243
);
199244
};

‎packages/screens/Mini/components/Button/CustomButton.tsx ‎packages/components/buttons/CustomButton.tsx

File renamed without changes.

‎packages/screens/Mini/components/MiniCommentInput/SelectAudioVideo.tsx ‎packages/components/mini/SelectAudioVideo.tsx

+20-13
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,8 @@
11
import * as DocumentPicker from "expo-document-picker";
2-
import React from "react";
3-
4-
import micSVG from "../../../../../assets/icons/mic-white.svg";
5-
import videoSVG from "../../../../../assets/icons/video.svg";
2+
import React, { ReactNode } from "react";
63

4+
import micSVG from "@/assets/icons/mic-white.svg";
5+
import videoSVG from "@/assets/icons/video.svg";
76
import { SVG } from "@/components/SVG";
87
import { CustomPressable } from "@/components/buttons/CustomPressable";
98
import { getAudioData } from "@/utils/audio";
@@ -17,9 +16,15 @@ type Props = {
1716
files?: LocalFileData[];
1817
onSelectFile: (data: LocalFileData[]) => void;
1918
type: FileType;
19+
title?: ReactNode;
2020
};
2121

22-
export const SelectAudioVideo = ({ onSelectFile, type, files }: Props) => {
22+
export const SelectAudioVideo = ({
23+
onSelectFile,
24+
type,
25+
files,
26+
title,
27+
}: Props) => {
2328
const onChooseFilePress = async (fileType: FileType) => {
2429
try {
2530
const acceptableMimeTypes =
@@ -81,14 +86,16 @@ export const SelectAudioVideo = ({ onSelectFile, type, files }: Props) => {
8186
onPress={() => onChooseFilePress(type)}
8287
disabled={Array.isArray(files) && files?.length > 0}
8388
>
84-
<SVG
85-
source={type === "audio" ? micSVG : videoSVG}
86-
height={24}
87-
width={24}
88-
style={{
89-
opacity: Array.isArray(files) && files?.length > 0 ? 0.7 : 1,
90-
}}
91-
/>
89+
{title || (
90+
<SVG
91+
source={type === "audio" ? micSVG : videoSVG}
92+
height={24}
93+
width={24}
94+
style={{
95+
opacity: Array.isArray(files) && files?.length > 0 ? 0.7 : 1,
96+
}}
97+
/>
98+
)}
9299
</CustomPressable>
93100
);
94101
};

‎packages/components/mini/SelectPicture.tsx

+128
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,128 @@
1+
import { MediaTypeOptions, launchImageLibraryAsync } from "expo-image-picker";
2+
import React from "react";
3+
import { View } from "react-native";
4+
5+
import { BrandText } from "../BrandText";
6+
7+
import cameraSVG from "@/assets/icons/camera-white.svg";
8+
import Img from "@/assets/icons/img.svg";
9+
import { SVG } from "@/components/SVG";
10+
import { CustomPressable } from "@/components/buttons/CustomPressable";
11+
import { IMAGE_MIME_TYPES } from "@/utils/mime";
12+
import { neutral33 } from "@/utils/style/colors";
13+
import { fontSemibold14 } from "@/utils/style/fonts";
14+
import { layout } from "@/utils/style/layout";
15+
import { LocalFileData } from "@/utils/types/files";
16+
17+
type Props = {
18+
files?: LocalFileData[];
19+
onSelectFile: (data: LocalFileData[]) => void;
20+
squareSelector?: boolean;
21+
squareSelectorOptions?: {
22+
placeholder?: string;
23+
height?: number;
24+
};
25+
hideRemove?: boolean;
26+
};
27+
28+
export const SelectPicture = ({
29+
files,
30+
onSelectFile,
31+
squareSelector = false,
32+
squareSelectorOptions = {
33+
placeholder: "Select Image",
34+
height: 198,
35+
},
36+
hideRemove = false,
37+
}: Props) => {
38+
const onCameraPress = async () => {
39+
try {
40+
const result = await launchImageLibraryAsync({
41+
mediaTypes: MediaTypeOptions.Images,
42+
selectionLimit: 1,
43+
});
44+
45+
if (
46+
result.assets &&
47+
result.assets.length > 0 &&
48+
result.assets[0].mimeType &&
49+
IMAGE_MIME_TYPES.includes(result?.assets?.[0]?.mimeType?.toLowerCase())
50+
) {
51+
const choseFile = result.assets[0];
52+
53+
if (files?.find((file) => file.fileName === choseFile.fileName)) return;
54+
55+
const imagePath = choseFile?.uri;
56+
const imageMime = `${choseFile.mimeType}`;
57+
if (imagePath) {
58+
const fileName = `${choseFile.fileName}`;
59+
60+
onSelectFile([
61+
...(files || []),
62+
{
63+
file: new File([], ""),
64+
fileName,
65+
fileType: "image",
66+
mimeType: imageMime,
67+
size: choseFile.fileSize || 0,
68+
url: choseFile?.uri || "",
69+
},
70+
]);
71+
}
72+
}
73+
} catch (error) {
74+
console.log(error);
75+
}
76+
};
77+
return (
78+
<CustomPressable
79+
onPress={onCameraPress}
80+
disabled={Array.isArray(files) && files?.length > 0}
81+
>
82+
{squareSelector ? (
83+
<View
84+
style={[
85+
{
86+
borderRadius: layout.spacing_x1,
87+
borderWidth: 1,
88+
borderColor: neutral33,
89+
height: squareSelectorOptions.height,
90+
alignItems: "center",
91+
justifyContent: "flex-end",
92+
},
93+
]}
94+
>
95+
<View
96+
style={{
97+
flexDirection: "row",
98+
alignItems: "center",
99+
backgroundColor: "#2B2B33",
100+
borderRadius: 32,
101+
paddingLeft: layout.spacing_x1,
102+
paddingRight: layout.spacing_x1_5,
103+
height: 32,
104+
marginBottom: layout.spacing_x2,
105+
gap: layout.spacing_x1,
106+
}}
107+
>
108+
<SVG source={Img} width={16} height={16} />
109+
{squareSelectorOptions.placeholder && (
110+
<BrandText style={fontSemibold14}>
111+
{squareSelectorOptions.placeholder}
112+
</BrandText>
113+
)}
114+
</View>
115+
</View>
116+
) : (
117+
<SVG
118+
source={cameraSVG}
119+
height={24}
120+
width={24}
121+
style={{
122+
opacity: Array.isArray(files) && files?.length > 0 ? 0.7 : 1,
123+
}}
124+
/>
125+
)}
126+
</CustomPressable>
127+
);
128+
};

0 commit comments

Comments
 (0)