Skip to content

Commit

Permalink
Merge pull request #289 from Crossbell-Box/develop
Browse files Browse the repository at this point in the history 
Develop
  • Loading branch information
@dohooo
dohooo authored Jan 15, 2024
2 parents 944395e + fbe9bf2 commit 9473ab2
Show file tree
Hide file tree
Showing 13 changed files with 311 additions and 154 deletions.
5 changes: 5 additions & 0 deletions .changeset/fluffy-balloons-chew.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"xlog": patch
---

Adjust feed item styles.
5 changes: 5 additions & 0 deletions .changeset/itchy-snakes-clap.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"xlog": patch
---

Support to pick images from album directly in the "CreateShortsButton".
5 changes: 5 additions & 0 deletions .changeset/long-eels-shout.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"xlog": patch
---

Addressed the swipe issue in "CreateShortsButton" on Android.
5 changes: 5 additions & 0 deletions .changeset/short-vans-hug.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"xlog": patch
---

Display shorts images normally.
5 changes: 5 additions & 0 deletions .changeset/slimy-guests-repair.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"xlog": patch
---

Supported jumping to short content details when clicking on the short content embed block.
1 change: 1 addition & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -155,6 +155,7 @@
"npm-run-all": "^4.1.5",
"patch-package": "^6.4.7",
"path-browserify": "0.0.0",
"path-to-regexp": "^6.2.1",
"pinyin-pro": "^3.14.0",
"punycode": "^1.4.1",
"qrcode": "^1.5.1",
Expand Down
305 changes: 179 additions & 126 deletions src/components/CreateShortsButton.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,27 +1,27 @@
import { useState, type FC, useRef } from "react";
import type { ScrollView as RNScrollVIew } from "react-native";
import { InteractionManager, StyleSheet } from "react-native";
import { TouchableWithoutFeedback } from "react-native-gesture-handler";
import { StyleSheet } from "react-native";
import { PanGestureHandler, TouchableWithoutFeedback } from "react-native-gesture-handler";
import Animated, { Easing, runOnJS, interpolate, interpolateColor, useAnimatedStyle, useSharedValue, withTiming, LinearTransition, FadeInLeft } from "react-native-reanimated";
import { Camera, useCameraPermission, useCameraDevice } from "react-native-vision-camera";

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

import { IS_ANDROID } from "@/constants";
import { useColors } from "@/hooks/use-colors";
import { useCreateShots } from "@/hooks/use-create-shots";
import { useIsLogin } from "@/hooks/use-is-login";
import { useRootNavigation } from "@/hooks/use-navigation";
import { usePickImages } from "@/hooks/use-pick-images";
import type { Photo } from "@/pages/TakePhoto";

import { XTouch } from "./XTouch";

export const CreateShortsButton: FC = () => {
const { createShots } = useCreateShots();
const { pickImages } = usePickImages();
const navigation = useRootNavigation();
const isLogin = useIsLogin();
const { width } = useWindowDimensions();
Expand Down Expand Up @@ -137,6 +137,7 @@ export const CreateShortsButton: FC = () => {
const isOpenAnimValue = useSharedValue(0);
const targetWidth = width * 0.96;
const targetHeight = 300;
const photoSize = targetWidth / 4 * 0.9;

const containerAnimStyle = useAnimatedStyle(() => {
const animValue = Math.max(0, isOpenAnimValue.value);
Expand Down Expand Up @@ -176,132 +177,184 @@ export const CreateShortsButton: FC = () => {
});
};

const selectImageFromAlbum = () => {
pickImages().then((result) => {
if (result) {
setPhotos(photos => [
...result,
...photos,
]);

setSelectedPhotos(selectedPhotos => [
...result,
...selectedPhotos,
]);
}
});
};

return (
<Stack width={buttonSize} height={buttonSize} marginHorizontal={15} overflow="visible" zIndex={999}>
<Animated.View
style={[{
borderRadius: 10,
alignSelf: "center",
position: "absolute",
alignItems: "center",
justifyContent: "center",
overflow: "hidden",
flex: 1,
}, containerAnimStyle]}
>
<Animated.View style={[actionsContainerAnimStyle, { width: targetWidth, height: targetHeight, position: "absolute", borderRadius: 10, padding: 12 }]}>
<BlurView tint="dark" intensity={IS_ANDROID ? 10 : 30} style={StyleSheet.absoluteFillObject}/>
<XStack flex={1} gap={6}>
<XStack flex={1} >
<ScrollView ref={scrollViewRef} flex={1}>
<XStack flexWrap="wrap" justifyContent="space-between">
{
mediaPermissionResponse?.granted && photos.map((item) => {
const photoSize = targetWidth / 4 * 0.9;
const isSelected = selectedPhotos.some(photo => photo.uri === item.uri);

return (
<Animated.View key={item.uri} layout={LinearTransition.duration(150)} entering={FadeInLeft.duration(150)}>
<TouchableWithoutFeedback
style={{ marginBottom: 4 }}
onPress={() => {
if (isSelected) {
setSelectedPhotos(selectedPhotos.filter(({ uri }) => uri !== item.uri));
return;
}

setSelectedPhotos([...selectedPhotos, item]);
}}
>
<View width={photoSize} height={photoSize}>
<Image source={{ uri: item.uri }} style={{ width: "100%", height: "100%", borderRadius: 10 }}/>
<PanGestureHandler>
<Stack width={buttonSize} height={buttonSize} marginHorizontal={15} overflow="visible" zIndex={999}>
<Animated.View
style={[{
borderRadius: 10,
alignSelf: "center",
position: "absolute",
alignItems: "center",
justifyContent: "center",
overflow: "hidden",
flex: 1,
}, containerAnimStyle]}
>
<Animated.View
style={[
actionsContainerAnimStyle, {
width: targetWidth,
height: targetHeight,
position: "absolute",
borderRadius: 10,
padding: 12,
}]
}
>
<BlurView
tint="dark"
intensity={30}
experimentalBlurMethod="dimezisBlurView"
style={StyleSheet.absoluteFillObject}
/>
<XStack flex={1} gap={6}>
<XStack flex={1} >
<ScrollView ref={scrollViewRef} flex={1}>
<XStack flexWrap="wrap" justifyContent="space-between">
<Animated.View layout={LinearTransition.duration(150)} entering={FadeInLeft.duration(150)}>
<TouchableWithoutFeedback
style={{ marginBottom: 4 }}
onPress={selectImageFromAlbum}
>
<View width={photoSize} height={photoSize} backgroundColor={"$primary"} borderRadius={10} alignItems="center" justifyContent="center">
<ImageIcon size={"$3"}/>
</View>
</TouchableWithoutFeedback>
</Animated.View>
{
mediaPermissionResponse?.granted && photos.map((item) => {
const isSelected = selectedPhotos.some(photo => photo.uri === item.uri);

return (
<Animated.View key={item.uri} layout={LinearTransition.duration(150)} entering={FadeInLeft.duration(150)}>
<TouchableWithoutFeedback
style={{ marginBottom: 4 }}
onPress={() => {
if (isSelected) {
setSelectedPhotos(selectedPhotos.filter(({ uri }) => uri !== item.uri));
return;
}

setSelectedPhotos([...selectedPhotos, item]);
}}
>
<View width={photoSize} height={photoSize}>
<Image source={{ uri: item.uri }} style={{ width: "100%", height: "100%", borderRadius: 10 }}/>
<Stack
position="absolute"
right="$2"
bottom="$2"
width={15}
height={15}
borderRadius={50}
alignItems="center"
justifyContent="center"
borderWidth={1}
borderColor={"white"}
>
{isSelected && <Stack width={10} height={10} borderRadius={50} backgroundColor={"$primary"}/>}
</Stack>
</View>
</TouchableWithoutFeedback>
</Animated.View>
);
})
}
</XStack>
</ScrollView>
</XStack>
<YStack flex={1} gap={8} borderRadius={10}>
<Stack flex={1} borderRadius={10} overflow="hidden">
{hasPermission && (
device
? (
<Stack flex={1}>
{device && (
<Camera
ref={cameraRef}
device={device}
isActive={expanded}
photo={true}
video={false}
audio={false}
style={{ flex: 1 }}
/>
)}
<XTouch onPress={handleOpenCamera} enableHaptics containerStyle={{
position: "absolute",
right: 12,
top: 12,
}}>
<Maximize2 color="white" size={25}/>
</XTouch>

<XTouch onPress={takePhoto} enableHaptics containerStyle={{
position: "absolute",
left: "50%",
bottom: 12,
transform: [{ translateX: -15 }],
}}>
<Stack borderRadius={50} borderWidth={1} borderColor={"white"} width={30} height={30} alignItems="center" justifyContent="center">
<Stack
position="absolute"
right="$2"
bottom="$2"
width={15}
height={15}
borderRadius={50}
alignItems="center"
justifyContent="center"
borderWidth={1}
borderColor={"white"}
>
{isSelected && <Stack width={10} height={10} borderRadius={50} backgroundColor={"$primary"}/>}
</Stack>
</View>
</TouchableWithoutFeedback>
</Animated.View>
);
})
}
backgroundColor={"white"}
width={25}
height={25}
/>
</Stack>
</XTouch>
</Stack>
)
: (
<View flex={1} alignItems="center" justifyContent="center">
<Text textAlign="center" fontSize={"$1"}>
Please use physical device, this feature is not supported on simulator.
</Text>
</View>
)
)}
</Stack>
<XStack alignItems="center" justifyContent="space-between" width={"100%"} gap={8}>
<Button
flex={1}
disabled={selectedPhotos.length === 0}
backgroundColor={selectedPhotos.length === 0 ? "$backgroundHover" : "$primary"}
onPress={onHandleNext}
>
Next
</Button>
<Button onPress={toggle} backgroundColor={"$backgroundHover"} icon={<X size={22}/>} padding={12}/>
</XStack>
</ScrollView>
</YStack>
</XStack>
<YStack flex={1} gap={8} borderRadius={10}>
<Stack flex={1} borderRadius={10} overflow="hidden">
{hasPermission && (
<Stack flex={1}>
{device && (
<Camera
ref={cameraRef}
device={device}
isActive={expanded}
photo={true}
video={false}
audio={false}
style={{ flex: 1 }}
/>
)}
<XTouch onPress={handleOpenCamera} enableHaptics containerStyle={{
position: "absolute",
right: 12,
top: 12,
}}>
<Maximize2 color="white" size={25}/>
</XTouch>

<XTouch onPress={takePhoto} enableHaptics containerStyle={{
position: "absolute",
left: "50%",
bottom: 12,
transform: [{ translateX: -15 }],
}}>
<Stack borderRadius={50} borderWidth={1} borderColor={"white"} width={30} height={30} alignItems="center" justifyContent="center">
<Stack
borderRadius={50}
backgroundColor={"white"}
width={25}
height={25}
/>
</Stack>
</XTouch>
</Stack>
)}
</Stack>
<XStack alignItems="center" justifyContent="space-between" width={"100%"} gap={8}>
<Button
flex={1}
disabled={selectedPhotos.length === 0}
backgroundColor={selectedPhotos.length === 0 ? "$backgroundHover" : "$primary"}
onPress={onHandleNext}
>
Next
</Button>
<Button onPress={toggle} backgroundColor={"$backgroundHover"} icon={<X size={22}/>} padding={12}/>
</XStack>
</YStack>
</XStack>
</Animated.View>
</Animated.View>

<Animated.View style={[buttonAnimStyle, { flex: 1, justifyContent: "center", alignItems: "center" }]}>
<TouchableWithoutFeedback onPress={handleOnPress}>
<Stack flex={1} alignItems="center" justifyContent="center">
<Plus color="white"/>
</Stack>
</TouchableWithoutFeedback>
<Animated.View style={[buttonAnimStyle, { flex: 1, justifyContent: "center", alignItems: "center" }]}>
<TouchableWithoutFeedback onPress={handleOnPress}>
<Stack flex={1} alignItems="center" justifyContent="center">
<Plus color="white"/>
</Stack>
</TouchableWithoutFeedback>
</Animated.View>
</Animated.View>
</Animated.View>
</Stack>
</Stack>
</PanGestureHandler>
);
};
Loading

0 comments on commit 9473ab2

Please sign in to comment.