Skip to content

Commit 9473ab2

Browse files
dohooodohooo
authored
Merge pull request #289 from Crossbell-Box/develop
Develop
2 parents 944395e + fbe9bf2 commit 9473ab2

13 files changed

Lines changed: 311 additions & 154 deletions

‎.changeset/fluffy-balloons-chew.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"xlog": patch
3+
---
4+
5+
Adjust feed item styles.

‎.changeset/itchy-snakes-clap.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"xlog": patch
3+
---
4+
5+
Support to pick images from album directly in the "CreateShortsButton".

‎.changeset/long-eels-shout.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"xlog": patch
3+
---
4+
5+
Addressed the swipe issue in "CreateShortsButton" on Android.

‎.changeset/short-vans-hug.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"xlog": patch
3+
---
4+
5+
Display shorts images normally.

‎.changeset/slimy-guests-repair.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"xlog": patch
3+
---
4+
5+
Supported jumping to short content details when clicking on the short content embed block.

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -155,6 +155,7 @@
155155
"npm-run-all": "^4.1.5",
156156
"patch-package": "^6.4.7",
157157
"path-browserify": "0.0.0",
158+
"path-to-regexp": "^6.2.1",
158159
"pinyin-pro": "^3.14.0",
159160
"punycode": "^1.4.1",
160161
"qrcode": "^1.5.1",

‎src/components/CreateShortsButton.tsx‎

Lines changed: 179 additions & 126 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,27 @@
11
import { useState, type FC, useRef } from "react";
22
import type { ScrollView as RNScrollVIew } from "react-native";
3-
import { InteractionManager, StyleSheet } from "react-native";
4-
import { TouchableWithoutFeedback } from "react-native-gesture-handler";
3+
import { StyleSheet } from "react-native";
4+
import { PanGestureHandler, TouchableWithoutFeedback } from "react-native-gesture-handler";
55
import Animated, { Easing, runOnJS, interpolate, interpolateColor, useAnimatedStyle, useSharedValue, withTiming, LinearTransition, FadeInLeft } from "react-native-reanimated";
66
import { Camera, useCameraPermission, useCameraDevice } from "react-native-vision-camera";
77

8-
import { Maximize2, Plus, X } from "@tamagui/lucide-icons";
8+
import { Image as ImageIcon, Maximize2, Plus, X } from "@tamagui/lucide-icons";
99
import { BlurView } from "expo-blur";
1010
import { Image } from "expo-image";
1111
import * as MediaLibrary from "expo-media-library";
12-
import { Button, ScrollView, Stack, View, XStack, YStack, useWindowDimensions } from "tamagui";
12+
import { Button, ScrollView, Stack, Text, View, XStack, YStack, useWindowDimensions } from "tamagui";
1313

1414
import { IS_ANDROID } from "@/constants";
1515
import { useColors } from "@/hooks/use-colors";
16-
import { useCreateShots } from "@/hooks/use-create-shots";
1716
import { useIsLogin } from "@/hooks/use-is-login";
1817
import { useRootNavigation } from "@/hooks/use-navigation";
18+
import { usePickImages } from "@/hooks/use-pick-images";
1919
import type { Photo } from "@/pages/TakePhoto";
2020

2121
import { XTouch } from "./XTouch";
2222

2323
export const CreateShortsButton: FC = () => {
24-
const { createShots } = useCreateShots();
24+
const { pickImages } = usePickImages();
2525
const navigation = useRootNavigation();
2626
const isLogin = useIsLogin();
2727
const { width } = useWindowDimensions();
@@ -137,6 +137,7 @@ export const CreateShortsButton: FC = () => {
137137
const isOpenAnimValue = useSharedValue(0);
138138
const targetWidth = width * 0.96;
139139
const targetHeight = 300;
140+
const photoSize = targetWidth / 4 * 0.9;
140141

141142
const containerAnimStyle = useAnimatedStyle(() => {
142143
const animValue = Math.max(0, isOpenAnimValue.value);
@@ -176,132 +177,184 @@ export const CreateShortsButton: FC = () => {
176177
});
177178
};
178179

180+
const selectImageFromAlbum = () => {
181+
pickImages().then((result) => {
182+
if (result) {
183+
setPhotos(photos => [
184+
...result,
185+
...photos,
186+
]);
187+
188+
setSelectedPhotos(selectedPhotos => [
189+
...result,
190+
...selectedPhotos,
191+
]);
192+
}
193+
});
194+
};
195+
179196
return (
180-
<Stack width={buttonSize} height={buttonSize} marginHorizontal={15} overflow="visible" zIndex={999}>
181-
<Animated.View
182-
style={[{
183-
borderRadius: 10,
184-
alignSelf: "center",
185-
position: "absolute",
186-
alignItems: "center",
187-
justifyContent: "center",
188-
overflow: "hidden",
189-
flex: 1,
190-
}, containerAnimStyle]}
191-
>
192-
<Animated.View style={[actionsContainerAnimStyle, { width: targetWidth, height: targetHeight, position: "absolute", borderRadius: 10, padding: 12 }]}>
193-
<BlurView tint="dark" intensity={IS_ANDROID ? 10 : 30} style={StyleSheet.absoluteFillObject}/>
194-
<XStack flex={1} gap={6}>
195-
<XStack flex={1} >
196-
<ScrollView ref={scrollViewRef} flex={1}>
197-
<XStack flexWrap="wrap" justifyContent="space-between">
198-
{
199-
mediaPermissionResponse?.granted && photos.map((item) => {
200-
const photoSize = targetWidth / 4 * 0.9;
201-
const isSelected = selectedPhotos.some(photo => photo.uri === item.uri);
202-
203-
return (
204-
<Animated.View key={item.uri} layout={LinearTransition.duration(150)} entering={FadeInLeft.duration(150)}>
205-
<TouchableWithoutFeedback
206-
style={{ marginBottom: 4 }}
207-
onPress={() => {
208-
if (isSelected) {
209-
setSelectedPhotos(selectedPhotos.filter(({ uri }) => uri !== item.uri));
210-
return;
211-
}
212-
213-
setSelectedPhotos([...selectedPhotos, item]);
214-
}}
215-
>
216-
<View width={photoSize} height={photoSize}>
217-
<Image source={{ uri: item.uri }} style={{ width: "100%", height: "100%", borderRadius: 10 }}/>
197+
<PanGestureHandler>
198+
<Stack width={buttonSize} height={buttonSize} marginHorizontal={15} overflow="visible" zIndex={999}>
199+
<Animated.View
200+
style={[{
201+
borderRadius: 10,
202+
alignSelf: "center",
203+
position: "absolute",
204+
alignItems: "center",
205+
justifyContent: "center",
206+
overflow: "hidden",
207+
flex: 1,
208+
}, containerAnimStyle]}
209+
>
210+
<Animated.View
211+
style={[
212+
actionsContainerAnimStyle, {
213+
width: targetWidth,
214+
height: targetHeight,
215+
position: "absolute",
216+
borderRadius: 10,
217+
padding: 12,
218+
}]
219+
}
220+
>
221+
<BlurView
222+
tint="dark"
223+
intensity={30}
224+
experimentalBlurMethod="dimezisBlurView"
225+
style={StyleSheet.absoluteFillObject}
226+
/>
227+
<XStack flex={1} gap={6}>
228+
<XStack flex={1} >
229+
<ScrollView ref={scrollViewRef} flex={1}>
230+
<XStack flexWrap="wrap" justifyContent="space-between">
231+
<Animated.View layout={LinearTransition.duration(150)} entering={FadeInLeft.duration(150)}>
232+
<TouchableWithoutFeedback
233+
style={{ marginBottom: 4 }}
234+
onPress={selectImageFromAlbum}
235+
>
236+
<View width={photoSize} height={photoSize} backgroundColor={"$primary"} borderRadius={10} alignItems="center" justifyContent="center">
237+
<ImageIcon size={"$3"}/>
238+
</View>
239+
</TouchableWithoutFeedback>
240+
</Animated.View>
241+
{
242+
mediaPermissionResponse?.granted && photos.map((item) => {
243+
const isSelected = selectedPhotos.some(photo => photo.uri === item.uri);
244+
245+
return (
246+
<Animated.View key={item.uri} layout={LinearTransition.duration(150)} entering={FadeInLeft.duration(150)}>
247+
<TouchableWithoutFeedback
248+
style={{ marginBottom: 4 }}
249+
onPress={() => {
250+
if (isSelected) {
251+
setSelectedPhotos(selectedPhotos.filter(({ uri }) => uri !== item.uri));
252+
return;
253+
}
254+
255+
setSelectedPhotos([...selectedPhotos, item]);
256+
}}
257+
>
258+
<View width={photoSize} height={photoSize}>
259+
<Image source={{ uri: item.uri }} style={{ width: "100%", height: "100%", borderRadius: 10 }}/>
260+
<Stack
261+
position="absolute"
262+
right="$2"
263+
bottom="$2"
264+
width={15}
265+
height={15}
266+
borderRadius={50}
267+
alignItems="center"
268+
justifyContent="center"
269+
borderWidth={1}
270+
borderColor={"white"}
271+
>
272+
{isSelected && <Stack width={10} height={10} borderRadius={50} backgroundColor={"$primary"}/>}
273+
</Stack>
274+
</View>
275+
</TouchableWithoutFeedback>
276+
</Animated.View>
277+
);
278+
})
279+
}
280+
</XStack>
281+
</ScrollView>
282+
</XStack>
283+
<YStack flex={1} gap={8} borderRadius={10}>
284+
<Stack flex={1} borderRadius={10} overflow="hidden">
285+
{hasPermission && (
286+
device
287+
? (
288+
<Stack flex={1}>
289+
{device && (
290+
<Camera
291+
ref={cameraRef}
292+
device={device}
293+
isActive={expanded}
294+
photo={true}
295+
video={false}
296+
audio={false}
297+
style={{ flex: 1 }}
298+
/>
299+
)}
300+
<XTouch onPress={handleOpenCamera} enableHaptics containerStyle={{
301+
position: "absolute",
302+
right: 12,
303+
top: 12,
304+
}}>
305+
<Maximize2 color="white" size={25}/>
306+
</XTouch>
307+
308+
<XTouch onPress={takePhoto} enableHaptics containerStyle={{
309+
position: "absolute",
310+
left: "50%",
311+
bottom: 12,
312+
transform: [{ translateX: -15 }],
313+
}}>
314+
<Stack borderRadius={50} borderWidth={1} borderColor={"white"} width={30} height={30} alignItems="center" justifyContent="center">
218315
<Stack
219-
position="absolute"
220-
right="$2"
221-
bottom="$2"
222-
width={15}
223-
height={15}
224316
borderRadius={50}
225-
alignItems="center"
226-
justifyContent="center"
227-
borderWidth={1}
228-
borderColor={"white"}
229-
>
230-
{isSelected && <Stack width={10} height={10} borderRadius={50} backgroundColor={"$primary"}/>}
231-
</Stack>
232-
</View>
233-
</TouchableWithoutFeedback>
234-
</Animated.View>
235-
);
236-
})
237-
}
317+
backgroundColor={"white"}
318+
width={25}
319+
height={25}
320+
/>
321+
</Stack>
322+
</XTouch>
323+
</Stack>
324+
)
325+
: (
326+
<View flex={1} alignItems="center" justifyContent="center">
327+
<Text textAlign="center" fontSize={"$1"}>
328+
Please use physical device, this feature is not supported on simulator.
329+
</Text>
330+
</View>
331+
)
332+
)}
333+
</Stack>
334+
<XStack alignItems="center" justifyContent="space-between" width={"100%"} gap={8}>
335+
<Button
336+
flex={1}
337+
disabled={selectedPhotos.length === 0}
338+
backgroundColor={selectedPhotos.length === 0 ? "$backgroundHover" : "$primary"}
339+
onPress={onHandleNext}
340+
>
341+
Next
342+
</Button>
343+
<Button onPress={toggle} backgroundColor={"$backgroundHover"} icon={<X size={22}/>} padding={12}/>
238344
</XStack>
239-
</ScrollView>
345+
</YStack>
240346
</XStack>
241-
<YStack flex={1} gap={8} borderRadius={10}>
242-
<Stack flex={1} borderRadius={10} overflow="hidden">
243-
{hasPermission && (
244-
<Stack flex={1}>
245-
{device && (
246-
<Camera
247-
ref={cameraRef}
248-
device={device}
249-
isActive={expanded}
250-
photo={true}
251-
video={false}
252-
audio={false}
253-
style={{ flex: 1 }}
254-
/>
255-
)}
256-
<XTouch onPress={handleOpenCamera} enableHaptics containerStyle={{
257-
position: "absolute",
258-
right: 12,
259-
top: 12,
260-
}}>
261-
<Maximize2 color="white" size={25}/>
262-
</XTouch>
263-
264-
<XTouch onPress={takePhoto} enableHaptics containerStyle={{
265-
position: "absolute",
266-
left: "50%",
267-
bottom: 12,
268-
transform: [{ translateX: -15 }],
269-
}}>
270-
<Stack borderRadius={50} borderWidth={1} borderColor={"white"} width={30} height={30} alignItems="center" justifyContent="center">
271-
<Stack
272-
borderRadius={50}
273-
backgroundColor={"white"}
274-
width={25}
275-
height={25}
276-
/>
277-
</Stack>
278-
</XTouch>
279-
</Stack>
280-
)}
281-
</Stack>
282-
<XStack alignItems="center" justifyContent="space-between" width={"100%"} gap={8}>
283-
<Button
284-
flex={1}
285-
disabled={selectedPhotos.length === 0}
286-
backgroundColor={selectedPhotos.length === 0 ? "$backgroundHover" : "$primary"}
287-
onPress={onHandleNext}
288-
>
289-
Next
290-
</Button>
291-
<Button onPress={toggle} backgroundColor={"$backgroundHover"} icon={<X size={22}/>} padding={12}/>
292-
</XStack>
293-
</YStack>
294-
</XStack>
295-
</Animated.View>
347+
</Animated.View>
296348

297-
<Animated.View style={[buttonAnimStyle, { flex: 1, justifyContent: "center", alignItems: "center" }]}>
298-
<TouchableWithoutFeedback onPress={handleOnPress}>
299-
<Stack flex={1} alignItems="center" justifyContent="center">
300-
<Plus color="white"/>
301-
</Stack>
302-
</TouchableWithoutFeedback>
349+
<Animated.View style={[buttonAnimStyle, { flex: 1, justifyContent: "center", alignItems: "center" }]}>
350+
<TouchableWithoutFeedback onPress={handleOnPress}>
351+
<Stack flex={1} alignItems="center" justifyContent="center">
352+
<Plus color="white"/>
353+
</Stack>
354+
</TouchableWithoutFeedback>
355+
</Animated.View>
303356
</Animated.View>
304-
</Animated.View>
305-
</Stack>
357+
</Stack>
358+
</PanGestureHandler>
306359
);
307360
};

0 commit comments

Comments
 (0)