martin/databag
1
0
Fork 0
mirror of https://github.com/balzack/databag.git synced 2025-04-22 09:35:16 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

updating carousel dismiss mechanism

Browse Source
This commit is contained in:
Roland Osborne 2022-10-17 13:11:24 -07:00
parent 9c8d76226b
commit 0591ed6170
7 changed files with 52 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
app/mobile/src/session/conversation/topicItem/TopicItem.jsx
View File

@ -27,11 +27,11 @@ export function TopicItem({ item, focused, focus }) {
<ImageAsset topicId={item.topicId} asset={asset.item.image} dismiss={actions.hideCarousel} />
)}
{ asset.item.video && (
<VideoAsset topicId={item.topicId} asset={asset.item.video} />
<VideoAsset topicId={item.topicId} asset={asset.item.video} dismiss={actions.hideCarousel} />
)}
{ asset.item.audio && (
<AudioAsset topicId={item.topicId} asset={asset.item.audio} active={state.activeId == asset.dataIndex}
setActive={() => actions.setActive(asset.dataIndex)} />
setActive={() => actions.setActive(asset.dataIndex)} dismiss={actions.hideCarousel} />
)}
</View>
)

5
app/mobile/src/session/conversation/topicItem/audioAsset/AudioAsset.jsx
View File

@ -5,7 +5,7 @@ import { styles } from './AudioAsset.styled';
import audio from 'images/audio.png';
import Icons from '@expo/vector-icons/MaterialCommunityIcons';
export function AudioAsset({ topicId, asset, active, setActive }) {
export function AudioAsset({ topicId, asset, active, setActive, dismiss }) {
const { state, actions } = useAudioAsset(topicId, asset);
@ -28,6 +28,9 @@ export function AudioAsset({ topicId, asset, active, setActive }) {
<Icons name="play-circle-outline" size={92} color={Colors.white} />
</TouchableOpacity>
)}
<TouchableOpacity style={styles.close} onPress={dismiss}>
<Icons name="close" size={24} color={Colors.white} />
</TouchableOpacity>
</View>
);
}

9
app/mobile/src/session/conversation/topicItem/audioAsset/AudioAsset.styled.js
View File

@ -15,9 +15,16 @@ export const styles = StyleSheet.create({
fontSize: 20,
paddingTop: 8,
top: 0,
paddingLeft: 20,
paddingRight: 20,
},
control: {
position: 'absolute',
}
},
close: {
position: 'absolute',
top: 0,
right: 0,
},
})

2
app/mobile/src/session/conversation/topicItem/imageAsset/ImageAsset.jsx
View File

@ -7,7 +7,7 @@ export function ImageAsset({ topicId, asset, dismiss }) {
const { state, actions } = useImageAsset(topicId, asset);
return (
<TouchableOpacity onPress={dismiss}>
<TouchableOpacity activeOpacity={1} onPress={dismiss}>
<Image source={{ uri: state.url }} style={{ borderRadius: 4, width: state.imageWidth, height: state.imageHeight }} resizeMode={'cover'} />
</TouchableOpacity>
);

14
app/mobile/src/session/conversation/topicItem/videoAsset/VideoAsset.jsx
View File

@ -2,19 +2,27 @@ import { Image, View, TouchableOpacity } from 'react-native';
import Colors from 'constants/Colors';
import { Video, AVPlaybackStatus } from 'expo-av';
import { useVideoAsset } from './useVideoAsset.hook';
import GestureRecognizer from 'react-native-swipe-gestures';
import { styles } from './VideoAsset.styled';
import Icons from '@expo/vector-icons/MaterialCommunityIcons';
export function VideoAsset({ topicId, asset }) {
export function VideoAsset({ topicId, asset, dismiss }) {
const { state, actions } = useVideoAsset(topicId, asset);
return (
<>
<TouchableOpacity activeOpacity={1} onPress={actions.showClose}>
{ state.url && (
<Video source={{ uri: state.url }} style={{ width: state.width, height: state.height }} resizeMode={'cover'}
onReadyForDisplay={(e) => actions.setResolution(e.naturalSize.width, e.naturalSize.height)}
useNativeControls={state.controls} resizeMode="contain" />
)}
</>
{ state.closing && (
<TouchableOpacity style={styles.close} onPress={dismiss}>
<Icons name="close" size={24} color={Colors.white} />
</TouchableOpacity>
)}
</TouchableOpacity>
);
}

16
app/mobile/src/session/conversation/topicItem/videoAsset/VideoAsset.styled.js Normal file
View File

@ -0,0 +1,16 @@
import { StyleSheet } from 'react-native';
import { Colors } from 'constants/Colors';
export const styles = StyleSheet.create({
close: {
backgroundColor: 'rgba(0, 0, 0, 0.6)',
position: 'absolute',
alignSelf: 'center',
justifySelf: 'center',
borderBottomLeftRadius: 4,
borderBottomRightRadius: 4,
paddingLeft: 4,
paddingRight: 4,
},
})

11
app/mobile/src/session/conversation/topicItem/videoAsset/useVideoAsset.hook.js
View File

@ -13,8 +13,10 @@ export function useVideoAsset(topicId, asset) {
weight: 1,
url: null,
controls: false,
closing: false,
});
const closing = useRef(null);
const conversation = useContext(ConversationContext);
const dimensions = useWindowDimensions();
@ -50,7 +52,14 @@ export function useVideoAsset(topicId, asset) {
const actions = {
setResolution: (width, height) => {
updateState({ controls: true, videoRatio: width / height });
}
},
showClose: () => {
clearTimeout(closing.current);
updateState({ closing: true });
closing.current = setTimeout(() => {
updateState({ closing: false });
}, 2000);
},
};
return { state, actions };